magus-cli 7.3.0 → 7.4.0

package/src/ui/screens/CliToolsScreen.tsx

@@ -2,7 +2,8 @@ import { execFile } from "node:child_process";
 import { promisify } from "node:util";
 import React, { useEffect, useCallback, useState, useRef } 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";
 
@@ -19,11 +20,12 @@ import {
 } from "../../services/tool-probe.js";
 import type { Command } from "../../utils/command-utils.js";
 import { formatCommand } from "../../utils/command-utils.js";
+import { createRequestGate } from "../../utils/request-gate.js";
 import {
 	type CliToolRow,
 	buildToolRow,
+	cliToolEnterAction,
 	countToolRows,
-	isInstalled,
 } from "../adapters/cliToolsAdapter.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import {
@@ -43,8 +45,8 @@ const execFileAsync = promisify(execFile);
 
 let cachedRows: CliToolRow[] | null = null;
 let cacheInitialized = false;
-/** Bumped by every fetch, so a refresh discards the answers of the one before. */
-let fetchGeneration = 0;
+/** Every fetch takes a token, so a refresh discards the answers of the one before. */
+const fetchGate = createRequestGate();
 
 function clearCliToolsCache(): void {
 	cachedRows = null;
@@ -90,6 +92,8 @@ export function CliToolsScreen() {
 	const [rows, setRows] = useState<CliToolRow[]>(
 		() => cachedRows || initialRows(),
 	);
+	/** Why the last check could not run, shown under the header; null when it ran. */
+	const [probeError, setProbeError] = useState<string | null>(null);
 
 	const rowsRef = useRef(rows);
 	rowsRef.current = rows;
@@ -109,49 +113,59 @@ export function CliToolsScreen() {
 	 * Detection first — it decides which installer each tool is probed through
 	 * (§4.5 of the design: the closure's spec, else the detected installer, else
 	 * the catalogue) — then one shared probe, rows filling in as tools settle.
+	 *
+	 * Never rejects. It runs fire-and-forget on mount and on `r`, and a rejection
+	 * nobody catches ends the app; a failed probe is said under the header
+	 * instead, and `r` tries again.
 	 */
 	const fetchVersionInfo = useCallback(async () => {
-		const generation = ++fetchGeneration;
-		const projectPath = state.projectPath || process.cwd();
-		const [active, installs] = await Promise.all([
-			// Full resolution, not `resolveBins: false`: a catalogue tool may be
-			// declared by a PLUGIN's requires.bin, and parity needs the spec the
-			// CLI plans with. `resolveBins: false` would still keep the profile's
-			// own cliTools, but lose every plugin-declared bin and its pin.
-			loadActiveClosure(projectPath),
-			mapLimited(cliTools, PROBE_CONCURRENCY, (tool) =>
-				detectInstallMethods(tool, REAL_TOOL_PROBE_IO),
-			),
-		]);
-		if (generation !== fetchGeneration) return;
-
-		const closureBins = active?.closure.bins ?? null;
-		const planned = cliTools.map((tool, i) => ({
-			tool,
-			install: installs[i],
-			spec: specForCatalogTool(tool, closureBins, installs[i]),
-		}));
-		setAndCache(() =>
-			planned.map((p) => buildToolRow(p.tool, p.spec, undefined, p.install)),
-		);
+		const token = fetchGate.begin();
+		setProbeError(null);
+		try {
+			const projectPath = state.projectPath || process.cwd();
+			const [active, installs] = await Promise.all([
+				// Full resolution, not `resolveBins: false`: a catalogue tool may be
+				// declared by a PLUGIN's requires.bin, and parity needs the spec the
+				// CLI plans with. `resolveBins: false` would still keep the profile's
+				// own cliTools, but lose every plugin-declared bin and its pin.
+				loadActiveClosure(projectPath),
+				mapLimited(cliTools, PROBE_CONCURRENCY, (tool) =>
+					detectInstallMethods(tool, REAL_TOOL_PROBE_IO),
+				),
+			]);
+			if (!fetchGate.isCurrent(token)) return;
+
+			const closureBins = active?.closure.bins ?? null;
+			const planned = cliTools.map((tool, i) => ({
+				tool,
+				install: installs[i],
+				spec: specForCatalogTool(tool, closureBins, installs[i]),
+			}));
+			setAndCache(() =>
+				planned.map((p) => buildToolRow(p.tool, p.spec, undefined, p.install)),
+			);
 
-		await probeTools(
-			planned.map((p) => p.spec),
-			REAL_TOOL_PROBE_IO,
-			{
-				onResult: (facts, { index }) => {
-					if (generation !== fetchGeneration) return;
-					const p = planned[index];
-					if (!p) return;
-					const row = buildToolRow(p.tool, p.spec, facts, p.install);
-					setAndCache((prev) => {
-						const next = [...prev];
-						next[index] = row;
-						return next;
-					});
+			await probeTools(
+				planned.map((p) => p.spec),
+				REAL_TOOL_PROBE_IO,
+				{
+					onResult: (facts, { index }) => {
+						if (!fetchGate.isCurrent(token)) return;
+						const p = planned[index];
+						if (!p) return;
+						const row = buildToolRow(p.tool, p.spec, facts, p.install);
+						setAndCache((prev) => {
+							const next = [...prev];
+							next[index] = row;
+							return next;
+						});
+					},
 				},
-			},
-		);
+			);
+		} catch (error) {
+			if (!fetchGate.isCurrent(token)) return;
+			setProbeError(error instanceof Error ? error.message : String(error));
+		}
 	}, [setAndCache, state.projectPath]);
 
 	useEffect(() => {
@@ -162,27 +176,24 @@ export function CliToolsScreen() {
 		}
 	}, [fetchVersionInfo, rows]);
 
-	useKeyboard((event) => {
-		if (state.isSearching || state.modal) return;
-
-		if (event.name === "up" || event.name === "k") {
-			const newIndex = Math.max(0, cliToolsState.selectedIndex - 1);
-			dispatch({ type: "CLITOOLS_SELECT", index: newIndex });
-		} else if (event.name === "down" || event.name === "j") {
-			const newIndex = Math.min(
-				rows.length - 1,
-				cliToolsState.selectedIndex + 1,
-			);
-			dispatch({ type: "CLITOOLS_SELECT", index: newIndex });
-		} else if (event.name === "r") {
-			handleRefresh();
-		} else if (event.name === "a") {
-			handleUpdateAll();
-		} else if (event.name === "c") {
-			handleResolveConflict();
-		} else if (event.name === "enter" || event.name === "return") {
-			handleInstall();
-		}
+	useScreenKeys("cli-tools", {
+		install: () => {
+			void handleInstall();
+		},
+		"update-all": () => {
+			void handleUpdateAll();
+		},
+		conflict: () => {
+			void handleResolveConflict();
+		},
+		refresh: () => handleRefresh(),
+		move: (key) => {
+			const index = cliToolsState.selectedIndex + moveDirection(key);
+			dispatch({
+				type: "CLITOOLS_SELECT",
+				index: Math.max(0, Math.min(rows.length - 1, index)),
+			});
+		},
 	});
 
 	const handleRefresh = () => {
@@ -215,21 +226,11 @@ export function CliToolsScreen() {
 
 	const handleInstall = async () => {
 		const row = rows[cliToolsState.selectedIndex];
-		if (!row || row.checking) return;
-
-		const { tool, status, updateCommand, installCommand } = row;
-		const installed = isInstalled(status);
-		// Enter on an `unknown` row still offers the detected-method command:
-		// an explicit user action, not a plan. The detail panel shows why the
-		// row is unverified beside it.
-		const action = !installed
-			? "Installing"
-			: status?.state === "upgrade" || status?.state === "unknown"
-				? "Updating"
-				: "Reinstalling";
-		// Both sides come from the row, which built them from the SAME rule its
-		// state came from — a declared tool's pin included.
-		const command = installed && updateCommand ? updateCommand : installCommand;
+		const enter = row ? cliToolEnterAction(row) : null;
+		if (!row || !enter) return;
+
+		const { tool } = row;
+		const { command, progress: action } = enter;
 
 		modal.loading(`${action} ${tool.displayName}...`);
 		const result = await runCommand(command);
@@ -332,24 +333,32 @@ export function CliToolsScreen() {
 			)}
 			{counts.unverified > 0 && (
 				<>
-					<span fg={theme.colors.muted}> │ Unverified: </span>
+					<span fg={theme.colors.muted}> │ Not checked: </span>
 					<span fg={theme.colors.warning}>{counts.unverified}</span>
 				</>
 			)}
 		</text>
 	);
 
+	// The footer names what Enter does on THIS row, from the same function the
+	// detail pane and the handler read; while the row is checked it does nothing.
+	const enter = selectedRow ? cliToolEnterAction(selectedRow) : null;
+
 	return (
 		<ScreenLayout
 			title="magus CLI Tools"
 			currentScreen="cli-tools"
+			footer={
+				enter ? { labels: { install: enter.label } } : { hide: ["install"] }
+			}
 			statusLine={statusContent}
-			footerHints={[
-				{ keys: ["Enter"], label: "install" },
-				{ keys: ["a"], label: "update all" },
-				{ keys: ["c"], label: "fix conflict" },
-				{ keys: ["r"], label: "refresh" },
-			]}
+			notice={
+				probeError ? (
+					<text fg={theme.colors.danger}>
+						Could not check the tools: {probeError} — r to retry
+					</text>
+				) : undefined
+			}
 			listPanel={
 				<ScrollableList
 					items={rows}
@@ -359,7 +368,9 @@ export function CliToolsScreen() {
 					getKey={(row) => row.tool.name}
 				/>
 			}
-			detailPanel={renderCliToolDetail(selectedRow)}
+			detailPanel={(detailWidth) =>
+				renderCliToolDetail(selectedRow, detailWidth)
+			}
 		/>
 	);
 }

package/src/ui/screens/EnvVarsScreen.tsx

@@ -11,7 +11,9 @@ import {
 } from "../adapters/settingsAdapter.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { ScreenLayout } from "../components/layout/index.js";
-import { useKeyboard } from "../hooks/useKeyboard.js";
+import { ErrorNotice } from "../components/primitives/index.js";
+import { useScreenKeys } from "../input/KeyRouter.js";
+import { moveDirection } from "../keymap.js";
 import {
 	renderSettingDetail,
 	renderSettingRow,
@@ -138,25 +140,20 @@ export function SettingsScreen() {
 		}
 	};
 
-	useKeyboard((event) => {
-		if (state.isSearching || state.modal) return;
-
-		if (event.name === "up" || event.name === "k") {
-			const newIndex = Math.max(0, settings.selectedIndex - 1);
-			dispatch({ type: "SETTINGS_SELECT", index: newIndex });
-		} else if (event.name === "down" || event.name === "j") {
-			const newIndex = Math.min(
-				Math.max(0, listItems.length - 1),
-				settings.selectedIndex + 1,
-			);
-			dispatch({ type: "SETTINGS_SELECT", index: newIndex });
-		} else if (event.name === "u") {
-			handleScopeChange("user");
-		} else if (event.name === "p") {
-			handleScopeChange("project");
-		} else if (event.name === "enter") {
-			handleScopeChange("project");
-		}
+	useScreenKeys("settings", {
+		user: () => {
+			void handleScopeChange("user");
+		},
+		project: () => {
+			void handleScopeChange("project");
+		},
+		move: (key) => {
+			const index = settings.selectedIndex + moveDirection(key);
+			dispatch({
+				type: "SETTINGS_SELECT",
+				index: Math.max(0, Math.min(listItems.length - 1, index)),
+			});
+		},
 	});
 
 	const selectedItem = listItems[settings.selectedIndex];
@@ -165,9 +162,8 @@ export function SettingsScreen() {
 		if (settings.values.status === "loading") {
 			return <text fg={theme.colors.muted}>Loading settings...</text>;
 		}
-		if (settings.values.status === "error") {
-			return <text fg={theme.colors.danger}>Failed to load settings</text>;
-		}
+		// The error itself is in the list panel, where it replaces the rows.
+		if (settings.values.status === "error") return null;
 		return renderSettingDetail(selectedItem);
 	};
 
@@ -178,10 +174,16 @@ export function SettingsScreen() {
 				).length
 			: 0;
 
+	// A settings file that failed to read is not "0 configured" — that count
+	// would invite the user to configure, over a file that still holds it all.
 	const statusContent = (
 		<text fg={theme.colors.text}>
 			<span fg={theme.colors.muted}>Settings: </span>
-			<span fg={theme.colors.info}>{totalSet} configured</span>
+			{settings.values.status === "error" ? (
+				<span fg={theme.colors.danger}>unreadable</span>
+			) : (
+				<span fg={theme.colors.info}>{totalSet} configured</span>
+			)}
 			<span fg={theme.colors.muted}> │ u:user p:project</span>
 		</text>
 	);
@@ -191,26 +193,26 @@ export function SettingsScreen() {
 			title="magus Settings"
 			currentScreen="settings"
 			statusLine={statusContent}
-			footerHints={[
-				{ keys: ["↑", "↓"], label: "nav" },
-				{ keys: ["u"], label: "user scope" },
-				{ keys: ["p"], label: "project scope" },
-				{ keys: ["Enter"], label: "project" },
-			]}
 			listPanel={
-				settings.values.status !== "success" ? (
-					<text fg={theme.colors.muted}>
-						{settings.values.status === "loading"
-							? "Loading..."
-							: "Error loading settings"}
-					</text>
-				) : (
-					<ScrollableList
-						items={listItems}
-						selectedIndex={settings.selectedIndex}
-						renderItem={renderSettingRow}
-						maxHeight={dimensions.listPanelHeight}
+				settings.values.status === "error" ? (
+					<ErrorNotice
+						title="Could not load settings."
+						detail={settings.values.error.message}
 					/>
+				) : settings.values.status !== "success" ? (
+					<text fg={theme.colors.muted}>Loading...</text>
+				) : (
+					// A function of the panel width: rows fit label and value to it.
+					(width: number) => (
+						<ScrollableList
+							items={listItems}
+							selectedIndex={settings.selectedIndex}
+							renderItem={(item, _index, isSelected) =>
+								renderSettingRow(item, isSelected, width)
+							}
+							maxHeight={dimensions.listPanelHeight}
+						/>
+					)
 				)
 			}
 			detailPanel={renderDetail()}

package/src/ui/screens/GitignoreScreen.tsx

@@ -1,5 +1,4 @@
 import { spawn } from "node:child_process";
-import { appendFileSync } from "node:fs";
 import { useRenderer } from "@opentui/react";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -14,7 +13,8 @@ import {
 } from "../../services/gitignore-service.js";
 import type { ResolvedRule, Tier, Violation } from "../../types/gitignore.js";
 import { ScreenLayout } from "../components/layout/index.js";
-import { useKeyboardHandler } from "../hooks/useKeyboardHandler.js";
+import { useScreenKeys } from "../input/KeyRouter.js";
+import { moveDirection } from "../keymap.js";
 import {
 	type RuleRow,
 	renderRuleRow,
@@ -243,12 +243,29 @@ export function GitignoreScreen() {
 		await reload();
 	}, [cwd, modal, reload]);
 
+	/**
+	 * Open the project manifest in $EDITOR, creating it first if needed.
+	 *
+	 * Every await sits inside the try: this runs fire-and-forget from a key, and a
+	 * rejection nobody catches ends the app. A manifest that cannot be read or
+	 * created is said in a dialog on this screen instead.
+	 */
 	const handleEditManifest = useCallback(async () => {
-		const current = data ?? (await loadGitignoreState(cwd));
-		const projectManifest = await ensureProjectManifestForEdit(
-			cwd,
-			current.resolved,
-		);
+		let projectManifest: string;
+		try {
+			const current = data ?? (await loadGitignoreState(cwd));
+			projectManifest = await ensureProjectManifestForEdit(
+				cwd,
+				current.resolved,
+			);
+		} catch (err) {
+			await modal.message(
+				"Cannot open the manifest",
+				err instanceof Error ? err.message : String(err),
+				"error",
+			);
+			return;
+		}
 		const editor = process.env.EDITOR ?? process.env.VISUAL ?? "vi";
 		renderer.suspend();
 		try {
@@ -262,48 +279,30 @@ export function GitignoreScreen() {
 		}
 		await reload();
 		renderer.requestRender();
-	}, [cwd, data, reload, renderer]);
-
-	useKeyboardHandler((input, key) => {
-		if (process.env.MAGUS_DEBUG_KEYS === "1") {
-			try {
-				appendFileSync(
-					"/tmp/magus-keys.log",
-					`${new Date().toISOString()} screen=gitignore input=${JSON.stringify(input)} name=${JSON.stringify(key.name)} shift=${key.shift} ctrl=${key.ctrl} meta=${key.meta}\n`,
-				);
-			} catch {
-				// best-effort logging — never break the UI
-			}
-		}
-		if (state.modal) return;
-		if (input === "j" || key.downArrow) {
-			setSelectedIdx((i) => Math.min(i + 1, Math.max(0, rows.length - 1)));
-			return;
-		}
-		if (input === "k" || key.upArrow) {
-			setSelectedIdx((i) => Math.max(i - 1, 0));
-			return;
-		}
-		// F = fix everything out of sync; f = fix just the selected row.
-		if (input === "F" || (input === "f" && key.shift)) {
-			void handleFixAll();
-			return;
-		}
-		if (input === "f") {
+	}, [cwd, data, modal, reload, renderer]);
+
+	useScreenKeys("gitignore", {
+		fix: () => {
 			void handleFixOne();
-			return;
-		}
-		if (input === "t") {
-			void handleApplyTemplate();
-			return;
-		}
-		if (input === "e") {
+		},
+		"fix-all": () => {
+			void handleFixAll();
+		},
+		edit: () => {
 			void handleEditManifest();
-			return;
-		}
-		if (input === "r") {
+		},
+		template: () => {
+			void handleApplyTemplate();
+		},
+		reload: () => {
 			void reload();
-		}
+		},
+		move: (key) => {
+			const delta = moveDirection(key);
+			setSelectedIdx((i) =>
+				Math.max(0, Math.min(Math.max(0, rows.length - 1), i + delta)),
+			);
+		},
 	});
 
 	// ── Rendering ─────────────────────────────────────────────────────────
@@ -368,14 +367,6 @@ export function GitignoreScreen() {
 			title="Managed Git State"
 			subtitle={subtitle}
 			currentScreen="gitignore"
-			footerHints={[
-				{ keys: ["↑", "↓"], label: "move" },
-				{ keys: ["f"], label: "fix selected" },
-				{ keys: ["F"], label: "fix all" },
-				{ keys: ["t"], label: "template" },
-				{ keys: ["e"], label: "edit" },
-				{ keys: ["r"], label: "reload" },
-			]}
 			listPanel={listPanel}
 			detailPanel={detailPanel}
 		/>
@@ -496,7 +487,11 @@ function renderDetail(
 				>
 					<text fg={theme.colors.text}>{v.path}</text>
 					<text fg={theme.colors.muted}>{describeKind(v.kind)}</text>
-					<text fg={v.severity === "safe" ? "cyan" : "red"}>
+					{/* A safe fix is a fact about the key; one that rewrites what git
+					    tracks is destructive, and says so in `danger`. */}
+					<text
+						fg={v.severity === "safe" ? theme.colors.info : theme.colors.danger}
+					>
 						{actionHint(v.kind)}
 					</text>
 				</box>