feat: add auto-load CLAUDE.md functionality

- Introduced a new setting to enable automatic loading of CLAUDE.md files from project-specific directories.
- Updated relevant services and components to support the new setting, including the AgentService and AutoModeService.
- Added UI controls for managing the auto-load setting in the settings view.
- Enhanced SDK options to incorporate settingSources for CLAUDE.md loading.
- Updated global and project settings interfaces to include autoLoadClaudeMd property.

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

@@ -10,6 +10,7 @@ import { SettingsNavigation } from './settings-view/components/settings-navigati
 import { ApiKeysSection } from './settings-view/api-keys/api-keys-section';
 import { ClaudeUsageSection } from './settings-view/api-keys/claude-usage-section';
 import { ClaudeCliStatus } from './settings-view/cli-status/claude-cli-status';
+import { ClaudeMdSettings } from './settings-view/claude/claude-md-settings';
 import { AIEnhancementSection } from './settings-view/ai-enhancement';
 import { AppearanceSection } from './settings-view/appearance/appearance-section';
 import { TerminalSection } from './settings-view/terminal/terminal-section';
@@ -47,6 +48,8 @@ export function SettingsView() {
     apiKeys,
     validationModel,
     setValidationModel,
+    autoLoadClaudeMd,
+    setAutoLoadClaudeMd,
   } = useAppStore();
 
   // Hide usage tracking when using API key (only show for Claude Code CLI users)
@@ -102,6 +105,10 @@ export function SettingsView() {
               isChecking={isCheckingClaudeCli}
               onRefresh={handleRefreshClaudeCli}
             />
+            <ClaudeMdSettings
+              autoLoadClaudeMd={autoLoadClaudeMd}
+              onAutoLoadClaudeMdChange={setAutoLoadClaudeMd}
+            />
             {showUsageTracking && <ClaudeUsageSection />}
           </div>
         );

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

@@ -0,0 +1,82 @@
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { FileCode } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface ClaudeMdSettingsProps {
+  autoLoadClaudeMd: boolean;
+  onAutoLoadClaudeMdChange: (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.
+ *
+ * Usage:
+ * ```tsx
+ * <ClaudeMdSettings
+ *   autoLoadClaudeMd={autoLoadClaudeMd}
+ *   onAutoLoadClaudeMdChange={setAutoLoadClaudeMd}
+ * />
+ * ```
+ */
+export function ClaudeMdSettings({
+  autoLoadClaudeMd,
+  onAutoLoadClaudeMdChange,
+}: ClaudeMdSettingsProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+      data-testid="claude-md-settings"
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <FileCode className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            CLAUDE.md Integration
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure automatic loading of project-specific instructions.
+        </p>
+      </div>
+      <div className="p-6">
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="auto-load-claude-md"
+            checked={autoLoadClaudeMd}
+            onCheckedChange={(checked) => onAutoLoadClaudeMdChange(checked === true)}
+            className="mt-1"
+            data-testid="auto-load-claude-md-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="auto-load-claude-md"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <FileCode className="w-4 h-4 text-brand-500" />
+              Auto-load CLAUDE.md Files
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              Automatically load project instructions from{' '}
+              <code className="text-[10px] px-1 py-0.5 rounded bg-accent/50">
+                .claude/CLAUDE.md
+              </code>{' '}
+              files. When enabled, Claude will read and follow conventions specified in your
+              project&apos;s CLAUDE.md file. Project settings override global settings.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/ui/src/hooks/use-settings-migration.ts

@@ -223,6 +223,7 @@ export async function syncSettingsToServer(): Promise<boolean> {
       muteDoneSound: state.muteDoneSound,
       enhancementModel: state.enhancementModel,
       validationModel: state.validationModel,
+      autoLoadClaudeMd: state.autoLoadClaudeMd,
       keyboardShortcuts: state.keyboardShortcuts,
       aiProfiles: state.aiProfiles,
       projects: state.projects,

apps/ui/src/store/app-store.ts

@@ -478,6 +478,9 @@ export interface AppState {
   // Validation Model Settings
   validationModel: AgentModel; // Model used for GitHub issue validation (default: opus)
 
+  // Claude Agent SDK Settings
+  autoLoadClaudeMd: boolean; // Auto-load CLAUDE.md files using SDK's settingSources option
+
   // Project Analysis
   projectAnalysis: ProjectAnalysis | null;
   isAnalyzing: boolean;
@@ -751,6 +754,9 @@ export interface AppActions {
   // Validation Model actions
   setValidationModel: (model: AgentModel) => void;
 
+  // Claude Agent SDK Settings actions
+  setAutoLoadClaudeMd: (enabled: boolean) => Promise<void>;
+
   // AI Profile actions
   addAIProfile: (profile: Omit<AIProfile, 'id'>) => void;
   updateAIProfile: (id: string, updates: Partial<AIProfile>) => void;
@@ -922,6 +928,7 @@ const initialState: AppState = {
   muteDoneSound: false, // Default to sound enabled (not muted)
   enhancementModel: 'sonnet', // Default to sonnet for feature enhancement
   validationModel: 'opus', // Default to opus for GitHub issue validation
+  autoLoadClaudeMd: false, // Default to disabled (user must opt-in)
   aiProfiles: DEFAULT_AI_PROFILES,
   projectAnalysis: null,
   isAnalyzing: false,
@@ -1547,6 +1554,14 @@ export const useAppStore = create<AppState & AppActions>()(
       // Validation Model actions
       setValidationModel: (model) => set({ validationModel: model }),
 
+      // Claude Agent SDK Settings actions
+      setAutoLoadClaudeMd: async (enabled) => {
+        set({ autoLoadClaudeMd: enabled });
+        // Sync to server settings file
+        const { syncSettingsToServer } = await import('@/hooks/use-settings-migration');
+        await syncSettingsToServer();
+      },
+
       // AI Profile actions
       addAIProfile: (profile) => {
         const id = `profile-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
@@ -2690,6 +2705,7 @@ export const useAppStore = create<AppState & AppActions>()(
           muteDoneSound: state.muteDoneSound,
           enhancementModel: state.enhancementModel,
           validationModel: state.validationModel,
+          autoLoadClaudeMd: state.autoLoadClaudeMd,
           // Profiles and sessions
           aiProfiles: state.aiProfiles,
           chatSessions: state.chatSessions,