claudeup 4.11.2 → 4.13.0

package/package.json

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

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: [_jsx("box", { marginBottom: 1, children: _jsxs("text", { fg: COLOR_TITLE, children: [_jsx("span", { fg: COLOR_WARN, children: "\u26A0 " }), _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_TITLE}>
+					<span fg={COLOR_WARN}>⚠ </span>
+					<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 { checkPluginVersionMismatches, 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;
@@ -213,6 +215,8 @@ export function PluginsScreen() {
             handleUpdate();
         else if (event.name === "a")
             handleUpdateAll();
+        else if (event.name === "m")
+            handleCheckMismatches();
         else if (event.name === "s")
             handleSaveAsProfile();
     });
@@ -234,22 +238,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 +568,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();
         }
@@ -578,6 +591,25 @@ export function PluginsScreen() {
             await modal.message("Error", `Failed to update: ${error}`, "error");
         }
     };
+    /**
+     * Manual on-demand check for plugin version mismatches across projects.
+     * Bound to the `m` keybind. Shows a success message if everything is
+     * aligned, or the interactive fix modal if any mismatches are found.
+     */
+    const handleCheckMismatches = async () => {
+        try {
+            const projectPath = state.projectPath || process.cwd();
+            const mismatches = await checkPluginVersionMismatches(projectPath);
+            if (mismatches.length === 0) {
+                await modal.message("No Mismatches", "All enabled plugins in this project will load their expected versions. No action needed.", "success");
+                return;
+            }
+            mismatchModal.show(mismatches);
+        }
+        catch (error) {
+            await modal.message("Error", `Failed to check mismatches: ${error}`, "error");
+        }
+    };
     const handleScopeToggle = async (scope) => {
         const item = selectableItems[pluginsState.selectedIndex];
         if (!item || item.kind !== "plugin")
@@ -704,7 +736,7 @@ export function PluginsScreen() {
     const selectedItem = selectableItems[pluginsState.selectedIndex];
     const footerHints = isSearchActive
         ? "type to filter │ Enter:done │ Esc:clear"
-        : "u/p/l:toggle │ U:update │ a:all │ s:profile │ /:search";
+        : "u/p/l:toggle │ U:update │ a:all │ m:mismatches │ s:profile │ /:search";
     const scopeLabel = pluginsState.scope === "global" ? "Global" : "Project";
     const plugins = pluginsState.plugins.status === "success" ? pluginsState.plugins.data : [];
     const installedCount = plugins.filter((p) => p.enabled).length;

package/src/ui/screens/PluginsScreen.tsx

@@ -38,7 +38,12 @@ import {
 	checkMissingDeps,
 	installPluginDeps,
 } from "../../services/plugin-setup.js";
-import { checkSinglePluginMismatch } from "../../services/plugin-version-check.js";
+import {
+	checkPluginVersionMismatches,
+	checkSinglePluginMismatch,
+	type VersionMismatchInfo,
+} from "../../services/plugin-version-check.js";
+import { useMismatchModal } from "../hooks/useMismatchModal.js";
 import {
 	buildPluginBrowserItems,
 	type PluginBrowserItem,
@@ -54,6 +59,7 @@ export function PluginsScreen() {
 	const modal = useModal();
 	const progress = useProgress();
 	const dimensions = useDimensions();
+	const mismatchModal = useMismatchModal();
 
 	const isSearchActive =
 		state.isSearching &&
@@ -261,6 +267,7 @@ export function PluginsScreen() {
 		else if (event.name === "d") handleRemoveDeprecated();
 		else if (event.name === "U") handleUpdate();
 		else if (event.name === "a") handleUpdateAll();
+		else if (event.name === "m") handleCheckMismatches();
 		else if (event.name === "s") handleSaveAsProfile();
 	});
 
@@ -290,26 +297,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 +722,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) {
@@ -733,6 +743,33 @@ export function PluginsScreen() {
 		}
 	};
 
+	/**
+	 * Manual on-demand check for plugin version mismatches across projects.
+	 * Bound to the `m` keybind. Shows a success message if everything is
+	 * aligned, or the interactive fix modal if any mismatches are found.
+	 */
+	const handleCheckMismatches = async () => {
+		try {
+			const projectPath = state.projectPath || process.cwd();
+			const mismatches = await checkPluginVersionMismatches(projectPath);
+			if (mismatches.length === 0) {
+				await modal.message(
+					"No Mismatches",
+					"All enabled plugins in this project will load their expected versions. No action needed.",
+					"success",
+				);
+				return;
+			}
+			mismatchModal.show(mismatches);
+		} catch (error) {
+			await modal.message(
+				"Error",
+				`Failed to check mismatches: ${error}`,
+				"error",
+			);
+		}
+	};
+
 	const handleScopeToggle = async (scope: "user" | "project" | "local") => {
 		const item = selectableItems[pluginsState.selectedIndex];
 		if (!item || item.kind !== "plugin") return;
@@ -901,7 +938,7 @@ export function PluginsScreen() {
 
 	const footerHints = isSearchActive
 		? "type to filter │ Enter:done │ Esc:clear"
-		: "u/p/l:toggle │ U:update │ a:all │ s:profile │ /:search";
+		: "u/p/l:toggle │ U:update │ a:all │ m:mismatches │ s:profile │ /:search";
 
 	const scopeLabel = pluginsState.scope === "global" ? "Global" : "Project";
 	const plugins: PluginInfo[] =

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;
 	  };
 
 // ============================================================================