claudeup 3.14.0 → 3.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeup",
-  "version": "3.14.0",
+  "version": "3.16.0",
   "description": "TUI tool for managing Claude Code plugins, MCPs, and configuration",
   "type": "module",
   "main": "src/main.tsx",

package/src/data/skill-repos.js

@@ -5,6 +5,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/find-skills",
         description: "Discover and install new skills from the ecosystem",
         category: "search",
+        stars: 12000,
     },
     {
         name: "React Best Practices",
@@ -12,6 +13,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/react-best-practices",
         description: "Modern React patterns and Vercel deployment guidelines",
         category: "frontend",
+        stars: 24000,
     },
     {
         name: "Web Design Guidelines",
@@ -19,6 +21,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/web-design-guidelines",
         description: "UI/UX design principles and web standards",
         category: "design",
+        stars: 24000,
     },
     {
         name: "Remotion Best Practices",
@@ -26,6 +29,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/remotion-best-practices",
         description: "Programmatic video creation with Remotion",
         category: "media",
+        stars: 2400,
     },
     {
         name: "UI/UX Pro Max",
@@ -33,6 +37,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills_en/ui-ux-pro-max",
         description: "50 styles, 21 palettes, 50 font pairings, 9 stacks. Covers React, Next.js, Vue, Svelte, SwiftUI, Flutter, Tailwind, shadcn/ui",
         category: "design",
+        stars: 109,
     },
     {
         name: "ElevenLabs TTS",
@@ -40,6 +45,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/elevenlabs-tts",
         description: "Text-to-speech with ElevenLabs API integration",
         category: "media",
+        stars: 206,
     },
     {
         name: "Audit Website",
@@ -47,6 +53,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/audit-website",
         description: "Security and quality auditing for web applications",
         category: "security",
+        stars: 67,
     },
     {
         name: "Systematic Debugging",
@@ -54,6 +61,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/systematic-debugging",
         description: "Structured debugging methodology with root cause analysis",
         category: "debugging",
+        stars: 113000,
     },
     {
         name: "shadcn/ui",
@@ -61,6 +69,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "packages/shadcn",
         description: "shadcn/ui component library patterns and usage",
         category: "frontend",
+        stars: 111000,
     },
     {
         name: "Neon Postgres",
@@ -68,6 +77,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/neon-postgres",
         description: "Neon serverless Postgres setup and best practices",
         category: "database",
+        stars: 42,
     },
     {
         name: "Neon Serverless",
@@ -75,6 +85,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/neon-serverless",
         description: "Serverless database patterns with Neon",
         category: "database",
+        stars: 81,
     },
 ];
 export const DEFAULT_SKILL_REPOS = [

package/src/data/skill-repos.ts

@@ -6,6 +6,7 @@ export interface RecommendedSkill {
 	skillPath: string;
 	description: string;
 	category: string;
+	stars?: number; // fallback when GitHub API is rate-limited
 }
 
 export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
@@ -15,6 +16,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/find-skills",
 		description: "Discover and install new skills from the ecosystem",
 		category: "search",
+		stars: 12000,
 	},
 	{
 		name: "React Best Practices",
@@ -22,6 +24,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/react-best-practices",
 		description: "Modern React patterns and Vercel deployment guidelines",
 		category: "frontend",
+		stars: 24000,
 	},
 	{
 		name: "Web Design Guidelines",
@@ -29,6 +32,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/web-design-guidelines",
 		description: "UI/UX design principles and web standards",
 		category: "design",
+		stars: 24000,
 	},
 	{
 		name: "Remotion Best Practices",
@@ -36,6 +40,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/remotion-best-practices",
 		description: "Programmatic video creation with Remotion",
 		category: "media",
+		stars: 2400,
 	},
 	{
 		name: "UI/UX Pro Max",
@@ -43,6 +48,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills_en/ui-ux-pro-max",
 		description: "50 styles, 21 palettes, 50 font pairings, 9 stacks. Covers React, Next.js, Vue, Svelte, SwiftUI, Flutter, Tailwind, shadcn/ui",
 		category: "design",
+		stars: 109,
 	},
 	{
 		name: "ElevenLabs TTS",
@@ -50,6 +56,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/elevenlabs-tts",
 		description: "Text-to-speech with ElevenLabs API integration",
 		category: "media",
+		stars: 206,
 	},
 	{
 		name: "Audit Website",
@@ -57,6 +64,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/audit-website",
 		description: "Security and quality auditing for web applications",
 		category: "security",
+		stars: 67,
 	},
 	{
 		name: "Systematic Debugging",
@@ -64,6 +72,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/systematic-debugging",
 		description: "Structured debugging methodology with root cause analysis",
 		category: "debugging",
+		stars: 113000,
 	},
 	{
 		name: "shadcn/ui",
@@ -71,6 +80,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "packages/shadcn",
 		description: "shadcn/ui component library patterns and usage",
 		category: "frontend",
+		stars: 111000,
 	},
 	{
 		name: "Neon Postgres",
@@ -78,6 +88,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/neon-postgres",
 		description: "Neon serverless Postgres setup and best practices",
 		category: "database",
+		stars: 42,
 	},
 	{
 		name: "Neon Serverless",
@@ -85,6 +96,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/neon-serverless",
 		description: "Serverless database patterns with Neon",
 		category: "database",
+		stars: 81,
 	},
 ];
 

package/src/services/skills-manager.js

@@ -202,28 +202,55 @@ export async function fetchAvailableSkills(_repos, projectPath) {
     // 2. Fetch popular skills from Firebase API
     const popular = await fetchPopularSkills(30);
     const popularSkills = popular.map((s) => markInstalled({ ...s, isRecommended: false }));
-    // 3. Enrich recommended skills with GitHub repo stars
-    //    Fetch stars for each unique repo (typically ~7 repos, parallel)
+    // 3. Enrich recommended skills with GitHub repo stars (cached to disk)
+    const starsCachePath = path.join(os.homedir(), ".claude", "skill-stars-cache.json");
+    let starsCache = {};
+    try {
+        starsCache = await fs.readJson(starsCachePath);
+    }
+    catch { /* no cache yet */ }
     const uniqueRepos = [...new Set(recommendedSkills.map((s) => s.source.repo))];
     const repoStars = new Map();
-    try {
-        const starResults = await Promise.allSettled(uniqueRepos.map(async (repo) => {
+    const cacheMaxAge = 24 * 60 * 60 * 1000; // 24 hours
+    let cacheUpdated = false;
+    for (const repo of uniqueRepos) {
+        const cached = starsCache[repo];
+        if (cached && Date.now() - new Date(cached.fetchedAt).getTime() < cacheMaxAge) {
+            repoStars.set(repo, cached.stars);
+            continue;
+        }
+        // Try fetching from GitHub (may be rate limited)
+        try {
             const res = await fetch(`https://api.github.com/repos/${repo}`, {
                 headers: { Accept: "application/vnd.github+json" },
                 signal: AbortSignal.timeout(5000),
             });
-            if (!res.ok)
-                return;
-            const data = (await res.json());
-            if (data.stargazers_count)
-                repoStars.set(repo, data.stargazers_count);
-        }));
+            if (res.ok) {
+                const data = (await res.json());
+                if (data.stargazers_count) {
+                    repoStars.set(repo, data.stargazers_count);
+                    starsCache[repo] = { stars: data.stargazers_count, fetchedAt: new Date().toISOString() };
+                    cacheUpdated = true;
+                }
+            }
+            else if (cached) {
+                // Rate limited but have stale cache — use it
+                repoStars.set(repo, cached.stars);
+            }
+        }
+        catch {
+            if (cached)
+                repoStars.set(repo, cached.stars);
+        }
     }
-    catch {
-        // Non-fatal — stars are cosmetic
+    if (cacheUpdated) {
+        try {
+            await fs.writeJson(starsCachePath, starsCache);
+        }
+        catch { /* ignore */ }
     }
     for (const rec of recommendedSkills) {
-        rec.stars = repoStars.get(rec.source.repo) || undefined;
+        rec.stars = repoStars.get(rec.source.repo) || rec.stars || undefined;
     }
     // 4. Combine: recommended first, then popular (dedup by name)
     const seen = new Set(recommendedSkills.map((s) => s.name));

package/src/services/skills-manager.ts

@@ -271,27 +271,49 @@ export async function fetchAvailableSkills(
 	const popular = await fetchPopularSkills(30);
 	const popularSkills = popular.map((s) => markInstalled({ ...s, isRecommended: false }));
 
-	// 3. Enrich recommended skills with GitHub repo stars
-	//    Fetch stars for each unique repo (typically ~7 repos, parallel)
+	// 3. Enrich recommended skills with GitHub repo stars (cached to disk)
+	const starsCachePath = path.join(os.homedir(), ".claude", "skill-stars-cache.json");
+	let starsCache: Record<string, { stars: number; fetchedAt: string }> = {};
+	try { starsCache = await fs.readJson(starsCachePath); } catch { /* no cache yet */ }
+
 	const uniqueRepos = [...new Set(recommendedSkills.map((s) => s.source.repo))];
 	const repoStars = new Map<string, number>();
-	try {
-		const starResults = await Promise.allSettled(
-			uniqueRepos.map(async (repo) => {
-				const res = await fetch(`https://api.github.com/repos/${repo}`, {
-					headers: { Accept: "application/vnd.github+json" },
-					signal: AbortSignal.timeout(5000),
-				});
-				if (!res.ok) return;
+	const cacheMaxAge = 24 * 60 * 60 * 1000; // 24 hours
+	let cacheUpdated = false;
+
+	for (const repo of uniqueRepos) {
+		const cached = starsCache[repo];
+		if (cached && Date.now() - new Date(cached.fetchedAt).getTime() < cacheMaxAge) {
+			repoStars.set(repo, cached.stars);
+			continue;
+		}
+		// Try fetching from GitHub (may be rate limited)
+		try {
+			const res = await fetch(`https://api.github.com/repos/${repo}`, {
+				headers: { Accept: "application/vnd.github+json" },
+				signal: AbortSignal.timeout(5000),
+			});
+			if (res.ok) {
 				const data = (await res.json()) as { stargazers_count?: number };
-				if (data.stargazers_count) repoStars.set(repo, data.stargazers_count);
-			}),
-		);
-	} catch {
-		// Non-fatal — stars are cosmetic
+				if (data.stargazers_count) {
+					repoStars.set(repo, data.stargazers_count);
+					starsCache[repo] = { stars: data.stargazers_count, fetchedAt: new Date().toISOString() };
+					cacheUpdated = true;
+				}
+			} else if (cached) {
+				// Rate limited but have stale cache — use it
+				repoStars.set(repo, cached.stars);
+			}
+		} catch {
+			if (cached) repoStars.set(repo, cached.stars);
+		}
+	}
+	if (cacheUpdated) {
+		try { await fs.writeJson(starsCachePath, starsCache); } catch { /* ignore */ }
 	}
+
 	for (const rec of recommendedSkills) {
-		rec.stars = repoStars.get(rec.source.repo) || undefined;
+		rec.stars = repoStars.get(rec.source.repo) || rec.stars || undefined;
 	}
 
 	// 4. Combine: recommended first, then popular (dedup by name)

package/src/ui/adapters/skillsAdapter.js

@@ -0,0 +1,106 @@
+/**
+ * Builds the flat list of items for the SkillsScreen list panel.
+ * Extracted from SkillsScreen so it can be tested independently.
+ */
+export function buildSkillBrowserItems({ recommended, popular, installed, searchResults, query, isSearchLoading, }) {
+    const lowerQuery = query.toLowerCase();
+    const items = [];
+    // ── INSTALLED: always shown at top (if any) ──
+    const installedFiltered = lowerQuery
+        ? installed.filter((s) => s.name.toLowerCase().includes(lowerQuery))
+        : installed;
+    if (installedFiltered.length > 0) {
+        items.push({
+            id: "cat:installed",
+            kind: "category",
+            label: `Installed (${installedFiltered.length})`,
+            title: "Installed",
+            categoryKey: "installed",
+            count: installedFiltered.length,
+            tone: "purple",
+            star: "● ",
+        });
+        for (const skill of installedFiltered) {
+            items.push({
+                id: `skill:${skill.id}`,
+                kind: "skill",
+                label: skill.name,
+                skill,
+            });
+        }
+    }
+    // ── RECOMMENDED: always shown, filtered when searching ──
+    const filteredRec = lowerQuery
+        ? recommended.filter((s) => s.name.toLowerCase().includes(lowerQuery) ||
+            (s.description || "").toLowerCase().includes(lowerQuery))
+        : recommended;
+    items.push({
+        id: "cat:recommended",
+        kind: "category",
+        label: "Recommended",
+        title: "Recommended",
+        categoryKey: "recommended",
+        count: filteredRec.length,
+        tone: "green",
+        star: "★ ",
+    });
+    for (const skill of filteredRec) {
+        items.push({
+            id: `skill:${skill.id}`,
+            kind: "skill",
+            label: skill.name,
+            skill,
+        });
+    }
+    // ── SEARCH MODE ──
+    if (query.length >= 2) {
+        if (!isSearchLoading && searchResults.length > 0) {
+            const recNames = new Set(recommended.map((s) => s.name));
+            const deduped = searchResults
+                .filter((s) => !recNames.has(s.name))
+                .sort((a, b) => (b.stars ?? 0) - (a.stars ?? 0));
+            if (deduped.length > 0) {
+                items.push({
+                    id: "cat:search",
+                    kind: "category",
+                    label: `Search (${deduped.length})`,
+                    title: "Search",
+                    categoryKey: "popular",
+                    count: deduped.length,
+                    tone: "teal",
+                });
+                for (const skill of deduped) {
+                    items.push({
+                        id: `skill:${skill.id}`,
+                        kind: "skill",
+                        label: skill.name,
+                        skill,
+                    });
+                }
+            }
+        }
+        return items;
+    }
+    // ── POPULAR (default, no search query) — only skills with meaningful stars ──
+    const popularWithStars = popular.filter((s) => (s.stars ?? 0) >= 5);
+    if (popularWithStars.length > 0) {
+        items.push({
+            id: "cat:popular",
+            kind: "category",
+            label: "Popular",
+            title: "Popular",
+            categoryKey: "popular",
+            count: popularWithStars.length,
+            tone: "teal",
+        });
+        for (const skill of popularWithStars) {
+            items.push({
+                id: `skill:${skill.id}`,
+                kind: "skill",
+                label: skill.name,
+                skill,
+            });
+        }
+    }
+    return items;
+}

package/src/ui/adapters/skillsAdapter.ts

@@ -0,0 +1,160 @@
+import type { SkillInfo } from "../../types/index.js";
+
+// ─── Item types ───────────────────────────────────────────────────────────────
+
+export interface SkillCategoryItem {
+  id: string;
+  kind: "category";
+  label: string;
+  title: string;
+  categoryKey: string;
+  count?: number;
+  tone: "purple" | "green" | "teal" | "yellow" | "gray" | "red";
+  badge?: string;
+  star?: string;
+}
+
+export interface SkillSkillItem {
+  id: string;
+  kind: "skill";
+  label: string;
+  skill: SkillInfo;
+}
+
+export type SkillBrowserItem = SkillCategoryItem | SkillSkillItem;
+
+// ─── Adapter ─────────────────────────────────────────────────────────────────
+
+export interface BuildSkillBrowserItemsArgs {
+  recommended: SkillInfo[];
+  popular: SkillInfo[];
+  installed: SkillInfo[];
+  searchResults: SkillInfo[];
+  query: string;
+  isSearchLoading: boolean;
+}
+
+/**
+ * Builds the flat list of items for the SkillsScreen list panel.
+ * Extracted from SkillsScreen so it can be tested independently.
+ */
+export function buildSkillBrowserItems({
+  recommended,
+  popular,
+  installed,
+  searchResults,
+  query,
+  isSearchLoading,
+}: BuildSkillBrowserItemsArgs): SkillBrowserItem[] {
+  const lowerQuery = query.toLowerCase();
+  const items: SkillBrowserItem[] = [];
+
+  // ── INSTALLED: always shown at top (if any) ──
+  const installedFiltered = lowerQuery
+    ? installed.filter((s) => s.name.toLowerCase().includes(lowerQuery))
+    : installed;
+
+  if (installedFiltered.length > 0) {
+    items.push({
+      id: "cat:installed",
+      kind: "category",
+      label: `Installed (${installedFiltered.length})`,
+      title: "Installed",
+      categoryKey: "installed",
+      count: installedFiltered.length,
+      tone: "purple",
+      star: "● ",
+    });
+    for (const skill of installedFiltered) {
+      items.push({
+        id: `skill:${skill.id}`,
+        kind: "skill",
+        label: skill.name,
+        skill,
+      });
+    }
+  }
+
+  // ── RECOMMENDED: always shown, filtered when searching ──
+  const filteredRec = lowerQuery
+    ? recommended.filter(
+        (s) =>
+          s.name.toLowerCase().includes(lowerQuery) ||
+          (s.description || "").toLowerCase().includes(lowerQuery),
+      )
+    : recommended;
+
+  items.push({
+    id: "cat:recommended",
+    kind: "category",
+    label: "Recommended",
+    title: "Recommended",
+    categoryKey: "recommended",
+    count: filteredRec.length,
+    tone: "green",
+    star: "★ ",
+  });
+  for (const skill of filteredRec) {
+    items.push({
+      id: `skill:${skill.id}`,
+      kind: "skill",
+      label: skill.name,
+      skill,
+    });
+  }
+
+  // ── SEARCH MODE ──
+  if (query.length >= 2) {
+    if (!isSearchLoading && searchResults.length > 0) {
+      const recNames = new Set(recommended.map((s) => s.name));
+      const deduped = searchResults
+        .filter((s) => !recNames.has(s.name))
+        .sort((a, b) => (b.stars ?? 0) - (a.stars ?? 0));
+
+      if (deduped.length > 0) {
+        items.push({
+          id: "cat:search",
+          kind: "category",
+          label: `Search (${deduped.length})`,
+          title: "Search",
+          categoryKey: "popular",
+          count: deduped.length,
+          tone: "teal",
+        });
+        for (const skill of deduped) {
+          items.push({
+            id: `skill:${skill.id}`,
+            kind: "skill",
+            label: skill.name,
+            skill,
+          });
+        }
+      }
+    }
+    return items;
+  }
+
+  // ── POPULAR (default, no search query) — only skills with meaningful stars ──
+  const popularWithStars = popular.filter((s) => (s.stars ?? 0) >= 5);
+  if (popularWithStars.length > 0) {
+    items.push({
+      id: "cat:popular",
+      kind: "category",
+      label: "Popular",
+      title: "Popular",
+      categoryKey: "popular",
+      count: popularWithStars.length,
+      tone: "teal",
+    });
+    for (const skill of popularWithStars) {
+      items.push({
+        id: `skill:${skill.id}`,
+        kind: "skill",
+        label: skill.name,
+        skill,
+      });
+    }
+  }
+
+  return items;
+}

package/src/ui/components/primitives/ActionHints.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { theme } from "../../theme.js";
+/**
+ * Keyboard shortcut badges for detail panels.
+ * Renders: [bg] key [/bg] label
+ */
+export function ActionHints({ hints }) {
+    return (_jsx("box", { flexDirection: "column", marginTop: 1, children: hints.map((hint) => (_jsxs("box", { children: [_jsxs("text", { bg: hint.tone === "danger"
+                        ? theme.hints.dangerBg
+                        : hint.tone === "primary"
+                            ? theme.hints.primaryBg
+                            : theme.hints.defaultBg, fg: "black", children: [" ", hint.key, " "] }), _jsxs("text", { fg: "gray", children: [" ", hint.label] })] }, `${hint.key}:${hint.label}`))) }));
+}

package/src/ui/components/primitives/ActionHints.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { theme } from "../../theme.js";
+
+export interface Hint {
+  key: string;
+  label: string;
+  tone?: "default" | "primary" | "danger";
+}
+
+interface ActionHintsProps {
+  hints: Hint[];
+}
+
+/**
+ * Keyboard shortcut badges for detail panels.
+ * Renders: [bg] key [/bg] label
+ */
+export function ActionHints({ hints }: ActionHintsProps) {
+  return (
+    <box flexDirection="column" marginTop={1}>
+      {hints.map((hint) => (
+        <box key={`${hint.key}:${hint.label}`}>
+          <text
+            bg={
+              hint.tone === "danger"
+                ? theme.hints.dangerBg
+                : hint.tone === "primary"
+                  ? theme.hints.primaryBg
+                  : theme.hints.defaultBg
+            }
+            fg="black"
+          >
+            {" "}
+            {hint.key}{" "}
+          </text>
+          <text fg="gray"> {hint.label}</text>
+        </box>
+      ))}
+    </box>
+  );
+}

package/src/ui/components/primitives/DetailSection.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+/**
+ * A labeled section in a detail panel with optional title header.
+ */
+export function DetailSection({ title, children }) {
+    return (_jsxs("box", { flexDirection: "column", marginTop: 1, children: [title ? (_jsx("text", { fg: "cyan", children: _jsx("strong", { children: title }) })) : null, children] }));
+}

package/src/ui/components/primitives/DetailSection.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface DetailSectionProps {
+  title?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * A labeled section in a detail panel with optional title header.
+ */
+export function DetailSection({ title, children }: DetailSectionProps) {
+  return (
+    <box flexDirection="column" marginTop={1}>
+      {title ? (
+        <text fg="cyan">
+          <strong>{title}</strong>
+        </text>
+      ) : null}
+      {children}
+    </box>
+  );
+}

package/src/ui/components/primitives/KeyValueLine.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+/**
+ * Aligned label-value pair for detail panels.
+ * Label is padded to 10 chars for consistent alignment.
+ */
+export function KeyValueLine({ label, value }) {
+    return (_jsxs("text", { children: [_jsx("span", { fg: "gray", children: label.padEnd(10) }), value] }));
+}