magus-cli 7.3.1 → 7.4.0

package/src/ui/renderers/pluginRenderers.tsx

@@ -27,14 +27,17 @@ import {
 	DetailSection,
 	KeyValueLine,
 	MetaText,
+	ScopeDot,
+	ScopeKeyChip,
 	ScopeSquares,
 	SelectableRow,
+	rowLead,
 } from "../components/primitives/index.js";
 import type {
 	PluginContentsEntry,
 	PluginSkillDetailEntry,
 } from "../state/types.js";
-import { componentBadge as badgeColors } from "../theme-mode.js";
+import { componentChip } from "../theme-mode.js";
 import { type UiColor, theme } from "../theme.js";
 import { renderMarkdown } from "./markdownRenderer.js";
 import { type PluginRowSegment, pluginRowText } from "./pluginRowText.js";
@@ -58,7 +61,7 @@ function categoryRow(
 		return (
 			<SelectableRow selected={true}>
 				<strong>
-					{" "}
+					{rowLead(true)}
 					{arrow} {mp.displayName}
 					{versionLabel}
 					{count}{" "}
@@ -67,14 +70,13 @@ function categoryRow(
 		);
 	}
 
-	// Map tone to a statusColor for CategoryHeader (legacy component)
+	// The adapter names a role; the badge after the title wears its ink.
 	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,
+		neutral: theme.colors.muted,
+		info: theme.colors.info,
+		success: theme.colors.success,
+		warning: theme.colors.warning,
+		danger: theme.colors.danger,
 		byline: theme.colors.byline,
 	};
 
@@ -122,7 +124,7 @@ function categoryDetail(
 			<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.info}>github.com/{mp.source.repo}</text>
 			<text fg={theme.colors.text}>Plugins: {item.pluginCount}</text>
 			<ActionHints
 				hints={[
@@ -185,6 +187,9 @@ function RowSegments({
 	);
 }
 
+/** Drawn in the scope column of a plugin no marketplace we read lists. */
+const ORPHAN_MARK = "✗";
+
 function pluginRow(
 	item: PluginPluginItem,
 	isSelected: boolean,
@@ -210,7 +215,7 @@ function pluginRow(
 	if (isSelected) {
 		return (
 			<text bg={theme.selection.bg} fg={theme.selection.fg}>
-				{" "}
+				{rowLead(true)}
 				<ScopeSquares
 					user={hasUser}
 					project={hasProject}
@@ -233,12 +238,16 @@ function pluginRow(
 		: plugin.name;
 
 	if (plugin.isOrphaned) {
-		// The red squares are the presence marker for "published by no marketplace
-		// we read". WHAT is known about it — moved, withdrawn, or its marketplace
-		// was never read — is the status suffix, the same words the CLI prints.
+		// ✗ in the scope column is the presence marker for "published by no
+		// marketplace we read" — not three squares, which would claim it is
+		// installed at every scope. WHAT is known about it — moved, withdrawn, or
+		// its marketplace was never read — is the status suffix, the same words
+		// the CLI prints.
 		return (
 			<text fg={theme.colors.text}>
-				<span fg={theme.colors.danger}> ■■■ </span>
+				<span
+					fg={theme.colors.danger}
+				>{`${rowLead(false)} ${ORPHAN_MARK}  `}</span>
 				{/* An orphan is never expandable, but it keeps the arrow cell so its
 				    name lands in the same column as every other plugin's. */}
 				<span>{"  "}</span>
@@ -447,7 +456,7 @@ function pluginDetail(
 						isInstalled
 							? theme.colors.success
 							: brokenInstall
-								? theme.colors.warning
+								? theme.colors.danger
 								: theme.colors.muted
 					}
 				>
@@ -505,7 +514,7 @@ function pluginDetail(
 					label="Version"
 					value={
 						<span>
-							<span fg={theme.colors.link}>v{plugin.version}</span>
+							<span fg={theme.colors.info}>v{plugin.version}</span>
 							{showInstalledVersion ? (
 								<span> (v{plugin.installedVersion} installed)</span>
 							) : null}
@@ -541,7 +550,7 @@ function pluginDetail(
 			{plugin.category ? (
 				<KeyValueLine
 					label="Category"
-					value={<span fg={theme.colors.accent}>{plugin.category}</span>}
+					value={<span fg={theme.colors.info}>{plugin.category}</span>}
 				/>
 			) : null}
 			{plugin.author ? (
@@ -553,9 +562,7 @@ function pluginDetail(
 			{components.length > 0 ? (
 				<KeyValueLine
 					label="Contains"
-					value={
-						<span fg={theme.colors.warning}>{components.join(" · ")}</span>
-					}
+					value={<span fg={theme.colors.info}>{components.join(" · ")}</span>}
 				/>
 			) : null}
 			{item.isExpandable ? (
@@ -577,21 +584,18 @@ function pluginDetail(
 						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>
@@ -636,30 +640,25 @@ function ScopeLine({
 	keyHint,
 	name,
 	qualifier,
-	color,
 	scope,
 }: {
 	keyHint: string;
 	name: string;
 	qualifier: string;
-	color: UiColor;
 	scope?: ScopeStatus;
 }): React.ReactNode {
 	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}
+			<ScopeKeyChip scopeKey={keyHint} />
+			<ScopeDot installed={installed} />
+			<span>{name}</span>
+			<span fg={theme.colors.muted}> {qualifier}</span>
+			{scope?.version ? (
+				<span fg={theme.colors.info}> v{scope.version}</span>
+			) : null}
 			{!installed && scope?.enabled ? (
-				<span fg={theme.colors.warning}> enabled, not installed</span>
+				<span fg={theme.colors.danger}> enabled, not installed</span>
 			) : null}
 		</text>
 	);
@@ -702,7 +701,7 @@ function ReleaseHistory({
 						? theme.colors.warning
 						: isInstalled
 							? theme.colors.success
-							: theme.colors.link;
+							: theme.colors.info;
 
 					return (
 						<box key={release.version} flexDirection="column" marginBottom={1}>
@@ -795,13 +794,6 @@ export const COMPONENT_ICON: Record<PluginComponentKind, string> = {
 	mcp: "⬢",
 };
 
-const COMPONENT_COLOR: Record<PluginComponentKind, UiColor> = {
-	skill: theme.colors.accent,
-	command: theme.colors.info,
-	agent: theme.colors.link,
-	mcp: theme.colors.warning,
-};
-
 const COMPONENT_NOUN: Record<PluginComponentKind, string> = {
 	skill: "Skill",
 	command: "Command",
@@ -829,7 +821,7 @@ function componentBadge(
 	const icon = COMPONENT_ICON[kind];
 	if (isSelected) return ` ${icon} `;
 
-	const chip = badgeColors(kind);
+	const chip = componentChip();
 	return <span bg={chip.bg} fg={chip.fg}>{` ${icon} `}</span>;
 }
 
@@ -845,7 +837,8 @@ function componentRow(
 	if (isSelected) {
 		return (
 			<text bg={theme.selection.bg} fg={theme.selection.fg}>
-				{COMPONENT_INDENT}
+				{rowLead(true)}
+				{COMPONENT_INDENT.slice(1)}
 				{componentBadge(component.kind, true)}
 				{`${" ".repeat(BADGE_GAP)}${label} `}
 			</text>
@@ -868,7 +861,7 @@ function contentsStatusRow(
 	if (isSelected) {
 		return (
 			<text bg={theme.selection.bg} fg={theme.selection.fg}>
-				{`${pad}${item.label} `}
+				{`${rowLead(true)}${pad.slice(1)}${item.label} `}
 			</text>
 		);
 	}
@@ -938,7 +931,7 @@ function componentDetail(
 					value={
 						<span>
 							{componentBadge(component.kind, false)}
-							<span fg={COMPONENT_COLOR[component.kind]}>
+							<span fg={theme.colors.text}>
 								{` ${COMPONENT_NOUN[component.kind]}`}
 							</span>
 						</span>
@@ -946,29 +939,29 @@ function componentDetail(
 				/>
 				<KeyValueLine
 					label="Plugin"
-					value={<span fg={theme.colors.accent}>{plugin.name}</span>}
+					value={<span fg={theme.colors.info}>{plugin.name}</span>}
 				/>
 				{component.group ? (
 					<KeyValueLine
 						label="Group"
-						value={<span fg={theme.colors.accent}>{component.group}</span>}
+						value={<span fg={theme.colors.info}>{component.group}</span>}
 					/>
 				) : null}
 				{component.mcpCommand ? (
 					<KeyValueLine
 						label="Runs"
-						value={<span fg={theme.colors.link}>{component.mcpCommand}</span>}
+						value={<span fg={theme.colors.info}>{component.mcpCommand}</span>}
 					/>
 				) : null}
 				<KeyValueLine
 					label="Path"
-					value={<span fg={theme.colors.link}>{component.repoPath}</span>}
+					value={<span fg={theme.colors.info}>{component.repoPath}</span>}
 				/>
 				{rest.map((field) => (
 					<KeyValueLine
 						key={field.key}
 						label={field.key}
-						value={<span fg={theme.colors.warning}>{field.value}</span>}
+						value={<span fg={theme.colors.text}>{field.value}</span>}
 					/>
 				))}
 			</box>

package/src/ui/renderers/profileRenderers.tsx

@@ -1,13 +1,14 @@
 import type React from "react";
 import type { PredefinedProfile } from "../../data/predefined-profiles.js";
 import type { ProfileEntry } from "../../types/index.js";
+import { ListCategoryRow, rowLead } from "../components/primitives/index.js";
 import type { ItemRenderer } from "../registry.js";
-import { type UiColor, theme } from "../theme.js";
+import { theme } from "../theme.js";
 
 // ─── List item types ───────────────────────────────────────────────────────────
 
 export type ProfileListItem =
-	| { kind: "header"; label: string; color: UiColor; count: number }
+	| { kind: "header"; label: string; count: number }
 	| { kind: "predefined"; profile: PredefinedProfile }
 	| { kind: "saved"; entry: ProfileEntry };
 
@@ -92,19 +93,20 @@ export function formatDate(iso: string | undefined): string {
 
 // ─── Header renderer ───────────────────────────────────────────────────────────
 
+/** A section label. Neutral: both sections are just groups, and the cursor
+ *  steps over them, so a header wearing the accent would read as the cursor. */
 const headerRenderer: ItemRenderer<{
 	kind: "header";
 	label: string;
-	color: UiColor;
 	count: number;
 }> = {
-	renderRow: ({ item }) => (
-		<text bg={item.color} fg={theme.hints.fg}>
-			<strong>
-				{" "}
-				{item.label} ({item.count}){" "}
-			</strong>
-		</text>
+	renderRow: ({ item, isSelected }) => (
+		<ListCategoryRow
+			selected={isSelected}
+			title={item.label}
+			count={item.count}
+			expandable={false}
+		/>
 	),
 	renderDetail: () => (
 		<text fg={theme.colors.muted}>Select a profile to see details</text>
@@ -129,8 +131,7 @@ const predefinedRenderer: ItemRenderer<{
 		if (isSelected) {
 			return (
 				<text bg={theme.selection.bg} fg={theme.selection.fg}>
-					{"  "}
-					{profile.name} {countStr}{" "}
+					{rowLead(true)} {profile.name} {countStr}{" "}
 				</text>
 			);
 		}
@@ -174,8 +175,8 @@ const predefinedRenderer: ItemRenderer<{
 					>{`\nMagus (${profile.magusPlugins.length})`}</text>
 				</box>
 				<box>
-					<text fg={theme.colors.info}>
-						{profile.magusPlugins.map((p) => `  ■ ${p}`).join("\n")}
+					<text fg={theme.colors.text}>
+						{profile.magusPlugins.map((p) => `  • ${p}`).join("\n")}
 					</text>
 				</box>
 
@@ -186,8 +187,8 @@ const predefinedRenderer: ItemRenderer<{
 					>{`\nAnthropic (${profile.anthropicPlugins.length})`}</text>
 				</box>
 				<box>
-					<text fg={theme.colors.accent}>
-						{profile.anthropicPlugins.map((p) => `  ■ ${p}`).join("\n")}
+					<text fg={theme.colors.text}>
+						{profile.anthropicPlugins.map((p) => `  • ${p}`).join("\n")}
 					</text>
 				</box>
 
@@ -200,8 +201,8 @@ const predefinedRenderer: ItemRenderer<{
 							>{`\nSkills (${profile.skills.length})`}</text>
 						</box>
 						<box>
-							<text fg={theme.colors.warning}>
-								{profile.skills.map((s) => `  ■ ${s}`).join("\n")}
+							<text fg={theme.colors.text}>
+								{profile.skills.map((s) => `  • ${s}`).join("\n")}
 							</text>
 						</box>
 					</>
@@ -256,22 +257,22 @@ const savedRenderer: ItemRenderer<{ kind: "saved"; entry: ProfileEntry }> = {
 		if (isSelected) {
 			return (
 				<text bg={theme.selection.bg} fg={theme.selection.fg}>
-					{" "}
+					{rowLead(true)}
 					{marker} {label}{" "}
 				</text>
 			);
 		}
 
-		const scopeColor =
-			entry.scope === "user" ? theme.scopes.user : theme.scopes.project;
+		// The words say the scope; it needs no hue of its own.
 		const scopeLabel = entry.scope === "user" ? "[user]" : "[proj]";
 
 		return (
 			<text fg={theme.colors.text}>
 				<span fg={entry.active ? theme.colors.success : theme.colors.text}>
+					{rowLead(false)}
 					{marker}{" "}
 				</span>
-				<span fg={scopeColor}>{scopeLabel} </span>
+				<span fg={theme.colors.muted}>{scopeLabel} </span>
 				<span fg={theme.colors.text}>{label}</span>
 			</text>
 		);
@@ -281,10 +282,6 @@ const savedRenderer: ItemRenderer<{ kind: "saved"; entry: ProfileEntry }> = {
 		const { entry: selectedProfile } = item;
 		const plugins = Object.keys(selectedProfile.plugins ?? {});
 		const cleanPlugins = plugins.map(stripSuffix);
-		const scopeColor =
-			selectedProfile.scope === "user"
-				? theme.scopes.user
-				: theme.scopes.project;
 		const scopeLabel =
 			selectedProfile.scope === "user"
 				? "User (~/.claude/profiles.json)"
@@ -295,9 +292,9 @@ const savedRenderer: ItemRenderer<{ kind: "saved"; entry: ProfileEntry }> = {
 				<text fg={theme.colors.info}>
 					<strong>{selectedProfile.name}</strong>
 				</text>
-				<box marginTop={1}>
+				<box flexDirection="row" marginTop={1}>
 					<text fg={theme.colors.muted}>Scope: </text>
-					<text fg={scopeColor}>{scopeLabel}</text>
+					<text fg={theme.colors.text}>{scopeLabel}</text>
 					{/* Stated in words as well as the row glyph: the detail pane is
 					    where someone looks to check, and "●" alone is not an answer
 					    to "is this the one that is running?". */}
@@ -330,36 +327,36 @@ const savedRenderer: ItemRenderer<{ kind: "saved"; entry: ProfileEntry }> = {
 					)}
 				</box>
 				<box marginTop={2} flexDirection="column">
-					<box>
+					<box flexDirection="row">
 						<text bg={theme.selection.bg} fg={theme.selection.fg}>
 							{" "}
 							Enter/a{" "}
 						</text>
 						<text fg={theme.colors.muted}> Apply profile</text>
 					</box>
-					<box marginTop={1}>
+					<box flexDirection="row" marginTop={1}>
 						<text bg={theme.colors.dim} fg={theme.hints.fg}>
 							{" "}
 							r{" "}
 						</text>
 						<text fg={theme.colors.muted}> Rename</text>
 					</box>
-					<box marginTop={1}>
+					<box flexDirection="row" marginTop={1}>
 						<text bg={theme.colors.danger} fg={theme.hints.fg}>
 							{" "}
 							d{" "}
 						</text>
 						<text fg={theme.colors.muted}> Delete</text>
 					</box>
-					<box marginTop={1}>
-						<text bg={theme.colors.link} fg={theme.hints.fg}>
+					<box flexDirection="row" marginTop={1}>
+						<text bg={theme.colors.dim} fg={theme.hints.fg}>
 							{" "}
 							c{" "}
 						</text>
 						<text fg={theme.colors.muted}> Copy JSON to clipboard</text>
 					</box>
-					<box marginTop={1}>
-						<text bg={theme.colors.success} fg={theme.hints.fg}>
+					<box flexDirection="row" marginTop={1}>
+						<text bg={theme.colors.dim} fg={theme.hints.fg}>
 							{" "}
 							i{" "}
 						</text>
@@ -410,7 +407,6 @@ export function buildProfileListItems(
 	items.push({
 		kind: "header",
 		label: "Presets",
-		color: theme.colors.accent,
 		count: PREDEFINED_PROFILES.length,
 	});
 	for (const p of PREDEFINED_PROFILES) {
@@ -419,7 +415,6 @@ export function buildProfileListItems(
 	items.push({
 		kind: "header",
 		label: "Your Profiles",
-		color: theme.colors.info,
 		count: profileList.length,
 	});
 	for (const e of profileList) {