claudeup 3.8.0 → 3.10.0

package/src/ui/screens/SkillsScreen.js

@@ -0,0 +1,430 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+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";
+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;
+    const modal = useModal();
+    const dimensions = useDimensions();
+    const isSearchActive = state.isSearching &&
+        state.currentRoute.screen === "skills" &&
+        !state.modal;
+    // Fetch data
+    const fetchData = useCallback(async () => {
+        dispatch({ type: "SKILLS_DATA_LOADING" });
+        try {
+            const skills = await fetchAvailableSkills(DEFAULT_SKILL_REPOS, state.projectPath);
+            dispatch({ type: "SKILLS_DATA_SUCCESS", skills });
+        }
+        catch (error) {
+            dispatch({
+                type: "SKILLS_DATA_ERROR",
+                error: error instanceof Error ? error : new Error(String(error)),
+            });
+        }
+    }, [dispatch, state.projectPath]);
+    useEffect(() => {
+        fetchData();
+    }, [fetchData, state.dataRefreshVersion]);
+    // 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 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",
+                });
+                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
+    useEffect(() => {
+        if (!selectedSkill || selectedSkill.frontmatter)
+            return;
+        fetchSkillFrontmatter(selectedSkill).then((fm) => {
+            dispatch({
+                type: "SKILLS_UPDATE_ITEM",
+                name: selectedSkill.name,
+                updates: { frontmatter: fm },
+            });
+        }).catch(() => { });
+    }, [selectedSkill?.id, dispatch]);
+    // Install handler
+    const handleInstall = useCallback(async (scope) => {
+        if (!selectedSkill)
+            return;
+        modal.loading(`Installing ${selectedSkill.name}...`);
+        try {
+            await installSkill(selectedSkill, scope, state.projectPath);
+            modal.hideModal();
+            dispatch({
+                type: "SKILLS_UPDATE_ITEM",
+                name: selectedSkill.name,
+                updates: {
+                    installed: true,
+                    installedScope: scope,
+                },
+            });
+            await modal.message("Installed", `${selectedSkill.name} installed to ${scope === "user" ? "~/.claude/skills/" : ".claude/skills/"}`, "success");
+        }
+        catch (error) {
+            modal.hideModal();
+            await modal.message("Error", `Failed to install: ${error}`, "error");
+        }
+    }, [selectedSkill, state.projectPath, dispatch, modal]);
+    // Uninstall handler
+    const handleUninstall = useCallback(async () => {
+        if (!selectedSkill || !selectedSkill.installed)
+            return;
+        const scope = selectedSkill.installedScope;
+        if (!scope)
+            return;
+        const confirmed = await modal.confirm(`Uninstall "${selectedSkill.name}"?`, `This will remove it from the ${scope} scope.`);
+        if (!confirmed)
+            return;
+        modal.loading(`Uninstalling ${selectedSkill.name}...`);
+        try {
+            await uninstallSkill(selectedSkill.name, scope, state.projectPath);
+            modal.hideModal();
+            dispatch({
+                type: "SKILLS_UPDATE_ITEM",
+                name: selectedSkill.name,
+                updates: {
+                    installed: false,
+                    installedScope: null,
+                },
+            });
+            await modal.message("Uninstalled", `${selectedSkill.name} removed.`, "success");
+        }
+        catch (error) {
+            modal.hideModal();
+            await modal.message("Error", `Failed to uninstall: ${error}`, "error");
+        }
+    }, [selectedSkill, state.projectPath, dispatch, modal]);
+    // 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 (isSearchActive)
+                dispatch({ type: "SET_SEARCHING", isSearching: false });
+            const newIndex = Math.max(0, skillsState.selectedIndex - 1);
+            dispatch({ type: "SKILLS_SELECT", index: newIndex });
+            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;
+        }
+        // Enter — install (always works)
+        if (event.name === "return" || event.name === "enter") {
+            if (isSearchActive) {
+                dispatch({ type: "SET_SEARCHING", isSearching: false });
+                return;
+            }
+            if (selectedSkill && !selectedSkill.installed) {
+                handleInstall("project");
+            }
+            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));
+                dispatch({ type: "SKILLS_SELECT", index: newIndex });
+                return;
+            }
+            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;
+        }
+        // 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 === "p" && selectedSkill) {
+            if (selectedSkill.installed && selectedSkill.installedScope === "project")
+                handleUninstall();
+            else
+                handleInstall("project");
+        }
+        else if (event.name === "d" && selectedSkill?.installed) {
+            handleUninstall();
+        }
+        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 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 indicator = skill.installed ? "●" : "○";
+            const indicatorColor = skill.installed ? "cyan" : "gray";
+            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, " ", skill.name, skill.hasUpdate ? " ⬆" : "", scopeTag ? ` [${scopeTag}]` : "", starsStr ? `  ${starsStr}` : "", " "] }));
+            }
+            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 });
+    };
+    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" }))] })] }));
+    };
+    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" }))] }));
+    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: 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;