diff --git a/desktop/src/features/agents/ui/AgentAiConfigurationMode.tsx b/desktop/src/features/agents/ui/AgentAiConfigurationMode.tsx index 6750649021..a7ae1876b7 100644 --- a/desktop/src/features/agents/ui/AgentAiConfigurationMode.tsx +++ b/desktop/src/features/agents/ui/AgentAiConfigurationMode.tsx @@ -6,6 +6,16 @@ import type { InheritedDefault } from "./bakedEnvHelpers"; export type { AgentAiConfigurationMode } from "./agentAiConfigurationPolicy"; +/** + * Motion shared by the sliding pill and the labels it slides under. Both halves + * must use it: a bare `transition-colors` falls back to Tailwind's 150ms + * default, so the label finishes recoloring ~100ms before the 250ms pill + * arrives beneath it, and on a different curve. + */ +const TAB_MOTION = "duration-[250ms] ease-out motion-reduce:transition-none"; + +const TAB_TRIGGER_CLASS = `relative z-10 h-full rounded-md bg-transparent text-xs font-medium shadow-none transition-colors ${TAB_MOTION} data-[state=active]:bg-transparent data-[state=active]:shadow-none`; + export function HarnessModelDefaultNotice({ harness, model, @@ -86,24 +96,18 @@ export function AgentAiConfigurationModeField({