magus-cli 7.6.0 → 7.8.0

package/src/ui/screens/StylesScreen.tsx

@@ -16,7 +16,6 @@ import {
 	acceptPendingUpdate,
 	checkAllSources,
 	checkSourceForUpdates,
-	describeCommunityFailure,
 	fetchCommunityStyles,
 	readCommunityStatuses,
 } from "../../services/community-styles.js";
@@ -33,6 +32,9 @@ import {
 } from "../../services/styles-manager.js";
 import { fillTerminology } from "../../services/terminology-filler.js";
 import { openInDefaultApp } from "../../utils/open-file.js";
+import { counted, failureReport } from "../adapters/failureReport.js";
+import { exceptionReason } from "../adapters/pluginsAdapter.js";
+import { stepFailureReport } from "../adapters/startupReports.js";
 import {
 	type StyleBrowserItem,
 	buildStyleBrowserItems,
@@ -47,8 +49,9 @@ import {
 	renderStyleDetail,
 	renderStyleRow,
 } from "../renderers/styleRenderers.js";
-import { useApp, useModal } from "../state/AppContext.js";
+import { useApp, useFailurePopup, useModal } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
+import type { FailureRow } from "../state/types.js";
 import { theme } from "../theme.js";
 
 export function StylesScreen() {
@@ -132,24 +135,25 @@ export function StylesScreen() {
 		[snapshot],
 	);
 
-	// ── Status line (auto-clearing) ───────────────────────────────────────────
+	// ── Failures ──────────────────────────────────────────────────────────────
 
 	/**
-	 * Set the status line.
-	 *
-	 * No timer. A message used to erase itself after 5s, which meant the last
-	 * thing you did was usually gone by the time you looked — and made the line
-	 * untestable by anything that samples the screen a moment later. It is
-	 * cleared when the NEXT action starts instead, so the screen always reports
-	 * the most recent thing that happened.
+	 * No status line and no messages. A success shows as the screen's state —
+	 * the active style, a row's upstream badge, "talking to GitHub…" while a
+	 * request runs. What did not happen goes into the one failure popup, with
+	 * why and, when there is one, what to do. A key pressed on a row it does
+	 * nothing on (the footer does not offer it there) does nothing.
 	 */
-	const showStatus = useCallback(
-		(text: string, tone: "success" | "error" = "success") => {
-			dispatch({ type: "STYLES_STATUS_SET", status: { text, tone } });
-		},
-		[dispatch],
+	const showFailures = useFailurePopup();
+	const refuse = useCallback(
+		(headline: string, subject: string, reason: string, fix?: string) =>
+			showFailures(
+				failureReport(headline, [
+					fix ? { subject, reason, fix } : { subject, reason },
+				]),
+			),
+		[showFailures],
 	);
-	const statusMsg = stylesState.status;
 
 	// ── Derived ───────────────────────────────────────────────────────────────
 
@@ -226,14 +230,14 @@ export function StylesScreen() {
 	 * the right section.
 	 */
 	const handleFetch = useCallback(async () => {
-		if (isFetching) {
-			showStatus("Already talking to GitHub — one request at a time", "error");
-			return;
-		}
+		// One request at a time; the header already says "talking to GitHub…".
+		if (isFetching) return;
 		if (!cacheDir) {
-			showStatus(
-				"magus could not resolve its cache directory — set CLAUDE_CONFIG_DIR",
-				"error",
+			await refuse(
+				"Nothing was fetched",
+				"styles cache",
+				"magus could not find its cache directory",
+				"Set CLAUDE_CONFIG_DIR",
 			);
 			return;
 		}
@@ -249,9 +253,10 @@ export function StylesScreen() {
 			selectedItem.source.origin === "community"
 		) {
 			if (!selectedItem.source.managed) {
-				showStatus(
-					`${selectedItem.label} is your own copy — magus will not overwrite it`,
-					"error",
+				await refuse(
+					`${selectedItem.label} was not fetched`,
+					selectedItem.label,
+					"it is your own copy, and magus will not overwrite it",
 				);
 				return;
 			}
@@ -267,10 +272,7 @@ export function StylesScreen() {
 					: id,
 			);
 		} else {
-			showStatus(
-				"Nothing to fetch here — move to a Community row and press f",
-				"error",
-			);
+			// Not a row `f` acts on, and the footer does not offer it here.
 			return;
 		}
 
@@ -280,19 +282,17 @@ export function StylesScreen() {
 				const result = await acceptPendingUpdate({ cacheDir, id: accept });
 				await fetchData();
 				await refreshUpstream();
-				showStatus(
-					result.outcome === "accepted"
-						? `Updated ${accept} — press a to re-apply it`
-						: `No downloaded update for ${accept} — press u to check`,
-					result.outcome === "accepted" ? "success" : "error",
-				);
+				if (result.outcome !== "accepted") {
+					await refuse(
+						`${accept} was not updated`,
+						accept,
+						"no update has been downloaded for it",
+						"Press u to check for one",
+					);
+				}
 				return;
 			}
 
-			showStatus(
-				`Fetching ${ids.length} style${ids.length === 1 ? "" : "s"} from GitHub…`,
-				"success",
-			);
 			const result = await fetchCommunityStyles({
 				ids,
 				fetcher: githubFetcher,
@@ -301,33 +301,33 @@ export function StylesScreen() {
 			await fetchData();
 			await refreshUpstream();
 
-			if (result.failed.length > 0) {
-				// The FIRST failure verbatim, not a count. Each kind carries its own
-				// diagnosis — a 404 blames our registry, a DNS failure names Tailscale
-				// — and "3 styles failed" throws all of that away.
-				const [first] = result.failed;
-				showStatus(
-					describeCommunityFailure(first.failure, first.label),
-					"error",
-				);
-				return;
-			}
-			if (result.unknown.length > 0) {
-				showStatus(
-					`magus has no registry entry for ${result.unknown.join(", ")} — please report it`,
-					"error",
-				);
-				return;
-			}
-			showStatus(
-				`Fetched ${result.written.length} style${
-					result.written.length === 1 ? "" : "s"
-				} — read it, then press Space to select and a to apply`,
+			// Every failure with its own diagnosis — a 404 blames our registry, a
+			// DNS failure names Tailscale — never "3 styles failed".
+			const rows: FailureRow[] = [
+				...result.failed.map(({ failure, label }) =>
+					failure.kind === "rate-limited"
+						? {
+								subject: label,
+								reason: failure.detail,
+								fix: "Set GITHUB_TOKEN to raise the limit",
+							}
+						: { subject: label, reason: failure.detail },
+				),
+				...result.unknown.map((id) => ({
+					subject: id,
+					reason: "magus does not know where to fetch this style from",
+					fix: "Please report it",
+				})),
+			];
+			await showFailures(
+				failureReport(
+					`${counted(rows.length, "style")} ${rows.length === 1 ? "was" : "were"} not fetched`,
+					rows,
+				),
 			);
 		} catch (error) {
-			showStatus(
-				error instanceof Error ? error.message : String(error),
-				"error",
+			await showFailures(
+				stepFailureReport("Nothing was fetched", "styles", error),
 			);
 		} finally {
 			setIsFetching(false);
@@ -339,7 +339,8 @@ export function StylesScreen() {
 		snapshot,
 		fetchData,
 		refreshUpstream,
-		showStatus,
+		refuse,
+		showFailures,
 	]);
 
 	/**
@@ -352,17 +353,10 @@ export function StylesScreen() {
 	 */
 	const handleCheckUpdates = useCallback(
 		async (all: boolean) => {
-			if (isFetching) {
-				showStatus(
-					"Already talking to GitHub — one request at a time",
-					"error",
-				);
-				return;
-			}
-			if (!cacheDir || cachedCommunity.length === 0) {
-				showStatus("No fetched community styles to check", "error");
-				return;
-			}
+			// One request at a time; the header already says "talking to GitHub…".
+			if (isFetching) return;
+			// Nothing fetched, nothing to check: the Community rows say so.
+			if (!cacheDir || cachedCommunity.length === 0) return;
 
 			let cached = cachedCommunity;
 			let only: CommunityStyleSource | null = null;
@@ -374,13 +368,8 @@ export function StylesScreen() {
 						? selectedItem.source.name
 						: null;
 				const resolved = name ? resolveCommunityStyle(name) : null;
-				if (!resolved) {
-					showStatus(
-						"Move to a fetched community style and press u, or U to check all",
-						"error",
-					);
-					return;
-				}
+				// Not a row `u` acts on, and the footer does not offer it here.
+				if (!resolved) return;
 				only = resolved.source;
 				// Every style of this REPO, not just the selected row — one API call
 				// answers for all of them, so narrowing it further would pay the same
@@ -389,16 +378,16 @@ export function StylesScreen() {
 					(entry) => resolveCommunityStyle(entry.id)?.source.id === only?.id,
 				);
 				if (cached.length === 0) {
-					showStatus(
-						`${name} is not a copy magus manages — nothing to check`,
-						"error",
+					await refuse(
+						`${name} was not checked`,
+						name ?? "style",
+						"it is not a copy magus manages",
 					);
 					return;
 				}
 			}
 
 			setIsFetching(true);
-			showStatus("Checking GitHub for newer versions…");
 			try {
 				const statuses = only
 					? (
@@ -420,29 +409,26 @@ export function StylesScreen() {
 						).statuses;
 
 				await refreshUpstream();
-				const values = Object.values(statuses);
-				const updates = values.filter(
-					(s) => s.state === "update-available",
-				).length;
-				const unknown = values.filter((s) => s.state === "unknown");
-				if (updates > 0) {
-					showStatus(
-						`${updates} update${updates === 1 ? "" : "s"} downloaded to .pending — press f on a row to accept`,
-					);
-				} else if (unknown.length === values.length && unknown.length > 0) {
-					// Every answer was "we could not look". Say the reason, not a
-					// reassuring summary — a rate-limited check must never read as
-					// up to date.
-					showStatus(`Could not check — ${unknown[0].detail}`, "error");
-				} else {
-					showStatus(
-						`Up to date${unknown.length > 0 ? ` (${unknown.length} could not be checked)` : ""}`,
-					);
-				}
+				// An update found shows on its row. A style that could not be
+				// checked is a failure, said with its reason — a rate-limited check
+				// must never read as up to date.
+				const unknown = Object.entries(statuses).filter(
+					([, s]) => s.state === "unknown",
+				);
+				await showFailures(
+					failureReport(
+						`${counted(unknown.length, "style")} could not be checked for updates`,
+						unknown.map(([id, s]) => ({
+							subject: id.startsWith(COMMUNITY_ID_PREFIX)
+								? id.slice(COMMUNITY_ID_PREFIX.length)
+								: id,
+							reason: s.detail || "GitHub did not answer",
+						})),
+					),
+				);
 			} catch (error) {
-				showStatus(
-					error instanceof Error ? error.message : String(error),
-					"error",
+				await showFailures(
+					stepFailureReport("Nothing was checked for updates", "styles", error),
 				);
 			} finally {
 				setIsFetching(false);
@@ -454,7 +440,8 @@ export function StylesScreen() {
 			cachedCommunity,
 			selectedItem,
 			refreshUpstream,
-			showStatus,
+			refuse,
+			showFailures,
 		],
 	);
 
@@ -477,9 +464,11 @@ export function StylesScreen() {
 		const { source } = selectedItem;
 
 		if (selectedItem.disabled) {
-			showStatus(
-				`"${source.name}" is a template — fill it in and import it instead`,
-				"error",
+			void refuse(
+				`${source.name} was not selected`,
+				source.name,
+				"it is a template",
+				"Fill it in and import it instead",
 			);
 			return;
 		}
@@ -506,7 +495,7 @@ export function StylesScreen() {
 		stylesState.selected,
 		snapshot,
 		dispatch,
-		showStatus,
+		refuse,
 		handleFetch,
 	]);
 
@@ -515,11 +504,20 @@ export function StylesScreen() {
 	const handleApply = useCallback(async () => {
 		if (isApplying) return;
 		if (errors.length > 0) {
-			showStatus(errors[0], "error");
+			await refuse(
+				"No style was applied",
+				"selection",
+				errors[0] ?? "the selection is not valid",
+			);
 			return;
 		}
 		if (chosen.presets.length === 0 && chosen.imports.length === 0) {
-			showStatus("Nothing selected — press Space to tick a style", "error");
+			await refuse(
+				"No style was applied",
+				"selection",
+				"nothing is ticked",
+				"Press Space to tick a style",
+			);
 			return;
 		}
 
@@ -531,43 +529,48 @@ export function StylesScreen() {
 				imports: chosen.imports as ImportedStyle[],
 			});
 			await fetchData();
-			const where = result.profile
-				? `profile "${result.profile}"`
-				: "this project";
-			// Say plainly when the manifest was NOT updated: without that record a
-			// the next activation renders settings.json from the manifest and
-			// drops the style.
-			const durability =
-				result.profile && !result.recordedInManifest
-					? " — not in profiles.json, so `magus install` will drop it"
-					: "";
-			showStatus(
-				`Applied ${result.styleName} to ${where} — commit .claude/style.json to share it${durability}`,
-				result.profile && !result.recordedInManifest ? "error" : "success",
-			);
+			// Applied: the header shows the active style. Said only when the
+			// profile did NOT record it — the next activation renders the live
+			// settings from the profile and drops the style.
+			if (result.profile && !result.recordedInManifest) {
+				await refuse(
+					`${result.styleName} is active, but not saved in the profile`,
+					`profile ${result.profile}`,
+					"the style is not recorded in it, so the next magus install drops it",
+				);
+			}
 		} catch (error) {
-			showStatus(
-				error instanceof Error ? error.message : String(error),
-				"error",
+			await showFailures(
+				stepFailureReport("No style was applied", "output style", error),
 			);
 		} finally {
 			setIsApplying(false);
 		}
-	}, [isApplying, errors, chosen, state.projectPath, fetchData, showStatus]);
+	}, [
+		isApplying,
+		errors,
+		chosen,
+		state.projectPath,
+		fetchData,
+		refuse,
+		showFailures,
+	]);
 
 	const handleClear = useCallback(async () => {
 		try {
 			await clearStyle(state.projectPath);
 			await fetchData();
 			dispatch({ type: "STYLES_SET_SELECTION", ids: [] });
-			showStatus("Cleared the active output style");
 		} catch (error) {
-			showStatus(
-				error instanceof Error ? error.message : String(error),
-				"error",
+			await showFailures(
+				stepFailureReport(
+					"The output style was not cleared",
+					"output style",
+					error,
+				),
 			);
 		}
-	}, [state.projectPath, fetchData, dispatch, showStatus]);
+	}, [state.projectPath, fetchData, dispatch, showFailures]);
 
 	const handleReset = useCallback(() => {
 		dispatch({
@@ -577,8 +580,7 @@ export function StylesScreen() {
 				...(snapshot?.applied?.imports ?? []),
 			],
 		});
-		showStatus("Selection reset to the live style");
-	}, [snapshot, dispatch, showStatus]);
+	}, [snapshot, dispatch]);
 
 	/**
 	 * Start a new team style: scaffold a file in the project's
@@ -586,7 +588,7 @@ export function StylesScreen() {
 	 *
 	 * The file is created rather than opened in an editor — magus owns the
 	 * TTY, and handing it to `$EDITOR` from inside OpenTUI is a good way to
-	 * leave the terminal wedged. The status line reports the path; `r` reloads.
+	 * leave the terminal wedged. It opens in the default app; `r` reloads.
 	 */
 	const handleNewTeamStyle = useCallback(async () => {
 		const name = await modal.input(
@@ -597,35 +599,36 @@ export function StylesScreen() {
 		try {
 			const created = await createTeamStyle(state.projectPath, name);
 			await fetchData();
-			// Project-relative: the status line is one row, and an absolute path
-			// under a long temp or worktree prefix is truncated before it reaches
-			// the filename — the only part the reader needs.
+			// Project-relative: an absolute path under a long temp or worktree
+			// prefix is cut before it reaches the filename — the part that matters.
 			const shown = created.path.startsWith(`${state.projectPath}/`)
 				? created.path.slice(state.projectPath.length + 1)
 				: created.path;
-			// Open it straight away: a scaffold nobody edits is worse than no
-			// scaffold, and the whole point of creating one is to write in it.
-			let opened = true;
+			// Open it straight away — an existing one too, which is opened rather
+			// than overwritten: a scaffold nobody edits is worse than no scaffold,
+			// and the whole point of creating one is to write in it. The new row
+			// is the confirmation; only a file that would not open is said.
 			try {
 				await openInDefaultApp(created.path);
-			} catch {
-				opened = false;
+			} catch (error) {
+				await showFailures(
+					failureReport(`${shown} was not opened`, [
+						{
+							subject: shown,
+							reason: exceptionReason(
+								error instanceof Error ? error.message : String(error),
+							).reason,
+							fix: "Open it to edit, then press r",
+						},
+					]),
+				);
 			}
-			showStatus(
-				created.existed
-					? `${shown} already exists — opened it instead of overwriting`
-					: opened
-						? `Created and opened ${shown} — press r after saving`
-						: `Created ${shown} — open it to edit, then press r`,
-				created.existed ? "error" : "success",
-			);
 		} catch (error) {
-			showStatus(
-				error instanceof Error ? error.message : String(error),
-				"error",
+			await showFailures(
+				stepFailureReport("The team style was not created", name, error),
 			);
 		}
-	}, [modal, state.projectPath, fetchData, showStatus]);
+	}, [modal, state.projectPath, fetchData, showFailures]);
 
 	/**
 	 * Open the selected style's file in the system's default application.
@@ -636,9 +639,11 @@ export function StylesScreen() {
 	 */
 	const handleOpen = useCallback(async () => {
 		if (selectedItem?.kind === "offer") {
-			showStatus(
-				`${selectedItem.label} is not on this machine yet — press f to fetch it`,
-				"error",
+			await refuse(
+				`${selectedItem.label} was not opened`,
+				selectedItem.label,
+				"it is not on this machine yet",
+				"Press f to fetch it",
 			);
 			return;
 		}
@@ -646,29 +651,29 @@ export function StylesScreen() {
 		const { source } = selectedItem;
 
 		if (source.kind === "preset") {
-			showStatus(
-				`${source.name} is built into magus and is replaced on update — press n to make a team style instead`,
-				"error",
+			await refuse(
+				`${source.name} was not opened`,
+				source.name,
+				"it is built into magus and is replaced on update",
+				"Press n to make a team style instead",
 			);
 			return;
 		}
 
+		// Opened in the default app, which is the confirmation. Whether a later
+		// re-fetch or re-capture overwrites it is on the style's detail panel.
 		try {
 			await openInDefaultApp(source.path);
-			showStatus(
-				source.origin === "anthropic"
-					? `Opened ${source.name}.md — note re-capturing overwrites it`
-					: source.origin === "community"
-						? `Opened ${source.name}.md — a re-fetch overwrites it, so edit a copy`
-						: `Opened ${source.name}.md — press r after saving`,
-			);
 		} catch (error) {
-			showStatus(
-				error instanceof Error ? error.message : String(error),
-				"error",
+			await showFailures(
+				stepFailureReport(
+					`${source.name} was not opened`,
+					`${source.name}.md`,
+					error,
+				),
 			);
 		}
-	}, [selectedItem, showStatus]);
+	}, [selectedItem, refuse, showFailures]);
 
 	const isFilling = stylesState.isFilling;
 
@@ -680,44 +685,30 @@ export function StylesScreen() {
 	 * for. It runs read-only and returns table rows; magus writes the file.
 	 */
 	const handleFillTemplate = useCallback(async () => {
-		// Both of these used to return silently. A fill runs for minutes, so the
-		// natural thing a user does is press t again — and got no acknowledgement
-		// that the key had even been received, which reads as the key being dead.
-		if (isFilling) {
-			showStatus(
-				"Already reading the codebase — this takes a few minutes",
-				"error",
-			);
-			return;
-		}
-		if (!selectedItem || selectedItem.kind !== "style") {
-			showStatus("Select a style row first", "error");
-			return;
-		}
+		// A fill runs for minutes; the header says "reading the codebase…" for
+		// all of it, so a second `t` is acknowledged by that state, not ignored.
+		if (isFilling) return;
+		// `t` is offered only on a template preset (the footer hides it
+		// elsewhere), and does nothing anywhere else.
+		if (!selectedItem || selectedItem.kind !== "style") return;
 		const { source } = selectedItem;
-		if (source.kind !== "preset" || !source.template) {
-			showStatus("Only a template preset can be filled in", "error");
-			return;
-		}
+		if (source.kind !== "preset" || !source.template) return;
 
 		dispatch({ type: "STYLES_FILL_START" });
-		showStatus(
-			`Reading the codebase to fill ${source.name}… this can take a few minutes`,
-			"success",
-		);
 		try {
-			const result = await fillTerminology({
+			// Filled: the new style appears under Team.
+			await fillTerminology({
 				projectPath: state.projectPath,
 				templateBody: source.body,
 			});
 			await fetchData();
-			showStatus(
-				`Filled ${source.name} with ${result.rows.length} terms — it is now under Team`,
-			);
 		} catch (error) {
-			showStatus(
-				error instanceof Error ? error.message : String(error),
-				"error",
+			await showFailures(
+				stepFailureReport(
+					`${source.name} was not filled in`,
+					source.name,
+					error,
+				),
 			);
 		} finally {
 			dispatch({ type: "STYLES_FILL_END" });
@@ -727,7 +718,7 @@ export function StylesScreen() {
 		selectedItem,
 		state.projectPath,
 		fetchData,
-		showStatus,
+		showFailures,
 		dispatch,
 	]);
 
@@ -763,112 +754,56 @@ export function StylesScreen() {
 		blur: () => dispatch({ type: "SET_SEARCHING", isSearching: false }),
 	});
 
-	/**
-	 * The previous message belongs to the previous ACTION, so every key this
-	 * screen acts on clears it first. Keys another layer takes — a digit or Tab
-	 * leaving the tab, text typed into the search box — leave it alone, so a
-	 * round trip through another tab keeps it.
-	 */
-	const clearStatus = () => {
-		if (stylesState.status) dispatch({ type: "STYLES_STATUS_CLEAR" });
-	};
-
 	useScreenKeys("styles", {
-		toggle: () => {
-			clearStatus();
-			handleToggle();
-		},
+		toggle: () => handleToggle(),
 		apply: () => {
-			clearStatus();
 			void handleApply();
 		},
 		fill: () => {
-			clearStatus();
 			void handleFillTemplate();
 		},
 		clear: () => {
-			clearStatus();
 			void handleClear();
 		},
 		// Enter opens the style for editing; Space is the ticking key. Enter
 		// reads as "go into this thing", and ticking already has a key that
 		// means exactly that and nothing else.
 		edit: () => {
-			clearStatus();
 			void handleOpen();
 		},
 		fetch: () => {
-			clearStatus();
 			void handleFetch();
 		},
 		new: () => {
-			clearStatus();
 			void handleNewTeamStyle();
 		},
 		check: () => {
-			clearStatus();
 			void handleCheckUpdates(false);
 		},
 		"check-all": () => {
-			clearStatus();
 			void handleCheckUpdates(true);
 		},
-		reset: () => {
-			clearStatus();
-			handleReset();
-		},
+		reset: () => handleReset(),
 		refresh: () => {
-			clearStatus();
 			void fetchData();
 		},
-		search: () => {
-			clearStatus();
-			dispatch({ type: "SET_SEARCHING", isSearching: true });
-		},
+		search: () => dispatch({ type: "SET_SEARCHING", isSearching: true }),
 		// Only while a committed filter is set; otherwise Esc is the global back.
 		"clear-filter": () => {
 			if (!stylesState.searchQuery) return false;
-			clearStatus();
 			dispatch({ type: "STYLES_SET_SEARCH", query: "" });
 			dispatch({ type: "STYLES_SELECT", index: 0 });
 			return true;
 		},
-		move: (key) => {
-			clearStatus();
-			move(moveDirection(key));
-		},
+		move: (key) => move(moveDirection(key)),
 	});
 
 	// ── Status line ───────────────────────────────────────────────────────────
 
-	// Transient feedback takes the full-width notice row under the header, not
-	// the header itself: a long message beside the title used to shrink the
-	// title away, and the two ran together as one garbled sentence ("magus
-	// Styleevidence-first ships with…"). Order matters inside the row. A
-	// message wins while it lasts, so pressing a key always acknowledges the
-	// press — otherwise the fill banner below would shadow "already reading"
-	// and the second press would look ignored again, which is the bug this
-	// path exists to fix. The banner is the fallback because `statusMsg` is
-	// local and dies when the screen unmounts, leaving it the only thing that
-	// still reports work in flight after a tab switch.
-	const noticeContent = statusMsg ? (
-		<text
-			fg={
-				statusMsg.tone === "success"
-					? theme.colors.success
-					: theme.colors.danger
-			}
-		>
-			{statusMsg.text}
-		</text>
-	) : isFilling ? (
-		<text fg={theme.colors.muted}>
-			Reading the codebase to fill a template… this can take a few minutes
-		</text>
-	) : undefined;
-
-	// The header keeps only the short ambient state — it shares its row with
-	// the title and must never crowd it.
+	// The header carries state only — it shares its row with the title and must
+	// never crowd it. Work in flight is state too: `isFilling` lives in app
+	// state, so "reading the codebase…" survives a tab switch while a fill that
+	// takes minutes runs.
 	const statusContent = (
 		<text fg={theme.colors.text}>
 			<span fg={theme.colors.muted}>Active: </span>
@@ -886,6 +821,8 @@ export function StylesScreen() {
 			) : null}
 			{isApplying ? (
 				<span fg={theme.colors.muted}> │ applying…</span>
+			) : isFilling ? (
+				<span fg={theme.colors.muted}> │ reading the codebase…</span>
 			) : isFetching ? (
 				<span fg={theme.colors.muted}> │ talking to GitHub…</span>
 			) : errors.length > 0 ? (
@@ -949,7 +886,6 @@ export function StylesScreen() {
 			title="magus Styles"
 			currentScreen="styles"
 			statusLine={statusContent}
-			notice={noticeContent}
 			search={
 				stylesState.searchQuery || isSearchActive
 					? {