magus-cli 7.3.0 → 7.4.0

package/src/ui/screens/SkillsScreen.tsx

@@ -9,7 +9,8 @@ import React, {
 	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 } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 
@@ -23,6 +24,7 @@ import {
 	fetchSkillFrontmatter,
 	fetchSkillSetSkills,
 	installSkill,
+	readLocalSkillFrontmatter,
 	uninstallSkill,
 } from "../../services/skills-manager.js";
 import {
@@ -30,11 +32,15 @@ import {
 	searchSkills,
 } from "../../services/skillsmp-client.js";
 import type {
+	SkillFrontmatter,
 	SkillInfo,
 	SkillSetInfo,
 	SkillSource,
 } from "../../types/index.js";
-import { buildSkillBrowserItems } from "../adapters/skillsAdapter.js";
+import {
+	buildSkillBrowserItems,
+	installedGroup,
+} from "../adapters/skillsAdapter.js";
 import type { SkillBrowserItem } from "../adapters/skillsAdapter.js";
 import { EmptyFilterState } from "../components/EmptyFilterState.js";
 import { ScrollableList } from "../components/ScrollableList.js";
@@ -54,7 +60,7 @@ export function SkillsScreen() {
 	const [expandedSets, setExpandedSets] = useState<Set<string>>(new Set());
 
 	const isSearchActive =
-		state.isSearching && state.currentRoute.screen === "skills" && !state.modal;
+		state.isSearching && state.currentRoute.screen === "skills";
 
 	// ── Data fetching ─────────────────────────────────────────────────────────
 
@@ -175,16 +181,46 @@ export function SkillsScreen() {
 		};
 	}, [skillsState.searchQuery]);
 
+	// Status bar message (auto-clears)
+	const [statusMsg, setStatusMsg] = useState<{
+		text: string;
+		tone: "success" | "error";
+	} | null>(null);
+	const statusTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const showStatus = useCallback(
+		(text: string, tone: "success" | "error" = "success") => {
+			setStatusMsg({ text, tone });
+			if (statusTimerRef.current) clearTimeout(statusTimerRef.current);
+			statusTimerRef.current = setTimeout(() => setStatusMsg(null), 3000);
+		},
+		[],
+	);
+
 	// ── Disk scan for installed skills ────────────────────────────────────────
 
+	/**
+	 * Skills on disk, per scope, each with the frontmatter of its own SKILL.md —
+	 * read here, once, so a local skill's detail pane renders at once from local
+	 * data. `scanned` is false until the first scan finishes, so the header can
+	 * say "reading" rather than a false "0 installed".
+	 */
 	const [installedFromDisk, setInstalledFromDisk] = useState<{
-		user: Set<string>;
-		project: Set<string>;
-	}>({ user: new Set(), project: new Set() });
-
+		user: Map<string, SkillFrontmatter | null>;
+		project: Map<string, SkillFrontmatter | null>;
+		scanned: boolean;
+	}>({ user: new Map(), project: new Map(), scanned: false });
+
+	/**
+	 * Which skills are on disk, per scope. Never rejects: it runs fire-and-forget
+	 * from effects and after every install, and a rejection there is an
+	 * unhandled one, which ends the app. A directory that exists but cannot be
+	 * read is said on the status line — silently treating it as "no skills
+	 * installed" would misreport the installed rows.
+	 */
 	const scanDisk = useCallback(async () => {
-		const user = new Set<string>();
-		const project = new Set<string>();
+		const user = new Map<string, SkillFrontmatter | null>();
+		const project = new Map<string, SkillFrontmatter | null>();
+		const unreadable: string[] = [];
 		const userDir = path.join(os.homedir(), ".claude", "skills");
 		const projDir = path.join(
 			state.projectPath || process.cwd(),
@@ -199,19 +235,27 @@ export function SkillsScreen() {
 				if (await fs.pathExists(dir)) {
 					const entries = await fs.readdir(dir);
 					for (const e of entries) {
-						if (await fs.pathExists(path.join(dir, e, "SKILL.md"))) set.add(e);
+						const skillMd = path.join(dir, e, "SKILL.md");
+						if (await fs.pathExists(skillMd)) {
+							set.set(e, await readLocalSkillFrontmatter(skillMd, e));
+						}
 					}
 				}
-			} catch {
-				/* ignore */
+			} catch (error) {
+				unreadable.push(
+					`${dir} (${error instanceof Error ? error.message : String(error)})`,
+				);
 			}
 		}
-		setInstalledFromDisk({ user, project });
-	}, [state.projectPath]);
+		setInstalledFromDisk({ user, project, scanned: true });
+		if (unreadable.length > 0) {
+			showStatus(`Could not read ${unreadable.join("; ")}`, "error");
+		}
+	}, [state.projectPath, showStatus]);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: dataRefreshVersion is the external refresh trigger; bumping it must re-scan the disk even though the body never reads it
 	useEffect(() => {
-		scanDisk();
+		void scanDisk();
 	}, [scanDisk, state.dataRefreshVersion]);
 
 	// ── Skill Sets state ──────────────────────────────────────────────────────
@@ -298,21 +342,6 @@ export function SkillsScreen() {
 		[expandedSets, skillSets, state.projectPath],
 	);
 
-	// Status bar message (auto-clears)
-	const [statusMsg, setStatusMsg] = useState<{
-		text: string;
-		tone: "success" | "error";
-	} | null>(null);
-	const statusTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-	const showStatus = useCallback(
-		(text: string, tone: "success" | "error" = "success") => {
-			setStatusMsg({ text, tone });
-			if (statusTimerRef.current) clearTimeout(statusTimerRef.current);
-			statusTimerRef.current = setTimeout(() => setStatusMsg(null), 3000);
-		},
-		[],
-	);
-
 	const handleInstallAllFromSet = useCallback(
 		async (setId: string, scope: "user" | "project") => {
 			const set = skillSets.find((s) => s.id === setId);
@@ -418,16 +447,19 @@ export function SkillsScreen() {
 			["user", installedFromDisk.user],
 			["project", installedFromDisk.project],
 		] as const) {
-			for (const name of names) {
+			for (const [name, frontmatter] of names) {
 				if (all.some((s) => s.name === name)) continue;
 				all.push({
 					id: `installed:${scope}/${name}`,
 					name,
-					description: "",
+					description: frontmatter?.description ?? "",
 					source: { label: "local", repo: "local", skillsPath: "" },
 					repoPath: "",
 					gitBlobSha: "",
-					frontmatter: null,
+					// Read from disk by the scan. A SKILL.md that could not be read
+					// still gets an empty record: a local skill is never fetched, so
+					// null would read as "not loaded yet" for good.
+					frontmatter: frontmatter ?? { name, description: "" },
 					installed: true,
 					installedScope: scope,
 					hasUpdate: false,
@@ -499,8 +531,22 @@ export function SkillsScreen() {
 			)
 		: false;
 
+	// Remote descriptions whose fetch failed, by skill id — so the pane can say
+	// so instead of loading for ever. A refresh (r) clears it and tries again.
+	const [failedDescriptions, setFailedDescriptions] = useState<Set<string>>(
+		new Set(),
+	);
+
 	useEffect(() => {
-		if (!selectedSkill || selectedSkill.frontmatter) return;
+		// A local skill's frontmatter came off disk with the scan; there is no
+		// remote to ask. A failed fetch is not retried until the user refreshes.
+		if (
+			!selectedSkill ||
+			selectedSkill.frontmatter ||
+			selectedSkill.source.repo === "local" ||
+			failedDescriptions.has(selectedSkill.id)
+		)
+			return;
 		fetchSkillFrontmatter(selectedSkill)
 			.then((fm) => {
 				if (isSkillSetChild) {
@@ -521,8 +567,10 @@ export function SkillsScreen() {
 					});
 				}
 			})
-			.catch(() => {});
-	}, [selectedSkill, isSkillSetChild, dispatch]);
+			.catch(() => {
+				setFailedDescriptions((prev) => new Set(prev).add(selectedSkill.id));
+			});
+	}, [selectedSkill, isSkillSetChild, dispatch, failedDescriptions]);
 
 	// ── Action handlers ───────────────────────────────────────────────────────
 
@@ -569,187 +617,126 @@ export function SkillsScreen() {
 		}
 	}, [selectedSkill, state.projectPath, scanDisk, showStatus]);
 
-	// ── Keyboard handling ─────────────────────────────────────────────────────
-
-	useKeyboard((event) => {
-		if (state.modal) return;
-
-		const hasQuery = skillsState.searchQuery.length > 0;
-
-		if (event.name === "escape") {
-			if (hasQuery || isSearchActive) {
-				dispatch({ type: "SKILLS_SET_SEARCH", query: "" });
-				dispatch({ type: "SET_SEARCHING", isSearching: false });
-				dispatch({ type: "SKILLS_SELECT", index: 0 });
-			}
-			return;
-		}
+	// ── Keys ──────────────────────────────────────────────────────────────────
+
+	const setQuery = (query: string) => {
+		dispatch({ type: "SKILLS_SET_SEARCH", query });
+		dispatch({ type: "SKILLS_SELECT", index: 0 });
+	};
+
+	// The search box, while it has focus: digits, j/k, q and ? are typed here.
+	useSearchInput({
+		focused: isSearchActive,
+		query: skillsState.searchQuery,
+		append: (char) => setQuery(skillsState.searchQuery + char),
+		erase: () => setQuery(skillsState.searchQuery.slice(0, -1)),
+		clear: () => setQuery(""),
+		blur: () => dispatch({ type: "SET_SEARCHING", isSearching: false }),
+	});
 
-		if (event.name === "backspace" || event.name === "delete") {
-			if (hasQuery) {
-				const newQuery = skillsState.searchQuery.slice(0, -1);
-				dispatch({ type: "SKILLS_SET_SEARCH", query: newQuery });
-				dispatch({ type: "SKILLS_SELECT", index: 0 });
-				if (!newQuery) dispatch({ type: "SET_SEARCHING", isSearching: false });
+	/** Open `url` in the browser. Best effort: a failure changes nothing. */
+	const openUrl = (url: string) => {
+		import("node:child_process").then(({ execSync: exec }) => {
+			try {
+				exec(`open "${url}"`);
+			} catch {
+				/* ignore */
 			}
-			return;
-		}
-
-		if (event.name === "up" || event.name === "k") {
-			if (isSearchActive)
-				dispatch({ type: "SET_SEARCHING", isSearching: false });
-			let newIndex = skillsState.selectedIndex - 1;
-			// Skip category headers
-			while (newIndex >= 0 && allItems[newIndex]?.kind === "category")
-				newIndex--;
-			if (newIndex >= 0) dispatch({ type: "SKILLS_SELECT", index: newIndex });
-			return;
-		}
-		if (event.name === "down" || event.name === "j") {
-			if (isSearchActive)
-				dispatch({ type: "SET_SEARCHING", isSearching: false });
-			let newIndex = skillsState.selectedIndex + 1;
-			// Skip category headers
-			while (
-				newIndex < allItems.length &&
-				allItems[newIndex]?.kind === "category"
-			)
-				newIndex++;
-			if (newIndex < allItems.length)
-				dispatch({ type: "SKILLS_SELECT", index: newIndex });
-			return;
-		}
+		});
+	};
 
-		if (event.name === "return" || event.name === "enter") {
-			if (isSearchActive) {
-				dispatch({ type: "SET_SEARCHING", isSearching: false });
-				return;
-			}
+	useScreenKeys("skills", {
+		scope: (key) => {
+			const scope = key.name === "u" ? "user" : "project";
 			if (selectedSet) {
-				handleToggleSet(selectedSet.id);
-				return;
-			}
-			if (selectedSkill && !selectedSkill.installed) {
-				handleInstall("project");
-			}
-			return;
-		}
-
-		// Action keys only when NOT actively typing in search
-		if (!isSearchActive) {
-			if (event.name === "u") {
-				if (selectedSet) {
-					handleInstallAllFromSet(selectedSet.id, "user");
-					return;
-				}
-				if (selectedSkill) {
-					if (
-						selectedSkill.installed &&
-						selectedSkill.installedScope === "user"
-					)
-						handleUninstall();
-					else handleInstall("user");
-					return;
-				}
-			} else if (event.name === "p") {
-				if (selectedSet) {
-					handleInstallAllFromSet(selectedSet.id, "project");
-					return;
-				}
-				if (selectedSkill) {
-					if (
-						selectedSkill.installed &&
-						selectedSkill.installedScope === "project"
-					)
-						handleUninstall();
-					else handleInstall("project");
-					return;
+				void handleInstallAllFromSet(selectedSet.id, scope);
+			} else if (selectedSkill) {
+				if (selectedSkill.installed && selectedSkill.installedScope === scope) {
+					void handleUninstall();
+				} else {
+					void handleInstall(scope);
 				}
 			}
-		}
-
-		if (isSearchActive) {
-			if (event.name === "k" || event.name === "j") {
-				const delta = event.name === "k" ? -1 : 1;
-				const newIndex = Math.max(
-					0,
-					Math.min(allItems.length - 1, skillsState.selectedIndex + delta),
-				);
-				dispatch({ type: "SKILLS_SELECT", index: newIndex });
-				return;
-			}
-			if (
-				event.name &&
-				event.name.length === 1 &&
-				!event.ctrl &&
-				!event.meta &&
-				!/[0-9]/.test(event.name)
-			) {
-				dispatch({
-					type: "SKILLS_SET_SEARCH",
-					query: skillsState.searchQuery + event.name,
-				});
-				dispatch({ type: "SKILLS_SELECT", index: 0 });
+		},
+		open: () => {
+			if (selectedSet) void handleToggleSet(selectedSet.id);
+			else if (selectedSkill && !selectedSkill.installed) {
+				void handleInstall("project");
 			}
-			return;
-		}
-
-		if (event.name === "r") {
-			fetchData();
-		} else if (event.name === "o" && (selectedSkill || selectedSet)) {
+		},
+		browse: () => {
 			if (selectedSet) {
-				const url = `https://github.com/${selectedSet.repo}`;
-				import("node:child_process").then(({ execSync: exec }) => {
-					try {
-						exec(`open "${url}"`);
-					} catch {
-						/* ignore */
-					}
-				});
+				openUrl(`https://github.com/${selectedSet.repo}`);
 			} else if (selectedSkill) {
 				const repo = selectedSkill.source.repo;
 				const repoPath = selectedSkill.repoPath?.replace("/SKILL.md", "") || "";
 				if (repo && repo !== "local") {
-					const url = `https://github.com/${repo}/tree/main/${repoPath}`;
-					import("node:child_process").then(({ execSync: exec }) => {
-						try {
-							exec(`open "${url}"`);
-						} catch {
-							/* ignore */
-						}
-					});
+					openUrl(`https://github.com/${repo}/tree/main/${repoPath}`);
 				}
 			}
-		} else if (event.name === "/") {
-			dispatch({ type: "SET_SEARCHING", isSearching: true });
-		}
+		},
+		refresh: () => {
+			setFailedDescriptions(new Set());
+			void fetchData();
+		},
+		search: () => dispatch({ type: "SET_SEARCHING", isSearching: true }),
+		// Only while a committed filter is set; otherwise Esc is the global back.
+		"clear-filter": () => {
+			if (!skillsState.searchQuery) return false;
+			setQuery("");
+			return true;
+		},
+		// Category headers are labels, not rows: step over them.
+		move: (key) => {
+			const delta = moveDirection(key);
+			let index = skillsState.selectedIndex + delta;
+			while (index >= 0 && index < allItems.length) {
+				if (allItems[index]?.kind !== "category") {
+					dispatch({ type: "SKILLS_SELECT", index });
+					return;
+				}
+				index += delta;
+			}
+		},
 	});
 
 	// ── Status line ───────────────────────────────────────────────────────────
 
-	const skills =
-		skillsState.skills.status === "success" ? skillsState.skills.data : [];
-	const installedCount = skills.filter((s) => s.installed).length;
+	// The same selector the Installed group is built from — see `installedGroup`.
+	const installedCount = installedGroup(
+		installedSkills,
+		skillsState.searchQuery,
+	).length;
 	const query = skillsState.searchQuery.trim();
 
 	const statusContent = statusMsg ? (
 		<text fg={theme.colors.text}>
-			<span fg={statusMsg.tone === "success" ? "green" : "red"}>
+			<span
+				fg={
+					statusMsg.tone === "success"
+						? theme.colors.success
+						: theme.colors.danger
+				}
+			>
 				{statusMsg.text}
 			</span>
 		</text>
 	) : (
 		<text fg={theme.colors.text}>
 			<span fg={theme.colors.muted}>Skills: </span>
-			<span fg={theme.colors.info}>{installedCount} installed</span>
+			{installedFromDisk.scanned ? (
+				<span fg={theme.colors.info}>{installedCount} installed</span>
+			) : (
+				<span fg={theme.colors.muted}>reading…</span>
+			)}
 			{query.length >= 2 && isSearchLoading && (
-				<span fg={theme.colors.warning}> │ searching...</span>
+				<span fg={theme.colors.muted}> │ searching…</span>
 			)}
 			{query.length >= 2 &&
 				!isSearchLoading &&
 				!searchError &&
 				searchResults.length > 0 && (
-					<span fg={theme.colors.success}> │ {searchResults.length} found</span>
+					<span fg={theme.colors.info}> │ {searchResults.length} found</span>
 				)}
 			{query.length >= 2 && !isSearchLoading && searchError && (
 				<span fg={theme.colors.danger}> │ search unavailable</span>
@@ -774,38 +761,27 @@ export function SkillsScreen() {
 						}
 					: undefined
 			}
-			footerHints={
-				isSearchActive
-					? [
-							{ 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={
+			footer={{ hide: skillsState.searchQuery ? [] : ["clear-filter"] }}
+			listPanel={(width: number) => (
 				<box flexDirection="column">
 					<ScrollableList
 						items={allItems}
 						selectedIndex={skillsState.selectedIndex}
-						renderItem={renderSkillRow}
+						renderItem={(item, _index, isSelected) =>
+							renderSkillRow(item, isSelected, width)
+						}
 						maxHeight={dimensions.listPanelHeight}
 						getKey={(item, index) => `${index}:${item.id}`}
 					/>
 					{!query && skillsState.skills.status === "loading" && (
 						<box marginTop={2} paddingLeft={2}>
-							<text fg={theme.colors.warning}>Loading popular skills...</text>
+							<text fg={theme.colors.muted}>Loading popular skills…</text>
 						</box>
 					)}
 					{query.length >= 2 && isSearchLoading && (
 						<box marginTop={2} paddingLeft={2}>
-							<text fg={theme.colors.warning}>
-								Searching for "{skillsState.searchQuery}"...
+							<text fg={theme.colors.muted}>
+								Searching for "{skillsState.searchQuery}"…
 							</text>
 						</box>
 					)}
@@ -844,8 +820,12 @@ export function SkillsScreen() {
 							/>
 						)}
 				</box>
-			}
-			detailPanel={renderSkillDetail(selectedItem)}
+			)}
+			detailPanel={renderSkillDetail(selectedItem, {
+				descriptionFailed:
+					selectedSkill !== undefined &&
+					failedDescriptions.has(selectedSkill.id),
+			})}
 		/>
 	);
 }