claudeup 3.9.0 → 3.10.0

package/src/ui/screens/SkillsScreen.js

@@ -1,24 +1,25 @@
 import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
-import { useEffect, useCallback, useMemo } from "react";
+import { useEffect, useCallback, useMemo, useState, useRef } from "react";
 import { useApp, useModal } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 import { useKeyboard } from "../hooks/useKeyboard.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import { ScrollableList } from "../components/ScrollableList.js";
+import { EmptyFilterState } from "../components/EmptyFilterState.js";
 import { fetchAvailableSkills, fetchSkillFrontmatter, installSkill, uninstallSkill, } from "../../services/skills-manager.js";
+import { searchSkills } from "../../services/skillsmp-client.js";
 import { DEFAULT_SKILL_REPOS, RECOMMENDED_SKILLS } from "../../data/skill-repos.js";
-const CATEGORY_COLORS = {
-    recommended: "#2e7d32",
-    frontend: "#1565c0",
-    design: "#6a1b9a",
-    media: "#e65100",
-    security: "#b71c1c",
-    debugging: "#00838f",
-    database: "#4527a0",
-    search: "#4e342e",
-    general: "#333333",
-};
-const RECOMMENDED_NAMES = new Set(RECOMMENDED_SKILLS.map((r) => r.name));
+function formatStars(stars) {
+    if (!stars)
+        return "";
+    if (stars >= 1000000)
+        return `★ ${(stars / 1000000).toFixed(1)}M`;
+    if (stars >= 10000)
+        return `★ ${Math.round(stars / 1000)}K`;
+    if (stars >= 1000)
+        return `★ ${(stars / 1000).toFixed(1)}K`;
+    return `★ ${stars}`;
+}
 export function SkillsScreen() {
     const { state, dispatch } = useApp();
     const { skills: skillsState } = state;
@@ -44,64 +45,167 @@ export function SkillsScreen() {
     useEffect(() => {
         fetchData();
     }, [fetchData, state.dataRefreshVersion]);
-    // Build flat list: recommended first (as their own category), then by repo
-    const allItems = useMemo(() => {
+    // Remote search: query Firebase API when user types (debounced, cached)
+    const [searchResults, setSearchResults] = useState([]);
+    const [isSearchLoading, setIsSearchLoading] = useState(false);
+    const searchTimerRef = useRef(null);
+    const searchCacheRef = useRef(new Map());
+    useEffect(() => {
+        const query = skillsState.searchQuery.trim();
+        if (query.length < 2) {
+            setSearchResults([]);
+            setIsSearchLoading(false);
+            return;
+        }
+        // Check cache first
+        const cached = searchCacheRef.current.get(query);
+        if (cached) {
+            setSearchResults(cached);
+            setIsSearchLoading(false);
+            return;
+        }
+        setIsSearchLoading(true);
+        if (searchTimerRef.current)
+            clearTimeout(searchTimerRef.current);
+        searchTimerRef.current = setTimeout(async () => {
+            try {
+                const results = await searchSkills(query, { limit: 30 });
+                const mapped = results.map((r) => {
+                    const source = {
+                        label: r.repo || "unknown",
+                        repo: r.repo || "unknown",
+                        skillsPath: "",
+                    };
+                    return {
+                        id: `remote:${r.repo}/${r.skillPath}`,
+                        name: r.name,
+                        description: r.description || "",
+                        source,
+                        repoPath: r.skillPath ? `${r.skillPath}/SKILL.md` : "SKILL.md",
+                        gitBlobSha: "",
+                        frontmatter: null,
+                        installed: false,
+                        installedScope: null,
+                        hasUpdate: false,
+                        stars: r.stars,
+                    };
+                });
+                searchCacheRef.current.set(query, mapped);
+                setSearchResults(mapped);
+            }
+            catch {
+                setSearchResults([]);
+            }
+            setIsSearchLoading(false);
+        }, 400);
+        return () => {
+            if (searchTimerRef.current)
+                clearTimeout(searchTimerRef.current);
+        };
+    }, [skillsState.searchQuery]);
+    // Static recommended skills — always available, no API needed
+    const staticRecommended = useMemo(() => {
+        return RECOMMENDED_SKILLS.map((r) => ({
+            id: `rec:${r.repo}/${r.skillPath}`,
+            name: r.name,
+            description: r.description,
+            source: { label: r.repo, repo: r.repo, skillsPath: "" },
+            repoPath: `${r.skillPath}/SKILL.md`,
+            gitBlobSha: "",
+            frontmatter: null,
+            installed: false,
+            installedScope: null,
+            hasUpdate: false,
+            isRecommended: true,
+            stars: undefined,
+        }));
+    }, []);
+    // Merge static recommended with fetched data (to get install status + stars)
+    const mergedRecommended = useMemo(() => {
         if (skillsState.skills.status !== "success")
-            return [];
-        const skills = skillsState.skills.data;
+            return staticRecommended;
+        const fetched = skillsState.skills.data.filter((s) => s.isRecommended);
+        // Merge: keep fetched data (has stars + install status), fall back to static
+        return staticRecommended.map((staticSkill) => {
+            const match = fetched.find((f) => f.source.repo === staticSkill.source.repo && f.name === staticSkill.name);
+            return match || staticSkill;
+        });
+    }, [staticRecommended, skillsState.skills]);
+    // Build list: recommended always shown, then search results or popular
+    const allItems = useMemo(() => {
         const query = skillsState.searchQuery.toLowerCase();
-        const filtered = query
-            ? skills.filter((s) => s.name.toLowerCase().includes(query) ||
-                s.source.repo.toLowerCase().includes(query) ||
-                s.frontmatter?.description?.toLowerCase().includes(query))
-            : skills;
         const items = [];
-        // Recommended section
-        const recommendedSkills = filtered.filter((s) => RECOMMENDED_NAMES.has(s.name.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())) || RECOMMENDED_SKILLS.some((r) => r.skillPath === s.name));
-        if (recommendedSkills.length > 0) {
+        // ── RECOMMENDED: always shown, filtered when searching ──
+        const filteredRec = query
+            ? mergedRecommended.filter((s) => s.name.toLowerCase().includes(query) ||
+                (s.description || "").toLowerCase().includes(query))
+            : mergedRecommended;
+        items.push({
+            id: "cat:recommended",
+            type: "category",
+            label: "Recommended",
+            categoryKey: "recommended",
+        });
+        for (const skill of filteredRec) {
             items.push({
-                id: "cat:recommended",
-                type: "category",
-                label: "Recommended",
-                categoryKey: "recommended",
+                id: `skill:${skill.id}`,
+                type: "skill",
+                label: skill.name,
+                skill,
             });
-            for (const skill of recommendedSkills) {
-                items.push({
-                    id: `skill:${skill.id}`,
-                    type: "skill",
-                    label: skill.name,
-                    skill,
-                });
-            }
         }
-        // Group remaining skills by repo
-        const repoMap = new Map();
-        for (const skill of filtered) {
-            const isRec = recommendedSkills.includes(skill);
-            if (isRec)
-                continue;
-            const existing = repoMap.get(skill.source.repo) || [];
-            existing.push(skill);
-            repoMap.set(skill.source.repo, existing);
+        // ── SEARCH MODE ──
+        if (query.length >= 2) {
+            // Loading and no-results handled in listPanel, not as list items
+            if (!isSearchLoading && searchResults.length > 0) {
+                // Dedup against recommended
+                const recNames = new Set(mergedRecommended.map((s) => s.name));
+                const deduped = searchResults.filter((s) => !recNames.has(s.name));
+                if (deduped.length > 0) {
+                    items.push({
+                        id: "cat:search",
+                        type: "category",
+                        label: `Search (${deduped.length})`,
+                        categoryKey: "popular",
+                    });
+                    for (const skill of deduped) {
+                        items.push({
+                            id: `skill:${skill.id}`,
+                            type: "skill",
+                            label: skill.name,
+                            skill,
+                        });
+                    }
+                }
+            }
+            // No-results message handled in listPanel below, not as a list item
+            return items;
         }
-        for (const [repo, repoSkills] of repoMap) {
-            items.push({
-                id: `cat:${repo}`,
-                type: "category",
-                label: `${repo} (${repoSkills.length})`,
-                categoryKey: repo,
-            });
-            for (const skill of repoSkills) {
+        // ── POPULAR (default, no search query) ──
+        // Loading state handled in listPanel, not as category header
+        if (skillsState.skills.status === "success") {
+            const popularSkills = skillsState.skills.data
+                .filter((s) => !s.isRecommended)
+                .sort((a, b) => (b.stars ?? 0) - (a.stars ?? 0));
+            if (popularSkills.length > 0) {
                 items.push({
-                    id: `skill:${skill.id}`,
-                    type: "skill",
-                    label: skill.name,
-                    skill,
+                    id: "cat:popular",
+                    type: "category",
+                    label: "Popular",
+                    categoryKey: "popular",
                 });
+                for (const skill of popularSkills) {
+                    items.push({
+                        id: `skill:${skill.id}`,
+                        type: "skill",
+                        label: skill.name,
+                        skill,
+                    });
+                }
             }
         }
         return items;
-    }, [skillsState.skills, skillsState.searchQuery]);
+    }, [skillsState.skills, skillsState.searchQuery, searchResults, isSearchLoading, mergedRecommended]);
     const selectableItems = useMemo(() => allItems.filter((item) => item.type === "skill" || item.type === "category"), [allItems]);
     const selectedItem = selectableItems[skillsState.selectedIndex];
     const selectedSkill = selectedItem?.type === "skill" ? selectedItem.skill : undefined;
@@ -169,96 +273,99 @@ export function SkillsScreen() {
             await modal.message("Error", `Failed to uninstall: ${error}`, "error");
         }
     }, [selectedSkill, state.projectPath, dispatch, modal]);
-    // Keyboard handling
+    // Keyboard handling — same pattern as PluginsScreen
     useKeyboard((event) => {
         if (state.modal)
             return;
+        const hasQuery = skillsState.searchQuery.length > 0;
+        // Escape: clear search
+        if (event.name === "escape") {
+            if (hasQuery || isSearchActive) {
+                dispatch({ type: "SKILLS_SET_SEARCH", query: "" });
+                dispatch({ type: "SET_SEARCHING", isSearching: false });
+                dispatch({ type: "SKILLS_SELECT", index: 0 });
+            }
+            return;
+        }
+        // Backspace: remove last char
+        if (event.name === "backspace" || event.name === "delete") {
+            if (hasQuery) {
+                const newQuery = skillsState.searchQuery.slice(0, -1);
+                dispatch({ type: "SKILLS_SET_SEARCH", query: newQuery });
+                dispatch({ type: "SKILLS_SELECT", index: 0 });
+                if (!newQuery)
+                    dispatch({ type: "SET_SEARCHING", isSearching: false });
+            }
+            return;
+        }
+        // Navigation — always works; exits search mode on navigate
         if (event.name === "up" || event.name === "k") {
-            if (state.isSearching)
-                return;
+            if (isSearchActive)
+                dispatch({ type: "SET_SEARCHING", isSearching: false });
             const newIndex = Math.max(0, skillsState.selectedIndex - 1);
             dispatch({ type: "SKILLS_SELECT", index: newIndex });
+            return;
         }
-        else if (event.name === "down" || event.name === "j") {
-            if (state.isSearching)
-                return;
+        if (event.name === "down" || event.name === "j") {
+            if (isSearchActive)
+                dispatch({ type: "SET_SEARCHING", isSearching: false });
             const newIndex = Math.min(Math.max(0, selectableItems.length - 1), skillsState.selectedIndex + 1);
             dispatch({ type: "SKILLS_SELECT", index: newIndex });
+            return;
         }
-        else if (event.name === "u") {
-            if (state.isSearching)
+        // Enter — install (always works)
+        if (event.name === "return" || event.name === "enter") {
+            if (isSearchActive) {
+                dispatch({ type: "SET_SEARCHING", isSearching: false });
                 return;
-            if (selectedSkill) {
-                if (selectedSkill.installed && selectedSkill.installedScope === "user") {
-                    handleUninstall();
-                }
-                else {
-                    handleInstall("user");
-                }
             }
-        }
-        else if (event.name === "p") {
-            if (state.isSearching)
-                return;
-            if (selectedSkill) {
-                if (selectedSkill.installed && selectedSkill.installedScope === "project") {
-                    handleUninstall();
-                }
-                else {
-                    handleInstall("project");
-                }
-            }
-        }
-        else if (event.name === "return" || event.name === "enter") {
-            if (state.isSearching)
-                return;
             if (selectedSkill && !selectedSkill.installed) {
                 handleInstall("project");
             }
+            return;
         }
-        else if (event.name === "d") {
-            if (state.isSearching)
+        // When actively typing in search, letters go to the query
+        if (isSearchActive) {
+            if (event.name === "k" || event.name === "j") {
+                const delta = event.name === "k" ? -1 : 1;
+                const newIndex = Math.max(0, Math.min(selectableItems.length - 1, skillsState.selectedIndex + delta));
+                dispatch({ type: "SKILLS_SELECT", index: newIndex });
                 return;
-            if (selectedSkill?.installed) {
-                handleUninstall();
             }
+            if (event.name && event.name.length === 1 && !event.ctrl && !event.meta && !/[0-9]/.test(event.name)) {
+                dispatch({ type: "SKILLS_SET_SEARCH", query: skillsState.searchQuery + event.name });
+                dispatch({ type: "SKILLS_SELECT", index: 0 });
+            }
+            return;
         }
-        else if (event.name === "r") {
-            if (state.isSearching)
-                return;
-            fetchData();
+        // Action shortcuts (work when not actively typing, even with filter visible)
+        if (event.name === "u" && selectedSkill) {
+            if (selectedSkill.installed && selectedSkill.installedScope === "user")
+                handleUninstall();
+            else
+                handleInstall("user");
         }
-        else if (event.name === "escape") {
-            if (skillsState.searchQuery) {
-                dispatch({ type: "SKILLS_SET_SEARCH", query: "" });
-                dispatch({ type: "SET_SEARCHING", isSearching: false });
-            }
+        else if (event.name === "p" && selectedSkill) {
+            if (selectedSkill.installed && selectedSkill.installedScope === "project")
+                handleUninstall();
+            else
+                handleInstall("project");
         }
-        else if (event.name === "backspace") {
-            if (skillsState.searchQuery) {
-                const newQuery = skillsState.searchQuery.slice(0, -1);
-                dispatch({ type: "SKILLS_SET_SEARCH", query: newQuery });
-                if (!newQuery) {
-                    dispatch({ type: "SET_SEARCHING", isSearching: false });
-                }
-            }
+        else if (event.name === "d" && selectedSkill?.installed) {
+            handleUninstall();
         }
-        else if (event.name &&
-            event.name.length === 1 &&
-            !/[0-9]/.test(event.name) &&
-            !event.ctrl &&
-            !event.meta) {
-            // Inline search: type to filter
-            const newQuery = skillsState.searchQuery + event.name;
-            dispatch({ type: "SKILLS_SET_SEARCH", query: newQuery });
+        else if (event.name === "r") {
+            fetchData();
+        }
+        // "/" to enter search mode
+        else if (event.name === "/") {
             dispatch({ type: "SET_SEARCHING", isSearching: true });
         }
     });
     const renderListItem = (item, _idx, isSelected) => {
         if (item.type === "category") {
-            const catKey = item.categoryKey || "general";
-            const isRec = catKey === "recommended";
-            const bgColor = CATEGORY_COLORS[catKey] || CATEGORY_COLORS.general;
+            const isRec = item.categoryKey === "recommended";
+            const bgColor = isRec ? "green" : "cyan";
             const star = isRec ? "★ " : "";
             if (isSelected) {
                 return (_jsx("text", { bg: "magenta", fg: "white", children: _jsxs("strong", { children: [" ", star, item.label, " "] }) }));
@@ -269,16 +376,12 @@ export function SkillsScreen() {
             const skill = item.skill;
             const indicator = skill.installed ? "●" : "○";
             const indicatorColor = skill.installed ? "cyan" : "gray";
-            const scopeLabel = skill.installedScope
-                ? skill.installedScope === "user"
-                    ? "[u]"
-                    : "[p]"
-                : "   ";
-            const updateBadge = skill.hasUpdate ? "[UPDT] " : "";
+            const scopeTag = skill.installedScope === "user" ? "u" : skill.installedScope === "project" ? "p" : "";
+            const starsStr = formatStars(skill.stars);
             if (isSelected) {
-                return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", indicator, " ", scopeLabel, " ", updateBadge, skill.name.padEnd(30), skill.source.repo, " "] }));
+                return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", indicator, " ", skill.name, skill.hasUpdate ? " ⬆" : "", scopeTag ? ` [${scopeTag}]` : "", starsStr ? `  ${starsStr}` : "", " "] }));
             }
-            return (_jsxs("text", { children: [_jsxs("span", { fg: indicatorColor, children: [" ", indicator, " "] }), _jsx("span", { fg: skill.installedScope === "user" ? "cyan" : skill.installedScope === "project" ? "green" : "gray", children: scopeLabel }), _jsx("span", { children: " " }), skill.hasUpdate && (_jsx("span", { bg: "yellow", fg: "black", children: updateBadge })), _jsx("span", { fg: "white", children: skill.name.padEnd(30) }), _jsx("span", { fg: "gray", children: skill.source.repo })] }));
+            return (_jsxs("text", { children: [_jsxs("span", { fg: indicatorColor, children: [" ", indicator, " "] }), _jsx("span", { fg: "white", children: skill.name }), skill.hasUpdate && _jsx("span", { fg: "yellow", children: " \u2B06" }), scopeTag && (_jsxs("span", { fg: scopeTag === "u" ? "cyan" : "green", children: [" [", scopeTag, "]"] })), starsStr && (_jsxs("span", { fg: "yellow", children: ["  ", starsStr] }))] }));
         }
         return _jsx("text", { fg: "gray", children: item.label });
     };
@@ -287,39 +390,41 @@ export function SkillsScreen() {
             return _jsx("text", { fg: "gray", children: "Loading skills..." });
         }
         if (skillsState.skills.status === "error") {
-            return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "red", children: "Failed to load skills" }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: skillsState.skills.error.message }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: "Set GITHUB_TOKEN to increase rate limits." }) })] }));
+            return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "red", children: "Failed to load skills" }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: skillsState.skills.error.message }) })] }));
         }
         if (!selectedItem) {
             return _jsx("text", { fg: "gray", children: "Select a skill to see details" });
         }
         if (selectedItem.type === "category") {
-            const catKey = selectedItem.categoryKey || "general";
-            const color = CATEGORY_COLORS[catKey] ? "green" : "cyan";
-            return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: color, children: _jsx("strong", { children: selectedItem.label }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: "Skills in this category" }) })] }));
+            const isRec = selectedItem.categoryKey === "recommended";
+            const isNoResults = selectedItem.categoryKey === "no-results";
+            if (isNoResults) {
+                return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "yellow", children: _jsx("strong", { children: "No skills found" }) }), _jsx("box", { marginTop: 1, children: _jsxs("text", { fg: "gray", children: ["Nothing matched \"", skillsState.searchQuery, "\"."] }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: "Try a different search term, or if you think this is a mistake, create an issue at:" }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#5c9aff", children: "github.com/MadAppGang/magus/issues" }) }), _jsx("box", { marginTop: 2, children: _jsx("text", { fg: "gray", children: "Press Esc to clear the search." }) })] }));
+            }
+            return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: isRec ? "green" : "cyan", children: _jsxs("strong", { children: [isRec ? "★ " : "", selectedItem.label] }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: isRec ? "Curated skills recommended for most projects" : "Popular skills sorted by stars" }) })] }));
         }
         if (!selectedSkill)
             return null;
         const fm = selectedSkill.frontmatter;
+        const description = fm?.description || selectedSkill.description || "Loading...";
         const scopeColor = selectedSkill.installedScope === "user" ? "cyan" : "green";
-        return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "cyan", children: _jsx("strong", { children: selectedSkill.name }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "white", children: fm ? fm.description : "Loading..." }) }), fm?.category && (_jsx("box", { marginTop: 1, children: _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Category  " }), _jsx("span", { fg: "cyan", children: fm.category })] }) })), fm?.author && (_jsx("box", { children: _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Author    " }), _jsx("span", { children: fm.author })] }) })), fm?.version && (_jsx("box", { children: _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Version   " }), _jsx("span", { children: fm.version })] }) })), fm?.tags && fm.tags.length > 0 && (_jsx("box", { children: _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Tags      " }), _jsx("span", { children: fm.tags.join(", ") })] }) })), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Source    " }), _jsx("span", { fg: "#5c9aff", children: selectedSkill.source.repo })] }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "          " }), _jsx("span", { fg: "gray", children: selectedSkill.repoPath })] })] }), selectedSkill.installed && selectedSkill.installedScope && (_jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsx("text", { children: "─".repeat(24) }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Installed " }), _jsxs("span", { fg: scopeColor, children: [selectedSkill.installedScope === "user"
+        const starsStr = formatStars(selectedSkill.stars);
+        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("text", { fg: "cyan", children: [_jsx("strong", { children: selectedSkill.name }), starsStr && _jsxs("span", { fg: "yellow", children: ["  ", starsStr] })] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "white", children: description }) }), fm?.category && (_jsx("box", { marginTop: 1, children: _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Category  " }), _jsx("span", { fg: "cyan", children: fm.category })] }) })), fm?.author && (_jsx("box", { children: _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Author    " }), _jsx("span", { children: fm.author })] }) })), fm?.version && (_jsx("box", { children: _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Version   " }), _jsx("span", { children: fm.version })] }) })), fm?.tags && fm.tags.length > 0 && (_jsx("box", { children: _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Tags      " }), _jsx("span", { children: fm.tags.join(", ") })] }) })), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Source    " }), _jsx("span", { fg: "#5c9aff", children: selectedSkill.source.repo })] }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "          " }), _jsx("span", { fg: "gray", children: selectedSkill.repoPath })] })] }), selectedSkill.installed && selectedSkill.installedScope && (_jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsx("text", { children: "─".repeat(24) }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Installed " }), _jsxs("span", { fg: scopeColor, children: [selectedSkill.installedScope === "user"
                                             ? "~/.claude/skills/"
                                             : ".claude/skills/", selectedSkill.name, "/"] })] })] })), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsx("text", { children: "─".repeat(24) }), _jsx("text", { children: _jsx("strong", { children: "Install scope:" }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsx("span", { bg: "cyan", fg: "black", children: " u " }), _jsx("span", { fg: selectedSkill.installedScope === "user" ? "cyan" : "gray", children: selectedSkill.installedScope === "user" ? " ● " : " ○ " }), _jsx("span", { fg: "cyan", children: "User" }), _jsx("span", { fg: "gray", children: " ~/.claude/skills/" })] }), _jsxs("text", { children: [_jsx("span", { bg: "green", fg: "black", children: " p " }), _jsx("span", { fg: selectedSkill.installedScope === "project" ? "green" : "gray", children: selectedSkill.installedScope === "project" ? " ● " : " ○ " }), _jsx("span", { fg: "green", children: "Project" }), _jsx("span", { fg: "gray", children: " .claude/skills/" })] })] })] }), selectedSkill.hasUpdate && (_jsx("box", { marginTop: 1, children: _jsx("text", { bg: "yellow", fg: "black", children: " UPDATE AVAILABLE " }) })), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [!selectedSkill.installed && (_jsx("text", { fg: "gray", children: "Press u/p to install in scope" })), selectedSkill.installed && (_jsx("text", { fg: "gray", children: "Press d to uninstall" }))] })] }));
     };
     const skills = skillsState.skills.status === "success" ? skillsState.skills.data : [];
     const installedCount = skills.filter((s) => s.installed).length;
-    const totalCount = skills.length;
-    const updateCount = skills.filter((s) => s.hasUpdate).length;
-    const statusContent = (_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Skills: " }), _jsxs("span", { fg: "cyan", children: [installedCount, " installed"] }), _jsxs("span", { fg: "gray", children: [" \u2502 ", totalCount, " available"] }), updateCount > 0 && (_jsxs("span", { fg: "yellow", children: [" \u2502 ", updateCount, " updates"] }))] }));
+    const query = skillsState.searchQuery.trim();
+    const statusContent = (_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Skills: " }), _jsxs("span", { fg: "cyan", children: [installedCount, " installed"] }), query.length >= 2 && isSearchLoading && (_jsx("span", { fg: "yellow", children: " \u2502 searching..." })), query.length >= 2 && !isSearchLoading && searchResults.length > 0 && (_jsxs("span", { fg: "green", children: [" \u2502 ", searchResults.length, " found"] })), !query && (_jsx("span", { fg: "gray", children: " \u2502 89K+ searchable" }))] }));
     return (_jsx(ScreenLayout, { title: "claudeup Skills", currentScreen: "skills", statusLine: statusContent, search: skillsState.searchQuery || isSearchActive
             ? {
                 isActive: isSearchActive,
                 query: skillsState.searchQuery,
                 placeholder: "type to search",
             }
-            : undefined, footerHints: "\u2191\u2193:nav \u2502 u:user scope \u2502 p:project scope \u2502 Enter:install \u2502 d:uninstall \u2502 type to search", listPanel: skillsState.skills.status !== "success" ? (_jsx("text", { fg: "gray", children: skillsState.skills.status === "loading"
-                ? "Loading skills..."
-                : skillsState.skills.status === "error"
-                    ? "Error loading skills"
-                    : "Press r to load skills" })) : (_jsx(ScrollableList, { items: selectableItems, selectedIndex: skillsState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight })), detailPanel: renderDetail() }));
+            : undefined, footerHints: isSearchActive
+            ? "type to filter │ Enter:done │ Esc:clear"
+            : "u:user │ p:project │ d:uninstall │ /:search", listPanel: _jsxs("box", { flexDirection: "column", children: [_jsx(ScrollableList, { items: selectableItems, selectedIndex: skillsState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), !query && skillsState.skills.status === "loading" && (_jsx("box", { marginTop: 2, paddingLeft: 2, children: _jsx("text", { fg: "yellow", children: "Loading popular skills..." }) })), query.length >= 2 && isSearchLoading && (_jsx("box", { marginTop: 2, paddingLeft: 2, children: _jsxs("text", { fg: "yellow", children: ["Searching for \"", skillsState.searchQuery, "\"..."] }) })), query.length >= 2 && !isSearchLoading && searchResults.length === 0 && (_jsx(EmptyFilterState, { query: skillsState.searchQuery, entityName: "skills" }))] }), detailPanel: renderDetail() }));
 }
 export default SkillsScreen;