magus-cli 0.0.0-placeholder → 7.1.0

package/src/ui/screens/PluginsScreen.tsx

@@ -0,0 +1,1423 @@
+import type React from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+	defaultMarketplaces,
+	getAllMarketplaces,
+} from "../../data/marketplaces.js";
+import { loadActiveClosure } from "../../services/active-closure.js";
+import {
+	type PluginScope,
+	addMarketplace as cliAddMarketplace,
+	repairPlugin as cliRepairPlugin,
+	uninstallPlugin as cliUninstallPlugin,
+} from "../../services/claude-cli.js";
+import {
+	getMcpEnvVars,
+	readSettings,
+	setMcpEnvVar,
+} from "../../services/claude-settings.js";
+import { clearContentDriftCache } from "../../services/content-drift.js";
+import {
+	type MarketplaceFetchFailure,
+	type PluginInfo,
+	type ScopeStatus,
+	clearMarketplaceCache,
+	getAvailablePlugins,
+	getLocalMarketplacesInfo,
+	getMarketplaceFetchFailures,
+	isInstalledInScope,
+	refreshAllMarketplaces,
+	resolveScopeAction,
+} from "../../services/plugin-manager.js";
+import {
+	getPluginEnvRequirements,
+	getPluginSourcePath,
+} from "../../services/plugin-mcp-config.js";
+import {
+	checkMissingDeps,
+	getPluginSetupFromSource,
+	installPluginDeps,
+} from "../../services/plugin-setup.js";
+import { saveProfile } from "../../services/profiles.js";
+import {
+	fetchPluginContents,
+	fetchPluginSkillDetail,
+} from "../../services/skills-manager.js";
+// The one update implementation, shared with `magus update`. See the header
+// of update-engine.ts for what drifted while the TUI had its own loop.
+import {
+	type ApplyReporter,
+	REAL_PLUGIN_DEPS,
+	applyPlugins,
+	installPluginInScope,
+	pluginNeedsWork,
+	updatePluginInScope,
+} from "../../services/update-engine.js";
+// The ONE plugin classifier, shared with `magus update`. Every state this
+// screen shows or acts on — row text, detail panel, header counts, U / a, the
+// scope picker — reads the same map it builds.
+import {
+	type PluginUpdateItem,
+	classifyPluginRows,
+	countPluginStates,
+	scopeIsBehind,
+} from "../../services/update-plan.js";
+import {
+	diffVersions,
+	loadSeenVersions,
+	saveSeenVersions,
+} from "../../services/version-snapshot.js";
+import { fuzzyFilter } from "../../utils/fuzzy-search.js";
+import { buildCatalogNoticeText } from "../adapters/catalogNotice.js";
+import {
+	type PluginBrowserItem,
+	type PluginComponentItem,
+	type PluginPluginItem,
+	buildPluginBrowserItems,
+	noMoveReasons,
+	pluginContentsRepo,
+} from "../adapters/pluginsAdapter.js";
+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 {
+	renderPluginDetail,
+	renderPluginRow,
+} from "../renderers/pluginRenderers.js";
+import { useApp, useModal, useProgress } from "../state/AppContext.js";
+import { useDimensions } from "../state/DimensionsContext.js";
+import { asyncValue } from "../state/types.js";
+import { theme } from "../theme.js";
+
+/** Wraps the notice text in the warning-coloured row ScreenLayout renders. */
+function buildCatalogNotice(
+	input: Parameters<typeof buildCatalogNoticeText>[0],
+): React.ReactNode {
+	const text = buildCatalogNoticeText(input);
+	if (!text) return null;
+	return <text fg={theme.colors.warning}>{text}</text>;
+}
+
+export function PluginsScreen() {
+	const { state, dispatch } = useApp();
+	const { plugins: pluginsState } = state;
+	const modal = useModal();
+	const progress = useProgress();
+	const dimensions = useDimensions();
+
+	const isSearchActive =
+		state.isSearching &&
+		state.currentRoute.screen === "plugins" &&
+		!state.modal;
+
+	/**
+	 * Catalogs that could not be read from any authoritative source.
+	 *
+	 * Held in state rather than derived at render time because it is an answer
+	 * from the last fetch and must survive until the next one — a failure the user
+	 * cannot see is the bug this screen shipped with.
+	 */
+	const [catalogFailures, setCatalogFailures] = useState<
+		MarketplaceFetchFailure[]
+	>([]);
+
+	/** Re-render tick so the retry countdown in the notice actually counts down. */
+	const [nowTick, setNowTick] = useState(() => Date.now());
+
+	/**
+	 * The active profile's pins — the same values `magus update` plans with.
+	 *
+	 * `undefined` until the first fetch answers; `null` when no profile could be
+	 * resolved (no manifest, an invalid one, or several with none active). In
+	 * that case every row is judged against "latest" and the notice says so.
+	 */
+	const [pins, setPins] = useState<
+		Readonly<Record<string, string>> | null | undefined
+	>(undefined);
+
+	// Fetch data (always fetches all scopes)
+	const fetchData = useCallback(async () => {
+		dispatch({ type: "PLUGINS_DATA_LOADING" });
+		try {
+			const localMarketplaces = await getLocalMarketplacesInfo();
+			const allMarketplaces = getAllMarketplaces(localMarketplaces);
+			// Read-only, never throws. `resolveBins: false`: this screen needs only
+			// the plugin pins, not every declared plugin's binary requirements.
+			const [pluginData, active] = await Promise.all([
+				getAvailablePlugins(state.projectPath),
+				loadActiveClosure(state.projectPath || process.cwd(), {
+					resolveBins: false,
+				}),
+			]);
+			setPins(active?.closure.plugins ?? null);
+
+			// Which catalogs answered, and which only appeared to. Read straight
+			// after the fetch, while the record still describes this attempt.
+			//
+			// Only failures that survived every authoritative source are worth
+			// reporting: a rate-limited HTTP fetch that the git remote ref then
+			// answered is a non-event for the user, and reporting it would fire a
+			// warning about intended, working behaviour.
+			const unresolved = new Set(
+				pluginData.filter((p) => p.updateCheckFailed).map((p) => p.marketplace),
+			);
+			setCatalogFailures(
+				getMarketplaceFetchFailures().filter((f) =>
+					unresolved.has(f.marketplace),
+				),
+			);
+
+			// Surface version changes made outside magus (Claude Code's own
+			// plugin update, a manual CLI call). Diffing against
+			// what we last rendered catches all of them; logging only what
+			// magus did would miss every one.
+			const current: Record<string, string> = {};
+			for (const p of pluginData) {
+				if (p.installedVersion) current[p.id] = p.installedVersion;
+			}
+			const projectPath = state.projectPath || process.cwd();
+			const previous = await loadSeenVersions(projectPath);
+			for (const change of diffVersions(previous, current)) {
+				const target = pluginData.find((p) => p.id === change.pluginId);
+				if (!target) continue;
+				if (change.kind === "updated") {
+					target.recentlyUpdatedFrom = change.from;
+				} else {
+					target.recentlyInstalled = true;
+				}
+			}
+			// Await the write. Fire-and-forget raced the next fetchData() — a
+			// 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);
+
+			dispatch({
+				type: "PLUGINS_DATA_SUCCESS",
+				marketplaces: allMarketplaces,
+				plugins: pluginData,
+			});
+		} catch (error) {
+			dispatch({
+				type: "PLUGINS_DATA_ERROR",
+				error: error instanceof Error ? error : new Error(String(error)),
+			});
+		}
+	}, [dispatch, state.projectPath]);
+
+	// Load data on mount or when dataRefreshVersion changes
+	// biome-ignore lint/correctness/useExhaustiveDependencies: dataRefreshVersion is the external refresh trigger; bumping it must re-run the fetch even though the body never reads it
+	useEffect(() => {
+		fetchData();
+	}, [fetchData, state.dataRefreshVersion]);
+
+	/**
+	 * Tick the countdown, and refetch by itself once the rate-limit window reopens.
+	 *
+	 * The user asked "when can I try again" — so the screen answers it and then
+	 * acts on it. Leaving them to press `r` and guess is what makes a rate limit
+	 * feel like a dead end, and a mistimed guess spends another request against the
+	 * limit for nothing.
+	 *
+	 * Only armed while a retry is actually pending, so an untroubled screen runs no
+	 * timer at all.
+	 */
+	const nextRetryAt = useMemo(() => {
+		const times = catalogFailures
+			.map((f) => f.retryAt)
+			.filter((t): t is number => typeof t === "number");
+		return times.length > 0 ? Math.min(...times) : undefined;
+	}, [catalogFailures]);
+
+	useEffect(() => {
+		if (nextRetryAt === undefined) return;
+
+		const tick = setInterval(() => {
+			const now = Date.now();
+			setNowTick(now);
+			if (now >= nextRetryAt) {
+				clearInterval(tick);
+				// The cooldown has expired, so the fetcher will really try again
+				// rather than short-circuit on its own negative cache.
+				clearMarketplaceCache();
+				fetchData();
+			}
+		}, 1000);
+
+		return () => clearInterval(tick);
+	}, [nextRetryAt, fetchData]);
+
+	// The data to render: fresh when loaded, else the previous list while a
+	// reload is in flight. Reading `status === "success"` alone is what made a
+	// tab switch blank the screen — the router remounts this component, which
+	// refetches, and every intermediate frame had nothing to show.
+	const shownMarketplaces = asyncValue(pluginsState.marketplaces);
+	const shownPlugins = asyncValue(pluginsState.plugins);
+	const isReloading =
+		pluginsState.plugins.status === "loading" && shownPlugins !== undefined;
+
+	/**
+	 * One status per plugin that has a pin, computed ONCE per data/pins change.
+	 * The rows, the detail panel, the header counts, U / a and the scope picker
+	 * all read this map, so none of them can disagree with another — or with
+	 * `magus update`, which runs the same classifier over the same pins.
+	 */
+	const statuses = useMemo(
+		(): Map<string, PluginUpdateItem> =>
+			shownPlugins ? classifyPluginRows(shownPlugins, pins ?? {}) : new Map(),
+		[shownPlugins, pins],
+	);
+
+	// Build list items (categories + plugins)
+	const allItems = useMemo((): PluginBrowserItem[] => {
+		if (!shownMarketplaces || !shownPlugins) return [];
+		return buildPluginBrowserItems({
+			marketplaces: shownMarketplaces,
+			plugins: shownPlugins,
+			collapsedMarketplaces: pluginsState.collapsedMarketplaces,
+			expandedPlugins: pluginsState.expandedPlugins,
+			pluginContents: pluginsState.pluginContents,
+			statuses,
+		});
+	}, [
+		shownMarketplaces,
+		shownPlugins,
+		pluginsState.collapsedMarketplaces,
+		pluginsState.expandedPlugins,
+		pluginsState.pluginContents,
+		statuses,
+	]);
+
+	// Filter items by search query
+	const filteredItems = useMemo(() => {
+		const query = pluginsState.searchQuery.trim();
+		if (!query) return allItems;
+
+		// Only search plugins, not categories
+		const pluginItems = allItems.filter((item) => item.kind === "plugin");
+		const fuzzyResults = fuzzyFilter(pluginItems, query, (item) => item.label);
+
+		const matchedPluginIds = new Set<string>();
+		for (const result of fuzzyResults) {
+			matchedPluginIds.add(result.item.id);
+		}
+
+		// Walk allItems sequentially: include a category only if any plugin below matched
+		const categoryHasMatch = new Map<string, boolean>();
+		let currentCategoryId: string | null = null;
+		for (const item of allItems) {
+			if (item.kind === "category") {
+				currentCategoryId = item.id;
+				if (!categoryHasMatch.has(item.id)) {
+					categoryHasMatch.set(item.id, false);
+				}
+			} else if (item.kind === "plugin" && currentCategoryId) {
+				if (matchedPluginIds.has(item.id)) {
+					categoryHasMatch.set(currentCategoryId, true);
+				}
+			}
+		}
+
+		const result: PluginBrowserItem[] = [];
+		let currentCatIncluded = false;
+		currentCategoryId = null;
+
+		for (const item of allItems) {
+			if (item.kind === "category") {
+				currentCategoryId = item.id;
+				currentCatIncluded = categoryHasMatch.get(item.id) === true;
+				if (currentCatIncluded) result.push(item);
+			} else if (item.kind === "plugin" && currentCatIncluded) {
+				if (matchedPluginIds.has(item.id)) {
+					const matched = fuzzyResults.find((r) => r.item.id === item.id);
+					// Skill rows are not in the filtered result, so an expanded arrow
+					// here would point at nothing.
+					result.push({
+						...item,
+						matches: matched?.matches,
+						isExpanded: false,
+					});
+				}
+			}
+		}
+
+		return result;
+	}, [allItems, pluginsState.searchQuery]);
+
+	const selectableItems = useMemo(() => filteredItems, [filteredItems]);
+
+	/**
+	 * Read the file behind whichever component row the cursor has settled on.
+	 *
+	 * Debounced, and that is not cosmetic: each read is one GitHub API call, an
+	 * unauthenticated client gets 60 an hour, and holding ↓ through the 286
+	 * skills of a large plugin would otherwise fire a call per keypress and
+	 * exhaust the budget for every other marketplace on screen. 200ms is below
+	 * the point a deliberate move feels laggy and above key-repeat.
+	 *
+	 * MCP servers are skipped: their whole definition is the JSON already read
+	 * during the contents listing, so there is no document to fetch.
+	 */
+	const selectedRow = selectableItems[pluginsState.selectedIndex];
+	const selectedComponent =
+		selectedRow?.kind === "component" && selectedRow.component.kind !== "mcp"
+			? (selectedRow as PluginComponentItem)
+			: undefined;
+	const detailKey = selectedComponent?.detailKey;
+	const detailRepo = selectedComponent?.repo;
+	const detailPath = selectedComponent?.component.repoPath;
+	const haveDetail = detailKey
+		? pluginsState.skillDetails.has(detailKey)
+		: true;
+
+	useEffect(() => {
+		if (!detailKey || !detailRepo || !detailPath) return;
+		if (haveDetail) return;
+
+		const timer = setTimeout(() => {
+			dispatch({ type: "PLUGINS_SKILL_DETAIL_LOADING", key: detailKey });
+			fetchPluginSkillDetail(detailRepo, detailPath)
+				.then((detail) =>
+					dispatch({
+						type: "PLUGINS_SKILL_DETAIL_SUCCESS",
+						key: detailKey,
+						detail,
+					}),
+				)
+				.catch((error: unknown) =>
+					dispatch({
+						type: "PLUGINS_SKILL_DETAIL_ERROR",
+						key: detailKey,
+						error: error instanceof Error ? error.message : String(error),
+					}),
+				);
+		}, 200);
+
+		return () => clearTimeout(timer);
+	}, [dispatch, haveDetail, detailKey, detailPath, detailRepo]);
+
+	/**
+	 * Open or close a plugin's contents, fetching them the first time.
+	 *
+	 * The listing is kept per plugin id for the life of the session rather than
+	 * refetched on each open: it costs a GitHub Tree API call, and an
+	 * unauthenticated client gets 60 an hour across every marketplace on screen.
+	 */
+	const togglePluginContents = useCallback(
+		(item: PluginPluginItem) => {
+			const pluginId = item.plugin.id;
+			dispatch({ type: "PLUGINS_TOGGLE_PLUGIN_CONTENTS", pluginId });
+
+			if (item.isExpanded) return;
+			// A previous *success* is kept for the session. A previous failure is
+			// not: the usual cause is the GitHub hourly limit, which clears on its
+			// own, and caching the failure made a temporary condition look permanent
+			// with no way back except reloading the whole screen.
+			if (pluginsState.pluginContents.get(pluginId)?.status === "success") {
+				return;
+			}
+
+			const marketplace = shownMarketplaces?.find(
+				(m) => m.name === item.plugin.marketplace,
+			);
+			const repo = marketplace
+				? pluginContentsRepo(item.plugin, marketplace)
+				: undefined;
+			if (!repo) return;
+
+			dispatch({ type: "PLUGINS_CONTENTS_LOADING", pluginId });
+			fetchPluginContents(repo, item.plugin.source, item.plugin.marketplace)
+				.then((components) =>
+					dispatch({ type: "PLUGINS_CONTENTS_SUCCESS", pluginId, components }),
+				)
+				.catch((error: unknown) =>
+					dispatch({
+						type: "PLUGINS_CONTENTS_ERROR",
+						pluginId,
+						error: error instanceof Error ? error.message : String(error),
+					}),
+				);
+		},
+		[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;
+		}
+
+		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;
+		}
+
+		if (event.name === "enter" || event.name === "return") {
+			if (isSearchActive) {
+				dispatch({ type: "SET_SEARCHING", isSearching: false });
+				return;
+			}
+			handleSelect();
+			return;
+		}
+
+		if (
+			event.name === "left" ||
+			event.name === "right" ||
+			event.name === "<" ||
+			event.name === ">"
+		) {
+			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) {
+				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();
+	});
+
+	// ── Helpers ───────────────────────────────────────────────────────────────
+
+	// ── Action handlers ────────────────────────────────────────────────────────
+
+	const handleRefresh = async () => {
+		progress.show("Refreshing cache...");
+		try {
+			const result = await refreshAllMarketplaces((p) => {
+				progress.show(`${p.name}`, p.current, p.total);
+			});
+			clearMarketplaceCache();
+			// Drift is answered by diffing against the clone's HEAD, so a refresh
+			// that moves HEAD invalidates every cached answer.
+			clearContentDriftCache();
+			progress.hide();
+
+			let message =
+				"Cache refreshed.\n\n" +
+				"To update marketplaces from GitHub, run in Claude Code:\n" +
+				"  /plugin marketplace update\n\n" +
+				"Then refresh magus again with 'r'.";
+
+			if (result.repair.length > 0) {
+				const totalRepaired = result.repair.reduce(
+					(sum, r) => sum + r.repaired.length,
+					0,
+				);
+				message += `\n\nAuto-repaired ${totalRepaired} plugin(s) with missing agents/commands.`;
+			}
+
+			await modal.message("Refreshed", message, "success");
+			fetchData();
+		} catch (error) {
+			progress.hide();
+			await modal.message("Error", `Refresh failed: ${error}`, "error");
+		}
+	};
+
+	/**
+	 * Add a marketplace.
+	 *
+	 * The known ones are offered as a menu and added here — that covers every
+	 * marketplace magus ships with, including magus, so a first run does not
+	 * have to leave the tool. An arbitrary owner/repo still needs the terminal:
+	 * there is no text-input modal, only confirm/message/select.
+	 */
+	const handleShowAddMarketplaceInstructions = async () => {
+		const installed = new Set(
+			pluginsState.marketplaces.status === "success"
+				? pluginsState.marketplaces.data.map((m) => m.name)
+				: [],
+		);
+		const addable = defaultMarketplaces.filter(
+			(m) => !installed.has(m.name) && !m.deprecated && m.source.repo,
+		);
+
+		if (addable.length > 0) {
+			const choice = await modal.select(
+				"Add Marketplace",
+				"Pick one to add now, or choose Other for a repo not listed.",
+				[
+					...addable.map((m) => ({
+						label: m.displayName || m.name,
+						value: m.source.repo as string,
+						description: m.description,
+					})),
+					{ label: "Other…", value: "", description: "Any owner/repo" },
+				],
+			);
+			if (choice === null) return;
+			if (choice) {
+				try {
+					await cliAddMarketplace(choice);
+					await handleRefresh();
+				} catch (e) {
+					await modal.message(
+						"Could not add marketplace",
+						`${(e as Error).message}\n\nRun it yourself if this persists:\n\n` +
+							`  claude plugin marketplace add ${choice}`,
+						"error",
+					);
+				}
+				return;
+			}
+		}
+
+		await modal.message(
+			"Add Marketplace",
+			"For a marketplace that is not listed, run this in your terminal:\n\n" +
+				"  claude plugin marketplace add owner/repo\n\n" +
+				"Auto-update is enabled by default for new marketplaces.\n\n" +
+				"After adding, refresh magus with 'r' to see it.",
+			"info",
+		);
+	};
+
+	const handleShowTeamConfigHelp = async () => {
+		const helpText =
+			"TEAM CONFIGURATION FOR MARKETPLACES\n\n" +
+			"To configure marketplaces for your entire team:\n\n" +
+			"1. Add to .claude/settings.json (committed to git):\n\n" +
+			"   {\n" +
+			'     "extraKnownMarketplaces": {\n' +
+			'       "company-tools": {\n' +
+			'         "source": {\n' +
+			'           "source": "github",\n' +
+			'           "repo": "your-org/claude-plugins"\n' +
+			"         }\n" +
+			"       }\n" +
+			"     },\n" +
+			'     "enabledPlugins": {\n' +
+			'       "code-formatter@company-tools": true\n' +
+			"     }\n" +
+			"   }\n\n" +
+			"2. Team members get prompted to install when they trust the folder\n\n" +
+			"3. Marketplaces are GLOBAL ONLY (managed by Claude Code)\n" +
+			"   - Not project-specific\n" +
+			"   - All team members share the same marketplace cache\n\n" +
+			"NOTE: Individual plugin enablement is still project-specific.\n" +
+			'Use "Project" scope in magus to enable for the team.';
+
+		await modal.message("Team Configuration", helpText, "info");
+	};
+
+	/**
+	 * Collect environment variables required by a plugin's MCP servers.
+	 */
+	const collectPluginEnvVars = async (
+		pluginName: string,
+		marketplace: string,
+	): Promise<boolean> => {
+		try {
+			const pluginSource = await getPluginSourcePath(marketplace, pluginName);
+			if (!pluginSource) return true;
+
+			const requirements = await getPluginEnvRequirements(
+				marketplace,
+				pluginSource,
+			);
+			if (requirements.length === 0) return true;
+
+			const existingEnvVars = await getMcpEnvVars(state.projectPath);
+			const missingVars = requirements.filter(
+				(req) => !existingEnvVars[req.name] && !process.env[req.name],
+			);
+
+			if (missingVars.length === 0) return true;
+
+			const serverNames = [...new Set(missingVars.map((v) => v.serverName))];
+			const wantToConfigure = await modal.confirm(
+				"Configure MCP Servers?",
+				`This plugin includes MCP servers (${serverNames.join(", ")}) that need ${missingVars.length} environment variable(s).\n\nConfigure now?`,
+			);
+
+			if (!wantToConfigure) {
+				await modal.message(
+					"Skipped Configuration",
+					"You can configure these variables later in the Environment Variables screen (press 4).",
+					"info",
+				);
+				return true;
+			}
+
+			for (const req of missingVars) {
+				const existingProcessEnv = process.env[req.name];
+				if (existingProcessEnv) {
+					const useExisting = await modal.confirm(
+						`Use ${req.name}?`,
+						`${req.name} is already set in your environment.\n\nUse the existing value?`,
+					);
+					if (useExisting) {
+						await setMcpEnvVar(req.name, `\${${req.name}}`, state.projectPath);
+						continue;
+					}
+				}
+
+				const value = await modal.input(
+					`Configure ${req.serverName}`,
+					`${req.label} (required):`,
+					"",
+				);
+
+				if (value === null) {
+					await modal.message(
+						"Configuration Incomplete",
+						"Skipped remaining configuration.\nYou can configure these later in Environment Variables (press 4).",
+						"info",
+					);
+					return true;
+				}
+
+				if (value) {
+					await setMcpEnvVar(req.name, value, state.projectPath);
+				}
+			}
+
+			return true;
+		} catch (error) {
+			console.error("Error collecting plugin env vars:", error);
+			return true;
+		}
+	};
+
+	/**
+	 * Install system dependencies required by a plugin's MCP servers.
+	 */
+	const installPluginSystemDeps = async (
+		pluginName: string,
+		marketplace: string,
+	): Promise<void> => {
+		try {
+			const setup = await getPluginSetupFromSource(marketplace, pluginName);
+			if (!setup) return;
+
+			const missing = await checkMissingDeps(setup);
+			const hasMissing =
+				(missing.pip?.length || 0) +
+					(missing.brew?.length || 0) +
+					(missing.npm?.length || 0) +
+					(missing.cargo?.length || 0) +
+					(missing.go?.length || 0) >
+				0;
+
+			if (!hasMissing) return;
+
+			const parts: string[] = [];
+			if (missing.pip?.length) parts.push(`pip: ${missing.pip.join(", ")}`);
+			if (missing.brew?.length) parts.push(`brew: ${missing.brew.join(", ")}`);
+			if (missing.npm?.length) parts.push(`npm: ${missing.npm.join(", ")}`);
+			if (missing.cargo?.length)
+				parts.push(`cargo: ${missing.cargo.join(", ")}`);
+			if (missing.go?.length) parts.push(`go: ${missing.go.join(", ")}`);
+
+			const wantInstall = await modal.confirm(
+				"Install Dependencies?",
+				`This plugin needs system dependencies:\n\n${parts.join("\n")}\n\nInstall now?`,
+			);
+
+			if (!wantInstall) return;
+
+			modal.loading("Installing dependencies...");
+			const result = await installPluginDeps(missing);
+			modal.hideModal();
+
+			if (result.failed.length > 0) {
+				const failMsg = result.failed
+					.map((f) => `${f.pkg}: ${f.error}`)
+					.join("\n");
+				await modal.message(
+					"Partial Install",
+					`Installed: ${result.installed.length}\nFailed:\n${failMsg}`,
+					"error",
+				);
+			} else if (result.installed.length > 0) {
+				await modal.message(
+					"Dependencies Installed",
+					`Installed ${result.installed.length} package(s):\n${result.installed.join(", ")}`,
+					"success",
+				);
+			}
+		} catch (error) {
+			console.error("Error installing plugin deps:", error);
+		}
+	};
+
+	const handleSelect = async () => {
+		const item = selectableItems[pluginsState.selectedIndex];
+		if (!item) return;
+
+		if (item.kind === "category") {
+			const mp = item.marketplace;
+
+			if (item.marketplaceEnabled) {
+				const isCollapsed = pluginsState.collapsedMarketplaces.has(mp.name);
+				if (isCollapsed) {
+					dispatch({ type: "PLUGINS_TOGGLE_MARKETPLACE", name: mp.name });
+				} else if (item.pluginCount > 0) {
+					dispatch({ type: "PLUGINS_TOGGLE_MARKETPLACE", name: mp.name });
+				} else {
+					await modal.message(
+						`Remove ${mp.displayName}?`,
+						`To remove this marketplace, run in Claude Code:\n\n  /plugin marketplace remove ${mp.name}\n\nAfter removing, refresh magus with 'r' to update the display.`,
+						"info",
+					);
+				}
+			} else {
+				// Add it here rather than printing the command for the user to run.
+				// Telling someone to leave the tool, paste a command, come back and
+				// press 'r' is a step magus can just take: it already knows the
+				// repo, and addMarketplace() is the same call they would make.
+				const repo = mp.source.repo || mp.name;
+				const wantAdd = await modal.confirm(
+					`Add ${mp.displayName}?`,
+					`Clone ${repo} and register it as a marketplace?\n\nAuto-update is enabled by default.`,
+				);
+				if (wantAdd) {
+					try {
+						await cliAddMarketplace(repo);
+						await handleRefresh();
+					} catch (e) {
+						await modal.message(
+							"Could not add marketplace",
+							`${(e as Error).message}\n\nRun it yourself if this persists:\n\n  claude plugin marketplace add ${repo}`,
+							"error",
+						);
+					}
+				}
+			}
+		} else if (item.kind === "plugin") {
+			const plugin = item.plugin;
+			const status = statuses.get(plugin.id);
+
+			// The label's arrow and what the key then does are ONE rule —
+			// `scopeIsBehind` — so the picker can never show no arrow and then
+			// update, or show an arrow and then uninstall.
+			const buildScopeLabel = (
+				name: string,
+				scopeKey: PluginScope,
+				scope: ScopeStatus | undefined,
+				desc: string,
+			) => {
+				const installed = isInstalledInScope(scope);
+				const ver = scope?.version;
+				let label = installed ? `● ${name}` : `○ ${name}`;
+				label += ` (${desc})`;
+				if (ver) label += ` v${ver}`;
+				if (scopeIsBehind(status, scopeKey) && status?.target)
+					label += ` → v${status.target}`;
+				// Enabled in settings with nothing installed. Without saying so the
+				// row reads exactly like a scope that was never enabled, and the
+				// user cannot tell that picking it repairs rather than adds.
+				if (!installed && scope?.enabled) label += " — not installed, repairs";
+				return label;
+			};
+
+			const scopeOptions = [
+				{
+					label: buildScopeLabel("User", "user", plugin.userScope, "global"),
+					value: "user",
+				},
+				{
+					label: buildScopeLabel(
+						"Project",
+						"project",
+						plugin.projectScope,
+						"team",
+					),
+					value: "project",
+				},
+				{
+					label: buildScopeLabel(
+						"Local",
+						"local",
+						plugin.localScope,
+						"private",
+					),
+					value: "local",
+				},
+			];
+
+			const scopeValue = await modal.select(
+				plugin.name,
+				"Select scope to toggle:",
+				scopeOptions,
+			);
+			if (scopeValue === null) return;
+
+			const selectedScope =
+				scopeValue === "user"
+					? plugin.userScope
+					: scopeValue === "project"
+						? plugin.projectScope
+						: plugin.localScope;
+			const scopeLabel =
+				scopeValue === "user"
+					? "User"
+					: scopeValue === "project"
+						? "Project"
+						: "Local";
+
+			// Decided from the registry-backed version, not the `enabledPlugins`
+			// flag alone — see resolveScopeAction. Update-versus-uninstall is the
+			// same `scopeIsBehind` the label above used.
+			const action = resolveScopeAction(
+				selectedScope,
+				scopeIsBehind(status, scopeValue as PluginScope),
+			);
+
+			try {
+				const scope = scopeValue as PluginScope;
+				if (action === "uninstall") {
+					modal.loading(
+						`Uninstalling ${plugin.name} from ${scopeLabel}…\nclaude plugin uninstall ${plugin.id} --scope ${scope}`,
+					);
+					await cliUninstallPlugin(plugin.id, scope, state.projectPath);
+				} else if (action === "update") {
+					modal.loading(
+						`Updating ${plugin.name} in ${scopeLabel}…\nclaude plugin install ${plugin.id} --scope ${scope}`,
+					);
+					// Scope is the user's explicit choice here, so this does NOT go
+					// through applyPlugins (which advances every scope behind). It
+					// still records the version READ BACK, not the catalog version.
+					await updatePluginInScope(
+						plugin.id,
+						scope,
+						state.projectPath || process.cwd(),
+					);
+				} else {
+					modal.loading(
+						`Installing ${plugin.name} to ${scopeLabel}…\nclaude plugin install ${plugin.id} --scope ${scope}`,
+					);
+					// Same read-back as the update branch above. A fresh install is
+					// no more able to guarantee it got the catalog version than an
+					// update is — the marketplace serves whatever it publishes at
+					// the moment of the call — so recording the version we asked
+					// for made `install --check` compare that number against a copy
+					// of itself and report clean forever.
+					await installPluginInScope(
+						plugin.id,
+						scope,
+						state.projectPath || process.cwd(),
+					);
+					modal.hideModal();
+					await collectPluginEnvVars(plugin.name, plugin.marketplace);
+					await installPluginSystemDeps(plugin.name, plugin.marketplace);
+				}
+				if (action !== "install") {
+					modal.hideModal();
+				}
+				fetchData();
+			} catch (error) {
+				modal.hideModal();
+				await modal.message("Error", `Failed: ${error}`, "error");
+			}
+		}
+	};
+
+	const handleUpdate = async () => {
+		const item = selectableItems[pluginsState.selectedIndex];
+		if (!item || item.kind !== "plugin") return;
+		// The row said "update" or "stale — reinstall"; nothing else is work.
+		const status = statuses.get(item.plugin.id);
+		if (status?.action !== "update" && status?.action !== "repair") return;
+
+		const plugin = item.plugin;
+		const scope: PluginScope =
+			pluginsState.scope === "global" ? "user" : "project";
+
+		// No version bump to install over — the files changed underneath an
+		// unchanged version, and `plugin install` no-ops on "already installed".
+		// Only uninstall+install re-copies. See claude-cli.ts repairPlugin.
+		const repairing = status.action === "repair";
+
+		modal.loading(
+			repairing
+				? `Repairing ${plugin.name}…\nclaude plugin uninstall ${plugin.id} --scope ${scope} && claude plugin install ${plugin.id} --scope ${scope}`
+				: `Updating ${plugin.name}…\nclaude plugin install ${plugin.id} --scope ${scope}`,
+		);
+		const reasons = noMoveReasons();
+		try {
+			// One plugin, but the SAME engine — so a single update records the
+			// version that landed and touches every scope that is behind, exactly
+			// as `magus update` does. The plan item IS the row's status: the
+			// classifier's answer for this plugin under its real pin (the
+			// profile's, or "latest" for an undeclared install — see pinForRow),
+			// so what runs is exactly what the row claimed.
+			const result = await applyPlugins(
+				[status],
+				state.projectPath || process.cwd(),
+				REAL_PLUGIN_DEPS,
+				reasons.reporter,
+			);
+			modal.hideModal();
+			if (result.failed.length > 0) {
+				await modal.message(
+					"Error",
+					`Failed to update ${plugin.name}`,
+					"error",
+				);
+				return;
+			}
+			// Ran, exited 0, moved nothing — and the row will not have moved
+			// either. Saying nothing here is what made "press U, press U,
+			// forever": the CLI names the cause, so the screen does too.
+			if (result.unchanged.length > 0) {
+				await modal.message(
+					"No change",
+					reasons.lines(result.unchanged),
+					"info",
+				);
+			}
+			fetchData();
+		} catch (error) {
+			modal.hideModal();
+			await modal.message("Error", `Failed to update: ${error}`, "error");
+		}
+	};
+
+	/**
+	 * "Update all" — the SAME planner and the SAME apply engine `magus
+	 * update` runs. Only the selection differs, and only because a screen and a
+	 * profile genuinely mean different sets: here it is "everything listed with
+	 * an update", there it is "what the profile declares".
+	 *
+	 * This used to be a hand-rolled loop, and it had drifted from the CLI in
+	 * three ways that were bugs, not choices — it touched one scope derived from
+	 * the open tab, it recorded the version it EXPECTED rather than the one that
+	 * landed, and it never reported a pin the installer could not honour. All
+	 * three are fixed by not having a second implementation.
+	 */
+	const handleUpdateAll = async () => {
+		if (pluginsState.plugins.status !== "success") return;
+
+		// Exactly the rows that say "update" or "stale — reinstall", each planned
+		// under its real pin. Content-stale plugins are included: they need
+		// repairing, and excluding them meant "update all" left the machine with
+		// silently outdated files.
+		const items = [...statuses.values()]
+			.filter((s) => s.action === "update" || s.action === "repair")
+			.sort((a, b) => a.pluginId.localeCompare(b.pluginId));
+		if (items.length === 0) return;
+
+		const projectPath = state.projectPath || process.cwd();
+		const total = items.filter(pluginNeedsWork).length;
+
+		let done = 0;
+		const reasons = noMoveReasons();
+		const reporter: ApplyReporter = {
+			begin: (name) => {
+				done++;
+				modal.loading(`Updating ${name} (${done}/${total})…`);
+			},
+			finish: reasons.reporter.finish,
+			detach: (work) => work(),
+		};
+
+		try {
+			const result = await applyPlugins(
+				items,
+				projectPath,
+				REAL_PLUGIN_DEPS,
+				reporter,
+			);
+			modal.hideModal();
+			if (result.failed.length > 0) {
+				await modal.message(
+					"Some updates failed",
+					result.failed.join(", "),
+					"error",
+				);
+			}
+			if (result.unchanged.length > 0) {
+				await modal.message(
+					"No change",
+					reasons.lines(result.unchanged),
+					"info",
+				);
+			}
+			fetchData();
+		} catch (error) {
+			modal.hideModal();
+			await modal.message("Error", `Failed to update: ${error}`, "error");
+		}
+	};
+
+	const handleScopeToggle = async (scope: "user" | "project" | "local") => {
+		const item = selectableItems[pluginsState.selectedIndex];
+		if (!item || item.kind !== "plugin") return;
+
+		const plugin = item.plugin;
+		const scopeLabel =
+			scope === "user" ? "User" : scope === "project" ? "Project" : "Local";
+
+		const scopeData =
+			scope === "user"
+				? plugin.userScope
+				: scope === "project"
+					? plugin.projectScope
+					: plugin.localScope;
+
+		// This used to key off `scopeData.enabled` alone, so a plugin the list
+		// had just labelled "not installed" answered its own scope key by
+		// uninstalling itself — the `enabledPlugins` flag was set, the registry
+		// entry was missing, and only the flag was consulted. Update-versus-
+		// uninstall is the classifier's `scopeIsBehind`, the same rule the Enter
+		// scope picker labels with.
+		const action = resolveScopeAction(
+			scopeData,
+			scopeIsBehind(statuses.get(plugin.id), scope),
+		);
+
+		try {
+			if (action === "uninstall") {
+				modal.loading(
+					`Uninstalling ${plugin.name} from ${scopeLabel}…\nclaude plugin uninstall ${plugin.id} --scope ${scope}`,
+				);
+				await cliUninstallPlugin(plugin.id, scope, state.projectPath);
+			} else if (action === "update") {
+				modal.loading(
+					`Updating ${plugin.name} in ${scopeLabel}…\nclaude plugin install ${plugin.id} --scope ${scope}`,
+				);
+				// Explicit scope, read-back version — see the note above.
+				await updatePluginInScope(
+					plugin.id,
+					scope,
+					state.projectPath || process.cwd(),
+				);
+			} else {
+				modal.loading(
+					`Installing ${plugin.name} to ${scopeLabel}…\nclaude plugin install ${plugin.id} --scope ${scope}`,
+				);
+				// Read-back on install too — see the note on the same branch above.
+				await installPluginInScope(
+					plugin.id,
+					scope,
+					state.projectPath || process.cwd(),
+				);
+				modal.hideModal();
+				await collectPluginEnvVars(plugin.name, plugin.marketplace);
+				await installPluginSystemDeps(plugin.name, plugin.marketplace);
+			}
+			if (action !== "install") {
+				modal.hideModal();
+			}
+			fetchData();
+		} catch (error) {
+			modal.hideModal();
+			await modal.message("Error", `Failed: ${error}`, "error");
+		}
+	};
+
+	const handleRemoveDeprecated = async () => {
+		const item = selectableItems[pluginsState.selectedIndex];
+		if (!item || item.kind !== "plugin" || !item.plugin.isOrphaned) return;
+
+		const plugin = item.plugin;
+
+		// No "it moved, migrate there?" branch. It offered to uninstall this
+		// plugin and install the same NAME from another marketplace, on the
+		// strength of a name match with no history behind it — and for
+		// `claudish`, dual-published to two marketplaces on purpose, the target
+		// was already installed. An orphan is removed; where else a name happens
+		// to appear is not this screen's guess to make.
+
+		try {
+			// Remove from all scopes — try all to clean up stale references
+			const scopes: PluginScope[] = ["user", "project", "local"];
+			// Nothing tallies which scopes actually held it. The migrate dialog
+			// that consumed that tally is gone with the `moved` inference, and
+			// collecting it for no reader is how a value goes stale unnoticed.
+			for (const scope of scopes) {
+				try {
+					modal.loading(
+						`Removing ${plugin.name} from ${scope}…\nclaude plugin uninstall ${plugin.id} --scope ${scope}`,
+					);
+					await cliUninstallPlugin(plugin.id, scope, state.projectPath);
+				} catch {
+					// Ignore errors for scopes where it doesn't exist
+				}
+			}
+
+			modal.hideModal();
+			fetchData();
+		} catch (error) {
+			modal.hideModal();
+			await modal.message("Error", `Failed to remove: ${error}`, "error");
+		}
+	};
+
+	const handleSaveAsProfile = async () => {
+		const settings = await readSettings(state.projectPath);
+		const enabledPlugins = settings.enabledPlugins ?? {};
+
+		const name = await modal.input("Save Profile", "Profile name:");
+		if (name === null || !name.trim()) return;
+
+		const scopeChoice = await modal.select(
+			"Save to scope",
+			"Where should this profile be saved?",
+			[
+				{
+					label: "User — ~/.claude/profiles.json (available everywhere)",
+					value: "user",
+				},
+				{
+					label: "Project — .claude/profiles.json (shared with team via git)",
+					value: "project",
+				},
+			],
+		);
+		if (scopeChoice === null) return;
+
+		const scope = scopeChoice as "user" | "project";
+
+		modal.loading("Saving profile...");
+		try {
+			await saveProfile(name.trim(), enabledPlugins, scope, state.projectPath);
+			modal.hideModal();
+			await modal.message(
+				"Saved",
+				`Profile "${name.trim()}" saved.\nPress 6 to manage profiles.`,
+				"success",
+			);
+		} catch (error) {
+			modal.hideModal();
+			await modal.message("Error", `Failed to save profile: ${error}`, "error");
+		}
+	};
+
+	// ── Render ─────────────────────────────────────────────────────────────────
+
+	// Only a genuine first load takes over the screen. A reload keeps the list on
+	// screen and says so in the notice line instead.
+	if (!shownMarketplaces || !shownPlugins) {
+		if (
+			pluginsState.marketplaces.status === "loading" ||
+			pluginsState.plugins.status === "loading"
+		) {
+			return (
+				<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+					<text fg={theme.colors.accent}>
+						<strong>magus Plugins</strong>
+					</text>
+					<text fg={theme.colors.muted}>
+						Loading plugin catalogs from GitHub…
+					</text>
+				</box>
+			);
+		}
+	}
+
+	if (
+		pluginsState.marketplaces.status === "error" ||
+		pluginsState.plugins.status === "error"
+	) {
+		// Name the error. "Error loading data" told the user nothing and sent them
+		// to the debug pane to find out what magus already knew.
+		const failure =
+			pluginsState.plugins.status === "error"
+				? pluginsState.plugins.error
+				: pluginsState.marketplaces.status === "error"
+					? pluginsState.marketplaces.error
+					: undefined;
+		return (
+			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+				<text fg={theme.colors.accent}>
+					<strong>magus Plugins</strong>
+				</text>
+				<text fg={theme.colors.danger}>
+					Could not load plugins: {failure?.message ?? "unknown error"}
+				</text>
+				<text fg={theme.colors.muted}>Press r to retry.</text>
+			</box>
+		);
+	}
+
+	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" },
+			];
+
+	const scopeLabel = pluginsState.scope === "global" ? "Global" : "Project";
+	const plugins: PluginInfo[] = shownPlugins ?? [];
+	// "installed" must mean the same thing here as in the rows beside it. This
+	// counted `p.enabled` — the settings flag — so the header read "11 installed"
+	// on a screen whose every row said "not installed". Same predicate as the
+	// row and the detail panel now.
+	const isInstalledAnywhere = (p: PluginInfo) =>
+		isInstalledInScope(p.userScope) ||
+		isInstalledInScope(p.projectScope) ||
+		isInstalledInScope(p.localScope);
+	const installedCount = plugins.filter(isInstalledAnywhere).length;
+	// Every state count is the classifier's, over the same map the rows read,
+	// so a header can never count a row the list beside it does not show.
+	const counts = countPluginStates(statuses.values());
+	const updateCount = counts.update + counts.repair;
+	// Cannot tell whether it is current. Counted and shown separately: folding
+	// it into `updateCount` would overstate, and folding it into silence is the
+	// "cannot tell rendered as fine" bug.
+	const unknownCount = counts.unknown;
+	const installCount = counts.install;
+	const subtitle = `${scopeLabel} │ ${installedCount} installed${updateCount > 0 ? ` │ ${updateCount} updates` : ""}${installCount > 0 ? ` │ ${installCount} to install` : ""}${unknownCount > 0 ? ` │ ${unknownCount} unverified` : ""}`;
+	const searchPlaceholder = `${scopeLabel} │ ${installedCount} installed${updateCount > 0 ? ` │ ${updateCount} ⬆` : ""}${installCount > 0 ? ` │ ${installCount} +` : ""}${unknownCount > 0 ? ` │ ${unknownCount} ?` : ""} │ / to search`;
+
+	const catalogNotice = buildCatalogNotice({
+		failures: catalogFailures,
+		unverifiedPlugins: [...statuses.values()].filter(
+			(s) => s.reason === "catalog-unverified",
+		).length,
+		width: dimensions.terminalWidth,
+		now: nowTick,
+	});
+	// Without a resolved profile, exact pins are unknown here and every row is
+	// judged against "latest". Saying so is what keeps a row that disagrees with
+	// `magus update <profile>` from reading as a contradiction.
+	const notice = isReloading ? (
+		<text fg={theme.colors.muted}>⟳ Refreshing catalogs from GitHub…</text>
+	) : (
+		(catalogNotice ??
+		(pins === null ? (
+			<text fg={theme.colors.muted}>
+				profile not resolved — states judged against latest
+			</text>
+		) : null))
+	);
+
+	return (
+		<ScreenLayout
+			title="magus Plugins"
+			subtitle={subtitle}
+			notice={notice}
+			currentScreen="plugins"
+			search={{
+				isActive: isSearchActive,
+				query: pluginsState.searchQuery,
+				placeholder: searchPlaceholder,
+			}}
+			footerHints={footerHints}
+			listPanel={
+				<box flexDirection="column">
+					<ScrollableList
+						items={selectableItems}
+						selectedIndex={pluginsState.selectedIndex}
+						renderItem={renderPluginRow}
+						maxHeight={dimensions.listPanelHeight}
+						getKey={(item) => item.id}
+					/>
+					{pluginsState.searchQuery && selectableItems.length === 0 && (
+						<EmptyFilterState
+							query={pluginsState.searchQuery}
+							entityName="plugins"
+						/>
+					)}
+				</box>
+			}
+			// A skill's panel now holds its whole SKILL.md, which is long enough to
+			// scroll. Without this the pane kept the previous row's scroll offset,
+			// so moving to the next skill landed you in the middle of a document
+			// you had not started reading.
+			detailKey={selectedItem?.id}
+			detailPanel={renderPluginDetail(
+				selectedItem,
+				pluginsState.collapsedMarketplaces,
+				pluginsState.pluginContents,
+				pluginsState.skillDetails,
+				// ScreenLayout gives the detail pane 50% of the terminal, then takes
+				// a column for its left padding and one for the scrollbar.
+				Math.max(24, Math.floor(dimensions.terminalWidth / 2) - 3),
+			)}
+		/>
+	);
+}
+
+export default PluginsScreen;