@laststance/claude-plugin-dashboard 0.1.0

package/dist/cli.js

@@ -0,0 +1,316 @@
+#!/usr/bin/env node
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * CLI entry point for Claude Code Plugin Dashboard
+ * Supports both interactive (TUI) and non-interactive (command) modes
+ *
+ * Usage:
+ *   claude-plugin-dashboard                    # Interactive mode
+ *   claude-plugin-dashboard status             # Show summary
+ *   claude-plugin-dashboard list               # List all plugins
+ *   claude-plugin-dashboard list --installed   # List installed plugins
+ *   claude-plugin-dashboard enable <plugin-id> # Enable plugin
+ *   claude-plugin-dashboard disable <plugin-id># Disable plugin
+ *   claude-plugin-dashboard toggle <plugin-id> # Toggle plugin
+ *   claude-plugin-dashboard help               # Show help
+ */
+import { render } from 'ink';
+import App from './app.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';
+const args = process.argv.slice(2);
+const command = args[0];
+const subCommand = args[1];
+/**
+ * Show status summary
+ */
+function showStatus() {
+    try {
+        const stats = getPluginStatistics();
+        const marketplaces = loadMarketplaces();
+        console.log('');
+        console.log('⚡ Claude Code Plugin Dashboard');
+        console.log('');
+        console.log('📊 Summary:');
+        console.log(`   Total plugins:    ${stats.total}`);
+        console.log(`   Installed:        ${stats.installed}`);
+        console.log(`   Enabled:          ${stats.enabled}`);
+        console.log(`   Marketplaces:     ${marketplaces.length}`);
+        console.log('');
+    }
+    catch (error) {
+        console.error(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        process.exit(1);
+    }
+}
+/**
+ * List plugins
+ */
+function listPlugins(options) {
+    try {
+        let plugins = options.installed ? loadInstalledPlugins() : loadAllPlugins();
+        if (options.marketplace) {
+            plugins = plugins.filter((p) => p.marketplace === options.marketplace);
+        }
+        if (plugins.length === 0) {
+            console.log('No plugins found');
+            return;
+        }
+        console.log('');
+        console.log(`Found ${plugins.length} plugins:`);
+        console.log('');
+        for (const plugin of plugins) {
+            const status = plugin.isInstalled ? (plugin.isEnabled ? '●' : '◐') : '○';
+            const statusColor = plugin.isInstalled
+                ? plugin.isEnabled
+                    ? '\x1b[32m'
+                    : '\x1b[33m'
+                : '\x1b[90m';
+            const reset = '\x1b[0m';
+            console.log(`${statusColor}${status}${reset} ${plugin.id}`);
+            console.log(`  ${plugin.description.slice(0, 60)}${plugin.description.length > 60 ? '...' : ''}`);
+        }
+        console.log('');
+    }
+    catch (error) {
+        console.error(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        process.exit(1);
+    }
+}
+/**
+ * Enable a plugin
+ */
+function handleEnable(pluginId) {
+    try {
+        const plugin = getPluginById(pluginId);
+        if (!plugin) {
+            console.error(`Plugin not found: ${pluginId}`);
+            process.exit(1);
+        }
+        if (!plugin.isInstalled) {
+            console.error(`Plugin not installed: ${pluginId}`);
+            console.log('Install it first with: /plugin install in Claude Code');
+            process.exit(1);
+        }
+        enablePlugin(pluginId);
+        console.log(`✅ ${plugin.name} enabled`);
+    }
+    catch (error) {
+        console.error(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        process.exit(1);
+    }
+}
+/**
+ * Disable a plugin
+ */
+function handleDisable(pluginId) {
+    try {
+        const plugin = getPluginById(pluginId);
+        if (!plugin) {
+            console.error(`Plugin not found: ${pluginId}`);
+            process.exit(1);
+        }
+        disablePlugin(pluginId);
+        console.log(`❌ ${plugin.name} disabled`);
+    }
+    catch (error) {
+        console.error(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        process.exit(1);
+    }
+}
+/**
+ * Toggle a plugin
+ */
+function handleToggle(pluginId) {
+    try {
+        const plugin = getPluginById(pluginId);
+        if (!plugin) {
+            console.error(`Plugin not found: ${pluginId}`);
+            process.exit(1);
+        }
+        if (!plugin.isInstalled) {
+            console.error(`Plugin not installed: ${pluginId}`);
+            console.log('Install it first with: /plugin install in Claude Code');
+            process.exit(1);
+        }
+        const newState = togglePlugin(pluginId);
+        console.log(`${newState ? '✅' : '❌'} ${plugin.name} ${newState ? 'enabled' : 'disabled'}`);
+    }
+    catch (error) {
+        console.error(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        process.exit(1);
+    }
+}
+/**
+ * Show plugin info
+ */
+function showPluginInfo(pluginId) {
+    try {
+        const plugin = getPluginById(pluginId);
+        if (!plugin) {
+            console.error(`Plugin not found: ${pluginId}`);
+            process.exit(1);
+        }
+        console.log('');
+        console.log(`📦 ${plugin.name}`);
+        console.log('');
+        console.log(`ID:          ${plugin.id}`);
+        console.log(`Marketplace: ${plugin.marketplace}`);
+        console.log(`Version:     ${plugin.version}`);
+        console.log(`Installs:    ${plugin.installCount.toLocaleString()}`);
+        console.log(`Status:      ${plugin.isInstalled ? (plugin.isEnabled ? 'Installed & Enabled' : 'Installed & Disabled') : 'Not Installed'}`);
+        if (plugin.category)
+            console.log(`Category:    ${plugin.category}`);
+        if (plugin.author)
+            console.log(`Author:      ${plugin.author.name}`);
+        if (plugin.homepage)
+            console.log(`Homepage:    ${plugin.homepage}`);
+        console.log('');
+        console.log('Description:');
+        console.log(`  ${plugin.description}`);
+        console.log('');
+    }
+    catch (error) {
+        console.error(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        process.exit(1);
+    }
+}
+/**
+ * Show help
+ */
+function showHelp() {
+    console.log(`
+⚡ Claude Code Plugin Dashboard
+
+An interactive CLI tool to browse and manage Claude Code plugins.
+
+USAGE:
+  claude-plugin-dashboard [command] [options]
+
+COMMANDS:
+  (none)                    Open interactive dashboard
+  status                    Show summary statistics
+  list                      List all available plugins
+  list --installed          List installed plugins only
+  list --marketplace <id>   List plugins from specific marketplace
+  info <plugin-id>          Show plugin details
+  enable <plugin-id>        Enable an installed plugin
+  disable <plugin-id>       Disable a plugin
+  toggle <plugin-id>        Toggle plugin enabled state
+  help                      Show this help message
+
+EXAMPLES:
+  claude-plugin-dashboard
+  claude-plugin-dashboard status
+  claude-plugin-dashboard list --installed
+  claude-plugin-dashboard info context7@claude-plugins-official
+  claude-plugin-dashboard toggle context7@claude-plugins-official
+
+INTERACTIVE MODE:
+  ← →     Switch tabs
+  ↑ ↓     Navigate list
+  ^P ^N   Navigate list (Emacs-style)
+  i       Install selected plugin
+  u       Uninstall selected plugin
+  Space   Toggle plugin enable/disable
+  /       Search plugins
+  s       Cycle sort options
+  q       Quit
+
+For more information, visit:
+  https://github.com/laststance/claude-code-plugin-dashboard
+`);
+}
+/**
+ * Check if Claude Code is installed
+ */
+function checkClaudeCodeInstalled() {
+    if (!fileExists(PATHS.settings)) {
+        console.error('');
+        console.error('❌ Claude Code not found');
+        console.error('');
+        console.error('This tool requires Claude Code to be installed.');
+        console.error('Expected settings file at: ' + PATHS.settings);
+        console.error('');
+        console.error('Install Claude Code: https://claude.ai/code');
+        console.error('');
+        process.exit(1);
+    }
+}
+// Main execution
+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.');
+            process.exit(1);
+    }
+}
+else {
+    // Interactive mode
+    checkClaudeCodeInstalled();
+    if (!process.stdin.isTTY) {
+        console.log('Interactive mode requires a TTY.');
+        console.log('Use "claude-plugin-dashboard help" for non-interactive commands.');
+        process.exit(1);
+    }
+    render(_jsx(App, {}));
+}

package/dist/components/ConfirmDialog.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ConfirmDialog component
+ * Displays a Y/N confirmation prompt for destructive actions
+ */
+interface ConfirmDialogProps {
+    message: string;
+}
+/**
+ * A simple confirmation dialog that prompts Y/N
+ * @example
+ * <ConfirmDialog message="Uninstall plugin-name@marketplace?" />
+ */
+export default function ConfirmDialog({ message }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ConfirmDialog.js

@@ -0,0 +1,14 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ConfirmDialog component
+ * Displays a Y/N confirmation prompt for destructive actions
+ */
+import { Box, Text } from 'ink';
+/**
+ * A simple confirmation dialog that prompts Y/N
+ * @example
+ * <ConfirmDialog message="Uninstall plugin-name@marketplace?" />
+ */
+export default function ConfirmDialog({ message }) {
+    return (_jsxs(Box, { marginTop: 1, paddingX: 2, paddingY: 1, borderStyle: "double", borderColor: "yellow", children: [_jsxs(Text, { children: [message, " "] }), _jsx(Text, { bold: true, color: "green", children: "Y" }), _jsx(Text, { dimColor: true, children: "/" }), _jsx(Text, { bold: true, color: "red", children: "N" })] }));
+}

package/dist/components/KeyHints.d.ts

@@ -0,0 +1,19 @@
+/**
+ * KeyHints component
+ * Displays keyboard shortcuts footer at the bottom of the dashboard
+ */
+interface KeyHintsProps {
+    /** Additional context-specific hints */
+    extraHints?: Array<{
+        key: string;
+        action: string;
+    }>;
+}
+/**
+ * Displays keyboard shortcut hints in the footer
+ * @example
+ * <KeyHints />
+ * <KeyHints extraHints={[{ key: 'i', action: 'install' }]} />
+ */
+export default function KeyHints({ extraHints }: KeyHintsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/KeyHints.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * KeyHints component
+ * Displays keyboard shortcuts footer at the bottom of the dashboard
+ */
+import { Box, Text } from 'ink';
+/**
+ * Displays keyboard shortcut hints in the footer
+ * @example
+ * <KeyHints />
+ * <KeyHints extraHints={[{ key: 'i', action: 'install' }]} />
+ */
+export default function KeyHints({ extraHints }) {
+    const baseHints = [
+        { key: '←/→', action: 'tabs' },
+        { key: '↑/↓', action: 'navigate' },
+        { key: 'Space', action: 'toggle' },
+        { key: '/', action: 'search' },
+        { key: 'q', action: 'quit' },
+    ];
+    const allHints = extraHints ? [...baseHints, ...extraHints] : baseHints;
+    return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, marginTop: 1, children: _jsx(Box, { gap: 2, flexWrap: "wrap", children: allHints.map((hint, index) => (_jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, color: "white", children: hint.key }), _jsx(Text, { dimColor: true, children: hint.action })] }, index))) }) }));
+}

package/dist/components/MarketplaceDetail.d.ts

@@ -0,0 +1,15 @@
+/**
+ * MarketplaceDetail component
+ * Right panel showing marketplace information
+ */
+import type { Marketplace } from '../types/index.js';
+interface MarketplaceDetailProps {
+    marketplace: Marketplace | null;
+}
+/**
+ * Displays detailed information about a selected marketplace
+ * @example
+ * <MarketplaceDetail marketplace={selectedMarketplace} />
+ */
+export default function MarketplaceDetail({ marketplace, }: MarketplaceDetailProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MarketplaceDetail.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * MarketplaceDetail component
+ * Right panel showing marketplace information
+ */
+import { Box, Text } from 'ink';
+/**
+ * Displays detailed information about a selected marketplace
+ * @example
+ * <MarketplaceDetail marketplace={selectedMarketplace} />
+ */
+export default function MarketplaceDetail({ marketplace, }) {
+    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 })] })] }));
+}
+/**
+ * Single detail row with label and value
+ */
+function DetailRow({ label, value }) {
+    return (_jsxs(Box, { gap: 1, children: [_jsxs(Text, { color: "gray", children: [label, ":"] }), _jsx(Text, { children: value })] }));
+}
+/**
+ * Format ISO date string to readable format
+ */
+function formatDate(isoString) {
+    try {
+        const date = new Date(isoString);
+        return date.toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    }
+    catch {
+        return isoString;
+    }
+}

package/dist/components/MarketplaceList.d.ts

@@ -0,0 +1,16 @@
+/**
+ * MarketplaceList component
+ * List of marketplace sources
+ */
+import type { Marketplace } from '../types/index.js';
+interface MarketplaceListProps {
+    marketplaces: Marketplace[];
+    selectedIndex: number;
+}
+/**
+ * Displays a list of marketplaces
+ * @example
+ * <MarketplaceList marketplaces={marketplaces} selectedIndex={0} />
+ */
+export default function MarketplaceList({ marketplaces, selectedIndex, }: MarketplaceListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MarketplaceList.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * MarketplaceList component
+ * List of marketplace sources
+ */
+import { Box, Text } from 'ink';
+/**
+ * Displays a list of marketplaces
+ * @example
+ * <MarketplaceList marketplaces={marketplaces} selectedIndex={0} />
+ */
+export default function MarketplaceList({ marketplaces, selectedIndex, }) {
+    if (marketplaces.length === 0) {
+        return (_jsx(Box, { padding: 1, children: _jsx(Text, { color: "gray", children: "No marketplaces found" }) }));
+    }
+    return (_jsx(Box, { flexDirection: "column", children: marketplaces.map((marketplace, index) => {
+            const isSelected = index === selectedIndex;
+            return (_jsxs(Box, { paddingX: 1, children: [_jsx(Box, { width: 2, children: isSelected ? _jsx(Text, { color: "cyan", children: '>' }) : _jsx(Text, { children: " " }) }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, color: isSelected ? 'cyan' : 'white', children: marketplace.name || marketplace.id }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsxs(Text, { color: "gray", children: [marketplace.pluginCount || 0, " plugins"] })] }), _jsx(Text, { dimColor: true, wrap: "truncate", children: getSourceDisplay(marketplace) })] })] }, marketplace.id));
+        }) }));
+}
+/**
+ * Get display string for marketplace source
+ */
+function getSourceDisplay(marketplace) {
+    if (marketplace.source.url) {
+        return marketplace.source.url;
+    }
+    if (marketplace.source.repo) {
+        return `github.com/${marketplace.source.repo}`;
+    }
+    return marketplace.source.source;
+}

package/dist/components/PluginDetail.d.ts

@@ -0,0 +1,15 @@
+/**
+ * PluginDetail component
+ * Right panel showing detailed plugin information
+ */
+import type { Plugin } from '../types/index.js';
+interface PluginDetailProps {
+    plugin: Plugin | null;
+}
+/**
+ * Displays detailed information about a selected plugin
+ * @example
+ * <PluginDetail plugin={selectedPlugin} />
+ */
+export default function PluginDetail({ plugin }: PluginDetailProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PluginDetail.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PluginDetail component
+ * Right panel showing detailed plugin information
+ */
+import { Box, Text } from 'ink';
+import StatusIcon from './StatusIcon.js';
+/**
+ * Displays detailed information about a selected plugin
+ * @example
+ * <PluginDetail plugin={selectedPlugin} />
+ */
+export default function PluginDetail({ plugin }) {
+    if (!plugin) {
+        return (_jsx(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "gray", children: _jsx(Text, { dimColor: true, children: "Select a plugin to view details" }) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "cyan", children: [_jsxs(Box, { marginBottom: 1, gap: 1, children: [_jsx(StatusIcon, { isInstalled: plugin.isInstalled, isEnabled: plugin.isEnabled }), _jsx(Text, { bold: true, color: "cyan", children: plugin.name })] }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { wrap: "wrap", children: plugin.description || 'No description available' }) }), _jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(DetailRow, { label: "Marketplace", value: plugin.marketplace }), _jsx(DetailRow, { label: "Version", value: plugin.version }), _jsx(DetailRow, { label: "Installs", value: formatCount(plugin.installCount) }), plugin.category && (_jsx(DetailRow, { label: "Category", value: plugin.category })), plugin.author && (_jsx(DetailRow, { label: "Author", value: plugin.author.name })), plugin.homepage && (_jsx(DetailRow, { label: "Homepage", value: plugin.homepage }))] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { children: "Status:" }), plugin.isInstalled ? (plugin.isEnabled ? (_jsx(Text, { color: "green", bold: true, children: "Installed & Enabled" })) : (_jsx(Text, { color: "yellow", bold: true, children: "Installed & Disabled" }))) : (_jsx(Text, { color: "gray", children: "Not Installed" }))] }), plugin.installedAt && (_jsxs(Text, { dimColor: true, children: ["Installed: ", formatDate(plugin.installedAt)] }))] }), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, flexDirection: "column", children: plugin.isInstalled ? (_jsx(Box, { flexDirection: "column", children: _jsxs(Text, { dimColor: true, children: [_jsx(Text, { bold: true, color: "white", children: "Space" }), ' ', plugin.isEnabled ? 'disable' : 'enable', " |", ' ', _jsx(Text, { bold: true, color: "white", children: "u" }), ' ', "uninstall"] }) })) : (_jsxs(Text, { dimColor: true, children: [_jsx(Text, { bold: true, color: "white", children: "i" }), ' ', "install"] })) })] }));
+}
+/**
+ * Single detail row with label and value
+ */
+function DetailRow({ label, value }) {
+    return (_jsxs(Box, { gap: 1, children: [_jsxs(Text, { color: "gray", children: [label, ":"] }), _jsx(Text, { children: value })] }));
+}
+/**
+ * Format large numbers with K/M suffix
+ */
+function formatCount(count) {
+    if (count >= 1000000) {
+        return `${(count / 1000000).toFixed(1)}M`;
+    }
+    if (count >= 1000) {
+        return `${(count / 1000).toFixed(1)}K`;
+    }
+    return count.toString();
+}
+/**
+ * Format ISO date string to readable format
+ */
+function formatDate(isoString) {
+    try {
+        const date = new Date(isoString);
+        return date.toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    }
+    catch {
+        return isoString;
+    }
+}

package/dist/components/PluginList.d.ts

@@ -0,0 +1,19 @@
+/**
+ * PluginList component
+ * Scrollable list of plugins with selection highlighting
+ * Supports ↑ ↓ arrow key navigation
+ */
+import type { Plugin } from '../types/index.js';
+interface PluginListProps {
+    plugins: Plugin[];
+    selectedIndex: number;
+    /** Maximum visible items (for virtual scrolling) */
+    visibleCount?: number;
+}
+/**
+ * Scrollable plugin list with selection
+ * @example
+ * <PluginList plugins={plugins} selectedIndex={0} visibleCount={15} />
+ */
+export default function PluginList({ plugins, selectedIndex, visibleCount, }: PluginListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PluginList.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * PluginList component
+ * Scrollable list of plugins with selection highlighting
+ * Supports ↑ ↓ arrow key navigation
+ */
+import { Box, Text } from 'ink';
+import StatusIcon from './StatusIcon.js';
+/**
+ * Scrollable plugin list with selection
+ * @example
+ * <PluginList plugins={plugins} selectedIndex={0} visibleCount={15} />
+ */
+export default function PluginList({ plugins, selectedIndex, visibleCount = 15, }) {
+    if (plugins.length === 0) {
+        return (_jsx(Box, { padding: 1, children: _jsx(Text, { color: "gray", children: "No plugins found" }) }));
+    }
+    // Calculate visible window
+    const halfVisible = Math.floor(visibleCount / 2);
+    let startIndex = Math.max(0, selectedIndex - halfVisible);
+    const endIndex = Math.min(plugins.length, startIndex + visibleCount);
+    // Adjust start if we're near the end
+    if (endIndex - startIndex < visibleCount) {
+        startIndex = Math.max(0, endIndex - visibleCount);
+    }
+    const visiblePlugins = plugins.slice(startIndex, endIndex);
+    const hasMore = endIndex < plugins.length;
+    const hasPrevious = startIndex > 0;
+    return (_jsxs(Box, { flexDirection: "column", children: [hasPrevious && _jsxs(Text, { dimColor: true, children: ["\u2191 ", startIndex, " more above"] }), visiblePlugins.map((plugin, index) => {
+                const actualIndex = startIndex + index;
+                const isSelected = actualIndex === selectedIndex;
+                return (_jsxs(Box, { paddingX: 1, children: [_jsx(Box, { width: 2, children: isSelected ? _jsx(Text, { color: "cyan", children: '>' }) : _jsx(Text, { children: " " }) }), _jsx(Box, { width: 2, children: _jsx(StatusIcon, { isInstalled: plugin.isInstalled, isEnabled: plugin.isEnabled }) }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, color: isSelected ? 'cyan' : 'white', children: plugin.name }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsx(Text, { color: "gray", children: truncate(plugin.marketplace, 20) }), plugin.installCount > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "\u00B7" }), _jsxs(Text, { color: "gray", children: [formatCount(plugin.installCount), " installs"] })] }))] }), _jsx(Text, { dimColor: true, wrap: "truncate", children: truncate(plugin.description, 60) })] })] }, plugin.id));
+            }), hasMore && (_jsxs(Text, { dimColor: true, children: ["\u2193 ", plugins.length - endIndex, " more below"] }))] }));
+}
+/**
+ * Truncate text to max length with ellipsis
+ */
+function truncate(text, maxLength) {
+    if (text.length <= maxLength)
+        return text;
+    return text.slice(0, maxLength - 3) + '...';
+}
+/**
+ * Format large numbers with K/M suffix
+ */
+function formatCount(count) {
+    if (count >= 1000000) {
+        return `${(count / 1000000).toFixed(1)}M`;
+    }
+    if (count >= 1000) {
+        return `${(count / 1000).toFixed(1)}K`;
+    }
+    return count.toString();
+}

package/dist/components/SearchInput.d.ts

@@ -0,0 +1,16 @@
+/**
+ * SearchInput component
+ * Filter/search box for the plugin list
+ */
+interface SearchInputProps {
+    query: string;
+    isActive?: boolean;
+    placeholder?: string;
+}
+/**
+ * Search input display (read-only display, actual input handled by useInput)
+ * @example
+ * <SearchInput query={searchQuery} isActive={isSearchMode} />
+ */
+export default function SearchInput({ query, isActive, placeholder, }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export {};