@shipit-ai/cli 1.167.1 → 1.169.0-pr12.6d78faf

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,2CA0M1F"}

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

@@ -0,0 +1,115 @@
+'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 [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 (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]);
+    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 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)))] }), 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);
+                    }, 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/agent-settings-section.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"agent-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/agent-settings-section.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AAgB3E,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,WAAW,CAAC;CACpB;AAkBD,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,yBAAyB,2CAoKxE"}
+{"version":3,"file":"agent-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/agent-settings-section.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAa,MAAM,yCAAyC,CAAC;AAInF,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CA0C3E"}

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

@@ -1,104 +1,25 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useTransition, useRef, useEffect } from 'react';
-import { Bot, Eye, EyeOff, Check } from 'lucide-react';
-import { toast } from 'sonner';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../ui/card.js';
-import { Label } from '../../ui/label.js';
-import { Input } from '../../ui/input.js';
-import { Button } from '../../ui/button.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/select.js';
-import { updateSettingsAction } from '../../../app/actions/update-settings.js';
-import { setAgentPermissionMode } from '../../../app/actions/agent-permissions.js';
-import { AgentType, AgentAuthMethod } from '../../../../../../packages/core/src/domain/generated/output.js';
-import { getAgentTypeIcon } from '../../common/feature-node/agent-type-icons.js';
-import { AgentPermissionPicker } from './agent-permission-picker.js';
-const AGENT_TYPE_OPTIONS = [
-    { value: AgentType.ClaudeCode, label: 'Claude Code' },
-    { value: AgentType.CodexCli, label: 'Codex CLI' },
-    { value: AgentType.CopilotCli, label: 'GitHub Copilot CLI' },
-    { value: AgentType.Cursor, label: 'Cursor' },
-    { value: AgentType.GeminiCli, label: 'Gemini CLI' },
-    { value: AgentType.RovoDev, label: 'Rovo Dev CLI' },
-];
-const AUTH_METHOD_OPTIONS = [
-    { value: AgentAuthMethod.Session, label: 'Session' },
-    { value: AgentAuthMethod.Token, label: 'Token' },
-];
-/** Resolve the current permission mode for the active agent from settings. */
-function resolvePermissionMode(agent) {
-    const perms = agent.permissions;
-    if (!perms)
-        return undefined;
-    const keyMap = {
-        [AgentType.ClaudeCode]: 'claudeCode',
-        [AgentType.Cursor]: 'cursor',
-        [AgentType.GeminiCli]: 'geminiCli',
-        [AgentType.CodexCli]: 'codexCli',
-        [AgentType.CopilotCli]: 'copilotCli',
-        [AgentType.RovoDev]: 'rovoDev',
-    };
-    const key = keyMap[agent.type];
-    return key ? perms[key] : undefined;
-}
-export function AgentSettingsSection({ agent }) {
-    const [agentType, setAgentType] = useState(agent.type);
-    const [authMethod, setAuthMethod] = useState(agent.authMethod);
-    const [token, setToken] = useState(agent.token ?? '');
-    const [showToken, setShowToken] = useState(false);
-    const [permissionMode, setPermissionMode] = useState(resolvePermissionMode(agent));
-    const [isPending, startTransition] = useTransition();
-    const [showSaved, setShowSaved] = useState(false);
-    const prevPendingRef = useRef(false);
-    useEffect(() => {
-        if (prevPendingRef.current && !isPending) {
-            setShowSaved(true);
-            const timer = setTimeout(() => setShowSaved(false), 2000);
-            return () => clearTimeout(timer);
-        }
-        prevPendingRef.current = isPending;
-    }, [isPending]);
-    function save(payload) {
-        startTransition(async () => {
-            const result = await updateSettingsAction(payload);
-            if (!result.success) {
-                toast.error(result.error ?? 'Failed to save agent settings');
-            }
-        });
-    }
-    function buildPayload(overrides = {}) {
-        const merged = { type: agentType, authMethod, ...overrides };
-        const result = { type: merged.type, authMethod: merged.authMethod };
-        if (merged.authMethod === AgentAuthMethod.Token) {
-            result.token = overrides.token ?? token;
-        }
-        return { agent: result };
-    }
-    function handleAgentTypeChange(value) {
-        setAgentType(value);
-        setPermissionMode(undefined); // Reset permission mode when agent changes
-        save(buildPayload({ type: value }));
-    }
-    function handlePermissionModeChange(mode) {
-        setPermissionMode(mode);
-        startTransition(async () => {
-            const result = await setAgentPermissionMode(agentType, mode);
-            if (!result.success) {
-                toast.error(result.error ?? 'Failed to save permission mode');
-            }
-        });
-    }
-    function handleAuthMethodChange(value) {
-        setAuthMethod(value);
-        save(buildPayload({ authMethod: value }));
-    }
-    function handleTokenBlur() {
-        if (token !== (agent.token ?? '')) {
-            save(buildPayload({ token }));
-        }
-    }
-    return (_jsxs(Card, { id: "agent", className: "scroll-mt-6", "data-testid": "agent-settings-section", children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Bot, { className: "text-muted-foreground h-4 w-4" }), _jsx(CardTitle, { children: "Preferred Agent" })] }), isPending ? _jsx("span", { className: "text-muted-foreground text-xs", children: "Saving..." }) : null, showSaved && !isPending ? (_jsxs("span", { className: "flex items-center gap-1 text-xs text-green-600", children: [_jsx(Check, { className: "h-3 w-3" }), "Saved"] })) : null] }), _jsx(CardDescription, { children: "Choose your AI coding agent and authentication method" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "agent-type", children: "Agent Type" }), _jsxs(Select, { value: agentType, onValueChange: handleAgentTypeChange, children: [_jsx(SelectTrigger, { id: "agent-type", "data-testid": "agent-type-select", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: AGENT_TYPE_OPTIONS.map((opt) => {
-                                            const Icon = getAgentTypeIcon(opt.value);
-                                            return (_jsx(SelectItem, { value: opt.value, children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Icon, { className: "h-4 w-4 shrink-0" }), opt.label] }) }, opt.value));
-                                        }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "auth-method", children: "Authentication Method" }), _jsxs(Select, { value: authMethod, onValueChange: handleAuthMethodChange, children: [_jsx(SelectTrigger, { id: "auth-method", "data-testid": "auth-method-select", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: AUTH_METHOD_OPTIONS.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] })] }), _jsx(AgentPermissionPicker, { agentType: agentType, currentMode: permissionMode, onChange: handlePermissionModeChange, disabled: isPending }), authMethod === AgentAuthMethod.Token && (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "agent-token", children: "API Token" }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "agent-token", "data-testid": "agent-token-input", type: showToken ? 'text' : 'password', value: token, onChange: (e) => setToken(e.target.value), onBlur: handleTokenBlur, placeholder: "Enter your API token", className: "pe-10" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "absolute top-0 right-0 h-full px-3 hover:bg-transparent", onClick: () => setShowToken(!showToken), "data-testid": "toggle-token-visibility", "aria-label": showToken ? 'Hide token' : 'Show token', children: showToken ? _jsx(EyeOff, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }) })] }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Saves automatically when you leave the field" })] }))] })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Bot } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { AgentModelPicker } from '../../features/settings/AgentModelPicker/index.js';
+import { SettingsSection, SettingsRow } from './settings-section-utils.js';
+export function AgentSettingsSection({ settings }) {
+    const { t } = useTranslation('web');
+    const [agentType, setAgentType] = useState(settings.agent.type);
+    return (_jsx(SettingsSection, { icon: Bot, title: t('settings.agent.sectionTitle'), description: t('settings.agent.sectionDescription'), testId: "agent-settings-section", tooltip: t('settings.agent.hint'), tooltipLinks: [
+            {
+                label: t('settings.agent.links.agentSystem'),
+                href: 'https://github.com/jrmatherly/shipit/blob/main/docs/architecture/agent-system.md',
+            },
+            {
+                label: t('settings.agent.links.addingAgents'),
+                href: 'https://github.com/jrmatherly/shipit/blob/main/docs/development/adding-agents.md',
+            },
+            {
+                label: t('settings.agent.links.configurationGuide'),
+                href: 'https://github.com/jrmatherly/shipit/blob/main/docs/guides/configuration.md',
+            },
+        ], children: _jsx(SettingsRow, { label: t('settings.agent.agentAndModel'), description: t('settings.agent.agentAndModelDescription'), tooltip: "Changing the agent switches which AI CLI tool runs your features. Each agent has different capabilities, speed, and cost tradeoffs.", htmlFor: "agent-model-picker", children: _jsx(AgentModelPicker, { initialAgentType: agentType, initialModel: settings.models.default, mode: "settings", onAgentModelChange: (newAgent) => setAgentType(newAgent), className: "w-55" }) }) }));
 }

package/dist/src/presentation/web/components/features/settings/agent-settings-section.stories.d.ts

@@ -11,7 +11,6 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const TokenAuth: Story;
-export declare const CodexCli: Story;
-export declare const CopilotCli: Story;
+export declare const GeminiAgent: Story;
+export declare const CursorAgent: Story;
 //# sourceMappingURL=agent-settings-section.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"agent-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/agent-settings-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAGhE,QAAA,MAAM,IAAI;;;;;;;CAOmC,CAAC;AAE9C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC"}
+{"version":3,"file":"agent-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/agent-settings-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAMhE,QAAA,MAAM,IAAI;;;;;;;CAOmC,CAAC;AAE9C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAC"}