claudeup 0.6.2 → 1.0.0

package/dist/ui/screens/PluginsScreen.js

@@ -0,0 +1,747 @@
+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, } from '../../services/claude-settings.js';
+import { cloneMarketplace, deleteMarketplace, addToKnownMarketplaces, removeFromKnownMarketplaces, } from '../../services/local-marketplace.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;
+    // Fetch data (always fetches all scopes)
+    const fetchData = useCallback(async () => {
+        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',
+                marketplaces: allMarketplaces,
+                plugins: pluginData,
+            });
+        }
+        catch (error) {
+            dispatch({
+                type: 'PLUGINS_DATA_ERROR',
+                error: error instanceof Error ? error : new Error(String(error)),
+            });
+        }
+    }, [dispatch, state.projectPath]);
+    // Load data on mount or when dataRefreshVersion changes
+    useEffect(() => {
+        fetchData();
+    }, [fetchData, state.dataRefreshVersion]);
+    // Build list items (categories + plugins)
+    const allItems = useMemo(() => {
+        if (pluginsState.marketplaces.status !== 'success' || pluginsState.plugins.status !== 'success') {
+            return [];
+        }
+        const marketplaces = pluginsState.marketplaces.data;
+        const plugins = pluginsState.plugins.data;
+        const collapsed = pluginsState.collapsedMarketplaces;
+        const pluginsByMarketplace = new Map();
+        for (const plugin of plugins) {
+            const existing = pluginsByMarketplace.get(plugin.marketplace) || [];
+            existing.push(plugin);
+            pluginsByMarketplace.set(plugin.marketplace, existing);
+        }
+        // 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;
+            return aDeprecated - bDeprecated;
+        });
+        const items = [];
+        for (const marketplace of sortedMarketplaces) {
+            const marketplacePlugins = pluginsByMarketplace.get(marketplace.name) || [];
+            const isCollapsed = collapsed.has(marketplace.name);
+            const isEnabled = marketplacePlugins.length > 0 || marketplace.official;
+            const hasPlugins = marketplacePlugins.length > 0;
+            // Category header (marketplace)
+            items.push({
+                id: `mp:${marketplace.name}`,
+                type: 'category',
+                label: marketplace.displayName,
+                marketplace,
+                marketplaceEnabled: isEnabled,
+                pluginCount: marketplacePlugins.length,
+                isExpanded: !isCollapsed && hasPlugins,
+            });
+            // Plugins under this marketplace (if expanded)
+            if (isEnabled && hasPlugins && !isCollapsed) {
+                for (const plugin of marketplacePlugins) {
+                    items.push({
+                        id: `pl:${plugin.id}`,
+                        type: 'plugin',
+                        label: plugin.name,
+                        plugin,
+                    });
+                }
+            }
+        }
+        return items;
+    }, [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);
+        // Include parent categories for matched plugins
+        const matchedMarketplaces = new Set();
+        for (const result of fuzzyResults) {
+            if (result.item.plugin) {
+                matchedMarketplaces.add(result.item.plugin.marketplace);
+            }
+        }
+        const result = [];
+        let currentMarketplace = null;
+        for (const item of allItems) {
+            if (item.type === 'category' && item.marketplace) {
+                if (matchedMarketplaces.has(item.marketplace.name)) {
+                    result.push(item);
+                    currentMarketplace = item.marketplace.name;
+                }
+                else {
+                    currentMarketplace = null;
+                }
+            }
+            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);
+                    if (matched) {
+                        result.push({ ...item, _matches: matched.matches });
+                    }
+                }
+            }
+        }
+        return result;
+    }, [allItems, pluginsState.searchQuery]);
+    // Only selectable items (plugins, not categories)
+    const selectableItems = useMemo(() => {
+        return filteredItems.filter(item => item.type === 'plugin' || item.type === 'category');
+    }, [filteredItems]);
+    // Keyboard handling
+    useInput((input, key) => {
+        // Handle search mode
+        if (isSearchActive) {
+            if (key.escape) {
+                dispatch({ type: 'SET_SEARCHING', isSearching: false });
+                dispatch({ type: 'PLUGINS_SET_SEARCH', query: '' });
+            }
+            else if (key.return) {
+                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 (input && !key.ctrl && !key.meta) {
+                dispatch({ type: 'PLUGINS_SET_SEARCH', query: pluginsState.searchQuery + input });
+            }
+            return;
+        }
+        if (state.modal)
+            return;
+        // Start search with /
+        if (input === '/') {
+            dispatch({ type: 'SET_SEARCHING', isSearching: true });
+            return;
+        }
+        // Navigation
+        if (key.upArrow || input === 'k') {
+            const newIndex = Math.max(0, pluginsState.selectedIndex - 1);
+            dispatch({ type: 'PLUGINS_SELECT', index: newIndex });
+        }
+        else if (key.downArrow || input === 'j') {
+            const newIndex = Math.min(selectableItems.length - 1, pluginsState.selectedIndex + 1);
+            dispatch({ type: 'PLUGINS_SELECT', index: newIndex });
+        }
+        // Collapse/expand marketplace
+        else if ((key.leftArrow || key.rightArrow || input === '<' || input === '>') && selectableItems[pluginsState.selectedIndex]?.marketplace) {
+            const item = selectableItems[pluginsState.selectedIndex];
+            if (item?.marketplace) {
+                dispatch({ type: 'PLUGINS_TOGGLE_MARKETPLACE', name: item.marketplace.name });
+            }
+        }
+        // Refresh
+        else if (input === 'r') {
+            handleRefresh();
+        }
+        // New marketplace
+        else if (input === 'n') {
+            handleAddMarketplace();
+        }
+        // Scope-specific toggle shortcuts (u/p/l)
+        else if (input === 'u') {
+            handleScopeToggle('user');
+        }
+        else if (input === 'p') {
+            handleScopeToggle('project');
+        }
+        else if (input === 'l') {
+            handleScopeToggle('local');
+        }
+        // Update plugin (Shift+U)
+        else if (input === 'U') {
+            handleUpdate();
+        }
+        // Update all
+        else if (input === 'a') {
+            handleUpdateAll();
+        }
+        // Delete/uninstall
+        else if (input === 'd') {
+            handleUninstall();
+        }
+        // Enter for selection
+        else if (key.return) {
+            handleSelect();
+        }
+    });
+    // Handle actions
+    const handleRefresh = async () => {
+        progress.show('Refreshing marketplaces...');
+        try {
+            await refreshAllMarketplaces((p) => {
+                progress.show(`Refreshing ${p.name}...`, p.current, p.total);
+            });
+            clearMarketplaceCache();
+            progress.hide();
+            await modal.message('Refreshed', 'Marketplaces refreshed successfully.', 'success');
+            fetchData();
+        }
+        catch (error) {
+            progress.hide();
+            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 handleSelect = async () => {
+        const item = selectableItems[pluginsState.selectedIndex];
+        if (!item)
+            return;
+        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 });
+                }
+                else if (item.pluginCount && item.pluginCount > 0) {
+                    // If expanded with plugins, collapse
+                    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');
+                        }
+                    }
+                }
+            }
+            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');
+                }
+            }
+        }
+        else if (item.type === 'plugin' && item.plugin) {
+            const plugin = item.plugin;
+            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';
+                let label = installed ? `● ${name}` : `○ ${name}`;
+                label += ` (${desc})`;
+                if (ver)
+                    label += ` v${ver}`;
+                if (hasUpdate)
+                    label += ` → v${latestVersion}`;
+                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' },
+            ];
+            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 isInstalledInScope = selectedScope?.enabled;
+            const installedVersion = selectedScope?.version;
+            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' &&
+                installedVersion !== latestVersion;
+            // Determine action: update if available, otherwise toggle
+            let action;
+            if (isInstalledInScope && hasUpdateInScope) {
+                action = 'update';
+            }
+            else if (isInstalledInScope) {
+                action = 'uninstall';
+            }
+            else {
+                action = 'install';
+            }
+            const actionLabel = action === 'update' ? `Updating ${scopeLabel}` :
+                action === 'install' ? `Installing to ${scopeLabel}` :
+                    `Uninstalling from ${scopeLabel}`;
+            modal.loading(`${actionLabel}...`);
+            try {
+                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);
+                    }
+                }
+                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);
+                    }
+                }
+                modal.hideModal();
+                fetchData();
+            }
+            catch (error) {
+                modal.hideModal();
+                await modal.message('Error', `Failed: ${error}`, 'error');
+            }
+        }
+    };
+    const handleUpdate = async () => {
+        const item = selectableItems[pluginsState.selectedIndex];
+        if (!item || item.type !== 'plugin' || !item.plugin?.hasUpdate)
+            return;
+        const plugin = item.plugin;
+        const isGlobal = pluginsState.scope === 'global';
+        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);
+            }
+            modal.hideModal();
+            fetchData();
+        }
+        catch (error) {
+            modal.hideModal();
+            await modal.message('Error', `Failed to update: ${error}`, 'error');
+        }
+    };
+    const handleUpdateAll = async () => {
+        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';
+        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);
+                }
+            }
+            modal.hideModal();
+            fetchData();
+        }
+        catch (error) {
+            modal.hideModal();
+            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)
+            return;
+        const plugin = item.plugin;
+        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 isInstalledInScope = scopeData?.enabled;
+        const installedVersion = scopeData?.version;
+        // Check if this scope has an update available
+        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';
+        }
+        else if (isInstalledInScope) {
+            action = 'uninstall';
+        }
+        else {
+            action = 'install';
+        }
+        const actionLabel = action === 'update' ? `Updating ${scopeLabel}` :
+            action === 'install' ? `Installing to ${scopeLabel}` :
+                `Uninstalling from ${scopeLabel}`;
+        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);
+                }
+            }
+            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);
+                }
+            }
+            modal.hideModal();
+            fetchData();
+        }
+        catch (error) {
+            modal.hideModal();
+            await modal.message('Error', `Failed: ${error}`, 'error');
+        }
+    };
+    const handleUninstall = async () => {
+        const item = selectableItems[pluginsState.selectedIndex];
+        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' });
+        }
+        if (plugin.projectScope?.enabled) {
+            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' });
+        }
+        if (installedScopes.length === 0) {
+            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);
+        if (scopeValue === null)
+            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);
+            }
+            modal.hideModal();
+            fetchData();
+        }
+        catch (error) {
+            modal.hideModal();
+            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..." })] }));
+    }
+    // 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" })] }));
+    }
+    // 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) {
+            const mp = item.marketplace;
+            // Differentiate marketplace types with appropriate badges
+            let statusText = '';
+            let statusColor = 'green';
+            if (item.marketplaceEnabled) {
+                if (mp.name === 'claude-plugins-official') {
+                    statusText = '★ Official';
+                    statusColor = 'yellow';
+                }
+                else if (mp.name === 'claude-code-plugins') {
+                    statusText = '⚠ Deprecated';
+                    statusColor = 'gray';
+                }
+                else if (mp.official) {
+                    statusText = '★ Official';
+                    statusColor = 'yellow';
+                }
+                else {
+                    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} ` }));
+            }
+            return (_jsx(CategoryHeader, { title: mp.displayName, expanded: item.isExpanded, count: item.pluginCount, status: statusText, statusColor: statusColor }));
+        }
+        if (item.type === 'plugin' && item.plugin) {
+            const plugin = item.plugin;
+            let statusIcon = '○';
+            let statusColor = 'gray';
+            if (plugin.enabled) {
+                statusIcon = '●';
+                statusColor = 'green';
+            }
+            else if (plugin.installedVersion) {
+                statusIcon = '●';
+                statusColor = 'yellow';
+            }
+            // Build version string
+            let versionStr = '';
+            if (plugin.installedVersion && plugin.installedVersion !== '0.0.0') {
+                versionStr = ` v${plugin.installedVersion}`;
+                if (plugin.hasUpdate && plugin.version) {
+                    versionStr += ` → v${plugin.version}`;
+                }
+            }
+            // Get fuzzy match highlights if available
+            const matches = item._matches;
+            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 }));
+            }
+            // For non-selected, render with colors
+            const displayName = segments
+                ? 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 _jsx(Text, { color: "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" });
+        }
+        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.official)
+                    return ' ★';
+                return '';
+            };
+            // Determine action hint based on state
+            const isCollapsed = pluginsState.collapsedMarketplaces.has(mp.name);
+            const hasPlugins = (selectedItem.pluginCount || 0) > 0;
+            let actionHint = 'Add';
+            if (isEnabled) {
+                if (isCollapsed) {
+                    actionHint = 'Expand';
+                }
+                else if (hasPlugins) {
+                    actionHint = 'Collapse';
+                }
+                else {
+                    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" }) }))] }));
+        }
+        if (selectedItem.type === 'plugin' && selectedItem.plugin) {
+            const plugin = selectedItem.plugin;
+            const isInstalled = plugin.enabled || plugin.installedVersion;
+            // Build component counts
+            const components = [];
+            if (plugin.agents?.length)
+                components.push(`${plugin.agents.length} agents`);
+            if (plugin.commands?.length)
+                components.push(`${plugin.commands.length} commands`);
+            if (plugin.skills?.length)
+                components.push(`${plugin.skills.length} skills`);
+            if (plugin.mcpServers?.length)
+                components.push(`${plugin.mcpServers.length} MCP`);
+            if (plugin.lspServers && Object.keys(plugin.lspServers).length) {
+                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" })] })] }))] }));
+        }
+        return null;
+    };
+    const footerHints = isSearchActive
+        ? 'Type to search │ Enter Confirm │ Esc Cancel'
+        : 'u/p/l:scope │ U:update │ a:all │ d:remove │ /: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` : ''}`;
+    // Search placeholder shows status when not searching
+    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,
+            placeholder: searchPlaceholder,
+        }, footerHints: footerHints, listPanel: _jsx(ScrollableList, { items: selectableItems, selectedIndex: pluginsState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), detailPanel: renderDetail() }));
+}
+export default PluginsScreen;
+//# sourceMappingURL=PluginsScreen.js.map