fix: ExecutorProfileSelector inconsistencies (#687)

* fix ExecutorProfileSelector inconsistencies

* Simplify executor fix, re-add mobile case

---------

Co-authored-by: Alex Netsch <alex@bloop.ai>

frontend/src/components/settings/ExecutorProfileSelector.tsx

@@ -20,7 +20,6 @@ type Props = {
   disabled?: boolean;
   showLabel?: boolean;
   showVariantSelector?: boolean;
-  className?: string;
 };
 
 function ExecutorProfileSelector({
@@ -30,7 +29,6 @@ function ExecutorProfileSelector({
   disabled = false,
   showLabel = true,
   showVariantSelector = true,
-  className = '',
 }: Props) {
   if (!profiles) {
     return null;
@@ -58,12 +56,12 @@ function ExecutorProfileSelector({
   const hasVariants = currentProfile && Object.keys(currentProfile).length > 0;
 
   return (
-    <div className={`space-y-3 ${className}`}>
+    <div className="flex gap-3 flex-col sm:flex-row">
       {/* Executor Profile Selector */}
-      <div>
+      <div className="flex-1">
         {showLabel && (
           <Label htmlFor="executor-profile" className="text-sm font-medium">
-            Executor Profile
+            Agent
           </Label>
         )}
         <DropdownMenu>
@@ -106,9 +104,9 @@ function ExecutorProfileSelector({
         selectedProfile &&
         hasVariants &&
         currentProfile && (
-          <div>
+          <div className="flex-1">
             <Label htmlFor="executor-variant" className="text-sm font-medium">
-              Variant
+              Configuration
             </Label>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -146,9 +144,9 @@ function ExecutorProfileSelector({
         selectedProfile &&
         !hasVariants &&
         currentProfile && (
-          <div>
+          <div className="flex-1">
             <Label htmlFor="executor-variant" className="text-sm font-medium">
-              Variant
+              Configuration
             </Label>
             <Button
               variant="outline"
@@ -163,9 +161,9 @@ function ExecutorProfileSelector({
 
       {/* Show placeholder for variant when no profile selected */}
       {showVariantSelector && !selectedProfile && (
-        <div>
+        <div className="flex-1">
           <Label htmlFor="executor-variant" className="text-sm font-medium">
-            Variant
+            Configuration
           </Label>
           <Button
             variant="outline"
@@ -173,7 +171,7 @@ function ExecutorProfileSelector({
             disabled
             className="w-full text-xs justify-start mt-1.5"
           >
-            Select profile first
+            Select agent first
           </Button>
         </div>
       )}

frontend/src/components/tasks/Toolbar/CreateAttempt.tsx

@@ -12,6 +12,7 @@ import { ExecutorProfileSelector } from '@/components/settings';
 import { useKeyboardShortcuts } from '@/lib/keyboard-shortcuts.ts';
 import { showModal } from '@/lib/modals';
 import { Card } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
 
 type Props = {
   task: Task;
@@ -146,13 +147,23 @@ function CreateAttempt({
         </div>
 
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 items-end">
-          {/* Step 1: Choose Base Branch */}
-          <div className="space-y-1">
-            <div className="flex items-center gap-1.5">
-              <label className="text-xs font-medium text-muted-foreground">
-                Base branch <span className="text-destructive">*</span>
-              </label>
+          {/* Top Row: Executor Profile and Variant (spans 2 columns) */}
+          {availableProfiles && (
+            <div className="col-span-1 sm:col-span-2">
+              <ExecutorProfileSelector
+                profiles={availableProfiles}
+                selectedProfile={selectedProfile}
+                onProfileSelect={setSelectedProfile}
+                showLabel={true}
+              />
             </div>
+          )}
+
+          {/* Bottom Row: Base Branch and Start Button */}
+          <div className="space-y-1">
+            <Label className="text-sm font-medium">
+              Base branch <span className="text-destructive">*</span>
+            </Label>
             <BranchSelector
               branches={branches}
               selectedBranch={createAttemptBranch}
@@ -161,18 +172,8 @@ function CreateAttempt({
             />
           </div>
 
-          {/* Step 2 & 3: Choose Profile and Variant */}
-          {availableProfiles && (
-            <ExecutorProfileSelector
-              profiles={availableProfiles}
-              selectedProfile={selectedProfile}
-              onProfileSelect={setSelectedProfile}
-              showLabel={true}
-            />
-          )}
-
-          {/* Step 3: Start Attempt */}
           <div className="space-y-1">
+            <Label className="text-sm font-medium opacity-0">Start</Label>
             <Button
               onClick={handleCreateAttempt}
               disabled={
@@ -182,9 +183,7 @@ function CreateAttempt({
                 isCreating
               }
               size="sm"
-              className={
-                'w-full text-xs gap-2 justify-center bg-black text-white hover:bg-black/90'
-              }
+              className="w-full text-xs gap-2 justify-center bg-black text-white hover:bg-black/90"
               title={
                 !createAttemptBranch
                   ? 'Base branch is required'