claudeup 3.15.0 → 3.17.0

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

@@ -81,18 +81,19 @@ export function buildSkillBrowserItems({ recommended, popular, installed, search
         }
         return items;
     }
-    // ── POPULAR (default, no search query) ──
-    if (popular.length > 0) {
+    // ── 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: popular.length,
+            count: popularWithStars.length,
             tone: "teal",
         });
-        for (const skill of popular) {
+        for (const skill of popularWithStars) {
             items.push({
                 id: `skill:${skill.id}`,
                 kind: "skill",

package/src/ui/adapters/skillsAdapter.ts

@@ -134,18 +134,19 @@ export function buildSkillBrowserItems({
     return items;
   }
 
-  // ── POPULAR (default, no search query) ──
-  if (popular.length > 0) {
+  // ── 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: popular.length,
+      count: popularWithStars.length,
       tone: "teal",
     });
-    for (const skill of popular) {
+    for (const skill of popularWithStars) {
       items.push({
         id: `skill:${skill.id}`,
         kind: "skill",

package/src/ui/renderers/skillRenderers.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { SelectableRow, ListCategoryRow, ScopeSquares, ScopeDetail, ActionHints, MetaText, KeyValueLine, DetailSection, } from "../components/primitives/index.js";
+import { SelectableRow, ListCategoryRow, ScopeSquares, MetaText, KeyValueLine, DetailSection, } from "../components/primitives/index.js";
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 function formatStars(stars) {
     if (!stars)
@@ -26,36 +26,29 @@ const categoryRenderer = {
     },
 };
 // ─── Skill renderer ───────────────────────────────────────────────────────────
+const MAX_SKILL_NAME_LEN = 35;
+function truncateName(name) {
+    return name.length > MAX_SKILL_NAME_LEN
+        ? name.slice(0, MAX_SKILL_NAME_LEN - 1) + "\u2026"
+        : name;
+}
 const skillRenderer = {
     renderRow: ({ item, isSelected }) => {
         const { skill } = item;
         const hasUser = skill.installedScope === "user";
         const hasProject = skill.installedScope === "project";
         const starsStr = formatStars(skill.stars);
-        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: skill.name }), skill.hasUpdate ? _jsx(MetaText, { text: " \u2B06", tone: "warning" }) : null, starsStr ? _jsx(MetaText, { text: `  ${starsStr}`, tone: "warning" }) : null] }));
+        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] }));
     },
     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 })] })] }), skill.installed && skill.installedScope && (_jsxs(DetailSection, { children: [_jsx("text", { children: "─".repeat(24) }), _jsx(ScopeDetail, { scopes: {
-                                user: skill.installedScope === "user",
-                                project: skill.installedScope === "project",
-                            }, paths: {
-                                user: "~/.claude/skills/",
-                                project: ".claude/skills/",
-                            } })] })), skill.hasUpdate && (_jsx("box", { marginTop: 1, children: _jsxs("text", { bg: "yellow", fg: "black", children: [" ", "UPDATE AVAILABLE", " "] }) })), _jsx(ActionHints, { hints: skill.installed
-                        ? [
-                            { key: "d", label: "Uninstall", tone: "danger" },
-                            { key: "u/p", label: "Reinstall in user/project scope" },
-                            { key: "o", label: "Open in browser" },
-                        ]
-                        : [
-                            { key: "u", label: "Install in user scope", tone: "primary" },
-                            { key: "p", label: "Install in project scope", tone: "primary" },
-                            { key: "o", label: "Open in browser" },
-                        ] })] }));
+        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
+                            ? "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" })] }) })] }));
     },
 };
 // ─── Registry ─────────────────────────────────────────────────────────────────

package/src/ui/renderers/skillRenderers.tsx

@@ -62,19 +62,28 @@ const categoryRenderer: ItemRenderer<SkillCategoryItem> = {
 
 // ─── Skill renderer ───────────────────────────────────────────────────────────
 
+const MAX_SKILL_NAME_LEN = 35;
+
+function truncateName(name: string): string {
+  return name.length > MAX_SKILL_NAME_LEN
+    ? name.slice(0, MAX_SKILL_NAME_LEN - 1) + "\u2026"
+    : name;
+}
+
 const skillRenderer: ItemRenderer<SkillSkillItem> = {
   renderRow: ({ item, isSelected }) => {
     const { skill } = item;
     const hasUser = skill.installedScope === "user";
     const hasProject = skill.installedScope === "project";
     const starsStr = formatStars(skill.stars);
+    const displayName = truncateName(skill.name);
 
     return (
       <SelectableRow selected={isSelected} indent={1}>
         <ScopeSquares user={hasUser} project={hasProject} selected={isSelected} />
         <span> </span>
         <span fg={isSelected ? "white" : skill.installed ? "white" : "gray"}>
-          {skill.name}
+          {displayName}
         </span>
         {skill.hasUpdate ? <MetaText text=" ⬆" tone="warning" /> : null}
         {starsStr ? <MetaText text={`  ${starsStr}`} tone="warning" /> : null}
@@ -129,46 +138,48 @@ const skillRenderer: ItemRenderer<SkillSkillItem> = {
           </text>
         </DetailSection>
 
-        {skill.installed && skill.installedScope && (
-          <DetailSection>
-            <text>{"─".repeat(24)}</text>
-            <ScopeDetail
-              scopes={{
-                user: skill.installedScope === "user",
-                project: skill.installedScope === "project",
-              }}
-              paths={{
-                user: "~/.claude/skills/",
-                project: ".claude/skills/",
-              }}
-            />
-          </DetailSection>
-        )}
+        <DetailSection>
+          <text>{"─".repeat(24)}</text>
+          <text><strong>Scopes:</strong></text>
+          <box marginTop={1} flexDirection="column">
+            <text>
+              <span bg="cyan" fg="black"> u </span>
+              <span fg={skill.installedScope === "user" ? "cyan" : "gray"}>
+                {skill.installedScope === "user" ? " ● " : " ○ "}
+              </span>
+              <span fg="cyan">User</span>
+              <span fg="gray"> ~/.claude/skills/</span>
+            </text>
+            <text>
+              <span bg="green" fg="black"> p </span>
+              <span fg={skill.installedScope === "project" ? "green" : "gray"}>
+                {skill.installedScope === "project" ? " ● " : " ○ "}
+              </span>
+              <span fg="green">Project</span>
+              <span fg="gray"> .claude/skills/</span>
+            </text>
+          </box>
+        </DetailSection>
 
         {skill.hasUpdate && (
           <box marginTop={1}>
-            <text bg="yellow" fg="black">
-              {" "}
-              UPDATE AVAILABLE{" "}
-            </text>
+            <text bg="yellow" fg="black"> UPDATE AVAILABLE </text>
           </box>
         )}
 
-        <ActionHints
-          hints={
-            skill.installed
-              ? [
-                  { key: "d", label: "Uninstall", tone: "danger" },
-                  { key: "u/p", label: "Reinstall in user/project scope" },
-                  { key: "o", label: "Open in browser" },
-                ]
-              : [
-                  { key: "u", label: "Install in user scope", tone: "primary" },
-                  { key: "p", label: "Install in project scope", tone: "primary" },
-                  { key: "o", label: "Open in browser" },
-                ]
-          }
-        />
+        <box marginTop={1}>
+          <text fg="gray">
+            {skill.installed
+              ? "Press u/p to toggle scope"
+              : "Press u/p to install"}
+          </text>
+        </box>
+        <box>
+          <text>
+            <span bg="#555555" fg="white"> o </span>
+            <span fg="gray"> Open in browser</span>
+          </text>
+        </box>
       </box>
     );
   },

package/src/ui/screens/ProfilesScreen.js

@@ -6,7 +6,21 @@ import { useKeyboard } from "../hooks/useKeyboard.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { listProfiles, applyProfile, renameProfile, deleteProfile, exportProfileToJson, importProfileFromJson, } from "../../services/profiles.js";
+import { readSettings, writeSettings, } from "../../services/claude-settings.js";
 import { writeClipboard, readClipboard, ClipboardUnavailableError, } from "../../utils/clipboard.js";
+import { PREDEFINED_PROFILES, } from "../../data/predefined-profiles.js";
+function buildListItems(profileList) {
+    const predefined = PREDEFINED_PROFILES.map((p) => ({
+        kind: "predefined",
+        profile: p,
+    }));
+    const saved = profileList.map((e) => ({
+        kind: "saved",
+        entry: e,
+    }));
+    return [...predefined, ...saved];
+}
+// ─── Component ────────────────────────────────────────────────────────────────
 export function ProfilesScreen() {
     const { state, dispatch } = useApp();
     const { profiles: profilesState } = state;
@@ -32,7 +46,8 @@ export function ProfilesScreen() {
     const profileList = profilesState.profiles.status === "success"
         ? profilesState.profiles.data
         : [];
-    const selectedProfile = profileList[profilesState.selectedIndex];
+    const allItems = buildListItems(profileList);
+    const selectedItem = allItems[profilesState.selectedIndex];
     // Keyboard handling
     useKeyboard((event) => {
         if (state.isSearching || state.modal)
@@ -42,28 +57,88 @@ export function ProfilesScreen() {
             dispatch({ type: "PROFILES_SELECT", index: newIndex });
         }
         else if (event.name === "down" || event.name === "j") {
-            const newIndex = Math.min(Math.max(0, profileList.length - 1), profilesState.selectedIndex + 1);
+            const newIndex = Math.min(Math.max(0, allItems.length - 1), profilesState.selectedIndex + 1);
             dispatch({ type: "PROFILES_SELECT", index: newIndex });
         }
         else if (event.name === "enter" || event.name === "a") {
-            handleApply();
+            if (selectedItem?.kind === "predefined") {
+                void handleApplyPredefined(selectedItem.profile);
+            }
+            else {
+                void handleApply();
+            }
         }
         else if (event.name === "r") {
-            handleRename();
+            if (selectedItem?.kind === "saved")
+                void handleRename();
         }
         else if (event.name === "d") {
-            handleDelete();
+            if (selectedItem?.kind === "saved")
+                void handleDelete();
         }
         else if (event.name === "c") {
-            handleCopy();
+            if (selectedItem?.kind === "saved")
+                void handleCopy();
         }
         else if (event.name === "i") {
-            handleImport();
+            void handleImport();
         }
     });
+    // ─── Predefined profile apply ─────────────────────────────────────────────
+    const handleApplyPredefined = async (profile) => {
+        const allPlugins = [
+            ...profile.magusPlugins.map((p) => `${p}@magus`),
+            ...profile.anthropicPlugins.map((p) => `${p}@claude-plugins-official`),
+        ];
+        const settingsCount = Object.keys(profile.settings).length;
+        const confirmed = await modal.confirm(`Apply ${profile.name}?`, `This will add ${allPlugins.length} plugins, ${profile.skills.length} skills, and update ${settingsCount} settings.\n\nSettings are merged additively — existing values are kept.`);
+        if (!confirmed)
+            return;
+        modal.loading(`Applying "${profile.name}"...`);
+        try {
+            const settings = await readSettings(state.projectPath);
+            // Merge plugins (additive only)
+            settings.enabledPlugins = settings.enabledPlugins ?? {};
+            for (const plugin of allPlugins) {
+                if (!settings.enabledPlugins[plugin]) {
+                    settings.enabledPlugins[plugin] = true;
+                }
+            }
+            // Merge top-level settings (additive — only set if not already set)
+            for (const [key, value] of Object.entries(profile.settings)) {
+                if (key === "env") {
+                    const envMap = value;
+                    const existing = settings;
+                    const existingEnv = existing["env"] ?? {};
+                    for (const [envKey, envVal] of Object.entries(envMap)) {
+                        if (!existingEnv[envKey]) {
+                            existingEnv[envKey] = envVal;
+                        }
+                    }
+                    settings["env"] = existingEnv;
+                }
+                else {
+                    const settingsMap = settings;
+                    if (settingsMap[key] === undefined) {
+                        settingsMap[key] = value;
+                    }
+                }
+            }
+            await writeSettings(settings, state.projectPath);
+            modal.hideModal();
+            dispatch({ type: "DATA_REFRESH_COMPLETE" });
+            await modal.message("Applied", `Profile "${profile.name}" merged into project settings.`, "success");
+        }
+        catch (error) {
+            modal.hideModal();
+            await modal.message("Error", `Failed to apply profile: ${error}`, "error");
+        }
+    };
+    // ─── Saved profile actions ────────────────────────────────────────────────
     const handleApply = async () => {
-        if (!selectedProfile)
+        if (selectedItem?.kind !== "saved")
             return;
+        const selectedProfile = selectedItem.entry;
         const scopeChoice = await modal.select("Apply Profile", `Apply "${selectedProfile.name}" to which scope?`, [
             { label: "User — ~/.claude/settings.json (global)", value: "user" },
             {
@@ -98,8 +173,9 @@ export function ProfilesScreen() {
         }
     };
     const handleRename = async () => {
-        if (!selectedProfile)
+        if (selectedItem?.kind !== "saved")
             return;
+        const selectedProfile = selectedItem.entry;
         const newName = await modal.input("Rename Profile", "New name:", selectedProfile.name);
         if (newName === null || !newName.trim())
             return;
@@ -116,8 +192,9 @@ export function ProfilesScreen() {
         }
     };
     const handleDelete = async () => {
-        if (!selectedProfile)
+        if (selectedItem?.kind !== "saved")
             return;
+        const selectedProfile = selectedItem.entry;
         const confirmed = await modal.confirm(`Delete "${selectedProfile.name}"?`, "This will permanently remove the profile.");
         if (!confirmed)
             return;
@@ -126,7 +203,7 @@ export function ProfilesScreen() {
             await deleteProfile(selectedProfile.id, selectedProfile.scope, state.projectPath);
             modal.hideModal();
             // Adjust selection if we deleted the last item
-            const newIndex = Math.max(0, Math.min(profilesState.selectedIndex, profileList.length - 2));
+            const newIndex = Math.max(0, Math.min(profilesState.selectedIndex, allItems.length - 2));
             dispatch({ type: "PROFILES_SELECT", index: newIndex });
             await fetchData();
             await modal.message("Deleted", "Profile deleted.", "success");
@@ -137,8 +214,9 @@ export function ProfilesScreen() {
         }
     };
     const handleCopy = async () => {
-        if (!selectedProfile)
+        if (selectedItem?.kind !== "saved")
             return;
+        const selectedProfile = selectedItem.entry;
         modal.loading("Exporting...");
         try {
             const json = await exportProfileToJson(selectedProfile.id, selectedProfile.scope, state.projectPath);
@@ -202,6 +280,7 @@ export function ProfilesScreen() {
             await modal.message("Error", `Failed to import: ${error}`, "error");
         }
     };
+    // ─── Rendering helpers ────────────────────────────────────────────────────
     const formatDate = (iso) => {
         try {
             const d = new Date(iso);
@@ -215,7 +294,18 @@ export function ProfilesScreen() {
             return iso;
         }
     };
-    const renderListItem = (entry, _idx, isSelected) => {
+    const renderListItem = (item, _idx, isSelected) => {
+        if (item.kind === "predefined") {
+            const { profile } = item;
+            const pluginCount = profile.magusPlugins.length + profile.anthropicPlugins.length;
+            const skillCount = profile.skills.length;
+            if (isSelected) {
+                return (_jsxs("text", { bg: "blue", fg: "white", children: [" ", profile.icon, " ", profile.name, " \u2014 ", pluginCount, " plugins \u00B7 ", skillCount, " ", "skill", skillCount !== 1 ? "s" : "", " "] }));
+            }
+            return (_jsxs("text", { children: [_jsx("span", { fg: "blue", children: "[preset]" }), _jsx("span", { children: " " }), _jsxs("span", { fg: "white", children: [profile.icon, " ", profile.name] }), _jsxs("span", { fg: "gray", children: [" ", "\u2014 ", pluginCount, " plugins \u00B7 ", skillCount, " skill", skillCount !== 1 ? "s" : ""] })] }));
+        }
+        // Saved profile
+        const { entry } = item;
         const pluginCount = Object.keys(entry.plugins).length;
         const dateStr = formatDate(entry.updatedAt);
         const scopeColor = entry.scope === "user" ? "cyan" : "green";
@@ -232,12 +322,24 @@ export function ProfilesScreen() {
         if (profilesState.profiles.status === "error") {
             return (_jsxs("text", { fg: "red", children: ["Error: ", profilesState.profiles.error.message] }));
         }
-        if (profileList.length === 0) {
-            return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "gray", children: "No profiles yet." }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "green", children: "Press 's' in the Plugins screen to save the current selection as a profile." }) })] }));
-        }
-        if (!selectedProfile) {
+        if (!selectedItem) {
             return _jsx("text", { fg: "gray", children: "Select a profile to see details" });
         }
+        if (selectedItem.kind === "predefined") {
+            return renderPredefinedDetail(selectedItem.profile);
+        }
+        return renderSavedDetail(selectedItem.entry);
+    };
+    const renderPredefinedDetail = (profile) => {
+        const allPlugins = [
+            ...profile.magusPlugins.map((p) => `${p}@magus`),
+            ...profile.anthropicPlugins.map((p) => `${p}@claude-plugins-official`),
+        ];
+        return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "blue", children: _jsxs("strong", { children: [profile.icon, " ", profile.name] }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: profile.description }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { fg: "gray", children: ["Magus plugins (", profile.magusPlugins.length, "):"] }), profile.magusPlugins.map((p) => (_jsx("box", { children: _jsxs("text", { fg: "cyan", children: [" ", p, "@magus"] }) }, p)))] }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { fg: "gray", children: ["Anthropic plugins (", profile.anthropicPlugins.length, "):"] }), profile.anthropicPlugins.map((p) => (_jsx("box", { children: _jsxs("text", { fg: "yellow", children: [" ", p, "@claude-plugins-official"] }) }, p)))] }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { fg: "gray", children: ["Skills (", profile.skills.length, "):"] }), profile.skills.map((s) => (_jsx("box", { children: _jsxs("text", { fg: "white", children: [" ", s] }) }, s)))] }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { fg: "gray", children: ["Settings (", Object.keys(profile.settings).length, "):"] }), Object.entries(profile.settings)
+                            .filter(([k]) => k !== "env")
+                            .map(([k, v]) => (_jsx("box", { children: _jsxs("text", { fg: "white", children: [" ", k, ": ", String(v)] }) }, k)))] }), _jsx("box", { marginTop: 2, flexDirection: "column", children: _jsxs("box", { children: [_jsxs("text", { bg: "blue", fg: "white", children: [" ", "Enter/a", " "] }), _jsxs("text", { fg: "gray", children: [" ", "Apply (merges ", allPlugins.length, " plugins into project settings)"] })] }) })] }));
+    };
+    const renderSavedDetail = (selectedProfile) => {
         const plugins = Object.keys(selectedProfile.plugins);
         const scopeColor = selectedProfile.scope === "user" ? "cyan" : "green";
         const scopeLabel = selectedProfile.scope === "user"
@@ -248,8 +350,7 @@ export function ProfilesScreen() {
     const profileCount = profileList.length;
     const userCount = profileList.filter((p) => p.scope === "user").length;
     const projCount = profileList.filter((p) => p.scope === "project").length;
-    const statusContent = (_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Profiles: " }), _jsxs("span", { fg: "cyan", children: [userCount, " user"] }), _jsx("span", { fg: "gray", children: " + " }), _jsxs("span", { fg: "green", children: [projCount, " project"] }), _jsx("span", { fg: "gray", children: " = " }), _jsxs("span", { fg: "white", children: [profileCount, " total"] })] }));
-    return (_jsx(ScreenLayout, { title: "claudeup Plugin Profiles", currentScreen: "profiles", statusLine: statusContent, footerHints: "\u2191\u2193:nav \u2502 Enter/a:apply \u2502 r:rename \u2502 d:delete \u2502 c:copy \u2502 i:import", listPanel: profileList.length === 0 &&
-            profilesState.profiles.status !== "loading" ? (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "gray", children: "No profiles yet." }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "green", children: "Go to Plugins (1) and press 's' to save a profile." }) })] })) : (_jsx(ScrollableList, { items: profileList, selectedIndex: profilesState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight })), detailPanel: renderDetail() }));
+    const statusContent = (_jsxs("text", { children: [_jsxs("span", { fg: "blue", children: [PREDEFINED_PROFILES.length, " presets"] }), _jsx("span", { fg: "gray", children: " + " }), _jsxs("span", { fg: "cyan", children: [userCount, " user"] }), _jsx("span", { fg: "gray", children: " + " }), _jsxs("span", { fg: "green", children: [projCount, " project"] }), _jsx("span", { fg: "gray", children: " = " }), _jsxs("span", { fg: "white", children: [PREDEFINED_PROFILES.length + profileCount, " total"] })] }));
+    return (_jsx(ScreenLayout, { title: "claudeup Plugin Profiles", currentScreen: "profiles", statusLine: statusContent, footerHints: "\u2191\u2193:nav \u2502 Enter/a:apply \u2502 r:rename \u2502 d:delete \u2502 c:copy \u2502 i:import", listPanel: _jsx(ScrollableList, { items: allItems, selectedIndex: profilesState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), detailPanel: renderDetail() }));
 }
 export default ProfilesScreen;