claudeup 3.11.0 → 3.13.0

package/package.json

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

package/src/services/skills-manager.js

@@ -164,9 +164,11 @@ export async function fetchPopularSkills(limit = 30) {
 export async function fetchAvailableSkills(_repos, projectPath) {
     const userInstalled = await getInstalledSkillNames("user");
     const projectInstalled = await getInstalledSkillNames("project", projectPath);
+    const slugify = (name) => name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
     const markInstalled = (skill) => {
-        const isUserInstalled = userInstalled.has(skill.name);
-        const isProjInstalled = projectInstalled.has(skill.name);
+        const slug = slugify(skill.name);
+        const isUserInstalled = userInstalled.has(slug) || userInstalled.has(skill.name);
+        const isProjInstalled = projectInstalled.has(slug) || projectInstalled.has(skill.name);
         const installed = isUserInstalled || isProjInstalled;
         const installedScope = isProjInstalled
             ? "project"
@@ -256,16 +258,25 @@ export async function installSkill(skill, scope, projectPath) {
     if (!content) {
         throw new Error(`Failed to fetch skill: SKILL.md not found in ${repo}/${repoPath}`);
     }
+    // Use slug for directory name — display names can have slashes/spaces
+    const dirName = skill.name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-|-$/g, "");
     const installDir = scope === "user"
-        ? path.join(getUserSkillsDir(), skill.name)
-        : path.join(getProjectSkillsDir(projectPath), skill.name);
+        ? path.join(getUserSkillsDir(), dirName)
+        : path.join(getProjectSkillsDir(projectPath), dirName);
     await fs.ensureDir(installDir);
     await fs.writeFile(path.join(installDir, "SKILL.md"), content, "utf8");
 }
 export async function uninstallSkill(skillName, scope, projectPath) {
+    const dirName = skillName
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-|-$/g, "");
     const installDir = scope === "user"
-        ? path.join(getUserSkillsDir(), skillName)
-        : path.join(getProjectSkillsDir(projectPath), skillName);
+        ? path.join(getUserSkillsDir(), dirName)
+        : path.join(getProjectSkillsDir(projectPath), dirName);
     const skillMdPath = path.join(installDir, "SKILL.md");
     if (await fs.pathExists(skillMdPath)) {
         await fs.remove(skillMdPath);

package/src/services/skills-manager.ts

@@ -228,9 +228,13 @@ export async function fetchAvailableSkills(
 	const userInstalled = await getInstalledSkillNames("user");
 	const projectInstalled = await getInstalledSkillNames("project", projectPath);
 
+	const slugify = (name: string) =>
+		name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+
 	const markInstalled = (skill: SkillInfo): SkillInfo => {
-		const isUserInstalled = userInstalled.has(skill.name);
-		const isProjInstalled = projectInstalled.has(skill.name);
+		const slug = slugify(skill.name);
+		const isUserInstalled = userInstalled.has(slug) || userInstalled.has(skill.name);
+		const isProjInstalled = projectInstalled.has(slug) || projectInstalled.has(skill.name);
 		const installed = isUserInstalled || isProjInstalled;
 		const installedScope: "user" | "project" | null = isProjInstalled
 			? "project"
@@ -334,10 +338,16 @@ export async function installSkill(
 		);
 	}
 
+	// Use slug for directory name — display names can have slashes/spaces
+	const dirName = skill.name
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, "-")
+		.replace(/^-|-$/g, "");
+
 	const installDir =
 		scope === "user"
-			? path.join(getUserSkillsDir(), skill.name)
-			: path.join(getProjectSkillsDir(projectPath), skill.name);
+			? path.join(getUserSkillsDir(), dirName)
+			: path.join(getProjectSkillsDir(projectPath), dirName);
 
 	await fs.ensureDir(installDir);
 	await fs.writeFile(path.join(installDir, "SKILL.md"), content, "utf8");
@@ -348,10 +358,15 @@ export async function uninstallSkill(
 	scope: "user" | "project",
 	projectPath?: string,
 ): Promise<void> {
+	const dirName = skillName
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, "-")
+		.replace(/^-|-$/g, "");
+
 	const installDir =
 		scope === "user"
-			? path.join(getUserSkillsDir(), skillName)
-			: path.join(getProjectSkillsDir(projectPath), skillName);
+			? path.join(getUserSkillsDir(), dirName)
+			: path.join(getProjectSkillsDir(projectPath), dirName);
 
 	const skillMdPath = path.join(installDir, "SKILL.md");
 

package/src/ui/components/ScopeIndicator.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+/**
+ * Scope indicator for list items.
+ * Shows colored letter badges when installed, empty space when not.
+ *
+ * Installed in user+project:  u p
+ * Installed in project only:    p
+ * Not installed:              (3 spaces)
+ *
+ * Colors match the detail panel: cyan=user, green=project, yellow=local
+ */
+export function scopeIndicatorText(user, project, local) {
+    const segments = [
+        user
+            ? { char: "u", bg: "cyan", fg: "black" }
+            : { char: " ", bg: "", fg: "" },
+        project
+            ? { char: "p", bg: "green", fg: "black" }
+            : { char: " ", bg: "", fg: "" },
+        local
+            ? { char: "l", bg: "yellow", fg: "black" }
+            : { char: " ", bg: "", fg: "" },
+    ];
+    const text = segments.map((s) => s.char).join("");
+    return { text, segments };
+}
+export function ScopeIndicator({ user, project, local }) {
+    const { segments } = scopeIndicatorText(user, project, local);
+    return (_jsx("text", { children: segments.map((s, i) => s.bg ? (_jsx("span", { bg: s.bg, fg: s.fg, children: s.char }, i)) : (_jsx("span", { children: " " }, i))) }));
+}

package/src/ui/components/ScopeIndicator.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+/**
+ * Scope indicator for list items.
+ * Shows colored letter badges when installed, empty space when not.
+ *
+ * Installed in user+project:  u p
+ * Installed in project only:    p
+ * Not installed:              (3 spaces)
+ *
+ * Colors match the detail panel: cyan=user, green=project, yellow=local
+ */
+
+export function scopeIndicatorText(
+	user?: boolean,
+	project?: boolean,
+	local?: boolean,
+): { text: string; segments: Array<{ char: string; bg: string; fg: string }> } {
+	const segments: Array<{ char: string; bg: string; fg: string }> = [
+		user
+			? { char: "u", bg: "cyan", fg: "black" }
+			: { char: " ", bg: "", fg: "" },
+		project
+			? { char: "p", bg: "green", fg: "black" }
+			: { char: " ", bg: "", fg: "" },
+		local
+			? { char: "l", bg: "yellow", fg: "black" }
+			: { char: " ", bg: "", fg: "" },
+	];
+
+	const text = segments.map((s) => s.char).join("");
+	return { text, segments };
+}
+
+interface ScopeIndicatorProps {
+	user?: boolean;
+	project?: boolean;
+	local?: boolean;
+}
+
+export function ScopeIndicator({ user, project, local }: ScopeIndicatorProps) {
+	const { segments } = scopeIndicatorText(user, project, local);
+
+	return (
+		<text>
+			{segments.map((s, i) =>
+				s.bg ? (
+					<span key={i} bg={s.bg} fg={s.fg}>
+						{s.char}
+					</span>
+				) : (
+					<span key={i}> </span>
+				),
+			)}
+		</text>
+	);
+}

package/src/ui/screens/PluginsScreen.js

@@ -16,6 +16,10 @@ import { saveInstalledPluginVersion } from "../../services/plugin-manager.js";
 import { installPlugin as cliInstallPlugin, uninstallPlugin as cliUninstallPlugin, updatePlugin as cliUpdatePlugin, } from "../../services/claude-cli.js";
 import { getPluginEnvRequirements, getPluginSourcePath, } from "../../services/plugin-mcp-config.js";
 import { getPluginSetupFromSource, checkMissingDeps, installPluginDeps, } from "../../services/plugin-setup.js";
+// Virtual marketplace name for the community sub-section of claude-plugins-official
+const COMMUNITY_VIRTUAL_MARKETPLACE = "claude-plugins-official:community";
+// The marketplace that gets split into Anthropic Official + Community sections
+const SPLIT_MARKETPLACE = "claude-plugins-official";
 export function PluginsScreen() {
     const { state, dispatch } = useApp();
     const { plugins: pluginsState } = state;
@@ -77,6 +81,64 @@ export function PluginsScreen() {
             const isCollapsed = collapsed.has(marketplace.name);
             const isEnabled = marketplacePlugins.length > 0 || marketplace.official;
             const hasPlugins = marketplacePlugins.length > 0;
+            // Special handling: split claude-plugins-official into two sub-sections
+            if (marketplace.name === SPLIT_MARKETPLACE && hasPlugins) {
+                const anthropicPlugins = marketplacePlugins.filter((p) => p.author?.name?.toLowerCase() === "anthropic");
+                const communityPlugins = marketplacePlugins.filter((p) => p.author?.name?.toLowerCase() !== "anthropic");
+                // Sub-section 1: Anthropic Official (plugins by Anthropic)
+                const anthropicCollapsed = collapsed.has(marketplace.name);
+                const anthropicHasPlugins = anthropicPlugins.length > 0;
+                items.push({
+                    id: `mp:${marketplace.name}`,
+                    type: "category",
+                    label: marketplace.displayName,
+                    marketplace,
+                    marketplaceEnabled: isEnabled,
+                    pluginCount: anthropicPlugins.length,
+                    isExpanded: !anthropicCollapsed && anthropicHasPlugins,
+                });
+                if (isEnabled && anthropicHasPlugins && !anthropicCollapsed) {
+                    for (const plugin of anthropicPlugins) {
+                        items.push({
+                            id: `pl:${plugin.id}`,
+                            type: "plugin",
+                            label: plugin.name,
+                            plugin,
+                        });
+                    }
+                }
+                // Sub-section 2: Community (third-party plugins in same marketplace)
+                if (communityPlugins.length > 0) {
+                    const communityVirtualMp = {
+                        name: COMMUNITY_VIRTUAL_MARKETPLACE,
+                        displayName: "Anthropic Official — 3rd Party",
+                        source: marketplace.source,
+                        description: "Third-party plugins in the Anthropic Official marketplace",
+                    };
+                    const communityCollapsed = collapsed.has(COMMUNITY_VIRTUAL_MARKETPLACE);
+                    items.push({
+                        id: `mp:${COMMUNITY_VIRTUAL_MARKETPLACE}`,
+                        type: "category",
+                        label: "Anthropic Official — 3rd Party",
+                        marketplace: communityVirtualMp,
+                        marketplaceEnabled: true,
+                        pluginCount: communityPlugins.length,
+                        isExpanded: !communityCollapsed,
+                        isCommunitySection: true,
+                    });
+                    if (!communityCollapsed) {
+                        for (const plugin of communityPlugins) {
+                            items.push({
+                                id: `pl:${plugin.id}`,
+                                type: "plugin",
+                                label: plugin.name,
+                                plugin,
+                            });
+                        }
+                    }
+                }
+                continue;
+            }
             // Category header (marketplace)
             items.push({
                 id: `mp:${marketplace.name}`,
@@ -113,32 +175,44 @@ export function PluginsScreen() {
         // Only search plugins, not categories
         const pluginItems = allItems.filter((item) => item.type === "plugin");
         const fuzzyResults = fuzzyFilter(pluginItems, query, (item) => item.label);
-        // Include parent categories for matched plugins
-        const matchedMarketplaces = new Set();
+        // Build a set of matched plugin item ids for O(1) lookup
+        const matchedPluginIds = new Set();
         for (const result of fuzzyResults) {
-            if (result.item.plugin) {
-                matchedMarketplaces.add(result.item.plugin.marketplace);
+            matchedPluginIds.add(result.item.id);
+        }
+        // Walk allItems sequentially: track the current category section.
+        // For each category, include it only if any plugin under it matched.
+        // We build a map from category item id -> whether any plugin below matched.
+        const categoryHasMatch = new Map();
+        let currentCategoryId = null;
+        for (const item of allItems) {
+            if (item.type === "category") {
+                currentCategoryId = item.id;
+                if (!categoryHasMatch.has(item.id)) {
+                    categoryHasMatch.set(item.id, false);
+                }
+            }
+            else if (item.type === "plugin" && currentCategoryId) {
+                if (matchedPluginIds.has(item.id)) {
+                    categoryHasMatch.set(currentCategoryId, true);
+                }
             }
         }
         const result = [];
-        let currentMarketplace = null;
+        let currentCatIncluded = false;
+        currentCategoryId = null;
         for (const item of allItems) {
-            if (item.type === "category" && item.marketplace) {
-                if (matchedMarketplaces.has(item.marketplace.name)) {
+            if (item.type === "category") {
+                currentCategoryId = item.id;
+                currentCatIncluded = categoryHasMatch.get(item.id) === true;
+                if (currentCatIncluded) {
                     result.push(item);
-                    currentMarketplace = item.marketplace.name;
-                }
-                else {
-                    currentMarketplace = null;
                 }
             }
-            else if (item.type === "plugin" && item.plugin) {
-                if (currentMarketplace === item.plugin.marketplace) {
-                    // Check if this plugin matched
+            else if (item.type === "plugin" && currentCatIncluded) {
+                if (matchedPluginIds.has(item.id)) {
                     const matched = fuzzyResults.find((r) => r.item.id === item.id);
-                    if (matched) {
-                        result.push({ ...item, _matches: matched.matches });
-                    }
+                    result.push({ ...item, _matches: matched?.matches });
                 }
             }
         }
@@ -634,9 +708,10 @@ export function PluginsScreen() {
             installedVersion &&
             latestVersion !== "0.0.0" &&
             installedVersion !== latestVersion;
-        // Determine action: if installed in this scope → uninstall
-        // If installed anywhere else but not this scope → uninstall from detected scope
-        // Otherwise → install
+        // Determine action for THIS scope:
+        // - installed in this scope + has update → update
+        // - installed in this scope → uninstall from this scope
+        // - not installed in this scope → install to this scope
         let action;
         if (isInstalledInScope && hasUpdateInScope) {
             action = "update";
@@ -644,12 +719,8 @@ export function PluginsScreen() {
         else if (isInstalledInScope) {
             action = "uninstall";
         }
-        else if (!isInstalledAnywhere) {
-            action = "install";
-        }
         else {
-            // Installed in a different scope — uninstall from the scope it's actually in
-            action = "uninstall";
+            action = "install";
         }
         const actionLabel = action === "update"
             ? `Updating ${scopeLabel}`
@@ -777,7 +848,11 @@ export function PluginsScreen() {
             let statusText = "";
             let statusColor = "green";
             if (item.marketplaceEnabled) {
-                if (mp.name === "claude-plugins-official") {
+                if (item.isCommunitySection) {
+                    statusText = "3rd Party";
+                    statusColor = "gray";
+                }
+                else if (mp.name === "claude-plugins-official") {
                     statusText = "★ Official";
                     statusColor = "yellow";
                 }
@@ -805,17 +880,12 @@ export function PluginsScreen() {
         }
         if (item.type === "plugin" && item.plugin) {
             const plugin = item.plugin;
-            let statusIcon = "○";
-            let statusColor = "gray";
             const isAnyScope = plugin.userScope?.enabled || plugin.projectScope?.enabled || plugin.localScope?.enabled;
-            if (plugin.isOrphaned) {
-                statusIcon = "x";
-                statusColor = "red";
-            }
-            else if (isAnyScope) {
-                statusIcon = "●";
-                statusColor = "green";
-            }
+            // Build scope parts for colored rendering
+            const hasUser = plugin.userScope?.enabled;
+            const hasProject = plugin.projectScope?.enabled;
+            const hasLocal = plugin.localScope?.enabled;
+            const hasAnyScope = hasUser || hasProject || hasLocal;
             // Build version string
             let versionStr = "";
             if (plugin.isOrphaned) {
@@ -831,19 +901,18 @@ export function PluginsScreen() {
             const matches = item._matches;
             const segments = matches ? highlightMatches(plugin.name, matches) : null;
             if (isSelected) {
-                const displayText = `   ${statusIcon} ${plugin.name}${versionStr} `;
-                return (_jsx("text", { bg: "magenta", fg: "white", children: displayText }));
+                const scopeStr = `[${hasUser ? "u" : "."}${hasProject ? "p" : "."}${hasLocal ? "l" : "."}]`;
+                return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", scopeStr, " ", plugin.name, versionStr, " "] }));
             }
-            // For non-selected, render with colors
             const displayName = segments
                 ? segments.map((seg) => seg.text).join("")
                 : plugin.name;
             if (plugin.isOrphaned) {
                 const ver = plugin.installedVersion && plugin.installedVersion !== "0.0.0"
                     ? ` v${plugin.installedVersion}` : "";
-                return (_jsxs("text", { children: [_jsxs("span", { fg: "red", children: ["   ", statusIcon, " "] }), _jsx("span", { fg: "gray", children: displayName }), ver && _jsx("span", { fg: "yellow", children: ver }), _jsx("span", { fg: "red", children: " deprecated" })] }));
+                return (_jsxs("text", { children: [_jsx("span", { fg: "red", children: " [x..] " }), _jsx("span", { fg: "gray", children: displayName }), ver && _jsx("span", { fg: "yellow", children: ver }), _jsx("span", { fg: "red", children: " deprecated" })] }));
             }
-            return (_jsxs("text", { children: [_jsxs("span", { fg: statusColor, children: ["   ", statusIcon, " "] }), _jsx("span", { children: displayName }), _jsx("span", { fg: plugin.hasUpdate ? "yellow" : "gray", children: versionStr })] }));
+            return (_jsxs("text", { children: [_jsx("span", { fg: "#555555", children: " [" }), _jsx("span", { fg: hasUser ? "cyan" : "#555555", children: hasUser ? "u" : "." }), _jsx("span", { fg: hasProject ? "green" : "#555555", children: hasProject ? "p" : "." }), _jsx("span", { fg: hasLocal ? "yellow" : "#555555", children: hasLocal ? "l" : "." }), _jsx("span", { fg: "#555555", children: "]" }), _jsx("span", { children: " " }), _jsx("span", { fg: hasAnyScope ? "white" : "gray", children: displayName }), _jsx("span", { fg: plugin.hasUpdate ? "yellow" : "gray", children: versionStr })] }));
         }
         return _jsx("text", { fg: "gray", children: item.label });
     };
@@ -857,6 +926,8 @@ export function PluginsScreen() {
             const isEnabled = selectedItem.marketplaceEnabled;
             // Get appropriate badge for marketplace type
             const getBadge = () => {
+                if (selectedItem.isCommunitySection)
+                    return " 3rd Party";
                 if (mp.name === "claude-plugins-official")
                     return " ★";
                 if (mp.name === "claude-code-plugins")

package/src/ui/screens/PluginsScreen.tsx

@@ -6,6 +6,7 @@ import { ScreenLayout } from "../components/layout/index.js";
 import { CategoryHeader } from "../components/CategoryHeader.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { EmptyFilterState } from "../components/EmptyFilterState.js";
+import { scopeIndicatorText } from "../components/ScopeIndicator.js";
 import { fuzzyFilter, highlightMatches } from "../../utils/fuzzy-search.js";
 import { getAllMarketplaces } from "../../data/marketplaces.js";
 import {
@@ -41,6 +42,11 @@ import {
 } from "../../services/plugin-setup.js";
 import type { Marketplace } from "../../types/index.js";
 
+// Virtual marketplace name for the community sub-section of claude-plugins-official
+const COMMUNITY_VIRTUAL_MARKETPLACE = "claude-plugins-official:community";
+// The marketplace that gets split into Anthropic Official + Community sections
+const SPLIT_MARKETPLACE = "claude-plugins-official";
+
 interface ListItem {
 	id: string;
 	type: "category" | "plugin";
@@ -50,6 +56,8 @@ interface ListItem {
 	plugin?: PluginInfo;
 	pluginCount?: number;
 	isExpanded?: boolean;
+	/** True for the virtual Community sub-section derived from claude-plugins-official */
+	isCommunitySection?: boolean;
 }
 
 export function PluginsScreen() {
@@ -128,6 +136,72 @@ export function PluginsScreen() {
 			const isEnabled = marketplacePlugins.length > 0 || marketplace.official;
 			const hasPlugins = marketplacePlugins.length > 0;
 
+			// Special handling: split claude-plugins-official into two sub-sections
+			if (marketplace.name === SPLIT_MARKETPLACE && hasPlugins) {
+				const anthropicPlugins = marketplacePlugins.filter(
+					(p) => p.author?.name?.toLowerCase() === "anthropic",
+				);
+				const communityPlugins = marketplacePlugins.filter(
+					(p) => p.author?.name?.toLowerCase() !== "anthropic",
+				);
+
+				// Sub-section 1: Anthropic Official (plugins by Anthropic)
+				const anthropicCollapsed = collapsed.has(marketplace.name);
+				const anthropicHasPlugins = anthropicPlugins.length > 0;
+				items.push({
+					id: `mp:${marketplace.name}`,
+					type: "category",
+					label: marketplace.displayName,
+					marketplace,
+					marketplaceEnabled: isEnabled,
+					pluginCount: anthropicPlugins.length,
+					isExpanded: !anthropicCollapsed && anthropicHasPlugins,
+				});
+				if (isEnabled && anthropicHasPlugins && !anthropicCollapsed) {
+					for (const plugin of anthropicPlugins) {
+						items.push({
+							id: `pl:${plugin.id}`,
+							type: "plugin",
+							label: plugin.name,
+							plugin,
+						});
+					}
+				}
+
+				// Sub-section 2: Community (third-party plugins in same marketplace)
+				if (communityPlugins.length > 0) {
+					const communityVirtualMp: Marketplace = {
+						name: COMMUNITY_VIRTUAL_MARKETPLACE,
+						displayName: "Anthropic Official — 3rd Party",
+						source: marketplace.source,
+						description: "Third-party plugins in the Anthropic Official marketplace",
+					};
+					const communityCollapsed = collapsed.has(COMMUNITY_VIRTUAL_MARKETPLACE);
+					items.push({
+						id: `mp:${COMMUNITY_VIRTUAL_MARKETPLACE}`,
+						type: "category",
+						label: "Anthropic Official — 3rd Party",
+						marketplace: communityVirtualMp,
+						marketplaceEnabled: true,
+						pluginCount: communityPlugins.length,
+						isExpanded: !communityCollapsed,
+						isCommunitySection: true,
+					});
+					if (!communityCollapsed) {
+						for (const plugin of communityPlugins) {
+							items.push({
+								id: `pl:${plugin.id}`,
+								type: "plugin",
+								label: plugin.name,
+								plugin,
+							});
+						}
+					}
+				}
+
+				continue;
+			}
+
 			// Category header (marketplace)
 			items.push({
 				id: `mp:${marketplace.name}`,
@@ -168,34 +242,47 @@ export function PluginsScreen() {
 		const pluginItems = allItems.filter((item) => item.type === "plugin");
 		const fuzzyResults = fuzzyFilter(pluginItems, query, (item) => item.label);
 
-		// Include parent categories for matched plugins
-		const matchedMarketplaces = new Set<string>();
+		// Build a set of matched plugin item ids for O(1) lookup
+		const matchedPluginIds = new Set<string>();
 		for (const result of fuzzyResults) {
-			if (result.item.plugin) {
-				matchedMarketplaces.add(result.item.plugin.marketplace);
+			matchedPluginIds.add(result.item.id);
+		}
+
+		// Walk allItems sequentially: track the current category section.
+		// For each category, include it only if any plugin under it matched.
+		// We build a map from category item id -> whether any plugin below matched.
+		const categoryHasMatch = new Map<string, boolean>();
+		let currentCategoryId: string | null = null;
+		for (const item of allItems) {
+			if (item.type === "category") {
+				currentCategoryId = item.id;
+				if (!categoryHasMatch.has(item.id)) {
+					categoryHasMatch.set(item.id, false);
+				}
+			} else if (item.type === "plugin" && currentCategoryId) {
+				if (matchedPluginIds.has(item.id)) {
+					categoryHasMatch.set(currentCategoryId, true);
+				}
 			}
 		}
 
 		const result: ListItem[] = [];
-		let currentMarketplace: string | null = null;
+		let currentCatIncluded = false;
+		currentCategoryId = null;
 
 		for (const item of allItems) {
-			if (item.type === "category" && item.marketplace) {
-				if (matchedMarketplaces.has(item.marketplace.name)) {
+			if (item.type === "category") {
+				currentCategoryId = item.id;
+				currentCatIncluded = categoryHasMatch.get(item.id) === true;
+				if (currentCatIncluded) {
 					result.push(item);
-					currentMarketplace = item.marketplace.name;
-				} else {
-					currentMarketplace = null;
 				}
-			} else if (item.type === "plugin" && item.plugin) {
-				if (currentMarketplace === item.plugin.marketplace) {
-					// Check if this plugin matched
+			} else if (item.type === "plugin" && currentCatIncluded) {
+				if (matchedPluginIds.has(item.id)) {
 					const matched = fuzzyResults.find((r) => r.item.id === item.id);
-					if (matched) {
-						result.push({ ...item, _matches: matched.matches } as ListItem & {
-							_matches?: number[];
-						});
-					}
+					result.push({ ...item, _matches: matched?.matches } as ListItem & {
+						_matches?: number[];
+					});
 				}
 			}
 		}
@@ -811,19 +898,17 @@ export function PluginsScreen() {
 			latestVersion !== "0.0.0" &&
 			installedVersion !== latestVersion;
 
-		// Determine action: if installed in this scope → uninstall
-		// If installed anywhere else but not this scope → uninstall from detected scope
-		// Otherwise → install
+		// Determine action for THIS scope:
+		// - installed in this scope + has update → update
+		// - installed in this scope → uninstall from this scope
+		// - not installed in this scope → install to this scope
 		let action: "update" | "install" | "uninstall";
 		if (isInstalledInScope && hasUpdateInScope) {
 			action = "update";
 		} else if (isInstalledInScope) {
 			action = "uninstall";
-		} else if (!isInstalledAnywhere) {
-			action = "install";
 		} else {
-			// Installed in a different scope — uninstall from the scope it's actually in
-			action = "uninstall";
+			action = "install";
 		}
 
 		const actionLabel =
@@ -1005,7 +1090,10 @@ export function PluginsScreen() {
 			let statusText = "";
 			let statusColor = "green";
 			if (item.marketplaceEnabled) {
-				if (mp.name === "claude-plugins-official") {
+				if (item.isCommunitySection) {
+					statusText = "3rd Party";
+					statusColor = "gray";
+				} else if (mp.name === "claude-plugins-official") {
 					statusText = "★ Official";
 					statusColor = "yellow";
 				} else if (mp.name === "claude-code-plugins") {
@@ -1050,17 +1138,13 @@ export function PluginsScreen() {
 
 		if (item.type === "plugin" && item.plugin) {
 			const plugin = item.plugin;
-			let statusIcon = "○";
-			let statusColor = "gray";
-
 			const isAnyScope = plugin.userScope?.enabled || plugin.projectScope?.enabled || plugin.localScope?.enabled;
-			if (plugin.isOrphaned) {
-				statusIcon = "x";
-				statusColor = "red";
-			} else if (isAnyScope) {
-				statusIcon = "●";
-				statusColor = "green";
-			}
+
+			// Build scope parts for colored rendering
+			const hasUser = plugin.userScope?.enabled;
+			const hasProject = plugin.projectScope?.enabled;
+			const hasLocal = plugin.localScope?.enabled;
+			const hasAnyScope = hasUser || hasProject || hasLocal;
 
 			// Build version string
 			let versionStr = "";
@@ -1078,15 +1162,14 @@ export function PluginsScreen() {
 			const segments = matches ? highlightMatches(plugin.name, matches) : null;
 
 			if (isSelected) {
-				const displayText = `   ${statusIcon} ${plugin.name}${versionStr} `;
+				const scopeStr = `[${hasUser ? "u" : "."}${hasProject ? "p" : "."}${hasLocal ? "l" : "."}]`;
 				return (
 					<text bg="magenta" fg="white">
-						{displayText}
+						{" "}{scopeStr} {plugin.name}{versionStr}{" "}
 					</text>
 				);
 			}
 
-			// For non-selected, render with colors
 			const displayName = segments
 				? segments.map((seg) => seg.text).join("")
 				: plugin.name;
@@ -1096,7 +1179,7 @@ export function PluginsScreen() {
 					? ` v${plugin.installedVersion}` : "";
 				return (
 					<text>
-						<span fg="red">{"   "}{statusIcon} </span>
+						<span fg="red"> [x..] </span>
 						<span fg="gray">{displayName}</span>
 						{ver && <span fg="yellow">{ver}</span>}
 						<span fg="red"> deprecated</span>
@@ -1106,11 +1189,13 @@ export function PluginsScreen() {
 
 			return (
 				<text>
-					<span fg={statusColor}>
-						{"   "}
-						{statusIcon}{" "}
-					</span>
-					<span>{displayName}</span>
+					<span fg="#555555"> [</span>
+					<span fg={hasUser ? "cyan" : "#555555"}>{hasUser ? "u" : "."}</span>
+					<span fg={hasProject ? "green" : "#555555"}>{hasProject ? "p" : "."}</span>
+					<span fg={hasLocal ? "yellow" : "#555555"}>{hasLocal ? "l" : "."}</span>
+					<span fg="#555555">]</span>
+					<span> </span>
+					<span fg={hasAnyScope ? "white" : "gray"}>{displayName}</span>
 					<span fg={plugin.hasUpdate ? "yellow" : "gray"}>{versionStr}</span>
 				</text>
 			);
@@ -1131,6 +1216,7 @@ export function PluginsScreen() {
 
 			// Get appropriate badge for marketplace type
 			const getBadge = () => {
+				if (selectedItem.isCommunitySection) return " 3rd Party";
 				if (mp.name === "claude-plugins-official") return " ★";
 				if (mp.name === "claude-code-plugins") return " ⚠";
 				if (mp.official) return " ★";

package/src/ui/screens/SkillsScreen.js

@@ -229,21 +229,15 @@ export function SkillsScreen() {
         try {
             await installSkill(selectedSkill, scope, state.projectPath);
             modal.hideModal();
-            dispatch({
-                type: "SKILLS_UPDATE_ITEM",
-                name: selectedSkill.name,
-                updates: {
-                    installed: true,
-                    installedScope: scope,
-                },
-            });
+            // 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");
         }
         catch (error) {
             modal.hideModal();
             await modal.message("Error", `Failed to install: ${error}`, "error");
         }
-    }, [selectedSkill, state.projectPath, dispatch, modal]);
+    }, [selectedSkill, state.projectPath, dispatch, modal, fetchData]);
     // Uninstall handler
     const handleUninstall = useCallback(async () => {
         if (!selectedSkill || !selectedSkill.installed)
@@ -258,21 +252,15 @@ export function SkillsScreen() {
         try {
             await uninstallSkill(selectedSkill.name, scope, state.projectPath);
             modal.hideModal();
-            dispatch({
-                type: "SKILLS_UPDATE_ITEM",
-                name: selectedSkill.name,
-                updates: {
-                    installed: false,
-                    installedScope: null,
-                },
-            });
+            // Refetch to pick up uninstall status
+            await fetchData();
             await modal.message("Uninstalled", `${selectedSkill.name} removed.`, "success");
         }
         catch (error) {
             modal.hideModal();
             await modal.message("Error", `Failed to uninstall: ${error}`, "error");
         }
-    }, [selectedSkill, state.projectPath, dispatch, modal]);
+    }, [selectedSkill, state.projectPath, dispatch, modal, fetchData]);
     // Keyboard handling — same pattern as PluginsScreen
     useKeyboard((event) => {
         if (state.modal)
@@ -374,14 +362,15 @@ export function SkillsScreen() {
         }
         if (item.type === "skill" && item.skill) {
             const skill = item.skill;
-            const indicator = skill.installed ? "●" : "○";
-            const indicatorColor = skill.installed ? "cyan" : "gray";
-            const scopeTag = skill.installedScope === "user" ? "u" : skill.installedScope === "project" ? "p" : "";
             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: [" ", indicator, " ", skill.name, skill.hasUpdate ? " ⬆" : "", scopeTag ? ` [${scopeTag}]` : "", starsStr ? `  ${starsStr}` : "", " "] }));
+                const scopeStr = `[${hasUser ? "u" : "."}${hasProject ? "p" : "."}]`;
+                return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", scopeStr, " ", skill.name, skill.hasUpdate ? " ⬆" : "", starsStr ? `  ${starsStr}` : "", " "] }));
             }
-            return (_jsxs("text", { children: [_jsxs("span", { fg: indicatorColor, children: [" ", indicator, " "] }), _jsx("span", { fg: "white", children: skill.name }), skill.hasUpdate && _jsx("span", { fg: "yellow", children: " \u2B06" }), scopeTag && (_jsxs("span", { fg: scopeTag === "u" ? "cyan" : "green", children: [" [", scopeTag, "]"] })), starsStr && (_jsxs("span", { fg: "yellow", children: ["  ", starsStr] }))] }));
+            return (_jsxs("text", { children: [_jsx("span", { fg: "#555555", children: " [" }), _jsx("span", { fg: hasUser ? "cyan" : "#555555", children: hasUser ? "u" : "." }), _jsx("span", { fg: hasProject ? "green" : "#555555", children: hasProject ? "p" : "." }), _jsx("span", { fg: "#555555", 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 });
     };

package/src/ui/screens/SkillsScreen.tsx

@@ -5,6 +5,7 @@ import { useKeyboard } from "../hooks/useKeyboard.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { EmptyFilterState } from "../components/EmptyFilterState.js";
+import { scopeIndicatorText } from "../components/ScopeIndicator.js";
 import {
 	fetchAvailableSkills,
 	fetchSkillFrontmatter,
@@ -271,14 +272,8 @@ export function SkillsScreen() {
 		try {
 			await installSkill(selectedSkill, scope, state.projectPath);
 			modal.hideModal();
-			dispatch({
-				type: "SKILLS_UPDATE_ITEM",
-				name: selectedSkill.name,
-				updates: {
-					installed: true,
-					installedScope: scope,
-				},
-			});
+			// 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/"}`,
@@ -288,7 +283,7 @@ export function SkillsScreen() {
 			modal.hideModal();
 			await modal.message("Error", `Failed to install: ${error}`, "error");
 		}
-	}, [selectedSkill, state.projectPath, dispatch, modal]);
+	}, [selectedSkill, state.projectPath, dispatch, modal, fetchData]);
 
 	// Uninstall handler
 	const handleUninstall = useCallback(async () => {
@@ -307,20 +302,14 @@ export function SkillsScreen() {
 		try {
 			await uninstallSkill(selectedSkill.name, scope, state.projectPath);
 			modal.hideModal();
-			dispatch({
-				type: "SKILLS_UPDATE_ITEM",
-				name: selectedSkill.name,
-				updates: {
-					installed: false,
-					installedScope: null,
-				},
-			});
+			// Refetch to pick up uninstall status
+			await fetchData();
 			await modal.message("Uninstalled", `${selectedSkill.name} removed.`, "success");
 		} catch (error) {
 			modal.hideModal();
 			await modal.message("Error", `Failed to uninstall: ${error}`, "error");
 		}
-	}, [selectedSkill, state.projectPath, dispatch, modal]);
+	}, [selectedSkill, state.projectPath, dispatch, modal, fetchData]);
 
 	// Keyboard handling — same pattern as PluginsScreen
 	useKeyboard((event) => {
@@ -437,27 +426,28 @@ export function SkillsScreen() {
 
 		if (item.type === "skill" && item.skill) {
 			const skill = item.skill;
-			const indicator = skill.installed ? "●" : "○";
-			const indicatorColor = skill.installed ? "cyan" : "gray";
-			const scopeTag = skill.installedScope === "user" ? "u" : skill.installedScope === "project" ? "p" : "";
 			const starsStr = formatStars(skill.stars);
+			const hasUser = skill.installedScope === "user";
+			const hasProject = skill.installedScope === "project";
+			const nameColor = skill.installed ? "white" : "gray";
 
 			if (isSelected) {
+				const scopeStr = `[${hasUser ? "u" : "."}${hasProject ? "p" : "."}]`;
 				return (
 					<text bg="magenta" fg="white">
-						{" "}{indicator} {skill.name}{skill.hasUpdate ? " ⬆" : ""}{scopeTag ? ` [${scopeTag}]` : ""}{starsStr ? `  ${starsStr}` : ""}{" "}
+						{" "}{scopeStr} {skill.name}{skill.hasUpdate ? " ⬆" : ""}{starsStr ? `  ${starsStr}` : ""}{" "}
 					</text>
 				);
 			}
 
 			return (
 				<text>
-					<span fg={indicatorColor}> {indicator} </span>
-					<span fg="white">{skill.name}</span>
+					<span fg="#555555"> [</span>
+					<span fg={hasUser ? "cyan" : "#555555"}>{hasUser ? "u" : "."}</span>
+					<span fg={hasProject ? "green" : "#555555"}>{hasProject ? "p" : "."}</span>
+					<span fg="#555555">] </span>
+					<span fg={nameColor}>{skill.name}</span>
 					{skill.hasUpdate && <span fg="yellow"> ⬆</span>}
-					{scopeTag && (
-						<span fg={scopeTag === "u" ? "cyan" : "green"}> [{scopeTag}]</span>
-					)}
 					{starsStr && (
 						<span fg="yellow">{"  "}{starsStr}</span>
 					)}