@laststance/claude-plugin-dashboard 0.2.2 → 0.3.0

package/dist/components/ComponentBadges.js

@@ -1,20 +1,20 @@
 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)
+ * Displays plugin component type badges with readable text labels and counts
+ * Labels: Skills, Slash, Agents, Hooks, MCP, LSP
  */
 import { Box, Text } from 'ink';
 /**
- * Badge configurations with intuitive abbreviations and colors
+ * Badge configurations with readable text labels 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' },
+    { label: 'Skills', color: 'magenta', key: 'skills' },
+    { label: 'Slash', color: 'cyan', key: 'commands' },
+    { label: 'Agents', color: 'blue', key: 'agents' },
+    { label: 'Hooks', color: 'yellow', key: 'hooks', isBoolean: true },
+    { label: 'MCP', color: 'green', key: 'mcpServers' },
+    { label: 'LSP', color: 'blueBright', key: 'lspServers' },
 ];
 /**
  * Displays component type badges for a plugin
@@ -23,7 +23,7 @@ const BADGE_CONFIGS = [
  * @returns Badges component or null if no components
  * @example
  * <ComponentBadges components={{ skills: 5, commands: 2 }} />
- * // Renders: [S:5] [/:2]
+ * // Renders: Skills:5 Slash:2
  */
 export default function ComponentBadges({ components, }) {
     if (!components) {
@@ -43,9 +43,10 @@ export default function ComponentBadges({ components, }) {
 }
 /**
  * Single badge component
+ * Renders as "Label:count" without brackets for better readability
  */
 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: "]" })] }));
+    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

package/dist/components/ComponentList.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 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 type { PluginComponents, PluginComponentsDetailed } from '../types/index.js';
+/**
+ * Props for ComponentList
+ */
+export interface ComponentListProps {
+    /** Component counts (backward compat fallback) */
+    components?: PluginComponents;
+    /** Detailed component info with names */
+    componentsDetailed?: PluginComponentsDetailed;
+    /** Maximum visible items per category (default: 3) */
+    maxItems?: number;
+}
+/**
+ * Displays component details in a collapsible list
+ * Shows names when available, falls back to counts
+ * @param props - ComponentListProps
+ * @returns React node or null if no components
+ * @example
+ * <ComponentList
+ *   componentsDetailed={{ skills: [{ name: 'xlsx', type: 'skill' }] }}
+ *   maxItems={3}
+ * />
+ */
+export default function ComponentList({ components, componentsDetailed, maxItems, }: ComponentListProps): React.ReactNode;
+/**
+ * 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 declare function hasAnyDetailedComponents(detailed: PluginComponentsDetailed): boolean;
+/**
+ * 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 declare function hasAnyCountComponents(components: PluginComponents): boolean;

package/dist/components/ComponentList.js

@@ -0,0 +1,193 @@
+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;
+/**
+ * Displays component details in a collapsible list
+ * Shows names when available, falls back to counts
+ * @param props - ComponentListProps
+ * @returns React node or null if no components
+ * @example
+ * <ComponentList
+ *   componentsDetailed={{ skills: [{ name: 'xlsx', type: 'skill' }] }}
+ *   maxItems={3}
+ * />
+ */
+export default function ComponentList({ components, componentsDetailed, maxItems = DEFAULT_MAX_ITEMS, }) {
+    // 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;
+    }
+    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)) {
+                        return (_jsx(CategorySection, { label: config.label, color: config.color, items: detailedItems, maxItems: maxItems }, config.detailedKey));
+                    }
+                    else {
+                        // String array (mcpServers, lspServers, hooks)
+                        return (_jsx(CategorySectionSimple, { label: config.label, color: config.color, items: detailedItems, maxItems: maxItems }, 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;
+            })] }));
+}
+/**
+ * Single category section with collapsible ComponentInfo items
+ * Shows first N items, then "+M more..." for overflow
+ * @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..."] }))] }));
+}
+/**
+ * Category section for simple string arrays (mcpServers, lspServers, hooks)
+ * @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..."] }))] }));
+}
+/**
+ * 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/KeyHints.js

@@ -4,40 +4,37 @@ 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' },
+    ])
+        .exhaustive();
 }
 /**
  * Displays keyboard shortcut hints in the footer

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 })] })] }));
+    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,6 +1,9 @@
 /**
  * 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).
  */
 import type { Plugin } from '../types/index.js';
 interface PluginDetailProps {

package/dist/components/PluginDetail.js

@@ -1,11 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * 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).
  */
 import { Box, Text } from 'ink';
 import StatusIcon from './StatusIcon.js';
 import ComponentBadges from './ComponentBadges.js';
+import ComponentList, { hasAnyCountComponents, hasAnyDetailedComponents, } from './ComponentList.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;
 /**
  * Displays detailed information about a selected plugin
  * @example
@@ -13,15 +23,29 @@ import ComponentBadges from './ComponentBadges.js';
  */
 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 (_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", 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"] })) })] }));
+    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"] })) })] }));
 }
 /**
  * Single detail row with label and value
+ * Pads both label and value to fixed widths to prevent ghost text artifacts
+ * when content changes between selections
+ * @param label - Label text (e.g., "Marketplace", "Version")
+ * @param value - Value to display
+ * @returns Detail row with fixed-width padding to overwrite previous content
  */
 function DetailRow({ label, value }) {
-    return (_jsxs(Box, { gap: 1, children: [_jsxs(Text, { color: "gray", children: [label, ":"] }), _jsx(Text, { children: value })] }));
+    // Fixed widths to ensure consistent line length and prevent ghost text
+    const LABEL_WIDTH = 12;
+    const VALUE_WIDTH = 40;
+    const paddedLabel = `${label}:`.padEnd(LABEL_WIDTH);
+    // Truncate long values, pad short values with spaces to overwrite old content
+    const truncatedValue = value.length > VALUE_WIDTH ? value.slice(0, VALUE_WIDTH - 1) + '…' : value;
+    const paddedValue = truncatedValue.padEnd(VALUE_WIDTH);
+    return (_jsxs(Text, { children: [_jsx(Text, { color: "gray", children: paddedLabel }), _jsx(Text, { children: paddedValue })] }));
 }
 /**
  * Format large numbers with K/M suffix