claudeup 3.14.0 → 3.16.0

package/src/ui/screens/SkillsScreen.js

@@ -1,4 +1,4 @@
-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";
@@ -12,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;
@@ -31,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 {
@@ -48,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);
@@ -60,7 +51,6 @@ export function SkillsScreen() {
             setIsSearchLoading(false);
             return;
         }
-        // Check cache first
         const cached = searchCacheRef.current.get(query);
         if (cached) {
             setSearchResults(cached);
@@ -106,7 +96,7 @@ export function SkillsScreen() {
                 clearTimeout(searchTimerRef.current);
         };
     }, [skillsState.searchQuery]);
-    // Scan installed skills from disk (instant, no API)
+    // ── Disk scan for installed skills ────────────────────────────────────────
     const [installedFromDisk, setInstalledFromDisk] = useState({ user: new Set(), project: new Set() });
     useEffect(() => {
         async function scanDisk() {
@@ -130,8 +120,7 @@ export function SkillsScreen() {
         }
         scanDisk();
     }, [state.projectPath, state.dataRefreshVersion]);
-    // Static recommended skills — always available, no API needed
-    // Enriched with disk-based install status immediately
+    // ── Derived data ──────────────────────────────────────────────────────────
     const staticRecommended = useMemo(() => {
         return RECOMMENDED_SKILLS.map((r) => {
             const slug = r.name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
@@ -149,22 +138,22 @@ export function SkillsScreen() {
                 installedScope: isProj ? "project" : isUser ? "user" : null,
                 hasUpdate: false,
                 isRecommended: true,
-                stars: undefined,
+                stars: r.stars,
             };
         });
     }, [installedFromDisk]);
-    // 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;
+            if (!match)
+                return staticSkill;
+            // Merge: prefer fetched data but keep static stars as fallback
+            return { ...staticSkill, ...match, stars: match.stars || staticSkill.stars };
         });
     }, [staticRecommended, skillsState.skills]);
-    // Build installed skills list from disk (always available)
     const installedSkills = useMemo(() => {
         const all = [];
         for (const [scope, names] of [
@@ -172,7 +161,6 @@ export function SkillsScreen() {
             ["project", installedFromDisk.project],
         ]) {
             for (const name of names) {
-                // Skip if already in the list (avoid dupes)
                 if (all.some((s) => s.name === name))
                     continue;
                 all.push({
@@ -192,105 +180,32 @@ export function SkillsScreen() {
         }
         return all;
     }, [installedFromDisk]);
-    // Build list: installed first, then recommended, then search/popular
-    const allItems = useMemo(() => {
-        const query = skillsState.searchQuery.toLowerCase();
-        const items = [];
-        // ── INSTALLED: always shown at top (if any) ──
-        const installedFiltered = query
-            ? installedSkills.filter((s) => s.name.toLowerCase().includes(query))
-            : installedSkills;
-        if (installedFiltered.length > 0) {
-            items.push({
-                id: "cat:installed",
-                type: "category",
-                label: `Installed (${installedFiltered.length})`,
-                categoryKey: "installed",
-            });
-            for (const skill of installedFiltered) {
-                items.push({
-                    id: `skill:${skill.id}`,
-                    type: "skill",
-                    label: skill.name,
-                    skill,
-                });
-            }
-        }
-        // ── 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
+    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;
@@ -302,7 +217,7 @@ export function SkillsScreen() {
             });
         }).catch(() => { });
     }, [selectedSkill?.id, dispatch]);
-    // Install handler
+    // ── Action handlers ───────────────────────────────────────────────────────
     const handleInstall = useCallback(async (scope) => {
         if (!selectedSkill)
             return;
@@ -310,7 +225,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");
         }
@@ -319,7 +233,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;
@@ -333,7 +246,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");
         }
@@ -342,12 +254,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: "" });
@@ -356,7 +267,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);
@@ -367,7 +277,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 });
@@ -378,11 +287,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 });
@@ -393,11 +301,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;
             }
@@ -407,7 +314,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();
@@ -420,14 +326,10 @@ export function SkillsScreen() {
             else
                 handleInstall("project");
         }
-        else if (event.name === "d" && selectedSkill?.installed) {
-            handleUninstall();
-        }
         else if (event.name === "r") {
             fetchData();
         }
         else if (event.name === "o" && selectedSkill) {
-            // Open in browser
             const repo = selectedSkill.source.repo;
             const repoPath = selectedSkill.repoPath?.replace("/SKILL.md", "") || "";
             if (repo && repo !== "local") {
@@ -440,67 +342,16 @@ export function SkillsScreen() {
                 });
             }
         }
-        // "/" 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 isInstalled = item.categoryKey === "installed";
-            const bgColor = isInstalled ? "#7e57c2" : isRec ? "#2e7d32" : "#00695c";
-            const star = isRec ? "★ " : isInstalled ? "● " : "";
-            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) {
-                return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", _jsx("span", { children: hasUser ? "■" : "□" }), _jsx("span", { children: hasProject ? "■" : "□" }), " ", skill.name, skill.hasUpdate ? " ⬆" : "", starsStr ? `  ${starsStr}` : "", " "] }));
-            }
-            return (_jsxs("text", { children: [_jsx("span", { children: " " }), _jsx("span", { fg: hasUser ? "cyan" : "#333333", children: "\u25A0" }), _jsx("span", { fg: hasProject ? "green" : "#333333", children: "\u25A0" }), _jsx("span", { 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,
@@ -509,6 +360,6 @@ export function SkillsScreen() {
             }
             : undefined, footerHints: isSearchActive
             ? "type to filter │ Enter:done │ Esc:clear"
-            : "u:user │ p:project │ o:open │ /: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;