@shepai/cli 1.77.1 → 1.77.2-pr240.0ae5c6e

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

@@ -0,0 +1,45 @@
+'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 { 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 { 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',
+};
+const FLAG_LABELS = {
+    skills: 'Skills',
+    envDeploy: 'Deployments',
+    debug: 'Debug',
+};
+const FLAG_KEYS = ['skills', 'envDeploy', 'debug'];
+export function FeatureFlagsSettingsSection({ featureFlags }) {
+    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);
+        startTransition(async () => {
+            const result = await updateSettingsAction({ featureFlags: newFlags });
+            if (!result.success) {
+                toast.error(result.error ?? 'Failed to save feature flags');
+            }
+        });
+    }
+    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))) })] }));
+}

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

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { FeatureFlagsSettingsSection } from './feature-flags-settings-section.js';
+declare const meta: {
+    title: string;
+    component: typeof FeatureFlagsSettingsSection;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AllEnabled: Story;
+export declare const AllDisabled: Story;
+//# sourceMappingURL=feature-flags-settings-section.stories.d.ts.map

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

@@ -0,0 +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,kBAAkB,CAAC;AACvD,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,KAQrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC"}

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

@@ -0,0 +1,37 @@
+import { FeatureFlagsSettingsSection } from './feature-flags-settings-section.js';
+const meta = {
+    title: 'Features/Settings/FeatureFlagsSettingsSection',
+    component: FeatureFlagsSettingsSection,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        featureFlags: {
+            skills: false,
+            envDeploy: false,
+            debug: false,
+        },
+    },
+};
+export const AllEnabled = {
+    args: {
+        featureFlags: {
+            skills: true,
+            envDeploy: true,
+            debug: true,
+        },
+    },
+};
+export const AllDisabled = {
+    args: {
+        featureFlags: {
+            skills: false,
+            envDeploy: false,
+            debug: false,
+        },
+    },
+};

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

@@ -0,0 +1,6 @@
+import type { NotificationPreferences } from '../../../../../../packages/core/src/domain/generated/output.js';
+export interface NotificationSettingsSectionProps {
+    notifications: NotificationPreferences;
+}
+export declare function NotificationSettingsSection({ notifications }: 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

@@ -0,0 +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,sCAAsC,CAAC;AAiBpF,MAAM,WAAW,gCAAgC;IAC/C,aAAa,EAAE,uBAAuB,CAAC;CACxC;AAED,wBAAgB,2BAA2B,CAAC,EAAE,aAAa,EAAE,EAAE,gCAAgC,2CAkJ9F"}

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

@@ -0,0 +1,68 @@
+'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 { 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 { 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: 'prMerged', label: 'PR Merged' },
+    { key: 'prClosed', label: 'PR Closed' },
+    { key: 'prChecksPassed', label: 'PR Checks Passed' },
+    { key: 'prChecksFailed', label: 'PR Checks Failed' },
+];
+export function NotificationSettingsSection({ notifications }) {
+    const [inApp, setInApp] = useState(notifications.inApp.enabled);
+    const [browser, setBrowser] = useState(notifications.browser.enabled);
+    const [desktop, setDesktop] = useState(notifications.desktop.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]);
+    function save(payload) {
+        startTransition(async () => {
+            const result = await updateSettingsAction(payload);
+            if (!result.success) {
+                toast.error(result.error ?? 'Failed to save notification settings');
+            }
+        });
+    }
+    function buildFullPayload(overrides = {}) {
+        return {
+            notifications: {
+                inApp: { enabled: overrides.inApp ?? inApp },
+                browser: { enabled: overrides.browser ?? browser },
+                desktop: { enabled: overrides.desktop ?? desktop },
+                events: overrides.events ?? events,
+            },
+        };
+    }
+    function handleChannelChange(channel, setter, value) {
+        setter(value);
+        save(buildFullPayload({ [channel]: 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: (v) => handleChannelChange('inApp', setInApp, v) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { htmlFor: "notif-browser", children: "Browser" }), _jsx(Switch, { id: "notif-browser", "data-testid": "switch-browser", checked: browser, onCheckedChange: (v) => handleChannelChange('browser', setBrowser, v) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { htmlFor: "notif-desktop", children: "Desktop" }), _jsx(Switch, { id: "notif-desktop", "data-testid": "switch-desktop", checked: desktop, onCheckedChange: (v) => handleChannelChange('desktop', setDesktop, v) })] })] }), _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)))] })] })] }));
+}

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

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

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

@@ -0,0 +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,kBAAkB,CAAC;AACvD,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;AA0BnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC"}

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

@@ -0,0 +1,62 @@
+import { NotificationSettingsSection } from './notification-settings-section.js';
+const meta = {
+    title: 'Features/Settings/NotificationSettingsSection',
+    component: NotificationSettingsSection,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+export default meta;
+const allEvents = {
+    agentStarted: true,
+    phaseCompleted: true,
+    waitingApproval: true,
+    agentCompleted: true,
+    agentFailed: true,
+    prMerged: true,
+    prClosed: true,
+    prChecksPassed: true,
+    prChecksFailed: true,
+};
+const noEvents = {
+    agentStarted: false,
+    phaseCompleted: false,
+    waitingApproval: false,
+    agentCompleted: false,
+    agentFailed: false,
+    prMerged: false,
+    prClosed: false,
+    prChecksPassed: false,
+    prChecksFailed: false,
+};
+export const Default = {
+    args: {
+        notifications: {
+            inApp: { enabled: true },
+            browser: { enabled: true },
+            desktop: { enabled: false },
+            events: allEvents,
+        },
+    },
+};
+export const AllEnabled = {
+    args: {
+        notifications: {
+            inApp: { enabled: true },
+            browser: { enabled: true },
+            desktop: { enabled: true },
+            events: allEvents,
+        },
+    },
+};
+export const AllDisabled = {
+    args: {
+        notifications: {
+            inApp: { enabled: false },
+            browser: { enabled: false },
+            desktop: { enabled: false },
+            events: noEvents,
+        },
+    },
+};

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

@@ -0,0 +1,8 @@
+import type { Settings } from '../../../../../../packages/core/src/domain/generated/output.js';
+export interface SettingsPageClientProps {
+    settings: Settings;
+    shepHome: string;
+    dbFileSize: string;
+}
+export declare function SettingsPageClient({ settings, shepHome, dbFileSize }: SettingsPageClientProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=settings-page-client.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"settings-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,QAAQ,EAGT,MAAM,sCAAsC,CAAC;AAwB9C,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB;AAuGD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,uBAAuB,2CAsiB7F"}

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

@@ -0,0 +1,245 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useTransition, useRef, useEffect, useCallback } from 'react';
+import { Eye, EyeOff, Check } from 'lucide-react';
+import { toast } from 'sonner';
+import { Label } from '../../ui/label.js';
+import { Input } from '../../ui/input.js';
+import { Button } from '../../ui/button.js';
+import { Switch } from '../../ui/switch.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/select.js';
+import { updateSettingsAction } from '../../../app/actions/update-settings.js';
+import { AgentType, AgentAuthMethod, EditorType } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { getAgentTypeIcon } from '../../common/feature-node/agent-type-icons.js';
+import { getEditorTypeIcon } from '../../common/editor-type-icons.js';
+const AGENT_TYPE_OPTIONS = [
+    { value: AgentType.ClaudeCode, label: 'Claude Code' },
+    { value: AgentType.Cursor, label: 'Cursor' },
+    { value: AgentType.GeminiCli, label: 'Gemini CLI' },
+    { value: AgentType.Aider, label: 'Aider' },
+    { value: AgentType.Continue, label: 'Continue' },
+    { value: AgentType.Dev, label: 'Dev' },
+];
+const AUTH_METHOD_OPTIONS = [
+    { value: AgentAuthMethod.Session, label: 'Session' },
+    { value: AgentAuthMethod.Token, label: 'Token' },
+];
+const EDITOR_OPTIONS = [
+    { value: EditorType.VsCode, label: 'VS Code' },
+    { value: EditorType.Cursor, label: 'Cursor' },
+    { value: EditorType.Windsurf, label: 'Windsurf' },
+    { value: EditorType.Zed, label: 'Zed' },
+    { value: EditorType.Antigravity, label: 'Antigravity' },
+];
+function useSaveIndicator() {
+    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]);
+    const save = useCallback((payload) => {
+        startTransition(async () => {
+            const result = await updateSettingsAction(payload);
+            if (!result.success) {
+                toast.error(result.error ?? 'Failed to save settings');
+            }
+        });
+    }, [startTransition]);
+    return { isPending, showSaved, save };
+}
+function SettingsRow({ label, htmlFor, children, }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-4 border-b py-3 last:border-b-0", children: [_jsx(Label, { htmlFor: htmlFor, className: "text-sm font-normal whitespace-nowrap", children: label }), _jsx("div", { className: "flex items-center gap-2", children: children })] }));
+}
+function SelectRow({ label, id, testId, value, options, onChange, }) {
+    return (_jsx(SettingsRow, { label: label, htmlFor: id, children: _jsxs(Select, { value: value, onValueChange: onChange, children: [_jsx(SelectTrigger, { id: id, "data-testid": testId, className: "w-45", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: options.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] }) }));
+}
+function SwitchRow({ label, id, testId, checked, onChange, }) {
+    return (_jsx(SettingsRow, { label: label, htmlFor: id, children: _jsx(Switch, { id: id, "data-testid": testId, checked: checked, onCheckedChange: onChange }) }));
+}
+export function SettingsPageClient({ settings, shepHome, dbFileSize }) {
+    const { isPending, showSaved, save } = useSaveIndicator();
+    const featureFlags = settings.featureFlags ?? { skills: false, envDeploy: false, debug: false };
+    // Agent state
+    const [agentType, setAgentType] = useState(settings.agent.type);
+    const [authMethod, setAuthMethod] = useState(settings.agent.authMethod);
+    const [token, setToken] = useState(settings.agent.token ?? '');
+    const [showToken, setShowToken] = useState(false);
+    // Environment state
+    const [editor, setEditor] = useState(settings.environment.defaultEditor);
+    const shell = settings.environment.shellPreference;
+    // Workflow state
+    const [openPr, setOpenPr] = useState(settings.workflow.openPrOnImplementationComplete);
+    const [pushOnComplete, setPushOnComplete] = useState(settings.workflow.approvalGateDefaults.pushOnImplementationComplete);
+    const [allowPrd, setAllowPrd] = useState(settings.workflow.approvalGateDefaults.allowPrd);
+    const [allowPlan, setAllowPlan] = useState(settings.workflow.approvalGateDefaults.allowPlan);
+    const [allowMerge, setAllowMerge] = useState(settings.workflow.approvalGateDefaults.allowMerge);
+    const [ciMaxFix, setCiMaxFix] = useState(settings.workflow.ciMaxFixAttempts != null ? String(settings.workflow.ciMaxFixAttempts) : '');
+    const [ciTimeout, setCiTimeout] = useState(settings.workflow.ciWatchTimeoutMs != null
+        ? String(Math.round(settings.workflow.ciWatchTimeoutMs / 1000))
+        : '');
+    const [ciLogMax, setCiLogMax] = useState(settings.workflow.ciLogMaxChars != null ? String(settings.workflow.ciLogMaxChars) : '');
+    // Notification state
+    const [inApp, setInApp] = useState(settings.notifications.inApp.enabled);
+    const [browser, setBrowser] = useState(settings.notifications.browser.enabled);
+    const [desktop, setDesktop] = useState(settings.notifications.desktop.enabled);
+    const [events, setEvents] = useState({ ...settings.notifications.events });
+    // Feature flags state
+    const [flags, setFlags] = useState({ ...featureFlags });
+    // Original CI values for blur comparison
+    const originalCiMaxFix = settings.workflow.ciMaxFixAttempts != null ? String(settings.workflow.ciMaxFixAttempts) : '';
+    const originalCiTimeout = settings.workflow.ciWatchTimeoutMs != null
+        ? String(Math.round(settings.workflow.ciWatchTimeoutMs / 1000))
+        : '';
+    const originalCiLogMax = settings.workflow.ciLogMaxChars != null ? String(settings.workflow.ciLogMaxChars) : '';
+    function parseOptionalInt(value) {
+        if (value === '')
+            return undefined;
+        const n = parseInt(value, 10);
+        return Number.isNaN(n) || n <= 0 ? undefined : n;
+    }
+    // Agent helpers
+    function buildAgentPayload(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 };
+    }
+    // Workflow helpers
+    function buildWorkflowPayload(overrides = {}) {
+        const timeoutSeconds = parseOptionalInt(overrides.ciTimeout ?? ciTimeout);
+        return {
+            workflow: {
+                openPrOnImplementationComplete: overrides.openPr ?? openPr,
+                approvalGateDefaults: {
+                    pushOnImplementationComplete: overrides.pushOnComplete ?? pushOnComplete,
+                    allowPrd: overrides.allowPrd ?? allowPrd,
+                    allowPlan: overrides.allowPlan ?? allowPlan,
+                    allowMerge: overrides.allowMerge ?? allowMerge,
+                },
+                ciMaxFixAttempts: parseOptionalInt(overrides.ciMaxFix ?? ciMaxFix),
+                ciWatchTimeoutMs: timeoutSeconds != null ? timeoutSeconds * 1000 : undefined,
+                ciLogMaxChars: parseOptionalInt(overrides.ciLogMax ?? ciLogMax),
+            },
+        };
+    }
+    // Notification helpers
+    function buildNotificationPayload(overrides = {}) {
+        return {
+            notifications: {
+                inApp: { enabled: overrides.inApp ?? inApp },
+                browser: { enabled: overrides.browser ?? browser },
+                desktop: { enabled: overrides.desktop ?? desktop },
+                events: overrides.events ?? events,
+            },
+        };
+    }
+    return (_jsxs("div", { "data-testid": "settings-page-client", className: "max-w-lg", children: [_jsxs("div", { className: "flex items-center justify-between border-b pb-3", children: [_jsx("h1", { className: "text-lg font-semibold tracking-tight", children: "Settings" }), 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] }), _jsxs("div", { children: [_jsx("h2", { className: "text-muted-foreground mt-6 mb-1 text-xs font-medium tracking-wide uppercase", "data-testid": "agent-settings-section", children: "Agent" }), _jsx(SettingsRow, { label: "Agent", htmlFor: "agent-type", children: _jsxs(Select, { value: agentType, onValueChange: (v) => {
+                                setAgentType(v);
+                                save(buildAgentPayload({ type: v }));
+                            }, children: [_jsx(SelectTrigger, { id: "agent-type", "data-testid": "agent-type-select", className: "w-45", 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));
+                                    }) })] }) }), _jsx(SelectRow, { label: "Authentication", id: "auth-method", testId: "auth-method-select", value: authMethod, options: AUTH_METHOD_OPTIONS, onChange: (v) => {
+                            setAuthMethod(v);
+                            save(buildAgentPayload({ authMethod: v }));
+                        } }), authMethod === AgentAuthMethod.Token && (_jsx(SettingsRow, { label: "API Token", htmlFor: "agent-token", children: _jsxs("div", { className: "relative w-45", children: [_jsx(Input, { id: "agent-token", "data-testid": "agent-token-input", type: showToken ? 'text' : 'password', value: token, onChange: (e) => setToken(e.target.value), onBlur: () => {
+                                        if (token !== (settings.agent.token ?? '')) {
+                                            save(buildAgentPayload({ token }));
+                                        }
+                                    }, placeholder: "Enter token", className: "pr-8" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "absolute top-0 right-0 h-full px-2 hover:bg-transparent", onClick: () => setShowToken(!showToken), "data-testid": "toggle-token-visibility", "aria-label": showToken ? 'Hide token' : 'Show token', children: showToken ? _jsx(EyeOff, { className: "h-3 w-3" }) : _jsx(Eye, { className: "h-3 w-3" }) })] }) })), _jsx("h2", { className: "text-muted-foreground mt-6 mb-1 text-xs font-medium tracking-wide uppercase", "data-testid": "environment-settings-section", children: "Environment" }), _jsx(SettingsRow, { label: "Editor", htmlFor: "default-editor", children: _jsxs(Select, { value: editor, onValueChange: (v) => {
+                                setEditor(v);
+                                save({ environment: { defaultEditor: v, shellPreference: shell } });
+                            }, children: [_jsx(SelectTrigger, { id: "default-editor", "data-testid": "editor-select", className: "w-45", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: EDITOR_OPTIONS.map((opt) => {
+                                        const Icon = getEditorTypeIcon(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));
+                                    }) })] }) }), _jsx("h2", { className: "text-muted-foreground mt-6 mb-1 text-xs font-medium tracking-wide uppercase", "data-testid": "workflow-settings-section", children: "Workflow" }), _jsx(SwitchRow, { label: "Open PR on complete", id: "open-pr", testId: "switch-open-pr", checked: openPr, onChange: (v) => {
+                            setOpenPr(v);
+                            save(buildWorkflowPayload({ openPr: v }));
+                        } }), _jsx(SwitchRow, { label: "Push on complete", id: "push-on-complete", testId: "switch-push-on-complete", checked: pushOnComplete, onChange: (v) => {
+                            setPushOnComplete(v);
+                            save(buildWorkflowPayload({ pushOnComplete: v }));
+                        } }), _jsx(SwitchRow, { label: "Auto-approve PRD", id: "allow-prd", testId: "switch-allow-prd", checked: allowPrd, onChange: (v) => {
+                            setAllowPrd(v);
+                            save(buildWorkflowPayload({ allowPrd: v }));
+                        } }), _jsx(SwitchRow, { label: "Auto-approve Plan", id: "allow-plan", testId: "switch-allow-plan", checked: allowPlan, onChange: (v) => {
+                            setAllowPlan(v);
+                            save(buildWorkflowPayload({ allowPlan: v }));
+                        } }), _jsx(SwitchRow, { label: "Auto-approve Merge", id: "allow-merge", testId: "switch-allow-merge", checked: allowMerge, onChange: (v) => {
+                            setAllowMerge(v);
+                            save(buildWorkflowPayload({ allowMerge: v }));
+                        } }), _jsx("h2", { className: "text-muted-foreground mt-6 mb-1 text-xs font-medium tracking-wide uppercase", "data-testid": "ci-settings-section", children: "CI" }), _jsx(SettingsRow, { label: "Max fix attempts", htmlFor: "ci-max-fix", children: _jsx(Input, { id: "ci-max-fix", "data-testid": "ci-max-fix-input", type: "text", inputMode: "numeric", pattern: "[0-9]*", placeholder: "3", value: ciMaxFix, onChange: (e) => setCiMaxFix(e.target.value), onBlur: () => {
+                                if (ciMaxFix !== originalCiMaxFix)
+                                    save(buildWorkflowPayload({ ciMaxFix }));
+                            }, className: "w-20" }) }), _jsx(SettingsRow, { label: "Watch timeout (s)", htmlFor: "ci-timeout", children: _jsx(Input, { id: "ci-timeout", "data-testid": "ci-timeout-input", type: "text", inputMode: "numeric", pattern: "[0-9]*", placeholder: "300", value: ciTimeout, onChange: (e) => setCiTimeout(e.target.value), onBlur: () => {
+                                if (ciTimeout !== originalCiTimeout)
+                                    save(buildWorkflowPayload({ ciTimeout }));
+                            }, className: "w-20" }) }), _jsx(SettingsRow, { label: "Max log chars", htmlFor: "ci-log-max", children: _jsx(Input, { id: "ci-log-max", "data-testid": "ci-log-max-input", type: "text", inputMode: "numeric", pattern: "[0-9]*", placeholder: "50000", value: ciLogMax, onChange: (e) => setCiLogMax(e.target.value), onBlur: () => {
+                                if (ciLogMax !== originalCiLogMax)
+                                    save(buildWorkflowPayload({ ciLogMax }));
+                            }, className: "w-20" }) }), _jsx("h2", { className: "text-muted-foreground mt-6 mb-1 text-xs font-medium tracking-wide uppercase", "data-testid": "notification-settings-section", children: "Notifications" }), _jsx(SwitchRow, { label: "In-app", id: "notif-in-app", testId: "switch-in-app", checked: inApp, onChange: (v) => {
+                            setInApp(v);
+                            save(buildNotificationPayload({ inApp: v }));
+                        } }), _jsx(SwitchRow, { label: "Browser", id: "notif-browser", testId: "switch-browser", checked: browser, onChange: (v) => {
+                            setBrowser(v);
+                            save(buildNotificationPayload({ browser: v }));
+                        } }), _jsx(SwitchRow, { label: "Desktop", id: "notif-desktop", testId: "switch-desktop", checked: desktop, onChange: (v) => {
+                            setDesktop(v);
+                            save(buildNotificationPayload({ desktop: v }));
+                        } }), _jsx(SwitchRow, { label: "Agent started", 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: "Phase completed", 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: "Waiting approval", 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: "Agent completed", 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: "Agent failed", 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(SwitchRow, { label: "PR merged", 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: "PR closed", 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: "PR checks passed", 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: "PR checks failed", 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("h2", { className: "text-muted-foreground mt-6 mb-1 text-xs font-medium tracking-wide uppercase", "data-testid": "feature-flags-settings-section", children: "Feature Flags" }), _jsx(SwitchRow, { label: "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: "Deployments", 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: "Debug", id: "flag-debug", testId: "switch-flag-debug", checked: flags.debug, onChange: (v) => {
+                            const newFlags = { ...flags, debug: v };
+                            setFlags(newFlags);
+                            save({ featureFlags: newFlags });
+                        } }), _jsx("h2", { className: "text-muted-foreground mt-6 mb-1 text-xs font-medium tracking-wide uppercase", "data-testid": "database-settings-section", children: "Database" }), _jsx(SettingsRow, { label: "Location", children: _jsx("span", { className: "text-muted-foreground max-w-50 truncate font-mono text-xs", "data-testid": "shep-home-path", children: shepHome }) }), _jsx(SettingsRow, { label: "Size", children: _jsx("span", { className: "text-muted-foreground text-xs", "data-testid": "db-file-size", children: dbFileSize }) })] })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"settings-page-client.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAM5D,QAAA,MAAM,IAAI;;;;;;;CAOiC,CAAC;AAE5C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkBzB,CAAC"}

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

@@ -0,0 +1,39 @@
+import { SettingsPageClient } from './settings-page-client.js';
+import { createDefaultSettings } from '../../../../../../packages/core/src/domain/factories/settings-defaults.factory.js';
+import { AgentType, AgentAuthMethod } from '../../../../../../packages/core/src/domain/generated/output.js';
+const defaultSettings = createDefaultSettings();
+const meta = {
+    title: 'Features/Settings/SettingsPageClient',
+    component: SettingsPageClient,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        settings: defaultSettings,
+        shepHome: '/home/user/.shep',
+        dbFileSize: '2.4 MB',
+    },
+};
+export const AllSections = {
+    args: {
+        settings: {
+            ...defaultSettings,
+            agent: {
+                type: AgentType.GeminiCli,
+                authMethod: AgentAuthMethod.Token,
+                token: 'sk-test-token-12345',
+            },
+            featureFlags: {
+                skills: true,
+                envDeploy: true,
+                debug: false,
+            },
+        },
+        shepHome: '/opt/shep',
+        dbFileSize: '12.8 MB',
+    },
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/workflow-settings-section.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE3E,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,cAAc,CAAC;CAC1B;AAED,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,EAAE,4BAA4B,2CAgQjF"}