fix: show categorize button BEFORE groups exist

The 'จัดกลุ่มอัตโนมัติ' button was hidden inside v-if='agentGroups.length > 0'
— chicken-and-egg problem. Now shows trigger button when profiles exist
but groups don't, and groups section after categorization.

frontend/src/components/Step2EnvSetup.vue

@@ -112,18 +112,31 @@
           </div>
         </div>
 
+        <!-- Agent Grouping Button -->
+        <div v-if="profiles.length > 0 && agentGroups.length === 0" class="categorize-trigger">
+          <button 
+            class="categorize-btn"
+            @click="categorizeAgents"
+            :disabled="groupLoading"
+          >
+            <span v-if="groupLoading">⏳ กำลังจัดกลุ่ม...</span>
+            <span v-else>✨ จัดกลุ่ม Agent อัตโนมัติ</span>
+          </button>
+          <span class="categorize-hint">AI จะจัดกลุ่ม Agent ตามบทบาท เพื่อให้เลือกได้ง่ายขึ้น</span>
+        </div>
+
         <!-- Agent Grouping & Selection -->
         <div v-if="profiles.length > 0 && agentGroups.length > 0" class="agent-groups-section">
           <div class="groups-header">
             <span class="groups-title">🎯 เลือกกลุ่ม Agent สำหรับจำลอง</span>
             <button 
-              class="categorize-btn"
+              class="categorize-btn small"
               @click="categorizeAgents"
               :disabled="groupLoading"
             >
               <span v-if="groupLoading">⏳</span>
-              <span v-else>✨</span>
-              จัดกลุ่มอัตโนมัติ
+              <span v-else>🔄</span>
+              จัดกลุ่มใหม่
             </button>
           </div>
           <div class="groups-list">
@@ -1417,6 +1430,27 @@ onUnmounted(() => {
 }
 
 /* Agent Groups Section */
+.categorize-trigger {
+  margin-top: 16px;
+  text-align: center;
+  padding: 16px;
+  background: #FFF7F3;
+  border: 1px dashed #FF6B35;
+  border-radius: 10px;
+}
+
+.categorize-hint {
+  display: block;
+  margin-top: 8px;
+  font-size: 0.78rem;
+  color: #999;
+}
+
+.categorize-btn.small {
+  padding: 4px 10px;
+  font-size: 0.72rem;
+}
+
 .agent-groups-section {
   margin-top: 20px;
   padding: 16px;