claudeup 4.35.0 → 4.36.0

package/src/ui/renderers/pluginRenderers.tsx

@@ -1,399 +1,453 @@
-import React from "react";
-import type {
-  PluginBrowserItem,
-  PluginCategoryItem,
-  PluginPluginItem,
-} from "../adapters/pluginsAdapter.js";
-import { CategoryHeader } from "../components/CategoryHeader.js";
-import {
-  SelectableRow,
-  ScopeSquares,
-  ActionHints,
-  MetaText,
-  KeyValueLine,
-  DetailSection,
-} from "../components/primitives/index.js";
-import { theme } from "../theme.js";
-import { highlightMatches } from "../../utils/fuzzy-search.js";
+import type React from "react";
 import { getMarketplaceVersion } from "../../services/marketplace-fetcher.js";
 import {
-  isEnabledButNotInstalled,
-  isInstalledInScope,
+	isEnabledButNotInstalled,
+	isInstalledInScope,
 } from "../../services/plugin-manager.js";
+import type { ScopeStatus } from "../../services/plugin-manager.js";
 import { isKnownVersion } from "../../services/version-snapshot.js";
 import type { PluginRelease } from "../../types/index.js";
-import type { ScopeStatus } from "../../services/plugin-manager.js";
+import { highlightMatches } from "../../utils/fuzzy-search.js";
+import type {
+	PluginBrowserItem,
+	PluginCategoryItem,
+	PluginPluginItem,
+} from "../adapters/pluginsAdapter.js";
+import { CategoryHeader } from "../components/CategoryHeader.js";
+import {
+	ActionHints,
+	DetailSection,
+	KeyValueLine,
+	MetaText,
+	ScopeSquares,
+	SelectableRow,
+} from "../components/primitives/index.js";
+import { type UiColor, theme } from "../theme.js";
 
 // ─── Category renderers ───────────────────────────────────────────────────────
 
-function categoryRow(item: PluginCategoryItem, isSelected: boolean): React.ReactNode {
-  const mp = item.marketplace;
-  // Marketplaces that declare a `metadata.version` render "Name v8.0.0 (15)";
-  // those without keep the plain "Name (15)" form.
-  const version = getMarketplaceVersion(mp.name);
-
-  if (isSelected) {
-    const arrow = item.isExpanded ? "▼" : "▶";
-    const versionLabel = version ? ` v${version}` : "";
-    const count = item.pluginCount > 0 ? ` (${item.pluginCount})` : "";
-    return (
-      <SelectableRow selected={true}>
-        <strong>
-          {" "}
-          {arrow} {mp.displayName}
-          {versionLabel}
-          {count}{" "}
-        </strong>
-      </SelectableRow>
-    );
-  }
-
-  // Map tone to a statusColor for CategoryHeader (legacy component)
-  const statusColorMap: Record<PluginCategoryItem["tone"], string> = {
-    yellow: "yellow",
-    gray: "gray",
-    green: "green",
-    red: "red",
-    purple: theme.colors.accent,
-    teal: "cyan",
-    byline: theme.colors.byline,
-  };
-
-  return (
-    <CategoryHeader
-      title={mp.displayName}
-      version={version}
-      expanded={item.isExpanded}
-      count={item.pluginCount}
-      status={item.badge}
-      statusColor={statusColorMap[item.tone]}
-    />
-  );
+function categoryRow(
+	item: PluginCategoryItem,
+	isSelected: boolean,
+): React.ReactNode {
+	const mp = item.marketplace;
+	// Marketplaces that declare a `metadata.version` render "Name v8.0.0 (15)";
+	// those without keep the plain "Name (15)" form.
+	const version = getMarketplaceVersion(mp.name);
+
+	if (isSelected) {
+		const arrow = item.isExpanded ? "▼" : "▶";
+		const versionLabel = version ? ` v${version}` : "";
+		const count = item.pluginCount > 0 ? ` (${item.pluginCount})` : "";
+		return (
+			<SelectableRow selected={true}>
+				<strong>
+					{" "}
+					{arrow} {mp.displayName}
+					{versionLabel}
+					{count}{" "}
+				</strong>
+			</SelectableRow>
+		);
+	}
+
+	// Map tone to a statusColor for CategoryHeader (legacy component)
+	const statusColorMap: Record<PluginCategoryItem["tone"], UiColor> = {
+		yellow: theme.colors.warning,
+		gray: theme.colors.muted,
+		green: theme.colors.success,
+		red: theme.colors.danger,
+		purple: theme.colors.accent,
+		teal: theme.colors.info,
+		byline: theme.colors.byline,
+	};
+
+	return (
+		<CategoryHeader
+			title={mp.displayName}
+			version={version}
+			expanded={item.isExpanded}
+			count={item.pluginCount}
+			status={item.badge}
+			statusColor={statusColorMap[item.tone]}
+		/>
+	);
 }
 
 function categoryDetail(
-  item: PluginCategoryItem,
-  collapsedMarketplaces: Set<string>,
+	item: PluginCategoryItem,
+	collapsedMarketplaces: Set<string>,
 ): React.ReactNode {
-  const mp = item.marketplace;
-  const isEnabled = item.marketplaceEnabled;
-  const isCollapsed = collapsedMarketplaces.has(mp.name);
-  const hasPlugins = item.pluginCount > 0;
-
-  let actionHint = "Add";
-  if (isEnabled) {
-    if (isCollapsed) {
-      actionHint = "Expand";
-    } else if (hasPlugins) {
-      actionHint = "Collapse";
-    } else {
-      actionHint = "Remove";
-    }
-  }
-
-  return (
-    <box flexDirection="column">
-      <text fg={theme.colors.info}>
-        <strong>
-          {mp.displayName}
-          {item.badge ? ` ${item.badge}` : ""}
-        </strong>
-      </text>
-      <text fg={theme.colors.muted}>{mp.description || "No description"}</text>
-      <text fg={isEnabled ? theme.colors.success : theme.colors.muted}>
-        {isEnabled ? "● Added" : "○ Not added"}
-      </text>
-      <text fg={theme.colors.link}>github.com/{mp.source.repo}</text>
-      <text>Plugins: {item.pluginCount}</text>
-      <ActionHints
-        hints={[
-          { key: "Enter", label: actionHint, tone: isEnabled ? "primary" : "default" },
-        ]}
-      />
-      {isEnabled ? (
-        <box>
-          <text fg={theme.colors.muted}>← → to expand/collapse</text>
-        </box>
-      ) : null}
-    </box>
-  );
+	const mp = item.marketplace;
+	const isEnabled = item.marketplaceEnabled;
+	const isCollapsed = collapsedMarketplaces.has(mp.name);
+	const hasPlugins = item.pluginCount > 0;
+
+	let actionHint = "Add";
+	if (isEnabled) {
+		if (isCollapsed) {
+			actionHint = "Expand";
+		} else if (hasPlugins) {
+			actionHint = "Collapse";
+		} else {
+			actionHint = "Remove";
+		}
+	}
+
+	return (
+		<box flexDirection="column">
+			<text fg={theme.colors.info}>
+				<strong>
+					{mp.displayName}
+					{item.badge ? ` ${item.badge}` : ""}
+				</strong>
+			</text>
+			<text fg={theme.colors.muted}>{mp.description || "No description"}</text>
+			<text fg={isEnabled ? theme.colors.success : theme.colors.muted}>
+				{isEnabled ? "● Added" : "○ Not added"}
+			</text>
+			<text fg={theme.colors.link}>github.com/{mp.source.repo}</text>
+			<text fg={theme.colors.text}>Plugins: {item.pluginCount}</text>
+			<ActionHints
+				hints={[
+					{
+						key: "Enter",
+						label: actionHint,
+						tone: isEnabled ? "primary" : "default",
+					},
+				]}
+			/>
+			{isEnabled ? (
+				<box>
+					<text fg={theme.colors.muted}>← → to expand/collapse</text>
+				</box>
+			) : null}
+		</box>
+	);
 }
 
 // ─── Plugin renderers ─────────────────────────────────────────────────────────
 
-function pluginRow(item: PluginPluginItem, isSelected: boolean): React.ReactNode {
-  const { plugin } = item;
-  const hasUser = !!plugin.userScope?.enabled;
-  const hasProject = !!plugin.projectScope?.enabled;
-  const hasLocal = !!plugin.localScope?.enabled;
-  const hasAnyScope = hasUser || hasProject || hasLocal;
-
-  // Enabled somewhere but nothing actually installed — a broken state that used
-  // to render exactly like a healthy install.
-  const notInstalled = isEnabledButNotInstalled(plugin);
-
-  // A known version is one we can actually show. "0.0.0" means installed with an
-  // unknown version (every official Anthropic plugin records it) — never render it.
-  const shownVersion = isKnownVersion(plugin.installedVersion)
-    ? plugin.installedVersion
-    : undefined;
-
-  let versionStr = "";
-  if (plugin.isOrphaned) {
-    // "deprecated" alone reads as "delete me" — but a plugin that merely moved
-    // marketplace is still published, and deleting it loses it for no reason.
-    versionStr = plugin.movedTo
-      ? ` moved → ${plugin.movedTo}`
-      : " deprecated";
-  } else if (notInstalled) {
-    versionStr = " not installed";
-  } else if (hasAnyScope) {
-    // "what just changed" and "what is still available" are independent facts,
-    // and both can be true at once: the prerunner can move a plugin 2.9.0→3.0.1
-    // while the marketplace already offers 3.3.1. These used to share one
-    // if/else chain, so the "updated" badge silently swallowed the pending
-    // update — and the update only reappeared on the next refresh, which read
-    // as the state spontaneously changing. Render them as separate clauses.
-    if (plugin.recentlyUpdatedFrom && shownVersion) {
-      // Show what actually happened, not just where it landed — the update may
-      // have come from Claude Code or the prerunner without ever telling us.
-      versionStr = ` v${plugin.recentlyUpdatedFrom} → v${shownVersion} updated`;
-    } else if (plugin.recentlyInstalled) {
-      // Newly seen. Version is optional here: a plugin can be genuinely
-      // installed with no version we can name.
-      versionStr = shownVersion ? ` v${shownVersion} new` : " new";
-    } else if (shownVersion) {
-      versionStr = ` v${shownVersion}`;
-    }
-
-    // Pending update, regardless of which badge above applied.
-    if (plugin.hasUpdate && plugin.version && versionStr) {
-      versionStr += ` → v${plugin.version} available`;
-    } else if (plugin.contentStale && versionStr) {
-      // Same version, different files. The version compare says "up to date"
-      // and is wrong — only a reinstall delivers the current content.
-      versionStr += " stale — reinstall";
-    }
-  }
-
-  if (isSelected) {
-    return (
-      <text bg={theme.selection.bg} fg={theme.selection.fg}>
-        {" "}
-        <ScopeSquares user={hasUser} project={hasProject} local={hasLocal} selected={true} />
-        {" "}{plugin.name}{versionStr}{" "}
-      </text>
-    );
-  }
-
-  // Fuzzy highlight
-  const segments = item.matches ? highlightMatches(plugin.name, item.matches) : null;
-  const displayName = segments ? segments.map((seg) => seg.text).join("") : plugin.name;
-
-  if (plugin.isOrphaned) {
-    const ver =
-      isKnownVersion(plugin.installedVersion) ? ` v${plugin.installedVersion}` : "";
-    return (
-      <text>
-        <span fg={theme.colors.danger}> ■■■ </span>
-        <span fg={theme.colors.muted}>{displayName}</span>
-        {ver ? <span fg={theme.colors.warning}>{ver}</span> : null}
-        <span fg={theme.colors.danger}> deprecated</span>
-      </text>
-    );
-  }
-
-  return (
-    <text>
-      <span> </span>
-      <ScopeSquares user={hasUser} project={hasProject} local={hasLocal} />
-      <span> </span>
-      <span fg={hasAnyScope && !notInstalled ? theme.colors.text : theme.colors.muted}>
-        {displayName}
-      </span>
-      <MetaText
-        text={versionStr}
-        tone={
-          plugin.recentlyUpdatedFrom || plugin.recentlyInstalled
-            ? "success"
-            : notInstalled || plugin.hasUpdate
-              ? "warning"
-              : "muted"
-        }
-      />
-    </text>
-  );
+function pluginRow(
+	item: PluginPluginItem,
+	isSelected: boolean,
+): React.ReactNode {
+	const { plugin } = item;
+	const hasUser = !!plugin.userScope?.enabled;
+	const hasProject = !!plugin.projectScope?.enabled;
+	const hasLocal = !!plugin.localScope?.enabled;
+	const hasAnyScope = hasUser || hasProject || hasLocal;
+
+	// Enabled somewhere but nothing actually installed — a broken state that used
+	// to render exactly like a healthy install.
+	const notInstalled = isEnabledButNotInstalled(plugin);
+
+	// A known version is one we can actually show. "0.0.0" means installed with an
+	// unknown version (every official Anthropic plugin records it) — never render it.
+	const shownVersion = isKnownVersion(plugin.installedVersion)
+		? plugin.installedVersion
+		: undefined;
+
+	let versionStr = "";
+	if (plugin.isOrphaned) {
+		// "deprecated" alone reads as "delete me" — but a plugin that merely moved
+		// marketplace is still published, and deleting it loses it for no reason.
+		versionStr = plugin.movedTo ? ` moved → ${plugin.movedTo}` : " deprecated";
+	} else if (notInstalled) {
+		versionStr = " not installed";
+	} else if (hasAnyScope) {
+		// "what just changed" and "what is still available" are independent facts,
+		// and both can be true at once: the prerunner can move a plugin 2.9.0→3.0.1
+		// while the marketplace already offers 3.3.1. These used to share one
+		// if/else chain, so the "updated" badge silently swallowed the pending
+		// update — and the update only reappeared on the next refresh, which read
+		// as the state spontaneously changing. Render them as separate clauses.
+		if (plugin.recentlyUpdatedFrom && shownVersion) {
+			// Show what actually happened, not just where it landed — the update may
+			// have come from Claude Code or the prerunner without ever telling us.
+			versionStr = ` v${plugin.recentlyUpdatedFrom} → v${shownVersion} updated`;
+		} else if (plugin.recentlyInstalled) {
+			// Newly seen. Version is optional here: a plugin can be genuinely
+			// installed with no version we can name.
+			versionStr = shownVersion ? ` v${shownVersion} new` : " new";
+		} else if (shownVersion) {
+			versionStr = ` v${shownVersion}`;
+		}
+
+		// Pending update, regardless of which badge above applied.
+		if (plugin.hasUpdate && plugin.version && versionStr) {
+			versionStr += ` → v${plugin.version} available`;
+		} else if (plugin.contentStale && versionStr) {
+			// Same version, different files. The version compare says "up to date"
+			// and is wrong — only a reinstall delivers the current content.
+			versionStr += " stale — reinstall";
+		}
+	}
+
+	if (isSelected) {
+		return (
+			<text bg={theme.selection.bg} fg={theme.selection.fg}>
+				{" "}
+				<ScopeSquares
+					user={hasUser}
+					project={hasProject}
+					local={hasLocal}
+					selected={true}
+				/>{" "}
+				{plugin.name}
+				{versionStr}{" "}
+			</text>
+		);
+	}
+
+	// Fuzzy highlight
+	const segments = item.matches
+		? highlightMatches(plugin.name, item.matches)
+		: null;
+	const displayName = segments
+		? segments.map((seg) => seg.text).join("")
+		: plugin.name;
+
+	if (plugin.isOrphaned) {
+		const ver = isKnownVersion(plugin.installedVersion)
+			? ` v${plugin.installedVersion}`
+			: "";
+		return (
+			<text fg={theme.colors.text}>
+				<span fg={theme.colors.danger}> ■■■ </span>
+				<span fg={theme.colors.muted}>{displayName}</span>
+				{ver ? <span fg={theme.colors.warning}>{ver}</span> : null}
+				<span fg={theme.colors.danger}> deprecated</span>
+			</text>
+		);
+	}
+
+	return (
+		<text fg={theme.colors.text}>
+			<span> </span>
+			<ScopeSquares user={hasUser} project={hasProject} local={hasLocal} />
+			<span> </span>
+			<span
+				fg={
+					hasAnyScope && !notInstalled ? theme.colors.text : theme.colors.muted
+				}
+			>
+				{displayName}
+			</span>
+			<MetaText
+				text={versionStr}
+				tone={
+					plugin.recentlyUpdatedFrom || plugin.recentlyInstalled
+						? "success"
+						: // "not installed" is a broken state — enabled somewhere with
+							// nothing actually installed — while a pending update is
+							// routine. They shared `warning` and so read as the same
+							// severity; red vs amber is the distinction that matters.
+							notInstalled
+							? "danger"
+							: plugin.hasUpdate
+								? "warning"
+								: "muted"
+				}
+			/>
+		</text>
+	);
 }
 
 function pluginDetail(item: PluginPluginItem): 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
-  // exact plugin the row beside it was labelling "not installed".
-  const isInstalled =
-    isInstalledInScope(plugin.userScope) ||
-    isInstalledInScope(plugin.projectScope) ||
-    isInstalledInScope(plugin.localScope);
-  const brokenInstall = isEnabledButNotInstalled(plugin);
-
-  // Orphaned/deprecated plugin
-  if (plugin.isOrphaned) {
-    return (
-      <box flexDirection="column">
-        <box justifyContent="center">
-          <text bg={theme.colors.warning} fg="black">
-            <strong> {plugin.name} — DEPRECATED </strong>
-          </text>
-        </box>
-        <box marginTop={1}>
-          <text fg={theme.colors.warning}>
-            This plugin is no longer in the marketplace.
-          </text>
-        </box>
-        <box marginTop={1}>
-          <text fg={theme.colors.muted}>
-            It was removed from the marketplace but still referenced in your settings. Press d to
-            uninstall and clean up.
-          </text>
-        </box>
-        <ActionHints
-          hints={[{ key: "d", label: isInstalled ? "Remove from all scopes" : "Clean up stale reference", tone: "danger" }]}
-        />
-      </box>
-    );
-  }
-
-  // Build component counts
-  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`);
-  if (plugin.lspServers && Object.keys(plugin.lspServers).length) {
-    components.push(`${Object.keys(plugin.lspServers).length} LSP`);
-  }
-
-  const showVersion = isKnownVersion(plugin.version ?? undefined);
-  const showInstalledVersion =
-    isInstalled && isKnownVersion(plugin.installedVersion);
-
-  return (
-    <box flexDirection="column">
-      {/* Plugin name header */}
-      <box justifyContent="center">
-        <text bg={theme.selection.bg} fg={theme.selection.fg}>
-          <strong>
-            {" "}
-            {plugin.name}
-            {isInstalled && plugin.hasUpdate ? " ⬆" : ""}{" "}
-          </strong>
-        </text>
-      </box>
-
-      {/* Status line */}
-      <box marginTop={1}>
-        <text
-          fg={
-            isInstalled
-              ? theme.colors.success
-              : brokenInstall
-                ? theme.colors.warning
-                : theme.colors.muted
-          }
-        >
-          {isInstalled
-            ? "● Installed"
-            : brokenInstall
-              ? "○ Not installed — enabled in settings, no files on disk"
-              : "○ Not installed"}
-        </text>
-      </box>
-      {brokenInstall ? (
-        <box>
-          <text fg={theme.colors.muted}>
-            Claude Code cannot load it in this state. Press the scope key to
-            repair.
-          </text>
-        </box>
-      ) : null}
-
-      {/* Description */}
-      <box marginTop={1} marginBottom={1}>
-        <text fg={theme.colors.text}>{plugin.description}</text>
-      </box>
-
-      {/* Metadata */}
-      {showVersion ? (
-        <KeyValueLine
-          label="Version"
-          value={
-            <span>
-              <span fg={theme.colors.link}>v{plugin.version}</span>
-              {showInstalledVersion && plugin.installedVersion !== plugin.version ? (
-                <span> (v{plugin.installedVersion} installed)</span>
-              ) : null}
-            </span>
-          }
-        />
-      ) : null}
-      {plugin.category ? (
-        <KeyValueLine
-          label="Category"
-          value={<span fg={theme.colors.accent}>{plugin.category}</span>}
-        />
-      ) : null}
-      {plugin.author ? (
-        <KeyValueLine label="Author" value={<span>{plugin.author.name}</span>} />
-      ) : null}
-      {components.length > 0 ? (
-        <KeyValueLine
-          label="Contains"
-          value={<span fg={theme.colors.warning}>{components.join(" · ")}</span>}
-        />
-      ) : null}
-
-      {/* Scope Status */}
-      <DetailSection>
-        <text>{"─".repeat(24)}</text>
-        <text>
-          <strong>Scopes:</strong>
-        </text>
-        <box marginTop={1} flexDirection="column">
-          <ScopeLine
-            keyHint="u"
-            name="User"
-            qualifier="global"
-            color={theme.scopes.user}
-            scope={plugin.userScope}
-          />
-          <ScopeLine
-            keyHint="p"
-            name="Project"
-            qualifier="team"
-            color={theme.scopes.project}
-            scope={plugin.projectScope}
-          />
-          <ScopeLine
-            keyHint="l"
-            name="Local"
-            qualifier="private"
-            color={theme.scopes.local}
-            scope={plugin.localScope}
-          />
-        </box>
-      </DetailSection>
-
-      {/* Recent releases */}
-      <ReleaseHistory releases={plugin.releases} installedVersion={plugin.installedVersion} />
-
-      {/* Update action */}
-      {isInstalled && plugin.hasUpdate ? (
-        <ActionHints
-          hints={[{ key: "U", label: `Update to v${plugin.version}`, tone: "primary" }]}
-        />
-      ) : null}
-    </box>
-  );
+	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
+	// exact plugin the row beside it was labelling "not installed".
+	const isInstalled =
+		isInstalledInScope(plugin.userScope) ||
+		isInstalledInScope(plugin.projectScope) ||
+		isInstalledInScope(plugin.localScope);
+	const brokenInstall = isEnabledButNotInstalled(plugin);
+
+	// Orphaned/deprecated plugin
+	if (plugin.isOrphaned) {
+		return (
+			<box flexDirection="column">
+				<box justifyContent="center">
+					<text bg={theme.colors.warning} fg={theme.hints.fg}>
+						<strong> {plugin.name} — DEPRECATED </strong>
+					</text>
+				</box>
+				<box marginTop={1}>
+					<text fg={theme.colors.warning}>
+						This plugin is no longer in the marketplace.
+					</text>
+				</box>
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>
+						It was removed from the marketplace but still referenced in your
+						settings. Press d to uninstall and clean up.
+					</text>
+				</box>
+				<ActionHints
+					hints={[
+						{
+							key: "d",
+							label: isInstalled
+								? "Remove from all scopes"
+								: "Clean up stale reference",
+							tone: "danger",
+						},
+					]}
+				/>
+			</box>
+		);
+	}
+
+	// Build component counts
+	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`);
+	if (plugin.lspServers && Object.keys(plugin.lspServers).length) {
+		components.push(`${Object.keys(plugin.lspServers).length} LSP`);
+	}
+
+	const showVersion = isKnownVersion(plugin.version ?? undefined);
+	const showInstalledVersion =
+		isInstalled && isKnownVersion(plugin.installedVersion);
+
+	return (
+		<box flexDirection="column">
+			{/* Plugin name header */}
+			<box justifyContent="center">
+				<text bg={theme.selection.bg} fg={theme.selection.fg}>
+					<strong>
+						{" "}
+						{plugin.name}
+						{isInstalled && plugin.hasUpdate ? " ⬆" : ""}{" "}
+					</strong>
+				</text>
+			</box>
+
+			{/* Status line */}
+			<box marginTop={1}>
+				<text
+					fg={
+						isInstalled
+							? theme.colors.success
+							: brokenInstall
+								? theme.colors.warning
+								: theme.colors.muted
+					}
+				>
+					{isInstalled
+						? "● Installed"
+						: brokenInstall
+							? "○ Not installed — enabled in settings, no files on disk"
+							: "○ Not installed"}
+				</text>
+			</box>
+			{brokenInstall ? (
+				<box>
+					<text fg={theme.colors.muted}>
+						Claude Code cannot load it in this state. Press the scope key to
+						repair.
+					</text>
+				</box>
+			) : null}
+
+			{/* Description */}
+			<box marginTop={1} marginBottom={1}>
+				<text fg={theme.colors.text}>{plugin.description}</text>
+			</box>
+
+			{/* Metadata */}
+			{showVersion ? (
+				<KeyValueLine
+					label="Version"
+					value={
+						<span>
+							<span fg={theme.colors.link}>v{plugin.version}</span>
+							{showInstalledVersion &&
+							plugin.installedVersion !== plugin.version ? (
+								<span> (v{plugin.installedVersion} installed)</span>
+							) : null}
+						</span>
+					}
+				/>
+			) : null}
+			{plugin.category ? (
+				<KeyValueLine
+					label="Category"
+					value={<span fg={theme.colors.accent}>{plugin.category}</span>}
+				/>
+			) : null}
+			{plugin.author ? (
+				<KeyValueLine
+					label="Author"
+					value={<span>{plugin.author.name}</span>}
+				/>
+			) : null}
+			{components.length > 0 ? (
+				<KeyValueLine
+					label="Contains"
+					value={
+						<span fg={theme.colors.warning}>{components.join(" · ")}</span>
+					}
+				/>
+			) : null}
+
+			{/* Scope Status */}
+			<DetailSection>
+				<text fg={theme.colors.text}>{"─".repeat(24)}</text>
+				<text fg={theme.colors.text}>
+					<strong>Scopes:</strong>
+				</text>
+				<box marginTop={1} flexDirection="column">
+					<ScopeLine
+						keyHint="u"
+						name="User"
+						qualifier="global"
+						color={theme.scopes.user}
+						scope={plugin.userScope}
+					/>
+					<ScopeLine
+						keyHint="p"
+						name="Project"
+						qualifier="team"
+						color={theme.scopes.project}
+						scope={plugin.projectScope}
+					/>
+					<ScopeLine
+						keyHint="l"
+						name="Local"
+						qualifier="private"
+						color={theme.scopes.local}
+						scope={plugin.localScope}
+					/>
+				</box>
+			</DetailSection>
+
+			{/* Recent releases */}
+			<ReleaseHistory
+				releases={plugin.releases}
+				installedVersion={plugin.installedVersion}
+			/>
+
+			{/* Update action */}
+			{isInstalled && plugin.hasUpdate ? (
+				<ActionHints
+					hints={[
+						{
+							key: "U",
+							label: `Update to v${plugin.version}`,
+							tone: "primary",
+						},
+					]}
+				/>
+			) : null}
+		</box>
+	);
 }
 
 /**
@@ -405,36 +459,36 @@ function pluginDetail(item: PluginPluginItem): React.ReactNode {
  * different actions from the user and used to look identical.
  */
 function ScopeLine({
-  keyHint,
-  name,
-  qualifier,
-  color,
-  scope,
+	keyHint,
+	name,
+	qualifier,
+	color,
+	scope,
 }: {
-  keyHint: string;
-  name: string;
-  qualifier: string;
-  color: string;
-  scope?: ScopeStatus;
+	keyHint: string;
+	name: string;
+	qualifier: string;
+	color: UiColor;
+	scope?: ScopeStatus;
 }): React.ReactNode {
-  const installed = isInstalledInScope(scope);
-  return (
-    <text>
-      <span bg={color} fg="black">
-        {" "}
-        {keyHint}{" "}
-      </span>
-      <span fg={installed ? color : theme.colors.muted}>
-        {installed ? " ● " : " ○ "}
-      </span>
-      <span fg={color}>{name}</span>
-      <span> {qualifier}</span>
-      {scope?.version ? <span fg={color}> v{scope.version}</span> : null}
-      {!installed && scope?.enabled ? (
-        <span fg={theme.colors.warning}> enabled, not installed</span>
-      ) : null}
-    </text>
-  );
+	const installed = isInstalledInScope(scope);
+	return (
+		<text fg={theme.colors.text}>
+			<span bg={color} fg={theme.hints.fg}>
+				{" "}
+				{keyHint}{" "}
+			</span>
+			<span fg={installed ? color : theme.colors.muted}>
+				{installed ? " ● " : " ○ "}
+			</span>
+			<span fg={color}>{name}</span>
+			<span> {qualifier}</span>
+			{scope?.version ? <span fg={color}> v{scope.version}</span> : null}
+			{!installed && scope?.enabled ? (
+				<span fg={theme.colors.warning}> enabled, not installed</span>
+			) : null}
+		</text>
+	);
 }
 
 /**
@@ -448,60 +502,63 @@ function ScopeLine({
  * releases published), everything renders neutrally rather than guessing.
  */
 function ReleaseHistory({
-  releases,
-  installedVersion,
+	releases,
+	installedVersion,
 }: {
-  releases?: PluginRelease[];
-  installedVersion?: string;
+	releases?: PluginRelease[];
+	installedVersion?: string;
 }): React.ReactNode {
-  if (!releases?.length) return null;
-
-  const installedAt = installedVersion
-    ? releases.findIndex((r) => r.version === installedVersion)
-    : -1;
-
-  return (
-    <DetailSection>
-      <text>{"─".repeat(24)}</text>
-      <text>
-        <strong>Recent releases:</strong>
-      </text>
-      <box marginTop={1} flexDirection="column">
-        {releases.map((release, i) => {
-          const isNewer = installedAt > 0 && i < installedAt;
-          const isInstalled = installedAt >= 0 && i === installedAt;
-          const versionColor = isNewer
-            ? theme.colors.warning
-            : isInstalled
-              ? theme.colors.success
-              : theme.colors.link;
-
-          return (
-            <box key={release.version} flexDirection="column" marginBottom={1}>
-              <text>
-                <span fg={versionColor}>
-                  {isNewer ? "▲ " : isInstalled ? "● " : "  "}v{release.version}
-                </span>
-                {release.date ? (
-                  <span fg={theme.colors.muted}> {release.date}</span>
-                ) : null}
-                {release.kinds?.length ? (
-                  <span fg={theme.colors.dim}> {release.kinds.join(" · ")}</span>
-                ) : null}
-                {isInstalled ? (
-                  <span fg={theme.colors.success}> installed</span>
-                ) : null}
-              </text>
-              <text fg={isNewer ? theme.colors.text : theme.colors.muted}>
-                {"  "}
-                {release.summary}
-              </text>
-            </box>
-          );
-        })}
-      </box>
-    </DetailSection>
-  );
+	if (!releases?.length) return null;
+
+	const installedAt = installedVersion
+		? releases.findIndex((r) => r.version === installedVersion)
+		: -1;
+
+	return (
+		<DetailSection>
+			<text fg={theme.colors.text}>{"─".repeat(24)}</text>
+			<text fg={theme.colors.text}>
+				<strong>Recent releases:</strong>
+			</text>
+			<box marginTop={1} flexDirection="column">
+				{releases.map((release, i) => {
+					const isNewer = installedAt > 0 && i < installedAt;
+					const isInstalled = installedAt >= 0 && i === installedAt;
+					const versionColor = isNewer
+						? theme.colors.warning
+						: isInstalled
+							? theme.colors.success
+							: theme.colors.link;
+
+					return (
+						<box key={release.version} flexDirection="column" marginBottom={1}>
+							<text fg={theme.colors.text}>
+								<span fg={versionColor}>
+									{isNewer ? "▲ " : isInstalled ? "● " : "  "}v{release.version}
+								</span>
+								{release.date ? (
+									<span fg={theme.colors.muted}> {release.date}</span>
+								) : null}
+								{release.kinds?.length ? (
+									<span fg={theme.colors.dim}>
+										{" "}
+										{release.kinds.join(" · ")}
+									</span>
+								) : null}
+								{isInstalled ? (
+									<span fg={theme.colors.success}> installed</span>
+								) : null}
+							</text>
+							<text fg={isNewer ? theme.colors.text : theme.colors.muted}>
+								{"  "}
+								{release.summary}
+							</text>
+						</box>
+					);
+				})}
+			</box>
+		</DetailSection>
+	);
 }
 
 // ─── Public dispatch functions ────────────────────────────────────────────────
@@ -510,26 +567,26 @@ function ReleaseHistory({
  * Render a plugin browser list row by item kind.
  */
 export function renderPluginRow(
-  item: PluginBrowserItem,
-  _index: number,
-  isSelected: boolean,
+	item: PluginBrowserItem,
+	_index: number,
+	isSelected: boolean,
 ): React.ReactNode {
-  if (item.kind === "category") {
-    return categoryRow(item, isSelected);
-  }
-  return pluginRow(item, isSelected);
+	if (item.kind === "category") {
+		return categoryRow(item, isSelected);
+	}
+	return pluginRow(item, isSelected);
 }
 
 /**
  * Render the detail panel for a plugin browser item.
  */
 export function renderPluginDetail(
-  item: PluginBrowserItem | undefined,
-  collapsedMarketplaces: Set<string>,
+	item: PluginBrowserItem | undefined,
+	collapsedMarketplaces: Set<string>,
 ): 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) return <text fg={theme.colors.muted}>Select an item</text>;
+	if (item.kind === "category") {
+		return categoryDetail(item, collapsedMarketplaces);
+	}
+	return pluginDetail(item);
 }