claudeup 4.35.1 → 4.36.0

package/src/opentui.d.ts

@@ -8,6 +8,15 @@
  */
 
 import type { ReactNode } from "react";
+import type { RGBA } from "@opentui/core";
+
+/**
+ * What OpenTUI actually accepts for a colour: a CSS string OR an RGBA, which is
+ * how adaptive colours are expressed (RGBA.defaultForeground(), RGBA.fromIndex()).
+ * These declarations previously said `string`, which made the terminal-resolved
+ * forms a type error and quietly pushed every call site towards absolute hex.
+ */
+type ColorProp = string | RGBA;
 
 declare global {
 	namespace JSX {
@@ -28,7 +37,7 @@ declare global {
 			u: { children?: ReactNode };
 			dim: { children?: ReactNode };
 			a: { href?: string; children?: ReactNode };
-			span: { fg?: string; bg?: string; children?: ReactNode };
+			span: { fg?: ColorProp; bg?: ColorProp; children?: ReactNode };
 		}
 	}
 }
@@ -37,12 +46,12 @@ interface BaseBoxProps {
 	// Borders
 	border?: boolean;
 	borderStyle?: "single" | "double" | "rounded" | "bold";
-	borderColor?: string;
+	borderColor?: ColorProp;
 	title?: string;
 	titleAlignment?: "left" | "center" | "right";
 
 	// Colors
-	backgroundColor?: string;
+	backgroundColor?: ColorProp;
 
 	// Layout (Flexbox)
 	flexDirection?: "row" | "column";
@@ -94,8 +103,8 @@ interface BoxProps extends BaseBoxProps {
 
 interface TextProps {
 	content?: string;
-	fg?: string;
-	bg?: string;
+	fg?: ColorProp;
+	bg?: ColorProp;
 	selectable?: boolean;
 	children?: ReactNode;
 }
@@ -108,10 +117,10 @@ interface InputProps {
 	placeholder?: string;
 	focused?: boolean;
 	width?: number;
-	backgroundColor?: string;
-	textColor?: string;
-	cursorColor?: string;
-	focusedBackgroundColor?: string;
+	backgroundColor?: ColorProp;
+	textColor?: ColorProp;
+	cursorColor?: ColorProp;
+	focusedBackgroundColor?: ColorProp;
 }
 
 interface SelectOption {
@@ -150,8 +159,8 @@ interface ScrollboxProps {
 		scrollbarOptions?: {
 			showArrows?: boolean;
 			trackOptions?: {
-				foregroundColor?: string;
-				backgroundColor?: string;
+				foregroundColor?: ColorProp;
+				backgroundColor?: ColorProp;
 			};
 		};
 	};
@@ -161,7 +170,7 @@ interface ScrollboxProps {
 interface AsciiFontProps {
 	text: string;
 	font?: "tiny" | "block" | "slick" | "shade";
-	color?: string;
+	color?: ColorProp;
 }
 
 interface CodeProps {

package/src/ui/App.tsx

@@ -49,6 +49,7 @@ import {
 } from "../services/version-check.js";
 import { useKeyboardHandler } from "./hooks/useKeyboardHandler.js";
 import { ProgressBar } from "./components/layout/ProgressBar.js";
+import { theme } from "./theme.js";
 
 export const VERSION = getCurrentVersion();
 
@@ -238,15 +239,15 @@ function UpdateBanner({ result }: { result: VersionCheckResult }) {
 
 	return (
 		<box paddingLeft={1} paddingRight={1}>
-			<text bg="yellow" fg="black">
+			<text bg={theme.colors.warning} fg={theme.hints.fg}>
 				<strong> UPDATE </strong>
 			</text>
-			<text fg="yellow">
+			<text fg={theme.colors.warning}>
 				{" "}
 				v{result.currentVersion} → v{result.latestVersion}
 			</text>
-			<text fg="gray"> Run: </text>
-			<text fg="cyan">claudeup update</text>
+			<text fg={theme.colors.muted}> Run: </text>
+			<text fg={theme.colors.info}>claudeup update</text>
 		</box>
 	);
 }
@@ -299,12 +300,12 @@ function AppContentInner({
 			{updateInfo?.updateAvailable && <UpdateBanner result={updateInfo} />}
 			{recoveryReport && (
 				<box paddingLeft={1} paddingRight={1}>
-					<text fg="green">✓ Fixed: {recoveryReport}</text>
+					<text fg={theme.colors.success}>✓ Fixed: {recoveryReport}</text>
 				</box>
 			)}
 			{showDebug && (
 				<box paddingLeft={1} paddingRight={1}>
-					<text fg="#888888">
+					<text fg={theme.colors.muted}>
 						DEBUG: {dimensions.terminalWidth}x{dimensions.terminalHeight} |
 						content={dimensions.contentHeight} | screen=
 						{state.currentRoute.screen}
@@ -340,7 +341,9 @@ function AppContent({ onExit }: AppContentProps) {
 	const [showDebug, setShowDebug] = useState(false);
 	const [updateInfo, setUpdateInfo] = useState<VersionCheckResult | null>(null);
 	const [recoveryReport, setRecoveryReport] = useState<string | null>(null);
-	const [mismatchData, setMismatchData] = useState<VersionMismatchInfo[] | null>(null);
+	const [mismatchData, setMismatchData] = useState<
+		VersionMismatchInfo[] | null
+	>(null);
 	const mismatchModal = useMismatchModal();
 	const [gitignoreData, setGitignoreData] = useState<{
 		violationCount: number;
@@ -472,8 +475,13 @@ function AppContent({ onExit }: AppContentProps) {
 				const result = await checkGitignore(process.cwd());
 				if (result.violationCount > 0) {
 					const s = await loadGitignoreState(process.cwd());
-					const safeCount = s.violations.filter((v) => v.severity === "safe").length;
-					setGitignoreData({ violationCount: result.violationCount, safeCount });
+					const safeCount = s.violations.filter(
+						(v) => v.severity === "safe",
+					).length;
+					setGitignoreData({
+						violationCount: result.violationCount,
+						safeCount,
+					});
 				}
 			} catch {
 				// non-fatal
@@ -491,8 +499,7 @@ function AppContent({ onExit }: AppContentProps) {
 	}, [dispatch]);
 
 	// Count transient banners for dimension calculation
-	const transientBannerCount =
-		recoveryReport ? 1 : 0;
+	const transientBannerCount = recoveryReport ? 1 : 0;
 
 	return (
 		<DimensionsProvider
@@ -507,7 +514,7 @@ function AppContent({ onExit }: AppContentProps) {
 				updateInfo={updateInfo}
 				onExit={onExit}
 				recoveryReport={recoveryReport}
-				/>
+			/>
 		</DimensionsProvider>
 	);
 }

package/src/ui/adapters/pluginsAdapter.ts

@@ -2,34 +2,35 @@ import type { Marketplace } from "../../types/index.js";
 import type { PluginInfo } from "../../services/plugin-manager.js";
 
 // Virtual marketplace name for the community sub-section of claude-plugins-official
-export const COMMUNITY_VIRTUAL_MARKETPLACE = "claude-plugins-official:community";
+export const COMMUNITY_VIRTUAL_MARKETPLACE =
+	"claude-plugins-official:community";
 // The marketplace that gets split into Anthropic Official + Community sections
 export const SPLIT_MARKETPLACE = "claude-plugins-official";
 
 // ─── Item types ───────────────────────────────────────────────────────────────
 
 export interface PluginCategoryItem {
-  id: string;
-  kind: "category";
-  label: string;
-  marketplace: Marketplace;
-  marketplaceEnabled: boolean;
-  pluginCount: number;
-  isExpanded: boolean;
-  isCommunitySection?: boolean;
-  /** Visual tone for the category row */
-  tone: "yellow" | "gray" | "green" | "red" | "purple" | "teal" | "byline";
-  /** Badge text shown on category row (e.g. "★ Official") */
-  badge?: string;
+	id: string;
+	kind: "category";
+	label: string;
+	marketplace: Marketplace;
+	marketplaceEnabled: boolean;
+	pluginCount: number;
+	isExpanded: boolean;
+	isCommunitySection?: boolean;
+	/** Visual tone for the category row */
+	tone: "yellow" | "gray" | "green" | "red" | "purple" | "teal" | "byline";
+	/** Badge text shown on category row (e.g. "★ Official") */
+	badge?: string;
 }
 
 export interface PluginPluginItem {
-  id: string;
-  kind: "plugin";
-  label: string;
-  plugin: PluginInfo;
-  /** Fuzzy match highlight indices, if search is active */
-  matches?: number[];
+	id: string;
+	kind: "plugin";
+	label: string;
+	plugin: PluginInfo;
+	/** Fuzzy match highlight indices, if search is active */
+	matches?: number[];
 }
 
 export type PluginBrowserItem = PluginCategoryItem | PluginPluginItem;
@@ -37,38 +38,38 @@ export type PluginBrowserItem = PluginCategoryItem | PluginPluginItem;
 // ─── Adapter ─────────────────────────────────────────────────────────────────
 
 export interface BuildPluginBrowserItemsArgs {
-  marketplaces: Marketplace[];
-  plugins: PluginInfo[];
-  collapsedMarketplaces: Set<string>;
+	marketplaces: Marketplace[];
+	plugins: PluginInfo[];
+	collapsedMarketplaces: Set<string>;
 }
 
 /**
  * Derives tone and badge for a category item based on marketplace identity.
  */
 function categoryStyling(
-  mp: Marketplace,
-  isCommunitySection: boolean,
-  marketplaceEnabled: boolean,
+	mp: Marketplace,
+	isCommunitySection: boolean,
+	marketplaceEnabled: boolean,
 ): { tone: PluginCategoryItem["tone"]; badge?: string } {
-  if (!marketplaceEnabled) {
-    return { tone: "gray" };
-  }
-  if (isCommunitySection) {
-    return { tone: "gray", badge: "3rd Party" };
-  }
-  if (mp.name === "claude-plugins-official") {
-    return { tone: "yellow", badge: "★ Official" };
-  }
-  if (mp.name === "claude-code-plugins") {
-    return { tone: "red", badge: "⚠ Deprecated" };
-  }
-  if (mp.official) {
-    return { tone: "yellow", badge: "★ Official" };
-  }
-  if (isMadAppGang(mp)) {
-    return { tone: "byline", badge: "by MadAppGang" };
-  }
-  return { tone: "green", badge: "✓ Added" };
+	if (!marketplaceEnabled) {
+		return { tone: "gray" };
+	}
+	if (isCommunitySection) {
+		return { tone: "gray", badge: "3rd Party" };
+	}
+	if (mp.name === "claude-plugins-official") {
+		return { tone: "yellow", badge: "★ Official" };
+	}
+	if (mp.name === "claude-code-plugins") {
+		return { tone: "red", badge: "⚠ Deprecated" };
+	}
+	if (mp.official) {
+		return { tone: "yellow", badge: "★ Official" };
+	}
+	if (isMadAppGang(mp)) {
+		return { tone: "byline", badge: "by MadAppGang" };
+	}
+	return { tone: "green", badge: "✓ Added" };
 }
 
 /**
@@ -78,7 +79,7 @@ function categoryStyling(
  * marketplace sort uses to float MadAppGang entries to the top.
  */
 function isMadAppGang(mp: Marketplace): boolean {
-  return (mp.source.repo ?? "").toLowerCase().startsWith("madappgang/");
+	return (mp.source.repo ?? "").toLowerCase().startsWith("madappgang/");
 }
 
 /**
@@ -86,128 +87,133 @@ function isMadAppGang(mp: Marketplace): boolean {
  * Extracted from PluginsScreen so it can be tested independently.
  */
 export function buildPluginBrowserItems({
-  marketplaces,
-  plugins,
-  collapsedMarketplaces,
+	marketplaces,
+	plugins,
+	collapsedMarketplaces,
 }: BuildPluginBrowserItemsArgs): PluginBrowserItem[] {
-  const pluginsByMarketplace = new Map<string, PluginInfo[]>();
-  for (const plugin of plugins) {
-    const existing = pluginsByMarketplace.get(plugin.marketplace) || [];
-    existing.push(plugin);
-    pluginsByMarketplace.set(plugin.marketplace, existing);
-  }
-
-  // Sort marketplaces: our own (magus*) first, deprecated last, others between.
-  const rank = (m: Marketplace) =>
-    m.owned ? 0 : m.deprecated || m.name === "claude-code-plugins" ? 2 : 1;
-  const sortedMarketplaces = [...marketplaces].sort((a, b) => rank(a) - rank(b));
-
-  const items: PluginBrowserItem[] = [];
-
-  for (const marketplace of sortedMarketplaces) {
-    const marketplacePlugins = pluginsByMarketplace.get(marketplace.name) || [];
-    const isCollapsed = collapsedMarketplaces.has(marketplace.name);
-    const isEnabled = marketplacePlugins.length > 0 || !!marketplace.official;
-    const hasPlugins = marketplacePlugins.length > 0;
-
-    // Special handling: split claude-plugins-official into two sub-sections
-    if (marketplace.name === SPLIT_MARKETPLACE && hasPlugins) {
-      const anthropicPlugins = marketplacePlugins.filter(
-        (p) => p.author?.name?.toLowerCase() === "anthropic",
-      );
-      const communityPlugins = marketplacePlugins.filter(
-        (p) => p.author?.name?.toLowerCase() !== "anthropic",
-      );
-
-      // Sub-section 1: Anthropic Official (plugins by Anthropic)
-      const anthropicCollapsed = collapsedMarketplaces.has(marketplace.name);
-      const anthropicHasPlugins = anthropicPlugins.length > 0;
-      const anthropicStyle = categoryStyling(marketplace, false, isEnabled);
-      items.push({
-        id: `mp:${marketplace.name}`,
-        kind: "category",
-        label: marketplace.displayName,
-        marketplace,
-        marketplaceEnabled: isEnabled,
-        pluginCount: anthropicPlugins.length,
-        isExpanded: !anthropicCollapsed && anthropicHasPlugins,
-        tone: anthropicStyle.tone,
-        badge: anthropicStyle.badge,
-      });
-      if (isEnabled && anthropicHasPlugins && !anthropicCollapsed) {
-        for (const plugin of anthropicPlugins) {
-          items.push({
-            id: `pl:${plugin.id}`,
-            kind: "plugin",
-            label: plugin.name,
-            plugin,
-          });
-        }
-      }
-
-      // Sub-section 2: Community (third-party plugins in same marketplace)
-      if (communityPlugins.length > 0) {
-        const communityVirtualMp: Marketplace = {
-          name: COMMUNITY_VIRTUAL_MARKETPLACE,
-          displayName: "Anthropic Official — 3rd Party",
-          source: marketplace.source,
-          description: "Third-party plugins in the Anthropic Official marketplace",
-        };
-        const communityCollapsed = collapsedMarketplaces.has(COMMUNITY_VIRTUAL_MARKETPLACE);
-        const communityStyle = categoryStyling(communityVirtualMp, true, true);
-        items.push({
-          id: `mp:${COMMUNITY_VIRTUAL_MARKETPLACE}`,
-          kind: "category",
-          label: "Anthropic Official — 3rd Party",
-          marketplace: communityVirtualMp,
-          marketplaceEnabled: true,
-          pluginCount: communityPlugins.length,
-          isExpanded: !communityCollapsed,
-          isCommunitySection: true,
-          tone: communityStyle.tone,
-          badge: communityStyle.badge,
-        });
-        if (!communityCollapsed) {
-          for (const plugin of communityPlugins) {
-            items.push({
-              id: `pl:${plugin.id}`,
-              kind: "plugin",
-              label: plugin.name,
-              plugin,
-            });
-          }
-        }
-      }
-
-      continue;
-    }
-
-    // Category header (marketplace)
-    const style = categoryStyling(marketplace, false, isEnabled);
-    items.push({
-      id: `mp:${marketplace.name}`,
-      kind: "category",
-      label: marketplace.displayName,
-      marketplace,
-      marketplaceEnabled: isEnabled,
-      pluginCount: marketplacePlugins.length,
-      isExpanded: !isCollapsed && hasPlugins,
-      tone: style.tone,
-      badge: style.badge,
-    });
-
-    // 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,
-          plugin,
-        });
-      }
-    }
-  }
-
-  return items;
+	const pluginsByMarketplace = new Map<string, PluginInfo[]>();
+	for (const plugin of plugins) {
+		const existing = pluginsByMarketplace.get(plugin.marketplace) || [];
+		existing.push(plugin);
+		pluginsByMarketplace.set(plugin.marketplace, existing);
+	}
+
+	// Sort marketplaces: our own (magus*) first, deprecated last, others between.
+	const rank = (m: Marketplace) =>
+		m.owned ? 0 : m.deprecated || m.name === "claude-code-plugins" ? 2 : 1;
+	const sortedMarketplaces = [...marketplaces].sort(
+		(a, b) => rank(a) - rank(b),
+	);
+
+	const items: PluginBrowserItem[] = [];
+
+	for (const marketplace of sortedMarketplaces) {
+		const marketplacePlugins = pluginsByMarketplace.get(marketplace.name) || [];
+		const isCollapsed = collapsedMarketplaces.has(marketplace.name);
+		const isEnabled = marketplacePlugins.length > 0 || !!marketplace.official;
+		const hasPlugins = marketplacePlugins.length > 0;
+
+		// Special handling: split claude-plugins-official into two sub-sections
+		if (marketplace.name === SPLIT_MARKETPLACE && hasPlugins) {
+			const anthropicPlugins = marketplacePlugins.filter(
+				(p) => p.author?.name?.toLowerCase() === "anthropic",
+			);
+			const communityPlugins = marketplacePlugins.filter(
+				(p) => p.author?.name?.toLowerCase() !== "anthropic",
+			);
+
+			// Sub-section 1: Anthropic Official (plugins by Anthropic)
+			const anthropicCollapsed = collapsedMarketplaces.has(marketplace.name);
+			const anthropicHasPlugins = anthropicPlugins.length > 0;
+			const anthropicStyle = categoryStyling(marketplace, false, isEnabled);
+			items.push({
+				id: `mp:${marketplace.name}`,
+				kind: "category",
+				label: marketplace.displayName,
+				marketplace,
+				marketplaceEnabled: isEnabled,
+				pluginCount: anthropicPlugins.length,
+				isExpanded: !anthropicCollapsed && anthropicHasPlugins,
+				tone: anthropicStyle.tone,
+				badge: anthropicStyle.badge,
+			});
+			if (isEnabled && anthropicHasPlugins && !anthropicCollapsed) {
+				for (const plugin of anthropicPlugins) {
+					items.push({
+						id: `pl:${plugin.id}`,
+						kind: "plugin",
+						label: plugin.name,
+						plugin,
+					});
+				}
+			}
+
+			// Sub-section 2: Community (third-party plugins in same marketplace)
+			if (communityPlugins.length > 0) {
+				const communityVirtualMp: Marketplace = {
+					name: COMMUNITY_VIRTUAL_MARKETPLACE,
+					displayName: "Anthropic Official — 3rd Party",
+					source: marketplace.source,
+					description:
+						"Third-party plugins in the Anthropic Official marketplace",
+				};
+				const communityCollapsed = collapsedMarketplaces.has(
+					COMMUNITY_VIRTUAL_MARKETPLACE,
+				);
+				const communityStyle = categoryStyling(communityVirtualMp, true, true);
+				items.push({
+					id: `mp:${COMMUNITY_VIRTUAL_MARKETPLACE}`,
+					kind: "category",
+					label: "Anthropic Official — 3rd Party",
+					marketplace: communityVirtualMp,
+					marketplaceEnabled: true,
+					pluginCount: communityPlugins.length,
+					isExpanded: !communityCollapsed,
+					isCommunitySection: true,
+					tone: communityStyle.tone,
+					badge: communityStyle.badge,
+				});
+				if (!communityCollapsed) {
+					for (const plugin of communityPlugins) {
+						items.push({
+							id: `pl:${plugin.id}`,
+							kind: "plugin",
+							label: plugin.name,
+							plugin,
+						});
+					}
+				}
+			}
+
+			continue;
+		}
+
+		// Category header (marketplace)
+		const style = categoryStyling(marketplace, false, isEnabled);
+		items.push({
+			id: `mp:${marketplace.name}`,
+			kind: "category",
+			label: marketplace.displayName,
+			marketplace,
+			marketplaceEnabled: isEnabled,
+			pluginCount: marketplacePlugins.length,
+			isExpanded: !isCollapsed && hasPlugins,
+			tone: style.tone,
+			badge: style.badge,
+		});
+
+		// 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,
+					plugin,
+				});
+			}
+		}
+	}
+
+	return items;
 }