claudeup 3.5.1 → 3.6.1

package/package.json

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

package/src/prerunner/index.js

@@ -1,7 +1,78 @@
+import fs from "fs-extra";
+import path from "node:path";
+import os from "node:os";
 import { UpdateCache } from "../services/update-cache.js";
-import { getAvailablePlugins, clearMarketplaceCache, saveInstalledPluginVersion, } from "../services/plugin-manager.js";
+import { getAvailablePlugins, clearMarketplaceCache, } from "../services/plugin-manager.js";
 import { runClaude } from "../services/claude-runner.js";
-import { recoverMarketplaceSettings, migrateMarketplaceRename } from "../services/claude-settings.js";
+import { recoverMarketplaceSettings, migrateMarketplaceRename, getGlobalEnabledPlugins, getEnabledPlugins, getLocalEnabledPlugins, } from "../services/claude-settings.js";
+import { parsePluginId } from "../utils/string-utils.js";
+import { defaultMarketplaces } from "../data/marketplaces.js";
+import { updatePlugin, addMarketplace, isClaudeAvailable, } from "../services/claude-cli.js";
+const MARKETPLACES_DIR = path.join(os.homedir(), ".claude", "plugins", "marketplaces");
+/**
+ * Collect all unique marketplace names from enabled plugins across all settings scopes.
+ * Returns a Set of marketplace names (e.g., "magus", "claude-plugins-official").
+ */
+async function getReferencedMarketplaces(projectPath) {
+    const marketplaceNames = new Set();
+    // Collect plugin IDs from all scopes
+    const allPluginIds = new Set();
+    try {
+        const global = await getGlobalEnabledPlugins();
+        for (const id of Object.keys(global))
+            allPluginIds.add(id);
+    }
+    catch { /* skip if unreadable */ }
+    if (projectPath) {
+        try {
+            const project = await getEnabledPlugins(projectPath);
+            for (const id of Object.keys(project))
+                allPluginIds.add(id);
+        }
+        catch { /* skip if unreadable */ }
+        try {
+            const local = await getLocalEnabledPlugins(projectPath);
+            for (const id of Object.keys(local))
+                allPluginIds.add(id);
+        }
+        catch { /* skip if unreadable */ }
+    }
+    // Parse marketplace names from plugin IDs
+    for (const pluginId of allPluginIds) {
+        const parsed = parsePluginId(pluginId);
+        if (parsed) {
+            marketplaceNames.add(parsed.marketplace);
+        }
+    }
+    return marketplaceNames;
+}
+/**
+ * Check which referenced marketplaces are missing locally and auto-add them.
+ * Only adds marketplaces with known repos (from defaultMarketplaces).
+ */
+async function autoAddMissingMarketplaces(projectPath) {
+    const referenced = await getReferencedMarketplaces(projectPath);
+    const added = [];
+    for (const mpName of referenced) {
+        // Check if marketplace directory exists locally
+        const mpDir = path.join(MARKETPLACES_DIR, mpName);
+        if (await fs.pathExists(mpDir))
+            continue;
+        // Look up the repo URL from default marketplaces
+        const defaultMp = defaultMarketplaces.find((m) => m.name === mpName);
+        if (!defaultMp?.source.repo)
+            continue;
+        try {
+            await addMarketplace(defaultMp.source.repo);
+            added.push(mpName);
+        }
+        catch (error) {
+            // Non-fatal: log and continue
+            console.warn(`⚠ Failed to auto-add marketplace ${mpName}:`, error instanceof Error ? error.message : "Unknown error");
+        }
+    }
+    return added;
+}
 /**
  * Prerun orchestration: Check for updates, apply them, then run claude
  * @param claudeArgs - Arguments to pass to claude CLI
@@ -19,6 +90,15 @@ export async function prerunClaude(claudeArgs, options = {}) {
         if (migTotal > 0) {
             console.log(`✓ Migrated ${migTotal} plugin reference(s) → magus`);
         }
+        // STEP 0.5: Auto-add missing marketplaces
+        // When plugins reference a marketplace that's not installed locally
+        // (e.g., settings synced from another machine), add it automatically.
+        if (await isClaudeAvailable()) {
+            const addedMarketplaces = await autoAddMissingMarketplaces();
+            if (addedMarketplaces.length > 0) {
+                console.log(`✓ Auto-added marketplace(s): ${addedMarketplaces.join(", ")}`);
+            }
+        }
         // STEP 1: Check if we should update (time-based cache, or forced)
         const shouldUpdate = options.force || (await cache.shouldCheckForUpdates());
         if (options.force) {
@@ -34,12 +114,12 @@ export async function prerunClaude(claudeArgs, options = {}) {
                 console.log(`✓ Removed stale marketplaces: ${recovery.removed.join(", ")}`);
             }
             // STEP 2: Clear cache to force fresh plugin info
-            // Note: Marketplace updates should be done via Claude Code's /plugin marketplace update
             clearMarketplaceCache();
             // STEP 3: Get updated plugin info (to detect versions)
             const plugins = await getAvailablePlugins();
-            // STEP 4: Auto-update enabled plugins with available updates
+            // STEP 4: Auto-update enabled plugins via claude CLI
             const autoUpdatedPlugins = [];
+            const cliAvailable = await isClaudeAvailable();
             for (const plugin of plugins) {
                 // Only update if:
                 // 1. Plugin is enabled
@@ -50,11 +130,9 @@ export async function prerunClaude(claudeArgs, options = {}) {
                     plugin.installedVersion &&
                     plugin.version) {
                     try {
-                        // Save new version - this will:
-                        // 1. Update settings.json
-                        // 2. Call updateInstalledPluginsRegistry()
-                        // 3. Copy plugin files to cache (via copyPluginToCache())
-                        await saveInstalledPluginVersion(plugin.id, plugin.version);
+                        if (cliAvailable) {
+                            await updatePlugin(plugin.id, "user");
+                        }
                         autoUpdatedPlugins.push({
                             pluginId: plugin.id,
                             oldVersion: plugin.installedVersion,

package/src/prerunner/index.ts

@@ -1,16 +1,112 @@
+import fs from "fs-extra";
+import path from "node:path";
+import os from "node:os";
 import { UpdateCache } from "../services/update-cache.js";
 import {
 	getAvailablePlugins,
 	clearMarketplaceCache,
-	saveInstalledPluginVersion,
 } from "../services/plugin-manager.js";
 import { runClaude } from "../services/claude-runner.js";
-import { recoverMarketplaceSettings, migrateMarketplaceRename } from "../services/claude-settings.js";
+import {
+	recoverMarketplaceSettings,
+	migrateMarketplaceRename,
+	getGlobalEnabledPlugins,
+	getEnabledPlugins,
+	getLocalEnabledPlugins,
+} from "../services/claude-settings.js";
+import { parsePluginId } from "../utils/string-utils.js";
+import { defaultMarketplaces } from "../data/marketplaces.js";
+import {
+	updatePlugin,
+	addMarketplace,
+	isClaudeAvailable,
+} from "../services/claude-cli.js";
+
+const MARKETPLACES_DIR = path.join(
+	os.homedir(),
+	".claude",
+	"plugins",
+	"marketplaces",
+);
 
 export interface PrerunOptions {
 	force?: boolean; // Bypass cache and force update check
 }
 
+/**
+ * Collect all unique marketplace names from enabled plugins across all settings scopes.
+ * Returns a Set of marketplace names (e.g., "magus", "claude-plugins-official").
+ */
+async function getReferencedMarketplaces(
+	projectPath?: string,
+): Promise<Set<string>> {
+	const marketplaceNames = new Set<string>();
+
+	// Collect plugin IDs from all scopes
+	const allPluginIds = new Set<string>();
+
+	try {
+		const global = await getGlobalEnabledPlugins();
+		for (const id of Object.keys(global)) allPluginIds.add(id);
+	} catch { /* skip if unreadable */ }
+
+	if (projectPath) {
+		try {
+			const project = await getEnabledPlugins(projectPath);
+			for (const id of Object.keys(project)) allPluginIds.add(id);
+		} catch { /* skip if unreadable */ }
+
+		try {
+			const local = await getLocalEnabledPlugins(projectPath);
+			for (const id of Object.keys(local)) allPluginIds.add(id);
+		} catch { /* skip if unreadable */ }
+	}
+
+	// Parse marketplace names from plugin IDs
+	for (const pluginId of allPluginIds) {
+		const parsed = parsePluginId(pluginId);
+		if (parsed) {
+			marketplaceNames.add(parsed.marketplace);
+		}
+	}
+
+	return marketplaceNames;
+}
+
+/**
+ * Check which referenced marketplaces are missing locally and auto-add them.
+ * Only adds marketplaces with known repos (from defaultMarketplaces).
+ */
+async function autoAddMissingMarketplaces(
+	projectPath?: string,
+): Promise<string[]> {
+	const referenced = await getReferencedMarketplaces(projectPath);
+	const added: string[] = [];
+
+	for (const mpName of referenced) {
+		// Check if marketplace directory exists locally
+		const mpDir = path.join(MARKETPLACES_DIR, mpName);
+		if (await fs.pathExists(mpDir)) continue;
+
+		// Look up the repo URL from default marketplaces
+		const defaultMp = defaultMarketplaces.find((m) => m.name === mpName);
+		if (!defaultMp?.source.repo) continue;
+
+		try {
+			await addMarketplace(defaultMp.source.repo);
+			added.push(mpName);
+		} catch (error) {
+			// Non-fatal: log and continue
+			console.warn(
+				`⚠ Failed to auto-add marketplace ${mpName}:`,
+				error instanceof Error ? error.message : "Unknown error",
+			);
+		}
+	}
+
+	return added;
+}
+
 /**
  * Prerun orchestration: Check for updates, apply them, then run claude
  * @param claudeArgs - Arguments to pass to claude CLI
@@ -33,6 +129,18 @@ export async function prerunClaude(
 			console.log(`✓ Migrated ${migTotal} plugin reference(s) → magus`);
 		}
 
+		// STEP 0.5: Auto-add missing marketplaces
+		// When plugins reference a marketplace that's not installed locally
+		// (e.g., settings synced from another machine), add it automatically.
+		if (await isClaudeAvailable()) {
+			const addedMarketplaces = await autoAddMissingMarketplaces();
+			if (addedMarketplaces.length > 0) {
+				console.log(
+					`✓ Auto-added marketplace(s): ${addedMarketplaces.join(", ")}`,
+				);
+			}
+		}
+
 		// STEP 1: Check if we should update (time-based cache, or forced)
 		const shouldUpdate = options.force || (await cache.shouldCheckForUpdates());
 
@@ -55,19 +163,20 @@ export async function prerunClaude(
 			}
 
 			// STEP 2: Clear cache to force fresh plugin info
-			// Note: Marketplace updates should be done via Claude Code's /plugin marketplace update
 			clearMarketplaceCache();
 
 			// STEP 3: Get updated plugin info (to detect versions)
 			const plugins = await getAvailablePlugins();
 
-			// STEP 4: Auto-update enabled plugins with available updates
+			// STEP 4: Auto-update enabled plugins via claude CLI
 			const autoUpdatedPlugins: Array<{
 				pluginId: string;
 				oldVersion: string;
 				newVersion: string;
 			}> = [];
 
+			const cliAvailable = await isClaudeAvailable();
+
 			for (const plugin of plugins) {
 				// Only update if:
 				// 1. Plugin is enabled
@@ -80,11 +189,9 @@ export async function prerunClaude(
 					plugin.version
 				) {
 					try {
-						// Save new version - this will:
-						// 1. Update settings.json
-						// 2. Call updateInstalledPluginsRegistry()
-						// 3. Copy plugin files to cache (via copyPluginToCache())
-						await saveInstalledPluginVersion(plugin.id, plugin.version);
+						if (cliAvailable) {
+							await updatePlugin(plugin.id, "user");
+						}
 
 						autoUpdatedPlugins.push({
 							pluginId: plugin.id,

package/src/services/claude-cli.js

@@ -0,0 +1,94 @@
+/**
+ * Claude CLI wrapper service
+ *
+ * Delegates plugin and marketplace management to the `claude` CLI
+ * instead of manipulating settings JSON files directly.
+ *
+ * CLI commands used:
+ * - claude plugin install/uninstall/enable/disable/update
+ * - claude marketplace add
+ */
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
+import { which } from "../utils/command-utils.js";
+const execFileAsync = promisify(execFile);
+/**
+ * Get the path to the claude CLI binary
+ * @throws Error if claude CLI is not found in PATH
+ */
+async function getClaudePath() {
+    const claudePath = await which("claude");
+    if (!claudePath) {
+        throw new Error("claude CLI not found in PATH. Install with: npm install -g @anthropic-ai/claude-code");
+    }
+    return claudePath;
+}
+/**
+ * Execute a claude CLI command and return stdout
+ * @param args - Arguments to pass to claude
+ * @param timeoutMs - Timeout in milliseconds (default: 30s)
+ * @returns stdout from the command
+ */
+async function execClaude(args, timeoutMs = 30000) {
+    const claudePath = await getClaudePath();
+    try {
+        const { stdout } = await execFileAsync(claudePath, args, {
+            timeout: timeoutMs,
+        });
+        return stdout.trim();
+    }
+    catch (error) {
+        const execError = error;
+        const msg = execError.stderr?.trim() ||
+            execError.stdout?.trim() ||
+            execError.message ||
+            "claude command failed";
+        throw new Error(msg);
+    }
+}
+/**
+ * Install a plugin using claude CLI
+ * Handles enabling + version tracking + cache copy in one shot
+ */
+export async function installPlugin(pluginId, scope = "user") {
+    await execClaude(["plugin", "install", pluginId, "--scope", scope]);
+}
+/**
+ * Uninstall a plugin using claude CLI
+ * Handles disabling + version removal in one shot
+ */
+export async function uninstallPlugin(pluginId, scope = "user") {
+    await execClaude(["plugin", "uninstall", pluginId, "--scope", scope]);
+}
+/**
+ * Enable a previously disabled plugin
+ */
+export async function enablePlugin(pluginId, scope = "user") {
+    await execClaude(["plugin", "enable", pluginId, "--scope", scope]);
+}
+/**
+ * Disable a plugin without uninstalling it
+ */
+export async function disablePlugin(pluginId, scope = "user") {
+    await execClaude(["plugin", "disable", pluginId, "--scope", scope]);
+}
+/**
+ * Update a plugin to the latest version
+ */
+export async function updatePlugin(pluginId, scope = "user") {
+    await execClaude(["plugin", "update", pluginId, "--scope", scope], 60000);
+}
+/**
+ * Add a marketplace by GitHub repo (e.g., "MadAppGang/magus")
+ * Uses longer timeout since this involves cloning a git repo
+ */
+export async function addMarketplace(repo) {
+    await execClaude(["plugin", "marketplace", "add", repo], 60000);
+}
+/**
+ * Check if the claude CLI is available
+ * @returns true if claude CLI is found in PATH
+ */
+export async function isClaudeAvailable() {
+    return (await which("claude")) !== null;
+}

package/src/services/claude-cli.ts

@@ -0,0 +1,132 @@
+/**
+ * Claude CLI wrapper service
+ *
+ * Delegates plugin and marketplace management to the `claude` CLI
+ * instead of manipulating settings JSON files directly.
+ *
+ * CLI commands used:
+ * - claude plugin install/uninstall/enable/disable/update
+ * - claude marketplace add
+ */
+
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
+import { which } from "../utils/command-utils.js";
+
+const execFileAsync = promisify(execFile);
+
+export type PluginScope = "user" | "project" | "local";
+
+/**
+ * Get the path to the claude CLI binary
+ * @throws Error if claude CLI is not found in PATH
+ */
+async function getClaudePath(): Promise<string> {
+	const claudePath = await which("claude");
+	if (!claudePath) {
+		throw new Error(
+			"claude CLI not found in PATH. Install with: npm install -g @anthropic-ai/claude-code",
+		);
+	}
+	return claudePath;
+}
+
+/**
+ * Execute a claude CLI command and return stdout
+ * @param args - Arguments to pass to claude
+ * @param timeoutMs - Timeout in milliseconds (default: 30s)
+ * @returns stdout from the command
+ */
+async function execClaude(
+	args: string[],
+	timeoutMs = 30000,
+): Promise<string> {
+	const claudePath = await getClaudePath();
+	try {
+		const { stdout } = await execFileAsync(claudePath, args, {
+			timeout: timeoutMs,
+		});
+		return stdout.trim();
+	} catch (error: unknown) {
+		const execError = error as {
+			stderr?: string;
+			stdout?: string;
+			message?: string;
+			code?: number;
+		};
+		const msg =
+			execError.stderr?.trim() ||
+			execError.stdout?.trim() ||
+			execError.message ||
+			"claude command failed";
+		throw new Error(msg);
+	}
+}
+
+/**
+ * Install a plugin using claude CLI
+ * Handles enabling + version tracking + cache copy in one shot
+ */
+export async function installPlugin(
+	pluginId: string,
+	scope: PluginScope = "user",
+): Promise<void> {
+	await execClaude(["plugin", "install", pluginId, "--scope", scope]);
+}
+
+/**
+ * Uninstall a plugin using claude CLI
+ * Handles disabling + version removal in one shot
+ */
+export async function uninstallPlugin(
+	pluginId: string,
+	scope: PluginScope = "user",
+): Promise<void> {
+	await execClaude(["plugin", "uninstall", pluginId, "--scope", scope]);
+}
+
+/**
+ * Enable a previously disabled plugin
+ */
+export async function enablePlugin(
+	pluginId: string,
+	scope: PluginScope = "user",
+): Promise<void> {
+	await execClaude(["plugin", "enable", pluginId, "--scope", scope]);
+}
+
+/**
+ * Disable a plugin without uninstalling it
+ */
+export async function disablePlugin(
+	pluginId: string,
+	scope: PluginScope = "user",
+): Promise<void> {
+	await execClaude(["plugin", "disable", pluginId, "--scope", scope]);
+}
+
+/**
+ * Update a plugin to the latest version
+ */
+export async function updatePlugin(
+	pluginId: string,
+	scope: PluginScope = "user",
+): Promise<void> {
+	await execClaude(["plugin", "update", pluginId, "--scope", scope], 60000);
+}
+
+/**
+ * Add a marketplace by GitHub repo (e.g., "MadAppGang/magus")
+ * Uses longer timeout since this involves cloning a git repo
+ */
+export async function addMarketplace(repo: string): Promise<void> {
+	await execClaude(["plugin", "marketplace", "add", repo], 60000);
+}
+
+/**
+ * Check if the claude CLI is available
+ * @returns true if claude CLI is found in PATH
+ */
+export async function isClaudeAvailable(): Promise<boolean> {
+	return (await which("claude")) !== null;
+}

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

@@ -9,6 +9,6 @@ export function ConfirmModal({ title, message, onConfirm, onCancel, }) {
             onCancel();
         }
     });
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "yellow", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsx("text", { children: _jsx("strong", { children: title }) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: message }) }), _jsx("box", { children: _jsxs("text", { children: [_jsx("span", { fg: "green", children: "[Y]" }), _jsx("span", { children: "es " }), _jsx("span", { fg: "red", children: "[N]" }), _jsx("span", { children: "o" })] }) })] }));
+    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "yellow", backgroundColor: "#1a1a2e", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsx("text", { children: _jsx("strong", { children: title }) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: message }) }), _jsx("box", { children: _jsxs("text", { children: [_jsx("span", { fg: "green", children: "[Y]" }), _jsx("span", { children: "es " }), _jsx("span", { fg: "red", children: "[N]" }), _jsx("span", { children: "o" })] }) })] }));
 }
 export default ConfirmModal;

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

@@ -32,6 +32,7 @@ export function ConfirmModal({
 			border
 			borderStyle="rounded"
 			borderColor="yellow"
+			backgroundColor="#1a1a2e"
 			paddingLeft={2}
 			paddingRight={2}
 			paddingTop={1}

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

@@ -11,6 +11,6 @@ export function InputModal({ title, label, defaultValue = "", onSubmit, onCancel
             onCancel();
         }
     });
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "cyan", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsx("text", { children: _jsx("strong", { children: title }) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: label }) }), _jsx("input", { value: value, onChange: setValue, focused: true, width: 54 }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#666666", children: "Enter to confirm \u2022 Escape to cancel" }) })] }));
+    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "cyan", backgroundColor: "#1a1a2e", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsx("text", { children: _jsx("strong", { children: title }) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: label }) }), _jsx("input", { value: value, onChange: setValue, focused: true, width: 54 }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#666666", children: "Enter to confirm \u2022 Escape to cancel" }) })] }));
 }
 export default InputModal;

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

@@ -37,6 +37,7 @@ export function InputModal({
 			border
 			borderStyle="rounded"
 			borderColor="cyan"
+			backgroundColor="#1a1a2e"
 			paddingLeft={2}
 			paddingRight={2}
 			paddingTop={1}

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

@@ -9,6 +9,6 @@ export function LoadingModal({ message, }) {
         }, 80);
         return () => clearInterval(interval);
     }, []);
-    return (_jsxs("box", { flexDirection: "row", border: true, borderStyle: "rounded", borderColor: "cyan", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: [_jsx("text", { fg: "cyan", children: SPINNER_FRAMES[frame] }), _jsxs("text", { children: [" ", message] })] }));
+    return (_jsxs("box", { flexDirection: "row", border: true, borderStyle: "rounded", borderColor: "cyan", backgroundColor: "#1a1a2e", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: [_jsx("text", { fg: "cyan", children: SPINNER_FRAMES[frame] }), _jsxs("text", { children: [" ", message] })] }));
 }
 export default LoadingModal;

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

@@ -26,6 +26,7 @@ export function LoadingModal({
 			border
 			borderStyle="rounded"
 			borderColor="cyan"
+			backgroundColor="#1a1a2e"
 			paddingLeft={2}
 			paddingRight={2}
 			paddingTop={1}

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

@@ -11,6 +11,6 @@ export function MessageModal({ title, message, variant, onDismiss, }) {
         // Any key dismisses
         onDismiss();
     });
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: config.color, paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsxs("box", { children: [_jsxs("text", { fg: config.color, children: [config.icon, " "] }), _jsx("text", { children: _jsx("strong", { children: title }) })] }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: message }) }), _jsx("box", { children: _jsx("text", { fg: "#666666", children: "Press any key to continue" }) })] }));
+    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: config.color, backgroundColor: "#1a1a2e", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsxs("box", { children: [_jsxs("text", { fg: config.color, children: [config.icon, " "] }), _jsx("text", { children: _jsx("strong", { children: title }) })] }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: message }) }), _jsx("box", { children: _jsx("text", { fg: "#666666", children: "Press any key to continue" }) })] }));
 }
 export default MessageModal;

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

@@ -37,6 +37,7 @@ export function MessageModal({
 			border
 			borderStyle="rounded"
 			borderColor={config.color}
+			backgroundColor="#1a1a2e"
 			paddingLeft={2}
 			paddingRight={2}
 			paddingTop={1}

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

@@ -50,7 +50,7 @@ export function ModalContainer() {
                 return null;
         }
     };
-    // Center the modal on screen
-    return (_jsx("box", { position: "absolute", width: "100%", height: "100%", justifyContent: "center", alignItems: "center", children: renderModal() }));
+    // Center the modal on screen with opaque backdrop
+    return (_jsx("box", { position: "absolute", width: "100%", height: "100%", justifyContent: "center", alignItems: "center", backgroundColor: "#1a1a2e", children: renderModal() }));
 }
 export default ModalContainer;

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

@@ -87,7 +87,7 @@ export function ModalContainer() {
 		}
 	};
 
-	// Center the modal on screen
+	// Center the modal on screen with opaque backdrop
 	return (
 		<box
 			position="absolute"
@@ -95,6 +95,7 @@ export function ModalContainer() {
 			height="100%"
 			justifyContent="center"
 			alignItems="center"
+			backgroundColor="#1a1a2e"
 		>
 			{renderModal()}
 		</box>

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

@@ -17,7 +17,7 @@ export function SelectModal({ title, message, options, onSelect, onCancel, }) {
             setSelectedIndex((prev) => Math.min(options.length - 1, prev + 1));
         }
     });
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "cyan", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 50, children: [_jsx("text", { children: _jsx("strong", { children: title }) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: message }) }), _jsx("box", { flexDirection: "column", children: options.map((option, idx) => {
+    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "cyan", backgroundColor: "#1a1a2e", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 50, children: [_jsx("text", { children: _jsx("strong", { children: title }) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: message }) }), _jsx("box", { flexDirection: "column", children: options.map((option, idx) => {
                     const isSelected = idx === selectedIndex;
                     const label = isSelected ? `> ${option.label}` : `  ${option.label}`;
                     return (_jsxs("text", { fg: isSelected ? "cyan" : "#666666", children: [isSelected && _jsx("strong", { children: label }), !isSelected && label] }, option.value));

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

@@ -42,6 +42,7 @@ export function SelectModal({
 			border
 			borderStyle="rounded"
 			borderColor="cyan"
+			backgroundColor="#1a1a2e"
 			paddingLeft={2}
 			paddingRight={2}
 			paddingTop={1}

package/src/ui/screens/PluginsScreen.js

@@ -8,8 +8,9 @@ import { CategoryHeader } from "../components/CategoryHeader.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { fuzzyFilter, highlightMatches } from "../../utils/fuzzy-search.js";
 import { getAllMarketplaces } from "../../data/marketplaces.js";
-import { getAvailablePlugins, refreshAllMarketplaces, clearMarketplaceCache, saveInstalledPluginVersion, removeInstalledPluginVersion, getLocalMarketplacesInfo, } from "../../services/plugin-manager.js";
-import { enablePlugin, enableGlobalPlugin, enableLocalPlugin, saveGlobalInstalledPluginVersion, removeGlobalInstalledPluginVersion, saveLocalInstalledPluginVersion, removeLocalInstalledPluginVersion, setMcpEnvVar, getMcpEnvVars, } from "../../services/claude-settings.js";
+import { getAvailablePlugins, refreshAllMarketplaces, clearMarketplaceCache, getLocalMarketplacesInfo, } from "../../services/plugin-manager.js";
+import { setMcpEnvVar, getMcpEnvVars, } from "../../services/claude-settings.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";
 export function PluginsScreen() {
     const { state, dispatch } = useApp();
@@ -263,10 +264,10 @@ export function PluginsScreen() {
     };
     const handleShowAddMarketplaceInstructions = async () => {
         await modal.message("Add Marketplace", "To add a marketplace, run this command in your terminal:\n\n" +
-            "  claude marketplace add owner/repo\n\n" +
+            "  claude plugin marketplace add owner/repo\n\n" +
             "Examples:\n" +
-            "  claude marketplace add MadAppGang/magus\n" +
-            "  claude marketplace add anthropics/claude-plugins-official\n\n" +
+            "  claude plugin marketplace add MadAppGang/magus\n" +
+            "  claude plugin marketplace add anthropics/claude-plugins-official\n\n" +
             "Auto-update is enabled by default for new marketplaces.\n\n" +
             "After adding, refresh claudeup with 'r' to see the new marketplace.", "info");
     };
@@ -377,7 +378,7 @@ export function PluginsScreen() {
             else {
                 // Show add marketplace instructions
                 await modal.message(`Add ${mp.displayName}?`, `To add this marketplace, run in your terminal:\n\n` +
-                    `  claude marketplace add ${mp.source.repo || mp.name}\n\n` +
+                    `  claude plugin marketplace add ${mp.source.repo || mp.name}\n\n` +
                     `Auto-update is enabled by default.\n\n` +
                     `After adding, refresh claudeup with 'r' to see it.`, "info");
             }
@@ -454,40 +455,18 @@ export function PluginsScreen() {
                     : `Uninstalling from ${scopeLabel}`;
             modal.loading(`${actionLabel}...`);
             try {
+                const scope = scopeValue;
                 if (action === "uninstall") {
-                    // Uninstall from this scope
-                    if (scopeValue === "user") {
-                        await enableGlobalPlugin(plugin.id, false);
-                        await removeGlobalInstalledPluginVersion(plugin.id);
-                    }
-                    else if (scopeValue === "project") {
-                        await enablePlugin(plugin.id, false, state.projectPath);
-                        await removeInstalledPluginVersion(plugin.id, state.projectPath);
-                    }
-                    else {
-                        await enableLocalPlugin(plugin.id, false, state.projectPath);
-                        await removeLocalInstalledPluginVersion(plugin.id, state.projectPath);
-                    }
+                    await cliUninstallPlugin(plugin.id, scope);
+                }
+                else if (action === "update") {
+                    await cliUpdatePlugin(plugin.id, scope);
                 }
                 else {
-                    // Install or update (both save the latest version)
-                    if (scopeValue === "user") {
-                        await enableGlobalPlugin(plugin.id, true);
-                        await saveGlobalInstalledPluginVersion(plugin.id, latestVersion);
-                    }
-                    else if (scopeValue === "project") {
-                        await enablePlugin(plugin.id, true, state.projectPath);
-                        await saveInstalledPluginVersion(plugin.id, latestVersion, state.projectPath);
-                    }
-                    else {
-                        await enableLocalPlugin(plugin.id, true, state.projectPath);
-                        await saveLocalInstalledPluginVersion(plugin.id, latestVersion, state.projectPath);
-                    }
+                    await cliInstallPlugin(plugin.id, scope);
                     // On fresh install, prompt for MCP server env vars if needed
-                    if (action === "install") {
-                        modal.hideModal();
-                        await collectPluginEnvVars(plugin.name, plugin.marketplace);
-                    }
+                    modal.hideModal();
+                    await collectPluginEnvVars(plugin.name, plugin.marketplace);
                 }
                 if (action !== "install") {
                     modal.hideModal();
@@ -505,16 +484,10 @@ export function PluginsScreen() {
         if (!item || item.type !== "plugin" || !item.plugin?.hasUpdate)
             return;
         const plugin = item.plugin;
-        const isGlobal = pluginsState.scope === "global";
+        const scope = pluginsState.scope === "global" ? "user" : "project";
         modal.loading(`Updating ${plugin.name}...`);
         try {
-            const versionToSave = plugin.version || "0.0.0";
-            if (isGlobal) {
-                await saveGlobalInstalledPluginVersion(plugin.id, versionToSave);
-            }
-            else {
-                await saveInstalledPluginVersion(plugin.id, versionToSave, state.projectPath);
-            }
+            await cliUpdatePlugin(plugin.id, scope);
             modal.hideModal();
             fetchData();
         }
@@ -529,17 +502,11 @@ export function PluginsScreen() {
         const updatable = pluginsState.plugins.data.filter((p) => p.hasUpdate);
         if (updatable.length === 0)
             return;
-        const isGlobal = pluginsState.scope === "global";
+        const scope = pluginsState.scope === "global" ? "user" : "project";
         modal.loading(`Updating ${updatable.length} plugin(s)...`);
         try {
             for (const plugin of updatable) {
-                const versionToSave = plugin.version || "0.0.0";
-                if (isGlobal) {
-                    await saveGlobalInstalledPluginVersion(plugin.id, versionToSave);
-                }
-                else {
-                    await saveInstalledPluginVersion(plugin.id, versionToSave, state.projectPath);
-                }
+                await cliUpdatePlugin(plugin.id, scope);
             }
             modal.hideModal();
             fetchData();
@@ -589,39 +556,16 @@ export function PluginsScreen() {
         modal.loading(`${actionLabel}...`);
         try {
             if (action === "uninstall") {
-                // Uninstall from this scope
-                if (scope === "user") {
-                    await enableGlobalPlugin(plugin.id, false);
-                    await removeGlobalInstalledPluginVersion(plugin.id);
-                }
-                else if (scope === "project") {
-                    await enablePlugin(plugin.id, false, state.projectPath);
-                    await removeInstalledPluginVersion(plugin.id, state.projectPath);
-                }
-                else {
-                    await enableLocalPlugin(plugin.id, false, state.projectPath);
-                    await removeLocalInstalledPluginVersion(plugin.id, state.projectPath);
-                }
+                await cliUninstallPlugin(plugin.id, scope);
+            }
+            else if (action === "update") {
+                await cliUpdatePlugin(plugin.id, scope);
             }
             else {
-                // Install or update to this scope (both save the latest version)
-                if (scope === "user") {
-                    await enableGlobalPlugin(plugin.id, true);
-                    await saveGlobalInstalledPluginVersion(plugin.id, latestVersion);
-                }
-                else if (scope === "project") {
-                    await enablePlugin(plugin.id, true, state.projectPath);
-                    await saveInstalledPluginVersion(plugin.id, latestVersion, state.projectPath);
-                }
-                else {
-                    await enableLocalPlugin(plugin.id, true, state.projectPath);
-                    await saveLocalInstalledPluginVersion(plugin.id, latestVersion, state.projectPath);
-                }
+                await cliInstallPlugin(plugin.id, scope);
                 // On fresh install, prompt for MCP server env vars if needed
-                if (action === "install") {
-                    modal.hideModal();
-                    await collectPluginEnvVars(plugin.name, plugin.marketplace);
-                }
+                modal.hideModal();
+                await collectPluginEnvVars(plugin.name, plugin.marketplace);
             }
             if (action !== "install") {
                 modal.hideModal();
@@ -667,19 +611,7 @@ export function PluginsScreen() {
             return; // Cancelled
         modal.loading(`Uninstalling ${plugin.name}...`);
         try {
-            if (scopeValue === "user") {
-                await enableGlobalPlugin(plugin.id, false);
-                await removeGlobalInstalledPluginVersion(plugin.id);
-            }
-            else if (scopeValue === "project") {
-                await enablePlugin(plugin.id, false, state.projectPath);
-                await removeInstalledPluginVersion(plugin.id, state.projectPath);
-            }
-            else {
-                // local scope
-                await enableLocalPlugin(plugin.id, false, state.projectPath);
-                await removeLocalInstalledPluginVersion(plugin.id, state.projectPath);
-            }
+            await cliUninstallPlugin(plugin.id, scopeValue);
             modal.hideModal();
             fetchData();
         }

package/src/ui/screens/PluginsScreen.tsx

@@ -11,22 +11,19 @@ import {
 	getAvailablePlugins,
 	refreshAllMarketplaces,
 	clearMarketplaceCache,
-	saveInstalledPluginVersion,
-	removeInstalledPluginVersion,
 	getLocalMarketplacesInfo,
 	type PluginInfo,
 } from "../../services/plugin-manager.js";
 import {
-	enablePlugin,
-	enableGlobalPlugin,
-	enableLocalPlugin,
-	saveGlobalInstalledPluginVersion,
-	removeGlobalInstalledPluginVersion,
-	saveLocalInstalledPluginVersion,
-	removeLocalInstalledPluginVersion,
 	setMcpEnvVar,
 	getMcpEnvVars,
 } from "../../services/claude-settings.js";
+import {
+	installPlugin as cliInstallPlugin,
+	uninstallPlugin as cliUninstallPlugin,
+	updatePlugin as cliUpdatePlugin,
+	type PluginScope,
+} from "../../services/claude-cli.js";
 import {
 	getPluginEnvRequirements,
 	getPluginSourcePath,
@@ -342,10 +339,10 @@ export function PluginsScreen() {
 		await modal.message(
 			"Add Marketplace",
 			"To add a marketplace, run this command in your terminal:\n\n" +
-				"  claude marketplace add owner/repo\n\n" +
+				"  claude plugin marketplace add owner/repo\n\n" +
 				"Examples:\n" +
-				"  claude marketplace add MadAppGang/magus\n" +
-				"  claude marketplace add anthropics/claude-plugins-official\n\n" +
+				"  claude plugin marketplace add MadAppGang/magus\n" +
+				"  claude plugin marketplace add anthropics/claude-plugins-official\n\n" +
 				"Auto-update is enabled by default for new marketplaces.\n\n" +
 				"After adding, refresh claudeup with 'r' to see the new marketplace.",
 			"info",
@@ -500,7 +497,7 @@ export function PluginsScreen() {
 				await modal.message(
 					`Add ${mp.displayName}?`,
 					`To add this marketplace, run in your terminal:\n\n` +
-						`  claude marketplace add ${mp.source.repo || mp.name}\n\n` +
+						`  claude plugin marketplace add ${mp.source.repo || mp.name}\n\n` +
 						`Auto-update is enabled by default.\n\n` +
 						`After adding, refresh claudeup with 'r' to see it.`,
 					"info",
@@ -596,47 +593,17 @@ export function PluginsScreen() {
 			modal.loading(`${actionLabel}...`);
 
 			try {
+				const scope = scopeValue as PluginScope;
 				if (action === "uninstall") {
-					// Uninstall from this scope
-					if (scopeValue === "user") {
-						await enableGlobalPlugin(plugin.id, false);
-						await removeGlobalInstalledPluginVersion(plugin.id);
-					} else if (scopeValue === "project") {
-						await enablePlugin(plugin.id, false, state.projectPath);
-						await removeInstalledPluginVersion(plugin.id, state.projectPath);
-					} else {
-						await enableLocalPlugin(plugin.id, false, state.projectPath);
-						await removeLocalInstalledPluginVersion(
-							plugin.id,
-							state.projectPath,
-						);
-					}
+					await cliUninstallPlugin(plugin.id, scope);
+				} else if (action === "update") {
+					await cliUpdatePlugin(plugin.id, scope);
 				} else {
-					// Install or update (both save the latest version)
-					if (scopeValue === "user") {
-						await enableGlobalPlugin(plugin.id, true);
-						await saveGlobalInstalledPluginVersion(plugin.id, latestVersion);
-					} else if (scopeValue === "project") {
-						await enablePlugin(plugin.id, true, state.projectPath);
-						await saveInstalledPluginVersion(
-							plugin.id,
-							latestVersion,
-							state.projectPath,
-						);
-					} else {
-						await enableLocalPlugin(plugin.id, true, state.projectPath);
-						await saveLocalInstalledPluginVersion(
-							plugin.id,
-							latestVersion,
-							state.projectPath,
-						);
-					}
+					await cliInstallPlugin(plugin.id, scope);
 
 					// On fresh install, prompt for MCP server env vars if needed
-					if (action === "install") {
-						modal.hideModal();
-						await collectPluginEnvVars(plugin.name, plugin.marketplace);
-					}
+					modal.hideModal();
+					await collectPluginEnvVars(plugin.name, plugin.marketplace);
 				}
 				if (action !== "install") {
 					modal.hideModal();
@@ -654,20 +621,11 @@ export function PluginsScreen() {
 		if (!item || item.type !== "plugin" || !item.plugin?.hasUpdate) return;
 
 		const plugin = item.plugin;
-		const isGlobal = pluginsState.scope === "global";
+		const scope: PluginScope = pluginsState.scope === "global" ? "user" : "project";
 
 		modal.loading(`Updating ${plugin.name}...`);
 		try {
-			const versionToSave = plugin.version || "0.0.0";
-			if (isGlobal) {
-				await saveGlobalInstalledPluginVersion(plugin.id, versionToSave);
-			} else {
-				await saveInstalledPluginVersion(
-					plugin.id,
-					versionToSave,
-					state.projectPath,
-				);
-			}
+			await cliUpdatePlugin(plugin.id, scope);
 			modal.hideModal();
 			fetchData();
 		} catch (error) {
@@ -682,21 +640,12 @@ export function PluginsScreen() {
 		const updatable = pluginsState.plugins.data.filter((p) => p.hasUpdate);
 		if (updatable.length === 0) return;
 
-		const isGlobal = pluginsState.scope === "global";
+		const scope: PluginScope = pluginsState.scope === "global" ? "user" : "project";
 		modal.loading(`Updating ${updatable.length} plugin(s)...`);
 
 		try {
 			for (const plugin of updatable) {
-				const versionToSave = plugin.version || "0.0.0";
-				if (isGlobal) {
-					await saveGlobalInstalledPluginVersion(plugin.id, versionToSave);
-				} else {
-					await saveInstalledPluginVersion(
-						plugin.id,
-						versionToSave,
-						state.projectPath,
-					);
-				}
+				await cliUpdatePlugin(plugin.id, scope);
 			}
 			modal.hideModal();
 			fetchData();
@@ -753,43 +702,15 @@ export function PluginsScreen() {
 
 		try {
 			if (action === "uninstall") {
-				// Uninstall from this scope
-				if (scope === "user") {
-					await enableGlobalPlugin(plugin.id, false);
-					await removeGlobalInstalledPluginVersion(plugin.id);
-				} else if (scope === "project") {
-					await enablePlugin(plugin.id, false, state.projectPath);
-					await removeInstalledPluginVersion(plugin.id, state.projectPath);
-				} else {
-					await enableLocalPlugin(plugin.id, false, state.projectPath);
-					await removeLocalInstalledPluginVersion(plugin.id, state.projectPath);
-				}
+				await cliUninstallPlugin(plugin.id, scope);
+			} else if (action === "update") {
+				await cliUpdatePlugin(plugin.id, scope);
 			} else {
-				// Install or update to this scope (both save the latest version)
-				if (scope === "user") {
-					await enableGlobalPlugin(plugin.id, true);
-					await saveGlobalInstalledPluginVersion(plugin.id, latestVersion);
-				} else if (scope === "project") {
-					await enablePlugin(plugin.id, true, state.projectPath);
-					await saveInstalledPluginVersion(
-						plugin.id,
-						latestVersion,
-						state.projectPath,
-					);
-				} else {
-					await enableLocalPlugin(plugin.id, true, state.projectPath);
-					await saveLocalInstalledPluginVersion(
-						plugin.id,
-						latestVersion,
-						state.projectPath,
-					);
-				}
+				await cliInstallPlugin(plugin.id, scope);
 
 				// On fresh install, prompt for MCP server env vars if needed
-				if (action === "install") {
-					modal.hideModal();
-					await collectPluginEnvVars(plugin.name, plugin.marketplace);
-				}
+				modal.hideModal();
+				await collectPluginEnvVars(plugin.name, plugin.marketplace);
 			}
 			if (action !== "install") {
 				modal.hideModal();
@@ -848,17 +769,7 @@ export function PluginsScreen() {
 		modal.loading(`Uninstalling ${plugin.name}...`);
 
 		try {
-			if (scopeValue === "user") {
-				await enableGlobalPlugin(plugin.id, false);
-				await removeGlobalInstalledPluginVersion(plugin.id);
-			} else if (scopeValue === "project") {
-				await enablePlugin(plugin.id, false, state.projectPath);
-				await removeInstalledPluginVersion(plugin.id, state.projectPath);
-			} else {
-				// local scope
-				await enableLocalPlugin(plugin.id, false, state.projectPath);
-				await removeLocalInstalledPluginVersion(plugin.id, state.projectPath);
-			}
+			await cliUninstallPlugin(plugin.id, scopeValue as PluginScope);
 			modal.hideModal();
 			fetchData();
 		} catch (error) {