claudeup 3.8.0 → 3.10.0

package/src/ui/App.tsx

@@ -20,6 +20,7 @@ import {
 	CliToolsScreen,
 	ModelSelectorScreen,
 	ProfilesScreen,
+	SkillsScreen,
 } from "./screens/index.js";
 import type { Screen } from "./state/types.js";
 import { repairAllMarketplaces } from "../services/local-marketplace.js";
@@ -57,6 +58,8 @@ function Router() {
 			return <ModelSelectorScreen />;
 		case "profiles":
 			return <ProfilesScreen />;
+		case "skills":
+			return <SkillsScreen />;
 		default:
 			return <PluginsScreen />;
 	}
@@ -116,23 +119,26 @@ function GlobalKeyHandler({
 			"cli-tools",
 			"model-selector",
 			"profiles",
+			"skills",
 		].includes(state.currentRoute.screen);
 
 		if (isTopLevel) {
 			if (input === "1") navigateToScreen("plugins");
-			else if (input === "2") navigateToScreen("mcp");
-			else if (input === "3") navigateToScreen("settings");
-			else if (input === "4") navigateToScreen("cli-tools");
+			else if (input === "2") navigateToScreen("skills");
+			else if (input === "3") navigateToScreen("mcp");
+			else if (input === "4") navigateToScreen("settings");
 			else if (input === "5") navigateToScreen("profiles");
+			else if (input === "6") navigateToScreen("cli-tools");
 
 			// Tab navigation cycling
 			if (key.tab) {
 				const screens: Screen[] = [
 					"plugins",
+					"skills",
 					"mcp",
 					"settings",
-					"cli-tools",
 					"profiles",
+					"cli-tools",
 				];
 				const currentIndex = screens.indexOf(
 					state.currentRoute.screen as Screen,
@@ -171,9 +177,9 @@ function GlobalKeyHandler({
   ?             This help
 
 Quick Navigation
-  1  Plugins      4  CLI Tools
-  2  MCP Servers  5  Profiles
-  3  Settings
+  1  Plugins      4  Settings
+  2  Skills       5  Profiles
+  3  MCP Servers  6  CLI Tools
 
 Plugin Actions
   u  Update        d  Uninstall

package/src/ui/components/EmptyFilterState.js

@@ -0,0 +1,4 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+export function EmptyFilterState({ query, entityName = "items", }) {
+    return (_jsxs("box", { flexDirection: "column", marginTop: 2, paddingLeft: 2, paddingRight: 2, children: [_jsxs("text", { fg: "yellow", children: ["No ", entityName, " found for \"", query, "\""] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: "Try a different search term, or if you think" }) }), _jsx("text", { fg: "gray", children: "this is a bug, report it at:" }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#5c9aff", children: "github.com/MadAppGang/magus/issues" }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: "Press Esc to clear the filter." }) })] }));
+}

package/src/ui/components/EmptyFilterState.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+interface EmptyFilterStateProps {
+	query: string;
+	entityName?: string; // "plugins", "skills", "MCP servers"
+}
+
+export function EmptyFilterState({
+	query,
+	entityName = "items",
+}: EmptyFilterStateProps) {
+	return (
+		<box flexDirection="column" marginTop={2} paddingLeft={2} paddingRight={2}>
+			<text fg="yellow">No {entityName} found for "{query}"</text>
+			<box marginTop={1}>
+				<text fg="gray">Try a different search term, or if you think</text>
+			</box>
+			<text fg="gray">this is a bug, report it at:</text>
+			<box marginTop={1}>
+				<text fg="#5c9aff">github.com/MadAppGang/magus/issues</text>
+			</box>
+			<box marginTop={1}>
+				<text fg="gray">Press Esc to clear the filter.</text>
+			</box>
+		</box>
+	);
+}

package/src/ui/components/TabBar.js

@@ -2,10 +2,11 @@ import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
 import { useKeyboardHandler } from "../hooks/useKeyboardHandler";
 const TABS = [
     { key: "1", label: "Plugins", screen: "plugins" },
-    { key: "2", label: "MCP", screen: "mcp" },
-    { key: "3", label: "Settings", screen: "settings" },
-    { key: "4", label: "CLI", screen: "cli-tools" },
+    { key: "2", label: "Skills", screen: "skills" },
+    { key: "3", label: "MCP", screen: "mcp" },
+    { key: "4", label: "Settings", screen: "settings" },
     { key: "5", label: "Profiles", screen: "profiles" },
+    { key: "6", label: "CLI", screen: "cli-tools" },
 ];
 export function TabBar({ currentScreen, onTabChange }) {
     // Handle number key shortcuts (1-5)

package/src/ui/components/TabBar.tsx

@@ -10,10 +10,11 @@ interface Tab {
 
 const TABS: Tab[] = [
 	{ key: "1", label: "Plugins", screen: "plugins" },
-	{ key: "2", label: "MCP", screen: "mcp" },
-	{ key: "3", label: "Settings", screen: "settings" },
-	{ key: "4", label: "CLI", screen: "cli-tools" },
+	{ key: "2", label: "Skills", screen: "skills" },
+	{ key: "3", label: "MCP", screen: "mcp" },
+	{ key: "4", label: "Settings", screen: "settings" },
 	{ key: "5", label: "Profiles", screen: "profiles" },
+	{ key: "6", label: "CLI", screen: "cli-tools" },
 ];
 
 interface TabBarProps {

package/src/ui/screens/PluginsScreen.js

@@ -6,6 +6,7 @@ import { useKeyboard } from "../hooks/useKeyboard.js";
 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 { fuzzyFilter, highlightMatches } from "../../utils/fuzzy-search.js";
 import { getAllMarketplaces } from "../../data/marketplaces.js";
 import { getAvailablePlugins, refreshAllMarketplaces, clearMarketplaceCache, getLocalMarketplacesInfo, } from "../../services/plugin-manager.js";
@@ -175,31 +176,17 @@ export function PluginsScreen() {
             }
             return;
         }
-        // Navigation — always works (even during search)
+        // Navigation — always works; exits search mode on navigate
         if (event.name === "up" || event.name === "k") {
-            // 'k' navigates when query is empty, otherwise appends to search
-            if (event.name === "k" && (hasQuery || isSearchActive)) {
-                dispatch({
-                    type: "PLUGINS_SET_SEARCH",
-                    query: pluginsState.searchQuery + event.name,
-                });
-                dispatch({ type: "PLUGINS_SELECT", index: 0 });
-                return;
-            }
+            if (isSearchActive)
+                dispatch({ type: "SET_SEARCHING", isSearching: false });
             const newIndex = Math.max(0, pluginsState.selectedIndex - 1);
             dispatch({ type: "PLUGINS_SELECT", index: newIndex });
             return;
         }
         if (event.name === "down" || event.name === "j") {
-            // 'j' navigates when query is empty, otherwise appends to search
-            if (event.name === "j" && (hasQuery || isSearchActive)) {
-                dispatch({
-                    type: "PLUGINS_SET_SEARCH",
-                    query: pluginsState.searchQuery + event.name,
-                });
-                dispatch({ type: "PLUGINS_SELECT", index: 0 });
-                return;
-            }
+            if (isSearchActive)
+                dispatch({ type: "SET_SEARCHING", isSearching: false });
             const newIndex = Math.min(selectableItems.length - 1, pluginsState.selectedIndex + 1);
             dispatch({ type: "PLUGINS_SELECT", index: newIndex });
             return;
@@ -229,9 +216,9 @@ export function PluginsScreen() {
             }
             return;
         }
-        // When search query is non-empty, printable letters go to the query
-        // (shortcuts are suspended while filtering, digits skip to let tab nav work)
-        if (hasQuery || isSearchActive) {
+        // When actively typing in search, letters go to the query
+        // After Enter (isSearchActive=false, hasQuery=true), shortcuts resume
+        if (isSearchActive) {
             if (event.name.length === 1 && !event.ctrl && !event.meta && !/[0-9]/.test(event.name)) {
                 dispatch({
                     type: "PLUGINS_SET_SEARCH",
@@ -241,7 +228,7 @@ export function PluginsScreen() {
             }
             return;
         }
-        // When search query is empty: action shortcuts work normally
+        // Action shortcuts work when not actively typing (even with filter visible)
         // Start explicit search mode with /
         if (event.name === "/") {
             dispatch({ type: "SET_SEARCHING", isSearching: true });
@@ -268,14 +255,9 @@ export function PluginsScreen() {
             handleUninstall();
         else if (event.name === "s")
             handleSaveAsProfile();
-        // Any other printable letter: start inline search (skip digits — used for tab nav)
-        else if (event.name.length === 1 && !event.ctrl && !event.meta && !/[0-9]/.test(event.name)) {
+        // "/" to enter search mode
+        else if (event.name === "/") {
             dispatch({ type: "SET_SEARCHING", isSearching: true });
-            dispatch({
-                type: "PLUGINS_SET_SEARCH",
-                query: event.name,
-            });
-            dispatch({ type: "PLUGINS_SELECT", index: 0 });
         }
     });
     // Handle actions
@@ -920,14 +902,14 @@ export function PluginsScreen() {
             // Show version only if valid (not null, not 0.0.0)
             const showVersion = plugin.version && plugin.version !== "0.0.0";
             const showInstalledVersion = plugin.installedVersion && plugin.installedVersion !== "0.0.0";
-            return (_jsxs("box", { flexDirection: "column", children: [_jsx("box", { justifyContent: "center", children: _jsx("text", { bg: "magenta", fg: "white", children: _jsxs("strong", { children: [" ", plugin.name, plugin.hasUpdate ? " ⬆" : "", " "] }) }) }), _jsx("box", { marginTop: 1, children: isInstalled ? (_jsx("text", { fg: plugin.enabled ? "green" : "yellow", children: plugin.enabled ? "● Enabled" : "● Disabled" })) : (_jsx("text", { fg: "gray", children: "\u25CB Not installed" })) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { fg: "white", children: plugin.description }) }), showVersion && (_jsxs("text", { children: [_jsx("span", { children: "Version " }), _jsxs("span", { fg: "#5c9aff", children: ["v", plugin.version] }), showInstalledVersion &&
+            return (_jsxs("box", { flexDirection: "column", children: [_jsx("box", { justifyContent: "center", children: _jsx("text", { bg: "magenta", fg: "white", children: _jsxs("strong", { children: [" ", plugin.name, plugin.hasUpdate ? " ⬆" : "", " "] }) }) }), _jsx("box", { marginTop: 1, children: isInstalled ? (_jsx("text", { fg: "green", children: "\u25CF Installed" })) : (_jsx("text", { fg: "gray", children: "\u25CB Not installed" })) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { fg: "white", children: plugin.description }) }), showVersion && (_jsxs("text", { children: [_jsx("span", { children: "Version " }), _jsxs("span", { fg: "#5c9aff", children: ["v", plugin.version] }), showInstalledVersion &&
                                 plugin.installedVersion !== plugin.version && (_jsxs("span", { children: [" (v", plugin.installedVersion, " installed)"] }))] })), plugin.category && (_jsxs("text", { children: [_jsx("span", { children: "Category " }), _jsx("span", { fg: "magenta", children: plugin.category })] })), plugin.author && (_jsxs("text", { children: [_jsx("span", { children: "Author " }), _jsx("span", { children: plugin.author.name })] })), components.length > 0 && (_jsxs("text", { children: [_jsx("span", { children: "Contains " }), _jsx("span", { fg: "yellow", children: components.join(" · ") })] })), _jsxs("box", { flexDirection: "column", marginTop: 1, children: [_jsx("text", { children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsx("text", { children: _jsx("strong", { children: "Scopes:" }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsxs("span", { bg: "cyan", fg: "black", children: [" ", "u", " "] }), _jsx("span", { fg: plugin.userScope?.enabled ? "cyan" : "gray", children: plugin.userScope?.enabled ? " ● " : " ○ " }), _jsx("span", { fg: "cyan", children: "User" }), _jsx("span", { children: " global" }), plugin.userScope?.version && (_jsxs("span", { fg: "cyan", children: [" v", plugin.userScope.version] }))] }), _jsxs("text", { children: [_jsxs("span", { bg: "green", fg: "black", children: [" ", "p", " "] }), _jsx("span", { fg: plugin.projectScope?.enabled ? "green" : "gray", children: plugin.projectScope?.enabled ? " ● " : " ○ " }), _jsx("span", { fg: "green", children: "Project" }), _jsx("span", { children: " team" }), plugin.projectScope?.version && (_jsxs("span", { fg: "green", children: [" v", plugin.projectScope.version] }))] }), _jsxs("text", { children: [_jsxs("span", { bg: "yellow", fg: "black", children: [" ", "l", " "] }), _jsx("span", { fg: plugin.localScope?.enabled ? "yellow" : "gray", children: plugin.localScope?.enabled ? " ● " : " ○ " }), _jsx("span", { fg: "yellow", children: "Local" }), _jsx("span", { children: " private" }), plugin.localScope?.version && (_jsxs("span", { fg: "yellow", children: [" v", plugin.localScope.version] }))] })] })] }), isInstalled && (_jsxs("box", { flexDirection: "column", marginTop: 1, children: [plugin.hasUpdate && (_jsxs("box", { children: [_jsxs("text", { bg: "magenta", fg: "white", children: [" ", "U", " "] }), _jsxs("text", { children: [" Update to v", plugin.version] })] })), _jsxs("box", { children: [_jsxs("text", { bg: "red", fg: "white", children: [" ", "d", " "] }), _jsx("text", { children: " Uninstall" })] })] }))] }));
         }
         return null;
     };
-    const footerHints = isSearchActive || pluginsState.searchQuery
-        ? "↑↓:nav │ Enter:select │ Esc:clear │ type to filter"
-        : "u/p/l:scope │ U:update │ a:all │ d:remove │ s:profile │ type to search";
+    const footerHints = isSearchActive
+        ? "type to filter │ Enter:done │ Esc:clear"
+        : "u/p/l:scope │ U:update │ a:all │ d:remove │ s:profile │ /:search";
     // Calculate status for subtitle
     const scopeLabel = pluginsState.scope === "global" ? "Global" : "Project";
     const plugins = pluginsState.plugins.status === "success" ? pluginsState.plugins.data : [];
@@ -940,6 +922,6 @@ export function PluginsScreen() {
             isActive: isSearchActive,
             query: pluginsState.searchQuery,
             placeholder: searchPlaceholder,
-        }, footerHints: footerHints, listPanel: _jsx(ScrollableList, { items: selectableItems, selectedIndex: pluginsState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), detailPanel: renderDetail() }));
+        }, footerHints: footerHints, listPanel: _jsxs("box", { flexDirection: "column", children: [_jsx(ScrollableList, { items: selectableItems, selectedIndex: pluginsState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), pluginsState.searchQuery && selectableItems.length === 0 && (_jsx(EmptyFilterState, { query: pluginsState.searchQuery, entityName: "plugins" }))] }), detailPanel: renderDetail() }));
 }
 export default PluginsScreen;

package/src/ui/screens/PluginsScreen.tsx

@@ -5,6 +5,7 @@ import { useKeyboard } from "../hooks/useKeyboard.js";
 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 { fuzzyFilter, highlightMatches } from "../../utils/fuzzy-search.js";
 import { getAllMarketplaces } from "../../data/marketplaces.js";
 import {
@@ -240,31 +241,15 @@ export function PluginsScreen() {
 			return;
 		}
 
-		// Navigation — always works (even during search)
+		// Navigation — always works; exits search mode on navigate
 		if (event.name === "up" || event.name === "k") {
-			// 'k' navigates when query is empty, otherwise appends to search
-			if (event.name === "k" && (hasQuery || isSearchActive)) {
-				dispatch({
-					type: "PLUGINS_SET_SEARCH",
-					query: pluginsState.searchQuery + event.name,
-				});
-				dispatch({ type: "PLUGINS_SELECT", index: 0 });
-				return;
-			}
+			if (isSearchActive) dispatch({ type: "SET_SEARCHING", isSearching: false });
 			const newIndex = Math.max(0, pluginsState.selectedIndex - 1);
 			dispatch({ type: "PLUGINS_SELECT", index: newIndex });
 			return;
 		}
 		if (event.name === "down" || event.name === "j") {
-			// 'j' navigates when query is empty, otherwise appends to search
-			if (event.name === "j" && (hasQuery || isSearchActive)) {
-				dispatch({
-					type: "PLUGINS_SET_SEARCH",
-					query: pluginsState.searchQuery + event.name,
-				});
-				dispatch({ type: "PLUGINS_SELECT", index: 0 });
-				return;
-			}
+			if (isSearchActive) dispatch({ type: "SET_SEARCHING", isSearching: false });
 			const newIndex = Math.min(
 				selectableItems.length - 1,
 				pluginsState.selectedIndex + 1,
@@ -302,9 +287,9 @@ export function PluginsScreen() {
 			return;
 		}
 
-		// When search query is non-empty, printable letters go to the query
-		// (shortcuts are suspended while filtering, digits skip to let tab nav work)
-		if (hasQuery || isSearchActive) {
+		// When actively typing in search, letters go to the query
+		// After Enter (isSearchActive=false, hasQuery=true), shortcuts resume
+		if (isSearchActive) {
 			if (event.name.length === 1 && !event.ctrl && !event.meta && !/[0-9]/.test(event.name)) {
 				dispatch({
 					type: "PLUGINS_SET_SEARCH",
@@ -315,7 +300,7 @@ export function PluginsScreen() {
 			return;
 		}
 
-		// When search query is empty: action shortcuts work normally
+		// Action shortcuts work when not actively typing (even with filter visible)
 
 		// Start explicit search mode with /
 		if (event.name === "/") {
@@ -334,14 +319,9 @@ export function PluginsScreen() {
 		else if (event.name === "a") handleUpdateAll();
 		else if (event.name === "d") handleUninstall();
 		else if (event.name === "s") handleSaveAsProfile();
-		// Any other printable letter: start inline search (skip digits — used for tab nav)
-		else if (event.name.length === 1 && !event.ctrl && !event.meta && !/[0-9]/.test(event.name)) {
+		// "/" to enter search mode
+		else if (event.name === "/") {
 			dispatch({ type: "SET_SEARCHING", isSearching: true });
-			dispatch({
-				type: "PLUGINS_SET_SEARCH",
-				query: event.name,
-			});
-			dispatch({ type: "PLUGINS_SELECT", index: 0 });
 		}
 	});
 
@@ -1260,9 +1240,7 @@ export function PluginsScreen() {
 					{/* Status line */}
 					<box marginTop={1}>
 						{isInstalled ? (
-							<text fg={plugin.enabled ? "green" : "yellow"}>
-								{plugin.enabled ? "● Enabled" : "● Disabled"}
-							</text>
+							<text fg="green">● Installed</text>
 						) : (
 							<text fg="gray">○ Not installed</text>
 						)}
@@ -1383,10 +1361,9 @@ export function PluginsScreen() {
 		return null;
 	};
 
-	const footerHints =
-		isSearchActive || pluginsState.searchQuery
-			? "↑↓:nav │ Enter:select │ Esc:clear │ type to filter"
-			: "u/p/l:scope │ U:update │ a:all │ d:remove │ s:profile │ type to search";
+	const footerHints = isSearchActive
+			? "type to filter │ Enter:done │ Esc:clear"
+			: "u/p/l:scope │ U:update │ a:all │ d:remove │ s:profile │ /:search";
 
 	// Calculate status for subtitle
 	const scopeLabel = pluginsState.scope === "global" ? "Global" : "Project";
@@ -1411,12 +1388,17 @@ export function PluginsScreen() {
 			}}
 			footerHints={footerHints}
 			listPanel={
-				<ScrollableList
-					items={selectableItems}
-					selectedIndex={pluginsState.selectedIndex}
-					renderItem={renderListItem}
-					maxHeight={dimensions.listPanelHeight}
-				/>
+				<box flexDirection="column">
+					<ScrollableList
+						items={selectableItems}
+						selectedIndex={pluginsState.selectedIndex}
+						renderItem={renderListItem}
+						maxHeight={dimensions.listPanelHeight}
+					/>
+					{pluginsState.searchQuery && selectableItems.length === 0 && (
+						<EmptyFilterState query={pluginsState.searchQuery} entityName="plugins" />
+					)}
+				</box>
 			}
 			detailPanel={renderDetail()}
 		/>