+
+ );
+}
diff --git a/apps/ui/src/components/views/project-settings-view/project-settings-view.tsx b/apps/ui/src/components/views/project-settings-view/project-settings-view.tsx
new file mode 100644
index 00000000..f441cc72
--- /dev/null
+++ b/apps/ui/src/components/views/project-settings-view/project-settings-view.tsx
@@ -0,0 +1,174 @@
+import { useState, useEffect } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { Settings, FolderOpen, Menu } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ProjectIdentitySection } from './project-identity-section';
+import { ProjectThemeSection } from './project-theme-section';
+import { WorktreePreferencesSection } from './worktree-preferences-section';
+import { DangerZoneSection } from '../settings-view/danger-zone/danger-zone-section';
+import { DeleteProjectDialog } from '../settings-view/components/delete-project-dialog';
+import { ProjectSettingsNavigation } from './components/project-settings-navigation';
+import { useProjectSettingsView } from './hooks/use-project-settings-view';
+import type { Project as ElectronProject } from '@/lib/electron';
+
+// Breakpoint constant for mobile (matches Tailwind lg breakpoint)
+const LG_BREAKPOINT = 1024;
+
+// Convert to the shared types used by components
+interface SettingsProject {
+ id: string;
+ name: string;
+ path: string;
+ theme?: string;
+ icon?: string | null;
+ customIconPath?: string | null;
+}
+
+export function ProjectSettingsView() {
+ const { currentProject, moveProjectToTrash } = useAppStore();
+ const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
+ // Use project settings view navigation hook
+ const { activeView, navigateTo } = useProjectSettingsView();
+
+ // Mobile navigation state - default to showing on desktop, hidden on mobile
+ const [showNavigation, setShowNavigation] = useState(() => {
+ if (typeof window !== 'undefined') {
+ return window.innerWidth >= LG_BREAKPOINT;
+ }
+ return true;
+ });
+
+ // Auto-close navigation on mobile when a section is selected
+ useEffect(() => {
+ if (typeof window !== 'undefined' && window.innerWidth < LG_BREAKPOINT) {
+ setShowNavigation(false);
+ }
+ }, [activeView]);
+
+ // Handle window resize to show/hide navigation appropriately
+ useEffect(() => {
+ const handleResize = () => {
+ if (window.innerWidth >= LG_BREAKPOINT) {
+ setShowNavigation(true);
+ }
+ };
+
+ window.addEventListener('resize', handleResize);
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ // Convert electron Project to settings-view Project type
+ const convertProject = (project: ElectronProject | null): SettingsProject | null => {
+ if (!project) return null;
+ return {
+ id: project.id,
+ name: project.name,
+ path: project.path,
+ theme: project.theme,
+ icon: project.icon,
+ customIconPath: project.customIconPath,
+ };
+ };
+
+ const settingsProject = convertProject(currentProject);
+
+ // Render the active section based on current view
+ const renderActiveSection = () => {
+ if (!currentProject) return null;
+
+ switch (activeView) {
+ case 'identity':
+ return
+
+
+
+
+
+ Project Identity
++ Customize how your project appears in the sidebar and project switcher. +
+
+ {/* Project Name */}
+
+
+
+ handleNameChange(e.target.value)}
+ placeholder="Enter project name"
+ />
+
+
+ {/* Project Icon */}
+
+
+
+ + Choose a preset icon or upload a custom image +
+ + {/* Custom Icon Upload */} +
+
+
+ {/* Preset Icon Picker - only show if no custom icon */}
+ {!customIconPath && (
+
+ {customIconPath ? (
+
+
+ 
+
+
+ ) : (
+
+
+ )}
+
+
+
+
+ + PNG, JPG, GIF or WebP. Max 2MB. +
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ No Project Selected
++ Select a project from the sidebar to configure project-specific settings. +
+
+ {/* Header */}
+
+ );
+}
diff --git a/apps/ui/src/components/views/project-settings-view/project-theme-section.tsx b/apps/ui/src/components/views/project-settings-view/project-theme-section.tsx
new file mode 100644
index 00000000..d9293df2
--- /dev/null
+++ b/apps/ui/src/components/views/project-settings-view/project-theme-section.tsx
@@ -0,0 +1,164 @@
+import { useState } from 'react';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Palette, Moon, Sun } from 'lucide-react';
+import { darkThemes, lightThemes, type Theme } from '@/config/theme-options';
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import type { Project } from '@/lib/electron';
+
+interface ProjectThemeSectionProps {
+ project: Project;
+}
+
+export function ProjectThemeSection({ project }: ProjectThemeSectionProps) {
+ const { theme: globalTheme, setProjectTheme } = useAppStore();
+ const [activeTab, setActiveTab] = useState<'dark' | 'light'>('dark');
+
+ const projectTheme = project.theme as Theme | undefined;
+ const hasCustomTheme = projectTheme !== undefined;
+ const effectiveTheme = projectTheme || globalTheme;
+
+ const themesToShow = activeTab === 'dark' ? darkThemes : lightThemes;
+
+ const handleThemeChange = (theme: Theme) => {
+ setProjectTheme(project.id, theme);
+ };
+
+ const handleUseGlobalTheme = (checked: boolean) => {
+ if (checked) {
+ // Clear project theme to use global
+ setProjectTheme(project.id, null);
+ } else {
+ // Set project theme to current global theme
+ setProjectTheme(project.id, globalTheme);
+ }
+ };
+
+ return (
+
+
+
+ {/* Content Area with Sidebar */}
+
+ {/* Mobile menu button */}
+
+
+
+
+ Project Settings
++ Configure settings for {currentProject.name} +
+
+ {/* Side Navigation */}
+ setShowNavigation(false)}
+ />
+
+ {/* Content Panel - Shows only the active section */}
+
+
+ {/* Delete Project Confirmation Dialog */}
+
+
+ {renderActiveSection()}
+
+
+ );
+}
diff --git a/apps/ui/src/components/views/project-settings-view/worktree-preferences-section.tsx b/apps/ui/src/components/views/project-settings-view/worktree-preferences-section.tsx
new file mode 100644
index 00000000..af85eb03
--- /dev/null
+++ b/apps/ui/src/components/views/project-settings-view/worktree-preferences-section.tsx
@@ -0,0 +1,450 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Button } from '@/components/ui/button';
+import { ShellSyntaxEditor } from '@/components/ui/shell-syntax-editor';
+import {
+ GitBranch,
+ Terminal,
+ FileCode,
+ Save,
+ RotateCcw,
+ Trash2,
+ Loader2,
+ PanelBottomClose,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { apiGet, apiPut, apiDelete } from '@/lib/api-fetch';
+import { toast } from 'sonner';
+import { useAppStore } from '@/store/app-store';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import type { Project } from '@/lib/electron';
+
+interface WorktreePreferencesSectionProps {
+ project: Project;
+}
+
+interface InitScriptResponse {
+ success: boolean;
+ exists: boolean;
+ content: string;
+ path: string;
+ error?: string;
+}
+
+export function WorktreePreferencesSection({ project }: WorktreePreferencesSectionProps) {
+ const globalUseWorktrees = useAppStore((s) => s.useWorktrees);
+ const getProjectUseWorktrees = useAppStore((s) => s.getProjectUseWorktrees);
+ const setProjectUseWorktrees = useAppStore((s) => s.setProjectUseWorktrees);
+ const getShowInitScriptIndicator = useAppStore((s) => s.getShowInitScriptIndicator);
+ const setShowInitScriptIndicator = useAppStore((s) => s.setShowInitScriptIndicator);
+ const getDefaultDeleteBranch = useAppStore((s) => s.getDefaultDeleteBranch);
+ const setDefaultDeleteBranch = useAppStore((s) => s.setDefaultDeleteBranch);
+ const getAutoDismissInitScriptIndicator = useAppStore((s) => s.getAutoDismissInitScriptIndicator);
+ const setAutoDismissInitScriptIndicator = useAppStore((s) => s.setAutoDismissInitScriptIndicator);
+
+ // Get effective worktrees setting (project override or global fallback)
+ const projectUseWorktrees = getProjectUseWorktrees(project.path);
+ const effectiveUseWorktrees = projectUseWorktrees ?? globalUseWorktrees;
+
+ const [scriptContent, setScriptContent] = useState('');
+ const [originalContent, setOriginalContent] = useState('');
+ const [scriptExists, setScriptExists] = useState(false);
+ const [isLoading, setIsLoading] = useState(true);
+ const [isSaving, setIsSaving] = useState(false);
+ const [isDeleting, setIsDeleting] = useState(false);
+
+ // Get the current settings for this project
+ const showIndicator = getShowInitScriptIndicator(project.path);
+ const defaultDeleteBranch = getDefaultDeleteBranch(project.path);
+ const autoDismiss = getAutoDismissInitScriptIndicator(project.path);
+
+ // Check if there are unsaved changes
+ const hasChanges = scriptContent !== originalContent;
+
+ // Load project settings (including useWorktrees) when project changes
+ useEffect(() => {
+ const loadProjectSettings = async () => {
+ try {
+ const httpClient = getHttpApiClient();
+ const response = await httpClient.settings.getProject(project.path);
+ if (response.success && response.settings) {
+ // Sync useWorktrees to store if it has a value
+ if (response.settings.useWorktrees !== undefined) {
+ setProjectUseWorktrees(project.path, response.settings.useWorktrees);
+ }
+ // Also sync other settings to store
+ if (response.settings.showInitScriptIndicator !== undefined) {
+ setShowInitScriptIndicator(project.path, response.settings.showInitScriptIndicator);
+ }
+ if (response.settings.defaultDeleteBranchWithWorktree !== undefined) {
+ setDefaultDeleteBranch(project.path, response.settings.defaultDeleteBranchWithWorktree);
+ }
+ if (response.settings.autoDismissInitScriptIndicator !== undefined) {
+ setAutoDismissInitScriptIndicator(
+ project.path,
+ response.settings.autoDismissInitScriptIndicator
+ );
+ }
+ }
+ } catch (error) {
+ console.error('Failed to load project settings:', error);
+ }
+ };
+
+ loadProjectSettings();
+ }, [
+ project.path,
+ setProjectUseWorktrees,
+ setShowInitScriptIndicator,
+ setDefaultDeleteBranch,
+ setAutoDismissInitScriptIndicator,
+ ]);
+
+ // Load init script content when project changes
+ useEffect(() => {
+ const loadInitScript = async () => {
+ setIsLoading(true);
+ try {
+ const response = await apiGet
+
+
+
+
+
+ Theme
++ Customize the theme for this project. +
+
+ {/* Use Global Theme Toggle */}
+
+
+
+
+ {/* Theme Selection - only show if not using global theme */}
+ {hasCustomTheme && (
+
+
+
+ + When enabled, this project will use the global theme setting. Disable to set a + project-specific theme. +
+
+
+ )}
+
+ {/* Info when using global theme */}
+ {!hasCustomTheme && (
+
+
+ {/* Dark/Light Tabs */}
+
+
+
+
+
+
+ {themesToShow.map(({ value, label, Icon, testId, color }) => {
+ const isActive = effectiveTheme === value;
+ return (
+
+ );
+ })}
+
+
+
+ )}
+ + This project is using the global theme:{' '} + {globalTheme} +
+
+
+ );
+}
diff --git a/apps/ui/src/components/views/settings-view.tsx b/apps/ui/src/components/views/settings-view.tsx
index 1ddf0a39..3bcec3bb 100644
--- a/apps/ui/src/components/views/settings-view.tsx
+++ b/apps/ui/src/components/views/settings-view.tsx
@@ -6,7 +6,6 @@ import { useSettingsView, type SettingsViewId } from './settings-view/hooks';
import { NAV_ITEMS } from './settings-view/config/navigation';
import { SettingsHeader } from './settings-view/components/settings-header';
import { KeyboardMapDialog } from './settings-view/components/keyboard-map-dialog';
-import { DeleteProjectDialog } from './settings-view/components/delete-project-dialog';
import { SettingsNavigation } from './settings-view/components/settings-navigation';
import { ApiKeysSection } from './settings-view/api-keys/api-keys-section';
import { ModelDefaultsSection } from './settings-view/model-defaults';
@@ -16,7 +15,6 @@ import { AudioSection } from './settings-view/audio/audio-section';
import { KeyboardShortcutsSection } from './settings-view/keyboard-shortcuts/keyboard-shortcuts-section';
import { FeatureDefaultsSection } from './settings-view/feature-defaults/feature-defaults-section';
import { WorktreesSection } from './settings-view/worktrees';
-import { DangerZoneSection } from './settings-view/danger-zone/danger-zone-section';
import { AccountSection } from './settings-view/account';
import { SecuritySection } from './settings-view/security';
import { DeveloperSection } from './settings-view/developer/developer-section';
@@ -30,8 +28,7 @@ import { MCPServersSection } from './settings-view/mcp-servers';
import { PromptCustomizationSection } from './settings-view/prompts';
import { EventHooksSection } from './settings-view/event-hooks';
import { ImportExportDialog } from './settings-view/components/import-export-dialog';
-import type { Project as SettingsProject, Theme } from './settings-view/shared/types';
-import type { Project as ElectronProject } from '@/lib/electron';
+import type { Theme } from './settings-view/shared/types';
// Breakpoint constant for mobile (matches Tailwind lg breakpoint)
const LG_BREAKPOINT = 1024;
@@ -40,7 +37,6 @@ export function SettingsView() {
const {
theme,
setTheme,
- setProjectTheme,
defaultSkipTests,
setDefaultSkipTests,
enableDependencyBlocking,
@@ -54,7 +50,6 @@ export function SettingsView() {
muteDoneSound,
setMuteDoneSound,
currentProject,
- moveProjectToTrash,
defaultPlanningMode,
setDefaultPlanningMode,
defaultRequirePlanApproval,
@@ -69,34 +64,8 @@ export function SettingsView() {
setSkipSandboxWarning,
} = useAppStore();
- // Convert electron Project to settings-view Project type
- const convertProject = (project: ElectronProject | null): SettingsProject | null => {
- if (!project) return null;
- return {
- id: project.id,
- name: project.name,
- path: project.path,
- theme: project.theme as Theme | undefined,
- icon: project.icon,
- customIconPath: project.customIconPath,
- };
- };
-
- const settingsProject = convertProject(currentProject);
-
- // Compute the effective theme for the current project
- const effectiveTheme = (settingsProject?.theme || theme) as Theme;
-
- // Handler to set theme - always updates global theme (user's preference),
- // and also sets per-project theme if a project is selected
- const handleSetTheme = (newTheme: typeof theme) => {
- // Always update global theme so user's preference persists across all projects
- setTheme(newTheme);
- // Also set per-project theme if a project is selected
- if (currentProject) {
- setProjectTheme(currentProject.id, newTheme);
- }
- };
+ // Global theme (project-specific themes are managed in Project Settings)
+ const globalTheme = theme as Theme;
// Get initial view from URL search params
const { view: initialView } = useSearch({ from: '/settings' });
@@ -113,7 +82,6 @@ export function SettingsView() {
}
};
- const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [showKeyboardMapDialog, setShowKeyboardMapDialog] = useState(false);
const [showImportExportDialog, setShowImportExportDialog] = useState(false);
@@ -172,9 +140,8 @@ export function SettingsView() {
case 'appearance':
return (
+
+
+
+
+
+ + Worktree Preferences +
++ Configure worktree behavior for this project. +
+
+ {/* Enable Git Worktree Isolation Toggle */}
+
+
+ {
+ const value = checked === true;
+ setProjectUseWorktrees(project.path, value);
+ try {
+ const httpClient = getHttpApiClient();
+ await httpClient.settings.updateProject(project.path, {
+ useWorktrees: value,
+ });
+ } catch (error) {
+ console.error('Failed to persist useWorktrees:', error);
+ }
+ }}
+ className="mt-1"
+ data-testid="project-use-worktrees-checkbox"
+ />
+
+
+ {/* Separator */}
+
+
+ {/* Show Init Script Indicator Toggle */}
+
+
+
+ + Creates isolated git branches for each feature in this project. When disabled, agents + work directly in the main project directory. +
+
+ {
+ const value = checked === true;
+ setShowInitScriptIndicator(project.path, value);
+ // Persist to server
+ try {
+ const httpClient = getHttpApiClient();
+ await httpClient.settings.updateProject(project.path, {
+ showInitScriptIndicator: value,
+ });
+ } catch (error) {
+ console.error('Failed to persist showInitScriptIndicator:', error);
+ }
+ }}
+ className="mt-1"
+ />
+
+
+ {/* Auto-dismiss Init Script Indicator Toggle */}
+ {showIndicator && (
+
+
+
+ + Display a floating panel in the bottom-right corner showing init script execution + status and output when a worktree is created. +
+
+ {
+ const value = checked === true;
+ setAutoDismissInitScriptIndicator(project.path, value);
+ // Persist to server
+ try {
+ const httpClient = getHttpApiClient();
+ await httpClient.settings.updateProject(project.path, {
+ autoDismissInitScriptIndicator: value,
+ });
+ } catch (error) {
+ console.error('Failed to persist autoDismissInitScriptIndicator:', error);
+ }
+ }}
+ className="mt-1"
+ />
+
+ )}
+
+ {/* Default Delete Branch Toggle */}
+
+
+
+ + Automatically hide the indicator 5 seconds after the script completes. +
+
+ {
+ const value = checked === true;
+ setDefaultDeleteBranch(project.path, value);
+ // Persist to server
+ try {
+ const httpClient = getHttpApiClient();
+ await httpClient.settings.updateProject(project.path, {
+ defaultDeleteBranch: value,
+ });
+ } catch (error) {
+ console.error('Failed to persist defaultDeleteBranch:', error);
+ }
+ }}
+ className="mt-1"
+ />
+
+
+ {/* Separator */}
+
+
+ {/* Init Script Section */}
+
+
+
+ + When deleting a worktree, automatically check the "Also delete the branch" option. +
+
+
+
+
+
+
+ + Shell commands to run after a worktree is created. Runs once per worktree. Uses Git Bash + on Windows for cross-platform compatibility. +
+ + {/* File path indicator */} +
+
+
+ {isLoading ? (
+ .automaker/worktree-init.sh
+ {hasChanges && (unsaved changes)}
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+ )}
+