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

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

@@ -1,61 +1,64 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useTransition, useRef, useEffect } from 'react';
-import { Flag, Check } from 'lucide-react';
+import { useState, useTransition } from 'react';
+import { Flag } from 'lucide-react';
 import { toast } from 'sonner';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../ui/card.js';
-import { Label } from '../../ui/label.js';
-import { Switch } from '../../ui/switch.js';
+import { useTranslation } from 'react-i18next';
 import { updateSettingsAction } from '../../../app/actions/update-settings.js';
-const FLAG_DESCRIPTIONS = {
-    skills: 'Enable Skills navigation and functionality in the web UI',
-    envDeploy: 'Enable environment deployment features in the web UI',
-    debug: 'Enable debug UI elements and verbose client-side logging',
-    githubImport: 'Enable GitHub repository import in the web UI',
-    adoptBranch: 'Enable the ability to adopt existing branches as tracked features',
-    gitRebaseSync: 'Enable git rebase-on-main and sync-main operations in the web UI',
-    reactFileManager: 'Use the built-in React file manager instead of the native OS folder picker. Also serves as automatic fallback when the native picker is unavailable.',
-};
-const FLAG_LABELS = {
-    skills: 'Skills',
-    envDeploy: 'Deployments',
-    debug: 'Debug',
-    githubImport: 'GitHub Import',
-    adoptBranch: 'Adopt Branch',
-    gitRebaseSync: 'Git Rebase & Sync',
-    reactFileManager: 'React File Manager',
-};
-const FLAG_KEYS = [
-    'skills',
-    'envDeploy',
-    'debug',
-    'githubImport',
-    'adoptBranch',
-    'gitRebaseSync',
-    'reactFileManager',
-];
-export function FeatureFlagsSettingsSection({ featureFlags }) {
+import { SettingsSection, SwitchRow } from './settings-section-utils.js';
+export function FeatureFlagsSettingsSection({ settings }) {
+    const { t } = useTranslation('web');
+    const [, startTransition] = useTransition();
+    const featureFlags = settings.featureFlags ?? {
+        skills: false,
+        envDeploy: false,
+        debug: false,
+        githubImport: false,
+        adoptBranch: false,
+        gitRebaseSync: false,
+        reactFileManager: false,
+        plugins: false,
+    };
     const [flags, setFlags] = useState({ ...featureFlags });
-    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 handleFlagChange(key, value) {
-        const newFlags = { ...flags, [key]: value };
-        setFlags(newFlags);
+    function save(payload) {
         startTransition(async () => {
-            const result = await updateSettingsAction({ featureFlags: newFlags });
+            const result = await updateSettingsAction(payload);
             if (!result.success) {
-                toast.error(result.error ?? 'Failed to save feature flags');
+                toast.error(result.error ?? t('settings.failedToSave'));
             }
         });
     }
-    return (_jsxs(Card, { id: "feature-flags", className: "scroll-mt-6", "data-testid": "feature-flags-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(Flag, { className: "text-muted-foreground h-4 w-4" }), _jsx(CardTitle, { children: "Feature Flags" })] }), 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: "Toggle experimental and optional features. Changes take effect after page navigation." })] }), _jsx(CardContent, { className: "space-y-4", children: FLAG_KEYS.map((key) => (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: `flag-${key}`, children: FLAG_LABELS[key] }), _jsx("p", { className: "text-muted-foreground text-xs", children: FLAG_DESCRIPTIONS[key] })] }), _jsx(Switch, { id: `flag-${key}`, "data-testid": `switch-flag-${key}`, checked: flags[key], onCheckedChange: (v) => handleFlagChange(key, v) })] }, key))) })] }));
+    return (_jsxs(SettingsSection, { icon: Flag, title: t('settings.featureFlags.title'), description: t('settings.featureFlags.sectionDescription'), badge: t('settings.featureFlags.badge'), testId: "feature-flags-settings-section", tooltip: t('settings.featureFlags.hint'), children: [_jsx(SwitchRow, { label: t('settings.featureFlags.skills'), description: t('settings.featureFlags.skillsDescription'), tooltip: "Enables the Skills page in the sidebar for browsing and managing Claude Code skills.", id: "flag-skills", testId: "switch-flag-skills", checked: flags.skills, onChange: (v) => {
+                    const newFlags = { ...flags, skills: v };
+                    setFlags(newFlags);
+                    save({ featureFlags: newFlags });
+                } }), _jsx(SwitchRow, { label: t('settings.featureFlags.deployments'), description: t('settings.featureFlags.deploymentsDescription'), tooltip: "Enables experimental deployment features for environment management.", id: "flag-envDeploy", testId: "switch-flag-envDeploy", checked: flags.envDeploy, onChange: (v) => {
+                    const newFlags = { ...flags, envDeploy: v };
+                    setFlags(newFlags);
+                    save({ featureFlags: newFlags });
+                } }), _jsx(SwitchRow, { label: t('settings.featureFlags.debug'), description: t('settings.featureFlags.debugDescription'), tooltip: "Shows additional debugging information in the UI for troubleshooting.", id: "flag-debug", testId: "switch-flag-debug", checked: flags.debug, onChange: (v) => {
+                    const newFlags = { ...flags, debug: v };
+                    setFlags(newFlags);
+                    save({ featureFlags: newFlags });
+                } }), _jsx(SwitchRow, { label: t('settings.featureFlags.githubImport'), description: t('settings.featureFlags.githubImportDescription'), tooltip: "Enables importing repositories directly from GitHub.", id: "flag-githubImport", testId: "switch-flag-githubImport", checked: flags.githubImport, onChange: (v) => {
+                    const newFlags = { ...flags, githubImport: v };
+                    setFlags(newFlags);
+                    save({ featureFlags: newFlags });
+                } }), _jsx(SwitchRow, { label: t('settings.featureFlags.adoptBranch'), description: t('settings.featureFlags.adoptBranchDescription'), tooltip: "Enables adopting existing git branches as ShipIT features.", id: "flag-adoptBranch", testId: "switch-flag-adoptBranch", checked: flags.adoptBranch, onChange: (v) => {
+                    const newFlags = { ...flags, adoptBranch: v };
+                    setFlags(newFlags);
+                    save({ featureFlags: newFlags });
+                } }), _jsx(SwitchRow, { label: t('settings.featureFlags.gitRebaseSync'), description: t('settings.featureFlags.gitRebaseSyncDescription'), tooltip: "Uses git rebase instead of merge when syncing feature branches with the upstream branch.", id: "flag-gitRebaseSync", testId: "switch-flag-gitRebaseSync", checked: flags.gitRebaseSync, onChange: (v) => {
+                    const newFlags = { ...flags, gitRebaseSync: v };
+                    setFlags(newFlags);
+                    save({ featureFlags: newFlags });
+                } }), _jsx(SwitchRow, { label: t('settings.featureFlags.reactFileManager'), description: t('settings.featureFlags.reactFileManagerDescription'), tooltip: "Replaces the native file picker dialog with a React-based file browser for selecting project folders.", id: "flag-reactFileManager", testId: "switch-flag-reactFileManager", checked: flags.reactFileManager, onChange: (v) => {
+                    const newFlags = { ...flags, reactFileManager: v };
+                    setFlags(newFlags);
+                    save({ featureFlags: newFlags });
+                } }), _jsx(SwitchRow, { label: t('settings.featureFlags.plugins'), description: t('settings.featureFlags.pluginsDescription'), tooltip: "Enables the Plugins page for browsing and managing Claude Code plugins from a LiteLLM marketplace.", id: "flag-plugins", testId: "switch-flag-plugins", checked: flags.plugins, 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;AAE/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,KAYrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAYzB,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

@@ -1,4 +1,6 @@
 import { FeatureFlagsSettingsSection } from './feature-flags-settings-section.js';
+import { createDefaultSettings } from '../../../../../../packages/core/src/domain/factories/settings-defaults.factory.js';
+const baseSettings = createDefaultSettings();
 const meta = {
     title: 'Features/Settings/FeatureFlagsSettingsSection',
     component: FeatureFlagsSettingsSection,
@@ -10,40 +12,40 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        featureFlags: {
-            skills: false,
-            envDeploy: false,
-            debug: false,
-            githubImport: false,
-            adoptBranch: false,
-            gitRebaseSync: false,
-            reactFileManager: false,
-        },
+        settings: baseSettings,
     },
 };
 export const AllEnabled = {
     args: {
-        featureFlags: {
-            skills: true,
-            envDeploy: true,
-            debug: true,
-            githubImport: true,
-            adoptBranch: true,
-            gitRebaseSync: true,
-            reactFileManager: true,
+        settings: {
+            ...baseSettings,
+            featureFlags: {
+                skills: true,
+                envDeploy: true,
+                debug: true,
+                githubImport: true,
+                adoptBranch: true,
+                gitRebaseSync: true,
+                reactFileManager: true,
+                plugins: true,
+            },
         },
     },
 };
 export const AllDisabled = {
     args: {
-        featureFlags: {
-            skills: false,
-            envDeploy: false,
-            debug: false,
-            githubImport: false,
-            adoptBranch: false,
-            gitRebaseSync: false,
-            reactFileManager: false,
+        settings: {
+            ...baseSettings,
+            featureFlags: {
+                skills: false,
+                envDeploy: false,
+                debug: false,
+                githubImport: false,
+                adoptBranch: false,
+                gitRebaseSync: false,
+                reactFileManager: false,
+                plugins: false,
+            },
         },
     },
 };

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

@@ -1 +1 @@
-{"version":3,"file":"interactive-agent-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/interactive-agent-settings-section.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAA0B,MAAM,yCAAyC,CAAC;AAGhG,MAAM,WAAW,oCAAoC;IACnD,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,+BAA+B,CAAC,EAC9C,QAAQ,GACT,EAAE,oCAAoC,2CA8GtC"}
+{"version":3,"file":"interactive-agent-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/interactive-agent-settings-section.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAA0B,MAAM,yCAAyC,CAAC;AAGhG,MAAM,WAAW,oCAAoC;IACnD,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,+BAA+B,CAAC,EAC9C,QAAQ,GACT,EAAE,oCAAoC,2CAkHtC"}

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

@@ -25,7 +25,7 @@ export function InteractiveAgentSettingsSection({ settings, }) {
             }
         });
     }
-    return (_jsxs(SettingsSection, { icon: MessageSquare, title: t('settings.interactiveAgent.title'), description: t('settings.interactiveAgent.description'), testId: "interactive-agent-settings-section", children: [_jsx(SwitchRow, { label: t('settings.interactiveAgent.enableChatTab'), description: t('settings.interactiveAgent.enableChatTabDescription'), id: "interactive-agent-enabled", testId: "switch-interactive-agent-enabled", checked: interactiveEnabled, onChange: (v) => {
+    return (_jsxs(SettingsSection, { icon: MessageSquare, title: t('settings.interactiveAgent.title'), description: t('settings.interactiveAgent.description'), testId: "interactive-agent-settings-section", tooltip: t('settings.interactiveAgent.hint'), children: [_jsx(SwitchRow, { label: t('settings.interactiveAgent.enableChatTab'), description: t('settings.interactiveAgent.enableChatTabDescription'), tooltip: "Shows or hides the Chat tab on feature detail pages. When enabled, you can have interactive conversations with the agent about a specific feature.", id: "interactive-agent-enabled", testId: "switch-interactive-agent-enabled", checked: interactiveEnabled, onChange: (v) => {
                     setInteractiveEnabled(v);
                     save({
                         interactiveAgent: {
@@ -34,7 +34,7 @@ export function InteractiveAgentSettingsSection({ settings, }) {
                             maxConcurrentSessions: parseInt(interactiveSessions, 10) || 3,
                         },
                     });
-                } }), _jsx(SettingsRow, { label: t('settings.interactiveAgent.autoTimeout'), description: t('settings.interactiveAgent.autoTimeoutDescription'), htmlFor: "interactive-agent-timeout", children: _jsx(NumberStepper, { id: "interactive-agent-timeout", testId: "input-interactive-agent-timeout", value: interactiveTimeout, placeholder: "15", min: 1, max: 120, suffix: "min", onChange: setInteractiveTimeout, onBlur: () => {
+                } }), _jsx(SettingsRow, { label: t('settings.interactiveAgent.autoTimeout'), description: t('settings.interactiveAgent.autoTimeoutDescription'), tooltip: "Minutes of inactivity before a chat agent session is automatically terminated. Prevents idle agent processes from consuming resources indefinitely.", htmlFor: "interactive-agent-timeout", children: _jsx(NumberStepper, { id: "interactive-agent-timeout", testId: "input-interactive-agent-timeout", value: interactiveTimeout, placeholder: "15", min: 1, max: 120, suffix: "min", onChange: setInteractiveTimeout, onBlur: () => {
                         const n = parseInt(interactiveTimeout, 10);
                         const clamped = Number.isNaN(n) ? 15 : Math.min(120, Math.max(1, n));
                         const clampedStr = String(clamped);
@@ -46,7 +46,7 @@ export function InteractiveAgentSettingsSection({ settings, }) {
                                 maxConcurrentSessions: parseInt(interactiveSessions, 10) || 3,
                             },
                         });
-                    } }) }), _jsx(SettingsRow, { label: t('settings.interactiveAgent.maxConcurrentSessions'), description: t('settings.interactiveAgent.maxConcurrentSessionsDescription'), htmlFor: "interactive-agent-sessions", children: _jsx(NumberStepper, { id: "interactive-agent-sessions", testId: "input-interactive-agent-sessions", value: interactiveSessions, placeholder: "3", min: 1, max: 10, onChange: setInteractiveSessions, onBlur: () => {
+                    } }) }), _jsx(SettingsRow, { label: t('settings.interactiveAgent.maxConcurrentSessions'), description: t('settings.interactiveAgent.maxConcurrentSessionsDescription'), tooltip: "Maximum number of interactive agent sessions that can run simultaneously. Each session spawns a separate agent process, so higher values use more CPU and memory.", htmlFor: "interactive-agent-sessions", children: _jsx(NumberStepper, { id: "interactive-agent-sessions", testId: "input-interactive-agent-sessions", value: interactiveSessions, placeholder: "3", min: 1, max: 10, onChange: setInteractiveSessions, onBlur: () => {
                         const n = parseInt(interactiveSessions, 10);
                         const clamped = Number.isNaN(n) ? 3 : Math.min(10, Math.max(1, n));
                         const clampedStr = String(clamped);

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"litellm-proxy-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/litellm-proxy-settings-section.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AAKxE,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,gCAAgC,2CAiJzF"}

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

@@ -0,0 +1,76 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useTransition } from 'react';
+import { Server, CheckCircle2, XCircle } from 'lucide-react';
+import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
+import { updateSettingsAction } from '../../../app/actions/update-settings.js';
+import { addMarketplaceAction } from '../../../app/actions/add-marketplace.js';
+import { SettingsSection, SettingsRow, SwitchRow } from './settings-section-utils.js';
+import { Input } from '../../ui/input.js';
+import { Button } from '../../ui/button.js';
+export function LiteLLMProxySettingsSection({ settings }) {
+    const { t } = useTranslation('web');
+    const [, startTransition] = useTransition();
+    const [baseUrl, setBaseUrl] = useState(settings.litellmProxy?.baseUrl ?? '');
+    const [apiKey, setApiKey] = useState(settings.litellmProxy?.apiKey ?? '');
+    const [marketplaceEnabled, setMarketplaceEnabled] = useState(settings.litellmProxy?.marketplaceEnabled ?? false);
+    const [testStatus, setTestStatus] = useState('idle');
+    const [isTesting, setIsTesting] = useState(false);
+    const originalBaseUrl = settings.litellmProxy?.baseUrl ?? '';
+    const originalApiKey = settings.litellmProxy?.apiKey ?? '';
+    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: overrides?.baseUrl ?? baseUrl,
+                apiKey: overrides?.apiKey ?? apiKey,
+                marketplaceEnabled: overrides?.marketplaceEnabled ?? marketplaceEnabled,
+            },
+        };
+    }
+    async function handleTestConnection() {
+        if (!baseUrl)
+            return;
+        setIsTesting(true);
+        setTestStatus('idle');
+        try {
+            const marketplaceUrl = `${baseUrl.replace(/\/+$/, '')}/claude-code/marketplace.json`;
+            const result = await addMarketplaceAction(marketplaceUrl);
+            setTestStatus(result.success ? 'success' : 'failed');
+            if (result.success) {
+                toast.success(t('settings.litellmProxy.testSuccess'));
+            }
+            else {
+                toast.error(t('settings.litellmProxy.testFailed'));
+            }
+        }
+        catch {
+            setTestStatus('failed');
+            toast.error(t('settings.litellmProxy.testFailed'));
+        }
+        finally {
+            setIsTesting(false);
+        }
+    }
+    return (_jsxs(SettingsSection, { icon: Server, title: t('settings.litellmProxy.title'), description: t('settings.litellmProxy.description'), testId: "litellm-proxy-settings-section", tooltip: t('settings.litellmProxy.hint'), children: [_jsx(SettingsRow, { label: t('settings.litellmProxy.baseUrl'), description: t('settings.litellmProxy.baseUrlDescription'), tooltip: "The base URL of your LiteLLM proxy server. This is used to fetch the plugin marketplace catalog and route model requests.", htmlFor: "litellm-proxy-url", children: _jsx(Input, { id: "litellm-proxy-url", "data-testid": "litellm-proxy-url-input", type: "text", placeholder: "http://localhost:4000", value: baseUrl, onChange: (e) => {
+                        setBaseUrl(e.target.value);
+                        setTestStatus('idle');
+                    }, onBlur: () => {
+                        if (baseUrl !== originalBaseUrl)
+                            save(buildPayload({ baseUrl }));
+                    }, className: "w-64 text-xs" }) }), _jsx(SettingsRow, { label: t('settings.litellmProxy.apiKey'), description: t('settings.litellmProxy.apiKeyDescription'), tooltip: "A virtual API key for authenticating with the LiteLLM proxy. Stored locally alongside other agent credentials.", htmlFor: "litellm-api-key", children: _jsx(Input, { id: "litellm-api-key", "data-testid": "litellm-api-key-input", type: "password", placeholder: "sk-...", value: apiKey, onChange: (e) => setApiKey(e.target.value), onBlur: () => {
+                        if (apiKey !== originalApiKey)
+                            save(buildPayload({ apiKey }));
+                    }, className: "w-64 text-xs" }) }), _jsx(SwitchRow, { label: t('settings.litellmProxy.marketplaceEnabled'), description: t('settings.litellmProxy.marketplaceEnabledDescription'), tooltip: "When enabled, the plugin marketplace will fetch its catalog from this LiteLLM proxy instead of using built-in defaults.", id: "litellm-marketplace-enabled", testId: "switch-litellm-marketplace-enabled", checked: marketplaceEnabled, onChange: (v) => {
+                    setMarketplaceEnabled(v);
+                    save(buildPayload({ marketplaceEnabled: v }));
+                } }), _jsx(SettingsRow, { label: t('settings.litellmProxy.testConnection'), tooltip: "Attempt to connect to the proxy and fetch the marketplace catalog to verify the configuration is correct.", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", "data-testid": "litellm-test-connection-btn", disabled: !baseUrl || isTesting, onClick: handleTestConnection, className: "cursor-pointer text-xs", children: isTesting ? t('settings.saving') : t('settings.litellmProxy.testConnection') }), testStatus === 'success' && (_jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-500", "data-testid": "litellm-test-success" })), testStatus === 'failed' && (_jsx(XCircle, { className: "text-destructive h-4 w-4", "data-testid": "litellm-test-failed" }))] }) })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"litellm-proxy-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/litellm-proxy-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,KAWxB,CAAC"}

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

@@ -0,0 +1,29 @@
+import { LiteLLMProxySettingsSection } from './litellm-proxy-settings-section.js';
+import { createDefaultSettings } from '../../../../../../packages/core/src/domain/factories/settings-defaults.factory.js';
+const baseSettings = createDefaultSettings();
+const meta = {
+    title: 'Features/Settings/LiteLLMProxySettingsSection',
+    component: LiteLLMProxySettingsSection,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        settings: baseSettings,
+    },
+};
+export const Configured = {
+    args: {
+        settings: {
+            ...baseSettings,
+            litellmProxy: {
+                baseUrl: 'http://localhost:4000',
+                apiKey: 'sk-litellm-proxy-key-1234',
+                marketplaceEnabled: true,
+            },
+        },
+    },
+};

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"notification-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/notification-settings-section.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAmBvF,MAAM,WAAW,gCAAgC;IAC/C,aAAa,EAAE,uBAAuB,CAAC;CACxC;AAED,wBAAgB,2BAA2B,CAAC,EAAE,aAAa,EAAE,EAAE,gCAAgC,2CAsH9F"}
+{"version":3,"file":"notification-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/notification-settings-section.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAA2B,MAAM,yCAAyC,CAAC;AAGjG,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,gCAAgC,2CAmMzF"}

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

@@ -1,51 +1,25 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useTransition, useRef, useEffect } from 'react';
-import { Bell, Check } from 'lucide-react';
+import { useState, useTransition } from 'react';
+import { Bell } from 'lucide-react';
 import { toast } from 'sonner';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../ui/card.js';
-import { Label } from '../../ui/label.js';
-import { Switch } from '../../ui/switch.js';
-import { Separator } from '../../ui/separator.js';
+import { useTranslation } from 'react-i18next';
 import { updateSettingsAction } from '../../../app/actions/update-settings.js';
-const AGENT_EVENT_TOGGLES = [
-    { key: 'agentStarted', label: 'Agent Started' },
-    { key: 'phaseCompleted', label: 'Phase Completed' },
-    { key: 'waitingApproval', label: 'Waiting Approval' },
-    { key: 'agentCompleted', label: 'Agent Completed' },
-    { key: 'agentFailed', label: 'Agent Failed' },
-];
-const PR_EVENT_TOGGLES = [
-    { key: 'mergeReviewReady', label: 'Merge Review Ready' },
-    { key: 'prMerged', label: 'PR Merged' },
-    { key: 'prClosed', label: 'PR Closed' },
-    { key: 'prChecksPassed', label: 'PR Checks Passed' },
-    { key: 'prChecksFailed', label: 'PR Checks Failed' },
-    { key: 'prBlocked', label: 'PR Blocked' },
-];
-export function NotificationSettingsSection({ notifications }) {
-    const [inApp, setInApp] = useState(notifications.inApp.enabled);
-    const [events, setEvents] = useState({ ...notifications.events });
-    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]);
+import { SettingsSection, SwitchRow, SubsectionLabel } from './settings-section-utils.js';
+export function NotificationSettingsSection({ settings }) {
+    const { t } = useTranslation('web');
+    const [, startTransition] = useTransition();
+    const [inApp, setInApp] = useState(settings.notifications.inApp.enabled);
+    const [events, setEvents] = useState({ ...settings.notifications.events });
     function save(payload) {
         startTransition(async () => {
             const result = await updateSettingsAction(payload);
             if (!result.success) {
-                toast.error(result.error ?? 'Failed to save notification settings');
+                toast.error(result.error ?? t('settings.failedToSave'));
             }
         });
     }
-    function buildFullPayload(overrides = {}) {
+    function buildNotificationPayload(overrides = {}) {
         return {
             notifications: {
                 inApp: { enabled: overrides.inApp ?? inApp },
@@ -53,14 +27,57 @@ export function NotificationSettingsSection({ notifications }) {
             },
         };
     }
-    function handleInAppChange(value) {
-        setInApp(value);
-        save(buildFullPayload({ inApp: value }));
-    }
-    function handleEventChange(key, value) {
-        const newEvents = { ...events, [key]: value };
-        setEvents(newEvents);
-        save(buildFullPayload({ events: newEvents }));
-    }
-    return (_jsxs(Card, { id: "notifications", className: "scroll-mt-6", "data-testid": "notification-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(Bell, { className: "text-muted-foreground h-4 w-4" }), _jsx(CardTitle, { children: "Notifications" })] }), 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: "Configure notification channels and event preferences" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: "Channels" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { htmlFor: "notif-in-app", children: "In-App" }), _jsx(Switch, { id: "notif-in-app", "data-testid": "switch-in-app", checked: inApp, onCheckedChange: handleInAppChange })] })] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: "Agent Events" }), AGENT_EVENT_TOGGLES.map(({ key, label }) => (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { htmlFor: `notif-event-${key}`, children: label }), _jsx(Switch, { id: `notif-event-${key}`, "data-testid": `switch-event-${key}`, checked: events[key], onCheckedChange: (v) => handleEventChange(key, v) })] }, key)))] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: "PR Events" }), PR_EVENT_TOGGLES.map(({ key, label }) => (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { htmlFor: `notif-event-${key}`, children: label }), _jsx(Switch, { id: `notif-event-${key}`, "data-testid": `switch-event-${key}`, checked: events[key], onCheckedChange: (v) => handleEventChange(key, v) })] }, key)))] })] })] }));
+    return (_jsxs(SettingsSection, { icon: Bell, title: t('settings.notifications.title'), description: t('settings.notifications.sectionDescription'), testId: "notification-settings-section", tooltip: t('settings.notifications.hint'), tooltipLinks: [
+            {
+                label: t('settings.notifications.links.notificationSystem'),
+                href: 'https://github.com/jrmatherly/shipit/blob/main/specs/021-agent-notifications/spec.yaml',
+            },
+        ], children: [_jsx(SubsectionLabel, { children: t('settings.notifications.channels') }), _jsx(SwitchRow, { label: t('settings.notifications.inAppLabel'), description: t('settings.notifications.inAppDescription'), tooltip: "Master toggle for in-app toast notifications. When disabled, no event toasts will appear regardless of individual event settings below.", id: "notif-in-app", testId: "switch-in-app", checked: inApp, onChange: (v) => {
+                    setInApp(v);
+                    save(buildNotificationPayload({ inApp: v }));
+                } }), _jsx(SubsectionLabel, { children: t('settings.notifications.subsections.agentEvents') }), _jsx(SwitchRow, { label: t('settings.notifications.events.agentStarted'), tooltip: "Controls whether you receive an in-app toast notification when an agent begins working on a feature.", id: "notif-event-agentStarted", testId: "switch-event-agentStarted", checked: events.agentStarted, onChange: (v) => {
+                    const newEvents = { ...events, agentStarted: v };
+                    setEvents(newEvents);
+                    save(buildNotificationPayload({ events: newEvents }));
+                } }), _jsx(SwitchRow, { label: t('settings.notifications.events.phaseCompleted'), tooltip: "Controls whether you receive an in-app toast notification when an agent completes a workflow phase (e.g., requirements, planning, implementation).", id: "notif-event-phaseCompleted", testId: "switch-event-phaseCompleted", checked: events.phaseCompleted, onChange: (v) => {
+                    const newEvents = { ...events, phaseCompleted: v };
+                    setEvents(newEvents);
+                    save(buildNotificationPayload({ events: newEvents }));
+                } }), _jsx(SwitchRow, { label: t('settings.notifications.events.waitingApproval'), tooltip: "Controls whether you receive an in-app toast notification when a feature is paused and waiting for your approval to continue.", id: "notif-event-waitingApproval", testId: "switch-event-waitingApproval", checked: events.waitingApproval, onChange: (v) => {
+                    const newEvents = { ...events, waitingApproval: v };
+                    setEvents(newEvents);
+                    save(buildNotificationPayload({ events: newEvents }));
+                } }), _jsx(SwitchRow, { label: t('settings.notifications.events.agentCompleted'), tooltip: "Controls whether you receive an in-app toast notification when an agent finishes all work on a feature successfully.", id: "notif-event-agentCompleted", testId: "switch-event-agentCompleted", checked: events.agentCompleted, onChange: (v) => {
+                    const newEvents = { ...events, agentCompleted: v };
+                    setEvents(newEvents);
+                    save(buildNotificationPayload({ events: newEvents }));
+                } }), _jsx(SwitchRow, { label: t('settings.notifications.events.agentFailed'), tooltip: "Controls whether you receive an in-app toast notification when an agent encounters an error and stops working on a feature.", id: "notif-event-agentFailed", testId: "switch-event-agentFailed", checked: events.agentFailed, onChange: (v) => {
+                    const newEvents = { ...events, agentFailed: v };
+                    setEvents(newEvents);
+                    save(buildNotificationPayload({ events: newEvents }));
+                } }), _jsx(SubsectionLabel, { children: t('settings.notifications.subsections.pullRequestEvents') }), _jsx(SwitchRow, { label: t('settings.notifications.events.prMerged'), tooltip: "Controls whether you receive an in-app toast notification when a feature's pull request is merged into the target branch.", id: "notif-event-prMerged", testId: "switch-event-prMerged", checked: events.prMerged, onChange: (v) => {
+                    const newEvents = { ...events, prMerged: v };
+                    setEvents(newEvents);
+                    save(buildNotificationPayload({ events: newEvents }));
+                } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prClosed'), tooltip: "Controls whether you receive an in-app toast notification when a feature's pull request is closed without merging.", id: "notif-event-prClosed", testId: "switch-event-prClosed", checked: events.prClosed, onChange: (v) => {
+                    const newEvents = { ...events, prClosed: v };
+                    setEvents(newEvents);
+                    save(buildNotificationPayload({ events: newEvents }));
+                } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prChecksPassed'), tooltip: "Controls whether you receive an in-app toast notification when all CI checks pass on a feature's pull request.", id: "notif-event-prChecksPassed", testId: "switch-event-prChecksPassed", checked: events.prChecksPassed, onChange: (v) => {
+                    const newEvents = { ...events, prChecksPassed: v };
+                    setEvents(newEvents);
+                    save(buildNotificationPayload({ events: newEvents }));
+                } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prChecksFailed'), tooltip: "Controls whether you receive an in-app toast notification when CI checks fail on a feature's pull request.", id: "notif-event-prChecksFailed", testId: "switch-event-prChecksFailed", checked: events.prChecksFailed, onChange: (v) => {
+                    const newEvents = { ...events, prChecksFailed: v };
+                    setEvents(newEvents);
+                    save(buildNotificationPayload({ events: newEvents }));
+                } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prBlocked'), tooltip: "Controls whether you receive an in-app toast notification when a pull request is blocked by merge conflicts or branch protection rules.", id: "notif-event-prBlocked", testId: "switch-event-prBlocked", checked: events.prBlocked, onChange: (v) => {
+                    const newEvents = { ...events, prBlocked: v };
+                    setEvents(newEvents);
+                    save(buildNotificationPayload({ events: newEvents }));
+                } }), _jsx(SwitchRow, { label: t('settings.notifications.events.mergeReviewReady'), tooltip: "Controls whether you receive an in-app toast notification when a feature's PR passes all checks and is ready for your merge review.", id: "notif-event-mergeReviewReady", testId: "switch-event-mergeReviewReady", checked: events.mergeReviewReady, onChange: (v) => {
+                    const newEvents = { ...events, mergeReviewReady: v };
+                    setEvents(newEvents);
+                    save(buildNotificationPayload({ events: newEvents }));
+                } })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"notification-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/notification-settings-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAE9E,QAAA,MAAM,IAAI;;;;;;;CAO0C,CAAC;AAErD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA8BnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC"}
+{"version":3,"file":"notification-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/notification-settings-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAiC9E,QAAA,MAAM,IAAI;;;;;;;CAO0C,CAAC;AAErD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC"}