@shepai/cli 1.78.0-pr247.d196fda → 1.78.1-pr241.ee88d2d

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

@@ -1,12 +1,14 @@
 '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 { Eye, EyeOff, Check, Bot, Terminal, GitBranch, Activity, Bell, Flag, Database, Minus, Plus, ExternalLink, Settings2, } from 'lucide-react';
 import { toast } from 'sonner';
+import { cn } from '../../../lib/utils.js';
 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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/select.js';
 import { updateSettingsAction } from '../../../app/actions/update-settings.js';
 import { AgentAuthMethod, EditorType } from '../../../../../../packages/core/src/domain/generated/output.js';
@@ -23,18 +25,45 @@ const EDITOR_OPTIONS = [
     { value: EditorType.Zed, label: 'Zed' },
     { value: EditorType.Antigravity, label: 'Antigravity' },
 ];
+const SECTIONS = [
+    { id: 'agent', label: 'Agent', icon: Bot },
+    { id: 'environment', label: 'Environment', icon: Terminal },
+    { id: 'workflow', label: 'Workflow', icon: GitBranch },
+    { id: 'ci', label: 'CI', icon: Activity },
+    { id: 'notifications', label: 'Notifications', icon: Bell },
+    { id: 'feature-flags', label: 'Flags', icon: Flag },
+    { id: 'database', label: 'Database', icon: Database },
+];
 function useSaveIndicator() {
     const [isPending, startTransition] = useTransition();
+    const [showSaving, setShowSaving] = useState(false);
     const [showSaved, setShowSaved] = useState(false);
-    const prevPendingRef = useRef(false);
+    const minTimerRef = useRef(null);
+    const pendingDoneRef = useRef(false);
+    // Show "Saving..." with a minimum display time of 600ms
     useEffect(() => {
-        if (prevPendingRef.current && !isPending) {
-            setShowSaved(true);
-            const timer = setTimeout(() => setShowSaved(false), 2000);
-            return () => clearTimeout(timer);
+        if (isPending && !showSaving) {
+            setShowSaving(true);
+            pendingDoneRef.current = false;
+            minTimerRef.current = setTimeout(() => {
+                minTimerRef.current = null;
+                if (pendingDoneRef.current) {
+                    setShowSaving(false);
+                    setShowSaved(true);
+                    setTimeout(() => setShowSaved(false), 2000);
+                }
+            }, 350);
+        }
+        if (!isPending && showSaving) {
+            pendingDoneRef.current = true;
+            // If min timer already elapsed, transition now
+            if (!minTimerRef.current) {
+                setShowSaving(false);
+                setShowSaved(true);
+                setTimeout(() => setShowSaved(false), 2000);
+            }
         }
-        prevPendingRef.current = isPending;
-    }, [isPending]);
+    }, [isPending, showSaving]);
     const save = useCallback((payload) => {
         startTransition(async () => {
             const result = await updateSettingsAction(payload);
@@ -43,23 +72,53 @@ function useSaveIndicator() {
             }
         });
     }, [startTransition]);
-    return { isPending, showSaved, save };
+    return { showSaving, showSaved, save };
+}
+/* ── Reusable row components ── */
+function SettingsRow({ label, description, htmlFor, children, }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-4 border-b py-2.5 last:border-b-0", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Label, { htmlFor: htmlFor, className: "cursor-pointer text-sm font-normal whitespace-nowrap", children: label }), description ? (_jsx("p", { className: "text-muted-foreground text-[11px] leading-tight", children: description })) : null] }), _jsx("div", { className: "flex shrink-0 items-center gap-2", children: children })] }));
 }
-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: "cursor-pointer text-sm font-normal whitespace-nowrap", children: label }), _jsx("div", { className: "flex items-center gap-2", children: children })] }));
+function SwitchRow({ label, description, id, testId, checked, onChange, }) {
+    return (_jsx(SettingsRow, { label: label, description: description, htmlFor: id, children: _jsx(Switch, { id: id, "data-testid": testId, checked: checked, onCheckedChange: onChange, className: "cursor-pointer" }) }));
 }
-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 cursor-pointer", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: options.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] }) }));
+/* ── Section card wrapper ── */
+function SettingsSection({ icon: Icon, title, description, badge, testId, children, }) {
+    return (_jsxs("div", { className: "bg-background rounded-lg border", "data-testid": testId, children: [_jsxs("div", { className: "bg-muted/30 border-b px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { className: "text-muted-foreground h-3.5 w-3.5" }), _jsx("h2", { className: "text-sm font-semibold", children: title }), badge ? (_jsx("span", { className: "bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-[9px] font-medium tracking-wider uppercase", children: badge })) : null] }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-[11px]", children: description })] }), _jsx("div", { className: "px-4", children: children })] }));
 }
-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, className: "cursor-pointer" }) }));
+function NumberStepper({ id, testId, value, onChange, onBlur, placeholder, min = 1, max, step = 1, suffix, }) {
+    const numValue = value === '' ? undefined : parseInt(value, 10);
+    const decrement = () => {
+        const current = numValue ?? parseInt(placeholder, 10);
+        const next = Math.max(min, current - step);
+        onChange(String(next));
+    };
+    const increment = () => {
+        const current = numValue ?? parseInt(placeholder, 10);
+        const next = max != null ? Math.min(max, current + step) : current + step;
+        onChange(String(next));
+    };
+    return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("div", { className: "flex items-center overflow-hidden rounded-md border", children: [_jsx("button", { type: "button", onClick: () => {
+                            decrement();
+                        }, onMouseUp: onBlur, className: "text-muted-foreground hover:bg-muted hover:text-foreground flex h-8 w-7 cursor-pointer items-center justify-center border-r transition-colors", "aria-label": "Decrease", children: _jsx(Minus, { className: "h-3 w-3" }) }), _jsx("input", { id: id, "data-testid": testId, type: "text", inputMode: "numeric", pattern: "[0-9]*", value: value, placeholder: placeholder, onChange: (e) => {
+                            const v = e.target.value.replace(/[^0-9]/g, '');
+                            onChange(v);
+                        }, onBlur: onBlur, className: "h-8 w-14 bg-transparent text-center text-xs outline-none" }), _jsx("button", { type: "button", onClick: () => {
+                            increment();
+                        }, onMouseUp: onBlur, className: "text-muted-foreground hover:bg-muted hover:text-foreground flex h-8 w-7 cursor-pointer items-center justify-center border-l transition-colors", "aria-label": "Increase", children: _jsx(Plus, { className: "h-3 w-3" }) })] }), suffix ? _jsx("span", { className: "text-muted-foreground text-[11px]", children: suffix }) : null] }));
 }
+function SubsectionLabel({ children }) {
+    return (_jsx("div", { className: "border-b pt-3 pb-1", children: _jsx("span", { className: "text-muted-foreground text-[10px] font-semibold tracking-wider uppercase", children: children }) }));
+}
+function SectionHint({ children, links, }) {
+    return (_jsxs("div", { className: "hidden pt-2 lg:block", children: [_jsx("p", { className: "text-muted-foreground/70 text-[11px] leading-relaxed", children: children }), links != null && links.length > 0 ? (_jsx("div", { className: "mt-2 flex flex-col gap-1", children: links.map((link) => (_jsxs("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-[10px] transition-colors", children: [_jsx(ExternalLink, { className: "h-2.5 w-2.5" }), link.label] }, link.href))) })) : null] }));
+}
+/* ── Main component ── */
 export function SettingsPageClient({ settings, shepHome, dbFileSize }) {
-    const { isPending, showSaved, save } = useSaveIndicator();
+    const { showSaving, 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 authMethod = settings.agent.authMethod;
     const [token, setToken] = useState(settings.agent.token ?? '');
     const [showToken, setShowToken] = useState(false);
     // Environment state
@@ -133,99 +192,182 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize }) {
             },
         };
     }
-    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-sm font-bold 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 & Model", htmlFor: "agent-model-picker", children: _jsx(AgentModelPicker, { initialAgentType: agentType, initialModel: settings.models.default, mode: "settings", onAgentModelChange: (newAgent) => setAgentType(newAgent), className: "w-45" }) }), _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 cursor-pointer", 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 }) })] })] }));
+    const [activeSection, setActiveSection] = useState('agent');
+    // Track which section is in view via IntersectionObserver
+    useEffect(() => {
+        const els = SECTIONS.map((s) => document.getElementById(`section-${s.id}`)).filter(Boolean);
+        if (els.length === 0)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    setActiveSection(entry.target.id.replace('section-', ''));
+                }
+            }
+        }, { rootMargin: '-65px 0px -60% 0px', threshold: 0 });
+        for (const el of els)
+            observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    const scrollToSection = useCallback((id) => {
+        const el = document.getElementById(`section-${id}`);
+        if (!el)
+            return;
+        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        // Flash highlight
+        el.style.animation = 'none';
+        // Force reflow
+        void el.offsetHeight;
+        el.style.animation = 'section-flash 1s ease-out';
+    }, []);
+    return (_jsxs("div", { "data-testid": "settings-page-client", className: "max-w-5xl", children: [_jsx("div", { className: "bg-background/95 supports-backdrop-filter:bg-background/80 sticky top-0 z-10 grid grid-cols-1 gap-x-5 pt-6 pb-4 backdrop-blur lg:grid-cols-[1fr_280px]", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Settings2, { className: "text-muted-foreground h-4 w-4" }), _jsx("h1", { className: "text-sm font-bold tracking-tight", children: "Settings" }), _jsxs("span", { className: "relative h-4 w-16", children: [_jsx("span", { className: cn('text-muted-foreground absolute inset-0 flex items-center text-xs transition-opacity duration-300', showSaving ? 'opacity-100' : 'opacity-0'), children: "Saving..." }), _jsxs("span", { className: cn('absolute inset-0 flex items-center gap-1 text-xs text-green-600 transition-opacity duration-300', showSaved && !showSaving ? 'opacity-100' : 'opacity-0'), children: [_jsx(Check, { className: "h-3 w-3" }), "Saved"] })] }), _jsx("nav", { className: "ml-auto flex items-center gap-0.5", children: SECTIONS.map((s) => {
+                                const SectionIcon = s.icon;
+                                const isActive = activeSection === s.id;
+                                return (_jsxs("button", { type: "button", onClick: () => scrollToSection(s.id), className: cn('flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-1 text-[11px] transition-all', isActive
+                                        ? 'bg-accent text-foreground font-medium'
+                                        : 'text-muted-foreground/60 hover:text-foreground hover:bg-accent/50'), children: [_jsx(SectionIcon, { className: "h-3 w-3" }), _jsx("span", { className: "hidden sm:inline", children: s.label })] }, s.id));
+                            }) })] }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { id: "section-agent", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Bot, title: "Agent", description: "AI coding agent and authentication", testId: "agent-settings-section", children: [_jsx(SettingsRow, { label: "Agent & Model", description: "Provider and model for all operations", htmlFor: "agent-model-picker", children: _jsx(AgentModelPicker, { initialAgentType: agentType, initialModel: settings.models.default, mode: "settings", onAgentModelChange: (newAgent) => setAgentType(newAgent), className: "w-55" }) }), _jsx(SettingsRow, { label: "Authentication", description: "How the agent authenticates", htmlFor: "auth-method", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { children: _jsxs(Select, { value: authMethod, disabled: true, children: [_jsx(SelectTrigger, { id: "auth-method", "data-testid": "auth-method-select", className: "w-55 cursor-not-allowed text-xs opacity-60", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: AUTH_METHOD_OPTIONS.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] }) }) }), _jsx(TooltipContent, { children: "Coming soon" })] }) }) }), 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(SectionHint, { links: [
+                                    {
+                                        label: 'Agent system',
+                                        href: 'https://github.com/shep-ai/cli/blob/main/docs/architecture/agent-system.md',
+                                    },
+                                    {
+                                        label: 'Adding agents',
+                                        href: 'https://github.com/shep-ai/cli/blob/main/docs/development/adding-agents.md',
+                                    },
+                                    {
+                                        label: 'Configuration guide',
+                                        href: 'https://github.com/shep-ai/cli/blob/main/docs/guides/configuration.md',
+                                    },
+                                ], children: "Choose which AI coding agent powers your features. Each agent supports different models and capabilities. Authentication is resolved automatically via your active session." })] }), _jsxs("div", { id: "section-environment", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(SettingsSection, { icon: Terminal, title: "Environment", description: "Editor and shell preferences", testId: "environment-settings-section", children: _jsx(SettingsRow, { label: "Default Editor", description: "Editor launched for file operations", 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-55 cursor-pointer text-xs", 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 text-xs", children: [_jsx(Icon, { className: "h-4 w-4 shrink-0" }), opt.label] }) }, opt.value));
+                                                }) })] }) }) }), _jsx(SectionHint, { links: [
+                                    {
+                                        label: 'Configuration guide',
+                                        href: 'https://github.com/shep-ai/cli/blob/main/docs/guides/configuration.md',
+                                    },
+                                ], children: "Your preferred editor is used when opening files for review or editing during the development workflow." })] }), _jsxs("div", { id: "section-workflow", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: GitBranch, title: "Workflow", description: "Automation behavior after implementation", testId: "workflow-settings-section", children: [_jsx(SwitchRow, { label: "Auto-approve PRD", description: "Skip manual review of requirements", id: "allow-prd", testId: "switch-allow-prd", checked: allowPrd, onChange: (v) => {
+                                            setAllowPrd(v);
+                                            save(buildWorkflowPayload({ allowPrd: v }));
+                                        } }), _jsx(SwitchRow, { label: "Auto-approve Plan", description: "Skip manual review of implementation plan", id: "allow-plan", testId: "switch-allow-plan", checked: allowPlan, onChange: (v) => {
+                                            setAllowPlan(v);
+                                            save(buildWorkflowPayload({ allowPlan: v }));
+                                        } }), _jsx(SwitchRow, { label: "Auto-approve Merge", description: "Merge without manual review", id: "allow-merge", testId: "switch-allow-merge", checked: allowMerge, onChange: (v) => {
+                                            setAllowMerge(v);
+                                            save(buildWorkflowPayload({ allowMerge: v }));
+                                        } }), _jsx(SwitchRow, { label: "Push on complete", description: "Push to remote when implementation finishes", id: "push-on-complete", testId: "switch-push-on-complete", checked: pushOnComplete, onChange: (v) => {
+                                            setPushOnComplete(v);
+                                            save(buildWorkflowPayload({ pushOnComplete: v }));
+                                        } }), _jsx(SwitchRow, { label: "Open PR on complete", description: "Create a pull request when done", id: "open-pr", testId: "switch-open-pr", checked: openPr, onChange: (v) => {
+                                            setOpenPr(v);
+                                            save(buildWorkflowPayload({ openPr: v }));
+                                        } })] }), _jsx(SectionHint, { links: [
+                                    {
+                                        label: 'Approval gates',
+                                        href: 'https://github.com/shep-ai/cli/blob/main/specs/016-hitl-approval-gates/spec.yaml',
+                                    },
+                                    {
+                                        label: 'Push & PR flags',
+                                        href: 'https://github.com/shep-ai/cli/blob/main/specs/037-feature-pr-push-flags/spec.yaml',
+                                    },
+                                ], children: "Control how autonomous each feature run is. Auto-approve skips the human review pause at each phase. Push and PR options control what happens after successful implementation." })] }), _jsxs("div", { id: "section-ci", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Activity, title: "Continuous Integration", description: "Limits and timeouts for CI monitoring", testId: "ci-settings-section", children: [_jsx(SettingsRow, { label: "Max fix attempts", description: "Agent retries on failing CI", htmlFor: "ci-max-fix", children: _jsx(NumberStepper, { id: "ci-max-fix", testId: "ci-max-fix-input", placeholder: "3", value: ciMaxFix, onChange: setCiMaxFix, onBlur: () => {
+                                                if (ciMaxFix !== originalCiMaxFix)
+                                                    save(buildWorkflowPayload({ ciMaxFix }));
+                                            }, min: 1, max: 10 }) }), _jsx(SettingsRow, { label: "Watch timeout", description: "Max wait for CI completion", htmlFor: "ci-timeout", children: _jsx(NumberStepper, { id: "ci-timeout", testId: "ci-timeout-input", placeholder: "300", value: ciTimeout, onChange: setCiTimeout, onBlur: () => {
+                                                if (ciTimeout !== originalCiTimeout)
+                                                    save(buildWorkflowPayload({ ciTimeout }));
+                                            }, min: 30, step: 30, suffix: "sec" }) }), _jsx(SettingsRow, { label: "Max log size", description: "Truncate CI logs beyond this limit", htmlFor: "ci-log-max", children: _jsx(NumberStepper, { id: "ci-log-max", testId: "ci-log-max-input", placeholder: "50000", value: ciLogMax, onChange: setCiLogMax, onBlur: () => {
+                                                if (ciLogMax !== originalCiLogMax)
+                                                    save(buildWorkflowPayload({ ciLogMax }));
+                                            }, min: 1000, step: 5000, suffix: "chars" }) })] }), _jsx(SectionHint, { links: [
+                                    {
+                                        label: 'CI/CD pipeline',
+                                        href: 'https://github.com/shep-ai/cli/blob/main/docs/development/cicd.md',
+                                    },
+                                    {
+                                        label: 'CI security gates',
+                                        href: 'https://github.com/shep-ai/cli/blob/main/specs/003-cicd-security-gates/spec.md',
+                                    },
+                                ], children: "When a feature completes, the agent can watch CI and auto-fix failures. These limits prevent runaway retries and control how much log output is sent to the agent for analysis." })] }), _jsxs("div", { id: "section-notifications", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Bell, title: "Notifications", description: "How and when you get notified", testId: "notification-settings-section", children: [_jsx(SubsectionLabel, { children: "Channels" }), _jsx(SwitchRow, { label: "In-app", description: "Notifications inside the Shep UI", id: "notif-in-app", testId: "switch-in-app", checked: inApp, onChange: (v) => {
+                                            setInApp(v);
+                                            save(buildNotificationPayload({ inApp: v }));
+                                        } }), _jsx(SwitchRow, { label: "Browser", description: "Push notifications via the browser", id: "notif-browser", testId: "switch-browser", checked: browser, onChange: (v) => {
+                                            setBrowser(v);
+                                            save(buildNotificationPayload({ browser: v }));
+                                        } }), _jsx(SwitchRow, { label: "Desktop", description: "Native OS notifications", id: "notif-desktop", testId: "switch-desktop", checked: desktop, onChange: (v) => {
+                                            setDesktop(v);
+                                            save(buildNotificationPayload({ desktop: v }));
+                                        } }), _jsx(SubsectionLabel, { children: "Agent Events" }), _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(SubsectionLabel, { children: "Pull Request Events" }), _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(SectionHint, { links: [
+                                    {
+                                        label: 'Notification system',
+                                        href: 'https://github.com/shep-ai/cli/blob/main/specs/021-agent-notifications/spec.yaml',
+                                    },
+                                ], children: "Three notification channels keep you in the loop: in-app toasts, browser push notifications, and native desktop alerts. Fine-tune which agent lifecycle events trigger a notification." })] }), _jsxs("div", { id: "section-feature-flags", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Flag, title: "Feature Flags", description: "Enable or disable experimental features", badge: "Experimental", testId: "feature-flags-settings-section", children: [_jsx(SwitchRow, { label: "Skills", description: "Enable the skills system for agent capabilities", 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", description: "Enable environment deployment workflows", 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", description: "Show debug panels and verbose logging", id: "flag-debug", testId: "switch-flag-debug", checked: flags.debug, onChange: (v) => {
+                                            const newFlags = { ...flags, debug: v };
+                                            setFlags(newFlags);
+                                            save({ featureFlags: newFlags });
+                                        } })] }), _jsx(SectionHint, { children: "Experimental features that are still under development. Enable at your own risk \u2014 they may change or be removed in future versions. Debug mode adds verbose logging useful for troubleshooting." })] }), _jsxs("div", { id: "section-database", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Database, title: "Database", description: "Local storage information", testId: "database-settings-section", children: [_jsx(SettingsRow, { label: "Location", description: "Path to the local SQLite database", 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 }) })] }), _jsx(SectionHint, { links: [
+                                    {
+                                        label: 'Settings service',
+                                        href: 'https://github.com/shep-ai/cli/blob/main/docs/architecture/settings-service.md',
+                                    },
+                                    {
+                                        label: 'Settings spec',
+                                        href: 'https://github.com/shep-ai/cli/blob/main/specs/005-global-settings-service/spec.md',
+                                    },
+                                ], children: "All settings are stored in a local SQLite database at ~/.shep/data. The database uses a singleton record pattern with automatic migrations on startup." })] })] })] }));
 }

package/dist/src/presentation/web/hooks/use-feature-logs.d.ts

@@ -0,0 +1,7 @@
+export interface UseFeatureLogsResult {
+    content: string;
+    isConnected: boolean;
+    error: string | null;
+}
+export declare function useFeatureLogs(featureId: string | null | undefined): UseFeatureLogsResult;
+//# sourceMappingURL=use-feature-logs.d.ts.map

package/dist/src/presentation/web/hooks/use-feature-logs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-feature-logs.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-feature-logs.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,oBAAoB,CA4DzF"}

package/dist/src/presentation/web/hooks/use-feature-logs.js

@@ -0,0 +1,52 @@
+'use client';
+import { useState, useEffect, useRef, useCallback } from 'react';
+export function useFeatureLogs(featureId) {
+    const [content, setContent] = useState('');
+    const [isConnected, setIsConnected] = useState(false);
+    const [error, setError] = useState(null);
+    const eventSourceRef = useRef(null);
+    const cleanup = useCallback(() => {
+        if (eventSourceRef.current) {
+            eventSourceRef.current.close();
+            eventSourceRef.current = null;
+        }
+        setIsConnected(false);
+    }, []);
+    useEffect(() => {
+        if (!featureId) {
+            setContent('');
+            setIsConnected(false);
+            setError(null);
+            return;
+        }
+        // Reset state for new featureId
+        setContent('');
+        setError(null);
+        // Connect EventSource for live updates
+        const es = new EventSource(`/api/feature-logs?featureId=${featureId}`);
+        eventSourceRef.current = es;
+        es.onopen = () => {
+            setIsConnected(true);
+        };
+        es.addEventListener('initial', (event) => {
+            const data = JSON.parse(event.data);
+            setContent(data.content);
+        });
+        es.addEventListener('log', (event) => {
+            const data = JSON.parse(event.data);
+            setContent((prev) => prev + data.content);
+        });
+        es.addEventListener('error', (event) => {
+            const data = JSON.parse(event.data);
+            setError(data.error);
+        });
+        es.onerror = () => {
+            setIsConnected(false);
+        };
+        return () => {
+            es.close();
+            eventSourceRef.current = null;
+        };
+    }, [featureId, cleanup]);
+    return { content, isConnected, error };
+}