claudeup 4.11.1 → 4.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeup",
-  "version": "4.11.1",
+  "version": "4.12.0",
   "description": "TUI tool for managing Claude Code plugins, MCPs, and configuration",
   "type": "module",
   "main": "src/main.tsx",

package/src/__tests__/plugin-version-check.test.ts

@@ -757,6 +757,6 @@ describe("formatMismatchModal", () => {
 		expect(modal).toContain("v2.0.0");
 		expect(modal).toContain("v4.0.2");
 		expect(modal).toContain("45997");
-		expect(modal).toContain("wrong plugin version");
+		expect(modal).toContain("not work correctly");
 	});
 });

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

@@ -189,14 +189,19 @@ export function formatMismatchWarning(mismatches) {
  */
 export function formatMismatchModal(mismatches) {
     const lines = [];
-    lines.push("Claude Code has a bug where it loads the wrong plugin version.");
-    lines.push("It always uses the first entry in the registry, ignoring which");
-    lines.push("project you're in. These plugins are affected:\n");
+    lines.push("Your plugins will not work correctly in this project.");
+    lines.push("");
+    lines.push("Due to a Claude Code bug, the plugin loader ignores");
+    lines.push("per-project versions and loads an older version instead.");
+    lines.push("Commands, MCP tools, and skills will be outdated.");
+    lines.push("");
     for (const m of mismatches) {
         const name = m.pluginId.split("@")[0];
-        lines.push(`  ${name}: will load v${m.firstEntryVersion} instead of v${m.currentProjectVersion}`);
+        lines.push(`  ${name}: v${m.firstEntryVersion} loaded, expected v${m.currentProjectVersion}`);
     }
-    lines.push(`\nBug: github.com/anthropics/claude-code/issues/45997`);
+    lines.push("");
+    lines.push("Fix: align all projects to the same version.");
+    lines.push("Details: github.com/anthropics/claude-code/issues/45997");
     return lines.join("\n");
 }
 // ── Helpers ──────────────────────────────────────────────────────────────────

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

@@ -275,22 +275,22 @@ export function formatMismatchModal(
 	mismatches: VersionMismatchInfo[],
 ): string {
 	const lines: string[] = [];
-	lines.push(
-		"Claude Code has a bug where it loads the wrong plugin version.",
-	);
-	lines.push(
-		"It always uses the first entry in the registry, ignoring which",
-	);
-	lines.push("project you're in. These plugins are affected:\n");
+
+	lines.push("Your plugins will not work correctly in this project.");
+	lines.push("");
+	lines.push("Due to a Claude Code bug, the plugin loader ignores");
+	lines.push("per-project versions and loads an older version instead.");
+	lines.push("Commands, MCP tools, and skills will be outdated.");
+	lines.push("");
 
 	for (const m of mismatches) {
 		const name = m.pluginId.split("@")[0];
-		lines.push(
-			`  ${name}: will load v${m.firstEntryVersion} instead of v${m.currentProjectVersion}`,
-		);
+		lines.push(`  ${name}: v${m.firstEntryVersion} loaded, expected v${m.currentProjectVersion}`);
 	}
 
-	lines.push(`\nBug: github.com/anthropics/claude-code/issues/45997`);
+	lines.push("");
+	lines.push("Fix: align all projects to the same version.");
+	lines.push("Details: github.com/anthropics/claude-code/issues/45997");
 
 	return lines.join("\n");
 }

package/src/ui/App.js

@@ -8,7 +8,8 @@ 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, fixAllPluginVersionMismatches, formatMismatchModal, } from "../services/plugin-version-check.js";
+import { checkPluginVersionMismatches, } from "../services/plugin-version-check.js";
+import { useMismatchModal } from "./hooks/useMismatchModal.js";
 import { checkForUpdates, getCurrentVersion, } from "../services/version-check.js";
 import { useKeyboardHandler } from "./hooks/useKeyboardHandler.js";
 import { ProgressBar } from "./components/layout/ProgressBar.js";
@@ -189,6 +190,7 @@ function AppContent({ onExit }) {
     const [updateInfo, setUpdateInfo] = useState(null);
     const [recoveryReport, setRecoveryReport] = useState(null);
     const [mismatchData, setMismatchData] = useState(null);
+    const mismatchModal = useMismatchModal();
     // Check for updates on startup (non-blocking)
     useEffect(() => {
         checkForUpdates()
@@ -206,68 +208,9 @@ function AppContent({ onExit }) {
     useEffect(() => {
         if (!mismatchData || mismatchData.length === 0)
             return;
-        dispatch({
-            type: "SHOW_MODAL",
-            modal: {
-                type: "select",
-                title: "⚠ Plugin Version Mismatch",
-                message: formatMismatchModal(mismatchData),
-                options: [
-                    {
-                        label: "Fix all projects",
-                        value: "fix",
-                        description: "Align all projects to this project's versions",
-                    },
-                    {
-                        label: "Dismiss",
-                        value: "dismiss",
-                        description: "Ignore for now",
-                    },
-                ],
-                onSelect: async (value) => {
-                    dispatch({ type: "HIDE_MODAL" });
-                    if (value === "fix") {
-                        dispatch({
-                            type: "SHOW_PROGRESS",
-                            state: { message: "Fixing plugin versions..." },
-                        });
-                        try {
-                            await fixAllPluginVersionMismatches(mismatchData);
-                            dispatch({ type: "HIDE_PROGRESS" });
-                            dispatch({
-                                type: "SHOW_MODAL",
-                                modal: {
-                                    type: "message",
-                                    title: "Fixed",
-                                    message: "All plugin versions aligned. Restart Claude Code for changes to take effect.",
-                                    variant: "success",
-                                    onDismiss: () => dispatch({ type: "HIDE_MODAL" }),
-                                },
-                            });
-                        }
-                        catch {
-                            dispatch({ type: "HIDE_PROGRESS" });
-                            dispatch({
-                                type: "SHOW_MODAL",
-                                modal: {
-                                    type: "message",
-                                    title: "Error",
-                                    message: "Failed to fix plugin versions. Try running claudeup again.",
-                                    variant: "error",
-                                    onDismiss: () => dispatch({ type: "HIDE_MODAL" }),
-                                },
-                            });
-                        }
-                    }
-                    setMismatchData(null);
-                },
-                onCancel: () => {
-                    dispatch({ type: "HIDE_MODAL" });
-                    setMismatchData(null);
-                },
-            },
-        });
-    }, [mismatchData, dispatch]);
+        mismatchModal.show(mismatchData);
+        setMismatchData(null);
+    }, [mismatchData, mismatchModal]);
     // Auto-refresh marketplaces on startup
     useEffect(() => {
         const noRefresh = process.argv.includes("--no-refresh");

package/src/ui/App.tsx

@@ -30,10 +30,9 @@ import {
 } from "../services/claude-settings.js";
 import {
 	checkPluginVersionMismatches,
-	fixAllPluginVersionMismatches,
-	formatMismatchModal,
 	type VersionMismatchInfo,
 } from "../services/plugin-version-check.js";
+import { useMismatchModal } from "./hooks/useMismatchModal.js";
 import {
 	checkForUpdates,
 	getCurrentVersion,
@@ -317,6 +316,7 @@ function AppContent({ onExit }: AppContentProps) {
 	const [updateInfo, setUpdateInfo] = useState<VersionCheckResult | null>(null);
 	const [recoveryReport, setRecoveryReport] = useState<string | null>(null);
 	const [mismatchData, setMismatchData] = useState<VersionMismatchInfo[] | null>(null);
+	const mismatchModal = useMismatchModal();
 
 	// Check for updates on startup (non-blocking)
 	useEffect(() => {
@@ -335,68 +335,9 @@ function AppContent({ onExit }: AppContentProps) {
 	// Show mismatch modal when data arrives
 	useEffect(() => {
 		if (!mismatchData || mismatchData.length === 0) return;
-		dispatch({
-			type: "SHOW_MODAL",
-			modal: {
-				type: "select",
-				title: "⚠ Plugin Version Mismatch",
-				message: formatMismatchModal(mismatchData),
-				options: [
-					{
-						label: "Fix all projects",
-						value: "fix",
-						description: "Align all projects to this project's versions",
-					},
-					{
-						label: "Dismiss",
-						value: "dismiss",
-						description: "Ignore for now",
-					},
-				],
-				onSelect: async (value: string) => {
-					dispatch({ type: "HIDE_MODAL" });
-					if (value === "fix") {
-						dispatch({
-							type: "SHOW_PROGRESS",
-							state: { message: "Fixing plugin versions..." },
-						});
-						try {
-							await fixAllPluginVersionMismatches(mismatchData);
-							dispatch({ type: "HIDE_PROGRESS" });
-							dispatch({
-								type: "SHOW_MODAL",
-								modal: {
-									type: "message",
-									title: "Fixed",
-									message:
-										"All plugin versions aligned. Restart Claude Code for changes to take effect.",
-									variant: "success",
-									onDismiss: () => dispatch({ type: "HIDE_MODAL" }),
-								},
-							});
-						} catch {
-							dispatch({ type: "HIDE_PROGRESS" });
-							dispatch({
-								type: "SHOW_MODAL",
-								modal: {
-									type: "message",
-									title: "Error",
-									message: "Failed to fix plugin versions. Try running claudeup again.",
-									variant: "error",
-									onDismiss: () => dispatch({ type: "HIDE_MODAL" }),
-								},
-							});
-						}
-					}
-					setMismatchData(null);
-				},
-				onCancel: () => {
-					dispatch({ type: "HIDE_MODAL" });
-					setMismatchData(null);
-				},
-			},
-		});
-	}, [mismatchData, dispatch]);
+		mismatchModal.show(mismatchData);
+		setMismatchData(null);
+	}, [mismatchData, mismatchModal]);
 
 	// Auto-refresh marketplaces on startup
 	useEffect(() => {

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

@@ -7,6 +7,7 @@ import { InputModal } from "./InputModal.js";
 import { SelectModal } from "./SelectModal.js";
 import { MessageModal } from "./MessageModal.js";
 import { LoadingModal } from "./LoadingModal.js";
+import { VersionMismatchModal } from "./VersionMismatchModal.js";
 /**
  * Container that renders the active modal as an overlay
  * Handles ALL keyboard events when a modal is open to avoid
@@ -27,6 +28,9 @@ export function ModalContainer() {
         if (modal?.type === "select") {
             setSelectIndex(modal.defaultIndex ?? 0);
         }
+        else if (modal?.type === "version-mismatch") {
+            setSelectIndex(0);
+        }
     }
     // Handle keyboard events for modals
     useKeyboard((key) => {
@@ -44,6 +48,8 @@ export function ModalContainer() {
                 modal.onCancel();
             else if (modal.type === "message")
                 modal.onDismiss();
+            else if (modal.type === "version-mismatch")
+                modal.onDismiss();
             return;
         }
         // 'q' to close — but NOT for input modals (need to type 'q')
@@ -54,6 +60,8 @@ export function ModalContainer() {
                 modal.onCancel();
             else if (modal.type === "message")
                 modal.onDismiss();
+            else if (modal.type === "version-mismatch")
+                modal.onDismiss();
             return;
         }
         // Input modal — let OpenTUI <input> handle Enter via onSubmit
@@ -73,6 +81,22 @@ export function ModalContainer() {
             }
             return;
         }
+        // Version-mismatch modal — handle navigation and selection (2 options)
+        if (modal.type === "version-mismatch") {
+            if (key.name === "return" || key.name === "enter") {
+                if (selectIndex === 0)
+                    modal.onFix();
+                else
+                    modal.onDismiss();
+            }
+            else if (key.name === "up" || key.name === "k") {
+                setSelectIndex((prev) => Math.max(0, prev - 1));
+            }
+            else if (key.name === "down" || key.name === "j") {
+                setSelectIndex((prev) => Math.min(1, prev + 1));
+            }
+            return;
+        }
         // Message modal — Enter to dismiss
         if (modal.type === "message") {
             if (key.name === "return" || key.name === "enter") {
@@ -101,6 +125,8 @@ export function ModalContainer() {
                 return (_jsx(MessageModal, { title: modal.title, message: modal.message, variant: modal.variant, onDismiss: modal.onDismiss }));
             case "loading":
                 return _jsx(LoadingModal, { message: modal.message });
+            case "version-mismatch":
+                return (_jsx(VersionMismatchModal, { mismatches: modal.mismatches, defaultIndex: selectIndex }));
             default:
                 return null;
         }

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

@@ -6,6 +6,7 @@ import { InputModal } from "./InputModal.js";
 import { SelectModal } from "./SelectModal.js";
 import { MessageModal } from "./MessageModal.js";
 import { LoadingModal } from "./LoadingModal.js";
+import { VersionMismatchModal } from "./VersionMismatchModal.js";
 
 /**
  * Container that renders the active modal as an overlay
@@ -28,6 +29,8 @@ export function ModalContainer() {
 		modalRef.current = modal;
 		if (modal?.type === "select") {
 			setSelectIndex(modal.defaultIndex ?? 0);
+		} else if (modal?.type === "version-mismatch") {
+			setSelectIndex(0);
 		}
 	}
 
@@ -42,6 +45,7 @@ export function ModalContainer() {
 			else if (modal.type === "input") modal.onCancel();
 			else if (modal.type === "select") modal.onCancel();
 			else if (modal.type === "message") modal.onDismiss();
+			else if (modal.type === "version-mismatch") modal.onDismiss();
 			return;
 		}
 
@@ -50,6 +54,7 @@ export function ModalContainer() {
 			if (modal.type === "confirm") modal.onCancel();
 			else if (modal.type === "select") modal.onCancel();
 			else if (modal.type === "message") modal.onDismiss();
+			else if (modal.type === "version-mismatch") modal.onDismiss();
 			return;
 		}
 
@@ -70,6 +75,19 @@ export function ModalContainer() {
 			return;
 		}
 
+		// Version-mismatch modal — handle navigation and selection (2 options)
+		if (modal.type === "version-mismatch") {
+			if (key.name === "return" || key.name === "enter") {
+				if (selectIndex === 0) modal.onFix();
+				else modal.onDismiss();
+			} else if (key.name === "up" || key.name === "k") {
+				setSelectIndex((prev) => Math.max(0, prev - 1));
+			} else if (key.name === "down" || key.name === "j") {
+				setSelectIndex((prev) => Math.min(1, prev + 1));
+			}
+			return;
+		}
+
 		// Message modal — Enter to dismiss
 		if (modal.type === "message") {
 			if (key.name === "return" || key.name === "enter") {
@@ -137,6 +155,14 @@ export function ModalContainer() {
 			case "loading":
 				return <LoadingModal message={modal.message} />;
 
+			case "version-mismatch":
+				return (
+					<VersionMismatchModal
+						mismatches={modal.mismatches}
+						defaultIndex={selectIndex}
+					/>
+				);
+
 			default:
 				return null;
 		}

package/src/ui/components/modals/VersionMismatchModal.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+const COLOR_BG = "#1C1C1E";
+const COLOR_BORDER = "#525252";
+const COLOR_TITLE = "#EDEDED";
+const COLOR_MUTED = "#A1A1AA";
+const COLOR_DIM = "#71717A";
+const COLOR_WARN = "#FBBF24";
+const COLOR_BAD = "#F87171";
+const COLOR_GOOD = "#4ADE80";
+const COLOR_ACCENT = "#F4F4F5";
+/** Truncate a plugin name to fit the column width */
+function shortName(pluginId, max) {
+    const name = pluginId.split("@")[0];
+    if (name.length <= max)
+        return name;
+    return `${name.slice(0, max - 1)}…`;
+}
+/** Truncate a version string to fit the column width */
+function shortVersion(v, max) {
+    if (v.length <= max)
+        return v;
+    return `${v.slice(0, max - 1)}…`;
+}
+export function VersionMismatchModal({ mismatches, defaultIndex, }) {
+    const selectedIndex = defaultIndex ?? 0;
+    // Column widths chosen to fit a 64-wide modal with padding
+    const NAME_W = 22;
+    const VER_W = 12;
+    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: COLOR_BORDER, backgroundColor: COLOR_BG, paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, width: 64, children: [_jsxs("box", { marginBottom: 1, children: [_jsx("text", { fg: COLOR_WARN, children: "\u26A0 " }), _jsx("text", { fg: COLOR_TITLE, children: _jsx("strong", { children: "Plugin Version Mismatch" }) })] }), _jsxs("box", { flexDirection: "column", marginBottom: 1, children: [_jsxs("text", { fg: COLOR_MUTED, children: ["Plugins in this project will load ", _jsx("strong", { children: "wrong versions" })] }), _jsx("text", { fg: COLOR_MUTED, children: "due to a Claude Code bug (#45997)." })] }), _jsxs("box", { flexDirection: "column", marginBottom: 1, children: [_jsx("text", { fg: COLOR_DIM, children: _jsxs("strong", { children: ["Plugin".padEnd(NAME_W), "Loaded".padEnd(VER_W), "Expected".padEnd(VER_W)] }) }), _jsxs("text", { fg: COLOR_BORDER, children: ["─".repeat(NAME_W - 1), " ", "─".repeat(VER_W - 1), " ", "─".repeat(VER_W - 1)] }), mismatches.map((m) => {
+                        const name = shortName(m.pluginId, NAME_W - 1);
+                        const loaded = `v${shortVersion(m.firstEntryVersion, VER_W - 2)}`;
+                        const expected = `v${shortVersion(m.currentProjectVersion, VER_W - 2)}`;
+                        return (_jsxs("text", { fg: COLOR_MUTED, children: [_jsx("span", { fg: COLOR_ACCENT, children: name.padEnd(NAME_W) }), _jsx("span", { fg: COLOR_BAD, children: loaded.padEnd(VER_W) }), _jsx("span", { fg: COLOR_GOOD, children: expected.padEnd(VER_W) })] }, m.pluginId));
+                    })] }), _jsx("box", { marginBottom: 1, children: _jsx("text", { fg: COLOR_DIM, children: "Details: github.com/anthropics/claude-code/issues/45997" }) }), _jsxs("box", { flexDirection: "column", paddingLeft: 1, children: [_jsxs("text", { fg: selectedIndex === 0 ? COLOR_ACCENT : COLOR_MUTED, children: [_jsx("span", { fg: selectedIndex === 0 ? COLOR_ACCENT : COLOR_DIM, children: selectedIndex === 0 ? "❯ " : "  " }), selectedIndex === 0 ? (_jsx("strong", { children: "Fix all projects" })) : ("Fix all projects")] }), _jsxs("text", { fg: selectedIndex === 1 ? COLOR_ACCENT : COLOR_MUTED, children: [_jsx("span", { fg: selectedIndex === 1 ? COLOR_ACCENT : COLOR_DIM, children: selectedIndex === 1 ? "❯ " : "  " }), selectedIndex === 1 ? _jsx("strong", { children: "Dismiss" }) : "Dismiss"] })] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: COLOR_DIM, children: "\u2191\u2193 Select \u2022 \u21B5 Confirm \u2022 Esc Cancel" }) })] }));
+}
+export default VersionMismatchModal;

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

@@ -0,0 +1,140 @@
+import React from "react";
+import type { VersionMismatchInfo } from "../../../services/plugin-version-check.js";
+
+interface VersionMismatchModalProps {
+	/** List of version mismatches detected */
+	mismatches: VersionMismatchInfo[];
+	/** Currently selected option index (0 = Fix, 1 = Dismiss) */
+	defaultIndex?: number;
+}
+
+const COLOR_BG = "#1C1C1E";
+const COLOR_BORDER = "#525252";
+const COLOR_TITLE = "#EDEDED";
+const COLOR_MUTED = "#A1A1AA";
+const COLOR_DIM = "#71717A";
+const COLOR_WARN = "#FBBF24";
+const COLOR_BAD = "#F87171";
+const COLOR_GOOD = "#4ADE80";
+const COLOR_ACCENT = "#F4F4F5";
+
+/** Truncate a plugin name to fit the column width */
+function shortName(pluginId: string, max: number): string {
+	const name = pluginId.split("@")[0];
+	if (name.length <= max) return name;
+	return `${name.slice(0, max - 1)}…`;
+}
+
+/** Truncate a version string to fit the column width */
+function shortVersion(v: string, max: number): string {
+	if (v.length <= max) return v;
+	return `${v.slice(0, max - 1)}…`;
+}
+
+export function VersionMismatchModal({
+	mismatches,
+	defaultIndex,
+}: VersionMismatchModalProps) {
+	const selectedIndex = defaultIndex ?? 0;
+
+	// Column widths chosen to fit a 64-wide modal with padding
+	const NAME_W = 22;
+	const VER_W = 12;
+
+	return (
+		<box
+			flexDirection="column"
+			border
+			borderStyle="rounded"
+			borderColor={COLOR_BORDER}
+			backgroundColor={COLOR_BG}
+			paddingLeft={3}
+			paddingRight={3}
+			paddingTop={1}
+			paddingBottom={1}
+			width={64}
+		>
+			{/* Title */}
+			<box marginBottom={1}>
+				<text fg={COLOR_WARN}>⚠ </text>
+				<text fg={COLOR_TITLE}>
+					<strong>Plugin Version Mismatch</strong>
+				</text>
+			</box>
+
+			{/* Description */}
+			<box flexDirection="column" marginBottom={1}>
+				<text fg={COLOR_MUTED}>
+					Plugins in this project will load <strong>wrong versions</strong>
+				</text>
+				<text fg={COLOR_MUTED}>due to a Claude Code bug (#45997).</text>
+			</box>
+
+			{/* Table header */}
+			<box flexDirection="column" marginBottom={1}>
+				<text fg={COLOR_DIM}>
+					<strong>
+						{"Plugin".padEnd(NAME_W)}
+						{"Loaded".padEnd(VER_W)}
+						{"Expected".padEnd(VER_W)}
+					</strong>
+				</text>
+				<text fg={COLOR_BORDER}>
+					{"─".repeat(NAME_W - 1)} {"─".repeat(VER_W - 1)} {"─".repeat(VER_W - 1)}
+				</text>
+
+				{/* Table rows */}
+				{mismatches.map((m) => {
+					const name = shortName(m.pluginId, NAME_W - 1);
+					const loaded = `v${shortVersion(m.firstEntryVersion, VER_W - 2)}`;
+					const expected = `v${shortVersion(m.currentProjectVersion, VER_W - 2)}`;
+					return (
+						<text key={m.pluginId} fg={COLOR_MUTED}>
+							<span fg={COLOR_ACCENT}>{name.padEnd(NAME_W)}</span>
+							<span fg={COLOR_BAD}>{loaded.padEnd(VER_W)}</span>
+							<span fg={COLOR_GOOD}>{expected.padEnd(VER_W)}</span>
+						</text>
+					);
+				})}
+			</box>
+
+			{/* Footer note */}
+			<box marginBottom={1}>
+				<text fg={COLOR_DIM}>
+					Details: github.com/anthropics/claude-code/issues/45997
+				</text>
+			</box>
+
+			{/* Options */}
+			<box flexDirection="column" paddingLeft={1}>
+				<text
+					fg={selectedIndex === 0 ? COLOR_ACCENT : COLOR_MUTED}
+				>
+					<span fg={selectedIndex === 0 ? COLOR_ACCENT : COLOR_DIM}>
+						{selectedIndex === 0 ? "❯ " : "  "}
+					</span>
+					{selectedIndex === 0 ? (
+						<strong>Fix all projects</strong>
+					) : (
+						"Fix all projects"
+					)}
+				</text>
+				<text
+					fg={selectedIndex === 1 ? COLOR_ACCENT : COLOR_MUTED}
+				>
+					<span fg={selectedIndex === 1 ? COLOR_ACCENT : COLOR_DIM}>
+						{selectedIndex === 1 ? "❯ " : "  "}
+					</span>
+					{selectedIndex === 1 ? <strong>Dismiss</strong> : "Dismiss"}
+				</text>
+			</box>
+
+			{/* Keybind hints */}
+			<box marginTop={1}>
+				<text fg={COLOR_DIM}>↑↓ Select • ↵ Confirm • Esc Cancel</text>
+			</box>
+		</box>
+	);
+}
+
+export default VersionMismatchModal;

package/src/ui/hooks/index.js

@@ -1,3 +1,4 @@
 export { useAsyncData, useDebouncedAsyncData } from "./useAsyncData.js";
 export { useKeyboardHandler } from "./useKeyboardHandler.js";
 export { useKeyboard } from "./useKeyboard.js";
+export { useMismatchModal } from "./useMismatchModal.js";

package/src/ui/hooks/index.ts

@@ -1,3 +1,4 @@
 export { useAsyncData, useDebouncedAsyncData } from "./useAsyncData.js";
 export { useKeyboardHandler } from "./useKeyboardHandler.js";
 export { useKeyboard } from "./useKeyboard.js";
+export { useMismatchModal } from "./useMismatchModal.js";

package/src/ui/hooks/useMismatchModal.js

@@ -0,0 +1,77 @@
+import { useCallback } from "react";
+import { useApp } from "../state/AppContext.js";
+import { fixAllPluginVersionMismatches, } from "../../services/plugin-version-check.js";
+/**
+ * Shared hook for showing the plugin version mismatch modal.
+ *
+ * Used in two places:
+ * 1. App.tsx — startup check shows mismatches found across all enabled plugins
+ * 2. PluginsScreen.tsx — post-install/update check shows a single plugin mismatch
+ *
+ * Both flows now share the same interactive modal with a "Fix all projects"
+ * button, so users never have to restart claudeup to access the fix.
+ *
+ * The fix uses fixAllPluginVersionMismatches() which rewrites
+ * installed_plugins.json in-place to align all entries to the current
+ * project's expected versions. After success, shows a hint to restart
+ * Claude Code so the new versions actually load (the running session
+ * has the old plugin code in memory).
+ */
+export function useMismatchModal() {
+    const { dispatch } = useApp();
+    const show = useCallback((mismatches) => {
+        if (mismatches.length === 0)
+            return;
+        const dismiss = () => dispatch({ type: "HIDE_MODAL" });
+        const fix = async () => {
+            dispatch({ type: "HIDE_MODAL" });
+            dispatch({
+                type: "SHOW_PROGRESS",
+                state: { message: "Aligning plugin versions across projects..." },
+            });
+            try {
+                const results = await fixAllPluginVersionMismatches(mismatches);
+                dispatch({ type: "HIDE_PROGRESS" });
+                // Count how many projects were updated across all plugins
+                const totalUpdated = Array.from(results.values()).reduce((sum, r) => sum + r.updated, 0);
+                dispatch({
+                    type: "SHOW_MODAL",
+                    modal: {
+                        type: "message",
+                        title: "Plugin Versions Aligned",
+                        message: `Updated ${totalUpdated} project entr${totalUpdated === 1 ? "y" : "ies"} in ` +
+                            `installed_plugins.json.\n\n` +
+                            `Restart Claude Code for the new versions to load. ` +
+                            `The running session still has the old plugin code in memory.`,
+                        variant: "success",
+                        onDismiss: dismiss,
+                    },
+                });
+            }
+            catch (error) {
+                dispatch({ type: "HIDE_PROGRESS" });
+                dispatch({
+                    type: "SHOW_MODAL",
+                    modal: {
+                        type: "message",
+                        title: "Fix Failed",
+                        message: `Could not align plugin versions: ${error instanceof Error ? error.message : String(error)}\n\n` +
+                            `Try running claudeup again, or manually update the plugin in each project.`,
+                        variant: "error",
+                        onDismiss: dismiss,
+                    },
+                });
+            }
+        };
+        dispatch({
+            type: "SHOW_MODAL",
+            modal: {
+                type: "version-mismatch",
+                mismatches,
+                onFix: fix,
+                onDismiss: dismiss,
+            },
+        });
+    }, [dispatch]);
+    return { show };
+}

package/src/ui/hooks/useMismatchModal.ts

@@ -0,0 +1,95 @@
+import { useCallback } from "react";
+import { useApp } from "../state/AppContext.js";
+import {
+	fixAllPluginVersionMismatches,
+	type VersionMismatchInfo,
+} from "../../services/plugin-version-check.js";
+
+/**
+ * Shared hook for showing the plugin version mismatch modal.
+ *
+ * Used in two places:
+ * 1. App.tsx — startup check shows mismatches found across all enabled plugins
+ * 2. PluginsScreen.tsx — post-install/update check shows a single plugin mismatch
+ *
+ * Both flows now share the same interactive modal with a "Fix all projects"
+ * button, so users never have to restart claudeup to access the fix.
+ *
+ * The fix uses fixAllPluginVersionMismatches() which rewrites
+ * installed_plugins.json in-place to align all entries to the current
+ * project's expected versions. After success, shows a hint to restart
+ * Claude Code so the new versions actually load (the running session
+ * has the old plugin code in memory).
+ */
+export function useMismatchModal() {
+	const { dispatch } = useApp();
+
+	const show = useCallback(
+		(mismatches: VersionMismatchInfo[]) => {
+			if (mismatches.length === 0) return;
+
+			const dismiss = () => dispatch({ type: "HIDE_MODAL" });
+
+			const fix = async () => {
+				dispatch({ type: "HIDE_MODAL" });
+				dispatch({
+					type: "SHOW_PROGRESS",
+					state: { message: "Aligning plugin versions across projects..." },
+				});
+
+				try {
+					const results = await fixAllPluginVersionMismatches(mismatches);
+					dispatch({ type: "HIDE_PROGRESS" });
+
+					// Count how many projects were updated across all plugins
+					const totalUpdated = Array.from(results.values()).reduce(
+						(sum, r) => sum + r.updated,
+						0,
+					);
+
+					dispatch({
+						type: "SHOW_MODAL",
+						modal: {
+							type: "message",
+							title: "Plugin Versions Aligned",
+							message:
+								`Updated ${totalUpdated} project entr${totalUpdated === 1 ? "y" : "ies"} in ` +
+								`installed_plugins.json.\n\n` +
+								`Restart Claude Code for the new versions to load. ` +
+								`The running session still has the old plugin code in memory.`,
+							variant: "success",
+							onDismiss: dismiss,
+						},
+					});
+				} catch (error) {
+					dispatch({ type: "HIDE_PROGRESS" });
+					dispatch({
+						type: "SHOW_MODAL",
+						modal: {
+							type: "message",
+							title: "Fix Failed",
+							message:
+								`Could not align plugin versions: ${error instanceof Error ? error.message : String(error)}\n\n` +
+								`Try running claudeup again, or manually update the plugin in each project.`,
+							variant: "error",
+							onDismiss: dismiss,
+						},
+					});
+				}
+			};
+
+			dispatch({
+				type: "SHOW_MODAL",
+				modal: {
+					type: "version-mismatch",
+					mismatches,
+					onFix: fix,
+					onDismiss: dismiss,
+				},
+			});
+		},
+		[dispatch],
+	);
+
+	return { show };
+}

package/src/ui/screens/PluginsScreen.js

@@ -14,7 +14,8 @@ import { saveProfile } from "../../services/profiles.js";
 import { installPlugin as cliInstallPlugin, uninstallPlugin as cliUninstallPlugin, updatePlugin as cliUpdatePlugin, } from "../../services/claude-cli.js";
 import { getPluginEnvRequirements, getPluginSourcePath, } from "../../services/plugin-mcp-config.js";
 import { getPluginSetupFromSource, checkMissingDeps, installPluginDeps, } from "../../services/plugin-setup.js";
-import { checkSinglePluginMismatch } from "../../services/plugin-version-check.js";
+import { checkSinglePluginMismatch, } from "../../services/plugin-version-check.js";
+import { useMismatchModal } from "../hooks/useMismatchModal.js";
 import { buildPluginBrowserItems, } from "../adapters/pluginsAdapter.js";
 import { renderPluginRow, renderPluginDetail, } from "../renderers/pluginRenderers.js";
 export function PluginsScreen() {
@@ -23,6 +24,7 @@ export function PluginsScreen() {
     const modal = useModal();
     const progress = useProgress();
     const dimensions = useDimensions();
+    const mismatchModal = useMismatchModal();
     const isSearchActive = state.isSearching &&
         state.currentRoute.screen === "plugins" &&
         !state.modal;
@@ -234,22 +236,19 @@ export function PluginsScreen() {
         }
     };
     /**
-     * Check for version mismatch after a plugin update and warn the user.
+     * Check for version mismatch after a plugin update and show the
+     * interactive mismatch modal with a "Fix all projects" button.
+     *
      * The [0] index bug in Claude Code means the update may not actually
-     * take effect if another project's entry is at index 0.
+     * take effect if another project's entry is at index 0. The shared
+     * useMismatchModal hook provides the same fix flow available at startup.
      */
     const warnIfVersionMismatch = async (pluginId) => {
         try {
             const projectPath = state.projectPath || process.cwd();
             const mismatch = await checkSinglePluginMismatch(pluginId, projectPath);
             if (mismatch) {
-                await modal.message("Version Mismatch Warning", `${pluginId} was updated to v${mismatch.currentProjectVersion} for this project, ` +
-                    `but Claude Code will load v${mismatch.firstEntryVersion} due to a known bug.\n\n` +
-                    `The plugin loader always uses the first entry in installed_plugins.json, ` +
-                    `which belongs to another project.\n\n` +
-                    `Bug: https://github.com/anthropics/claude-code/issues/45997\n\n` +
-                    `To fix: open claudeup and use the version alignment tool, ` +
-                    `or update the plugin in all projects to the same version.`, "error");
+                mismatchModal.show([mismatch]);
             }
         }
         catch {
@@ -567,9 +566,21 @@ export function PluginsScreen() {
                 updatedPluginIds.push(plugin.id);
             }
             modal.hideModal();
-            // Check for mismatches on all updated plugins
+            // Batch mismatch checks into a single modal
+            const projectPath = state.projectPath || process.cwd();
+            const allMismatches = [];
             for (const pluginId of updatedPluginIds) {
-                await warnIfVersionMismatch(pluginId);
+                try {
+                    const m = await checkSinglePluginMismatch(pluginId, projectPath);
+                    if (m)
+                        allMismatches.push(m);
+                }
+                catch {
+                    // best-effort
+                }
+            }
+            if (allMismatches.length > 0) {
+                mismatchModal.show(allMismatches);
             }
             fetchData();
         }

package/src/ui/screens/PluginsScreen.tsx

@@ -38,7 +38,11 @@ import {
 	checkMissingDeps,
 	installPluginDeps,
 } from "../../services/plugin-setup.js";
-import { checkSinglePluginMismatch } from "../../services/plugin-version-check.js";
+import {
+	checkSinglePluginMismatch,
+	type VersionMismatchInfo,
+} from "../../services/plugin-version-check.js";
+import { useMismatchModal } from "../hooks/useMismatchModal.js";
 import {
 	buildPluginBrowserItems,
 	type PluginBrowserItem,
@@ -54,6 +58,7 @@ export function PluginsScreen() {
 	const modal = useModal();
 	const progress = useProgress();
 	const dimensions = useDimensions();
+	const mismatchModal = useMismatchModal();
 
 	const isSearchActive =
 		state.isSearching &&
@@ -290,26 +295,19 @@ export function PluginsScreen() {
 	};
 
 	/**
-	 * Check for version mismatch after a plugin update and warn the user.
+	 * Check for version mismatch after a plugin update and show the
+	 * interactive mismatch modal with a "Fix all projects" button.
+	 *
 	 * The [0] index bug in Claude Code means the update may not actually
-	 * take effect if another project's entry is at index 0.
+	 * take effect if another project's entry is at index 0. The shared
+	 * useMismatchModal hook provides the same fix flow available at startup.
 	 */
 	const warnIfVersionMismatch = async (pluginId: string): Promise<void> => {
 		try {
 			const projectPath = state.projectPath || process.cwd();
 			const mismatch = await checkSinglePluginMismatch(pluginId, projectPath);
 			if (mismatch) {
-				await modal.message(
-					"Version Mismatch Warning",
-					`${pluginId} was updated to v${mismatch.currentProjectVersion} for this project, ` +
-						`but Claude Code will load v${mismatch.firstEntryVersion} due to a known bug.\n\n` +
-						`The plugin loader always uses the first entry in installed_plugins.json, ` +
-						`which belongs to another project.\n\n` +
-						`Bug: https://github.com/anthropics/claude-code/issues/45997\n\n` +
-						`To fix: open claudeup and use the version alignment tool, ` +
-						`or update the plugin in all projects to the same version.`,
-					"error",
-				);
+				mismatchModal.show([mismatch]);
 			}
 		} catch {
 			// Non-fatal: mismatch check is best-effort
@@ -722,9 +720,19 @@ export function PluginsScreen() {
 				updatedPluginIds.push(plugin.id);
 			}
 			modal.hideModal();
-			// Check for mismatches on all updated plugins
+			// Batch mismatch checks into a single modal
+			const projectPath = state.projectPath || process.cwd();
+			const allMismatches: VersionMismatchInfo[] = [];
 			for (const pluginId of updatedPluginIds) {
-				await warnIfVersionMismatch(pluginId);
+				try {
+					const m = await checkSinglePluginMismatch(pluginId, projectPath);
+					if (m) allMismatches.push(m);
+				} catch {
+					// best-effort
+				}
+			}
+			if (allMismatches.length > 0) {
+				mismatchModal.show(allMismatches);
 			}
 			fetchData();
 		} catch (error) {

package/src/ui/state/types.ts

@@ -6,6 +6,7 @@ import type {
 	SkillInfo,
 } from "../../types/index.js";
 import type { PluginInfo } from "../../services/plugin-manager.js";
+import type { VersionMismatchInfo } from "../../services/plugin-version-check.js";
 
 // ============================================================================
 // Route Types
@@ -86,6 +87,12 @@ export type ModalState =
 	| {
 			type: "loading";
 			message: string;
+	  }
+	| {
+			type: "version-mismatch";
+			mismatches: VersionMismatchInfo[];
+			onFix: () => void;
+			onDismiss: () => void;
 	  };
 
 // ============================================================================