claudeup 3.13.0 → 3.15.0

package/src/ui/screens/SkillsScreen.js

@@ -1,5 +1,8 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
 import { useEffect, useCallback, useMemo, useState, useRef } from "react";
+import os from "node:os";
+import path from "node:path";
+import fs from "fs-extra";
 import { useApp, useModal } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 import { useKeyboard } from "../hooks/useKeyboard.js";
@@ -9,17 +12,8 @@ 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";
-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}`;
-}
+import { buildSkillBrowserItems } from "../adapters/skillsAdapter.js";
+import { renderSkillRow, renderSkillDetail } from "../renderers/skillRenderers.js";
 export function SkillsScreen() {
     const { state, dispatch } = useApp();
     const { skills: skillsState } = state;
@@ -28,7 +22,7 @@ export function SkillsScreen() {
     const isSearchActive = state.isSearching &&
         state.currentRoute.screen === "skills" &&
         !state.modal;
-    // Fetch data
+    // ── Data fetching ─────────────────────────────────────────────────────────
     const fetchData = useCallback(async () => {
         dispatch({ type: "SKILLS_DATA_LOADING" });
         try {
@@ -45,7 +39,7 @@ export function SkillsScreen() {
     useEffect(() => {
         fetchData();
     }, [fetchData, state.dataRefreshVersion]);
-    // Remote search: query Firebase API when user types (debounced, cached)
+    // ── Remote search (debounced, cached) ─────────────────────────────────────
     const [searchResults, setSearchResults] = useState([]);
     const [isSearchLoading, setIsSearchLoading] = useState(false);
     const searchTimerRef = useRef(null);
@@ -57,7 +51,6 @@ export function SkillsScreen() {
             setIsSearchLoading(false);
             return;
         }
-        // Check cache first
         const cached = searchCacheRef.current.get(query);
         if (cached) {
             setSearchResults(cached);
@@ -103,113 +96,113 @@ export function SkillsScreen() {
                 clearTimeout(searchTimerRef.current);
         };
     }, [skillsState.searchQuery]);
-    // Static recommended skills — always available, no API needed
+    // ── Disk scan for installed skills ────────────────────────────────────────
+    const [installedFromDisk, setInstalledFromDisk] = useState({ user: new Set(), project: new Set() });
+    useEffect(() => {
+        async function scanDisk() {
+            const user = new Set();
+            const project = new Set();
+            const userDir = path.join(os.homedir(), ".claude", "skills");
+            const projDir = path.join(state.projectPath || process.cwd(), ".claude", "skills");
+            for (const [dir, set] of [[userDir, user], [projDir, project]]) {
+                try {
+                    if (await fs.pathExists(dir)) {
+                        const entries = await fs.readdir(dir);
+                        for (const e of entries) {
+                            if (await fs.pathExists(path.join(dir, e, "SKILL.md")))
+                                set.add(e);
+                        }
+                    }
+                }
+                catch { /* ignore */ }
+            }
+            setInstalledFromDisk({ user, project });
+        }
+        scanDisk();
+    }, [state.projectPath, state.dataRefreshVersion]);
+    // ── Derived data ──────────────────────────────────────────────────────────
     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)
+        return RECOMMENDED_SKILLS.map((r) => {
+            const slug = r.name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+            const isUser = installedFromDisk.user.has(slug) || installedFromDisk.user.has(r.name);
+            const isProj = installedFromDisk.project.has(slug) || installedFromDisk.project.has(r.name);
+            return {
+                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: isUser || isProj,
+                installedScope: isProj ? "project" : isUser ? "user" : null,
+                hasUpdate: false,
+                isRecommended: true,
+                stars: undefined,
+            };
+        });
+    }, [installedFromDisk]);
     const mergedRecommended = useMemo(() => {
         if (skillsState.skills.status !== "success")
             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 items = [];
-        // ── 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: `skill:${skill.id}`,
-                type: "skill",
-                label: skill.name,
-                skill,
-            });
-        }
-        // ── 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;
-        }
-        // ── 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: "cat:popular",
-                    type: "category",
-                    label: "Popular",
-                    categoryKey: "popular",
+    const installedSkills = useMemo(() => {
+        const all = [];
+        for (const [scope, names] of [
+            ["user", installedFromDisk.user],
+            ["project", installedFromDisk.project],
+        ]) {
+            for (const name of names) {
+                if (all.some((s) => s.name === name))
+                    continue;
+                all.push({
+                    id: `installed:${scope}/${name}`,
+                    name,
+                    description: "",
+                    source: { label: "local", repo: "local", skillsPath: "" },
+                    repoPath: "",
+                    gitBlobSha: "",
+                    frontmatter: null,
+                    installed: true,
+                    installedScope: scope,
+                    hasUpdate: false,
+                    stars: undefined,
                 });
-                for (const skill of popularSkills) {
-                    items.push({
-                        id: `skill:${skill.id}`,
-                        type: "skill",
-                        label: skill.name,
-                        skill,
-                    });
-                }
             }
         }
-        return items;
-    }, [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;
-    // Lazy-load frontmatter for selected skill
+        return all;
+    }, [installedFromDisk]);
+    const popularSkills = useMemo(() => {
+        if (skillsState.skills.status !== "success")
+            return [];
+        return skillsState.skills.data
+            .filter((s) => !s.isRecommended)
+            .sort((a, b) => (b.stars ?? 0) - (a.stars ?? 0));
+    }, [skillsState.skills]);
+    // ── List items (built by adapter) ─────────────────────────────────────────
+    const allItems = useMemo(() => buildSkillBrowserItems({
+        recommended: mergedRecommended,
+        popular: popularSkills,
+        installed: installedSkills,
+        searchResults,
+        query: skillsState.searchQuery,
+        isSearchLoading,
+    }), [
+        mergedRecommended,
+        popularSkills,
+        installedSkills,
+        searchResults,
+        skillsState.searchQuery,
+        isSearchLoading,
+    ]);
+    const selectedItem = allItems[skillsState.selectedIndex];
+    const selectedSkill = selectedItem?.kind === "skill" ? selectedItem.skill : undefined;
+    // ── Lazy-load frontmatter for selected skill ───────────────────────────────
     useEffect(() => {
         if (!selectedSkill || selectedSkill.frontmatter)
             return;
@@ -221,7 +214,7 @@ export function SkillsScreen() {
             });
         }).catch(() => { });
     }, [selectedSkill?.id, dispatch]);
-    // Install handler
+    // ── Action handlers ───────────────────────────────────────────────────────
     const handleInstall = useCallback(async (scope) => {
         if (!selectedSkill)
             return;
@@ -229,7 +222,6 @@ export function SkillsScreen() {
         try {
             await installSkill(selectedSkill, scope, state.projectPath);
             modal.hideModal();
-            // Refetch to pick up install status for all skills including recommended
             await fetchData();
             await modal.message("Installed", `${selectedSkill.name} installed to ${scope === "user" ? "~/.claude/skills/" : ".claude/skills/"}`, "success");
         }
@@ -238,7 +230,6 @@ export function SkillsScreen() {
             await modal.message("Error", `Failed to install: ${error}`, "error");
         }
     }, [selectedSkill, state.projectPath, dispatch, modal, fetchData]);
-    // Uninstall handler
     const handleUninstall = useCallback(async () => {
         if (!selectedSkill || !selectedSkill.installed)
             return;
@@ -252,7 +243,6 @@ export function SkillsScreen() {
         try {
             await uninstallSkill(selectedSkill.name, scope, state.projectPath);
             modal.hideModal();
-            // Refetch to pick up uninstall status
             await fetchData();
             await modal.message("Uninstalled", `${selectedSkill.name} removed.`, "success");
         }
@@ -261,12 +251,11 @@ export function SkillsScreen() {
             await modal.message("Error", `Failed to uninstall: ${error}`, "error");
         }
     }, [selectedSkill, state.projectPath, dispatch, modal, fetchData]);
-    // Keyboard handling — same pattern as PluginsScreen
+    // ── Keyboard handling ─────────────────────────────────────────────────────
     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: "" });
@@ -275,7 +264,6 @@ export function SkillsScreen() {
             }
             return;
         }
-        // Backspace: remove last char
         if (event.name === "backspace" || event.name === "delete") {
             if (hasQuery) {
                 const newQuery = skillsState.searchQuery.slice(0, -1);
@@ -286,7 +274,6 @@ export function SkillsScreen() {
             }
             return;
         }
-        // Navigation — always works; exits search mode on navigate
         if (event.name === "up" || event.name === "k") {
             if (isSearchActive)
                 dispatch({ type: "SET_SEARCHING", isSearching: false });
@@ -297,11 +284,10 @@ export function SkillsScreen() {
         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);
+            const newIndex = Math.min(Math.max(0, allItems.length - 1), skillsState.selectedIndex + 1);
             dispatch({ type: "SKILLS_SELECT", index: newIndex });
             return;
         }
-        // Enter — install (always works)
         if (event.name === "return" || event.name === "enter") {
             if (isSearchActive) {
                 dispatch({ type: "SET_SEARCHING", isSearching: false });
@@ -312,11 +298,10 @@ export function SkillsScreen() {
             }
             return;
         }
-        // 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));
+                const newIndex = Math.max(0, Math.min(allItems.length - 1, skillsState.selectedIndex + delta));
                 dispatch({ type: "SKILLS_SELECT", index: newIndex });
                 return;
             }
@@ -326,7 +311,6 @@ export function SkillsScreen() {
             }
             return;
         }
-        // Action shortcuts (work when not actively typing, even with filter visible)
         if (event.name === "u" && selectedSkill) {
             if (selectedSkill.installed && selectedSkill.installedScope === "user")
                 handleUninstall();
@@ -345,67 +329,29 @@ export function SkillsScreen() {
         else if (event.name === "r") {
             fetchData();
         }
-        // "/" to enter search mode
+        else if (event.name === "o" && selectedSkill) {
+            const repo = selectedSkill.source.repo;
+            const repoPath = selectedSkill.repoPath?.replace("/SKILL.md", "") || "";
+            if (repo && repo !== "local") {
+                const url = `https://github.com/${repo}/tree/main/${repoPath}`;
+                import("node:child_process").then(({ execSync: exec }) => {
+                    try {
+                        exec(`open "${url}"`);
+                    }
+                    catch { /* ignore */ }
+                });
+            }
+        }
         else if (event.name === "/") {
             dispatch({ type: "SET_SEARCHING", isSearching: true });
         }
     });
-    const renderListItem = (item, _idx, isSelected) => {
-        if (item.type === "category") {
-            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, " "] }) }));
-            }
-            return (_jsx("text", { bg: bgColor, fg: "white", children: _jsxs("strong", { children: [" ", star, item.label, " "] }) }));
-        }
-        if (item.type === "skill" && item.skill) {
-            const skill = item.skill;
-            const starsStr = formatStars(skill.stars);
-            const hasUser = skill.installedScope === "user";
-            const hasProject = skill.installedScope === "project";
-            const nameColor = skill.installed ? "white" : "gray";
-            if (isSelected) {
-                const scopeStr = `[${hasUser ? "u" : "."}${hasProject ? "p" : "."}]`;
-                return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", scopeStr, " ", skill.name, skill.hasUpdate ? " ⬆" : "", starsStr ? `  ${starsStr}` : "", " "] }));
-            }
-            return (_jsxs("text", { children: [_jsx("span", { fg: "#555555", children: " [" }), _jsx("span", { fg: hasUser ? "cyan" : "#555555", children: hasUser ? "u" : "." }), _jsx("span", { fg: hasProject ? "green" : "#555555", children: hasProject ? "p" : "." }), _jsx("span", { fg: "#555555", children: "] " }), _jsx("span", { fg: nameColor, children: skill.name }), skill.hasUpdate && _jsx("span", { fg: "yellow", children: " \u2B06" }), starsStr && (_jsxs("span", { fg: "yellow", children: ["  ", starsStr] }))] }));
-        }
-        return _jsx("text", { fg: "gray", children: item.label });
-    };
-    const renderDetail = () => {
-        if (skillsState.skills.status === "loading") {
-            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 }) })] }));
-        }
-        if (!selectedItem) {
-            return _jsx("text", { fg: "gray", children: "Select a skill to see details" });
-        }
-        if (selectedItem.type === "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";
-        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" }))] })] }));
-    };
+    // ── Status line ───────────────────────────────────────────────────────────
     const skills = skillsState.skills.status === "success" ? skillsState.skills.data : [];
     const installedCount = skills.filter((s) => s.installed).length;
     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" }))] }));
+    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" })] }));
+    // ── Render ────────────────────────────────────────────────────────────────
     return (_jsx(ScreenLayout, { title: "claudeup Skills", currentScreen: "skills", statusLine: statusContent, search: skillsState.searchQuery || isSearchActive
             ? {
                 isActive: isSearchActive,
@@ -414,6 +360,6 @@ export function SkillsScreen() {
             }
             : 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() }));
+            : "u:user │ p:project │ o:open │ /:search", listPanel: _jsxs("box", { flexDirection: "column", children: [_jsx(ScrollableList, { items: allItems, selectedIndex: skillsState.selectedIndex, renderItem: renderSkillRow, 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: renderSkillDetail(selectedItem) }));
 }
 export default SkillsScreen;