claudeup 3.12.0 → 3.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeup",
-  "version": "3.12.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

@@ -111,15 +111,15 @@ export function PluginsScreen() {
                 if (communityPlugins.length > 0) {
                     const communityVirtualMp = {
                         name: COMMUNITY_VIRTUAL_MARKETPLACE,
-                        displayName: "Community",
+                        displayName: "Anthropic Official — 3rd Party",
                         source: marketplace.source,
-                        description: "Third-party plugins from the community",
+                        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: "Community",
+                        label: "Anthropic Official — 3rd Party",
                         marketplace: communityVirtualMp,
                         marketplaceEnabled: true,
                         pluginCount: communityPlugins.length,
@@ -708,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";
@@ -718,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}`
@@ -883,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) {
@@ -909,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 });
     };

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 {
@@ -171,15 +172,15 @@ export function PluginsScreen() {
 				if (communityPlugins.length > 0) {
 					const communityVirtualMp: Marketplace = {
 						name: COMMUNITY_VIRTUAL_MARKETPLACE,
-						displayName: "Community",
+						displayName: "Anthropic Official — 3rd Party",
 						source: marketplace.source,
-						description: "Third-party plugins from the community",
+						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: "Community",
+						label: "Anthropic Official — 3rd Party",
 						marketplace: communityVirtualMp,
 						marketplaceEnabled: true,
 						pluginCount: communityPlugins.length,
@@ -897,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 =
@@ -1139,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 = "";
@@ -1167,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;
@@ -1185,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>
@@ -1195,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>
 			);

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>
 					)}