magus-cli 0.0.0-placeholder → 7.1.0

package/src/ui/renderers/settingsRenderers.tsx

@@ -0,0 +1,218 @@
+import type React from "react";
+import type {
+	SettingsBrowserItem,
+	SettingsCategoryItem,
+	SettingsSettingItem,
+} from "../adapters/settingsAdapter.js";
+import {
+	CATEGORY_BG,
+	CATEGORY_COLOR,
+	CATEGORY_DESCRIPTIONS,
+	CATEGORY_LABELS,
+	formatValue,
+} from "../adapters/settingsAdapter.js";
+import { MetaText, SelectableRow } from "../components/primitives/index.js";
+import type { ItemRenderer } from "../registry.js";
+import { theme } from "../theme.js";
+
+// ─── Category renderer ─────────────────────────────────────────────────────────
+
+const categoryRenderer: ItemRenderer<SettingsCategoryItem> = {
+	renderRow: ({ item, isSelected }) => {
+		const star = item.category === "recommended" ? "★ " : "";
+		const label = `${star}${CATEGORY_LABELS[item.category]}`;
+		const bg = isSelected ? theme.selection.bg : CATEGORY_BG[item.category];
+
+		return (
+			<box width="100%">
+				<text bg={bg} fg={theme.hints.fg}>
+					<strong> {label} </strong>
+				</text>
+			</box>
+		);
+	},
+
+	renderDetail: ({ item }) => {
+		const cat = item.category;
+		return (
+			<box flexDirection="column">
+				<text fg={CATEGORY_COLOR[cat]}>
+					<strong>{CATEGORY_LABELS[cat]}</strong>
+				</text>
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>{CATEGORY_DESCRIPTIONS[cat]}</text>
+				</box>
+			</box>
+		);
+	},
+};
+
+// ─── Setting renderer ──────────────────────────────────────────────────────────
+
+const settingRenderer: ItemRenderer<SettingsSettingItem> = {
+	renderRow: ({ item, isSelected }) => {
+		const { setting } = item;
+		const indicator = item.isDefault ? "○" : "●";
+		const displayValue = formatValue(setting, item.effectiveValue);
+
+		if (isSelected) {
+			return (
+				<text bg={theme.selection.bg} fg={theme.selection.fg}>
+					{" "}
+					{indicator} {setting.name.padEnd(28)}
+					{displayValue}{" "}
+				</text>
+			);
+		}
+
+		const indicatorColor = item.isDefault
+			? theme.colors.muted
+			: theme.colors.info;
+		const valueColor = item.isDefault
+			? theme.colors.muted
+			: theme.colors.success;
+
+		return (
+			<text fg={theme.colors.text}>
+				<span fg={indicatorColor}> {indicator} </span>
+				<span>{setting.name.padEnd(28)}</span>
+				<span fg={valueColor}>{displayValue}</span>
+			</text>
+		);
+	},
+
+	renderDetail: ({ item }) => {
+		const { setting } = item;
+		const scoped = item.scopedValues;
+		const storageDesc =
+			setting.storage.type === "attribution"
+				? "settings.json: attribution"
+				: setting.storage.type === "attribution-text"
+					? "settings.json: attribution"
+					: setting.storage.type === "env"
+						? `env: ${setting.storage.key}`
+						: `settings.json: ${setting.storage.key}`;
+
+		const userValue = formatValue(setting, scoped.user);
+		const projectValue = formatValue(setting, scoped.project);
+		const userIsSet = scoped.user !== undefined && scoped.user !== "";
+		const projectIsSet = scoped.project !== undefined && scoped.project !== "";
+
+		const actionLabel =
+			setting.type === "boolean"
+				? "toggle"
+				: setting.type === "select"
+					? "choose"
+					: "edit";
+
+		return (
+			<box flexDirection="column">
+				<text fg={theme.colors.info}>
+					<strong>{setting.name}</strong>
+				</text>
+				<box marginTop={1}>
+					<text fg={theme.colors.text}>{setting.description}</text>
+				</box>
+
+				<box marginTop={1}>
+					<text fg={theme.colors.text}>
+						<span fg={theme.colors.muted}>Stored </span>
+						<span fg={theme.colors.link}>{storageDesc}</span>
+					</text>
+				</box>
+				{setting.defaultValue !== undefined && (
+					<box>
+						<text fg={theme.colors.text}>
+							<span fg={theme.colors.muted}>Default </span>
+							<span>{setting.defaultValue}</span>
+						</text>
+					</box>
+				)}
+
+				<box flexDirection="column" marginTop={1}>
+					<text fg={theme.colors.text}>{"────────────────────────"}</text>
+					<text fg={theme.colors.text}>
+						<strong>Scopes:</strong>
+					</text>
+					<box marginTop={1} flexDirection="column">
+						<text fg={theme.colors.text}>
+							<span bg={theme.scopes.user} fg={theme.hints.fg}>
+								{" "}
+								u{" "}
+							</span>
+							<span fg={userIsSet ? theme.scopes.user : theme.colors.muted}>
+								{userIsSet ? " ● " : " ○ "}
+							</span>
+							<span fg={theme.scopes.user}>User</span>
+							<span> global</span>
+							<span fg={userIsSet ? theme.scopes.user : theme.colors.muted}>
+								{" "}
+								{userValue}
+							</span>
+						</text>
+						<text fg={theme.colors.text}>
+							<span bg={theme.scopes.project} fg={theme.hints.fg}>
+								{" "}
+								p{" "}
+							</span>
+							<span
+								fg={projectIsSet ? theme.scopes.project : theme.colors.muted}
+							>
+								{projectIsSet ? " ● " : " ○ "}
+							</span>
+							<span fg={theme.scopes.project}>Project</span>
+							<span> team</span>
+							<span
+								fg={projectIsSet ? theme.scopes.project : theme.colors.muted}
+							>
+								{" "}
+								{projectValue}
+							</span>
+						</text>
+					</box>
+				</box>
+
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>
+						Press u/p to {actionLabel} in scope
+					</text>
+				</box>
+			</box>
+		);
+	},
+};
+
+// ─── Dispatch helpers ──────────────────────────────────────────────────────────
+
+export const settingsRenderers: {
+	category: ItemRenderer<SettingsCategoryItem>;
+	setting: ItemRenderer<SettingsSettingItem>;
+} = {
+	category: categoryRenderer,
+	setting: settingRenderer,
+};
+
+export function renderSettingRow(
+	item: SettingsBrowserItem,
+	_index: number,
+	isSelected: boolean,
+): React.ReactNode {
+	if (item.kind === "category") {
+		return settingsRenderers.category.renderRow({ item, isSelected });
+	}
+	return settingsRenderers.setting.renderRow({ item, isSelected });
+}
+
+export function renderSettingDetail(
+	item: SettingsBrowserItem | undefined,
+): React.ReactNode {
+	if (!item)
+		return <text fg={theme.colors.muted}>Select a setting to see details</text>;
+	if (item.kind === "category") {
+		return settingsRenderers.category.renderDetail({ item });
+	}
+	return settingsRenderers.setting.renderDetail({ item });
+}
+
+// Suppress unused import warning — MetaText may be used in future extensions
+void (MetaText as unknown);

package/src/ui/renderers/skillRenderers.tsx

@@ -0,0 +1,479 @@
+import type React from "react";
+import { STAR_RELIABILITY_INFO } from "../../data/skill-repos.js";
+import type { StarReliability } from "../../types/index.js";
+import type {
+	SkillBrowserItem,
+	SkillCategoryItem,
+	SkillSetItem,
+	SkillSkillItem,
+} from "../adapters/skillsAdapter.js";
+import {
+	ActionHints,
+	DetailSection,
+	KeyValueLine,
+	ListCategoryRow,
+	MetaText,
+	ScopeDetail,
+	ScopeSquares,
+	SelectableRow,
+} from "../components/primitives/index.js";
+import type { ItemRenderer } from "../registry.js";
+import { type UiColor, theme } from "../theme.js";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatStarsNum(stars?: number): string {
+	if (!stars) return "";
+	if (stars >= 1000000) return `${(stars / 1000000).toFixed(1)}M`;
+	if (stars >= 10000) return `${Math.round(stars / 1000)}K`;
+	if (stars >= 1000) return `${(stars / 1000).toFixed(1)}K`;
+	return `${stars}`;
+}
+
+/** Star icon and color based on reliability classification */
+function starIcon(reliability?: StarReliability): string {
+	if (reliability === "mega-repo") return "☆";
+	if (reliability === "skill-dump") return "☆";
+	return "★";
+}
+
+function starColor(reliability?: StarReliability): UiColor {
+	if (reliability === "mega-repo") return theme.colors.muted;
+	if (reliability === "skill-dump") return theme.colors.warning;
+	return theme.colors.warning;
+}
+
+function formatStars(stars?: number, reliability?: StarReliability): string {
+	if (!stars) return "";
+	return `${starIcon(reliability)} ${formatStarsNum(stars)}`;
+}
+
+// ─── Category renderer ────────────────────────────────────────────────────────
+
+const categoryRenderer: ItemRenderer<SkillCategoryItem> = {
+	renderRow: ({ item, isSelected }) => {
+		const label = `${item.star ?? ""}${item.title}`;
+		return (
+			<ListCategoryRow
+				selected={isSelected}
+				title={label}
+				count={item.count}
+				badge={item.badge}
+				tone={item.tone}
+			/>
+		);
+	},
+
+	renderDetail: ({ item }) => {
+		const isRec = item.categoryKey === "recommended";
+		return (
+			<box flexDirection="column">
+				<text fg={isRec ? theme.colors.success : theme.colors.info}>
+					<strong>
+						{item.star ?? ""}
+						{item.title}
+					</strong>
+				</text>
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>
+						{isRec
+							? "Curated skills recommended for most projects"
+							: "Popular skills sorted by stars"}
+					</text>
+				</box>
+			</box>
+		);
+	},
+};
+
+// ─── Skill renderer ───────────────────────────────────────────────────────────
+
+const MAX_SKILL_NAME_LEN = 35;
+
+function truncateName(name: string): string {
+	return name.length > MAX_SKILL_NAME_LEN
+		? `${name.slice(0, MAX_SKILL_NAME_LEN - 1)}\u2026`
+		: name;
+}
+
+const skillRenderer: ItemRenderer<SkillSkillItem> = {
+	renderRow: ({ item, isSelected }) => {
+		const { skill } = item;
+		const hasUser = skill.installedScope === "user";
+		const hasProject = skill.installedScope === "project";
+		const reliability = skill.starReliability;
+		const starsStr = formatStars(skill.stars, reliability);
+		const sColor = starColor(reliability);
+		const displayName = truncateName(skill.name);
+		const indentLevel = item.indent ?? 1;
+
+		return (
+			<SelectableRow selected={isSelected} indent={indentLevel}>
+				<ScopeSquares
+					user={hasUser}
+					project={hasProject}
+					selected={isSelected}
+				/>
+				<span> </span>
+				<span
+					fg={
+						isSelected
+							? theme.colors.text
+							: skill.installed
+								? theme.colors.text
+								: theme.colors.muted
+					}
+				>
+					{displayName}
+				</span>
+				{skill.hasUpdate ? (
+					<MetaText text=" ⬆" tone="warning" selected={isSelected} />
+				) : null}
+				{starsStr ? <span fg={sColor}>{`  ${starsStr}`}</span> : null}
+			</SelectableRow>
+		);
+	},
+
+	renderDetail: ({ item }) => {
+		const { skill } = item;
+		const fm = skill.frontmatter;
+		const description = fm?.description || skill.description || "Loading...";
+		const reliability = skill.starReliability;
+		const starsStr = formatStars(skill.stars, reliability);
+		const sColor = starColor(reliability);
+		const reliabilityInfo = reliability
+			? STAR_RELIABILITY_INFO[reliability]
+			: null;
+
+		return (
+			<box flexDirection="column">
+				<text fg={theme.colors.info}>
+					<strong>{skill.name}</strong>
+					{starsStr ? <span fg={sColor}> {starsStr}</span> : null}
+				</text>
+
+				<box marginTop={1}>
+					<text fg={theme.colors.text}>{description}</text>
+				</box>
+
+				{fm?.category ? (
+					<KeyValueLine
+						label="Category"
+						value={<span fg={theme.colors.info}>{fm.category}</span>}
+					/>
+				) : null}
+				{fm?.author ? (
+					<KeyValueLine label="Author" value={<span>{fm.author}</span>} />
+				) : null}
+				{fm?.version ? (
+					<KeyValueLine label="Version" value={<span>{fm.version}</span>} />
+				) : null}
+				{fm?.tags && fm.tags.length > 0 ? (
+					<KeyValueLine
+						label="Tags"
+						value={<span>{(fm.tags as string[]).join(", ")}</span>}
+					/>
+				) : null}
+
+				<DetailSection>
+					<text fg={theme.colors.text}>
+						<span fg={theme.colors.muted}>Source </span>
+						<span fg={theme.colors.link}>{skill.source.repo}</span>
+					</text>
+					<text fg={theme.colors.text}>
+						<span fg={theme.colors.muted}>{"          "}</span>
+						<span fg={theme.colors.muted}>{skill.repoPath}</span>
+					</text>
+				</DetailSection>
+
+				{reliabilityInfo && reliability !== "dedicated" && (
+					<box marginTop={1}>
+						<text fg={theme.colors.text}>
+							<span fg={sColor}>{starIcon(reliability)} </span>
+							<span fg={sColor}>
+								<strong>{reliabilityInfo.label}</strong>
+							</span>
+							<span fg={theme.colors.muted}>
+								{" "}
+								— {reliabilityInfo.description}
+							</span>
+						</text>
+					</box>
+				)}
+
+				<DetailSection>
+					<text fg={theme.colors.text}>{"─".repeat(24)}</text>
+					<text fg={theme.colors.text}>
+						<strong>Scopes:</strong>
+					</text>
+					<box marginTop={1} flexDirection="column">
+						<text fg={theme.colors.text}>
+							<span bg={theme.colors.info} fg={theme.hints.fg}>
+								{" "}
+								u{" "}
+							</span>
+							<span
+								fg={
+									skill.installedScope === "user"
+										? theme.colors.info
+										: theme.colors.muted
+								}
+							>
+								{skill.installedScope === "user" ? " ● " : " ○ "}
+							</span>
+							<span fg={theme.colors.info}>User</span>
+							<span fg={theme.colors.muted}> ~/.claude/skills/</span>
+						</text>
+						<text fg={theme.colors.text}>
+							<span bg={theme.colors.success} fg={theme.hints.fg}>
+								{" "}
+								p{" "}
+							</span>
+							<span
+								fg={
+									skill.installedScope === "project"
+										? theme.colors.success
+										: theme.colors.muted
+								}
+							>
+								{skill.installedScope === "project" ? " ● " : " ○ "}
+							</span>
+							<span fg={theme.colors.success}>Project</span>
+							<span fg={theme.colors.muted}> .claude/skills/</span>
+						</text>
+					</box>
+				</DetailSection>
+
+				{skill.hasUpdate && (
+					<box marginTop={1}>
+						<text bg={theme.colors.warning} fg={theme.hints.fg}>
+							{" "}
+							UPDATE AVAILABLE{" "}
+						</text>
+					</box>
+				)}
+
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>
+						{skill.installed
+							? "Press u/p to toggle scope"
+							: "Press u/p to install"}
+					</text>
+				</box>
+				<box>
+					<text fg={theme.colors.text}>
+						<span bg={theme.colors.dim} fg={theme.hints.fg}>
+							{" "}
+							o{" "}
+						</span>
+						<span fg={theme.colors.muted}> Open in browser</span>
+					</text>
+				</box>
+			</box>
+		);
+	},
+};
+
+// ─── Skill Set renderer ──────────────────────────────────────────────────────
+
+const MAX_SET_NAME_LEN = 28;
+
+const skillSetRenderer: ItemRenderer<SkillSetItem> = {
+	renderRow: ({ item, isSelected }) => {
+		const { skillSet, expanded } = item;
+		const arrow = expanded ? "\u25BC" : "\u25B6";
+		const displayName =
+			skillSet.name.length > MAX_SET_NAME_LEN
+				? `${skillSet.name.slice(0, MAX_SET_NAME_LEN - 1)}\u2026`
+				: skillSet.name;
+
+		// Count installed child skills
+		const installedCount = skillSet.loaded
+			? skillSet.skills.filter((s) => s.installed).length
+			: 0;
+		const totalCount = skillSet.loaded ? skillSet.skills.length : "...";
+		const countStr = `(${installedCount}/${totalCount})`;
+
+		// Any child installed at user or project scope?
+		const hasUser =
+			skillSet.loaded &&
+			skillSet.skills.some((s) => s.installedScope === "user");
+		const hasProject =
+			skillSet.loaded &&
+			skillSet.skills.some((s) => s.installedScope === "project");
+
+		const starsStr = formatStars(skillSet.stars);
+
+		return (
+			<SelectableRow selected={isSelected} indent={1}>
+				<span fg={isSelected ? theme.colors.text : theme.colors.muted}>
+					{arrow}{" "}
+				</span>
+				<span fg={isSelected ? theme.colors.text : theme.colors.warning}>
+					{skillSet.icon}{" "}
+				</span>
+				<span fg={isSelected ? theme.colors.text : theme.colors.info}>
+					<strong>{displayName}</strong>
+				</span>
+				<span fg={isSelected ? theme.selection.dim : theme.colors.muted}>
+					{` ${countStr}`}
+				</span>
+				{starsStr ? (
+					<MetaText
+						text={`  ${starsStr}`}
+						tone="warning"
+						selected={isSelected}
+					/>
+				) : null}
+				<span> </span>
+				<ScopeSquares
+					user={hasUser}
+					project={hasProject}
+					selected={isSelected}
+				/>
+			</SelectableRow>
+		);
+	},
+
+	renderDetail: ({ item }) => {
+		const { skillSet, expanded } = item;
+		const starsStr = formatStars(skillSet.stars);
+
+		return (
+			<box flexDirection="column">
+				<text fg={theme.colors.info}>
+					<strong>
+						{skillSet.icon} {skillSet.name}
+					</strong>
+					{starsStr ? <span fg={theme.colors.warning}> {starsStr}</span> : null}
+				</text>
+
+				<box marginTop={1}>
+					<text fg={theme.colors.text}>{skillSet.description}</text>
+				</box>
+
+				<DetailSection>
+					<text fg={theme.colors.text}>
+						<span fg={theme.colors.muted}>Source </span>
+						<span fg={theme.colors.link}>{skillSet.repo}</span>
+					</text>
+				</DetailSection>
+
+				{skillSet.loading && (
+					<box marginTop={1}>
+						<text fg={theme.colors.warning}>Loading skills...</text>
+					</box>
+				)}
+
+				{skillSet.error && (
+					<box marginTop={1}>
+						<text fg={theme.colors.danger}>Error: {skillSet.error}</text>
+					</box>
+				)}
+
+				{skillSet.loaded && skillSet.skills.length > 0 && (
+					<DetailSection>
+						<text fg={theme.colors.text}>
+							<strong>Skills in this set:</strong>
+							<span fg={theme.colors.muted}>
+								{" "}
+								({skillSet.skills.filter((s) => s.installed).length}/
+								{skillSet.skills.length} installed)
+							</span>
+						</text>
+						<box marginTop={1} flexDirection="column">
+							{skillSet.skills.map((s) => (
+								<text key={s.id}>
+									<span
+										fg={
+											s.installedScope === "user"
+												? theme.colors.info
+												: theme.colors.muted
+										}
+									>
+										{s.installedScope === "user" ? "\u25A0" : "\u25A1"}
+									</span>
+									<span
+										fg={
+											s.installedScope === "project"
+												? theme.colors.success
+												: theme.colors.muted
+										}
+									>
+										{s.installedScope === "project" ? "\u25A0" : "\u25A1"}
+									</span>
+									<span
+										fg={s.installed ? theme.colors.text : theme.colors.muted}
+									>
+										{" "}
+										{s.name}
+									</span>
+								</text>
+							))}
+						</box>
+					</DetailSection>
+				)}
+
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>
+						{expanded
+							? "Press Enter to collapse \u2022 u/p to install all"
+							: "Press Enter to expand \u2022 u/p to install all"}
+					</text>
+				</box>
+				<box>
+					<text fg={theme.colors.text}>
+						<span bg={theme.colors.dim} fg={theme.hints.fg}>
+							{" "}
+							o{" "}
+						</span>
+						<span fg={theme.colors.muted}> Open in browser</span>
+					</text>
+				</box>
+			</box>
+		);
+	},
+};
+
+// ─── Registry ─────────────────────────────────────────────────────────────────
+
+export const skillRenderers: {
+	category: ItemRenderer<SkillCategoryItem>;
+	skill: ItemRenderer<SkillSkillItem>;
+	skillset: ItemRenderer<SkillSetItem>;
+} = {
+	category: categoryRenderer,
+	skill: skillRenderer,
+	skillset: skillSetRenderer,
+};
+
+/**
+ * Dispatch rendering by item kind.
+ */
+export function renderSkillRow(
+	item: SkillBrowserItem,
+	_index: number,
+	isSelected: boolean,
+): React.ReactNode {
+	if (item.kind === "category") {
+		return skillRenderers.category.renderRow({ item, isSelected });
+	}
+	if (item.kind === "skillset") {
+		return skillRenderers.skillset.renderRow({ item, isSelected });
+	}
+	return skillRenderers.skill.renderRow({ item, isSelected });
+}
+
+export function renderSkillDetail(
+	item: SkillBrowserItem | undefined,
+): React.ReactNode {
+	if (!item)
+		return <text fg={theme.colors.muted}>Select a skill to see details</text>;
+	if (item.kind === "category") {
+		return skillRenderers.category.renderDetail({ item });
+	}
+	if (item.kind === "skillset") {
+		return skillRenderers.skillset.renderDetail({ item });
+	}
+	return skillRenderers.skill.renderDetail({ item });
+}