claudeup 3.7.2 → 3.9.0

package/src/ui/screens/SkillsScreen.js

@@ -0,0 +1,325 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { useEffect, useCallback, useMemo } 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 { fetchAvailableSkills, fetchSkillFrontmatter, installSkill, uninstallSkill, } from "../../services/skills-manager.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));
+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]);
+    // Build flat list: recommended first (as their own category), then by repo
+    const allItems = useMemo(() => {
+        if (skillsState.skills.status !== "success")
+            return [];
+        const skills = skillsState.skills.data;
+        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) {
+            items.push({
+                id: "cat:recommended",
+                type: "category",
+                label: "Recommended",
+                categoryKey: "recommended",
+            });
+            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);
+        }
+        for (const [repo, repoSkills] of repoMap) {
+            items.push({
+                id: `cat:${repo}`,
+                type: "category",
+                label: `${repo} (${repoSkills.length})`,
+                categoryKey: repo,
+            });
+            for (const skill of repoSkills) {
+                items.push({
+                    id: `skill:${skill.id}`,
+                    type: "skill",
+                    label: skill.name,
+                    skill,
+                });
+            }
+        }
+        return items;
+    }, [skillsState.skills, skillsState.searchQuery]);
+    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
+    useKeyboard((event) => {
+        if (state.modal)
+            return;
+        if (event.name === "up" || event.name === "k") {
+            if (state.isSearching)
+                return;
+            const newIndex = Math.max(0, skillsState.selectedIndex - 1);
+            dispatch({ type: "SKILLS_SELECT", index: newIndex });
+        }
+        else if (event.name === "down" || event.name === "j") {
+            if (state.isSearching)
+                return;
+            const newIndex = Math.min(Math.max(0, selectableItems.length - 1), skillsState.selectedIndex + 1);
+            dispatch({ type: "SKILLS_SELECT", index: newIndex });
+        }
+        else if (event.name === "u") {
+            if (state.isSearching)
+                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");
+            }
+        }
+        else if (event.name === "d") {
+            if (state.isSearching)
+                return;
+            if (selectedSkill?.installed) {
+                handleUninstall();
+            }
+        }
+        else if (event.name === "r") {
+            if (state.isSearching)
+                return;
+            fetchData();
+        }
+        else if (event.name === "escape") {
+            if (skillsState.searchQuery) {
+                dispatch({ type: "SKILLS_SET_SEARCH", query: "" });
+                dispatch({ type: "SET_SEARCHING", isSearching: false });
+            }
+        }
+        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 &&
+            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 });
+            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 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 scopeLabel = skill.installedScope
+                ? skill.installedScope === "user"
+                    ? "[u]"
+                    : "[p]"
+                : "   ";
+            const updateBadge = skill.hasUpdate ? "[UPDT] " : "";
+            if (isSelected) {
+                return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", indicator, " ", scopeLabel, " ", updateBadge, skill.name.padEnd(30), skill.source.repo, " "] }));
+            }
+            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 _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 }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: "Set GITHUB_TOKEN to increase rate limits." }) })] }));
+        }
+        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" }) })] }));
+        }
+        if (!selectedSkill)
+            return null;
+        const fm = selectedSkill.frontmatter;
+        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"
+                                            ? "~/.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"] }))] }));
+    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() }));
+}
+export default SkillsScreen;