axon-code 2.4.0

package/dist/ui/PluginsDialog.js

@@ -0,0 +1,923 @@
+/**
+ * 插件管理 UI 组件
+ * 完全对齐官方 Axon 的交互式界面
+ *
+ * 功能：
+ * - Discover: 发现可用插件（从 Marketplace 获取）
+ * - Installed: 显示已安装插件
+ * - Marketplaces: 管理插件市场
+ * - Errors: 显示错误信息
+ */
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as os from 'os';
+// 图标常量
+const ICONS = {
+    tick: '✓',
+    cross: '✗',
+    radioOn: '●',
+    radioOff: '○',
+    pointer: '❯',
+    arrowUp: '↑',
+    arrowDown: '↓',
+    bullet: '•',
+    ellipsis: '…',
+    warning: '⚠',
+};
+const TAB_LABELS = {
+    discover: 'Discover',
+    installed: 'Installed',
+    marketplaces: 'Marketplaces',
+    errors: 'Errors',
+};
+const TAB_ORDER = ['discover', 'installed', 'marketplaces', 'errors'];
+// 格式化安装数
+function formatInstalls(count) {
+    if (count >= 1000000)
+        return `${(count / 1000000).toFixed(1)}M`;
+    if (count >= 1000)
+        return `${(count / 1000).toFixed(0)}K`;
+    return count.toString();
+}
+// 搜索输入框组件
+function SearchInput({ query, isFocused, width, }) {
+    const placeholder = 'Type to search...';
+    const displayText = query || (isFocused ? '' : placeholder);
+    const cursor = isFocused ? '▋' : '';
+    return (React.createElement(Box, null,
+        React.createElement(Text, { dimColor: !query && !isFocused },
+            ICONS.radioOff,
+            " ",
+            displayText,
+            cursor)));
+}
+// Tab 栏组件
+function TabBar({ tabs, selectedTab, onTabChange, }) {
+    return (React.createElement(Box, { flexDirection: "row", gap: 2, marginBottom: 1 },
+        tabs.map((tab) => (React.createElement(Text, { key: tab, bold: selectedTab === tab, color: selectedTab === tab ? 'cyan' : undefined, inverse: selectedTab === tab },
+            ' ',
+            TAB_LABELS[tab],
+            ' '))),
+        React.createElement(Text, { dimColor: true }, "(tab to cycle)")));
+}
+// Discover Tab 组件
+function DiscoverTab({ plugins, installCounts, selectedPlugins, loadingPlugins, onSelect, onDeselect, onViewDetails, onInstall, searchQuery, onSearchChange, error, noMarketplaces, }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [isSearchFocused, setIsSearchFocused] = useState(true);
+    // 过滤插件
+    const filteredPlugins = useMemo(() => {
+        if (!searchQuery)
+            return plugins;
+        const q = searchQuery.toLowerCase();
+        return plugins.filter((p) => p.entry.name.toLowerCase().includes(q) ||
+            p.entry.description?.toLowerCase().includes(q) ||
+            p.marketplaceName.toLowerCase().includes(q));
+    }, [plugins, searchQuery]);
+    // 键盘处理
+    useInput((input, key) => {
+        if (key.escape) {
+            if (isSearchFocused && searchQuery) {
+                onSearchChange('');
+            }
+            else {
+                setIsSearchFocused(false);
+            }
+            return;
+        }
+        if (isSearchFocused) {
+            if (key.downArrow) {
+                setIsSearchFocused(false);
+                setSelectedIndex(0);
+            }
+            else if (key.backspace || key.delete) {
+                onSearchChange(searchQuery.slice(0, -1));
+            }
+            else if (input && !key.ctrl && !key.meta) {
+                onSearchChange(searchQuery + input);
+            }
+            return;
+        }
+        if (key.upArrow) {
+            if (selectedIndex === 0) {
+                setIsSearchFocused(true);
+            }
+            else {
+                setSelectedIndex((prev) => Math.max(0, prev - 1));
+            }
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((prev) => Math.min(filteredPlugins.length - 1, prev + 1));
+        }
+        else if (input === ' ' || input === '\u3000') {
+            // Space 切换选择（v2.1.31: 支持全角空格，兼容日语 IME）
+            const plugin = filteredPlugins[selectedIndex];
+            if (plugin) {
+                if (selectedPlugins.has(plugin.pluginId)) {
+                    onDeselect(plugin.pluginId);
+                }
+                else {
+                    onSelect(plugin.pluginId);
+                }
+            }
+        }
+        else if (key.return) {
+            // Enter 查看详情
+            const plugin = filteredPlugins[selectedIndex];
+            if (plugin) {
+                onViewDetails(plugin);
+            }
+        }
+        else if (input === 'i' && selectedPlugins.size > 0) {
+            // i 安装选中的插件
+            onInstall();
+        }
+    });
+    if (noMarketplaces) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { bold: true }, "Discover plugins"),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { dimColor: true }, "No marketplaces configured.")),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { dimColor: true }, "Add a marketplace first with:")),
+            React.createElement(Box, { marginLeft: 2 },
+                React.createElement(Text, { color: "cyan" }, "/plugins marketplace add anthropics/claude-code"))));
+    }
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Box, null,
+            React.createElement(Text, { bold: true }, "Discover plugins"),
+            filteredPlugins.length > 10 && (React.createElement(Text, { dimColor: true },
+                " (",
+                selectedIndex + 1,
+                "/",
+                filteredPlugins.length,
+                ")"))),
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(SearchInput, { query: searchQuery, isFocused: isSearchFocused, width: 60 })),
+        error && (React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { color: "yellow" },
+                ICONS.warning,
+                " ",
+                error))),
+        filteredPlugins.length === 0 && searchQuery && (React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { dimColor: true },
+                "No plugins match \"",
+                searchQuery,
+                "\""))),
+        filteredPlugins.slice(0, 15).map((plugin, index) => {
+            const isSelected = index === selectedIndex && !isSearchFocused;
+            const isChecked = selectedPlugins.has(plugin.pluginId);
+            const isLoading = loadingPlugins.has(plugin.pluginId);
+            const installCount = installCounts?.get(plugin.pluginId) || 0;
+            return (React.createElement(Box, { key: plugin.pluginId, flexDirection: "column", marginBottom: 1 },
+                React.createElement(Box, null,
+                    React.createElement(Text, { color: isSelected ? 'cyan' : undefined },
+                        isSelected ? ICONS.pointer : ' ',
+                        ' '),
+                    React.createElement(Text, null,
+                        isLoading ? ICONS.ellipsis : isChecked ? ICONS.radioOn : ICONS.radioOff,
+                        ' ',
+                        plugin.entry.name,
+                        React.createElement(Text, { dimColor: true },
+                            " \u00B7 ",
+                            plugin.marketplaceName),
+                        plugin.entry.tags?.includes('community-managed') && (React.createElement(Text, { dimColor: true }, " [Community Managed]")),
+                        installCount > 0 && (React.createElement(Text, { dimColor: true },
+                            " \u00B7 ",
+                            formatInstalls(installCount),
+                            " installs")))),
+                plugin.entry.description && (React.createElement(Box, { marginLeft: 4 },
+                    React.createElement(Text, { dimColor: true }, plugin.entry.description.length > 60
+                        ? plugin.entry.description.substring(0, 57) + '...'
+                        : plugin.entry.description)))));
+        }),
+        filteredPlugins.length > 15 && (React.createElement(Box, null,
+            React.createElement(Text, { dimColor: true },
+                " ",
+                ICONS.arrowDown,
+                " more below"))),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { italic: true },
+                selectedPlugins.size > 0 && (React.createElement(Text, { bold: true, color: "cyan" }, "Press i to install \u00B7 ")),
+                React.createElement(Text, { dimColor: true }, "Type to search \u00B7 Space: (de)select \u00B7 Enter: details \u00B7 Esc: back")))));
+}
+// Installed Tab 组件（按 marketplace 分组显示，与官方一致）
+// v2.1.14: 添加搜索功能
+function InstalledTab({ plugins, onUninstall, onViewDetails, }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    // v2.1.14: 添加搜索状态
+    const [searchQuery, setSearchQuery] = useState('');
+    const [isSearchFocused, setIsSearchFocused] = useState(false);
+    // v2.1.14: 过滤插件（按名称或描述）
+    const filteredPlugins = useMemo(() => {
+        if (!searchQuery)
+            return plugins;
+        const q = searchQuery.toLowerCase();
+        return plugins.filter((p) => p.name.toLowerCase().includes(q) ||
+            p.description?.toLowerCase().includes(q) ||
+            p.marketplaceName?.toLowerCase().includes(q));
+    }, [plugins, searchQuery]);
+    // 按 marketplace 分组
+    const groupedPlugins = useMemo(() => {
+        const groups = {};
+        for (const plugin of filteredPlugins) {
+            const marketplace = plugin.marketplaceName || 'unknown';
+            if (!groups[marketplace]) {
+                groups[marketplace] = [];
+            }
+            groups[marketplace].push(plugin);
+        }
+        return groups;
+    }, [filteredPlugins]);
+    // 扁平化列表用于选择
+    const flatList = useMemo(() => {
+        const result = [];
+        for (const [marketplace, pluginList] of Object.entries(groupedPlugins)) {
+            result.push({ type: 'header', marketplace });
+            for (const plugin of pluginList) {
+                result.push({ type: 'plugin', plugin, marketplace });
+            }
+        }
+        return result;
+    }, [groupedPlugins]);
+    // 只有 plugin 类型的项可以被选中
+    const selectableIndices = useMemo(() => {
+        return flatList
+            .map((item, index) => item.type === 'plugin' ? index : -1)
+            .filter(i => i >= 0);
+    }, [flatList]);
+    useInput((input, key) => {
+        // v2.1.14: 搜索模式处理
+        if (key.escape) {
+            if (isSearchFocused && searchQuery) {
+                setSearchQuery('');
+            }
+            else if (isSearchFocused) {
+                setIsSearchFocused(false);
+            }
+            return;
+        }
+        // v2.1.14: 输入任意字符开始搜索
+        if (!isSearchFocused && input && !key.ctrl && !key.meta && !key.return && !key.upArrow && !key.downArrow) {
+            setIsSearchFocused(true);
+            setSearchQuery(input);
+            return;
+        }
+        if (isSearchFocused) {
+            if (key.downArrow) {
+                setIsSearchFocused(false);
+                if (selectableIndices.length > 0) {
+                    setSelectedIndex(selectableIndices[0]);
+                }
+            }
+            else if (key.backspace || key.delete) {
+                setSearchQuery(searchQuery.slice(0, -1));
+            }
+            else if (input && !key.ctrl && !key.meta) {
+                setSearchQuery(searchQuery + input);
+            }
+            return;
+        }
+        if (key.upArrow) {
+            const currentPos = selectableIndices.indexOf(selectedIndex);
+            if (currentPos > 0) {
+                setSelectedIndex(selectableIndices[currentPos - 1]);
+            }
+            else {
+                // 返回搜索框
+                setIsSearchFocused(true);
+            }
+        }
+        else if (key.downArrow) {
+            const currentPos = selectableIndices.indexOf(selectedIndex);
+            if (currentPos < selectableIndices.length - 1) {
+                setSelectedIndex(selectableIndices[currentPos + 1]);
+            }
+        }
+        else if (key.return) {
+            const item = flatList[selectedIndex];
+            if (item?.type === 'plugin' && item.plugin) {
+                onViewDetails(item.plugin);
+            }
+        }
+        else if (input === 'u' || key.delete) {
+            const item = flatList[selectedIndex];
+            if (item?.type === 'plugin' && item.plugin) {
+                onUninstall(item.plugin.name);
+            }
+        }
+    });
+    // 初始化选中第一个可选项
+    useEffect(() => {
+        if (selectableIndices.length > 0 && !selectableIndices.includes(selectedIndex)) {
+            setSelectedIndex(selectableIndices[0]);
+        }
+    }, [selectableIndices, selectedIndex]);
+    if (plugins.length === 0) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { bold: true }, "Installed Plugins"),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { dimColor: true }, "No plugins installed.")),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { dimColor: true }, "Use the Discover tab to find and install plugins."))));
+    }
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Box, null,
+            React.createElement(Text, { bold: true }, "Installed Plugins"),
+            filteredPlugins.length !== plugins.length && (React.createElement(Text, { dimColor: true },
+                " (",
+                filteredPlugins.length,
+                "/",
+                plugins.length,
+                ")"))),
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(SearchInput, { query: searchQuery, isFocused: isSearchFocused, width: 60 })),
+        filteredPlugins.length === 0 && searchQuery && (React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { dimColor: true },
+                "No plugins match \"",
+                searchQuery,
+                "\""))),
+        React.createElement(Box, { flexDirection: "column", marginTop: 1 }, flatList.map((item, index) => {
+            if (item.type === 'header') {
+                return (React.createElement(Box, { key: `header-${item.marketplace}`, marginTop: index > 0 ? 1 : 0 },
+                    React.createElement(Text, { bold: true }, item.marketplace)));
+            }
+            const plugin = item.plugin;
+            const isSelected = index === selectedIndex && !isSearchFocused;
+            // scope 默认为 user
+            const scope = 'user';
+            return (React.createElement(Box, { key: `plugin-${plugin.name}` },
+                React.createElement(Text, { color: isSelected ? 'cyan' : undefined },
+                    isSelected ? ICONS.pointer : ' ',
+                    ' ',
+                    ICONS.radioOn,
+                    " ",
+                    plugin.name,
+                    React.createElement(Text, { dimColor: true },
+                        " ",
+                        scope))));
+        })),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { dimColor: true, italic: true }, "Type to search \u00B7 Space: toggle \u00B7 Enter: details \u00B7 Delete: uninstall \u00B7 Esc: back"))));
+}
+// Marketplaces Tab 组件
+function MarketplacesTab({ marketplaces, onAdd, onRemove, onUpdate, onViewDetails, }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    // 菜单项：+Add Marketplace 在第一位
+    const menuItems = [
+        { type: 'add', label: '+ Add Marketplace' },
+        ...marketplaces.map((m) => ({ type: 'marketplace', marketplace: m })),
+    ];
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex((prev) => Math.max(0, prev - 1));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((prev) => Math.min(menuItems.length - 1, prev + 1));
+        }
+        else if (key.return) {
+            const item = menuItems[selectedIndex];
+            if (item.type === 'add') {
+                onAdd();
+            }
+            else if (item.marketplace) {
+                onViewDetails(item.marketplace);
+            }
+        }
+    });
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { bold: true }, "Manage marketplaces")),
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { color: selectedIndex === 0 ? 'cyan' : undefined },
+                selectedIndex === 0 ? ICONS.pointer : ' ',
+                " +"),
+            React.createElement(Text, { bold: true, color: selectedIndex === 0 ? 'cyan' : undefined },
+                ' ',
+                "Add Marketplace")),
+        marketplaces.map((marketplace, index) => {
+            const itemIndex = index + 1;
+            const isSelected = itemIndex === selectedIndex;
+            return (React.createElement(Box, { key: marketplace.name, flexDirection: "column", marginBottom: 1 },
+                React.createElement(Box, null,
+                    React.createElement(Text, { color: isSelected ? 'cyan' : undefined },
+                        isSelected ? ICONS.pointer : ' ',
+                        ' ',
+                        marketplace.pendingUpdate ? ICONS.ellipsis : ICONS.tick,
+                        ' ',
+                        marketplace.name,
+                        React.createElement(Text, { dimColor: true },
+                            " \u00B7 ",
+                            marketplace.pluginCount,
+                            " plugins"),
+                        marketplace.autoUpdate && React.createElement(Text, { dimColor: true }, " [auto-update]"))),
+                React.createElement(Box, { marginLeft: 4 },
+                    React.createElement(Text, { dimColor: true }, marketplace.source))));
+        }),
+        marketplaces.length === 0 && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { dimColor: true }, "No marketplaces configured."))),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { dimColor: true, italic: true },
+                ICONS.arrowUp,
+                ICONS.arrowDown,
+                " \u00B7 enter to select \u00B7 Esc to go back"))));
+}
+// Errors Tab 组件
+function ErrorsTab({ errors, onClear, }) {
+    useInput((input, key) => {
+        if (input === 'c') {
+            onClear();
+        }
+    });
+    if (errors.length === 0) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { bold: true }, "Plugin errors"),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: "green" },
+                    ICONS.tick,
+                    " No errors"))));
+    }
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, { bold: true },
+            "Plugin errors (",
+            errors.length,
+            ")"),
+        React.createElement(Box, { flexDirection: "column", marginTop: 1 }, errors.map((error, index) => (React.createElement(Box, { key: index, flexDirection: "column", marginBottom: 1 },
+            React.createElement(Box, null,
+                React.createElement(Text, { color: "red" },
+                    ICONS.cross,
+                    " ",
+                    error.pluginId)),
+            React.createElement(Box, { marginLeft: 2 },
+                React.createElement(Text, { dimColor: true }, error.message)),
+            React.createElement(Box, { marginLeft: 2 },
+                React.createElement(Text, { dimColor: true },
+                    "at ",
+                    error.timestamp)))))),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { dimColor: true, italic: true }, "c: clear errors \u00B7 Esc: back"))));
+}
+// Plugin Details 视图
+function PluginDetails({ plugin, isInstalled, isInstalling, onInstall, onUninstall, onBack, }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const entry = 'entry' in plugin ? plugin.entry : plugin;
+    const name = 'entry' in plugin ? plugin.entry.name : plugin.name;
+    const marketplaceName = 'marketplaceName' in plugin ? plugin.marketplaceName : undefined;
+    const version = entry.version || ('version' in plugin ? plugin.version : undefined);
+    const description = entry.description || ('description' in plugin ? plugin.description : undefined);
+    const author = 'author' in entry ? entry.author : undefined;
+    const homepage = 'homepage' in entry ? entry.homepage : undefined;
+    const actions = isInstalled
+        ? [
+            { label: 'Uninstall', action: 'uninstall' },
+            { label: 'View homepage', action: 'homepage' },
+        ]
+        : [
+            { label: 'Install', action: 'install' },
+            { label: 'View homepage', action: 'homepage' },
+        ];
+    useInput((input, key) => {
+        if (key.escape) {
+            onBack();
+            return;
+        }
+        if (key.upArrow) {
+            setSelectedIndex((prev) => Math.max(0, prev - 1));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((prev) => Math.min(actions.length - 1, prev + 1));
+        }
+        else if (key.return) {
+            const action = actions[selectedIndex];
+            if (action.action === 'install') {
+                onInstall();
+            }
+            else if (action.action === 'uninstall') {
+                onUninstall();
+            }
+        }
+    });
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Box, { flexDirection: "column", paddingX: 1, borderStyle: "round", borderColor: "gray" },
+            React.createElement(Box, { marginBottom: 1 },
+                React.createElement(Text, { bold: true }, "Plugin details")),
+            React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+                React.createElement(Text, { bold: true }, name),
+                marketplaceName && React.createElement(Text, { dimColor: true },
+                    "from ",
+                    marketplaceName),
+                version && React.createElement(Text, { dimColor: true },
+                    "Version: ",
+                    version),
+                description && (React.createElement(Box, { marginTop: 1 },
+                    React.createElement(Text, null, description))),
+                author && (React.createElement(Box, { marginTop: 1 },
+                    React.createElement(Text, { dimColor: true },
+                        "By: ",
+                        typeof author === 'string' ? author : author.name)))),
+            React.createElement(Box, { marginBottom: 1 },
+                React.createElement(Text, { color: "yellow" },
+                    ICONS.warning,
+                    " "),
+                React.createElement(Text, { dimColor: true, italic: true }, "Make sure you trust a plugin before installing, updating, or using it. Anthropic does not control what MCP servers, files, or other software are included in plugins.")),
+            React.createElement(Box, { flexDirection: "column" }, actions.map((action, index) => (React.createElement(Box, { key: action.action },
+                React.createElement(Text, { color: selectedIndex === index ? 'cyan' : undefined },
+                    selectedIndex === index ? ICONS.pointer : ' ',
+                    ' ',
+                    isInstalling && action.action === 'install' ? 'Installing…' : action.label)))))),
+        React.createElement(Box, { marginTop: 1, paddingLeft: 1 },
+            React.createElement(Text, { dimColor: true },
+                React.createElement(Text, { bold: true }, "Select:"),
+                " Enter \u00B7 ",
+                React.createElement(Text, { bold: true }, "Back:"),
+                " Esc"))));
+}
+// Add Marketplace 视图
+function AddMarketplace({ onAdd, onBack, }) {
+    const [source, setSource] = useState('');
+    useInput((input, key) => {
+        if (key.escape) {
+            onBack();
+            return;
+        }
+        if (key.return && source.trim()) {
+            onAdd(source.trim());
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setSource((prev) => prev.slice(0, -1));
+        }
+        else if (input && !key.ctrl && !key.meta) {
+            setSource((prev) => prev + input);
+        }
+    });
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Box, { flexDirection: "column", paddingX: 1, borderStyle: "round", borderColor: "gray" },
+            React.createElement(Box, { marginBottom: 1 },
+                React.createElement(Text, { bold: true }, "Add Marketplace")),
+            React.createElement(Box, { marginBottom: 1 },
+                React.createElement(Text, null, "Enter marketplace source:")),
+            React.createElement(Box, { marginBottom: 1 },
+                React.createElement(Text, null,
+                    ICONS.pointer,
+                    " ",
+                    source || '',
+                    "\u258B")),
+            React.createElement(Box, { flexDirection: "column", marginTop: 1 },
+                React.createElement(Text, { dimColor: true }, "Examples:"),
+                React.createElement(Text, { dimColor: true }, "  \u2022 anthropics/claude-code"),
+                React.createElement(Text, { dimColor: true }, "  \u2022 git@github.com:owner/repo.git"),
+                React.createElement(Text, { dimColor: true }, "  \u2022 https://example.com/marketplace"),
+                React.createElement(Text, { dimColor: true }, "  \u2022 ./path/to/local/marketplace"))),
+        React.createElement(Box, { marginTop: 1, paddingLeft: 1 },
+            React.createElement(Text, { dimColor: true },
+                React.createElement(Text, { bold: true }, "Confirm:"),
+                " Enter \u00B7 ",
+                React.createElement(Text, { bold: true }, "Back:"),
+                " Esc"))));
+}
+/**
+ * 插件管理主界面
+ */
+export function PluginsDialog({ onDone, cwd = process.cwd(), }) {
+    const [currentTab, setCurrentTab] = useState('discover');
+    const [viewMode, setViewMode] = useState('tabs');
+    // 数据状态
+    const [discoverPlugins, setDiscoverPlugins] = useState([]);
+    const [installedPlugins, setInstalledPlugins] = useState([]);
+    const [marketplaces, setMarketplaces] = useState([]);
+    const [errors, setErrors] = useState([]);
+    const [installCounts, setInstallCounts] = useState(new Map());
+    // UI 状态
+    const [selectedPlugins, setSelectedPlugins] = useState(new Set());
+    const [loadingPlugins, setLoadingPlugins] = useState(new Set());
+    const [searchQuery, setSearchQuery] = useState('');
+    const [selectedPlugin, setSelectedPlugin] = useState(null);
+    const [selectedMarketplace, setSelectedMarketplace] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState();
+    const homeDir = os.homedir();
+    const pluginDir = path.join(homeDir, '.axon', 'plugins');
+    const projectPluginDir = path.join(cwd, '.axon', 'plugins');
+    const settingsPath = path.join(homeDir, '.axon', 'settings.json');
+    // 加载数据
+    useEffect(() => {
+        loadData();
+    }, []);
+    const loadData = async () => {
+        setLoading(true);
+        try {
+            // === 1. 读取已安装插件（从 installed_plugins.json） ===
+            const installed = [];
+            const installedPluginsPath = path.join(pluginDir, 'installed_plugins.json');
+            if (fs.existsSync(installedPluginsPath)) {
+                try {
+                    const installedData = JSON.parse(fs.readFileSync(installedPluginsPath, 'utf-8'));
+                    const plugins = installedData.plugins || {};
+                    for (const [pluginId, installations] of Object.entries(plugins)) {
+                        // pluginId 格式: "plugin-name@marketplace-name"
+                        const [pluginName, marketplaceName] = pluginId.split('@');
+                        const installList = installations;
+                        for (const install of installList) {
+                            // 读取插件的 plugin.json 获取详细信息
+                            const pluginJsonPath = path.join(install.installPath, '.claude-plugin', 'plugin.json');
+                            let description = '';
+                            let author;
+                            if (fs.existsSync(pluginJsonPath)) {
+                                try {
+                                    const pluginJson = JSON.parse(fs.readFileSync(pluginJsonPath, 'utf-8'));
+                                    description = pluginJson.description || '';
+                                    author = pluginJson.author;
+                                }
+                                catch {
+                                    // 忽略解析错误
+                                }
+                            }
+                            installed.push({
+                                name: pluginName,
+                                version: install.version || '0.0.0',
+                                description,
+                                marketplaceName,
+                                installPath: install.installPath,
+                                installedAt: install.installedAt,
+                            });
+                        }
+                    }
+                }
+                catch {
+                    // 忽略解析错误
+                }
+            }
+            setInstalledPlugins(installed);
+            // === 2. 读取 marketplaces（从 ~/.axon/plugins/marketplaces/） ===
+            const marketplaceList = [];
+            const marketplacesDir = path.join(pluginDir, 'marketplaces');
+            if (fs.existsSync(marketplacesDir)) {
+                try {
+                    const entries = fs.readdirSync(marketplacesDir, { withFileTypes: true });
+                    for (const entry of entries) {
+                        if (entry.isDirectory()) {
+                            const marketplaceName = entry.name;
+                            const marketplacePath = path.join(marketplacesDir, marketplaceName);
+                            // 统计该 marketplace 中的插件数量
+                            let pluginCount = 0;
+                            const pluginsPath = path.join(marketplacePath, 'plugins');
+                            const externalPluginsPath = path.join(marketplacePath, 'external_plugins');
+                            if (fs.existsSync(pluginsPath)) {
+                                try {
+                                    const pluginEntries = fs.readdirSync(pluginsPath, { withFileTypes: true });
+                                    pluginCount += pluginEntries.filter(e => e.isDirectory()).length;
+                                }
+                                catch {
+                                    // 忽略
+                                }
+                            }
+                            if (fs.existsSync(externalPluginsPath)) {
+                                try {
+                                    const externalEntries = fs.readdirSync(externalPluginsPath, { withFileTypes: true });
+                                    pluginCount += externalEntries.filter(e => e.isDirectory()).length;
+                                }
+                                catch {
+                                    // 忽略
+                                }
+                            }
+                            // 获取该 marketplace 已安装的插件
+                            const installedInMarketplace = installed.filter(p => p.marketplaceName === marketplaceName);
+                            marketplaceList.push({
+                                name: marketplaceName,
+                                source: `github.com/anthropics/${marketplaceName}`,
+                                pluginCount,
+                                autoUpdate: true,
+                                installedPlugins: installedInMarketplace,
+                            });
+                        }
+                    }
+                }
+                catch {
+                    // 忽略读取错误
+                }
+            }
+            // 如果没有找到任何 marketplace，显示提示
+            setMarketplaces(marketplaceList);
+            // === 3. 读取可发现的插件（从 marketplaces 目录） ===
+            const discover = [];
+            for (const marketplace of marketplaceList) {
+                const marketplacePath = path.join(marketplacesDir, marketplace.name);
+                const pluginsPath = path.join(marketplacePath, 'plugins');
+                const externalPluginsPath = path.join(marketplacePath, 'external_plugins');
+                // 读取 plugins 目录
+                for (const pluginBasePath of [pluginsPath, externalPluginsPath]) {
+                    if (fs.existsSync(pluginBasePath)) {
+                        try {
+                            const pluginEntries = fs.readdirSync(pluginBasePath, { withFileTypes: true });
+                            for (const pluginEntry of pluginEntries) {
+                                if (pluginEntry.isDirectory()) {
+                                    const pluginName = pluginEntry.name;
+                                    const pluginJsonPath = path.join(pluginBasePath, pluginName, '.claude-plugin', 'plugin.json');
+                                    if (fs.existsSync(pluginJsonPath)) {
+                                        try {
+                                            const pluginJson = JSON.parse(fs.readFileSync(pluginJsonPath, 'utf-8'));
+                                            discover.push({
+                                                pluginId: `${pluginName}@${marketplace.name}`,
+                                                entry: {
+                                                    name: pluginJson.name || pluginName,
+                                                    description: pluginJson.description,
+                                                    version: pluginJson.version,
+                                                    author: pluginJson.author,
+                                                    tags: pluginJson.tags || [],
+                                                },
+                                                marketplaceName: marketplace.name,
+                                            });
+                                        }
+                                        catch {
+                                            // 忽略解析错误，但仍添加插件
+                                            discover.push({
+                                                pluginId: `${pluginName}@${marketplace.name}`,
+                                                entry: {
+                                                    name: pluginName,
+                                                    tags: [],
+                                                },
+                                                marketplaceName: marketplace.name,
+                                            });
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                        catch {
+                            // 忽略读取错误
+                        }
+                    }
+                }
+            }
+            setDiscoverPlugins(discover);
+            // 模拟安装计数（实际应从服务器获取）
+            const counts = new Map();
+            for (const plugin of discover) {
+                // 根据插件名生成模拟的安装数
+                const hash = plugin.pluginId.split('').reduce((a, b) => a + b.charCodeAt(0), 0);
+                counts.set(plugin.pluginId, (hash % 50) * 1000);
+            }
+            setInstallCounts(counts);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load plugin data');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    // Tab 切换
+    const handleTabChange = useCallback((tab) => {
+        setCurrentTab(tab);
+        setViewMode('tabs');
+        setSelectedPlugin(null);
+        setSelectedMarketplace(null);
+    }, []);
+    // 主键盘处理
+    useInput((input, key) => {
+        if (viewMode !== 'tabs')
+            return;
+        if (key.escape) {
+            onDone();
+            return;
+        }
+        if (key.tab) {
+            // Tab 切换
+            const currentIndex = TAB_ORDER.indexOf(currentTab);
+            const nextIndex = (currentIndex + 1) % TAB_ORDER.length;
+            setCurrentTab(TAB_ORDER[nextIndex]);
+        }
+    }, { isActive: viewMode === 'tabs' });
+    // 插件选择
+    const handleSelectPlugin = useCallback((pluginId) => {
+        setSelectedPlugins((prev) => new Set([...prev, pluginId]));
+    }, []);
+    const handleDeselectPlugin = useCallback((pluginId) => {
+        setSelectedPlugins((prev) => {
+            const next = new Set(prev);
+            next.delete(pluginId);
+            return next;
+        });
+    }, []);
+    // 查看插件详情
+    const handleViewPluginDetails = useCallback((plugin) => {
+        setSelectedPlugin(plugin);
+        setViewMode('details');
+    }, []);
+    // 安装插件
+    const handleInstall = useCallback(() => {
+        // 模拟安装过程
+        for (const pluginId of selectedPlugins) {
+            setLoadingPlugins((prev) => new Set([...prev, pluginId]));
+            setTimeout(() => {
+                setLoadingPlugins((prev) => {
+                    const next = new Set(prev);
+                    next.delete(pluginId);
+                    return next;
+                });
+                setSelectedPlugins((prev) => {
+                    const next = new Set(prev);
+                    next.delete(pluginId);
+                    return next;
+                });
+                // 添加到已安装列表
+                const plugin = discoverPlugins.find((p) => p.pluginId === pluginId);
+                if (plugin) {
+                    setInstalledPlugins((prev) => [
+                        ...prev,
+                        {
+                            name: plugin.entry.name,
+                            version: plugin.entry.version || '1.0.0',
+                            description: plugin.entry.description,
+                            marketplaceName: plugin.marketplaceName,
+                            installPath: path.join(pluginDir, plugin.entry.name),
+                        },
+                    ]);
+                }
+            }, 2000);
+        }
+    }, [selectedPlugins, discoverPlugins, pluginDir]);
+    // 卸载插件
+    const handleUninstall = useCallback((pluginName) => {
+        setInstalledPlugins((prev) => prev.filter((p) => p.name !== pluginName));
+        setViewMode('tabs');
+        setSelectedPlugin(null);
+    }, []);
+    // 添加 marketplace
+    const handleAddMarketplace = useCallback((source) => {
+        const name = source.includes('/') ? source.split('/').pop() || source : source;
+        setMarketplaces((prev) => [
+            ...prev,
+            {
+                name,
+                source,
+                pluginCount: 0,
+                autoUpdate: true,
+                pendingUpdate: true,
+            },
+        ]);
+        setViewMode('tabs');
+        // 模拟更新
+        setTimeout(() => {
+            setMarketplaces((prev) => prev.map((m) => m.source === source ? { ...m, pendingUpdate: false, pluginCount: 3 } : m));
+        }, 2000);
+    }, []);
+    // 移除 marketplace
+    const handleRemoveMarketplace = useCallback((name) => {
+        setMarketplaces((prev) => prev.filter((m) => m.name !== name));
+    }, []);
+    // 清除错误
+    const handleClearErrors = useCallback(() => {
+        setErrors([]);
+    }, []);
+    // 返回
+    const handleBack = useCallback(() => {
+        setViewMode('tabs');
+        setSelectedPlugin(null);
+        setSelectedMarketplace(null);
+    }, []);
+    if (loading) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { bold: true }, "/plugins"),
+            React.createElement(Text, { dimColor: true }, "Loading...")));
+    }
+    // 添加 marketplace 视图
+    if (viewMode === 'add-marketplace') {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Box, { flexDirection: "column", paddingX: 1, borderStyle: "round", borderColor: "blue" },
+                React.createElement(AddMarketplace, { onAdd: handleAddMarketplace, onBack: handleBack }))));
+    }
+    // 插件详情视图
+    if (viewMode === 'details' && selectedPlugin) {
+        const isInstalled = installedPlugins.some((p) => p.name === ('entry' in selectedPlugin ? selectedPlugin.entry.name : selectedPlugin.name));
+        const pluginId = 'pluginId' in selectedPlugin ? selectedPlugin.pluginId : selectedPlugin.name;
+        const isInstalling = loadingPlugins.has(pluginId);
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Box, { flexDirection: "column", paddingX: 1, borderStyle: "round", borderColor: "blue" },
+                React.createElement(PluginDetails, { plugin: selectedPlugin, isInstalled: isInstalled, isInstalling: isInstalling, onInstall: () => {
+                        if ('pluginId' in selectedPlugin) {
+                            handleSelectPlugin(selectedPlugin.pluginId);
+                            handleInstall();
+                        }
+                    }, onUninstall: () => {
+                        const name = 'entry' in selectedPlugin ? selectedPlugin.entry.name : selectedPlugin.name;
+                        handleUninstall(name);
+                    }, onBack: handleBack }))));
+    }
+    // 主 Tab 视图
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Box, { flexDirection: "column", paddingX: 1, borderStyle: "round", borderColor: "blue" },
+            React.createElement(TabBar, { tabs: TAB_ORDER, selectedTab: currentTab, onTabChange: handleTabChange }),
+            currentTab === 'discover' && (React.createElement(DiscoverTab, { plugins: discoverPlugins, installCounts: installCounts, selectedPlugins: selectedPlugins, loadingPlugins: loadingPlugins, onSelect: handleSelectPlugin, onDeselect: handleDeselectPlugin, onViewDetails: handleViewPluginDetails, onInstall: handleInstall, searchQuery: searchQuery, onSearchChange: setSearchQuery, error: error, noMarketplaces: marketplaces.length === 0 })),
+            currentTab === 'installed' && (React.createElement(InstalledTab, { plugins: installedPlugins, onUninstall: handleUninstall, onViewDetails: handleViewPluginDetails })),
+            currentTab === 'marketplaces' && (React.createElement(MarketplacesTab, { marketplaces: marketplaces, onAdd: () => setViewMode('add-marketplace'), onRemove: handleRemoveMarketplace, onUpdate: () => { }, onViewDetails: (marketplace) => {
+                    setSelectedMarketplace(marketplace);
+                } })),
+            currentTab === 'errors' && (React.createElement(ErrorsTab, { errors: errors, onClear: handleClearErrors }))),
+        React.createElement(Box, { marginLeft: 3 },
+            React.createElement(Text, { dimColor: true, italic: true }, "Esc to go back"))));
+}
+export default PluginsDialog;
+//# sourceMappingURL=PluginsDialog.js.map