claudeup 4.41.0 → 4.42.0

package/src/ui/screens/PluginsScreen.tsx

@@ -1,75 +1,83 @@
-import React, { useEffect, useCallback, useMemo, useState } from "react";
-import { useApp, useModal, useProgress } from "../state/AppContext.js";
-import { asyncValue } from "../state/types.js";
-import { useDimensions } from "../state/DimensionsContext.js";
-import { useKeyboard } from "../hooks/useKeyboard.js";
-import { ScreenLayout } from "../components/layout/index.js";
-import { ScrollableList } from "../components/ScrollableList.js";
-import { EmptyFilterState } from "../components/EmptyFilterState.js";
-import { fuzzyFilter } from "../../utils/fuzzy-search.js";
+import type React from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
 	defaultMarketplaces,
 	getAllMarketplaces,
 } from "../../data/marketplaces.js";
-import { clearContentDriftCache } from "../../services/content-drift.js";
-import {
-	diffVersions,
-	loadSeenVersions,
-	saveSeenVersions,
-} from "../../services/version-snapshot.js";
 import {
-	getAvailablePlugins,
-	getMarketplaceFetchFailures,
-	refreshAllMarketplaces,
-	clearMarketplaceCache,
-	getLocalMarketplacesInfo,
-	isInstalledInScope,
-	resolveScopeAction,
-	saveInstalledPluginVersion,
-	type MarketplaceFetchFailure,
-	type PluginInfo,
-	type ScopeStatus,
-} from "../../services/plugin-manager.js";
+	type PluginScope,
+	addMarketplace as cliAddMarketplace,
+	installPlugin as cliInstallPlugin,
+	repairPlugin as cliRepairPlugin,
+	uninstallPlugin as cliUninstallPlugin,
+	updatePlugin as cliUpdatePlugin,
+} from "../../services/claude-cli.js";
 import {
-	setMcpEnvVar,
 	getMcpEnvVars,
 	readSettings,
 	saveGlobalInstalledPluginVersion,
 	saveLocalInstalledPluginVersion,
+	setMcpEnvVar,
 } from "../../services/claude-settings.js";
-import { saveProfile } from "../../services/profiles.js";
+import { clearContentDriftCache } from "../../services/content-drift.js";
 import {
-	addMarketplace as cliAddMarketplace,
-	installPlugin as cliInstallPlugin,
-	repairPlugin as cliRepairPlugin,
-	uninstallPlugin as cliUninstallPlugin,
-	updatePlugin as cliUpdatePlugin,
-	type PluginScope,
-} from "../../services/claude-cli.js";
+	type MarketplaceFetchFailure,
+	type PluginInfo,
+	type ScopeStatus,
+	clearMarketplaceCache,
+	getAvailablePlugins,
+	getLocalMarketplacesInfo,
+	getMarketplaceFetchFailures,
+	isInstalledInScope,
+	refreshAllMarketplaces,
+	resolveScopeAction,
+	saveInstalledPluginVersion,
+} from "../../services/plugin-manager.js";
 import {
 	getPluginEnvRequirements,
 	getPluginSourcePath,
 } from "../../services/plugin-mcp-config.js";
 import {
-	getPluginSetupFromSource,
 	checkMissingDeps,
+	getPluginSetupFromSource,
 	installPluginDeps,
 } from "../../services/plugin-setup.js";
 import {
+	type VersionMismatchInfo,
 	checkPluginVersionMismatches,
 	checkSinglePluginMismatch,
-	type VersionMismatchInfo,
 } from "../../services/plugin-version-check.js";
-import { useMismatchModal } from "../hooks/useMismatchModal.js";
+import { saveProfile } from "../../services/profiles.js";
+import {
+	fetchPluginContents,
+	fetchPluginSkillDetail,
+} from "../../services/skills-manager.js";
+import {
+	diffVersions,
+	loadSeenVersions,
+	saveSeenVersions,
+} from "../../services/version-snapshot.js";
+import { fuzzyFilter } from "../../utils/fuzzy-search.js";
+import { buildCatalogNoticeText } from "../adapters/catalogNotice.js";
 import {
-	buildPluginBrowserItems,
 	type PluginBrowserItem,
+	type PluginComponentItem,
+	type PluginPluginItem,
+	buildPluginBrowserItems,
+	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 { useMismatchModal } from "../hooks/useMismatchModal.js";
 import {
-	renderPluginRow,
 	renderPluginDetail,
+	renderPluginRow,
 } from "../renderers/pluginRenderers.js";
-import { buildCatalogNoticeText } from "../adapters/catalogNotice.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. */
@@ -124,9 +132,7 @@ export function PluginsScreen() {
 			// 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),
+				pluginData.filter((p) => p.updateCheckFailed).map((p) => p.marketplace),
 			);
 			setCatalogFailures(
 				getMarketplaceFetchFailures().filter((f) =>
@@ -228,8 +234,16 @@ export function PluginsScreen() {
 			marketplaces: shownMarketplaces,
 			plugins: shownPlugins,
 			collapsedMarketplaces: pluginsState.collapsedMarketplaces,
+			expandedPlugins: pluginsState.expandedPlugins,
+			pluginContents: pluginsState.pluginContents,
 		});
-	}, [shownMarketplaces, shownPlugins, pluginsState.collapsedMarketplaces]);
+	}, [
+		shownMarketplaces,
+		shownPlugins,
+		pluginsState.collapsedMarketplaces,
+		pluginsState.expandedPlugins,
+		pluginsState.pluginContents,
+	]);
 
 	// Filter items by search query
 	const filteredItems = useMemo(() => {
@@ -273,7 +287,13 @@ export function PluginsScreen() {
 			} else if (item.kind === "plugin" && currentCatIncluded) {
 				if (matchedPluginIds.has(item.id)) {
 					const matched = fuzzyResults.find((r) => r.item.id === item.id);
-					result.push({ ...item, matches: matched?.matches });
+					// 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,
+					});
 				}
 			}
 		}
@@ -283,6 +303,101 @@ export function PluginsScreen() {
 
 	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;
@@ -342,11 +457,10 @@ export function PluginsScreen() {
 		}
 
 		if (
-			(event.name === "left" ||
-				event.name === "right" ||
-				event.name === "<" ||
-				event.name === ">") &&
-			selectableItems[pluginsState.selectedIndex]?.kind === "category"
+			event.name === "left" ||
+			event.name === "right" ||
+			event.name === "<" ||
+			event.name === ">"
 		) {
 			const item = selectableItems[pluginsState.selectedIndex];
 			if (item?.kind === "category") {
@@ -354,8 +468,12 @@ export function PluginsScreen() {
 					type: "PLUGINS_TOGGLE_MARKETPLACE",
 					name: item.marketplace.name,
 				});
+				return;
+			}
+			if (item?.kind === "plugin" && item.isExpandable) {
+				togglePluginContents(item);
+				return;
 			}
-			return;
 		}
 
 		if (isSearchActive) {
@@ -1257,9 +1375,19 @@ export function PluginsScreen() {
 					)}
 				</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),
 			)}
 		/>
 	);

package/src/ui/state/reducer.ts

@@ -21,6 +21,9 @@ export const initialState: AppState = {
 	plugins: {
 		scope: "project",
 		collapsedMarketplaces: new Set(),
+		expandedPlugins: new Set(),
+		pluginContents: new Map(),
+		skillDetails: new Map(),
 		selectedIndex: 0,
 		searchQuery: "",
 		marketplaces: { status: "idle" },
@@ -123,6 +126,59 @@ export function appReducer(state: AppState, action: AppAction): AppState {
 			};
 		}
 
+		case "PLUGINS_TOGGLE_PLUGIN_CONTENTS": {
+			const expanded = new Set(state.plugins.expandedPlugins);
+			if (expanded.has(action.pluginId)) {
+				expanded.delete(action.pluginId);
+			} else {
+				expanded.add(action.pluginId);
+			}
+			return {
+				...state,
+				plugins: { ...state.plugins, expandedPlugins: expanded },
+			};
+		}
+
+		case "PLUGINS_CONTENTS_LOADING":
+		case "PLUGINS_CONTENTS_SUCCESS":
+		case "PLUGINS_CONTENTS_ERROR": {
+			const pluginContents = new Map(state.plugins.pluginContents);
+			if (action.type === "PLUGINS_CONTENTS_LOADING") {
+				pluginContents.set(action.pluginId, { status: "loading" });
+			} else if (action.type === "PLUGINS_CONTENTS_SUCCESS") {
+				pluginContents.set(action.pluginId, {
+					status: "success",
+					components: action.components,
+				});
+			} else {
+				pluginContents.set(action.pluginId, {
+					status: "error",
+					error: action.error,
+				});
+			}
+			return { ...state, plugins: { ...state.plugins, pluginContents } };
+		}
+
+		case "PLUGINS_SKILL_DETAIL_LOADING":
+		case "PLUGINS_SKILL_DETAIL_SUCCESS":
+		case "PLUGINS_SKILL_DETAIL_ERROR": {
+			const skillDetails = new Map(state.plugins.skillDetails);
+			if (action.type === "PLUGINS_SKILL_DETAIL_LOADING") {
+				skillDetails.set(action.key, { status: "loading" });
+			} else if (action.type === "PLUGINS_SKILL_DETAIL_SUCCESS") {
+				skillDetails.set(action.key, {
+					status: "success",
+					detail: action.detail,
+				});
+			} else {
+				skillDetails.set(action.key, {
+					status: "error",
+					error: action.error,
+				});
+			}
+			return { ...state, plugins: { ...state.plugins, skillDetails } };
+		}
+
 		case "PLUGINS_SELECT":
 			return {
 				...state,

package/src/ui/state/types.ts

@@ -1,5 +1,9 @@
 import type { PluginInfo } from "../../services/plugin-manager.js";
 import type { VersionMismatchInfo } from "../../services/plugin-version-check.js";
+import type {
+	PluginComponent,
+	PluginSkillDetail,
+} from "../../services/skills-manager.js";
 import type { StylesSnapshot } from "../../services/styles-manager.js";
 import type {
 	Marketplace,
@@ -128,9 +132,32 @@ export interface ProgressState {
 // Screen State Types
 // ============================================================================
 
+/** Read-only listing of what one plugin ships, fetched on demand. */
+export interface PluginContentsEntry {
+	status: "loading" | "success" | "error";
+	components?: PluginComponent[];
+	error?: string;
+}
+
+/** One skill's SKILL.md, fetched when the cursor settles on its row. */
+export interface PluginSkillDetailEntry {
+	status: "loading" | "success" | "error";
+	detail?: PluginSkillDetail;
+	error?: string;
+}
+
 export interface PluginsScreenState {
 	scope: "project" | "global";
 	collapsedMarketplaces: Set<string>;
+	/**
+	 * Plugin ids whose contents list is open. Opposite default to
+	 * `collapsedMarketplaces`: listing a plugin's contents costs an HTTP call,
+	 * so it stays shut until asked for.
+	 */
+	expandedPlugins: Set<string>;
+	pluginContents: Map<string, PluginContentsEntry>;
+	/** SKILL.md content, keyed `<repo>/<repoPath>`. */
+	skillDetails: Map<string, PluginSkillDetailEntry>;
 	selectedIndex: number;
 	searchQuery: string;
 	marketplaces: AsyncData<Marketplace[]>;
@@ -274,6 +301,21 @@ export type AppAction =
 	| { type: "PLUGINS_SET_SCOPE"; scope: "project" | "global" }
 	| { type: "PLUGINS_TOGGLE_SCOPE" }
 	| { type: "PLUGINS_TOGGLE_MARKETPLACE"; name: string }
+	| { type: "PLUGINS_TOGGLE_PLUGIN_CONTENTS"; pluginId: string }
+	| { type: "PLUGINS_CONTENTS_LOADING"; pluginId: string }
+	| {
+			type: "PLUGINS_CONTENTS_SUCCESS";
+			pluginId: string;
+			components: PluginComponent[];
+	  }
+	| { type: "PLUGINS_CONTENTS_ERROR"; pluginId: string; error: string }
+	| { type: "PLUGINS_SKILL_DETAIL_LOADING"; key: string }
+	| {
+			type: "PLUGINS_SKILL_DETAIL_SUCCESS";
+			key: string;
+			detail: PluginSkillDetail;
+	  }
+	| { type: "PLUGINS_SKILL_DETAIL_ERROR"; key: string; error: string }
 	| { type: "PLUGINS_SELECT"; index: number }
 	| { type: "PLUGINS_SET_SEARCH"; query: string }
 	| { type: "PLUGINS_DATA_LOADING" }

package/src/ui/theme-mode.ts

@@ -71,3 +71,70 @@ export function scopeOffFill(): string {
 	if (detected === "dark") return SCOPE_OFF_FILL.dark;
 	return SCOPE_OFF_FALLBACK;
 }
+
+/**
+ * Badge colours for the four plugin component kinds.
+ *
+ * These are chips, not accents: they sit on hundreds of rows at once, so the
+ * fill has to be a *wash* of the hue rather than the hue itself. That runs into
+ * the same wall `SCOPE_OFF_FILL` documents above — a wash is defined relative to
+ * the page, ANSI has no alpha, so the two ends are picked by hand.
+ *
+ * Hues are deliberately far apart (purple / teal / blue / amber) for the reason
+ * the scope squares are: one character of colour carries no readable hue shift,
+ * only a readable hue *difference*.
+ *
+ * The glyph colour is set per mode too. Reusing the vivid accent over a dark
+ * wash would drop it below the contrast the palette guarantees against the
+ * page — the accent's measured ratio is against `CONTRAST_REFERENCE`, not
+ * against another tint laid on top of it.
+ */
+export const COMPONENT_BADGE = {
+	skill: {
+		light: { bg: "#E9DCF5", fg: "#6B21A8" },
+		dark: { bg: "#2E2140", fg: "#C4A5F0" },
+	},
+	command: {
+		light: { bg: "#D3E7EC", fg: "#0E5F73" },
+		dark: { bg: "#123037", fg: "#7DD3E0" },
+	},
+	agent: {
+		light: { bg: "#DCE4F7", fg: "#1D4ED8" },
+		dark: { bg: "#1B2740", fg: "#A5C0F5" },
+	},
+	mcp: {
+		light: { bg: "#F0E2CE", fg: "#92400E" },
+		dark: { bg: "#3A2A15", fg: "#E5B877" },
+	},
+} as const;
+
+export type ComponentBadgeKind = keyof typeof COMPONENT_BADGE;
+
+/**
+ * The two reference pages, mirrored from `theme.ts`'s `CONTRAST_REFERENCE`.
+ *
+ * Duplicated deliberately: `theme.ts` imports opentui's RGBA, which drags the
+ * renderer into anything that touches it. This module is pure data by design so
+ * the colour tests can run without a terminal. A test asserts the two agree.
+ */
+export const CONTRAST_REFERENCE_KEYS = {
+	light: "#FAFAD2",
+	dark: "#1C1C1E",
+} as const;
+
+/**
+ * Chip colours for one component kind, or `null` when the terminal never
+ * answered the OSC query.
+ *
+ * Null means *no chip* — the caller falls back to a bare glyph. That follows the
+ * rule at the top of this file: an undetected terminal gets today's behaviour
+ * rather than a guess, and here the wrong guess paints a wash of the wrong end
+ * behind every row in the list.
+ */
+export function componentBadge(
+	kind: ComponentBadgeKind,
+): { bg: string; fg: string } | null {
+	if (detected === "light") return COMPONENT_BADGE[kind].light;
+	if (detected === "dark") return COMPONENT_BADGE[kind].dark;
+	return null;
+}