Merge pull request #282 from casiusss/feat/sandbox-mode-setting

feat: add configurable sandbox mode setting

apps/ui/src/components/views/settings-view.tsx

@@ -50,6 +50,8 @@ export function SettingsView() {
     setValidationModel,
     autoLoadClaudeMd,
     setAutoLoadClaudeMd,
+    enableSandboxMode,
+    setEnableSandboxMode,
   } = useAppStore();
 
   // Hide usage tracking when using API key (only show for Claude Code CLI users)
@@ -108,6 +110,8 @@ export function SettingsView() {
             <ClaudeMdSettings
               autoLoadClaudeMd={autoLoadClaudeMd}
               onAutoLoadClaudeMdChange={setAutoLoadClaudeMd}
+              enableSandboxMode={enableSandboxMode}
+              onEnableSandboxModeChange={setEnableSandboxMode}
             />
             {showUsageTracking && <ClaudeUsageSection />}
           </div>

apps/ui/src/components/views/settings-view/claude/claude-md-settings.tsx

@@ -1,30 +1,37 @@
 import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
-import { FileCode } from 'lucide-react';
+import { FileCode, Shield } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 interface ClaudeMdSettingsProps {
   autoLoadClaudeMd: boolean;
   onAutoLoadClaudeMdChange: (enabled: boolean) => void;
+  enableSandboxMode: boolean;
+  onEnableSandboxModeChange: (enabled: boolean) => void;
 }
 
 /**
  * ClaudeMdSettings Component
  *
- * UI control for the autoLoadClaudeMd setting which enables automatic loading
- * of project instructions from .claude/CLAUDE.md files via the Claude Agent SDK.
+ * UI controls for Claude Agent SDK settings including:
+ * - Auto-loading of project instructions from .claude/CLAUDE.md files
+ * - Sandbox mode for isolated bash command execution
  *
  * Usage:
  * ```tsx
  * <ClaudeMdSettings
  *   autoLoadClaudeMd={autoLoadClaudeMd}
  *   onAutoLoadClaudeMdChange={setAutoLoadClaudeMd}
+ *   enableSandboxMode={enableSandboxMode}
+ *   onEnableSandboxModeChange={setEnableSandboxMode}
  * />
  * ```
  */
 export function ClaudeMdSettings({
   autoLoadClaudeMd,
   onAutoLoadClaudeMdChange,
+  enableSandboxMode,
+  onEnableSandboxModeChange,
 }: ClaudeMdSettingsProps) {
   return (
     <div
@@ -76,6 +83,32 @@ export function ClaudeMdSettings({
             </p>
           </div>
         </div>
+
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3 mt-2">
+          <Checkbox
+            id="enable-sandbox-mode"
+            checked={enableSandboxMode}
+            onCheckedChange={(checked) => onEnableSandboxModeChange(checked === true)}
+            className="mt-1"
+            data-testid="enable-sandbox-mode-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="enable-sandbox-mode"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <Shield className="w-4 h-4 text-brand-500" />
+              Enable Sandbox Mode
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              Run bash commands in an isolated sandbox environment for additional security.
+              <span className="block mt-1 text-warning/80">
+                Note: On some systems, enabling sandbox mode may cause the agent to hang without
+                responding. If you experience issues, try disabling this option.
+              </span>
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   );