@laststance/claude-plugin-dashboard 0.2.3 → 0.3.2

package/dist/cli.js

@@ -14,12 +14,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *   claude-plugin-dashboard toggle <plugin-id> # Toggle plugin
  *   claude-plugin-dashboard help               # Show help
  */
-import { render } from 'ink';
+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';
 import { PATHS } from './utils/paths.js';
+import packageJson from '../package.json' with { type: 'json' };
 const args = process.argv.slice(2);
 const command = args[0];
 const subCommand = args[1];
@@ -243,66 +247,57 @@ function checkClaudeCodeInstalled() {
 if (command) {
     // Non-interactive mode
     checkClaudeCodeInstalled();
-    switch (command) {
-        case 'status':
-            showStatus();
-            break;
-        case 'list':
-            if (subCommand === '--installed' || args.includes('--installed')) {
-                listPlugins({ installed: true });
-            }
-            else if (subCommand === '--marketplace' ||
-                args.includes('--marketplace')) {
-                const marketplaceIndex = args.indexOf('--marketplace');
-                const marketplace = args[marketplaceIndex + 1];
-                listPlugins({ marketplace });
-            }
-            else {
-                listPlugins({});
-            }
-            break;
-        case 'info':
-            if (!subCommand) {
-                console.error('Usage: claude-plugin-dashboard info <plugin-id>');
-                process.exit(1);
-            }
-            showPluginInfo(subCommand);
-            break;
-        case 'enable':
-            if (!subCommand) {
-                console.error('Usage: claude-plugin-dashboard enable <plugin-id>');
-                process.exit(1);
-            }
-            handleEnable(subCommand);
-            break;
-        case 'disable':
-            if (!subCommand) {
-                console.error('Usage: claude-plugin-dashboard disable <plugin-id>');
-                process.exit(1);
-            }
-            handleDisable(subCommand);
-            break;
-        case 'toggle':
-            if (!subCommand) {
-                console.error('Usage: claude-plugin-dashboard toggle <plugin-id>');
-                process.exit(1);
-            }
-            handleToggle(subCommand);
-            break;
-        case 'help':
-        case '-h':
-        case '--help':
-            showHelp();
-            break;
-        case '-v':
-        case '--version':
-            console.log('claude-plugin-dashboard v0.1.0');
-            break;
-        default:
-            console.error(`Unknown command: ${command}`);
-            console.log('Run "claude-plugin-dashboard help" for usage information.');
+    match(command)
+        .with('status', () => showStatus())
+        .with('list', () => {
+        if (subCommand === '--installed' || args.includes('--installed')) {
+            listPlugins({ installed: true });
+        }
+        else if (subCommand === '--marketplace' ||
+            args.includes('--marketplace')) {
+            const marketplaceIndex = args.indexOf('--marketplace');
+            const marketplace = args[marketplaceIndex + 1];
+            listPlugins({ marketplace });
+        }
+        else {
+            listPlugins({});
+        }
+    })
+        .with('info', () => {
+        if (!subCommand) {
+            console.error('Usage: claude-plugin-dashboard info <plugin-id>');
             process.exit(1);
-    }
+        }
+        showPluginInfo(subCommand);
+    })
+        .with('enable', () => {
+        if (!subCommand) {
+            console.error('Usage: claude-plugin-dashboard enable <plugin-id>');
+            process.exit(1);
+        }
+        handleEnable(subCommand);
+    })
+        .with('disable', () => {
+        if (!subCommand) {
+            console.error('Usage: claude-plugin-dashboard disable <plugin-id>');
+            process.exit(1);
+        }
+        handleDisable(subCommand);
+    })
+        .with('toggle', () => {
+        if (!subCommand) {
+            console.error('Usage: claude-plugin-dashboard toggle <plugin-id>');
+            process.exit(1);
+        }
+        handleToggle(subCommand);
+    })
+        .with(P.union('help', '-h', '--help'), () => showHelp())
+        .with(P.union('-v', '--version'), () => console.log(`claude-plugin-dashboard v${packageJson.version}`))
+        .otherwise((cmd) => {
+        console.error(`Unknown command: ${cmd}`);
+        console.log('Run "claude-plugin-dashboard help" for usage information.');
+        process.exit(1);
+    });
 }
 else {
     // Interactive mode
@@ -312,11 +307,9 @@ else {
         console.log('Use "claude-plugin-dashboard help" for non-interactive commands.');
         process.exit(1);
     }
-    const instance = render(_jsx(App, {}));
-    // Clear screen when app exits (q key or Ctrl+C)
-    instance.waitUntilExit().then(() => {
-        instance.clear();
-        // Clear entire terminal screen and reset cursor to top-left
-        process.stdout.write('\x1b[2J\x1b[H');
-    });
+    // Use fullscreen-ink for alternate screen buffer management
+    // This prevents rendering artifacts when switching tabs
+    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

@@ -0,0 +1,87 @@
+/**
+ * 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 { 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
+ */
+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;
+    /** 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, isFocused, selectedIndex, visibleCount, }: 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;