claudeup 4.17.0 → 4.19.0

package/src/ui/screens/McpScreen.tsx

@@ -217,7 +217,12 @@ export function McpScreen() {
 			title="claudeup MCP Servers"
 			subtitle={subtitle}
 			currentScreen="mcp"
-			footerHints="↑↓:nav │ Enter:toggle │ /:search │ r:registry"
+			footerHints={[
+				{ keys: ["↑", "↓"], label: "nav" },
+				{ keys: ["Enter"], label: "toggle" },
+				{ keys: ["/"], label: "search" },
+				{ keys: ["r"], label: "registry" },
+			]}
 			listPanel={
 				<ScrollableList
 					items={allListItems}

package/src/ui/screens/ModelSelectorScreen.js

@@ -5,6 +5,7 @@ import { useDimensions } from "../state/DimensionsContext.js";
 import { fuzzyFilter, highlightMatches } from "../../utils/fuzzy-search.js";
 import { useKeyboard } from "../hooks/useKeyboard.js";
 import { ScrollableList } from "../components/ScrollableList.js";
+import { FooterHints } from "../components/layout/index.js";
 const RECENT_MODELS = [
     {
         id: "recent-1",
@@ -278,13 +279,18 @@ export function ModelSelectorScreen() {
             return (_jsxs("box", { overflow: "hidden", children: [_jsx(Label, {}), _jsx("box", { flexGrow: 1 }), item.provider && _jsx("text", { fg: "gray", children: item.provider })] }));
         }
     };
-    const footerHints = "↑↓ choose • tab toggle type • enter choose • esc exit";
+    const footerHints = [
+        { keys: ["↑", "↓"], label: "choose" },
+        { keys: ["tab"], label: "toggle type" },
+        { keys: ["enter"], label: "choose" },
+        { keys: ["esc"], label: "exit" },
+    ];
     // Available height calculation
     // Header: 1 line (title) + 1 line (search) + 1 line (separator) = 3 lines?
     // Title line: Switch Model /// (o) Large
     // Cursor line: > c
     // Separator: handled by list? or explicit?
     const listHeight = Math.max(5, dimensions.contentHeight - 5);
-    return (_jsxs("box", { flexDirection: "column", height: dimensions.contentHeight, children: [_jsx("box", { flexDirection: "row", border: true, borderStyle: "single", borderColor: "#7e57c2", paddingLeft: 1, paddingRight: 1, children: _jsxs("box", { flexDirection: "column", flexGrow: 1, children: [_jsx("box", { flexDirection: "row", justifyContent: "space-between", children: _jsxs("box", { children: [_jsx("text", { fg: "#7e57c2", children: "Switch Model " }), _jsxs("text", { fg: modelSelector.taskSize === "large" ? "white" : "gray", children: [modelSelector.taskSize === "large" ? "◎" : "○", " Large Task", "  "] }), _jsxs("text", { fg: modelSelector.taskSize === "small" ? "white" : "gray", children: [modelSelector.taskSize === "small" ? "◎" : "○", " Small Task"] })] }) }), _jsxs("box", { flexDirection: "row", marginTop: 1, children: [_jsx("text", { fg: "green", children: "> " }), _jsx("text", { children: modelSelector.searchQuery }), _jsx("text", { bg: "gray", fg: "black", children: " " })] })] }) }), _jsx("box", { flexGrow: 1, paddingLeft: 1, paddingRight: 1, children: _jsx(ScrollableList, { items: filteredItems, selectedIndex: modelSelector.selectedIndex, renderItem: renderItem, maxHeight: listHeight, getKey: (item) => item.id }) }), _jsx("box", { height: 1, children: _jsx("text", { fg: "#888888", children: footerHints }) })] }));
+    return (_jsxs("box", { flexDirection: "column", height: dimensions.contentHeight, children: [_jsx("box", { flexDirection: "row", border: true, borderStyle: "single", borderColor: "#7e57c2", paddingLeft: 1, paddingRight: 1, children: _jsxs("box", { flexDirection: "column", flexGrow: 1, children: [_jsx("box", { flexDirection: "row", justifyContent: "space-between", children: _jsxs("box", { children: [_jsx("text", { fg: "#7e57c2", children: "Switch Model " }), _jsxs("text", { fg: modelSelector.taskSize === "large" ? "white" : "gray", children: [modelSelector.taskSize === "large" ? "◎" : "○", " Large Task", "  "] }), _jsxs("text", { fg: modelSelector.taskSize === "small" ? "white" : "gray", children: [modelSelector.taskSize === "small" ? "◎" : "○", " Small Task"] })] }) }), _jsxs("box", { flexDirection: "row", marginTop: 1, children: [_jsx("text", { fg: "green", children: "> " }), _jsx("text", { children: modelSelector.searchQuery }), _jsx("text", { bg: "gray", fg: "black", children: " " })] })] }) }), _jsx("box", { flexGrow: 1, paddingLeft: 1, paddingRight: 1, children: _jsx(ScrollableList, { items: filteredItems, selectedIndex: modelSelector.selectedIndex, renderItem: renderItem, maxHeight: listHeight, getKey: (item) => item.id }) }), _jsx("box", { height: 1, children: _jsx(FooterHints, { hints: footerHints }) })] }));
 }
 export default ModelSelectorScreen;

package/src/ui/screens/ModelSelectorScreen.tsx

@@ -5,6 +5,7 @@ import { useDimensions } from "../state/DimensionsContext.js";
 import { fuzzyFilter, highlightMatches } from "../../utils/fuzzy-search.js";
 import { useKeyboard } from "../hooks/useKeyboard.js";
 import { ScrollableList } from "../components/ScrollableList.js";
+import { FooterHints } from "../components/layout/index.js";
 
 interface ModelItem {
 	id: string;
@@ -372,7 +373,12 @@ export function ModelSelectorScreen() {
 		}
 	};
 
-	const footerHints = "↑↓ choose • tab toggle type • enter choose • esc exit";
+	const footerHints = [
+		{ keys: ["↑", "↓"], label: "choose" },
+		{ keys: ["tab"], label: "toggle type" },
+		{ keys: ["enter"], label: "choose" },
+		{ keys: ["esc"], label: "exit" },
+	];
 	// Available height calculation
 	// Header: 1 line (title) + 1 line (search) + 1 line (separator) = 3 lines?
 	// Title line: Switch Model /// (o) Large
@@ -429,7 +435,7 @@ export function ModelSelectorScreen() {
 			</box>
 
 			<box height={1}>
-				<text fg="#888888">{footerHints}</text>
+				<FooterHints hints={footerHints} />
 			</box>
 		</box>
 	);

package/src/ui/screens/PluginsScreen.js

@@ -374,7 +374,8 @@ export function PluginsScreen() {
             const hasMissing = (missing.pip?.length || 0) +
                 (missing.brew?.length || 0) +
                 (missing.npm?.length || 0) +
-                (missing.cargo?.length || 0) >
+                (missing.cargo?.length || 0) +
+                (missing.go?.length || 0) >
                 0;
             if (!hasMissing)
                 return;
@@ -387,6 +388,8 @@ export function PluginsScreen() {
                 parts.push(`npm: ${missing.npm.join(", ")}`);
             if (missing.cargo?.length)
                 parts.push(`cargo: ${missing.cargo.join(", ")}`);
+            if (missing.go?.length)
+                parts.push(`go: ${missing.go.join(", ")}`);
             const wantInstall = await modal.confirm("Install Dependencies?", `This plugin needs system dependencies:\n\n${parts.join("\n")}\n\nInstall now?`);
             if (!wantInstall)
                 return;
@@ -735,8 +738,19 @@ export function PluginsScreen() {
     }
     const selectedItem = selectableItems[pluginsState.selectedIndex];
     const footerHints = isSearchActive
-        ? "type to filter │ Enter:done │ Esc:clear"
-        : "u/p/l:toggle │ U:update │ a:all │ m:mismatches │ s:profile │ /:search";
+        ? [
+            { keys: ["type"], label: "filter" },
+            { keys: ["Enter"], label: "done" },
+            { keys: ["Esc"], label: "clear" },
+        ]
+        : [
+            { keys: ["u", "/", "p", "/", "l"], label: "toggle" },
+            { keys: ["U"], label: "update" },
+            { keys: ["a"], label: "all" },
+            { keys: ["m"], label: "mismatches" },
+            { keys: ["s"], label: "profile" },
+            { keys: ["/"], label: "search" },
+        ];
     const scopeLabel = pluginsState.scope === "global" ? "Global" : "Project";
     const plugins = pluginsState.plugins.status === "success" ? pluginsState.plugins.data : [];
     const installedCount = plugins.filter((p) => p.enabled).length;

package/src/ui/screens/PluginsScreen.tsx

@@ -486,7 +486,8 @@ export function PluginsScreen() {
 				(missing.pip?.length || 0) +
 					(missing.brew?.length || 0) +
 					(missing.npm?.length || 0) +
-					(missing.cargo?.length || 0) >
+					(missing.cargo?.length || 0) +
+					(missing.go?.length || 0) >
 				0;
 
 			if (!hasMissing) return;
@@ -497,6 +498,7 @@ export function PluginsScreen() {
 			if (missing.npm?.length) parts.push(`npm: ${missing.npm.join(", ")}`);
 			if (missing.cargo?.length)
 				parts.push(`cargo: ${missing.cargo.join(", ")}`);
+			if (missing.go?.length) parts.push(`go: ${missing.go.join(", ")}`);
 
 			const wantInstall = await modal.confirm(
 				"Install Dependencies?",
@@ -937,8 +939,19 @@ export function PluginsScreen() {
 	const selectedItem = selectableItems[pluginsState.selectedIndex];
 
 	const footerHints = isSearchActive
-		? "type to filter │ Enter:done │ Esc:clear"
-		: "u/p/l:toggle │ U:update │ a:all │ m:mismatches │ s:profile │ /:search";
+		? [
+				{ keys: ["type"], label: "filter" },
+				{ keys: ["Enter"], label: "done" },
+				{ keys: ["Esc"], label: "clear" },
+			]
+		: [
+				{ keys: ["u", "/", "p", "/", "l"], label: "toggle" },
+				{ keys: ["U"], label: "update" },
+				{ keys: ["a"], label: "all" },
+				{ keys: ["m"], label: "mismatches" },
+				{ keys: ["s"], label: "profile" },
+				{ keys: ["/"], label: "search" },
+			];
 
 	const scopeLabel = pluginsState.scope === "global" ? "Global" : "Project";
 	const plugins: PluginInfo[] =

package/src/ui/screens/ProfilesScreen.js

@@ -286,6 +286,13 @@ export function ProfilesScreen() {
     const errorMessage = profilesState.profiles.status === "error"
         ? profilesState.profiles.error.message
         : undefined;
-    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: effectiveIndex, renderItem: renderProfileRow, maxHeight: dimensions.listPanelHeight }), detailPanel: renderProfileDetail(allItems[effectiveIndex], loadingStatus, errorMessage) }));
+    return (_jsx(ScreenLayout, { title: "claudeup Plugin Profiles", currentScreen: "profiles", statusLine: statusContent, footerHints: [
+            { keys: ["↑", "↓"], label: "nav" },
+            { keys: ["Enter", "/", "a"], label: "apply" },
+            { keys: ["r"], label: "rename" },
+            { keys: ["d"], label: "delete" },
+            { keys: ["c"], label: "copy" },
+            { keys: ["i"], label: "import" },
+        ], listPanel: _jsx(ScrollableList, { items: allItems, selectedIndex: effectiveIndex, renderItem: renderProfileRow, maxHeight: dimensions.listPanelHeight }), detailPanel: renderProfileDetail(allItems[effectiveIndex], loadingStatus, errorMessage) }));
 }
 export default ProfilesScreen;

package/src/ui/screens/ProfilesScreen.tsx

@@ -393,7 +393,14 @@ export function ProfilesScreen() {
 			title="claudeup Plugin Profiles"
 			currentScreen="profiles"
 			statusLine={statusContent}
-			footerHints="↑↓:nav │ Enter/a:apply │ r:rename │ d:delete │ c:copy │ i:import"
+			footerHints={[
+				{ keys: ["↑", "↓"], label: "nav" },
+				{ keys: ["Enter", "/", "a"], label: "apply" },
+				{ keys: ["r"], label: "rename" },
+				{ keys: ["d"], label: "delete" },
+				{ keys: ["c"], label: "copy" },
+				{ keys: ["i"], label: "import" },
+			]}
 			listPanel={
 				<ScrollableList
 					items={allItems}

package/src/ui/screens/SkillsScreen.js

@@ -42,6 +42,7 @@ export function SkillsScreen() {
     // ── Remote search (debounced, cached) ─────────────────────────────────────
     const [searchResults, setSearchResults] = useState([]);
     const [isSearchLoading, setIsSearchLoading] = useState(false);
+    const [searchError, setSearchError] = useState(null);
     const searchTimerRef = useRef(null);
     const searchCacheRef = useRef(new Map());
     useEffect(() => {
@@ -49,15 +50,18 @@ export function SkillsScreen() {
         if (query.length < 2) {
             setSearchResults([]);
             setIsSearchLoading(false);
+            setSearchError(null);
             return;
         }
         const cached = searchCacheRef.current.get(query);
         if (cached) {
             setSearchResults(cached);
             setIsSearchLoading(false);
+            setSearchError(null);
             return;
         }
         setIsSearchLoading(true);
+        setSearchError(null);
         if (searchTimerRef.current)
             clearTimeout(searchTimerRef.current);
         searchTimerRef.current = setTimeout(async () => {
@@ -86,9 +90,13 @@ export function SkillsScreen() {
                 });
                 searchCacheRef.current.set(query, mapped);
                 setSearchResults(mapped);
+                setSearchError(null);
             }
-            catch {
+            catch (error) {
+                // A thrown error means the search service is unreachable — distinct
+                // from a successful search that returned zero matches.
                 setSearchResults([]);
+                setSearchError(error instanceof Error ? error.message : "Search service unavailable");
             }
             setIsSearchLoading(false);
         }, 400);
@@ -517,7 +525,7 @@ export function SkillsScreen() {
     const skills = skillsState.skills.status === "success" ? skillsState.skills.data : [];
     const installedCount = skills.filter((s) => s.installed).length;
     const query = skillsState.searchQuery.trim();
-    const statusContent = statusMsg ? (_jsx("text", { children: _jsx("span", { fg: statusMsg.tone === "success" ? "green" : "red", children: statusMsg.text }) })) : (_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Skills: " }), _jsxs("span", { fg: "cyan", children: [installedCount, " installed"] }), query.length >= 2 && isSearchLoading && (_jsx("span", { fg: "yellow", children: " \u2502 searching..." })), query.length >= 2 && !isSearchLoading && searchResults.length > 0 && (_jsxs("span", { fg: "green", children: [" \u2502 ", searchResults.length, " found"] })), !query && _jsx("span", { fg: "gray", children: " \u2502 89K+ searchable" })] }));
+    const statusContent = statusMsg ? (_jsx("text", { children: _jsx("span", { fg: statusMsg.tone === "success" ? "green" : "red", children: statusMsg.text }) })) : (_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Skills: " }), _jsxs("span", { fg: "cyan", children: [installedCount, " installed"] }), query.length >= 2 && isSearchLoading && (_jsx("span", { fg: "yellow", children: " \u2502 searching..." })), query.length >= 2 && !isSearchLoading && !searchError && searchResults.length > 0 && (_jsxs("span", { fg: "green", children: [" \u2502 ", searchResults.length, " found"] })), query.length >= 2 && !isSearchLoading && searchError && (_jsx("span", { fg: "red", children: " \u2502 search unavailable" })), !query && _jsx("span", { fg: "gray", children: " \u2502 89K+ searchable" })] }));
     // ── Render ────────────────────────────────────────────────────────────────
     return (_jsx(ScreenLayout, { title: "claudeup Skills", currentScreen: "skills", statusLine: statusContent, search: skillsState.searchQuery || isSearchActive
             ? {
@@ -526,7 +534,16 @@ export function SkillsScreen() {
                 placeholder: "type to search",
             }
             : undefined, footerHints: isSearchActive
-            ? "type to filter │ Enter:done │ Esc:clear"
-            : "u:user │ p:project │ o:open │ /:search", listPanel: _jsxs("box", { flexDirection: "column", children: [_jsx(ScrollableList, { items: allItems, selectedIndex: skillsState.selectedIndex, renderItem: renderSkillRow, maxHeight: dimensions.listPanelHeight, getKey: (item, index) => `${index}:${item.id}` }), !query && skillsState.skills.status === "loading" && (_jsx("box", { marginTop: 2, paddingLeft: 2, children: _jsx("text", { fg: "yellow", children: "Loading popular skills..." }) })), query.length >= 2 && isSearchLoading && (_jsx("box", { marginTop: 2, paddingLeft: 2, children: _jsxs("text", { fg: "yellow", children: ["Searching for \"", skillsState.searchQuery, "\"..."] }) })), query.length >= 2 && !isSearchLoading && searchResults.length === 0 && (_jsx(EmptyFilterState, { query: skillsState.searchQuery, entityName: "skills" }))] }), detailPanel: renderSkillDetail(selectedItem) }));
+            ? [
+                { keys: ["type"], label: "filter" },
+                { keys: ["Enter"], label: "done" },
+                { keys: ["Esc"], label: "clear" },
+            ]
+            : [
+                { keys: ["u"], label: "user" },
+                { keys: ["p"], label: "project" },
+                { keys: ["o"], label: "open" },
+                { keys: ["/"], label: "search" },
+            ], listPanel: _jsxs("box", { flexDirection: "column", children: [_jsx(ScrollableList, { items: allItems, selectedIndex: skillsState.selectedIndex, renderItem: renderSkillRow, maxHeight: dimensions.listPanelHeight, getKey: (item, index) => `${index}:${item.id}` }), !query && skillsState.skills.status === "loading" && (_jsx("box", { marginTop: 2, paddingLeft: 2, children: _jsx("text", { fg: "yellow", children: "Loading popular skills..." }) })), query.length >= 2 && isSearchLoading && (_jsx("box", { marginTop: 2, paddingLeft: 2, children: _jsxs("text", { fg: "yellow", children: ["Searching for \"", skillsState.searchQuery, "\"..."] }) })), query.length >= 2 && !isSearchLoading && searchError && (_jsxs("box", { flexDirection: "column", marginTop: 2, paddingLeft: 2, paddingRight: 2, children: [_jsx("text", { fg: "red", children: "Skill search is unavailable right now." }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: "The search service could not be reached" }) }), _jsxs("text", { fg: "gray", children: ["(", searchError, "). Check your connection and retry."] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: "Press Esc to clear the search." }) })] })), query.length >= 2 && !isSearchLoading && !searchError && searchResults.length === 0 && (_jsx(EmptyFilterState, { query: skillsState.searchQuery, entityName: "skills" }))] }), detailPanel: renderSkillDetail(selectedItem) }));
 }
 export default SkillsScreen;

package/src/ui/screens/SkillsScreen.tsx

@@ -60,6 +60,7 @@ export function SkillsScreen() {
 
   const [searchResults, setSearchResults] = useState<SkillInfo[]>([]);
   const [isSearchLoading, setIsSearchLoading] = useState(false);
+  const [searchError, setSearchError] = useState<string | null>(null);
   const searchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const searchCacheRef = useRef<Map<string, SkillInfo[]>>(new Map());
 
@@ -68,6 +69,7 @@ export function SkillsScreen() {
     if (query.length < 2) {
       setSearchResults([]);
       setIsSearchLoading(false);
+      setSearchError(null);
       return;
     }
 
@@ -75,10 +77,12 @@ export function SkillsScreen() {
     if (cached) {
       setSearchResults(cached);
       setIsSearchLoading(false);
+      setSearchError(null);
       return;
     }
 
     setIsSearchLoading(true);
+    setSearchError(null);
 
     if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
     searchTimerRef.current = setTimeout(async () => {
@@ -107,8 +111,14 @@ export function SkillsScreen() {
         });
         searchCacheRef.current.set(query, mapped);
         setSearchResults(mapped);
-      } catch {
+        setSearchError(null);
+      } catch (error) {
+        // A thrown error means the search service is unreachable — distinct
+        // from a successful search that returned zero matches.
         setSearchResults([]);
+        setSearchError(
+          error instanceof Error ? error.message : "Search service unavailable",
+        );
       }
       setIsSearchLoading(false);
     }, 400);
@@ -583,9 +593,12 @@ export function SkillsScreen() {
       {query.length >= 2 && isSearchLoading && (
         <span fg="yellow"> │ searching...</span>
       )}
-      {query.length >= 2 && !isSearchLoading && searchResults.length > 0 && (
+      {query.length >= 2 && !isSearchLoading && !searchError && searchResults.length > 0 && (
         <span fg="green"> │ {searchResults.length} found</span>
       )}
+      {query.length >= 2 && !isSearchLoading && searchError && (
+        <span fg="red"> │ search unavailable</span>
+      )}
       {!query && <span fg="gray"> │ 89K+ searchable</span>}
     </text>
   );
@@ -608,8 +621,17 @@ export function SkillsScreen() {
       }
       footerHints={
         isSearchActive
-          ? "type to filter │ Enter:done │ Esc:clear"
-          : "u:user │ p:project │ o:open │ /:search"
+          ? [
+              { keys: ["type"], label: "filter" },
+              { keys: ["Enter"], label: "done" },
+              { keys: ["Esc"], label: "clear" },
+            ]
+          : [
+              { keys: ["u"], label: "user" },
+              { keys: ["p"], label: "project" },
+              { keys: ["o"], label: "open" },
+              { keys: ["/"], label: "search" },
+            ]
       }
       listPanel={
         <box flexDirection="column">
@@ -630,7 +652,19 @@ export function SkillsScreen() {
               <text fg="yellow">Searching for "{skillsState.searchQuery}"...</text>
             </box>
           )}
-          {query.length >= 2 && !isSearchLoading && searchResults.length === 0 && (
+          {query.length >= 2 && !isSearchLoading && searchError && (
+            <box flexDirection="column" marginTop={2} paddingLeft={2} paddingRight={2}>
+              <text fg="red">Skill search is unavailable right now.</text>
+              <box marginTop={1}>
+                <text fg="gray">The search service could not be reached</text>
+              </box>
+              <text fg="gray">({searchError}). Check your connection and retry.</text>
+              <box marginTop={1}>
+                <text fg="gray">Press Esc to clear the search.</text>
+              </box>
+            </box>
+          )}
+          {query.length >= 2 && !isSearchLoading && !searchError && searchResults.length === 0 && (
             <EmptyFilterState query={skillsState.searchQuery} entityName="skills" />
           )}
         </box>

package/src/ui/screens/StatusLineScreen.js

@@ -195,6 +195,12 @@ export function StatusLineScreen() {
     const statusContent = (_jsxs(_Fragment, { children: [_jsx("text", { fg: "gray", children: "Scope: " }), _jsx("text", { fg: "cyan", children: scopeLabel }), _jsx("text", { fg: "gray", children: " \u2502 Current: " }), _jsx("text", { fg: "green", children: currentValue
                     ? currentValue.slice(0, 35) + (currentValue.length > 35 ? "..." : "")
                     : "(not set)" })] }));
-    return (_jsx(ScreenLayout, { title: "claudeup Status Line", currentScreen: "statusline", statusLine: statusContent, footerHints: "\u2191\u2193:nav \u2502 Enter:apply \u2502 p:project \u2502 g:global \u2502 r:reset", listPanel: _jsx(ScrollableList, { items: listItems, selectedIndex: statusLine.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), detailPanel: renderPreview() }));
+    return (_jsx(ScreenLayout, { title: "claudeup Status Line", currentScreen: "statusline", statusLine: statusContent, footerHints: [
+            { keys: ["↑", "↓"], label: "nav" },
+            { keys: ["Enter"], label: "apply" },
+            { keys: ["p"], label: "project" },
+            { keys: ["g"], label: "global" },
+            { keys: ["r"], label: "reset" },
+        ], listPanel: _jsx(ScrollableList, { items: listItems, selectedIndex: statusLine.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), detailPanel: renderPreview() }));
 }
 export default StatusLineScreen;

package/src/ui/screens/StatusLineScreen.tsx

@@ -393,7 +393,13 @@ export function StatusLineScreen() {
 			title="claudeup Status Line"
 			currentScreen={"statusline" as never}
 			statusLine={statusContent}
-			footerHints="↑↓:nav │ Enter:apply │ p:project │ g:global │ r:reset"
+			footerHints={[
+				{ keys: ["↑", "↓"], label: "nav" },
+				{ keys: ["Enter"], label: "apply" },
+				{ keys: ["p"], label: "project" },
+				{ keys: ["g"], label: "global" },
+				{ keys: ["r"], label: "reset" },
+			]}
 			listPanel={
 				<ScrollableList
 					items={listItems}

package/src/ui/screens/index.js

@@ -7,3 +7,4 @@ export { ModelSelectorScreen } from "./ModelSelectorScreen.js";
 export { ProfilesScreen } from "./ProfilesScreen.js";
 export { SkillsScreen } from "./SkillsScreen.js";
 export { GitignoreScreen } from "./GitignoreScreen.js";
+export { AliasScreen } from "./AliasScreen.js";

package/src/ui/screens/index.ts

@@ -7,3 +7,4 @@ export { ModelSelectorScreen } from "./ModelSelectorScreen.js";
 export { ProfilesScreen } from "./ProfilesScreen.js";
 export { SkillsScreen } from "./SkillsScreen.js";
 export { GitignoreScreen } from "./GitignoreScreen.js";
+export { AliasScreen } from "./AliasScreen.js";

package/src/ui/state/reducer.js

@@ -7,6 +7,7 @@ export const initialState = {
     modal: null,
     progress: null,
     isSearching: false,
+    detailActive: false,
     // Refresh counter for triggering data refetch
     dataRefreshVersion: 0,
     // Screen-specific state
@@ -68,8 +69,9 @@ export function appReducer(state, action) {
             return {
                 ...state,
                 currentRoute: action.route,
-                // Clear search state when navigating away
+                // Clear transient sub-view state when navigating away
                 isSearching: false,
+                detailActive: false,
             };
         // =========================================================================
         // Plugins Screen
@@ -532,6 +534,8 @@ export function appReducer(state, action) {
         // =========================================================================
         case "SET_SEARCHING":
             return { ...state, isSearching: action.isSearching };
+        case "SET_DETAIL_ACTIVE":
+            return { ...state, detailActive: action.detailActive };
         // =========================================================================
         // Data Refresh
         // =========================================================================

package/src/ui/state/reducer.ts

@@ -11,6 +11,7 @@ export const initialState: AppState = {
 	modal: null,
 	progress: null,
 	isSearching: false,
+	detailActive: false,
 
 	// Refresh counter for triggering data refetch
 	dataRefreshVersion: 0,
@@ -83,8 +84,9 @@ export function appReducer(state: AppState, action: AppAction): AppState {
 			return {
 				...state,
 				currentRoute: action.route,
-				// Clear search state when navigating away
+				// Clear transient sub-view state when navigating away
 				isSearching: false,
+				detailActive: false,
 			};
 
 		// =========================================================================
@@ -603,6 +605,9 @@ export function appReducer(state: AppState, action: AppAction): AppState {
 		case "SET_SEARCHING":
 			return { ...state, isSearching: action.isSearching };
 
+		case "SET_DETAIL_ACTIVE":
+			return { ...state, detailActive: action.detailActive };
+
 		// =========================================================================
 		// Data Refresh
 		// =========================================================================

package/src/ui/state/types.ts

@@ -21,7 +21,8 @@ export type Screen =
 	| "model-selector"
 	| "profiles"
 	| "skills"
-	| "gitignore";
+	| "gitignore"
+	| "alias";
 
 export type Route =
 	| { screen: "plugins" }
@@ -32,7 +33,8 @@ export type Route =
 	| { screen: "model-selector" }
 	| { screen: "profiles" }
 	| { screen: "skills" }
-	| { screen: "gitignore" };
+	| { screen: "gitignore" }
+	| { screen: "alias" };
 
 // ============================================================================
 // Async Data Types
@@ -205,6 +207,11 @@ export interface AppState {
 	modal: ModalState | null;
 	progress: ProgressState | null;
 	isSearching: boolean;
+	// True while a screen has a focused sub-view open that owns Escape (e.g.
+	// the Alias tab's flag-detail editor). The global key handler skips its
+	// Escape→navigate branch so Escape backs out of the sub-view instead of
+	// jumping to the home tab. Mirrors how `modal`/`isSearching` gate keys.
+	detailActive: boolean;
 
 	// Refresh counter - incremented when marketplace sync completes
 	// Screens can watch this to know when to refetch data
@@ -305,6 +312,9 @@ export type AppAction =
 	// Search state (blocks global key handlers)
 	| { type: "SET_SEARCHING"; isSearching: boolean }
 
+	// Detail sub-view state (gates global Escape→navigate)
+	| { type: "SET_DETAIL_ACTIVE"; detailActive: boolean }
+
 	// Profiles screen
 	| { type: "PROFILES_SELECT"; index: number }
 	| { type: "PROFILES_DATA_LOADING" }