claudeup 4.41.0 → 4.42.0

package/src/ui/renderers/pluginRenderers.tsx

@@ -5,12 +5,15 @@ import {
 	isInstalledInScope,
 } from "../../services/plugin-manager.js";
 import type { ScopeStatus } from "../../services/plugin-manager.js";
+import type { PluginComponentKind } from "../../services/skills-manager.js";
 import { isKnownVersion } from "../../services/version-snapshot.js";
 import type { PluginRelease } from "../../types/index.js";
 import { highlightMatches } from "../../utils/fuzzy-search.js";
 import type {
 	PluginBrowserItem,
 	PluginCategoryItem,
+	PluginComponentItem,
+	PluginContentsStatusItem,
 	PluginPluginItem,
 } from "../adapters/pluginsAdapter.js";
 import { CategoryHeader } from "../components/CategoryHeader.js";
@@ -22,7 +25,13 @@ import {
 	ScopeSquares,
 	SelectableRow,
 } from "../components/primitives/index.js";
+import type {
+	PluginContentsEntry,
+	PluginSkillDetailEntry,
+} from "../state/types.js";
+import { componentBadge as badgeColors } from "../theme-mode.js";
 import { type UiColor, theme } from "../theme.js";
+import { renderMarkdown } from "./markdownRenderer.js";
 
 // ─── Category renderers ───────────────────────────────────────────────────────
 
@@ -190,6 +199,13 @@ function pluginRow(
 		}
 	}
 
+	// Same glyphs as a marketplace row, in a cell that is always two columns
+	// wide. Both halves matter: a different arrow at each level reads as a
+	// different kind of control, and drawing the cell only on the selected row
+	// shifted every plugin name two columns sideways as the cursor passed over
+	// it.
+	const arrow = item.isExpandable ? (item.isExpanded ? "▼ " : "▶ ") : "  ";
+
 	if (isSelected) {
 		return (
 			<text bg={theme.selection.bg} fg={theme.selection.fg}>
@@ -200,6 +216,7 @@ function pluginRow(
 					local={hasLocal}
 					selected={true}
 				/>{" "}
+				{arrow}
 				{plugin.name}
 				{versionStr}{" "}
 			</text>
@@ -221,6 +238,9 @@ function pluginRow(
 		return (
 			<text fg={theme.colors.text}>
 				<span fg={theme.colors.danger}> ■■■ </span>
+				{/* An orphan is never expandable, but it keeps the arrow cell so its
+				    name lands in the same column as every other plugin's. */}
+				<span>{"  "}</span>
 				<span fg={theme.colors.muted}>{displayName}</span>
 				{ver ? <span fg={theme.colors.warning}>{ver}</span> : null}
 				<span fg={theme.colors.danger}> deprecated</span>
@@ -233,6 +253,7 @@ function pluginRow(
 			<span> </span>
 			<ScopeSquares user={hasUser} project={hasProject} local={hasLocal} />
 			<span> </span>
+			<span fg={theme.colors.dim}>{arrow}</span>
 			<span
 				fg={
 					hasAnyScope && !notInstalled ? theme.colors.text : theme.colors.muted
@@ -265,7 +286,10 @@ function pluginRow(
 	);
 }
 
-function pluginDetail(item: PluginPluginItem): React.ReactNode {
+function pluginDetail(
+	item: PluginPluginItem,
+	fetched?: PluginContentsEntry,
+): React.ReactNode {
 	const { plugin } = item;
 	// "Installed" has to mean the same thing here as in the list row. Reading the
 	// `enabledPlugins` flag alone made this panel print "● Installed" for the
@@ -311,14 +335,31 @@ function pluginDetail(item: PluginPluginItem): React.ReactNode {
 		);
 	}
 
-	// Build component counts
+	// Component counts. A listing fetched from the repo tree wins over the
+	// manifest scan on every count it can supply: the scan only sees a
+	// marketplace that is cloned locally, a `featured` marketplace the user has
+	// not added has no clone at all, and the scan misses an MCP server declared
+	// in `.mcp.json` rather than an `mcp-servers/` directory — which is how 5 of
+	// this marketplace's 7 MCP plugins declare theirs, mnemex included.
+	const listed =
+		fetched?.status === "success" ? (fetched.components ?? null) : null;
+	const countOf = (kind: PluginComponentKind, fallback?: string[]) =>
+		listed
+			? listed.filter((c) => c.kind === kind).length
+			: (fallback?.length ?? 0);
+
 	const components: string[] = [];
-	if (plugin.agents?.length) components.push(`${plugin.agents.length} agents`);
-	if (plugin.commands?.length)
-		components.push(`${plugin.commands.length} commands`);
-	if (plugin.skills?.length) components.push(`${plugin.skills.length} skills`);
-	if (plugin.mcpServers?.length)
-		components.push(`${plugin.mcpServers.length} MCP`);
+	const agentCount = countOf("agent", plugin.agents);
+	const commandCount = countOf("command", plugin.commands);
+	const skillCount = countOf("skill", plugin.skills);
+	const mcpCount = countOf("mcp", plugin.mcpServers);
+	/** "1 agent", "2 agents" — a count of one is common enough to read wrong. */
+	const plural = (n: number, noun: string) =>
+		`${n} ${noun}${n === 1 ? "" : "s"}`;
+	if (agentCount) components.push(plural(agentCount, "agent"));
+	if (commandCount) components.push(plural(commandCount, "command"));
+	if (skillCount) components.push(plural(skillCount, "skill"));
+	if (mcpCount) components.push(plural(mcpCount, "MCP server"));
 	if (plugin.lspServers && Object.keys(plugin.lspServers).length) {
 		components.push(`${Object.keys(plugin.lspServers).length} LSP`);
 	}
@@ -434,6 +475,13 @@ function pluginDetail(item: PluginPluginItem): React.ReactNode {
 					}
 				/>
 			) : null}
+			{item.isExpandable ? (
+				<box>
+					<text fg={theme.colors.muted}>
+						← → to {item.isExpanded ? "hide" : "list"} what it contains
+					</text>
+				</box>
+			) : null}
 
 			{/* Scope Status */}
 			<DetailSection>
@@ -599,6 +647,348 @@ function ReleaseHistory({
 	);
 }
 
+// ─── Skill renderers ─────────────────────────────────────────────────────────
+
+/**
+ * Left padding for a component row.
+ *
+ * A plugin name starts at column 7: one leading space, three scope segments,
+ * one space, then the two-column arrow cell. A component's badge occupies
+ * columns 5-7 and its name starts at 9.
+ *
+ * Deliberately no tree glyph. An earlier version drew a `└` on every row, which
+ * introduced a second visual grammar halfway down the list — scope segments
+ * above, box-drawing below — and read as a broken tree, since a real one would
+ * branch with `├` on every row but the last. The badge anchors the row instead,
+ * and says what kind of thing it is at the same time.
+ */
+const COMPONENT_INDENT = " ".repeat(5);
+
+/**
+ * Width of the badge cell plus the gap after it, so status rows line their text
+ * up with the component names.
+ *
+ * The gap is outside the chip, not inside it. Widening the chip to four cells
+ * would have put the extra space on its coloured fill, which makes the chip
+ * bigger rather than separating it from the name.
+ */
+const BADGE_WIDTH = 3;
+const BADGE_GAP = 1;
+
+/**
+ * Type icons.
+ *
+ * Commands and agents take the glyph you address them with — `/name`, `@name` —
+ * so the badge and the thing you type match.
+ *
+ * The skill glyph follows the only convention the ecosystem has. There is no
+ * agreed terminal symbol for a skill: Anthropic ships none (its Skills write-up
+ * uses a folder metaphor in prose only), and the large community directories
+ * distinguish skills from plugins by section heading rather than by symbol. The
+ * two products that do mark them converged on the same idea — Cursor's docs say
+ * a skill badge "defaults to a lightning icon", and the community Skills
+ * sidebar for VS Code uses a sparkle.
+ *
+ * `✱` is the sparkle idea at single width. The canonical glyphs cannot be used:
+ * `⚡` (U+26A1) and `✨` (U+2728) are both East-Asian-Width Wide, i.e. two cells,
+ * which would shift every name on the row. An *asterisk* rather than a
+ * four-pointed star also keeps it clear of `◆` and `✦`, which read as a generic
+ * ornament next to `/` and `@`.
+ *
+ * `⬢` for an MCP server is ours; nobody has a convention there either.
+ *
+ * Every glyph here is single-width — check with `unicodedata.east_asian_width`
+ * before swapping one, and reject anything reporting W or F.
+ */
+export const COMPONENT_ICON: Record<PluginComponentKind, string> = {
+	skill: "✱",
+	command: "/",
+	agent: "@",
+	mcp: "⬢",
+};
+
+const COMPONENT_COLOR: Record<PluginComponentKind, UiColor> = {
+	skill: theme.colors.accent,
+	command: theme.colors.info,
+	agent: theme.colors.link,
+	mcp: theme.colors.warning,
+};
+
+const COMPONENT_NOUN: Record<PluginComponentKind, string> = {
+	skill: "Skill",
+	command: "Command",
+	agent: "Subagent",
+	mcp: "MCP server",
+};
+
+/**
+ * The type badge: one glyph in a padded, washed cell.
+ *
+ * Three states, and each exists for a reason.
+ *
+ * On a *selected* row the whole line is painted in the selection colour, so the
+ * badge drops its own fill — a chip of a third colour inside an inverted row is
+ * the noisiest thing on the screen, and the selection already says where you
+ * are.
+ *
+ * When the terminal never answered the theme query there is no fill either.
+ * `componentBadge()` returns null there by design; painting a light wash on an
+ * unknown page risks a bright band across every row of a long list.
+ *
+ * Otherwise: a wash of the kind's hue, quiet enough to sit on hundreds of rows.
+ */
+function componentBadge(
+	kind: PluginComponentKind,
+	isSelected: boolean,
+): React.ReactNode {
+	const icon = COMPONENT_ICON[kind];
+	if (isSelected) return ` ${icon} `;
+
+	const chip = badgeColors(kind);
+	if (!chip) {
+		return <span fg={COMPONENT_COLOR[kind]}>{` ${icon} `}</span>;
+	}
+	return <span bg={chip.bg} fg={chip.fg}>{` ${icon} `}</span>;
+}
+
+function componentRow(
+	item: PluginComponentItem,
+	isSelected: boolean,
+): React.ReactNode {
+	const { component } = item;
+	const label = component.group
+		? `${component.group}/${component.name}`
+		: component.name;
+
+	if (isSelected) {
+		return (
+			<text bg={theme.selection.bg} fg={theme.selection.fg}>
+				{COMPONENT_INDENT}
+				{componentBadge(component.kind, true)}
+				{`${" ".repeat(BADGE_GAP)}${label} `}
+			</text>
+		);
+	}
+	return (
+		<text fg={theme.colors.muted}>
+			{COMPONENT_INDENT}
+			{componentBadge(component.kind, false)}
+			{`${" ".repeat(BADGE_GAP)}${label}`}
+		</text>
+	);
+}
+
+function contentsStatusRow(
+	item: PluginContentsStatusItem,
+	isSelected: boolean,
+): React.ReactNode {
+	const pad = COMPONENT_INDENT + " ".repeat(BADGE_WIDTH + BADGE_GAP);
+	if (isSelected) {
+		return (
+			<text bg={theme.selection.bg} fg={theme.selection.fg}>
+				{`${pad}${item.label} `}
+			</text>
+		);
+	}
+	return (
+		<text
+			fg={item.status === "error" ? theme.colors.warning : theme.colors.dim}
+		>
+			{`${pad}${item.label}`}
+		</text>
+	);
+}
+
+/**
+ * How much of a component's file the panel prints.
+ *
+ * The detail pane is a scroll box (PgUp/PgDn, Ctrl+U/Ctrl+D), so this is a
+ * render-cost guard, not a reading limit — high enough that essentially every
+ * real file prints whole. When it does bite, the panel says how many lines it
+ * withheld: a body that simply stops reads as a truncated *file*, which is a
+ * different and more alarming claim than a truncated view.
+ */
+const BODY_LINES = 400;
+
+/** Frontmatter keys already shown in the header, so the table skips them. */
+const HEADER_KEYS = new Set(["name", "description"]);
+
+function componentDetail(
+	item: PluginComponentItem,
+	entry?: PluginSkillDetailEntry,
+	width = 80,
+): React.ReactNode {
+	const { component, plugin } = item;
+	const detail = entry?.status === "success" ? entry.detail : undefined;
+	const isMcp = component.kind === "mcp";
+
+	const described = detail?.frontmatter.find((f) => f.key === "description");
+	const titled = detail?.frontmatter.find((f) => f.key === "name");
+	const rest = (detail?.frontmatter ?? []).filter(
+		(f) => !HEADER_KEYS.has(f.key) && f.value,
+	);
+
+	const rendered = detail
+		? renderMarkdown(detail.body, { width, maxLines: BODY_LINES })
+		: null;
+
+	return (
+		<box flexDirection="column">
+			<box justifyContent="center">
+				<text bg={theme.selection.bg} fg={theme.selection.fg}>
+					<strong>
+						{" "}
+						{COMPONENT_ICON[component.kind]} {titled?.value ||
+							component.name}{" "}
+					</strong>
+				</text>
+			</box>
+
+			{described ? (
+				<box marginTop={1}>
+					<text fg={theme.colors.text}>{described.value}</text>
+				</box>
+			) : null}
+
+			<box marginTop={1} flexDirection="column">
+				<KeyValueLine
+					label="Kind"
+					value={
+						<span>
+							{componentBadge(component.kind, false)}
+							<span fg={COMPONENT_COLOR[component.kind]}>
+								{` ${COMPONENT_NOUN[component.kind]}`}
+							</span>
+						</span>
+					}
+				/>
+				<KeyValueLine
+					label="Plugin"
+					value={<span fg={theme.colors.accent}>{plugin.name}</span>}
+				/>
+				{component.group ? (
+					<KeyValueLine
+						label="Group"
+						value={<span fg={theme.colors.accent}>{component.group}</span>}
+					/>
+				) : null}
+				{component.mcpCommand ? (
+					<KeyValueLine
+						label="Runs"
+						value={<span fg={theme.colors.link}>{component.mcpCommand}</span>}
+					/>
+				) : null}
+				<KeyValueLine
+					label="Path"
+					value={<span fg={theme.colors.link}>{component.repoPath}</span>}
+				/>
+				{rest.map((field) => (
+					<KeyValueLine
+						key={field.key}
+						label={field.key}
+						value={<span fg={theme.colors.warning}>{field.value}</span>}
+					/>
+				))}
+			</box>
+
+			{/* An MCP server is declared in JSON, not a markdown document, so there
+			    is no body to fetch — the Runs line above is the whole of it. */}
+			{!isMcp && (entry?.status === "loading" || !entry) ? (
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>Reading {component.repoPath}…</text>
+				</box>
+			) : null}
+
+			{entry?.status === "error" ? (
+				<box marginTop={1} flexDirection="column">
+					<text fg={theme.colors.warning}>
+						Could not read it: {entry.error}
+					</text>
+					<text fg={theme.colors.muted}>
+						Set GITHUB_TOKEN to raise the 60-per-hour unauthenticated limit.
+					</text>
+				</box>
+			) : null}
+
+			{rendered && rendered.nodes.length > 0 ? (
+				<DetailSection>
+					<text fg={theme.colors.text}>{"─".repeat(24)}</text>
+					<box marginTop={1} flexDirection="column">
+						{rendered.nodes}
+					</box>
+					{rendered.withheld > 0 ? (
+						<box marginTop={1}>
+							<text fg={theme.colors.dim}>
+								… {rendered.withheld} more lines in the file
+							</text>
+						</box>
+					) : null}
+				</DetailSection>
+			) : null}
+
+			{detail && detail.body.length === 0 ? (
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>Frontmatter only — no body.</text>
+				</box>
+			) : null}
+
+			<box marginTop={1}>
+				<text fg={theme.colors.dim}>
+					Installing {plugin.name} installs this. Plugin components are not
+					installed one at a time.
+				</text>
+			</box>
+		</box>
+	);
+}
+
+function contentsStatusDetail(item: PluginContentsStatusItem): React.ReactNode {
+	if (item.status === "error") {
+		return (
+			<box flexDirection="column">
+				<text fg={theme.colors.warning}>
+					<strong>Could not read {item.plugin.name}</strong>
+				</text>
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>{item.error || "Unknown error."}</text>
+				</box>
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>
+						A marketplace you have added is read from its local clone and needs
+						no network. This one is not added, so its contents come from the
+						GitHub API — where an unauthenticated client gets 60 requests an
+						hour across every repo on screen combined.
+					</text>
+				</box>
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>
+						Add the marketplace to read it from disk instead, or set
+						GITHUB_TOKEN to raise the limit. Collapse and expand to retry — the
+						failure is not cached.
+					</text>
+				</box>
+			</box>
+		);
+	}
+	if (item.status === "empty") {
+		return (
+			<box flexDirection="column">
+				<text fg={theme.colors.text}>
+					<strong>{item.plugin.name} ships no components</strong>
+				</text>
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>
+						No skills, commands, subagents or MCP servers were found in its
+						directory. It may ship hooks, an output style, or nothing but
+						documentation.
+					</text>
+				</box>
+			</box>
+		);
+	}
+	return <text fg={theme.colors.muted}>Reading the repo tree…</text>;
+}
+
 // ─── Public dispatch functions ────────────────────────────────────────────────
 
 /**
@@ -612,6 +1002,12 @@ export function renderPluginRow(
 	if (item.kind === "category") {
 		return categoryRow(item, isSelected);
 	}
+	if (item.kind === "component") {
+		return componentRow(item, isSelected);
+	}
+	if (item.kind === "contents-status") {
+		return contentsStatusRow(item, isSelected);
+	}
 	return pluginRow(item, isSelected);
 }
 
@@ -621,10 +1017,20 @@ export function renderPluginRow(
 export function renderPluginDetail(
 	item: PluginBrowserItem | undefined,
 	collapsedMarketplaces: Set<string>,
+	pluginContents?: Map<string, PluginContentsEntry>,
+	skillDetails?: Map<string, PluginSkillDetailEntry>,
+	/** Columns the detail pane has, so a markdown table can size its columns. */
+	width?: number,
 ): React.ReactNode {
 	if (!item) return <text fg={theme.colors.muted}>Select an item</text>;
 	if (item.kind === "category") {
 		return categoryDetail(item, collapsedMarketplaces);
 	}
-	return pluginDetail(item);
+	if (item.kind === "component") {
+		return componentDetail(item, skillDetails?.get(item.detailKey), width);
+	}
+	if (item.kind === "contents-status") {
+		return contentsStatusDetail(item);
+	}
+	return pluginDetail(item, pluginContents?.get(item.plugin.id));
 }