@laststance/claude-plugin-dashboard 0.2.2 → 0.3.0

package/README.md

@@ -32,7 +32,12 @@ Built with [Ink](https://github.com/vadimdemedes/ink) (React for CLI).
 ## Installation
 
 ```bash
-npm install -g @laststance/claude-plugin-dashboard
+npx @laststance/claude-plugin-dashboard@latest
+
+```
+
+```bash
+npm install -g @laststance/claude-plugin-dashboard@latest
 ```
 
 ## Usage
@@ -244,6 +249,17 @@ MIT © [Laststance.io](https://github.com/laststance)
 
 ## Changelog
 
+### v0.2.2
+
+- Claude Code v2.1.3 compatibility (unified Skills/Commands model)
+
+### v0.2.1
+
+- **Marketplace Management**: Add/remove/refresh marketplaces directly from dashboard
+- **Plugin Component Types**: Display skills, agents, hooks, MCP servers in detail view
+- **Bug Fix**: Search filter now works correctly in Enabled and Installed tabs
+- **CI/CD**: GitHub Actions workflow, CI and Codecov badges
+
 ### v0.2.0
 
 - **Enabled tab**: New default view showing active plugins (installed AND enabled)

package/dist/app.d.ts

@@ -2,7 +2,7 @@
  * Main App component for Claude Code Plugin Dashboard
  * Interactive TUI to browse and manage Claude Code plugins
  */
-import type { AppState, Action, Plugin, FocusZone } from './types/index.js';
+import type { AppState, Action, Plugin, Marketplace, FocusZone } from './types/index.js';
 /**
  * Initial application state
  */
@@ -31,6 +31,12 @@ export declare function getItemsForTab(state: AppState): unknown[];
  * Get filtered and sorted plugins for discover tab
  */
 export declare function getFilteredPlugins(state: AppState): Plugin[];
+/**
+ * Get filtered marketplaces based on search query
+ * @param state - Current app state
+ * @returns Filtered array of marketplaces
+ */
+export declare function getFilteredMarketplaces(state: AppState): Marketplace[];
 /**
  * Main App component
  */

package/dist/app.js

@@ -5,6 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useEffect, useReducer } from 'react';
 import { Box, Text, useInput, useApp } from 'ink';
+import { match, P } from 'ts-pattern';
 import TabBar, { getNextTab } from './components/TabBar.js';
 import KeyHints from './components/KeyHints.js';
 import DiscoverTab from './tabs/DiscoverTab.js';
@@ -15,7 +16,7 @@ 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 { 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';
@@ -45,6 +46,8 @@ export const initialState = {
     confirmRemoveMarketplace: false,
     showAddMarketplaceDialog: false,
     addMarketplaceError: null,
+    showMarketplaceActionMenu: false,
+    actionMenuSelectedIndex: 0,
 };
 /**
  * Get available focus zones for the current tab
@@ -65,16 +68,12 @@ export function getAvailableZones(activeTab) {
  * @returns Display message for the operation
  */
 function getMarketplaceOperationMessage(operation, marketplaceId) {
-    switch (operation) {
-        case 'adding':
-            return 'Adding marketplace...';
-        case 'removing':
-            return `Removing ${marketplaceId}...`;
-        case 'updating':
-            return `Updating ${marketplaceId || 'marketplaces'}...`;
-        default:
-            return '';
-    }
+    return match(operation)
+        .with('adding', () => 'Adding marketplace...')
+        .with('removing', () => `Removing ${marketplaceId}...`)
+        .with('updating', () => `Updating ${marketplaceId || 'marketplaces'}...`)
+        .with('idle', () => '')
+        .exhaustive();
 }
 /**
  * State reducer for application state management
@@ -89,6 +88,8 @@ export function appReducer(state, action) {
                 selectedIndex: 0,
                 searchQuery: '',
                 message: null,
+                showMarketplaceActionMenu: false,
+                actionMenuSelectedIndex: 0,
             };
         case 'NEXT_TAB':
             return {
@@ -98,6 +99,8 @@ export function appReducer(state, action) {
                 selectedIndex: 0,
                 searchQuery: '',
                 message: null,
+                showMarketplaceActionMenu: false,
+                actionMenuSelectedIndex: 0,
             };
         case 'PREV_TAB':
             return {
@@ -107,6 +110,8 @@ export function appReducer(state, action) {
                 selectedIndex: 0,
                 searchQuery: '',
                 message: null,
+                showMarketplaceActionMenu: false,
+                actionMenuSelectedIndex: 0,
             };
         case 'SET_FOCUS_ZONE':
             return {
@@ -279,6 +284,33 @@ export function appReducer(state, action) {
                 marketplaceOperation: 'idle',
                 operationMarketplaceId: null,
             };
+        case 'SHOW_MARKETPLACE_ACTION_MENU':
+            return {
+                ...state,
+                showMarketplaceActionMenu: true,
+                actionMenuSelectedIndex: 0,
+            };
+        case 'HIDE_MARKETPLACE_ACTION_MENU':
+            return {
+                ...state,
+                showMarketplaceActionMenu: false,
+                actionMenuSelectedIndex: 0,
+            };
+        case 'SET_ACTION_MENU_INDEX':
+            return {
+                ...state,
+                actionMenuSelectedIndex: action.payload,
+            };
+        case 'MOVE_ACTION_MENU_SELECTION': {
+            const maxIndex = 3; // 4 actions: browse, update, autoUpdate, remove
+            const newIndex = action.payload === 'up'
+                ? Math.max(0, state.actionMenuSelectedIndex - 1)
+                : Math.min(maxIndex, state.actionMenuSelectedIndex + 1);
+            return {
+                ...state,
+                actionMenuSelectedIndex: newIndex,
+            };
+        }
         default:
             return state;
     }
@@ -292,28 +324,23 @@ export function appReducer(state, action) {
  * // => Only installed plugins matching 'su'
  */
 export function getItemsForTab(state) {
-    switch (state.activeTab) {
-        case 'enabled': {
-            const enabledPlugins = state.plugins.filter((p) => p.isInstalled && p.isEnabled);
-            return state.searchQuery
-                ? searchPlugins(state.searchQuery, enabledPlugins)
-                : enabledPlugins;
-        }
-        case 'installed': {
-            const installedPlugins = state.plugins.filter((p) => p.isInstalled);
-            return state.searchQuery
-                ? searchPlugins(state.searchQuery, installedPlugins)
-                : installedPlugins;
-        }
-        case 'discover':
-            return getFilteredPlugins(state);
-        case 'marketplaces':
-            return state.marketplaces;
-        case 'errors':
-            return state.errors;
-        default:
-            return [];
-    }
+    return match(state.activeTab)
+        .with('enabled', () => {
+        const enabledPlugins = state.plugins.filter((p) => p.isInstalled && p.isEnabled);
+        return state.searchQuery
+            ? searchPlugins(state.searchQuery, enabledPlugins)
+            : enabledPlugins;
+    })
+        .with('installed', () => {
+        const installedPlugins = state.plugins.filter((p) => p.isInstalled);
+        return state.searchQuery
+            ? searchPlugins(state.searchQuery, installedPlugins)
+            : installedPlugins;
+    })
+        .with('discover', () => getFilteredPlugins(state))
+        .with('marketplaces', () => state.marketplaces)
+        .with('errors', () => state.errors)
+        .otherwise(() => []);
 }
 /**
  * Get filtered and sorted plugins for discover tab
@@ -328,6 +355,19 @@ export function getFilteredPlugins(state) {
     plugins = sortPlugins(plugins, state.sortBy, state.sortOrder);
     return plugins;
 }
+/**
+ * Get filtered marketplaces based on search query
+ * @param state - Current app state
+ * @returns Filtered array of marketplaces
+ */
+export function getFilteredMarketplaces(state) {
+    let marketplaces = state.marketplaces;
+    // Apply search filter
+    if (state.searchQuery) {
+        marketplaces = searchMarketplaces(state.searchQuery, marketplaces);
+    }
+    return marketplaces;
+}
 /**
  * Main App component
  */
@@ -488,6 +528,46 @@ export default function App() {
             });
         }
     }
+    /**
+     * Handle toggling auto-update for a marketplace
+     * @param marketplaceId - ID of the marketplace
+     * @param currentValue - Current auto-update state
+     */
+    async function handleToggleAutoUpdate(marketplaceId, currentValue) {
+        dispatch({
+            type: 'START_MARKETPLACE_OPERATION',
+            payload: { operation: 'updating', marketplaceId },
+        });
+        const result = await toggleAutoUpdate(marketplaceId, currentValue);
+        dispatch({ type: 'END_MARKETPLACE_OPERATION' });
+        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}` });
+        }
+        else {
+            dispatch({
+                type: 'SET_MESSAGE',
+                payload: `❌ ${result.message}${result.error ? `: ${result.error}` : ''}`,
+            });
+        }
+    }
+    /**
+     * Handle browsing plugins for a specific marketplace
+     * Switches to Discover tab with marketplace filter applied
+     * @param marketplaceId - ID of the marketplace to browse
+     */
+    function handleBrowseMarketplacePlugins(marketplaceId) {
+        // Switch to Discover tab
+        dispatch({ type: 'SET_TAB', payload: 'discover' });
+        // Set search query to filter by marketplace
+        dispatch({ type: 'SET_SEARCH_QUERY', payload: marketplaceId });
+        dispatch({
+            type: 'SET_MESSAGE',
+            payload: `Browsing plugins from ${marketplaceId}`,
+        });
+    }
     // Keyboard input handling
     useInput((input, key) => {
         // Block all input during operations (plugin or marketplace)
@@ -513,7 +593,7 @@ export default function App() {
         }
         // Handle plugin uninstall confirmation dialog
         if (state.confirmUninstall && state.operationPluginId) {
-            if (input === 'y' || input === 'Y') {
+            if (input === 'y' || input === 'Y' || key.return) {
                 dispatch({ type: 'HIDE_CONFIRM_UNINSTALL' });
                 handleUninstall(state.operationPluginId);
                 return;
@@ -527,7 +607,7 @@ export default function App() {
         }
         // Handle marketplace remove confirmation dialog
         if (state.confirmRemoveMarketplace && state.operationMarketplaceId) {
-            if (input === 'y' || input === 'Y') {
+            if (input === 'y' || input === 'Y' || key.return) {
                 dispatch({ type: 'HIDE_CONFIRM_REMOVE_MARKETPLACE' });
                 handleRemoveMarketplace(state.operationMarketplaceId);
                 return;
@@ -570,6 +650,54 @@ export default function App() {
             }
             return;
         }
+        // Handle marketplace action menu
+        if (state.showMarketplaceActionMenu) {
+            const selectedMarketplace = getFilteredMarketplaces(state)[state.selectedIndex];
+            if (!selectedMarketplace) {
+                dispatch({ type: 'HIDE_MARKETPLACE_ACTION_MENU' });
+                return;
+            }
+            // Up/Down arrow navigation
+            if (key.upArrow || (key.ctrl && input === 'p')) {
+                dispatch({ type: 'MOVE_ACTION_MENU_SELECTION', payload: 'up' });
+                return;
+            }
+            if (key.downArrow || (key.ctrl && input === 'n')) {
+                dispatch({ type: 'MOVE_ACTION_MENU_SELECTION', payload: 'down' });
+                return;
+            }
+            // Execute action on Enter
+            if (key.return) {
+                dispatch({ type: 'HIDE_MARKETPLACE_ACTION_MENU' });
+                const actionIndex = state.actionMenuSelectedIndex;
+                if (actionIndex === 0) {
+                    // Browse plugins
+                    handleBrowseMarketplacePlugins(selectedMarketplace.id);
+                }
+                else if (actionIndex === 1) {
+                    // Update marketplace
+                    handleUpdateMarketplace(selectedMarketplace.id);
+                }
+                else if (actionIndex === 2) {
+                    // Toggle auto-update
+                    handleToggleAutoUpdate(selectedMarketplace.id, selectedMarketplace.autoUpdate ?? false);
+                }
+                else if (actionIndex === 3) {
+                    // Remove marketplace (show confirmation)
+                    dispatch({
+                        type: 'SHOW_CONFIRM_REMOVE_MARKETPLACE',
+                        payload: selectedMarketplace.id,
+                    });
+                }
+                return;
+            }
+            // Close menu on Escape
+            if (key.escape) {
+                dispatch({ type: 'HIDE_MARKETPLACE_ACTION_MENU' });
+                return;
+            }
+            return;
+        }
         // Search mode input (when focusZone is 'search')
         if (state.focusZone === 'search') {
             // Up arrow: move focus to tabbar
@@ -766,6 +894,14 @@ export default function App() {
         }
         // Marketplace-specific key bindings
         if (state.activeTab === 'marketplaces' && state.focusZone === 'list') {
+            // Open action menu (Enter or m key)
+            if (key.return || input === 'm') {
+                const selectedMarketplace = filteredMarketplaces[state.selectedIndex];
+                if (selectedMarketplace) {
+                    dispatch({ type: 'SHOW_MARKETPLACE_ACTION_MENU' });
+                }
+                return;
+            }
             // Add marketplace (a key)
             if (input === 'a') {
                 dispatch({ type: 'SHOW_ADD_MARKETPLACE_DIALOG' });
@@ -853,56 +989,67 @@ export default function App() {
     const filteredMarketplaces = state.searchQuery
         ? searchMarketplaces(state.searchQuery, state.marketplaces)
         : state.marketplaces;
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsx(Text, { bold: true, color: "magenta", children: "\u26A1 Claude Code Plugin Dashboard" }), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { dimColor: true, children: ["v", packageJson.version] })] }), _jsx(TabBar, { activeTab: state.activeTab, isFocused: state.focusZone === 'tabbar' }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [state.activeTab === 'enabled' && (_jsx(EnabledTab, { plugins: enabledPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, focusZone: state.focusZone })), state.activeTab === 'installed' && (_jsx(InstalledTab, { plugins: installedPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, focusZone: state.focusZone })), state.activeTab === 'discover' && (_jsx(DiscoverTab, { plugins: filteredPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, sortBy: state.sortBy, sortOrder: state.sortOrder, focusZone: state.focusZone })), state.activeTab === 'marketplaces' && (_jsx(MarketplacesTab, { marketplaces: filteredMarketplaces, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, focusZone: state.focusZone })), state.activeTab === 'errors' && (_jsx(ErrorsTab, { errors: state.errors, selectedIndex: state.selectedIndex }))] }), state.confirmUninstall && state.operationPluginId && (_jsx(ConfirmDialog, { message: `Uninstall ${state.operationPluginId}?` })), state.confirmRemoveMarketplace && state.operationMarketplaceId && (_jsx(ConfirmDialog, { message: `Remove marketplace ${state.operationMarketplaceId}?` })), state.showAddMarketplaceDialog && (_jsx(AddMarketplaceDialog, { value: state.searchQuery, error: state.addMarketplaceError ?? undefined })), _jsx(HelpOverlay, { isVisible: state.showHelp }), state.message && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: state.message }) })), _jsx(KeyHints, { focusZone: state.focusZone, extraHints: (() => {
-                    // Search mode - no extra hints (base hints cover it)
-                    if (state.focusZone === 'search') {
-                        return undefined;
-                    }
-                    // TabBar mode - no extra hints
-                    if (state.focusZone === 'tabbar') {
-                        return undefined;
+    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('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])
+                    .with(['search', P._], () => undefined)
+                    .with(['tabbar', P._], () => undefined)
+                    .with(['list', 'enabled'], () => {
+                    const hints = [
+                        { key: '/', action: 'search' },
+                        { key: 'i', action: 'install' },
+                        { key: 'u', action: 'uninstall' },
+                    ];
+                    const selectedPlugin = enabledPlugins[state.selectedIndex];
+                    if (selectedPlugin) {
+                        hints.push({
+                            key: 'Enter',
+                            action: selectedPlugin.isInstalled ? 'toggle' : 'install',
+                        });
                     }
-                    // List mode - add tab-specific hints
-                    // Plugin tabs hints (enabled, installed, discover)
-                    if (state.activeTab === 'enabled' ||
-                        state.activeTab === 'installed' ||
-                        state.activeTab === 'discover') {
-                        const hints = [
-                            { key: '/', action: 'search' },
-                            { key: 'i', action: 'install' },
-                            { key: 'u', action: 'uninstall' },
-                        ];
-                        // Get selected plugin to determine Enter action
-                        const items = state.activeTab === 'enabled'
-                            ? enabledPlugins
-                            : state.activeTab === 'installed'
-                                ? installedPlugins
-                                : filteredPlugins;
-                        const selectedPlugin = items[state.selectedIndex];
-                        // Add contextual Enter hint
-                        if (selectedPlugin) {
-                            if (!selectedPlugin.isInstalled) {
-                                hints.push({ key: 'Enter', action: 'install' });
-                            }
-                            else {
-                                hints.push({ key: 'Enter', action: 'toggle' });
-                            }
-                        }
-                        // Add sort hint for discover tab
-                        if (state.activeTab === 'discover') {
-                            hints.push({ key: 's', action: 'sort' });
-                        }
-                        return hints;
+                    return hints;
+                })
+                    .with(['list', 'installed'], () => {
+                    const hints = [
+                        { key: '/', action: 'search' },
+                        { key: 'i', action: 'install' },
+                        { key: 'u', action: 'uninstall' },
+                    ];
+                    const selectedPlugin = installedPlugins[state.selectedIndex];
+                    if (selectedPlugin) {
+                        hints.push({
+                            key: 'Enter',
+                            action: selectedPlugin.isInstalled ? 'toggle' : 'install',
+                        });
                     }
-                    // Marketplaces tab hints
-                    if (state.activeTab === 'marketplaces') {
-                        return [
-                            { key: '/', action: 'search' },
-                            { key: 'a', action: 'add' },
-                            { key: 'd', action: 'remove' },
-                            { key: 'u', action: 'update' },
-                        ];
+                    return hints;
+                })
+                    .with(['list', 'discover'], () => {
+                    const hints = [
+                        { key: '/', action: 'search' },
+                        { key: 'i', action: 'install' },
+                        { key: 'u', action: 'uninstall' },
+                    ];
+                    const selectedPlugin = filteredPlugins[state.selectedIndex];
+                    if (selectedPlugin) {
+                        hints.push({
+                            key: 'Enter',
+                            action: selectedPlugin.isInstalled ? 'toggle' : 'install',
+                        });
                     }
-                    return undefined;
-                })() })] }));
+                    hints.push({ key: 's', action: 'sort' });
+                    return hints;
+                })
+                    .with(['list', 'marketplaces'], () => [
+                    { key: '/', action: 'search' },
+                    { key: 'a', action: 'add' },
+                    { key: 'd', action: 'remove' },
+                    { key: 'u', action: 'update' },
+                ])
+                    .with(['list', 'errors'], () => undefined)
+                    .otherwise(() => undefined) })] }));
 }

package/dist/cli.js

@@ -14,12 +14,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *   claude-plugin-dashboard toggle <plugin-id> # Toggle plugin
  *   claude-plugin-dashboard help               # Show help
  */
-import { render } from 'ink';
+import { withFullScreen } from 'fullscreen-ink';
+import { match, P } from 'ts-pattern';
 import App from './app.js';
 import { loadAllPlugins, loadInstalledPlugins, loadMarketplaces, getPluginStatistics, getPluginById, } from './services/pluginService.js';
 import { enablePlugin, disablePlugin, togglePlugin, } from './services/settingsService.js';
 import { fileExists } from './services/fileService.js';
 import { PATHS } from './utils/paths.js';
+import packageJson from '../package.json' with { type: 'json' };
 const args = process.argv.slice(2);
 const command = args[0];
 const subCommand = args[1];
@@ -243,66 +245,57 @@ function checkClaudeCodeInstalled() {
 if (command) {
     // Non-interactive mode
     checkClaudeCodeInstalled();
-    switch (command) {
-        case 'status':
-            showStatus();
-            break;
-        case 'list':
-            if (subCommand === '--installed' || args.includes('--installed')) {
-                listPlugins({ installed: true });
-            }
-            else if (subCommand === '--marketplace' ||
-                args.includes('--marketplace')) {
-                const marketplaceIndex = args.indexOf('--marketplace');
-                const marketplace = args[marketplaceIndex + 1];
-                listPlugins({ marketplace });
-            }
-            else {
-                listPlugins({});
-            }
-            break;
-        case 'info':
-            if (!subCommand) {
-                console.error('Usage: claude-plugin-dashboard info <plugin-id>');
-                process.exit(1);
-            }
-            showPluginInfo(subCommand);
-            break;
-        case 'enable':
-            if (!subCommand) {
-                console.error('Usage: claude-plugin-dashboard enable <plugin-id>');
-                process.exit(1);
-            }
-            handleEnable(subCommand);
-            break;
-        case 'disable':
-            if (!subCommand) {
-                console.error('Usage: claude-plugin-dashboard disable <plugin-id>');
-                process.exit(1);
-            }
-            handleDisable(subCommand);
-            break;
-        case 'toggle':
-            if (!subCommand) {
-                console.error('Usage: claude-plugin-dashboard toggle <plugin-id>');
-                process.exit(1);
-            }
-            handleToggle(subCommand);
-            break;
-        case 'help':
-        case '-h':
-        case '--help':
-            showHelp();
-            break;
-        case '-v':
-        case '--version':
-            console.log('claude-plugin-dashboard v0.1.0');
-            break;
-        default:
-            console.error(`Unknown command: ${command}`);
-            console.log('Run "claude-plugin-dashboard help" for usage information.');
+    match(command)
+        .with('status', () => showStatus())
+        .with('list', () => {
+        if (subCommand === '--installed' || args.includes('--installed')) {
+            listPlugins({ installed: true });
+        }
+        else if (subCommand === '--marketplace' ||
+            args.includes('--marketplace')) {
+            const marketplaceIndex = args.indexOf('--marketplace');
+            const marketplace = args[marketplaceIndex + 1];
+            listPlugins({ marketplace });
+        }
+        else {
+            listPlugins({});
+        }
+    })
+        .with('info', () => {
+        if (!subCommand) {
+            console.error('Usage: claude-plugin-dashboard info <plugin-id>');
             process.exit(1);
-    }
+        }
+        showPluginInfo(subCommand);
+    })
+        .with('enable', () => {
+        if (!subCommand) {
+            console.error('Usage: claude-plugin-dashboard enable <plugin-id>');
+            process.exit(1);
+        }
+        handleEnable(subCommand);
+    })
+        .with('disable', () => {
+        if (!subCommand) {
+            console.error('Usage: claude-plugin-dashboard disable <plugin-id>');
+            process.exit(1);
+        }
+        handleDisable(subCommand);
+    })
+        .with('toggle', () => {
+        if (!subCommand) {
+            console.error('Usage: claude-plugin-dashboard toggle <plugin-id>');
+            process.exit(1);
+        }
+        handleToggle(subCommand);
+    })
+        .with(P.union('help', '-h', '--help'), () => showHelp())
+        .with(P.union('-v', '--version'), () => console.log(`claude-plugin-dashboard v${packageJson.version}`))
+        .otherwise((cmd) => {
+        console.error(`Unknown command: ${cmd}`);
+        console.log('Run "claude-plugin-dashboard help" for usage information.');
+        process.exit(1);
+    });
 }
 else {
     // Interactive mode
@@ -312,11 +305,9 @@ else {
         console.log('Use "claude-plugin-dashboard help" for non-interactive commands.');
         process.exit(1);
     }
-    const instance = render(_jsx(App, {}));
-    // Clear screen when app exits (q key or Ctrl+C)
-    instance.waitUntilExit().then(() => {
-        instance.clear();
-        // Clear entire terminal screen and reset cursor to top-left
-        process.stdout.write('\x1b[2J\x1b[H');
-    });
+    // Use fullscreen-ink for alternate screen buffer management
+    // This prevents rendering artifacts when switching tabs
+    const ink = withFullScreen(_jsx(App, {}));
+    ink.start();
+    ink.waitUntilExit();
 }

package/dist/components/ComponentBadges.d.ts

@@ -1,7 +1,7 @@
 /**
  * ComponentBadges component
- * Displays plugin component type badges with icons and counts
- * Icons: Skills(S), Commands(/), Agents(@), Hooks(H), MCP(M), LSP(L)
+ * Displays plugin component type badges with readable text labels and counts
+ * Labels: Skills, Slash, Agents, Hooks, MCP, LSP
  */
 import type { PluginComponents } from '../types/index.js';
 /**
@@ -18,7 +18,7 @@ export interface ComponentBadgesProps {
  * @returns Badges component or null if no components
  * @example
  * <ComponentBadges components={{ skills: 5, commands: 2 }} />
- * // Renders: [S:5] [/:2]
+ * // Renders: Skills:5 Slash:2
  */
 export default function ComponentBadges({ components, }: ComponentBadgesProps): React.ReactNode;
 /**