@laststance/claude-plugin-dashboard 0.3.0 → 0.3.2

package/dist/store/slices/pluginSlice.js

@@ -0,0 +1,191 @@
+/**
+ * Plugin state slice for plugin data and operations
+ * Handles plugin list, loading state, selection, and operations
+ */
+import { createSlice } from '@reduxjs/toolkit';
+import { setTab, nextTab, prevTab } from './uiSlice.js';
+/**
+ * Initial plugin state
+ */
+const initialState = {
+    plugins: [],
+    errors: [],
+    loading: true,
+    error: null,
+    selectedIndex: 0,
+    operation: 'idle',
+    operationPluginId: null,
+    confirmUninstall: false,
+    confirmUpdateAll: false,
+    updateProgress: null,
+    selectedComponentIndex: 0,
+};
+/**
+ * Plugin slice with reducers for all plugin-related state changes
+ */
+export const pluginSlice = createSlice({
+    name: 'plugins',
+    initialState,
+    reducers: {
+        /**
+         * Set the plugins list
+         */
+        setPlugins: (state, action) => {
+            state.plugins = action.payload;
+            state.loading = false;
+        },
+        /**
+         * Set plugin errors
+         */
+        setErrors: (state, action) => {
+            state.errors = action.payload;
+        },
+        /**
+         * Set loading state
+         */
+        setLoading: (state, action) => {
+            state.loading = action.payload;
+        },
+        /**
+         * Set error message
+         */
+        setError: (state, action) => {
+            state.error = action.payload;
+            state.loading = false;
+        },
+        /**
+         * Set selected plugin index
+         */
+        setSelectedIndex: (state, action) => {
+            state.selectedIndex = action.payload;
+        },
+        /**
+         * Move selection up or down
+         */
+        moveSelection: (state, action) => {
+            const { direction, maxIndex } = action.payload;
+            if (direction === 'up') {
+                state.selectedIndex = Math.max(0, state.selectedIndex - 1);
+            }
+            else {
+                state.selectedIndex = Math.min(maxIndex, state.selectedIndex + 1);
+            }
+        },
+        /**
+         * Toggle plugin enabled state
+         */
+        togglePluginEnabled: (state, action) => {
+            const pluginId = action.payload;
+            const plugin = state.plugins.find((p) => p.id === pluginId);
+            if (plugin) {
+                plugin.isEnabled = !plugin.isEnabled;
+            }
+        },
+        /**
+         * Update a single plugin
+         */
+        updatePlugin: (state, action) => {
+            const index = state.plugins.findIndex((p) => p.id === action.payload.id);
+            if (index !== -1) {
+                state.plugins[index] = action.payload;
+            }
+        },
+        /**
+         * Start a plugin operation (install/uninstall)
+         */
+        startOperation: (state, action) => {
+            state.operation = action.payload.operation;
+            state.operationPluginId = action.payload.pluginId;
+        },
+        /**
+         * End the current operation
+         */
+        endOperation: (state) => {
+            state.operation = 'idle';
+            state.operationPluginId = null;
+        },
+        /**
+         * Show uninstall confirmation dialog
+         */
+        showConfirmUninstall: (state, action) => {
+            state.confirmUninstall = true;
+            state.operationPluginId = action.payload;
+        },
+        /**
+         * Hide uninstall confirmation dialog
+         */
+        hideConfirmUninstall: (state) => {
+            state.confirmUninstall = false;
+            state.operationPluginId = null;
+        },
+        /**
+         * Show update all confirmation dialog
+         */
+        showConfirmUpdateAll: (state) => {
+            state.confirmUpdateAll = true;
+        },
+        /**
+         * Hide update all confirmation dialog
+         */
+        hideConfirmUpdateAll: (state) => {
+            state.confirmUpdateAll = false;
+        },
+        /**
+         * Set bulk update progress
+         */
+        setUpdateProgress: (state, action) => {
+            state.updateProgress = action.payload;
+        },
+        /**
+         * Clear bulk update progress
+         */
+        clearUpdateProgress: (state) => {
+            state.updateProgress = null;
+        },
+        /**
+         * Set selected component index for component focus mode
+         */
+        setComponentIndex: (state, action) => {
+            state.selectedComponentIndex = action.payload;
+        },
+        /**
+         * Move component selection up or down
+         */
+        moveComponentSelection: (state, action) => {
+            const { direction, maxIndex } = action.payload;
+            if (direction === 'up') {
+                state.selectedComponentIndex = Math.max(0, state.selectedComponentIndex - 1);
+            }
+            else {
+                state.selectedComponentIndex = Math.min(maxIndex, state.selectedComponentIndex + 1);
+            }
+        },
+        /**
+         * Reset component index when entering component mode
+         */
+        enterComponentMode: (state) => {
+            state.selectedComponentIndex = 0;
+        },
+        /**
+         * Reset component index when exiting component mode
+         */
+        exitComponentMode: (state) => {
+            state.selectedComponentIndex = 0;
+        },
+    },
+    extraReducers: (builder) => {
+        // Reset selectedIndex when tab changes
+        builder
+            .addCase(setTab, (state) => {
+            state.selectedIndex = 0;
+        })
+            .addCase(nextTab, (state) => {
+            state.selectedIndex = 0;
+        })
+            .addCase(prevTab, (state) => {
+            state.selectedIndex = 0;
+        });
+    },
+});
+export const { setPlugins, setErrors, setLoading, setError, setSelectedIndex, moveSelection, togglePluginEnabled, updatePlugin, startOperation, endOperation, showConfirmUninstall, hideConfirmUninstall, showConfirmUpdateAll, hideConfirmUpdateAll, setUpdateProgress, clearUpdateProgress, setComponentIndex, moveComponentSelection, enterComponentMode, exitComponentMode, } = pluginSlice.actions;
+export default pluginSlice.reducer;

package/dist/store/slices/uiSlice.d.ts

@@ -0,0 +1,147 @@
+/**
+ * UI state slice for application-wide UI state management
+ * Handles tabs, focus zones, dialogs, search, sort, and messages
+ */
+import { type PayloadAction } from '@reduxjs/toolkit';
+import type { AppState, FocusZone } from '../../types/index.js';
+/**
+ * UI-specific state extracted from AppState
+ */
+export interface UiState {
+    activeTab: AppState['activeTab'];
+    focusZone: FocusZone;
+    showHelp: boolean;
+    searchQuery: string;
+    sortBy: AppState['sortBy'];
+    sortOrder: AppState['sortOrder'];
+    message: string | null;
+}
+/**
+ * Get available focus zones for the current tab
+ * Errors tab has no search zone since it doesn't support filtering
+ * @param activeTab - The currently active tab
+ * @returns Array of available focus zones in navigation order
+ */
+export declare function getAvailableZones(activeTab: AppState['activeTab']): FocusZone[];
+/**
+ * UI slice with reducers for all UI-related state changes
+ */
+export declare const uiSlice: import("@reduxjs/toolkit").Slice<UiState, {
+    /**
+     * Set the active tab and reset related state
+     */
+    setTab: (state: {
+        activeTab: AppState["activeTab"];
+        focusZone: FocusZone;
+        showHelp: boolean;
+        searchQuery: string;
+        sortBy: AppState["sortBy"];
+        sortOrder: AppState["sortOrder"];
+        message: string | null;
+    }, action: PayloadAction<AppState["activeTab"]>) => void;
+    /**
+     * Navigate to next tab
+     */
+    nextTab: (state: {
+        activeTab: AppState["activeTab"];
+        focusZone: FocusZone;
+        showHelp: boolean;
+        searchQuery: string;
+        sortBy: AppState["sortBy"];
+        sortOrder: AppState["sortOrder"];
+        message: string | null;
+    }) => void;
+    /**
+     * Navigate to previous tab
+     */
+    prevTab: (state: {
+        activeTab: AppState["activeTab"];
+        focusZone: FocusZone;
+        showHelp: boolean;
+        searchQuery: string;
+        sortBy: AppState["sortBy"];
+        sortOrder: AppState["sortOrder"];
+        message: string | null;
+    }) => void;
+    /**
+     * Set the focus zone
+     */
+    setFocusZone: (state: {
+        activeTab: AppState["activeTab"];
+        focusZone: FocusZone;
+        showHelp: boolean;
+        searchQuery: string;
+        sortBy: AppState["sortBy"];
+        sortOrder: AppState["sortOrder"];
+        message: string | null;
+    }, action: PayloadAction<FocusZone>) => void;
+    /**
+     * Toggle help overlay visibility
+     */
+    toggleHelp: (state: {
+        activeTab: AppState["activeTab"];
+        focusZone: FocusZone;
+        showHelp: boolean;
+        searchQuery: string;
+        sortBy: AppState["sortBy"];
+        sortOrder: AppState["sortOrder"];
+        message: string | null;
+    }) => void;
+    /**
+     * Set the search query
+     */
+    setSearchQuery: (state: {
+        activeTab: AppState["activeTab"];
+        focusZone: FocusZone;
+        showHelp: boolean;
+        searchQuery: string;
+        sortBy: AppState["sortBy"];
+        sortOrder: AppState["sortOrder"];
+        message: string | null;
+    }, action: PayloadAction<string>) => void;
+    /**
+     * Set sort configuration
+     */
+    setSort: (state: {
+        activeTab: AppState["activeTab"];
+        focusZone: FocusZone;
+        showHelp: boolean;
+        searchQuery: string;
+        sortBy: AppState["sortBy"];
+        sortOrder: AppState["sortOrder"];
+        message: string | null;
+    }, action: PayloadAction<{
+        by: AppState["sortBy"];
+        order: AppState["sortOrder"];
+    }>) => void;
+    /**
+     * Set a message to display to the user
+     */
+    setMessage: (state: {
+        activeTab: AppState["activeTab"];
+        focusZone: FocusZone;
+        showHelp: boolean;
+        searchQuery: string;
+        sortBy: AppState["sortBy"];
+        sortOrder: AppState["sortOrder"];
+        message: string | null;
+    }, action: PayloadAction<string | null>) => void;
+    /**
+     * Clear the message
+     */
+    clearMessage: (state: {
+        activeTab: AppState["activeTab"];
+        focusZone: FocusZone;
+        showHelp: boolean;
+        searchQuery: string;
+        sortBy: AppState["sortBy"];
+        sortOrder: AppState["sortOrder"];
+        message: string | null;
+    }) => void;
+}, "ui", "ui", import("@reduxjs/toolkit").SliceSelectors<UiState>>;
+export declare const setTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"enabled" | "installed" | "discover" | "marketplaces" | "errors", "ui/setTab">, nextTab: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"ui/nextTab">, prevTab: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"ui/prevTab">, setFocusZone: import("@reduxjs/toolkit").ActionCreatorWithPayload<FocusZone, "ui/setFocusZone">, toggleHelp: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"ui/toggleHelp">, setSearchQuery: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "ui/setSearchQuery">, setSort: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    by: AppState["sortBy"];
+    order: AppState["sortOrder"];
+}, "ui/setSort">, setMessage: import("@reduxjs/toolkit").ActionCreatorWithPayload<string | null, "ui/setMessage">, clearMessage: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"ui/clearMessage">;
+declare const _default: import("@reduxjs/toolkit").Reducer<UiState>;
+export default _default;

package/dist/store/slices/uiSlice.js

@@ -0,0 +1,126 @@
+/**
+ * UI state slice for application-wide UI state management
+ * Handles tabs, focus zones, dialogs, search, sort, and messages
+ */
+import { createSlice } from '@reduxjs/toolkit';
+/**
+ * Initial UI state
+ */
+const initialState = {
+    activeTab: 'enabled',
+    focusZone: 'list',
+    showHelp: false,
+    searchQuery: '',
+    sortBy: 'installs',
+    sortOrder: 'desc',
+    message: null,
+};
+/**
+ * Get available focus zones for the current tab
+ * Errors tab has no search zone since it doesn't support filtering
+ * @param activeTab - The currently active tab
+ * @returns Array of available focus zones in navigation order
+ */
+export function getAvailableZones(activeTab) {
+    if (activeTab === 'errors') {
+        return ['tabbar', 'list'];
+    }
+    return ['tabbar', 'search', 'list'];
+}
+/**
+ * UI slice with reducers for all UI-related state changes
+ */
+export const uiSlice = createSlice({
+    name: 'ui',
+    initialState,
+    reducers: {
+        /**
+         * Set the active tab and reset related state
+         */
+        setTab: (state, action) => {
+            state.activeTab = action.payload;
+            state.focusZone = 'list';
+            state.searchQuery = '';
+            state.message = null;
+        },
+        /**
+         * Navigate to next tab
+         */
+        nextTab: (state) => {
+            const tabs = [
+                'enabled',
+                'installed',
+                'discover',
+                'marketplaces',
+                'errors',
+            ];
+            const currentIndex = tabs.indexOf(state.activeTab);
+            const nextTab = tabs[(currentIndex + 1) % tabs.length];
+            if (nextTab) {
+                state.activeTab = nextTab;
+            }
+            state.focusZone = 'list';
+            state.searchQuery = '';
+            state.message = null;
+        },
+        /**
+         * Navigate to previous tab
+         */
+        prevTab: (state) => {
+            const tabs = [
+                'enabled',
+                'installed',
+                'discover',
+                'marketplaces',
+                'errors',
+            ];
+            const currentIndex = tabs.indexOf(state.activeTab);
+            const prevTab = tabs[(currentIndex - 1 + tabs.length) % tabs.length];
+            if (prevTab) {
+                state.activeTab = prevTab;
+            }
+            state.focusZone = 'list';
+            state.searchQuery = '';
+            state.message = null;
+        },
+        /**
+         * Set the focus zone
+         */
+        setFocusZone: (state, action) => {
+            state.focusZone = action.payload;
+        },
+        /**
+         * Toggle help overlay visibility
+         */
+        toggleHelp: (state) => {
+            state.showHelp = !state.showHelp;
+        },
+        /**
+         * Set the search query
+         */
+        setSearchQuery: (state, action) => {
+            state.searchQuery = action.payload;
+        },
+        /**
+         * Set sort configuration
+         */
+        setSort: (state, action) => {
+            state.sortBy = action.payload.by;
+            state.sortOrder = action.payload.order;
+        },
+        /**
+         * Set a message to display to the user
+         */
+        setMessage: (state, action) => {
+            state.message = action.payload;
+        },
+        /**
+         * Clear the message
+         */
+        clearMessage: (state) => {
+            state.message = null;
+        },
+    },
+});
+export const { setTab, nextTab, prevTab, setFocusZone, toggleHelp, setSearchQuery, setSort, setMessage, clearMessage, } = uiSlice.actions;
+export default uiSlice.reducer;

package/dist/tabs/DiscoverTab.d.ts

@@ -2,7 +2,7 @@
  * DiscoverTab component
  * Browse all available plugins from all marketplaces
  */
-import type { Plugin, AppState, FocusZone } from '../types/index.js';
+import type { Plugin, AppState, FocusZone, ComponentDetailedInfo } from '../types/index.js';
 interface DiscoverTabProps {
     plugins: Plugin[];
     selectedIndex: number;
@@ -11,6 +11,12 @@ interface DiscoverTabProps {
     sortOrder: AppState['sortOrder'];
     /** Current focus zone for keyboard navigation */
     focusZone?: FocusZone;
+    /** Whether component focus mode is active */
+    componentFocusMode?: boolean;
+    /** Currently selected component index */
+    selectedComponentIndex?: number;
+    /** Selected component's detailed info */
+    selectedComponentDetail?: ComponentDetailedInfo | null;
 }
 /**
  * Discover tab - browse all plugins
@@ -24,5 +30,5 @@ interface DiscoverTabProps {
  *   focusZone="list"
  * />
  */
-export default function DiscoverTab({ plugins, selectedIndex, searchQuery, sortBy, sortOrder, focusZone, }: DiscoverTabProps): import("react/jsx-runtime").JSX.Element;
+export default function DiscoverTab({ plugins, selectedIndex, searchQuery, sortBy, sortOrder, focusZone, componentFocusMode, selectedComponentIndex, selectedComponentDetail, }: DiscoverTabProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/tabs/DiscoverTab.js

@@ -20,7 +20,7 @@ import SortDropdown from '../components/SortDropdown.js';
  *   focusZone="list"
  * />
  */
-export default function DiscoverTab({ plugins, selectedIndex, searchQuery, sortBy, sortOrder, focusZone = 'list', }) {
+export default function DiscoverTab({ plugins, selectedIndex, searchQuery, sortBy, sortOrder, focusZone = 'list', componentFocusMode = false, selectedComponentIndex = 0, selectedComponentDetail = null, }) {
     const selectedPlugin = plugins[selectedIndex] ?? null;
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsxs(Text, { bold: true, children: ["Discover plugins (", plugins.length > 0 ? `${selectedIndex + 1}/${plugins.length}` : '0', ")"] }), _jsx(Box, { flexGrow: 1 }), _jsx(SortDropdown, { sortBy: sortBy, sortOrder: sortOrder })] }), _jsx(Box, { marginBottom: 1, children: _jsx(SearchInput, { query: searchQuery, isActive: focusZone === 'search', placeholder: "Type to search..." }) }), _jsxs(Box, { flexGrow: 1, overflow: "hidden", children: [_jsx(Box, { width: "50%", flexDirection: "column", overflow: "hidden", children: _jsx(PluginList, { plugins: plugins, selectedIndex: selectedIndex, visibleCount: 12, isFocused: focusZone === 'list' }) }), _jsx(Box, { width: "50%", flexDirection: "column", overflow: "hidden", children: _jsx(PluginDetail, { plugin: selectedPlugin }, selectedPlugin?.id ?? 'none') })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsxs(Text, { bold: true, children: ["Discover plugins (", plugins.length > 0 ? `${selectedIndex + 1}/${plugins.length}` : '0', ")"] }), _jsx(Box, { flexGrow: 1 }), _jsx(SortDropdown, { sortBy: sortBy, sortOrder: sortOrder })] }), _jsx(Box, { marginBottom: 1, children: _jsx(SearchInput, { query: searchQuery, isActive: focusZone === 'search', placeholder: "Type to search..." }) }), _jsxs(Box, { flexGrow: 1, overflow: "hidden", children: [_jsx(Box, { width: "50%", flexDirection: "column", overflow: "hidden", children: _jsx(PluginList, { plugins: plugins, selectedIndex: selectedIndex, visibleCount: 12, isFocused: focusZone === 'list' }) }), _jsx(Box, { width: "50%", flexDirection: "column", overflow: "hidden", children: _jsx(PluginDetail, { plugin: selectedPlugin, componentFocusMode: componentFocusMode, selectedComponentIndex: selectedComponentIndex, selectedComponentDetail: selectedComponentDetail }, selectedPlugin?.id ?? 'none') })] })] }));
 }

package/dist/tabs/EnabledTab.d.ts

@@ -2,13 +2,19 @@
  * EnabledTab component
  * View and manage enabled plugins (installed + enabled)
  */
-import type { Plugin, FocusZone } from '../types/index.js';
+import type { Plugin, FocusZone, ComponentDetailedInfo } from '../types/index.js';
 interface EnabledTabProps {
     plugins: Plugin[];
     selectedIndex: number;
     searchQuery?: string;
     /** Current focus zone for keyboard navigation */
     focusZone?: FocusZone;
+    /** Whether component focus mode is active */
+    componentFocusMode?: boolean;
+    /** Currently selected component index */
+    selectedComponentIndex?: number;
+    /** Selected component's detailed info */
+    selectedComponentDetail?: ComponentDetailedInfo | null;
 }
 /**
  * Enabled tab - view currently active plugins
@@ -20,5 +26,5 @@ interface EnabledTabProps {
  * @example
  * <EnabledTab plugins={enabledPlugins} selectedIndex={0} searchQuery="" focusZone="list" />
  */
-export default function EnabledTab({ plugins, selectedIndex, searchQuery, focusZone, }: EnabledTabProps): import("react/jsx-runtime").JSX.Element;
+export default function EnabledTab({ plugins, selectedIndex, searchQuery, focusZone, componentFocusMode, selectedComponentIndex, selectedComponentDetail, }: EnabledTabProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/tabs/EnabledTab.js

@@ -17,10 +17,10 @@ import SearchInput from '../components/SearchInput.js';
  * @example
  * <EnabledTab plugins={enabledPlugins} selectedIndex={0} searchQuery="" focusZone="list" />
  */
-export default function EnabledTab({ plugins, selectedIndex, searchQuery = '', focusZone = 'list', }) {
+export default function EnabledTab({ plugins, selectedIndex, searchQuery = '', focusZone = 'list', componentFocusMode = false, selectedComponentIndex = 0, selectedComponentDetail = null, }) {
     // Plugins are already filtered by parent, use directly
     const selectedPlugin = plugins[selectedIndex] ?? null;
     return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsxs(Text, { bold: true, children: ["Enabled plugins (", plugins.length > 0 ? `${selectedIndex + 1}/${plugins.length}` : '0', ")"] }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { dimColor: true, children: "Currently active in Claude Code" })] }), _jsx(Box, { marginBottom: 1, children: _jsx(SearchInput, { query: searchQuery, isActive: focusZone === 'search', placeholder: "Type to search enabled plugins..." }) }), _jsxs(Box, { flexGrow: 1, overflow: "hidden", children: [_jsx(Box, { width: "50%", flexDirection: "column", overflow: "hidden", children: plugins.length === 0 ? (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: searchQuery ? 'No matching plugins' : 'No enabled plugins' }), _jsx(Text, { dimColor: true, children: searchQuery
                                         ? 'Try a different search term'
-                                        : 'Enable plugins in the Installed tab or use /plugin enable' })] })) : (_jsx(PluginList, { plugins: plugins, selectedIndex: selectedIndex, visibleCount: 12, isFocused: focusZone === 'list' })) }), _jsx(Box, { width: "50%", flexDirection: "column", overflow: "hidden", children: _jsx(PluginDetail, { plugin: selectedPlugin }, selectedPlugin?.id ?? 'none') })] })] }));
+                                        : 'Enable plugins in the Installed tab or use /plugin enable' })] })) : (_jsx(PluginList, { plugins: plugins, selectedIndex: selectedIndex, visibleCount: 12, isFocused: focusZone === 'list' })) }), _jsx(Box, { width: "50%", flexDirection: "column", overflow: "hidden", children: _jsx(PluginDetail, { plugin: selectedPlugin, componentFocusMode: componentFocusMode, selectedComponentIndex: selectedComponentIndex, selectedComponentDetail: selectedComponentDetail }, selectedPlugin?.id ?? 'none') })] })] }));
 }

package/dist/tabs/ErrorsTab.js

@@ -16,7 +16,7 @@ export default function ErrorsTab({ errors, selectedIndex }) {
     const selectedError = errors[selectedIndex] ?? null;
     return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Box, { marginBottom: 1, gap: 2, children: _jsxs(Text, { bold: true, color: "red", children: ["Errors (", errors.length > 0 ? `${selectedIndex + 1}/${errors.length}` : '0', ")"] }) }), _jsxs(Box, { flexGrow: 1, children: [_jsx(Box, { width: "50%", flexDirection: "column", children: errors.map((error, 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: " " })) }), _jsx(Box, { width: 2, children: _jsx(Text, { color: "red", children: "\u2717" }) }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, color: isSelected ? 'cyan' : 'white', children: error.pluginId }), _jsx(Text, { dimColor: true, wrap: "truncate", children: error.message })] })] }, `${error.pluginId}-${index}`));
+                            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(Text, { color: "red", children: "\u2717" }) }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, color: isSelected ? 'cyan' : 'white', children: error.pluginId }), _jsx(Text, { dimColor: true, wrap: "truncate", children: error.message })] })] }, `${error.pluginId}-${error.type}-${error.timestamp}-${index}`));
                         }) }), _jsx(Box, { width: "50%", flexDirection: "column", children: selectedError ? (_jsxs(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "red", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "red", children: selectedError.pluginId }) }), _jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "gray", children: "Type:" }), _jsx(Text, { children: selectedError.type })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "gray", children: "Time:" }), _jsx(Text, { children: formatDate(selectedError.timestamp) })] })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "Message:" }), _jsx(Text, { wrap: "wrap", children: selectedError.message })] }), selectedError.details && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "Details:" }), _jsx(Text, { dimColor: true, wrap: "wrap", children: selectedError.details })] }))] })) : (_jsx(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "gray", children: _jsx(Text, { dimColor: true, children: "Select an error to view details" }) })) })] })] }));
 }
 /**

package/dist/tabs/InstalledTab.d.ts

@@ -2,13 +2,19 @@
  * InstalledTab component
  * View and manage installed plugins
  */
-import type { Plugin, FocusZone } from '../types/index.js';
+import type { Plugin, FocusZone, ComponentDetailedInfo } from '../types/index.js';
 interface InstalledTabProps {
     plugins: Plugin[];
     selectedIndex: number;
     searchQuery?: string;
     /** Current focus zone for keyboard navigation */
     focusZone?: FocusZone;
+    /** Whether component focus mode is active */
+    componentFocusMode?: boolean;
+    /** Currently selected component index */
+    selectedComponentIndex?: number;
+    /** Selected component's detailed info */
+    selectedComponentDetail?: ComponentDetailedInfo | null;
 }
 /**
  * Installed tab - manage installed plugins
@@ -19,5 +25,5 @@ interface InstalledTabProps {
  * @example
  * <InstalledTab plugins={installedPlugins} selectedIndex={0} searchQuery="" focusZone="list" />
  */
-export default function InstalledTab({ plugins, selectedIndex, searchQuery, focusZone, }: InstalledTabProps): import("react/jsx-runtime").JSX.Element;
+export default function InstalledTab({ plugins, selectedIndex, searchQuery, focusZone, componentFocusMode, selectedComponentIndex, selectedComponentDetail, }: InstalledTabProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/tabs/InstalledTab.js

@@ -16,7 +16,7 @@ import SearchInput from '../components/SearchInput.js';
  * @example
  * <InstalledTab plugins={installedPlugins} selectedIndex={0} searchQuery="" focusZone="list" />
  */
-export default function InstalledTab({ plugins, selectedIndex, searchQuery = '', focusZone = 'list', }) {
+export default function InstalledTab({ plugins, selectedIndex, searchQuery = '', focusZone = 'list', componentFocusMode = false, selectedComponentIndex = 0, selectedComponentDetail = null, }) {
     // Plugins are already filtered by parent, use directly
     const selectedPlugin = plugins[selectedIndex] ?? null;
     // Count enabled/disabled
@@ -24,5 +24,5 @@ export default function InstalledTab({ plugins, selectedIndex, searchQuery = '',
     const disabledCount = plugins.length - enabledCount;
     return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsxs(Text, { bold: true, children: ["Installed plugins (", plugins.length > 0 ? `${selectedIndex + 1}/${plugins.length}` : '0', ")"] }), _jsx(Box, { flexGrow: 1 }), _jsxs(Box, { gap: 2, children: [_jsxs(Text, { color: "green", children: ["\u25CF ", enabledCount, " enabled"] }), _jsxs(Text, { color: "yellow", children: ["\u25D0 ", disabledCount, " disabled"] })] })] }), _jsx(Box, { marginBottom: 1, children: _jsx(SearchInput, { query: searchQuery, isActive: focusZone === 'search', placeholder: "Type to search installed plugins..." }) }), _jsxs(Box, { flexGrow: 1, overflow: "hidden", children: [_jsx(Box, { width: "50%", flexDirection: "column", overflow: "hidden", children: plugins.length === 0 ? (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: searchQuery ? 'No matching plugins' : 'No plugins installed' }), _jsx(Text, { dimColor: true, children: searchQuery
                                         ? 'Try a different search term'
-                                        : 'Use the Discover tab or /plugin install in Claude Code' })] })) : (_jsx(PluginList, { plugins: plugins, selectedIndex: selectedIndex, visibleCount: 12, isFocused: focusZone === 'list' })) }), _jsx(Box, { width: "50%", flexDirection: "column", overflow: "hidden", children: _jsx(PluginDetail, { plugin: selectedPlugin }, selectedPlugin?.id ?? 'none') })] })] }));
+                                        : 'Use the Discover tab or /plugin install in Claude Code' })] })) : (_jsx(PluginList, { plugins: plugins, selectedIndex: selectedIndex, visibleCount: 12, isFocused: focusZone === 'list' })) }), _jsx(Box, { width: "50%", flexDirection: "column", overflow: "hidden", children: _jsx(PluginDetail, { plugin: selectedPlugin, componentFocusMode: componentFocusMode, selectedComponentIndex: selectedComponentIndex, selectedComponentDetail: selectedComponentDetail }, selectedPlugin?.id ?? 'none') })] })] }));
 }