claudeup 4.10.2 → 4.11.0

package/src/services/plugin-version-check.ts

@@ -0,0 +1,340 @@
+/**
+ * Plugin version mismatch detection and fix.
+ *
+ * Claude Code's plugin loader (pluginLoader.ts:2051) takes the FIRST entry
+ * from installed_plugins.json for each plugin ID:
+ *
+ *   const installEntry = installedPluginsData.plugins[pluginId]?.[0]
+ *
+ * This means the first project to install a plugin determines which version
+ * loads for ALL projects. When different projects install different versions,
+ * only the one at index [0] takes effect.
+ *
+ * Bug report: https://github.com/anthropics/claude-code/issues/45997
+ */
+
+import type { InstalledPluginEntry } from "../types/index.js";
+import {
+	getEnabledPlugins,
+	getGlobalEnabledPlugins,
+	getLocalEnabledPlugins,
+	readInstalledPluginsRegistry,
+	writeInstalledPluginsRegistry,
+} from "./claude-settings.js";
+
+const BUG_REPORT_URL = "https://github.com/anthropics/claude-code/issues/45997";
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export interface VersionMismatchInfo {
+	/** Plugin ID, e.g. "terminal@magus" */
+	pluginId: string;
+	/** Version at entries[0] — the one Claude Code actually loads */
+	firstEntryVersion: string;
+	/** Project path of the entries[0] entry */
+	firstEntryProject: string | undefined;
+	/** Version this project has installed */
+	currentProjectVersion: string;
+	/** All entries for this plugin */
+	allEntries: InstalledPluginEntry[];
+}
+
+export interface FixResult {
+	/** Number of entries updated */
+	updated: number;
+	/** Project paths that were updated */
+	projects: string[];
+}
+
+// ── Detection ────────────────────────────────────────────────────────────────
+
+/**
+ * Check for plugin version mismatches caused by the [0] index bug.
+ *
+ * For each enabled plugin in the current project:
+ * 1. Reads the plugin's entry array from installed_plugins.json
+ * 2. Finds the entry matching the current project
+ * 3. Checks if entries[0] has a DIFFERENT version than the current project's entry
+ * 4. If yes: this project will load the wrong version
+ *
+ * @param projectPath - The current project path to check
+ * @returns Array of mismatch info for each affected plugin
+ */
+export async function checkPluginVersionMismatches(
+	projectPath: string,
+): Promise<VersionMismatchInfo[]> {
+	const registry = await readInstalledPluginsRegistry();
+	const enabledPluginIds = await collectEnabledPluginIds(projectPath);
+	const mismatches: VersionMismatchInfo[] = [];
+
+	for (const pluginId of enabledPluginIds) {
+		const entries = registry.plugins[pluginId];
+		if (!entries || entries.length < 2) continue;
+
+		// Find the entry for the current project
+		const currentEntry = entries.find(
+			(e) =>
+				e.scope === "project" &&
+				normalizePath(e.projectPath) === normalizePath(projectPath),
+		);
+		if (!currentEntry) continue;
+
+		const firstEntry = entries[0];
+
+		// Compare the version at [0] with the current project's version
+		if (firstEntry.version !== currentEntry.version) {
+			mismatches.push({
+				pluginId,
+				firstEntryVersion: firstEntry.version,
+				firstEntryProject: firstEntry.projectPath,
+				currentProjectVersion: currentEntry.version,
+				allEntries: entries,
+			});
+		}
+	}
+
+	return mismatches;
+}
+
+/**
+ * Check a single plugin for version mismatch (used after plugin update).
+ *
+ * @param pluginId - The plugin ID to check
+ * @param projectPath - The current project path
+ * @returns Mismatch info or null if no mismatch
+ */
+export async function checkSinglePluginMismatch(
+	pluginId: string,
+	projectPath: string,
+): Promise<VersionMismatchInfo | null> {
+	const registry = await readInstalledPluginsRegistry();
+	const entries = registry.plugins[pluginId];
+	if (!entries || entries.length < 2) return null;
+
+	const currentEntry = entries.find(
+		(e) =>
+			e.scope === "project" &&
+			normalizePath(e.projectPath) === normalizePath(projectPath),
+	);
+	if (!currentEntry) return null;
+
+	const firstEntry = entries[0];
+	if (firstEntry.version === currentEntry.version) return null;
+
+	return {
+		pluginId,
+		firstEntryVersion: firstEntry.version,
+		firstEntryProject: firstEntry.projectPath,
+		currentProjectVersion: currentEntry.version,
+		allEntries: entries,
+	};
+}
+
+// ── Fix ──────────────────────────────────────────────────────────────────────
+
+/**
+ * Fix a version mismatch by updating ALL entries for a plugin to use
+ * the target version. This is a JSON-only operation that rewrites
+ * installPath and version in each entry.
+ *
+ * IMPORTANT: This modifies installed_plugins.json which is Claude Code-owned.
+ * Only call after explicit user consent.
+ *
+ * @param pluginId - The plugin ID to fix
+ * @param targetVersion - The version to normalize all entries to
+ * @returns Number of updated entries and which projects were affected
+ */
+export async function fixPluginVersionMismatch(
+	pluginId: string,
+	targetVersion: string,
+): Promise<FixResult> {
+	const registry = await readInstalledPluginsRegistry();
+	const entries = registry.plugins[pluginId];
+	if (!entries || entries.length === 0) {
+		return { updated: 0, projects: [] };
+	}
+
+	// Find an existing entry with the target version to get the correct installPath
+	const templateEntry = entries.find((e) => e.version === targetVersion);
+	if (!templateEntry) {
+		return { updated: 0, projects: [] };
+	}
+
+	const targetInstallPath = templateEntry.installPath;
+	const updated: string[] = [];
+
+	for (const entry of entries) {
+		if (entry.version !== targetVersion) {
+			entry.version = targetVersion;
+			entry.installPath = targetInstallPath;
+			entry.lastUpdated = new Date().toISOString();
+			updated.push(entry.projectPath || "(global)");
+		}
+	}
+
+	if (updated.length > 0) {
+		await writeInstalledPluginsRegistry(registry);
+	}
+
+	return { updated: updated.length, projects: updated };
+}
+
+/**
+ * Fix all version mismatches by normalizing each plugin to its latest version.
+ *
+ * @param mismatches - Array of mismatches from checkPluginVersionMismatches
+ * @returns Map of pluginId to FixResult
+ */
+export async function fixAllPluginVersionMismatches(
+	mismatches: VersionMismatchInfo[],
+): Promise<Map<string, FixResult>> {
+	const results = new Map<string, FixResult>();
+
+	// Read registry once, apply all fixes, write once
+	const registry = await readInstalledPluginsRegistry();
+
+	for (const mismatch of mismatches) {
+		const entries = registry.plugins[mismatch.pluginId];
+		if (!entries || entries.length === 0) {
+			results.set(mismatch.pluginId, { updated: 0, projects: [] });
+			continue;
+		}
+
+		// Use the current project's version as the target (the version the user expects)
+		const targetVersion = mismatch.currentProjectVersion;
+		const templateEntry = entries.find((e) => e.version === targetVersion);
+		if (!templateEntry) {
+			results.set(mismatch.pluginId, { updated: 0, projects: [] });
+			continue;
+		}
+
+		const targetInstallPath = templateEntry.installPath;
+		const updated: string[] = [];
+
+		for (const entry of entries) {
+			if (entry.version !== targetVersion) {
+				entry.version = targetVersion;
+				entry.installPath = targetInstallPath;
+				entry.lastUpdated = new Date().toISOString();
+				updated.push(entry.projectPath || "(global)");
+			}
+		}
+
+		results.set(mismatch.pluginId, {
+			updated: updated.length,
+			projects: updated,
+		});
+	}
+
+	await writeInstalledPluginsRegistry(registry);
+	return results;
+}
+
+// ── Formatting ───────────────────────────────────────────────────────────────
+
+/**
+ * Format mismatch info for console output (prerunner).
+ */
+export function formatMismatchWarning(
+	mismatches: VersionMismatchInfo[],
+): string {
+	const lines: string[] = [];
+	lines.push(
+		"WARNING: Plugin version mismatch detected (Claude Code bug #45997)",
+	);
+	lines.push(
+		"Claude Code loads the first entry from installed_plugins.json for ALL projects.",
+	);
+	lines.push(
+		"The following plugins will load a different version than what this project has installed:\n",
+	);
+
+	for (const m of mismatches) {
+		const firstProject = m.firstEntryProject
+			? shortenPath(m.firstEntryProject)
+			: "(global)";
+		lines.push(`  ${m.pluginId}:`);
+		lines.push(`    Loading v${m.firstEntryVersion} (from ${firstProject})`);
+		lines.push(`    Expected v${m.currentProjectVersion} (this project)`);
+	}
+
+	lines.push("");
+	lines.push(`Bug report: ${BUG_REPORT_URL}`);
+	lines.push(
+		"Run claudeup to fix — it can align all projects to the same version.",
+	);
+
+	return lines.join("\n");
+}
+
+/**
+ * Format mismatch info for TUI display.
+ */
+export function formatMismatchBanner(
+	mismatches: VersionMismatchInfo[],
+): string {
+	const parts = mismatches.map(
+		(m) =>
+			`${m.pluginId}: loading v${m.firstEntryVersion} instead of v${m.currentProjectVersion}`,
+	);
+	return `Version mismatch: ${parts.join(", ")}`;
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+/**
+ * Collect all enabled plugin IDs across all scopes for a project.
+ */
+async function collectEnabledPluginIds(
+	projectPath: string,
+): Promise<Set<string>> {
+	const pluginIds = new Set<string>();
+
+	try {
+		const global = await getGlobalEnabledPlugins();
+		for (const [id, enabled] of Object.entries(global)) {
+			if (enabled) pluginIds.add(id);
+		}
+	} catch {
+		/* skip unreadable */
+	}
+
+	try {
+		const project = await getEnabledPlugins(projectPath);
+		for (const [id, enabled] of Object.entries(project)) {
+			if (enabled) pluginIds.add(id);
+		}
+	} catch {
+		/* skip unreadable */
+	}
+
+	try {
+		const local = await getLocalEnabledPlugins(projectPath);
+		for (const [id, enabled] of Object.entries(local)) {
+			if (enabled) pluginIds.add(id);
+		}
+	} catch {
+		/* skip unreadable */
+	}
+
+	return pluginIds;
+}
+
+/**
+ * Normalize a path for comparison (resolve and trailing-slash normalize).
+ */
+function normalizePath(p: string | undefined): string {
+	if (!p) return "";
+	return p.replace(/\/+$/, "");
+}
+
+/**
+ * Shorten a path for display by replacing homedir with ~.
+ */
+function shortenPath(p: string): string {
+	const home = process.env.HOME || process.env.USERPROFILE || "";
+	if (home && p.startsWith(home)) {
+		return `~${p.slice(home.length)}`;
+	}
+	return p;
+}

package/src/ui/App.js

@@ -8,6 +8,7 @@ import { ModalContainer } from "./components/modals/index.js";
 import { PluginsScreen, McpScreen, McpRegistryScreen, SettingsScreen, CliToolsScreen, ModelSelectorScreen, ProfilesScreen, SkillsScreen, } from "./screens/index.js";
 import { repairAllMarketplaces } from "../services/local-marketplace.js";
 import { migrateMarketplaceRename, recoverMarketplaceSettings, } from "../services/claude-settings.js";
+import { checkPluginVersionMismatches, formatMismatchBanner, } from "../services/plugin-version-check.js";
 import { checkForUpdates, getCurrentVersion, } from "../services/version-check.js";
 import { useKeyboardHandler } from "./hooks/useKeyboardHandler.js";
 import { ProgressBar } from "./components/layout/ProgressBar.js";
@@ -175,11 +176,25 @@ function UpdateBanner({ result }) {
 function ProgressIndicator({ message, current, total, }) {
     return (_jsx("box", { paddingLeft: 1, paddingRight: 1, children: _jsx(ProgressBar, { message: message, current: current, total: total }) }));
 }
-function AppContentInner({ showDebug, onDebugToggle, updateInfo, onExit, }) {
-    const { state, dispatch } = useApp();
+function AppContentInner({ showDebug, onDebugToggle, updateInfo, onExit, recoveryReport, mismatchWarning, }) {
+    const { state } = useApp();
     const { progress } = state;
     const dimensions = useDimensions();
+    return (_jsxs("box", { flexDirection: "column", height: dimensions.terminalHeight, children: [updateInfo?.updateAvailable && _jsx(UpdateBanner, { result: updateInfo }), recoveryReport && (_jsx("box", { paddingLeft: 1, paddingRight: 1, children: _jsxs("text", { fg: "green", children: ["\u2713 Fixed: ", recoveryReport] }) })), mismatchWarning && (_jsx("box", { paddingLeft: 1, paddingRight: 1, children: _jsxs("text", { fg: "yellow", children: ["\u26A0 ", mismatchWarning, " (bug #45997)"] }) })), showDebug && (_jsx("box", { paddingLeft: 1, paddingRight: 1, children: _jsxs("text", { fg: "#888888", children: ["DEBUG: ", dimensions.terminalWidth, "x", dimensions.terminalHeight, " | content=", dimensions.contentHeight, " | screen=", state.currentRoute.screen] }) })), progress && _jsx(ProgressIndicator, { ...progress }), _jsx("box", { flexDirection: "column", height: dimensions.contentHeight, paddingLeft: 1, paddingRight: 1, children: _jsx(Router, {}) }), _jsx(GlobalKeyHandler, { onDebugToggle: onDebugToggle, onExit: onExit }), _jsx(ModalContainer, {})] }));
+}
+function AppContent({ onExit }) {
+    const { state, dispatch } = useApp();
+    const { progress } = state;
+    const [showDebug, setShowDebug] = useState(false);
+    const [updateInfo, setUpdateInfo] = useState(null);
     const [recoveryReport, setRecoveryReport] = useState(null);
+    const [mismatchWarning, setMismatchWarning] = useState(null);
+    // Check for updates on startup (non-blocking)
+    useEffect(() => {
+        checkForUpdates()
+            .then(setUpdateInfo)
+            .catch(() => { });
+    }, []);
     // Auto-dismiss recovery banner after 5 seconds
     useEffect(() => {
         if (!recoveryReport)
@@ -187,6 +202,13 @@ function AppContentInner({ showDebug, onDebugToggle, updateInfo, onExit, }) {
         const timer = setTimeout(() => setRecoveryReport(null), 5000);
         return () => clearTimeout(timer);
     }, [recoveryReport]);
+    // Auto-dismiss mismatch warning after 8 seconds (longer — more important)
+    useEffect(() => {
+        if (!mismatchWarning)
+            return;
+        const timer = setTimeout(() => setMismatchWarning(null), 8000);
+        return () => clearTimeout(timer);
+    }, [mismatchWarning]);
     // Auto-refresh marketplaces on startup
     useEffect(() => {
         const noRefresh = process.argv.includes("--no-refresh");
@@ -196,9 +218,9 @@ function AppContentInner({ showDebug, onDebugToggle, updateInfo, onExit, }) {
             type: "SHOW_PROGRESS",
             state: { message: "Scanning marketplaces..." },
         });
-        // Migrate old marketplace names → magus (idempotent), then repair plugin.json files
+        // Migrate old marketplace names -> magus (idempotent), then repair plugin.json files
         migrateMarketplaceRename().catch(() => { }); // non-blocking, best-effort
-        // Recover stale marketplace registry entries (e.g. "directory" → "github")
+        // Recover stale marketplace registry entries (e.g. "directory" -> "github")
         recoverMarketplaceSettings()
             .then(async (recovery) => {
             const parts = [];
@@ -226,6 +248,14 @@ function AppContentInner({ showDebug, onDebugToggle, updateInfo, onExit, }) {
             }
         })
             .catch(() => { }); // non-fatal
+        // Check for plugin version mismatches (the [0] index bug)
+        checkPluginVersionMismatches(process.cwd())
+            .then((mismatches) => {
+            if (mismatches.length > 0) {
+                setMismatchWarning(formatMismatchBanner(mismatches));
+            }
+        })
+            .catch(() => { }); // non-fatal
         repairAllMarketplaces()
             .then(async () => {
             dispatch({ type: "HIDE_PROGRESS" });
@@ -235,20 +265,9 @@ function AppContentInner({ showDebug, onDebugToggle, updateInfo, onExit, }) {
             dispatch({ type: "HIDE_PROGRESS" });
         });
     }, [dispatch]);
-    return (_jsxs("box", { flexDirection: "column", height: dimensions.terminalHeight, children: [updateInfo?.updateAvailable && _jsx(UpdateBanner, { result: updateInfo }), recoveryReport && (_jsx("box", { paddingLeft: 1, paddingRight: 1, children: _jsxs("text", { fg: "green", children: ["\u2713 Fixed: ", recoveryReport] }) })), showDebug && (_jsx("box", { paddingLeft: 1, paddingRight: 1, children: _jsxs("text", { fg: "#888888", children: ["DEBUG: ", dimensions.terminalWidth, "x", dimensions.terminalHeight, " | content=", dimensions.contentHeight, " | screen=", state.currentRoute.screen] }) })), progress && _jsx(ProgressIndicator, { ...progress }), _jsx("box", { flexDirection: "column", height: dimensions.contentHeight, paddingLeft: 1, paddingRight: 1, children: _jsx(Router, {}) }), _jsx(GlobalKeyHandler, { onDebugToggle: onDebugToggle, onExit: onExit }), _jsx(ModalContainer, {})] }));
-}
-function AppContent({ onExit }) {
-    const { state } = useApp();
-    const { progress } = state;
-    const [showDebug, setShowDebug] = useState(false);
-    const [updateInfo, setUpdateInfo] = useState(null);
-    // Check for updates on startup (non-blocking)
-    useEffect(() => {
-        checkForUpdates()
-            .then(setUpdateInfo)
-            .catch(() => { });
-    }, []);
-    return (_jsx(DimensionsProvider, { showProgress: !!progress, showDebug: showDebug, showUpdateBanner: !!updateInfo?.updateAvailable, children: _jsx(AppContentInner, { showDebug: showDebug, onDebugToggle: () => setShowDebug((s) => !s), updateInfo: updateInfo, onExit: onExit }) }));
+    // Count transient banners for dimension calculation
+    const transientBannerCount = (recoveryReport ? 1 : 0) + (mismatchWarning ? 1 : 0);
+    return (_jsx(DimensionsProvider, { showProgress: !!progress, showDebug: showDebug, showUpdateBanner: !!updateInfo?.updateAvailable, transientBannerCount: transientBannerCount, children: _jsx(AppContentInner, { showDebug: showDebug, onDebugToggle: () => setShowDebug((s) => !s), updateInfo: updateInfo, onExit: onExit, recoveryReport: recoveryReport, mismatchWarning: mismatchWarning }) }));
 }
 export function App({ onExit }) {
     return (_jsx(AppProvider, { children: _jsx(AppContent, { onExit: onExit }) }));

package/src/ui/App.tsx

@@ -28,6 +28,10 @@ import {
 	migrateMarketplaceRename,
 	recoverMarketplaceSettings,
 } from "../services/claude-settings.js";
+import {
+	checkPluginVersionMismatches,
+	formatMismatchBanner,
+} from "../services/plugin-version-check.js";
 import {
 	checkForUpdates,
 	getCurrentVersion,
@@ -250,6 +254,8 @@ interface AppContentInnerProps {
 	onDebugToggle: () => void;
 	updateInfo: VersionCheckResult | null;
 	onExit: () => void;
+	recoveryReport: string | null;
+	mismatchWarning: string | null;
 }
 
 function AppContentInner({
@@ -257,11 +263,72 @@ function AppContentInner({
 	onDebugToggle,
 	updateInfo,
 	onExit,
+	recoveryReport,
+	mismatchWarning,
 }: AppContentInnerProps) {
-	const { state, dispatch } = useApp();
+	const { state } = useApp();
 	const { progress } = state;
 	const dimensions = useDimensions();
+
+	return (
+		<box flexDirection="column" height={dimensions.terminalHeight}>
+			{updateInfo?.updateAvailable && <UpdateBanner result={updateInfo} />}
+			{recoveryReport && (
+				<box paddingLeft={1} paddingRight={1}>
+					<text fg="green">✓ Fixed: {recoveryReport}</text>
+				</box>
+			)}
+			{mismatchWarning && (
+				<box paddingLeft={1} paddingRight={1}>
+					<text fg="yellow">⚠ {mismatchWarning} (bug #45997)</text>
+				</box>
+			)}
+			{showDebug && (
+				<box paddingLeft={1} paddingRight={1}>
+					<text fg="#888888">
+						DEBUG: {dimensions.terminalWidth}x{dimensions.terminalHeight} |
+						content={dimensions.contentHeight} | screen=
+						{state.currentRoute.screen}
+					</text>
+				</box>
+			)}
+			{progress && <ProgressIndicator {...progress} />}
+			<box
+				flexDirection="column"
+				height={dimensions.contentHeight}
+				paddingLeft={1}
+				paddingRight={1}
+			>
+				<Router />
+			</box>
+			<GlobalKeyHandler onDebugToggle={onDebugToggle} onExit={onExit} />
+			<ModalContainer />
+		</box>
+	);
+}
+
+/**
+ * AppContent Component
+ * Wraps app with DimensionsProvider and manages state for debug/updates
+ */
+interface AppContentProps {
+	onExit: () => void;
+}
+
+function AppContent({ onExit }: AppContentProps) {
+	const { state, dispatch } = useApp();
+	const { progress } = state;
+	const [showDebug, setShowDebug] = useState(false);
+	const [updateInfo, setUpdateInfo] = useState<VersionCheckResult | null>(null);
 	const [recoveryReport, setRecoveryReport] = useState<string | null>(null);
+	const [mismatchWarning, setMismatchWarning] = useState<string | null>(null);
+
+	// Check for updates on startup (non-blocking)
+	useEffect(() => {
+		checkForUpdates()
+			.then(setUpdateInfo)
+			.catch(() => {});
+	}, []);
 
 	// Auto-dismiss recovery banner after 5 seconds
 	useEffect(() => {
@@ -270,6 +337,13 @@ function AppContentInner({
 		return () => clearTimeout(timer);
 	}, [recoveryReport]);
 
+	// Auto-dismiss mismatch warning after 8 seconds (longer — more important)
+	useEffect(() => {
+		if (!mismatchWarning) return;
+		const timer = setTimeout(() => setMismatchWarning(null), 8000);
+		return () => clearTimeout(timer);
+	}, [mismatchWarning]);
+
 	// Auto-refresh marketplaces on startup
 	useEffect(() => {
 		const noRefresh = process.argv.includes("--no-refresh");
@@ -280,10 +354,10 @@ function AppContentInner({
 			state: { message: "Scanning marketplaces..." },
 		});
 
-		// Migrate old marketplace names → magus (idempotent), then repair plugin.json files
+		// Migrate old marketplace names -> magus (idempotent), then repair plugin.json files
 		migrateMarketplaceRename().catch(() => {}); // non-blocking, best-effort
 
-		// Recover stale marketplace registry entries (e.g. "directory" → "github")
+		// Recover stale marketplace registry entries (e.g. "directory" -> "github")
 		recoverMarketplaceSettings()
 			.then(async (recovery) => {
 				const parts: string[] = [];
@@ -302,14 +376,10 @@ function AppContentInner({
 					}
 				}
 				if (recovery.enabledAutoUpdate.length > 0) {
-					parts.push(
-						`auto-update: ${recovery.enabledAutoUpdate.join(", ")}`,
-					);
+					parts.push(`auto-update: ${recovery.enabledAutoUpdate.join(", ")}`);
 				}
 				if (recovery.removed.length > 0) {
-					parts.push(
-						`removed: ${recovery.removed.join(", ")}`,
-					);
+					parts.push(`removed: ${recovery.removed.join(", ")}`);
 				}
 				if (parts.length > 0) {
 					setRecoveryReport(parts.join(" | "));
@@ -317,6 +387,15 @@ function AppContentInner({
 			})
 			.catch(() => {}); // non-fatal
 
+		// Check for plugin version mismatches (the [0] index bug)
+		checkPluginVersionMismatches(process.cwd())
+			.then((mismatches) => {
+				if (mismatches.length > 0) {
+					setMismatchWarning(formatMismatchBanner(mismatches));
+				}
+			})
+			.catch(() => {}); // non-fatal
+
 		repairAllMarketplaces()
 			.then(async () => {
 				dispatch({ type: "HIDE_PROGRESS" });
@@ -327,70 +406,24 @@ function AppContentInner({
 			});
 	}, [dispatch]);
 
-	return (
-		<box flexDirection="column" height={dimensions.terminalHeight}>
-			{updateInfo?.updateAvailable && <UpdateBanner result={updateInfo} />}
-			{recoveryReport && (
-				<box paddingLeft={1} paddingRight={1}>
-					<text fg="green">✓ Fixed: {recoveryReport}</text>
-				</box>
-			)}
-			{showDebug && (
-				<box paddingLeft={1} paddingRight={1}>
-					<text fg="#888888">
-						DEBUG: {dimensions.terminalWidth}x{dimensions.terminalHeight} |
-						content={dimensions.contentHeight} | screen=
-						{state.currentRoute.screen}
-					</text>
-				</box>
-			)}
-			{progress && <ProgressIndicator {...progress} />}
-			<box
-				flexDirection="column"
-				height={dimensions.contentHeight}
-				paddingLeft={1}
-				paddingRight={1}
-			>
-				<Router />
-			</box>
-			<GlobalKeyHandler onDebugToggle={onDebugToggle} onExit={onExit} />
-			<ModalContainer />
-		</box>
-	);
-}
-
-/**
- * AppContent Component
- * Wraps app with DimensionsProvider and manages state for debug/updates
- */
-interface AppContentProps {
-	onExit: () => void;
-}
-
-function AppContent({ onExit }: AppContentProps) {
-	const { state } = useApp();
-	const { progress } = state;
-	const [showDebug, setShowDebug] = useState(false);
-	const [updateInfo, setUpdateInfo] = useState<VersionCheckResult | null>(null);
-
-	// Check for updates on startup (non-blocking)
-	useEffect(() => {
-		checkForUpdates()
-			.then(setUpdateInfo)
-			.catch(() => {});
-	}, []);
+	// Count transient banners for dimension calculation
+	const transientBannerCount =
+		(recoveryReport ? 1 : 0) + (mismatchWarning ? 1 : 0);
 
 	return (
 		<DimensionsProvider
 			showProgress={!!progress}
 			showDebug={showDebug}
 			showUpdateBanner={!!updateInfo?.updateAvailable}
+			transientBannerCount={transientBannerCount}
 		>
 			<AppContentInner
 				showDebug={showDebug}
 				onDebugToggle={() => setShowDebug((s) => !s)}
 				updateInfo={updateInfo}
 				onExit={onExit}
+				recoveryReport={recoveryReport}
+				mismatchWarning={mismatchWarning}
 			/>
 		</DimensionsProvider>
 	);