@shipit-ai/cli 1.169.0 → 1.170.0-pr13.d3605b0

package/dist/src/presentation/web/components/common/repository-node/repository-drawer.stories.js

@@ -57,6 +57,7 @@ function WithGitOpsTemplate({ data }) {
         adoptBranch: true,
         gitRebaseSync: true,
         reactFileManager: true,
+        plugins: true,
     };
     return (_jsx(FeatureFlagsProvider, { flags: allEnabledFlags, children: _jsxs("div", { style: { height: '100vh', background: '#f8fafc', padding: '2rem' }, children: [_jsx("button", { type: "button", onClick: () => setSelected(data), style: { padding: '8px 16px', border: '1px solid #ccc', borderRadius: '6px' }, children: "Open Drawer" }), _jsx(RepositoryDrawer, { data: selected, onClose: () => setSelected(null) })] }) }));
 }

package/dist/src/presentation/web/components/features/plugins/plugin-card.d.ts

@@ -0,0 +1,9 @@
+import type { PluginMarketplaceEntry, InstalledPlugin } from '../../../../../../packages/core/src/application/ports/output/services/plugin-marketplace.interface.js';
+export interface PluginCardProps {
+    plugin: PluginMarketplaceEntry;
+    installed?: InstalledPlugin;
+    onSelect: (plugin: PluginMarketplaceEntry) => void;
+    onToggle?: (pluginName: string, enabled: boolean) => void;
+}
+export declare function PluginCard({ plugin, installed, onSelect, onToggle }: PluginCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=plugin-card.d.ts.map

package/dist/src/presentation/web/components/features/plugins/plugin-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-card.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/plugins/plugin-card.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,sBAAsB,EACtB,eAAe,EAChB,MAAM,gFAAgF,CAAC;AAGxF,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,QAAQ,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3D;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,eAAe,2CA0DpF"}

package/dist/src/presentation/web/components/features/plugins/plugin-card.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from '../../ui/card.js';
+import { Badge } from '../../ui/badge.js';
+import { Switch } from '../../ui/switch.js';
+import { useTranslation } from 'react-i18next';
+export function PluginCard({ plugin, installed, onSelect, onToggle }) {
+    const { t } = useTranslation('web');
+    return (_jsxs(Card, { className: "cursor-pointer p-5 transition-all duration-300 hover:scale-[1.02] hover:shadow-md hover:ring-slate-300 dark:hover:ring-slate-600", role: "button", tabIndex: 0, onClick: () => onSelect(plugin), onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onSelect(plugin);
+            }
+        }, "data-testid": `plugin-card-${plugin.name}`, children: [_jsx("h3", { className: "text-foreground text-sm leading-tight font-bold tracking-tight", children: plugin.name }), plugin.version ? (_jsxs("p", { className: "text-muted-foreground mt-1 font-mono text-xs", children: ["v", plugin.version] })) : null, _jsx("p", { className: "text-muted-foreground mt-3 line-clamp-2 text-xs leading-relaxed", children: plugin.description }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-1.5", children: [plugin.category ? _jsx(Badge, { variant: "outline", children: plugin.category }) : null, installed ? (_jsx(Badge, { variant: "secondary", children: t('plugins.installed') })) : (_jsx(Badge, { variant: "outline", className: "opacity-50", children: t('plugins.notInstalled') }))] }), installed ? (_jsxs("div", { className: "mt-3 flex items-center gap-2", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: [_jsx(Switch, { checked: installed.enabled, onCheckedChange: (checked) => onToggle?.(plugin.name, checked), "data-testid": `plugin-toggle-${plugin.name}` }), _jsx("span", { className: "text-muted-foreground text-xs", children: installed.enabled ? t('plugins.disable') : t('plugins.enable') })] })) : null] }));
+}

package/dist/src/presentation/web/components/features/plugins/plugin-card.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { PluginCard } from './plugin-card.js';
+declare const meta: {
+    title: string;
+    component: typeof PluginCard;
+    args: {
+        onSelect: () => undefined;
+        onToggle: () => undefined;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Installed: Story;
+export declare const NotInstalled: Story;
+export declare const LongDescription: Story;
+//# sourceMappingURL=plugin-card.stories.d.ts.map

package/dist/src/presentation/web/components/features/plugins/plugin-card.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-card.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/plugins/plugin-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,QAAA,MAAM,IAAI;;;;;;;CAOyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC"}

package/dist/src/presentation/web/components/features/plugins/plugin-card.stories.js

@@ -0,0 +1,60 @@
+import { PluginCard } from './plugin-card.js';
+const meta = {
+    title: 'Features/Plugins/PluginCard',
+    component: PluginCard,
+    args: {
+        onSelect: () => undefined,
+        onToggle: () => undefined,
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        plugin: {
+            name: 'superpowers',
+            description: 'Advanced Claude Code skills and workflow automation for power users',
+            version: '2.1.0',
+            source: { source: 'github', repo: 'anthropics/superpowers' },
+            category: 'productivity',
+            keywords: ['automation', 'workflows'],
+        },
+    },
+};
+export const Installed = {
+    args: {
+        plugin: {
+            name: 'code-review-graph',
+            description: 'Build knowledge graphs for intelligent code review with structural analysis',
+            version: '1.5.0',
+            source: { source: 'github', repo: 'anthropics/code-review-graph' },
+            category: 'code-quality',
+        },
+        installed: {
+            id: 'code-review-graph@claude-plugins-official',
+            scope: 'user',
+            version: '1.5.0',
+            enabled: true,
+        },
+    },
+};
+export const NotInstalled = {
+    args: {
+        plugin: {
+            name: 'hookify',
+            description: 'Create hooks to prevent unwanted AI behaviors',
+            version: '1.0.0',
+            source: { source: 'github', repo: 'anthropics/hookify' },
+            category: 'productivity',
+        },
+    },
+};
+export const LongDescription = {
+    args: {
+        plugin: {
+            name: 'very-long-description-plugin',
+            description: 'This plugin has a very long description that should be truncated by the line-clamp CSS utility class. '.repeat(5),
+            version: '0.1.0',
+            source: { source: 'url', url: 'https://github.com/org/plugin.git' },
+        },
+    },
+};

package/dist/src/presentation/web/components/features/plugins/plugin-detail-drawer.d.ts

@@ -0,0 +1,11 @@
+import type { PluginMarketplaceEntry, InstalledPlugin } from '../../../../../../packages/core/src/application/ports/output/services/plugin-marketplace.interface.js';
+export interface PluginDetailDrawerProps {
+    plugin: PluginMarketplaceEntry | null;
+    installed?: InstalledPlugin;
+    open: boolean;
+    onClose: () => void;
+    onInstall?: (pluginName: string) => void;
+    onUninstall?: (pluginName: string) => void;
+}
+export declare function PluginDetailDrawer({ plugin, installed, open, onClose, onInstall, onUninstall, }: PluginDetailDrawerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=plugin-detail-drawer.d.ts.map

package/dist/src/presentation/web/components/features/plugins/plugin-detail-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-detail-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/plugins/plugin-detail-drawer.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,sBAAsB,EACtB,eAAe,EAChB,MAAM,gFAAgF,CAAC;AAExF,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAkBD,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,SAAS,EACT,IAAI,EACJ,OAAO,EACP,SAAS,EACT,WAAW,GACZ,EAAE,uBAAuB,kDAmFzB"}

package/dist/src/presentation/web/components/features/plugins/plugin-detail-drawer.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BaseDrawer } from '../../common/base-drawer/index.js';
+import { DrawerTitle, DrawerDescription } from '../../ui/drawer.js';
+import { Badge } from '../../ui/badge.js';
+import { Button } from '../../ui/button.js';
+import { Separator } from '../../ui/separator.js';
+import { ExternalLink } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+function getSourceUrl(plugin) {
+    const { source } = plugin;
+    if (source.source === 'github' && source.repo) {
+        return `https://github.com/${source.repo}`;
+    }
+    if ((source.source === 'url' || source.source === 'git-subdir') && source.url) {
+        try {
+            const url = new URL(source.url);
+            if (url.protocol === 'https:')
+                return source.url;
+        }
+        catch {
+            // Invalid URL — don't render as link
+        }
+    }
+    return null;
+}
+export function PluginDetailDrawer({ plugin, installed, open, onClose, onInstall, onUninstall, }) {
+    const { t } = useTranslation('web');
+    if (!plugin)
+        return null;
+    const sourceUrl = getSourceUrl(plugin);
+    return (_jsxs(BaseDrawer, { open: open, onClose: onClose, children: [_jsx(DrawerTitle, { className: "text-foreground text-lg font-bold tracking-tight", children: plugin.name }), _jsx(DrawerDescription, { className: "text-muted-foreground mt-1 text-sm", children: plugin.description }), _jsx(Separator, { className: "my-4" }), _jsxs("div", { className: "space-y-3", children: [plugin.version ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-sm", children: t('plugins.version') }), _jsxs("span", { className: "font-mono text-sm", children: ["v", plugin.version] })] })) : null, plugin.category ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-sm", children: t('plugins.category') }), _jsx(Badge, { variant: "outline", children: plugin.category })] })) : null, sourceUrl ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-sm", children: t('plugins.source') }), _jsxs("a", { href: sourceUrl, target: "_blank", rel: "noopener noreferrer", className: "text-primary hover:text-primary/80 inline-flex items-center gap-1 text-sm underline underline-offset-2", children: [plugin.source.repo ?? 'Repository', _jsx(ExternalLink, { className: "size-3" })] })] })) : null, plugin.keywords && plugin.keywords.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-1.5 pt-2", children: plugin.keywords.map((kw) => (_jsx(Badge, { variant: "outline", className: "text-xs", children: kw }, kw))) })) : null] }), _jsx(Separator, { className: "my-4" }), _jsx("div", { className: "flex gap-2", children: installed ? (_jsx(Button, { variant: "destructive", size: "sm", onClick: () => onUninstall?.(plugin.name), "data-testid": "plugin-uninstall-button", children: t('plugins.uninstall') })) : (_jsx(Button, { size: "sm", onClick: () => onInstall?.(plugin.name), "data-testid": "plugin-install-button", children: t('plugins.install') })) })] }));
+}

package/dist/src/presentation/web/components/features/plugins/plugin-detail-drawer.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { PluginDetailDrawer } from './plugin-detail-drawer.js';
+declare const meta: {
+    title: string;
+    component: typeof PluginDetailDrawer;
+    args: {
+        open: true;
+        onClose: () => undefined;
+        onInstall: () => undefined;
+        onUninstall: () => undefined;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Installed: Story;
+export declare const NoSource: Story;
+//# sourceMappingURL=plugin-detail-drawer.stories.d.ts.map

package/dist/src/presentation/web/components/features/plugins/plugin-detail-drawer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-detail-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/plugins/plugin-detail-drawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,QAAA,MAAM,IAAI;;;;;;;;;CASiC,CAAC;AAE5C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC"}

package/dist/src/presentation/web/components/features/plugins/plugin-detail-drawer.stories.js

@@ -0,0 +1,51 @@
+import { PluginDetailDrawer } from './plugin-detail-drawer.js';
+const meta = {
+    title: 'Features/Plugins/PluginDetailDrawer',
+    component: PluginDetailDrawer,
+    args: {
+        open: true,
+        onClose: () => undefined,
+        onInstall: () => undefined,
+        onUninstall: () => undefined,
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        plugin: {
+            name: 'superpowers',
+            description: 'Advanced Claude Code skills and workflow automation for power users',
+            version: '2.1.0',
+            source: { source: 'github', repo: 'anthropics/superpowers' },
+            category: 'productivity',
+            keywords: ['automation', 'workflows', 'skills'],
+        },
+    },
+};
+export const Installed = {
+    args: {
+        plugin: {
+            name: 'code-review-graph',
+            description: 'Build knowledge graphs for intelligent code review',
+            version: '1.5.0',
+            source: { source: 'github', repo: 'anthropics/code-review-graph' },
+            category: 'code-quality',
+            keywords: ['review', 'graph', 'analysis'],
+        },
+        installed: {
+            id: 'code-review-graph@claude-plugins-official',
+            scope: 'user',
+            version: '1.5.0',
+            enabled: true,
+        },
+    },
+};
+export const NoSource = {
+    args: {
+        plugin: {
+            name: 'mystery-plugin',
+            description: 'A plugin with no source URL information',
+            source: { source: 'github' },
+        },
+    },
+};

package/dist/src/presentation/web/components/features/plugins/plugins-page-client.d.ts

@@ -0,0 +1,6 @@
+export interface PluginsPageClientProps {
+    proxyConfigured: boolean;
+    isClaudeCode: boolean;
+}
+export declare function PluginsPageClient({ proxyConfigured, isClaudeCode }: PluginsPageClientProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=plugins-page-client.d.ts.map

package/dist/src/presentation/web/components/features/plugins/plugins-page-client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugins-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/plugins/plugins-page-client.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,sBAAsB;IACrC,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,eAAe,EAAE,YAAY,EAAE,EAAE,sBAAsB,2CAiP1F"}

package/dist/src/presentation/web/components/features/plugins/plugins-page-client.js

@@ -0,0 +1,124 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, useTransition } from 'react';
+import { Search, Blocks, AlertCircle } from 'lucide-react';
+import { toast } from 'sonner';
+import { Input } from '../../ui/input.js';
+import { Button } from '../../ui/button.js';
+import { PageHeader } from '../../common/page-header/index.js';
+import { EmptyState } from '../../common/empty-state/index.js';
+import { PluginCard } from './plugin-card.js';
+import { PluginDetailDrawer } from './plugin-detail-drawer.js';
+import { useTranslation } from 'react-i18next';
+import { fetchPluginCatalogAction } from '../../../app/actions/fetch-plugin-catalog.js';
+import { installPluginAction } from '../../../app/actions/install-plugin.js';
+import { uninstallPluginAction } from '../../../app/actions/uninstall-plugin.js';
+import { togglePluginAction } from '../../../app/actions/toggle-plugin.js';
+export function PluginsPageClient({ proxyConfigured, isClaudeCode }) {
+    const { t } = useTranslation('web');
+    const [, startTransition] = useTransition();
+    const [searchQuery, setSearchQuery] = useState('');
+    const [activeCategory, setActiveCategory] = useState(null);
+    const [statusFilter, setStatusFilter] = useState(null);
+    const [selectedPlugin, setSelectedPlugin] = useState(null);
+    const [plugins, setPlugins] = useState([]);
+    const [installedPlugins, setInstalledPlugins] = useState([]);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        if (!proxyConfigured) {
+            setLoading(false);
+            return;
+        }
+        fetchPluginCatalogAction().then((result) => {
+            setPlugins(result.plugins);
+            setInstalledPlugins(result.installedPlugins);
+            setLoading(false);
+        });
+    }, [proxyConfigured]);
+    const categories = useMemo(() => {
+        const cats = new Set();
+        for (const p of plugins) {
+            if (p.category)
+                cats.add(p.category);
+        }
+        return Array.from(cats).sort();
+    }, [plugins]);
+    const filteredPlugins = useMemo(() => {
+        const query = searchQuery.toLowerCase();
+        return plugins.filter((p) => {
+            if (activeCategory && p.category !== activeCategory)
+                return false;
+            if (statusFilter) {
+                const isInstalled = !!installedPlugins.find((ip) => ip.id.startsWith(`${p.name}@`));
+                if (statusFilter === 'installed' && !isInstalled)
+                    return false;
+                if (statusFilter === 'not-installed' && isInstalled)
+                    return false;
+            }
+            if (query) {
+                const matchesName = p.name.toLowerCase().includes(query);
+                const matchesDescription = p.description.toLowerCase().includes(query);
+                if (!matchesName && !matchesDescription)
+                    return false;
+            }
+            return true;
+        });
+    }, [plugins, searchQuery, activeCategory, statusFilter, installedPlugins]);
+    const getInstalled = (pluginName) => installedPlugins.find((ip) => ip.id.startsWith(`${pluginName}@`));
+    const handleInstall = (pluginName) => {
+        startTransition(async () => {
+            const result = await installPluginAction(pluginName, 'default');
+            if (result.success) {
+                toast.success(`${pluginName} installed`);
+                const catalog = await fetchPluginCatalogAction();
+                setInstalledPlugins(catalog.installedPlugins);
+            }
+            else {
+                toast.error(result.error ?? 'Installation failed');
+            }
+        });
+    };
+    const handleUninstall = (pluginName) => {
+        startTransition(async () => {
+            const result = await uninstallPluginAction(pluginName, 'default');
+            if (result.success) {
+                toast.success(`${pluginName} uninstalled`);
+                const catalog = await fetchPluginCatalogAction();
+                setInstalledPlugins(catalog.installedPlugins);
+            }
+            else {
+                toast.error(result.error ?? 'Uninstallation failed');
+            }
+        });
+    };
+    const handleToggle = (pluginName, enabled) => {
+        startTransition(async () => {
+            const result = await togglePluginAction(pluginName, 'default', enabled);
+            if (result.success) {
+                toast.success(`${pluginName} ${enabled ? 'enabled' : 'disabled'}`);
+                const catalog = await fetchPluginCatalogAction();
+                setInstalledPlugins(catalog.installedPlugins);
+            }
+            else {
+                toast.error(result.error ?? 'Toggle failed');
+            }
+        });
+    };
+    if (!isClaudeCode) {
+        return (_jsxs("div", { className: "flex flex-col gap-8 p-8", children: [_jsx(PageHeader, { eyebrow: "Developer Portal", title: t('plugins.title') }), _jsx(EmptyState, { icon: _jsx(AlertCircle, { className: "size-10" }), title: t('plugins.wrongAgent') })] }));
+    }
+    if (!proxyConfigured) {
+        return (_jsxs("div", { className: "flex flex-col gap-8 p-8", children: [_jsx(PageHeader, { eyebrow: "Developer Portal", title: t('plugins.title') }), _jsx(EmptyState, { icon: _jsx(AlertCircle, { className: "size-10" }), title: t('plugins.noProxy') })] }));
+    }
+    if (loading) {
+        return (_jsxs("div", { className: "flex flex-col gap-8 p-8", children: [_jsx(PageHeader, { eyebrow: "Developer Portal", title: t('plugins.title') }), _jsxs("div", { className: "text-muted-foreground text-center text-sm", children: [t('accessibility.loading'), "..."] })] }));
+    }
+    if (plugins.length === 0) {
+        return (_jsxs("div", { className: "flex flex-col gap-8 p-8", children: [_jsx(PageHeader, { eyebrow: "Developer Portal", title: t('plugins.title') }), _jsx(EmptyState, { icon: _jsx(Blocks, { className: "size-10" }), title: t('plugins.emptyState') })] }));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-8 p-8", children: [_jsx(PageHeader, { eyebrow: "Developer Portal", title: t('plugins.title') }), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" }), _jsx(Input, { placeholder: t('plugins.searchPlaceholder'), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "ps-9", "data-testid": "plugin-search" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: activeCategory === null ? 'default' : 'outline', size: "sm", onClick: () => setActiveCategory(null), children: t('plugins.allCategories') }), categories.map((cat) => (_jsx(Button, { variant: activeCategory === cat ? 'default' : 'outline', size: "sm", onClick: () => setActiveCategory(cat === activeCategory ? null : cat), children: cat }, cat)))] }), _jsx("div", { className: "bg-border h-6 w-px" }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: statusFilter === null ? 'default' : 'outline', size: "sm", onClick: () => setStatusFilter(null), children: "All Status" }), _jsx(Button, { variant: statusFilter === 'installed' ? 'default' : 'outline', size: "sm", onClick: () => setStatusFilter(statusFilter === 'installed' ? null : 'installed'), children: t('plugins.installed') }), _jsx(Button, { variant: statusFilter === 'not-installed' ? 'default' : 'outline', size: "sm", onClick: () => setStatusFilter(statusFilter === 'not-installed' ? null : 'not-installed'), children: t('plugins.notInstalled') })] })] }), filteredPlugins.length > 0 ? (_jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filteredPlugins.map((plugin) => (_jsx(PluginCard, { plugin: plugin, installed: getInstalled(plugin.name), onSelect: setSelectedPlugin, onToggle: handleToggle }, plugin.name))) })) : (_jsx(EmptyState, { icon: _jsx(Search, { className: "size-10" }), title: t('plugins.emptyState'), action: _jsx(Button, { variant: "outline", onClick: () => {
+                        setSearchQuery('');
+                        setActiveCategory(null);
+                        setStatusFilter(null);
+                    }, children: t('plugins.clearFilters') }) })), _jsx(PluginDetailDrawer, { plugin: selectedPlugin, installed: selectedPlugin ? getInstalled(selectedPlugin.name) : undefined, open: !!selectedPlugin, onClose: () => setSelectedPlugin(null), onInstall: handleInstall, onUninstall: handleUninstall })] }));
+}

package/dist/src/presentation/web/components/features/plugins/plugins-page-client.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { PluginsPageClient } from './plugins-page-client.js';
+declare const meta: {
+    title: string;
+    component: typeof PluginsPageClient;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const NoProxy: Story;
+export declare const WrongAgent: Story;
+//# sourceMappingURL=plugins-page-client.stories.d.ts.map

package/dist/src/presentation/web/components/features/plugins/plugins-page-client.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugins-page-client.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/plugins/plugins-page-client.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,QAAA,MAAM,IAAI;;;CAGgC,CAAC;AAE3C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC"}

package/dist/src/presentation/web/components/features/plugins/plugins-page-client.stories.js

@@ -0,0 +1,24 @@
+import { PluginsPageClient } from './plugins-page-client.js';
+const meta = {
+    title: 'Features/Plugins/PluginsPageClient',
+    component: PluginsPageClient,
+};
+export default meta;
+export const Default = {
+    args: {
+        proxyConfigured: true,
+        isClaudeCode: true,
+    },
+};
+export const NoProxy = {
+    args: {
+        proxyConfigured: false,
+        isClaudeCode: true,
+    },
+};
+export const WrongAgent = {
+    args: {
+        proxyConfigured: true,
+        isClaudeCode: false,
+    },
+};

package/dist/src/presentation/web/components/features/settings/feature-flags-settings-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-flags-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/feature-flags-settings-section.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAgB,MAAM,yCAAyC,CAAC;AAGtF,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,gCAAgC,2CA+HzF"}
+{"version":3,"file":"feature-flags-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/feature-flags-settings-section.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAgB,MAAM,yCAAyC,CAAC;AAGtF,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,gCAAgC,2CAkJzF"}

package/dist/src/presentation/web/components/features/settings/feature-flags-settings-section.js

@@ -17,6 +17,7 @@ export function FeatureFlagsSettingsSection({ settings }) {
         adoptBranch: false,
         gitRebaseSync: false,
         reactFileManager: false,
+        plugins: false,
     };
     const [flags, setFlags] = useState({ ...featureFlags });
     function save(payload) {
@@ -55,5 +56,11 @@ export function FeatureFlagsSettingsSection({ settings }) {
                     const newFlags = { ...flags, reactFileManager: v };
                     setFlags(newFlags);
                     save({ featureFlags: newFlags });
+                } }), _jsx(SwitchRow, { label: t('settings.featureFlags.plugins'), description: settings.litellmProxy?.baseUrl
+                    ? t('settings.featureFlags.pluginsDescription')
+                    : `${t('settings.featureFlags.pluginsDescription')} — ${t('plugins.noProxy')}`, tooltip: "Enables the Plugins page for browsing and managing Claude Code plugins from a LiteLLM marketplace. Requires a LiteLLM proxy URL to be configured.", id: "flag-plugins", testId: "switch-flag-plugins", checked: flags.plugins, disabled: !settings.litellmProxy?.baseUrl, onChange: (v) => {
+                    const newFlags = { ...flags, plugins: v };
+                    setFlags(newFlags);
+                    save({ featureFlags: newFlags });
                 } })] }));
 }

package/dist/src/presentation/web/components/features/settings/feature-flags-settings-section.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-flags-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/feature-flags-settings-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAK/E,QAAA,MAAM,IAAI;;;;;;;CAO0C,CAAC;AAErD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAezB,CAAC"}
+{"version":3,"file":"feature-flags-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/feature-flags-settings-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAK/E,QAAA,MAAM,IAAI;;;;;;;CAO0C,CAAC;AAErD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC"}

package/dist/src/presentation/web/components/features/settings/feature-flags-settings-section.stories.js

@@ -27,6 +27,7 @@ export const AllEnabled = {
                 adoptBranch: true,
                 gitRebaseSync: true,
                 reactFileManager: true,
+                plugins: true,
             },
         },
     },
@@ -43,6 +44,7 @@ export const AllDisabled = {
                 adoptBranch: false,
                 gitRebaseSync: false,
                 reactFileManager: false,
+                plugins: false,
             },
         },
     },

package/dist/src/presentation/web/components/features/settings/litellm-proxy-routing-section.d.ts

@@ -0,0 +1,6 @@
+import type { Settings } from '../../../../../../packages/core/src/domain/generated/output.js';
+export interface LiteLLMProxyRoutingSectionProps {
+    settings: Settings;
+}
+export declare function LiteLLMProxyRoutingSection({ settings }: LiteLLMProxyRoutingSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=litellm-proxy-routing-section.d.ts.map

package/dist/src/presentation/web/components/features/settings/litellm-proxy-routing-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"litellm-proxy-routing-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/litellm-proxy-routing-section.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AAaxE,MAAM,WAAW,+BAA+B;IAC9C,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,0BAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,+BAA+B,2CA2LvF"}

package/dist/src/presentation/web/components/features/settings/litellm-proxy-routing-section.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useTransition } from 'react';
+import { Route } from 'lucide-react';
+import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
+import { updateSettingsAction } from '../../../app/actions/update-settings.js';
+import { LiteLLMProxyRoutingMode } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { SettingsSection, SettingsRow } from './settings-section-utils.js';
+import { Input } from '../../ui/input.js';
+import { Textarea } from '../../ui/textarea.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/select.js';
+export function LiteLLMProxyRoutingSection({ settings }) {
+    const { t } = useTranslation('web');
+    const [, startTransition] = useTransition();
+    const cc = settings.litellmProxy?.claudeCode;
+    const [routingMode, setRoutingMode] = useState(cc?.routingMode ?? LiteLLMProxyRoutingMode.direct);
+    const [customHeaders, setCustomHeaders] = useState(cc?.customHeaders ?? '');
+    const [sonnetModel, setSonnetModel] = useState(cc?.sonnetModel ?? '');
+    const [haikuModel, setHaikuModel] = useState(cc?.haikuModel ?? '');
+    const [opusModel, setOpusModel] = useState(cc?.opusModel ?? '');
+    const originalCustomHeaders = cc?.customHeaders ?? '';
+    const originalSonnetModel = cc?.sonnetModel ?? '';
+    const originalHaikuModel = cc?.haikuModel ?? '';
+    const originalOpusModel = cc?.opusModel ?? '';
+    const showProxyFields = routingMode !== LiteLLMProxyRoutingMode.direct;
+    function save(payload) {
+        startTransition(async () => {
+            const result = await updateSettingsAction(payload);
+            if (!result.success) {
+                toast.error(result.error ?? t('settings.failedToSave'));
+            }
+        });
+    }
+    function buildPayload(overrides) {
+        return {
+            litellmProxy: {
+                baseUrl: settings.litellmProxy?.baseUrl,
+                apiKey: settings.litellmProxy?.apiKey,
+                marketplaceEnabled: !!settings.litellmProxy?.baseUrl,
+                claudeCode: {
+                    routingMode: overrides?.routingMode ?? routingMode,
+                    customHeaders: (overrides?.customHeaders ?? customHeaders) || undefined,
+                    sonnetModel: (overrides?.sonnetModel ?? sonnetModel) || undefined,
+                    haikuModel: (overrides?.haikuModel ?? haikuModel) || undefined,
+                    opusModel: (overrides?.opusModel ?? opusModel) || undefined,
+                },
+            },
+        };
+    }
+    function handleModeChange(value) {
+        setRoutingMode(value);
+        save(buildPayload({ routingMode: value }));
+    }
+    return (_jsxs(SettingsSection, { icon: Route, title: t('settings.litellmProxy.routing.title'), description: t('settings.litellmProxy.routing.description'), testId: "litellm-proxy-routing-section", tooltip: t('settings.litellmProxy.routing.hint'), children: [_jsx(SettingsRow, { label: t('settings.litellmProxy.routing.mode'), description: t('settings.litellmProxy.routing.modeDescription'), htmlFor: "litellm-routing-mode", children: _jsxs(Select, { value: routingMode, onValueChange: handleModeChange, children: [_jsx(SelectTrigger, { id: "litellm-routing-mode", "data-testid": "litellm-routing-mode-select", className: "w-48 text-xs", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: LiteLLMProxyRoutingMode.direct, children: t('settings.litellmProxy.routing.modeDirect') }), _jsx(SelectItem, { value: LiteLLMProxyRoutingMode.proxy, children: t('settings.litellmProxy.routing.modeProxy') }), _jsx(SelectItem, { value: LiteLLMProxyRoutingMode.passthrough, children: t('settings.litellmProxy.routing.modePassthrough') })] })] }) }), routingMode === LiteLLMProxyRoutingMode.passthrough && (_jsx(SettingsRow, { label: "", description: t('settings.litellmProxy.routing.passthroughHelp'), children: _jsx("span", {}) })), showProxyFields ? (_jsxs(_Fragment, { children: [_jsx(SettingsRow, { label: t('settings.litellmProxy.routing.customHeaders'), description: t('settings.litellmProxy.routing.customHeadersDescription'), htmlFor: "litellm-custom-headers", children: _jsx(Textarea, { id: "litellm-custom-headers", "data-testid": "litellm-custom-headers-input", placeholder: 'x-litellm-customer-id: my-user\nx-litellm-tags: project:acme', value: customHeaders, onChange: (e) => setCustomHeaders(e.target.value), onBlur: () => {
+                                if (customHeaders !== originalCustomHeaders) {
+                                    save(buildPayload({ customHeaders }));
+                                }
+                            }, rows: 3, className: "w-64 text-xs" }) }), _jsx(SettingsRow, { label: t('settings.litellmProxy.routing.sonnetModel'), description: t('settings.litellmProxy.routing.modelOverrideDescription'), htmlFor: "litellm-sonnet-model", children: _jsx(Input, { id: "litellm-sonnet-model", "data-testid": "litellm-sonnet-model-input", type: "text", placeholder: "claude-sonnet-4-6", value: sonnetModel, onChange: (e) => setSonnetModel(e.target.value), onBlur: () => {
+                                if (sonnetModel !== originalSonnetModel) {
+                                    save(buildPayload({ sonnetModel }));
+                                }
+                            }, className: "w-64 text-xs" }) }), _jsx(SettingsRow, { label: t('settings.litellmProxy.routing.haikuModel'), htmlFor: "litellm-haiku-model", children: _jsx(Input, { id: "litellm-haiku-model", "data-testid": "litellm-haiku-model-input", type: "text", placeholder: "claude-haiku-4-5", value: haikuModel, onChange: (e) => setHaikuModel(e.target.value), onBlur: () => {
+                                if (haikuModel !== originalHaikuModel) {
+                                    save(buildPayload({ haikuModel }));
+                                }
+                            }, className: "w-64 text-xs" }) }), _jsx(SettingsRow, { label: t('settings.litellmProxy.routing.opusModel'), htmlFor: "litellm-opus-model", children: _jsx(Input, { id: "litellm-opus-model", "data-testid": "litellm-opus-model-input", type: "text", placeholder: "claude-opus-4-6", value: opusModel, onChange: (e) => setOpusModel(e.target.value), onBlur: () => {
+                                if (opusModel !== originalOpusModel) {
+                                    save(buildPayload({ opusModel }));
+                                }
+                            }, className: "w-64 text-xs" }) })] })) : null] }));
+}

package/dist/src/presentation/web/components/features/settings/litellm-proxy-routing-section.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { LiteLLMProxyRoutingSection } from './litellm-proxy-routing-section.js';
+declare const meta: {
+    title: string;
+    component: typeof LiteLLMProxyRoutingSection;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DirectMode: Story;
+export declare const ProxyMode: Story;
+export declare const PassthroughMode: Story;
+//# sourceMappingURL=litellm-proxy-routing-section.stories.d.ts.map

package/dist/src/presentation/web/components/features/settings/litellm-proxy-routing-section.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"litellm-proxy-routing-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/litellm-proxy-routing-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAa7E,QAAA,MAAM,IAAI;;;;;;;CAOyC,CAAC;AAEpD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC"}