@laststance/claude-plugin-dashboard 0.2.3 → 0.3.2

package/dist/app.js

@@ -3,8 +3,11 @@ 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 { useEffect, useReducer } from 'react';
+import { useEffect, useMemo } from 'react';
+import * as os from 'node:os';
+import * as path from 'node:path';
 import { Box, Text, useInput, useApp } from 'ink';
+import { match, P } from 'ts-pattern';
 import TabBar, { getNextTab } from './components/TabBar.js';
 import KeyHints from './components/KeyHints.js';
 import DiscoverTab from './tabs/DiscoverTab.js';
@@ -13,12 +16,21 @@ import InstalledTab from './tabs/InstalledTab.js';
 import MarketplacesTab from './tabs/MarketplacesTab.js';
 import ErrorsTab from './tabs/ErrorsTab.js';
 import { loadAllPlugins, loadMarketplaces, searchPlugins, searchMarketplaces, sortPlugins, } from './services/pluginService.js';
+import { getSkillDetailedInfo, getMarkdownComponentDetailedInfo, } from './services/componentService.js';
+import { flattenComponents } from './components/ComponentList.js';
 import { togglePlugin } from './services/settingsService.js';
-import { installPlugin, uninstallPlugin, } from './services/pluginActionsService.js';
-import { addMarketplace, removeMarketplace, updateMarketplace, } from './services/marketplaceActionsService.js';
+import { installPlugin, uninstallPlugin, updateAllPlugins, } from './services/pluginActionsService.js';
+import { addMarketplace, removeMarketplace, updateMarketplace, toggleAutoUpdate, } from './services/marketplaceActionsService.js';
 import AddMarketplaceDialog from './components/AddMarketplaceDialog.js';
 import ConfirmDialog from './components/ConfirmDialog.js';
 import HelpOverlay from './components/HelpOverlay.js';
+import { useAppDispatch, useAppSelector, 
+// UI actions
+setTab, nextTab, prevTab, setFocusZone, toggleHelp, setSearchQuery, setSort, setMessage, 
+// Plugin actions
+setPlugins, setError, setSelectedIndex, moveSelection, togglePluginEnabled, startOperation, endOperation, showConfirmUninstall, hideConfirmUninstall, showConfirmUpdateAll, hideConfirmUpdateAll, setUpdateProgress, clearUpdateProgress, moveComponentSelection, enterComponentMode, exitComponentMode, 
+// Marketplace actions
+setMarketplaces, startMarketplaceOperation, endMarketplaceOperation, showConfirmRemoveMarketplace, hideConfirmRemoveMarketplace, showAddMarketplaceDialog, hideAddMarketplaceDialog, setAddMarketplaceError, showMarketplaceActionMenu as showMarketplaceActionMenuAction, hideMarketplaceActionMenu, moveActionMenuSelection, } from './store/index.js';
 import packageJson from '../package.json' with { type: 'json' };
 /**
  * Initial application state
@@ -39,12 +51,17 @@ export const initialState = {
     operation: 'idle',
     operationPluginId: null,
     confirmUninstall: false,
+    confirmUpdateAll: false,
+    updateProgress: null,
     showHelp: false,
     marketplaceOperation: 'idle',
     operationMarketplaceId: null,
     confirmRemoveMarketplace: false,
     showAddMarketplaceDialog: false,
     addMarketplaceError: null,
+    showMarketplaceActionMenu: false,
+    actionMenuSelectedIndex: 0,
+    selectedComponentIndex: 0,
 };
 /**
  * Get available focus zones for the current tab
@@ -65,16 +82,12 @@ export function getAvailableZones(activeTab) {
  * @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 '';
-    }
+    return match(operation)
+        .with('adding', () => 'Adding marketplace...')
+        .with('removing', () => `Removing ${marketplaceId}...`)
+        .with('updating', () => `Updating ${marketplaceId || 'marketplaces'}...`)
+        .with('idle', () => '')
+        .exhaustive();
 }
 /**
  * State reducer for application state management
@@ -89,6 +102,8 @@ export function appReducer(state, action) {
                 selectedIndex: 0,
                 searchQuery: '',
                 message: null,
+                showMarketplaceActionMenu: false,
+                actionMenuSelectedIndex: 0,
             };
         case 'NEXT_TAB':
             return {
@@ -98,6 +113,8 @@ export function appReducer(state, action) {
                 selectedIndex: 0,
                 searchQuery: '',
                 message: null,
+                showMarketplaceActionMenu: false,
+                actionMenuSelectedIndex: 0,
             };
         case 'PREV_TAB':
             return {
@@ -107,6 +124,8 @@ export function appReducer(state, action) {
                 selectedIndex: 0,
                 searchQuery: '',
                 message: null,
+                showMarketplaceActionMenu: false,
+                actionMenuSelectedIndex: 0,
             };
         case 'SET_FOCUS_ZONE':
             return {
@@ -210,7 +229,9 @@ export function appReducer(state, action) {
                 operationPluginId: action.payload.pluginId,
                 message: action.payload.operation === 'installing'
                     ? `Installing ${action.payload.pluginId}...`
-                    : `Uninstalling ${action.payload.pluginId}...`,
+                    : action.payload.operation === 'uninstalling'
+                        ? `Uninstalling ${action.payload.pluginId}...`
+                        : `Updating plugins...`,
             };
         case 'END_OPERATION':
             return {
@@ -279,6 +300,59 @@ export function appReducer(state, action) {
                 marketplaceOperation: 'idle',
                 operationMarketplaceId: null,
             };
+        case 'SHOW_MARKETPLACE_ACTION_MENU':
+            return {
+                ...state,
+                showMarketplaceActionMenu: true,
+                actionMenuSelectedIndex: 0,
+            };
+        case 'HIDE_MARKETPLACE_ACTION_MENU':
+            return {
+                ...state,
+                showMarketplaceActionMenu: false,
+                actionMenuSelectedIndex: 0,
+            };
+        case 'SET_ACTION_MENU_INDEX':
+            return {
+                ...state,
+                actionMenuSelectedIndex: action.payload,
+            };
+        case 'MOVE_ACTION_MENU_SELECTION': {
+            const maxIndex = 3; // 4 actions: browse, update, autoUpdate, remove
+            const newIndex = action.payload === 'up'
+                ? Math.max(0, state.actionMenuSelectedIndex - 1)
+                : Math.min(maxIndex, state.actionMenuSelectedIndex + 1);
+            return {
+                ...state,
+                actionMenuSelectedIndex: newIndex,
+            };
+        }
+        case 'SET_COMPONENT_INDEX':
+            return {
+                ...state,
+                selectedComponentIndex: action.payload,
+            };
+        case 'MOVE_COMPONENT_SELECTION': {
+            const newIndex = action.payload === 'up'
+                ? Math.max(0, state.selectedComponentIndex - 1)
+                : Math.min(action.maxIndex, state.selectedComponentIndex + 1);
+            return {
+                ...state,
+                selectedComponentIndex: newIndex,
+            };
+        }
+        case 'ENTER_COMPONENT_MODE':
+            return {
+                ...state,
+                focusZone: 'components',
+                selectedComponentIndex: 0,
+            };
+        case 'EXIT_COMPONENT_MODE':
+            return {
+                ...state,
+                focusZone: 'list',
+                selectedComponentIndex: 0,
+            };
         default:
             return state;
     }
@@ -292,28 +366,23 @@ export function appReducer(state, action) {
  * // => Only installed plugins matching 'su'
  */
 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 'marketplaces':
-            return state.marketplaces;
-        case 'errors':
-            return state.errors;
-        default:
-            return [];
-    }
+    return match(state.activeTab)
+        .with('enabled', () => {
+        const enabledPlugins = state.plugins.filter((p) => p.isInstalled && p.isEnabled);
+        return state.searchQuery
+            ? searchPlugins(state.searchQuery, enabledPlugins)
+            : enabledPlugins;
+    })
+        .with('installed', () => {
+        const installedPlugins = state.plugins.filter((p) => p.isInstalled);
+        return state.searchQuery
+            ? searchPlugins(state.searchQuery, installedPlugins)
+            : installedPlugins;
+    })
+        .with('discover', () => getFilteredPlugins(state))
+        .with('marketplaces', () => state.marketplaces)
+        .with('errors', () => state.errors)
+        .otherwise(() => []);
 }
 /**
  * Get filtered and sorted plugins for discover tab
@@ -328,71 +397,128 @@ export function getFilteredPlugins(state) {
     plugins = sortPlugins(plugins, state.sortBy, state.sortOrder);
     return plugins;
 }
+/**
+ * Get filtered marketplaces based on search query
+ * @param state - Current app state
+ * @returns Filtered array of marketplaces
+ */
+export function getFilteredMarketplaces(state) {
+    let marketplaces = state.marketplaces;
+    // Apply search filter
+    if (state.searchQuery) {
+        marketplaces = searchMarketplaces(state.searchQuery, marketplaces);
+    }
+    return marketplaces;
+}
 /**
  * Main App component
  */
 export default function App() {
     const { exit } = useApp();
-    const [state, dispatch] = useReducer(appReducer, initialState);
+    const dispatch = useAppDispatch();
+    // Select state from Redux slices
+    const ui = useAppSelector((s) => s.ui);
+    const pluginState = useAppSelector((s) => s.plugins);
+    const marketplaceState = useAppSelector((s) => s.marketplaces);
+    // Combine into AppState-compatible object for existing helper functions
+    const state = {
+        activeTab: ui.activeTab,
+        focusZone: ui.focusZone,
+        showHelp: ui.showHelp,
+        searchQuery: ui.searchQuery,
+        sortBy: ui.sortBy,
+        sortOrder: ui.sortOrder,
+        message: ui.message,
+        plugins: pluginState.plugins,
+        errors: pluginState.errors,
+        loading: pluginState.loading,
+        error: pluginState.error,
+        selectedIndex: pluginState.selectedIndex,
+        operation: pluginState.operation,
+        operationPluginId: pluginState.operationPluginId,
+        confirmUninstall: pluginState.confirmUninstall,
+        confirmUpdateAll: pluginState.confirmUpdateAll,
+        updateProgress: pluginState.updateProgress,
+        selectedComponentIndex: pluginState.selectedComponentIndex,
+        marketplaces: marketplaceState.marketplaces,
+        marketplaceOperation: marketplaceState.marketplaceOperation,
+        operationMarketplaceId: marketplaceState.operationMarketplaceId,
+        confirmRemoveMarketplace: marketplaceState.confirmRemoveMarketplace,
+        showAddMarketplaceDialog: marketplaceState.showAddMarketplaceDialog,
+        addMarketplaceError: marketplaceState.addMarketplaceError,
+        showMarketplaceActionMenu: marketplaceState.showMarketplaceActionMenu,
+        actionMenuSelectedIndex: marketplaceState.actionMenuSelectedIndex,
+    };
     // Load data on mount
     useEffect(() => {
         try {
             const plugins = loadAllPlugins();
             const marketplaces = loadMarketplaces();
-            dispatch({ type: 'SET_PLUGINS', payload: plugins });
-            dispatch({ type: 'SET_MARKETPLACES', payload: marketplaces });
+            dispatch(setPlugins(plugins));
+            dispatch(setMarketplaces(marketplaces));
         }
         catch (error) {
-            dispatch({
-                type: 'SET_ERROR',
-                payload: error instanceof Error ? error.message : 'Failed to load data',
-            });
+            dispatch(setError(error instanceof Error ? error.message : 'Failed to load data'));
         }
     }, []);
     /**
      * Handle plugin installation
      */
     async function handleInstall(pluginId) {
-        dispatch({
-            type: 'START_OPERATION',
-            payload: { operation: 'installing', pluginId },
-        });
+        dispatch(startOperation({ operation: 'installing', pluginId }));
         const result = await installPlugin(pluginId);
-        dispatch({ type: 'END_OPERATION' });
+        dispatch(endOperation());
         if (result.success) {
             // Reload plugins to get fresh state
             const plugins = loadAllPlugins();
-            dispatch({ type: 'SET_PLUGINS', payload: plugins });
-            dispatch({ type: 'SET_MESSAGE', payload: `✅ ${result.message}` });
+            dispatch(setPlugins(plugins));
+            dispatch(setMessage(`✅ ${result.message}`));
         }
         else {
-            dispatch({
-                type: 'SET_MESSAGE',
-                payload: `❌ ${result.message}${result.error ? `: ${result.error}` : ''}`,
-            });
+            dispatch(setMessage(`❌ ${result.message}${result.error ? `: ${result.error}` : ''}`));
         }
     }
     /**
      * Handle plugin uninstallation
      */
     async function handleUninstall(pluginId) {
-        dispatch({
-            type: 'START_OPERATION',
-            payload: { operation: 'uninstalling', pluginId },
-        });
+        dispatch(startOperation({ operation: 'uninstalling', pluginId }));
         const result = await uninstallPlugin(pluginId);
-        dispatch({ type: 'END_OPERATION' });
+        dispatch(endOperation());
         if (result.success) {
             // Reload plugins to get fresh state
             const plugins = loadAllPlugins();
-            dispatch({ type: 'SET_PLUGINS', payload: plugins });
-            dispatch({ type: 'SET_MESSAGE', payload: `✅ ${result.message}` });
+            dispatch(setPlugins(plugins));
+            dispatch(setMessage(`✅ ${result.message}`));
         }
         else {
-            dispatch({
-                type: 'SET_MESSAGE',
-                payload: `❌ ${result.message}${result.error ? `: ${result.error}` : ''}`,
-            });
+            dispatch(setMessage(`❌ ${result.message}${result.error ? `: ${result.error}` : ''}`));
+        }
+    }
+    /**
+     * Handle updating all installed plugins sequentially
+     */
+    async function handleUpdateAllPlugins() {
+        const installed = state.plugins.filter((p) => p.isInstalled);
+        if (installed.length === 0) {
+            dispatch(setMessage('⚠️ No installed plugins to update'));
+            return;
+        }
+        const pluginIds = installed.map((p) => p.id);
+        dispatch(startOperation({ operation: 'updating', pluginId: pluginIds[0] }));
+        const result = await updateAllPlugins(pluginIds, (current, total, pluginId) => {
+            dispatch(setUpdateProgress({ current, total, pluginId }));
+        });
+        dispatch(clearUpdateProgress());
+        dispatch(endOperation());
+        // Reload plugins to get fresh state
+        const plugins = loadAllPlugins();
+        dispatch(setPlugins(plugins));
+        if (result.failed === 0) {
+            dispatch(setMessage(`✅ Updated ${result.succeeded}/${result.total} plugins`));
+        }
+        else {
+            dispatch(setMessage(`⚠️ Updated ${result.succeeded}/${result.total} (${result.failed} failed)`));
         }
     }
     /**
@@ -400,30 +526,24 @@ export default function App() {
      * @param source - Marketplace source (e.g., "owner/repo", URL, or local path)
      */
     async function handleAddMarketplace(source) {
-        dispatch({
-            type: 'START_MARKETPLACE_OPERATION',
-            payload: { operation: 'adding' },
-        });
+        dispatch(startMarketplaceOperation({ operation: 'adding' }));
         const result = await addMarketplace(source);
-        dispatch({ type: 'END_MARKETPLACE_OPERATION' });
+        dispatch(endMarketplaceOperation());
         if (result.success) {
-            dispatch({ type: 'HIDE_ADD_MARKETPLACE_DIALOG' });
+            dispatch(hideAddMarketplaceDialog());
             // Reload marketplaces to get fresh state
             const marketplaces = loadMarketplaces();
-            dispatch({ type: 'SET_MARKETPLACES', payload: marketplaces });
+            dispatch(setMarketplaces(marketplaces));
             // Also reload plugins as new marketplace may have plugins
             const plugins = loadAllPlugins();
-            dispatch({ type: 'SET_PLUGINS', payload: plugins });
+            dispatch(setPlugins(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}` });
+            dispatch(setSelectedIndex(0));
+            dispatch(setMessage(`✅ ${result.message}`));
         }
         else {
             // Keep dialog open and show error inline
-            dispatch({
-                type: 'SET_ADD_MARKETPLACE_ERROR',
-                payload: result.error || result.message,
-            });
+            dispatch(setAddMarketplaceError(result.error || result.message));
         }
     }
     /**
@@ -431,33 +551,24 @@ export default function App() {
      * @param marketplaceId - Marketplace identifier to remove
      */
     async function handleRemoveMarketplace(marketplaceId) {
-        dispatch({
-            type: 'START_MARKETPLACE_OPERATION',
-            payload: { operation: 'removing', marketplaceId },
-        });
+        dispatch(startMarketplaceOperation({ operation: 'removing', marketplaceId }));
         const result = await removeMarketplace(marketplaceId);
-        dispatch({ type: 'END_MARKETPLACE_OPERATION' });
+        dispatch(endMarketplaceOperation());
         if (result.success) {
             // Reload marketplaces to get fresh state
             const marketplaces = loadMarketplaces();
-            dispatch({ type: 'SET_MARKETPLACES', payload: marketplaces });
+            dispatch(setMarketplaces(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}` });
+            dispatch(setPlugins(plugins));
+            dispatch(setMessage(`✅ ${result.message}`));
             // Reset selection if needed
             if (state.selectedIndex >= marketplaces.length) {
-                dispatch({
-                    type: 'SET_SELECTED_INDEX',
-                    payload: Math.max(0, marketplaces.length - 1),
-                });
+                dispatch(setSelectedIndex(Math.max(0, marketplaces.length - 1)));
             }
         }
         else {
-            dispatch({
-                type: 'SET_MESSAGE',
-                payload: `❌ ${result.message}${result.error ? `: ${result.error}` : ''}`,
-            });
+            dispatch(setMessage(`❌ ${result.message}${result.error ? `: ${result.error}` : ''}`));
         }
     }
     /**
@@ -465,29 +576,54 @@ export default function App() {
      * @param marketplaceId - Optional marketplace identifier. If omitted, updates all.
      */
     async function handleUpdateMarketplace(marketplaceId) {
-        dispatch({
-            type: 'START_MARKETPLACE_OPERATION',
-            payload: { operation: 'updating', marketplaceId },
-        });
+        dispatch(startMarketplaceOperation({ operation: 'updating', marketplaceId }));
         const result = await updateMarketplace(marketplaceId);
-        dispatch({ type: 'END_MARKETPLACE_OPERATION' });
+        dispatch(endMarketplaceOperation());
         if (result.success) {
             // Reload marketplaces and plugins to get fresh state
             const marketplaces = loadMarketplaces();
-            dispatch({ type: 'SET_MARKETPLACES', payload: marketplaces });
+            dispatch(setMarketplaces(marketplaces));
             const plugins = loadAllPlugins();
-            dispatch({ type: 'SET_PLUGINS', payload: plugins });
+            dispatch(setPlugins(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}` });
+            dispatch(setSelectedIndex(0));
+            dispatch(setMessage(`✅ ${result.message}`));
         }
         else {
-            dispatch({
-                type: 'SET_MESSAGE',
-                payload: `❌ ${result.message}${result.error ? `: ${result.error}` : ''}`,
-            });
+            dispatch(setMessage(`❌ ${result.message}${result.error ? `: ${result.error}` : ''}`));
         }
     }
+    /**
+     * Handle toggling auto-update for a marketplace
+     * @param marketplaceId - ID of the marketplace
+     * @param currentValue - Current auto-update state
+     */
+    async function handleToggleAutoUpdate(marketplaceId, currentValue) {
+        dispatch(startMarketplaceOperation({ operation: 'updating', marketplaceId }));
+        const result = await toggleAutoUpdate(marketplaceId, currentValue);
+        dispatch(endMarketplaceOperation());
+        if (result.success) {
+            // Reload marketplaces to get fresh state
+            const marketplaces = loadMarketplaces();
+            dispatch(setMarketplaces(marketplaces));
+            dispatch(setMessage(`✅ ${result.message}`));
+        }
+        else {
+            dispatch(setMessage(`❌ ${result.message}${result.error ? `: ${result.error}` : ''}`));
+        }
+    }
+    /**
+     * Handle browsing plugins for a specific marketplace
+     * Switches to Discover tab with marketplace filter applied
+     * @param marketplaceId - ID of the marketplace to browse
+     */
+    function handleBrowseMarketplacePlugins(marketplaceId) {
+        // Switch to Discover tab
+        dispatch(setTab('discover'));
+        // Set search query to filter by marketplace
+        dispatch(setSearchQuery(marketplaceId));
+        dispatch(setMessage(`Browsing plugins from ${marketplaceId}`));
+    }
     // Keyboard input handling
     useInput((input, key) => {
         // Block all input during operations (plugin or marketplace)
@@ -497,7 +633,7 @@ export default function App() {
         // Handle help overlay
         if (state.showHelp) {
             if (input === 'h' || key.escape) {
-                dispatch({ type: 'TOGGLE_HELP' });
+                dispatch(toggleHelp());
             }
             return;
         }
@@ -508,19 +644,33 @@ export default function App() {
         }
         // Toggle help (h key)
         if (input === 'h') {
-            dispatch({ type: 'TOGGLE_HELP' });
+            dispatch(toggleHelp());
             return;
         }
         // Handle plugin uninstall confirmation dialog
         if (state.confirmUninstall && state.operationPluginId) {
             if (input === 'y' || input === 'Y' || key.return) {
-                dispatch({ type: 'HIDE_CONFIRM_UNINSTALL' });
+                dispatch(hideConfirmUninstall());
                 handleUninstall(state.operationPluginId);
                 return;
             }
             if (input === 'n' || input === 'N' || key.escape) {
-                dispatch({ type: 'HIDE_CONFIRM_UNINSTALL' });
-                dispatch({ type: 'SET_MESSAGE', payload: 'Uninstall cancelled' });
+                dispatch(hideConfirmUninstall());
+                dispatch(setMessage('Uninstall cancelled'));
+                return;
+            }
+            return;
+        }
+        // Handle update all confirmation dialog
+        if (state.confirmUpdateAll) {
+            if (input === 'y' || input === 'Y' || key.return) {
+                dispatch(hideConfirmUpdateAll());
+                handleUpdateAllPlugins();
+                return;
+            }
+            if (input === 'n' || input === 'N' || key.escape) {
+                dispatch(hideConfirmUpdateAll());
+                dispatch(setMessage('Update cancelled'));
                 return;
             }
             return;
@@ -528,13 +678,13 @@ export default function App() {
         // Handle marketplace remove confirmation dialog
         if (state.confirmRemoveMarketplace && state.operationMarketplaceId) {
             if (input === 'y' || input === 'Y' || key.return) {
-                dispatch({ type: 'HIDE_CONFIRM_REMOVE_MARKETPLACE' });
+                dispatch(hideConfirmRemoveMarketplace());
                 handleRemoveMarketplace(state.operationMarketplaceId);
                 return;
             }
             if (input === 'n' || input === 'N' || key.escape) {
-                dispatch({ type: 'HIDE_CONFIRM_REMOVE_MARKETPLACE' });
-                dispatch({ type: 'SET_MESSAGE', payload: 'Remove cancelled' });
+                dispatch(hideConfirmRemoveMarketplace());
+                dispatch(setMessage('Remove cancelled'));
                 return;
             }
             return;
@@ -548,24 +698,63 @@ export default function App() {
             }
             // Cancel on Escape
             if (key.escape) {
-                dispatch({ type: 'HIDE_ADD_MARKETPLACE_DIALOG' });
-                dispatch({ type: 'SET_MESSAGE', payload: 'Add marketplace cancelled' });
+                dispatch(hideAddMarketplaceDialog());
+                dispatch(setMessage('Add marketplace cancelled'));
                 return;
             }
             // Backspace
             if (key.backspace || key.delete) {
-                dispatch({
-                    type: 'SET_SEARCH_QUERY',
-                    payload: state.searchQuery.slice(0, -1),
-                });
+                dispatch(setSearchQuery(state.searchQuery.slice(0, -1)));
                 return;
             }
             // Character input
             if (input && input.length === 1 && !key.ctrl && !key.meta) {
-                dispatch({
-                    type: 'SET_SEARCH_QUERY',
-                    payload: state.searchQuery + input,
-                });
+                dispatch(setSearchQuery(state.searchQuery + input));
+                return;
+            }
+            return;
+        }
+        // Handle marketplace action menu
+        if (state.showMarketplaceActionMenu) {
+            const selectedMarketplace = getFilteredMarketplaces(state)[state.selectedIndex];
+            if (!selectedMarketplace) {
+                dispatch(hideMarketplaceActionMenu());
+                return;
+            }
+            // Up/Down arrow navigation
+            if (key.upArrow || (key.ctrl && input === 'p')) {
+                dispatch(moveActionMenuSelection('up'));
+                return;
+            }
+            if (key.downArrow || (key.ctrl && input === 'n')) {
+                dispatch(moveActionMenuSelection('down'));
+                return;
+            }
+            // Execute action on Enter
+            if (key.return) {
+                dispatch(hideMarketplaceActionMenu());
+                const actionIndex = state.actionMenuSelectedIndex;
+                if (actionIndex === 0) {
+                    // Browse plugins
+                    handleBrowseMarketplacePlugins(selectedMarketplace.id);
+                }
+                else if (actionIndex === 1) {
+                    // Update marketplace
+                    handleUpdateMarketplace(selectedMarketplace.id);
+                }
+                else if (actionIndex === 2) {
+                    // Toggle auto-update
+                    handleToggleAutoUpdate(selectedMarketplace.id, selectedMarketplace.autoUpdate ?? false);
+                }
+                else if (actionIndex === 3) {
+                    // Remove marketplace (show confirmation)
+                    dispatch(showConfirmRemoveMarketplace(selectedMarketplace.id));
+                }
+                return;
+            }
+            // Close menu on Escape
+            if (key.escape) {
+                dispatch(hideMarketplaceActionMenu());
                 return;
             }
             return;
@@ -574,7 +763,7 @@ export default function App() {
         if (state.focusZone === 'search') {
             // Up arrow: move focus to tabbar
             if (key.upArrow || (key.ctrl && input === 'p')) {
-                dispatch({ type: 'SET_FOCUS_ZONE', payload: 'tabbar' });
+                dispatch(setFocusZone('tabbar'));
                 return;
             }
             // Down arrow, Enter, or Escape: move focus to list
@@ -582,21 +771,15 @@ export default function App() {
                 key.return ||
                 key.downArrow ||
                 (key.ctrl && input === 'n')) {
-                dispatch({ type: 'SET_FOCUS_ZONE', payload: 'list' });
+                dispatch(setFocusZone('list'));
                 return;
             }
             if (key.backspace || key.delete) {
-                dispatch({
-                    type: 'SET_SEARCH_QUERY',
-                    payload: state.searchQuery.slice(0, -1),
-                });
+                dispatch(setSearchQuery(state.searchQuery.slice(0, -1)));
                 return;
             }
             if (input && input.length === 1 && !key.ctrl && !key.meta) {
-                dispatch({
-                    type: 'SET_SEARCH_QUERY',
-                    payload: state.searchQuery + input,
-                });
+                dispatch(setSearchQuery(state.searchQuery + input));
                 return;
             }
             return;
@@ -606,27 +789,54 @@ export default function App() {
             // 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',
-                });
+                dispatch(setFocusZone(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' });
+                dispatch(prevTab());
+                dispatch(setFocusZone('tabbar'));
                 return;
             }
             if (key.rightArrow || (key.ctrl && input === 'f')) {
-                dispatch({ type: 'NEXT_TAB' });
-                dispatch({ type: 'SET_FOCUS_ZONE', payload: 'tabbar' });
+                dispatch(nextTab());
+                dispatch(setFocusZone('tabbar'));
                 return;
             }
             // Tab key: next tab (resets focus to list)
             if (key.tab) {
-                dispatch({ type: 'NEXT_TAB' });
+                dispatch(nextTab());
+                return;
+            }
+            return;
+        }
+        // Component focus zone navigation
+        if (state.focusZone === 'components') {
+            // Get current plugin and its components
+            const items = getItemsForTab(state);
+            const selectedPlugin = items[state.selectedIndex];
+            const components = selectedPlugin
+                ? flattenComponents(selectedPlugin.componentsDetailed)
+                : [];
+            // Left arrow: exit component mode, go back to list
+            if (key.leftArrow || (key.ctrl && input === 'b') || key.escape) {
+                dispatch(exitComponentMode());
+                return;
+            }
+            // Up/Down: navigate components
+            if (key.upArrow || (key.ctrl && input === 'p')) {
+                dispatch(moveComponentSelection({
+                    direction: 'up',
+                    maxIndex: Math.max(0, components.length - 1),
+                }));
+                return;
+            }
+            if (key.downArrow || (key.ctrl && input === 'n')) {
+                dispatch(moveComponentSelection({
+                    direction: 'down',
+                    maxIndex: Math.max(0, components.length - 1),
+                }));
                 return;
             }
             return;
@@ -637,24 +847,43 @@ export default function App() {
             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',
-                });
+                dispatch(setFocusZone(zones.includes('search') ? 'search' : 'tabbar'));
             }
             else {
-                dispatch({ type: 'MOVE_SELECTION', payload: 'up' });
+                dispatch(moveSelection({
+                    direction: 'up',
+                    maxIndex: Math.max(0, getItemsForTab(state).length - 1),
+                }));
             }
             return;
         }
         // Down arrow: move down in list
         if (key.downArrow || (key.ctrl && input === 'n')) {
-            dispatch({ type: 'MOVE_SELECTION', payload: 'down' });
+            dispatch(moveSelection({
+                direction: 'down',
+                maxIndex: Math.max(0, getItemsForTab(state).length - 1),
+            }));
             return;
         }
+        // Right arrow: enter component mode (on plugin tabs)
+        if ((key.rightArrow || (key.ctrl && input === 'f')) &&
+            state.focusZone === 'list' &&
+            (state.activeTab === 'enabled' ||
+                state.activeTab === 'installed' ||
+                state.activeTab === 'discover')) {
+            const items = getItemsForTab(state);
+            const selectedPlugin = items[state.selectedIndex];
+            if (selectedPlugin?.componentsDetailed) {
+                const components = flattenComponents(selectedPlugin.componentsDetailed);
+                if (components.length > 0) {
+                    dispatch(enterComponentMode());
+                    return;
+                }
+            }
+        }
         // Tab key: next tab (from list zone)
         if (key.tab) {
-            dispatch({ type: 'NEXT_TAB' });
+            dispatch(nextTab());
             return;
         }
         // Enter search mode (/ key on supported tabs)
@@ -665,7 +894,7 @@ export default function App() {
             'marketplaces',
         ];
         if (input === '/' && searchEnabledTabs.includes(state.activeTab)) {
-            dispatch({ type: 'SET_FOCUS_ZONE', payload: 'search' });
+            dispatch(setFocusZone('search'));
             return;
         }
         // Enter key: Install (non-installed) or Toggle (installed)
@@ -684,22 +913,13 @@ export default function App() {
                     // 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`,
-                        });
+                        dispatch(togglePluginEnabled(selectedPlugin.id));
+                        dispatch(setMessage(newState
+                            ? `✅ ${selectedPlugin.name} enabled`
+                            : `❌ ${selectedPlugin.name} disabled`));
                     }
                     catch (error) {
-                        dispatch({
-                            type: 'SET_MESSAGE',
-                            payload: `Error: ${error instanceof Error ? error.message : 'Unknown error'}`,
-                        });
+                        dispatch(setMessage(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`));
                     }
                 }
             }
@@ -715,22 +935,13 @@ export default function App() {
             if (selectedPlugin && selectedPlugin.isInstalled) {
                 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`,
-                    });
+                    dispatch(togglePluginEnabled(selectedPlugin.id));
+                    dispatch(setMessage(newState
+                        ? `✅ ${selectedPlugin.name} enabled`
+                        : `❌ ${selectedPlugin.name} disabled`));
                 }
                 catch (error) {
-                    dispatch({
-                        type: 'SET_MESSAGE',
-                        payload: `Error: ${error instanceof Error ? error.message : 'Unknown error'}`,
-                    });
+                    dispatch(setMessage(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`));
                 }
             }
             return;
@@ -742,43 +953,42 @@ export default function App() {
                 name: 'date',
                 date: 'installs',
             };
-            dispatch({
-                type: 'SET_SORT',
-                payload: { by: nextSort[state.sortBy], order: state.sortOrder },
-            });
+            dispatch(setSort({ by: nextSort[state.sortBy], order: state.sortOrder }));
             return;
         }
         // Toggle sort order (S key)
         if (input === 'S' && state.activeTab === 'discover') {
-            dispatch({
-                type: 'SET_SORT',
-                payload: {
-                    by: state.sortBy,
-                    order: state.sortOrder === 'asc' ? 'desc' : 'asc',
-                },
-            });
+            dispatch(setSort({
+                by: state.sortBy,
+                order: state.sortOrder === 'asc' ? 'desc' : 'asc',
+            }));
             return;
         }
         // Clear search (Escape)
         if (key.escape && state.searchQuery) {
-            dispatch({ type: 'SET_SEARCH_QUERY', payload: '' });
+            dispatch(setSearchQuery(''));
             return;
         }
         // Marketplace-specific key bindings
         if (state.activeTab === 'marketplaces' && state.focusZone === 'list') {
+            // Open action menu (Enter or m key)
+            if (key.return || input === 'm') {
+                const selectedMarketplace = filteredMarketplaces[state.selectedIndex];
+                if (selectedMarketplace) {
+                    dispatch(showMarketplaceActionMenuAction());
+                }
+                return;
+            }
             // Add marketplace (a key)
             if (input === 'a') {
-                dispatch({ type: 'SHOW_ADD_MARKETPLACE_DIALOG' });
+                dispatch(showAddMarketplaceDialog());
                 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,
-                    });
+                    dispatch(showConfirmRemoveMarketplace(selectedMarketplace.id));
                 }
                 return;
             }
@@ -806,10 +1016,19 @@ export default function App() {
                 handleInstall(selectedPlugin.id);
             }
             else if (selectedPlugin?.isInstalled) {
-                dispatch({
-                    type: 'SET_MESSAGE',
-                    payload: '⚠️ Plugin is already installed',
-                });
+                dispatch(setMessage('⚠️ Plugin is already installed'));
+            }
+            return;
+        }
+        // Update all plugins (U key = shift+u) - only on enabled/installed tabs
+        if (input === 'U' &&
+            (state.activeTab === 'enabled' || state.activeTab === 'installed')) {
+            const installed = state.plugins.filter((p) => p.isInstalled);
+            if (installed.length === 0) {
+                dispatch(setMessage('⚠️ No installed plugins to update'));
+            }
+            else {
+                dispatch(showConfirmUpdateAll());
             }
             return;
         }
@@ -821,23 +1040,15 @@ export default function App() {
             const items = getItemsForTab(state);
             const selectedPlugin = items[state.selectedIndex];
             if (selectedPlugin && selectedPlugin.isInstalled) {
-                dispatch({ type: 'SHOW_CONFIRM_UNINSTALL', payload: selectedPlugin.id });
+                dispatch(showConfirmUninstall(selectedPlugin.id));
             }
             else if (selectedPlugin && !selectedPlugin.isInstalled) {
-                dispatch({ type: 'SET_MESSAGE', payload: '⚠️ Plugin is not installed' });
+                dispatch(setMessage('⚠️ Plugin is not installed'));
             }
             return;
         }
     });
-    // Loading state
-    if (state.loading) {
-        return (_jsx(Box, { flexDirection: "column", padding: 1, children: _jsx(Text, { children: "Loading plugins..." }) }));
-    }
-    // Error state
-    if (state.error) {
-        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Text, { color: "red", children: ["Error: ", state.error] }), _jsx(Text, { dimColor: true, children: "Press q to exit" })] }));
-    }
-    // Get filtered data for current tab
+    // Get filtered data for current tab (must be before early returns for useMemo dependency)
     const filteredPlugins = getFilteredPlugins(state);
     // Apply search filter to enabled plugins
     const enabledPluginsBase = state.plugins.filter((p) => p.isInstalled && p.isEnabled);
@@ -853,56 +1064,127 @@ export default function App() {
     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;
+    // Get selected component detail for component focus mode (memoized)
+    // Must be called before conditional returns to maintain hooks order
+    const selectedComponentDetail = useMemo(() => {
+        if (state.focusZone !== 'components')
+            return null;
+        // Get the appropriate plugins for current tab
+        const currentPlugins = match(state.activeTab)
+            .with('enabled', () => enabledPlugins)
+            .with('installed', () => installedPlugins)
+            .with('discover', () => filteredPlugins)
+            .otherwise(() => []);
+        const selectedPlugin = currentPlugins[state.selectedIndex];
+        if (!selectedPlugin?.componentsDetailed)
+            return null;
+        const components = flattenComponents(selectedPlugin.componentsDetailed);
+        const selectedComponent = components[state.selectedComponentIndex];
+        if (!selectedComponent)
+            return null;
+        // Get install path for the plugin (cross-platform)
+        const installPath = selectedPlugin.isInstalled
+            ? path.join(os.homedir(), '.claude', 'plugins', 'cache', selectedPlugin.marketplace ?? '', selectedPlugin.name, selectedPlugin.version ?? '')
+            : null;
+        if (!installPath)
+            return null;
+        // Fetch detailed info based on component type
+        if (selectedComponent.info.type === 'skill') {
+            return (getSkillDetailedInfo(installPath, selectedComponent.info.name) ?? null);
+        }
+        else if (selectedComponent.info.type === 'command' ||
+            selectedComponent.info.type === 'agent') {
+            return (getMarkdownComponentDetailedInfo(installPath, selectedComponent.info.name, selectedComponent.info.type) ?? null);
+        }
+        // For other types (mcp, lsp, hook), return basic info
+        return {
+            name: selectedComponent.info.name,
+            type: selectedComponent.info.type,
+            description: selectedComponent.info.description,
+        };
+    }, [
+        state.focusZone,
+        state.activeTab,
+        state.selectedIndex,
+        state.selectedComponentIndex,
+        enabledPlugins,
+        installedPlugins,
+        filteredPlugins,
+    ]);
+    const componentFocusMode = state.focusZone === 'components';
+    // Loading state
+    if (state.loading) {
+        return (_jsx(Box, { flexDirection: "column", padding: 1, children: _jsx(Text, { children: "Loading plugins..." }) }));
+    }
+    // Error state
+    if (state.error) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Text, { color: "red", children: ["Error: ", state.error] }), _jsx(Text, { dimColor: true, children: "Press q to exit" })] }));
+    }
+    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' }), _jsx(Box, { flexGrow: 1, flexDirection: "column", children: match(state.activeTab)
+                    .with('enabled', () => (_jsx(EnabledTab, { plugins: enabledPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, focusZone: state.focusZone, componentFocusMode: componentFocusMode, selectedComponentIndex: state.selectedComponentIndex, selectedComponentDetail: selectedComponentDetail }, "enabled")))
+                    .with('installed', () => (_jsx(InstalledTab, { plugins: installedPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, focusZone: state.focusZone, componentFocusMode: componentFocusMode, selectedComponentIndex: state.selectedComponentIndex, selectedComponentDetail: selectedComponentDetail }, "installed")))
+                    .with('discover', () => (_jsx(DiscoverTab, { plugins: filteredPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, sortBy: state.sortBy, sortOrder: state.sortOrder, focusZone: state.focusZone, componentFocusMode: componentFocusMode, selectedComponentIndex: state.selectedComponentIndex, selectedComponentDetail: selectedComponentDetail }, "discover")))
+                    .with('marketplaces', () => (_jsx(MarketplacesTab, { marketplaces: filteredMarketplaces, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, focusZone: state.focusZone, showActionMenu: state.showMarketplaceActionMenu, actionMenuSelectedIndex: state.actionMenuSelectedIndex }, "marketplaces")))
+                    .with('errors', () => (_jsx(ErrorsTab, { errors: state.errors, selectedIndex: state.selectedIndex }, "errors")))
+                    .exhaustive() }), state.confirmUninstall && state.operationPluginId && (_jsx(ConfirmDialog, { message: `Uninstall ${state.operationPluginId}?` })), state.confirmUpdateAll && (_jsx(ConfirmDialog, { message: `Update all ${state.plugins.filter((p) => p.isInstalled).length} plugins?` })), 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 || state.updateProgress) && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: state.updateProgress
+                        ? `Updating (${state.updateProgress.current}/${state.updateProgress.total}): ${state.updateProgress.pluginId}...`
+                        : state.message }) })), _jsx(KeyHints, { focusZone: state.focusZone, extraHints: match([state.focusZone, state.activeTab])
+                    .with(['search', P._], () => undefined)
+                    .with(['tabbar', P._], () => undefined)
+                    .with(['list', 'enabled'], () => {
+                    const hints = [
+                        { key: '/', action: 'search' },
+                        { key: 'i', action: 'install' },
+                        { key: 'u', action: 'uninstall' },
+                        { key: 'U', action: 'update all' },
+                    ];
+                    const selectedPlugin = enabledPlugins[state.selectedIndex];
+                    if (selectedPlugin) {
+                        hints.push({
+                            key: 'Enter',
+                            action: selectedPlugin.isInstalled ? 'toggle' : 'install',
+                        });
                     }
-                    // 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;
+                    return hints;
+                })
+                    .with(['list', 'installed'], () => {
+                    const hints = [
+                        { key: '/', action: 'search' },
+                        { key: 'i', action: 'install' },
+                        { key: 'u', action: 'uninstall' },
+                        { key: 'U', action: 'update all' },
+                    ];
+                    const selectedPlugin = installedPlugins[state.selectedIndex];
+                    if (selectedPlugin) {
+                        hints.push({
+                            key: 'Enter',
+                            action: selectedPlugin.isInstalled ? 'toggle' : 'install',
+                        });
                     }
-                    // Marketplaces tab hints
-                    if (state.activeTab === 'marketplaces') {
-                        return [
-                            { key: '/', action: 'search' },
-                            { key: 'a', action: 'add' },
-                            { key: 'd', action: 'remove' },
-                            { key: 'u', action: 'update' },
-                        ];
+                    return hints;
+                })
+                    .with(['list', 'discover'], () => {
+                    const hints = [
+                        { key: '/', action: 'search' },
+                        { key: 'i', action: 'install' },
+                        { key: 'u', action: 'uninstall' },
+                    ];
+                    const selectedPlugin = filteredPlugins[state.selectedIndex];
+                    if (selectedPlugin) {
+                        hints.push({
+                            key: 'Enter',
+                            action: selectedPlugin.isInstalled ? 'toggle' : 'install',
+                        });
                     }
-                    return undefined;
-                })() })] }));
+                    hints.push({ key: 's', action: 'sort' });
+                    return hints;
+                })
+                    .with(['list', 'marketplaces'], () => [
+                    { key: '/', action: 'search' },
+                    { key: 'a', action: 'add' },
+                    { key: 'd', action: 'remove' },
+                    { key: 'u', action: 'update' },
+                ])
+                    .with(['list', 'errors'], () => undefined)
+                    .otherwise(() => undefined) })] }));
 }