claudeup 4.35.1 → 4.36.0

package/src/ui/adapters/skillsAdapter.ts

@@ -3,47 +3,50 @@ import type { SkillInfo, SkillSetInfo } from "../../types/index.js";
 // ─── Item types ───────────────────────────────────────────────────────────────
 
 export interface SkillCategoryItem {
-  id: string;
-  kind: "category";
-  label: string;
-  title: string;
-  categoryKey: string;
-  count?: number;
-  tone: "purple" | "green" | "teal" | "yellow" | "gray" | "red";
-  badge?: string;
-  star?: string;
+	id: string;
+	kind: "category";
+	label: string;
+	title: string;
+	categoryKey: string;
+	count?: number;
+	tone: "purple" | "green" | "teal" | "yellow" | "gray" | "red";
+	badge?: string;
+	star?: string;
 }
 
 export interface SkillSkillItem {
-  id: string;
-  kind: "skill";
-  label: string;
-  skill: SkillInfo;
-  /** Extra indent level for child skills inside an expanded skill set */
-  indent?: number;
+	id: string;
+	kind: "skill";
+	label: string;
+	skill: SkillInfo;
+	/** Extra indent level for child skills inside an expanded skill set */
+	indent?: number;
 }
 
 export interface SkillSetItem {
-  id: string;
-  kind: "skillset";
-  label: string;
-  skillSet: SkillSetInfo;
-  expanded: boolean;
+	id: string;
+	kind: "skillset";
+	label: string;
+	skillSet: SkillSetInfo;
+	expanded: boolean;
 }
 
-export type SkillBrowserItem = SkillCategoryItem | SkillSkillItem | SkillSetItem;
+export type SkillBrowserItem =
+	| SkillCategoryItem
+	| SkillSkillItem
+	| SkillSetItem;
 
 // ─── Adapter ─────────────────────────────────────────────────────────────────
 
 export interface BuildSkillBrowserItemsArgs {
-  recommended: SkillInfo[];
-  popular: SkillInfo[];
-  installed: SkillInfo[];
-  searchResults: SkillInfo[];
-  query: string;
-  isSearchLoading: boolean;
-  skillSets?: SkillSetInfo[];
-  expandedSets?: Set<string>;
+	recommended: SkillInfo[];
+	popular: SkillInfo[];
+	installed: SkillInfo[];
+	searchResults: SkillInfo[];
+	query: string;
+	isSearchLoading: boolean;
+	skillSets?: SkillSetInfo[];
+	expandedSets?: Set<string>;
 }
 
 /**
@@ -51,172 +54,176 @@ export interface BuildSkillBrowserItemsArgs {
  * Extracted from SkillsScreen so it can be tested independently.
  */
 export function buildSkillBrowserItems({
-  recommended,
-  popular,
-  installed,
-  searchResults,
-  query,
-  isSearchLoading,
-  skillSets = [],
-  expandedSets = new Set(),
+	recommended,
+	popular,
+	installed,
+	searchResults,
+	query,
+	isSearchLoading,
+	skillSets = [],
+	expandedSets = new Set(),
 }: BuildSkillBrowserItemsArgs): SkillBrowserItem[] {
-  const lowerQuery = query.toLowerCase();
-  const items: SkillBrowserItem[] = [];
-
-  // ── INSTALLED: always shown at top (if any) ──
-  const installedFiltered = lowerQuery
-    ? installed.filter((s) => s.name.toLowerCase().includes(lowerQuery))
-    : installed;
-
-  if (installedFiltered.length > 0) {
-    items.push({
-      id: "cat:installed",
-      kind: "category",
-      label: `Installed (${installedFiltered.length})`,
-      title: "Installed",
-      categoryKey: "installed",
-      count: installedFiltered.length,
-      tone: "purple",
-      star: "\u25CF ",
-    });
-    for (const skill of installedFiltered) {
-      items.push({
-        id: `skill:${skill.id}`,
-        kind: "skill",
-        label: skill.name,
-        skill,
-      });
-    }
-  }
-
-  // ── RECOMMENDED: skill sets + individual skills, all as first-class items ──
-  const filteredSets = lowerQuery
-    ? skillSets.filter((s) => {
-        if (s.name.toLowerCase().includes(lowerQuery)) return true;
-        if (s.description.toLowerCase().includes(lowerQuery)) return true;
-        if (s.loaded && s.skills.some((sk) => sk.name.toLowerCase().includes(lowerQuery))) return true;
-        return false;
-      })
-    : skillSets;
-
-  const filteredRec = lowerQuery
-    ? recommended.filter(
-        (s) =>
-          s.name.toLowerCase().includes(lowerQuery) ||
-          (s.description || "").toLowerCase().includes(lowerQuery),
-      )
-    : recommended;
-
-  const recommendedCount = filteredSets.length + filteredRec.length;
-
-  items.push({
-    id: "cat:recommended",
-    kind: "category",
-    label: "Recommended",
-    title: "Recommended",
-    categoryKey: "recommended",
-    count: recommendedCount,
-    tone: "green",
-    star: "\u2605 ",
-  });
-
-  // Skill sets first within recommended
-  for (const set of filteredSets) {
-    const isExpanded = expandedSets.has(set.id);
-    items.push({
-      id: `skillset:${set.id}`,
-      kind: "skillset",
-      label: set.name,
-      skillSet: set,
-      expanded: isExpanded,
-    });
-    // When expanded, show child skills as indented skill items
-    if (isExpanded && set.loaded) {
-      const childSkills = lowerQuery
-        ? set.skills.filter((sk) => sk.name.toLowerCase().includes(lowerQuery))
-        : set.skills;
-      for (const skill of childSkills) {
-        items.push({
-          id: `skill:${skill.id}`,
-          kind: "skill",
-          label: skill.name,
-          skill,
-          indent: 2,
-        });
-      }
-    }
-  }
-
-  // Then individual recommended skills
-  for (const skill of filteredRec) {
-    items.push({
-      id: `skill:${skill.id}`,
-      kind: "skill",
-      label: skill.name,
-      skill,
-    });
-  }
-
-  // ── SEARCH MODE ──
-  if (query.length >= 2) {
-    if (!isSearchLoading && searchResults.length > 0) {
-      const recNames = new Set(recommended.map((s) => s.name));
-      const deduped = searchResults
-        .filter((s) => !recNames.has(s.name))
-        .sort((a, b) => (b.stars ?? 0) - (a.stars ?? 0));
-
-      if (deduped.length > 0) {
-        items.push({
-          id: "cat:search",
-          kind: "category",
-          label: `Search (${deduped.length})`,
-          title: "Search",
-          categoryKey: "popular",
-          count: deduped.length,
-          tone: "teal",
-        });
-        for (const skill of deduped) {
-          items.push({
-            id: `skill:${skill.id}`,
-            kind: "skill",
-            label: skill.name,
-            skill,
-          });
-        }
-      }
-    }
-    return items;
-  }
-
-  // ── POPULAR (default, no search query) — only skills with meaningful stars ──
-  // Dedup by name — API can return same skill name from different repos
-  const seenPopular = new Set<string>();
-  const popularDeduped = popular
-    .filter((s) => (s.stars ?? 0) >= 5)
-    .filter((s) => {
-      if (seenPopular.has(s.name)) return false;
-      seenPopular.add(s.name);
-      return true;
-    });
-  if (popularDeduped.length > 0) {
-    items.push({
-      id: "cat:popular",
-      kind: "category",
-      label: "Popular",
-      title: "Popular",
-      categoryKey: "popular",
-      count: popularDeduped.length,
-      tone: "teal",
-    });
-    for (const skill of popularDeduped) {
-      items.push({
-        id: `skill:${skill.id}`,
-        kind: "skill",
-        label: skill.name,
-        skill,
-      });
-    }
-  }
-
-  return items;
+	const lowerQuery = query.toLowerCase();
+	const items: SkillBrowserItem[] = [];
+
+	// ── INSTALLED: always shown at top (if any) ──
+	const installedFiltered = lowerQuery
+		? installed.filter((s) => s.name.toLowerCase().includes(lowerQuery))
+		: installed;
+
+	if (installedFiltered.length > 0) {
+		items.push({
+			id: "cat:installed",
+			kind: "category",
+			label: `Installed (${installedFiltered.length})`,
+			title: "Installed",
+			categoryKey: "installed",
+			count: installedFiltered.length,
+			tone: "purple",
+			star: "\u25CF ",
+		});
+		for (const skill of installedFiltered) {
+			items.push({
+				id: `skill:${skill.id}`,
+				kind: "skill",
+				label: skill.name,
+				skill,
+			});
+		}
+	}
+
+	// ── RECOMMENDED: skill sets + individual skills, all as first-class items ──
+	const filteredSets = lowerQuery
+		? skillSets.filter((s) => {
+				if (s.name.toLowerCase().includes(lowerQuery)) return true;
+				if (s.description.toLowerCase().includes(lowerQuery)) return true;
+				if (
+					s.loaded &&
+					s.skills.some((sk) => sk.name.toLowerCase().includes(lowerQuery))
+				)
+					return true;
+				return false;
+			})
+		: skillSets;
+
+	const filteredRec = lowerQuery
+		? recommended.filter(
+				(s) =>
+					s.name.toLowerCase().includes(lowerQuery) ||
+					(s.description || "").toLowerCase().includes(lowerQuery),
+			)
+		: recommended;
+
+	const recommendedCount = filteredSets.length + filteredRec.length;
+
+	items.push({
+		id: "cat:recommended",
+		kind: "category",
+		label: "Recommended",
+		title: "Recommended",
+		categoryKey: "recommended",
+		count: recommendedCount,
+		tone: "green",
+		star: "\u2605 ",
+	});
+
+	// Skill sets first within recommended
+	for (const set of filteredSets) {
+		const isExpanded = expandedSets.has(set.id);
+		items.push({
+			id: `skillset:${set.id}`,
+			kind: "skillset",
+			label: set.name,
+			skillSet: set,
+			expanded: isExpanded,
+		});
+		// When expanded, show child skills as indented skill items
+		if (isExpanded && set.loaded) {
+			const childSkills = lowerQuery
+				? set.skills.filter((sk) => sk.name.toLowerCase().includes(lowerQuery))
+				: set.skills;
+			for (const skill of childSkills) {
+				items.push({
+					id: `skill:${skill.id}`,
+					kind: "skill",
+					label: skill.name,
+					skill,
+					indent: 2,
+				});
+			}
+		}
+	}
+
+	// Then individual recommended skills
+	for (const skill of filteredRec) {
+		items.push({
+			id: `skill:${skill.id}`,
+			kind: "skill",
+			label: skill.name,
+			skill,
+		});
+	}
+
+	// ── SEARCH MODE ──
+	if (query.length >= 2) {
+		if (!isSearchLoading && searchResults.length > 0) {
+			const recNames = new Set(recommended.map((s) => s.name));
+			const deduped = searchResults
+				.filter((s) => !recNames.has(s.name))
+				.sort((a, b) => (b.stars ?? 0) - (a.stars ?? 0));
+
+			if (deduped.length > 0) {
+				items.push({
+					id: "cat:search",
+					kind: "category",
+					label: `Search (${deduped.length})`,
+					title: "Search",
+					categoryKey: "popular",
+					count: deduped.length,
+					tone: "teal",
+				});
+				for (const skill of deduped) {
+					items.push({
+						id: `skill:${skill.id}`,
+						kind: "skill",
+						label: skill.name,
+						skill,
+					});
+				}
+			}
+		}
+		return items;
+	}
+
+	// ── POPULAR (default, no search query) — only skills with meaningful stars ──
+	// Dedup by name — API can return same skill name from different repos
+	const seenPopular = new Set<string>();
+	const popularDeduped = popular
+		.filter((s) => (s.stars ?? 0) >= 5)
+		.filter((s) => {
+			if (seenPopular.has(s.name)) return false;
+			seenPopular.add(s.name);
+			return true;
+		});
+	if (popularDeduped.length > 0) {
+		items.push({
+			id: "cat:popular",
+			kind: "category",
+			label: "Popular",
+			title: "Popular",
+			categoryKey: "popular",
+			count: popularDeduped.length,
+			tone: "teal",
+		});
+		for (const skill of popularDeduped) {
+			items.push({
+				id: `skill:${skill.id}`,
+				kind: "skill",
+				label: skill.name,
+				skill,
+			});
+		}
+	}
+
+	return items;
 }

package/src/ui/components/CategoryHeader.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { theme, type UiColor } from "../theme.js";
 
 interface CategoryHeaderProps {
 	/** Category title */
@@ -8,7 +9,7 @@ interface CategoryHeaderProps {
 	/** Status badge (e.g., "✓ Configured", "3 plugins") */
 	status?: string;
 	/** Status badge color */
-	statusColor?: string;
+	statusColor?: UiColor;
 	/** Whether category is expanded */
 	expanded?: boolean;
 	/** Number of items in category */
@@ -19,7 +20,7 @@ export function CategoryHeader({
 	title,
 	version,
 	status,
-	statusColor = "green",
+	statusColor = theme.colors.success,
 	expanded = true,
 	count,
 }: CategoryHeaderProps) {
@@ -30,14 +31,14 @@ export function CategoryHeader({
 
 	// Simple format without dynamic line calculation
 	return (
-		<text>
-			<span fg="#666666">{expandIcon}</span>
-			<span fg="white">
+		<text fg={theme.colors.text}>
+			<span fg={theme.colors.muted}>{expandIcon}</span>
+			<span fg={theme.colors.text}>
 				<strong> {title}</strong>
 			</span>
-			<span fg="#666666">{versionBadge}</span>
-			<span fg="#666666">{countBadge}</span>
-			<span fg="#666666"> ────</span>
+			<span fg={theme.colors.muted}>{versionBadge}</span>
+			<span fg={theme.colors.muted}>{countBadge}</span>
+			<span fg={theme.colors.border}> ────</span>
 			<span fg={statusColor}>{statusText}</span>
 		</text>
 	);

package/src/ui/components/EmptyFilterState.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { theme } from "../theme.js";
 
 interface EmptyFilterStateProps {
 	query: string;
@@ -11,16 +12,20 @@ export function EmptyFilterState({
 }: EmptyFilterStateProps) {
 	return (
 		<box flexDirection="column" marginTop={2} paddingLeft={2} paddingRight={2}>
-			<text fg="yellow">No {entityName} found for "{query}"</text>
+			<text fg={theme.colors.warning}>
+				No {entityName} found for "{query}"
+			</text>
 			<box marginTop={1}>
-				<text fg="gray">Try a different search term, or if you think</text>
+				<text fg={theme.colors.muted}>
+					Try a different search term, or if you think
+				</text>
 			</box>
-			<text fg="gray">this is a bug, report it at:</text>
+			<text fg={theme.colors.muted}>this is a bug, report it at:</text>
 			<box marginTop={1}>
-				<text fg="#5c9aff">github.com/MadAppGang/magus/issues</text>
+				<text fg={theme.colors.link}>github.com/MadAppGang/magus/issues</text>
 			</box>
 			<box marginTop={1}>
-				<text fg="gray">Press Esc to clear the filter.</text>
+				<text fg={theme.colors.muted}>Press Esc to clear the filter.</text>
 			</box>
 		</box>
 	);

package/src/ui/components/ScopeIndicator.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { theme, type UiColor } from "../theme.js";
 
 /**
  * Scope indicator for list items.
@@ -15,16 +16,19 @@ export function scopeIndicatorText(
 	user?: boolean,
 	project?: boolean,
 	local?: boolean,
-): { text: string; segments: Array<{ char: string; bg: string; fg: string }> } {
-	const segments: Array<{ char: string; bg: string; fg: string }> = [
+): {
+	text: string;
+	segments: Array<{ char: string; bg: UiColor; fg: UiColor }>;
+} {
+	const segments: Array<{ char: string; bg: UiColor; fg: UiColor }> = [
 		user
-			? { char: "u", bg: "cyan", fg: "black" }
+			? { char: "u", bg: theme.colors.info, fg: theme.hints.fg }
 			: { char: " ", bg: "", fg: "" },
 		project
-			? { char: "p", bg: "green", fg: "black" }
+			? { char: "p", bg: theme.colors.success, fg: theme.hints.fg }
 			: { char: " ", bg: "", fg: "" },
 		local
-			? { char: "l", bg: "yellow", fg: "black" }
+			? { char: "l", bg: theme.colors.warning, fg: theme.hints.fg }
 			: { char: " ", bg: "", fg: "" },
 	];
 
@@ -42,7 +46,7 @@ export function ScopeIndicator({ user, project, local }: ScopeIndicatorProps) {
 	const { segments } = scopeIndicatorText(user, project, local);
 
 	return (
-		<text>
+		<text fg={theme.colors.text}>
 			{segments.map((s, i) =>
 				s.bg ? (
 					<span key={i} bg={s.bg} fg={s.fg}>

package/src/ui/components/ScrollableList.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
+import { theme } from "../theme.js";
 
 interface ScrollableListProps<T> {
 	/** Array of items to display */
@@ -62,7 +63,7 @@ export function ScrollableList<T>({
 	return (
 		<box flexDirection="column">
 			{showScrollIndicators && hasItemsAbove && (
-				<text fg="cyan">↑ {scrollOffset} more</text>
+				<text fg={theme.colors.info}>↑ {scrollOffset} more</text>
 			)}
 
 			{visibleItems.map(({ item, originalIndex }) => (
@@ -76,7 +77,7 @@ export function ScrollableList<T>({
 			))}
 
 			{showScrollIndicators && hasItemsBelow && (
-				<text fg="cyan">↓ {itemsBelow} more</text>
+				<text fg={theme.colors.info}>↓ {itemsBelow} more</text>
 			)}
 		</box>
 	);

package/src/ui/components/SearchInput.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useKeyboardHandler } from "../hooks/useKeyboardHandler.js";
+import { theme } from "../theme.js";
 
 interface SearchInputProps {
 	/** Current search value */
@@ -41,7 +42,7 @@ export function SearchInput({
 
 	return (
 		<box flexDirection="row">
-			<text fg="cyan">❯ </text>
+			<text fg={theme.colors.info}>❯ </text>
 			<input
 				value={value}
 				onChange={onChange}

package/src/ui/components/StyledText.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { theme } from "../theme.js";
 
 interface StyledTextProps {
 	/** Text content */
@@ -25,8 +26,8 @@ interface StyledTextProps {
  * Converts props to nested tag pattern required by OpenTUI.
  *
  * Example:
- *   <StyledText bold color="green">Success</StyledText>
- *   becomes: <text fg="green"><strong>Success</strong></text>
+ *   <StyledText bold color={theme.colors.success}>Success</StyledText>
+ *   becomes: <text fg={theme.colors.success}><strong>Success</strong></text>
  */
 export function StyledText({
 	children,
@@ -52,12 +53,12 @@ export function StyledText({
 	}
 	// Note: dim and inverse use span with colors since OpenTUI doesn't have these as React elements
 	if (dim) {
-		content = <span fg="#666666">{content}</span>;
+		content = <span fg={theme.colors.muted}>{content}</span>;
 	}
 	if (inverse) {
 		// Inverse effect approximated with contrasting colors
 		content = (
-			<span fg="black" bg="white">
+			<span fg={theme.hints.fg} bg={theme.colors.text}>
 				{content}
 			</span>
 		);

package/src/ui/components/TabBar.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { Screen } from "../state/types.js";
+import { theme } from "../theme.js";
 
 interface Tab {
 	key: string;
@@ -34,7 +35,7 @@ export function TabBar({ currentScreen }: TabBarProps) {
 						{/* Tab content */}
 						{isSelected ? (
 							<box>
-								<text bg="#7e57c2" fg="white">
+								<text bg={theme.colors.accent} fg={theme.hints.fg}>
 									<strong>
 										{" "}
 										{tab.key}:{tab.label}{" "}
@@ -43,14 +44,14 @@ export function TabBar({ currentScreen }: TabBarProps) {
 							</box>
 						) : (
 							<box>
-								<text fg="gray">
+								<text fg={theme.colors.muted}>
 									{" "}
 									{tab.key}:{tab.label}{" "}
 								</text>
 							</box>
 						)}
 						{/* Separator */}
-						{!isLast && <text fg="#666666">│</text>}
+						{!isLast && <text fg={theme.colors.muted}>│</text>}
 					</box>
 				);
 			})}