@laststance/claude-plugin-dashboard 0.1.1 → 0.2.1

package/dist/app.js

@@ -3,23 +3,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Main App component for Claude Code Plugin Dashboard
  * Interactive TUI to browse and manage Claude Code plugins
  */
-import { useState, useEffect, useReducer } from 'react';
+import { useEffect, useReducer } from 'react';
 import { Box, Text, useInput, useApp } from 'ink';
 import TabBar, { getNextTab } from './components/TabBar.js';
 import KeyHints from './components/KeyHints.js';
 import DiscoverTab from './tabs/DiscoverTab.js';
+import EnabledTab from './tabs/EnabledTab.js';
 import InstalledTab from './tabs/InstalledTab.js';
 import MarketplacesTab from './tabs/MarketplacesTab.js';
 import ErrorsTab from './tabs/ErrorsTab.js';
-import { loadAllPlugins, loadMarketplaces, searchPlugins, sortPlugins, } from './services/pluginService.js';
+import { loadAllPlugins, loadMarketplaces, searchPlugins, searchMarketplaces, sortPlugins, } from './services/pluginService.js';
 import { togglePlugin } from './services/settingsService.js';
 import { installPlugin, uninstallPlugin, } from './services/pluginActionsService.js';
+import { addMarketplace, removeMarketplace, updateMarketplace, } from './services/marketplaceActionsService.js';
+import AddMarketplaceDialog from './components/AddMarketplaceDialog.js';
 import ConfirmDialog from './components/ConfirmDialog.js';
+import HelpOverlay from './components/HelpOverlay.js';
+import packageJson from '../package.json' with { type: 'json' };
 /**
  * Initial application state
  */
-const initialState = {
-    activeTab: 'discover',
+export const initialState = {
+    activeTab: 'enabled',
+    focusZone: 'list',
     plugins: [],
     marketplaces: [],
     errors: [],
@@ -33,16 +39,53 @@ const initialState = {
     operation: 'idle',
     operationPluginId: null,
     confirmUninstall: false,
+    showHelp: false,
+    marketplaceOperation: 'idle',
+    operationMarketplaceId: null,
+    confirmRemoveMarketplace: false,
+    showAddMarketplaceDialog: false,
+    addMarketplaceError: null,
 };
+/**
+ * Get available focus zones for the current tab
+ * Errors tab has no search zone since it doesn't support filtering
+ * @param activeTab - The currently active tab
+ * @returns Array of available focus zones in navigation order
+ */
+export function getAvailableZones(activeTab) {
+    if (activeTab === 'errors') {
+        return ['tabbar', 'list'];
+    }
+    return ['tabbar', 'search', 'list'];
+}
+/**
+ * Get display message for marketplace operation status
+ * @param operation - The marketplace operation type
+ * @param marketplaceId - Optional marketplace identifier
+ * @returns Display message for the operation
+ */
+function getMarketplaceOperationMessage(operation, marketplaceId) {
+    switch (operation) {
+        case 'adding':
+            return 'Adding marketplace...';
+        case 'removing':
+            return `Removing ${marketplaceId}...`;
+        case 'updating':
+            return `Updating ${marketplaceId || 'marketplaces'}...`;
+        default:
+            return '';
+    }
+}
 /**
  * State reducer for application state management
  */
-function appReducer(state, action) {
+export function appReducer(state, action) {
     switch (action.type) {
         case 'SET_TAB':
             return {
                 ...state,
                 activeTab: action.payload,
+                focusZone: 'list',
                 selectedIndex: 0,
                 searchQuery: '',
                 message: null,
@@ -51,6 +94,7 @@ function appReducer(state, action) {
             return {
                 ...state,
                 activeTab: getNextTab(state.activeTab, 'next'),
+                focusZone: 'list',
                 selectedIndex: 0,
                 searchQuery: '',
                 message: null,
@@ -59,10 +103,16 @@ function appReducer(state, action) {
             return {
                 ...state,
                 activeTab: getNextTab(state.activeTab, 'prev'),
+                focusZone: 'list',
                 selectedIndex: 0,
                 searchQuery: '',
                 message: null,
             };
+        case 'SET_FOCUS_ZONE':
+            return {
+                ...state,
+                focusZone: action.payload,
+            };
         case 'SET_PLUGINS':
             return {
                 ...state,
@@ -180,19 +230,83 @@ function appReducer(state, action) {
                 confirmUninstall: false,
                 operationPluginId: null,
             };
+        case 'TOGGLE_HELP':
+            return {
+                ...state,
+                showHelp: !state.showHelp,
+            };
+        case 'SHOW_CONFIRM_REMOVE_MARKETPLACE':
+            return {
+                ...state,
+                confirmRemoveMarketplace: true,
+                operationMarketplaceId: action.payload,
+            };
+        case 'HIDE_CONFIRM_REMOVE_MARKETPLACE':
+            return {
+                ...state,
+                confirmRemoveMarketplace: false,
+                operationMarketplaceId: null,
+            };
+        case 'SHOW_ADD_MARKETPLACE_DIALOG':
+            return {
+                ...state,
+                showAddMarketplaceDialog: true,
+                searchQuery: '', // Reuse searchQuery for dialog input
+                addMarketplaceError: null, // Clear previous error
+            };
+        case 'HIDE_ADD_MARKETPLACE_DIALOG':
+            return {
+                ...state,
+                showAddMarketplaceDialog: false,
+                searchQuery: '',
+                addMarketplaceError: null,
+            };
+        case 'SET_ADD_MARKETPLACE_ERROR':
+            return {
+                ...state,
+                addMarketplaceError: action.payload,
+            };
+        case 'START_MARKETPLACE_OPERATION':
+            return {
+                ...state,
+                marketplaceOperation: action.payload.operation,
+                operationMarketplaceId: action.payload.marketplaceId ?? null,
+                message: getMarketplaceOperationMessage(action.payload.operation, action.payload.marketplaceId),
+            };
+        case 'END_MARKETPLACE_OPERATION':
+            return {
+                ...state,
+                marketplaceOperation: 'idle',
+                operationMarketplaceId: null,
+            };
         default:
             return state;
     }
 }
 /**
- * Get items array for current tab
+ * Get items array for current tab with search filter applied
+ * @param state - Current app state
+ * @returns Filtered array of items for the active tab
+ * @example
+ * getItemsForTab({ activeTab: 'installed', searchQuery: 'su', plugins: [...] })
+ * // => Only installed plugins matching 'su'
  */
-function getItemsForTab(state) {
+export function getItemsForTab(state) {
     switch (state.activeTab) {
+        case 'enabled': {
+            const enabledPlugins = state.plugins.filter((p) => p.isInstalled && p.isEnabled);
+            return state.searchQuery
+                ? searchPlugins(state.searchQuery, enabledPlugins)
+                : enabledPlugins;
+        }
+        case 'installed': {
+            const installedPlugins = state.plugins.filter((p) => p.isInstalled);
+            return state.searchQuery
+                ? searchPlugins(state.searchQuery, installedPlugins)
+                : installedPlugins;
+        }
         case 'discover':
             return getFilteredPlugins(state);
-        case 'installed':
-            return state.plugins.filter((p) => p.isInstalled);
         case 'marketplaces':
             return state.marketplaces;
         case 'errors':
@@ -204,7 +318,7 @@ function getItemsForTab(state) {
 /**
  * Get filtered and sorted plugins for discover tab
  */
-function getFilteredPlugins(state) {
+export function getFilteredPlugins(state) {
     let plugins = state.plugins;
     // Apply search filter
     if (state.searchQuery) {
@@ -220,7 +334,6 @@ function getFilteredPlugins(state) {
 export default function App() {
     const { exit } = useApp();
     const [state, dispatch] = useReducer(appReducer, initialState);
-    const [isSearchMode, setIsSearchMode] = useState(false);
     // Load data on mount
     useEffect(() => {
         try {
@@ -282,13 +395,123 @@ export default function App() {
             });
         }
     }
+    /**
+     * Handle adding a new marketplace
+     * @param source - Marketplace source (e.g., "owner/repo", URL, or local path)
+     */
+    async function handleAddMarketplace(source) {
+        dispatch({
+            type: 'START_MARKETPLACE_OPERATION',
+            payload: { operation: 'adding' },
+        });
+        const result = await addMarketplace(source);
+        dispatch({ type: 'END_MARKETPLACE_OPERATION' });
+        if (result.success) {
+            dispatch({ type: 'HIDE_ADD_MARKETPLACE_DIALOG' });
+            // Reload marketplaces to get fresh state
+            const marketplaces = loadMarketplaces();
+            dispatch({ type: 'SET_MARKETPLACES', payload: marketplaces });
+            // Also reload plugins as new marketplace may have plugins
+            const plugins = loadAllPlugins();
+            dispatch({ type: 'SET_PLUGINS', payload: plugins });
+            // Reset selection to avoid pointing to a different marketplace after re-sort
+            dispatch({ type: 'SET_SELECTED_INDEX', payload: 0 });
+            dispatch({ type: 'SET_MESSAGE', payload: `✅ ${result.message}` });
+        }
+        else {
+            // Keep dialog open and show error inline
+            dispatch({
+                type: 'SET_ADD_MARKETPLACE_ERROR',
+                payload: result.error || result.message,
+            });
+        }
+    }
+    /**
+     * Handle removing a marketplace
+     * @param marketplaceId - Marketplace identifier to remove
+     */
+    async function handleRemoveMarketplace(marketplaceId) {
+        dispatch({
+            type: 'START_MARKETPLACE_OPERATION',
+            payload: { operation: 'removing', marketplaceId },
+        });
+        const result = await removeMarketplace(marketplaceId);
+        dispatch({ type: 'END_MARKETPLACE_OPERATION' });
+        if (result.success) {
+            // Reload marketplaces to get fresh state
+            const marketplaces = loadMarketplaces();
+            dispatch({ type: 'SET_MARKETPLACES', payload: marketplaces });
+            // Also reload plugins as removed marketplace's plugins should be gone
+            const plugins = loadAllPlugins();
+            dispatch({ type: 'SET_PLUGINS', payload: plugins });
+            dispatch({ type: 'SET_MESSAGE', payload: `✅ ${result.message}` });
+            // Reset selection if needed
+            if (state.selectedIndex >= marketplaces.length) {
+                dispatch({
+                    type: 'SET_SELECTED_INDEX',
+                    payload: Math.max(0, marketplaces.length - 1),
+                });
+            }
+        }
+        else {
+            dispatch({
+                type: 'SET_MESSAGE',
+                payload: `❌ ${result.message}${result.error ? `: ${result.error}` : ''}`,
+            });
+        }
+    }
+    /**
+     * Handle updating a marketplace (or all marketplaces)
+     * @param marketplaceId - Optional marketplace identifier. If omitted, updates all.
+     */
+    async function handleUpdateMarketplace(marketplaceId) {
+        dispatch({
+            type: 'START_MARKETPLACE_OPERATION',
+            payload: { operation: 'updating', marketplaceId },
+        });
+        const result = await updateMarketplace(marketplaceId);
+        dispatch({ type: 'END_MARKETPLACE_OPERATION' });
+        if (result.success) {
+            // Reload marketplaces and plugins to get fresh state
+            const marketplaces = loadMarketplaces();
+            dispatch({ type: 'SET_MARKETPLACES', payload: marketplaces });
+            const plugins = loadAllPlugins();
+            dispatch({ type: 'SET_PLUGINS', payload: plugins });
+            // Reset selection to avoid pointing to a different marketplace after re-sort
+            dispatch({ type: 'SET_SELECTED_INDEX', payload: 0 });
+            dispatch({ type: 'SET_MESSAGE', payload: `✅ ${result.message}` });
+        }
+        else {
+            dispatch({
+                type: 'SET_MESSAGE',
+                payload: `❌ ${result.message}${result.error ? `: ${result.error}` : ''}`,
+            });
+        }
+    }
     // Keyboard input handling
     useInput((input, key) => {
-        // Block all input during operations
-        if (state.operation !== 'idle') {
+        // Block all input during operations (plugin or marketplace)
+        if (state.operation !== 'idle' || state.marketplaceOperation !== 'idle') {
+            return;
+        }
+        // Handle help overlay
+        if (state.showHelp) {
+            if (input === 'h' || key.escape) {
+                dispatch({ type: 'TOGGLE_HELP' });
+            }
+            return;
+        }
+        // Exit (q or Ctrl+C) - Global handler, works in all focus zones
+        if (input === 'q' || (key.ctrl && input === 'c')) {
+            exit();
+            return;
+        }
+        // Toggle help (h key)
+        if (input === 'h') {
+            dispatch({ type: 'TOGGLE_HELP' });
             return;
         }
-        // Handle confirmation dialog
+        // Handle plugin uninstall confirmation dialog
         if (state.confirmUninstall && state.operationPluginId) {
             if (input === 'y' || input === 'Y') {
                 dispatch({ type: 'HIDE_CONFIRM_UNINSTALL' });
@@ -302,12 +525,34 @@ export default function App() {
             }
             return;
         }
-        // Search mode input
-        if (isSearchMode) {
-            if (key.escape || key.return) {
-                setIsSearchMode(false);
+        // Handle marketplace remove confirmation dialog
+        if (state.confirmRemoveMarketplace && state.operationMarketplaceId) {
+            if (input === 'y' || input === 'Y') {
+                dispatch({ type: 'HIDE_CONFIRM_REMOVE_MARKETPLACE' });
+                handleRemoveMarketplace(state.operationMarketplaceId);
+                return;
+            }
+            if (input === 'n' || input === 'N' || key.escape) {
+                dispatch({ type: 'HIDE_CONFIRM_REMOVE_MARKETPLACE' });
+                dispatch({ type: 'SET_MESSAGE', payload: 'Remove cancelled' });
+                return;
+            }
+            return;
+        }
+        // Handle add marketplace dialog input
+        if (state.showAddMarketplaceDialog) {
+            // Submit on Enter
+            if (key.return && state.searchQuery.trim()) {
+                handleAddMarketplace(state.searchQuery.trim());
+                return;
+            }
+            // Cancel on Escape
+            if (key.escape) {
+                dispatch({ type: 'HIDE_ADD_MARKETPLACE_DIALOG' });
+                dispatch({ type: 'SET_MESSAGE', payload: 'Add marketplace cancelled' });
                 return;
             }
+            // Backspace
             if (key.backspace || key.delete) {
                 dispatch({
                     type: 'SET_SEARCH_QUERY',
@@ -315,6 +560,7 @@ export default function App() {
                 });
                 return;
             }
+            // Character input
             if (input && input.length === 1 && !key.ctrl && !key.meta) {
                 dispatch({
                     type: 'SET_SEARCH_QUERY',
@@ -324,48 +570,147 @@ export default function App() {
             }
             return;
         }
-        // Emacs-style navigation (Ctrl+P / Ctrl+N)
-        if (key.ctrl && input === 'p') {
-            dispatch({ type: 'MOVE_SELECTION', payload: 'up' });
+        // Search mode input (when focusZone is 'search')
+        if (state.focusZone === 'search') {
+            // Up arrow: move focus to tabbar
+            if (key.upArrow || (key.ctrl && input === 'p')) {
+                dispatch({ type: 'SET_FOCUS_ZONE', payload: 'tabbar' });
+                return;
+            }
+            // Down arrow, Enter, or Escape: move focus to list
+            if (key.escape ||
+                key.return ||
+                key.downArrow ||
+                (key.ctrl && input === 'n')) {
+                dispatch({ type: 'SET_FOCUS_ZONE', payload: 'list' });
+                return;
+            }
+            if (key.backspace || key.delete) {
+                dispatch({
+                    type: 'SET_SEARCH_QUERY',
+                    payload: state.searchQuery.slice(0, -1),
+                });
+                return;
+            }
+            if (input && input.length === 1 && !key.ctrl && !key.meta) {
+                dispatch({
+                    type: 'SET_SEARCH_QUERY',
+                    payload: state.searchQuery + input,
+                });
+                return;
+            }
             return;
         }
-        if (key.ctrl && input === 'n') {
-            dispatch({ type: 'MOVE_SELECTION', payload: 'down' });
+        // TabBar focus zone navigation
+        if (state.focusZone === 'tabbar') {
+            // Down arrow: move to search (or list if no search)
+            if (key.downArrow || (key.ctrl && input === 'n')) {
+                const zones = getAvailableZones(state.activeTab);
+                dispatch({
+                    type: 'SET_FOCUS_ZONE',
+                    payload: zones.includes('search') ? 'search' : 'list',
+                });
+                return;
+            }
+            // Left/Right arrows and Ctrl+B/F: tab switching (only in tabbar)
+            // Keep focus on tabbar after navigation
+            if (key.leftArrow || (key.ctrl && input === 'b')) {
+                dispatch({ type: 'PREV_TAB' });
+                dispatch({ type: 'SET_FOCUS_ZONE', payload: 'tabbar' });
+                return;
+            }
+            if (key.rightArrow || (key.ctrl && input === 'f')) {
+                dispatch({ type: 'NEXT_TAB' });
+                dispatch({ type: 'SET_FOCUS_ZONE', payload: 'tabbar' });
+                return;
+            }
+            // Tab key: next tab (resets focus to list)
+            if (key.tab) {
+                dispatch({ type: 'NEXT_TAB' });
+                return;
+            }
             return;
         }
-        // Tab navigation
-        if (key.leftArrow) {
-            dispatch({ type: 'PREV_TAB' });
+        // List focus zone navigation (default zone)
+        // Up arrow: move up in list or focus search/tabbar at top
+        if (key.upArrow || (key.ctrl && input === 'p')) {
+            if (state.selectedIndex === 0) {
+                // At top of list: move focus to search (or tabbar if no search)
+                const zones = getAvailableZones(state.activeTab);
+                dispatch({
+                    type: 'SET_FOCUS_ZONE',
+                    payload: zones.includes('search') ? 'search' : 'tabbar',
+                });
+            }
+            else {
+                dispatch({ type: 'MOVE_SELECTION', payload: 'up' });
+            }
             return;
         }
-        if (key.rightArrow) {
-            dispatch({ type: 'NEXT_TAB' });
+        // Down arrow: move down in list
+        if (key.downArrow || (key.ctrl && input === 'n')) {
+            dispatch({ type: 'MOVE_SELECTION', payload: 'down' });
             return;
         }
+        // Tab key: next tab (from list zone)
         if (key.tab) {
             dispatch({ type: 'NEXT_TAB' });
             return;
         }
-        // List navigation
-        if (key.upArrow) {
-            dispatch({ type: 'MOVE_SELECTION', payload: 'up' });
+        // Enter search mode (/ key on supported tabs)
+        const searchEnabledTabs = [
+            'enabled',
+            'installed',
+            'discover',
+            'marketplaces',
+        ];
+        if (input === '/' && searchEnabledTabs.includes(state.activeTab)) {
+            dispatch({ type: 'SET_FOCUS_ZONE', payload: 'search' });
             return;
         }
-        if (key.downArrow) {
-            dispatch({ type: 'MOVE_SELECTION', payload: 'down' });
-            return;
-        }
-        // Enter search mode
-        if (input === '/' && state.activeTab === 'discover') {
-            setIsSearchMode(true);
+        // Enter key: Install (non-installed) or Toggle (installed)
+        if (key.return &&
+            (state.activeTab === 'enabled' ||
+                state.activeTab === 'installed' ||
+                state.activeTab === 'discover')) {
+            const items = getItemsForTab(state);
+            const selectedPlugin = items[state.selectedIndex];
+            if (selectedPlugin) {
+                if (!selectedPlugin.isInstalled) {
+                    // Install non-installed plugin
+                    handleInstall(selectedPlugin.id);
+                }
+                else {
+                    // Toggle installed plugin
+                    try {
+                        const newState = togglePlugin(selectedPlugin.id);
+                        dispatch({
+                            type: 'TOGGLE_PLUGIN_ENABLED',
+                            payload: selectedPlugin.id,
+                        });
+                        dispatch({
+                            type: 'SET_MESSAGE',
+                            payload: newState
+                                ? `✅ ${selectedPlugin.name} enabled`
+                                : `❌ ${selectedPlugin.name} disabled`,
+                        });
+                    }
+                    catch (error) {
+                        dispatch({
+                            type: 'SET_MESSAGE',
+                            payload: `Error: ${error instanceof Error ? error.message : 'Unknown error'}`,
+                        });
+                    }
+                }
+            }
             return;
         }
-        // Toggle plugin (Space or Enter)
-        if ((input === ' ' || key.return) &&
-            (state.activeTab === 'discover' || state.activeTab === 'installed')) {
-            const items = state.activeTab === 'installed'
-                ? state.plugins.filter((p) => p.isInstalled)
-                : getFilteredPlugins(state);
+        // Toggle plugin (Space only)
+        if (input === ' ' &&
+            (state.activeTab === 'enabled' ||
+                state.activeTab === 'installed' ||
+                state.activeTab === 'discover')) {
+            const items = getItemsForTab(state);
             const selectedPlugin = items[state.selectedIndex];
             if (selectedPlugin && selectedPlugin.isInstalled) {
                 try {
@@ -419,12 +764,43 @@ export default function App() {
             dispatch({ type: 'SET_SEARCH_QUERY', payload: '' });
             return;
         }
-        // Install (i key) - only on discover/installed tabs
+        // Marketplace-specific key bindings
+        if (state.activeTab === 'marketplaces' && state.focusZone === 'list') {
+            // Add marketplace (a key)
+            if (input === 'a') {
+                dispatch({ type: 'SHOW_ADD_MARKETPLACE_DIALOG' });
+                return;
+            }
+            // Remove marketplace (d key or Backspace)
+            if (input === 'd' || key.backspace || key.delete) {
+                const selectedMarketplace = filteredMarketplaces[state.selectedIndex];
+                if (selectedMarketplace) {
+                    dispatch({
+                        type: 'SHOW_CONFIRM_REMOVE_MARKETPLACE',
+                        payload: selectedMarketplace.id,
+                    });
+                }
+                return;
+            }
+            // Update marketplace (u key)
+            if (input === 'u') {
+                const selectedMarketplace = filteredMarketplaces[state.selectedIndex];
+                if (selectedMarketplace) {
+                    handleUpdateMarketplace(selectedMarketplace.id);
+                }
+                else {
+                    // No marketplace selected, update all
+                    handleUpdateMarketplace();
+                }
+                return;
+            }
+        }
+        // Install (i key) - only on enabled/installed/discover tabs
         if (input === 'i' &&
-            (state.activeTab === 'discover' || state.activeTab === 'installed')) {
-            const items = state.activeTab === 'installed'
-                ? state.plugins.filter((p) => p.isInstalled)
-                : getFilteredPlugins(state);
+            (state.activeTab === 'enabled' ||
+                state.activeTab === 'installed' ||
+                state.activeTab === 'discover')) {
+            const items = getItemsForTab(state);
             const selectedPlugin = items[state.selectedIndex];
             if (selectedPlugin && !selectedPlugin.isInstalled) {
                 handleInstall(selectedPlugin.id);
@@ -437,12 +813,12 @@ export default function App() {
             }
             return;
         }
-        // Uninstall (u key) - only on discover/installed tabs
+        // Uninstall (u key) - only on enabled/installed/discover tabs
         if (input === 'u' &&
-            (state.activeTab === 'discover' || state.activeTab === 'installed')) {
-            const items = state.activeTab === 'installed'
-                ? state.plugins.filter((p) => p.isInstalled)
-                : getFilteredPlugins(state);
+            (state.activeTab === 'enabled' ||
+                state.activeTab === 'installed' ||
+                state.activeTab === 'discover')) {
+            const items = getItemsForTab(state);
             const selectedPlugin = items[state.selectedIndex];
             if (selectedPlugin && selectedPlugin.isInstalled) {
                 dispatch({ type: 'SHOW_CONFIRM_UNINSTALL', payload: selectedPlugin.id });
@@ -452,11 +828,6 @@ export default function App() {
             }
             return;
         }
-        // Exit (q or Ctrl+C)
-        if (input === 'q' || (key.ctrl && input === 'c')) {
-            exit();
-            return;
-        }
     });
     // Loading state
     if (state.loading) {
@@ -468,14 +839,70 @@ export default function App() {
     }
     // Get filtered data for current tab
     const filteredPlugins = getFilteredPlugins(state);
-    const installedPlugins = state.plugins.filter((p) => p.isInstalled);
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsx(Text, { bold: true, color: "magenta", children: "\u26A1 Claude Code Plugin Dashboard" }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { dimColor: true, children: "v0.1.0" })] }), _jsx(TabBar, { activeTab: state.activeTab }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [state.activeTab === 'discover' && (_jsx(DiscoverTab, { plugins: filteredPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, sortBy: state.sortBy, sortOrder: state.sortOrder, isSearchMode: isSearchMode })), state.activeTab === 'installed' && (_jsx(InstalledTab, { plugins: installedPlugins, selectedIndex: state.selectedIndex })), state.activeTab === 'marketplaces' && (_jsx(MarketplacesTab, { marketplaces: state.marketplaces, selectedIndex: state.selectedIndex })), state.activeTab === 'errors' && (_jsx(ErrorsTab, { errors: state.errors, selectedIndex: state.selectedIndex }))] }), state.confirmUninstall && state.operationPluginId && (_jsx(ConfirmDialog, { message: `Uninstall ${state.operationPluginId}?` })), state.message && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: state.message }) })), _jsx(KeyHints, { extraHints: state.activeTab === 'discover' || state.activeTab === 'installed'
-                    ? [
-                        { key: 'i', action: 'install' },
-                        { key: 'u', action: 'uninstall' },
-                        ...(state.activeTab === 'discover'
-                            ? [{ key: 's', action: 'sort' }]
-                            : []),
-                    ]
-                    : undefined })] }));
+    // Apply search filter to enabled plugins
+    const enabledPluginsBase = state.plugins.filter((p) => p.isInstalled && p.isEnabled);
+    const enabledPlugins = state.searchQuery
+        ? searchPlugins(state.searchQuery, enabledPluginsBase)
+        : enabledPluginsBase;
+    // Apply search filter to installed plugins
+    const installedPluginsBase = state.plugins.filter((p) => p.isInstalled);
+    const installedPlugins = state.searchQuery
+        ? searchPlugins(state.searchQuery, installedPluginsBase)
+        : installedPluginsBase;
+    // Apply search filter to marketplaces
+    const filteredMarketplaces = state.searchQuery
+        ? searchMarketplaces(state.searchQuery, state.marketplaces)
+        : state.marketplaces;
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsx(Text, { bold: true, color: "magenta", children: "\u26A1 Claude Code Plugin Dashboard" }), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { dimColor: true, children: ["v", packageJson.version] })] }), _jsx(TabBar, { activeTab: state.activeTab, isFocused: state.focusZone === 'tabbar' }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [state.activeTab === 'enabled' && (_jsx(EnabledTab, { plugins: enabledPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, focusZone: state.focusZone })), state.activeTab === 'installed' && (_jsx(InstalledTab, { plugins: installedPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, focusZone: state.focusZone })), state.activeTab === 'discover' && (_jsx(DiscoverTab, { plugins: filteredPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, sortBy: state.sortBy, sortOrder: state.sortOrder, focusZone: state.focusZone })), state.activeTab === 'marketplaces' && (_jsx(MarketplacesTab, { marketplaces: filteredMarketplaces, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, focusZone: state.focusZone })), state.activeTab === 'errors' && (_jsx(ErrorsTab, { errors: state.errors, selectedIndex: state.selectedIndex }))] }), state.confirmUninstall && state.operationPluginId && (_jsx(ConfirmDialog, { message: `Uninstall ${state.operationPluginId}?` })), state.confirmRemoveMarketplace && state.operationMarketplaceId && (_jsx(ConfirmDialog, { message: `Remove marketplace ${state.operationMarketplaceId}?` })), state.showAddMarketplaceDialog && (_jsx(AddMarketplaceDialog, { value: state.searchQuery, error: state.addMarketplaceError ?? undefined })), _jsx(HelpOverlay, { isVisible: state.showHelp }), state.message && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: state.message }) })), _jsx(KeyHints, { focusZone: state.focusZone, extraHints: (() => {
+                    // Search mode - no extra hints (base hints cover it)
+                    if (state.focusZone === 'search') {
+                        return undefined;
+                    }
+                    // TabBar mode - no extra hints
+                    if (state.focusZone === 'tabbar') {
+                        return undefined;
+                    }
+                    // List mode - add tab-specific hints
+                    // Plugin tabs hints (enabled, installed, discover)
+                    if (state.activeTab === 'enabled' ||
+                        state.activeTab === 'installed' ||
+                        state.activeTab === 'discover') {
+                        const hints = [
+                            { key: '/', action: 'search' },
+                            { key: 'i', action: 'install' },
+                            { key: 'u', action: 'uninstall' },
+                        ];
+                        // Get selected plugin to determine Enter action
+                        const items = state.activeTab === 'enabled'
+                            ? enabledPlugins
+                            : state.activeTab === 'installed'
+                                ? installedPlugins
+                                : filteredPlugins;
+                        const selectedPlugin = items[state.selectedIndex];
+                        // Add contextual Enter hint
+                        if (selectedPlugin) {
+                            if (!selectedPlugin.isInstalled) {
+                                hints.push({ key: 'Enter', action: 'install' });
+                            }
+                            else {
+                                hints.push({ key: 'Enter', action: 'toggle' });
+                            }
+                        }
+                        // Add sort hint for discover tab
+                        if (state.activeTab === 'discover') {
+                            hints.push({ key: 's', action: 'sort' });
+                        }
+                        return hints;
+                    }
+                    // Marketplaces tab hints
+                    if (state.activeTab === 'marketplaces') {
+                        return [
+                            { key: '/', action: 'search' },
+                            { key: 'a', action: 'add' },
+                            { key: 'd', action: 'remove' },
+                            { key: 'u', action: 'update' },
+                        ];
+                    }
+                    return undefined;
+                })() })] }));
 }