claudeup 4.5.5 → 4.6.1

package/src/ui/adapters/skillsAdapter.ts

@@ -1,4 +1,4 @@
-import type { SkillInfo } from "../../types/index.js";
+import type { SkillInfo, SkillSetInfo } from "../../types/index.js";
 
 // ─── Item types ───────────────────────────────────────────────────────────────
 
@@ -19,9 +19,19 @@ export interface SkillSkillItem {
   kind: "skill";
   label: string;
   skill: SkillInfo;
+  /** Extra indent level for child skills inside an expanded skill set */
+  indent?: number;
 }
 
-export type SkillBrowserItem = SkillCategoryItem | SkillSkillItem;
+export interface SkillSetItem {
+  id: string;
+  kind: "skillset";
+  label: string;
+  skillSet: SkillSetInfo;
+  expanded: boolean;
+}
+
+export type SkillBrowserItem = SkillCategoryItem | SkillSkillItem | SkillSetItem;
 
 // ─── Adapter ─────────────────────────────────────────────────────────────────
 
@@ -32,6 +42,8 @@ export interface BuildSkillBrowserItemsArgs {
   searchResults: SkillInfo[];
   query: string;
   isSearchLoading: boolean;
+  skillSets?: SkillSetInfo[];
+  expandedSets?: Set<string>;
 }
 
 /**
@@ -45,6 +57,8 @@ export function buildSkillBrowserItems({
   searchResults,
   query,
   isSearchLoading,
+  skillSets = [],
+  expandedSets = new Set(),
 }: BuildSkillBrowserItemsArgs): SkillBrowserItem[] {
   const lowerQuery = query.toLowerCase();
   const items: SkillBrowserItem[] = [];
@@ -63,7 +77,7 @@ export function buildSkillBrowserItems({
       categoryKey: "installed",
       count: installedFiltered.length,
       tone: "purple",
-      star: "● ",
+      star: "\u25CF ",
     });
     for (const skill of installedFiltered) {
       items.push({
@@ -75,7 +89,16 @@ export function buildSkillBrowserItems({
     }
   }
 
-  // ── RECOMMENDED: always shown, filtered when searching ──
+  // ── RECOMMENDED: skill sets + individual skills, all as first-class items ──
+  const filteredSets = lowerQuery
+    ? skillSets.filter((s) => {
+        if (s.name.toLowerCase().includes(lowerQuery)) return true;
+        if (s.description.toLowerCase().includes(lowerQuery)) return true;
+        if (s.loaded && s.skills.some((sk) => sk.name.toLowerCase().includes(lowerQuery))) return true;
+        return false;
+      })
+    : skillSets;
+
   const filteredRec = lowerQuery
     ? recommended.filter(
         (s) =>
@@ -84,16 +107,47 @@ export function buildSkillBrowserItems({
       )
     : recommended;
 
+  const recommendedCount = filteredSets.length + filteredRec.length;
+
   items.push({
     id: "cat:recommended",
     kind: "category",
     label: "Recommended",
     title: "Recommended",
     categoryKey: "recommended",
-    count: filteredRec.length,
+    count: recommendedCount,
     tone: "green",
-    star: "★ ",
+    star: "\u2605 ",
   });
+
+  // Skill sets first within recommended
+  for (const set of filteredSets) {
+    const isExpanded = expandedSets.has(set.id);
+    items.push({
+      id: `skillset:${set.id}`,
+      kind: "skillset",
+      label: set.name,
+      skillSet: set,
+      expanded: isExpanded,
+    });
+    // When expanded, show child skills as indented skill items
+    if (isExpanded && set.loaded) {
+      const childSkills = lowerQuery
+        ? set.skills.filter((sk) => sk.name.toLowerCase().includes(lowerQuery))
+        : set.skills;
+      for (const skill of childSkills) {
+        items.push({
+          id: `skill:${skill.id}`,
+          kind: "skill",
+          label: skill.name,
+          skill,
+          indent: 2,
+        });
+      }
+    }
+  }
+
+  // Then individual recommended skills
   for (const skill of filteredRec) {
     items.push({
       id: `skill:${skill.id}`,
@@ -135,18 +189,26 @@ export function buildSkillBrowserItems({
   }
 
   // ── POPULAR (default, no search query) — only skills with meaningful stars ──
-  const popularWithStars = popular.filter((s) => (s.stars ?? 0) >= 5);
-  if (popularWithStars.length > 0) {
+  // Dedup by name — API can return same skill name from different repos
+  const seenPopular = new Set<string>();
+  const popularDeduped = popular
+    .filter((s) => (s.stars ?? 0) >= 5)
+    .filter((s) => {
+      if (seenPopular.has(s.name)) return false;
+      seenPopular.add(s.name);
+      return true;
+    });
+  if (popularDeduped.length > 0) {
     items.push({
       id: "cat:popular",
       kind: "category",
       label: "Popular",
       title: "Popular",
       categoryKey: "popular",
-      count: popularWithStars.length,
+      count: popularDeduped.length,
       tone: "teal",
     });
-    for (const skill of popularWithStars) {
+    for (const skill of popularDeduped) {
       items.push({
         id: `skill:${skill.id}`,
         kind: "skill",

package/src/ui/components/ScrollableList.js

@@ -1,22 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
 import { useState, useEffect, useMemo } from "react";
-import { useKeyboardHandler } from "../hooks/useKeyboardHandler";
-export function ScrollableList({ items, selectedIndex, renderItem, maxHeight, showScrollIndicators = true, onSelect, focused = false, }) {
+export function ScrollableList({ items, selectedIndex, renderItem, maxHeight, showScrollIndicators = true, getKey, }) {
     const [scrollOffset, setScrollOffset] = useState(0);
-    // Handle keyboard navigation
-    useKeyboardHandler((input, key) => {
-        if (!focused || !onSelect)
-            return;
-        if (key.upArrow || input === "k") {
-            const newIndex = Math.max(0, selectedIndex - 1);
-            onSelect(newIndex);
-        }
-        else if (key.downArrow || input === "j") {
-            const newIndex = Math.min(items.length - 1, selectedIndex + 1);
-            onSelect(newIndex);
-        }
-    });
-    // Account for scroll indicators in available space
     const hasItemsAbove = scrollOffset > 0;
     const hasItemsBelow = scrollOffset + maxHeight < items.length;
     const indicatorLines = (showScrollIndicators && hasItemsAbove ? 1 : 0) +
@@ -25,15 +10,18 @@ export function ScrollableList({ items, selectedIndex, renderItem, maxHeight, sh
     // Adjust scroll offset to keep selected item visible
     useEffect(() => {
         if (selectedIndex < scrollOffset) {
-            // Selected is above viewport - scroll up
             setScrollOffset(selectedIndex);
         }
         else if (selectedIndex >= scrollOffset + effectiveMaxHeight) {
-            // Selected is below viewport - scroll down
             setScrollOffset(selectedIndex - effectiveMaxHeight + 1);
         }
     }, [selectedIndex, effectiveMaxHeight, scrollOffset]);
-    // Calculate visible items - strictly limited to effectiveMaxHeight
+    // Reset scroll when items change drastically (e.g. search)
+    useEffect(() => {
+        if (scrollOffset >= items.length) {
+            setScrollOffset(Math.max(0, items.length - effectiveMaxHeight));
+        }
+    }, [items.length, scrollOffset, effectiveMaxHeight]);
     const visibleItems = useMemo(() => {
         const start = scrollOffset;
         const end = Math.min(scrollOffset + effectiveMaxHeight, items.length);
@@ -43,6 +31,6 @@ export function ScrollableList({ items, selectedIndex, renderItem, maxHeight, sh
         }));
     }, [items, scrollOffset, effectiveMaxHeight]);
     const itemsBelow = items.length - scrollOffset - effectiveMaxHeight;
-    return (_jsxs("box", { flexDirection: "column", children: [showScrollIndicators && hasItemsAbove && (_jsxs("text", { fg: "cyan", children: ["\u2191 ", scrollOffset, " more"] })), visibleItems.map(({ item, originalIndex }) => (_jsx("box", { width: "100%", overflow: "hidden", children: renderItem(item, originalIndex, originalIndex === selectedIndex) }, originalIndex))), showScrollIndicators && hasItemsBelow && (_jsxs("text", { fg: "cyan", children: ["\u2193 ", itemsBelow, " more"] }))] }));
+    return (_jsxs("box", { flexDirection: "column", children: [showScrollIndicators && hasItemsAbove && (_jsxs("text", { fg: "cyan", children: ["\u2191 ", scrollOffset, " more"] })), visibleItems.map(({ item, originalIndex }) => (_jsx("box", { width: "100%", overflow: "hidden", children: renderItem(item, originalIndex, originalIndex === selectedIndex) }, getKey ? getKey(item, originalIndex) : `${originalIndex}`))), showScrollIndicators && hasItemsBelow && (_jsxs("text", { fg: "cyan", children: ["\u2193 ", itemsBelow, " more"] }))] }));
 }
 export default ScrollableList;

package/src/ui/components/ScrollableList.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { useKeyboardHandler } from "../hooks/useKeyboardHandler";
 
 interface ScrollableListProps<T> {
 	/** Array of items to display */
@@ -8,14 +7,12 @@ interface ScrollableListProps<T> {
 	selectedIndex: number;
 	/** Render function for each item */
 	renderItem: (item: T, index: number, isSelected: boolean) => React.ReactNode;
-	/** Maximum visible height (number of lines) - REQUIRED for proper rendering */
+	/** Maximum visible height (number of lines) */
 	maxHeight: number;
 	/** Show scroll indicators */
 	showScrollIndicators?: boolean;
-	/** Called when selection changes (arrow keys) */
-	onSelect?: (index: number) => void;
-	/** Whether this list should receive keyboard input */
-	focused?: boolean;
+	/** Item key extractor */
+	getKey?: (item: T, index: number) => string;
 }
 
 export function ScrollableList<T>({
@@ -24,25 +21,10 @@ export function ScrollableList<T>({
 	renderItem,
 	maxHeight,
 	showScrollIndicators = true,
-	onSelect,
-	focused = false,
+	getKey,
 }: ScrollableListProps<T>) {
 	const [scrollOffset, setScrollOffset] = useState(0);
 
-	// Handle keyboard navigation
-	useKeyboardHandler((input, key) => {
-		if (!focused || !onSelect) return;
-
-		if (key.upArrow || input === "k") {
-			const newIndex = Math.max(0, selectedIndex - 1);
-			onSelect(newIndex);
-		} else if (key.downArrow || input === "j") {
-			const newIndex = Math.min(items.length - 1, selectedIndex + 1);
-			onSelect(newIndex);
-		}
-	});
-
-	// Account for scroll indicators in available space
 	const hasItemsAbove = scrollOffset > 0;
 	const hasItemsBelow = scrollOffset + maxHeight < items.length;
 	const indicatorLines =
@@ -53,15 +35,19 @@ export function ScrollableList<T>({
 	// Adjust scroll offset to keep selected item visible
 	useEffect(() => {
 		if (selectedIndex < scrollOffset) {
-			// Selected is above viewport - scroll up
 			setScrollOffset(selectedIndex);
 		} else if (selectedIndex >= scrollOffset + effectiveMaxHeight) {
-			// Selected is below viewport - scroll down
 			setScrollOffset(selectedIndex - effectiveMaxHeight + 1);
 		}
 	}, [selectedIndex, effectiveMaxHeight, scrollOffset]);
 
-	// Calculate visible items - strictly limited to effectiveMaxHeight
+	// Reset scroll when items change drastically (e.g. search)
+	useEffect(() => {
+		if (scrollOffset >= items.length) {
+			setScrollOffset(Math.max(0, items.length - effectiveMaxHeight));
+		}
+	}, [items.length, scrollOffset, effectiveMaxHeight]);
+
 	const visibleItems = useMemo(() => {
 		const start = scrollOffset;
 		const end = Math.min(scrollOffset + effectiveMaxHeight, items.length);
@@ -75,19 +61,20 @@ export function ScrollableList<T>({
 
 	return (
 		<box flexDirection="column">
-			{/* Scroll up indicator */}
 			{showScrollIndicators && hasItemsAbove && (
 				<text fg="cyan">↑ {scrollOffset} more</text>
 			)}
 
-			{/* Visible items - strictly limited */}
 			{visibleItems.map(({ item, originalIndex }) => (
-				<box key={originalIndex} width="100%" overflow="hidden">
+				<box
+					key={getKey ? getKey(item, originalIndex) : `${originalIndex}`}
+					width="100%"
+					overflow="hidden"
+				>
 					{renderItem(item, originalIndex, originalIndex === selectedIndex)}
 				</box>
 			))}
 
-			{/* Scroll down indicator */}
 			{showScrollIndicators && hasItemsBelow && (
 				<text fg="cyan">↓ {itemsBelow} more</text>
 			)}

package/src/ui/renderers/skillRenderers.js

@@ -1,16 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { STAR_RELIABILITY_INFO } from "../../data/skill-repos.js";
 import { SelectableRow, ListCategoryRow, ScopeSquares, MetaText, KeyValueLine, DetailSection, } from "../components/primitives/index.js";
 // ─── Helpers ──────────────────────────────────────────────────────────────────
-function formatStars(stars) {
+function formatStarsNum(stars) {
     if (!stars)
         return "";
     if (stars >= 1000000)
-        return `★ ${(stars / 1000000).toFixed(1)}M`;
+        return `${(stars / 1000000).toFixed(1)}M`;
     if (stars >= 10000)
-        return `★ ${Math.round(stars / 1000)}K`;
+        return `${Math.round(stars / 1000)}K`;
     if (stars >= 1000)
-        return `★ ${(stars / 1000).toFixed(1)}K`;
-    return `★ ${stars}`;
+        return `${(stars / 1000).toFixed(1)}K`;
+    return `${stars}`;
+}
+/** Star icon and color based on reliability classification */
+function starIcon(reliability) {
+    if (reliability === "mega-repo")
+        return "☆";
+    if (reliability === "skill-dump")
+        return "☆";
+    return "★";
+}
+function starColor(reliability) {
+    if (reliability === "mega-repo")
+        return "gray";
+    if (reliability === "skill-dump")
+        return "#888800";
+    return "yellow";
+}
+function formatStars(stars, reliability) {
+    if (!stars)
+        return "";
+    return `${starIcon(reliability)} ${formatStarsNum(stars)}`;
 }
 // ─── Category renderer ────────────────────────────────────────────────────────
 const categoryRenderer = {
@@ -37,24 +58,60 @@ const skillRenderer = {
         const { skill } = item;
         const hasUser = skill.installedScope === "user";
         const hasProject = skill.installedScope === "project";
-        const starsStr = formatStars(skill.stars);
+        const reliability = skill.starReliability;
+        const starsStr = formatStars(skill.stars, reliability);
+        const sColor = starColor(reliability);
         const displayName = truncateName(skill.name);
-        return (_jsxs(SelectableRow, { selected: isSelected, indent: 1, children: [_jsx(ScopeSquares, { user: hasUser, project: hasProject, selected: isSelected }), _jsx("span", { children: " " }), _jsx("span", { fg: isSelected ? "white" : skill.installed ? "white" : "gray", children: displayName }), skill.hasUpdate ? _jsx(MetaText, { text: " \u2B06", tone: "warning" }) : null, starsStr ? _jsx(MetaText, { text: `  ${starsStr}`, tone: "warning" }) : null] }));
+        const indentLevel = item.indent ?? 1;
+        return (_jsxs(SelectableRow, { selected: isSelected, indent: indentLevel, children: [_jsx(ScopeSquares, { user: hasUser, project: hasProject, selected: isSelected }), _jsx("span", { children: " " }), _jsx("span", { fg: isSelected ? "white" : skill.installed ? "white" : "gray", children: displayName }), skill.hasUpdate ? _jsx(MetaText, { text: " \u2B06", tone: "warning" }) : null, starsStr ? _jsx("span", { fg: sColor, children: `  ${starsStr}` }) : null] }));
     },
     renderDetail: ({ item }) => {
         const { skill } = item;
         const fm = skill.frontmatter;
         const description = fm?.description || skill.description || "Loading...";
-        const starsStr = formatStars(skill.stars);
-        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("text", { fg: "cyan", children: [_jsx("strong", { children: skill.name }), starsStr ? _jsxs("span", { fg: "yellow", children: ["  ", starsStr] }) : null] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "white", children: description }) }), fm?.category ? (_jsx(KeyValueLine, { label: "Category", value: _jsx("span", { fg: "cyan", children: fm.category }) })) : null, fm?.author ? (_jsx(KeyValueLine, { label: "Author", value: _jsx("span", { children: fm.author }) })) : null, fm?.version ? (_jsx(KeyValueLine, { label: "Version", value: _jsx("span", { children: fm.version }) })) : null, fm?.tags && fm.tags.length > 0 ? (_jsx(KeyValueLine, { label: "Tags", value: _jsx("span", { children: fm.tags.join(", ") }) })) : null, _jsxs(DetailSection, { children: [_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Source    " }), _jsx("span", { fg: "#5c9aff", children: skill.source.repo })] }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "          " }), _jsx("span", { fg: "gray", children: skill.repoPath })] })] }), _jsxs(DetailSection, { children: [_jsx("text", { children: "─".repeat(24) }), _jsx("text", { children: _jsx("strong", { children: "Scopes:" }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsx("span", { bg: "cyan", fg: "black", children: " u " }), _jsx("span", { fg: skill.installedScope === "user" ? "cyan" : "gray", children: skill.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: skill.installedScope === "project" ? "green" : "gray", children: skill.installedScope === "project" ? " ● " : " ○ " }), _jsx("span", { fg: "green", children: "Project" }), _jsx("span", { fg: "gray", children: " .claude/skills/" })] })] })] }), skill.hasUpdate && (_jsx("box", { marginTop: 1, children: _jsx("text", { bg: "yellow", fg: "black", children: " UPDATE AVAILABLE " }) })), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: skill.installed
+        const reliability = skill.starReliability;
+        const starsStr = formatStars(skill.stars, reliability);
+        const sColor = starColor(reliability);
+        const reliabilityInfo = reliability ? STAR_RELIABILITY_INFO[reliability] : null;
+        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("text", { fg: "cyan", children: [_jsx("strong", { children: skill.name }), starsStr ? _jsxs("span", { fg: sColor, children: ["  ", starsStr] }) : null] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "white", children: description }) }), fm?.category ? (_jsx(KeyValueLine, { label: "Category", value: _jsx("span", { fg: "cyan", children: fm.category }) })) : null, fm?.author ? (_jsx(KeyValueLine, { label: "Author", value: _jsx("span", { children: fm.author }) })) : null, fm?.version ? (_jsx(KeyValueLine, { label: "Version", value: _jsx("span", { children: fm.version }) })) : null, fm?.tags && fm.tags.length > 0 ? (_jsx(KeyValueLine, { label: "Tags", value: _jsx("span", { children: fm.tags.join(", ") }) })) : null, _jsxs(DetailSection, { children: [_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Source    " }), _jsx("span", { fg: "#5c9aff", children: skill.source.repo })] }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "          " }), _jsx("span", { fg: "gray", children: skill.repoPath })] })] }), reliabilityInfo && reliability !== "dedicated" && (_jsx("box", { marginTop: 1, children: _jsxs("text", { children: [_jsxs("span", { fg: sColor, children: [starIcon(reliability), " "] }), _jsx("span", { fg: sColor, children: _jsx("strong", { children: reliabilityInfo.label }) }), _jsxs("span", { fg: "gray", children: [" \u2014 ", reliabilityInfo.description] })] }) })), _jsxs(DetailSection, { children: [_jsx("text", { children: "─".repeat(24) }), _jsx("text", { children: _jsx("strong", { children: "Scopes:" }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsx("span", { bg: "cyan", fg: "black", children: " u " }), _jsx("span", { fg: skill.installedScope === "user" ? "cyan" : "gray", children: skill.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: skill.installedScope === "project" ? "green" : "gray", children: skill.installedScope === "project" ? " ● " : " ○ " }), _jsx("span", { fg: "green", children: "Project" }), _jsx("span", { fg: "gray", children: " .claude/skills/" })] })] })] }), skill.hasUpdate && (_jsx("box", { marginTop: 1, children: _jsx("text", { bg: "yellow", fg: "black", children: " UPDATE AVAILABLE " }) })), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: skill.installed
                             ? "Press u/p to toggle scope"
                             : "Press u/p to install" }) }), _jsx("box", { children: _jsxs("text", { children: [_jsx("span", { bg: "#555555", fg: "white", children: " o " }), _jsx("span", { fg: "gray", children: " Open in browser" })] }) })] }));
     },
 };
+// ─── Skill Set renderer ──────────────────────────────────────────────────────
+const MAX_SET_NAME_LEN = 28;
+const skillSetRenderer = {
+    renderRow: ({ item, isSelected }) => {
+        const { skillSet, expanded } = item;
+        const arrow = expanded ? "\u25BC" : "\u25B6";
+        const displayName = skillSet.name.length > MAX_SET_NAME_LEN
+            ? skillSet.name.slice(0, MAX_SET_NAME_LEN - 1) + "\u2026"
+            : skillSet.name;
+        // Count installed child skills
+        const installedCount = skillSet.loaded
+            ? skillSet.skills.filter((s) => s.installed).length
+            : 0;
+        const totalCount = skillSet.loaded ? skillSet.skills.length : "...";
+        const countStr = `(${installedCount}/${totalCount})`;
+        // Any child installed at user or project scope?
+        const hasUser = skillSet.loaded && skillSet.skills.some((s) => s.installedScope === "user");
+        const hasProject = skillSet.loaded && skillSet.skills.some((s) => s.installedScope === "project");
+        const starsStr = formatStars(skillSet.stars);
+        return (_jsxs(SelectableRow, { selected: isSelected, indent: 1, children: [_jsxs("span", { fg: isSelected ? "white" : "gray", children: [arrow, " "] }), _jsxs("span", { fg: isSelected ? "white" : "yellow", children: [skillSet.icon, " "] }), _jsx("span", { fg: isSelected ? "white" : "cyan", children: _jsx("strong", { children: displayName }) }), _jsxs("span", { fg: "gray", children: ["  ", countStr] }), starsStr ? _jsx(MetaText, { text: `  ${starsStr}`, tone: "warning" }) : null, _jsx("span", { children: "  " }), _jsx(ScopeSquares, { user: hasUser, project: hasProject, selected: isSelected })] }));
+    },
+    renderDetail: ({ item }) => {
+        const { skillSet, expanded } = item;
+        const starsStr = formatStars(skillSet.stars);
+        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("text", { fg: "cyan", children: [_jsxs("strong", { children: [skillSet.icon, " ", skillSet.name] }), starsStr ? _jsxs("span", { fg: "yellow", children: ["  ", starsStr] }) : null] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "white", children: skillSet.description }) }), _jsx(DetailSection, { children: _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Source    " }), _jsx("span", { fg: "#5c9aff", children: skillSet.repo })] }) }), skillSet.loading && (_jsx("box", { marginTop: 1, children: _jsx("text", { fg: "yellow", children: "Loading skills..." }) })), skillSet.error && (_jsx("box", { marginTop: 1, children: _jsxs("text", { fg: "red", children: ["Error: ", skillSet.error] }) })), skillSet.loaded && skillSet.skills.length > 0 && (_jsxs(DetailSection, { children: [_jsxs("text", { children: [_jsx("strong", { children: "Skills in this set:" }), _jsxs("span", { fg: "gray", children: [" ", "(", skillSet.skills.filter((s) => s.installed).length, "/", skillSet.skills.length, " installed)"] })] }), _jsx("box", { marginTop: 1, flexDirection: "column", children: skillSet.skills.map((s) => (_jsxs("text", { children: [_jsx("span", { fg: s.installedScope === "user" ? "cyan" : "gray", children: s.installedScope === "user" ? "\u25A0" : "\u25A1" }), _jsx("span", { fg: s.installedScope === "project" ? "green" : "gray", children: s.installedScope === "project" ? "\u25A0" : "\u25A1" }), _jsxs("span", { fg: s.installed ? "white" : "gray", children: [" ", s.name] })] }, s.id))) })] })), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: expanded
+                            ? "Press Enter to collapse \u2022 u/p to install all"
+                            : "Press Enter to expand \u2022 u/p to install all" }) }), _jsx("box", { children: _jsxs("text", { children: [_jsx("span", { bg: "#555555", fg: "white", children: " o " }), _jsx("span", { fg: "gray", children: " Open in browser" })] }) })] }));
+    },
+};
 // ─── Registry ─────────────────────────────────────────────────────────────────
 export const skillRenderers = {
     category: categoryRenderer,
     skill: skillRenderer,
+    skillset: skillSetRenderer,
 };
 /**
  * Dispatch rendering by item kind.
@@ -63,6 +120,9 @@ export function renderSkillRow(item, _index, isSelected) {
     if (item.kind === "category") {
         return skillRenderers.category.renderRow({ item, isSelected });
     }
+    if (item.kind === "skillset") {
+        return skillRenderers.skillset.renderRow({ item, isSelected });
+    }
     return skillRenderers.skill.renderRow({ item, isSelected });
 }
 export function renderSkillDetail(item) {
@@ -71,5 +131,8 @@ export function renderSkillDetail(item) {
     if (item.kind === "category") {
         return skillRenderers.category.renderDetail({ item });
     }
+    if (item.kind === "skillset") {
+        return skillRenderers.skillset.renderDetail({ item });
+    }
     return skillRenderers.skill.renderDetail({ item });
 }