ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-03-24 12:23:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
fix: respect theme in agent output modal and log viewer
This commit is contained in:
Shirone
2026-01-17 18:35:32 +00:00
committed by GitHub
parent af17f6e36f aef479218d
commit fef9639e01
17 changed files with 212 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 (

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

@@ -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;
};

16
apps/ui/src/components/layout/project-switcher/project-switcher.tsx
View File

@@ -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({
projectPath: setupProjectPath,
if (!api.specRegeneration) {
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', {

4
apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx
View File

@@ -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;

47
apps/ui/src/components/shared/font-selector.tsx Normal file
View File

@@ -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>
);
}

3
apps/ui/src/components/shared/index.ts
View File

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

4
apps/ui/src/components/ui/keyboard-map.tsx
View File

@@ -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',

52
apps/ui/src/components/ui/log-viewer.tsx
View File

@@ -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 bgColor = isToolCall ? colorParts[1] || 'bg-zinc-500/10' : colors.bg;
const borderColor = isToolCall ? colorParts[2] || 'border-zinc-500/30' : colors.border;
const textColor = isToolCall ? colorParts[0] || 'text-muted-foreground' : colors.text;
const bgColor = isToolCall ? colorParts[1] || 'bg-muted/30' : colors.bg;
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">

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

@@ -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)}

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

@@ -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>

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

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

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

@@ -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}>
<SelectTrigger id="ui-font-select" className="w-full">
<SelectValue placeholder="Default (Geist Sans)" />
</SelectTrigger>
<SelectContent>
{UI_SANS_FONT_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>
<FontSelector
id="ui-font-select"
value={fontSansLocal}
options={UI_SANS_FONT_OPTIONS}
placeholder="Default (Geist Sans)"
onChange={handleFontSansChange}
/>
</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}>
<SelectTrigger id="code-font-select" className="w-full">
<SelectValue placeholder="Default (Geist Mono)" />
</SelectTrigger>
<SelectContent>
{UI_MONO_FONT_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>
<FontSelector
id="code-font-select"
value={fontMonoLocal}
options={UI_MONO_FONT_OPTIONS}
placeholder="Default (Geist Mono)"
onChange={handleFontMonoChange}
/>
</div>
)}
</div>

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

@@ -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}>
<SelectTrigger id="global-ui-font-select" className="w-full">
<SelectValue placeholder="Default (Geist Sans)" />
</SelectTrigger>
<SelectContent>
{UI_SANS_FONT_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>
<FontSelector
id="global-ui-font-select"
value={fontSansValue}
options={UI_SANS_FONT_OPTIONS}
placeholder="Default (Geist Sans)"
onChange={handleFontSansChange}
/>
<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}>
<SelectTrigger id="global-code-font-select" className="w-full">
<SelectValue placeholder="Default (Geist Mono)" />
</SelectTrigger>
<SelectContent>
{UI_MONO_FONT_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>
<FontSelector
id="global-code-font-select"
value={fontMonoValue}
options={UI_MONO_FONT_OPTIONS}
placeholder="Default (Geist Mono)"
onChange={handleFontMonoChange}
/>
<p className="text-xs text-muted-foreground">
Used for code blocks and monospaced text
</p>

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

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

82
apps/ui/src/hooks/use-settings-sync.ts
View File

@@ -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') {
// 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];
}
updates[field] = getSettingsFieldValue(field, 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] = appState.currentProject?.id ?? null;
} else if (field === 'terminalFontFamily') {
updates[field] = appState.terminalState.fontFamily;
} else {
updates[field] = appState[field as keyof typeof appState];
}
updates[field] = getSettingsFieldValue(field, 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') {
// Special handling: compare currentProject IDs
if (newState.currentProject?.id !== prevState.currentProject?.id) {
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;
}
if (hasSettingsFieldChanged(field, newState, prevState)) {
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] = appState.currentProject?.id ?? null;
} else if (field === 'terminalFontFamily') {
updates[field] = appState.terminalState.fontFamily;
} else {
updates[field] = appState[field as keyof typeof appState];
}
updates[field] = getSettingsFieldValue(field, appState);
}
const setupState = useSetupStore.getState();
for (const field of SETUP_FIELDS_TO_SYNC) {

4
apps/ui/src/routes/__root.tsx
View File

@@ -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
);
}

65
apps/ui/src/store/app-store.ts
View File

@@ -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;
// Return project override if set, otherwise global, otherwise null for default
// '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;
const { currentProject, fontFamilySans } = get();
return getEffectiveFont(currentProject?.fontFamilySans, fontFamilySans, UI_SANS_FONT_OPTIONS);
},
getEffectiveFontMono: () => {
const currentProject = get().currentProject;
// Return project override if set, otherwise global, otherwise null for default
// '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;
const { currentProject, fontFamilyMono } = get();
return getEffectiveFont(currentProject?.fontFamilyMono, fontFamilyMono, UI_MONO_FONT_OPTIONS);
},
// Feature actions