@laststance/claude-plugin-dashboard 0.2.0 → 0.2.1

package/README.md

@@ -1,6 +1,8 @@
 # Claude Code Plugin Dashboard
 
 [![npm version](https://img.shields.io/npm/v/@laststance/claude-plugin-dashboard)](https://www.npmjs.com/package/@laststance/claude-plugin-dashboard)
+[![CI](https://github.com/laststance/claude-plugin-dashboard/actions/workflows/ci.yml/badge.svg)](https://github.com/laststance/claude-plugin-dashboard/actions/workflows/ci.yml)
+[![codecov](https://codecov.io/gh/laststance/claude-plugin-dashboard/graph/badge.svg?token=LO8NM55XCF)](https://codecov.io/gh/laststance/claude-plugin-dashboard)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 An interactive CLI dashboard to browse, install, and manage [Claude Code](https://claude.ai/code) plugins.
@@ -12,12 +14,14 @@ Built with [Ink](https://github.com/vadimdemedes/ink) (React for CLI).
 
 ## Features
 
-- 🔍 **Discover** - Browse 100+ plugins from multiple marketplaces
+- ✅ **Enabled** - Default view showing active plugins (installed AND enabled)
 - 📦 **Install/Uninstall** - Install and uninstall plugins directly from the dashboard
-- ✅ **Enable/Disable** - Toggle plugins on/off with a single key
-- 🏪 **Marketplaces** - Explore plugin sources
+- 🔄 **Enable/Disable** - Toggle plugins on/off with a single key
+- 🔍 **Discover** - Browse 100+ plugins from multiple marketplaces
+- 🏪 **Marketplaces** - Add, remove, and update plugin sources
 - ⚠️ **Errors** - Debug plugin issues
-- ⌨️ **Keyboard-driven** - Full keyboard navigation with Emacs-style shortcuts
+- ⌨️ **Focus Zone Navigation** - 3-zone keyboard model (TabBar → Search → List)
+- 🆘 **Help Overlay** - Press `h` for full keyboard shortcuts
 - 🎨 **Beautiful TUI** - Terminal UI that matches Claude Code's design
 
 ## Prerequisites
@@ -43,21 +47,26 @@ This opens the interactive TUI dashboard.
 
 **Keyboard Shortcuts:**
 
-| Key       | Action                                      |
-| --------- | ------------------------------------------- |
-| `←` `→`   | Switch tabs                                 |
-| `↑` `↓`   | Navigate list                               |
-| `^P` `^N` | Navigate list (Emacs-style)                 |
-| `i`       | Install selected plugin                     |
-| `u`       | Uninstall selected plugin (with confirm)    |
-| `Space`   | Toggle plugin enable/disable                |
-| `Enter`   | View details / Toggle                       |
-| `/`       | Search plugins                              |
-| `s`       | Cycle sort options (Installs → Name → Date) |
-| `S`       | Toggle sort order (Asc/Desc)                |
-| `Tab`     | Next tab                                    |
-| `Esc`     | Clear search / Cancel                       |
-| `q`       | Quit                                        |
+| Key       | Action                                        |
+| --------- | --------------------------------------------- |
+| `↑` `↓`   | Navigate within zone / Move between zones     |
+| `←` `→`   | Switch tabs (when TabBar focused)             |
+| `^P` `^N` | Navigate list (Emacs-style vertical)          |
+| `^B` `^F` | Switch tabs (Emacs-style horizontal)          |
+| `Tab`     | Next tab                                      |
+| `i`       | Install selected plugin                       |
+| `u`       | Uninstall selected plugin (with confirm)      |
+| `Space`   | Toggle plugin enable/disable                  |
+| `Enter`   | Install (Discover) / Toggle (Installed)       |
+| `/`       | Search (works on all plugin/marketplace tabs) |
+| `s`       | Cycle sort options (Installs → Name → Date)   |
+| `S`       | Toggle sort order (Asc/Desc)                  |
+| `a`       | Add marketplace (Marketplaces tab)            |
+| `d`       | Remove marketplace (Marketplaces tab)         |
+| `r`       | Update marketplace (Marketplaces tab)         |
+| `h`       | Show help overlay                             |
+| `Esc`     | Clear search / Close dialog / Cancel          |
+| `q`/`^C`  | Quit                                          |
 
 ### Command Line Mode
 
@@ -92,14 +101,14 @@ claude-plugin-dashboard help
 
 ## Dashboard Tabs
 
-### Discover
+### Enabled (Default)
 
-Browse all available plugins from all configured marketplaces:
+View your currently active plugins (installed AND enabled):
 
-- Search by name, description, or tags
-- Sort by install count, name, or date
-- Install plugins with `i` key
-- View plugin details including install count and description
+- Shows only plugins that are ready to use
+- Quick status overview of your Claude Code setup
+- Toggle plugins on/off with `Space`
+- Search with `/` to filter enabled plugins
 
 ### Installed
 
@@ -108,15 +117,26 @@ Manage your installed plugins:
 - See enabled (●) and disabled (◐) status at a glance
 - Toggle plugins on/off with `Space`
 - Uninstall plugins with `u` (with Y/N confirmation)
-- View installation details
+- Search installed plugins with `/`
+
+### Discover
+
+Browse all available plugins from all configured marketplaces:
+
+- Search by name, description, or tags
+- Sort by install count, name, or date
+- Install plugins with `i` key or `Enter`
+- View plugin details including install count and description
 
 ### Marketplaces
 
-Explore plugin sources:
+Manage plugin sources:
 
-- View all configured marketplaces
-- See plugin counts per marketplace
-- Check last update times
+- **Add** marketplace with `a` key (supports GitHub shorthand, Git URLs, local paths)
+- **Remove** marketplace with `d` key (with confirmation)
+- **Update** marketplace catalog with `r` key
+- Search marketplaces with `/`
+- View plugin counts and last update times
 
 ### Errors
 
@@ -198,8 +218,8 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 ## Local Development
 
 ```bash
-git clone https://github.com/laststance/claude-code-plugin-dashboard.git
-cd claude-code-plugin-dashboard
+git clone https://github.com/laststance/claude-plugin-dashboard.git
+cd claude-plugin-dashboard
 pnpm install
 pnpm build
 pnpm start
@@ -224,6 +244,24 @@ MIT © [Laststance.io](https://github.com/laststance)
 
 ## Changelog
 
+### v0.2.0
+
+- **Enabled tab**: New default view showing active plugins (installed AND enabled)
+- **Focus zone navigation**: 3-zone keyboard model (TabBar → Search → List)
+- **Emacs keybindings**: `Ctrl+B`/`Ctrl+F` for horizontal tab switching
+- **Marketplace management**: Add (`a`), remove (`d`), update (`r`) plugin sources
+- **Search on all tabs**: `/` now works on Enabled, Installed, and Marketplaces tabs
+- **Help overlay**: Press `h` to show all keyboard shortcuts
+- **Context-aware Enter**: Installs on Discover, toggles on Installed/Enabled
+- **Plugin component types**: Show component types (skill, hook, agent) in detail view
+- **CI/CD**: GitHub Actions workflow for lint, test, and build
+- **96.67% test coverage**: Comprehensive Vitest and E2E test suites
+
+### v0.1.1
+
+- Fix: Clear terminal screen when exiting dashboard
+- Fix: Repository URL in package.json
+
 ### v0.1.0
 
 - Initial release

package/dist/app.d.ts

@@ -19,7 +19,12 @@ export declare function getAvailableZones(activeTab: AppState['activeTab']): Foc
  */
 export declare function appReducer(state: AppState, action: Action): AppState;
 /**
- * Get items array for current tab
+ * Get items array for current tab with search filter applied
+ * @param state - Current app state
+ * @returns Filtered array of items for the active tab
+ * @example
+ * getItemsForTab({ activeTab: 'installed', searchQuery: 'su', plugins: [...] })
+ * // => Only installed plugins matching 'su'
  */
 export declare function getItemsForTab(state: AppState): unknown[];
 /**

package/dist/app.js

@@ -15,6 +15,8 @@ import ErrorsTab from './tabs/ErrorsTab.js';
 import { loadAllPlugins, loadMarketplaces, searchPlugins, searchMarketplaces, sortPlugins, } from './services/pluginService.js';
 import { togglePlugin } from './services/settingsService.js';
 import { installPlugin, uninstallPlugin, } from './services/pluginActionsService.js';
+import { addMarketplace, removeMarketplace, updateMarketplace, } from './services/marketplaceActionsService.js';
+import AddMarketplaceDialog from './components/AddMarketplaceDialog.js';
 import ConfirmDialog from './components/ConfirmDialog.js';
 import HelpOverlay from './components/HelpOverlay.js';
 import packageJson from '../package.json' with { type: 'json' };
@@ -38,6 +40,11 @@ export const initialState = {
     operationPluginId: null,
     confirmUninstall: false,
     showHelp: false,
+    marketplaceOperation: 'idle',
+    operationMarketplaceId: null,
+    confirmRemoveMarketplace: false,
+    showAddMarketplaceDialog: false,
+    addMarketplaceError: null,
 };
 /**
  * Get available focus zones for the current tab
@@ -51,6 +58,24 @@ export function getAvailableZones(activeTab) {
     }
     return ['tabbar', 'search', 'list'];
 }
+/**
+ * Get display message for marketplace operation status
+ * @param operation - The marketplace operation type
+ * @param marketplaceId - Optional marketplace identifier
+ * @returns Display message for the operation
+ */
+function getMarketplaceOperationMessage(operation, marketplaceId) {
+    switch (operation) {
+        case 'adding':
+            return 'Adding marketplace...';
+        case 'removing':
+            return `Removing ${marketplaceId}...`;
+        case 'updating':
+            return `Updating ${marketplaceId || 'marketplaces'}...`;
+        default:
+            return '';
+    }
+}
 /**
  * State reducer for application state management
  */
@@ -210,19 +235,76 @@ export function appReducer(state, action) {
                 ...state,
                 showHelp: !state.showHelp,
             };
+        case 'SHOW_CONFIRM_REMOVE_MARKETPLACE':
+            return {
+                ...state,
+                confirmRemoveMarketplace: true,
+                operationMarketplaceId: action.payload,
+            };
+        case 'HIDE_CONFIRM_REMOVE_MARKETPLACE':
+            return {
+                ...state,
+                confirmRemoveMarketplace: false,
+                operationMarketplaceId: null,
+            };
+        case 'SHOW_ADD_MARKETPLACE_DIALOG':
+            return {
+                ...state,
+                showAddMarketplaceDialog: true,
+                searchQuery: '', // Reuse searchQuery for dialog input
+                addMarketplaceError: null, // Clear previous error
+            };
+        case 'HIDE_ADD_MARKETPLACE_DIALOG':
+            return {
+                ...state,
+                showAddMarketplaceDialog: false,
+                searchQuery: '',
+                addMarketplaceError: null,
+            };
+        case 'SET_ADD_MARKETPLACE_ERROR':
+            return {
+                ...state,
+                addMarketplaceError: action.payload,
+            };
+        case 'START_MARKETPLACE_OPERATION':
+            return {
+                ...state,
+                marketplaceOperation: action.payload.operation,
+                operationMarketplaceId: action.payload.marketplaceId ?? null,
+                message: getMarketplaceOperationMessage(action.payload.operation, action.payload.marketplaceId),
+            };
+        case 'END_MARKETPLACE_OPERATION':
+            return {
+                ...state,
+                marketplaceOperation: 'idle',
+                operationMarketplaceId: null,
+            };
         default:
             return state;
     }
 }
 /**
- * Get items array for current tab
+ * Get items array for current tab with search filter applied
+ * @param state - Current app state
+ * @returns Filtered array of items for the active tab
+ * @example
+ * getItemsForTab({ activeTab: 'installed', searchQuery: 'su', plugins: [...] })
+ * // => Only installed plugins matching 'su'
  */
 export function getItemsForTab(state) {
     switch (state.activeTab) {
-        case 'enabled':
-            return state.plugins.filter((p) => p.isInstalled && p.isEnabled);
-        case 'installed':
-            return state.plugins.filter((p) => p.isInstalled);
+        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':
@@ -313,10 +395,103 @@ export default function App() {
             });
         }
     }
+    /**
+     * Handle adding a new marketplace
+     * @param source - Marketplace source (e.g., "owner/repo", URL, or local path)
+     */
+    async function handleAddMarketplace(source) {
+        dispatch({
+            type: 'START_MARKETPLACE_OPERATION',
+            payload: { operation: 'adding' },
+        });
+        const result = await addMarketplace(source);
+        dispatch({ type: 'END_MARKETPLACE_OPERATION' });
+        if (result.success) {
+            dispatch({ type: 'HIDE_ADD_MARKETPLACE_DIALOG' });
+            // Reload marketplaces to get fresh state
+            const marketplaces = loadMarketplaces();
+            dispatch({ type: 'SET_MARKETPLACES', payload: marketplaces });
+            // Also reload plugins as new marketplace may have plugins
+            const plugins = loadAllPlugins();
+            dispatch({ type: 'SET_PLUGINS', payload: plugins });
+            // Reset selection to avoid pointing to a different marketplace after re-sort
+            dispatch({ type: 'SET_SELECTED_INDEX', payload: 0 });
+            dispatch({ type: 'SET_MESSAGE', payload: `✅ ${result.message}` });
+        }
+        else {
+            // Keep dialog open and show error inline
+            dispatch({
+                type: 'SET_ADD_MARKETPLACE_ERROR',
+                payload: result.error || result.message,
+            });
+        }
+    }
+    /**
+     * Handle removing a marketplace
+     * @param marketplaceId - Marketplace identifier to remove
+     */
+    async function handleRemoveMarketplace(marketplaceId) {
+        dispatch({
+            type: 'START_MARKETPLACE_OPERATION',
+            payload: { operation: 'removing', marketplaceId },
+        });
+        const result = await removeMarketplace(marketplaceId);
+        dispatch({ type: 'END_MARKETPLACE_OPERATION' });
+        if (result.success) {
+            // Reload marketplaces to get fresh state
+            const marketplaces = loadMarketplaces();
+            dispatch({ type: 'SET_MARKETPLACES', payload: marketplaces });
+            // Also reload plugins as removed marketplace's plugins should be gone
+            const plugins = loadAllPlugins();
+            dispatch({ type: 'SET_PLUGINS', payload: plugins });
+            dispatch({ type: 'SET_MESSAGE', payload: `✅ ${result.message}` });
+            // Reset selection if needed
+            if (state.selectedIndex >= marketplaces.length) {
+                dispatch({
+                    type: 'SET_SELECTED_INDEX',
+                    payload: Math.max(0, marketplaces.length - 1),
+                });
+            }
+        }
+        else {
+            dispatch({
+                type: 'SET_MESSAGE',
+                payload: `❌ ${result.message}${result.error ? `: ${result.error}` : ''}`,
+            });
+        }
+    }
+    /**
+     * Handle updating a marketplace (or all marketplaces)
+     * @param marketplaceId - Optional marketplace identifier. If omitted, updates all.
+     */
+    async function handleUpdateMarketplace(marketplaceId) {
+        dispatch({
+            type: 'START_MARKETPLACE_OPERATION',
+            payload: { operation: 'updating', marketplaceId },
+        });
+        const result = await updateMarketplace(marketplaceId);
+        dispatch({ type: 'END_MARKETPLACE_OPERATION' });
+        if (result.success) {
+            // Reload marketplaces and plugins to get fresh state
+            const marketplaces = loadMarketplaces();
+            dispatch({ type: 'SET_MARKETPLACES', payload: marketplaces });
+            const plugins = loadAllPlugins();
+            dispatch({ type: 'SET_PLUGINS', payload: plugins });
+            // Reset selection to avoid pointing to a different marketplace after re-sort
+            dispatch({ type: 'SET_SELECTED_INDEX', payload: 0 });
+            dispatch({ type: 'SET_MESSAGE', payload: `✅ ${result.message}` });
+        }
+        else {
+            dispatch({
+                type: 'SET_MESSAGE',
+                payload: `❌ ${result.message}${result.error ? `: ${result.error}` : ''}`,
+            });
+        }
+    }
     // Keyboard input handling
     useInput((input, key) => {
-        // Block all input during operations
-        if (state.operation !== 'idle') {
+        // Block all input during operations (plugin or marketplace)
+        if (state.operation !== 'idle' || state.marketplaceOperation !== 'idle') {
             return;
         }
         // Handle help overlay
@@ -336,7 +511,7 @@ export default function App() {
             dispatch({ type: 'TOGGLE_HELP' });
             return;
         }
-        // Handle confirmation dialog
+        // Handle plugin uninstall confirmation dialog
         if (state.confirmUninstall && state.operationPluginId) {
             if (input === 'y' || input === 'Y') {
                 dispatch({ type: 'HIDE_CONFIRM_UNINSTALL' });
@@ -350,6 +525,51 @@ export default function App() {
             }
             return;
         }
+        // Handle marketplace remove confirmation dialog
+        if (state.confirmRemoveMarketplace && state.operationMarketplaceId) {
+            if (input === 'y' || input === 'Y') {
+                dispatch({ type: 'HIDE_CONFIRM_REMOVE_MARKETPLACE' });
+                handleRemoveMarketplace(state.operationMarketplaceId);
+                return;
+            }
+            if (input === 'n' || input === 'N' || key.escape) {
+                dispatch({ type: 'HIDE_CONFIRM_REMOVE_MARKETPLACE' });
+                dispatch({ type: 'SET_MESSAGE', payload: 'Remove cancelled' });
+                return;
+            }
+            return;
+        }
+        // Handle add marketplace dialog input
+        if (state.showAddMarketplaceDialog) {
+            // Submit on Enter
+            if (key.return && state.searchQuery.trim()) {
+                handleAddMarketplace(state.searchQuery.trim());
+                return;
+            }
+            // Cancel on Escape
+            if (key.escape) {
+                dispatch({ type: 'HIDE_ADD_MARKETPLACE_DIALOG' });
+                dispatch({ type: 'SET_MESSAGE', payload: 'Add marketplace cancelled' });
+                return;
+            }
+            // Backspace
+            if (key.backspace || key.delete) {
+                dispatch({
+                    type: 'SET_SEARCH_QUERY',
+                    payload: 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,
+                });
+                return;
+            }
+            return;
+        }
         // Search mode input (when focusZone is 'search')
         if (state.focusZone === 'search') {
             // Up arrow: move focus to tabbar
@@ -453,11 +673,7 @@ export default function App() {
             (state.activeTab === 'enabled' ||
                 state.activeTab === 'installed' ||
                 state.activeTab === 'discover')) {
-            const items = state.activeTab === 'enabled'
-                ? state.plugins.filter((p) => p.isInstalled && p.isEnabled)
-                : state.activeTab === 'installed'
-                    ? state.plugins.filter((p) => p.isInstalled)
-                    : getFilteredPlugins(state);
+            const items = getItemsForTab(state);
             const selectedPlugin = items[state.selectedIndex];
             if (selectedPlugin) {
                 if (!selectedPlugin.isInstalled) {
@@ -494,11 +710,7 @@ export default function App() {
             (state.activeTab === 'enabled' ||
                 state.activeTab === 'installed' ||
                 state.activeTab === 'discover')) {
-            const items = state.activeTab === 'enabled'
-                ? state.plugins.filter((p) => p.isInstalled && p.isEnabled)
-                : state.activeTab === 'installed'
-                    ? state.plugins.filter((p) => p.isInstalled)
-                    : getFilteredPlugins(state);
+            const items = getItemsForTab(state);
             const selectedPlugin = items[state.selectedIndex];
             if (selectedPlugin && selectedPlugin.isInstalled) {
                 try {
@@ -552,16 +764,43 @@ export default function App() {
             dispatch({ type: 'SET_SEARCH_QUERY', payload: '' });
             return;
         }
+        // Marketplace-specific key bindings
+        if (state.activeTab === 'marketplaces' && state.focusZone === 'list') {
+            // Add marketplace (a key)
+            if (input === 'a') {
+                dispatch({ type: 'SHOW_ADD_MARKETPLACE_DIALOG' });
+                return;
+            }
+            // Remove marketplace (d key or Backspace)
+            if (input === 'd' || key.backspace || key.delete) {
+                const selectedMarketplace = filteredMarketplaces[state.selectedIndex];
+                if (selectedMarketplace) {
+                    dispatch({
+                        type: 'SHOW_CONFIRM_REMOVE_MARKETPLACE',
+                        payload: selectedMarketplace.id,
+                    });
+                }
+                return;
+            }
+            // Update marketplace (u key)
+            if (input === 'u') {
+                const selectedMarketplace = filteredMarketplaces[state.selectedIndex];
+                if (selectedMarketplace) {
+                    handleUpdateMarketplace(selectedMarketplace.id);
+                }
+                else {
+                    // No marketplace selected, update all
+                    handleUpdateMarketplace();
+                }
+                return;
+            }
+        }
         // Install (i key) - only on enabled/installed/discover tabs
         if (input === 'i' &&
             (state.activeTab === 'enabled' ||
                 state.activeTab === 'installed' ||
                 state.activeTab === 'discover')) {
-            const items = state.activeTab === 'enabled'
-                ? state.plugins.filter((p) => p.isInstalled && p.isEnabled)
-                : state.activeTab === 'installed'
-                    ? state.plugins.filter((p) => p.isInstalled)
-                    : getFilteredPlugins(state);
+            const items = getItemsForTab(state);
             const selectedPlugin = items[state.selectedIndex];
             if (selectedPlugin && !selectedPlugin.isInstalled) {
                 handleInstall(selectedPlugin.id);
@@ -579,11 +818,7 @@ export default function App() {
             (state.activeTab === 'enabled' ||
                 state.activeTab === 'installed' ||
                 state.activeTab === 'discover')) {
-            const items = state.activeTab === 'enabled'
-                ? state.plugins.filter((p) => p.isInstalled && p.isEnabled)
-                : state.activeTab === 'installed'
-                    ? state.plugins.filter((p) => p.isInstalled)
-                    : getFilteredPlugins(state);
+            const items = getItemsForTab(state);
             const selectedPlugin = items[state.selectedIndex];
             if (selectedPlugin && selectedPlugin.isInstalled) {
                 dispatch({ type: 'SHOW_CONFIRM_UNINSTALL', payload: selectedPlugin.id });
@@ -618,7 +853,7 @@ 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}?` })), _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: (() => {
+    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;
@@ -661,7 +896,12 @@ export default function App() {
                     }
                     // Marketplaces tab hints
                     if (state.activeTab === 'marketplaces') {
-                        return [{ key: '/', action: 'search' }];
+                        return [
+                            { key: '/', action: 'search' },
+                            { key: 'a', action: 'add' },
+                            { key: 'd', action: 'remove' },
+                            { key: 'u', action: 'update' },
+                        ];
                     }
                     return undefined;
                 })() })] }));

package/dist/components/AddMarketplaceDialog.d.ts

@@ -0,0 +1,20 @@
+/**
+ * AddMarketplaceDialog component
+ * Dialog for adding a new marketplace source
+ */
+export interface AddMarketplaceDialogProps {
+    /** Current input value */
+    value: string;
+    /** Error message to display (if any) */
+    error?: string;
+}
+/**
+ * Dialog for adding a new marketplace
+ * Displays input field with format hints
+ * @param value - Current input value (controlled by parent)
+ * @param error - Error message to display
+ * @returns Dialog component
+ * @example
+ * <AddMarketplaceDialog value={inputValue} />
+ */
+export default function AddMarketplaceDialog({ value, error, }: AddMarketplaceDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AddMarketplaceDialog.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AddMarketplaceDialog component
+ * Dialog for adding a new marketplace source
+ */
+import { Box, Text } from 'ink';
+/**
+ * Dialog for adding a new marketplace
+ * Displays input field with format hints
+ * @param value - Current input value (controlled by parent)
+ * @param error - Error message to display
+ * @returns Dialog component
+ * @example
+ * <AddMarketplaceDialog value={inputValue} />
+ */
+export default function AddMarketplaceDialog({ value, error, }) {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: "cyan", paddingX: 2, paddingY: 1, marginTop: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Add Marketplace" }) }), _jsx(Text, { children: "Enter marketplace source:" }), _jsxs(Box, { borderStyle: "round", borderColor: "cyan", paddingX: 1, marginY: 1, children: [value ? _jsx(Text, { children: value }) : _jsx(Text, { dimColor: true, children: "owner/repo" }), _jsx(Text, { color: "cyan", children: "\u258C" })] }), error && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "red", children: error }) })), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Supported formats:" }), _jsx(Text, { dimColor: true, children: " \u2022 owner/repo (GitHub)" }), _jsx(Text, { dimColor: true, children: " \u2022 https://github.com/org/repo" }), _jsx(Text, { dimColor: true, children: " \u2022 ./local-path" })] }), _jsxs(Box, { gap: 2, children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "[" }), _jsx(Text, { color: "red", children: "ESC" }), _jsx(Text, { dimColor: true, children: "] Cancel" })] }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "[" }), _jsx(Text, { color: "green", children: "Enter" }), _jsx(Text, { dimColor: true, children: "] Add" })] })] })] }));
+}

package/dist/components/ComponentBadges.d.ts

@@ -0,0 +1,32 @@
+/**
+ * ComponentBadges component
+ * Displays plugin component type badges with icons and counts
+ * Icons: Skills(S), Commands(/), Agents(@), Hooks(H), MCP(M), LSP(L)
+ */
+import type { PluginComponents } from '../types/index.js';
+/**
+ * Props for ComponentBadges
+ */
+export interface ComponentBadgesProps {
+    /** Component counts/flags from plugin */
+    components: PluginComponents | undefined;
+}
+/**
+ * Displays component type badges for a plugin
+ * Only shows badges for components that exist
+ * @param components - PluginComponents object with counts/flags
+ * @returns Badges component or null if no components
+ * @example
+ * <ComponentBadges components={{ skills: 5, commands: 2 }} />
+ * // Renders: [S:5] [/:2]
+ */
+export default function ComponentBadges({ components, }: ComponentBadgesProps): React.ReactNode;
+/**
+ * Get a human-readable description of component types
+ * @param components - PluginComponents object
+ * @returns Formatted string describing components
+ * @example
+ * getComponentsDescription({ skills: 3, mcpServers: 1 })
+ * // => "3 skills, 1 MCP server"
+ */
+export declare function getComponentsDescription(components: PluginComponents | undefined): string;

package/dist/components/ComponentBadges.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ComponentBadges component
+ * Displays plugin component type badges with icons and counts
+ * Icons: Skills(S), Commands(/), Agents(@), Hooks(H), MCP(M), LSP(L)
+ */
+import { Box, Text } from 'ink';
+/**
+ * Badge configurations with intuitive abbreviations and colors
+ */
+const BADGE_CONFIGS = [
+    { label: 'S', color: 'magenta', key: 'skills' },
+    { label: '/', color: 'cyan', key: 'commands' },
+    { label: '@', color: 'blue', key: 'agents' },
+    { label: 'H', color: 'yellow', key: 'hooks', isBoolean: true },
+    { label: 'M', color: 'green', key: 'mcpServers' },
+    { label: 'L', color: 'blueBright', key: 'lspServers' },
+];
+/**
+ * Displays component type badges for a plugin
+ * Only shows badges for components that exist
+ * @param components - PluginComponents object with counts/flags
+ * @returns Badges component or null if no components
+ * @example
+ * <ComponentBadges components={{ skills: 5, commands: 2 }} />
+ * // Renders: [S:5] [/:2]
+ */
+export default function ComponentBadges({ components, }) {
+    if (!components) {
+        return null;
+    }
+    const badges = BADGE_CONFIGS.filter((config) => {
+        const value = components[config.key];
+        if (config.isBoolean) {
+            return value === true;
+        }
+        return typeof value === 'number' && value > 0;
+    });
+    if (badges.length === 0) {
+        return null;
+    }
+    return (_jsx(Box, { gap: 1, flexWrap: "wrap", children: badges.map((config) => (_jsx(Badge, { label: config.label, count: config.isBoolean ? undefined : components[config.key], color: config.color }, config.key))) }));
+}
+/**
+ * Single badge component
+ */
+function Badge({ label, count, color, }) {
+    return (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "[" }), _jsx(Text, { color: color, bold: true, children: label }), count !== undefined && _jsxs(Text, { dimColor: true, children: [":", count] }), _jsx(Text, { dimColor: true, children: "]" })] }));
+}
+/**
+ * Get a human-readable description of component types
+ * @param components - PluginComponents object
+ * @returns Formatted string describing components
+ * @example
+ * getComponentsDescription({ skills: 3, mcpServers: 1 })
+ * // => "3 skills, 1 MCP server"
+ */
+export function getComponentsDescription(components) {
+    if (!components) {
+        return '';
+    }
+    const parts = [];
+    if (components.skills) {
+        parts.push(`${components.skills} skill${components.skills > 1 ? 's' : ''}`);
+    }
+    if (components.commands) {
+        parts.push(`${components.commands} command${components.commands > 1 ? 's' : ''}`);
+    }
+    if (components.agents) {
+        parts.push(`${components.agents} agent${components.agents > 1 ? 's' : ''}`);
+    }
+    if (components.hooks) {
+        parts.push('hooks');
+    }
+    if (components.mcpServers) {
+        parts.push(`${components.mcpServers} MCP server${components.mcpServers > 1 ? 's' : ''}`);
+    }
+    if (components.lspServers) {
+        parts.push(`${components.lspServers} LSP server${components.lspServers > 1 ? 's' : ''}`);
+    }
+    return parts.join(', ');
+}

package/dist/components/PluginDetail.js

@@ -5,6 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Box, Text } from 'ink';
 import StatusIcon from './StatusIcon.js';
+import ComponentBadges from './ComponentBadges.js';
 /**
  * Displays detailed information about a selected plugin
  * @example
@@ -14,7 +15,7 @@ export default function PluginDetail({ plugin }) {
     if (!plugin) {
         return (_jsx(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "gray", children: _jsx(Text, { dimColor: true, children: "Select a plugin to view details" }) }));
     }
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "cyan", children: [_jsxs(Box, { marginBottom: 1, gap: 1, children: [_jsx(StatusIcon, { isInstalled: plugin.isInstalled, isEnabled: plugin.isEnabled }), _jsx(Text, { bold: true, color: "cyan", children: plugin.name })] }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { wrap: "wrap", children: plugin.description || 'No description available' }) }), _jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(DetailRow, { label: "Marketplace", value: plugin.marketplace }), _jsx(DetailRow, { label: "Version", value: plugin.version }), _jsx(DetailRow, { label: "Installs", value: formatCount(plugin.installCount) }), plugin.category && (_jsx(DetailRow, { label: "Category", value: plugin.category })), plugin.author && (_jsx(DetailRow, { label: "Author", value: plugin.author.name })), plugin.homepage && (_jsx(DetailRow, { label: "Homepage", value: plugin.homepage }))] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { children: "Status:" }), plugin.isInstalled ? (plugin.isEnabled ? (_jsx(Text, { color: "green", bold: true, children: "Installed & Enabled" })) : (_jsx(Text, { color: "yellow", bold: true, children: "Installed & Disabled" }))) : (_jsx(Text, { color: "gray", children: "Not Installed" }))] }), plugin.installedAt && (_jsxs(Text, { dimColor: true, children: ["Installed: ", formatDate(plugin.installedAt)] }))] }), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, flexDirection: "column", children: plugin.isInstalled ? (_jsx(Box, { flexDirection: "column", children: _jsxs(Text, { dimColor: true, children: [_jsx(Text, { bold: true, color: "white", children: "Space" }), ' ', plugin.isEnabled ? 'disable' : 'enable', " |", ' ', _jsx(Text, { bold: true, color: "white", children: "u" }), ' ', "uninstall"] }) })) : (_jsxs(Text, { dimColor: true, children: [_jsx(Text, { bold: true, color: "white", children: "i" }), ' ', "install"] })) })] }));
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "cyan", children: [_jsxs(Box, { marginBottom: 1, gap: 1, children: [_jsx(StatusIcon, { isInstalled: plugin.isInstalled, isEnabled: plugin.isEnabled }), _jsx(Text, { bold: true, color: "cyan", children: plugin.name })] }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { wrap: "wrap", children: plugin.description || 'No description available' }) }), _jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(DetailRow, { label: "Marketplace", value: plugin.marketplace }), _jsx(DetailRow, { label: "Version", value: plugin.version }), _jsx(DetailRow, { label: "Installs", value: formatCount(plugin.installCount) }), plugin.category && (_jsx(DetailRow, { label: "Category", value: plugin.category })), plugin.author && (_jsx(DetailRow, { label: "Author", value: plugin.author.name })), plugin.homepage && (_jsx(DetailRow, { label: "Homepage", value: plugin.homepage })), plugin.components && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "gray", children: "Components:" }), _jsx(ComponentBadges, { components: plugin.components })] }))] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { children: "Status:" }), plugin.isInstalled ? (plugin.isEnabled ? (_jsx(Text, { color: "green", bold: true, children: "Installed & Enabled" })) : (_jsx(Text, { color: "yellow", bold: true, children: "Installed & Disabled" }))) : (_jsx(Text, { color: "gray", children: "Not Installed" }))] }), plugin.installedAt && (_jsxs(Text, { dimColor: true, children: ["Installed: ", formatDate(plugin.installedAt)] }))] }), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, flexDirection: "column", children: plugin.isInstalled ? (_jsx(Box, { flexDirection: "column", children: _jsxs(Text, { dimColor: true, children: [_jsx(Text, { bold: true, color: "white", children: "Space" }), ' ', plugin.isEnabled ? 'disable' : 'enable', " |", ' ', _jsx(Text, { bold: true, color: "white", children: "u" }), ' ', "uninstall"] }) })) : (_jsxs(Text, { dimColor: true, children: [_jsx(Text, { bold: true, color: "white", children: "i" }), ' ', "install"] })) })] }));
 }
 /**
  * Single detail row with label and value

package/dist/services/componentService.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Component service for detecting plugin component types
+ * Parses plugin.json and scans plugin directory structure to identify
+ * skills, commands, agents, hooks, MCP servers, and LSP servers
+ */
+import type { PluginComponents } from '../types/index.js';
+/**
+ * Detect all component types for a plugin at the given install path
+ * @param installPath - Absolute path to the installed plugin directory
+ * @returns PluginComponents object with detected component counts
+ * - Returns undefined values for components that are not present
+ * - Returns counts > 0 for components that exist
+ * @example
+ * const components = detectPluginComponents('/path/to/plugin')
+ * // => { skills: 5, commands: 2, mcpServers: 1 }
+ */
+export declare function detectPluginComponents(installPath: string): PluginComponents | undefined;
+/**
+ * Check if a plugin has any components
+ * @param components - PluginComponents object
+ * @returns true if at least one component type is present
+ * @example
+ * hasAnyComponents({ skills: 2 }) // => true
+ * hasAnyComponents({}) // => false
+ * hasAnyComponents(undefined) // => false
+ */
+export declare function hasAnyComponents(components: PluginComponents | undefined): boolean;
+/**
+ * Get total component count for a plugin
+ * @param components - PluginComponents object
+ * @returns Total number of components (hooks count as 1)
+ * @example
+ * getTotalComponentCount({ skills: 3, commands: 2, hooks: true }) // => 6
+ */
+export declare function getTotalComponentCount(components: PluginComponents | undefined): number;

package/dist/services/componentService.js

@@ -0,0 +1,178 @@
+/**
+ * Component service for detecting plugin component types
+ * Parses plugin.json and scans plugin directory structure to identify
+ * skills, commands, agents, hooks, MCP servers, and LSP servers
+ */
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { readJsonFile, directoryExists, fileExists } from './fileService.js';
+/**
+ * Detect all component types for a plugin at the given install path
+ * @param installPath - Absolute path to the installed plugin directory
+ * @returns PluginComponents object with detected component counts
+ * - Returns undefined values for components that are not present
+ * - Returns counts > 0 for components that exist
+ * @example
+ * const components = detectPluginComponents('/path/to/plugin')
+ * // => { skills: 5, commands: 2, mcpServers: 1 }
+ */
+export function detectPluginComponents(installPath) {
+    if (!directoryExists(installPath)) {
+        return undefined;
+    }
+    const components = {};
+    // Detect skills (count directories in skills/ folder)
+    const skillsCount = countSkills(installPath);
+    if (skillsCount > 0) {
+        components.skills = skillsCount;
+    }
+    // Detect commands (count .md files in commands/ folder)
+    const commandsCount = countMarkdownFiles(installPath, 'commands');
+    if (commandsCount > 0) {
+        components.commands = commandsCount;
+    }
+    // Detect agents (count .md files in agents/ folder)
+    const agentsCount = countMarkdownFiles(installPath, 'agents');
+    if (agentsCount > 0) {
+        components.agents = agentsCount;
+    }
+    // Detect hooks
+    const hasHooks = detectHooks(installPath);
+    if (hasHooks) {
+        components.hooks = true;
+    }
+    // Detect MCP servers from plugin.json
+    const mcpCount = countMcpServers(installPath);
+    if (mcpCount > 0) {
+        components.mcpServers = mcpCount;
+    }
+    // Detect LSP servers from .lsp.json
+    const lspCount = countLspServers(installPath);
+    if (lspCount > 0) {
+        components.lspServers = lspCount;
+    }
+    // Return undefined if no components detected
+    if (Object.keys(components).length === 0) {
+        return undefined;
+    }
+    return components;
+}
+/**
+ * Count skill directories in the skills/ folder
+ * Skills are stored as subdirectories with SKILL.md files
+ * @param installPath - Plugin install path
+ * @returns Number of skill directories
+ */
+function countSkills(installPath) {
+    const skillsPath = path.join(installPath, 'skills');
+    if (!directoryExists(skillsPath)) {
+        return 0;
+    }
+    try {
+        const entries = fs.readdirSync(skillsPath, { withFileTypes: true });
+        return entries.filter((entry) => entry.isDirectory()).length;
+    }
+    catch {
+        return 0;
+    }
+}
+/**
+ * Count .md files in a specific directory
+ * @param installPath - Plugin install path
+ * @param subdir - Subdirectory name ('commands' or 'agents')
+ * @returns Number of .md files
+ */
+function countMarkdownFiles(installPath, subdir) {
+    const dirPath = path.join(installPath, subdir);
+    if (!directoryExists(dirPath)) {
+        return 0;
+    }
+    try {
+        const files = fs.readdirSync(dirPath);
+        return files.filter((file) => file.endsWith('.md')).length;
+    }
+    catch {
+        return 0;
+    }
+}
+/**
+ * Detect if plugin has hooks configured
+ * Checks for hooks/ directory or hooks.json file
+ * @param installPath - Plugin install path
+ * @returns true if hooks are configured
+ */
+function detectHooks(installPath) {
+    const hooksDir = path.join(installPath, 'hooks');
+    const hooksJson = path.join(installPath, 'hooks.json');
+    return directoryExists(hooksDir) || fileExists(hooksJson);
+}
+/**
+ * Count MCP servers defined in plugin.json
+ * @param installPath - Plugin install path
+ * @returns Number of MCP server configurations
+ */
+function countMcpServers(installPath) {
+    // Check both .claude-plugin/plugin.json and plugin.json at root
+    const pluginJsonPaths = [
+        path.join(installPath, '.claude-plugin', 'plugin.json'),
+        path.join(installPath, 'plugin.json'),
+    ];
+    for (const pluginJsonPath of pluginJsonPaths) {
+        const pluginJson = readJsonFile(pluginJsonPath);
+        if (pluginJson?.mcpServers) {
+            return Object.keys(pluginJson.mcpServers).length;
+        }
+    }
+    return 0;
+}
+/**
+ * Count LSP servers defined in .lsp.json
+ * @param installPath - Plugin install path
+ * @returns Number of LSP server configurations
+ */
+function countLspServers(installPath) {
+    const lspJsonPath = path.join(installPath, '.lsp.json');
+    const lspConfig = readJsonFile(lspJsonPath);
+    if (!lspConfig) {
+        return 0;
+    }
+    return Object.keys(lspConfig).length;
+}
+/**
+ * Check if a plugin has any components
+ * @param components - PluginComponents object
+ * @returns true if at least one component type is present
+ * @example
+ * hasAnyComponents({ skills: 2 }) // => true
+ * hasAnyComponents({}) // => false
+ * hasAnyComponents(undefined) // => false
+ */
+export function hasAnyComponents(components) {
+    if (!components) {
+        return false;
+    }
+    return ((components.skills ?? 0) > 0 ||
+        (components.commands ?? 0) > 0 ||
+        (components.agents ?? 0) > 0 ||
+        components.hooks === true ||
+        (components.mcpServers ?? 0) > 0 ||
+        (components.lspServers ?? 0) > 0);
+}
+/**
+ * Get total component count for a plugin
+ * @param components - PluginComponents object
+ * @returns Total number of components (hooks count as 1)
+ * @example
+ * getTotalComponentCount({ skills: 3, commands: 2, hooks: true }) // => 6
+ */
+export function getTotalComponentCount(components) {
+    if (!components) {
+        return 0;
+    }
+    return ((components.skills ?? 0) +
+        (components.commands ?? 0) +
+        (components.agents ?? 0) +
+        (components.hooks ? 1 : 0) +
+        (components.mcpServers ?? 0) +
+        (components.lspServers ?? 0));
+}

package/dist/services/marketplaceActionsService.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Marketplace actions service for add/remove/update operations
+ * Executes `claude plugin marketplace <action>` as subprocess
+ */
+/**
+ * Result of a marketplace CLI action
+ */
+export interface MarketplaceActionResult {
+    success: boolean;
+    message: string;
+    error?: string;
+}
+/**
+ * Add a new marketplace via Claude CLI
+ * @param source - Marketplace source (e.g., "owner/repo", "https://...", "./local-path")
+ * @returns Promise resolving to action result
+ * @example
+ * // GitHub shorthand
+ * addMarketplace('anthropics/claude-plugins')
+ * // Git URL
+ * addMarketplace('https://github.com/org/plugins.git')
+ * // Local path
+ * addMarketplace('./my-marketplace')
+ */
+export declare function addMarketplace(source: string): Promise<MarketplaceActionResult>;
+/**
+ * Remove an existing marketplace via Claude CLI
+ * @param name - Marketplace name/identifier to remove
+ * @returns Promise resolving to action result
+ * @example
+ * removeMarketplace('my-marketplace')
+ */
+export declare function removeMarketplace(name: string): Promise<MarketplaceActionResult>;
+/**
+ * Update marketplace catalog(s) via Claude CLI
+ * @param name - Optional marketplace name. If omitted, updates all marketplaces.
+ * @returns Promise resolving to action result
+ * @example
+ * // Update specific marketplace
+ * updateMarketplace('claude-plugins-official')
+ * // Update all marketplaces
+ * updateMarketplace()
+ */
+export declare function updateMarketplace(name?: string): Promise<MarketplaceActionResult>;

package/dist/services/marketplaceActionsService.js

@@ -0,0 +1,92 @@
+/**
+ * Marketplace actions service for add/remove/update operations
+ * Executes `claude plugin marketplace <action>` as subprocess
+ */
+import { spawn } from 'node:child_process';
+/**
+ * Add a new marketplace via Claude CLI
+ * @param source - Marketplace source (e.g., "owner/repo", "https://...", "./local-path")
+ * @returns Promise resolving to action result
+ * @example
+ * // GitHub shorthand
+ * addMarketplace('anthropics/claude-plugins')
+ * // Git URL
+ * addMarketplace('https://github.com/org/plugins.git')
+ * // Local path
+ * addMarketplace('./my-marketplace')
+ */
+export function addMarketplace(source) {
+    return executeMarketplaceCommand(['plugin', 'marketplace', 'add', source], `Added marketplace: ${source}`, `Failed to add marketplace: ${source}`);
+}
+/**
+ * Remove an existing marketplace via Claude CLI
+ * @param name - Marketplace name/identifier to remove
+ * @returns Promise resolving to action result
+ * @example
+ * removeMarketplace('my-marketplace')
+ */
+export function removeMarketplace(name) {
+    return executeMarketplaceCommand(['plugin', 'marketplace', 'remove', name], `Removed marketplace: ${name}`, `Failed to remove marketplace: ${name}`);
+}
+/**
+ * Update marketplace catalog(s) via Claude CLI
+ * @param name - Optional marketplace name. If omitted, updates all marketplaces.
+ * @returns Promise resolving to action result
+ * @example
+ * // Update specific marketplace
+ * updateMarketplace('claude-plugins-official')
+ * // Update all marketplaces
+ * updateMarketplace()
+ */
+export function updateMarketplace(name) {
+    const args = ['plugin', 'marketplace', 'update'];
+    if (name) {
+        args.push(name);
+    }
+    return executeMarketplaceCommand(args, name ? `Updated ${name}` : 'Updated all marketplaces', `Failed to update ${name || 'marketplaces'}`);
+}
+/**
+ * Execute a marketplace CLI command with generic args and messages
+ * @param args - CLI arguments to pass to claude command
+ * @param successMessage - Message to return on success
+ * @param failureMessage - Message to return on failure
+ * @returns Promise resolving to action result
+ */
+function executeMarketplaceCommand(args, successMessage, failureMessage) {
+    return new Promise((resolve) => {
+        const child = spawn('claude', args, {
+            stdio: ['ignore', 'pipe', 'pipe'],
+            shell: false,
+        });
+        let stdout = '';
+        let stderr = '';
+        child.stdout?.on('data', (data) => {
+            stdout += data.toString();
+        });
+        child.stderr?.on('data', (data) => {
+            stderr += data.toString();
+        });
+        child.on('close', (code) => {
+            if (code === 0) {
+                resolve({
+                    success: true,
+                    message: successMessage,
+                });
+            }
+            else {
+                resolve({
+                    success: false,
+                    message: failureMessage,
+                    error: stderr || stdout || `Exit code: ${code}`,
+                });
+            }
+        });
+        child.on('error', (err) => {
+            resolve({
+                success: false,
+                message: 'Failed to execute claude command',
+                error: err.message,
+            });
+        });
+    });
+}

package/dist/services/pluginService.js

@@ -4,6 +4,7 @@
  */
 import { readJsonFile, directoryExists, listDirectories, } from './fileService.js';
 import { getEnabledPlugins } from './settingsService.js';
+import { detectPluginComponents } from './componentService.js';
 import { PATHS, getMarketplaceJsonPath } from '../utils/paths.js';
 /**
  * Load all plugins from all marketplaces
@@ -44,6 +45,10 @@ export function loadAllPlugins() {
                 for (const plugin of manifest.plugins) {
                     const pluginId = `${plugin.name}@${marketplace}`;
                     const installedEntry = installedMap.get(pluginId);
+                    // Detect components for installed plugins
+                    const components = installedEntry
+                        ? detectPluginComponents(installedEntry.installPath)
+                        : undefined;
                     plugins.push({
                         id: pluginId,
                         name: plugin.name,
@@ -61,6 +66,7 @@ export function loadAllPlugins() {
                         tags: plugin.tags || plugin.keywords,
                         isLocal: installedEntry?.isLocal,
                         gitCommitSha: installedEntry?.gitCommitSha,
+                        components,
                     });
                 }
             }

package/dist/types/index.d.ts

@@ -2,6 +2,26 @@
  * TypeScript interfaces for Claude Code Plugin Dashboard
  * These types aggregate data from multiple Claude Code configuration files
  */
+/**
+ * Component types provided by a plugin
+ * Detected by scanning plugin directory structure and plugin.json
+ * @example
+ * { skills: 5, commands: 2, mcpServers: 1 } // Plugin with skills, commands, and MCP
+ */
+export interface PluginComponents {
+    /** Count of skill directories in skills/ */
+    skills?: number;
+    /** Count of slash command .md files in commands/ */
+    commands?: number;
+    /** Count of subagent .md files in agents/ */
+    agents?: number;
+    /** Whether hooks are configured (hooks/ dir or hooks.json exists) */
+    hooks?: boolean;
+    /** Count of MCP server configurations in plugin.json mcpServers field */
+    mcpServers?: number;
+    /** Count of LSP server configurations in .lsp.json */
+    lspServers?: number;
+}
 /**
  * Aggregated plugin data from multiple sources
  * Combines data from settings.json, installed_plugins.json, marketplace.json, etc.
@@ -42,6 +62,8 @@ export interface Plugin {
     isLocal?: boolean;
     /** Git commit SHA (if installed) */
     gitCommitSha?: string;
+    /** Component types provided by this plugin (skills, commands, MCP, etc.) */
+    components?: PluginComponents;
 }
 /**
  * Raw installed plugin data from installed_plugins.json
@@ -157,6 +179,10 @@ export interface Settings {
  * Defines which UI area currently has keyboard focus
  */
 export type FocusZone = 'tabbar' | 'search' | 'list';
+/**
+ * Marketplace operation types
+ */
+export type MarketplaceOperation = 'idle' | 'adding' | 'removing' | 'updating';
 /**
  * Application state for useReducer
  */
@@ -193,6 +219,16 @@ export interface AppState {
     confirmUninstall: boolean;
     /** Whether help overlay is showing */
     showHelp: boolean;
+    /** Current marketplace operation */
+    marketplaceOperation: MarketplaceOperation;
+    /** Marketplace ID being operated on */
+    operationMarketplaceId: string | null;
+    /** Whether remove marketplace confirmation dialog is showing */
+    confirmRemoveMarketplace: boolean;
+    /** Whether add marketplace dialog is showing */
+    showAddMarketplaceDialog: boolean;
+    /** Error message for add marketplace dialog */
+    addMarketplaceError: string | null;
 }
 /**
  * Action types for useReducer
@@ -261,4 +297,24 @@ export type Action = {
 } | {
     type: 'SET_FOCUS_ZONE';
     payload: FocusZone;
+} | {
+    type: 'SHOW_CONFIRM_REMOVE_MARKETPLACE';
+    payload: string;
+} | {
+    type: 'HIDE_CONFIRM_REMOVE_MARKETPLACE';
+} | {
+    type: 'SHOW_ADD_MARKETPLACE_DIALOG';
+} | {
+    type: 'HIDE_ADD_MARKETPLACE_DIALOG';
+} | {
+    type: 'START_MARKETPLACE_OPERATION';
+    payload: {
+        operation: MarketplaceOperation;
+        marketplaceId?: string;
+    };
+} | {
+    type: 'END_MARKETPLACE_OPERATION';
+} | {
+    type: 'SET_ADD_MARKETPLACE_ERROR';
+    payload: string | null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laststance/claude-plugin-dashboard",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Interactive CLI dashboard to manage Claude Code plugins",
   "license": "MIT",
   "author": "Ryota Murakami <ryota.murakami@laststance.io> (https://github.com/ryota-murakami)",
@@ -65,4 +65,4 @@
     "typescript": "^5.7.2",
     "vitest": "^4.0.16"
   }
-}
+}