@shipit-ai/cli 1.167.1 → 1.169.0

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

@@ -1,61 +1,59 @@
 '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,
+    };
     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 });
+                } })] }));
 }

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,KAexB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAezB,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,38 @@ 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,
+            },
         },
     },
 };
 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,
+            },
         },
     },
 };

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/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"}

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

@@ -1,13 +1,6 @@
 import { NotificationSettingsSection } from './notification-settings-section.js';
-const meta = {
-    title: 'Features/Settings/NotificationSettingsSection',
-    component: NotificationSettingsSection,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-};
-export default meta;
+import { createDefaultSettings } from '../../../../../../packages/core/src/domain/factories/settings-defaults.factory.js';
+const baseSettings = createDefaultSettings();
 const allEvents = {
     agentStarted: true,
     phaseCompleted: true,
@@ -34,33 +27,48 @@ const noEvents = {
     prChecksFailed: false,
     prBlocked: false,
 };
+const meta = {
+    title: 'Features/Settings/NotificationSettingsSection',
+    component: NotificationSettingsSection,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+export default meta;
 export const Default = {
     args: {
-        notifications: {
-            inApp: { enabled: true },
-            browser: { enabled: false },
-            desktop: { enabled: false },
-            events: allEvents,
+        settings: {
+            ...baseSettings,
+            notifications: {
+                ...baseSettings.notifications,
+                inApp: { enabled: true },
+                events: allEvents,
+            },
         },
     },
 };
 export const AllEnabled = {
     args: {
-        notifications: {
-            inApp: { enabled: true },
-            browser: { enabled: false },
-            desktop: { enabled: false },
-            events: allEvents,
+        settings: {
+            ...baseSettings,
+            notifications: {
+                ...baseSettings.notifications,
+                inApp: { enabled: true },
+                events: allEvents,
+            },
         },
     },
 };
 export const AllDisabled = {
     args: {
-        notifications: {
-            inApp: { enabled: false },
-            browser: { enabled: false },
-            desktop: { enabled: false },
-            events: noEvents,
+        settings: {
+            ...baseSettings,
+            notifications: {
+                ...baseSettings.notifications,
+                inApp: { enabled: false },
+                events: noEvents,
+            },
         },
     },
 };

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

@@ -1 +1 @@
-{"version":3,"file":"settings-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.tsx"],"names":[],"mappings":"AAmDA,OAAO,KAAK,EACV,QAAQ,EAGT,MAAM,yCAAyC,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AA8BzE,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACzC,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;CACpC;AAoDD,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,GAChB,EAAE,uBAAuB,2CAq8BzB"}
+{"version":3,"file":"settings-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAiBzE,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACzC,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;CACpC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,GAChB,EAAE,uBAAuB,2CAqJzB"}