claudeup 3.16.0 → 4.0.0

package/src/ui/screens/PluginsScreen.js

@@ -4,10 +4,9 @@ import { useApp, useModal, useProgress } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 import { useKeyboard } from "../hooks/useKeyboard.js";
 import { ScreenLayout } from "../components/layout/index.js";
-import { CategoryHeader } from "../components/CategoryHeader.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { EmptyFilterState } from "../components/EmptyFilterState.js";
-import { fuzzyFilter, highlightMatches } from "../../utils/fuzzy-search.js";
+import { fuzzyFilter } from "../../utils/fuzzy-search.js";
 import { getAllMarketplaces } from "../../data/marketplaces.js";
 import { getAvailablePlugins, refreshAllMarketplaces, clearMarketplaceCache, getLocalMarketplacesInfo, } from "../../services/plugin-manager.js";
 import { setMcpEnvVar, getMcpEnvVars, readSettings, saveGlobalInstalledPluginVersion, saveLocalInstalledPluginVersion, } from "../../services/claude-settings.js";
@@ -16,10 +15,8 @@ import { saveInstalledPluginVersion } from "../../services/plugin-manager.js";
 import { installPlugin as cliInstallPlugin, uninstallPlugin as cliUninstallPlugin, updatePlugin as cliUpdatePlugin, } from "../../services/claude-cli.js";
 import { getPluginEnvRequirements, getPluginSourcePath, } from "../../services/plugin-mcp-config.js";
 import { getPluginSetupFromSource, checkMissingDeps, installPluginDeps, } from "../../services/plugin-setup.js";
-// Virtual marketplace name for the community sub-section of claude-plugins-official
-const COMMUNITY_VIRTUAL_MARKETPLACE = "claude-plugins-official:community";
-// The marketplace that gets split into Anthropic Official + Community sections
-const SPLIT_MARKETPLACE = "claude-plugins-official";
+import { buildPluginBrowserItems, } from "../adapters/pluginsAdapter.js";
+import { renderPluginRow, renderPluginDetail } from "../renderers/pluginRenderers.js";
 export function PluginsScreen() {
     const { state, dispatch } = useApp();
     const { plugins: pluginsState } = state;
@@ -35,7 +32,6 @@ export function PluginsScreen() {
         try {
             const localMarketplaces = await getLocalMarketplacesInfo();
             const allMarketplaces = getAllMarketplaces(localMarketplaces);
-            // Always use getAvailablePlugins which fetches all scope data
             const pluginData = await getAvailablePlugins(state.projectPath);
             dispatch({
                 type: "PLUGINS_DATA_SUCCESS",
@@ -60,108 +56,11 @@ export function PluginsScreen() {
             pluginsState.plugins.status !== "success") {
             return [];
         }
-        const marketplaces = pluginsState.marketplaces.data;
-        const plugins = pluginsState.plugins.data;
-        const collapsed = pluginsState.collapsedMarketplaces;
-        const pluginsByMarketplace = new Map();
-        for (const plugin of plugins) {
-            const existing = pluginsByMarketplace.get(plugin.marketplace) || [];
-            existing.push(plugin);
-            pluginsByMarketplace.set(plugin.marketplace, existing);
-        }
-        // Sort marketplaces: deprecated ones go to the bottom
-        const sortedMarketplaces = [...marketplaces].sort((a, b) => {
-            const aDeprecated = a.name === "claude-code-plugins" ? 1 : 0;
-            const bDeprecated = b.name === "claude-code-plugins" ? 1 : 0;
-            return aDeprecated - bDeprecated;
+        return buildPluginBrowserItems({
+            marketplaces: pluginsState.marketplaces.data,
+            plugins: pluginsState.plugins.data,
+            collapsedMarketplaces: pluginsState.collapsedMarketplaces,
         });
-        const items = [];
-        for (const marketplace of sortedMarketplaces) {
-            const marketplacePlugins = pluginsByMarketplace.get(marketplace.name) || [];
-            const isCollapsed = collapsed.has(marketplace.name);
-            const isEnabled = marketplacePlugins.length > 0 || marketplace.official;
-            const hasPlugins = marketplacePlugins.length > 0;
-            // Special handling: split claude-plugins-official into two sub-sections
-            if (marketplace.name === SPLIT_MARKETPLACE && hasPlugins) {
-                const anthropicPlugins = marketplacePlugins.filter((p) => p.author?.name?.toLowerCase() === "anthropic");
-                const communityPlugins = marketplacePlugins.filter((p) => p.author?.name?.toLowerCase() !== "anthropic");
-                // Sub-section 1: Anthropic Official (plugins by Anthropic)
-                const anthropicCollapsed = collapsed.has(marketplace.name);
-                const anthropicHasPlugins = anthropicPlugins.length > 0;
-                items.push({
-                    id: `mp:${marketplace.name}`,
-                    type: "category",
-                    label: marketplace.displayName,
-                    marketplace,
-                    marketplaceEnabled: isEnabled,
-                    pluginCount: anthropicPlugins.length,
-                    isExpanded: !anthropicCollapsed && anthropicHasPlugins,
-                });
-                if (isEnabled && anthropicHasPlugins && !anthropicCollapsed) {
-                    for (const plugin of anthropicPlugins) {
-                        items.push({
-                            id: `pl:${plugin.id}`,
-                            type: "plugin",
-                            label: plugin.name,
-                            plugin,
-                        });
-                    }
-                }
-                // Sub-section 2: Community (third-party plugins in same marketplace)
-                if (communityPlugins.length > 0) {
-                    const communityVirtualMp = {
-                        name: COMMUNITY_VIRTUAL_MARKETPLACE,
-                        displayName: "Anthropic Official — 3rd Party",
-                        source: marketplace.source,
-                        description: "Third-party plugins in the Anthropic Official marketplace",
-                    };
-                    const communityCollapsed = collapsed.has(COMMUNITY_VIRTUAL_MARKETPLACE);
-                    items.push({
-                        id: `mp:${COMMUNITY_VIRTUAL_MARKETPLACE}`,
-                        type: "category",
-                        label: "Anthropic Official — 3rd Party",
-                        marketplace: communityVirtualMp,
-                        marketplaceEnabled: true,
-                        pluginCount: communityPlugins.length,
-                        isExpanded: !communityCollapsed,
-                        isCommunitySection: true,
-                    });
-                    if (!communityCollapsed) {
-                        for (const plugin of communityPlugins) {
-                            items.push({
-                                id: `pl:${plugin.id}`,
-                                type: "plugin",
-                                label: plugin.name,
-                                plugin,
-                            });
-                        }
-                    }
-                }
-                continue;
-            }
-            // Category header (marketplace)
-            items.push({
-                id: `mp:${marketplace.name}`,
-                type: "category",
-                label: marketplace.displayName,
-                marketplace,
-                marketplaceEnabled: isEnabled,
-                pluginCount: marketplacePlugins.length,
-                isExpanded: !isCollapsed && hasPlugins,
-            });
-            // Plugins under this marketplace (if expanded)
-            if (isEnabled && hasPlugins && !isCollapsed) {
-                for (const plugin of marketplacePlugins) {
-                    items.push({
-                        id: `pl:${plugin.id}`,
-                        type: "plugin",
-                        label: plugin.name,
-                        plugin,
-                    });
-                }
-            }
-        }
-        return items;
     }, [
         pluginsState.marketplaces,
         pluginsState.plugins,
@@ -173,26 +72,23 @@ export function PluginsScreen() {
         if (!query)
             return allItems;
         // Only search plugins, not categories
-        const pluginItems = allItems.filter((item) => item.type === "plugin");
+        const pluginItems = allItems.filter((item) => item.kind === "plugin");
         const fuzzyResults = fuzzyFilter(pluginItems, query, (item) => item.label);
-        // Build a set of matched plugin item ids for O(1) lookup
         const matchedPluginIds = new Set();
         for (const result of fuzzyResults) {
             matchedPluginIds.add(result.item.id);
         }
-        // Walk allItems sequentially: track the current category section.
-        // For each category, include it only if any plugin under it matched.
-        // We build a map from category item id -> whether any plugin below matched.
+        // Walk allItems sequentially: include a category only if any plugin below matched
         const categoryHasMatch = new Map();
         let currentCategoryId = null;
         for (const item of allItems) {
-            if (item.type === "category") {
+            if (item.kind === "category") {
                 currentCategoryId = item.id;
                 if (!categoryHasMatch.has(item.id)) {
                     categoryHasMatch.set(item.id, false);
                 }
             }
-            else if (item.type === "plugin" && currentCategoryId) {
+            else if (item.kind === "plugin" && currentCategoryId) {
                 if (matchedPluginIds.has(item.id)) {
                     categoryHasMatch.set(currentCategoryId, true);
                 }
@@ -202,96 +98,80 @@ export function PluginsScreen() {
         let currentCatIncluded = false;
         currentCategoryId = null;
         for (const item of allItems) {
-            if (item.type === "category") {
+            if (item.kind === "category") {
                 currentCategoryId = item.id;
                 currentCatIncluded = categoryHasMatch.get(item.id) === true;
-                if (currentCatIncluded) {
+                if (currentCatIncluded)
                     result.push(item);
-                }
             }
-            else if (item.type === "plugin" && currentCatIncluded) {
+            else if (item.kind === "plugin" && currentCatIncluded) {
                 if (matchedPluginIds.has(item.id)) {
                     const matched = fuzzyResults.find((r) => r.item.id === item.id);
-                    result.push({ ...item, _matches: matched?.matches });
+                    result.push({ ...item, matches: matched?.matches });
                 }
             }
         }
         return result;
     }, [allItems, pluginsState.searchQuery]);
-    // Only selectable items (plugins, not categories)
-    const selectableItems = useMemo(() => {
-        return filteredItems.filter((item) => item.type === "plugin" || item.type === "category");
-    }, [filteredItems]);
-    // Keyboard handling — inline search with live filtering
+    const selectableItems = useMemo(() => filteredItems, [filteredItems]);
+    // Keyboard handling
     useKeyboard((event) => {
         if (state.modal)
             return;
         const hasQuery = pluginsState.searchQuery.length > 0;
-        // Escape: always clear search state fully
         if (event.name === "escape") {
             if (hasQuery || isSearchActive) {
                 dispatch({ type: "PLUGINS_SET_SEARCH", query: "" });
                 dispatch({ type: "SET_SEARCHING", isSearching: false });
                 dispatch({ type: "PLUGINS_SELECT", index: 0 });
             }
-            // Don't return — let GlobalKeyHandler handle Escape too (for quit)
             return;
         }
-        // Backspace: remove last char from search query
         if (event.name === "backspace" || event.name === "delete") {
             if (hasQuery) {
                 const newQuery = pluginsState.searchQuery.slice(0, -1);
                 dispatch({ type: "PLUGINS_SET_SEARCH", query: newQuery });
                 dispatch({ type: "PLUGINS_SELECT", index: 0 });
-                // If query becomes empty, exit search mode
                 if (newQuery.length === 0) {
                     dispatch({ type: "SET_SEARCHING", isSearching: false });
                 }
             }
             return;
         }
-        // Navigation — always works; exits search mode on navigate
         if (event.name === "up" || event.name === "k") {
             if (isSearchActive)
                 dispatch({ type: "SET_SEARCHING", isSearching: false });
-            const newIndex = Math.max(0, pluginsState.selectedIndex - 1);
-            dispatch({ type: "PLUGINS_SELECT", index: newIndex });
+            dispatch({ type: "PLUGINS_SELECT", index: Math.max(0, pluginsState.selectedIndex - 1) });
             return;
         }
         if (event.name === "down" || event.name === "j") {
             if (isSearchActive)
                 dispatch({ type: "SET_SEARCHING", isSearching: false });
-            const newIndex = Math.min(selectableItems.length - 1, pluginsState.selectedIndex + 1);
-            dispatch({ type: "PLUGINS_SELECT", index: newIndex });
+            dispatch({
+                type: "PLUGINS_SELECT",
+                index: Math.min(selectableItems.length - 1, pluginsState.selectedIndex + 1),
+            });
             return;
         }
-        // Enter — exit search mode (keep filter active) + select/install
-        if (event.name === "enter") {
+        if (event.name === "enter" || event.name === "return") {
             if (isSearchActive) {
                 dispatch({ type: "SET_SEARCHING", isSearching: false });
-                // Keep the query — filter stays active, shortcuts resume
                 return;
             }
             handleSelect();
             return;
         }
-        // Collapse/expand marketplace — always works
         if ((event.name === "left" ||
             event.name === "right" ||
             event.name === "<" ||
             event.name === ">") &&
-            selectableItems[pluginsState.selectedIndex]?.marketplace) {
+            selectableItems[pluginsState.selectedIndex]?.kind === "category") {
             const item = selectableItems[pluginsState.selectedIndex];
-            if (item?.marketplace) {
-                dispatch({
-                    type: "PLUGINS_TOGGLE_MARKETPLACE",
-                    name: item.marketplace.name,
-                });
+            if (item?.kind === "category") {
+                dispatch({ type: "PLUGINS_TOGGLE_MARKETPLACE", name: item.marketplace.name });
             }
             return;
         }
-        // When actively typing in search, letters go to the query
-        // After Enter (isSearchActive=false, hasQuery=true), shortcuts resume
         if (isSearchActive) {
             if (event.name.length === 1 && !event.ctrl && !event.meta && !/[0-9]/.test(event.name)) {
                 dispatch({
@@ -302,13 +182,10 @@ export function PluginsScreen() {
             }
             return;
         }
-        // Action shortcuts work when not actively typing (even with filter visible)
-        // Start explicit search mode with /
         if (event.name === "/") {
             dispatch({ type: "SET_SEARCHING", isSearching: true });
             return;
         }
-        // Action shortcuts (only when query is empty)
         if (event.name === "r")
             handleRefresh();
         else if (event.name === "n")
@@ -327,12 +204,8 @@ export function PluginsScreen() {
             handleUpdateAll();
         else if (event.name === "s")
             handleSaveAsProfile();
-        // "/" to enter search mode
-        else if (event.name === "/") {
-            dispatch({ type: "SET_SEARCHING", isSearching: true });
-        }
     });
-    // Handle actions
+    // ── Action handlers ────────────────────────────────────────────────────────
     const handleRefresh = async () => {
         progress.show("Refreshing cache...");
         try {
@@ -341,7 +214,6 @@ export function PluginsScreen() {
             });
             clearMarketplaceCache();
             progress.hide();
-            // Build message
             let message = "Cache refreshed.\n\n" +
                 "To update marketplaces from GitHub, run in Claude Code:\n" +
                 "  /plugin marketplace update\n\n" +
@@ -393,49 +265,39 @@ export function PluginsScreen() {
         await modal.message("Team Configuration", helpText, "info");
     };
     /**
-     * Collect environment variables required by a plugin's MCP servers
-     * Prompts user for missing values and saves to local settings
+     * Collect environment variables required by a plugin's MCP servers.
      */
     const collectPluginEnvVars = async (pluginName, marketplace) => {
         try {
-            // Get plugin source path from marketplace manifest
             const pluginSource = await getPluginSourcePath(marketplace, pluginName);
             if (!pluginSource)
-                return true; // No source path, nothing to configure
-            // Get env var requirements from plugin's MCP config
+                return true;
             const requirements = await getPluginEnvRequirements(marketplace, pluginSource);
             if (requirements.length === 0)
-                return true; // No env vars needed
-            // Get existing env vars
+                return true;
             const existingEnvVars = await getMcpEnvVars(state.projectPath);
             const missingVars = requirements.filter((req) => !existingEnvVars[req.name] && !process.env[req.name]);
             if (missingVars.length === 0)
-                return true; // All vars already configured
-            // Ask user if they want to configure MCP server env vars now
+                return true;
             const serverNames = [...new Set(missingVars.map((v) => v.serverName))];
             const wantToConfigure = await modal.confirm("Configure MCP Servers?", `This plugin includes MCP servers (${serverNames.join(", ")}) that need ${missingVars.length} environment variable(s).\n\nConfigure now?`);
             if (!wantToConfigure) {
                 await modal.message("Skipped Configuration", "You can configure these variables later in the Environment Variables screen (press 4).", "info");
-                return true; // Still installed, just not configured
+                return true;
             }
-            // Collect each missing env var
             for (const req of missingVars) {
-                // Check if value exists in process.env
                 const existingProcessEnv = process.env[req.name];
                 if (existingProcessEnv) {
                     const useExisting = await modal.confirm(`Use ${req.name}?`, `${req.name} is already set in your environment.\n\nUse the existing value?`);
                     if (useExisting) {
-                        // Store reference to env var instead of literal value
                         await setMcpEnvVar(req.name, `\${${req.name}}`, state.projectPath);
                         continue;
                     }
                 }
-                // Prompt for value
                 const value = await modal.input(`Configure ${req.serverName}`, `${req.label} (required):`, "");
                 if (value === null) {
-                    // User cancelled
                     await modal.message("Configuration Incomplete", `Skipped remaining configuration.\nYou can configure these later in Environment Variables (press 4).`, "info");
-                    return true; // Still installed
+                    return true;
                 }
                 if (value) {
                     await setMcpEnvVar(req.name, value, state.projectPath);
@@ -445,12 +307,11 @@ export function PluginsScreen() {
         }
         catch (error) {
             console.error("Error collecting plugin env vars:", error);
-            return true; // Don't block installation on config errors
+            return true;
         }
     };
     /**
-     * Install system dependencies required by a plugin's MCP servers
-     * Auto-detects available package managers (uv/pip, brew, npm, cargo)
+     * Install system dependencies required by a plugin's MCP servers.
      */
     const installPluginSystemDeps = async (pluginName, marketplace) => {
         try {
@@ -465,7 +326,6 @@ export function PluginsScreen() {
                 0;
             if (!hasMissing)
                 return;
-            // Build description of what will be installed
             const parts = [];
             if (missing.pip?.length)
                 parts.push(`pip: ${missing.pip.join(", ")}`);
@@ -482,9 +342,7 @@ export function PluginsScreen() {
             const result = await installPluginDeps(missing);
             modal.hideModal();
             if (result.failed.length > 0) {
-                const failMsg = result.failed
-                    .map((f) => `${f.pkg}: ${f.error}`)
-                    .join("\n");
+                const failMsg = result.failed.map((f) => `${f.pkg}: ${f.error}`).join("\n");
                 await modal.message("Partial Install", `Installed: ${result.installed.length}\nFailed:\n${failMsg}`, "error");
             }
             else if (result.installed.length > 0) {
@@ -496,9 +354,7 @@ export function PluginsScreen() {
         }
     };
     /**
-     * Save the installed version to settings after CLI install/update.
-     * Claude CLI doesn't update installedPluginVersions in settings.json,
-     * so we do it ourselves to keep the TUI version display accurate.
+     * Save installed plugin version to settings after CLI install/update.
      */
     const saveVersionAfterInstall = async (pluginId, version, scope) => {
         try {
@@ -520,44 +376,36 @@ export function PluginsScreen() {
         const item = selectableItems[pluginsState.selectedIndex];
         if (!item)
             return;
-        if (item.type === "category" && item.marketplace) {
+        if (item.kind === "category") {
             const mp = item.marketplace;
             if (item.marketplaceEnabled) {
                 const isCollapsed = pluginsState.collapsedMarketplaces.has(mp.name);
-                // If collapsed, expand first (even if no plugins - they might load)
                 if (isCollapsed) {
                     dispatch({ type: "PLUGINS_TOGGLE_MARKETPLACE", name: mp.name });
                 }
-                else if (item.pluginCount && item.pluginCount > 0) {
-                    // If expanded with plugins, collapse
+                else if (item.pluginCount > 0) {
                     dispatch({ type: "PLUGINS_TOGGLE_MARKETPLACE", name: mp.name });
                 }
                 else {
-                    // If expanded with no plugins, show removal instructions
                     await modal.message(`Remove ${mp.displayName}?`, `To remove this marketplace, run in Claude Code:\n\n` +
                         `  /plugin marketplace remove ${mp.name}\n\n` +
                         `After removing, refresh claudeup with 'r' to update the display.`, "info");
                 }
             }
             else {
-                // Show add marketplace instructions
                 await modal.message(`Add ${mp.displayName}?`, `To add this marketplace, run in your terminal:\n\n` +
                     `  claude plugin marketplace add ${mp.source.repo || mp.name}\n\n` +
                     `Auto-update is enabled by default.\n\n` +
                     `After adding, refresh claudeup with 'r' to see it.`, "info");
             }
         }
-        else if (item.type === "plugin" && item.plugin) {
+        else if (item.kind === "plugin") {
             const plugin = item.plugin;
             const latestVersion = plugin.version || "0.0.0";
-            // Build scope options with status info
             const buildScopeLabel = (name, scope, desc) => {
                 const installed = scope?.enabled;
                 const ver = scope?.version;
-                const hasUpdate = ver &&
-                    latestVersion &&
-                    ver !== latestVersion &&
-                    latestVersion !== "0.0.0";
+                const hasUpdate = ver && latestVersion && ver !== latestVersion && latestVersion !== "0.0.0";
                 let label = installed ? `● ${name}` : `○ ${name}`;
                 label += ` (${desc})`;
                 if (ver)
@@ -567,23 +415,13 @@ export function PluginsScreen() {
                 return label;
             };
             const scopeOptions = [
-                {
-                    label: buildScopeLabel("User", plugin.userScope, "global"),
-                    value: "user",
-                },
-                {
-                    label: buildScopeLabel("Project", plugin.projectScope, "team"),
-                    value: "project",
-                },
-                {
-                    label: buildScopeLabel("Local", plugin.localScope, "private"),
-                    value: "local",
-                },
+                { label: buildScopeLabel("User", plugin.userScope, "global"), value: "user" },
+                { label: buildScopeLabel("Project", plugin.projectScope, "team"), value: "project" },
+                { label: buildScopeLabel("Local", plugin.localScope, "private"), value: "local" },
             ];
             const scopeValue = await modal.select(plugin.name, `Select scope to toggle:`, scopeOptions);
             if (scopeValue === null)
-                return; // Cancelled
-            // Determine action based on selected scope's current state
+                return;
             const selectedScope = scopeValue === "user"
                 ? plugin.userScope
                 : scopeValue === "project"
@@ -591,17 +429,11 @@ export function PluginsScreen() {
                     : plugin.localScope;
             const isInstalledInScope = selectedScope?.enabled;
             const installedVersion = selectedScope?.version;
-            const scopeLabel = scopeValue === "user"
-                ? "User"
-                : scopeValue === "project"
-                    ? "Project"
-                    : "Local";
-            // Check if this scope has an update available
+            const scopeLabel = scopeValue === "user" ? "User" : scopeValue === "project" ? "Project" : "Local";
             const hasUpdateInScope = isInstalledInScope &&
                 installedVersion &&
                 latestVersion !== "0.0.0" &&
                 installedVersion !== latestVersion;
-            // Determine action: update if available, otherwise toggle
             let action;
             if (isInstalledInScope && hasUpdateInScope) {
                 action = "update";
@@ -630,7 +462,6 @@ export function PluginsScreen() {
                 else {
                     await cliInstallPlugin(plugin.id, scope);
                     await saveVersionAfterInstall(plugin.id, latestVersion, scope);
-                    // On fresh install, configure env vars and install system deps
                     modal.hideModal();
                     await collectPluginEnvVars(plugin.name, plugin.marketplace);
                     await installPluginSystemDeps(plugin.name, plugin.marketplace);
@@ -648,7 +479,7 @@ export function PluginsScreen() {
     };
     const handleUpdate = async () => {
         const item = selectableItems[pluginsState.selectedIndex];
-        if (!item || item.type !== "plugin" || !item.plugin?.hasUpdate)
+        if (!item || item.kind !== "plugin" || !item.plugin.hasUpdate)
             return;
         const plugin = item.plugin;
         const scope = pluginsState.scope === "global" ? "user" : "project";
@@ -685,15 +516,13 @@ export function PluginsScreen() {
             await modal.message("Error", `Failed to update: ${error}`, "error");
         }
     };
-    // Scope-specific toggle (install if not installed, uninstall if installed)
     const handleScopeToggle = async (scope) => {
         const item = selectableItems[pluginsState.selectedIndex];
-        if (!item || item.type !== "plugin" || !item.plugin)
+        if (!item || item.kind !== "plugin")
             return;
         const plugin = item.plugin;
         const latestVersion = plugin.version || "0.0.0";
         const scopeLabel = scope === "user" ? "User" : scope === "project" ? "Project" : "Local";
-        // Check if installed in this specific scope
         const scopeData = scope === "user"
             ? plugin.userScope
             : scope === "project"
@@ -701,17 +530,10 @@ export function PluginsScreen() {
                 : plugin.localScope;
         const isInstalledInScope = scopeData?.enabled;
         const installedVersion = scopeData?.version;
-        // Also check if installed in ANY scope (for the toggle behavior)
-        const isInstalledAnywhere = plugin.userScope?.enabled || plugin.projectScope?.enabled || plugin.localScope?.enabled;
-        // Check if this scope has an update available
         const hasUpdateInScope = isInstalledInScope &&
             installedVersion &&
             latestVersion !== "0.0.0" &&
             installedVersion !== latestVersion;
-        // Determine action for THIS scope:
-        // - installed in this scope + has update → update
-        // - installed in this scope → uninstall from this scope
-        // - not installed in this scope → install to this scope
         let action;
         if (isInstalledInScope && hasUpdateInScope) {
             action = "update";
@@ -739,7 +561,6 @@ export function PluginsScreen() {
             else {
                 await cliInstallPlugin(plugin.id, scope);
                 await saveVersionAfterInstall(plugin.id, latestVersion, scope);
-                // On fresh install, configure env vars and install system deps
                 modal.hideModal();
                 await collectPluginEnvVars(plugin.name, plugin.marketplace);
                 await installPluginSystemDeps(plugin.name, plugin.marketplace);
@@ -755,21 +576,14 @@ export function PluginsScreen() {
         }
     };
     const handleSaveAsProfile = async () => {
-        // Read current enabledPlugins from project settings
         const settings = await readSettings(state.projectPath);
         const enabledPlugins = settings.enabledPlugins ?? {};
         const name = await modal.input("Save Profile", "Profile name:");
         if (name === null || !name.trim())
             return;
         const scopeChoice = await modal.select("Save to scope", "Where should this profile be saved?", [
-            {
-                label: "User — ~/.claude/profiles.json (available everywhere)",
-                value: "user",
-            },
-            {
-                label: "Project — .claude/profiles.json (shared with team via git)",
-                value: "project",
-            },
+            { label: "User — ~/.claude/profiles.json (available everywhere)", value: "user" },
+            { label: "Project — .claude/profiles.json (shared with team via git)", value: "project" },
         ]);
         if (scopeChoice === null)
             return;
@@ -785,216 +599,29 @@ export function PluginsScreen() {
             await modal.message("Error", `Failed to save profile: ${error}`, "error");
         }
     };
-    const handleUninstall = async () => {
-        const item = selectableItems[pluginsState.selectedIndex];
-        if (!item || item.type !== "plugin" || !item.plugin)
-            return;
-        const plugin = item.plugin;
-        // Build list of scopes where plugin is installed
-        const installedScopes = [];
-        if (plugin.userScope?.enabled) {
-            const ver = plugin.userScope.version
-                ? ` v${plugin.userScope.version}`
-                : "";
-            installedScopes.push({ label: `User (global)${ver}`, value: "user" });
-        }
-        if (plugin.projectScope?.enabled) {
-            const ver = plugin.projectScope.version
-                ? ` v${plugin.projectScope.version}`
-                : "";
-            installedScopes.push({ label: `Project${ver}`, value: "project" });
-        }
-        if (plugin.localScope?.enabled) {
-            const ver = plugin.localScope.version
-                ? ` v${plugin.localScope.version}`
-                : "";
-            installedScopes.push({ label: `Local${ver}`, value: "local" });
-        }
-        if (installedScopes.length === 0) {
-            await modal.message("Not Installed", `${plugin.name} is not installed in any scope.`, "info");
-            return;
-        }
-        const scopeValue = await modal.select(`Uninstall ${plugin.name}`, `Installed in ${installedScopes.length} scope(s):`, installedScopes);
-        if (scopeValue === null)
-            return; // Cancelled
-        modal.loading(`Uninstalling ${plugin.name}...`);
-        try {
-            await cliUninstallPlugin(plugin.id, scopeValue, state.projectPath);
-            modal.hideModal();
-            fetchData();
-        }
-        catch (error) {
-            modal.hideModal();
-            await modal.message("Error", `Failed to uninstall: ${error}`, "error");
-        }
-    };
-    // Render loading state
+    // ── Render ─────────────────────────────────────────────────────────────────
     if (pluginsState.marketplaces.status === "loading" ||
         pluginsState.plugins.status === "loading") {
         return (_jsxs("box", { flexDirection: "column", paddingLeft: 1, paddingRight: 1, children: [_jsx("text", { fg: "#7e57c2", children: _jsx("strong", { children: "claudeup Plugins" }) }), _jsx("text", { fg: "gray", children: "Loading..." })] }));
     }
-    // Render error state
     if (pluginsState.marketplaces.status === "error" ||
         pluginsState.plugins.status === "error") {
         return (_jsxs("box", { flexDirection: "column", paddingLeft: 1, paddingRight: 1, children: [_jsx("text", { fg: "#7e57c2", children: _jsx("strong", { children: "claudeup Plugins" }) }), _jsx("text", { fg: "red", children: "Error loading data" })] }));
     }
-    // Get selected item for detail panel
     const selectedItem = selectableItems[pluginsState.selectedIndex];
-    // Render item with fuzzy highlight support
-    const renderListItem = (item, _idx, isSelected) => {
-        if (item.type === "category" && item.marketplace) {
-            const mp = item.marketplace;
-            // Differentiate marketplace types with appropriate badges
-            let statusText = "";
-            let statusColor = "green";
-            if (item.marketplaceEnabled) {
-                if (item.isCommunitySection) {
-                    statusText = "3rd Party";
-                    statusColor = "gray";
-                }
-                else if (mp.name === "claude-plugins-official") {
-                    statusText = "★ Official";
-                    statusColor = "yellow";
-                }
-                else if (mp.name === "claude-code-plugins") {
-                    statusText = "⚠ Deprecated";
-                    statusColor = "gray";
-                }
-                else if (mp.official) {
-                    statusText = "★ Official";
-                    statusColor = "yellow";
-                }
-                else {
-                    statusText = "✓ Added";
-                    statusColor = "green";
-                }
-            }
-            if (isSelected) {
-                const arrow = item.isExpanded ? "▼" : "▶";
-                const count = item.pluginCount !== undefined && item.pluginCount > 0
-                    ? ` (${item.pluginCount})`
-                    : "";
-                return (_jsx("text", { bg: "magenta", fg: "white", children: _jsxs("strong", { children: [" ", arrow, " ", mp.displayName, count, " "] }) }));
-            }
-            return (_jsx(CategoryHeader, { title: mp.displayName, expanded: item.isExpanded, count: item.pluginCount, status: statusText, statusColor: statusColor }));
-        }
-        if (item.type === "plugin" && item.plugin) {
-            const plugin = item.plugin;
-            const isAnyScope = plugin.userScope?.enabled || plugin.projectScope?.enabled || plugin.localScope?.enabled;
-            // Build scope parts for colored rendering
-            const hasUser = plugin.userScope?.enabled;
-            const hasProject = plugin.projectScope?.enabled;
-            const hasLocal = plugin.localScope?.enabled;
-            const hasAnyScope = hasUser || hasProject || hasLocal;
-            // Build version string
-            let versionStr = "";
-            if (plugin.isOrphaned) {
-                versionStr = " deprecated";
-            }
-            else if (plugin.installedVersion && plugin.installedVersion !== "0.0.0") {
-                versionStr = ` v${plugin.installedVersion}`;
-                if (plugin.hasUpdate && plugin.version) {
-                    versionStr += ` → v${plugin.version}`;
-                }
-            }
-            // Get fuzzy match highlights if available
-            const matches = item._matches;
-            const segments = matches ? highlightMatches(plugin.name, matches) : null;
-            if (isSelected) {
-                return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", _jsx("span", { children: hasUser ? "■" : "□" }), _jsx("span", { children: hasProject ? "■" : "□" }), _jsx("span", { children: hasLocal ? "■" : "□" }), " ", plugin.name, versionStr, " "] }));
-            }
-            const displayName = segments
-                ? segments.map((seg) => seg.text).join("")
-                : plugin.name;
-            if (plugin.isOrphaned) {
-                const ver = plugin.installedVersion && plugin.installedVersion !== "0.0.0"
-                    ? ` v${plugin.installedVersion}` : "";
-                return (_jsxs("text", { children: [_jsx("span", { fg: "red", children: " \u25A0\u25A0\u25A0 " }), _jsx("span", { fg: "gray", children: displayName }), ver && _jsx("span", { fg: "yellow", children: ver }), _jsx("span", { fg: "red", children: " deprecated" })] }));
-            }
-            return (_jsxs("text", { children: [_jsx("span", { children: " " }), _jsx("span", { fg: hasUser ? "cyan" : "#333333", children: "\u25A0" }), _jsx("span", { fg: hasProject ? "green" : "#333333", children: "\u25A0" }), _jsx("span", { fg: hasLocal ? "yellow" : "#333333", children: "\u25A0" }), _jsx("span", { children: " " }), _jsx("span", { fg: hasAnyScope ? "white" : "gray", children: displayName }), _jsx("span", { fg: plugin.hasUpdate ? "yellow" : "gray", children: versionStr })] }));
-        }
-        return _jsx("text", { fg: "gray", children: item.label });
-    };
-    // Render detail content - compact to fit in available space
-    const renderDetail = () => {
-        if (!selectedItem) {
-            return _jsx("text", { fg: "gray", children: "Select an item" });
-        }
-        if (selectedItem.type === "category" && selectedItem.marketplace) {
-            const mp = selectedItem.marketplace;
-            const isEnabled = selectedItem.marketplaceEnabled;
-            // Get appropriate badge for marketplace type
-            const getBadge = () => {
-                if (selectedItem.isCommunitySection)
-                    return " 3rd Party";
-                if (mp.name === "claude-plugins-official")
-                    return " ★";
-                if (mp.name === "claude-code-plugins")
-                    return " ⚠";
-                if (mp.official)
-                    return " ★";
-                return "";
-            };
-            // Determine action hint based on state
-            const isCollapsed = pluginsState.collapsedMarketplaces.has(mp.name);
-            const hasPlugins = (selectedItem.pluginCount || 0) > 0;
-            let actionHint = "Add";
-            if (isEnabled) {
-                if (isCollapsed) {
-                    actionHint = "Expand";
-                }
-                else if (hasPlugins) {
-                    actionHint = "Collapse";
-                }
-                else {
-                    actionHint = "Remove";
-                }
-            }
-            return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "cyan", children: _jsxs("strong", { children: [mp.displayName, getBadge()] }) }), _jsx("text", { fg: "gray", children: mp.description || "No description" }), _jsx("text", { fg: isEnabled ? "green" : "gray", children: isEnabled ? "● Added" : "○ Not added" }), _jsxs("text", { fg: "#5c9aff", children: ["github.com/", mp.source.repo] }), _jsxs("text", { children: ["Plugins: ", selectedItem.pluginCount || 0] }), _jsxs("box", { marginTop: 1, children: [_jsxs("text", { bg: isEnabled ? "cyan" : "green", fg: "black", children: [" ", "Enter", " "] }), _jsxs("text", { fg: "gray", children: [" ", actionHint] })] }), isEnabled && (_jsx("box", { children: _jsx("text", { fg: "gray", children: "\u2190 \u2192 to expand/collapse" }) }))] }));
-        }
-        if (selectedItem.type === "plugin" && selectedItem.plugin) {
-            const plugin = selectedItem.plugin;
-            const isInstalled = plugin.userScope?.enabled || plugin.projectScope?.enabled || plugin.localScope?.enabled;
-            // Orphaned/deprecated plugin
-            if (plugin.isOrphaned) {
-                return (_jsxs("box", { flexDirection: "column", children: [_jsx("box", { justifyContent: "center", children: _jsx("text", { bg: "yellow", fg: "black", children: _jsxs("strong", { children: [" ", plugin.name, " \u2014 DEPRECATED "] }) }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "yellow", children: "This plugin is no longer in the marketplace." }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: "It was removed from the marketplace but still referenced in your settings. Press d to uninstall and clean up." }) }), isInstalled && (_jsx("box", { flexDirection: "column", marginTop: 2, children: _jsxs("box", { children: [_jsx("text", { bg: "red", fg: "white", children: " d " }), _jsx("text", { children: " Uninstall (recommended)" })] }) }))] }));
-            }
-            // Build component counts
-            const components = [];
-            if (plugin.agents?.length)
-                components.push(`${plugin.agents.length} agents`);
-            if (plugin.commands?.length)
-                components.push(`${plugin.commands.length} commands`);
-            if (plugin.skills?.length)
-                components.push(`${plugin.skills.length} skills`);
-            if (plugin.mcpServers?.length)
-                components.push(`${plugin.mcpServers.length} MCP`);
-            if (plugin.lspServers && Object.keys(plugin.lspServers).length) {
-                components.push(`${Object.keys(plugin.lspServers).length} LSP`);
-            }
-            // Show version only if valid (not null, not 0.0.0)
-            const showVersion = plugin.version && plugin.version !== "0.0.0";
-            const showInstalledVersion = plugin.installedVersion && plugin.installedVersion !== "0.0.0";
-            return (_jsxs("box", { flexDirection: "column", children: [_jsx("box", { justifyContent: "center", children: _jsx("text", { bg: "magenta", fg: "white", children: _jsxs("strong", { children: [" ", plugin.name, plugin.hasUpdate ? " ⬆" : "", " "] }) }) }), _jsx("box", { marginTop: 1, children: isInstalled ? (_jsx("text", { fg: "green", children: "\u25CF Installed" })) : (_jsx("text", { fg: "gray", children: "\u25CB Not installed" })) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { fg: "white", children: plugin.description }) }), showVersion && (_jsxs("text", { children: [_jsx("span", { children: "Version " }), _jsxs("span", { fg: "#5c9aff", children: ["v", plugin.version] }), showInstalledVersion &&
-                                plugin.installedVersion !== plugin.version && (_jsxs("span", { children: [" (v", plugin.installedVersion, " installed)"] }))] })), plugin.category && (_jsxs("text", { children: [_jsx("span", { children: "Category " }), _jsx("span", { fg: "magenta", children: plugin.category })] })), plugin.author && (_jsxs("text", { children: [_jsx("span", { children: "Author " }), _jsx("span", { children: plugin.author.name })] })), components.length > 0 && (_jsxs("text", { children: [_jsx("span", { children: "Contains " }), _jsx("span", { fg: "yellow", children: components.join(" · ") })] })), _jsxs("box", { flexDirection: "column", marginTop: 1, children: [_jsx("text", { children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsx("text", { children: _jsx("strong", { children: "Scopes:" }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsxs("span", { bg: "cyan", fg: "black", children: [" ", "u", " "] }), _jsx("span", { fg: plugin.userScope?.enabled ? "cyan" : "gray", children: plugin.userScope?.enabled ? " ● " : " ○ " }), _jsx("span", { fg: "cyan", children: "User" }), _jsx("span", { children: " global" }), plugin.userScope?.version && (_jsxs("span", { fg: "cyan", children: [" v", plugin.userScope.version] }))] }), _jsxs("text", { children: [_jsxs("span", { bg: "green", fg: "black", children: [" ", "p", " "] }), _jsx("span", { fg: plugin.projectScope?.enabled ? "green" : "gray", children: plugin.projectScope?.enabled ? " ● " : " ○ " }), _jsx("span", { fg: "green", children: "Project" }), _jsx("span", { children: " team" }), plugin.projectScope?.version && (_jsxs("span", { fg: "green", children: [" v", plugin.projectScope.version] }))] }), _jsxs("text", { children: [_jsxs("span", { bg: "yellow", fg: "black", children: [" ", "l", " "] }), _jsx("span", { fg: plugin.localScope?.enabled ? "yellow" : "gray", children: plugin.localScope?.enabled ? " ● " : " ○ " }), _jsx("span", { fg: "yellow", children: "Local" }), _jsx("span", { children: " private" }), plugin.localScope?.version && (_jsxs("span", { fg: "yellow", children: [" v", plugin.localScope.version] }))] })] })] }), isInstalled && (_jsx("box", { flexDirection: "column", marginTop: 1, children: plugin.hasUpdate && (_jsxs("box", { children: [_jsxs("text", { bg: "magenta", fg: "white", children: [" ", "U", " "] }), _jsxs("text", { children: [" Update to v", plugin.version] })] })) }))] }));
-        }
-        return null;
-    };
     const footerHints = isSearchActive
         ? "type to filter │ Enter:done │ Esc:clear"
         : "u/p/l:toggle │ U:update │ a:all │ s:profile │ /:search";
-    // Calculate status for subtitle
     const scopeLabel = pluginsState.scope === "global" ? "Global" : "Project";
     const plugins = pluginsState.plugins.status === "success" ? pluginsState.plugins.data : [];
     const installedCount = plugins.filter((p) => p.enabled).length;
     const updateCount = plugins.filter((p) => p.hasUpdate).length;
     const subtitle = `${scopeLabel} │ ${installedCount} installed${updateCount > 0 ? ` │ ${updateCount} updates` : ""}`;
-    // Search placeholder shows status when not searching
     const searchPlaceholder = `${scopeLabel} │ ${installedCount} installed${updateCount > 0 ? ` │ ${updateCount} ⬆` : ""} │ / to search`;
     return (_jsx(ScreenLayout, { title: "claudeup Plugins", subtitle: subtitle, currentScreen: "plugins", search: {
             isActive: isSearchActive,
             query: pluginsState.searchQuery,
             placeholder: searchPlaceholder,
-        }, footerHints: footerHints, listPanel: _jsxs("box", { flexDirection: "column", children: [_jsx(ScrollableList, { items: selectableItems, selectedIndex: pluginsState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), pluginsState.searchQuery && selectableItems.length === 0 && (_jsx(EmptyFilterState, { query: pluginsState.searchQuery, entityName: "plugins" }))] }), detailPanel: renderDetail() }));
+        }, footerHints: footerHints, listPanel: _jsxs("box", { flexDirection: "column", children: [_jsx(ScrollableList, { items: selectableItems, selectedIndex: pluginsState.selectedIndex, renderItem: renderPluginRow, maxHeight: dimensions.listPanelHeight }), pluginsState.searchQuery && selectableItems.length === 0 && (_jsx(EmptyFilterState, { query: pluginsState.searchQuery, entityName: "plugins" }))] }), detailPanel: renderPluginDetail(selectedItem, pluginsState.collapsedMarketplaces) }));
 }
 export default PluginsScreen;