423 lines
15 KiB
TypeScript
423 lines
15 KiB
TypeScript
/**
|
|
* PluginsPanel — search, filter, sort and browse the plugin catalog.
|
|
*/
|
|
|
|
import { useEffect, useMemo } from 'react';
|
|
|
|
import { Badge } from '@renderer/components/ui/badge';
|
|
import { Button } from '@renderer/components/ui/button';
|
|
import { Checkbox } from '@renderer/components/ui/checkbox';
|
|
import { Label } from '@renderer/components/ui/label';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@renderer/components/ui/select';
|
|
import { useStore } from '@renderer/store';
|
|
import { getCliProviderExtensionCapability } from '@shared/utils/providerExtensionCapabilities';
|
|
import { inferCapabilities, normalizeCategory } from '@shared/utils/extensionNormalizers';
|
|
import { ArrowUpDown, Filter, Puzzle, Search } from 'lucide-react';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
|
|
import { SearchInput } from '../common/SearchInput';
|
|
|
|
import { CapabilityChips } from './CapabilityChips';
|
|
import { CategoryChips } from './CategoryChips';
|
|
import { PluginCard } from './PluginCard';
|
|
import { PluginDetailDialog } from './PluginDetailDialog';
|
|
|
|
import type {
|
|
EnrichedPlugin,
|
|
PluginCapability,
|
|
PluginFilters,
|
|
PluginSortField,
|
|
} from '@shared/types/extensions';
|
|
|
|
interface PluginsPanelProps {
|
|
projectPath: string | null;
|
|
pluginFilters: PluginFilters;
|
|
pluginSort: { field: PluginSortField; order: 'asc' | 'desc' };
|
|
selectedPluginId: string | null;
|
|
updatePluginSearch: (search: string) => void;
|
|
toggleCategory: (category: string) => void;
|
|
toggleCapability: (capability: PluginCapability) => void;
|
|
toggleInstalledOnly: () => void;
|
|
setSelectedPluginId: (id: string | null) => void;
|
|
clearFilters: () => void;
|
|
hasActiveFilters: boolean;
|
|
setPluginSort: (sort: { field: PluginSortField; order: 'asc' | 'desc' }) => void;
|
|
}
|
|
|
|
const SORT_OPTIONS: { value: string; label: string }[] = [
|
|
{ value: 'popularity:desc', label: 'Popular' },
|
|
{ value: 'name:asc', label: 'Name A-Z' },
|
|
{ value: 'name:desc', label: 'Name Z-A' },
|
|
{ value: 'category:asc', label: 'Category' },
|
|
];
|
|
|
|
/** Pure function: filter + sort the catalog */
|
|
function selectFilteredPlugins(
|
|
catalog: EnrichedPlugin[],
|
|
filters: PluginFilters,
|
|
sort: { field: PluginSortField; order: 'asc' | 'desc' }
|
|
): EnrichedPlugin[] {
|
|
let result = catalog;
|
|
|
|
// Search
|
|
if (filters.search) {
|
|
const q = filters.search.toLowerCase();
|
|
result = result.filter(
|
|
(p) =>
|
|
p.name.toLowerCase().includes(q) ||
|
|
p.description.toLowerCase().includes(q) ||
|
|
p.pluginId.toLowerCase().includes(q)
|
|
);
|
|
}
|
|
|
|
// Categories
|
|
if (filters.categories.length > 0) {
|
|
result = result.filter((p) => filters.categories.includes(normalizeCategory(p.category)));
|
|
}
|
|
|
|
// Capabilities
|
|
if (filters.capabilities.length > 0) {
|
|
result = result.filter((p) => {
|
|
const caps = inferCapabilities(p);
|
|
return filters.capabilities.some((fc) => caps.includes(fc));
|
|
});
|
|
}
|
|
|
|
// Installed only
|
|
if (filters.installedOnly) {
|
|
result = result.filter((p) => p.isInstalled);
|
|
}
|
|
|
|
// Sort
|
|
const direction = sort.order === 'asc' ? 1 : -1;
|
|
result = [...result].sort((a, b) => {
|
|
switch (sort.field) {
|
|
case 'popularity':
|
|
return (a.installCount - b.installCount) * direction;
|
|
case 'name':
|
|
return a.name.localeCompare(b.name) * direction;
|
|
case 'category':
|
|
return a.category.localeCompare(b.category) * direction;
|
|
default:
|
|
return 0;
|
|
}
|
|
});
|
|
|
|
return result;
|
|
}
|
|
|
|
export const PluginsPanel = ({
|
|
projectPath,
|
|
pluginFilters,
|
|
pluginSort,
|
|
selectedPluginId,
|
|
updatePluginSearch,
|
|
toggleCategory,
|
|
toggleCapability,
|
|
toggleInstalledOnly,
|
|
setSelectedPluginId,
|
|
clearFilters,
|
|
hasActiveFilters,
|
|
setPluginSort,
|
|
}: PluginsPanelProps): React.JSX.Element => {
|
|
const { catalog, loading, error, cliStatus } = useStore(
|
|
useShallow((s) => ({
|
|
catalog: s.pluginCatalog,
|
|
loading: s.pluginCatalogLoading,
|
|
error: s.pluginCatalogError,
|
|
cliStatus: s.cliStatus,
|
|
}))
|
|
);
|
|
|
|
const filtered = useMemo(
|
|
() => selectFilteredPlugins(catalog, pluginFilters, pluginSort),
|
|
[catalog, pluginFilters, pluginSort]
|
|
);
|
|
|
|
const selectedPlugin = useMemo(
|
|
() =>
|
|
selectedPluginId ? (catalog.find((p) => p.pluginId === selectedPluginId) ?? null) : null,
|
|
[catalog, selectedPluginId]
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (selectedPluginId && !loading && !selectedPlugin) {
|
|
setSelectedPluginId(null);
|
|
}
|
|
}, [loading, selectedPlugin, selectedPluginId, setSelectedPluginId]);
|
|
|
|
useEffect(() => {
|
|
if (error && selectedPluginId) {
|
|
setSelectedPluginId(null);
|
|
}
|
|
}, [error, selectedPluginId, setSelectedPluginId]);
|
|
|
|
const sortValue = `${pluginSort.field}:${pluginSort.order}`;
|
|
const activeFilterCount =
|
|
pluginFilters.categories.length +
|
|
pluginFilters.capabilities.length +
|
|
(pluginFilters.installedOnly ? 1 : 0) +
|
|
(pluginFilters.search ? 1 : 0);
|
|
const totalCategoryCount = useMemo(
|
|
() => new Set(catalog.map((plugin) => normalizeCategory(plugin.category))).size,
|
|
[catalog]
|
|
);
|
|
const totalCapabilityCount = useMemo(() => {
|
|
const counts = new Set<PluginCapability>();
|
|
for (const plugin of catalog) {
|
|
for (const capability of inferCapabilities(plugin)) {
|
|
counts.add(capability);
|
|
}
|
|
}
|
|
return counts.size;
|
|
}, [catalog]);
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
{cliStatus?.flavor === 'agent_teams_orchestrator' &&
|
|
(() => {
|
|
const codexProvider = cliStatus.providers.find(
|
|
(provider) => provider.providerId === 'codex'
|
|
);
|
|
if (!codexProvider) return null;
|
|
const capability = getCliProviderExtensionCapability(codexProvider, 'plugins');
|
|
if (capability.status === 'supported') {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-md border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm text-amber-300">
|
|
Plugins currently apply to Anthropic sessions in the multimodel runtime.
|
|
{capability.reason ? ` ${capability.reason}` : ''}
|
|
</div>
|
|
);
|
|
})()}
|
|
{/* Search + Sort + Installed only row */}
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-center">
|
|
<div className="flex-1">
|
|
<SearchInput
|
|
value={pluginFilters.search}
|
|
onChange={updatePluginSearch}
|
|
placeholder="Search plugins..."
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
|
<Select
|
|
value={sortValue}
|
|
onValueChange={(v) => {
|
|
const [field, order] = v.split(':') as [PluginSortField, 'asc' | 'desc'];
|
|
setPluginSort({ field, order });
|
|
}}
|
|
>
|
|
<SelectTrigger className="w-full gap-2 sm:w-40">
|
|
<ArrowUpDown className="size-3.5 shrink-0 text-text-muted" />
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{SORT_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Label
|
|
htmlFor="installed-only"
|
|
className="bg-surface-raised/40 flex h-10 cursor-pointer items-center gap-2 rounded-lg border border-border px-3 text-xs text-text-secondary transition-colors hover:border-border-emphasis hover:text-text"
|
|
>
|
|
<Checkbox
|
|
id="installed-only"
|
|
checked={pluginFilters.installedOnly}
|
|
onCheckedChange={toggleInstalledOnly}
|
|
/>
|
|
Installed only
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="bg-surface-raised/20 rounded-xl p-4">
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<div className="bg-surface-raised/60 flex size-8 items-center justify-center rounded-lg border border-border">
|
|
<Filter className="size-4 text-text-muted" />
|
|
</div>
|
|
<div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h2 className="text-sm font-semibold text-text">Browse by fit</h2>
|
|
<Badge variant="outline" className="text-[11px] text-text-muted">
|
|
{activeFilterCount} active
|
|
</Badge>
|
|
</div>
|
|
<p className="text-xs text-text-muted">
|
|
Narrow the catalog by category, capability, or installed state.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 text-[11px] text-text-muted">
|
|
<Badge variant="secondary" className="font-normal">
|
|
{catalog.length} plugins
|
|
</Badge>
|
|
<Badge variant="secondary" className="font-normal">
|
|
{totalCategoryCount} categories
|
|
</Badge>
|
|
<Badge variant="secondary" className="font-normal">
|
|
{totalCapabilityCount} capabilities
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
{hasActiveFilters && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={clearFilters}
|
|
className="justify-start rounded-lg border border-border px-3 text-xs text-text-secondary hover:text-text lg:justify-center"
|
|
>
|
|
Clear all filters
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="overflow-hidden rounded-lg border border-border bg-transparent">
|
|
<div className="grid gap-0 xl:grid-cols-2">
|
|
<section className="space-y-3 p-3 xl:border-r xl:border-border">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-text-muted">
|
|
Categories
|
|
</span>
|
|
<span className="text-[11px] text-text-muted">
|
|
{pluginFilters.categories.length} selected
|
|
</span>
|
|
</div>
|
|
<CategoryChips
|
|
plugins={catalog}
|
|
selected={pluginFilters.categories}
|
|
onToggle={toggleCategory}
|
|
/>
|
|
</section>
|
|
|
|
<section className="space-y-3 border-t border-border p-3 xl:border-t-0">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-text-muted">
|
|
Capabilities
|
|
</span>
|
|
<span className="text-[11px] text-text-muted">
|
|
{pluginFilters.capabilities.length} selected
|
|
</span>
|
|
</div>
|
|
<CapabilityChips
|
|
plugins={catalog}
|
|
selected={pluginFilters.capabilities}
|
|
onToggle={toggleCapability}
|
|
/>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Result count */}
|
|
{!loading && !error && filtered.length > 0 && (
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<p className="text-xs text-text-muted">
|
|
Showing {filtered.length} of {catalog.length} plugin{catalog.length !== 1 ? 's' : ''}
|
|
</p>
|
|
{hasActiveFilters && (
|
|
<p className="text-xs text-text-muted">
|
|
Results update instantly as you refine filters.
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Content */}
|
|
{loading && (
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
|
{Array.from({ length: 6 }, (_, i) => (
|
|
<div
|
|
key={i}
|
|
className="skeleton-card flex flex-col gap-2 rounded-lg border border-border p-4"
|
|
style={{ animationDelay: `${i * 80}ms` }}
|
|
>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="h-4 w-32 rounded bg-surface-raised" />
|
|
<div className="h-5 w-16 rounded-full bg-surface-raised" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<div className="h-3 w-full rounded bg-surface-raised" />
|
|
<div className="h-3 w-3/4 rounded bg-surface-raised" />
|
|
</div>
|
|
<div className="flex gap-1.5">
|
|
<div className="h-5 w-14 rounded-full bg-surface-raised" />
|
|
<div className="h-5 w-12 rounded-full bg-surface-raised" />
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="h-3 w-24 rounded bg-surface-raised" />
|
|
<div className="h-7 w-16 rounded bg-surface-raised" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="rounded-md border border-red-500/30 bg-red-500/5 p-4 text-sm text-red-400">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && filtered.length === 0 && (
|
|
<div className="flex flex-col items-center gap-3 rounded-sm border border-dashed border-border px-8 py-16">
|
|
<div className="flex size-10 items-center justify-center rounded-lg border border-border bg-surface-raised">
|
|
{hasActiveFilters ? (
|
|
<Search className="size-5 text-text-muted" />
|
|
) : (
|
|
<Puzzle className="size-5 text-text-muted" />
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-text-secondary">
|
|
{hasActiveFilters ? 'No plugins match your filters' : 'No plugins available'}
|
|
</p>
|
|
<p className="text-xs text-text-muted">
|
|
{hasActiveFilters
|
|
? 'Try adjusting your search or filter criteria'
|
|
: 'Check back later for new plugins'}
|
|
</p>
|
|
{hasActiveFilters && (
|
|
<Button variant="outline" size="sm" onClick={clearFilters}>
|
|
Clear filters
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && filtered.length > 0 && (
|
|
<div className="plugins-grid grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
|
{filtered.map((plugin, index) => (
|
|
<PluginCard
|
|
key={plugin.pluginId}
|
|
plugin={plugin}
|
|
index={index}
|
|
onClick={setSelectedPluginId}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Detail dialog */}
|
|
<PluginDetailDialog
|
|
plugin={selectedPlugin}
|
|
open={selectedPluginId !== null}
|
|
onClose={() => setSelectedPluginId(null)}
|
|
projectPath={projectPath}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|