magus-cli 0.0.0-placeholder → 7.0.0

package/src/ui/renderers/pluginRowText.ts

@@ -0,0 +1,70 @@
+/**
+ * Everything a Plugins row shows after the plugin's name, as plain segments.
+ *
+ * `pluginRow` renders these segments verbatim — for the selected row, the
+ * unselected row, and an orphan alike — and holds no conditional on plugin
+ * state of its own. That is the point. The row used to carry three rules of
+ * its own, and each one was a way to disagree with `magus update`:
+ *
+ *  - every status clause was gated on the installed version being displayable,
+ *    so a plugin recorded as "0.0.0" showed no status and read as healthy;
+ *  - its reason words ("? not comparable") were not the CLI's reason;
+ *  - an orphan's text depended on the cursor — the selected row said
+ *    "moved → X", the unselected one always said "deprecated".
+ *
+ * Pure and `.ts`, so a test can assert on exactly what the row prints.
+ */
+
+import { isKnownVersion } from "../../services/version-snapshot.js";
+import type { PluginPluginItem } from "../adapters/pluginsAdapter.js";
+import { type StatusTone, pluginStatusText } from "./pluginStatusText.js";
+
+export interface PluginRowSegment {
+	text: string;
+	tone: StatusTone | "text";
+}
+
+export interface PluginRowText {
+	/** After the name: the version, a history badge, then the status suffix. */
+	segments: PluginRowSegment[];
+	/** The segments joined — exactly what the row renders after the name. */
+	text: string;
+}
+
+export function pluginRowText(item: PluginPluginItem): PluginRowText {
+	const { plugin, status } = item;
+	const segments: PluginRowSegment[] = [];
+
+	// A version is shown only when it carries information. "0.0.0" means
+	// installed with an unknown version (Anthropic's official plugins record
+	// exactly that) — it is never printed, and nothing below depends on it.
+	const installed = status?.installed ?? plugin.installedVersion;
+	const shown = isKnownVersion(installed ?? undefined) ? installed : undefined;
+
+	// "What just changed" and "what state it is in now" are independent facts
+	// and both can be true at once: an external update can move a plugin
+	// 2.9.0 → 3.0.1 while the marketplace already offers 3.3.1. So the badge
+	// replaces only the version, and the status suffix is always appended.
+	if (plugin.recentlyUpdatedFrom && shown) {
+		// Show what actually happened, not just where it landed — the update may
+		// have come from Claude Code or a direct CLI call without telling us.
+		segments.push({
+			text: ` v${plugin.recentlyUpdatedFrom} → v${shown} updated`,
+			tone: "success",
+		});
+	} else if (plugin.recentlyInstalled) {
+		// Newly seen. A plugin can be genuinely installed with no version we can
+		// name, so the version is optional here.
+		segments.push({
+			text: shown ? ` v${shown} new` : " new",
+			tone: "success",
+		});
+	} else if (shown) {
+		segments.push({ text: ` v${shown}`, tone: "muted" });
+	}
+
+	const suffix = pluginStatusText(status);
+	if (suffix.suffix) segments.push({ text: suffix.suffix, tone: suffix.tone });
+
+	return { segments, text: segments.map((s) => s.text).join("") };
+}

package/src/ui/renderers/pluginStatusText.ts

@@ -0,0 +1,56 @@
+/**
+ * A plugin's status, as the words and tone the Plugins screen shows.
+ *
+ * Pure, and a function of the classifier's answer ALONE. The row used to build
+ * this text from `PluginInfo` flags with its own rules, and every clause was
+ * gated on the installed version being displayable — so a plugin recorded as
+ * "0.0.0" rendered with no status at all and read as healthy, while
+ * `magus update` said `unknown`. Nothing here looks at the version.
+ *
+ * The note is shown VERBATIM: it is the exact string `magus update` prints,
+ * which is what makes the two front ends say the same thing.
+ */
+
+import type { PluginUpdateItem } from "../../services/update-plan.js";
+
+export type StatusTone = "muted" | "warning" | "danger" | "success" | "info";
+
+export interface PluginStatusText {
+	/** Text after the version, with its leading space; "" for nothing to say. */
+	suffix: string;
+	tone: StatusTone;
+}
+
+export function pluginStatusText(
+	status: PluginUpdateItem | null,
+): PluginStatusText {
+	if (!status) return { suffix: "", tone: "muted" };
+	const withNote = status.note ? ` (${status.note})` : "";
+
+	switch (status.action) {
+		case "unknown":
+			// Amber, not red: "cannot tell" is not a failure.
+			return {
+				suffix: ` ? ${status.note ?? "cannot tell whether it is current"}`,
+				tone: "warning",
+			};
+		case "update":
+			return {
+				suffix: `${status.target ? ` → v${status.target} available` : " update available"}${withNote}`,
+				tone: "warning",
+			};
+		case "repair":
+			return { suffix: ` stale — reinstall${withNote}`, tone: "warning" };
+		case "install":
+			// `absent` only ever comes from a profile pin (see `pinForRow`), so it
+			// may say so. An undeclared row that is merely enabled must not.
+			return status.reason === "absent"
+				? { suffix: " not installed — profile declares it", tone: "warning" }
+				: // Enabled with nothing on disk is a broken state; a missing
+					// declared plugin is routine work. Red against amber is the
+					// distinction that matters.
+					{ suffix: ` not installed${withNote}`, tone: "danger" };
+		case "current":
+			return { suffix: withNote, tone: "muted" };
+	}
+}

package/src/ui/renderers/profileRenderers.tsx

@@ -0,0 +1,406 @@
+import type React from "react";
+import type { PredefinedProfile } from "../../data/predefined-profiles.js";
+import type { ProfileEntry } from "../../types/index.js";
+import type { ItemRenderer } from "../registry.js";
+import { type UiColor, theme } from "../theme.js";
+
+// ─── List item types ───────────────────────────────────────────────────────────
+
+export type ProfileListItem =
+	| { kind: "header"; label: string; color: UiColor; count: number }
+	| { kind: "predefined"; profile: PredefinedProfile }
+	| { kind: "saved"; entry: ProfileEntry };
+
+// ─── Helpers ───────────────────────────────────────────────────────────────────
+
+function truncate(s: string, maxLen: number): string {
+	if (s.length <= maxLen) return s;
+	return `${s.slice(0, maxLen - 1)}\u2026`;
+}
+
+export function humanizeValue(_key: string, value: unknown): string {
+	if (typeof value === "boolean") return value ? "on" : "off";
+	if (typeof value !== "string") return String(value);
+	if (value === "claude-sonnet-4-6") return "Sonnet";
+	if (value === "claude-opus-4-6") return "Opus";
+	if (value === "claude-haiku-4-6") return "Haiku";
+	if (value.startsWith("claude-sonnet")) return "Sonnet";
+	if (value.startsWith("claude-opus")) return "Opus";
+	if (value.startsWith("claude-haiku")) return "Haiku";
+	return value;
+}
+
+export function humanizeKey(key: string): string {
+	const labels: Record<string, string> = {
+		effortLevel: "Effort",
+		model: "Model",
+		outputStyle: "Output",
+		alwaysThinkingEnabled: "Thinking",
+		includeGitInstructions: "Git Instructions",
+		respectGitignore: "Gitignore",
+		enableAllProjectMcpServers: "Auto MCP",
+		autoUpdatesChannel: "Updates",
+		language: "Language",
+		cleanupPeriodDays: "Cleanup",
+	};
+	return labels[key] ?? key;
+}
+
+export function stripSuffix(pluginName: string): string {
+	return pluginName
+		.replace(/@magus$/, "")
+		.replace(/@claude-plugins-official$/, "");
+}
+
+export function wrapNames(names: string[], lineMax = 40): string[] {
+	const lines: string[] = [];
+	let current = "";
+	for (const name of names) {
+		const add = current ? `, ${name}` : name;
+		if (current && current.length + add.length > lineMax) {
+			lines.push(current);
+			current = name;
+		} else {
+			current += current ? `, ${name}` : name;
+		}
+	}
+	if (current) lines.push(current);
+	return lines;
+}
+
+export function formatDate(iso: string): string {
+	try {
+		const d = new Date(iso);
+		return d.toLocaleDateString("en-US", {
+			month: "short",
+			day: "numeric",
+			year: "numeric",
+		});
+	} catch {
+		return iso;
+	}
+}
+
+// ─── Header renderer ───────────────────────────────────────────────────────────
+
+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>
+	),
+	renderDetail: () => (
+		<text fg={theme.colors.muted}>Select a profile to see details</text>
+	),
+};
+
+// ─── Predefined renderer ───────────────────────────────────────────────────────
+
+const DIVIDER = "────────────────────────";
+
+const predefinedRenderer: ItemRenderer<{
+	kind: "predefined";
+	profile: PredefinedProfile;
+}> = {
+	renderRow: ({ item, isSelected }) => {
+		const { profile } = item;
+		const pluginCount =
+			profile.magusPlugins.length + profile.anthropicPlugins.length;
+		const skillCount = profile.skills.length;
+		const countStr = `${pluginCount}p ${skillCount}s`;
+
+		if (isSelected) {
+			return (
+				<text bg={theme.selection.bg} fg={theme.selection.fg}>
+					{"  "}
+					{profile.name} {countStr}{" "}
+				</text>
+			);
+		}
+
+		return (
+			<text fg={theme.colors.text}>
+				<span fg={theme.colors.text}>
+					{"  "}
+					{profile.name}
+				</span>
+				<span fg={theme.colors.dim}> {countStr}</span>
+			</text>
+		);
+	},
+
+	renderDetail: ({ item }) => {
+		const { profile } = item;
+		const settingEntries = Object.entries(profile.settings).filter(
+			([k]) => k !== "env",
+		);
+		const envMap =
+			(profile.settings.env as Record<string, string> | undefined) ?? {};
+		const tasksOn = envMap.CLAUDE_CODE_ENABLE_TASKS === "true";
+		const teamsOn = envMap.CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS === "true";
+
+		return (
+			<box flexDirection="column">
+				<box>
+					<text bg={theme.colors.accent} fg={theme.hints.fg}>
+						<strong> {profile.name} </strong>
+					</text>
+				</box>
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>{profile.description}</text>
+				</box>
+
+				{/* Magus plugins */}
+				<box>
+					<text
+						fg={theme.colors.muted}
+					>{`\nMagus (${profile.magusPlugins.length})`}</text>
+				</box>
+				<box>
+					<text fg={theme.colors.info}>
+						{profile.magusPlugins.map((p) => `  ■ ${p}`).join("\n")}
+					</text>
+				</box>
+
+				{/* Anthropic plugins */}
+				<box>
+					<text
+						fg={theme.colors.muted}
+					>{`\nAnthropic (${profile.anthropicPlugins.length})`}</text>
+				</box>
+				<box>
+					<text fg={theme.colors.accent}>
+						{profile.anthropicPlugins.map((p) => `  ■ ${p}`).join("\n")}
+					</text>
+				</box>
+
+				{/* Skills */}
+				{profile.skills.length > 0 && (
+					<>
+						<box>
+							<text
+								fg={theme.colors.muted}
+							>{`\nSkills (${profile.skills.length})`}</text>
+						</box>
+						<box>
+							<text fg={theme.colors.warning}>
+								{profile.skills.map((s) => `  ■ ${s}`).join("\n")}
+							</text>
+						</box>
+					</>
+				)}
+
+				{/* Settings */}
+				<box>
+					<text fg={theme.colors.dim}>{`\n${DIVIDER}`}</text>
+				</box>
+				<box>
+					<text fg={theme.colors.muted}>
+						{[
+							...settingEntries.map(
+								([k, v]) =>
+									`  ${humanizeKey(k).padEnd(18)}${humanizeValue(k, v)}`,
+							),
+							...(tasksOn ? [`  ${"Tasks".padEnd(18)}on`] : []),
+							...(teamsOn ? [`  ${"Agent Teams".padEnd(18)}on`] : []),
+						].join("\n")}
+					</text>
+				</box>
+
+				{/* Action */}
+				<box>
+					<text fg={theme.colors.dim}>{`\n${DIVIDER}`}</text>
+				</box>
+				<box>
+					<text fg={theme.colors.info}> Enter/a to apply</text>
+				</box>
+			</box>
+		);
+	},
+};
+
+// ─── Saved renderer ────────────────────────────────────────────────────────────
+
+const savedRenderer: ItemRenderer<{ kind: "saved"; entry: ProfileEntry }> = {
+	renderRow: ({ item, isSelected }) => {
+		const { entry } = item;
+		const pluginCount = Object.keys(entry.plugins).length;
+		const dateStr = formatDate(entry.updatedAt);
+		const label = truncate(
+			`${entry.name} — ${pluginCount} plugin${pluginCount !== 1 ? "s" : ""} · ${dateStr}`,
+			45,
+		);
+
+		if (isSelected) {
+			return (
+				<text bg={theme.selection.bg} fg={theme.selection.fg}>
+					{" "}
+					{label}{" "}
+				</text>
+			);
+		}
+
+		const scopeColor =
+			entry.scope === "user" ? theme.scopes.user : theme.scopes.project;
+		const scopeLabel = entry.scope === "user" ? "[user]" : "[proj]";
+
+		return (
+			<text fg={theme.colors.text}>
+				<span fg={scopeColor}>{scopeLabel} </span>
+				<span fg={theme.colors.text}>{label}</span>
+			</text>
+		);
+	},
+
+	renderDetail: ({ item }) => {
+		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)"
+				: "Project (.claude/profiles.json — committed to git)";
+
+		return (
+			<box flexDirection="column">
+				<text fg={theme.colors.info}>
+					<strong>{selectedProfile.name}</strong>
+				</text>
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>Scope: </text>
+					<text fg={scopeColor}>{scopeLabel}</text>
+				</box>
+				<box marginTop={1}>
+					<text fg={theme.colors.muted}>
+						Created: {formatDate(selectedProfile.createdAt)} · Updated:{" "}
+						{formatDate(selectedProfile.updatedAt)}
+					</text>
+				</box>
+				<box marginTop={1} flexDirection="column">
+					<text fg={theme.colors.muted}>
+						Plugins ({plugins.length}
+						{plugins.length === 0 ? " — applying will disable all plugins" : ""}
+						):
+					</text>
+					{cleanPlugins.length === 0 ? (
+						<text fg={theme.colors.warning}> (none)</text>
+					) : (
+						wrapNames(cleanPlugins).map((line, i) => (
+							// biome-ignore lint/suspicious/noArrayIndexKey: word-wrapped lines of a static preview; lines carry no identity and can repeat, so the row number is the only stable key
+							<text key={i} fg={theme.colors.text}>
+								{"  "}
+								{line}
+							</text>
+						))
+					)}
+				</box>
+				<box marginTop={2} flexDirection="column">
+					<box>
+						<text bg={theme.selection.bg} fg={theme.selection.fg}>
+							{" "}
+							Enter/a{" "}
+						</text>
+						<text fg={theme.colors.muted}> Apply profile</text>
+					</box>
+					<box marginTop={1}>
+						<text bg={theme.colors.dim} fg={theme.hints.fg}>
+							{" "}
+							r{" "}
+						</text>
+						<text fg={theme.colors.muted}> Rename</text>
+					</box>
+					<box 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}>
+							{" "}
+							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}>
+							{" "}
+							i{" "}
+						</text>
+						<text fg={theme.colors.muted}> Import from clipboard</text>
+					</box>
+				</box>
+			</box>
+		);
+	},
+};
+
+// ─── Dispatch helpers ──────────────────────────────────────────────────────────
+
+export function renderProfileRow(
+	item: ProfileListItem,
+	_index: number,
+	isSelected: boolean,
+): React.ReactNode {
+	if (item.kind === "header") {
+		return headerRenderer.renderRow({ item, isSelected });
+	}
+	if (item.kind === "predefined") {
+		return predefinedRenderer.renderRow({ item, isSelected });
+	}
+	return savedRenderer.renderRow({ item, isSelected });
+}
+
+export function renderProfileDetail(
+	item: ProfileListItem | undefined,
+	loading: boolean,
+	error: string | undefined,
+): React.ReactNode {
+	if (loading) return <text fg={theme.colors.muted}>Loading profiles...</text>;
+	if (error) return <text fg={theme.colors.danger}>Error: {error}</text>;
+	if (!item || item.kind === "header")
+		return <text fg={theme.colors.muted}>Select a profile to see details</text>;
+	if (item.kind === "predefined") {
+		return predefinedRenderer.renderDetail({ item });
+	}
+	return savedRenderer.renderDetail({ item });
+}
+
+export function buildProfileListItems(
+	profileList: import("../../types/index.js").ProfileEntry[],
+	PREDEFINED_PROFILES: PredefinedProfile[],
+): ProfileListItem[] {
+	const items: ProfileListItem[] = [];
+	items.push({
+		kind: "header",
+		label: "Presets",
+		color: theme.colors.accent,
+		count: PREDEFINED_PROFILES.length,
+	});
+	for (const p of PREDEFINED_PROFILES) {
+		items.push({ kind: "predefined", profile: p });
+	}
+	items.push({
+		kind: "header",
+		label: "Your Profiles",
+		color: theme.colors.info,
+		count: profileList.length,
+	});
+	for (const e of profileList) {
+		items.push({ kind: "saved", entry: e });
+	}
+	return items;
+}