magus-cli 7.3.1 → 7.4.0

package/src/ui/screens/PluginsScreen.tsx

@@ -12,6 +12,7 @@ import {
 	uninstallPlugin as cliUninstallPlugin,
 } from "../../services/claude-cli.js";
 import {
+	SettingsParseError,
 	getMcpEnvVars,
 	readSettings,
 	setMcpEnvVar,
@@ -68,6 +69,7 @@ import {
 	saveSeenVersions,
 } from "../../services/version-snapshot.js";
 import { fuzzyFilter } from "../../utils/fuzzy-search.js";
+import { createRequestGate } from "../../utils/request-gate.js";
 import { buildCatalogNoticeText } from "../adapters/catalogNotice.js";
 import {
 	type PluginBrowserItem,
@@ -80,7 +82,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 { type BindingId, moveDirection, tabKey } from "../keymap.js";
 import {
 	renderPluginDetail,
 	renderPluginRow,
@@ -90,6 +93,17 @@ import { useDimensions } from "../state/DimensionsContext.js";
 import { asyncValue } from "../state/types.js";
 import { theme } from "../theme.js";
 
+/**
+ * The latest Plugins load wins.
+ *
+ * A load starts on mount and again on every `DATA_REFRESH_COMPLETE` — at
+ * startup that is two loads racing, and whichever finished LAST used to be the
+ * one on screen, often the older. Module scope rather than a ref, because the
+ * router remounts this screen on every tab switch and a load begun by the
+ * previous mount still has to lose to the new one.
+ */
+const pluginsLoadGate = createRequestGate();
+
 /** Wraps the notice text in the warning-coloured row ScreenLayout renders. */
 function buildCatalogNotice(
 	input: Parameters<typeof buildCatalogNoticeText>[0],
@@ -107,9 +121,7 @@ export function PluginsScreen() {
 	const dimensions = useDimensions();
 
 	const isSearchActive =
-		state.isSearching &&
-		state.currentRoute.screen === "plugins" &&
-		!state.modal;
+		state.isSearching && state.currentRoute.screen === "plugins";
 
 	/**
 	 * Catalogs that could not be read from any authoritative source.
@@ -136,8 +148,11 @@ export function PluginsScreen() {
 		Readonly<Record<string, string>> | null | undefined
 	>(undefined);
 
-	// Fetch data (always fetches all scopes)
+	// Fetch data (always fetches all scopes). Only the most recently started
+	// load may touch the screen — or the seen-versions baseline, which a stale
+	// load would rewind.
 	const fetchData = useCallback(async () => {
+		const token = pluginsLoadGate.begin();
 		dispatch({ type: "PLUGINS_DATA_LOADING" });
 		try {
 			const localMarketplaces = await getLocalMarketplacesInfo();
@@ -150,6 +165,7 @@ export function PluginsScreen() {
 					resolveBins: false,
 				}),
 			]);
+			if (!pluginsLoadGate.isCurrent(token)) return;
 			setPins(active?.closure.plugins ?? null);
 
 			// Which catalogs answered, and which only appeared to. Read straight
@@ -178,6 +194,7 @@ export function PluginsScreen() {
 			}
 			const projectPath = state.projectPath || process.cwd();
 			const previous = await loadSeenVersions(projectPath);
+			if (!pluginsLoadGate.isCurrent(token)) return;
 			for (const change of diffVersions(previous, current)) {
 				const target = pluginData.find((p) => p.id === change.pluginId);
 				if (!target) continue;
@@ -191,6 +208,7 @@ export function PluginsScreen() {
 			// refresh or a post-action refetch could load the baseline before the
 			// previous save landed and re-report the same change.
 			await saveSeenVersions(projectPath, current);
+			if (!pluginsLoadGate.isCurrent(token)) return;
 
 			dispatch({
 				type: "PLUGINS_DATA_SUCCESS",
@@ -198,6 +216,7 @@ export function PluginsScreen() {
 				plugins: pluginData,
 			});
 		} catch (error) {
+			if (!pluginsLoadGate.isCurrent(token)) return;
 			dispatch({
 				type: "PLUGINS_DATA_ERROR",
 				error: error instanceof Error ? error : new Error(String(error)),
@@ -441,119 +460,79 @@ export function PluginsScreen() {
 		[dispatch, pluginsState.pluginContents, shownMarketplaces],
 	);
 
-	// Keyboard handling
-	useKeyboard((event) => {
-		if (state.modal) return;
-
-		const hasQuery = pluginsState.searchQuery.length > 0;
-
-		if (event.name === "escape") {
-			if (hasQuery || isSearchActive) {
-				dispatch({ type: "PLUGINS_SET_SEARCH", query: "" });
-				dispatch({ type: "SET_SEARCHING", isSearching: false });
-				dispatch({ type: "PLUGINS_SELECT", index: 0 });
-			}
-			return;
-		}
+	// ── Keys ──────────────────────────────────────────────────────────────────
 
-		if (event.name === "backspace" || event.name === "delete") {
-			if (hasQuery) {
-				const newQuery = pluginsState.searchQuery.slice(0, -1);
-				dispatch({ type: "PLUGINS_SET_SEARCH", query: newQuery });
-				dispatch({ type: "PLUGINS_SELECT", index: 0 });
-				if (newQuery.length === 0) {
-					dispatch({ type: "SET_SEARCHING", isSearching: false });
-				}
-			}
-			return;
-		}
-
-		if (event.name === "up" || event.name === "k") {
-			if (isSearchActive)
-				dispatch({ type: "SET_SEARCHING", isSearching: false });
-			dispatch({
-				type: "PLUGINS_SELECT",
-				index: Math.max(0, pluginsState.selectedIndex - 1),
-			});
-			return;
-		}
-		if (event.name === "down" || event.name === "j") {
-			if (isSearchActive)
-				dispatch({ type: "SET_SEARCHING", isSearching: false });
-			dispatch({
-				type: "PLUGINS_SELECT",
-				index: Math.min(
-					selectableItems.length - 1,
-					pluginsState.selectedIndex + 1,
-				),
-			});
-			return;
-		}
+	const setQuery = (query: string) => {
+		dispatch({ type: "PLUGINS_SET_SEARCH", query });
+		dispatch({ type: "PLUGINS_SELECT", index: 0 });
+	};
 
-		if (event.name === "enter" || event.name === "return") {
-			if (isSearchActive) {
-				dispatch({ type: "SET_SEARCHING", isSearching: false });
-				return;
-			}
-			handleSelect();
-			return;
-		}
+	// The search box, while it has focus: digits, j/k, q and ? are typed here.
+	useSearchInput({
+		focused: isSearchActive,
+		query: pluginsState.searchQuery,
+		append: (char) => setQuery(pluginsState.searchQuery + char),
+		erase: () => setQuery(pluginsState.searchQuery.slice(0, -1)),
+		clear: () => setQuery(""),
+		blur: () => dispatch({ type: "SET_SEARCHING", isSearching: false }),
+	});
 
-		if (
-			event.name === "left" ||
-			event.name === "right" ||
-			event.name === "<" ||
-			event.name === ">"
-		) {
+	useScreenKeys("plugins", {
+		// Three keys, one binding: the footer reads "u/p/l toggle".
+		scope: (key) => {
+			void handleScopeToggle(
+				key.name === "u" ? "user" : key.name === "p" ? "project" : "local",
+			);
+		},
+		update: () => {
+			void handleUpdate();
+		},
+		"update-all": () => {
+			void handleUpdateAll();
+		},
+		open: () => {
+			void handleSelect();
+		},
+		expand: () => {
 			const item = selectableItems[pluginsState.selectedIndex];
 			if (item?.kind === "category") {
 				dispatch({
 					type: "PLUGINS_TOGGLE_MARKETPLACE",
 					name: item.marketplace.name,
 				});
-				return;
-			}
-			if (item?.kind === "plugin" && item.isExpandable) {
+			} else if (item?.kind === "plugin" && item.isExpandable) {
 				togglePluginContents(item);
-				return;
 			}
-		}
-
-		if (isSearchActive) {
-			if (
-				event.name.length === 1 &&
-				!event.ctrl &&
-				!event.meta &&
-				!/[0-9]/.test(event.name)
-			) {
-				dispatch({
-					type: "PLUGINS_SET_SEARCH",
-					query: pluginsState.searchQuery + event.name,
-				});
-				dispatch({ type: "PLUGINS_SELECT", index: 0 });
-			}
-			return;
-		}
-
-		if (event.name === "/") {
-			dispatch({ type: "SET_SEARCHING", isSearching: true });
-			return;
-		}
-
-		if (event.name === "r") handleRefresh();
-		else if (event.name === "n") handleShowAddMarketplaceInstructions();
-		else if (event.name === "t") handleShowTeamConfigHelp();
-		// `name` is ALWAYS the unshifted key — Shift+U parses as
-		// {name:"u", shift:true, sequence:"U"}, so `name === "U"` can never be
-		// true. It sat below the plain "u" branch, so pressing Shift+U silently
-		// installed at user scope instead of updating.
-		else if (event.name === "u" && event.shift) handleUpdate();
-		else if (event.name === "u") handleScopeToggle("user");
-		else if (event.name === "p") handleScopeToggle("project");
-		else if (event.name === "l") handleScopeToggle("local");
-		else if (event.name === "d") handleRemoveDeprecated();
-		else if (event.name === "a") handleUpdateAll();
-		else if (event.name === "s") handleSaveAsProfile();
+		},
+		"save-profile": () => {
+			void handleSaveAsProfile();
+		},
+		remove: () => {
+			void handleRemoveDeprecated();
+		},
+		"add-marketplace": () => {
+			void handleShowAddMarketplaceInstructions();
+		},
+		"team-help": () => {
+			void handleShowTeamConfigHelp();
+		},
+		refresh: () => {
+			void handleRefresh();
+		},
+		search: () => dispatch({ type: "SET_SEARCHING", isSearching: true }),
+		// Only while a committed filter is set; otherwise Esc is the global back.
+		"clear-filter": () => {
+			if (!pluginsState.searchQuery) return false;
+			setQuery("");
+			return true;
+		},
+		move: (key) => {
+			const index = pluginsState.selectedIndex + moveDirection(key);
+			dispatch({
+				type: "PLUGINS_SELECT",
+				index: Math.max(0, Math.min(selectableItems.length - 1, index)),
+			});
+		},
 	});
 
 	// ── Helpers ───────────────────────────────────────────────────────────────
@@ -713,7 +692,7 @@ export function PluginsScreen() {
 			if (!wantToConfigure) {
 				await modal.message(
 					"Skipped Configuration",
-					"You can configure these variables later in the Environment Variables screen (press 4).",
+					`You can configure these variables later in the Settings tab (press ${tabKey("settings")}).`,
 					"info",
 				);
 				return true;
@@ -741,7 +720,7 @@ export function PluginsScreen() {
 				if (value === null) {
 					await modal.message(
 						"Configuration Incomplete",
-						"Skipped remaining configuration.\nYou can configure these later in Environment Variables (press 4).",
+						`Skipped remaining configuration.\nYou can configure these later in the Settings tab (press ${tabKey("settings")}).`,
 						"info",
 					);
 					return true;
@@ -754,7 +733,18 @@ export function PluginsScreen() {
 
 			return true;
 		} catch (error) {
-			console.error("Error collecting plugin env vars:", error);
+			// The plugin itself is installed either way. But a settings.local.json
+			// that does not parse is something the user has to fix by hand before
+			// any variable can be saved, so it is said, not logged out of sight.
+			if (error instanceof SettingsParseError) {
+				await modal.message(
+					"Environment variables not saved",
+					error.message,
+					"error",
+				);
+			} else {
+				console.error("Error collecting plugin env vars:", error);
+			}
 			return true;
 		}
 	};
@@ -1251,8 +1241,20 @@ export function PluginsScreen() {
 	};
 
 	const handleSaveAsProfile = async () => {
-		const settings = await readSettings(state.projectPath);
-		const enabledPlugins = settings.enabledPlugins ?? {};
+		// Inside a catch: this runs fire-and-forget from a keypress, so a rejected
+		// read would be an unhandled rejection — which ends the app.
+		let enabledPlugins: Record<string, boolean>;
+		try {
+			enabledPlugins =
+				(await readSettings(state.projectPath)).enabledPlugins ?? {};
+		} catch (error) {
+			await modal.message(
+				"Error",
+				`Cannot save a profile: ${error instanceof Error ? error.message : String(error)}`,
+				"error",
+			);
+			return;
+		}
 
 		const name = await modal.input("Save Profile", "Profile name:");
 		if (name === null || !name.trim()) return;
@@ -1281,7 +1283,7 @@ export function PluginsScreen() {
 			modal.hideModal();
 			await modal.message(
 				"Saved",
-				`Profile "${name.trim()}" saved.\nPress 6 to manage profiles.`,
+				`Profile "${name.trim()}" saved.\nPress ${tabKey("profiles")} to manage profiles.`,
 				"success",
 			);
 		} catch (error) {
@@ -1339,19 +1341,13 @@ export function PluginsScreen() {
 
 	const selectedItem = selectableItems[pluginsState.selectedIndex];
 
-	const footerHints = isSearchActive
-		? [
-				{ 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: ["s"], label: "profile" },
-				{ keys: ["/"], label: "search" },
-			];
+	// Advertised only where they act; they stay bound, and help lists them.
+	const hiddenHints: BindingId<"plugins">[] = [
+		...(pluginsState.searchQuery ? [] : ["clear-filter" as const]),
+		...(selectedItem?.kind === "plugin" && selectedItem.plugin.isOrphaned
+			? []
+			: ["remove" as const]),
+	];
 
 	const scopeLabel = pluginsState.scope === "global" ? "Global" : "Project";
 	const plugins: PluginInfo[] = shownPlugins ?? [];
@@ -1417,7 +1413,7 @@ export function PluginsScreen() {
 				query: pluginsState.searchQuery,
 				placeholder: searchPlaceholder,
 			}}
-			footerHints={footerHints}
+			footer={{ hide: hiddenHints }}
 			listPanel={
 				<box flexDirection="column">
 					<ScrollableList

package/src/ui/screens/ProfilesScreen.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useCallback } 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 } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 
@@ -8,7 +9,11 @@ import {
 	PREDEFINED_PROFILES,
 	type PredefinedProfile,
 } from "../../data/predefined-profiles.js";
-import { readSettings, writeSettings } from "../../services/claude-settings.js";
+import {
+	getSettingsPath,
+	readSettings,
+	writeSettings,
+} from "../../services/claude-settings.js";
 import {
 	applyProfile,
 	deleteProfile,
@@ -17,6 +22,7 @@ import {
 	listProfiles,
 	renameProfile,
 } from "../../services/profiles.js";
+import { writableMap } from "../../services/settings-file.js";
 import {
 	ClipboardUnavailableError,
 	readClipboard,
@@ -67,43 +73,38 @@ export function ProfilesScreen() {
 	const isNavigable = (item: ProfileListItem | undefined) =>
 		item !== undefined && item.kind !== "header";
 
-	useKeyboard((event) => {
-		if (state.isSearching || state.modal) return;
-
-		if (event.name === "up" || event.name === "k") {
-			let newIndex = profilesState.selectedIndex - 1;
-			while (newIndex > 0 && !isNavigable(allItems[newIndex])) {
-				newIndex--;
-			}
-			if (newIndex >= 0 && isNavigable(allItems[newIndex])) {
-				dispatch({ type: "PROFILES_SELECT", index: newIndex });
-			}
-		} else if (event.name === "down" || event.name === "j") {
-			let newIndex = profilesState.selectedIndex + 1;
-			while (
-				newIndex < allItems.length - 1 &&
-				!isNavigable(allItems[newIndex])
-			) {
-				newIndex++;
-			}
-			if (newIndex < allItems.length && isNavigable(allItems[newIndex])) {
-				dispatch({ type: "PROFILES_SELECT", index: newIndex });
-			}
-		} else if (event.name === "enter" || event.name === "a") {
+	useScreenKeys("profiles", {
+		apply: () => {
 			if (selectedItem?.kind === "predefined") {
 				void handleApplyPredefined(selectedItem.profile);
 			} else if (selectedItem?.kind === "saved") {
 				void handleApply();
 			}
-		} else if (event.name === "r") {
+		},
+		rename: () => {
 			if (selectedItem?.kind === "saved") void handleRename();
-		} else if (event.name === "d") {
+		},
+		delete: () => {
 			if (selectedItem?.kind === "saved") void handleDelete();
-		} else if (event.name === "c") {
+		},
+		copy: () => {
 			if (selectedItem?.kind === "saved") void handleCopy();
-		} else if (event.name === "i") {
+		},
+		import: () => {
 			void handleImport();
-		}
+		},
+		// Section headers are labels, not rows: step over them.
+		move: (key) => {
+			const delta = moveDirection(key);
+			let index = profilesState.selectedIndex + delta;
+			while (index >= 0 && index < allItems.length) {
+				if (isNavigable(allItems[index])) {
+					dispatch({ type: "PROFILES_SELECT", index });
+					return;
+				}
+				index += delta;
+			}
+		},
 	});
 
 	// ─── Actions ──────────────────────────────────────────────────────────────
@@ -124,18 +125,23 @@ export function ProfilesScreen() {
 		modal.loading(`Applying "${profile.name}"...`);
 		try {
 			const settings = await readSettings(state.projectPath);
-			settings.enabledPlugins = settings.enabledPlugins ?? {};
+			const settingsPath = getSettingsPath(state.projectPath);
+			// `writableMap` refuses a map that is present with the wrong shape; a
+			// bare `?? {}` kept an array, and the entries set on it were never saved.
+			const enabledPlugins =
+				writableMap(settings, "enabledPlugins", settingsPath) ?? {};
+			settings.enabledPlugins = enabledPlugins;
 			for (const plugin of allPlugins) {
-				if (!settings.enabledPlugins[plugin]) {
-					settings.enabledPlugins[plugin] = true;
+				if (!enabledPlugins[plugin]) {
+					enabledPlugins[plugin] = true;
 				}
 			}
 			for (const [key, value] of Object.entries(profile.settings)) {
 				if (key === "env") {
 					const envMap = value as Record<string, string>;
-					const existing = settings as Record<string, unknown>;
-					const existingEnv =
-						(existing.env as Record<string, string> | undefined) ?? {};
+					// `ClaudeSettings` does not declare `env`; this view types the one key read.
+					const envView = settings as { env?: Record<string, string> };
+					const existingEnv = writableMap(envView, "env", settingsPath) ?? {};
 					for (const [envKey, envVal] of Object.entries(envMap)) {
 						if (!existingEnv[envKey]) {
 							existingEnv[envKey] = envVal;
@@ -381,11 +387,11 @@ export function ProfilesScreen() {
 
 	const statusContent = (
 		<text fg={theme.colors.text}>
-			<span fg={theme.colors.link}>{PREDEFINED_PROFILES.length} presets</span>
+			<span fg={theme.colors.info}>{PREDEFINED_PROFILES.length} presets</span>
 			<span fg={theme.colors.muted}> + </span>
 			<span fg={theme.colors.info}>{userCount} user</span>
 			<span fg={theme.colors.muted}> + </span>
-			<span fg={theme.colors.success}>{projCount} project</span>
+			<span fg={theme.colors.info}>{projCount} project</span>
 			<span fg={theme.colors.muted}> = </span>
 			<span fg={theme.colors.text}>
 				{PREDEFINED_PROFILES.length + profileCount} total
@@ -410,14 +416,11 @@ export function ProfilesScreen() {
 			title="magus 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" },
-			]}
+			footer={{
+				// rename / delete / copy act on a saved profile only.
+				hide:
+					selectedItem?.kind === "saved" ? [] : ["rename", "delete", "copy"],
+			}}
 			listPanel={
 				<ScrollableList
 					items={allItems}