magus-cli 7.3.1 → 7.4.0

package/src/ui/screens/McpRegistryScreen.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useCallback, useState, useRef } from "react";
 import { ScreenLayout } from "../components/layout/index.js";
-import { useKeyboard } from "../hooks/useKeyboard.js";
+import { useScreenKeys, useSearchInput } from "../input/KeyRouter.js";
+import { moveDirection } from "../keymap.js";
 import { useApp, useModal, useNavigation } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 
@@ -8,6 +9,7 @@ import { addMcpServer, setAllowMcp } from "../../services/claude-settings.js";
 import { formatDate, searchMcpServers } from "../../services/mcp-registry.js";
 import type { McpRegistryServer, McpServerConfig } from "../../types/index.js";
 import { ScrollableList } from "../components/ScrollableList.js";
+import { rowLead } from "../components/primitives/index.js";
 import { theme } from "../theme.js";
 
 /**
@@ -82,9 +84,7 @@ export function McpRegistryScreen() {
 	const [searchQuery, setSearchQuery] = useState(mcpRegistry.searchQuery || "");
 
 	const isSearchActive =
-		state.isSearching &&
-		state.currentRoute.screen === "mcp-registry" &&
-		!state.modal;
+		state.isSearching && state.currentRoute.screen === "mcp-registry";
 
 	const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -132,67 +132,48 @@ export function McpRegistryScreen() {
 		};
 	}, [loadServers]);
 
-	// Keyboard handling
-	useKeyboard((event) => {
-		// Handle search mode
-		if (isSearchActive) {
-			if (event.name === "escape") {
-				dispatch({ type: "SET_SEARCHING", isSearching: false });
-			} else if (event.name === "enter") {
-				// Exit search mode and stay on list for navigation
-				dispatch({ type: "SET_SEARCHING", isSearching: false });
-			} else if (event.name === "up") {
-				// Allow navigation while searching
-				const newIndex = Math.max(0, mcpRegistry.selectedIndex - 1);
-				dispatch({ type: "MCPREGISTRY_SELECT", index: newIndex });
-			} else if (event.name === "down") {
-				// Allow navigation while searching
-				const newIndex = Math.min(
-					Math.max(0, servers.length - 1),
-					mcpRegistry.selectedIndex + 1,
-				);
-				dispatch({ type: "MCPREGISTRY_SELECT", index: newIndex });
-			} else if (event.name === "backspace" || event.name === "delete") {
-				const newQuery = searchQuery.slice(0, -1);
-				setSearchQuery(newQuery);
-				dispatch({ type: "MCPREGISTRY_SEARCH", query: newQuery });
-				debouncedSearch(newQuery);
-			} else if (event.name.length === 1 && !event.ctrl && !event.meta) {
-				const newQuery = searchQuery + event.name;
-				setSearchQuery(newQuery);
-				dispatch({ type: "MCPREGISTRY_SEARCH", query: newQuery });
-				debouncedSearch(newQuery);
-			}
-			return;
-		}
+	// ── Keys ──────────────────────────────────────────────────────────────────
 
-		if (state.modal) return;
+	/** A new query: the list reloads, debounced, and the cursor starts over. */
+	const setQuery = (query: string) => {
+		setSearchQuery(query);
+		dispatch({ type: "MCPREGISTRY_SEARCH", query });
+		dispatch({ type: "MCPREGISTRY_SELECT", index: 0 });
+		debouncedSearch(query);
+	};
 
-		// Start search with /
-		if (event.name === "/") {
-			dispatch({ type: "SET_SEARCHING", isSearching: true });
-			return;
-		}
+	// The search box, while it has focus: digits, j/k, q and ? are typed here.
+	useSearchInput({
+		focused: isSearchActive,
+		query: searchQuery,
+		append: (char) => setQuery(searchQuery + char),
+		erase: () => setQuery(searchQuery.slice(0, -1)),
+		clear: () => setQuery(""),
+		blur: () => dispatch({ type: "SET_SEARCHING", isSearching: false }),
+	});
 
-		// Navigation
-		if (event.name === "up" || event.name === "k") {
-			const newIndex = Math.max(0, mcpRegistry.selectedIndex - 1);
-			dispatch({ type: "MCPREGISTRY_SELECT", index: newIndex });
-		} else if (event.name === "down" || event.name === "j") {
-			const newIndex = Math.min(
-				Math.max(0, servers.length - 1),
-				mcpRegistry.selectedIndex + 1,
-			);
-			dispatch({ type: "MCPREGISTRY_SELECT", index: newIndex });
-		} else if (event.name === "l") {
-			navigateToScreen("mcp");
-		} else if (event.name === "r" && event.shift) {
-			// `name` is always the unshifted key, so `=== "R"` never matched and
-			// refresh silently did nothing.
-			loadServers(searchQuery);
-		} else if (event.name === "enter") {
-			handleInstall();
-		}
+	useScreenKeys("mcp-registry", {
+		install: () => {
+			void handleInstall();
+		},
+		search: () => dispatch({ type: "SET_SEARCHING", isSearching: true }),
+		local: () => navigateToScreen("mcp"),
+		reload: () => {
+			void loadServers(searchQuery);
+		},
+		// Only while a query is set; otherwise Esc is the global back to MCP.
+		"clear-filter": () => {
+			if (!searchQuery) return false;
+			setQuery("");
+			return true;
+		},
+		move: (key) => {
+			const index = mcpRegistry.selectedIndex + moveDirection(key);
+			dispatch({
+				type: "MCPREGISTRY_SELECT",
+				index: Math.max(0, Math.min(servers.length - 1, index)),
+			});
+		},
 	});
 
 	const handleInstall = async () => {
@@ -254,13 +235,13 @@ export function McpRegistryScreen() {
 				<box marginTop={1}>
 					<text fg={theme.colors.text}>{selectedServer.short_description}</text>
 				</box>
-				<box marginTop={1}>
+				<box flexDirection="row" marginTop={1}>
 					<text fg={theme.colors.text}>
 						<strong>Version: </strong>
 					</text>
-					<text fg={theme.colors.success}>{versionDisplay}</text>
+					<text fg={theme.colors.info}>{versionDisplay}</text>
 				</box>
-				<box>
+				<box flexDirection="row">
 					<text fg={theme.colors.text}>
 						<strong>Published: </strong>
 					</text>
@@ -283,7 +264,7 @@ export function McpRegistryScreen() {
 					</box>
 				)}
 				<box marginTop={1}>
-					<text fg={theme.colors.success}>Press Enter to install</text>
+					<text fg={theme.colors.muted}>Press Enter to install</text>
 				</box>
 			</box>
 		);
@@ -296,37 +277,22 @@ export function McpRegistryScreen() {
 	) => {
 		const version = server.version ? ` v${server.version}` : "";
 		return isSelected ? (
-			<text bg={theme.colors.accent} fg={theme.hints.fg}>
-				{" "}
+			<text bg={theme.selection.bg} fg={theme.selection.fg}>
+				{rowLead(true)}
 				{server.name}
 				{version}{" "}
 			</text>
 		) : (
 			<text fg={theme.colors.text}>
+				<span>{rowLead(false)}</span>
 				<span>
 					<strong>{server.name}</strong>
 				</span>
-				<span fg={theme.colors.success}>{version}</span>
+				<span fg={theme.colors.info}>{version}</span>
 			</text>
 		);
 	};
 
-	// Footer hints
-	const footerHints = isSearchActive
-		? [
-				{ keys: ["type"], label: "search" },
-				{ keys: ["↑", "↓"], label: "nav" },
-				{ keys: ["Enter"], label: "done" },
-				{ keys: ["Esc"], label: "cancel" },
-			]
-		: [
-				{ keys: ["↑", "↓"], label: "nav" },
-				{ keys: ["Enter"], label: "install" },
-				{ keys: ["/"], label: "search" },
-				{ keys: ["R"], label: "refresh" },
-				{ keys: ["l"], label: "local" },
-			];
-
 	// Status for search placeholder
 	const searchPlaceholder = `${servers.length} servers │ / to search`;
 
@@ -340,7 +306,7 @@ export function McpRegistryScreen() {
 				query: searchQuery,
 				placeholder: searchPlaceholder,
 			}}
-			footerHints={footerHints}
+			footer={{ hide: searchQuery ? [] : ["clear-filter"] }}
 			listPanel={
 				isLoading ? (
 					<text fg={theme.colors.muted}>Loading...</text>

package/src/ui/screens/McpScreen.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from "react";
 import { ScreenLayout } from "../components/layout/index.js";
-import { useKeyboard } from "../hooks/useKeyboard.js";
+import { useScreenKeys } from "../input/KeyRouter.js";
+import { moveDirection } from "../keymap.js";
 import { useApp, useModal, useNavigation } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 
@@ -18,6 +19,7 @@ import {
 import { fetchCuratedMcpServers } from "../../services/mcp-registry.js";
 import type { McpServer, McpServerConfig } from "../../types/index.js";
 import { ScrollableList } from "../components/ScrollableList.js";
+import { ErrorNotice } from "../components/primitives/index.js";
 import {
 	type McpListItem,
 	renderMcpDetail,
@@ -92,26 +94,32 @@ export function McpScreen() {
 		return items;
 	}, [mcp.servers, mcp.installedServers]);
 
-	useKeyboard((event) => {
-		if (state.isSearching || state.modal) return;
-
-		if (event.name === "/") {
-			dispatch({ type: "SET_SEARCHING", isSearching: true });
-			navigateToScreen("mcp-registry");
-			return;
-		}
-
-		if (event.name === "up" || event.name === "k") {
-			const newIndex = Math.max(0, mcp.selectedIndex - 1);
-			dispatch({ type: "MCP_SELECT", index: newIndex });
-		} else if (event.name === "down" || event.name === "j") {
-			const newIndex = Math.min(allListItems.length - 1, mcp.selectedIndex + 1);
-			dispatch({ type: "MCP_SELECT", index: newIndex });
-		} else if (event.name === "r") {
+	useScreenKeys("mcp", {
+		// Guarded: `installMcpServer` throws on a catalogue entry with no URL or
+		// command, and a rejection nobody catches ends the app.
+		toggle: () => {
+			handleSelect().catch((error: unknown) =>
+				modal.message(
+					"Error",
+					error instanceof Error ? error.message : String(error),
+					"error",
+				),
+			);
+		},
+		// Navigate FIRST: a navigation closes any search box, so opening the
+		// registry's box has to come after it.
+		search: () => {
 			navigateToScreen("mcp-registry");
-		} else if (event.name === "enter") {
-			handleSelect();
-		}
+			dispatch({ type: "SET_SEARCHING", isSearching: true });
+		},
+		registry: () => navigateToScreen("mcp-registry"),
+		move: (key) => {
+			const index = mcp.selectedIndex + moveDirection(key);
+			dispatch({
+				type: "MCP_SELECT",
+				index: Math.max(0, Math.min(allListItems.length - 1, index)),
+			});
+		},
 	});
 
 	const handleSelect = async () => {
@@ -227,26 +235,32 @@ export function McpScreen() {
 	const enabledCount = Object.values(mcp.installedServers).filter(
 		(v) => v === true,
 	).length;
-	const subtitle = `${enabledCount} enabled │ ${installedCount} configured │ / to search`;
+	// A failed read is not "0 configured": the counts are only a fact once the
+	// configuration has actually been read.
+	const loadError = mcp.servers.status === "error" ? mcp.servers.error : null;
+	const subtitle = loadError
+		? "configuration unreadable"
+		: `${enabledCount} enabled │ ${installedCount} configured │ / to search`;
 
 	return (
 		<ScreenLayout
 			title="magus MCP Servers"
 			subtitle={subtitle}
 			currentScreen="mcp"
-			footerHints={[
-				{ keys: ["↑", "↓"], label: "nav" },
-				{ keys: ["Enter"], label: "toggle" },
-				{ keys: ["/"], label: "search" },
-				{ keys: ["r"], label: "registry" },
-			]}
 			listPanel={
-				<ScrollableList
-					items={allListItems}
-					selectedIndex={mcp.selectedIndex}
-					renderItem={renderMcpRow}
-					maxHeight={dimensions.listPanelHeight}
-				/>
+				loadError ? (
+					<ErrorNotice
+						title="Could not load MCP servers."
+						detail={loadError.message}
+					/>
+				) : (
+					<ScrollableList
+						items={allListItems}
+						selectedIndex={mcp.selectedIndex}
+						renderItem={renderMcpRow}
+						maxHeight={dimensions.listPanelHeight}
+					/>
+				)
 			}
 			detailPanel={renderMcpDetail(selectedItem, isLoading)}
 		/>

package/src/ui/screens/ModelsScreen.tsx

@@ -15,7 +15,8 @@ import {
 import { EmptyFilterState } from "../components/EmptyFilterState.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { ScreenLayout } from "../components/layout/index.js";
-import { useKeyboard } from "../hooks/useKeyboard.js";
+import { useScreenKeys, useSearchInput } from "../input/KeyRouter.js";
+import { moveDirection } from "../keymap.js";
 import {
 	fitPresetList,
 	renderModelDetail,
@@ -33,7 +34,7 @@ export function ModelsScreen() {
 	const dimensions = useDimensions();
 
 	const isSearchActive =
-		state.isSearching && state.currentRoute.screen === "models" && !state.modal;
+		state.isSearching && state.currentRoute.screen === "models";
 
 	// ── Data ──────────────────────────────────────────────────────────────────
 
@@ -287,94 +288,61 @@ export function ModelsScreen() {
 		[modelsState.selectedIndex, allItems, dispatch],
 	);
 
-	useKeyboard((event) => {
-		if (state.modal) return;
-
-		// The previous message belongs to the previous ACTION, so clearing it here
-		// covers every action key in one place. Navigation is excluded: a digit or
-		// Tab is handled by the global handler, and clearing on it wiped the
-		// message on the way OUT of the tab, losing it on a round trip.
-		const isNavigation =
-			/^[0-9]$/.test(event.name ?? "") || event.name === "tab";
-		if (modelsState.status && !isNavigation) {
-			dispatch({ type: "MODELS_STATUS_CLEAR" });
-		}
-
-		const hasQuery = modelsState.searchQuery.length > 0;
-
-		if (event.name === "escape") {
-			if (hasQuery || isSearchActive) {
-				dispatch({ type: "MODELS_SET_SEARCH", query: "" });
-				dispatch({ type: "SET_SEARCHING", isSearching: false });
-				dispatch({ type: "MODELS_SELECT", index: 0 });
-			}
-			return;
-		}
-
-		if (event.name === "backspace" || event.name === "delete") {
-			if (hasQuery) {
-				dispatch({ type: "MODELS_SEARCH_BACKSPACE" });
-				// Driven by what was there BEFORE this keystroke — the one thing the
-				// closure knows reliably.
-				if (modelsState.searchQuery.length <= 1) {
-					dispatch({ type: "SET_SEARCHING", isSearching: false });
-				}
-			}
-			return;
-		}
-
-		if (event.name === "up") {
-			if (isSearchActive)
-				dispatch({ type: "SET_SEARCHING", isSearching: false });
-			move(-1);
-			return;
-		}
-		if (event.name === "down") {
-			if (isSearchActive)
-				dispatch({ type: "SET_SEARCHING", isSearching: false });
-			move(1);
-			return;
-		}
-
-		if (event.name === "return" || event.name === "enter") {
-			if (isSearchActive) {
-				dispatch({ type: "SET_SEARCHING", isSearching: false });
-				return;
-			}
-			// Enter and `a` are the same action here. There is nothing to "open" on
-			// this screen — a preset row has one thing it can do — so binding Enter
-			// to anything else would leave the most obvious key doing nothing.
-			handleApply();
-			return;
-		}
-
-		// While typing a filter, letters are text — not commands.
-		if (isSearchActive) {
-			if (
-				event.name &&
-				event.name.length === 1 &&
-				!event.ctrl &&
-				!event.meta &&
-				!/[0-9]/.test(event.name)
-			) {
-				dispatch({ type: "MODELS_SEARCH_APPEND", char: event.name });
-			}
-			return;
-		}
+	// The search box, while it has focus: digits, j/k, q and ? are typed here.
+	useSearchInput({
+		focused: isSearchActive,
+		query: modelsState.searchQuery,
+		append: (char) => dispatch({ type: "MODELS_SEARCH_APPEND", char }),
+		erase: () => dispatch({ type: "MODELS_SEARCH_BACKSPACE" }),
+		clear: () => {
+			dispatch({ type: "MODELS_SET_SEARCH", query: "" });
+			dispatch({ type: "MODELS_SELECT", index: 0 });
+		},
+		blur: () => dispatch({ type: "SET_SEARCHING", isSearching: false }),
+	});
 
-		if (event.name === "k") {
-			move(-1);
-		} else if (event.name === "j") {
-			move(1);
-		} else if (event.name === "a") {
-			handleApply();
-		} else if (event.name === "c") {
-			handleClear();
-		} else if (event.name === "r") {
-			fetchData();
-		} else if (event.name === "/") {
+	/**
+	 * The previous message belongs to the previous ACTION, so every key this
+	 * screen acts on clears it first. Keys another layer takes — a digit or Tab
+	 * leaving the tab, text typed into the search box — leave it alone, so a
+	 * round trip through another tab keeps it.
+	 */
+	const clearStatus = () => {
+		if (modelsState.status) dispatch({ type: "MODELS_STATUS_CLEAR" });
+	};
+
+	useScreenKeys("models", {
+		// Enter and `a` are the same action here. There is nothing to "open" on
+		// this screen — a preset row has one thing it can do — so binding Enter
+		// to anything else would leave the most obvious key doing nothing.
+		apply: () => {
+			clearStatus();
+			void handleApply();
+		},
+		off: () => {
+			clearStatus();
+			void handleClear();
+		},
+		reload: () => {
+			clearStatus();
+			void fetchData();
+		},
+		search: () => {
+			clearStatus();
 			dispatch({ type: "SET_SEARCHING", isSearching: true });
-		}
+		},
+		// Only while a committed filter is set; otherwise Esc is the global back.
+		"clear-filter": () => {
+			if (!modelsState.searchQuery) return false;
+			clearStatus();
+			dispatch({ type: "MODELS_SET_SEARCH", query: "" });
+			dispatch({ type: "MODELS_SELECT", index: 0 });
+			return true;
+		},
+		move: (key) => {
+			clearStatus();
+			move(moveDirection(key));
+		},
 	});
 
 	// ── Chrome ────────────────────────────────────────────────────────────────
@@ -413,7 +381,7 @@ export function ModelsScreen() {
 				{routingState ?? "reading…"}
 			</span>
 			{modelsState.isApplying ? (
-				<span fg={theme.colors.warning}> │ writing…</span>
+				<span fg={theme.colors.muted}> │ writing…</span>
 			) : null}
 		</text>
 	);
@@ -440,20 +408,7 @@ export function ModelsScreen() {
 						}
 					: undefined
 			}
-			footerHints={
-				isSearchActive
-					? [
-							{ keys: ["type"], label: "filter" },
-							{ keys: ["Enter"], label: "done" },
-							{ keys: ["Esc"], label: "clear" },
-						]
-					: [
-							{ keys: ["Enter", "a"], label: "apply" },
-							{ keys: ["c"], label: "off" },
-							{ keys: ["r"], label: "reload" },
-							{ keys: ["/"], label: "filter" },
-						]
-			}
+			footer={{ hide: modelsState.searchQuery ? [] : ["clear-filter"] }}
 			listPanel={(listWidth) => {
 				// ONE layout for every row, measured from the widest of them.
 				// Rows used to fit themselves, so at 120×30 the selected row
@@ -464,7 +419,7 @@ export function ModelsScreen() {
 					<box flexDirection="column">
 						{modelsState.data.status === "loading" && !snapshot && (
 							<box paddingLeft={2}>
-								<text fg={theme.colors.warning}>Reading the routing…</text>
+								<text fg={theme.colors.muted}>Reading the routing…</text>
 							</box>
 						)}