magus-cli 7.7.0 → 7.8.0

package/src/ui/screens/CliToolsScreen.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useCallback, useState, useRef } from "react";
 import { ScreenLayout } from "../components/layout/index.js";
 import { useScreenKeys } from "../input/KeyRouter.js";
 import { moveDirection } from "../keymap.js";
-import { useApp, useModal, useNotify } from "../state/AppContext.js";
+import { useApp, useFailurePopup, useModal } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 
 import { cliTools } from "../../data/cli-tools.js";
@@ -23,12 +23,18 @@ import {
 	specForCatalogTool,
 } 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 CliToolCommandFailure,
 	type CliToolRow,
 	buildToolRow,
+	cliToolConflictPartialReport,
+	cliToolConflictStuckReport,
 	cliToolEnterAction,
+	cliToolFailureReport,
+	cliToolNotDone,
+	cliToolsNotUpdatedReport,
+	commandFailureReason,
 	countToolRows,
 } from "../adapters/cliToolsAdapter.js";
 import { ScrollableList } from "../components/ScrollableList.js";
@@ -39,6 +45,8 @@ import {
 import { theme } from "../theme.js";
 
 const execFileAsync = promisify(execFile);
+/** How long one installer command may run before it is stopped. */
+const COMMAND_TIMEOUT_MS = 60_000;
 
 // ─── Session cache ─────────────────────────────────────────────────────────────
 //
@@ -91,7 +99,7 @@ export function CliToolsScreen() {
 	const { state, dispatch } = useApp();
 	const { cliTools: cliToolsState } = state;
 	const modal = useModal();
-	const notify = useNotify();
+	const showFailures = useFailurePopup();
 	const dimensions = useDimensions();
 
 	const [rows, setRows] = useState<CliToolRow[]>(
@@ -209,23 +217,22 @@ export function CliToolsScreen() {
 	};
 
 	/**
-	 * Run one installer command and report success.
+	 * Run one installer command: null when it succeeded, else why it failed.
 	 *
 	 * `execFile`, so there is no shell to re-parse a package name — the same
 	 * reason `utils/run.ts` exists. It does NOT call that shared `runCommand`:
 	 * that one inherits stdio, and a TUI must never hand the terminal to a
-	 * child. Output is captured and discarded here; the modal is the progress
-	 * indicator.
+	 * child. Output is captured; the modal is the progress indicator, and on a
+	 * failure the installer's own words become the popup's reason.
 	 */
-	const runCommand = async (
-		command: Command,
-	): Promise<{ ok: boolean; error?: string }> => {
+	const runCommand = async (command: Command): Promise<string | null> => {
 		try {
-			await execFileAsync(command.cmd, [...command.args], { timeout: 60000 });
-			return { ok: true };
+			await execFileAsync(command.cmd, [...command.args], {
+				timeout: COMMAND_TIMEOUT_MS,
+			});
+			return null;
 		} catch (err) {
-			const msg = err instanceof Error ? err.message : String(err);
-			return { ok: false, error: msg };
+			return commandFailureReason(command, err, COMMAND_TIMEOUT_MS);
 		}
 	};
 
@@ -238,18 +245,19 @@ export function CliToolsScreen() {
 		const { command, progress: action } = enter;
 
 		modal.loading(`${action} ${tool.displayName}...`);
-		const result = await runCommand(command);
+		const reason = await runCommand(command);
 		modal.hideModal();
 
-		if (result.ok) {
+		if (reason === null) {
 			handleRefresh();
-		} else {
-			await modal.message(
-				"Error",
-				`Failed to ${action.toLowerCase()} ${tool.displayName}.\n\nTry running manually:\n${formatCommand(command)}`,
-				"error",
-			);
+			return;
 		}
+		await showFailures(
+			cliToolFailureReport(
+				`${tool.displayName} was not ${cliToolNotDone(enter.kind)}`,
+				[{ tool: tool.displayName, command, reason }],
+			),
+		);
 	};
 
 	/**
@@ -285,6 +293,11 @@ export function CliToolsScreen() {
 			methods
 				.map((m) => `The ${m} install stays: ${blockers.get(m)}.`)
 				.join("\n");
+		const blockerRows = (methods: readonly InstallMethod[]) =>
+			methods.map((method) => ({
+				method,
+				reason: blockers.get(method) ?? "magus cannot remove it",
+			}));
 
 		// One choice per install that can be KEPT — but only where keeping it
 		// removes something. "Keep npm" beside an unremovable native copy would
@@ -298,10 +311,8 @@ export function CliToolsScreen() {
 			}));
 
 		if (options.length === 0) {
-			await modal.message(
-				`${tool.displayName} conflict`,
-				`Installed via ${allMethods.join(" + ")}, and magus can remove none of them.\n\n${stuckList(allMethods)}\n\nRemove one by hand, then press r.`,
-				"error",
+			await showFailures(
+				cliToolConflictStuckReport(tool.displayName, blockerRows(allMethods)),
 			);
 			return;
 		}
@@ -319,42 +330,37 @@ export function CliToolsScreen() {
 		const leftBehind = stuck.filter((m) => m !== keep);
 		modal.loading(`Removing ${toRemove.join(", ")} install(s)...`);
 
-		const errors: string[] = [];
+		const failed: Array<{
+			method: InstallMethod;
+			command: Command;
+			reason: string;
+		}> = [];
+		const unremovable = blockerRows(leftBehind);
 		for (const method of toRemove) {
 			const cmd = cliToolUninstall(tool, method, install.brewFormula);
 			// Unreachable: `removable` was built from this same call. Reported
 			// rather than skipped, because a silent skip is the defect above.
 			if (!cmd) {
-				errors.push(`${method}: no uninstall command`);
+				unremovable.push({
+					method,
+					reason: "magus has no uninstall command for it",
+				});
 				continue;
 			}
-			const result = await runCommand(cmd);
-			if (!result.ok) errors.push(`${method}: ${formatCommand(cmd)}`);
+			const reason = await runCommand(cmd);
+			if (reason !== null) failed.push({ method, command: cmd, reason });
 		}
 
 		modal.hideModal();
 
-		const stays =
-			leftBehind.length > 0
-				? `${stuckList(leftBehind)}\nRemove it by hand if you want it gone.`
-				: "";
-
-		// A failed removal is an error, and stays a dialog with the commands to
-		// run. An install magus could never remove is only a warning: nothing
-		// failed, and the row still shows the conflict until it is dealt with.
-		if (errors.length > 0) {
-			await modal.message(
-				"Partly removed",
-				[
-					`These removals failed. Run them by hand:\n${errors.join("\n")}`,
-					stays,
-				]
-					.filter((part) => part !== "")
-					.join("\n\n"),
-				"error",
+		// A failed removal goes into the failure popup with the command to run,
+		// and so does an install left behind beside it. An install magus could
+		// never remove is not, on its own, a failure: nothing failed, and the row
+		// still shows the conflict until it is dealt with.
+		if (failed.length > 0 || unremovable.length > leftBehind.length) {
+			await showFailures(
+				cliToolConflictPartialReport(tool.displayName, failed, unremovable),
 			);
-		} else if (stays !== "") {
-			notify(stays.replace(/\n/g, " "), "warning");
 		}
 
 		handleRefresh();
@@ -365,19 +371,24 @@ export function CliToolsScreen() {
 		// swept up in a bulk action — that is exactly the "cannot tell, so run
 		// it anyway" the CLI no longer does either.
 		const updatable = rows.filter((r) => r.status?.state === "upgrade");
-		if (updatable.length === 0) {
-			notify("No tool is known to be behind");
-			return;
-		}
+		if (updatable.length === 0) return;
 
 		modal.loading(`Updating ${updatable.length} tool(s)...`);
 
+		// Every failure is kept: the reload shows the tool still behind, and
+		// only this says why.
+		const failed: CliToolCommandFailure[] = [];
 		for (const row of updatable) {
-			await runCommand(row.updateCommand ?? row.installCommand);
+			const command = row.updateCommand ?? row.installCommand;
+			const reason = await runCommand(command);
+			if (reason !== null) {
+				failed.push({ tool: row.tool.displayName, command, reason });
+			}
 		}
 
 		modal.hideModal();
 		handleRefresh();
+		await showFailures(cliToolsNotUpdatedReport(failed));
 	};
 
 	const selectedRow = rows[cliToolsState.selectedIndex];

package/src/ui/screens/EnvVarsScreen.tsx

@@ -9,6 +9,7 @@ import {
 	type SettingsBrowserItem,
 	buildSettingsBrowserItems,
 } from "../adapters/settingsAdapter.js";
+import { stepFailureReport } from "../adapters/startupReports.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import { ErrorNotice } from "../components/primitives/index.js";
@@ -18,7 +19,7 @@ import {
 	renderSettingDetail,
 	renderSettingRow,
 } from "../renderers/settingsRenderers.js";
-import { useApp, useModal } from "../state/AppContext.js";
+import { useApp, useFailurePopup, useModal } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 import { theme } from "../theme.js";
 
@@ -26,8 +27,19 @@ export function SettingsScreen() {
 	const { state, dispatch } = useApp();
 	const { settings } = state;
 	const modal = useModal();
+	const showFailures = useFailurePopup();
 	const dimensions = useDimensions();
 
+	/** A setting that did not save, at the scope it was being saved to. */
+	const reportNotSaved = (
+		name: string,
+		scope: "user" | "project",
+		error: unknown,
+	): Promise<void> =>
+		showFailures(
+			stepFailureReport(`${name} was not saved`, scope.toUpperCase(), error),
+		);
+
 	const fetchData = useCallback(async () => {
 		dispatch({ type: "SETTINGS_DATA_LOADING" });
 		try {
@@ -84,7 +96,7 @@ export function SettingsScreen() {
 				await writeSettingValue(setting, newValue, scope, state.projectPath);
 				await fetchData();
 			} catch (error) {
-				await modal.message("Error", `Failed to update: ${error}`, "error");
+				await reportNotSaved(setting.name, scope, error);
 			}
 		} else if (setting.type === "select" && setting.options) {
 			const options = setting.options.map((o) => ({
@@ -110,7 +122,7 @@ export function SettingsScreen() {
 				await writeSettingValue(setting, val, scope, state.projectPath);
 				await fetchData();
 			} catch (error) {
-				await modal.message("Error", `Failed to update: ${error}`, "error");
+				await reportNotSaved(setting.name, scope, error);
 			}
 		} else {
 			// String type: if already set, clear it; if unset, show input modal
@@ -119,7 +131,7 @@ export function SettingsScreen() {
 					await writeSettingValue(setting, undefined, scope, state.projectPath);
 					await fetchData();
 				} catch (error) {
-					await modal.message("Error", `Failed to update: ${error}`, "error");
+					await reportNotSaved(setting.name, scope, error);
 				}
 			} else {
 				const newValue = await modal.input(
@@ -137,7 +149,7 @@ export function SettingsScreen() {
 					);
 					await fetchData();
 				} catch (error) {
-					await modal.message("Error", `Failed to update: ${error}`, "error");
+					await reportNotSaved(setting.name, scope, error);
 				}
 			}
 		}

package/src/ui/screens/GitignoreScreen.tsx

@@ -12,6 +12,11 @@ import {
 	loadGitignoreState,
 } from "../../services/gitignore-service.js";
 import type { ResolvedRule, Tier, Violation } from "../../types/gitignore.js";
+import {
+	gitignoreFixReport,
+	gitignoreTemplateReport,
+	stepFailureReport,
+} from "../adapters/startupReports.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import { useScreenKeys } from "../input/KeyRouter.js";
 import { moveDirection } from "../keymap.js";
@@ -19,7 +24,8 @@ import {
 	type RuleRow,
 	renderRuleRow,
 } from "../renderers/gitignoreRenderers.js";
-import { useApp, useModal, useNotify } from "../state/AppContext.js";
+import { useApp, useModal } from "../state/AppContext.js";
+import type { FailureReport } from "../state/types.js";
 import { theme } from "../theme.js";
 
 // Clean rows are grouped by the manifest that defined them. Order = display
@@ -36,7 +42,6 @@ const SOURCE_LABELS: Record<Tier, string> = {
 export function GitignoreScreen() {
 	const { state } = useApp();
 	const modal = useModal();
-	const notify = useNotify();
 	const renderer = useRenderer();
 	const cwd = state.projectPath;
 
@@ -139,109 +144,83 @@ export function GitignoreScreen() {
 	const handleFixAll = useCallback(async () => {
 		if (!data || toFixRows.length === 0) return;
 		try {
-			const messages: string[] = [];
-			const failures: string[] = [];
+			const failures: Array<{ path: string; message: string }> = [];
 			for (const { row } of toFixRows) {
 				for (const v of row.violations) {
 					const r = await applyDestructiveFix(cwd, v, row.rule.pattern);
-					(r.applied ? messages : failures).push(r.message);
+					if (!r.applied) failures.push({ path: v.path, message: r.message });
 				}
 			}
 			await reload();
-			if (failures.length > 0) {
-				await modal.message(
-					"Some fixes didn't apply",
-					[...failures, ...messages].join("\n"),
-					"error",
-				);
-			}
+			// Only what did not apply, each with why; the reloaded rows show the rest.
+			const report = gitignoreFixReport(failures);
+			if (report) await modal.failures(report);
 		} catch (err) {
-			await modal.message(
-				"Fix failed",
-				err instanceof Error ? err.message : String(err),
-				"error",
+			await modal.failures(
+				stepFailureReport("The fixes were not applied", ".gitignore", err),
 			);
 		}
 	}, [cwd, data, toFixRows, reload, modal]);
 
 	// Fix just the highlighted row.
 	const handleFixOne = useCallback(async () => {
-		if (!selectedRow) {
-			notify("Highlight a row that needs fixing, then press f", "warning");
-			return;
-		}
-		if (selectedRow.violations.length === 0) {
-			notify(`${selectedRow.rule.pattern} already matches — nothing to fix`);
-			return;
-		}
+		// Nothing highlighted, or a row that already matches: nothing to fix.
+		if (!selectedRow || selectedRow.violations.length === 0) return;
 
 		try {
-			const results: Array<{ applied: boolean; message: string }> = [];
+			const failures: Array<{ path: string; message: string }> = [];
 			for (const v of selectedRow.violations) {
-				results.push(
-					await applyDestructiveFix(cwd, v, selectedRow.rule.pattern),
-				);
+				const r = await applyDestructiveFix(cwd, v, selectedRow.rule.pattern);
+				if (!r.applied) failures.push({ path: v.path, message: r.message });
 			}
-			const failed = results.filter((r) => !r.applied);
 			await reload();
-			// Success is silent — the reload removes the fixed row. Only surface a
-			// modal when something didn't apply.
-			if (failed.length > 0) {
-				await modal.message(
-					"Some fixes didn't apply",
-					results.map((r) => r.message).join("\n"),
-					"error",
-				);
-			}
+			// Success is silent — the reload removes the fixed row. Only what did
+			// not apply goes into the failure popup.
+			const report = gitignoreFixReport(failures);
+			if (report) await modal.failures(report);
 		} catch (err) {
-			await modal.message(
-				"Fix failed",
-				err instanceof Error ? err.message : String(err),
-				"error",
+			await modal.failures(
+				stepFailureReport(
+					"The fix was not applied",
+					selectedRow.rule.pattern,
+					err,
+				),
 			);
 		}
-	}, [selectedRow, modal, notify, cwd, reload]);
+	}, [selectedRow, modal, cwd, reload]);
 
 	const handleApplyTemplate = useCallback(async () => {
 		const names = Object.keys(BUILTIN_TEMPLATES);
-		if (names.length === 0) {
-			notify("No built-in templates available", "warning");
-			return;
-		}
+		if (names.length === 0) return;
 		const selected = await modal.select(
 			"Apply template",
 			"Merge the template into the project manifest at .claude/gitignore.json.",
 			names.map((n) => ({ label: n, value: n })),
 		);
 		if (!selected) return;
+		let report: FailureReport | null = null;
 		try {
+			// What was merged shows in the list. What was skipped does not, so it
+			// is the one thing said — in the failure popup.
 			const r = await applyTemplate(cwd, selected);
-			notify(
-				`Applied "${selected}": ${r.added.ignore.length} ignore + ${r.added.track.length} track entries`,
-			);
-			// Skipped entries are not visible in the list, so they get their own line.
-			if (r.conflicts.length > 0) {
-				notify(
-					`Skipped, conflicting with existing rules: ${r.conflicts.join(", ")}`,
-					"warning",
-				);
-			}
+			report = gitignoreTemplateReport(selected, r.conflicts);
 		} catch (err) {
-			await modal.message(
-				"Template failed",
-				err instanceof Error ? err.message : String(err),
-				"error",
+			report = stepFailureReport(
+				`Template "${selected}" was not applied`,
+				".claude/gitignore.json",
+				err,
 			);
 		}
 		await reload();
-	}, [cwd, modal, notify, reload]);
+		if (report) await modal.failures(report);
+	}, [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.
+	 * created is said in the failure popup instead.
 	 */
 	const handleEditManifest = useCallback(async () => {
 		let projectManifest: string;
@@ -252,10 +231,12 @@ export function GitignoreScreen() {
 				current.resolved,
 			);
 		} catch (err) {
-			await modal.message(
-				"Cannot open the manifest",
-				err instanceof Error ? err.message : String(err),
-				"error",
+			await modal.failures(
+				stepFailureReport(
+					"The project's rules were not opened for editing",
+					".claude/gitignore.json",
+					err,
+				),
 			);
 			return;
 		}

package/src/ui/screens/McpRegistryScreen.tsx

@@ -1,20 +1,30 @@
 import React, { useEffect, useCallback, useState, useRef } from "react";
+import { stepFailureReport } from "../adapters/startupReports.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import { useScreenKeys, useSearchInput } from "../input/KeyRouter.js";
 import { moveDirection } from "../keymap.js";
 import {
 	useApp,
+	useFailurePopup,
 	useModal,
 	useNavigation,
-	useNotify,
 } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 
-import { addMcpServer, setAllowMcp } from "../../services/claude-settings.js";
+import {
+	addMcpServer,
+	getEnabledMcpServers,
+	getInstalledMcpServers,
+	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 {
+	type McpRegistryListItem,
+	renderMcpRegistryRow,
+	renderMcpRegistryStatus,
+} from "../renderers/mcpRenderers.js";
 import { theme } from "../theme.js";
 
 /**
@@ -80,7 +90,7 @@ export function McpRegistryScreen() {
 	const { state, dispatch } = useApp();
 	const { mcpRegistry } = state;
 	const modal = useModal();
-	const notify = useNotify();
+	const showFailures = useFailurePopup();
 	const { navigateToScreen } = useNavigation();
 	const dimensions = useDimensions();
 
@@ -94,6 +104,33 @@ export function McpRegistryScreen() {
 
 	const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
+	/**
+	 * The servers this project has configured, read from the same place the MCP
+	 * screen reads. A row here shows installed from THIS, and the restart from
+	 * `mcp.changedThisSession` — the same two states a curated row carries.
+	 */
+	const [installedNames, setInstalledNames] = useState<ReadonlySet<string>>(
+		new Set(),
+	);
+	const loadInstalled = useCallback(async () => {
+		try {
+			const [installed, enabled] = await Promise.all([
+				getInstalledMcpServers(state.projectPath),
+				getEnabledMcpServers(state.projectPath),
+			]);
+			setInstalledNames(
+				new Set([...Object.keys(installed), ...Object.keys(enabled)]),
+			);
+		} catch {
+			// A configuration that cannot be read is the MCP screen's to report,
+			// where it replaces the list; here the rows simply carry no marks.
+			setInstalledNames(new Set());
+		}
+	}, [state.projectPath]);
+	useEffect(() => {
+		void loadInstalled();
+	}, [loadInstalled]);
+
 	// Load servers
 	const loadServers = useCallback(async (query: string) => {
 		setIsLoading(true);
@@ -196,16 +233,28 @@ export function McpRegistryScreen() {
 			await setAllowMcp(true, state.projectPath);
 			await addMcpServer(server.name, config, state.projectPath);
 			modal.hideModal();
-			// A warning: the server does nothing until the user restarts.
-			notify(`Added ${server.name} — restart Claude Code to use it`, "warning");
+			// Shown on THIS row as its state — installed, and "↻ restart Claude
+			// Code" — not as a message. The MCP screen lists curated servers only,
+			// so this row is where the user can see it.
+			dispatch({ type: "MCP_SERVER_CHANGED", name: server.name });
+			await loadInstalled();
 		} catch (error) {
 			modal.hideModal();
-			await modal.message("Error", `Failed to install: ${error}`, "error");
+			await showFailures(
+				stepFailureReport(`Could not add ${server.name}`, server.name, error),
+			);
 		}
 	};
 
+	const listItems: McpRegistryListItem[] = servers.map((server) => ({
+		server,
+		isInstalled: installedNames.has(server.name),
+		needsRestart: state.mcp.changedThisSession.includes(server.name),
+	}));
+
 	// Get selected server
-	const selectedServer = servers[mcpRegistry.selectedIndex];
+	const selectedItem = listItems[mcpRegistry.selectedIndex];
+	const selectedServer = selectedItem?.server;
 
 	const renderDetail = () => {
 		if (isLoading) {
@@ -216,7 +265,7 @@ export function McpRegistryScreen() {
 			return <text fg={theme.colors.danger}>Error: {error}</text>;
 		}
 
-		if (!selectedServer) {
+		if (!selectedServer || !selectedItem) {
 			return (
 				<text fg={theme.colors.muted}>Select a server to see details</text>
 			);
@@ -238,6 +287,7 @@ export function McpRegistryScreen() {
 				<box marginTop={1}>
 					<text fg={theme.colors.text}>{selectedServer.short_description}</text>
 				</box>
+				<box marginTop={1}>{renderMcpRegistryStatus(selectedItem)}</box>
 				<box flexDirection="row" marginTop={1}>
 					<text fg={theme.colors.text}>
 						<strong>Version: </strong>
@@ -266,36 +316,15 @@ export function McpRegistryScreen() {
 						</text>
 					</box>
 				)}
-				<box marginTop={1}>
-					<text fg={theme.colors.muted}>Press Enter to install</text>
-				</box>
+				{selectedItem.isInstalled ? null : (
+					<box marginTop={1}>
+						<text fg={theme.colors.muted}>Press Enter to install</text>
+					</box>
+				)}
 			</box>
 		);
 	};
 
-	const renderListItem = (
-		server: McpRegistryServer,
-		_idx: number,
-		isSelected: boolean,
-	) => {
-		const version = server.version ? ` v${server.version}` : "";
-		return isSelected ? (
-			<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.info}>{version}</span>
-			</text>
-		);
-	};
-
 	// Status for search placeholder
 	const searchPlaceholder = `${servers.length} servers │ / to search`;
 
@@ -319,11 +348,11 @@ export function McpRegistryScreen() {
 					<text fg={theme.colors.muted}>No servers found</text>
 				) : (
 					<ScrollableList
-						items={servers}
+						items={listItems}
 						selectedIndex={mcpRegistry.selectedIndex}
-						renderItem={renderListItem}
+						renderItem={renderMcpRegistryRow}
 						maxHeight={dimensions.listPanelHeight}
-						getKey={(server) => server.name}
+						getKey={(item) => item.server.name}
 					/>
 				)
 			}