claudeup 4.41.0 → 4.42.0

package/src/ui/adapters/pluginsAdapter.ts

@@ -1,5 +1,7 @@
-import type { Marketplace } from "../../types/index.js";
 import type { PluginInfo } from "../../services/plugin-manager.js";
+import type { PluginComponent } from "../../services/skills-manager.js";
+import type { Marketplace } from "../../types/index.js";
+import type { PluginContentsEntry } from "../state/types.js";
 
 // Virtual marketplace name for the community sub-section of claude-plugins-official
 export const COMMUNITY_VIRTUAL_MARKETPLACE =
@@ -31,9 +33,51 @@ export interface PluginPluginItem {
 	plugin: PluginInfo;
 	/** Fuzzy match highlight indices, if search is active */
 	matches?: number[];
+	/** True when this plugin's contents can be opened with ← / →. */
+	isExpandable: boolean;
+	/** True when its component rows follow below. */
+	isExpanded: boolean;
 }
 
-export type PluginBrowserItem = PluginCategoryItem | PluginPluginItem;
+/**
+ * One component inside an expanded plugin — display only.
+ *
+ * Claude Code installs plugins, not individual pieces, so these rows carry no
+ * action. They exist because a plugin row alone says nothing about what
+ * installing it brings: a marketplace that publishes its whole repo as one
+ * plugin (mattpocock, ecc, ponytail, addy-agent-skills, humanizer and
+ * opendesign all do) rendered as a single unexplained line, and a plugin whose
+ * only content is an MCP server — mnemex — looked like it shipped nothing at
+ * all.
+ */
+export interface PluginComponentItem {
+	id: string;
+	kind: "component";
+	label: string;
+	/** The plugin this belongs to, for the detail panel. */
+	plugin: PluginInfo;
+	component: PluginComponent;
+	/** Repo the component's file is read from. */
+	repo: string;
+	/** Cache key for this component's content. */
+	detailKey: string;
+}
+
+/** Placeholder row shown while a plugin's contents load, or when they cannot. */
+export interface PluginContentsStatusItem {
+	id: string;
+	kind: "contents-status";
+	label: string;
+	plugin: PluginInfo;
+	status: "loading" | "error" | "empty";
+	error?: string;
+}
+
+export type PluginBrowserItem =
+	| PluginCategoryItem
+	| PluginPluginItem
+	| PluginComponentItem
+	| PluginContentsStatusItem;
 
 // ─── Adapter ─────────────────────────────────────────────────────────────────
 
@@ -41,6 +85,94 @@ export interface BuildPluginBrowserItemsArgs {
 	marketplaces: Marketplace[];
 	plugins: PluginInfo[];
 	collapsedMarketplaces: Set<string>;
+	expandedPlugins?: Set<string>;
+	pluginContents?: Map<string, PluginContentsEntry>;
+}
+
+/**
+ * A plugin's contents are listed from its repo tree, so a plugin with no repo
+ * to read (a local-path marketplace, or a plugin whose marketplace has no git
+ * remote) cannot be expanded. Offering the arrow there would open a row that
+ * can only ever say "could not load".
+ */
+export function pluginContentsRepo(
+	plugin: PluginInfo,
+	marketplace: Marketplace,
+): string | undefined {
+	return plugin.sourceRepo || marketplace.source.repo || undefined;
+}
+
+/**
+ * Appends a plugin row, plus its component rows when expanded.
+ */
+function pushPluginItems(
+	items: PluginBrowserItem[],
+	plugin: PluginInfo,
+	marketplace: Marketplace,
+	expandedPlugins: Set<string>,
+	pluginContents: Map<string, PluginContentsEntry>,
+): void {
+	const repo = pluginContentsRepo(plugin, marketplace);
+	const isExpandable = !plugin.isOrphaned && !!repo;
+	const isExpanded = isExpandable && expandedPlugins.has(plugin.id);
+
+	items.push({
+		id: `pl:${plugin.id}`,
+		kind: "plugin",
+		label: plugin.name,
+		plugin,
+		isExpandable,
+		isExpanded,
+	});
+
+	if (!isExpanded) return;
+
+	const entry = pluginContents.get(plugin.id);
+	if (!entry || entry.status === "loading") {
+		items.push({
+			id: `c:${plugin.id}:loading`,
+			kind: "contents-status",
+			label: "Reading the plugin…",
+			plugin,
+			status: "loading",
+		});
+		return;
+	}
+	if (entry.status === "error") {
+		items.push({
+			id: `c:${plugin.id}:error`,
+			kind: "contents-status",
+			label: "Could not read the plugin",
+			plugin,
+			status: "error",
+			error: entry.error,
+		});
+		return;
+	}
+	const components = entry.components ?? [];
+	if (components.length === 0) {
+		items.push({
+			id: `c:${plugin.id}:empty`,
+			kind: "contents-status",
+			label: "Ships no skills, commands, agents or MCP servers",
+			plugin,
+			status: "empty",
+		});
+		return;
+	}
+	for (const component of components) {
+		items.push({
+			id: `c:${plugin.id}:${component.kind}:${component.repoPath}:${component.name}`,
+			kind: "component",
+			label: component.name,
+			plugin,
+			component,
+			// `repo` is non-null here: without one the plugin is not expandable and
+			// this loop is unreachable.
+			repo: repo as string,
+			detailKey: `${repo}/${component.repoPath}#${component.name}`,
+		});
+	}
 }
 
 /**
@@ -90,6 +222,8 @@ export function buildPluginBrowserItems({
 	marketplaces,
 	plugins,
 	collapsedMarketplaces,
+	expandedPlugins = new Set(),
+	pluginContents = new Map(),
 }: BuildPluginBrowserItemsArgs): PluginBrowserItem[] {
 	const pluginsByMarketplace = new Map<string, PluginInfo[]>();
 	for (const plugin of plugins) {
@@ -139,12 +273,13 @@ export function buildPluginBrowserItems({
 			});
 			if (isEnabled && anthropicHasPlugins && !anthropicCollapsed) {
 				for (const plugin of anthropicPlugins) {
-					items.push({
-						id: `pl:${plugin.id}`,
-						kind: "plugin",
-						label: plugin.name,
+					pushPluginItems(
+						items,
 						plugin,
-					});
+						marketplace,
+						expandedPlugins,
+						pluginContents,
+					);
 				}
 			}
 
@@ -175,12 +310,13 @@ export function buildPluginBrowserItems({
 				});
 				if (!communityCollapsed) {
 					for (const plugin of communityPlugins) {
-						items.push({
-							id: `pl:${plugin.id}`,
-							kind: "plugin",
-							label: plugin.name,
+						pushPluginItems(
+							items,
 							plugin,
-						});
+							communityVirtualMp,
+							expandedPlugins,
+							pluginContents,
+						);
 					}
 				}
 			}
@@ -205,12 +341,13 @@ export function buildPluginBrowserItems({
 		// Plugins under this marketplace (if expanded)
 		if (isEnabled && hasPlugins && !isCollapsed) {
 			for (const plugin of marketplacePlugins) {
-				items.push({
-					id: `pl:${plugin.id}`,
-					kind: "plugin",
-					label: plugin.name,
+				pushPluginItems(
+					items,
 					plugin,
-				});
+					marketplace,
+					expandedPlugins,
+					pluginContents,
+				);
 			}
 		}
 	}

package/src/ui/components/primitives/KeyValueLine.tsx

@@ -8,12 +8,18 @@ interface KeyValueLineProps {
 
 /**
  * Aligned label-value pair for detail panels.
- * Label is padded to 10 chars for consistent alignment.
+ *
+ * Labels pad to a 10-column gutter. The trailing space is inside the padding,
+ * not appended after it, so a label at or past 10 columns still separates from
+ * its value instead of running into it: every caller used to pass a short fixed
+ * label, and the first arbitrary one — a skill's `disable-model-invocation`
+ * frontmatter key — rendered as `disable-model-invocationtrue`. Labels of 9
+ * columns or fewer are unaffected.
  */
 export function KeyValueLine({ label, value }: KeyValueLineProps) {
 	return (
 		<text fg={theme.colors.text}>
-			<span fg={theme.colors.muted}>{label.padEnd(10)}</span>
+			<span fg={theme.colors.muted}>{`${label} `.padEnd(10)}</span>
 			{value}
 		</text>
 	);

package/src/ui/renderers/markdownRenderer.tsx

@@ -0,0 +1,302 @@
+import type React from "react";
+import { theme } from "../theme.js";
+
+/**
+ * Markdown → OpenTUI elements, for the detail pane.
+ *
+ * Why not a library. `glow` is a Go binary: it cannot ship inside
+ * `bun build --compile`, and shelling out to something the user may not have
+ * installed turns a display detail into a runtime dependency. The JS options
+ * (`marked-terminal` and friends) emit ANSI escape sequences, which is the
+ * wrong output format — OpenTUI composes `<text>`/`<span>` elements with theme
+ * colours, and feeding it raw escapes bypasses the theme and breaks on a
+ * re-render. This module is ~200 lines and emits elements directly.
+ *
+ * Deliberately partial. It covers what SKILL.md files actually contain:
+ * headings, fenced code, tables, rules, lists, blockquotes, and inline
+ * bold/code. Anything unrecognised falls through as plain text, which is what
+ * the pane showed for everything before.
+ */
+
+export interface MarkdownRenderResult {
+	nodes: React.ReactNode[];
+	/** Lines beyond `maxLines` that were not rendered. */
+	withheld: number;
+}
+
+interface RenderOptions {
+	/** Columns available to the pane, used to size table columns. */
+	width: number;
+	/** Render-cost guard; the pane itself scrolls. */
+	maxLines: number;
+}
+
+// ─── Inline spans ────────────────────────────────────────────────────────────
+
+/**
+ * Split a line into `code`, **bold** and plain runs.
+ *
+ * One pass over both markers rather than nested passes: a nested pass would
+ * re-scan text already claimed by a code span and turn `` `a**b` `` into a bold
+ * run inside code.
+ */
+function inlineSpans(text: string, keyPrefix: string): React.ReactNode[] {
+	const nodes: React.ReactNode[] = [];
+	const pattern = /(`[^`]+`)|(\*\*[^*]+\*\*)/g;
+	let last = 0;
+	let match: RegExpExecArray | null = pattern.exec(text);
+	let i = 0;
+
+	while (match) {
+		if (match.index > last) {
+			nodes.push(
+				<span key={`${keyPrefix}-t${i}`}>{text.slice(last, match.index)}</span>,
+			);
+		}
+		if (match[1]) {
+			nodes.push(
+				<span key={`${keyPrefix}-c${i}`} fg={theme.colors.link}>
+					{match[1].slice(1, -1)}
+				</span>,
+			);
+		} else {
+			nodes.push(
+				<strong key={`${keyPrefix}-b${i}`}>{match[2].slice(2, -2)}</strong>,
+			);
+		}
+		last = match.index + match[0].length;
+		i += 1;
+		match = pattern.exec(text);
+	}
+
+	if (last < text.length) {
+		nodes.push(<span key={`${keyPrefix}-t${i}`}>{text.slice(last)}</span>);
+	}
+	return nodes;
+}
+
+// ─── Tables ──────────────────────────────────────────────────────────────────
+
+/**
+ * Strip inline markers from a table cell.
+ *
+ * Cells are padded to a column width, so they cannot carry `<span>` children
+ * the way body text does without the padding and the spans disagreeing about
+ * length. Removing the markers is the honest trade: a cell reading
+ * `` `context`, `callers` `` printed its backticks verbatim, which is the raw
+ * source leaking into a rendered view.
+ */
+function plainCell(cell: string): string {
+	return cell
+		.trim()
+		.replace(/`([^`]+)`/g, "$1")
+		.replace(/\*\*([^*]+)\*\*/g, "$1")
+		.replace(/<br\s*\/?>/gi, " ");
+}
+
+function splitRow(line: string): string[] {
+	return line
+		.replace(/^\s*\|/, "")
+		.replace(/\|\s*$/, "")
+		.split("|")
+		.map(plainCell);
+}
+
+const isSeparatorRow = (line: string): boolean =>
+	/^\s*\|?[\s:|-]+\|[\s:|-]*$/.test(line) && line.includes("-");
+
+/**
+ * Render a table as aligned columns with a rule under the header.
+ *
+ * Pipes are dropped rather than drawn. In a pane this narrow the vertical bars
+ * cost a column each and, once a cell wraps, line up with nothing — which is
+ * exactly how the raw source read before.
+ */
+function renderTable(
+	rows: string[][],
+	width: number,
+	key: string,
+): React.ReactNode[] {
+	const columns = Math.max(...rows.map((r) => r.length));
+	const natural: number[] = [];
+	for (let c = 0; c < columns; c++) {
+		natural.push(Math.max(1, ...rows.map((r) => (r[c] ?? "").length)));
+	}
+
+	// Shrink the widest column until the row fits. Shrinking the widest keeps a
+	// narrow key column (Mode, Level) intact and takes the space out of the prose
+	// column, which is the one that can afford it.
+	const gap = 2;
+	const budget = Math.max(20, width - 1);
+	const widths = [...natural];
+	const total = () => widths.reduce((a, b) => a + b, 0) + gap * (columns - 1);
+	while (total() > budget) {
+		const widest = widths.indexOf(Math.max(...widths));
+		if (widths[widest] <= 6) break;
+		widths[widest] -= 1;
+	}
+
+	const fit = (cell: string, w: number) =>
+		cell.length <= w ? cell.padEnd(w) : `${cell.slice(0, Math.max(1, w - 1))}…`;
+
+	const nodes: React.ReactNode[] = [];
+	rows.forEach((row, r) => {
+		const line = widths
+			.map((w, c) => fit(row[c] ?? "", w))
+			.join(" ".repeat(gap))
+			.trimEnd();
+
+		nodes.push(
+			// biome-ignore lint/suspicious/noArrayIndexKey: table rows never reorder
+			<text key={`${key}-r${r}`} fg={theme.colors.muted}>
+				{" "}
+				{r === 0 ? <strong>{line}</strong> : line}
+			</text>,
+		);
+
+		if (r === 0) {
+			nodes.push(
+				<text key={`${key}-rule`} fg={theme.colors.dim}>
+					{" "}
+					{widths.map((w) => "─".repeat(w)).join(" ".repeat(gap))}
+				</text>,
+			);
+		}
+	});
+	return nodes;
+}
+
+// ─── Document ────────────────────────────────────────────────────────────────
+
+const HEADING_COLORS = [
+	theme.colors.accent,
+	theme.colors.accent,
+	theme.colors.info,
+	theme.colors.info,
+	theme.colors.muted,
+	theme.colors.muted,
+];
+
+export function renderMarkdown(
+	source: string,
+	{ width, maxLines }: RenderOptions,
+): MarkdownRenderResult {
+	const lines = source.split("\n");
+	const nodes: React.ReactNode[] = [];
+	let i = 0;
+	let emitted = 0;
+
+	const push = (node: React.ReactNode) => {
+		nodes.push(node);
+		emitted += 1;
+	};
+
+	while (i < lines.length && emitted < maxLines) {
+		const line = lines[i];
+
+		// Fenced code. The fence markers are dropped and the block is tinted, so
+		// the reader sees a code block rather than three backticks they have to
+		// mentally strip.
+		const fence = line.match(/^\s*```\s*(\S*)/);
+		if (fence) {
+			const lang = fence[1];
+			i += 1;
+			if (lang) {
+				push(
+					<text key={`f${i}`} fg={theme.colors.dim}>
+						{"  "}
+						{lang}
+					</text>,
+				);
+			}
+			while (i < lines.length && !/^\s*```/.test(lines[i])) {
+				const code = lines[i];
+				push(
+					<text key={`fc${i}`} fg={theme.colors.link}>
+						{`  ${code}` || " "}
+					</text>,
+				);
+				i += 1;
+				if (emitted >= maxLines) break;
+			}
+			i += 1; // closing fence
+			continue;
+		}
+
+		// Table: a pipe row whose successor is a separator row.
+		if (
+			line.trim().startsWith("|") &&
+			i + 1 < lines.length &&
+			isSeparatorRow(lines[i + 1])
+		) {
+			const rows: string[][] = [splitRow(line)];
+			i += 2;
+			while (i < lines.length && lines[i].trim().startsWith("|")) {
+				rows.push(splitRow(lines[i]));
+				i += 1;
+			}
+			for (const node of renderTable(rows, width, `tb${i}`)) push(node);
+			continue;
+		}
+
+		// Horizontal rule. Drawn, rather than left as three hyphens that read as
+		// a stray line of text.
+		if (/^\s*(---+|\*\*\*+|___+)\s*$/.test(line)) {
+			push(
+				<text key={`hr${i}`} fg={theme.colors.dim}>
+					{"─".repeat(Math.max(4, Math.min(width - 1, 60)))}
+				</text>,
+			);
+			i += 1;
+			continue;
+		}
+
+		const heading = line.match(/^(#{1,6})\s+(.*)$/);
+		if (heading) {
+			const level = heading[1].length;
+			push(
+				<text key={`h${i}`} fg={HEADING_COLORS[level - 1]}>
+					<strong>{heading[2]}</strong>
+				</text>,
+			);
+			i += 1;
+			continue;
+		}
+
+		const quote = line.match(/^\s*>\s?(.*)$/);
+		if (quote) {
+			push(
+				<text key={`q${i}`} fg={theme.colors.muted}>
+					<span fg={theme.colors.dim}>{" │ "}</span>
+					{inlineSpans(quote[1], `q${i}`)}
+				</text>,
+			);
+			i += 1;
+			continue;
+		}
+
+		const list = line.match(/^(\s*)([-*+]|\d+\.)\s+(.*)$/);
+		if (list) {
+			const indent = " ".repeat(Math.min(list[1].length, 8));
+			const bullet = /\d/.test(list[2]) ? list[2] : "•";
+			push(
+				<text key={`li${i}`} fg={theme.colors.muted}>
+					{` ${indent}`}
+					<span fg={theme.colors.dim}>{bullet} </span>
+					{inlineSpans(list[3], `li${i}`)}
+				</text>,
+			);
+			i += 1;
+			continue;
+		}
+
+		push(
+			<text key={`p${i}`} fg={theme.colors.muted}>
+				{line ? inlineSpans(line, `p${i}`) : " "}
+			</text>,
+		);
+		i += 1;
+	}
+
+	return { nodes, withheld: Math.max(0, lines.length - i) };
+}