Merge pull request #539 from stefandevo/fix/light-mode-agent-output

fix: respect theme in agent output modal and log viewer

apps/ui/src/components/layout/project-switcher/components/icon-picker.tsx

@@ -448,7 +448,9 @@ export function IconPicker({ selectedIcon, onSelectIcon }: IconPickerProps) {
   );
 
   const getIconComponent = (iconName: string) => {
-    return (LucideIcons as Record<string, React.ComponentType<{ className?: string }>>)[iconName];
+    return (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[
+      iconName
+    ];
   };
 
   return (

apps/ui/src/components/layout/project-switcher/components/project-switcher-item.tsx

@@ -29,7 +29,7 @@ export function ProjectSwitcherItem({
   // Get the icon component from lucide-react
   const getIconComponent = (): LucideIcon => {
     if (project.icon && project.icon in LucideIcons) {
-      return (LucideIcons as Record<string, LucideIcon>)[project.icon];
+      return (LucideIcons as unknown as Record<string, LucideIcon>)[project.icon];
     }
     return Folder;
   };

apps/ui/src/components/layout/project-switcher/project-switcher.tsx

@@ -17,6 +17,7 @@ import { getElectronAPI } from '@/lib/electron';
 import { initializeProject, hasAppSpec, hasAutomakerDir } from '@/lib/project-init';
 import { toast } from 'sonner';
 import { CreateSpecDialog } from '@/components/views/spec-view/dialogs';
+import type { FeatureCount } from '@/components/views/spec-view/types';
 
 function getOSAbbreviation(os: string): string {
   switch (os) {
@@ -57,7 +58,7 @@ export function ProjectSwitcher() {
   const [projectOverview, setProjectOverview] = useState('');
   const [generateFeatures, setGenerateFeatures] = useState(true);
   const [analyzeProject, setAnalyzeProject] = useState(true);
-  const [featureCount, setFeatureCount] = useState(5);
+  const [featureCount, setFeatureCount] = useState<FeatureCount>(50);
 
   // Derive isCreatingSpec from store state
   const isCreatingSpec = specCreatingForProject !== null;
@@ -208,13 +209,18 @@ export function ProjectSwitcher() {
 
     try {
       const api = getElectronAPI();
-      await api.generateAppSpec({
+      if (!api.specRegeneration) {
-        projectPath: setupProjectPath,
+        toast.error('Spec regeneration not available');
+        setSpecCreatingForProject(null);
+        return;
+      }
+      await api.specRegeneration.create(
+        setupProjectPath,
         projectOverview,
         generateFeatures,
         analyzeProject,
-        featureCount,
+        featureCount
-      });
+      );
     } catch (error) {
       console.error('Failed to generate spec:', error);
       toast.error('Failed to generate spec', {

apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx

@@ -27,7 +27,7 @@ export function SidebarHeader({
   // Get the icon component from lucide-react
   const getIconComponent = (): LucideIcon => {
     if (currentProject?.icon && currentProject.icon in LucideIcons) {
-      return (LucideIcons as Record<string, LucideIcon>)[currentProject.icon];
+      return (LucideIcons as unknown as Record<string, LucideIcon>)[currentProject.icon];
     }
     return Folder;
   };
@@ -125,7 +125,7 @@ export function SidebarHeader({
               {projects.map((project) => {
                 const ProjectIcon =
                   project.icon && project.icon in LucideIcons
-                    ? (LucideIcons as Record<string, LucideIcon>)[project.icon]
+                    ? (LucideIcons as unknown as Record<string, LucideIcon>)[project.icon]
                     : Folder;
                 const isActive = currentProject?.id === project.id;
 

apps/ui/src/components/shared/font-selector.tsx

@@ -0,0 +1,47 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { DEFAULT_FONT_VALUE } from '@/config/ui-font-options';
+
+interface FontOption {
+  value: string;
+  label: string;
+}
+
+interface FontSelectorProps {
+  id: string;
+  value: string;
+  options: readonly FontOption[];
+  placeholder: string;
+  onChange: (value: string) => void;
+}
+
+/**
+ * Reusable font selector component with live preview styling
+ */
+export function FontSelector({ id, value, options, placeholder, onChange }: FontSelectorProps) {
+  return (
+    <Select value={value} onValueChange={onChange}>
+      <SelectTrigger id={id} className="w-full">
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            <span
+              style={{
+                fontFamily: option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
+              }}
+            >
+              {option.label}
+            </span>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

apps/ui/src/components/shared/index.ts

@@ -5,3 +5,6 @@ export {
   type UseModelOverrideOptions,
   type UseModelOverrideResult,
 } from './use-model-override';
+
+// Font Components
+export { FontSelector } from './font-selector';

apps/ui/src/components/ui/keyboard-map.tsx

@@ -90,8 +90,10 @@ const SHORTCUT_LABELS: Record<keyof KeyboardShortcuts, string> = {
   context: 'Context',
   memory: 'Memory',
   settings: 'Settings',
+  projectSettings: 'Project Settings',
   terminal: 'Terminal',
   ideation: 'Ideation',
+  notifications: 'Notifications',
   githubIssues: 'GitHub Issues',
   githubPrs: 'Pull Requests',
   toggleSidebar: 'Toggle Sidebar',
@@ -118,8 +120,10 @@ const SHORTCUT_CATEGORIES: Record<keyof KeyboardShortcuts, 'navigation' | 'ui' |
   context: 'navigation',
   memory: 'navigation',
   settings: 'navigation',
+  projectSettings: 'navigation',
   terminal: 'navigation',
   ideation: 'navigation',
+  notifications: 'navigation',
   githubIssues: 'navigation',
   githubPrs: 'navigation',
   toggleSidebar: 'ui',

apps/ui/src/components/ui/log-viewer.tsx

@@ -108,7 +108,7 @@ const getToolCategoryColor = (category: ToolCategory | undefined): string => {
     case 'task':
       return 'text-indigo-400 bg-indigo-500/10 border-indigo-500/30';
     default:
-      return 'text-zinc-400 bg-zinc-500/10 border-zinc-500/30';
+      return 'text-muted-foreground bg-muted/30 border-border';
   }
 };
 
@@ -150,9 +150,9 @@ function TodoListRenderer({ todos }: { todos: TodoItem[] }) {
       case 'in_progress':
         return <Loader2 className="w-4 h-4 text-amber-400 animate-spin" />;
       case 'pending':
-        return <Circle className="w-4 h-4 text-zinc-500" />;
+        return <Circle className="w-4 h-4 text-muted-foreground/70" />;
       default:
-        return <Circle className="w-4 h-4 text-zinc-500" />;
+        return <Circle className="w-4 h-4 text-muted-foreground/70" />;
     }
   };
 
@@ -163,9 +163,9 @@ function TodoListRenderer({ todos }: { todos: TodoItem[] }) {
       case 'in_progress':
         return 'text-amber-300';
       case 'pending':
-        return 'text-zinc-400';
+        return 'text-muted-foreground';
       default:
-        return 'text-zinc-400';
+        return 'text-muted-foreground';
     }
   };
 
@@ -197,7 +197,7 @@ function TodoListRenderer({ todos }: { todos: TodoItem[] }) {
             'flex items-start gap-2 p-2 rounded-md transition-colors',
             todo.status === 'in_progress' && 'bg-amber-500/5 border border-amber-500/20',
             todo.status === 'completed' && 'bg-emerald-500/5',
-            todo.status === 'pending' && 'bg-zinc-800/30'
+            todo.status === 'pending' && 'bg-muted/30'
           )}
         >
           <div className="mt-0.5 flex-shrink-0">{getStatusIcon(todo.status)}</div>
@@ -313,9 +313,9 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
 
   // Get colors - use tool category colors for tool_call entries
   const colorParts = toolCategoryColors.split(' ');
-  const textColor = isToolCall ? colorParts[0] || 'text-zinc-400' : colors.text;
+  const textColor = isToolCall ? colorParts[0] || 'text-muted-foreground' : colors.text;
-  const bgColor = isToolCall ? colorParts[1] || 'bg-zinc-500/10' : colors.bg;
+  const bgColor = isToolCall ? colorParts[1] || 'bg-muted/30' : colors.bg;
-  const borderColor = isToolCall ? colorParts[2] || 'border-zinc-500/30' : colors.border;
+  const borderColor = isToolCall ? colorParts[2] || 'border-border' : colors.border;
 
   return (
     <div
@@ -334,9 +334,9 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
       >
         {hasContent ? (
           isExpanded ? (
-            <ChevronDown className="w-4 h-4 text-zinc-400 flex-shrink-0" />
+            <ChevronDown className="w-4 h-4 text-muted-foreground flex-shrink-0" />
           ) : (
-            <ChevronRight className="w-4 h-4 text-zinc-400 flex-shrink-0" />
+            <ChevronRight className="w-4 h-4 text-muted-foreground flex-shrink-0" />
           )
         ) : (
           <span className="w-4 flex-shrink-0" />
@@ -361,7 +361,9 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
           {entry.title}
         </span>
 
-        <span className="text-xs text-zinc-400 truncate flex-1 ml-2">{collapsedPreview}</span>
+        <span className="text-xs text-muted-foreground truncate flex-1 ml-2">
+          {collapsedPreview}
+        </span>
       </button>
 
       {(isExpanded || !hasContent) && (
@@ -374,7 +376,7 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
               {formattedContent.map((part, index) => (
                 <div key={index}>
                   {part.type === 'json' ? (
-                    <pre className="bg-zinc-900/50 rounded p-2 overflow-x-auto scrollbar-styled text-xs text-primary">
+                    <pre className="bg-muted/50 rounded p-2 overflow-x-auto scrollbar-styled text-xs text-primary">
                       {part.content}
                     </pre>
                   ) : (
@@ -576,7 +578,7 @@ export function LogViewer({ output, className }: LogViewerProps) {
           <Info className="w-8 h-8 mx-auto mb-2 opacity-50" />
           <p className="text-sm">No log entries yet. Logs will appear here as the process runs.</p>
           {output && output.trim() && (
-            <div className="mt-4 p-3 bg-zinc-900/50 rounded text-xs font-mono text-left max-h-40 overflow-auto scrollbar-styled">
+            <div className="mt-4 p-3 bg-muted/50 rounded text-xs font-mono text-left max-h-40 overflow-auto scrollbar-styled">
               <pre className="whitespace-pre-wrap">{output}</pre>
             </div>
           )}
@@ -610,23 +612,23 @@ export function LogViewer({ output, className }: LogViewerProps) {
     <div className={cn('flex flex-col', className)}>
       {/* Sticky header with search, stats, and filters */}
       {/* Use -top-4 to compensate for parent's p-4 padding, pt-4 to restore visual spacing */}
-      <div className="sticky -top-4 z-10 bg-zinc-950/95 backdrop-blur-sm pt-4 pb-2 space-y-2 -mx-4 px-4">
+      <div className="sticky -top-4 z-10 bg-popover/95 backdrop-blur-sm pt-4 pb-2 space-y-2 -mx-4 px-4">
         {/* Search bar */}
         <div className="flex items-center gap-2 px-1" data-testid="log-search-bar">
           <div className="relative flex-1">
-            <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" />
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/70" />
             <input
               type="text"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               placeholder="Search logs..."
-              className="w-full pl-8 pr-8 py-1.5 text-xs bg-zinc-900/50 border border-zinc-700/50 rounded-md text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-zinc-600"
+              className="w-full pl-8 pr-8 py-1.5 text-xs bg-muted/50 border border-border rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-ring"
               data-testid="log-search-input"
             />
             {searchQuery && (
               <button
                 onClick={() => setSearchQuery('')}
-                className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-300"
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                 data-testid="log-search-clear"
               >
                 <X className="w-3 h-3" />
@@ -636,7 +638,7 @@ export function LogViewer({ output, className }: LogViewerProps) {
           {hasActiveFilters && (
             <button
               onClick={clearFilters}
-              className="text-xs text-zinc-400 hover:text-zinc-200 px-2 py-1 rounded hover:bg-zinc-800/50 transition-colors flex items-center gap-1"
+              className="text-xs text-muted-foreground hover:text-foreground px-2 py-1 rounded hover:bg-muted transition-colors flex items-center gap-1"
               data-testid="log-clear-filters"
             >
               <X className="w-3 h-3" />
@@ -648,7 +650,7 @@ export function LogViewer({ output, className }: LogViewerProps) {
         {/* Tool category stats bar */}
         {stats.total > 0 && (
           <div className="flex items-center gap-1 px-1 flex-wrap" data-testid="log-stats-bar">
-            <span className="text-xs text-zinc-500 mr-1">
+            <span className="text-xs text-muted-foreground/70 mr-1">
               <Wrench className="w-3 h-3 inline mr-1" />
               {stats.total} tools:
             </span>
@@ -686,7 +688,7 @@ export function LogViewer({ output, className }: LogViewerProps) {
         {/* Header with type filters and controls */}
         <div className="flex items-center justify-between px-1" data-testid="log-viewer-header">
           <div className="flex items-center gap-1 flex-wrap">
-            <Filter className="w-3 h-3 text-zinc-500 mr-1" />
+            <Filter className="w-3 h-3 text-muted-foreground/70 mr-1" />
             {Object.entries(typeCounts).map(([type, count]) => {
               const colors = getLogTypeColors(type as LogEntryType);
               const isHidden = hiddenTypes.has(type as LogEntryType);
@@ -708,7 +710,7 @@ export function LogViewer({ output, className }: LogViewerProps) {
             })}
           </div>
           <div className="flex items-center gap-1">
-            <span className="text-xs text-zinc-500">
+            <span className="text-xs text-muted-foreground/70">
               {filteredEntries.length}/{entries.length}
             </span>
             <button
@@ -717,7 +719,7 @@ export function LogViewer({ output, className }: LogViewerProps) {
                 'text-xs px-2 py-1 rounded transition-colors',
                 expandAllMode
                   ? 'text-primary bg-primary/20 hover:bg-primary/30'
-                  : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'
               )}
               data-testid="log-expand-all"
               title={
@@ -728,7 +730,7 @@ export function LogViewer({ output, className }: LogViewerProps) {
             </button>
             <button
               onClick={collapseAll}
-              className="text-xs text-zinc-400 hover:text-zinc-200 px-2 py-1 rounded hover:bg-zinc-800/50 transition-colors"
+              className="text-xs text-muted-foreground hover:text-foreground px-2 py-1 rounded hover:bg-muted transition-colors"
               data-testid="log-collapse-all"
             >
               Collapse All
@@ -740,7 +742,7 @@ export function LogViewer({ output, className }: LogViewerProps) {
       {/* Log entries */}
       <div className="space-y-2 mt-2" data-testid="log-entries-container">
         {filteredEntries.length === 0 ? (
-          <div className="text-center py-4 text-zinc-500 text-sm">
+          <div className="text-center py-4 text-muted-foreground text-sm">
             No entries match your filters.
             {hasActiveFilters && (
               <button onClick={clearFilters} className="ml-2 text-primary hover:underline">

apps/ui/src/components/views/board-view/components/list-view/list-view.tsx

@@ -411,7 +411,6 @@ export const ListView = memo(function ListView({
                       feature={feature}
                       handlers={createHandlers(feature)}
                       isCurrentAutoTask={runningAutoTasks.includes(feature.id)}
-                      pipelineConfig={pipelineConfig}
                       isSelected={selectedFeatureIds.has(feature.id)}
                       showCheckbox={isSelectionMode}
                       onToggleSelect={() => onToggleFeatureSelection?.(feature.id)}

apps/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx

@@ -453,7 +453,7 @@ export function AgentOutputModal({
             <div
               ref={scrollRef}
               onScroll={handleScroll}
-              className="flex-1 min-h-0 sm:min-h-[200px] sm:max-h-[60vh] overflow-y-auto bg-zinc-950 rounded-lg p-4 font-mono text-xs scrollbar-visible"
+              className="flex-1 min-h-0 sm:min-h-[200px] sm:max-h-[60vh] overflow-y-auto bg-popover border border-border/50 rounded-lg p-4 font-mono text-xs scrollbar-visible"
             >
               {isLoading && !output ? (
                 <div className="flex items-center justify-center h-full text-muted-foreground">
@@ -467,7 +467,9 @@ export function AgentOutputModal({
               ) : effectiveViewMode === 'parsed' ? (
                 <LogViewer output={output} />
               ) : (
-                <div className="whitespace-pre-wrap wrap-break-word text-zinc-300">{output}</div>
+                <div className="whitespace-pre-wrap wrap-break-word text-foreground/80">
+                  {output}
+                </div>
               )}
             </div>
 

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

@@ -20,8 +20,8 @@ interface SettingsProject {
   name: string;
   path: string;
   theme?: string;
-  icon?: string | null;
+  icon?: string;
-  customIconPath?: string | null;
+  customIconPath?: string;
 }
 
 export function ProjectSettingsView() {

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

@@ -1,13 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { Palette, Moon, Sun, Type } from 'lucide-react';
 import { darkThemes, lightThemes, type Theme } from '@/config/theme-options';
 import {
@@ -17,6 +10,7 @@ import {
 } from '@/config/ui-font-options';
 import { cn } from '@/lib/utils';
 import { useAppStore } from '@/store/app-store';
+import { FontSelector } from '@/components/shared';
 import type { Project } from '@/lib/electron';
 
 interface ProjectThemeSectionProps {
@@ -305,25 +299,13 @@ export function ProjectThemeSection({ project }: ProjectThemeSectionProps) {
                   <Label htmlFor="ui-font-select" className="text-sm">
                     Project UI Font
                   </Label>
-                  <Select value={fontSansLocal} onValueChange={handleFontSansChange}>
+                  <FontSelector
-                    <SelectTrigger id="ui-font-select" className="w-full">
+                    id="ui-font-select"
-                      <SelectValue placeholder="Default (Geist Sans)" />
+                    value={fontSansLocal}
-                    </SelectTrigger>
+                    options={UI_SANS_FONT_OPTIONS}
-                    <SelectContent>
+                    placeholder="Default (Geist Sans)"
-                      {UI_SANS_FONT_OPTIONS.map((option) => (
+                    onChange={handleFontSansChange}
-                        <SelectItem key={option.value} value={option.value}>
+                  />
-                          <span
-                            style={{
-                              fontFamily:
-                                option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
-                            }}
-                          >
-                            {option.label}
-                          </span>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
                 </div>
               )}
             </div>
@@ -358,25 +340,13 @@ export function ProjectThemeSection({ project }: ProjectThemeSectionProps) {
                   <Label htmlFor="code-font-select" className="text-sm">
                     Project Code Font
                   </Label>
-                  <Select value={fontMonoLocal} onValueChange={handleFontMonoChange}>
+                  <FontSelector
-                    <SelectTrigger id="code-font-select" className="w-full">
+                    id="code-font-select"
-                      <SelectValue placeholder="Default (Geist Mono)" />
+                    value={fontMonoLocal}
-                    </SelectTrigger>
+                    options={UI_MONO_FONT_OPTIONS}
-                    <SelectContent>
+                    placeholder="Default (Geist Mono)"
-                      {UI_MONO_FONT_OPTIONS.map((option) => (
+                    onChange={handleFontMonoChange}
-                        <SelectItem key={option.value} value={option.value}>
+                  />
-                          <span
-                            style={{
-                              fontFamily:
-                                option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
-                            }}
-                          >
-                            {option.label}
-                          </span>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
                 </div>
               )}
             </div>

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

@@ -1,12 +1,5 @@
 import { useState, useEffect } from 'react';
 import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { Palette, Moon, Sun, Type } from 'lucide-react';
 import { darkThemes, lightThemes } from '@/config/theme-options';
 import {
@@ -16,6 +9,7 @@ import {
 } from '@/config/ui-font-options';
 import { cn } from '@/lib/utils';
 import { useAppStore } from '@/store/app-store';
+import { FontSelector } from '@/components/shared';
 import type { Theme } from '../shared/types';
 
 interface AppearanceSectionProps {
@@ -165,25 +159,13 @@ export function AppearanceSection({ effectiveTheme, onThemeChange }: AppearanceS
               <Label htmlFor="global-ui-font-select" className="text-sm">
                 UI Font
               </Label>
-              <Select value={fontSansValue} onValueChange={handleFontSansChange}>
+              <FontSelector
-                <SelectTrigger id="global-ui-font-select" className="w-full">
+                id="global-ui-font-select"
-                  <SelectValue placeholder="Default (Geist Sans)" />
+                value={fontSansValue}
-                </SelectTrigger>
+                options={UI_SANS_FONT_OPTIONS}
-                <SelectContent>
+                placeholder="Default (Geist Sans)"
-                  {UI_SANS_FONT_OPTIONS.map((option) => (
+                onChange={handleFontSansChange}
-                    <SelectItem key={option.value} value={option.value}>
+              />
-                      <span
-                        style={{
-                          fontFamily:
-                            option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
-                        }}
-                      >
-                        {option.label}
-                      </span>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
               <p className="text-xs text-muted-foreground">
                 Used for headings, labels, and UI text
               </p>
@@ -194,25 +176,13 @@ export function AppearanceSection({ effectiveTheme, onThemeChange }: AppearanceS
               <Label htmlFor="global-code-font-select" className="text-sm">
                 Code Font
               </Label>
-              <Select value={fontMonoValue} onValueChange={handleFontMonoChange}>
+              <FontSelector
-                <SelectTrigger id="global-code-font-select" className="w-full">
+                id="global-code-font-select"
-                  <SelectValue placeholder="Default (Geist Mono)" />
+                value={fontMonoValue}
-                </SelectTrigger>
+                options={UI_MONO_FONT_OPTIONS}
-                <SelectContent>
+                placeholder="Default (Geist Mono)"
-                  {UI_MONO_FONT_OPTIONS.map((option) => (
+                onChange={handleFontMonoChange}
-                    <SelectItem key={option.value} value={option.value}>
+              />
-                      <span
-                        style={{
-                          fontFamily:
-                            option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
-                        }}
-                      >
-                        {option.label}
-                      </span>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
               <p className="text-xs text-muted-foreground">
                 Used for code blocks and monospaced text
               </p>

apps/ui/src/hooks/use-project-settings-loader.ts

@@ -93,8 +93,11 @@ export function useProjectSettingsLoader() {
           }
 
           // Apply defaultDeleteBranch if present
-          if (result.settings.defaultDeleteBranch !== undefined) {
+          if (result.settings.defaultDeleteBranchWithWorktree !== undefined) {
-            setDefaultDeleteBranch(requestedProjectPath, result.settings.defaultDeleteBranch);
+            setDefaultDeleteBranch(
+              requestedProjectPath,
+              result.settings.defaultDeleteBranchWithWorktree
+            );
           }
 
           // Apply autoDismissInitScriptIndicator if present

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

@@ -79,6 +79,41 @@ const SETTINGS_FIELDS_TO_SYNC = [
 // Fields from setup store to sync
 const SETUP_FIELDS_TO_SYNC = ['isFirstRun', 'setupComplete', 'skipClaudeSetup'] as const;
 
+/**
+ * Helper to extract a settings field value from app state
+ * Handles special cases for nested/mapped fields
+ */
+function getSettingsFieldValue(
+  field: (typeof SETTINGS_FIELDS_TO_SYNC)[number],
+  appState: ReturnType<typeof useAppStore.getState>
+): unknown {
+  if (field === 'currentProjectId') {
+    return appState.currentProject?.id ?? null;
+  }
+  if (field === 'terminalFontFamily') {
+    return appState.terminalState.fontFamily;
+  }
+  return appState[field as keyof typeof appState];
+}
+
+/**
+ * Helper to check if a settings field changed between states
+ */
+function hasSettingsFieldChanged(
+  field: (typeof SETTINGS_FIELDS_TO_SYNC)[number],
+  newState: ReturnType<typeof useAppStore.getState>,
+  prevState: ReturnType<typeof useAppStore.getState>
+): boolean {
+  if (field === 'currentProjectId') {
+    return newState.currentProject?.id !== prevState.currentProject?.id;
+  }
+  if (field === 'terminalFontFamily') {
+    return newState.terminalState.fontFamily !== prevState.terminalState.fontFamily;
+  }
+  const key = field as keyof typeof newState;
+  return newState[key] !== prevState[key];
+}
+
 interface SettingsSyncState {
   /** Whether initial settings have been loaded from API */
   loaded: boolean;
@@ -157,15 +192,7 @@ export function useSettingsSync(): SettingsSyncState {
       // Build updates object from current state
       const updates: Record<string, unknown> = {};
       for (const field of SETTINGS_FIELDS_TO_SYNC) {
-        if (field === 'currentProjectId') {
+        updates[field] = getSettingsFieldValue(field, appState);
-          // Special handling: extract ID from currentProject object
-          updates[field] = appState.currentProject?.id ?? null;
-        } else if (field === 'terminalFontFamily') {
-          // Special handling: map terminalState.fontFamily to terminalFontFamily
-          updates[field] = appState.terminalState.fontFamily;
-        } else {
-          updates[field] = appState[field as keyof typeof appState];
-        }
       }
 
       // Include setup wizard state (lives in a separate store)
@@ -262,13 +289,7 @@ export function useSettingsSync(): SettingsSyncState {
         // (migration has already hydrated the store from server/localStorage)
         const updates: Record<string, unknown> = {};
         for (const field of SETTINGS_FIELDS_TO_SYNC) {
-          if (field === 'currentProjectId') {
+          updates[field] = getSettingsFieldValue(field, appState);
-            updates[field] = appState.currentProject?.id ?? null;
-          } else if (field === 'terminalFontFamily') {
-            updates[field] = appState.terminalState.fontFamily;
-          } else {
-            updates[field] = appState[field as keyof typeof appState];
-          }
         }
         for (const field of SETUP_FIELDS_TO_SYNC) {
           updates[field] = setupState[field as keyof typeof setupState];
@@ -322,24 +343,9 @@ export function useSettingsSync(): SettingsSyncState {
       // Check if any synced field changed
       let changed = false;
       for (const field of SETTINGS_FIELDS_TO_SYNC) {
-        if (field === 'currentProjectId') {
+        if (hasSettingsFieldChanged(field, newState, prevState)) {
-          // Special handling: compare currentProject IDs
+          changed = true;
-          if (newState.currentProject?.id !== prevState.currentProject?.id) {
+          break;
-            changed = true;
-            break;
-          }
-        } else if (field === 'terminalFontFamily') {
-          // Special handling: compare terminalState.fontFamily
-          if (newState.terminalState.fontFamily !== prevState.terminalState.fontFamily) {
-            changed = true;
-            break;
-          }
-        } else {
-          const key = field as keyof typeof newState;
-          if (newState[key] !== prevState[key]) {
-            changed = true;
-            break;
-          }
         }
       }
 
@@ -413,13 +419,7 @@ export async function forceSyncSettingsToServer(): Promise<boolean> {
 
     const updates: Record<string, unknown> = {};
     for (const field of SETTINGS_FIELDS_TO_SYNC) {
-      if (field === 'currentProjectId') {
+      updates[field] = getSettingsFieldValue(field, appState);
-        updates[field] = appState.currentProject?.id ?? null;
-      } else if (field === 'terminalFontFamily') {
-        updates[field] = appState.terminalState.fontFamily;
-      } else {
-        updates[field] = appState[field as keyof typeof appState];
-      }
     }
     const setupState = useSetupStore.getState();
     for (const field of SETUP_FIELDS_TO_SYNC) {

apps/ui/src/routes/__root.tsx

@@ -8,7 +8,7 @@ import {
   useFileBrowser,
   setGlobalFileBrowser,
 } from '@/contexts/file-browser-context';
-import { useAppStore, getStoredTheme } from '@/store/app-store';
+import { useAppStore, getStoredTheme, type ThemeMode } from '@/store/app-store';
 import { useSetupStore } from '@/store/setup-store';
 import { useAuthStore } from '@/store/auth-store';
 import { getElectronAPI, isElectron } from '@/lib/electron';
@@ -681,7 +681,7 @@ function RootLayoutContent() {
           upsertAndSetCurrentProject(
             autoOpenCandidate.path,
             autoOpenCandidate.name,
-            autoOpenCandidate.theme
+            autoOpenCandidate.theme as ThemeMode | undefined
           );
         }
 

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

@@ -149,6 +149,31 @@ export function getStoredTheme(): ThemeMode | null {
   return null;
 }
 
+/**
+ * Helper to get effective font value with validation
+ * Returns the font to use (project override -> global -> null for default)
+ * @param projectFont - The project-specific font override
+ * @param globalFont - The global font setting
+ * @param fontOptions - The list of valid font options for validation
+ */
+function getEffectiveFont(
+  projectFont: string | undefined,
+  globalFont: string | null,
+  fontOptions: readonly { value: string; label: string }[]
+): string | null {
+  const isValidFont = (font: string | null | undefined): boolean => {
+    if (!font || font === DEFAULT_FONT_VALUE) return true;
+    return fontOptions.some((opt) => opt.value === font);
+  };
+
+  if (projectFont) {
+    if (!isValidFont(projectFont)) return null; // Fallback to default if font not in list
+    return projectFont === DEFAULT_FONT_VALUE ? null : projectFont;
+  }
+  if (!isValidFont(globalFont)) return null; // Fallback to default if font not in list
+  return globalFont === DEFAULT_FONT_VALUE ? null : globalFont;
+}
+
 /**
  * Save theme to localStorage for immediate persistence
  * This is used as a fallback when server settings can't be loaded
@@ -1415,7 +1440,7 @@ const initialState: AppState = {
     defaultFontSize: 14,
     defaultRunScript: '',
     screenReaderMode: false,
-    fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+    fontFamily: DEFAULT_FONT_VALUE,
     scrollbackLines: 5000,
     lineHeight: 1.0,
     maxSessions: 100,
@@ -1873,43 +1898,13 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
   },
 
   getEffectiveFontSans: () => {
-    const currentProject = get().currentProject;
+    const { currentProject, fontFamilySans } = get();
-    // Return project override if set, otherwise global, otherwise null for default
+    return getEffectiveFont(currentProject?.fontFamilySans, fontFamilySans, UI_SANS_FONT_OPTIONS);
-    // 'default' value means explicitly using default font, so return null for CSS
-    // Also validate that the font is in the available options list
-    const isValidFont = (font: string | null | undefined): boolean => {
-      if (!font || font === DEFAULT_FONT_VALUE) return true;
-      return UI_SANS_FONT_OPTIONS.some((opt) => opt.value === font);
-    };
-
-    if (currentProject?.fontFamilySans) {
-      const font = currentProject.fontFamilySans;
-      if (!isValidFont(font)) return null; // Fallback to default if font not in list
-      return font === DEFAULT_FONT_VALUE ? null : font;
-    }
-    const globalFont = get().fontFamilySans;
-    if (!isValidFont(globalFont)) return null; // Fallback to default if font not in list
-    return globalFont === DEFAULT_FONT_VALUE ? null : globalFont;
   },
 
   getEffectiveFontMono: () => {
-    const currentProject = get().currentProject;
+    const { currentProject, fontFamilyMono } = get();
-    // Return project override if set, otherwise global, otherwise null for default
+    return getEffectiveFont(currentProject?.fontFamilyMono, fontFamilyMono, UI_MONO_FONT_OPTIONS);
-    // 'default' value means explicitly using default font, so return null for CSS
-    // Also validate that the font is in the available options list
-    const isValidFont = (font: string | null | undefined): boolean => {
-      if (!font || font === DEFAULT_FONT_VALUE) return true;
-      return UI_MONO_FONT_OPTIONS.some((opt) => opt.value === font);
-    };
-
-    if (currentProject?.fontFamilyMono) {
-      const font = currentProject.fontFamilyMono;
-      if (!isValidFont(font)) return null; // Fallback to default if font not in list
-      return font === DEFAULT_FONT_VALUE ? null : font;
-    }
-    const globalFont = get().fontFamilyMono;
-    if (!isValidFont(globalFont)) return null; // Fallback to default if font not in list
-    return globalFont === DEFAULT_FONT_VALUE ? null : globalFont;
   },
 
   // Feature actions