Merge v0.11.0rc into feat/mobile-improvements-contributor

Resolves merge conflicts by keeping both features:
- enableAiCommitMessages (from our branch)
- defaultFeatureModel (from v0.11.0rc)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

@@ -1,8 +1,14 @@
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { Label } from '@/components/ui/label';
-import { Palette, Moon, Sun } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Palette, Moon, Sun, Upload, X, ImageIcon } from 'lucide-react';
 import { darkThemes, lightThemes } from '@/config/theme-options';
 import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { IconPicker } from '@/components/layout/project-switcher/components/icon-picker';
+import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
+import { getHttpApiClient } from '@/lib/http-api-client';
 import type { Theme, Project } from '../shared/types';
 
 interface AppearanceSectionProps {
@@ -16,10 +22,97 @@ export function AppearanceSection({
   currentProject,
   onThemeChange,
 }: AppearanceSectionProps) {
+  const { setProjectIcon, setProjectName, setProjectCustomIcon } = useAppStore();
   const [activeTab, setActiveTab] = useState<'dark' | 'light'>('dark');
+  const [projectName, setProjectNameLocal] = useState(currentProject?.name || '');
+  const [projectIcon, setProjectIconLocal] = useState<string | null>(currentProject?.icon || null);
+  const [customIconPath, setCustomIconPathLocal] = useState<string | null>(
+    currentProject?.customIconPath || null
+  );
+  const [isUploadingIcon, setIsUploadingIcon] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Sync local state when currentProject changes
+  useEffect(() => {
+    setProjectNameLocal(currentProject?.name || '');
+    setProjectIconLocal(currentProject?.icon || null);
+    setCustomIconPathLocal(currentProject?.customIconPath || null);
+  }, [currentProject]);
 
   const themesToShow = activeTab === 'dark' ? darkThemes : lightThemes;
 
+  // Auto-save when values change
+  const handleNameChange = (name: string) => {
+    setProjectNameLocal(name);
+    if (currentProject && name.trim() && name.trim() !== currentProject.name) {
+      setProjectName(currentProject.id, name.trim());
+    }
+  };
+
+  const handleIconChange = (icon: string | null) => {
+    setProjectIconLocal(icon);
+    if (currentProject) {
+      setProjectIcon(currentProject.id, icon);
+    }
+  };
+
+  const handleCustomIconChange = (path: string | null) => {
+    setCustomIconPathLocal(path);
+    if (currentProject) {
+      setProjectCustomIcon(currentProject.id, path);
+      // Clear Lucide icon when custom icon is set
+      if (path) {
+        setProjectIconLocal(null);
+        setProjectIcon(currentProject.id, null);
+      }
+    }
+  };
+
+  const handleCustomIconUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !currentProject) return;
+
+    // Validate file type
+    const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+    if (!validTypes.includes(file.type)) {
+      return;
+    }
+
+    // Validate file size (max 2MB for icons)
+    if (file.size > 2 * 1024 * 1024) {
+      return;
+    }
+
+    setIsUploadingIcon(true);
+    try {
+      // Convert to base64
+      const reader = new FileReader();
+      reader.onload = async () => {
+        const base64Data = reader.result as string;
+        const result = await getHttpApiClient().saveImageToTemp(
+          base64Data,
+          `project-icon-${file.name}`,
+          file.type,
+          currentProject.path
+        );
+        if (result.success && result.path) {
+          handleCustomIconChange(result.path);
+        }
+        setIsUploadingIcon(false);
+      };
+      reader.readAsDataURL(file);
+    } catch {
+      setIsUploadingIcon(false);
+    }
+  };
+
+  const handleRemoveCustomIcon = () => {
+    handleCustomIconChange(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
   return (
     <div
       className={cn(
@@ -40,7 +133,87 @@ export function AppearanceSection({
           Customize the look and feel of your application.
         </p>
       </div>
-      <div className="p-6 space-y-4">
+      <div className="p-6 space-y-6">
+        {/* Project Details Section */}
+        {currentProject && (
+          <div className="space-y-4 pb-6 border-b border-border/50">
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="project-name-settings">Project Name</Label>
+                <Input
+                  id="project-name-settings"
+                  value={projectName}
+                  onChange={(e) => handleNameChange(e.target.value)}
+                  placeholder="Enter project name"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label>Project Icon</Label>
+                <p className="text-xs text-muted-foreground mb-2">
+                  Choose a preset icon or upload a custom image
+                </p>
+
+                {/* Custom Icon Upload */}
+                <div className="mb-4">
+                  <div className="flex items-center gap-3">
+                    {customIconPath ? (
+                      <div className="relative">
+                        <img
+                          src={getAuthenticatedImageUrl(customIconPath, currentProject.path)}
+                          alt="Custom project icon"
+                          className="w-12 h-12 rounded-lg object-cover border border-border"
+                        />
+                        <button
+                          type="button"
+                          onClick={handleRemoveCustomIcon}
+                          className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center hover:bg-destructive/90"
+                        >
+                          <X className="w-3 h-3" />
+                        </button>
+                      </div>
+                    ) : (
+                      <div className="w-12 h-12 rounded-lg border border-dashed border-border flex items-center justify-center bg-accent/30">
+                        <ImageIcon className="w-5 h-5 text-muted-foreground" />
+                      </div>
+                    )}
+                    <div className="flex-1">
+                      <input
+                        ref={fileInputRef}
+                        type="file"
+                        accept="image/jpeg,image/png,image/gif,image/webp"
+                        onChange={handleCustomIconUpload}
+                        className="hidden"
+                        id="custom-icon-upload"
+                      />
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => fileInputRef.current?.click()}
+                        disabled={isUploadingIcon}
+                        className="gap-1.5"
+                      >
+                        <Upload className="w-3.5 h-3.5" />
+                        {isUploadingIcon ? 'Uploading...' : 'Upload Custom Icon'}
+                      </Button>
+                      <p className="text-xs text-muted-foreground mt-1">
+                        PNG, JPG, GIF or WebP. Max 2MB.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Preset Icon Picker - only show if no custom icon */}
+                {!customIconPath && (
+                  <IconPicker selectedIcon={projectIcon} onSelectIcon={handleIconChange} />
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Theme Section */}
         <div className="space-y-4">
           <div className="flex items-center justify-between">
             <Label className="text-foreground font-medium">

apps/ui/src/components/views/settings-view/config/navigation.ts

@@ -37,8 +37,8 @@ export const GLOBAL_NAV_GROUPS: NavigationGroup[] = [
   {
     label: 'Model & Prompts',
     items: [
-      { id: 'model-defaults', label: 'Model Defaults', icon: Workflow },
       { id: 'defaults', label: 'Feature Defaults', icon: FlaskConical },
+      { id: 'model-defaults', label: 'Model Defaults', icon: Workflow },
       { id: 'worktrees', label: 'Worktrees', icon: GitBranch },
       { id: 'prompts', label: 'Prompt Customization', icon: MessageSquareText },
       { id: 'api-keys', label: 'API Keys', icon: Key },

apps/ui/src/components/views/settings-view/feature-defaults/feature-defaults-section.tsx

@@ -11,6 +11,7 @@ import {
   ShieldCheck,
   FastForward,
   Sparkles,
+  Cpu,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import {
@@ -20,6 +21,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import type { PhaseModelEntry } from '@automaker/types';
+import { PhaseModelSelector } from '../model-defaults/phase-model-selector';
 
 type PlanningMode = 'skip' | 'lite' | 'spec' | 'full';
 
@@ -30,12 +33,14 @@ interface FeatureDefaultsSectionProps {
   defaultPlanningMode: PlanningMode;
   defaultRequirePlanApproval: boolean;
   enableAiCommitMessages: boolean;
+  defaultFeatureModel: PhaseModelEntry;
   onDefaultSkipTestsChange: (value: boolean) => void;
   onEnableDependencyBlockingChange: (value: boolean) => void;
   onSkipVerificationInAutoModeChange: (value: boolean) => void;
   onDefaultPlanningModeChange: (value: PlanningMode) => void;
   onDefaultRequirePlanApprovalChange: (value: boolean) => void;
   onEnableAiCommitMessagesChange: (value: boolean) => void;
+  onDefaultFeatureModelChange: (value: PhaseModelEntry) => void;
 }
 
 export function FeatureDefaultsSection({
@@ -45,12 +50,14 @@ export function FeatureDefaultsSection({
   defaultPlanningMode,
   defaultRequirePlanApproval,
   enableAiCommitMessages,
+  defaultFeatureModel,
   onDefaultSkipTestsChange,
   onEnableDependencyBlockingChange,
   onSkipVerificationInAutoModeChange,
   onDefaultPlanningModeChange,
   onDefaultRequirePlanApprovalChange,
   onEnableAiCommitMessagesChange,
+  onDefaultFeatureModelChange,
 }: FeatureDefaultsSectionProps) {
   return (
     <div
@@ -73,6 +80,30 @@ export function FeatureDefaultsSection({
         </p>
       </div>
       <div className="p-6 space-y-5">
+        {/* Default Feature Model Setting */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <div className="w-10 h-10 mt-0.5 rounded-xl flex items-center justify-center shrink-0 bg-brand-500/10">
+            <Cpu className="w-5 h-5 text-brand-500" />
+          </div>
+          <div className="flex-1 space-y-2">
+            <div className="flex items-center justify-between">
+              <Label className="text-foreground font-medium">Default Model</Label>
+              <PhaseModelSelector
+                value={defaultFeatureModel}
+                onChange={onDefaultFeatureModelChange}
+                compact
+                align="end"
+              />
+            </div>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              The default AI model and thinking level used when creating new feature cards.
+            </p>
+          </div>
+        </div>
+
+        {/* Separator */}
+        <div className="border-t border-border/30" />
+
         {/* Planning Mode Default */}
         <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
           <div
@@ -170,12 +201,11 @@ export function FeatureDefaultsSection({
                 </p>
               </div>
             </div>
-            <div className="border-t border-border/30" />
           </>
         )}
 
         {/* Separator */}
-        {defaultPlanningMode === 'skip' && <div className="border-t border-border/30" />}
+        <div className="border-t border-border/30" />
 
         {/* Automated Testing Setting */}
         <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">

apps/ui/src/components/views/settings-view/mcp-servers/dialogs/add-edit-server-dialog.tsx

@@ -48,7 +48,7 @@ export function AddEditServerDialog({
             Configure an MCP server to extend agent capabilities with custom tools.
           </DialogDescription>
         </DialogHeader>
-        <div className="space-y-4 py-4">
+        <div className="space-y-4 py-4 overflow-y-auto">
           <div className="space-y-2">
             <Label htmlFor="server-name">Name</Label>
             <Input

apps/ui/src/components/views/settings-view/shared/types.ts

@@ -26,6 +26,8 @@ export interface Project {
   name: string;
   path: string;
   theme?: string;
+  icon?: string;
+  customIconPath?: string;
 }
 
 export interface ApiKeys {