@shepai/cli 1.155.0-pr484.1619afe → 1.155.0-pr485.4c45fca

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

@@ -1,16 +1,18 @@
 '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, Minus, Plus, ExternalLink, Settings2, Timer, MessageSquare, } from 'lucide-react';
+import { Check, Bot, Terminal, GitBranch, Activity, Bell, Flag, Database, Globe, Minus, Plus, ExternalLink, Settings2, Timer, MessageSquare, } from 'lucide-react';
 import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
 import { cn } from '../../../lib/utils.js';
 import { Label } from '../../ui/label.js';
 import { Switch } from '../../ui/switch.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/select.js';
 import { updateSettingsAction } from '../../../app/actions/update-settings.js';
-import { EditorType, TerminalType } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { EditorType, 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 { TimeoutSlider } from '../../features/settings/timeout-slider.js';
 const EDITOR_OPTIONS = [
     { value: EditorType.VsCode, label: 'VS Code' },
@@ -25,17 +27,19 @@ const SHELL_OPTIONS = [
     { value: 'fish', label: 'Fish' },
 ];
 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: 'stage-timeouts', label: 'Timeouts', icon: Timer },
-    { id: 'notifications', label: 'Notifications', icon: Bell },
-    { id: 'feature-flags', label: 'Flags', icon: Flag },
-    { id: 'interactive-agent', label: 'Chat', icon: MessageSquare },
-    { id: 'database', label: 'Database', icon: Database },
+    { 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 },
+    { id: 'ci', labelKey: 'settings.sections.ci', icon: Activity },
+    { id: 'stage-timeouts', labelKey: 'settings.sections.timeouts', icon: Timer },
+    { id: 'notifications', labelKey: 'settings.sections.notifications', icon: Bell },
+    { id: 'feature-flags', labelKey: 'settings.sections.flags', icon: Flag },
+    { id: 'interactive-agent', labelKey: 'settings.sections.chat', icon: MessageSquare },
+    { 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);
@@ -69,10 +73,10 @@ function useSaveIndicator() {
         startTransition(async () => {
             const result = await updateSettingsAction(payload);
             if (!result.success) {
-                toast.error(result.error ?? 'Failed to save settings');
+                toast.error(result.error ?? t('settings.failedToSave'));
             }
         });
-    }, [startTransition]);
+    }, [startTransition, t]);
     return { showSaving, showSaved, save };
 }
 /* ── Reusable row components ── */
@@ -87,6 +91,7 @@ function SettingsSection({ icon: Icon, title, description, badge, testId, childr
     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 NumberStepper({ id, testId, value, onChange, onBlur, placeholder, min = 1, max, step = 1, suffix, }) {
+    const { t } = useTranslation('web');
     const numValue = value === '' ? undefined : parseInt(value, 10);
     const decrement = () => {
         const current = numValue ?? parseInt(placeholder, 10);
@@ -100,12 +105,12 @@ function NumberStepper({ id, testId, value, onChange, onBlur, placeholder, min =
     };
     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) => {
+                        }, 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": t('common.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] }));
+                        }, 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": t('common.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 }) }));
@@ -115,6 +120,7 @@ function SectionHint({ children, links, }) {
 }
 /* ── Main component ── */
 export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTerminals, }) {
+    const { t } = useTranslation('web');
     const { showSaving, showSaved, save } = useSaveIndicator();
     const featureFlags = settings.featureFlags ?? {
         skills: false,
@@ -134,7 +140,13 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
     // Filter to only show installed terminals
     const terminalOptions = availableTerminals
         ? availableTerminals.filter((t) => t.available)
-        : [{ id: TerminalType.System, name: 'System Terminal', available: true }];
+        : [
+            {
+                id: TerminalType.System,
+                name: t('settings.environment.systemTerminal'),
+                available: true,
+            },
+        ];
     // Workflow state
     const [openPr, setOpenPr] = useState(settings.workflow.openPrOnImplementationComplete);
     const [pushOnComplete, setPushOnComplete] = useState(settings.workflow.approvalGateDefaults.pushOnImplementationComplete);
@@ -292,26 +304,26 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
         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) => {
+    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: 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: [_jsx(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(SectionHint, { links: [
+                                        : '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: 'Agent system',
+                                        label: t('settings.agent.links.agentSystem'),
                                         href: 'https://github.com/shep-ai/cli/blob/main/docs/architecture/agent-system.md',
                                     },
                                     {
-                                        label: 'Adding agents',
+                                        label: t('settings.agent.links.addingAgents'),
                                         href: 'https://github.com/shep-ai/cli/blob/main/docs/development/adding-agents.md',
                                     },
                                     {
-                                        label: 'Configuration guide',
+                                        label: t('settings.agent.links.configurationGuide'),
                                         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: [_jsxs(SettingsSection, { icon: Terminal, title: "Environment", description: "Editor, shell, and terminal 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) => {
+                                ], 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: {
@@ -323,7 +335,7 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
                                             }, 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(SettingsRow, { label: "Shell", description: "Default shell for generated scripts", htmlFor: "shell-preference", children: _jsxs(Select, { value: shell, onValueChange: (v) => {
+                                                    }) })] }) }), _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: {
@@ -332,7 +344,7 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
                                                         terminalPreference: terminal,
                                                     },
                                                 });
-                                            }, children: [_jsx(SelectTrigger, { id: "shell-preference", "data-testid": "shell-select", className: "w-55 cursor-pointer text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: SHELL_OPTIONS.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] }) }), _jsx(SettingsRow, { label: "Terminal", description: "Terminal emulator for shell sessions", htmlFor: "terminal-preference", children: _jsxs(Select, { value: terminal, onValueChange: (v) => {
+                                            }, children: [_jsx(SelectTrigger, { id: "shell-preference", "data-testid": "shell-select", className: "w-55 cursor-pointer text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: SHELL_OPTIONS.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] }) }), _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: {
@@ -343,19 +355,19 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
                                                 });
                                             }, children: [_jsx(SelectTrigger, { id: "terminal-preference", "data-testid": "terminal-select", className: "w-55 cursor-pointer text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: terminalOptions.map((opt) => (_jsx(SelectItem, { value: opt.id, children: opt.name }, opt.id))) })] }) })] }), _jsx(SectionHint, { links: [
                                     {
-                                        label: 'Configuration guide',
+                                        label: t('settings.environment.links.configurationGuide'),
                                         href: 'https://github.com/shep-ai/cli/blob/main/docs/guides/configuration.md',
                                     },
-                                ], children: "Your preferred editor opens files for review. The shell setting controls generated scripts. The terminal emulator is launched when opening shell sessions from the web UI." })] }), _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(SubsectionLabel, { children: "Approve" }), _jsx(SwitchRow, { label: "Auto-approve PRD", description: "Skip manual review of requirements", id: "allow-prd", testId: "switch-allow-prd", checked: allowPrd, onChange: (v) => {
+                                ], 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(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: "Auto-approve Plan", description: "Skip manual review of implementation plan", id: "allow-plan", testId: "switch-allow-plan", checked: allowPlan, onChange: (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: "Auto-approve Merge", description: "Merge without manual review", id: "allow-merge", testId: "switch-allow-merge", checked: allowMerge, onChange: (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: "Evidence" }), _jsx(SwitchRow, { label: "Collect evidence", description: "Capture screenshots and artifacts after implementation", id: "enable-evidence", testId: "switch-enable-evidence", checked: enableEvidence, onChange: (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);
@@ -364,13 +376,13 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
                                             else {
                                                 save(buildWorkflowPayload({ enableEvidence: v }));
                                             }
-                                        } }), _jsx(SwitchRow, { label: "Add evidence to PR", description: "Include evidence in the pull request body", id: "commit-evidence", testId: "switch-commit-evidence", checked: commitEvidence, disabled: !enableEvidence || !openPr, onChange: (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: "Git" }), _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) => {
+                                        } }), _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: "Open PR on complete", description: "Create a pull request when done", id: "open-pr", testId: "switch-open-pr", checked: openPr, onChange: (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);
@@ -379,144 +391,144 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
                                             else {
                                                 save(buildWorkflowPayload({ openPr: v }));
                                             }
-                                        } }), _jsx(SwitchRow, { label: "Watch CI after push", description: "Monitor CI and auto-fix failures. Disable to avoid rate limits.", id: "ci-watch-enabled", testId: "switch-ci-watch-enabled", checked: ciWatchEnabled, onChange: (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(SectionHint, { links: [
                                     {
-                                        label: 'Approval gates',
+                                        label: t('settings.workflow.links.approvalGates'),
                                         href: 'https://github.com/shep-ai/cli/blob/main/specs/016-hitl-approval-gates/spec.yaml',
                                     },
                                     {
-                                        label: 'Push & PR flags',
+                                        label: t('settings.workflow.links.pushAndPrFlags'),
                                         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: () => {
+                                ], 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: [_jsxs(SettingsSection, { icon: Activity, title: t('settings.ci.title'), description: t('settings.ci.description'), testId: "ci-settings-section", children: [_jsx(SettingsRow, { label: t('settings.ci.maxFixAttempts'), description: t('settings.ci.maxFixAttemptsDescription'), 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: () => {
+                                            }, min: 1, max: 10 }) }), _jsx(SettingsRow, { label: t('settings.ci.watchTimeout'), description: t('settings.ci.watchTimeoutDescription'), 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: () => {
+                                            }, min: 30, step: 30, suffix: "sec" }) }), _jsx(SettingsRow, { label: t('settings.ci.maxLogSize'), description: t('settings.ci.maxLogSizeDescription'), 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(SettingsRow, { label: "Poll interval", description: "How often to check GitHub for CI status updates", htmlFor: "ci-poll-interval", children: _jsx(NumberStepper, { id: "ci-poll-interval", testId: "ci-poll-interval-input", placeholder: "30", value: ciPollInterval, onChange: setCiPollInterval, onBlur: () => {
+                                            }, min: 1000, step: 5000, suffix: "chars" }) }), _jsx(SettingsRow, { label: t('settings.ci.pollInterval'), description: t('settings.ci.pollIntervalDescription'), htmlFor: "ci-poll-interval", children: _jsx(NumberStepper, { id: "ci-poll-interval", testId: "ci-poll-interval-input", placeholder: "30", value: ciPollInterval, onChange: setCiPollInterval, onBlur: () => {
                                                 if (ciPollInterval !== originalCiPollInterval)
                                                     save(buildWorkflowPayload({ ciPollInterval }));
-                                            }, min: 5, step: 5, suffix: "sec" }) }), _jsx(SwitchRow, { label: "Hide CI status", description: "Hide CI status badges from feature drawer and merge review", id: "hide-ci-status", testId: "switch-hide-ci-status", checked: hideCiStatus, onChange: (v) => {
+                                            }, min: 5, step: 5, suffix: "sec" }) }), _jsx(SwitchRow, { label: t('settings.ci.hideCiStatus'), description: t('settings.ci.hideCiStatusDescription'), id: "hide-ci-status", testId: "switch-hide-ci-status", checked: hideCiStatus, onChange: (v) => {
                                             setHideCiStatus(v);
                                             save(buildWorkflowPayload({ hideCiStatus: v }));
                                         } })] }), _jsx(SectionHint, { links: [
                                     {
-                                        label: 'CI/CD pipeline',
+                                        label: t('settings.ci.links.cicdPipeline'),
                                         href: 'https://github.com/shep-ai/cli/blob/main/docs/development/cicd.md',
                                     },
                                     {
-                                        label: 'CI security gates',
+                                        label: t('settings.ci.links.ciSecurityGates'),
                                         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-stage-timeouts", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Timer, title: "Stage Timeouts", description: "Maximum execution time per agent stage", testId: "stage-timeouts-settings-section", children: [_jsx(SubsectionLabel, { children: "Feature Agent" }), _jsx(SettingsRow, { label: "Analyze", description: "Repository analysis timeout", htmlFor: "timeout-analyze", children: _jsx(TimeoutSlider, { id: "timeout-analyze", testId: "timeout-analyze-input", value: analyzeTimeout, onChange: setAnalyzeTimeout, onBlur: () => {
+                                ], 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: [_jsxs(SettingsSection, { icon: Timer, title: t('settings.stageTimeouts.title'), description: t('settings.stageTimeouts.description'), testId: "stage-timeouts-settings-section", children: [_jsx(SubsectionLabel, { children: t('settings.stageTimeouts.subsections.featureAgent') }), _jsx(SettingsRow, { label: t('settings.stageTimeouts.analyze'), description: t('settings.stageTimeouts.analyzeDescription'), htmlFor: "timeout-analyze", children: _jsx(TimeoutSlider, { id: "timeout-analyze", testId: "timeout-analyze-input", value: analyzeTimeout, onChange: setAnalyzeTimeout, onBlur: () => {
                                                 if (analyzeTimeout !== originalAnalyzeTimeout)
                                                     save(buildWorkflowPayload({ analyzeTimeout }));
-                                            }, defaultSeconds: 1800 }) }), _jsx(SettingsRow, { label: "Requirements", description: "Requirements gathering timeout", htmlFor: "timeout-requirements", children: _jsx(TimeoutSlider, { id: "timeout-requirements", testId: "timeout-requirements-input", value: requirementsTimeout, onChange: setRequirementsTimeout, onBlur: () => {
+                                            }, defaultSeconds: 1800 }) }), _jsx(SettingsRow, { label: t('settings.stageTimeouts.requirements'), description: t('settings.stageTimeouts.requirementsDescription'), htmlFor: "timeout-requirements", children: _jsx(TimeoutSlider, { id: "timeout-requirements", testId: "timeout-requirements-input", value: requirementsTimeout, onChange: setRequirementsTimeout, onBlur: () => {
                                                 if (requirementsTimeout !== originalRequirementsTimeout)
                                                     save(buildWorkflowPayload({ requirementsTimeout }));
-                                            }, defaultSeconds: 1800 }) }), _jsx(SettingsRow, { label: "Research", description: "Technical research timeout", htmlFor: "timeout-research", children: _jsx(TimeoutSlider, { id: "timeout-research", testId: "timeout-research-input", value: researchTimeout, onChange: setResearchTimeout, onBlur: () => {
+                                            }, defaultSeconds: 1800 }) }), _jsx(SettingsRow, { label: t('settings.stageTimeouts.research'), description: t('settings.stageTimeouts.researchDescription'), htmlFor: "timeout-research", children: _jsx(TimeoutSlider, { id: "timeout-research", testId: "timeout-research-input", value: researchTimeout, onChange: setResearchTimeout, onBlur: () => {
                                                 if (researchTimeout !== originalResearchTimeout)
                                                     save(buildWorkflowPayload({ researchTimeout }));
-                                            }, defaultSeconds: 1800 }) }), _jsx(SettingsRow, { label: "Plan", description: "Implementation planning timeout", htmlFor: "timeout-plan", children: _jsx(TimeoutSlider, { id: "timeout-plan", testId: "timeout-plan-input", value: planTimeout, onChange: setPlanTimeout, onBlur: () => {
+                                            }, defaultSeconds: 1800 }) }), _jsx(SettingsRow, { label: t('settings.stageTimeouts.plan'), description: t('settings.stageTimeouts.planDescription'), htmlFor: "timeout-plan", children: _jsx(TimeoutSlider, { id: "timeout-plan", testId: "timeout-plan-input", value: planTimeout, onChange: setPlanTimeout, onBlur: () => {
                                                 if (planTimeout !== originalPlanTimeout)
                                                     save(buildWorkflowPayload({ planTimeout }));
-                                            }, defaultSeconds: 1800 }) }), _jsx(SettingsRow, { label: "Implement", description: "Code implementation timeout", htmlFor: "timeout-implement", children: _jsx(TimeoutSlider, { id: "timeout-implement", testId: "timeout-implement-input", value: implementTimeout, onChange: setImplementTimeout, onBlur: () => {
+                                            }, defaultSeconds: 1800 }) }), _jsx(SettingsRow, { label: t('settings.stageTimeouts.implement'), description: t('settings.stageTimeouts.implementDescription'), htmlFor: "timeout-implement", children: _jsx(TimeoutSlider, { id: "timeout-implement", testId: "timeout-implement-input", value: implementTimeout, onChange: setImplementTimeout, onBlur: () => {
                                                 if (implementTimeout !== originalImplementTimeout)
                                                     save(buildWorkflowPayload({ implementTimeout }));
-                                            }, defaultSeconds: 1800 }) }), _jsx(SettingsRow, { label: "Merge", description: "PR creation and merge timeout", htmlFor: "timeout-merge", children: _jsx(TimeoutSlider, { id: "timeout-merge", testId: "timeout-merge-input", value: mergeTimeout, onChange: setMergeTimeout, onBlur: () => {
+                                            }, defaultSeconds: 1800 }) }), _jsx(SettingsRow, { label: t('settings.stageTimeouts.merge'), description: t('settings.stageTimeouts.mergeDescription'), htmlFor: "timeout-merge", children: _jsx(TimeoutSlider, { id: "timeout-merge", testId: "timeout-merge-input", value: mergeTimeout, onChange: setMergeTimeout, onBlur: () => {
                                                 if (mergeTimeout !== originalMergeTimeout)
                                                     save(buildWorkflowPayload({ mergeTimeout }));
-                                            }, defaultSeconds: 1800 }) }), _jsx(SubsectionLabel, { children: "Analyze Repository Agent" }), _jsx(SettingsRow, { label: "Analyze", description: "Repository analysis timeout", htmlFor: "timeout-analyze-repo", children: _jsx(TimeoutSlider, { id: "timeout-analyze-repo", testId: "timeout-analyze-repo-input", value: analyzeRepoTimeout, onChange: setAnalyzeRepoTimeout, onBlur: () => {
+                                            }, defaultSeconds: 1800 }) }), _jsx(SubsectionLabel, { children: t('settings.stageTimeouts.subsections.analyzeRepoAgent') }), _jsx(SettingsRow, { label: t('settings.stageTimeouts.analyze'), description: t('settings.stageTimeouts.analyzeDescription'), htmlFor: "timeout-analyze-repo", children: _jsx(TimeoutSlider, { id: "timeout-analyze-repo", testId: "timeout-analyze-repo-input", value: analyzeRepoTimeout, onChange: setAnalyzeRepoTimeout, onBlur: () => {
                                                 if (analyzeRepoTimeout !== originalAnalyzeRepoTimeout)
                                                     save(buildWorkflowPayload({ analyzeRepoTimeout }));
-                                            }, defaultSeconds: 600 }) })] }), _jsx(SectionHint, { children: "Each agent has independently configurable stage timeouts. When a stage exceeds its timeout, the agent is terminated. Longer timeouts are useful for complex implementations. Feature agent defaults to 30 minutes per stage. Analyze repository agent defaults to 10 minutes." })] }), _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) => {
+                                            }, defaultSeconds: 600 }) })] }), _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: "Agent Events" }), _jsx(SwitchRow, { label: "Agent started", id: "notif-event-agentStarted", testId: "switch-event-agentStarted", checked: events.agentStarted, onChange: (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: "Phase completed", id: "notif-event-phaseCompleted", testId: "switch-event-phaseCompleted", checked: events.phaseCompleted, onChange: (v) => {
+                                        } }), _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: "Waiting approval", id: "notif-event-waitingApproval", testId: "switch-event-waitingApproval", checked: events.waitingApproval, onChange: (v) => {
+                                        } }), _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: "Agent completed", id: "notif-event-agentCompleted", testId: "switch-event-agentCompleted", checked: events.agentCompleted, onChange: (v) => {
+                                        } }), _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: "Agent failed", id: "notif-event-agentFailed", testId: "switch-event-agentFailed", checked: events.agentFailed, onChange: (v) => {
+                                        } }), _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: "Pull Request Events" }), _jsx(SwitchRow, { label: "PR merged", id: "notif-event-prMerged", testId: "switch-event-prMerged", checked: events.prMerged, onChange: (v) => {
+                                        } }), _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: "PR closed", id: "notif-event-prClosed", testId: "switch-event-prClosed", checked: events.prClosed, onChange: (v) => {
+                                        } }), _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: "PR checks passed", id: "notif-event-prChecksPassed", testId: "switch-event-prChecksPassed", checked: events.prChecksPassed, onChange: (v) => {
+                                        } }), _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: "PR checks failed", id: "notif-event-prChecksFailed", testId: "switch-event-prChecksFailed", checked: events.prChecksFailed, onChange: (v) => {
+                                        } }), _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: "PR blocked", id: "notif-event-prBlocked", testId: "switch-event-prBlocked", checked: events.prBlocked, onChange: (v) => {
+                                        } }), _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: "Merge review ready", id: "notif-event-mergeReviewReady", testId: "switch-event-mergeReviewReady", checked: events.mergeReviewReady, onChange: (v) => {
+                                        } }), _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: 'Notification system',
+                                        label: t('settings.notifications.links.notificationSystem'),
                                         href: 'https://github.com/shep-ai/cli/blob/main/specs/021-agent-notifications/spec.yaml',
                                     },
-                                ], children: "In-app toast notifications keep you in the loop. 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) => {
+                                ], 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: "Deployments", description: "Enable environment deployment workflows", id: "flag-envDeploy", testId: "switch-flag-envDeploy", checked: flags.envDeploy, onChange: (v) => {
+                                        } }), _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: "Debug", description: "Show debug panels and verbose logging", id: "flag-debug", testId: "switch-flag-debug", checked: flags.debug, onChange: (v) => {
+                                        } }), _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: "GitHub Import", description: "Enable GitHub repository import in the web UI", id: "flag-githubImport", testId: "switch-flag-githubImport", checked: flags.githubImport, onChange: (v) => {
+                                        } }), _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: "Adopt Branch", description: "Import existing branches as tracked features", id: "flag-adoptBranch", testId: "switch-flag-adoptBranch", checked: flags.adoptBranch, onChange: (v) => {
+                                        } }), _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: "Git Rebase & Sync", description: "Enable git rebase-on-main and sync-main operations", id: "flag-gitRebaseSync", testId: "switch-flag-gitRebaseSync", checked: flags.gitRebaseSync, onChange: (v) => {
+                                        } }), _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: "React File Manager", description: "Use the built-in React file manager instead of the native OS folder picker", id: "flag-reactFileManager", testId: "switch-flag-reactFileManager", checked: flags.reactFileManager, onChange: (v) => {
+                                        } }), _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: "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-interactive-agent", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: MessageSquare, title: "Interactive Agent", description: "Chat tab settings for per-feature interactive agent sessions", testId: "interactive-agent-settings-section", children: [_jsx(SwitchRow, { label: "Enable Chat tab", description: "Show the Chat tab on all feature detail pages", id: "interactive-agent-enabled", testId: "switch-interactive-agent-enabled", checked: interactiveEnabled, onChange: (v) => {
+                                        } })] }), _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: [_jsxs(SettingsSection, { icon: MessageSquare, title: t('settings.interactiveAgent.title'), description: t('settings.interactiveAgent.description'), testId: "interactive-agent-settings-section", children: [_jsx(SwitchRow, { label: t('settings.interactiveAgent.enableChatTab'), description: t('settings.interactiveAgent.enableChatTabDescription'), id: "interactive-agent-enabled", testId: "switch-interactive-agent-enabled", checked: interactiveEnabled, onChange: (v) => {
                                             setInteractiveEnabled(v);
                                             save({
                                                 interactiveAgent: {
@@ -525,7 +537,7 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
                                                     maxConcurrentSessions: parseInt(interactiveSessions, 10) || 3,
                                                 },
                                             });
-                                        } }), _jsx(SettingsRow, { label: "Auto-timeout", description: "Minutes of inactivity before the agent is stopped automatically (1\u2013120)", htmlFor: "interactive-agent-timeout", children: _jsx(NumberStepper, { id: "interactive-agent-timeout", testId: "input-interactive-agent-timeout", value: interactiveTimeout, placeholder: "15", min: 1, max: 120, suffix: "min", onChange: setInteractiveTimeout, onBlur: () => {
+                                        } }), _jsx(SettingsRow, { label: t('settings.interactiveAgent.autoTimeout'), description: t('settings.interactiveAgent.autoTimeoutDescription'), htmlFor: "interactive-agent-timeout", children: _jsx(NumberStepper, { id: "interactive-agent-timeout", testId: "input-interactive-agent-timeout", value: interactiveTimeout, placeholder: "15", min: 1, max: 120, suffix: "min", onChange: setInteractiveTimeout, onBlur: () => {
                                                 const n = parseInt(interactiveTimeout, 10);
                                                 const clamped = Number.isNaN(n) ? 15 : Math.min(120, Math.max(1, n));
                                                 const clamped_str = String(clamped);
@@ -537,7 +549,7 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
                                                         maxConcurrentSessions: parseInt(interactiveSessions, 10) || 3,
                                                     },
                                                 });
-                                            } }) }), _jsx(SettingsRow, { label: "Max concurrent sessions", description: "Maximum number of active interactive agent sessions at once (1\u201310)", htmlFor: "interactive-agent-sessions", children: _jsx(NumberStepper, { id: "interactive-agent-sessions", testId: "input-interactive-agent-sessions", value: interactiveSessions, placeholder: "3", min: 1, max: 10, onChange: setInteractiveSessions, onBlur: () => {
+                                            } }) }), _jsx(SettingsRow, { label: t('settings.interactiveAgent.maxConcurrentSessions'), description: t('settings.interactiveAgent.maxConcurrentSessionsDescription'), htmlFor: "interactive-agent-sessions", children: _jsx(NumberStepper, { id: "interactive-agent-sessions", testId: "input-interactive-agent-sessions", value: interactiveSessions, placeholder: "3", min: 1, max: 10, onChange: setInteractiveSessions, onBlur: () => {
                                                 const n = parseInt(interactiveSessions, 10);
                                                 const clamped = Number.isNaN(n) ? 3 : Math.min(10, Math.max(1, n));
                                                 const clamped_str = String(clamped);
@@ -549,14 +561,14 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
                                                         maxConcurrentSessions: clamped,
                                                     },
                                                 });
-                                            } }) })] }), _jsx(SectionHint, { children: "The Chat tab spawns a persistent agent process per feature. Auto-timeout stops idle sessions automatically to conserve resources. The concurrent session cap prevents runaway resource usage on developer machines." })] }), _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: [
+                                            } }) })] }), _jsx(SectionHint, { children: t('settings.interactiveAgent.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": "shep-home-path", children: shepHome }) }), _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: 'Settings service',
+                                        label: t('settings.database.links.settingsService'),
                                         href: 'https://github.com/shep-ai/cli/blob/main/docs/architecture/settings-service.md',
                                     },
                                     {
-                                        label: 'Settings spec',
+                                        label: t('settings.database.links.settingsSpec'),
                                         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." })] })] })] }));
+                                ], children: t('settings.database.hint') })] })] })] }));
 }

package/dist/src/presentation/web/components/features/settings/timeout-slider.js

@@ -59,5 +59,5 @@ export function TimeoutSlider({ id, testId, value, onChange, onBlur, defaultSeco
         setLocalIndex(i);
         onChange(String(PRESETS[i]));
     }, [onChange]);
-    return (_jsxs("div", { className: "flex w-55 items-center gap-2", children: [_jsx(Slider, { id: id, "data-testid": testId, min: 0, max: SLIDER_MAX, step: 1, value: [localIndex], onValueChange: handleChange, onValueCommit: () => onBlur(), className: "min-w-0 flex-1" }), _jsx("span", { className: "text-muted-foreground shrink-0 text-right text-xs tabular-nums", children: formatDuration(PRESETS[localIndex]) })] }));
+    return (_jsxs("div", { className: "flex w-55 items-center gap-2", children: [_jsx(Slider, { id: id, "data-testid": testId, min: 0, max: SLIDER_MAX, step: 1, value: [localIndex], onValueChange: handleChange, onValueCommit: () => onBlur(), className: "min-w-0 flex-1" }), _jsx("span", { className: "text-muted-foreground shrink-0 text-end text-xs tabular-nums", children: formatDuration(PRESETS[localIndex]) })] }));
 }

package/dist/src/presentation/web/components/features/skills/category-filter.js

@@ -8,5 +8,5 @@ const CATEGORIES = [
     { label: 'Reference', value: 'Reference' },
 ];
 export function CategoryFilter({ activeCategory, onCategoryChange, counts }) {
-    return (_jsx("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Filter by category", children: CATEGORIES.map(({ label, value }) => (_jsxs(Button, { variant: activeCategory === value ? 'default' : 'outline', size: "sm", onClick: () => onCategoryChange(value), children: [label, counts && value ? (_jsxs("span", { className: "ml-1 text-xs opacity-70", children: ["(", counts[value], ")"] })) : null] }, label))) }));
+    return (_jsx("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Filter by category", children: CATEGORIES.map(({ label, value }) => (_jsxs(Button, { variant: activeCategory === value ? 'default' : 'outline', size: "sm", onClick: () => onCategoryChange(value), children: [label, counts && value ? (_jsxs("span", { className: "ms-1 text-xs opacity-70", children: ["(", counts[value], ")"] })) : null] }, label))) }));
 }

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

@@ -48,5 +48,5 @@ export function SkillsPageClient({ skills }) {
     if (skills.length === 0) {
         return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsx(PageHeader, { title: "Skills", description: "Claude Code skills installed in this project" }), _jsx(EmptyState, { icon: _jsx(Puzzle, { className: "size-10" }), title: "No skills found", description: "No Claude Code skills are installed. Add skills to .claude/skills/ to get started." })] }));
     }
-    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsx(PageHeader, { title: "Skills", description: "Claude Code skills installed in this project" }), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" }), _jsx(Input, { placeholder: "Search skills...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-9" })] }), _jsx(CategoryFilter, { activeCategory: activeCategory, onCategoryChange: setActiveCategory, counts: categoryCounts }), filteredSkills.length > 0 ? (_jsx(SkillList, { skills: filteredSkills, onSkillSelect: setSelectedSkill })) : (_jsx(EmptyState, { icon: _jsx(Search, { className: "size-10" }), title: "No matching skills", description: "No skills match your current search and filter criteria.", action: _jsx(Button, { variant: "outline", onClick: clearFilters, children: "Clear filters" }) })), _jsx(SkillDetailDrawer, { skill: selectedSkill, onClose: () => setSelectedSkill(null) })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsx(PageHeader, { title: "Skills", description: "Claude Code skills installed in this project" }), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" }), _jsx(Input, { placeholder: "Search skills...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "ps-9" })] }), _jsx(CategoryFilter, { activeCategory: activeCategory, onCategoryChange: setActiveCategory, counts: categoryCounts }), filteredSkills.length > 0 ? (_jsx(SkillList, { skills: filteredSkills, onSkillSelect: setSelectedSkill })) : (_jsx(EmptyState, { icon: _jsx(Search, { className: "size-10" }), title: "No matching skills", description: "No skills match your current search and filter criteria.", action: _jsx(Button, { variant: "outline", onClick: clearFilters, children: "Clear filters" }) })), _jsx(SkillDetailDrawer, { skill: selectedSkill, onClose: () => setSelectedSkill(null) })] }));
 }

package/dist/src/presentation/web/components/features/tools/tool-card.js

@@ -40,5 +40,5 @@ export function ToolCard({ tool, onRefresh, className }) {
                                     const config = TAG_CONFIG[tag] ?? { label: tag, icon: Monitor };
                                     const TagIcon = config.icon;
                                     return (_jsxs("span", { className: "text-muted-foreground/70 inline-flex items-center gap-0.5 text-[9px]", children: [_jsx(TagIcon, { className: "h-2.5 w-2.5" }), config.label] }, tag));
-                                }) })] }), _jsx("p", { "data-testid": "tool-card-summary", className: "text-muted-foreground mt-1 truncate text-xs", children: tool.summary }), _jsxs("div", { className: "mt-auto flex items-center justify-between pt-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [isError && tool.status.status === 'error' ? (_jsxs("span", { className: "flex items-center gap-1 truncate text-[10px] text-red-600 dark:text-red-400", title: tool.status.errorMessage, children: [_jsx(CircleX, { className: "h-3 w-3 shrink-0" }), tool.status.errorMessage ?? 'Error'] })) : isInstalled ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] text-emerald-600 dark:text-emerald-400", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), "Installed"] })) : (_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-[10px]", children: [_jsx(Circle, { className: "h-3 w-3" }), "Not installed"] })), tool.required ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "rounded bg-amber-100 px-1.5 py-0.5 text-[9px] font-medium text-amber-700 dark:bg-amber-900/50 dark:text-amber-400", children: "Required" }) }), _jsx(TooltipContent, { side: "top", children: "This tool is required for Shep to function properly" })] }) })) : null] }), _jsx("div", { className: "flex items-center gap-1", children: isInstalled && canLaunch ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: handleLaunch, disabled: isPending, "aria-label": `Launch ${tool.name}`, "data-testid": "tool-card-launch-button", className: "h-7 cursor-pointer rounded-md px-3 text-xs", children: [isPending ? (_jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" })) : (_jsx(Rocket, { className: "mr-1 h-3 w-3" })), "Launch"] })) : !isInstalled && !isError ? (_jsxs(Button, { size: "sm", variant: "default", onClick: handleInstallClick, "aria-label": `Install ${tool.name}`, "data-testid": "tool-card-install-button", className: "h-7 cursor-pointer rounded-md px-3 text-xs", children: [_jsx(Download, { className: "mr-1 h-3 w-3" }), "Install"] })) : null })] })] }), _jsx(ToolDetailDrawer, { tool: tool, open: drawerOpen, onClose: () => setDrawerOpen(false), onRefresh: onRefresh, autoStart: autoStartInstall })] }));
+                                }) })] }), _jsx("p", { "data-testid": "tool-card-summary", className: "text-muted-foreground mt-1 truncate text-xs", children: tool.summary }), _jsxs("div", { className: "mt-auto flex items-center justify-between pt-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [isError && tool.status.status === 'error' ? (_jsxs("span", { className: "flex items-center gap-1 truncate text-[10px] text-red-600 dark:text-red-400", title: tool.status.errorMessage, children: [_jsx(CircleX, { className: "h-3 w-3 shrink-0" }), tool.status.errorMessage ?? 'Error'] })) : isInstalled ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] text-emerald-600 dark:text-emerald-400", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), "Installed"] })) : (_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-[10px]", children: [_jsx(Circle, { className: "h-3 w-3" }), "Not installed"] })), tool.required ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "rounded bg-amber-100 px-1.5 py-0.5 text-[9px] font-medium text-amber-700 dark:bg-amber-900/50 dark:text-amber-400", children: "Required" }) }), _jsx(TooltipContent, { side: "top", children: "This tool is required for Shep to function properly" })] }) })) : null] }), _jsx("div", { className: "flex items-center gap-1", children: isInstalled && canLaunch ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: handleLaunch, disabled: isPending, "aria-label": `Launch ${tool.name}`, "data-testid": "tool-card-launch-button", className: "h-7 cursor-pointer rounded-md px-3 text-xs", children: [isPending ? (_jsx(Loader2, { className: "me-1 h-3 w-3 animate-spin" })) : (_jsx(Rocket, { className: "me-1 h-3 w-3" })), "Launch"] })) : !isInstalled && !isError ? (_jsxs(Button, { size: "sm", variant: "default", onClick: handleInstallClick, "aria-label": `Install ${tool.name}`, "data-testid": "tool-card-install-button", className: "h-7 cursor-pointer rounded-md px-3 text-xs", children: [_jsx(Download, { className: "me-1 h-3 w-3" }), "Install"] })) : null })] })] }), _jsx(ToolDetailDrawer, { tool: tool, open: drawerOpen, onClose: () => setDrawerOpen(false), onRefresh: onRefresh, autoStart: autoStartInstall })] }));
 }