@laststance/claude-plugin-dashboard 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # Claude Code Plugin Dashboard
 
-[![npm version](https://badge.fury.io/js/@laststance/claude-plugin-dashboard.svg)](https://www.npmjs.com/package/@laststance/claude-plugin-dashboard)
+[![npm version](https://img.shields.io/npm/v/@laststance/claude-plugin-dashboard)](https://www.npmjs.com/package/@laststance/claude-plugin-dashboard)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 An interactive CLI dashboard to browse, install, and manage [Claude Code](https://claude.ai/code) plugins.

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/cli.js

@@ -312,5 +312,11 @@ else {
         console.log('Use "claude-plugin-dashboard help" for non-interactive commands.');
         process.exit(1);
     }
-    render(_jsx(App, {}));
+    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');
+    });
 }

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 {};