@laststance/claude-plugin-dashboard 0.1.0 → 0.2.0

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