mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-18 06:15:51 +00:00
1031 lines
33 KiB
TypeScript
1031 lines
33 KiB
TypeScript
import figures from 'figures'
|
|
import * as React from 'react'
|
|
import { useEffect, useState } from 'react'
|
|
import { ConfigurableShortcutHint } from '../../components/ConfigurableShortcutHint.js'
|
|
import { Box, Byline, Text } from '@anthropic/ink'
|
|
import {
|
|
useKeybinding,
|
|
useKeybindings,
|
|
} from '../../keybindings/useKeybinding.js'
|
|
import type { LoadedPlugin } from '../../types/plugin.js'
|
|
import { count } from '../../utils/array.js'
|
|
import { openBrowser } from '../../utils/browser.js'
|
|
import { logForDebugging } from '../../utils/debug.js'
|
|
import { errorMessage } from '../../utils/errors.js'
|
|
import { clearAllCaches } from '../../utils/plugins/cacheUtils.js'
|
|
import {
|
|
formatInstallCount,
|
|
getInstallCounts,
|
|
} from '../../utils/plugins/installCounts.js'
|
|
import {
|
|
isPluginGloballyInstalled,
|
|
isPluginInstalled,
|
|
} from '../../utils/plugins/installedPluginsManager.js'
|
|
import {
|
|
createPluginId,
|
|
formatFailureDetails,
|
|
formatMarketplaceLoadingErrors,
|
|
getMarketplaceSourceDisplay,
|
|
loadMarketplacesWithGracefulDegradation,
|
|
} from '../../utils/plugins/marketplaceHelpers.js'
|
|
import {
|
|
getMarketplace,
|
|
loadKnownMarketplacesConfig,
|
|
} from '../../utils/plugins/marketplaceManager.js'
|
|
import { OFFICIAL_MARKETPLACE_NAME } from '../../utils/plugins/officialMarketplace.js'
|
|
import { installPluginFromMarketplace } from '../../utils/plugins/pluginInstallationHelpers.js'
|
|
import { isPluginBlockedByPolicy } from '../../utils/plugins/pluginPolicy.js'
|
|
import { plural } from '../../utils/stringUtils.js'
|
|
import { truncateToWidth } from '../../utils/truncate.js'
|
|
import {
|
|
findPluginOptionsTarget,
|
|
PluginOptionsFlow,
|
|
} from './PluginOptionsFlow.js'
|
|
import { PluginTrustWarning } from './PluginTrustWarning.js'
|
|
import {
|
|
buildPluginDetailsMenuOptions,
|
|
extractGitHubRepo,
|
|
type InstallablePlugin,
|
|
PluginSelectionKeyHint,
|
|
} from './pluginDetailsHelpers.js'
|
|
import type { ViewState as ParentViewState } from './types.js'
|
|
import { usePagination } from './usePagination.js'
|
|
|
|
type Props = {
|
|
error: string | null
|
|
setError: (error: string | null) => void
|
|
result: string | null
|
|
setResult: (result: string | null) => void
|
|
setViewState: (state: ParentViewState) => void
|
|
onInstallComplete?: () => void | Promise<void>
|
|
targetMarketplace?: string
|
|
targetPlugin?: string
|
|
}
|
|
|
|
type ViewState =
|
|
| 'marketplace-list'
|
|
| 'plugin-list'
|
|
| 'plugin-details'
|
|
| { type: 'plugin-options'; plugin: LoadedPlugin; pluginId: string }
|
|
|
|
type MarketplaceInfo = {
|
|
name: string
|
|
totalPlugins: number
|
|
installedCount: number
|
|
source?: string
|
|
}
|
|
|
|
export function BrowseMarketplace({
|
|
error,
|
|
setError,
|
|
result: _result,
|
|
setResult,
|
|
setViewState: setParentViewState,
|
|
onInstallComplete,
|
|
targetMarketplace,
|
|
targetPlugin,
|
|
}: Props): React.ReactNode {
|
|
// View state
|
|
const [viewState, setViewState] = useState<ViewState>('marketplace-list')
|
|
const [selectedMarketplace, setSelectedMarketplace] = useState<string | null>(
|
|
null,
|
|
)
|
|
const [selectedPlugin, setSelectedPlugin] =
|
|
useState<InstallablePlugin | null>(null)
|
|
|
|
// Data state
|
|
const [marketplaces, setMarketplaces] = useState<MarketplaceInfo[]>([])
|
|
const [availablePlugins, setAvailablePlugins] = useState<InstallablePlugin[]>(
|
|
[],
|
|
)
|
|
const [loading, setLoading] = useState(true)
|
|
const [installCounts, setInstallCounts] = useState<Map<
|
|
string,
|
|
number
|
|
> | null>(null)
|
|
|
|
// Selection state
|
|
const [selectedIndex, setSelectedIndex] = useState(0)
|
|
const [selectedForInstall, setSelectedForInstall] = useState<Set<string>>(
|
|
new Set(),
|
|
)
|
|
const [installingPlugins, setInstallingPlugins] = useState<Set<string>>(
|
|
new Set(),
|
|
)
|
|
|
|
// Pagination for plugin list (continuous scrolling)
|
|
const pagination = usePagination<InstallablePlugin>({
|
|
totalItems: availablePlugins.length,
|
|
selectedIndex,
|
|
})
|
|
|
|
// Details view state
|
|
const [detailsMenuIndex, setDetailsMenuIndex] = useState(0)
|
|
const [isInstalling, setIsInstalling] = useState(false)
|
|
const [installError, setInstallError] = useState<string | null>(null)
|
|
|
|
// Warning state for non-critical errors (e.g., some marketplaces failed to load)
|
|
const [warning, setWarning] = useState<string | null>(null)
|
|
|
|
// Handle escape to go back - viewState-dependent navigation
|
|
const handleBack = React.useCallback(() => {
|
|
if (viewState === 'plugin-list') {
|
|
// If navigated directly to a specific marketplace via targetMarketplace,
|
|
// go back to manage-marketplaces showing that marketplace's details
|
|
if (targetMarketplace) {
|
|
setParentViewState({
|
|
type: 'manage-marketplaces',
|
|
targetMarketplace,
|
|
})
|
|
} else if (marketplaces.length === 1) {
|
|
// If there's only one marketplace, skip the marketplace-list view
|
|
// since we auto-navigated past it on load
|
|
setParentViewState({ type: 'menu' })
|
|
} else {
|
|
setViewState('marketplace-list')
|
|
setSelectedMarketplace(null)
|
|
setSelectedForInstall(new Set())
|
|
}
|
|
} else if (viewState === 'plugin-details') {
|
|
setViewState('plugin-list')
|
|
setSelectedPlugin(null)
|
|
} else {
|
|
// At root level (marketplace-list), exit the plugin menu
|
|
setParentViewState({ type: 'menu' })
|
|
}
|
|
}, [viewState, targetMarketplace, setParentViewState, marketplaces.length])
|
|
|
|
useKeybinding('confirm:no', handleBack, { context: 'Confirmation' })
|
|
|
|
// Load marketplaces and count installed plugins
|
|
useEffect(() => {
|
|
async function loadMarketplaceData() {
|
|
try {
|
|
const config = await loadKnownMarketplacesConfig()
|
|
|
|
// Load marketplaces with graceful degradation
|
|
const { marketplaces, failures } =
|
|
await loadMarketplacesWithGracefulDegradation(config)
|
|
|
|
const marketplaceInfos: MarketplaceInfo[] = []
|
|
for (const {
|
|
name,
|
|
config: marketplaceConfig,
|
|
data: marketplace,
|
|
} of marketplaces) {
|
|
if (marketplace) {
|
|
// Count how many plugins from this marketplace are installed
|
|
const installedFromThisMarketplace = count(
|
|
marketplace.plugins,
|
|
plugin => isPluginInstalled(createPluginId(plugin.name, name)),
|
|
)
|
|
|
|
marketplaceInfos.push({
|
|
name,
|
|
totalPlugins: marketplace.plugins.length,
|
|
installedCount: installedFromThisMarketplace,
|
|
source: getMarketplaceSourceDisplay(marketplaceConfig.source),
|
|
})
|
|
}
|
|
}
|
|
|
|
// Sort so claude-plugin-directory is always first
|
|
marketplaceInfos.sort((a, b) => {
|
|
if (a.name === 'claude-plugin-directory') return -1
|
|
if (b.name === 'claude-plugin-directory') return 1
|
|
return 0
|
|
})
|
|
|
|
setMarketplaces(marketplaceInfos)
|
|
|
|
// Handle marketplace loading errors/warnings
|
|
const successCount = count(marketplaces, m => m.data !== null)
|
|
const errorResult = formatMarketplaceLoadingErrors(
|
|
failures,
|
|
successCount,
|
|
)
|
|
if (errorResult) {
|
|
if (errorResult.type === 'warning') {
|
|
setWarning(
|
|
errorResult.message + '. Showing available marketplaces.',
|
|
)
|
|
} else {
|
|
throw new Error(errorResult.message)
|
|
}
|
|
}
|
|
|
|
// Skip marketplace selection if there's only one marketplace
|
|
if (
|
|
marketplaceInfos.length === 1 &&
|
|
!targetMarketplace &&
|
|
!targetPlugin
|
|
) {
|
|
const singleMarketplace = marketplaceInfos[0]
|
|
if (singleMarketplace) {
|
|
setSelectedMarketplace(singleMarketplace.name)
|
|
setViewState('plugin-list')
|
|
}
|
|
}
|
|
|
|
// Handle targetMarketplace and targetPlugin after marketplaces are loaded
|
|
if (targetPlugin) {
|
|
// Search for the plugin across all marketplaces
|
|
let foundPlugin: InstallablePlugin | null = null
|
|
let foundMarketplace: string | null = null
|
|
|
|
for (const [name] of Object.entries(config)) {
|
|
const marketplace = await getMarketplace(name)
|
|
if (marketplace) {
|
|
const plugin = marketplace.plugins.find(
|
|
p => p.name === targetPlugin,
|
|
)
|
|
if (plugin) {
|
|
const pluginId = createPluginId(plugin.name, name)
|
|
foundPlugin = {
|
|
entry: plugin,
|
|
marketplaceName: name,
|
|
pluginId,
|
|
// isPluginGloballyInstalled: only block when user/managed scope
|
|
// exists (nothing to add). Project/local-scope installs don't
|
|
// block — user may want to promote to user scope (gh-29997).
|
|
isInstalled: isPluginGloballyInstalled(pluginId),
|
|
}
|
|
foundMarketplace = name
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
if (foundPlugin && foundMarketplace) {
|
|
// Block only on global (user/managed) install — project/local scope
|
|
// means the user might still want to add a user-scope entry so the
|
|
// plugin is available in other projects (gh-29997, gh-29240, gh-29392).
|
|
// The plugin-details view offers all three scope options; the backend
|
|
// (installPluginOp → addInstalledPlugin) already supports multiple
|
|
// scope entries per plugin.
|
|
const pluginId = foundPlugin.pluginId
|
|
const globallyInstalled = isPluginGloballyInstalled(pluginId)
|
|
|
|
if (globallyInstalled) {
|
|
setError(
|
|
`Plugin '${pluginId}' is already installed globally. Use '/plugin' to manage existing plugins.`,
|
|
)
|
|
} else {
|
|
// Navigate to the plugin details view
|
|
setSelectedMarketplace(foundMarketplace)
|
|
setSelectedPlugin(foundPlugin)
|
|
setViewState('plugin-details')
|
|
}
|
|
} else {
|
|
setError(`Plugin "${targetPlugin}" not found in any marketplace`)
|
|
}
|
|
} else if (targetMarketplace) {
|
|
// Navigate directly to the specified marketplace
|
|
const marketplaceExists = marketplaceInfos.some(
|
|
m => m.name === targetMarketplace,
|
|
)
|
|
if (marketplaceExists) {
|
|
setSelectedMarketplace(targetMarketplace)
|
|
setViewState('plugin-list')
|
|
} else {
|
|
setError(`Marketplace "${targetMarketplace}" not found`)
|
|
}
|
|
}
|
|
} catch (err) {
|
|
setError(
|
|
err instanceof Error ? err.message : 'Failed to load marketplaces',
|
|
)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
void loadMarketplaceData()
|
|
}, [setError, targetMarketplace, targetPlugin])
|
|
|
|
// Load plugins when a marketplace is selected
|
|
useEffect(() => {
|
|
if (!selectedMarketplace) return
|
|
|
|
let cancelled = false
|
|
|
|
async function loadPluginsForMarketplace(marketplaceName: string) {
|
|
setLoading(true)
|
|
try {
|
|
const marketplace = await getMarketplace(marketplaceName)
|
|
if (cancelled) return
|
|
if (!marketplace) {
|
|
throw new Error(`Failed to load marketplace: ${marketplaceName}`)
|
|
}
|
|
|
|
// Filter out already installed plugins
|
|
const installablePlugins: InstallablePlugin[] = []
|
|
for (const entry of marketplace.plugins) {
|
|
const pluginId = createPluginId(entry.name, marketplaceName)
|
|
if (isPluginBlockedByPolicy(pluginId)) continue
|
|
installablePlugins.push({
|
|
entry,
|
|
marketplaceName: marketplaceName,
|
|
pluginId,
|
|
// Only mark as "installed" when globally scoped (user/managed).
|
|
// Project/local installs don't block — user can add user scope
|
|
// via the plugin-details view (gh-29997).
|
|
isInstalled: isPluginGloballyInstalled(pluginId),
|
|
})
|
|
}
|
|
|
|
// Fetch install counts and sort by popularity
|
|
try {
|
|
const counts = await getInstallCounts()
|
|
if (cancelled) return
|
|
setInstallCounts(counts)
|
|
|
|
if (counts) {
|
|
// Sort by install count (descending), then alphabetically
|
|
installablePlugins.sort((a, b) => {
|
|
const countA = counts.get(a.pluginId) ?? 0
|
|
const countB = counts.get(b.pluginId) ?? 0
|
|
if (countA !== countB) return countB - countA
|
|
return a.entry.name.localeCompare(b.entry.name)
|
|
})
|
|
} else {
|
|
// No counts available - sort alphabetically
|
|
installablePlugins.sort((a, b) =>
|
|
a.entry.name.localeCompare(b.entry.name),
|
|
)
|
|
}
|
|
} catch (error) {
|
|
if (cancelled) return
|
|
// Log the error, then gracefully degrade to alphabetical sort
|
|
logForDebugging(
|
|
`Failed to fetch install counts: ${errorMessage(error)}`,
|
|
)
|
|
installablePlugins.sort((a, b) =>
|
|
a.entry.name.localeCompare(b.entry.name),
|
|
)
|
|
}
|
|
|
|
setAvailablePlugins(installablePlugins)
|
|
setSelectedIndex(0)
|
|
setSelectedForInstall(new Set())
|
|
} catch (err) {
|
|
if (cancelled) return
|
|
setError(err instanceof Error ? err.message : 'Failed to load plugins')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
void loadPluginsForMarketplace(selectedMarketplace)
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [selectedMarketplace, setError])
|
|
|
|
// Install selected plugins
|
|
const installSelectedPlugins = async () => {
|
|
if (selectedForInstall.size === 0) return
|
|
|
|
const pluginsToInstall = availablePlugins.filter(p =>
|
|
selectedForInstall.has(p.pluginId),
|
|
)
|
|
|
|
setInstallingPlugins(new Set(pluginsToInstall.map(p => p.pluginId)))
|
|
|
|
let successCount = 0
|
|
let failureCount = 0
|
|
const newFailedPlugins: Array<{ name: string; reason: string }> = []
|
|
|
|
for (const plugin of pluginsToInstall) {
|
|
const result = await installPluginFromMarketplace({
|
|
pluginId: plugin.pluginId,
|
|
entry: plugin.entry,
|
|
marketplaceName: plugin.marketplaceName,
|
|
scope: 'user',
|
|
})
|
|
|
|
if (result.success) {
|
|
successCount++
|
|
} else {
|
|
failureCount++
|
|
newFailedPlugins.push({
|
|
name: plugin.entry.name,
|
|
reason: result.error,
|
|
})
|
|
}
|
|
}
|
|
|
|
setInstallingPlugins(new Set())
|
|
setSelectedForInstall(new Set())
|
|
clearAllCaches()
|
|
|
|
// Handle installation results
|
|
if (failureCount === 0) {
|
|
// All succeeded
|
|
const message =
|
|
`✓ Installed ${successCount} ${plural(successCount, 'plugin')}. ` +
|
|
`Run /reload-plugins to activate.`
|
|
|
|
setResult(message)
|
|
} else if (successCount === 0) {
|
|
// All failed - show error with reasons
|
|
setError(
|
|
`Failed to install: ${formatFailureDetails(newFailedPlugins, true)}`,
|
|
)
|
|
} else {
|
|
// Mixed results - show partial success
|
|
const message =
|
|
`✓ Installed ${successCount} of ${successCount + failureCount} plugins. ` +
|
|
`Failed: ${formatFailureDetails(newFailedPlugins, false)}. ` +
|
|
`Run /reload-plugins to activate successfully installed plugins.`
|
|
|
|
setResult(message)
|
|
}
|
|
|
|
// Handle completion callback and navigation
|
|
if (successCount > 0) {
|
|
if (onInstallComplete) {
|
|
await onInstallComplete()
|
|
}
|
|
}
|
|
|
|
setParentViewState({ type: 'menu' })
|
|
}
|
|
|
|
// Install single plugin from details view
|
|
const handleSinglePluginInstall = async (
|
|
plugin: InstallablePlugin,
|
|
scope: 'user' | 'project' | 'local' = 'user',
|
|
) => {
|
|
setIsInstalling(true)
|
|
setInstallError(null)
|
|
|
|
const result = await installPluginFromMarketplace({
|
|
pluginId: plugin.pluginId,
|
|
entry: plugin.entry,
|
|
marketplaceName: plugin.marketplaceName,
|
|
scope,
|
|
})
|
|
|
|
if (result.success) {
|
|
const loaded = await findPluginOptionsTarget(plugin.pluginId)
|
|
if (loaded) {
|
|
setIsInstalling(false)
|
|
setViewState({
|
|
type: 'plugin-options',
|
|
plugin: loaded,
|
|
pluginId: plugin.pluginId,
|
|
})
|
|
return
|
|
}
|
|
setResult(result.message)
|
|
if (onInstallComplete) {
|
|
await onInstallComplete()
|
|
}
|
|
setParentViewState({ type: 'menu' })
|
|
} else {
|
|
setIsInstalling(false)
|
|
setInstallError(result.error)
|
|
}
|
|
}
|
|
|
|
// Handle error state
|
|
useEffect(() => {
|
|
if (error) {
|
|
setResult(error)
|
|
}
|
|
}, [error, setResult])
|
|
|
|
// Marketplace-list navigation
|
|
useKeybindings(
|
|
{
|
|
'select:previous': () => {
|
|
if (selectedIndex > 0) {
|
|
setSelectedIndex(selectedIndex - 1)
|
|
}
|
|
},
|
|
'select:next': () => {
|
|
if (selectedIndex < marketplaces.length - 1) {
|
|
setSelectedIndex(selectedIndex + 1)
|
|
}
|
|
},
|
|
'select:accept': () => {
|
|
const marketplace = marketplaces[selectedIndex]
|
|
if (marketplace) {
|
|
setSelectedMarketplace(marketplace.name)
|
|
setViewState('plugin-list')
|
|
}
|
|
},
|
|
},
|
|
{ context: 'Select', isActive: viewState === 'marketplace-list' },
|
|
)
|
|
|
|
// Plugin-list navigation
|
|
useKeybindings(
|
|
{
|
|
'select:previous': () => {
|
|
if (selectedIndex > 0) {
|
|
pagination.handleSelectionChange(selectedIndex - 1, setSelectedIndex)
|
|
}
|
|
},
|
|
'select:next': () => {
|
|
if (selectedIndex < availablePlugins.length - 1) {
|
|
pagination.handleSelectionChange(selectedIndex + 1, setSelectedIndex)
|
|
}
|
|
},
|
|
'select:accept': () => {
|
|
if (
|
|
selectedIndex === availablePlugins.length &&
|
|
selectedForInstall.size > 0
|
|
) {
|
|
void installSelectedPlugins()
|
|
} else if (selectedIndex < availablePlugins.length) {
|
|
const plugin = availablePlugins[selectedIndex]
|
|
if (plugin) {
|
|
if (plugin.isInstalled) {
|
|
setParentViewState({
|
|
type: 'manage-plugins',
|
|
targetPlugin: plugin.entry.name,
|
|
targetMarketplace: plugin.marketplaceName,
|
|
})
|
|
} else {
|
|
setSelectedPlugin(plugin)
|
|
setViewState('plugin-details')
|
|
setDetailsMenuIndex(0)
|
|
setInstallError(null)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
{ context: 'Select', isActive: viewState === 'plugin-list' },
|
|
)
|
|
|
|
useKeybindings(
|
|
{
|
|
'plugin:toggle': () => {
|
|
if (selectedIndex < availablePlugins.length) {
|
|
const plugin = availablePlugins[selectedIndex]
|
|
if (plugin && !plugin.isInstalled) {
|
|
const newSelection = new Set(selectedForInstall)
|
|
if (newSelection.has(plugin.pluginId)) {
|
|
newSelection.delete(plugin.pluginId)
|
|
} else {
|
|
newSelection.add(plugin.pluginId)
|
|
}
|
|
setSelectedForInstall(newSelection)
|
|
}
|
|
}
|
|
},
|
|
'plugin:install': () => {
|
|
if (selectedForInstall.size > 0) {
|
|
void installSelectedPlugins()
|
|
}
|
|
},
|
|
},
|
|
{ context: 'Plugin', isActive: viewState === 'plugin-list' },
|
|
)
|
|
|
|
// Plugin-details navigation
|
|
const detailsMenuOptions = React.useMemo(() => {
|
|
if (!selectedPlugin) return []
|
|
const hasHomepage = selectedPlugin.entry.homepage
|
|
const githubRepo = extractGitHubRepo(selectedPlugin)
|
|
return buildPluginDetailsMenuOptions(hasHomepage, githubRepo)
|
|
}, [selectedPlugin])
|
|
|
|
useKeybindings(
|
|
{
|
|
'select:previous': () => {
|
|
if (detailsMenuIndex > 0) {
|
|
setDetailsMenuIndex(detailsMenuIndex - 1)
|
|
}
|
|
},
|
|
'select:next': () => {
|
|
if (detailsMenuIndex < detailsMenuOptions.length - 1) {
|
|
setDetailsMenuIndex(detailsMenuIndex + 1)
|
|
}
|
|
},
|
|
'select:accept': () => {
|
|
if (!selectedPlugin) return
|
|
const action = detailsMenuOptions[detailsMenuIndex]?.action
|
|
const hasHomepage = selectedPlugin.entry.homepage
|
|
const githubRepo = extractGitHubRepo(selectedPlugin)
|
|
if (action === 'install-user') {
|
|
void handleSinglePluginInstall(selectedPlugin, 'user')
|
|
} else if (action === 'install-project') {
|
|
void handleSinglePluginInstall(selectedPlugin, 'project')
|
|
} else if (action === 'install-local') {
|
|
void handleSinglePluginInstall(selectedPlugin, 'local')
|
|
} else if (action === 'homepage' && hasHomepage) {
|
|
void openBrowser(hasHomepage)
|
|
} else if (action === 'github' && githubRepo) {
|
|
void openBrowser(`https://github.com/${githubRepo}`)
|
|
} else if (action === 'back') {
|
|
setViewState('plugin-list')
|
|
setSelectedPlugin(null)
|
|
}
|
|
},
|
|
},
|
|
{
|
|
context: 'Select',
|
|
isActive: viewState === 'plugin-details' && !!selectedPlugin,
|
|
},
|
|
)
|
|
|
|
if (typeof viewState === 'object' && viewState.type === 'plugin-options') {
|
|
const { plugin, pluginId } = viewState
|
|
function finish(msg: string): void {
|
|
setResult(msg)
|
|
if (onInstallComplete) {
|
|
void onInstallComplete()
|
|
}
|
|
setParentViewState({ type: 'menu' })
|
|
}
|
|
return (
|
|
<PluginOptionsFlow
|
|
plugin={plugin}
|
|
pluginId={pluginId}
|
|
onDone={(outcome, detail) => {
|
|
switch (outcome) {
|
|
case 'configured':
|
|
finish(
|
|
`✓ Installed and configured ${plugin.name}. Run /reload-plugins to apply.`,
|
|
)
|
|
break
|
|
case 'skipped':
|
|
finish(
|
|
`✓ Installed ${plugin.name}. Run /reload-plugins to apply.`,
|
|
)
|
|
break
|
|
case 'error':
|
|
finish(`Installed but failed to save config: ${detail}`)
|
|
break
|
|
}
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
// Loading state
|
|
if (loading) {
|
|
return <Text>Loading…</Text>
|
|
}
|
|
|
|
// Error state
|
|
if (error) {
|
|
return <Text color="error">{error}</Text>
|
|
}
|
|
|
|
// Marketplace selection view
|
|
if (viewState === 'marketplace-list') {
|
|
if (marketplaces.length === 0) {
|
|
return (
|
|
<Box flexDirection="column">
|
|
<Box marginBottom={1}>
|
|
<Text bold>Select marketplace</Text>
|
|
</Box>
|
|
<Text>No marketplaces configured.</Text>
|
|
<Text dimColor>
|
|
Add a marketplace first using {"'Add marketplace'"}.
|
|
</Text>
|
|
<Box marginTop={1} paddingLeft={1}>
|
|
<Text dimColor>
|
|
<ConfigurableShortcutHint
|
|
action="confirm:no"
|
|
context="Confirmation"
|
|
fallback="Esc"
|
|
description="go back"
|
|
/>
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Box flexDirection="column">
|
|
<Box marginBottom={1}>
|
|
<Text bold>Select marketplace</Text>
|
|
</Box>
|
|
|
|
{/* Warning banner for marketplace load failures */}
|
|
{warning && (
|
|
<Box marginBottom={1} flexDirection="column">
|
|
<Text color="warning">
|
|
{figures.warning} {warning}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
{marketplaces.map((marketplace, index) => (
|
|
<Box
|
|
key={marketplace.name}
|
|
flexDirection="column"
|
|
marginBottom={index < marketplaces.length - 1 ? 1 : 0}
|
|
>
|
|
<Box>
|
|
<Text color={selectedIndex === index ? 'suggestion' : undefined}>
|
|
{selectedIndex === index ? figures.pointer : ' '}{' '}
|
|
{marketplace.name}
|
|
</Text>
|
|
</Box>
|
|
<Box marginLeft={2}>
|
|
<Text dimColor>
|
|
{marketplace.totalPlugins}{' '}
|
|
{plural(marketplace.totalPlugins, 'plugin')} available
|
|
{marketplace.installedCount > 0 &&
|
|
` · ${marketplace.installedCount} already installed`}
|
|
{marketplace.source && ` · ${marketplace.source}`}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
|
|
<Box marginTop={1}>
|
|
<Text dimColor italic>
|
|
<Byline>
|
|
<ConfigurableShortcutHint
|
|
action="select:accept"
|
|
context="Select"
|
|
fallback="Enter"
|
|
description="select"
|
|
/>
|
|
<ConfigurableShortcutHint
|
|
action="confirm:no"
|
|
context="Confirmation"
|
|
fallback="Esc"
|
|
description="go back"
|
|
/>
|
|
</Byline>
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
// Plugin details view
|
|
if (viewState === 'plugin-details' && selectedPlugin) {
|
|
const hasHomepage = selectedPlugin.entry.homepage
|
|
const githubRepo = extractGitHubRepo(selectedPlugin)
|
|
|
|
const menuOptions = buildPluginDetailsMenuOptions(hasHomepage, githubRepo)
|
|
|
|
return (
|
|
<Box flexDirection="column">
|
|
<Box marginBottom={1}>
|
|
<Text bold>Plugin Details</Text>
|
|
</Box>
|
|
|
|
{/* Plugin metadata */}
|
|
<Box flexDirection="column" marginBottom={1}>
|
|
<Text bold>{selectedPlugin.entry.name}</Text>
|
|
{selectedPlugin.entry.version && (
|
|
<Text dimColor>Version: {selectedPlugin.entry.version}</Text>
|
|
)}
|
|
{selectedPlugin.entry.description && (
|
|
<Box marginTop={1}>
|
|
<Text>{selectedPlugin.entry.description}</Text>
|
|
</Box>
|
|
)}
|
|
{selectedPlugin.entry.author && (
|
|
<Box marginTop={1}>
|
|
<Text dimColor>
|
|
By:{' '}
|
|
{typeof selectedPlugin.entry.author === 'string'
|
|
? selectedPlugin.entry.author
|
|
: selectedPlugin.entry.author.name}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
{/* What will be installed */}
|
|
<Box flexDirection="column" marginBottom={1}>
|
|
<Text bold>Will install:</Text>
|
|
{selectedPlugin.entry.commands && (
|
|
<Text dimColor>
|
|
· Commands:{' '}
|
|
{Array.isArray(selectedPlugin.entry.commands)
|
|
? selectedPlugin.entry.commands.join(', ')
|
|
: Object.keys(selectedPlugin.entry.commands).join(', ')}
|
|
</Text>
|
|
)}
|
|
{selectedPlugin.entry.agents && (
|
|
<Text dimColor>
|
|
· Agents:{' '}
|
|
{Array.isArray(selectedPlugin.entry.agents)
|
|
? selectedPlugin.entry.agents.join(', ')
|
|
: Object.keys(selectedPlugin.entry.agents).join(', ')}
|
|
</Text>
|
|
)}
|
|
{selectedPlugin.entry.hooks && (
|
|
<Text dimColor>
|
|
· Hooks: {Object.keys(selectedPlugin.entry.hooks).join(', ')}
|
|
</Text>
|
|
)}
|
|
{selectedPlugin.entry.mcpServers && (
|
|
<Text dimColor>
|
|
· MCP Servers:{' '}
|
|
{Array.isArray(selectedPlugin.entry.mcpServers)
|
|
? selectedPlugin.entry.mcpServers.join(', ')
|
|
: typeof selectedPlugin.entry.mcpServers === 'object'
|
|
? Object.keys(selectedPlugin.entry.mcpServers).join(', ')
|
|
: 'configured'}
|
|
</Text>
|
|
)}
|
|
{!selectedPlugin.entry.commands &&
|
|
!selectedPlugin.entry.agents &&
|
|
!selectedPlugin.entry.hooks &&
|
|
!selectedPlugin.entry.mcpServers && (
|
|
<>
|
|
{typeof selectedPlugin.entry.source === 'object' &&
|
|
'source' in selectedPlugin.entry.source &&
|
|
(selectedPlugin.entry.source.source === 'github' ||
|
|
selectedPlugin.entry.source.source === 'url' ||
|
|
selectedPlugin.entry.source.source === 'npm' ||
|
|
selectedPlugin.entry.source.source === 'pip') ? (
|
|
<Text dimColor>
|
|
· Component summary not available for remote plugin
|
|
</Text>
|
|
) : (
|
|
// TODO: Actually scan local plugin directories to show real components
|
|
// This would require accessing the filesystem to check for:
|
|
// - commands/ directory and list files
|
|
// - agents/ directory and list files
|
|
// - hooks/ directory and list files
|
|
// - .mcp.json or mcp-servers.json files
|
|
<Text dimColor>
|
|
· Components will be discovered at installation
|
|
</Text>
|
|
)}
|
|
</>
|
|
)}
|
|
</Box>
|
|
|
|
<PluginTrustWarning />
|
|
|
|
{/* Error message */}
|
|
{installError && (
|
|
<Box marginBottom={1}>
|
|
<Text color="error">Error: {installError}</Text>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Menu options */}
|
|
<Box flexDirection="column">
|
|
{menuOptions.map((option, index) => (
|
|
<Box key={option.action}>
|
|
{detailsMenuIndex === index && <Text>{'> '}</Text>}
|
|
{detailsMenuIndex !== index && <Text>{' '}</Text>}
|
|
<Text bold={detailsMenuIndex === index}>
|
|
{isInstalling && option.action === 'install'
|
|
? 'Installing…'
|
|
: option.label}
|
|
</Text>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
|
|
<Box marginTop={1} paddingLeft={1}>
|
|
<Text dimColor>
|
|
<Byline>
|
|
<ConfigurableShortcutHint
|
|
action="select:accept"
|
|
context="Select"
|
|
fallback="Enter"
|
|
description="select"
|
|
/>
|
|
<ConfigurableShortcutHint
|
|
action="confirm:no"
|
|
context="Confirmation"
|
|
fallback="Esc"
|
|
description="back"
|
|
/>
|
|
</Byline>
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
// Plugin installation view
|
|
if (availablePlugins.length === 0) {
|
|
return (
|
|
<Box flexDirection="column">
|
|
<Box marginBottom={1}>
|
|
<Text bold>Install plugins</Text>
|
|
</Box>
|
|
<Text dimColor>No new plugins available to install.</Text>
|
|
<Text dimColor>
|
|
All plugins from this marketplace are already installed.
|
|
</Text>
|
|
<Box marginLeft={3}>
|
|
<Text dimColor italic>
|
|
<ConfigurableShortcutHint
|
|
action="confirm:no"
|
|
context="Confirmation"
|
|
fallback="Esc"
|
|
description="go back"
|
|
/>
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
// Get visible plugins from pagination
|
|
const visiblePlugins = pagination.getVisibleItems(availablePlugins)
|
|
|
|
return (
|
|
<Box flexDirection="column">
|
|
<Box marginBottom={1}>
|
|
<Text bold>Install Plugins</Text>
|
|
</Box>
|
|
|
|
{/* Scroll up indicator */}
|
|
{pagination.scrollPosition.canScrollUp && (
|
|
<Box>
|
|
<Text dimColor> {figures.arrowUp} more above</Text>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Plugin list */}
|
|
{visiblePlugins.map((plugin, visibleIndex) => {
|
|
const actualIndex = pagination.toActualIndex(visibleIndex)
|
|
const isSelected = selectedIndex === actualIndex
|
|
const isSelectedForInstall = selectedForInstall.has(plugin.pluginId)
|
|
const isInstalling = installingPlugins.has(plugin.pluginId)
|
|
const isLast = visibleIndex === visiblePlugins.length - 1
|
|
|
|
return (
|
|
<Box
|
|
key={plugin.pluginId}
|
|
flexDirection="column"
|
|
marginBottom={isLast && !error ? 0 : 1}
|
|
>
|
|
<Box>
|
|
<Text color={isSelected ? 'suggestion' : undefined}>
|
|
{isSelected ? figures.pointer : ' '}{' '}
|
|
</Text>
|
|
<Text color={plugin.isInstalled ? 'success' : undefined}>
|
|
{plugin.isInstalled
|
|
? figures.tick
|
|
: isInstalling
|
|
? figures.ellipsis
|
|
: isSelectedForInstall
|
|
? figures.radioOn
|
|
: figures.radioOff}{' '}
|
|
{plugin.entry.name}
|
|
{plugin.entry.category && (
|
|
<Text dimColor> [{plugin.entry.category}]</Text>
|
|
)}
|
|
{plugin.entry.tags?.includes('community-managed') && (
|
|
<Text dimColor> [Community Managed]</Text>
|
|
)}
|
|
{plugin.isInstalled && <Text dimColor> (installed)</Text>}
|
|
{installCounts &&
|
|
selectedMarketplace === OFFICIAL_MARKETPLACE_NAME && (
|
|
<Text dimColor>
|
|
{' · '}
|
|
{formatInstallCount(
|
|
installCounts.get(plugin.pluginId) ?? 0,
|
|
)}{' '}
|
|
installs
|
|
</Text>
|
|
)}
|
|
</Text>
|
|
</Box>
|
|
{plugin.entry.description && (
|
|
<Box marginLeft={4}>
|
|
<Text dimColor>
|
|
{truncateToWidth(plugin.entry.description, 60)}
|
|
</Text>
|
|
{plugin.entry.version && (
|
|
<Text dimColor> · v{plugin.entry.version}</Text>
|
|
)}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
)
|
|
})}
|
|
|
|
{/* Scroll down indicator */}
|
|
{pagination.scrollPosition.canScrollDown && (
|
|
<Box>
|
|
<Text dimColor> {figures.arrowDown} more below</Text>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Error messages shown in the UI */}
|
|
{error && (
|
|
<Box marginTop={1}>
|
|
<Text color="error">
|
|
{figures.cross} {error}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
|
|
<PluginSelectionKeyHint hasSelection={selectedForInstall.size > 0} />
|
|
</Box>
|
|
)
|
|
}
|