magus-cli 7.0.0 → 7.2.0

package/src/ui/components/layout/FooterHints.tsx

@@ -1,4 +1,5 @@
 import type React from "react";
+import { hintChip } from "../../theme-mode.js";
 import { theme } from "../../theme.js";
 
 /** One footer hint: a key (or key group) and the action it performs. */
@@ -28,11 +29,12 @@ export function joinKeys(keys: string[]): string {
 // The shared chip palette, not a local one. This file used to define its own
 // (`theme.colors.dim` block + terminal-foreground ink), which is why the footer
 // stayed a low-contrast grey-on-grey strip after the palette was made vivid —
-// the new colours simply never reached it. Anything chip-shaped uses theme.hints.
-const KEY_BG = theme.hints.defaultBg;
-const KEY_FG = theme.hints.fg;
-const LABEL_FG = theme.colors.muted;
-const GAP = "   ";
+// the new colours simply never reached it. Anything chip-shaped uses the theme.
+//
+// `hintChip()` rather than `theme.hints`: the chip is two fills that must sit a
+// measured step apart, and "a step quieter" is only definable against a page.
+// The static palette cannot express it; `theme-mode` resolves it.
+const GAP = "  ";
 
 /**
  * Render a row of footer hints as key badges + labels:
@@ -45,25 +47,35 @@ const GAP = "   ";
 export function FooterHints({
 	hints,
 }: { hints: FooterHint[] }): React.ReactNode {
+	const ink = hintChip();
 	const nodes: React.ReactNode[] = [];
 	hints.forEach((hint, i) => {
 		// A hint is identified by its key chord plus label, not its position.
 		const id = `${joinKeys(hint.keys)}:${hint.label}`;
 		if (i > 0) {
 			nodes.push(
-				<span key={`gap-${id}`} fg={LABEL_FG}>
+				<span key={`gap-${id}`} fg={theme.colors.muted}>
 					{GAP}
 				</span>,
 			);
 		}
+		// The two halves butt together with no separator: the key's fill ends
+		// exactly where the label's begins, so the pair reads as one chip with a
+		// bright end rather than as a badge followed by a word.
+		//
+		// Both halves are padded on BOTH sides. The label used to carry a trailing
+		// space only, which left its first letter hard against the boundary between
+		// the two fills — the key's own trailing space sits on the bright fill, so
+		// there was no quiet gap on the label's side at all and `↑↓ select` read as
+		// one cramped word.
 		nodes.push(
-			<span key={`k-${id}`} bg={KEY_BG} fg={KEY_FG}>
+			<span key={`k-${id}`} bg={ink.keyBg} fg={ink.keyFg}>
 				{` ${joinKeys(hint.keys)} `}
 			</span>,
 		);
 		nodes.push(
-			<span key={`l-${id}`} fg={LABEL_FG}>
-				{` ${hint.label}`}
+			<span key={`l-${id}`} bg={ink.labelBg} fg={ink.labelFg}>
+				{` ${hint.label} `}
 			</span>,
 		);
 	});

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

@@ -121,6 +121,7 @@ export function ModalContainer() {
 						defaultIndex={selectIndex}
 						onSelect={modal.onSelect}
 						onCancel={modal.onCancel}
+						cancellable={modal.cancellable}
 					/>
 				);
 

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/renderers/profileRenderers.tsx

@@ -68,7 +68,16 @@ export function wrapNames(names: string[], lineMax = 40): string[] {
 	return lines;
 }
 
-export function formatDate(iso: string): string {
+/**
+ * A profile's timestamp, or an em dash when it has none.
+ *
+ * `createdAt`/`updatedAt` are bookkeeping the TUI writes and the CLI does not,
+ * so a CLI-authored or hand-written profile legitimately has neither. Rendering
+ * "—" states that plainly; the alternative, printing "Invalid Date", reads as a
+ * corrupt file rather than an absent field.
+ */
+export function formatDate(iso: string | undefined): string {
+	if (!iso) return "—";
 	try {
 		const d = new Date(iso);
 		return d.toLocaleDateString("en-US", {
@@ -232,18 +241,23 @@ const predefinedRenderer: ItemRenderer<{
 const savedRenderer: ItemRenderer<{ kind: "saved"; entry: ProfileEntry }> = {
 	renderRow: ({ item, isSelected }) => {
 		const { entry } = item;
-		const pluginCount = Object.keys(entry.plugins).length;
+		const pluginCount = Object.keys(entry.plugins ?? {}).length;
 		const dateStr = formatDate(entry.updatedAt);
 		const label = truncate(
 			`${entry.name} — ${pluginCount} plugin${pluginCount !== 1 ? "s" : ""} · ${dateStr}`,
 			45,
 		);
+		// `●` for the profile the project is actually running, matching the glyph
+		// `magus profile list` prints. A column that is blank on every row costs
+		// two cells and is worth it: without the mark, activating a profile and
+		// landing on this tab shows two rows that look identical.
+		const marker = entry.active ? "●" : " ";
 
 		if (isSelected) {
 			return (
 				<text bg={theme.selection.bg} fg={theme.selection.fg}>
 					{" "}
-					{label}{" "}
+					{marker} {label}{" "}
 				</text>
 			);
 		}
@@ -254,6 +268,9 @@ const savedRenderer: ItemRenderer<{ kind: "saved"; entry: ProfileEntry }> = {
 
 		return (
 			<text fg={theme.colors.text}>
+				<span fg={entry.active ? theme.colors.success : theme.colors.text}>
+					{marker}{" "}
+				</span>
 				<span fg={scopeColor}>{scopeLabel} </span>
 				<span fg={theme.colors.text}>{label}</span>
 			</text>
@@ -262,7 +279,7 @@ const savedRenderer: ItemRenderer<{ kind: "saved"; entry: ProfileEntry }> = {
 
 	renderDetail: ({ item }) => {
 		const { entry: selectedProfile } = item;
-		const plugins = Object.keys(selectedProfile.plugins);
+		const plugins = Object.keys(selectedProfile.plugins ?? {});
 		const cleanPlugins = plugins.map(stripSuffix);
 		const scopeColor =
 			selectedProfile.scope === "user"
@@ -281,6 +298,12 @@ const savedRenderer: ItemRenderer<{ kind: "saved"; entry: ProfileEntry }> = {
 				<box marginTop={1}>
 					<text fg={theme.colors.muted}>Scope: </text>
 					<text fg={scopeColor}>{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?". */}
+					{selectedProfile.active ? (
+						<text fg={theme.colors.success}> · active</text>
+					) : null}
 				</box>
 				<box marginTop={1}>
 					<text fg={theme.colors.muted}>