@laststance/claude-plugin-dashboard 0.1.1 → 0.2.0

package/dist/app.d.ts

@@ -2,6 +2,30 @@
  * 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';
+/**
+ * Initial application state
+ */
+export declare const initialState: AppState;
+/**
+ * Get available focus zones for the current tab
+ * Errors tab has no search zone since it doesn't support filtering
+ * @param activeTab - The currently active tab
+ * @returns Array of available focus zones in navigation order
+ */
+export declare function getAvailableZones(activeTab: AppState['activeTab']): FocusZone[];
+/**
+ * State reducer for application state management
+ */
+export declare function appReducer(state: AppState, action: Action): AppState;
+/**
+ * Get items array for current tab
+ */
+export declare function getItemsForTab(state: AppState): unknown[];
+/**
+ * Get filtered and sorted plugins for discover tab
+ */
+export declare function getFilteredPlugins(state: AppState): Plugin[];
 /**
  * Main App component
  */

package/dist/app.js

@@ -3,23 +3,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Main App component for Claude Code Plugin Dashboard
  * Interactive TUI to browse and manage Claude Code plugins
  */
-import { useState, useEffect, useReducer } from 'react';
+import { useEffect, useReducer } from 'react';
 import { Box, Text, useInput, useApp } from 'ink';
 import TabBar, { getNextTab } from './components/TabBar.js';
 import KeyHints from './components/KeyHints.js';
 import DiscoverTab from './tabs/DiscoverTab.js';
+import EnabledTab from './tabs/EnabledTab.js';
 import InstalledTab from './tabs/InstalledTab.js';
 import MarketplacesTab from './tabs/MarketplacesTab.js';
 import ErrorsTab from './tabs/ErrorsTab.js';
-import { loadAllPlugins, loadMarketplaces, searchPlugins, sortPlugins, } from './services/pluginService.js';
+import { loadAllPlugins, loadMarketplaces, searchPlugins, searchMarketplaces, sortPlugins, } from './services/pluginService.js';
 import { togglePlugin } from './services/settingsService.js';
 import { installPlugin, uninstallPlugin, } from './services/pluginActionsService.js';
 import ConfirmDialog from './components/ConfirmDialog.js';
+import HelpOverlay from './components/HelpOverlay.js';
+import packageJson from '../package.json' with { type: 'json' };
 /**
  * Initial application state
  */
-const initialState = {
-    activeTab: 'discover',
+export const initialState = {
+    activeTab: 'enabled',
+    focusZone: 'list',
     plugins: [],
     marketplaces: [],
     errors: [],
@@ -33,16 +37,30 @@ const initialState = {
     operation: 'idle',
     operationPluginId: null,
     confirmUninstall: false,
+    showHelp: false,
 };
+/**
+ * Get available focus zones for the current tab
+ * Errors tab has no search zone since it doesn't support filtering
+ * @param activeTab - The currently active tab
+ * @returns Array of available focus zones in navigation order
+ */
+export function getAvailableZones(activeTab) {
+    if (activeTab === 'errors') {
+        return ['tabbar', 'list'];
+    }
+    return ['tabbar', 'search', 'list'];
+}
 /**
  * State reducer for application state management
  */
-function appReducer(state, action) {
+export function appReducer(state, action) {
     switch (action.type) {
         case 'SET_TAB':
             return {
                 ...state,
                 activeTab: action.payload,
+                focusZone: 'list',
                 selectedIndex: 0,
                 searchQuery: '',
                 message: null,
@@ -51,6 +69,7 @@ function appReducer(state, action) {
             return {
                 ...state,
                 activeTab: getNextTab(state.activeTab, 'next'),
+                focusZone: 'list',
                 selectedIndex: 0,
                 searchQuery: '',
                 message: null,
@@ -59,10 +78,16 @@ function appReducer(state, action) {
             return {
                 ...state,
                 activeTab: getNextTab(state.activeTab, 'prev'),
+                focusZone: 'list',
                 selectedIndex: 0,
                 searchQuery: '',
                 message: null,
             };
+        case 'SET_FOCUS_ZONE':
+            return {
+                ...state,
+                focusZone: action.payload,
+            };
         case 'SET_PLUGINS':
             return {
                 ...state,
@@ -180,6 +205,11 @@ function appReducer(state, action) {
                 confirmUninstall: false,
                 operationPluginId: null,
             };
+        case 'TOGGLE_HELP':
+            return {
+                ...state,
+                showHelp: !state.showHelp,
+            };
         default:
             return state;
     }
@@ -187,12 +217,14 @@ function appReducer(state, action) {
 /**
  * Get items array for current tab
  */
-function getItemsForTab(state) {
+export function getItemsForTab(state) {
     switch (state.activeTab) {
-        case 'discover':
-            return getFilteredPlugins(state);
+        case 'enabled':
+            return state.plugins.filter((p) => p.isInstalled && p.isEnabled);
         case 'installed':
             return state.plugins.filter((p) => p.isInstalled);
+        case 'discover':
+            return getFilteredPlugins(state);
         case 'marketplaces':
             return state.marketplaces;
         case 'errors':
@@ -204,7 +236,7 @@ function getItemsForTab(state) {
 /**
  * Get filtered and sorted plugins for discover tab
  */
-function getFilteredPlugins(state) {
+export function getFilteredPlugins(state) {
     let plugins = state.plugins;
     // Apply search filter
     if (state.searchQuery) {
@@ -220,7 +252,6 @@ function getFilteredPlugins(state) {
 export default function App() {
     const { exit } = useApp();
     const [state, dispatch] = useReducer(appReducer, initialState);
-    const [isSearchMode, setIsSearchMode] = useState(false);
     // Load data on mount
     useEffect(() => {
         try {
@@ -288,6 +319,23 @@ export default function App() {
         if (state.operation !== 'idle') {
             return;
         }
+        // Handle help overlay
+        if (state.showHelp) {
+            if (input === 'h' || key.escape) {
+                dispatch({ type: 'TOGGLE_HELP' });
+            }
+            return;
+        }
+        // Exit (q or Ctrl+C) - Global handler, works in all focus zones
+        if (input === 'q' || (key.ctrl && input === 'c')) {
+            exit();
+            return;
+        }
+        // Toggle help (h key)
+        if (input === 'h') {
+            dispatch({ type: 'TOGGLE_HELP' });
+            return;
+        }
         // Handle confirmation dialog
         if (state.confirmUninstall && state.operationPluginId) {
             if (input === 'y' || input === 'Y') {
@@ -302,10 +350,19 @@ export default function App() {
             }
             return;
         }
-        // Search mode input
-        if (isSearchMode) {
-            if (key.escape || key.return) {
-                setIsSearchMode(false);
+        // Search mode input (when focusZone is 'search')
+        if (state.focusZone === 'search') {
+            // Up arrow: move focus to tabbar
+            if (key.upArrow || (key.ctrl && input === 'p')) {
+                dispatch({ type: 'SET_FOCUS_ZONE', payload: 'tabbar' });
+                return;
+            }
+            // Down arrow, Enter, or Escape: move focus to list
+            if (key.escape ||
+                key.return ||
+                key.downArrow ||
+                (key.ctrl && input === 'n')) {
+                dispatch({ type: 'SET_FOCUS_ZONE', payload: 'list' });
                 return;
             }
             if (key.backspace || key.delete) {
@@ -324,48 +381,124 @@ export default function App() {
             }
             return;
         }
-        // Emacs-style navigation (Ctrl+P / Ctrl+N)
-        if (key.ctrl && input === 'p') {
-            dispatch({ type: 'MOVE_SELECTION', payload: 'up' });
-            return;
-        }
-        if (key.ctrl && input === 'n') {
-            dispatch({ type: 'MOVE_SELECTION', payload: 'down' });
+        // TabBar focus zone navigation
+        if (state.focusZone === 'tabbar') {
+            // Down arrow: move to search (or list if no search)
+            if (key.downArrow || (key.ctrl && input === 'n')) {
+                const zones = getAvailableZones(state.activeTab);
+                dispatch({
+                    type: 'SET_FOCUS_ZONE',
+                    payload: zones.includes('search') ? 'search' : 'list',
+                });
+                return;
+            }
+            // Left/Right arrows and Ctrl+B/F: tab switching (only in tabbar)
+            // Keep focus on tabbar after navigation
+            if (key.leftArrow || (key.ctrl && input === 'b')) {
+                dispatch({ type: 'PREV_TAB' });
+                dispatch({ type: 'SET_FOCUS_ZONE', payload: 'tabbar' });
+                return;
+            }
+            if (key.rightArrow || (key.ctrl && input === 'f')) {
+                dispatch({ type: 'NEXT_TAB' });
+                dispatch({ type: 'SET_FOCUS_ZONE', payload: 'tabbar' });
+                return;
+            }
+            // Tab key: next tab (resets focus to list)
+            if (key.tab) {
+                dispatch({ type: 'NEXT_TAB' });
+                return;
+            }
             return;
         }
-        // Tab navigation
-        if (key.leftArrow) {
-            dispatch({ type: 'PREV_TAB' });
+        // List focus zone navigation (default zone)
+        // Up arrow: move up in list or focus search/tabbar at top
+        if (key.upArrow || (key.ctrl && input === 'p')) {
+            if (state.selectedIndex === 0) {
+                // At top of list: move focus to search (or tabbar if no search)
+                const zones = getAvailableZones(state.activeTab);
+                dispatch({
+                    type: 'SET_FOCUS_ZONE',
+                    payload: zones.includes('search') ? 'search' : 'tabbar',
+                });
+            }
+            else {
+                dispatch({ type: 'MOVE_SELECTION', payload: 'up' });
+            }
             return;
         }
-        if (key.rightArrow) {
-            dispatch({ type: 'NEXT_TAB' });
+        // Down arrow: move down in list
+        if (key.downArrow || (key.ctrl && input === 'n')) {
+            dispatch({ type: 'MOVE_SELECTION', payload: 'down' });
             return;
         }
+        // Tab key: next tab (from list zone)
         if (key.tab) {
             dispatch({ type: 'NEXT_TAB' });
             return;
         }
-        // List navigation
-        if (key.upArrow) {
-            dispatch({ type: 'MOVE_SELECTION', payload: 'up' });
+        // Enter search mode (/ key on supported tabs)
+        const searchEnabledTabs = [
+            'enabled',
+            'installed',
+            'discover',
+            'marketplaces',
+        ];
+        if (input === '/' && searchEnabledTabs.includes(state.activeTab)) {
+            dispatch({ type: 'SET_FOCUS_ZONE', payload: 'search' });
             return;
         }
-        if (key.downArrow) {
-            dispatch({ type: 'MOVE_SELECTION', payload: 'down' });
-            return;
-        }
-        // Enter search mode
-        if (input === '/' && state.activeTab === 'discover') {
-            setIsSearchMode(true);
+        // Enter key: Install (non-installed) or Toggle (installed)
+        if (key.return &&
+            (state.activeTab === 'enabled' ||
+                state.activeTab === 'installed' ||
+                state.activeTab === 'discover')) {
+            const items = state.activeTab === 'enabled'
+                ? state.plugins.filter((p) => p.isInstalled && p.isEnabled)
+                : state.activeTab === 'installed'
+                    ? state.plugins.filter((p) => p.isInstalled)
+                    : getFilteredPlugins(state);
+            const selectedPlugin = items[state.selectedIndex];
+            if (selectedPlugin) {
+                if (!selectedPlugin.isInstalled) {
+                    // Install non-installed plugin
+                    handleInstall(selectedPlugin.id);
+                }
+                else {
+                    // Toggle installed plugin
+                    try {
+                        const newState = togglePlugin(selectedPlugin.id);
+                        dispatch({
+                            type: 'TOGGLE_PLUGIN_ENABLED',
+                            payload: selectedPlugin.id,
+                        });
+                        dispatch({
+                            type: 'SET_MESSAGE',
+                            payload: newState
+                                ? `✅ ${selectedPlugin.name} enabled`
+                                : `❌ ${selectedPlugin.name} disabled`,
+                        });
+                    }
+                    catch (error) {
+                        dispatch({
+                            type: 'SET_MESSAGE',
+                            payload: `Error: ${error instanceof Error ? error.message : 'Unknown error'}`,
+                        });
+                    }
+                }
+            }
             return;
         }
-        // Toggle plugin (Space or Enter)
-        if ((input === ' ' || key.return) &&
-            (state.activeTab === 'discover' || state.activeTab === 'installed')) {
-            const items = state.activeTab === 'installed'
-                ? state.plugins.filter((p) => p.isInstalled)
-                : getFilteredPlugins(state);
+        // Toggle plugin (Space only)
+        if (input === ' ' &&
+            (state.activeTab === 'enabled' ||
+                state.activeTab === 'installed' ||
+                state.activeTab === 'discover')) {
+            const items = state.activeTab === 'enabled'
+                ? state.plugins.filter((p) => p.isInstalled && p.isEnabled)
+                : state.activeTab === 'installed'
+                    ? state.plugins.filter((p) => p.isInstalled)
+                    : getFilteredPlugins(state);
             const selectedPlugin = items[state.selectedIndex];
             if (selectedPlugin && selectedPlugin.isInstalled) {
                 try {
@@ -419,12 +552,16 @@ export default function App() {
             dispatch({ type: 'SET_SEARCH_QUERY', payload: '' });
             return;
         }
-        // Install (i key) - only on discover/installed tabs
+        // Install (i key) - only on enabled/installed/discover tabs
         if (input === 'i' &&
-            (state.activeTab === 'discover' || state.activeTab === 'installed')) {
-            const items = state.activeTab === 'installed'
-                ? state.plugins.filter((p) => p.isInstalled)
-                : getFilteredPlugins(state);
+            (state.activeTab === 'enabled' ||
+                state.activeTab === 'installed' ||
+                state.activeTab === 'discover')) {
+            const items = state.activeTab === 'enabled'
+                ? state.plugins.filter((p) => p.isInstalled && p.isEnabled)
+                : state.activeTab === 'installed'
+                    ? state.plugins.filter((p) => p.isInstalled)
+                    : getFilteredPlugins(state);
             const selectedPlugin = items[state.selectedIndex];
             if (selectedPlugin && !selectedPlugin.isInstalled) {
                 handleInstall(selectedPlugin.id);
@@ -437,12 +574,16 @@ export default function App() {
             }
             return;
         }
-        // Uninstall (u key) - only on discover/installed tabs
+        // Uninstall (u key) - only on enabled/installed/discover tabs
         if (input === 'u' &&
-            (state.activeTab === 'discover' || state.activeTab === 'installed')) {
-            const items = state.activeTab === 'installed'
-                ? state.plugins.filter((p) => p.isInstalled)
-                : getFilteredPlugins(state);
+            (state.activeTab === 'enabled' ||
+                state.activeTab === 'installed' ||
+                state.activeTab === 'discover')) {
+            const items = state.activeTab === 'enabled'
+                ? state.plugins.filter((p) => p.isInstalled && p.isEnabled)
+                : state.activeTab === 'installed'
+                    ? state.plugins.filter((p) => p.isInstalled)
+                    : getFilteredPlugins(state);
             const selectedPlugin = items[state.selectedIndex];
             if (selectedPlugin && selectedPlugin.isInstalled) {
                 dispatch({ type: 'SHOW_CONFIRM_UNINSTALL', payload: selectedPlugin.id });
@@ -452,11 +593,6 @@ export default function App() {
             }
             return;
         }
-        // Exit (q or Ctrl+C)
-        if (input === 'q' || (key.ctrl && input === 'c')) {
-            exit();
-            return;
-        }
     });
     // Loading state
     if (state.loading) {
@@ -468,14 +604,65 @@ export default function App() {
     }
     // Get filtered data for current tab
     const filteredPlugins = getFilteredPlugins(state);
-    const installedPlugins = state.plugins.filter((p) => p.isInstalled);
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsx(Text, { bold: true, color: "magenta", children: "\u26A1 Claude Code Plugin Dashboard" }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { dimColor: true, children: "v0.1.0" })] }), _jsx(TabBar, { activeTab: state.activeTab }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [state.activeTab === 'discover' && (_jsx(DiscoverTab, { plugins: filteredPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, sortBy: state.sortBy, sortOrder: state.sortOrder, isSearchMode: isSearchMode })), state.activeTab === 'installed' && (_jsx(InstalledTab, { plugins: installedPlugins, selectedIndex: state.selectedIndex })), state.activeTab === 'marketplaces' && (_jsx(MarketplacesTab, { marketplaces: state.marketplaces, selectedIndex: state.selectedIndex })), state.activeTab === 'errors' && (_jsx(ErrorsTab, { errors: state.errors, selectedIndex: state.selectedIndex }))] }), state.confirmUninstall && state.operationPluginId && (_jsx(ConfirmDialog, { message: `Uninstall ${state.operationPluginId}?` })), state.message && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: state.message }) })), _jsx(KeyHints, { extraHints: state.activeTab === 'discover' || state.activeTab === 'installed'
-                    ? [
-                        { key: 'i', action: 'install' },
-                        { key: 'u', action: 'uninstall' },
-                        ...(state.activeTab === 'discover'
-                            ? [{ key: 's', action: 'sort' }]
-                            : []),
-                    ]
-                    : undefined })] }));
+    // Apply search filter to enabled plugins
+    const enabledPluginsBase = state.plugins.filter((p) => p.isInstalled && p.isEnabled);
+    const enabledPlugins = state.searchQuery
+        ? searchPlugins(state.searchQuery, enabledPluginsBase)
+        : enabledPluginsBase;
+    // Apply search filter to installed plugins
+    const installedPluginsBase = state.plugins.filter((p) => p.isInstalled);
+    const installedPlugins = state.searchQuery
+        ? searchPlugins(state.searchQuery, installedPluginsBase)
+        : installedPluginsBase;
+    // Apply search filter to marketplaces
+    const filteredMarketplaces = state.searchQuery
+        ? searchMarketplaces(state.searchQuery, state.marketplaces)
+        : state.marketplaces;
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsx(Text, { bold: true, color: "magenta", children: "\u26A1 Claude Code Plugin Dashboard" }), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { dimColor: true, children: ["v", packageJson.version] })] }), _jsx(TabBar, { activeTab: state.activeTab, isFocused: state.focusZone === 'tabbar' }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [state.activeTab === 'enabled' && (_jsx(EnabledTab, { plugins: enabledPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, focusZone: state.focusZone })), state.activeTab === 'installed' && (_jsx(InstalledTab, { plugins: installedPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, focusZone: state.focusZone })), state.activeTab === 'discover' && (_jsx(DiscoverTab, { plugins: filteredPlugins, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, sortBy: state.sortBy, sortOrder: state.sortOrder, focusZone: state.focusZone })), state.activeTab === 'marketplaces' && (_jsx(MarketplacesTab, { marketplaces: filteredMarketplaces, selectedIndex: state.selectedIndex, searchQuery: state.searchQuery, focusZone: state.focusZone })), state.activeTab === 'errors' && (_jsx(ErrorsTab, { errors: state.errors, selectedIndex: state.selectedIndex }))] }), state.confirmUninstall && state.operationPluginId && (_jsx(ConfirmDialog, { message: `Uninstall ${state.operationPluginId}?` })), _jsx(HelpOverlay, { isVisible: state.showHelp }), state.message && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: state.message }) })), _jsx(KeyHints, { focusZone: state.focusZone, extraHints: (() => {
+                    // Search mode - no extra hints (base hints cover it)
+                    if (state.focusZone === 'search') {
+                        return undefined;
+                    }
+                    // TabBar mode - no extra hints
+                    if (state.focusZone === 'tabbar') {
+                        return undefined;
+                    }
+                    // List mode - add tab-specific hints
+                    // Plugin tabs hints (enabled, installed, discover)
+                    if (state.activeTab === 'enabled' ||
+                        state.activeTab === 'installed' ||
+                        state.activeTab === 'discover') {
+                        const hints = [
+                            { key: '/', action: 'search' },
+                            { key: 'i', action: 'install' },
+                            { key: 'u', action: 'uninstall' },
+                        ];
+                        // Get selected plugin to determine Enter action
+                        const items = state.activeTab === 'enabled'
+                            ? enabledPlugins
+                            : state.activeTab === 'installed'
+                                ? installedPlugins
+                                : filteredPlugins;
+                        const selectedPlugin = items[state.selectedIndex];
+                        // Add contextual Enter hint
+                        if (selectedPlugin) {
+                            if (!selectedPlugin.isInstalled) {
+                                hints.push({ key: 'Enter', action: 'install' });
+                            }
+                            else {
+                                hints.push({ key: 'Enter', action: 'toggle' });
+                            }
+                        }
+                        // Add sort hint for discover tab
+                        if (state.activeTab === 'discover') {
+                            hints.push({ key: 's', action: 'sort' });
+                        }
+                        return hints;
+                    }
+                    // Marketplaces tab hints
+                    if (state.activeTab === 'marketplaces') {
+                        return [{ key: '/', action: 'search' }];
+                    }
+                    return undefined;
+                })() })] }));
 }

package/dist/components/HelpOverlay.d.ts

@@ -0,0 +1,15 @@
+/**
+ * HelpOverlay component
+ * Displays a full-screen overlay with all available keyboard shortcuts
+ */
+interface HelpOverlayProps {
+    /** Whether the overlay is visible */
+    isVisible: boolean;
+}
+/**
+ * Full-screen help overlay showing all keyboard shortcuts
+ * @example
+ * <HelpOverlay isVisible={showHelp} />
+ */
+export default function HelpOverlay({ isVisible }: HelpOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/HelpOverlay.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * HelpOverlay component
+ * Displays a full-screen overlay with all available keyboard shortcuts
+ */
+import { Box, Text } from 'ink';
+const helpSections = [
+    {
+        title: 'Navigation',
+        items: [
+            { key: '←/→, Tab', description: 'Switch tabs' },
+            { key: '↑/↓, ^P/^N', description: 'Navigate list' },
+            { key: '^F/^B', description: 'Switch tabs (Emacs)' },
+        ],
+    },
+    {
+        title: 'Actions',
+        items: [
+            { key: 'i, Enter', description: 'Install / Toggle plugin' },
+            { key: 'u', description: 'Uninstall plugin' },
+            { key: 'Space', description: 'Toggle enable/disable' },
+            { key: 's/S', description: 'Sort options / order' },
+        ],
+    },
+    {
+        title: 'Search',
+        items: [
+            { key: '/', description: 'Enter search mode' },
+            { key: 'Esc, ↓', description: 'Exit search mode' },
+        ],
+    },
+    {
+        title: 'General',
+        items: [
+            { key: 'q, ^C', description: 'Quit' },
+            { key: 'h', description: 'Toggle this help' },
+        ],
+    },
+];
+/**
+ * Full-screen help overlay showing all keyboard shortcuts
+ * @example
+ * <HelpOverlay isVisible={showHelp} />
+ */
+export default function HelpOverlay({ isVisible }) {
+    if (!isVisible) {
+        return null;
+    }
+    const keyWidth = 14;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: "cyan", paddingX: 2, paddingY: 1, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Help \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }) }), helpSections.map((section) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: section.title }), section.items.map((item, itemIndex) => (_jsxs(Box, { children: [_jsx(Box, { width: keyWidth, children: _jsx(Text, { color: "green", children: item.key.padEnd(keyWidth - 2) }) }), _jsx(Text, { dimColor: true, children: item.description })] }, itemIndex)))] }, section.title))), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press h or Esc to close" }) })] }));
+}

package/dist/components/KeyHints.d.ts

@@ -2,18 +2,21 @@
  * KeyHints component
  * Displays keyboard shortcuts footer at the bottom of the dashboard
  */
+import type { FocusZone } from '../types/index.js';
 interface KeyHintsProps {
     /** Additional context-specific hints */
     extraHints?: Array<{
         key: string;
         action: string;
     }>;
+    /** Current focus zone for context-aware hints */
+    focusZone?: FocusZone;
 }
 /**
  * Displays keyboard shortcut hints in the footer
  * @example
- * <KeyHints />
- * <KeyHints extraHints={[{ key: 'i', action: 'install' }]} />
+ * <KeyHints focusZone="list" />
+ * <KeyHints focusZone="search" extraHints={[{ key: 'i', action: 'install' }]} />
  */
-export default function KeyHints({ extraHints }: KeyHintsProps): import("react/jsx-runtime").JSX.Element;
+export default function KeyHints({ extraHints, focusZone, }: KeyHintsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/KeyHints.js

@@ -4,20 +4,49 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Displays keyboard shortcuts footer at the bottom of the dashboard
  */
 import { Box, Text } from 'ink';
+/**
+ * Get base hints based on current focus zone
+ * @param focusZone - Current focus zone
+ * @returns Array of hint objects
+ */
+function getBaseHints(focusZone) {
+    switch (focusZone) {
+        case 'tabbar':
+            return [
+                { key: '←/→', action: 'switch tabs' },
+                { key: '↓', action: 'search/list' },
+                { key: 'Tab', action: 'next tab' },
+                { key: 'h', action: 'help' },
+                { key: 'q or ^C', action: 'quit' },
+            ];
+        case 'search':
+            return [
+                { key: '↑', action: 'tabs' },
+                { key: '↓/Enter', action: 'list' },
+                { key: 'ESC', action: 'clear/exit' },
+                { key: 'h', action: 'help' },
+                { key: 'q or ^C', action: 'quit' },
+            ];
+        case 'list':
+        default:
+            return [
+                { key: '↑/↓', action: 'navigate' },
+                { key: '↑(top)', action: 'search' },
+                { key: 'Space', action: 'toggle' },
+                { key: 'Tab', action: 'next tab' },
+                { key: 'h', action: 'help' },
+                { key: 'q or ^C', action: 'quit' },
+            ];
+    }
+}
 /**
  * Displays keyboard shortcut hints in the footer
  * @example
- * <KeyHints />
- * <KeyHints extraHints={[{ key: 'i', action: 'install' }]} />
+ * <KeyHints focusZone="list" />
+ * <KeyHints focusZone="search" extraHints={[{ key: 'i', action: 'install' }]} />
  */
-export default function KeyHints({ extraHints }) {
-    const baseHints = [
-        { key: '←/→', action: 'tabs' },
-        { key: '↑/↓', action: 'navigate' },
-        { key: 'Space', action: 'toggle' },
-        { key: '/', action: 'search' },
-        { key: 'q', action: 'quit' },
-    ];
+export default function KeyHints({ extraHints, focusZone = 'list', }) {
+    const baseHints = getBaseHints(focusZone);
     const allHints = extraHints ? [...baseHints, ...extraHints] : baseHints;
     return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, marginTop: 1, children: _jsx(Box, { gap: 2, flexWrap: "wrap", children: allHints.map((hint, index) => (_jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, color: "white", children: hint.key }), _jsx(Text, { dimColor: true, children: hint.action })] }, index))) }) }));
 }

package/dist/components/MarketplaceList.d.ts

@@ -6,11 +6,13 @@ import type { Marketplace } from '../types/index.js';
 interface MarketplaceListProps {
     marketplaces: Marketplace[];
     selectedIndex: number;
+    /** Whether the list has keyboard focus */
+    isFocused?: boolean;
 }
 /**
  * Displays a list of marketplaces
  * @example
- * <MarketplaceList marketplaces={marketplaces} selectedIndex={0} />
+ * <MarketplaceList marketplaces={marketplaces} selectedIndex={0} isFocused={true} />
  */
-export default function MarketplaceList({ marketplaces, selectedIndex, }: MarketplaceListProps): import("react/jsx-runtime").JSX.Element;
+export default function MarketplaceList({ marketplaces, selectedIndex, isFocused, }: MarketplaceListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/MarketplaceList.js

@@ -7,15 +7,19 @@ import { Box, Text } from 'ink';
 /**
  * Displays a list of marketplaces
  * @example
- * <MarketplaceList marketplaces={marketplaces} selectedIndex={0} />
+ * <MarketplaceList marketplaces={marketplaces} selectedIndex={0} isFocused={true} />
  */
-export default function MarketplaceList({ marketplaces, selectedIndex, }) {
+export default function MarketplaceList({ marketplaces, selectedIndex, isFocused = true, }) {
     if (marketplaces.length === 0) {
         return (_jsx(Box, { padding: 1, children: _jsx(Text, { color: "gray", children: "No marketplaces found" }) }));
     }
     return (_jsx(Box, { flexDirection: "column", children: marketplaces.map((marketplace, index) => {
             const isSelected = index === selectedIndex;
-            return (_jsxs(Box, { paddingX: 1, children: [_jsx(Box, { width: 2, children: isSelected ? _jsx(Text, { color: "cyan", children: '>' }) : _jsx(Text, { children: " " }) }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, color: isSelected ? 'cyan' : 'white', children: marketplace.name || marketplace.id }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsxs(Text, { color: "gray", children: [marketplace.pluginCount || 0, " plugins"] })] }), _jsx(Text, { dimColor: true, wrap: "truncate", children: getSourceDisplay(marketplace) })] })] }, marketplace.id));
+            return (_jsxs(Box, { paddingX: 1, children: [_jsx(Box, { width: 2, children: isSelected && isFocused ? (_jsx(Text, { color: "cyan", children: '>' })) : isSelected ? (_jsx(Text, { color: "gray", children: '›' })) : (_jsx(Text, { children: " " })) }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, color: isSelected && isFocused
+                                            ? 'cyan'
+                                            : isSelected
+                                                ? 'gray'
+                                                : 'white', children: marketplace.name || marketplace.id }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsxs(Text, { color: "gray", children: [marketplace.pluginCount || 0, " plugins"] })] }), _jsx(Text, { dimColor: true, wrap: "truncate", children: getSourceDisplay(marketplace) })] })] }, marketplace.id));
         }) }));
 }
 /**

package/dist/components/PluginList.d.ts

@@ -9,11 +9,38 @@ interface PluginListProps {
     selectedIndex: number;
     /** Maximum visible items (for virtual scrolling) */
     visibleCount?: number;
+    /** Whether the list has keyboard focus */
+    isFocused?: boolean;
 }
 /**
  * Scrollable plugin list with selection
  * @example
- * <PluginList plugins={plugins} selectedIndex={0} visibleCount={15} />
+ * <PluginList plugins={plugins} selectedIndex={0} visibleCount={15} isFocused={true} />
  */
-export default function PluginList({ plugins, selectedIndex, visibleCount, }: PluginListProps): import("react/jsx-runtime").JSX.Element;
+export default function PluginList({ plugins, selectedIndex, visibleCount, isFocused, }: PluginListProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Truncate text to max length with ellipsis
+ * @param text - The text to truncate
+ * @param maxLength - Maximum length including ellipsis
+ * @returns
+ * - Original text if within maxLength
+ * - Truncated text with "..." suffix if exceeds maxLength
+ * @example
+ * truncate('Hello', 10)        // => 'Hello'
+ * truncate('Hello World', 8)   // => 'Hello...'
+ */
+export declare function truncate(text: string, maxLength: number): string;
+/**
+ * Format large numbers with K/M suffix
+ * @param count - The number to format
+ * @returns
+ * - "X.XM" for millions (>= 1,000,000)
+ * - "X.XK" for thousands (>= 1,000)
+ * - String representation for smaller numbers
+ * @example
+ * formatCount(1500)     // => '1.5K'
+ * formatCount(1200000)  // => '1.2M'
+ * formatCount(500)      // => '500'
+ */
+export declare function formatCount(count: number): string;
 export {};

package/dist/components/PluginList.js

@@ -9,9 +9,9 @@ import StatusIcon from './StatusIcon.js';
 /**
  * Scrollable plugin list with selection
  * @example
- * <PluginList plugins={plugins} selectedIndex={0} visibleCount={15} />
+ * <PluginList plugins={plugins} selectedIndex={0} visibleCount={15} isFocused={true} />
  */
-export default function PluginList({ plugins, selectedIndex, visibleCount = 15, }) {
+export default function PluginList({ plugins, selectedIndex, visibleCount = 15, isFocused = true, }) {
     if (plugins.length === 0) {
         return (_jsx(Box, { padding: 1, children: _jsx(Text, { color: "gray", children: "No plugins found" }) }));
     }
@@ -29,21 +29,42 @@ export default function PluginList({ plugins, selectedIndex, visibleCount = 15,
     return (_jsxs(Box, { flexDirection: "column", children: [hasPrevious && _jsxs(Text, { dimColor: true, children: ["\u2191 ", startIndex, " more above"] }), visiblePlugins.map((plugin, index) => {
                 const actualIndex = startIndex + index;
                 const isSelected = actualIndex === selectedIndex;
-                return (_jsxs(Box, { paddingX: 1, children: [_jsx(Box, { width: 2, children: isSelected ? _jsx(Text, { color: "cyan", children: '>' }) : _jsx(Text, { children: " " }) }), _jsx(Box, { width: 2, children: _jsx(StatusIcon, { isInstalled: plugin.isInstalled, isEnabled: plugin.isEnabled }) }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, color: isSelected ? 'cyan' : 'white', children: plugin.name }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsx(Text, { color: "gray", children: truncate(plugin.marketplace, 20) }), plugin.installCount > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "\u00B7" }), _jsxs(Text, { color: "gray", children: [formatCount(plugin.installCount), " installs"] })] }))] }), _jsx(Text, { dimColor: true, wrap: "truncate", children: truncate(plugin.description, 60) })] })] }, plugin.id));
+                return (_jsxs(Box, { paddingX: 1, children: [_jsx(Box, { width: 2, children: isSelected && isFocused ? (_jsx(Text, { color: "cyan", children: '>' })) : isSelected ? (_jsx(Text, { color: "gray", children: '›' })) : (_jsx(Text, { children: " " })) }), _jsx(Box, { width: 2, children: _jsx(StatusIcon, { isInstalled: plugin.isInstalled, isEnabled: plugin.isEnabled }) }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, color: isSelected && isFocused
+                                                ? 'cyan'
+                                                : isSelected
+                                                    ? 'gray'
+                                                    : 'white', children: plugin.name }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsx(Text, { color: "gray", children: truncate(plugin.marketplace, 20) }), plugin.installCount > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "\u00B7" }), _jsxs(Text, { color: "gray", children: [formatCount(plugin.installCount), " installs"] })] }))] }), _jsx(Text, { dimColor: true, wrap: "truncate", children: truncate(plugin.description, 60) })] })] }, plugin.id));
             }), hasMore && (_jsxs(Text, { dimColor: true, children: ["\u2193 ", plugins.length - endIndex, " more below"] }))] }));
 }
 /**
  * Truncate text to max length with ellipsis
+ * @param text - The text to truncate
+ * @param maxLength - Maximum length including ellipsis
+ * @returns
+ * - Original text if within maxLength
+ * - Truncated text with "..." suffix if exceeds maxLength
+ * @example
+ * truncate('Hello', 10)        // => 'Hello'
+ * truncate('Hello World', 8)   // => 'Hello...'
  */
-function truncate(text, maxLength) {
+export function truncate(text, maxLength) {
     if (text.length <= maxLength)
         return text;
     return text.slice(0, maxLength - 3) + '...';
 }
 /**
  * Format large numbers with K/M suffix
+ * @param count - The number to format
+ * @returns
+ * - "X.XM" for millions (>= 1,000,000)
+ * - "X.XK" for thousands (>= 1,000)
+ * - String representation for smaller numbers
+ * @example
+ * formatCount(1500)     // => '1.5K'
+ * formatCount(1200000)  // => '1.2M'
+ * formatCount(500)      // => '500'
  */
-function formatCount(count) {
+export function formatCount(count) {
     if (count >= 1000000) {
         return `${(count / 1000000).toFixed(1)}M`;
     }

package/dist/components/SearchInput.js

@@ -10,5 +10,5 @@ import { Box, Text } from 'ink';
  * <SearchInput query={searchQuery} isActive={isSearchMode} />
  */
 export default function SearchInput({ query, isActive = false, placeholder = 'Type to search...', }) {
-    return (_jsxs(Box, { borderStyle: isActive ? 'round' : 'single', borderColor: isActive ? 'cyan' : 'gray', paddingX: 1, children: [_jsx(Text, { color: isActive ? 'cyan' : 'gray', children: "Q " }), query ? _jsx(Text, { children: query }) : _jsx(Text, { dimColor: true, children: placeholder }), isActive && _jsx(Text, { color: "cyan", children: "\u258C" })] }));
+    return (_jsxs(Box, { borderStyle: isActive ? 'round' : 'single', borderColor: isActive ? 'cyan' : 'gray', paddingX: 1, children: [_jsx(Text, { color: isActive ? 'cyan' : 'gray', children: "\uD83D\uDD0D " }), query ? _jsx(Text, { children: query }) : _jsx(Text, { dimColor: true, children: placeholder }), isActive && _jsx(Text, { color: "cyan", children: "\u258C" })] }));
 }

package/dist/components/TabBar.d.ts

@@ -3,17 +3,19 @@
  * Horizontal tab navigation for the dashboard
  * Supports ← → arrow key navigation
  */
-type Tab = 'discover' | 'installed' | 'marketplaces' | 'errors';
+type Tab = 'enabled' | 'installed' | 'discover' | 'marketplaces' | 'errors';
 interface TabBarProps {
     activeTab: Tab;
     onTabChange?: (tab: Tab) => void;
+    /** Whether the tab bar has keyboard focus */
+    isFocused?: boolean;
 }
 /**
  * Horizontal tab bar component
  * @example
- * <TabBar activeTab="discover" onTabChange={setActiveTab} />
+ * <TabBar activeTab="discover" isFocused={true} />
  */
-export default function TabBar({ activeTab }: TabBarProps): import("react/jsx-runtime").JSX.Element;
+export default function TabBar({ activeTab, isFocused }: TabBarProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Get the next tab in the cycle
  * @param currentTab - Current active tab

package/dist/components/TabBar.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * TabBar component
  * Horizontal tab navigation for the dashboard
@@ -6,21 +6,33 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { Box, Text } from 'ink';
 const TABS = [
-    { id: 'discover', label: 'Discover' },
+    { id: 'enabled', label: 'Enabled' },
     { id: 'installed', label: 'Installed' },
+    { id: 'discover', label: 'Discover' },
     { id: 'marketplaces', label: 'Marketplaces' },
     { id: 'errors', label: 'Errors' },
 ];
+/** Color constants for consistent theming */
+const COLORS = {
+    /** Background color when tab bar is focused */
+    FOCUS_BG: '#1a3a4a',
+    /** Background color for active tab (not focused) */
+    ACTIVE_BG: '#333333',
+    /** Foreground color for active/focused elements */
+    ACTIVE_FG: 'cyan',
+    /** Foreground color for inactive elements */
+    INACTIVE_FG: 'gray',
+};
 /**
  * Horizontal tab bar component
  * @example
- * <TabBar activeTab="discover" onTabChange={setActiveTab} />
+ * <TabBar activeTab="discover" isFocused={true} />
  */
-export default function TabBar({ activeTab }) {
-    return (_jsx(Box, { gap: 2, marginBottom: 1, children: TABS.map((tab) => {
-            const isActive = tab.id === activeTab;
-            return (_jsx(Box, { children: isActive ? (_jsx(Text, { bold: true, color: "cyan", backgroundColor: "#333333", children: ` ${tab.label} ` })) : (_jsx(Text, { color: "gray", children: ` ${tab.label} ` })) }, tab.id));
-        }) }));
+export default function TabBar({ activeTab, isFocused = false }) {
+    return (_jsxs(Box, { gap: 2, marginBottom: 1, children: [isFocused && _jsx(Text, { color: COLORS.ACTIVE_FG, children: "\u25B6" }), TABS.map((tab) => {
+                const isActive = tab.id === activeTab;
+                return (_jsx(Box, { children: isActive ? (_jsx(Text, { bold: true, color: COLORS.ACTIVE_FG, backgroundColor: isFocused ? COLORS.FOCUS_BG : COLORS.ACTIVE_BG, children: isFocused ? `[${tab.label}]` : ` ${tab.label} ` })) : (_jsx(Text, { color: COLORS.INACTIVE_FG, children: ` ${tab.label} ` })) }, tab.id));
+            })] }));
 }
 /**
  * Get the next tab in the cycle

package/dist/services/pluginService.d.ts

@@ -54,6 +54,16 @@ export declare function searchPlugins(query: string, plugins?: Plugin[]): Plugin
  * @returns Sorted plugins array
  */
 export declare function sortPlugins(plugins: Plugin[], sortBy: 'installs' | 'name' | 'date', order: 'asc' | 'desc'): Plugin[];
+/**
+ * Search marketplaces by query
+ * Filters marketplaces by name, id, and source URL/repo
+ * @param query - Search query
+ * @param marketplaces - Marketplaces to search
+ * @returns Filtered marketplaces matching the query
+ * @example
+ * searchMarketplaces('official', marketplaces) // => marketplaces with 'official' in name/id
+ */
+export declare function searchMarketplaces(query: string, marketplaces: Marketplace[]): Marketplace[];
 /**
  * Get plugin statistics
  * @returns Object with various plugin counts

package/dist/services/pluginService.js

@@ -172,6 +172,22 @@ export function sortPlugins(plugins, sortBy, order) {
     });
     return sorted;
 }
+/**
+ * Search marketplaces by query
+ * Filters marketplaces by name, id, and source URL/repo
+ * @param query - Search query
+ * @param marketplaces - Marketplaces to search
+ * @returns Filtered marketplaces matching the query
+ * @example
+ * searchMarketplaces('official', marketplaces) // => marketplaces with 'official' in name/id
+ */
+export function searchMarketplaces(query, marketplaces) {
+    const lowerQuery = query.toLowerCase();
+    return marketplaces.filter((m) => m.name.toLowerCase().includes(lowerQuery) ||
+        m.id.toLowerCase().includes(lowerQuery) ||
+        m.source.url?.toLowerCase().includes(lowerQuery) ||
+        m.source.repo?.toLowerCase().includes(lowerQuery));
+}
 /**
  * Get plugin statistics
  * @returns Object with various plugin counts

package/dist/tabs/DiscoverTab.d.ts

@@ -2,14 +2,15 @@
  * DiscoverTab component
  * Browse all available plugins from all marketplaces
  */
-import type { Plugin, AppState } from '../types/index.js';
+import type { Plugin, AppState, FocusZone } from '../types/index.js';
 interface DiscoverTabProps {
     plugins: Plugin[];
     selectedIndex: number;
     searchQuery: string;
     sortBy: AppState['sortBy'];
     sortOrder: AppState['sortOrder'];
-    isSearchMode?: boolean;
+    /** Current focus zone for keyboard navigation */
+    focusZone?: FocusZone;
 }
 /**
  * Discover tab - browse all plugins
@@ -20,7 +21,8 @@ interface DiscoverTabProps {
  *   searchQuery={state.searchQuery}
  *   sortBy={state.sortBy}
  *   sortOrder={state.sortOrder}
+ *   focusZone="list"
  * />
  */
-export default function DiscoverTab({ plugins, selectedIndex, searchQuery, sortBy, sortOrder, isSearchMode, }: DiscoverTabProps): import("react/jsx-runtime").JSX.Element;
+export default function DiscoverTab({ plugins, selectedIndex, searchQuery, sortBy, sortOrder, focusZone, }: DiscoverTabProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/tabs/DiscoverTab.js

@@ -17,9 +17,10 @@ import SortDropdown from '../components/SortDropdown.js';
  *   searchQuery={state.searchQuery}
  *   sortBy={state.sortBy}
  *   sortOrder={state.sortOrder}
+ *   focusZone="list"
  * />
  */
-export default function DiscoverTab({ plugins, selectedIndex, searchQuery, sortBy, sortOrder, isSearchMode = false, }) {
+export default function DiscoverTab({ plugins, selectedIndex, searchQuery, sortBy, sortOrder, focusZone = 'list', }) {
     const selectedPlugin = plugins[selectedIndex] ?? null;
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsxs(Text, { bold: true, children: ["Discover plugins (", plugins.length > 0 ? `${selectedIndex + 1}/${plugins.length}` : '0', ")"] }), _jsx(Box, { flexGrow: 1 }), _jsx(SortDropdown, { sortBy: sortBy, sortOrder: sortOrder })] }), _jsx(Box, { marginBottom: 1, children: _jsx(SearchInput, { query: searchQuery, isActive: isSearchMode, placeholder: "Type to search..." }) }), _jsxs(Box, { flexGrow: 1, children: [_jsx(Box, { width: "50%", flexDirection: "column", children: _jsx(PluginList, { plugins: plugins, selectedIndex: selectedIndex, visibleCount: 12 }) }), _jsx(Box, { width: "50%", flexDirection: "column", children: _jsx(PluginDetail, { plugin: selectedPlugin }) })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsxs(Text, { bold: true, children: ["Discover plugins (", plugins.length > 0 ? `${selectedIndex + 1}/${plugins.length}` : '0', ")"] }), _jsx(Box, { flexGrow: 1 }), _jsx(SortDropdown, { sortBy: sortBy, sortOrder: sortOrder })] }), _jsx(Box, { marginBottom: 1, children: _jsx(SearchInput, { query: searchQuery, isActive: focusZone === 'search', placeholder: "Type to search..." }) }), _jsxs(Box, { flexGrow: 1, children: [_jsx(Box, { width: "50%", flexDirection: "column", children: _jsx(PluginList, { plugins: plugins, selectedIndex: selectedIndex, visibleCount: 12, isFocused: focusZone === 'list' }) }), _jsx(Box, { width: "50%", flexDirection: "column", children: _jsx(PluginDetail, { plugin: selectedPlugin }) })] })] }));
 }

package/dist/tabs/EnabledTab.d.ts

@@ -0,0 +1,24 @@
+/**
+ * EnabledTab component
+ * View and manage enabled plugins (installed + enabled)
+ */
+import type { Plugin, FocusZone } from '../types/index.js';
+interface EnabledTabProps {
+    plugins: Plugin[];
+    selectedIndex: number;
+    searchQuery?: string;
+    /** Current focus zone for keyboard navigation */
+    focusZone?: FocusZone;
+}
+/**
+ * Enabled tab - view currently active plugins
+ * @param plugins - Filtered enabled plugins (search already applied by parent)
+ * @param selectedIndex - Currently selected item index
+ * @param searchQuery - Current search query string
+ * @param focusZone - Current focus zone for keyboard navigation
+ * @returns Enabled tab component
+ * @example
+ * <EnabledTab plugins={enabledPlugins} selectedIndex={0} searchQuery="" focusZone="list" />
+ */
+export default function EnabledTab({ plugins, selectedIndex, searchQuery, focusZone, }: EnabledTabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/tabs/EnabledTab.js

@@ -0,0 +1,26 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * EnabledTab component
+ * View and manage enabled plugins (installed + enabled)
+ */
+import { Box, Text } from 'ink';
+import PluginList from '../components/PluginList.js';
+import PluginDetail from '../components/PluginDetail.js';
+import SearchInput from '../components/SearchInput.js';
+/**
+ * Enabled tab - view currently active plugins
+ * @param plugins - Filtered enabled plugins (search already applied by parent)
+ * @param selectedIndex - Currently selected item index
+ * @param searchQuery - Current search query string
+ * @param focusZone - Current focus zone for keyboard navigation
+ * @returns Enabled tab component
+ * @example
+ * <EnabledTab plugins={enabledPlugins} selectedIndex={0} searchQuery="" focusZone="list" />
+ */
+export default function EnabledTab({ plugins, selectedIndex, searchQuery = '', focusZone = 'list', }) {
+    // Plugins are already filtered by parent, use directly
+    const selectedPlugin = plugins[selectedIndex] ?? null;
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsxs(Text, { bold: true, children: ["Enabled plugins (", plugins.length > 0 ? `${selectedIndex + 1}/${plugins.length}` : '0', ")"] }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { dimColor: true, children: "Currently active in Claude Code" })] }), _jsx(Box, { marginBottom: 1, children: _jsx(SearchInput, { query: searchQuery, isActive: focusZone === 'search', placeholder: "Type to search enabled plugins..." }) }), _jsxs(Box, { flexGrow: 1, children: [_jsx(Box, { width: "50%", flexDirection: "column", children: plugins.length === 0 ? (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: searchQuery ? 'No matching plugins' : 'No enabled plugins' }), _jsx(Text, { dimColor: true, children: searchQuery
+                                        ? 'Try a different search term'
+                                        : 'Enable plugins in the Installed tab or use /plugin enable' })] })) : (_jsx(PluginList, { plugins: plugins, selectedIndex: selectedIndex, visibleCount: 12, isFocused: focusZone === 'list' })) }), _jsx(Box, { width: "50%", flexDirection: "column", children: _jsx(PluginDetail, { plugin: selectedPlugin }) })] })] }));
+}

package/dist/tabs/InstalledTab.d.ts

@@ -2,15 +2,22 @@
  * InstalledTab component
  * View and manage installed plugins
  */
-import type { Plugin } from '../types/index.js';
+import type { Plugin, FocusZone } from '../types/index.js';
 interface InstalledTabProps {
     plugins: Plugin[];
     selectedIndex: number;
+    searchQuery?: string;
+    /** Current focus zone for keyboard navigation */
+    focusZone?: FocusZone;
 }
 /**
  * Installed tab - manage installed plugins
+ * @param plugins - Filtered installed plugins (search already applied by parent)
+ * @param selectedIndex - Currently selected item index
+ * @param searchQuery - Current search query string
+ * @param focusZone - Current focus zone for keyboard navigation
  * @example
- * <InstalledTab plugins={installedPlugins} selectedIndex={0} />
+ * <InstalledTab plugins={installedPlugins} selectedIndex={0} searchQuery="" focusZone="list" />
  */
-export default function InstalledTab({ plugins, selectedIndex, }: InstalledTabProps): import("react/jsx-runtime").JSX.Element;
+export default function InstalledTab({ plugins, selectedIndex, searchQuery, focusZone, }: InstalledTabProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/tabs/InstalledTab.js

@@ -6,19 +6,23 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import PluginList from '../components/PluginList.js';
 import PluginDetail from '../components/PluginDetail.js';
+import SearchInput from '../components/SearchInput.js';
 /**
  * Installed tab - manage installed plugins
+ * @param plugins - Filtered installed plugins (search already applied by parent)
+ * @param selectedIndex - Currently selected item index
+ * @param searchQuery - Current search query string
+ * @param focusZone - Current focus zone for keyboard navigation
  * @example
- * <InstalledTab plugins={installedPlugins} selectedIndex={0} />
+ * <InstalledTab plugins={installedPlugins} selectedIndex={0} searchQuery="" focusZone="list" />
  */
-export default function InstalledTab({ plugins, selectedIndex, }) {
-    // Filter to installed plugins only
-    const installedPlugins = plugins.filter((p) => p.isInstalled);
-    const selectedPlugin = installedPlugins[selectedIndex] ?? null;
+export default function InstalledTab({ plugins, selectedIndex, searchQuery = '', focusZone = 'list', }) {
+    // Plugins are already filtered by parent, use directly
+    const selectedPlugin = plugins[selectedIndex] ?? null;
     // Count enabled/disabled
-    const enabledCount = installedPlugins.filter((p) => p.isEnabled).length;
-    const disabledCount = installedPlugins.length - enabledCount;
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsxs(Text, { bold: true, children: ["Installed plugins (", installedPlugins.length > 0
-                                ? `${selectedIndex + 1}/${installedPlugins.length}`
-                                : '0', ")"] }), _jsx(Box, { flexGrow: 1 }), _jsxs(Box, { gap: 2, children: [_jsxs(Text, { color: "green", children: ["\u25CF ", enabledCount, " enabled"] }), _jsxs(Text, { color: "yellow", children: ["\u25D0 ", disabledCount, " disabled"] })] })] }), _jsxs(Box, { flexGrow: 1, children: [_jsx(Box, { width: "50%", flexDirection: "column", children: installedPlugins.length === 0 ? (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "No plugins installed" }), _jsxs(Text, { dimColor: true, children: ["Use the Discover tab or", ' ', _jsx(Text, { color: "white", children: "/plugin install" }), " in Claude Code"] })] })) : (_jsx(PluginList, { plugins: installedPlugins, selectedIndex: selectedIndex, visibleCount: 12 })) }), _jsx(Box, { width: "50%", flexDirection: "column", children: _jsx(PluginDetail, { plugin: selectedPlugin }) })] })] }));
+    const enabledCount = plugins.filter((p) => p.isEnabled).length;
+    const disabledCount = plugins.length - enabledCount;
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsxs(Text, { bold: true, children: ["Installed plugins (", plugins.length > 0 ? `${selectedIndex + 1}/${plugins.length}` : '0', ")"] }), _jsx(Box, { flexGrow: 1 }), _jsxs(Box, { gap: 2, children: [_jsxs(Text, { color: "green", children: ["\u25CF ", enabledCount, " enabled"] }), _jsxs(Text, { color: "yellow", children: ["\u25D0 ", disabledCount, " disabled"] })] })] }), _jsx(Box, { marginBottom: 1, children: _jsx(SearchInput, { query: searchQuery, isActive: focusZone === 'search', placeholder: "Type to search installed plugins..." }) }), _jsxs(Box, { flexGrow: 1, children: [_jsx(Box, { width: "50%", flexDirection: "column", children: plugins.length === 0 ? (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: searchQuery ? 'No matching plugins' : 'No plugins installed' }), _jsx(Text, { dimColor: true, children: searchQuery
+                                        ? 'Try a different search term'
+                                        : 'Use the Discover tab or /plugin install in Claude Code' })] })) : (_jsx(PluginList, { plugins: plugins, selectedIndex: selectedIndex, visibleCount: 12, isFocused: focusZone === 'list' })) }), _jsx(Box, { width: "50%", flexDirection: "column", children: _jsx(PluginDetail, { plugin: selectedPlugin }) })] })] }));
 }

package/dist/tabs/MarketplacesTab.d.ts

@@ -2,15 +2,22 @@
  * MarketplacesTab component
  * View and manage marketplace sources
  */
-import type { Marketplace } from '../types/index.js';
+import type { Marketplace, FocusZone } from '../types/index.js';
 interface MarketplacesTabProps {
     marketplaces: Marketplace[];
     selectedIndex: number;
+    searchQuery?: string;
+    /** Current focus zone for keyboard navigation */
+    focusZone?: FocusZone;
 }
 /**
  * Marketplaces tab - manage plugin sources
+ * @param marketplaces - Filtered marketplaces (search already applied by parent)
+ * @param selectedIndex - Currently selected item index
+ * @param searchQuery - Current search query string
+ * @param focusZone - Current focus zone for keyboard navigation
  * @example
- * <MarketplacesTab marketplaces={marketplaces} selectedIndex={0} />
+ * <MarketplacesTab marketplaces={marketplaces} selectedIndex={0} searchQuery="" focusZone="list" />
  */
-export default function MarketplacesTab({ marketplaces, selectedIndex, }: MarketplacesTabProps): import("react/jsx-runtime").JSX.Element;
+export default function MarketplacesTab({ marketplaces, selectedIndex, searchQuery, focusZone, }: MarketplacesTabProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/tabs/MarketplacesTab.js

@@ -6,16 +6,25 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import MarketplaceList from '../components/MarketplaceList.js';
 import MarketplaceDetail from '../components/MarketplaceDetail.js';
+import SearchInput from '../components/SearchInput.js';
 /**
  * Marketplaces tab - manage plugin sources
+ * @param marketplaces - Filtered marketplaces (search already applied by parent)
+ * @param selectedIndex - Currently selected item index
+ * @param searchQuery - Current search query string
+ * @param focusZone - Current focus zone for keyboard navigation
  * @example
- * <MarketplacesTab marketplaces={marketplaces} selectedIndex={0} />
+ * <MarketplacesTab marketplaces={marketplaces} selectedIndex={0} searchQuery="" focusZone="list" />
  */
-export default function MarketplacesTab({ marketplaces, selectedIndex, }) {
+export default function MarketplacesTab({ marketplaces, selectedIndex, searchQuery = '', focusZone = 'list', }) {
     const selectedMarketplace = marketplaces[selectedIndex] ?? null;
     // Count total plugins across all marketplaces
     const totalPlugins = marketplaces.reduce((sum, m) => sum + (m.pluginCount || 0), 0);
     return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsxs(Text, { bold: true, children: ["Marketplaces (", marketplaces.length > 0
                                 ? `${selectedIndex + 1}/${marketplaces.length}`
-                                : '0', ")"] }), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { color: "gray", children: [totalPlugins, " total plugins"] })] }), _jsxs(Box, { flexGrow: 1, children: [_jsx(Box, { width: "50%", flexDirection: "column", children: marketplaces.length === 0 ? (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "No marketplaces found" }), _jsxs(Text, { dimColor: true, children: ["Add marketplaces with", ' ', _jsx(Text, { color: "white", children: "/plugin add-marketplace" })] })] })) : (_jsx(MarketplaceList, { marketplaces: marketplaces, selectedIndex: selectedIndex })) }), _jsx(Box, { width: "50%", flexDirection: "column", children: _jsx(MarketplaceDetail, { marketplace: selectedMarketplace }) })] })] }));
+                                : '0', ")"] }), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { color: "gray", children: [totalPlugins, " total plugins"] })] }), _jsx(Box, { marginBottom: 1, children: _jsx(SearchInput, { query: searchQuery, isActive: focusZone === 'search', placeholder: "Type to search marketplaces..." }) }), _jsxs(Box, { flexGrow: 1, children: [_jsx(Box, { width: "50%", flexDirection: "column", children: marketplaces.length === 0 ? (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: searchQuery
+                                        ? 'No matching marketplaces'
+                                        : 'No marketplaces found' }), _jsx(Text, { dimColor: true, children: searchQuery
+                                        ? 'Try a different search term'
+                                        : 'Add marketplaces with /plugin add-marketplace' })] })) : (_jsx(MarketplaceList, { marketplaces: marketplaces, selectedIndex: selectedIndex, isFocused: focusZone === 'list' })) }), _jsx(Box, { width: "50%", flexDirection: "column", children: _jsx(MarketplaceDetail, { marketplace: selectedMarketplace }) })] })] }));
 }

package/dist/types/index.d.ts

@@ -152,12 +152,19 @@ export interface Settings {
     enabledPlugins?: Record<string, boolean>;
     [key: string]: unknown;
 }
+/**
+ * Focus zones for keyboard navigation
+ * Defines which UI area currently has keyboard focus
+ */
+export type FocusZone = 'tabbar' | 'search' | 'list';
 /**
  * Application state for useReducer
  */
 export interface AppState {
     /** Current active tab */
-    activeTab: 'discover' | 'installed' | 'marketplaces' | 'errors';
+    activeTab: 'enabled' | 'installed' | 'discover' | 'marketplaces' | 'errors';
+    /** Current focus zone for keyboard navigation */
+    focusZone: FocusZone;
     /** All plugins from all marketplaces */
     plugins: Plugin[];
     /** All marketplaces */
@@ -184,6 +191,8 @@ export interface AppState {
     operationPluginId: string | null;
     /** Whether confirmation dialog is showing */
     confirmUninstall: boolean;
+    /** Whether help overlay is showing */
+    showHelp: boolean;
 }
 /**
  * Action types for useReducer
@@ -247,4 +256,9 @@ export type Action = {
     payload: string;
 } | {
     type: 'HIDE_CONFIRM_UNINSTALL';
+} | {
+    type: 'TOGGLE_HELP';
+} | {
+    type: 'SET_FOCUS_ZONE';
+    payload: FocusZone;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laststance/claude-plugin-dashboard",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Interactive CLI dashboard to manage Claude Code plugins",
   "license": "MIT",
   "author": "Ryota Murakami <ryota.murakami@laststance.io> (https://github.com/ryota-murakami)",
@@ -24,6 +24,8 @@
   "bin": {
     "claude-plugin-dashboard": "./dist/cli.js"
   },
+  "main": "./dist/app.js",
+  "types": "./dist/app.d.ts",
   "type": "module",
   "engines": {
     "node": ">=20"
@@ -42,7 +44,10 @@
     "link": "pnpm build && pnpm link --global",
     "prepublishOnly": "pnpm build",
     "prepare": "husky",
-    "prettier": "prettier --ignore-unknown --write ."
+    "prettier": "prettier --ignore-unknown --write .",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "ink": "^5.1.0",
@@ -52,9 +57,12 @@
     "@sindresorhus/tsconfig": "^6.0.0",
     "@types/node": "^22.10.2",
     "@types/react": "^18.3.18",
+    "@vitest/coverage-v8": "^4.0.16",
     "husky": "^9.1.7",
+    "ink-testing-library": "^4.0.0",
     "lint-staged": "^16.2.7",
     "prettier": "^3.7.4",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "vitest": "^4.0.16"
   }
-}
+}