@laststance/claude-plugin-dashboard 0.1.1 → 0.2.1

package/dist/components/AddMarketplaceDialog.d.ts

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

package/dist/components/AddMarketplaceDialog.js

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

package/dist/components/ComponentBadges.d.ts

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

package/dist/components/ComponentBadges.js

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

package/dist/components/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/PluginDetail.js

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

package/dist/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/componentService.d.ts

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