@laststance/claude-plugin-dashboard 0.3.0 → 0.3.2

package/dist/cli.js

@@ -16,7 +16,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { withFullScreen } from 'fullscreen-ink';
 import { match, P } from 'ts-pattern';
+import { Provider } from 'react-redux';
 import App from './app.js';
+import { store } from './store/index.js';
 import { loadAllPlugins, loadInstalledPlugins, loadMarketplaces, getPluginStatistics, getPluginById, } from './services/pluginService.js';
 import { enablePlugin, disablePlugin, togglePlugin, } from './services/settingsService.js';
 import { fileExists } from './services/fileService.js';
@@ -307,7 +309,7 @@ else {
     }
     // Use fullscreen-ink for alternate screen buffer management
     // This prevents rendering artifacts when switching tabs
-    const ink = withFullScreen(_jsx(App, {}));
+    const ink = withFullScreen(_jsx(Provider, { store: store, children: _jsx(App, {}) }));
     ink.start();
     ink.waitUntilExit();
 }

package/dist/components/ComponentBadges.d.ts

@@ -21,12 +21,3 @@ export interface ComponentBadgesProps {
  * // Renders: Skills:5 Slash: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

@@ -48,36 +48,3 @@ export default function ComponentBadges({ components, }) {
 function Badge({ label, count, color, }) {
     return (_jsxs(Text, { children: [_jsx(Text, { color: color, bold: true, children: label }), count !== undefined && _jsxs(Text, { dimColor: true, children: [":", count] })] }));
 }
-/**
- * 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/ComponentDetail.d.ts

@@ -0,0 +1,32 @@
+/**
+ * ComponentDetail component
+ * Displays detailed information about a selected component
+ * Shows name, type, description, allowed tools, and full content
+ */
+import type { ComponentDetailedInfo } from '../types/index.js';
+/**
+ * Props for ComponentDetail
+ */
+export interface ComponentDetailProps {
+    /** Detailed component info to display */
+    component: ComponentDetailedInfo | null;
+    /** Maximum height for the detail panel */
+    maxHeight?: number;
+}
+/**
+ * Displays detailed component information in a panel
+ * Used when user selects a component from the ComponentList
+ * Supports compact mode when maxHeight <= 4 (shows only name, type, description)
+ * @param props - ComponentDetailProps
+ * @returns React node
+ * @example
+ * <ComponentDetail
+ *   component={{
+ *     name: "sentry-code-review",
+ *     type: "skill",
+ *     description: "Analyze Sentry comments",
+ *     allowedTools: ["Read", "Edit"]
+ *   }}
+ * />
+ */
+export default function ComponentDetail({ component, maxHeight, }: ComponentDetailProps): React.ReactNode;

package/dist/components/ComponentDetail.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ComponentDetail component
+ * Displays detailed information about a selected component
+ * Shows name, type, description, allowed tools, and full content
+ */
+import * as path from 'node:path';
+import { Box, Text } from 'ink';
+/**
+ * Type badge colors for visual distinction
+ */
+const TYPE_COLORS = {
+    skill: 'magenta',
+    command: 'cyan',
+    agent: 'blue',
+    hook: 'yellow',
+    mcp: 'green',
+    lsp: 'blueBright',
+};
+/**
+ * Type labels for display
+ */
+const TYPE_LABELS = {
+    skill: 'Skill',
+    command: 'Slash Command',
+    agent: 'Agent',
+    hook: 'Hook',
+    mcp: 'MCP Server',
+    lsp: 'LSP Server',
+};
+/**
+ * Compact mode threshold - show minimal info when height is small
+ */
+const COMPACT_MODE_THRESHOLD = 4;
+/**
+ * Displays detailed component information in a panel
+ * Used when user selects a component from the ComponentList
+ * Supports compact mode when maxHeight <= 4 (shows only name, type, description)
+ * @param props - ComponentDetailProps
+ * @returns React node
+ * @example
+ * <ComponentDetail
+ *   component={{
+ *     name: "sentry-code-review",
+ *     type: "skill",
+ *     description: "Analyze Sentry comments",
+ *     allowedTools: ["Read", "Edit"]
+ *   }}
+ * />
+ */
+export default function ComponentDetail({ component, maxHeight = 10, }) {
+    // Safe content height calculation (at least 1 line)
+    const contentHeight = Math.max(1, maxHeight - 6);
+    const isCompact = maxHeight <= COMPACT_MODE_THRESHOLD;
+    if (!component) {
+        return (_jsx(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, height: maxHeight, children: _jsx(Text, { dimColor: true, children: "Select a component to view details" }) }));
+    }
+    const typeColor = TYPE_COLORS[component.type] || 'white';
+    const typeLabel = TYPE_LABELS[component.type] || component.type;
+    // Compact mode: minimal info only (name, type, description)
+    if (isCompact) {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, height: maxHeight, overflow: "hidden", children: [_jsxs(Box, { height: 1, children: [_jsxs(Text, { bold: true, color: "white", children: ["\uD83D\uDCE6 ", truncateString(component.name, 20)] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: typeColor, bold: true, children: ["[", typeLabel, "]"] })] }), _jsx(Box, { height: 1, children: _jsx(Text, { wrap: "truncate", dimColor: true, children: component.description || 'No description' }) })] }));
+    }
+    // Full mode: show all details
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, height: maxHeight, overflow: "hidden", children: [_jsxs(Box, { height: 1, children: [_jsxs(Text, { bold: true, color: "white", children: ["\uD83D\uDCE6 ", component.name] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: typeColor, bold: true, children: ["[", typeLabel, "]"] })] }), component.description && (_jsx(Box, { height: 1, children: _jsx(Text, { wrap: "truncate", children: component.description }) })), component.allowedTools && component.allowedTools.length > 0 && (_jsxs(Box, { height: 1, children: [_jsxs(Text, { color: "yellow", bold: true, children: ["Tools:", ' '] }), _jsx(Text, { dimColor: true, wrap: "truncate", children: component.allowedTools.join(', ') })] })), component.filePath && (_jsx(Box, { height: 1, children: _jsxs(Text, { color: "gray", children: ["\uD83D\uDCC4 ", shortenPath(component.filePath)] }) })), component.fullDescription && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "\u2500\u2500 Content \u2500\u2500" }), _jsx(Box, { height: contentHeight, overflow: "hidden", children: _jsx(Text, { dimColor: true, wrap: "truncate", children: truncateContent(component.fullDescription, contentHeight) }) })] }))] }));
+}
+/**
+ * Truncate string to max length with ellipsis
+ * @param str - String to truncate
+ * @param maxLength - Maximum length
+ * @returns Truncated string
+ */
+function truncateString(str, maxLength) {
+    if (str.length <= maxLength) {
+        return str;
+    }
+    return str.slice(0, maxLength - 1) + '…';
+}
+/**
+ * Shorten file path for display (cross-platform)
+ * Shows only the last few path components
+ * @param filePath - Full file path
+ * @returns Shortened path with forward slashes for consistent display
+ */
+function shortenPath(filePath) {
+    const normalized = path.normalize(filePath);
+    const parts = normalized.split(path.sep);
+    // Show last 4 components: .../skills/component-name/SKILL.md
+    if (parts.length > 4) {
+        return '.../' + parts.slice(-4).join('/');
+    }
+    return parts.join('/');
+}
+/**
+ * Truncate multi-line content to fit within height
+ * @param content - Full content string
+ * @param maxLines - Maximum number of lines
+ * @returns Truncated content
+ */
+function truncateContent(content, maxLines) {
+    const lines = content.split('\n');
+    if (lines.length <= maxLines) {
+        return content;
+    }
+    return lines.slice(0, maxLines).join('\n') + '\n...';
+}

package/dist/components/ComponentList.d.ts

@@ -8,7 +8,19 @@
  * - Not installed: Names only from marketplace JSON (if available)
  * - Fallback: Count-only display from PluginComponents
  */
-import type { PluginComponents, PluginComponentsDetailed } from '../types/index.js';
+import type { ComponentInfo, PluginComponents, PluginComponentsDetailed } from '../types/index.js';
+/**
+ * Flattened component item for selection tracking
+ * Combines type and info for easy navigation
+ */
+export interface FlatComponentItem {
+    /** Component info */
+    info: ComponentInfo;
+    /** Category label */
+    category: string;
+    /** Category color */
+    color: string;
+}
 /**
  * Props for ComponentList
  */
@@ -19,19 +31,41 @@ export interface ComponentListProps {
     componentsDetailed?: PluginComponentsDetailed;
     /** Maximum visible items per category (default: 3) */
     maxItems?: number;
+    /** Whether this list is focused for selection */
+    isFocused?: boolean;
+    /** Currently selected index in flattened list */
+    selectedIndex?: number;
+    /** Callback when selection changes */
+    onSelect?: (item: FlatComponentItem, index: number) => void;
+    /** Number of visible items in virtual scroll viewport (default: 5) */
+    visibleCount?: number;
 }
+/**
+ * Flatten all components from detailed info into a single array for selection
+ * @param componentsDetailed - Detailed component info
+ * @returns Array of FlatComponentItem for navigation
+ * @example
+ * flattenComponents({ skills: [{ name: 'xlsx', type: 'skill' }] })
+ * // => [{ info: { name: 'xlsx', type: 'skill' }, category: 'Skills', color: 'magenta' }]
+ */
+export declare function flattenComponents(componentsDetailed?: PluginComponentsDetailed): FlatComponentItem[];
 /**
  * Displays component details in a collapsible list
  * Shows names when available, falls back to counts
+ * Supports selection mode when isFocused is true
+ * Uses virtual scrolling when focused to prevent layout overflow
  * @param props - ComponentListProps
  * @returns React node or null if no components
  * @example
  * <ComponentList
  *   componentsDetailed={{ skills: [{ name: 'xlsx', type: 'skill' }] }}
  *   maxItems={3}
+ *   isFocused={true}
+ *   selectedIndex={0}
+ *   visibleCount={5}
  * />
  */
-export default function ComponentList({ components, componentsDetailed, maxItems, }: ComponentListProps): React.ReactNode;
+export default function ComponentList({ components, componentsDetailed, maxItems, isFocused, selectedIndex, visibleCount, }: ComponentListProps): React.ReactNode;
 /**
  * Check if PluginComponentsDetailed has any data
  * @param detailed - Detailed components object

package/dist/components/ComponentList.js

@@ -61,18 +61,62 @@ const CATEGORY_CONFIGS = [
  * Default maximum visible items per category
  */
 const DEFAULT_MAX_ITEMS = 3;
+/**
+ * Flatten all components from detailed info into a single array for selection
+ * @param componentsDetailed - Detailed component info
+ * @returns Array of FlatComponentItem for navigation
+ * @example
+ * flattenComponents({ skills: [{ name: 'xlsx', type: 'skill' }] })
+ * // => [{ info: { name: 'xlsx', type: 'skill' }, category: 'Skills', color: 'magenta' }]
+ */
+export function flattenComponents(componentsDetailed) {
+    if (!componentsDetailed)
+        return [];
+    const items = [];
+    // Process each category in order
+    for (const config of CATEGORY_CONFIGS) {
+        const detailedItems = componentsDetailed[config.detailedKey];
+        if (!detailedItems?.length)
+            continue;
+        if (isComponentInfoArray(detailedItems)) {
+            for (const info of detailedItems) {
+                items.push({ info, category: config.label, color: config.color });
+            }
+        }
+        else {
+            // String array (mcpServers, lspServers, hooks) - convert to ComponentInfo
+            for (const name of detailedItems) {
+                items.push({
+                    info: { name, type: config.type },
+                    category: config.label,
+                    color: config.color,
+                });
+            }
+        }
+    }
+    return items;
+}
+/**
+ * Default visible count for virtual scroll
+ */
+const DEFAULT_VISIBLE_COUNT = 5;
 /**
  * Displays component details in a collapsible list
  * Shows names when available, falls back to counts
+ * Supports selection mode when isFocused is true
+ * Uses virtual scrolling when focused to prevent layout overflow
  * @param props - ComponentListProps
  * @returns React node or null if no components
  * @example
  * <ComponentList
  *   componentsDetailed={{ skills: [{ name: 'xlsx', type: 'skill' }] }}
  *   maxItems={3}
+ *   isFocused={true}
+ *   selectedIndex={0}
+ *   visibleCount={5}
  * />
  */
-export default function ComponentList({ components, componentsDetailed, maxItems = DEFAULT_MAX_ITEMS, }) {
+export default function ComponentList({ components, componentsDetailed, maxItems = DEFAULT_MAX_ITEMS, isFocused = false, selectedIndex = 0, visibleCount = DEFAULT_VISIBLE_COUNT, }) {
     // No data at all
     if (!components && !componentsDetailed) {
         return null;
@@ -83,6 +127,14 @@ export default function ComponentList({ components, componentsDetailed, maxItems
     if (!hasDetailedData && !hasCountData) {
         return null;
     }
+    // When focused, use flat virtual scroll approach
+    if (isFocused && hasDetailedData) {
+        const flatItems = flattenComponents(componentsDetailed);
+        return (_jsx(VirtualScrollList, { items: flatItems, selectedIndex: selectedIndex, visibleCount: visibleCount }));
+    }
+    // Normal mode: show collapsed categories
+    // Track current index across all categories
+    let currentFlatIndex = 0;
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 0, children: _jsx(Text, { color: "cyan", bold: true, children: "\u2500\u2500 Components \u2500\u2500" }) }), CATEGORY_CONFIGS.map((config) => {
                 const detailedItems = componentsDetailed?.[config.detailedKey];
                 const count = components?.[config.countKey];
@@ -94,11 +146,15 @@ export default function ComponentList({ components, componentsDetailed, maxItems
                 if (detailedItems && detailedItems.length > 0) {
                     // Type guard: detailedItems could be ComponentInfo[] or string[]
                     if (isComponentInfoArray(detailedItems)) {
-                        return (_jsx(CategorySection, { label: config.label, color: config.color, items: detailedItems, maxItems: maxItems }, config.detailedKey));
+                        const startIndex = currentFlatIndex;
+                        currentFlatIndex += detailedItems.length;
+                        return (_jsx(CategorySection, { label: config.label, color: config.color, items: detailedItems, maxItems: maxItems, isFocused: false, selectedIndex: selectedIndex, startIndex: startIndex }, config.detailedKey));
                     }
                     else {
                         // String array (mcpServers, lspServers, hooks)
-                        return (_jsx(CategorySectionSimple, { label: config.label, color: config.color, items: detailedItems, maxItems: maxItems }, config.detailedKey));
+                        const startIndex = currentFlatIndex;
+                        currentFlatIndex += detailedItems.length;
+                        return (_jsx(CategorySectionSimple, { label: config.label, color: config.color, items: detailedItems, maxItems: maxItems, isFocused: false, selectedIndex: selectedIndex, startIndex: startIndex }, config.detailedKey));
                     }
                 }
                 // Count-only fallback (number) or boolean hooks fallback
@@ -112,24 +168,62 @@ export default function ComponentList({ components, componentsDetailed, maxItems
                 return null;
             })] }));
 }
+/**
+ * Virtual scroll list for focused mode
+ * Shows a fixed viewport with scroll indicators
+ * @param props - VirtualScrollListProps
+ * @returns React node
+ */
+function VirtualScrollList({ items, selectedIndex, visibleCount, }) {
+    const totalItems = items.length;
+    // Calculate scroll window centered on selection
+    const halfVisible = Math.floor(visibleCount / 2);
+    let startIndex = Math.max(0, selectedIndex - halfVisible);
+    const endIndex = Math.min(totalItems, startIndex + visibleCount);
+    // Adjust start if we hit the end
+    startIndex = Math.max(0, endIndex - visibleCount);
+    const visibleItems = items.slice(startIndex, endIndex);
+    const itemsAbove = startIndex;
+    const itemsBelow = totalItems - endIndex;
+    // Height: 1 header + visibleCount items + 1 indicator (always show space for indicator)
+    const listHeight = 1 + visibleCount + 1;
+    return (_jsxs(Box, { flexDirection: "column", height: listHeight, children: [_jsxs(Box, { height: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "\u2500\u2500 Components \u2500\u2500" }), _jsx(Text, { dimColor: true, children: " (\u2191\u2193 select, \u2190 back)" })] }), visibleItems.map((item, idx) => {
+                const actualIndex = startIndex + idx;
+                const isSelected = actualIndex === selectedIndex;
+                return (_jsx(Box, { height: 1, children: _jsxs(Text, { inverse: isSelected, children: [isSelected ? ' ▶ ' : '   ', _jsxs(Text, { color: item.color, children: ["[", item.category.charAt(0), "]"] }), ' ', item.info.name] }) }, `${item.category}-${item.info.name}`));
+            }), _jsx(Box, { height: 1, children: itemsAbove > 0 && itemsBelow > 0 ? (_jsxs(Text, { dimColor: true, children: ['   ', "\u2191", itemsAbove, " more \u00B7 \u2193", itemsBelow, " more"] })) : itemsAbove > 0 ? (_jsxs(Text, { dimColor: true, children: ['   ', "\u2191", itemsAbove, " more"] })) : itemsBelow > 0 ? (_jsxs(Text, { dimColor: true, children: ['   ', "\u2193", itemsBelow, " more"] })) : (_jsx(Text, { children: " " })) })] }));
+}
 /**
  * Single category section with collapsible ComponentInfo items
  * Shows first N items, then "+M more..." for overflow
+ * Supports selection highlighting when focused
  * @returns React node for the category section
  */
-function CategorySection({ label, color, items, maxItems, }) {
-    const visibleItems = items.slice(0, maxItems);
-    const remainingCount = items.length - maxItems;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: color, bold: true, children: label }), _jsxs(Text, { dimColor: true, children: [" (", items.length, ")"] })] }), visibleItems.map((item) => (_jsxs(Text, { children: ['  ', "\u2022 ", item.name, item.description && (_jsxs(Text, { dimColor: true, children: [" - ", truncate(item.description, 30)] }))] }, item.name))), remainingCount > 0 && (_jsxs(Text, { dimColor: true, children: ['  ', "\u2514\u2500 +", remainingCount, " more..."] }))] }));
+function CategorySection({ label, color, items, maxItems, isFocused = false, selectedIndex = 0, startIndex = 0, }) {
+    // When focused, show all items to allow selection
+    // When not focused, limit to maxItems
+    const visibleItems = isFocused ? items : items.slice(0, maxItems);
+    const remainingCount = isFocused ? 0 : items.length - maxItems;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: color, bold: true, children: label }), _jsxs(Text, { dimColor: true, children: [" (", items.length, ")"] })] }), visibleItems.map((item, index) => {
+                const flatIndex = startIndex + index;
+                const isSelected = isFocused && flatIndex === selectedIndex;
+                return (_jsx(Box, { height: 1, children: _jsxs(Text, { inverse: isSelected, children: [isSelected ? ' ▶ ' : '   ', item.name, item.description && !isSelected && (_jsxs(Text, { dimColor: true, children: [" - ", truncate(item.description, 25)] }))] }) }, item.name));
+            }), remainingCount > 0 && (_jsxs(Text, { dimColor: true, children: ['   ', "\u2514\u2500 +", remainingCount, " more..."] }))] }));
 }
 /**
  * Category section for simple string arrays (mcpServers, lspServers, hooks)
+ * Supports selection highlighting when focused
  * @returns React node for the category section
  */
-function CategorySectionSimple({ label, color, items, maxItems, }) {
-    const visibleItems = items.slice(0, maxItems);
-    const remainingCount = items.length - maxItems;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: color, bold: true, children: label }), _jsxs(Text, { dimColor: true, children: [" (", items.length, ")"] })] }), visibleItems.map((item) => (_jsxs(Text, { children: ['  ', "\u2022 ", item] }, item))), remainingCount > 0 && (_jsxs(Text, { dimColor: true, children: ['  ', "\u2514\u2500 +", remainingCount, " more..."] }))] }));
+function CategorySectionSimple({ label, color, items, maxItems, isFocused = false, selectedIndex = 0, startIndex = 0, }) {
+    // When focused, show all items to allow selection
+    const visibleItems = isFocused ? items : items.slice(0, maxItems);
+    const remainingCount = isFocused ? 0 : items.length - maxItems;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: color, bold: true, children: label }), _jsxs(Text, { dimColor: true, children: [" (", items.length, ")"] })] }), visibleItems.map((item, index) => {
+                const flatIndex = startIndex + index;
+                const isSelected = isFocused && flatIndex === selectedIndex;
+                return (_jsx(Box, { height: 1, children: _jsxs(Text, { inverse: isSelected, children: [isSelected ? ' ▶ ' : '   ', item] }) }, item));
+            }), remainingCount > 0 && (_jsxs(Text, { dimColor: true, children: ['   ', "\u2514\u2500 +", remainingCount, " more..."] }))] }));
 }
 /**
  * Category section showing only count (fallback when no detailed info)

package/dist/components/HelpOverlay.js

@@ -18,6 +18,7 @@ const helpSections = [
         items: [
             { key: 'i, Enter', description: 'Install / Toggle plugin' },
             { key: 'u', description: 'Uninstall plugin' },
+            { key: 'U', description: 'Update all installed plugins' },
             { key: 'Space', description: 'Toggle enable/disable' },
             { key: 's/S', description: 'Sort options / order' },
         ],

package/dist/components/KeyHints.d.ts

@@ -17,6 +17,7 @@ interface KeyHintsProps {
  * @example
  * <KeyHints focusZone="list" />
  * <KeyHints focusZone="search" extraHints={[{ key: 'i', action: 'install' }]} />
+ * <KeyHints focusZone="components" />
  */
 export default function KeyHints({ extraHints, focusZone, }: KeyHintsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/KeyHints.js

@@ -33,6 +33,12 @@ function getBaseHints(focusZone) {
         { key: 'Tab', action: 'next tab' },
         { key: 'h', action: 'help' },
         { key: 'q or ^C', action: 'quit' },
+    ])
+        .with('components', () => [
+        { key: '↑/↓', action: 'select component' },
+        { key: '←', action: 'back to plugin' },
+        { key: 'h', action: 'help' },
+        { key: 'q or ^C', action: 'quit' },
     ])
         .exhaustive();
 }
@@ -41,9 +47,10 @@ function getBaseHints(focusZone) {
  * @example
  * <KeyHints focusZone="list" />
  * <KeyHints focusZone="search" extraHints={[{ key: 'i', action: 'install' }]} />
+ * <KeyHints focusZone="components" />
  */
 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))) }) }));
+    return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, marginTop: 1, children: _jsx(Box, { gap: 2, flexWrap: "wrap", children: allHints.map((hint) => (_jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, color: "white", children: hint.key }), _jsx(Text, { dimColor: true, children: hint.action })] }, `${hint.key}-${hint.action}`))) }) }));
 }

package/dist/components/PluginDetail.d.ts

@@ -4,15 +4,28 @@
  *
  * Uses fixed height to prevent layout jumping when switching between plugins
  * with different amounts of content (e.g., varying component counts).
+ *
+ * Supports component focus mode for navigating and viewing component details
  */
-import type { Plugin } from '../types/index.js';
+import type { ComponentDetailedInfo, Plugin } from '../types/index.js';
 interface PluginDetailProps {
     plugin: Plugin | null;
+    /** Whether component focus mode is active */
+    componentFocusMode?: boolean;
+    /** Currently selected component index */
+    selectedComponentIndex?: number;
+    /** Selected component's detailed info (fetched from service) */
+    selectedComponentDetail?: ComponentDetailedInfo | null;
 }
 /**
  * Displays detailed information about a selected plugin
+ * Supports component focus mode for drilling into component details
  * @example
- * <PluginDetail plugin={selectedPlugin} />
+ * <PluginDetail
+ *   plugin={selectedPlugin}
+ *   componentFocusMode={true}
+ *   selectedComponentIndex={0}
+ * />
  */
-export default function PluginDetail({ plugin }: PluginDetailProps): import("react/jsx-runtime").JSX.Element;
+export default function PluginDetail({ plugin, componentFocusMode, selectedComponentIndex, selectedComponentDetail, }: PluginDetailProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PluginDetail.js

@@ -5,29 +5,55 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * Uses fixed height to prevent layout jumping when switching between plugins
  * with different amounts of content (e.g., varying component counts).
+ *
+ * Supports component focus mode for navigating and viewing component details
  */
 import { Box, Text } from 'ink';
 import StatusIcon from './StatusIcon.js';
 import ComponentBadges from './ComponentBadges.js';
 import ComponentList, { hasAnyCountComponents, hasAnyDetailedComponents, } from './ComponentList.js';
+import ComponentDetail from './ComponentDetail.js';
 /**
  * Fixed height for PluginDetail panel (in terminal lines)
  * Matches PluginList's visibleCount * 2 + 2 = 26 lines
  * This ensures both panels have consistent height regardless of content
  */
 const DETAIL_PANEL_HEIGHT = 26;
+/**
+ * Layout height constants for consistent rendering
+ * Total budget: 26 lines (DETAIL_PANEL_HEIGHT)
+ *
+ * Normal mode:
+ *   Border/Padding: 4 | Header: 2 | Description: 2 | Metadata: 7
+ *   Separator: 1 | ComponentList: 4 | Status: 3 | Actions: 3
+ *
+ * Focused mode (hide Status/Actions to maximize component browsing):
+ *   Border/Padding: 4 | Header: 2 | Description: 2 | Metadata: 7
+ *   Separator: 1 | ComponentList: 7 | ComponentDetail: 3
+ */
+const COMPONENT_LIST_HEIGHT_NORMAL = 4;
+const COMPONENT_LIST_HEIGHT_FOCUSED = 7;
+const COMPONENT_DETAIL_HEIGHT = 3;
+const COMPONENT_LIST_VISIBLE_COUNT = 5;
 /**
  * Displays detailed information about a selected plugin
+ * Supports component focus mode for drilling into component details
  * @example
- * <PluginDetail plugin={selectedPlugin} />
+ * <PluginDetail
+ *   plugin={selectedPlugin}
+ *   componentFocusMode={true}
+ *   selectedComponentIndex={0}
+ * />
  */
-export default function PluginDetail({ plugin }) {
+export default function PluginDetail({ plugin, componentFocusMode = false, selectedComponentIndex = 0, selectedComponentDetail = null, }) {
     if (!plugin) {
         return (_jsx(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "gray", height: DETAIL_PANEL_HEIGHT, children: _jsx(Text, { dimColor: true, children: "Select a plugin to view details" }) }));
     }
     return (_jsxs(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "cyan", height: DETAIL_PANEL_HEIGHT, overflow: "hidden", 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) }), _jsx(DetailRow, { label: "Category", value: plugin.category || '-' }), _jsx(DetailRow, { label: "Author", value: plugin.author?.name || '-' }), _jsx(DetailRow, { label: "Homepage", value: plugin.homepage || '-' }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "gray", children: 'Components:'.padEnd(12) }), plugin.components ? (_jsx(ComponentBadges, { components: plugin.components })) : (_jsx(Text, { color: "gray", children: "-" }))] })] }), ((plugin.components && hasAnyCountComponents(plugin.components)) ||
                 (plugin.componentsDetailed &&
-                    hasAnyDetailedComponents(plugin.componentsDetailed))) && (_jsxs(_Fragment, { children: [_jsx(Box, { marginY: 1, children: _jsx(Text, { dimColor: true, children: '─'.repeat(36) }) }), _jsx(ComponentList, { components: plugin.components, componentsDetailed: plugin.componentsDetailed, maxItems: 3 })] })), _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, wrap: "truncate", children: "Enabled" })) : (_jsx(Text, { color: "yellow", bold: true, wrap: "truncate", children: "Disabled" }))) : (_jsx(Text, { color: "gray", wrap: "truncate", children: "Not Installed" }))] }), plugin.installedAt && (_jsxs(Text, { dimColor: true, wrap: "truncate", 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"] })) })] }));
+                    hasAnyDetailedComponents(plugin.componentsDetailed))) && (_jsxs(_Fragment, { children: [_jsx(Box, { marginY: 1, height: 1, children: _jsx(Text, { dimColor: true, children: '─'.repeat(36) }) }), _jsx(Box, { height: componentFocusMode
+                            ? COMPONENT_LIST_HEIGHT_FOCUSED
+                            : COMPONENT_LIST_HEIGHT_NORMAL, overflow: "hidden", children: _jsx(ComponentList, { components: plugin.components, componentsDetailed: plugin.componentsDetailed, maxItems: 3, isFocused: componentFocusMode, selectedIndex: selectedComponentIndex, visibleCount: COMPONENT_LIST_VISIBLE_COUNT }) })] })), componentFocusMode && selectedComponentDetail && (_jsx(Box, { height: COMPONENT_DETAIL_HEIGHT, overflow: "hidden", children: _jsx(ComponentDetail, { component: selectedComponentDetail, maxHeight: COMPONENT_DETAIL_HEIGHT }) })), !componentFocusMode && (_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, wrap: "truncate", children: "Enabled" })) : (_jsx(Text, { color: "yellow", bold: true, wrap: "truncate", children: "Disabled" }))) : (_jsx(Text, { color: "gray", wrap: "truncate", children: "Not Installed" }))] }), plugin.installedAt && (_jsxs(Text, { dimColor: true, wrap: "truncate", children: ["Installed: ", formatDate(plugin.installedAt)] }))] })), !componentFocusMode && (_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 |", ' ', _jsx(Text, { bold: true, color: "white", children: "\u2192" }), ' ', "components"] }) })) : (_jsxs(Text, { dimColor: true, children: [_jsx(Text, { bold: true, color: "white", children: "i" }), ' ', "install |", ' ', _jsx(Text, { bold: true, color: "white", children: "\u2192" }), ' ', "components"] })) }))] }));
 }
 /**
  * Single detail row with label and value

package/dist/services/componentService.d.ts

@@ -2,45 +2,13 @@
  * 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, PluginComponentsDetailed } 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;
-/**
- * Detect detailed components for an installed plugin
- * Reads skills/, commands/, agents/ directories and parses plugin.json
- * @param installPath - Absolute path to installed plugin directory
- * @returns Detailed component info with names and descriptions
- * - Returns undefined if path doesn't exist or has no components
- * @example
- * detectComponentsDetailed('/path/to/plugin')
- * // => { skills: [{ name: 'xlsx', description: '...', type: 'skill' }] }
- */
-export declare function detectComponentsDetailed(installPath: string): PluginComponentsDetailed | 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;
+ *
+ * This is a facade module that re-exports from the components/ submodules.
+ * For implementation details, see:
+ * - components/skillService.ts - Skill detection and SKILL.md parsing
+ * - components/markdownService.ts - Command/Agent markdown parsing
+ * - components/hookService.ts - Hook detection
+ * - components/serverService.ts - MCP/LSP server detection
+ * - components/utils.ts - Utility functions
+ */
+export { detectPluginComponents, detectComponentsDetailed, parseSkillMdFull, getSkillDetailedInfo, getMarkdownComponentDetailedInfo, hasAnyComponents, getTotalComponentCount, } from './components/index.js';