@laststance/claude-plugin-dashboard 0.2.3 → 0.3.2

package/dist/components/ComponentList.js

@@ -0,0 +1,287 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ComponentList component
+ * Displays detailed plugin components in a collapsible list format
+ * Shows component names when available, falls back to counts
+ *
+ * Data Source Architecture:
+ * - Installed plugins: Names + descriptions from file system scan
+ * - Not installed: Names only from marketplace JSON (if available)
+ * - Fallback: Count-only display from PluginComponents
+ */
+import { Box, Text } from 'ink';
+/**
+ * Category configurations with display settings
+ */
+const CATEGORY_CONFIGS = [
+    {
+        label: 'Skills',
+        color: 'magenta',
+        detailedKey: 'skills',
+        countKey: 'skills',
+        type: 'skill',
+    },
+    {
+        label: 'Slash',
+        color: 'cyan',
+        detailedKey: 'commands',
+        countKey: 'commands',
+        type: 'command',
+    },
+    {
+        label: 'Agents',
+        color: 'blue',
+        detailedKey: 'agents',
+        countKey: 'agents',
+        type: 'agent',
+    },
+    {
+        label: 'MCP',
+        color: 'green',
+        detailedKey: 'mcpServers',
+        countKey: 'mcpServers',
+        type: 'mcp',
+    },
+    {
+        label: 'LSP',
+        color: 'blueBright',
+        detailedKey: 'lspServers',
+        countKey: 'lspServers',
+        type: 'lsp',
+    },
+    {
+        label: 'Hooks',
+        color: 'yellow',
+        detailedKey: 'hooks',
+        countKey: 'hooks',
+        type: 'hook',
+    },
+];
+/**
+ * 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, isFocused = false, selectedIndex = 0, visibleCount = DEFAULT_VISIBLE_COUNT, }) {
+    // No data at all
+    if (!components && !componentsDetailed) {
+        return null;
+    }
+    // Check if we have any components to display
+    const hasDetailedData = componentsDetailed && hasAnyDetailedComponents(componentsDetailed);
+    const hasCountData = components && hasAnyCountComponents(components);
+    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];
+                // Skip if no data for this category
+                if (!detailedItems?.length && !count) {
+                    return null;
+                }
+                // Prefer detailed data, fall back to count
+                if (detailedItems && detailedItems.length > 0) {
+                    // Type guard: detailedItems could be ComponentInfo[] or string[]
+                    if (isComponentInfoArray(detailedItems)) {
+                        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)
+                        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
+                if (typeof count === 'number' && count > 0) {
+                    return (_jsx(CountOnlySection, { label: config.label, color: config.color, count: count }, config.countKey));
+                }
+                // Boolean hooks fallback (hooks: true without detailed info)
+                if (config.countKey === 'hooks' && count === true) {
+                    return (_jsxs(Box, { children: [_jsx(Text, { color: config.color, bold: true, children: config.label }), _jsx(Text, { dimColor: true, children: " (configured)" })] }, config.countKey));
+                }
+                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, 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, 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)
+ * @returns React node for the count-only section
+ */
+function CountOnlySection({ label, color, count, }) {
+    return (_jsxs(Box, { children: [_jsx(Text, { color: color, bold: true, children: label }), _jsxs(Text, { dimColor: true, children: [": ", count] })] }));
+}
+/**
+ * Type guard to check if array is ComponentInfo[]
+ * @param arr - Array to check
+ * @returns true if array contains ComponentInfo objects
+ */
+function isComponentInfoArray(arr) {
+    return arr.length > 0 && typeof arr[0] === 'object' && 'name' in arr[0];
+}
+/**
+ * Check if PluginComponentsDetailed has any data
+ * @param detailed - Detailed components object
+ * @returns true if any category has items
+ * @example
+ * hasAnyDetailedComponents({ skills: [{ name: 'xlsx', type: 'skill' }] }) // => true
+ * hasAnyDetailedComponents({}) // => false
+ */
+export function hasAnyDetailedComponents(detailed) {
+    return ((detailed.skills?.length ?? 0) > 0 ||
+        (detailed.commands?.length ?? 0) > 0 ||
+        (detailed.agents?.length ?? 0) > 0 ||
+        (detailed.hooks?.length ?? 0) > 0 ||
+        (detailed.mcpServers?.length ?? 0) > 0 ||
+        (detailed.lspServers?.length ?? 0) > 0);
+}
+/**
+ * Check if PluginComponents has any count data
+ * @param components - Components counts object
+ * @returns true if any category has count > 0
+ * @example
+ * hasAnyCountComponents({ skills: 5 }) // => true
+ * hasAnyCountComponents({ hooks: true }) // => true
+ * hasAnyCountComponents({}) // => false
+ */
+export function hasAnyCountComponents(components) {
+    return ((components.skills ?? 0) > 0 ||
+        (components.commands ?? 0) > 0 ||
+        (components.agents ?? 0) > 0 ||
+        components.hooks === true ||
+        (components.mcpServers ?? 0) > 0 ||
+        (components.lspServers ?? 0) > 0);
+}
+/**
+ * Truncate string to max length with ellipsis
+ * @param str - String to truncate
+ * @param maxLength - Maximum length
+ * @returns Truncated string
+ */
+function truncate(str, maxLength) {
+    if (str.length <= maxLength) {
+        return str;
+    }
+    return str.slice(0, maxLength - 3) + '...';
+}

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

@@ -4,49 +4,53 @@ 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';
+import { match } from 'ts-pattern';
 /**
  * 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' },
-            ];
-    }
+    return match(focusZone)
+        .with('tabbar', () => [
+        { key: '←/→', action: 'switch tabs' },
+        { key: '↓', action: 'search/list' },
+        { key: 'Tab', action: 'next tab' },
+        { key: 'h', action: 'help' },
+        { key: 'q or ^C', action: 'quit' },
+    ])
+        .with('search', () => [
+        { key: '↑', action: 'tabs' },
+        { key: '↓/Enter', action: 'list' },
+        { key: 'ESC', action: 'clear/exit' },
+        { key: 'h', action: 'help' },
+        { key: 'q or ^C', action: 'quit' },
+    ])
+        .with('list', () => [
+        { 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' },
+    ])
+        .with('components', () => [
+        { key: '↑/↓', action: 'select component' },
+        { key: '←', action: 'back to plugin' },
+        { key: 'h', action: 'help' },
+        { key: 'q or ^C', action: 'quit' },
+    ])
+        .exhaustive();
 }
 /**
  * Displays keyboard shortcut hints in the footer
  * @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/MarketplaceActionMenu.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Action menu component for marketplace operations
+ * Displays selectable list of actions: Browse, Update, Auto-update toggle, Remove
+ */
+import type { Marketplace } from '../types/index.js';
+/**
+ * Available marketplace actions
+ */
+export type MarketplaceAction = 'browse' | 'update' | 'autoUpdate' | 'remove';
+/**
+ * Props for MarketplaceActionMenu component
+ */
+export interface MarketplaceActionMenuProps {
+    /** Currently selected marketplace */
+    marketplace: Marketplace;
+    /** Index of selected action in menu */
+    selectedIndex: number;
+}
+/**
+ * MarketplaceActionMenu - Selectable action list for marketplace operations
+ * @param props - Component props
+ * @returns Action menu UI with keyboard navigation support
+ * @example
+ * <MarketplaceActionMenu
+ *   marketplace={selectedMarketplace}
+ *   selectedIndex={0}
+ * />
+ */
+export default function MarketplaceActionMenu({ marketplace, selectedIndex, }: MarketplaceActionMenuProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Get action at specified index
+ * @param marketplace - The marketplace
+ * @param index - Action index
+ * @returns The action id at the index
+ */
+export declare function getActionAtIndex(marketplace: Marketplace, index: number): MarketplaceAction;
+/**
+ * Get total number of actions available
+ * @returns Number of actions in menu
+ */
+export declare function getActionCount(): number;

package/dist/components/MarketplaceActionMenu.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Action menu component for marketplace operations
+ * Displays selectable list of actions: Browse, Update, Auto-update toggle, Remove
+ */
+import { Box, Text } from 'ink';
+/**
+ * Get action items for the marketplace
+ * @param marketplace - The marketplace to get actions for
+ * @returns Array of action items with dynamic labels
+ */
+function getActionItems(marketplace) {
+    return [
+        {
+            id: 'browse',
+            label: `Browse plugins (${marketplace.pluginCount || 0})`,
+        },
+        {
+            id: 'update',
+            label: 'Update marketplace',
+            description: `last updated ${marketplace.lastUpdated}`,
+        },
+        {
+            id: 'autoUpdate',
+            label: marketplace.autoUpdate
+                ? 'Disable auto-update'
+                : 'Enable auto-update',
+        },
+        {
+            id: 'remove',
+            label: 'Remove marketplace',
+        },
+    ];
+}
+/**
+ * MarketplaceActionMenu - Selectable action list for marketplace operations
+ * @param props - Component props
+ * @returns Action menu UI with keyboard navigation support
+ * @example
+ * <MarketplaceActionMenu
+ *   marketplace={selectedMarketplace}
+ *   selectedIndex={0}
+ * />
+ */
+export default function MarketplaceActionMenu({ marketplace, selectedIndex, }) {
+    const actions = getActionItems(marketplace);
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [actions.map((action, index) => {
+                const isSelected = index === selectedIndex;
+                return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: isSelected ? 'cyan' : 'white', children: isSelected ? '❯' : ' ' }), _jsx(Text, { color: isSelected ? 'cyan' : 'white', bold: isSelected, children: action.label }), action.description && _jsxs(Text, { dimColor: true, children: ["(", action.description, ")"] })] }, action.id));
+            }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter to select \u00B7 escape to go back" }) })] }));
+}
+/**
+ * Get action at specified index
+ * @param marketplace - The marketplace
+ * @param index - Action index
+ * @returns The action id at the index
+ */
+export function getActionAtIndex(marketplace, index) {
+    const actions = getActionItems(marketplace);
+    return actions[index]?.id ?? 'browse';
+}
+/**
+ * Get total number of actions available
+ * @returns Number of actions in menu
+ */
+export function getActionCount() {
+    return 4; // browse, update, autoUpdate, remove
+}

package/dist/components/MarketplaceDetail.d.ts

@@ -1,15 +1,22 @@
 /**
  * MarketplaceDetail component
- * Right panel showing marketplace information
+ * Right panel showing marketplace information and action menu
  */
 import type { Marketplace } from '../types/index.js';
 interface MarketplaceDetailProps {
     marketplace: Marketplace | null;
+    showActionMenu?: boolean;
+    actionMenuSelectedIndex?: number;
 }
 /**
  * Displays detailed information about a selected marketplace
+ * Shows action menu when showActionMenu is true
  * @example
- * <MarketplaceDetail marketplace={selectedMarketplace} />
+ * <MarketplaceDetail
+ *   marketplace={selectedMarketplace}
+ *   showActionMenu={state.showMarketplaceActionMenu}
+ *   actionMenuSelectedIndex={state.actionMenuSelectedIndex}
+ * />
  */
-export default function MarketplaceDetail({ marketplace, }: MarketplaceDetailProps): import("react/jsx-runtime").JSX.Element;
+export default function MarketplaceDetail({ marketplace, showActionMenu, actionMenuSelectedIndex, }: MarketplaceDetailProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/MarketplaceDetail.js

@@ -1,19 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * MarketplaceDetail component
- * Right panel showing marketplace information
+ * Right panel showing marketplace information and action menu
  */
 import { Box, Text } from 'ink';
+import MarketplaceActionMenu from './MarketplaceActionMenu.js';
 /**
  * Displays detailed information about a selected marketplace
+ * Shows action menu when showActionMenu is true
  * @example
- * <MarketplaceDetail marketplace={selectedMarketplace} />
+ * <MarketplaceDetail
+ *   marketplace={selectedMarketplace}
+ *   showActionMenu={state.showMarketplaceActionMenu}
+ *   actionMenuSelectedIndex={state.actionMenuSelectedIndex}
+ * />
  */
-export default function MarketplaceDetail({ marketplace, }) {
+export default function MarketplaceDetail({ marketplace, showActionMenu = false, actionMenuSelectedIndex = 0, }) {
     if (!marketplace) {
         return (_jsx(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "gray", children: _jsx(Text, { dimColor: true, children: "Select a marketplace to view details" }) }));
     }
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "cyan", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: marketplace.name || marketplace.id }) }), _jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(DetailRow, { label: "ID", value: marketplace.id }), _jsx(DetailRow, { label: "Plugins", value: `${marketplace.pluginCount || 0}` }), _jsx(DetailRow, { label: "Source", value: marketplace.source.source }), marketplace.source.url && (_jsx(DetailRow, { label: "URL", value: marketplace.source.url })), marketplace.source.repo && (_jsx(DetailRow, { label: "Repo", value: marketplace.source.repo })), _jsx(DetailRow, { label: "Last Updated", value: formatDate(marketplace.lastUpdated) })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "Install Location:" }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: marketplace.installLocation })] }), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: _jsxs(Text, { dimColor: true, children: [_jsx(Text, { bold: true, color: "white", children: "a" }), ' ', "add |", ' ', _jsx(Text, { bold: true, color: "white", children: "d" }), ' ', "remove |", ' ', _jsx(Text, { bold: true, color: "white", children: "u" }), ' ', "update"] }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "cyan", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: marketplace.name || marketplace.id }) }), _jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(DetailRow, { label: "ID", value: marketplace.id }), _jsx(DetailRow, { label: "Plugins", value: `${marketplace.pluginCount || 0}` }), _jsx(DetailRow, { label: "Source", value: marketplace.source.source }), marketplace.source.url && (_jsx(DetailRow, { label: "URL", value: marketplace.source.url })), marketplace.source.repo && (_jsx(DetailRow, { label: "Repo", value: marketplace.source.repo })), _jsx(DetailRow, { label: "Last Updated", value: formatDate(marketplace.lastUpdated) }), _jsx(DetailRow, { label: "Auto-update", value: marketplace.autoUpdate ? 'Enabled' : 'Disabled' })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "Install Location:" }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: marketplace.installLocation })] }), showActionMenu ? (_jsx(MarketplaceActionMenu, { marketplace: marketplace, selectedIndex: actionMenuSelectedIndex })) : (_jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: _jsxs(Text, { dimColor: true, children: [_jsx(Text, { bold: true, color: "white", children: "Enter" }), ' ', "actions |", ' ', _jsx(Text, { bold: true, color: "white", children: "a" }), ' ', "add |", ' ', _jsx(Text, { bold: true, color: "white", children: "u" }), ' ', "update"] }) }))] }));
 }
 /**
  * Single detail row with label and value

package/dist/components/PluginDetail.d.ts

@@ -1,15 +1,31 @@
 /**
  * PluginDetail component
  * Right panel showing detailed plugin information
+ *
+ * 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 {};