@shepai/cli 1.117.0 → 1.118.0-pr378.15bbb9b

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

@@ -11,7 +11,7 @@ import { Switch } from '../../ui/switch.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/select.js';
 import { updateSettingsAction } from '../../../app/actions/update-settings.js';
-import { AgentAuthMethod, EditorType } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { AgentAuthMethod, EditorType, 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 { TimeoutSlider } from '../../features/settings/timeout-slider.js';
@@ -26,6 +26,11 @@ const EDITOR_OPTIONS = [
     { value: EditorType.Zed, label: 'Zed' },
     { value: EditorType.Antigravity, label: 'Antigravity' },
 ];
+const SHELL_OPTIONS = [
+    { value: 'bash', label: 'Bash' },
+    { value: 'zsh', label: 'Zsh' },
+    { value: 'fish', label: 'Fish' },
+];
 const SECTIONS = [
     { id: 'agent', label: 'Agent', icon: Bot },
     { id: 'environment', label: 'Environment', icon: Terminal },
@@ -115,7 +120,7 @@ function SectionHint({ children, links, }) {
     return (_jsxs("div", { className: "hidden pt-2 lg:block", children: [_jsx("p", { className: "text-muted-foreground/70 text-[11px] leading-relaxed", children: children }), links != null && links.length > 0 ? (_jsx("div", { className: "mt-2 flex flex-col gap-1", children: links.map((link) => (_jsxs("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-[10px] transition-colors", children: [_jsx(ExternalLink, { className: "h-2.5 w-2.5" }), link.label] }, link.href))) })) : null] }));
 }
 /* ── Main component ── */
-export function SettingsPageClient({ settings, shepHome, dbFileSize }) {
+export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTerminals, }) {
     const { showSaving, showSaved, save } = useSaveIndicator();
     const featureFlags = settings.featureFlags ?? { skills: false, envDeploy: false, debug: false };
     // Agent state
@@ -125,7 +130,12 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize }) {
     const [showToken, setShowToken] = useState(false);
     // Environment state
     const [editor, setEditor] = useState(settings.environment.defaultEditor);
-    const shell = settings.environment.shellPreference;
+    const [shell, setShell] = useState(settings.environment.shellPreference);
+    const [terminal, setTerminal] = useState(settings.environment.terminalPreference ?? TerminalType.System);
+    // Filter to only show installed terminals
+    const terminalOptions = availableTerminals
+        ? availableTerminals.filter((t) => t.available)
+        : [{ id: TerminalType.System, name: 'System Terminal', available: true }];
     // Workflow state
     const [openPr, setOpenPr] = useState(settings.workflow.openPrOnImplementationComplete);
     const [pushOnComplete, setPushOnComplete] = useState(settings.workflow.approvalGateDefaults.pushOnImplementationComplete);
@@ -299,20 +309,42 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize }) {
                                         label: 'Configuration guide',
                                         href: 'https://github.com/shep-ai/cli/blob/main/docs/guides/configuration.md',
                                     },
-                                ], children: "Choose which AI coding agent powers your features. Each agent supports different models and capabilities. Authentication is resolved automatically via your active session." })] }), _jsxs("div", { id: "section-environment", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(SettingsSection, { icon: Terminal, title: "Environment", description: "Editor and shell preferences", testId: "environment-settings-section", children: _jsx(SettingsRow, { label: "Default Editor", description: "Editor launched for file operations", htmlFor: "default-editor", children: _jsxs(Select, { value: editor, onValueChange: (v) => {
-                                            setEditor(v);
-                                            save({
-                                                environment: { defaultEditor: v, shellPreference: shell },
-                                            });
-                                        }, children: [_jsx(SelectTrigger, { id: "default-editor", "data-testid": "editor-select", className: "w-55 cursor-pointer text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: EDITOR_OPTIONS.map((opt) => {
-                                                    const Icon = getEditorTypeIcon(opt.value);
-                                                    return (_jsx(SelectItem, { value: opt.value, children: _jsxs("span", { className: "flex items-center gap-2 text-xs", children: [_jsx(Icon, { className: "h-4 w-4 shrink-0" }), opt.label] }) }, opt.value));
-                                                }) })] }) }) }), _jsx(SectionHint, { links: [
+                                ], 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) => {
+                                                setEditor(v);
+                                                save({
+                                                    environment: {
+                                                        defaultEditor: v,
+                                                        shellPreference: shell,
+                                                        terminalPreference: terminal,
+                                                    },
+                                                });
+                                            }, 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) => {
+                                                setShell(v);
+                                                save({
+                                                    environment: {
+                                                        defaultEditor: editor,
+                                                        shellPreference: v,
+                                                        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) => {
+                                                setTerminal(v);
+                                                save({
+                                                    environment: {
+                                                        defaultEditor: editor,
+                                                        shellPreference: shell,
+                                                        terminalPreference: v,
+                                                    },
+                                                });
+                                            }, 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',
                                         href: 'https://github.com/shep-ai/cli/blob/main/docs/guides/configuration.md',
                                     },
-                                ], children: "Your preferred editor is used when opening files for review or editing during the development workflow." })] }), _jsxs("div", { id: "section-workflow", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: GitBranch, title: "Workflow", description: "Automation behavior after implementation", testId: "workflow-settings-section", children: [_jsx(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: "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) => {
                                             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) => {