magus-cli 7.1.0 → 7.3.0

package/src/ui/components/modals/SelectModal.tsx

@@ -1,10 +1,41 @@
-import React from "react";
+import type React from "react";
 import { useDimensions } from "../../state/DimensionsContext.js";
 import type { SelectOption } from "../../state/types.js";
+import { type ReportBadgeKind, reportBadge } from "../../theme-mode.js";
 import { theme } from "../../theme.js";
+import { FooterHints } from "../layout/FooterHints.js";
+
+/** Pad a label so every badge and meta column starts at the same cell. */
+function labelPad(label: string, to: number): string {
+	return " ".repeat(Math.max(0, to - label.length) + 2);
+}
+
+/**
+ * A discrete state as a chip: dark ink on a saturated fill, padded OUTSIDE the
+ * fill.
+ *
+ * Padding inside the label would extend the background, and a column of chips
+ * padded that way fuses into one solid rectangle with the words floating in it.
+ */
+function Chip({
+	badge,
+	width,
+}: {
+	badge: { label: string; kind: ReportBadgeKind };
+	width: number;
+}): React.ReactNode {
+	const ink = reportBadge(badge.kind);
+	const pad = Math.max(0, width - badge.label.length - 2);
+	return (
+		<>
+			<span bg={ink.fill} fg={ink.ink}>{` ${badge.label} `}</span>
+			<span fg={theme.colors.dim}>{" ".repeat(pad)}</span>
+		</>
+	);
+}
 
 interface SelectModalProps {
-	/** Modal title */
+	/** Modal title — drawn in the border, not as a body row. */
 	title: string;
 	/** Modal message */
 	message: string;
@@ -16,6 +47,8 @@ interface SelectModalProps {
 	onSelect: (value: string) => void;
 	/** Callback when cancelled */
 	onCancel: () => void;
+	/** False for a question that must be answered — drops the `esc` hint. */
+	cancellable?: boolean;
 }
 
 export function SelectModal({
@@ -25,6 +58,7 @@ export function SelectModal({
 	defaultIndex,
 	onSelect: _onSelect,
 	onCancel: _onCancel,
+	cancellable = true,
 }: SelectModalProps) {
 	// Keyboard handling is done by ModalContainer
 	// defaultIndex is the live selectedIndex from ModalContainer state
@@ -40,48 +74,135 @@ export function SelectModal({
 		Math.min(90, Math.floor(dimensions.terminalWidth * 0.6)),
 	);
 
+	// Columns a list row may paint: the box width less its border and padding.
+	// The selected row is a FULL-WIDTH fill, so it has to know the row width
+	// rather than ending wherever its label happens to end.
+	const inner = width - 6;
+
+	// Column widths measured over the whole list, so badges and bars line up
+	// down the column instead of drifting with each label's length.
+	const labelWidth = Math.max(...options.map((o) => o.label.length), 0);
+	const badgeWidth = Math.max(
+		...options.map((o) => (o.badge ? o.badge.label.length + 2 : 0)),
+		0,
+	);
+
+	// Meta is dim trailing detail, so it is the first thing to go when the row
+	// will not fit — dropped for EVERY row, not per row, because a column that
+	// appears on some rows and not others is worse than no column.
+	//
+	// Without this the row simply overflowed and the terminal wrapped it:
+	// MEASURED on screen, a 41-cell label put "14 plugins" on a line of its own
+	// under the option, reading as a second list item. The longest label sets the
+	// column, so one long option breaks every row's meta at once.
+	const metaWidth = Math.max(
+		...options.map((o) => (o.meta ? o.meta.length + 2 : 0)),
+		0,
+	);
+	const showMeta = 2 + labelWidth + 2 + badgeWidth + metaWidth <= inner;
+
 	return (
 		<box
 			flexDirection="column"
 			border
 			borderStyle="rounded"
-			borderColor={theme.colors.dim}
+			// A modal is the focused surface by definition, and accent means
+			// focus everywhere else in this app — so the border wears it here
+			// too, and the title drawn in it comes along in the same tone.
+			borderColor={theme.colors.accent}
 			backgroundColor={theme.surface.bg}
-			paddingLeft={3}
-			paddingRight={3}
+			title={title}
+			titleAlignment="left"
+			paddingLeft={2}
+			paddingRight={2}
 			paddingTop={1}
 			paddingBottom={1}
 			width={width}
 		>
-			<box marginBottom={1}>
-				<text fg={theme.colors.text}>
-					<strong>{title}</strong>
-				</text>
-			</box>
-
 			<box marginBottom={1}>
 				<text fg={theme.colors.muted}>{message}</text>
 			</box>
 
-			<box flexDirection="column" paddingLeft={1}>
+			<box flexDirection="column">
 				{options.map((option, idx) => {
 					const isSelected = idx === selectedIndex;
+					const pad = labelPad(option.label, labelWidth);
+					// The plain width of everything the row draws, so the
+					// selected fill can be padded out to the full row width.
+					const drawn =
+						2 +
+						option.label.length +
+						pad.length +
+						badgeWidth +
+						(showMeta && option.meta ? option.meta.length + 2 : 0);
+					const fill = " ".repeat(Math.max(0, inner - drawn));
+
+					if (isSelected) {
+						// The selected row owns the colour channel — see
+						// `theme.selection`. On its fill no page-level tone
+						// clears contrast, so the row has exactly two inks:
+						// `fg` for the choice, `dim` for what surrounds it.
+						// A badge surrenders its chip the same way a model
+						// ink does on the Models screen.
+						return (
+							<text
+								key={option.value}
+								bg={theme.selection.bg}
+								fg={theme.selection.fg}
+							>
+								<span>❯ </span>
+								<strong>{option.label}</strong>
+								<span>{pad}</span>
+								{option.badge ? (
+									<span fg={theme.selection.dim}>{option.badge.label}</span>
+								) : null}
+								{badgeWidth > 0 ? (
+									<span fg={theme.selection.dim}>{" ".repeat(badgeWidth)}</span>
+								) : null}
+								{showMeta && option.meta ? (
+									<span fg={theme.selection.dim}>{`  ${option.meta}`}</span>
+								) : null}
+								<span>{fill}</span>
+							</text>
+						);
+					}
+
+					// Unselected rows sit in the terminal's own foreground —
+					// NOT muted. Muting every unselected row turned the list
+					// into the wall of grey this dialog was rejected for; the
+					// choices are the signal, and only the chrome is dim.
 					return (
-						<text
-							key={option.value}
-							fg={isSelected ? theme.colors.text : theme.colors.muted}
-						>
-							<span fg={isSelected ? theme.colors.text : theme.colors.muted}>
-								{isSelected ? "❯ " : "  "}
-							</span>
-							{isSelected ? <strong>{option.label}</strong> : option.label}
+						<text key={option.value} fg={theme.colors.text}>
+							<span>{"  "}</span>
+							<span>{option.label}</span>
+							<span>{pad}</span>
+							{option.badge ? (
+								<Chip badge={option.badge} width={badgeWidth} />
+							) : (
+								<span fg={theme.colors.dim}>{" ".repeat(badgeWidth)}</span>
+							)}
+							{showMeta && option.meta ? (
+								<span fg={theme.colors.muted}>{`  ${option.meta}`}</span>
+							) : null}
 						</text>
 					);
 				})}
 			</box>
 
+			{/* The shared footer key chips, not a prose hint line: a chip reads
+			    as a pressable key at a glance, and every other footer in the
+			    app already renders this way. */}
 			<box marginTop={1}>
-				<text fg={theme.colors.muted}>↑↓ Select • ↵ Confirm • Esc Cancel</text>
+				<FooterHints
+					hints={[
+						{ keys: ["↑", "↓"], label: "select" },
+						{ keys: ["↵"], label: "confirm" },
+						// Omitted when there is nothing to cancel to. A hint for a key
+						// that does nothing is worse than no hint: the user presses it,
+						// nothing happens, and they read the app as hung.
+						...(cancellable ? [{ keys: ["esc"], label: "cancel" }] : []),
+					]}
+				/>
 			</box>
 		</box>
 	);

package/src/ui/hooks/useProfileStartupModal.ts

@@ -0,0 +1,260 @@
+/**
+ * Startup profile modal: magus opens, finds the project is not running a
+ * profile, and either applies the repo's declared answer or requires one.
+ *
+ * This file is only the React wiring. What to ask, which options to offer, which
+ * row to start on and what a chosen value means all live in
+ * `services/profile-startup.ts`, and carrying a choice out lives in
+ * `services/profile-activate.ts` — both shared with the CLI, so the two
+ * surfaces cannot ask different questions or write different things in answer
+ * to the same one.
+ *
+ * The modal cannot be dismissed. Without an active profile there is no profile
+ * state to read and nowhere to write updates, so letting the user past it would
+ * drop them into a magus that cannot do its job. Its only non-action is to
+ * leave, which is why it needs the app's own exit.
+ */
+
+import { useCallback } from "react";
+import {
+	type ProfileChoice,
+	applyProfileChoice,
+} from "../../services/profile-activate.js";
+import {
+	type ProfileStartupNeed,
+	buildProfileOptions,
+	defaultOptionIndex,
+	describeNeed,
+	parseProfileChoice,
+} from "../../services/profile-startup.js";
+import type { DisplacedArtifact } from "../../services/symlink-manager.js";
+import { useApp, useNavigation } from "../state/AppContext.js";
+import type { ModalState } from "../state/types.js";
+
+export interface BuildProfileModalArgs {
+	need: ProfileStartupNeed;
+	onChoose: (choice: ProfileChoice) => void;
+	/**
+	 * Leave magus. NOT "dismiss" — there is deliberately no way to carry on
+	 * without a profile, because there is nothing to carry on with.
+	 */
+	onQuit: () => void;
+}
+
+export function buildProfileStartupModal(
+	args: BuildProfileModalArgs,
+): ModalState {
+	const { need, onChoose, onQuit } = args;
+	const { title, message } = describeNeed(need);
+	return {
+		type: "select",
+		title,
+		message,
+		options: buildProfileOptions(need),
+		// The row the repo declares, so Enter does the intended thing for a
+		// developer who has local work and therefore still gets asked.
+		defaultIndex: defaultOptionIndex(need),
+		onSelect: (value: string) => {
+			const choice = parseProfileChoice(value, need);
+			if (choice) onChoose(choice);
+			else onQuit();
+		},
+		// Escape and `q` route here, and here they do NOTHING. Dismissing would
+		// drop the user into the app this modal exists to say is unusable. Leaving
+		// is the "Quit magus" row, which says so on screen rather than making the
+		// user guess a keystroke.
+		onCancel: () => {},
+		// ...and the footer must not offer `esc cancel` when that is what Escape
+		// does. The two have to agree or the app reads as hung.
+		cancellable: false,
+	};
+}
+
+/** What changed, phrased for a message modal rather than a terminal. */
+export function describeOutcome(
+	profileId: string,
+	displaced: DisplacedArtifact[],
+	projectPath: string,
+	/** True when this happened without asking, following the committed default. */
+	automatic = false,
+): string {
+	const lines = [
+		automatic
+			? `This project declares "${profileId}" as its profile, so magus activated it.`
+			: `"${profileId}" is now the active profile.`,
+	];
+	if (displaced.length > 0) {
+		lines.push(
+			"",
+			"These were moved aside to make room for links into the profile, and are kept:",
+			...displaced.map((d) => {
+				const from = d.link.startsWith(projectPath)
+					? d.link.slice(projectPath.length + 1)
+					: d.link;
+				const to = d.savedTo.startsWith(projectPath)
+					? d.savedTo.slice(projectPath.length + 1)
+					: d.savedTo;
+				return `  ${from} → ${to}`;
+			}),
+		);
+	}
+	return lines.join("\n");
+}
+
+/** Project-relative, so a path does not wrap over two lines. */
+function rel(p: string, projectPath: string): string {
+	return p.startsWith(projectPath) ? p.slice(projectPath.length + 1) : p;
+}
+
+/**
+ * What to say when activation threw partway through.
+ *
+ * The hard part is that a failure is NOT always a no-op. Activation moves up to
+ * four artifacts in sequence and `settings.json` goes first, so a throw on the
+ * second leaves it already in the backup. The old message said "Nothing was
+ * activated" unconditionally, which in exactly that case is false about the
+ * user's own file — and `.magus-backups/` is gitignored, so `git status` showed
+ * the deletion with no sign of the copy. It read as "magus deleted my settings".
+ *
+ * So the sentence is chosen by what actually moved, and when anything did, the
+ * backup paths are named here rather than left in a return value the error path
+ * never receives.
+ */
+export function describeFailure(
+	error: unknown,
+	moved: DisplacedArtifact[],
+	projectPath: string,
+	declaredDefault: string | null,
+): string {
+	const reason = error instanceof Error ? error.message : String(error);
+	if (moved.length === 0) {
+		return `${reason}\n\nNothing was moved, so this project is exactly as it was.`;
+	}
+	return [
+		reason,
+		"",
+		"This did not finish, and these were already moved aside. They are kept:",
+		...moved.map(
+			(d) => `  ${rel(d.link, projectPath)} → ${rel(d.savedTo, projectPath)}`,
+		),
+		"",
+		// The trap the reviewer found: re-choosing "save what you have" after a
+		// partial failure runs adoption again, and adoption reads settings.json —
+		// which is now in the backup. It would capture an empty plugin set into a
+		// second profile and call that the user's setup.
+		declaredDefault !== null
+			? `Activating ${declaredDefault} again is safe. Do NOT save-what-you-have — the files above have moved, so it would capture an empty set.`
+			: "Activating a profile again is safe. Do NOT save-what-you-have — the files above have moved, so it would capture an empty set.",
+	].join("\n");
+}
+
+export function useProfileStartupModal(onQuit: () => void) {
+	const { state, dispatch } = useApp();
+	const { navigateToScreen } = useNavigation();
+	const projectPath = state.projectPath;
+
+	const show = useCallback(
+		(need: ProfileStartupNeed) => {
+			/** Apply a choice, reporting the outcome either way. */
+			const apply = (choice: ProfileChoice, automatic: boolean): void => {
+				dispatch({
+					type: "SHOW_MODAL",
+					modal: {
+						type: "loading",
+						message:
+							choice.kind === "adopt"
+								? `Creating "${choice.id}"…`
+								: `Activating ${choice.id}…`,
+					},
+				});
+				// Collected as they move, NOT read from the resolved result.
+				//
+				// Activation moves up to four artifacts in sequence and
+				// `settings.json` goes first, so a throw on the second leaves the
+				// user's file already in the backup — and the resolved value that
+				// would have listed it never arrives. This array is the only record
+				// the error path has, and without it the failure modal claimed
+				// "Nothing was activated" while their settings.json was gone from
+				// where they left it. `.magus-backups/` is gitignored, so git status
+				// showed the deletion and no sign of the copy.
+				const moved: DisplacedArtifact[] = [];
+				void applyProfileChoice(
+					choice,
+					need.manifest,
+					projectPath,
+					(artifact) => moved.push(artifact),
+				)
+					.then(({ profileId, displaced }) => {
+						dispatch({
+							type: "SHOW_MODAL",
+							modal: {
+								type: "message",
+								title: "Profile active",
+								message: describeOutcome(
+									profileId,
+									displaced,
+									projectPath,
+									automatic,
+								),
+								variant: "success",
+								onDismiss: () => {
+									dispatch({ type: "HIDE_MODAL" });
+									// The Profiles tab is where the result is visible, and
+									// where the user will want to look next.
+									navigateToScreen("profiles");
+								},
+							},
+						});
+					})
+					.catch((error: unknown) => {
+						dispatch({
+							type: "SHOW_MODAL",
+							modal: {
+								type: "message",
+								title:
+									choice.kind === "adopt"
+										? "Could not create the profile"
+										: "Could not activate the profile",
+								message: describeFailure(
+									error,
+									moved,
+									projectPath,
+									need.declaredDefault,
+								),
+								variant: "error",
+								// A failure leaves the project without an active profile, so
+								// dismissing returns to the question — including when the
+								// attempt was automatic, which is the one case where there
+								// was no question on screen yet.
+								onDismiss: ask,
+							},
+						});
+					});
+			};
+
+			function ask(): void {
+				dispatch({
+					type: "SHOW_MODAL",
+					modal: buildProfileStartupModal({
+						need,
+						onChoose: (choice) => apply(choice, false),
+						onQuit,
+					}),
+				});
+			}
+
+			// The repo already answered and there is nothing of the user's to
+			// replace: asking here would ask someone to re-decide what their team
+			// decided, with nothing at stake. Reported in the outcome modal, so it
+			// is never invisible.
+			if (need.autoActivate && need.declaredDefault !== null) {
+				apply({ kind: "activate", id: need.declaredDefault }, true);
+				return;
+			}
+			ask();
+		},
+		[dispatch, navigateToScreen, projectPath, onQuit],
+	);
+
+	return { show };
+}

package/src/ui/hooks/useStaleLoadModal.ts

@@ -0,0 +1,157 @@
+import { useCallback } from "react";
+import { useApp, useNavigation } from "../state/AppContext.js";
+import type { ModalState } from "../state/types.js";
+
+/**
+ * Startup broken-plugin modal: magus launches, finds that Claude Code will load
+ * an older version of a plugin than the one installed here, and offers to fix it.
+ *
+ * Same shape as the gitignore modal beside it — a startup repair magus can make
+ * without being asked to, surfaced as a choice rather than done silently. The
+ * difference is the DEFAULT: fixing is the first option and `defaultIndex` says
+ * so explicitly, because a broken plugin means every session in this directory
+ * runs code nobody installed, and there is no reason to prefer leaving it.
+ *
+ * The copy names the CAUSE, not magus's internal state. An earlier version read
+ * "Claude Code loads an older version here than the one installed", which is a
+ * report on two stores disagreeing and leaves the reader with nothing to do. It
+ * is a defect in Claude Code's plugin loader, the user did nothing to cause it,
+ * and the sentence they need is what is wrong and how far it reaches.
+ *
+ * Keep it plain and keep it accurate. A draft said "your sessions run code you
+ * did not install", which is both overstated and wrong: nothing happens to the
+ * user's code, an old cached plugin version is used instead of the current one.
+ * Say that, in those words.
+ *
+ * The reach is not this directory. Relevance is decided by repository root, so
+ * every worktree of this repo — and the main checkout — resolve identically and
+ * are affected together. Saying "in this directory" understated it.
+ *
+ * NO UPSTREAM LINK YET, deliberately. anthropics/claude-code#45997 is the
+ * nearest issue and is CLOSED, and its title states the `[0]`-index diagnosis,
+ * which measurement disproved: the loader filters by repository root first and
+ * takes the first RELEVANT row. Linking a closed issue with a wrong cause sends
+ * the reader somewhere that contradicts this dialog. Add a link here when an
+ * accurate issue exists.
+ *
+ * Pure builder is exported separately for tests.
+ */
+
+export interface BuildStaleLoadModalArgs {
+	brokenCount: number;
+	onFix: () => void;
+	onOpenTab: () => void;
+	onDismiss: () => void;
+}
+
+export function buildStaleLoadModal(args: BuildStaleLoadModalArgs): ModalState {
+	const { brokenCount, onFix, onOpenTab, onDismiss } = args;
+	const plural = brokenCount === 1 ? "plugin" : "plugins";
+	return {
+		type: "select",
+		title: "Claude Code is loading old plugin versions",
+		message: `It picks up a stale cached version — the one recorded by another directory in this repo, including worktrees you deleted. ${brokenCount} ${plural} ${brokenCount === 1 ? "is" : "are"} on an older version than you installed, in every worktree and the main checkout.\n\nFix updates this repo's install records to the versions you installed. installed_plugins.json is backed up first. Nothing is deleted or downgraded.`,
+		options: [
+			{ label: `Fix it (${brokenCount} ${plural})`, value: "fix" },
+			{ label: "Open the Plugins tab to review", value: "open-tab" },
+			{ label: "Not now", value: "dismiss" },
+		],
+		// FIX, stated rather than inherited from being first — a reordering must not
+		// silently make "leave it broken" the thing Enter does.
+		defaultIndex: 0,
+		onSelect: (value: string) => {
+			if (value === "fix") onFix();
+			else if (value === "open-tab") onOpenTab();
+			else onDismiss();
+		},
+		onCancel: onDismiss,
+	};
+}
+
+export function useStaleLoadModal() {
+	const { dispatch } = useApp();
+	const { navigateToScreen } = useNavigation();
+
+	const show = useCallback(
+		(args: {
+			brokenCount: number;
+			/** Runs the repair. Resolves to what to tell the user afterwards. */
+			onFix: () => Promise<string> | string;
+		}) => {
+			if (args.brokenCount === 0) return;
+			const dismiss = () => dispatch({ type: "HIDE_MODAL" });
+			const modal = buildStaleLoadModal({
+				brokenCount: args.brokenCount,
+				onFix: () => {
+					dispatch({
+						type: "SHOW_MODAL",
+						modal: { type: "loading", message: "Repairing plugins…" },
+					});
+					// The outcome is REPORTED, never assumed. `repairStaleLoad` re-asks
+					// the loader after writing and can legitimately answer "still not
+					// loading the target"; swallowing that would leave the user believing
+					// a broken plugin was fixed.
+					void Promise.resolve(args.onFix())
+						.then((summary) => {
+							dispatch({
+								type: "SHOW_MODAL",
+								modal: {
+									type: "message",
+									title: "Plugin repair",
+									message: summary,
+									variant: "info",
+									onDismiss: dismiss,
+								},
+							});
+						})
+						.catch((err) => {
+							dispatch({
+								type: "SHOW_MODAL",
+								modal: {
+									type: "message",
+									title: "Plugin repair failed",
+									message: err instanceof Error ? err.message : String(err),
+									variant: "error",
+									onDismiss: dismiss,
+								},
+							});
+						});
+				},
+				onOpenTab: () => {
+					dispatch({ type: "HIDE_MODAL" });
+					navigateToScreen("plugins");
+				},
+				onDismiss: dismiss,
+			});
+			dispatch({ type: "SHOW_MODAL", modal });
+		},
+		[dispatch, navigateToScreen],
+	);
+
+	return { show };
+}
+
+/**
+ * One line per repair attempt, for the modal that follows the fix.
+ *
+ * Exported and pure so the wording is tested rather than inspected by eye. Each
+ * line says what the loader resolves NOW, because that — not the row count — is
+ * the thing the user came here to change.
+ */
+export function staleLoadRepairSummary(
+	results: ReadonlyArray<{
+		pluginId: string;
+		target: string;
+		ok: boolean;
+		error?: string;
+	}>,
+): string {
+	if (results.length === 0) return "Nothing to repair.";
+	return results
+		.map((r) =>
+			r.ok
+				? `✓ ${r.pluginId} now loads v${r.target}`
+				: `✗ ${r.pluginId} — ${r.error ?? "repair did not take effect"}`,
+		)
+		.join("\n");
+}

package/src/ui/renderers/pluginRenderers.tsx

@@ -278,6 +278,9 @@ const ACTION_LABEL: Record<PluginUpdateAction, string> = {
 	update: "UPDATE AVAILABLE",
 	repair: "NEEDS REINSTALL",
 	current: "UP TO DATE",
+	// The DETAIL panel's label, not the row's — this is where the mechanism is
+	// allowed to be named, and the note beside it spells out both versions.
+	"stale-load": "BROKEN — OLDER VERSION LOADS",
 	unknown: "UNKNOWN",
 };
 
@@ -463,6 +466,32 @@ function pluginDetail(
 					</text>
 				</box>
 			) : null}
+			{/*
+			 * THE panel where the mechanism is spelled out in full. The row above
+			 * says only "BROKEN — press a to fix", on purpose; a reader who wants to
+			 * know why comes here, so this names both versions, says which registry
+			 * row wins, and says what the fix does. A reinstall is measured NOT to
+			 * fix it — it writes another row for this project while the winner
+			 * belongs to a different one — so the fix rewrites those rows instead.
+			 */}
+			{status?.action === "stale-load" ? (
+				<box flexDirection="column">
+					<text fg={theme.colors.danger}>
+						✗ Broken: Claude Code loads v{status.loaded ?? "?"} in this
+						directory, not the v{status.installed ?? "?"} that is installed.
+					</text>
+					<text fg={theme.colors.muted}>
+						An install row belonging to another directory in this repository —
+						often a worktree that no longer exists — is resolved first. `magus
+						doctor` names which one.
+					</text>
+					<text fg={theme.colors.muted}>
+						Press a to fix: magus moves those rows forward to v
+						{status.target ?? status.installed ?? "?"}, backing up
+						installed_plugins.json first. Nothing is deleted or downgraded.
+					</text>
+				</box>
+			) : null}
 
 			{/* Description */}
 			<box marginTop={1} marginBottom={1}>