@shipit-ai/cli 1.167.1 → 1.169.0

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

@@ -1,36 +1,20 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useTransition, useRef, useEffect, useCallback } from 'react';
-import { Check, Bot, Terminal, GitBranch, Activity, Bell, Flag, Database, Globe, Settings2, Timer, MessageSquare, LayoutGrid, } from 'lucide-react';
-import { toast } from 'sonner';
+import { useState, useEffect } from 'react';
+import { Bot, Terminal, GitBranch, Activity, Bell, Flag, Database, Timer, MessageSquare, LayoutGrid, LayoutList, } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { cn } from '../../../lib/utils.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/select.js';
-import { Badge } from '../../ui/badge.js';
-import { updateSettingsAction } from '../../../app/actions/update-settings.js';
-import { Language, TerminalType, } from '../../../../../../packages/core/src/domain/generated/output.js';
-import { getEditorTypeIcon } from '../../common/editor-type-icons.js';
-import { AgentModelPicker } from '../../features/settings/AgentModelPicker/index.js';
-import { LanguageSettingsSection } from '../../features/settings/language-settings-section.js';
-import { CiSettingsSection } from '../../features/settings/ci-settings-section.js';
-import { StageTimeoutsSettingsSection } from '../../features/settings/stage-timeouts-settings-section.js';
-import { InteractiveAgentSettingsSection } from '../../features/settings/interactive-agent-settings-section.js';
-import { FabLayoutSettingsSection } from '../../features/settings/fab-layout-settings-section.js';
-import { SettingsSection, SettingsRow, SwitchRow, NumberStepper, SubsectionLabel, SectionHint, } from '../../features/settings/settings-section-utils.js';
-const DEFAULT_EDITOR_OPTIONS = [
-    { id: 'vscode', name: 'VS Code', available: true },
-    { id: 'cursor', name: 'Cursor', available: true },
-    { id: 'windsurf', name: 'Windsurf', available: true },
-    { id: 'zed', name: 'Zed', available: true },
-    { id: 'antigravity', name: 'Antigravity', available: true },
-];
-const DEFAULT_SHELL_OPTIONS = [
-    { id: 'bash', name: 'Bash', available: true },
-    { id: 'zsh', name: 'Zsh', available: true },
-    { id: 'fish', name: 'Fish', available: true },
-];
+import { AgentSettingsSection } from './agent-settings-section.js';
+import { EnvironmentSettingsSection } from './environment-settings-section.js';
+import { WorkflowSettingsSection } from './workflow-settings-section.js';
+import { CiSettingsSection } from './ci-settings-section.js';
+import { StageTimeoutsSettingsSection } from './stage-timeouts-settings-section.js';
+import { NotificationSettingsSection } from './notification-settings-section.js';
+import { FeatureFlagsSettingsSection } from './feature-flags-settings-section.js';
+import { InteractiveAgentSettingsSection } from './interactive-agent-settings-section.js';
+import { FabLayoutSettingsSection } from './fab-layout-settings-section.js';
+import { DatabaseSettingsSection } from './database-settings-section.js';
 const SECTIONS = [
-    { id: 'language', labelKey: 'settings.sections.language', icon: Globe },
     { id: 'agent', labelKey: 'settings.sections.agent', icon: Bot },
     { id: 'environment', labelKey: 'settings.sections.environment', icon: Terminal },
     { id: 'workflow', labelKey: 'settings.sections.workflow', icon: GitBranch },
@@ -42,372 +26,35 @@ const SECTIONS = [
     { id: 'fab-layout', labelKey: 'settings.sections.layout', icon: LayoutGrid },
     { id: 'database', labelKey: 'settings.sections.database', icon: Database },
 ];
-function useSaveIndicator() {
-    const { t } = useTranslation('web');
-    const [isPending, startTransition] = useTransition();
-    const [showSaving, setShowSaving] = useState(false);
-    const [showSaved, setShowSaved] = useState(false);
-    const minTimerRef = useRef(null);
-    const pendingDoneRef = useRef(false);
-    // Show "Saving..." with a minimum display time of 600ms
-    useEffect(() => {
-        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);
-            }
-        }
-    }, [isPending, showSaving]);
-    const save = useCallback((payload) => {
-        startTransition(async () => {
-            const result = await updateSettingsAction(payload);
-            if (!result.success) {
-                toast.error(result.error ?? t('settings.failedToSave'));
-            }
-        });
-    }, [startTransition, t]);
-    return { showSaving, showSaved, save };
-}
-/* ── Main component ── */
+const TABS = [{ id: 'all', labelKey: 'settings.sections.all', icon: LayoutList }, ...SECTIONS];
 export function SettingsPageClient({ settings, shipitAiHome, dbFileSize, availableTerminals, availableEditors, availableShells, }) {
     const { t } = useTranslation('web');
-    const { showSaving, showSaved, save } = useSaveIndicator();
-    const featureFlags = settings.featureFlags ?? {
-        skills: false,
-        envDeploy: false,
-        debug: false,
-        githubImport: false,
-        adoptBranch: false,
-        gitRebaseSync: false,
-        reactFileManager: false,
-    };
-    // Agent state
-    const [agentType, setAgentType] = useState(settings.agent.type);
-    // Environment state
-    const [editor, setEditor] = useState(settings.environment.defaultEditor);
-    const [shell, setShell] = useState(settings.environment.shellPreference);
-    const [terminal, setTerminal] = useState(settings.environment.terminalPreference ?? TerminalType.System);
-    const terminalOptions = availableTerminals ?? [
-        {
-            id: TerminalType.System,
-            name: t('settings.environment.systemTerminal'),
-            available: true,
-        },
-    ];
-    const editorOptions = availableEditors ?? DEFAULT_EDITOR_OPTIONS;
-    const shellOptions = availableShells ?? DEFAULT_SHELL_OPTIONS;
-    // 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 [enableEvidence, setEnableEvidence] = useState(settings.workflow.enableEvidence);
-    const [commitEvidence, setCommitEvidence] = useState(settings.workflow.commitEvidence);
-    const [ciWatchEnabled, setCiWatchEnabled] = useState(settings.workflow.ciWatchEnabled !== false);
-    const [defaultFastMode, setDefaultFastMode] = useState(settings.workflow.defaultFastMode !== false);
-    // Auto-archive state
-    const [autoArchiveEnabled, setAutoArchiveEnabled] = useState((settings.workflow.autoArchiveDelayMinutes ?? 10) > 0);
-    const [autoArchiveDelay, setAutoArchiveDelay] = useState(String(settings.workflow.autoArchiveDelayMinutes ?? 10));
-    // Notification state
-    const [inApp, setInApp] = useState(settings.notifications.inApp.enabled);
-    const [events, setEvents] = useState({ ...settings.notifications.events });
-    // Feature flags state
-    const [flags, setFlags] = useState({ ...featureFlags });
-    // Workflow helpers
-    function buildWorkflowPayload(overrides = {}) {
-        const archiveEnabled = overrides.autoArchiveEnabled ?? autoArchiveEnabled;
-        const archiveDelay = parseInt(overrides.autoArchiveDelay ?? autoArchiveDelay, 10);
-        return {
-            workflow: {
-                openPrOnImplementationComplete: overrides.openPr ?? openPr,
-                approvalGateDefaults: {
-                    pushOnImplementationComplete: overrides.pushOnComplete ?? pushOnComplete,
-                    allowPrd: overrides.allowPrd ?? allowPrd,
-                    allowPlan: overrides.allowPlan ?? allowPlan,
-                    allowMerge: overrides.allowMerge ?? allowMerge,
-                },
-                enableEvidence: overrides.enableEvidence ?? enableEvidence,
-                commitEvidence: overrides.commitEvidence ?? commitEvidence,
-                ciWatchEnabled: overrides.ciWatchEnabled ?? ciWatchEnabled,
-                defaultFastMode: overrides.defaultFastMode ?? defaultFastMode,
-                autoArchiveDelayMinutes: archiveEnabled
-                    ? Number.isNaN(archiveDelay) || archiveDelay < 1
-                        ? 10
-                        : archiveDelay
-                    : 0,
-            },
-        };
-    }
-    // Notification helpers
-    function buildNotificationPayload(overrides = {}) {
-        return {
-            notifications: {
-                inApp: { enabled: overrides.inApp ?? inApp },
-                events: overrides.events ?? events,
-            },
-        };
-    }
-    const [activeSection, setActiveSection] = useState('agent');
-    // Track which section is in view via IntersectionObserver
+    const [activeTab, setActiveTab] = useState('all');
+    const [visibleSection, setVisibleSection] = useState('agent');
+    // Track which section is in view via IntersectionObserver (only on "All" tab)
     useEffect(() => {
+        if (activeTab !== 'all')
+            return;
         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-', ''));
+                    setVisibleSection(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: t('settings.title') }), _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: t('settings.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" }), t('settings.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: t(s.labelKey) })] }, s.id));
-                            }) })] }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { id: "section-language", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: _jsx(LanguageSettingsSection, { language: settings.user?.preferredLanguage ?? Language.English }) }), _jsxs("div", { id: "section-agent", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(SettingsSection, { icon: Bot, title: t('settings.agent.sectionTitle'), description: t('settings.agent.sectionDescription'), testId: "agent-settings-section", children: _jsx(SettingsRow, { label: t('settings.agent.agentAndModel'), description: t('settings.agent.agentAndModelDescription'), htmlFor: "agent-model-picker", children: _jsx(AgentModelPicker, { initialAgentType: agentType, initialModel: settings.models.default, mode: "settings", onAgentModelChange: (newAgent) => setAgentType(newAgent), className: "w-55" }) }) }), _jsx(SectionHint, { links: [
-                                    {
-                                        label: t('settings.agent.links.agentSystem'),
-                                        href: 'https://github.com/jrmatherly/shipit/blob/main/docs/architecture/agent-system.md',
-                                    },
-                                    {
-                                        label: t('settings.agent.links.addingAgents'),
-                                        href: 'https://github.com/jrmatherly/shipit/blob/main/docs/development/adding-agents.md',
-                                    },
-                                    {
-                                        label: t('settings.agent.links.configurationGuide'),
-                                        href: 'https://github.com/jrmatherly/shipit/blob/main/docs/guides/configuration.md',
-                                    },
-                                ], children: t('settings.agent.hint') })] }), _jsxs("div", { id: "section-environment", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Terminal, title: t('settings.environment.sectionTitle'), description: t('settings.environment.sectionDescription'), testId: "environment-settings-section", children: [_jsx(SettingsRow, { label: t('settings.environment.defaultEditor'), description: t('settings.environment.defaultEditorDescription'), htmlFor: "default-editor", children: _jsxs(Select, { value: editor, onValueChange: (v) => {
-                                                setEditor(v);
-                                                save({
-                                                    environment: {
-                                                        defaultEditor: v,
-                                                        shellPreference: shell,
-                                                        terminalPreference: terminal,
-                                                    },
-                                                });
-                                            }, children: [_jsx(SelectTrigger, { id: "default-editor", "data-testid": "editor-select", className: "w-64 cursor-pointer text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: editorOptions.map((opt) => {
-                                                        const Icon = getEditorTypeIcon(opt.id);
-                                                        return (_jsx(SelectItem, { value: opt.id, disabled: !opt.available, children: _jsxs("span", { className: "flex items-center gap-2 text-xs", children: [_jsx(Icon, { className: "h-4 w-4 shrink-0" }), opt.name, _jsx(Badge, { variant: "outline", className: cn('ml-auto px-1.5 py-0 text-[10px] leading-4 font-normal', opt.available
-                                                                            ? 'border-emerald-500/30 text-emerald-500'
-                                                                            : 'border-muted-foreground/30 text-muted-foreground'), children: opt.available ? 'Installed' : 'Not Installed' })] }) }, opt.id));
-                                                    }) })] }) }), _jsx(SettingsRow, { label: t('settings.environment.shell'), description: t('settings.environment.shellDescription'), htmlFor: "shell-preference", children: _jsxs(Select, { value: shell, onValueChange: (v) => {
-                                                setShell(v);
-                                                save({
-                                                    environment: {
-                                                        defaultEditor: editor,
-                                                        shellPreference: v,
-                                                        terminalPreference: terminal,
-                                                    },
-                                                });
-                                            }, children: [_jsx(SelectTrigger, { id: "shell-preference", "data-testid": "shell-select", className: "w-64 cursor-pointer text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: shellOptions.map((opt) => (_jsx(SelectItem, { value: opt.id, disabled: !opt.available, children: _jsxs("span", { className: "flex items-center gap-2 text-xs", children: [opt.name, _jsx(Badge, { variant: "outline", className: cn('ml-auto px-1.5 py-0 text-[10px] leading-4 font-normal', opt.available
-                                                                        ? 'border-emerald-500/30 text-emerald-500'
-                                                                        : 'border-muted-foreground/30 text-muted-foreground'), children: opt.available ? 'Installed' : 'Not Installed' })] }) }, opt.id))) })] }) }), _jsx(SettingsRow, { label: t('settings.environment.terminal'), description: t('settings.environment.terminalDescription'), htmlFor: "terminal-preference", children: _jsxs(Select, { value: terminal, onValueChange: (v) => {
-                                                setTerminal(v);
-                                                save({
-                                                    environment: {
-                                                        defaultEditor: editor,
-                                                        shellPreference: shell,
-                                                        terminalPreference: v,
-                                                    },
-                                                });
-                                            }, children: [_jsx(SelectTrigger, { id: "terminal-preference", "data-testid": "terminal-select", className: "w-64 cursor-pointer text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: terminalOptions.map((opt) => (_jsx(SelectItem, { value: opt.id, disabled: !opt.available, children: _jsxs("span", { className: "flex items-center gap-2 text-xs", children: [opt.name, _jsx(Badge, { variant: "outline", className: cn('ml-auto px-1.5 py-0 text-[10px] leading-4 font-normal', opt.available
-                                                                        ? 'border-emerald-500/30 text-emerald-500'
-                                                                        : 'border-muted-foreground/30 text-muted-foreground'), children: opt.available ? 'Installed' : 'Not Installed' })] }) }, opt.id))) })] }) })] }), _jsx(SectionHint, { links: [
-                                    {
-                                        label: t('settings.environment.links.configurationGuide'),
-                                        href: 'https://github.com/jrmatherly/shipit/blob/main/docs/guides/configuration.md',
-                                    },
-                                ], children: t('settings.environment.hint') })] }), _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: t('settings.workflow.title'), description: t('settings.workflow.sectionDescription'), testId: "workflow-settings-section", children: [_jsx(SwitchRow, { label: t('settings.workflow.defaultFastMode'), description: t('settings.workflow.defaultFastModeDescription'), id: "default-fast-mode", testId: "switch-default-fast-mode", checked: defaultFastMode, onChange: (v) => {
-                                            setDefaultFastMode(v);
-                                            save(buildWorkflowPayload({ defaultFastMode: v }));
-                                        } }), _jsx(SubsectionLabel, { children: t('settings.workflow.subsections.approve') }), _jsx(SwitchRow, { label: t('settings.workflow.autoApprovePrd'), description: t('settings.workflow.autoApprovePrdDescription'), id: "allow-prd", testId: "switch-allow-prd", checked: allowPrd, onChange: (v) => {
-                                            setAllowPrd(v);
-                                            save(buildWorkflowPayload({ allowPrd: v }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.autoApprovePlan'), description: t('settings.workflow.autoApprovePlanDescription'), id: "allow-plan", testId: "switch-allow-plan", checked: allowPlan, onChange: (v) => {
-                                            setAllowPlan(v);
-                                            save(buildWorkflowPayload({ allowPlan: v }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.autoApproveMerge'), description: t('settings.workflow.autoApproveMergeDescription'), id: "allow-merge", testId: "switch-allow-merge", checked: allowMerge, onChange: (v) => {
-                                            setAllowMerge(v);
-                                            save(buildWorkflowPayload({ allowMerge: v }));
-                                        } }), _jsx(SubsectionLabel, { children: t('settings.workflow.subsections.evidence') }), _jsx(SwitchRow, { label: t('settings.workflow.collectEvidence'), description: t('settings.workflow.collectEvidenceDescription'), id: "enable-evidence", testId: "switch-enable-evidence", checked: enableEvidence, onChange: (v) => {
-                                            setEnableEvidence(v);
-                                            if (!v) {
-                                                setCommitEvidence(false);
-                                                save(buildWorkflowPayload({ enableEvidence: v, commitEvidence: false }));
-                                            }
-                                            else {
-                                                save(buildWorkflowPayload({ enableEvidence: v }));
-                                            }
-                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.addEvidenceToPr'), description: t('settings.workflow.addEvidenceToPrDescription'), id: "commit-evidence", testId: "switch-commit-evidence", checked: commitEvidence, disabled: !enableEvidence || !openPr, onChange: (v) => {
-                                            setCommitEvidence(v);
-                                            save(buildWorkflowPayload({ commitEvidence: v }));
-                                        } }), _jsx(SubsectionLabel, { children: t('settings.workflow.subsections.git') }), _jsx(SwitchRow, { label: t('settings.workflow.pushOnComplete'), description: t('settings.workflow.pushOnCompleteDescription'), id: "push-on-complete", testId: "switch-push-on-complete", checked: pushOnComplete, onChange: (v) => {
-                                            setPushOnComplete(v);
-                                            save(buildWorkflowPayload({ pushOnComplete: v }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.openPrOnComplete'), description: t('settings.workflow.openPrOnCompleteDescription'), id: "open-pr", testId: "switch-open-pr", checked: openPr, onChange: (v) => {
-                                            setOpenPr(v);
-                                            if (!v) {
-                                                setCommitEvidence(false);
-                                                save(buildWorkflowPayload({ openPr: v, commitEvidence: false }));
-                                            }
-                                            else {
-                                                save(buildWorkflowPayload({ openPr: v }));
-                                            }
-                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.watchCiAfterPush'), description: t('settings.workflow.watchCiAfterPushDescription'), id: "ci-watch-enabled", testId: "switch-ci-watch-enabled", checked: ciWatchEnabled, onChange: (v) => {
-                                            setCiWatchEnabled(v);
-                                            save(buildWorkflowPayload({ ciWatchEnabled: v }));
-                                        } }), _jsx(SubsectionLabel, { children: "Archive" }), _jsx(SwitchRow, { label: "Auto-archive completed", description: "Automatically archive features after they reach the completed state", id: "auto-archive-enabled", testId: "switch-auto-archive-enabled", checked: autoArchiveEnabled, onChange: (v) => {
-                                            setAutoArchiveEnabled(v);
-                                            save(buildWorkflowPayload({ autoArchiveEnabled: v }));
-                                        } }), _jsx(SettingsRow, { label: "Archive delay", description: "Minutes to wait after completion before archiving (1\u20131440)", htmlFor: "auto-archive-delay", children: _jsx(NumberStepper, { id: "auto-archive-delay", testId: "input-auto-archive-delay", value: autoArchiveDelay, placeholder: "10", min: 1, max: 1440, suffix: "min", onChange: (v) => {
-                                                setAutoArchiveDelay(v);
-                                            }, onBlur: () => {
-                                                if (!autoArchiveEnabled)
-                                                    return;
-                                                const n = parseInt(autoArchiveDelay, 10);
-                                                const clamped = Number.isNaN(n) ? 10 : Math.min(1440, Math.max(1, n));
-                                                setAutoArchiveDelay(String(clamped));
-                                                save(buildWorkflowPayload({ autoArchiveDelay: String(clamped) }));
-                                            } }) })] }), _jsx(SectionHint, { links: [
-                                    {
-                                        label: t('settings.workflow.links.approvalGates'),
-                                        href: 'https://github.com/jrmatherly/shipit/blob/main/specs/016-hitl-approval-gates/spec.yaml',
-                                    },
-                                    {
-                                        label: t('settings.workflow.links.pushAndPrFlags'),
-                                        href: 'https://github.com/jrmatherly/shipit/blob/main/specs/037-feature-pr-push-flags/spec.yaml',
-                                    },
-                                ], children: t('settings.workflow.hint') })] }), _jsxs("div", { id: "section-ci", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(CiSettingsSection, { settings: settings }), _jsx(SectionHint, { links: [
-                                    {
-                                        label: t('settings.ci.links.cicdPipeline'),
-                                        href: 'https://github.com/jrmatherly/shipit/blob/main/docs/development/cicd.md',
-                                    },
-                                    {
-                                        label: t('settings.ci.links.ciSecurityGates'),
-                                        href: 'https://github.com/jrmatherly/shipit/blob/main/specs/003-cicd-security-gates/spec.md',
-                                    },
-                                ], children: t('settings.ci.hint') })] }), _jsxs("div", { id: "section-stage-timeouts", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(StageTimeoutsSettingsSection, { settings: settings }), _jsx(SectionHint, { children: t('settings.stageTimeouts.hint') })] }), _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: t('settings.notifications.title'), description: t('settings.notifications.sectionDescription'), testId: "notification-settings-section", children: [_jsx(SubsectionLabel, { children: t('settings.notifications.channels') }), _jsx(SwitchRow, { label: t('settings.notifications.inAppLabel'), description: t('settings.notifications.inAppDescription'), id: "notif-in-app", testId: "switch-in-app", checked: inApp, onChange: (v) => {
-                                            setInApp(v);
-                                            save(buildNotificationPayload({ inApp: v }));
-                                        } }), _jsx(SubsectionLabel, { children: t('settings.notifications.subsections.agentEvents') }), _jsx(SwitchRow, { label: t('settings.notifications.events.agentStarted'), id: "notif-event-agentStarted", testId: "switch-event-agentStarted", checked: events.agentStarted, onChange: (v) => {
-                                            const newEvents = { ...events, agentStarted: v };
-                                            setEvents(newEvents);
-                                            save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.phaseCompleted'), id: "notif-event-phaseCompleted", testId: "switch-event-phaseCompleted", checked: events.phaseCompleted, onChange: (v) => {
-                                            const newEvents = { ...events, phaseCompleted: v };
-                                            setEvents(newEvents);
-                                            save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.waitingApproval'), id: "notif-event-waitingApproval", testId: "switch-event-waitingApproval", checked: events.waitingApproval, onChange: (v) => {
-                                            const newEvents = { ...events, waitingApproval: v };
-                                            setEvents(newEvents);
-                                            save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.agentCompleted'), id: "notif-event-agentCompleted", testId: "switch-event-agentCompleted", checked: events.agentCompleted, onChange: (v) => {
-                                            const newEvents = { ...events, agentCompleted: v };
-                                            setEvents(newEvents);
-                                            save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.agentFailed'), id: "notif-event-agentFailed", testId: "switch-event-agentFailed", checked: events.agentFailed, onChange: (v) => {
-                                            const newEvents = { ...events, agentFailed: v };
-                                            setEvents(newEvents);
-                                            save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SubsectionLabel, { children: t('settings.notifications.subsections.pullRequestEvents') }), _jsx(SwitchRow, { label: t('settings.notifications.events.prMerged'), id: "notif-event-prMerged", testId: "switch-event-prMerged", checked: events.prMerged, onChange: (v) => {
-                                            const newEvents = { ...events, prMerged: v };
-                                            setEvents(newEvents);
-                                            save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prClosed'), id: "notif-event-prClosed", testId: "switch-event-prClosed", checked: events.prClosed, onChange: (v) => {
-                                            const newEvents = { ...events, prClosed: v };
-                                            setEvents(newEvents);
-                                            save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prChecksPassed'), id: "notif-event-prChecksPassed", testId: "switch-event-prChecksPassed", checked: events.prChecksPassed, onChange: (v) => {
-                                            const newEvents = { ...events, prChecksPassed: v };
-                                            setEvents(newEvents);
-                                            save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prChecksFailed'), id: "notif-event-prChecksFailed", testId: "switch-event-prChecksFailed", checked: events.prChecksFailed, onChange: (v) => {
-                                            const newEvents = { ...events, prChecksFailed: v };
-                                            setEvents(newEvents);
-                                            save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prBlocked'), id: "notif-event-prBlocked", testId: "switch-event-prBlocked", checked: events.prBlocked, onChange: (v) => {
-                                            const newEvents = { ...events, prBlocked: v };
-                                            setEvents(newEvents);
-                                            save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.mergeReviewReady'), id: "notif-event-mergeReviewReady", testId: "switch-event-mergeReviewReady", checked: events.mergeReviewReady, onChange: (v) => {
-                                            const newEvents = { ...events, mergeReviewReady: v };
-                                            setEvents(newEvents);
-                                            save(buildNotificationPayload({ events: newEvents }));
-                                        } })] }), _jsx(SectionHint, { links: [
-                                    {
-                                        label: t('settings.notifications.links.notificationSystem'),
-                                        href: 'https://github.com/jrmatherly/shipit/blob/main/specs/021-agent-notifications/spec.yaml',
-                                    },
-                                ], children: t('settings.notifications.hint') })] }), _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: t('settings.featureFlags.title'), description: t('settings.featureFlags.sectionDescription'), badge: t('settings.featureFlags.badge'), testId: "feature-flags-settings-section", children: [_jsx(SwitchRow, { label: t('settings.featureFlags.skills'), description: t('settings.featureFlags.skillsDescription'), id: "flag-skills", testId: "switch-flag-skills", checked: flags.skills, onChange: (v) => {
-                                            const newFlags = { ...flags, skills: v };
-                                            setFlags(newFlags);
-                                            save({ featureFlags: newFlags });
-                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.deployments'), description: t('settings.featureFlags.deploymentsDescription'), id: "flag-envDeploy", testId: "switch-flag-envDeploy", checked: flags.envDeploy, onChange: (v) => {
-                                            const newFlags = { ...flags, envDeploy: v };
-                                            setFlags(newFlags);
-                                            save({ featureFlags: newFlags });
-                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.debug'), description: t('settings.featureFlags.debugDescription'), id: "flag-debug", testId: "switch-flag-debug", checked: flags.debug, onChange: (v) => {
-                                            const newFlags = { ...flags, debug: v };
-                                            setFlags(newFlags);
-                                            save({ featureFlags: newFlags });
-                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.githubImport'), description: t('settings.featureFlags.githubImportDescription'), id: "flag-githubImport", testId: "switch-flag-githubImport", checked: flags.githubImport, onChange: (v) => {
-                                            const newFlags = { ...flags, githubImport: v };
-                                            setFlags(newFlags);
-                                            save({ featureFlags: newFlags });
-                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.adoptBranch'), description: t('settings.featureFlags.adoptBranchDescription'), id: "flag-adoptBranch", testId: "switch-flag-adoptBranch", checked: flags.adoptBranch, onChange: (v) => {
-                                            const newFlags = { ...flags, adoptBranch: v };
-                                            setFlags(newFlags);
-                                            save({ featureFlags: newFlags });
-                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.gitRebaseSync'), description: t('settings.featureFlags.gitRebaseSyncDescription'), id: "flag-gitRebaseSync", testId: "switch-flag-gitRebaseSync", checked: flags.gitRebaseSync, onChange: (v) => {
-                                            const newFlags = { ...flags, gitRebaseSync: v };
-                                            setFlags(newFlags);
-                                            save({ featureFlags: newFlags });
-                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.reactFileManager'), description: t('settings.featureFlags.reactFileManagerDescription'), id: "flag-reactFileManager", testId: "switch-flag-reactFileManager", checked: flags.reactFileManager, onChange: (v) => {
-                                            const newFlags = { ...flags, reactFileManager: v };
-                                            setFlags(newFlags);
-                                            save({ featureFlags: newFlags });
-                                        } })] }), _jsx(SectionHint, { children: t('settings.featureFlags.hint') })] }), _jsxs("div", { id: "section-interactive-agent", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(InteractiveAgentSettingsSection, { settings: settings }), _jsx(SectionHint, { children: t('settings.interactiveAgent.hint') })] }), _jsxs("div", { id: "section-fab-layout", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(FabLayoutSettingsSection, { settings: settings }), _jsx(SectionHint, { children: t('settings.fabLayout.hint') })] }), _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: t('settings.database.title'), description: t('settings.database.sectionDescription'), testId: "database-settings-section", children: [_jsx(SettingsRow, { label: t('settings.database.location'), description: t('settings.database.locationDescription'), children: _jsx("span", { className: "text-muted-foreground max-w-50 truncate font-mono text-xs", "data-testid": "shipit-ai-home-path", children: shipitAiHome }) }), _jsx(SettingsRow, { label: t('settings.database.size'), children: _jsx("span", { className: "text-muted-foreground text-xs", "data-testid": "db-file-size", children: dbFileSize }) })] }), _jsx(SectionHint, { links: [
-                                    {
-                                        label: t('settings.database.links.settingsService'),
-                                        href: 'https://github.com/jrmatherly/shipit/blob/main/docs/architecture/settings-service.md',
-                                    },
-                                    {
-                                        label: t('settings.database.links.settingsSpec'),
-                                        href: 'https://github.com/jrmatherly/shipit/blob/main/specs/005-global-settings-service/spec.md',
-                                    },
-                                ], children: t('settings.database.hint') })] })] })] }));
+    }, [activeTab]);
+    return (_jsxs("div", { "data-testid": "settings-page-client", className: "max-w-5xl px-8 pt-8", children: [_jsxs("div", { className: "bg-background/95 supports-backdrop-filter:bg-background/80 sticky top-0 z-10 pb-4 backdrop-blur", children: [_jsxs("div", { className: "mb-4 space-y-1.5", children: [_jsx("span", { className: "text-[10px] font-bold tracking-[0.2em] text-slate-400 uppercase", children: "Developer Portal" }), _jsx("div", { className: "flex items-baseline gap-3", children: _jsx("h1", { className: "text-foreground text-3xl font-black tracking-tight", children: t('settings.title') }) })] }), _jsx("nav", { className: "bg-card editorial-shadow flex flex-wrap items-center gap-0.5 rounded-lg p-1", children: TABS.map((tab) => {
+                            const TabIcon = tab.icon;
+                            const isActive = activeTab === tab.id ||
+                                (activeTab === 'all' && tab.id !== 'all' && visibleSection === tab.id);
+                            return (_jsxs("button", { type: "button", onClick: () => setActiveTab(tab.id), className: cn('flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-[11px] font-bold transition-all', isActive
+                                    ? 'bg-muted text-primary shadow-sm ring-1 ring-slate-200/70 dark:ring-slate-700/50'
+                                    : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'), children: [_jsx(TabIcon, { className: "h-3 w-3" }), _jsx("span", { className: "hidden sm:inline", children: t(tab.labelKey) })] }, tab.id));
+                        }) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [(activeTab === 'all' || activeTab === 'agent') && (_jsx("div", { id: "section-agent", className: "scroll-mt-18 rounded-lg", children: _jsx(AgentSettingsSection, { settings: settings }) })), (activeTab === 'all' || activeTab === 'environment') && (_jsx("div", { id: "section-environment", className: "scroll-mt-18 rounded-lg", children: _jsx(EnvironmentSettingsSection, { settings: settings, availableEditors: availableEditors, availableShells: availableShells, availableTerminals: availableTerminals }) })), (activeTab === 'all' || activeTab === 'workflow') && (_jsx("div", { id: "section-workflow", className: "scroll-mt-18 rounded-lg", children: _jsx(WorkflowSettingsSection, { settings: settings }) })), (activeTab === 'all' || activeTab === 'ci') && (_jsx("div", { id: "section-ci", className: "scroll-mt-18 rounded-lg", children: _jsx(CiSettingsSection, { settings: settings }) })), (activeTab === 'all' || activeTab === 'stage-timeouts') && (_jsx("div", { id: "section-stage-timeouts", className: "scroll-mt-18 rounded-lg", children: _jsx(StageTimeoutsSettingsSection, { settings: settings }) })), (activeTab === 'all' || activeTab === 'notifications') && (_jsx("div", { id: "section-notifications", className: "scroll-mt-18 rounded-lg", children: _jsx(NotificationSettingsSection, { settings: settings }) })), (activeTab === 'all' || activeTab === 'feature-flags') && (_jsx("div", { id: "section-feature-flags", className: "scroll-mt-18 rounded-lg", children: _jsx(FeatureFlagsSettingsSection, { settings: settings }) })), (activeTab === 'all' || activeTab === 'interactive-agent') && (_jsx("div", { id: "section-interactive-agent", className: "scroll-mt-18 rounded-lg", children: _jsx(InteractiveAgentSettingsSection, { settings: settings }) })), (activeTab === 'all' || activeTab === 'fab-layout') && (_jsx("div", { id: "section-fab-layout", className: "scroll-mt-18 rounded-lg", children: _jsx(FabLayoutSettingsSection, { settings: settings }) })), (activeTab === 'all' || activeTab === 'database') && (_jsx("div", { id: "section-database", className: "scroll-mt-18 rounded-lg", children: _jsx(DatabaseSettingsSection, { shipitAiHome: shipitAiHome, dbFileSize: dbFileSize }) }))] })] }));
 }

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

@@ -14,4 +14,6 @@ export declare const Default: Story;
 export declare const AllSections: Story;
 export declare const EvidenceEnabled: Story;
 export declare const CustomTimeouts: Story;
+/** Shows the settings page with only the Workflow tab active (simulated via play function). */
+export declare const SingleTabView: Story;
 //# sourceMappingURL=settings-page-client.stories.d.ts.map

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

@@ -1 +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,uBAAuB,CAAC;AAC5D,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,KAqBzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAsB5B,CAAC"}
+{"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,uBAAuB,CAAC;AAC5D,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,KAqBzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAsB5B,CAAC;AAEF,+FAA+F;AAC/F,eAAO,MAAM,aAAa,EAAE,KAW3B,CAAC"}

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

@@ -77,3 +77,16 @@ export const CustomTimeouts = {
         dbFileSize: '2.4 MB',
     },
 };
+/** Shows the settings page with only the Workflow tab active (simulated via play function). */
+export const SingleTabView = {
+    args: {
+        settings: defaultSettings,
+        shipitAiHome: '/home/user/.shipit-ai',
+        dbFileSize: '2.4 MB',
+    },
+    play: async ({ canvasElement }) => {
+        const tabs = canvasElement.querySelectorAll('nav button');
+        const wfTab = Array.from(tabs).find((btn) => btn.textContent?.includes('Workflow'));
+        wfTab?.click();
+    },
+};

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

@@ -1,10 +1,12 @@
-export declare function SettingsRow({ label, description, htmlFor, children, }: {
+export declare function SettingsRow({ label, description, htmlFor, tooltip, children, }: {
     label: string;
     description?: string;
     htmlFor?: string;
+    /** Explicit tooltip text. Falls back to `description` if not provided. */
+    tooltip?: string;
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SwitchRow({ label, description, id, testId, checked, onChange, disabled, }: {
+export declare function SwitchRow({ label, description, id, testId, checked, onChange, disabled, tooltip, }: {
     label: string;
     description?: string;
     id: string;
@@ -12,8 +14,9 @@ export declare function SwitchRow({ label, description, id, testId, checked, onC
     checked: boolean;
     onChange: (value: boolean) => void;
     disabled?: boolean;
+    tooltip?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SettingsSection({ icon: Icon, title, description, badge, testId, children, }: {
+export declare function SettingsSection({ icon: Icon, title, description, badge, testId, tooltip, tooltipLinks, children, }: {
     icon: React.ComponentType<{
         className?: string;
     }>;
@@ -21,6 +24,13 @@ export declare function SettingsSection({ icon: Icon, title, description, badge,
     description: string;
     badge?: string;
     testId: string;
+    /** Section-level tooltip describing the purpose of this settings group. */
+    tooltip?: string;
+    /** Documentation links rendered below the tooltip text. */
+    tooltipLinks?: {
+        label: string;
+        href: string;
+    }[];
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function NumberStepper({ id, testId, value, onChange, onBlur, placeholder, min, max, step, suffix, }: {
@@ -38,11 +48,4 @@ export declare function NumberStepper({ id, testId, value, onChange, onBlur, pla
 export declare function SubsectionLabel({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SectionHint({ children, links, }: {
-    children: React.ReactNode;
-    links?: {
-        label: string;
-        href: string;
-    }[];
-}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=settings-section-utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"settings-section-utils.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-section-utils.tsx"],"names":[],"mappings":"AAUA,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAcA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,EAAE,EACF,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,2CAaA;AAID,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EAAE,IAAI,EACV,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAkBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,MAAM,EACN,KAAK,EACL,QAAQ,EACR,MAAM,EACN,WAAW,EACX,GAAO,EACP,GAAG,EACH,IAAQ,EACR,MAAM,GACP,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,2CA4DA;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAQ1E;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC3C,2CAsBA"}
+{"version":3,"file":"settings-section-utils.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-section-utils.tsx"],"names":[],"mappings":"AAWA,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CA6BA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,EAAE,EACF,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,GACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,2CAaA;AAID,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EAAE,IAAI,EACV,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACP,YAAY,EACZ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CA4CA;AAED,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,MAAM,EACN,KAAK,EACL,QAAQ,EACR,MAAM,EACN,WAAW,EACX,GAAO,EACP,GAAG,EACH,IAAQ,EACR,MAAM,GACP,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,2CA4DA;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAQ1E"}

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

@@ -1,20 +1,23 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Minus, Plus, ExternalLink } from 'lucide-react';
+import { Minus, Plus, ExternalLink, Info } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { cn } from '../../../lib/utils.js';
 import { Label } from '../../ui/label.js';
 import { Switch } from '../../ui/switch.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip.js';
 /* ── Reusable row components ── */
-export 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 })] }));
+export function SettingsRow({ label, description, htmlFor, tooltip, children, }) {
+    // Show the Info icon when there's either an explicit tooltip or a description to surface
+    const tooltipText = tooltip ?? description;
+    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: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(Label, { htmlFor: htmlFor, className: "cursor-pointer text-sm font-normal whitespace-nowrap", children: label }), tooltipText ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Info, { className: "text-muted-foreground/40 hover:text-muted-foreground h-3.5 w-3.5 shrink-0 cursor-help transition-colors" }) }), _jsx(TooltipContent, { side: "top", className: "max-w-64 text-[11px] leading-relaxed", children: _jsx("span", { className: "text-muted-foreground", children: tooltipText }) })] })) : null] }), 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 })] }));
 }
-export function SwitchRow({ label, description, id, testId, checked, onChange, disabled, }) {
-    return (_jsx(SettingsRow, { label: label, description: description, htmlFor: id, children: _jsx(Switch, { id: id, "data-testid": testId, checked: checked, onCheckedChange: onChange, disabled: disabled, className: cn('cursor-pointer', disabled && 'cursor-not-allowed opacity-50') }) }));
+export function SwitchRow({ label, description, id, testId, checked, onChange, disabled, tooltip, }) {
+    return (_jsx(SettingsRow, { label: label, description: description, htmlFor: id, tooltip: tooltip, children: _jsx(Switch, { id: id, "data-testid": testId, checked: checked, onCheckedChange: onChange, disabled: disabled, className: cn('cursor-pointer', disabled && 'cursor-not-allowed opacity-50') }) }));
 }
 /* ── Section card wrapper ── */
-export 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 })] }));
+export function SettingsSection({ icon: Icon, title, description, badge, testId, tooltip, tooltipLinks, 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 }), tooltip ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Info, { className: "text-muted-foreground/40 hover:text-muted-foreground h-3.5 w-3.5 shrink-0 cursor-help transition-colors" }) }), _jsxs(TooltipContent, { side: "bottom", className: "max-w-72 text-[11px] leading-relaxed", children: [_jsx("p", { className: "text-muted-foreground", children: tooltip }), tooltipLinks != null && tooltipLinks.length > 0 ? (_jsx("div", { className: "border-border/50 mt-1.5 flex flex-col gap-0.5 border-t pt-1.5", children: tooltipLinks.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.5 text-[10px] tracking-wide transition-colors", children: [_jsx(ExternalLink, { className: "h-2.5 w-2.5 shrink-0 opacity-50" }), link.label] }, link.href))) })) : null] })] })) : null, 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 })] }));
 }
 export function NumberStepper({ id, testId, value, onChange, onBlur, placeholder, min = 1, max, step = 1, suffix, }) {
     const { t } = useTranslation('web');
@@ -41,6 +44,3 @@ export function NumberStepper({ id, testId, value, onChange, onBlur, placeholder
 export 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 }) }));
 }
-export 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] }));
-}