claudeup 1.8.0 → 3.3.0

package/{dist → src}/ui/screens/PluginsScreen.js

@@ -1,41 +1,42 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useCallback, useMemo } from 'react';
-import { Box, Text, useInput } from 'ink';
-import { useApp, useModal, useProgress } from '../state/AppContext.js';
-import { useDimensions } from '../state/DimensionsContext.js';
-import { ScreenLayout } from '../components/layout/index.js';
-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 { addMarketplace, removeMarketplace, addGlobalMarketplace, removeGlobalMarketplace, enablePlugin, enableGlobalPlugin, enableLocalPlugin, saveGlobalInstalledPluginVersion, removeGlobalInstalledPluginVersion, saveLocalInstalledPluginVersion, removeLocalInstalledPluginVersion, setMcpEnvVar, getMcpEnvVars, } from '../../services/claude-settings.js';
-import { getPluginEnvRequirements, getPluginSourcePath, } from '../../services/plugin-mcp-config.js';
-import { cloneMarketplace, deleteMarketplace, addToKnownMarketplaces, removeFromKnownMarketplaces, } from '../../services/local-marketplace.js';
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useEffect, useCallback, useMemo } from "react";
+import { useApp, useModal, useProgress } from "../state/AppContext.js";
+import { useDimensions } from "../state/DimensionsContext.js";
+import { useKeyboard } from "../hooks/useKeyboard.js";
+import { ScreenLayout } from "../components/layout/index.js";
+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 { getPluginEnvRequirements, getPluginSourcePath, } from "../../services/plugin-mcp-config.js";
 export function PluginsScreen() {
     const { state, dispatch } = useApp();
     const { plugins: pluginsState } = state;
     const modal = useModal();
     const progress = useProgress();
     const dimensions = useDimensions();
-    const isSearchActive = state.isSearching && state.currentRoute.screen === 'plugins' && !state.modal;
+    const isSearchActive = state.isSearching &&
+        state.currentRoute.screen === "plugins" &&
+        !state.modal;
     // Fetch data (always fetches all scopes)
     const fetchData = useCallback(async () => {
-        dispatch({ type: 'PLUGINS_DATA_LOADING' });
+        dispatch({ type: "PLUGINS_DATA_LOADING" });
         try {
             const localMarketplaces = await getLocalMarketplacesInfo();
             const allMarketplaces = getAllMarketplaces(localMarketplaces);
             // Always use getAvailablePlugins which fetches all scope data
             const pluginData = await getAvailablePlugins(state.projectPath);
             dispatch({
-                type: 'PLUGINS_DATA_SUCCESS',
+                type: "PLUGINS_DATA_SUCCESS",
                 marketplaces: allMarketplaces,
                 plugins: pluginData,
             });
         }
         catch (error) {
             dispatch({
-                type: 'PLUGINS_DATA_ERROR',
+                type: "PLUGINS_DATA_ERROR",
                 error: error instanceof Error ? error : new Error(String(error)),
             });
         }
@@ -46,7 +47,8 @@ export function PluginsScreen() {
     }, [fetchData, state.dataRefreshVersion]);
     // Build list items (categories + plugins)
     const allItems = useMemo(() => {
-        if (pluginsState.marketplaces.status !== 'success' || pluginsState.plugins.status !== 'success') {
+        if (pluginsState.marketplaces.status !== "success" ||
+            pluginsState.plugins.status !== "success") {
             return [];
         }
         const marketplaces = pluginsState.marketplaces.data;
@@ -60,8 +62,8 @@ export function PluginsScreen() {
         }
         // Sort marketplaces: deprecated ones go to the bottom
         const sortedMarketplaces = [...marketplaces].sort((a, b) => {
-            const aDeprecated = a.name === 'claude-code-plugins' ? 1 : 0;
-            const bDeprecated = b.name === 'claude-code-plugins' ? 1 : 0;
+            const aDeprecated = a.name === "claude-code-plugins" ? 1 : 0;
+            const bDeprecated = b.name === "claude-code-plugins" ? 1 : 0;
             return aDeprecated - bDeprecated;
         });
         const items = [];
@@ -73,7 +75,7 @@ export function PluginsScreen() {
             // Category header (marketplace)
             items.push({
                 id: `mp:${marketplace.name}`,
-                type: 'category',
+                type: "category",
                 label: marketplace.displayName,
                 marketplace,
                 marketplaceEnabled: isEnabled,
@@ -85,7 +87,7 @@ export function PluginsScreen() {
                 for (const plugin of marketplacePlugins) {
                     items.push({
                         id: `pl:${plugin.id}`,
-                        type: 'plugin',
+                        type: "plugin",
                         label: plugin.name,
                         plugin,
                     });
@@ -93,15 +95,19 @@ export function PluginsScreen() {
             }
         }
         return items;
-    }, [pluginsState.marketplaces, pluginsState.plugins, pluginsState.collapsedMarketplaces]);
+    }, [
+        pluginsState.marketplaces,
+        pluginsState.plugins,
+        pluginsState.collapsedMarketplaces,
+    ]);
     // Filter items by search query
     const filteredItems = useMemo(() => {
         const query = pluginsState.searchQuery.trim();
         if (!query)
             return allItems;
         // Only search plugins, not categories
-        const pluginItems = allItems.filter(item => item.type === 'plugin');
-        const fuzzyResults = fuzzyFilter(pluginItems, query, item => item.label);
+        const pluginItems = allItems.filter((item) => item.type === "plugin");
+        const fuzzyResults = fuzzyFilter(pluginItems, query, (item) => item.label);
         // Include parent categories for matched plugins
         const matchedMarketplaces = new Set();
         for (const result of fuzzyResults) {
@@ -112,7 +118,7 @@ export function PluginsScreen() {
         const result = [];
         let currentMarketplace = null;
         for (const item of allItems) {
-            if (item.type === 'category' && item.marketplace) {
+            if (item.type === "category" && item.marketplace) {
                 if (matchedMarketplaces.has(item.marketplace.name)) {
                     result.push(item);
                     currentMarketplace = item.marketplace.name;
@@ -121,10 +127,10 @@ export function PluginsScreen() {
                     currentMarketplace = null;
                 }
             }
-            else if (item.type === 'plugin' && item.plugin) {
+            else if (item.type === "plugin" && item.plugin) {
                 if (currentMarketplace === item.plugin.marketplace) {
                     // Check if this plugin matched
-                    const matched = fuzzyResults.find(r => r.item.id === item.id);
+                    const matched = fuzzyResults.find((r) => r.item.id === item.id);
                     if (matched) {
                         result.push({ ...item, _matches: matched.matches });
                     }
@@ -135,158 +141,159 @@ export function PluginsScreen() {
     }, [allItems, pluginsState.searchQuery]);
     // Only selectable items (plugins, not categories)
     const selectableItems = useMemo(() => {
-        return filteredItems.filter(item => item.type === 'plugin' || item.type === 'category');
+        return filteredItems.filter((item) => item.type === "plugin" || item.type === "category");
     }, [filteredItems]);
     // Keyboard handling
-    useInput((input, key) => {
+    useKeyboard((event) => {
         // Handle search mode
         if (isSearchActive) {
-            if (key.escape) {
-                dispatch({ type: 'SET_SEARCHING', isSearching: false });
-                dispatch({ type: 'PLUGINS_SET_SEARCH', query: '' });
+            if (event.name === "escape") {
+                dispatch({ type: "SET_SEARCHING", isSearching: false });
+                dispatch({ type: "PLUGINS_SET_SEARCH", query: "" });
             }
-            else if (key.return) {
-                dispatch({ type: 'SET_SEARCHING', isSearching: false });
+            else if (event.name === "enter") {
+                dispatch({ type: "SET_SEARCHING", isSearching: false });
                 // Keep the search query, just exit search mode
             }
-            else if (key.backspace || key.delete) {
-                dispatch({ type: 'PLUGINS_SET_SEARCH', query: pluginsState.searchQuery.slice(0, -1) });
+            else if (event.name === "backspace" || event.name === "delete") {
+                dispatch({
+                    type: "PLUGINS_SET_SEARCH",
+                    query: pluginsState.searchQuery.slice(0, -1),
+                });
             }
-            else if (input && !key.ctrl && !key.meta) {
-                dispatch({ type: 'PLUGINS_SET_SEARCH', query: pluginsState.searchQuery + input });
+            else if (event.name.length === 1 && !event.ctrl && !event.meta) {
+                dispatch({
+                    type: "PLUGINS_SET_SEARCH",
+                    query: pluginsState.searchQuery + event.name,
+                });
             }
             return;
         }
         if (state.modal)
             return;
         // Start search with /
-        if (input === '/') {
-            dispatch({ type: 'SET_SEARCHING', isSearching: true });
+        if (event.name === "/") {
+            dispatch({ type: "SET_SEARCHING", isSearching: true });
             return;
         }
         // Navigation
-        if (key.upArrow || input === 'k') {
+        if (event.name === "up" || event.name === "k") {
             const newIndex = Math.max(0, pluginsState.selectedIndex - 1);
-            dispatch({ type: 'PLUGINS_SELECT', index: newIndex });
+            dispatch({ type: "PLUGINS_SELECT", index: newIndex });
         }
-        else if (key.downArrow || input === 'j') {
+        else if (event.name === "down" || event.name === "j") {
             const newIndex = Math.min(selectableItems.length - 1, pluginsState.selectedIndex + 1);
-            dispatch({ type: 'PLUGINS_SELECT', index: newIndex });
+            dispatch({ type: "PLUGINS_SELECT", index: newIndex });
         }
         // Collapse/expand marketplace
-        else if ((key.leftArrow || key.rightArrow || input === '<' || input === '>') && selectableItems[pluginsState.selectedIndex]?.marketplace) {
+        else if ((event.name === "left" || event.name === "right" || event.name === "<" || event.name === ">") &&
+            selectableItems[pluginsState.selectedIndex]?.marketplace) {
             const item = selectableItems[pluginsState.selectedIndex];
             if (item?.marketplace) {
-                dispatch({ type: 'PLUGINS_TOGGLE_MARKETPLACE', name: item.marketplace.name });
+                dispatch({
+                    type: "PLUGINS_TOGGLE_MARKETPLACE",
+                    name: item.marketplace.name,
+                });
             }
         }
         // Refresh
-        else if (input === 'r') {
+        else if (event.name === "r") {
             handleRefresh();
         }
-        // New marketplace
-        else if (input === 'n') {
-            handleAddMarketplace();
+        // New marketplace (show instructions)
+        else if (event.name === "n") {
+            handleShowAddMarketplaceInstructions();
+        }
+        // Team config help
+        else if (event.name === "t") {
+            handleShowTeamConfigHelp();
         }
         // Scope-specific toggle shortcuts (u/p/l)
-        else if (input === 'u') {
-            handleScopeToggle('user');
+        else if (event.name === "u") {
+            handleScopeToggle("user");
         }
-        else if (input === 'p') {
-            handleScopeToggle('project');
+        else if (event.name === "p") {
+            handleScopeToggle("project");
         }
-        else if (input === 'l') {
-            handleScopeToggle('local');
+        else if (event.name === "l") {
+            handleScopeToggle("local");
         }
         // Update plugin (Shift+U)
-        else if (input === 'U') {
+        else if (event.name === "U") {
             handleUpdate();
         }
         // Update all
-        else if (input === 'a') {
+        else if (event.name === "a") {
             handleUpdateAll();
         }
         // Delete/uninstall
-        else if (input === 'd') {
+        else if (event.name === "d") {
             handleUninstall();
         }
         // Enter for selection
-        else if (key.return) {
+        else if (event.name === "enter") {
             handleSelect();
         }
     });
     // Handle actions
     const handleRefresh = async () => {
-        progress.show('Refreshing marketplaces...');
+        progress.show("Refreshing cache...");
         try {
             const result = await refreshAllMarketplaces((p) => {
-                progress.show(`Refreshing ${p.name}...`, p.current, p.total);
+                progress.show(`${p.name}`, p.current, p.total);
             });
             clearMarketplaceCache();
             progress.hide();
-            // Build success message with repair info
-            let message = 'Marketplaces refreshed successfully.';
+            // Build message
+            let message = "Cache refreshed.\n\n" +
+                "To update marketplaces from GitHub, run in Claude Code:\n" +
+                "  /plugin marketplace update\n\n" +
+                "Then refresh claudeup again with 'r'.";
             if (result.repair.length > 0) {
                 const totalRepaired = result.repair.reduce((sum, r) => sum + r.repaired.length, 0);
                 message += `\n\nAuto-repaired ${totalRepaired} plugin(s) with missing agents/commands.`;
-                for (const mp of result.repair) {
-                    for (const plugin of mp.repaired) {
-                        const parts = [];
-                        if (plugin.added.agents.length > 0)
-                            parts.push(`${plugin.added.agents.length} agents`);
-                        if (plugin.added.commands.length > 0)
-                            parts.push(`${plugin.added.commands.length} commands`);
-                        if (plugin.added.skills.length > 0)
-                            parts.push(`${plugin.added.skills.length} skills`);
-                        message += `\n  • ${plugin.pluginName}: added ${parts.join(', ')}`;
-                    }
-                }
             }
-            await modal.message('Refreshed', message, 'success');
+            await modal.message("Refreshed", message, "success");
             fetchData();
         }
         catch (error) {
             progress.hide();
-            await modal.message('Error', `Refresh failed: ${error}`, 'error');
+            await modal.message("Error", `Refresh failed: ${error}`, "error");
         }
     };
-    const handleAddMarketplace = async () => {
-        const repo = await modal.input('Add Marketplace', 'GitHub repo (owner/repo):');
-        if (!repo || !repo.trim())
-            return;
-        progress.show('Cloning marketplace...');
-        try {
-            const result = await cloneMarketplace(repo.trim());
-            if (result.success) {
-                const normalizedRepo = repo.trim().replace(/^https:\/\/github\.com\//, '').replace(/\.git$/, '');
-                const marketplace = {
-                    name: result.name,
-                    displayName: result.name,
-                    source: { source: 'github', repo: normalizedRepo },
-                    description: '',
-                    official: false,
-                };
-                if (pluginsState.scope === 'global') {
-                    await addGlobalMarketplace(marketplace);
-                }
-                else {
-                    await addMarketplace(marketplace, state.projectPath);
-                }
-                await addToKnownMarketplaces(result.name, normalizedRepo);
-                clearMarketplaceCache();
-                progress.hide();
-                await modal.message('Added', `${result.name} marketplace added.`, 'success');
-                fetchData();
-            }
-            else {
-                progress.hide();
-                await modal.message('Failed', result.error || 'Clone failed', 'error');
-            }
-        }
-        catch (error) {
-            progress.hide();
-            await modal.message('Error', `Failed to add marketplace: ${error}`, 'error');
-        }
+    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" +
+            "Examples:\n" +
+            "  claude marketplace add MadAppGang/claude-code\n" +
+            "  claude 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");
+    };
+    const handleShowTeamConfigHelp = async () => {
+        const helpText = "TEAM CONFIGURATION FOR MARKETPLACES\n\n" +
+            "To configure marketplaces for your entire team:\n\n" +
+            "1. Add to .claude/settings.json (committed to git):\n\n" +
+            "   {\n" +
+            '     "extraKnownMarketplaces": {\n' +
+            '       "company-tools": {\n' +
+            '         "source": {\n' +
+            '           "source": "github",\n' +
+            '           "repo": "your-org/claude-plugins"\n' +
+            "         }\n" +
+            "       }\n" +
+            "     },\n" +
+            '     "enabledPlugins": {\n' +
+            '       "code-formatter@company-tools": true\n' +
+            "     }\n" +
+            "   }\n\n" +
+            "2. Team members get prompted to install when they trust the folder\n\n" +
+            "3. Marketplaces are GLOBAL ONLY (managed by Claude Code)\n" +
+            "   - Not project-specific\n" +
+            "   - All team members share the same marketplace cache\n\n" +
+            "NOTE: Individual plugin enablement is still project-specific.\n" +
+            'Use "Project" scope in claudeup to enable for the team.';
+        await modal.message("Team Configuration", helpText, "info");
     };
     /**
      * Collect environment variables required by a plugin's MCP servers
@@ -304,14 +311,14 @@ export function PluginsScreen() {
                 return true; // No env vars needed
             // Get existing env vars
             const existingEnvVars = await getMcpEnvVars(state.projectPath);
-            const missingVars = requirements.filter(req => !existingEnvVars[req.name] && !process.env[req.name]);
+            const missingVars = requirements.filter((req) => !existingEnvVars[req.name] && !process.env[req.name]);
             if (missingVars.length === 0)
                 return true; // All vars already configured
             // Ask user if they want to configure MCP server env vars now
-            const serverNames = [...new Set(missingVars.map(v => v.serverName))];
-            const wantToConfigure = await modal.confirm('Configure MCP Servers?', `This plugin includes MCP servers (${serverNames.join(', ')}) that need ${missingVars.length} environment variable(s).\n\nConfigure now?`);
+            const serverNames = [...new Set(missingVars.map((v) => v.serverName))];
+            const wantToConfigure = await modal.confirm("Configure MCP Servers?", `This plugin includes MCP servers (${serverNames.join(", ")}) that need ${missingVars.length} environment variable(s).\n\nConfigure now?`);
             if (!wantToConfigure) {
-                await modal.message('Skipped Configuration', 'You can configure these variables later in the Environment Variables screen (press 4).', 'info');
+                await modal.message("Skipped Configuration", "You can configure these variables later in the Environment Variables screen (press 4).", "info");
                 return true; // Still installed, just not configured
             }
             // Collect each missing env var
@@ -327,10 +334,10 @@ export function PluginsScreen() {
                     }
                 }
                 // Prompt for value
-                const value = await modal.input(`Configure ${req.serverName}`, `${req.label} (required):`, '');
+                const value = await modal.input(`Configure ${req.serverName}`, `${req.label} (required):`, "");
                 if (value === null) {
                     // User cancelled
-                    await modal.message('Configuration Incomplete', `Skipped remaining configuration.\nYou can configure these later in Environment Variables (press 4).`, 'info');
+                    await modal.message("Configuration Incomplete", `Skipped remaining configuration.\nYou can configure these later in Environment Variables (press 4).`, "info");
                     return true; // Still installed
                 }
                 if (value) {
@@ -340,7 +347,7 @@ export function PluginsScreen() {
             return true;
         }
         catch (error) {
-            console.error('Error collecting plugin env vars:', error);
+            console.error("Error collecting plugin env vars:", error);
             return true; // Don't block installation on config errors
         }
     };
@@ -348,72 +355,44 @@ export function PluginsScreen() {
         const item = selectableItems[pluginsState.selectedIndex];
         if (!item)
             return;
-        if (item.type === 'category' && item.marketplace) {
+        if (item.type === "category" && item.marketplace) {
             const mp = item.marketplace;
-            const isGlobal = pluginsState.scope === 'global';
             if (item.marketplaceEnabled) {
                 const isCollapsed = pluginsState.collapsedMarketplaces.has(mp.name);
                 // If collapsed, expand first (even if no plugins - they might load)
                 if (isCollapsed) {
-                    dispatch({ type: 'PLUGINS_TOGGLE_MARKETPLACE', name: mp.name });
+                    dispatch({ type: "PLUGINS_TOGGLE_MARKETPLACE", name: mp.name });
                 }
                 else if (item.pluginCount && item.pluginCount > 0) {
                     // If expanded with plugins, collapse
-                    dispatch({ type: 'PLUGINS_TOGGLE_MARKETPLACE', name: mp.name });
+                    dispatch({ type: "PLUGINS_TOGGLE_MARKETPLACE", name: mp.name });
                 }
                 else {
-                    // If expanded with no plugins, offer to remove
-                    const confirmed = await modal.confirm(`Remove ${mp.displayName}?`, 'Plugins from this marketplace will no longer be available.');
-                    if (confirmed) {
-                        modal.loading(`Removing ${mp.displayName}...`);
-                        try {
-                            if (isGlobal) {
-                                await removeGlobalMarketplace(mp.name);
-                            }
-                            else {
-                                await removeMarketplace(mp.name, state.projectPath);
-                            }
-                            await deleteMarketplace(mp.name);
-                            await removeFromKnownMarketplaces(mp.name);
-                            clearMarketplaceCache();
-                            modal.hideModal();
-                            await modal.message('Removed', `${mp.displayName} removed.`, 'success');
-                            fetchData();
-                        }
-                        catch (error) {
-                            modal.hideModal();
-                            await modal.message('Error', `Failed to remove: ${error}`, 'error');
-                        }
-                    }
+                    // If expanded with no plugins, show removal instructions
+                    await modal.message(`Remove ${mp.displayName}?`, `To remove this marketplace, run in Claude Code:\n\n` +
+                        `  /plugin marketplace remove ${mp.name}\n\n` +
+                        `After removing, refresh claudeup with 'r' to update the display.`, "info");
                 }
             }
             else {
-                // Add marketplace
-                modal.loading(`Adding ${mp.displayName}...`);
-                try {
-                    if (isGlobal) {
-                        await addGlobalMarketplace(mp);
-                    }
-                    else {
-                        await addMarketplace(mp, state.projectPath);
-                    }
-                    modal.hideModal();
-                    fetchData();
-                }
-                catch (error) {
-                    modal.hideModal();
-                    await modal.message('Error', `Failed to add: ${error}`, 'error');
-                }
+                // 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` +
+                    `Auto-update is enabled by default.\n\n` +
+                    `After adding, refresh claudeup with 'r' to see it.`, "info");
             }
         }
-        else if (item.type === 'plugin' && item.plugin) {
+        else if (item.type === "plugin" && item.plugin) {
             const plugin = item.plugin;
-            const latestVersion = plugin.version || '0.0.0';
+            const latestVersion = plugin.version || "0.0.0";
             // Build scope options with status info
             const buildScopeLabel = (name, scope, desc) => {
                 const installed = scope?.enabled;
                 const ver = scope?.version;
-                const hasUpdate = ver && latestVersion && ver !== latestVersion && latestVersion !== '0.0.0';
+                const hasUpdate = ver &&
+                    latestVersion &&
+                    ver !== latestVersion &&
+                    latestVersion !== "0.0.0";
                 let label = installed ? `● ${name}` : `○ ${name}`;
                 label += ` (${desc})`;
                 if (ver)
@@ -423,47 +402,65 @@ export function PluginsScreen() {
                 return label;
             };
             const scopeOptions = [
-                { label: buildScopeLabel('User', plugin.userScope, 'global'), value: 'user' },
-                { label: buildScopeLabel('Project', plugin.projectScope, 'team'), value: 'project' },
-                { label: buildScopeLabel('Local', plugin.localScope, 'private'), value: 'local' },
+                {
+                    label: buildScopeLabel("User", plugin.userScope, "global"),
+                    value: "user",
+                },
+                {
+                    label: buildScopeLabel("Project", plugin.projectScope, "team"),
+                    value: "project",
+                },
+                {
+                    label: buildScopeLabel("Local", plugin.localScope, "private"),
+                    value: "local",
+                },
             ];
             const scopeValue = await modal.select(plugin.name, `Select scope to toggle:`, scopeOptions);
             if (scopeValue === null)
                 return; // Cancelled
             // Determine action based on selected scope's current state
-            const selectedScope = scopeValue === 'user' ? plugin.userScope :
-                scopeValue === 'project' ? plugin.projectScope :
-                    plugin.localScope;
+            const selectedScope = scopeValue === "user"
+                ? plugin.userScope
+                : scopeValue === "project"
+                    ? plugin.projectScope
+                    : plugin.localScope;
             const isInstalledInScope = selectedScope?.enabled;
             const installedVersion = selectedScope?.version;
-            const scopeLabel = scopeValue === 'user' ? 'User' : scopeValue === 'project' ? 'Project' : 'Local';
+            const scopeLabel = scopeValue === "user"
+                ? "User"
+                : scopeValue === "project"
+                    ? "Project"
+                    : "Local";
             // Check if this scope has an update available
-            const hasUpdateInScope = isInstalledInScope && installedVersion &&
-                latestVersion !== '0.0.0' &&
+            const hasUpdateInScope = isInstalledInScope &&
+                installedVersion &&
+                latestVersion !== "0.0.0" &&
                 installedVersion !== latestVersion;
             // Determine action: update if available, otherwise toggle
             let action;
             if (isInstalledInScope && hasUpdateInScope) {
-                action = 'update';
+                action = "update";
             }
             else if (isInstalledInScope) {
-                action = 'uninstall';
+                action = "uninstall";
             }
             else {
-                action = 'install';
+                action = "install";
             }
-            const actionLabel = action === 'update' ? `Updating ${scopeLabel}` :
-                action === 'install' ? `Installing to ${scopeLabel}` :
-                    `Uninstalling from ${scopeLabel}`;
+            const actionLabel = action === "update"
+                ? `Updating ${scopeLabel}`
+                : action === "install"
+                    ? `Installing to ${scopeLabel}`
+                    : `Uninstalling from ${scopeLabel}`;
             modal.loading(`${actionLabel}...`);
             try {
-                if (action === 'uninstall') {
+                if (action === "uninstall") {
                     // Uninstall from this scope
-                    if (scopeValue === 'user') {
+                    if (scopeValue === "user") {
                         await enableGlobalPlugin(plugin.id, false);
                         await removeGlobalInstalledPluginVersion(plugin.id);
                     }
-                    else if (scopeValue === 'project') {
+                    else if (scopeValue === "project") {
                         await enablePlugin(plugin.id, false, state.projectPath);
                         await removeInstalledPluginVersion(plugin.id, state.projectPath);
                     }
@@ -474,11 +471,11 @@ export function PluginsScreen() {
                 }
                 else {
                     // Install or update (both save the latest version)
-                    if (scopeValue === 'user') {
+                    if (scopeValue === "user") {
                         await enableGlobalPlugin(plugin.id, true);
                         await saveGlobalInstalledPluginVersion(plugin.id, latestVersion);
                     }
-                    else if (scopeValue === 'project') {
+                    else if (scopeValue === "project") {
                         await enablePlugin(plugin.id, true, state.projectPath);
                         await saveInstalledPluginVersion(plugin.id, latestVersion, state.projectPath);
                     }
@@ -487,31 +484,31 @@ export function PluginsScreen() {
                         await saveLocalInstalledPluginVersion(plugin.id, latestVersion, state.projectPath);
                     }
                     // On fresh install, prompt for MCP server env vars if needed
-                    if (action === 'install') {
+                    if (action === "install") {
                         modal.hideModal();
                         await collectPluginEnvVars(plugin.name, plugin.marketplace);
                     }
                 }
-                if (action !== 'install') {
+                if (action !== "install") {
                     modal.hideModal();
                 }
                 fetchData();
             }
             catch (error) {
                 modal.hideModal();
-                await modal.message('Error', `Failed: ${error}`, 'error');
+                await modal.message("Error", `Failed: ${error}`, "error");
             }
         }
     };
     const handleUpdate = async () => {
         const item = selectableItems[pluginsState.selectedIndex];
-        if (!item || item.type !== 'plugin' || !item.plugin?.hasUpdate)
+        if (!item || item.type !== "plugin" || !item.plugin?.hasUpdate)
             return;
         const plugin = item.plugin;
-        const isGlobal = pluginsState.scope === 'global';
+        const isGlobal = pluginsState.scope === "global";
         modal.loading(`Updating ${plugin.name}...`);
         try {
-            const versionToSave = plugin.version || '0.0.0';
+            const versionToSave = plugin.version || "0.0.0";
             if (isGlobal) {
                 await saveGlobalInstalledPluginVersion(plugin.id, versionToSave);
             }
@@ -523,20 +520,20 @@ export function PluginsScreen() {
         }
         catch (error) {
             modal.hideModal();
-            await modal.message('Error', `Failed to update: ${error}`, 'error');
+            await modal.message("Error", `Failed to update: ${error}`, "error");
         }
     };
     const handleUpdateAll = async () => {
-        if (pluginsState.plugins.status !== 'success')
+        if (pluginsState.plugins.status !== "success")
             return;
         const updatable = pluginsState.plugins.data.filter((p) => p.hasUpdate);
         if (updatable.length === 0)
             return;
-        const isGlobal = pluginsState.scope === 'global';
+        const isGlobal = pluginsState.scope === "global";
         modal.loading(`Updating ${updatable.length} plugin(s)...`);
         try {
             for (const plugin of updatable) {
-                const versionToSave = plugin.version || '0.0.0';
+                const versionToSave = plugin.version || "0.0.0";
                 if (isGlobal) {
                     await saveGlobalInstalledPluginVersion(plugin.id, versionToSave);
                 }
@@ -549,50 +546,55 @@ export function PluginsScreen() {
         }
         catch (error) {
             modal.hideModal();
-            await modal.message('Error', `Failed to update: ${error}`, 'error');
+            await modal.message("Error", `Failed to update: ${error}`, "error");
         }
     };
     // Scope-specific toggle (install if not installed, uninstall if installed)
     const handleScopeToggle = async (scope) => {
         const item = selectableItems[pluginsState.selectedIndex];
-        if (!item || item.type !== 'plugin' || !item.plugin)
+        if (!item || item.type !== "plugin" || !item.plugin)
             return;
         const plugin = item.plugin;
-        const latestVersion = plugin.version || '0.0.0';
-        const scopeLabel = scope === 'user' ? 'User' : scope === 'project' ? 'Project' : 'Local';
+        const latestVersion = plugin.version || "0.0.0";
+        const scopeLabel = scope === "user" ? "User" : scope === "project" ? "Project" : "Local";
         // Check if installed in this scope
-        const scopeData = scope === 'user' ? plugin.userScope :
-            scope === 'project' ? plugin.projectScope :
-                plugin.localScope;
+        const scopeData = scope === "user"
+            ? plugin.userScope
+            : scope === "project"
+                ? plugin.projectScope
+                : plugin.localScope;
         const isInstalledInScope = scopeData?.enabled;
         const installedVersion = scopeData?.version;
         // Check if this scope has an update available
-        const hasUpdateInScope = isInstalledInScope && installedVersion &&
-            latestVersion !== '0.0.0' &&
+        const hasUpdateInScope = isInstalledInScope &&
+            installedVersion &&
+            latestVersion !== "0.0.0" &&
             installedVersion !== latestVersion;
         // Determine action: update if available, otherwise toggle install/uninstall
         let action;
         if (isInstalledInScope && hasUpdateInScope) {
-            action = 'update';
+            action = "update";
         }
         else if (isInstalledInScope) {
-            action = 'uninstall';
+            action = "uninstall";
         }
         else {
-            action = 'install';
+            action = "install";
         }
-        const actionLabel = action === 'update' ? `Updating ${scopeLabel}` :
-            action === 'install' ? `Installing to ${scopeLabel}` :
-                `Uninstalling from ${scopeLabel}`;
+        const actionLabel = action === "update"
+            ? `Updating ${scopeLabel}`
+            : action === "install"
+                ? `Installing to ${scopeLabel}`
+                : `Uninstalling from ${scopeLabel}`;
         modal.loading(`${actionLabel}...`);
         try {
-            if (action === 'uninstall') {
+            if (action === "uninstall") {
                 // Uninstall from this scope
-                if (scope === 'user') {
+                if (scope === "user") {
                     await enableGlobalPlugin(plugin.id, false);
                     await removeGlobalInstalledPluginVersion(plugin.id);
                 }
-                else if (scope === 'project') {
+                else if (scope === "project") {
                     await enablePlugin(plugin.id, false, state.projectPath);
                     await removeInstalledPluginVersion(plugin.id, state.projectPath);
                 }
@@ -603,11 +605,11 @@ export function PluginsScreen() {
             }
             else {
                 // Install or update to this scope (both save the latest version)
-                if (scope === 'user') {
+                if (scope === "user") {
                     await enableGlobalPlugin(plugin.id, true);
                     await saveGlobalInstalledPluginVersion(plugin.id, latestVersion);
                 }
-                else if (scope === 'project') {
+                else if (scope === "project") {
                     await enablePlugin(plugin.id, true, state.projectPath);
                     await saveInstalledPluginVersion(plugin.id, latestVersion, state.projectPath);
                 }
@@ -616,42 +618,48 @@ export function PluginsScreen() {
                     await saveLocalInstalledPluginVersion(plugin.id, latestVersion, state.projectPath);
                 }
                 // On fresh install, prompt for MCP server env vars if needed
-                if (action === 'install') {
+                if (action === "install") {
                     modal.hideModal();
                     await collectPluginEnvVars(plugin.name, plugin.marketplace);
                 }
             }
-            if (action !== 'install') {
+            if (action !== "install") {
                 modal.hideModal();
             }
             fetchData();
         }
         catch (error) {
             modal.hideModal();
-            await modal.message('Error', `Failed: ${error}`, 'error');
+            await modal.message("Error", `Failed: ${error}`, "error");
         }
     };
     const handleUninstall = async () => {
         const item = selectableItems[pluginsState.selectedIndex];
-        if (!item || item.type !== 'plugin' || !item.plugin)
+        if (!item || item.type !== "plugin" || !item.plugin)
             return;
         const plugin = item.plugin;
         // Build list of scopes where plugin is installed
         const installedScopes = [];
         if (plugin.userScope?.enabled) {
-            const ver = plugin.userScope.version ? ` v${plugin.userScope.version}` : '';
-            installedScopes.push({ label: `User (global)${ver}`, value: 'user' });
+            const ver = plugin.userScope.version
+                ? ` v${plugin.userScope.version}`
+                : "";
+            installedScopes.push({ label: `User (global)${ver}`, value: "user" });
         }
         if (plugin.projectScope?.enabled) {
-            const ver = plugin.projectScope.version ? ` v${plugin.projectScope.version}` : '';
-            installedScopes.push({ label: `Project${ver}`, value: 'project' });
+            const ver = plugin.projectScope.version
+                ? ` v${plugin.projectScope.version}`
+                : "";
+            installedScopes.push({ label: `Project${ver}`, value: "project" });
         }
         if (plugin.localScope?.enabled) {
-            const ver = plugin.localScope.version ? ` v${plugin.localScope.version}` : '';
-            installedScopes.push({ label: `Local${ver}`, value: 'local' });
+            const ver = plugin.localScope.version
+                ? ` v${plugin.localScope.version}`
+                : "";
+            installedScopes.push({ label: `Local${ver}`, value: "local" });
         }
         if (installedScopes.length === 0) {
-            await modal.message('Not Installed', `${plugin.name} is not installed in any scope.`, 'info');
+            await modal.message("Not Installed", `${plugin.name} is not installed in any scope.`, "info");
             return;
         }
         const scopeValue = await modal.select(`Uninstall ${plugin.name}`, `Installed in ${installedScopes.length} scope(s):`, installedScopes);
@@ -659,11 +667,11 @@ export function PluginsScreen() {
             return; // Cancelled
         modal.loading(`Uninstalling ${plugin.name}...`);
         try {
-            if (scopeValue === 'user') {
+            if (scopeValue === "user") {
                 await enableGlobalPlugin(plugin.id, false);
                 await removeGlobalInstalledPluginVersion(plugin.id);
             }
-            else if (scopeValue === 'project') {
+            else if (scopeValue === "project") {
                 await enablePlugin(plugin.id, false, state.projectPath);
                 await removeInstalledPluginVersion(plugin.id, state.projectPath);
             }
@@ -677,66 +685,70 @@ export function PluginsScreen() {
         }
         catch (error) {
             modal.hideModal();
-            await modal.message('Error', `Failed to uninstall: ${error}`, 'error');
+            await modal.message("Error", `Failed to uninstall: ${error}`, "error");
         }
     };
     // Render loading state
-    if (pluginsState.marketplaces.status === 'loading' || pluginsState.plugins.status === 'loading') {
-        return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: "#7e57c2", bold: true, children: "claudeup Plugins" }), _jsx(Text, { color: "gray", children: "Loading..." })] }));
+    if (pluginsState.marketplaces.status === "loading" ||
+        pluginsState.plugins.status === "loading") {
+        return (_jsxs("box", { flexDirection: "column", paddingLeft: 1, paddingRight: 1, children: [_jsx("text", { fg: "#7e57c2", children: _jsx("strong", { children: "claudeup Plugins" }) }), _jsx("text", { fg: "gray", children: "Loading..." })] }));
     }
     // Render error state
-    if (pluginsState.marketplaces.status === 'error' || pluginsState.plugins.status === 'error') {
-        return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: "#7e57c2", bold: true, children: "claudeup Plugins" }), _jsx(Text, { color: "red", children: "Error loading data" })] }));
+    if (pluginsState.marketplaces.status === "error" ||
+        pluginsState.plugins.status === "error") {
+        return (_jsxs("box", { flexDirection: "column", paddingLeft: 1, paddingRight: 1, children: [_jsx("text", { fg: "#7e57c2", children: _jsx("strong", { children: "claudeup Plugins" }) }), _jsx("text", { fg: "red", children: "Error loading data" })] }));
     }
     // Get selected item for detail panel
     const selectedItem = selectableItems[pluginsState.selectedIndex];
     // Render item with fuzzy highlight support
     const renderListItem = (item, _idx, isSelected) => {
-        if (item.type === 'category' && item.marketplace) {
+        if (item.type === "category" && item.marketplace) {
             const mp = item.marketplace;
             // Differentiate marketplace types with appropriate badges
-            let statusText = '';
-            let statusColor = 'green';
+            let statusText = "";
+            let statusColor = "green";
             if (item.marketplaceEnabled) {
-                if (mp.name === 'claude-plugins-official') {
-                    statusText = '★ Official';
-                    statusColor = 'yellow';
+                if (mp.name === "claude-plugins-official") {
+                    statusText = "★ Official";
+                    statusColor = "yellow";
                 }
-                else if (mp.name === 'claude-code-plugins') {
-                    statusText = '⚠ Deprecated';
-                    statusColor = 'gray';
+                else if (mp.name === "claude-code-plugins") {
+                    statusText = "⚠ Deprecated";
+                    statusColor = "gray";
                 }
                 else if (mp.official) {
-                    statusText = '★ Official';
-                    statusColor = 'yellow';
+                    statusText = "★ Official";
+                    statusColor = "yellow";
                 }
                 else {
-                    statusText = '✓ Added';
-                    statusColor = 'green';
+                    statusText = "✓ Added";
+                    statusColor = "green";
                 }
             }
             if (isSelected) {
-                const arrow = item.isExpanded ? '▼' : '▶';
-                const count = item.pluginCount !== undefined && item.pluginCount > 0 ? ` (${item.pluginCount})` : '';
-                return (_jsx(Text, { backgroundColor: "magenta", color: "white", bold: true, children: ` ${arrow} ${mp.displayName}${count} ` }));
+                const arrow = item.isExpanded ? "▼" : "▶";
+                const count = item.pluginCount !== undefined && item.pluginCount > 0
+                    ? ` (${item.pluginCount})`
+                    : "";
+                return (_jsx("text", { bg: "magenta", fg: "white", children: _jsxs("strong", { children: [" ", arrow, " ", mp.displayName, count, " "] }) }));
             }
             return (_jsx(CategoryHeader, { title: mp.displayName, expanded: item.isExpanded, count: item.pluginCount, status: statusText, statusColor: statusColor }));
         }
-        if (item.type === 'plugin' && item.plugin) {
+        if (item.type === "plugin" && item.plugin) {
             const plugin = item.plugin;
-            let statusIcon = '○';
-            let statusColor = 'gray';
+            let statusIcon = "○";
+            let statusColor = "gray";
             if (plugin.enabled) {
-                statusIcon = '●';
-                statusColor = 'green';
+                statusIcon = "●";
+                statusColor = "green";
             }
             else if (plugin.installedVersion) {
-                statusIcon = '●';
-                statusColor = 'yellow';
+                statusIcon = "●";
+                statusColor = "yellow";
             }
             // Build version string
-            let versionStr = '';
-            if (plugin.installedVersion && plugin.installedVersion !== '0.0.0') {
+            let versionStr = "";
+            if (plugin.installedVersion && plugin.installedVersion !== "0.0.0") {
                 versionStr = ` v${plugin.installedVersion}`;
                 if (plugin.hasUpdate && plugin.version) {
                     versionStr += ` → v${plugin.version}`;
@@ -747,52 +759,52 @@ export function PluginsScreen() {
             const segments = matches ? highlightMatches(plugin.name, matches) : null;
             if (isSelected) {
                 const displayText = `   ${statusIcon} ${plugin.name}${versionStr} `;
-                return (_jsx(Text, { backgroundColor: "magenta", color: "white", wrap: "truncate", children: displayText }));
+                return (_jsx("text", { bg: "magenta", fg: "white", children: displayText }));
             }
             // For non-selected, render with colors
             const displayName = segments
-                ? segments.map(seg => seg.text).join('')
+                ? segments.map((seg) => seg.text).join("")
                 : plugin.name;
-            return (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: statusColor, children: ['   ', statusIcon, " "] }), _jsx(Text, { children: displayName }), _jsx(Text, { color: plugin.hasUpdate ? 'yellow' : 'gray', children: versionStr })] }));
+            return (_jsxs("text", { children: [_jsxs("span", { fg: statusColor, children: ["   ", statusIcon, " "] }), _jsx("span", { children: displayName }), _jsx("span", { fg: plugin.hasUpdate ? "yellow" : "gray", children: versionStr })] }));
         }
-        return _jsx(Text, { color: "gray", children: item.label });
+        return _jsx("text", { fg: "gray", children: item.label });
     };
     // Render detail content - compact to fit in available space
     const renderDetail = () => {
         if (!selectedItem) {
-            return _jsx(Text, { color: "gray", children: "Select an item" });
+            return _jsx("text", { fg: "gray", children: "Select an item" });
         }
-        if (selectedItem.type === 'category' && selectedItem.marketplace) {
+        if (selectedItem.type === "category" && selectedItem.marketplace) {
             const mp = selectedItem.marketplace;
             const isEnabled = selectedItem.marketplaceEnabled;
             // Get appropriate badge for marketplace type
             const getBadge = () => {
-                if (mp.name === 'claude-plugins-official')
-                    return ' ★';
-                if (mp.name === 'claude-code-plugins')
-                    return ' ⚠';
+                if (mp.name === "claude-plugins-official")
+                    return " ★";
+                if (mp.name === "claude-code-plugins")
+                    return " ⚠";
                 if (mp.official)
-                    return ' ★';
-                return '';
+                    return " ★";
+                return "";
             };
             // Determine action hint based on state
             const isCollapsed = pluginsState.collapsedMarketplaces.has(mp.name);
             const hasPlugins = (selectedItem.pluginCount || 0) > 0;
-            let actionHint = 'Add';
+            let actionHint = "Add";
             if (isEnabled) {
                 if (isCollapsed) {
-                    actionHint = 'Expand';
+                    actionHint = "Expand";
                 }
                 else if (hasPlugins) {
-                    actionHint = 'Collapse';
+                    actionHint = "Collapse";
                 }
                 else {
-                    actionHint = 'Remove';
+                    actionHint = "Remove";
                 }
             }
-            return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, color: "cyan", children: [mp.displayName, getBadge()] }), _jsx(Text, { color: "gray", wrap: "wrap", children: mp.description || 'No description' }), _jsx(Text, { color: isEnabled ? 'green' : 'gray', children: isEnabled ? '● Added' : '○ Not added' }), _jsxs(Text, { color: "blue", wrap: "wrap", children: ["github.com/", mp.source.repo] }), _jsxs(Text, { children: ["Plugins: ", selectedItem.pluginCount || 0] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { backgroundColor: isEnabled ? 'cyan' : 'green', color: "black", children: " Enter " }), _jsxs(Text, { color: "gray", children: [" ", actionHint] })] }), isEnabled && (_jsx(Box, { children: _jsx(Text, { color: "gray", children: "\u2190 \u2192 to expand/collapse" }) }))] }));
+            return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "cyan", children: _jsxs("strong", { children: [mp.displayName, getBadge()] }) }), _jsx("text", { fg: "gray", children: mp.description || "No description" }), _jsx("text", { fg: isEnabled ? "green" : "gray", children: isEnabled ? "● Added" : "○ Not added" }), _jsxs("text", { fg: "blue", children: ["github.com/", mp.source.repo] }), _jsxs("text", { children: ["Plugins: ", selectedItem.pluginCount || 0] }), _jsxs("box", { marginTop: 1, children: [_jsx("text", { bg: isEnabled ? "cyan" : "green", fg: "black", children: " Enter " }), _jsxs("text", { fg: "gray", children: [" ", actionHint] })] }), isEnabled && (_jsx("box", { children: _jsx("text", { fg: "gray", children: "\u2190 \u2192 to expand/collapse" }) }))] }));
         }
-        if (selectedItem.type === 'plugin' && selectedItem.plugin) {
+        if (selectedItem.type === "plugin" && selectedItem.plugin) {
             const plugin = selectedItem.plugin;
             const isInstalled = plugin.enabled || plugin.installedVersion;
             // Build component counts
@@ -809,23 +821,24 @@ export function PluginsScreen() {
                 components.push(`${Object.keys(plugin.lspServers).length} LSP`);
             }
             // Show version only if valid (not null, not 0.0.0)
-            const showVersion = plugin.version && plugin.version !== '0.0.0';
-            const showInstalledVersion = plugin.installedVersion && plugin.installedVersion !== '0.0.0';
-            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { justifyContent: "center", children: _jsx(Text, { backgroundColor: "magenta", color: "white", bold: true, children: ` ${plugin.name}${plugin.hasUpdate ? ' ⬆' : ''} ` }) }), _jsx(Box, { marginTop: 1, children: isInstalled ? (_jsx(Text, { color: plugin.enabled ? 'green' : 'yellow', children: plugin.enabled ? '● Enabled' : '● Disabled' })) : (_jsx(Text, { color: "gray", children: "\u25CB Not installed" })) }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { color: "white", wrap: "wrap", children: plugin.description }) }), showVersion && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "Version  " }), _jsxs(Text, { color: "blue", children: ["v", plugin.version] }), showInstalledVersion && plugin.installedVersion !== plugin.version && _jsxs(Text, { dimColor: true, children: [" (v", plugin.installedVersion, " installed)"] })] })), plugin.category && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "Category " }), _jsx(Text, { color: "magenta", children: plugin.category })] })), plugin.author && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "Author   " }), _jsx(Text, { children: plugin.author.name })] })), components.length > 0 && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "Contains " }), _jsx(Text, { color: "yellow", children: components.join(' · ') })] })), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsx(Text, { bold: true, children: "Scopes:" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { backgroundColor: "cyan", color: "black", children: " u " }), _jsx(Text, { color: plugin.userScope?.enabled ? 'cyan' : 'gray', children: plugin.userScope?.enabled ? ' ● ' : ' ○ ' }), _jsx(Text, { color: "cyan", children: "User" }), _jsx(Text, { dimColor: true, children: " global" }), plugin.userScope?.version && _jsxs(Text, { color: "cyan", children: [" v", plugin.userScope.version] })] }), _jsxs(Box, { children: [_jsx(Text, { backgroundColor: "green", color: "black", children: " p " }), _jsx(Text, { color: plugin.projectScope?.enabled ? 'green' : 'gray', children: plugin.projectScope?.enabled ? ' ● ' : ' ○ ' }), _jsx(Text, { color: "green", children: "Project" }), _jsx(Text, { dimColor: true, children: " team" }), plugin.projectScope?.version && _jsxs(Text, { color: "green", children: [" v", plugin.projectScope.version] })] }), _jsxs(Box, { children: [_jsx(Text, { backgroundColor: "yellow", color: "black", children: " l " }), _jsx(Text, { color: plugin.localScope?.enabled ? 'yellow' : 'gray', children: plugin.localScope?.enabled ? ' ● ' : ' ○ ' }), _jsx(Text, { color: "yellow", children: "Local" }), _jsx(Text, { dimColor: true, children: " private" }), plugin.localScope?.version && _jsxs(Text, { color: "yellow", children: [" v", plugin.localScope.version] })] })] })] }), isInstalled && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [plugin.hasUpdate && (_jsxs(Box, { children: [_jsx(Text, { backgroundColor: "magenta", color: "white", children: " U " }), _jsxs(Text, { children: [" Update to v", plugin.version] })] })), _jsxs(Box, { children: [_jsx(Text, { backgroundColor: "red", color: "white", children: " d " }), _jsx(Text, { children: " Uninstall" })] })] }))] }));
+            const showVersion = plugin.version && plugin.version !== "0.0.0";
+            const showInstalledVersion = plugin.installedVersion && plugin.installedVersion !== "0.0.0";
+            return (_jsxs("box", { flexDirection: "column", children: [_jsx("box", { justifyContent: "center", children: _jsx("text", { bg: "magenta", fg: "white", children: _jsxs("strong", { children: [" ", plugin.name, plugin.hasUpdate ? " ⬆" : "", " "] }) }) }), _jsx("box", { marginTop: 1, children: isInstalled ? (_jsx("text", { fg: plugin.enabled ? "green" : "yellow", children: plugin.enabled ? "● Enabled" : "● Disabled" })) : (_jsx("text", { fg: "gray", children: "\u25CB Not installed" })) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { fg: "white", children: plugin.description }) }), showVersion && (_jsxs("text", { children: [_jsx("span", { children: "Version " }), _jsxs("span", { fg: "blue", children: ["v", plugin.version] }), showInstalledVersion &&
+                                plugin.installedVersion !== plugin.version && (_jsxs("span", { children: [" (v", plugin.installedVersion, " installed)"] }))] })), plugin.category && (_jsxs("text", { children: [_jsx("span", { children: "Category " }), _jsx("span", { fg: "magenta", children: plugin.category })] })), plugin.author && (_jsxs("text", { children: [_jsx("span", { children: "Author " }), _jsx("span", { children: plugin.author.name })] })), components.length > 0 && (_jsxs("text", { children: [_jsx("span", { children: "Contains " }), _jsx("span", { fg: "yellow", children: components.join(" · ") })] })), _jsxs("box", { flexDirection: "column", marginTop: 1, children: [_jsx("text", { children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsx("text", { children: _jsx("strong", { children: "Scopes:" }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsx("span", { bg: "cyan", fg: "black", children: " u " }), _jsx("span", { fg: plugin.userScope?.enabled ? "cyan" : "gray", children: plugin.userScope?.enabled ? " ● " : " ○ " }), _jsx("span", { fg: "cyan", children: "User" }), _jsx("span", { children: " global" }), plugin.userScope?.version && (_jsxs("span", { fg: "cyan", children: [" v", plugin.userScope.version] }))] }), _jsxs("text", { children: [_jsx("span", { bg: "green", fg: "black", children: " p " }), _jsx("span", { fg: plugin.projectScope?.enabled ? "green" : "gray", children: plugin.projectScope?.enabled ? " ● " : " ○ " }), _jsx("span", { fg: "green", children: "Project" }), _jsx("span", { children: " team" }), plugin.projectScope?.version && (_jsxs("span", { fg: "green", children: [" v", plugin.projectScope.version] }))] }), _jsxs("text", { children: [_jsx("span", { bg: "yellow", fg: "black", children: " l " }), _jsx("span", { fg: plugin.localScope?.enabled ? "yellow" : "gray", children: plugin.localScope?.enabled ? " ● " : " ○ " }), _jsx("span", { fg: "yellow", children: "Local" }), _jsx("span", { children: " private" }), plugin.localScope?.version && (_jsxs("span", { fg: "yellow", children: [" v", plugin.localScope.version] }))] })] })] }), isInstalled && (_jsxs("box", { flexDirection: "column", marginTop: 1, children: [plugin.hasUpdate && (_jsxs("box", { children: [_jsx("text", { bg: "magenta", fg: "white", children: " U " }), _jsxs("text", { children: [" Update to v", plugin.version] })] })), _jsxs("box", { children: [_jsx("text", { bg: "red", fg: "white", children: " d " }), _jsx("text", { children: " Uninstall" })] })] }))] }));
         }
         return null;
     };
     const footerHints = isSearchActive
-        ? 'Type to search │ Enter Confirm │ Esc Cancel'
-        : 'u/p/l:scope │ U:update │ a:all │ d:remove │ /:search';
+        ? "Type to search │ Enter Confirm │ Esc Cancel"
+        : "u/p/l:scope │ U:update │ a:all │ d:remove │ n:add │ t:team │ /:search";
     // Calculate status for subtitle
-    const scopeLabel = pluginsState.scope === 'global' ? 'Global' : 'Project';
-    const plugins = pluginsState.plugins.status === 'success' ? pluginsState.plugins.data : [];
-    const installedCount = plugins.filter(p => p.enabled).length;
-    const updateCount = plugins.filter(p => p.hasUpdate).length;
-    const subtitle = `${scopeLabel} │ ${installedCount} installed${updateCount > 0 ? ` │ ${updateCount} updates` : ''}`;
+    const scopeLabel = pluginsState.scope === "global" ? "Global" : "Project";
+    const plugins = pluginsState.plugins.status === "success" ? pluginsState.plugins.data : [];
+    const installedCount = plugins.filter((p) => p.enabled).length;
+    const updateCount = plugins.filter((p) => p.hasUpdate).length;
+    const subtitle = `${scopeLabel} │ ${installedCount} installed${updateCount > 0 ? ` │ ${updateCount} updates` : ""}`;
     // Search placeholder shows status when not searching
-    const searchPlaceholder = `${scopeLabel} │ ${installedCount} installed${updateCount > 0 ? ` │ ${updateCount} ⬆` : ''} │ / to search`;
+    const searchPlaceholder = `${scopeLabel} │ ${installedCount} installed${updateCount > 0 ? ` │ ${updateCount} ⬆` : ""} │ / to search`;
     return (_jsx(ScreenLayout, { title: "claudeup Plugins", subtitle: subtitle, currentScreen: "plugins", search: {
             isActive: isSearchActive,
             query: pluginsState.searchQuery,
@@ -833,4 +846,3 @@ export function PluginsScreen() {
         }, footerHints: footerHints, listPanel: _jsx(ScrollableList, { items: selectableItems, selectedIndex: pluginsState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), detailPanel: renderDetail() }));
 }
 export default PluginsScreen;
-//# sourceMappingURL=PluginsScreen.js.map