@laststance/claude-plugin-dashboard 0.3.0 → 0.3.2

package/dist/app.js

@@ -3,7 +3,9 @@ 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';
@@ -14,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 { 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
@@ -40,6 +51,8 @@ export const initialState = {
     operation: 'idle',
     operationPluginId: null,
     confirmUninstall: false,
+    confirmUpdateAll: false,
+    updateProgress: null,
     showHelp: false,
     marketplaceOperation: 'idle',
     operationMarketplaceId: null,
@@ -48,6 +61,7 @@ export const initialState = {
     addMarketplaceError: null,
     showMarketplaceActionMenu: false,
     actionMenuSelectedIndex: 0,
+    selectedComponentIndex: 0,
 };
 /**
  * Get available focus zones for the current tab
@@ -215,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 {
@@ -311,6 +327,32 @@ export function appReducer(state, action) {
                 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;
     }
@@ -373,66 +415,110 @@ export function getFilteredMarketplaces(state) {
  */
 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)`));
         }
     }
     /**
@@ -440,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));
         }
     }
     /**
@@ -471,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}` : ''}`));
         }
     }
     /**
@@ -505,27 +576,21 @@ 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}` : ''}`));
         }
     }
     /**
@@ -534,23 +599,17 @@ export default function App() {
      * @param currentValue - Current auto-update state
      */
     async function handleToggleAutoUpdate(marketplaceId, currentValue) {
-        dispatch({
-            type: 'START_MARKETPLACE_OPERATION',
-            payload: { operation: 'updating', marketplaceId },
-        });
+        dispatch(startMarketplaceOperation({ operation: 'updating', marketplaceId }));
         const result = await toggleAutoUpdate(marketplaceId, currentValue);
-        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({ type: 'SET_MESSAGE', payload: `✅ ${result.message}` });
+            dispatch(setMarketplaces(marketplaces));
+            dispatch(setMessage(`✅ ${result.message}`));
         }
         else {
-            dispatch({
-                type: 'SET_MESSAGE',
-                payload: `❌ ${result.message}${result.error ? `: ${result.error}` : ''}`,
-            });
+            dispatch(setMessage(`❌ ${result.message}${result.error ? `: ${result.error}` : ''}`));
         }
     }
     /**
@@ -560,13 +619,10 @@ export default function App() {
      */
     function handleBrowseMarketplacePlugins(marketplaceId) {
         // Switch to Discover tab
-        dispatch({ type: 'SET_TAB', payload: 'discover' });
+        dispatch(setTab('discover'));
         // Set search query to filter by marketplace
-        dispatch({ type: 'SET_SEARCH_QUERY', payload: marketplaceId });
-        dispatch({
-            type: 'SET_MESSAGE',
-            payload: `Browsing plugins from ${marketplaceId}`,
-        });
+        dispatch(setSearchQuery(marketplaceId));
+        dispatch(setMessage(`Browsing plugins from ${marketplaceId}`));
     }
     // Keyboard input handling
     useInput((input, key) => {
@@ -577,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;
         }
@@ -588,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;
@@ -608,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;
@@ -628,24 +698,18 @@ 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;
@@ -654,21 +718,21 @@ export default function App() {
         if (state.showMarketplaceActionMenu) {
             const selectedMarketplace = getFilteredMarketplaces(state)[state.selectedIndex];
             if (!selectedMarketplace) {
-                dispatch({ type: 'HIDE_MARKETPLACE_ACTION_MENU' });
+                dispatch(hideMarketplaceActionMenu());
                 return;
             }
             // Up/Down arrow navigation
             if (key.upArrow || (key.ctrl && input === 'p')) {
-                dispatch({ type: 'MOVE_ACTION_MENU_SELECTION', payload: 'up' });
+                dispatch(moveActionMenuSelection('up'));
                 return;
             }
             if (key.downArrow || (key.ctrl && input === 'n')) {
-                dispatch({ type: 'MOVE_ACTION_MENU_SELECTION', payload: 'down' });
+                dispatch(moveActionMenuSelection('down'));
                 return;
             }
             // Execute action on Enter
             if (key.return) {
-                dispatch({ type: 'HIDE_MARKETPLACE_ACTION_MENU' });
+                dispatch(hideMarketplaceActionMenu());
                 const actionIndex = state.actionMenuSelectedIndex;
                 if (actionIndex === 0) {
                     // Browse plugins
@@ -684,16 +748,13 @@ export default function App() {
                 }
                 else if (actionIndex === 3) {
                     // Remove marketplace (show confirmation)
-                    dispatch({
-                        type: 'SHOW_CONFIRM_REMOVE_MARKETPLACE',
-                        payload: selectedMarketplace.id,
-                    });
+                    dispatch(showConfirmRemoveMarketplace(selectedMarketplace.id));
                 }
                 return;
             }
             // Close menu on Escape
             if (key.escape) {
-                dispatch({ type: 'HIDE_MARKETPLACE_ACTION_MENU' });
+                dispatch(hideMarketplaceActionMenu());
                 return;
             }
             return;
@@ -702,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
@@ -710,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;
@@ -734,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;
@@ -765,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)
@@ -793,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)
@@ -812,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'}`));
                     }
                 }
             }
@@ -843,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;
@@ -870,26 +953,20 @@ 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
@@ -898,23 +975,20 @@ export default function App() {
             if (key.return || input === 'm') {
                 const selectedMarketplace = filteredMarketplaces[state.selectedIndex];
                 if (selectedMarketplace) {
-                    dispatch({ type: 'SHOW_MARKETPLACE_ACTION_MENU' });
+                    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;
             }
@@ -942,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;
         }
@@ -957,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);
@@ -989,13 +1064,71 @@ export default function App() {
     const filteredMarketplaces = state.searchQuery
         ? searchMarketplaces(state.searchQuery, state.marketplaces)
         : state.marketplaces;
+    // 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 }, "enabled")))
-                    .with('installed', () => (_jsx(InstalledTab, { plugins: installedPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, focusZone: state.focusZone }, "installed")))
-                    .with('discover', () => (_jsx(DiscoverTab, { plugins: filteredPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, sortBy: state.sortBy, sortOrder: state.sortOrder, focusZone: state.focusZone }, "discover")))
+                    .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.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: match([state.focusZone, state.activeTab])
+                    .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'], () => {
@@ -1003,6 +1136,7 @@ export default function App() {
                         { key: '/', action: 'search' },
                         { key: 'i', action: 'install' },
                         { key: 'u', action: 'uninstall' },
+                        { key: 'U', action: 'update all' },
                     ];
                     const selectedPlugin = enabledPlugins[state.selectedIndex];
                     if (selectedPlugin) {
@@ -1018,6 +1152,7 @@ export default function App() {
                         { key: '/', action: 'search' },
                         { key: 'i', action: 'install' },
                         { key: 'u', action: 'uninstall' },
+                        { key: 'U', action: 'update all' },
                     ];
                     const selectedPlugin = installedPlugins[state.selectedIndex];
                     if (selectedPlugin) {