magus-cli 7.6.0 → 7.8.0

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

@@ -0,0 +1,231 @@
+import type { FailureReport, FailureRow } from "../../state/types.js";
+import { theme } from "../../theme.js";
+
+/** Border (2) and horizontal padding (3 + 3). */
+const CHROME = 8;
+const MAX_WIDTH = 88;
+const MIN_WIDTH = 40;
+/** "✗ " before each row's subject. */
+const MARK = "✗ ";
+/**
+ * Rows of the popup that are not failure rows: border (2), padding (2), the
+ * headline and its gap (2), the footer and its gap (2), and a row of air
+ * between the popup and the terminal's edge (2).
+ */
+const FIXED_ROWS = 10;
+
+/**
+ * The popup's width for a terminal `terminalWidth` columns wide: as wide as the
+ * rows need, never wider than the terminal leaves room for.
+ */
+export function failureListWidth(terminalWidth: number): number {
+	return Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, terminalWidth - 4));
+}
+
+/**
+ * Whether a row's reason goes on its own line under the subject. The subject
+ * never wraps — it is what the user scans for — so a long one (several plugins
+ * sharing a reason) takes the line to itself and the reason goes beneath it,
+ * rather than being squeezed into a sliver beside it.
+ */
+export function reasonBelow(subject: string, innerWidth: number): boolean {
+	return MARK.length + subject.length + 2 > innerWidth / 2;
+}
+
+/** Lines `text` takes when word-wrapped at `width` columns. */
+function wrappedLines(text: string, width: number): number {
+	if (width <= 0) return text.length;
+	let lines = 1;
+	let used = 0;
+	for (const word of text.split(/\s+/).filter(Boolean)) {
+		const len = word.length;
+		if (used === 0) {
+			used = len;
+		} else if (used + 1 + len <= width) {
+			used += 1 + len;
+		} else {
+			lines++;
+			used = len;
+		}
+		while (used > width) {
+			lines++;
+			used -= width;
+		}
+	}
+	return lines;
+}
+
+/** Terminal rows one failure row takes at an inner width of `inner`. */
+function rowHeight(row: FailureRow, inner: number): number {
+	if (reasonBelow(row.subject, inner)) {
+		const column = inner - MARK.length;
+		return (
+			1 +
+			wrappedLines(row.reason, column) +
+			(row.fix ? wrappedLines(row.fix, column) : 0)
+		);
+	}
+	const column = inner - (MARK.length + row.subject.length + 2);
+	return (
+		wrappedLines(row.reason, column) +
+		(row.fix ? wrappedLines(row.fix, column) : 0)
+	);
+}
+
+/**
+ * The rows that fit a terminal `terminalHeight` rows tall, and how many did
+ * not. Without a height every row is drawn. A popup taller than the terminal
+ * would push its own headline and footer off screen, so it stops early and
+ * says `+N more` instead — and always shows at least one row.
+ */
+export function visibleFailureRows(
+	report: FailureReport,
+	terminalWidth: number,
+	terminalHeight?: number,
+): { rows: FailureRow[]; hidden: number } {
+	if (terminalHeight === undefined) return { rows: report.rows, hidden: 0 };
+	const inner = failureListWidth(terminalWidth) - CHROME;
+	const fixRows = report.fix ? 1 + wrappedLines(report.fix, inner) : 0;
+	const budget = terminalHeight - FIXED_ROWS - fixRows;
+	const total = report.rows.reduce(
+		(sum, row) => sum + rowHeight(row, inner),
+		0,
+	);
+	if (total <= budget) return { rows: report.rows, hidden: 0 };
+
+	// One row is kept back for the "+N more" line.
+	const rows: FailureRow[] = [];
+	let used = 0;
+	for (const row of report.rows) {
+		const height = rowHeight(row, inner);
+		if (rows.length > 0 && used + height > budget - 1) break;
+		rows.push(row);
+		used += height;
+	}
+	return { rows, hidden: report.rows.length - rows.length };
+}
+
+/**
+ * A row's reason and, when it has its own, its fix beneath it. A plain call,
+ * not a component, so the whole popup is one element tree.
+ */
+function reasonColumn(row: FailureRow) {
+	return (
+		<box flexDirection="column" flexGrow={1} flexShrink={1}>
+			<text fg={theme.colors.muted} wrapMode="word">
+				{row.reason}
+			</text>
+			{row.fix ? (
+				<text fg={theme.colors.text} wrapMode="word">
+					{row.fix}
+				</text>
+			) : null}
+		</box>
+	);
+}
+
+/**
+ * THE failure popup: what did not happen, counted; each thing that failed with
+ * why; and the one fix, when there is one. The shape is {@link FailureReport},
+ * built by a pure function per screen, so every failure reads the same way.
+ *
+ * Theme tokens only: the ✗ in danger, the subject in the text colour, the
+ * reason muted — the reason is the detail, the subject is what the user scans.
+ * A fix is in the text colour, under its row when only that row has it, or
+ * once under all of them. Reasons wrap; subjects do not. Given the terminal's
+ * height, it draws only the rows that fit and ends with `+N more`. Any key
+ * dismisses it (ModalContainer).
+ */
+export function FailureListModal({
+	report,
+	terminalWidth,
+	terminalHeight,
+}: {
+	report: FailureReport;
+	terminalWidth: number;
+	/** Cap the rows to this many terminal rows; every row is drawn without it. */
+	terminalHeight?: number;
+}) {
+	const width = failureListWidth(terminalWidth);
+	const inner = width - CHROME;
+	const { rows, hidden } = visibleFailureRows(
+		report,
+		terminalWidth,
+		terminalHeight,
+	);
+
+	return (
+		<box
+			flexDirection="column"
+			border
+			borderStyle="rounded"
+			borderColor={theme.colors.dim}
+			backgroundColor={theme.surface.bg}
+			paddingLeft={3}
+			paddingRight={3}
+			paddingTop={1}
+			paddingBottom={1}
+			width={width}
+		>
+			<box marginBottom={1}>
+				<text fg={theme.colors.text}>
+					<span fg={theme.colors.danger}>{MARK}</span>
+					<strong>{report.headline}</strong>
+				</text>
+			</box>
+
+			{/*
+			 * The index is part of the key: a report built with `group: false`
+			 * keeps rows apart even when subject and reason match, and a repeated
+			 * key makes React drop or reuse one of them.
+			 */}
+			{rows.map((row, index) =>
+				reasonBelow(row.subject, inner) ? (
+					<box
+						key={`${row.subject}:${row.reason}:${index}`}
+						flexDirection="column"
+					>
+						<text fg={theme.colors.text}>
+							<span fg={theme.colors.danger}>{MARK}</span>
+							<span fg={theme.colors.text}>{row.subject}</span>
+						</text>
+						<box paddingLeft={MARK.length}>{reasonColumn(row)}</box>
+					</box>
+				) : (
+					<box
+						key={`${row.subject}:${row.reason}:${index}`}
+						flexDirection="row"
+					>
+						<box flexShrink={0}>
+							<text fg={theme.colors.text}>
+								<span fg={theme.colors.danger}>{MARK}</span>
+								<span fg={theme.colors.text}>{`${row.subject}  `}</span>
+							</text>
+						</box>
+						{reasonColumn(row)}
+					</box>
+				),
+			)}
+
+			{hidden > 0 ? (
+				<box paddingLeft={MARK.length}>
+					<text fg={theme.colors.muted}>{`+${hidden} more`}</text>
+				</box>
+			) : null}
+
+			{report.fix ? (
+				<box marginTop={1}>
+					<text fg={theme.colors.text} wrapMode="word">
+						{report.fix}
+					</text>
+				</box>
+			) : null}
+
+			<box marginTop={1}>
+				<text fg={theme.colors.muted}>Press any key to continue</text>
+			</box>
+		</box>
+	);
+}
+
+export default FailureListModal;

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

@@ -6,20 +6,14 @@ interface MessageModalProps {
 	title: string;
 	/** Modal message */
 	message: string;
-	/** Message variant */
-	variant: "info" | "success" | "error";
 }
 
-const variantConfig = {
-	info: { icon: "ℹ", color: theme.colors.info },
-	success: { icon: "✓", color: theme.colors.success },
-	error: { icon: "✗", color: theme.colors.danger },
-} as const;
-
-/** Draws the message. Any key dismisses it — ModalContainer handles that. */
-export function MessageModal({ title, message, variant }: MessageModalProps) {
-	const config = variantConfig[variant];
-
+/**
+ * Draws information to read: help text, a command to run. Never a failure —
+ * those go in `FailureListModal`. Any key dismisses it — ModalContainer
+ * handles that.
+ */
+export function MessageModal({ title, message }: MessageModalProps) {
 	return (
 		<box
 			flexDirection="column"
@@ -34,7 +28,7 @@ export function MessageModal({ title, message, variant }: MessageModalProps) {
 			width={60}
 		>
 			<box marginBottom={1}>
-				<text fg={config.color}>{config.icon} </text>
+				<text fg={theme.colors.info}>ℹ </text>
 				<text fg={theme.colors.text}>
 					<strong>{title}</strong>
 				</text>

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

@@ -5,6 +5,7 @@ import { type KeyPress, isScrollKey } from "../../input/key-dispatch.js";
 import { useApp, useModal } from "../../state/AppContext.js";
 import { useDimensions } from "../../state/DimensionsContext.js";
 import { ConfirmModal } from "./ConfirmModal.js";
+import { FailureListModal } from "./FailureListModal.js";
 import { HelpOverlay, helpOverlaySize } from "./HelpOverlay.js";
 import { InputModal } from "./InputModal.js";
 import { LoadingModal } from "./LoadingModal.js";
@@ -37,7 +38,7 @@ const isPlain = (key: KeyPress) => !key.ctrl && !key.meta;
  *            Only an <input> that was ALREADY focused when the key arrived:
  *            the Enter that opens an input modal from a select never reaches
  *            it (KeyRouter's `dispatchThenGuardFocus`).
- * - message: any key dismisses.
+ * - message, failures: any key dismisses.
  * - loading: keys are swallowed until the work finishes.
  * - help:    ↑↓ / PgUp / PgDn / Ctrl+U / Ctrl+D scroll; Esc or `?` close.
  */
@@ -102,6 +103,7 @@ export function ModalContainer() {
 				break;
 
 			case "message":
+			case "failures":
 				modal.onDismiss();
 				break;
 
@@ -174,11 +176,14 @@ export function ModalContainer() {
 				);
 
 			case "message":
+				return <MessageModal title={modal.title} message={modal.message} />;
+
+			case "failures":
 				return (
-					<MessageModal
-						title={modal.title}
-						message={modal.message}
-						variant={modal.variant}
+					<FailureListModal
+						report={modal.report}
+						terminalWidth={dimensions.terminalWidth}
+						terminalHeight={dimensions.terminalHeight}
 					/>
 				);
 

package/src/ui/components/modals/index.ts

@@ -2,5 +2,6 @@ export { ConfirmModal } from "./ConfirmModal.js";
 export { InputModal } from "./InputModal.js";
 export { SelectModal } from "./SelectModal.js";
 export { MessageModal } from "./MessageModal.js";
+export { FailureListModal } from "./FailureListModal.js";
 export { LoadingModal } from "./LoadingModal.js";
 export { ModalContainer } from "./ModalContainer.js";

package/src/ui/hooks/startupQueue.ts

@@ -0,0 +1,56 @@
+/**
+ * What the app shows next at startup, when the modal slot is free — the ONE
+ * order every startup popup and question is asked in. Pure, so the order is
+ * tested without mounting the app; `App.tsx`'s startup effect acts on it.
+ *
+ * The order:
+ *
+ *  1. Failure reports, oldest first. A failure is something that already
+ *     happened, and the question after it may be answered differently once
+ *     it is known — so the profile gate's refusals, queued in the same tick as
+ *     the profile question, are read BEFORE it and never replace it.
+ *  2. The gitignore question, once no newer check is pending.
+ *  3. The broken-plugins question.
+ *  4. The profile question — last, and asked again whenever the slot is free
+ *     and it has not been answered (it cannot be dismissed).
+ *
+ * Nothing is shown while any modal is open: two needs arriving in one commit
+ * would otherwise both see an empty slot, and the later would replace the
+ * earlier after its need was cleared.
+ */
+
+import type { FailureReport } from "../state/types.js";
+
+export interface StartupQueueState<ProfileNeed> {
+	/** A modal (any modal) is on screen. */
+	modalOpen: boolean;
+	/** Failure reports not yet shown, oldest first. */
+	reports: readonly FailureReport[];
+	/** A gitignore answer is waiting and no newer check is running. */
+	gitignoreReady: boolean;
+	/** Plugins found loading an older version than installed, or null. */
+	brokenCount: number | null;
+	/** The unanswered profile question, or null. */
+	profileNeed: ProfileNeed | null;
+}
+
+export type StartupStep<ProfileNeed> =
+	| { kind: "report"; report: FailureReport; rest: FailureReport[] }
+	| { kind: "gitignore" }
+	| { kind: "stale-load"; brokenCount: number }
+	| { kind: "profile"; need: ProfileNeed }
+	| null;
+
+export function nextStartupStep<ProfileNeed>(
+	s: StartupQueueState<ProfileNeed>,
+): StartupStep<ProfileNeed> {
+	if (s.modalOpen) return null;
+	const [report, ...rest] = s.reports;
+	if (report) return { kind: "report", report, rest };
+	if (s.gitignoreReady) return { kind: "gitignore" };
+	if (s.brokenCount !== null) {
+		return { kind: "stale-load", brokenCount: s.brokenCount };
+	}
+	if (s.profileNeed !== null) return { kind: "profile", need: s.profileNeed };
+	return null;
+}

package/src/ui/hooks/useGitignoreModal.ts

@@ -1,6 +1,7 @@
 import { useCallback } from "react";
+import { stepFailureReport } from "../adapters/startupReports.js";
 import { useApp, useNavigation } from "../state/AppContext.js";
-import type { ModalState } from "../state/types.js";
+import type { FailureReport, ModalState } from "../state/types.js";
 
 /**
  * Startup gitignore-violation modal: magus launches, detects a problem, and
@@ -88,8 +89,16 @@ export function useGitignoreModal() {
 			violationCount: number;
 			safeCount: number;
 			generated?: readonly string[];
-			/** Returns what it did, shown before returning to the app. */
-			onFixSafe: () => Promise<string | undefined> | string | undefined;
+			/**
+			 * Runs the fix and answers what it could not do — null when all of it
+			 * applied. The Git State tab shows what changed; failures go into the
+			 * one failure popup.
+			 */
+			onFixSafe: () =>
+				| Promise<FailureReport | null | undefined>
+				| FailureReport
+				| null
+				| undefined;
 		}) => {
 			if (args.violationCount === 0) return;
 			const dismiss = () => dispatch({ type: "HIDE_MODAL" });
@@ -101,9 +110,9 @@ export function useGitignoreModal() {
 					// A loading modal, NOT HIDE_MODAL. The fix is async, and an empty
 					// modal slot is App's signal that the next startup question may be
 					// asked: hiding here let the profile question show during the await,
-					// be marked as asked, and then be replaced by "Gitignore fixed" —
+					// be marked as asked, and then be replaced by the fix's result —
 					// lost for the whole session. The slot stays occupied until the
-					// result below is dismissed.
+					// fix settles.
 					dispatch({
 						type: "SHOW_MODAL",
 						modal: { type: "loading", message: "Fixing gitignore…" },
@@ -111,37 +120,28 @@ export function useGitignoreModal() {
 					// Called inside `.then`, not passed to `Promise.resolve`: a fixer
 					// that throws synchronously must land in `.catch` below too, or
 					// the loading modal above stays up and swallows every key.
+					const fail = (report: FailureReport) =>
+						dispatch({
+							type: "SHOW_MODAL",
+							modal: { type: "failures", report, onDismiss: dismiss },
+						});
 					void Promise.resolve()
 						.then(() => args.onFixSafe())
 						.then((report) => {
-							// Nothing to report still has to clear the loading modal: it
-							// swallows every key, so leaving it would hang the app.
-							if (!report) {
-								dispatch({ type: "HIDE_MODAL" });
-								return;
-							}
-							dispatch({
-								type: "SHOW_MODAL",
-								modal: {
-									type: "message",
-									title: "Gitignore fixed",
-									message: report,
-									variant: "success",
-									onDismiss: dismiss,
-								},
-							});
+							// The loading modal must go — it swallows every key — and the
+							// empty slot lets the next startup question in. What the fix
+							// could not do takes the slot first, in the failure popup.
+							if (report) fail(report);
+							else dispatch({ type: "HIDE_MODAL" });
 						})
 						.catch((err) => {
-							dispatch({
-								type: "SHOW_MODAL",
-								modal: {
-									type: "message",
-									title: "Safe fixes failed",
-									message: err instanceof Error ? err.message : String(err),
-									variant: "error",
-									onDismiss: dismiss,
-								},
-							});
+							fail(
+								stepFailureReport(
+									"The gitignore fixes were not applied",
+									".gitignore",
+									err,
+								),
+							);
 						});
 				},
 				onOpenTab: () => {