From b7bc09d650918925715cf6f9fe376cb042f7bf77 Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@Kunthawats-MacBook-Pro.local>
Date: Fri, 26 Jun 2026 13:14:16 +0700
Subject: [PATCH] fix: show categorize button BEFORE groups exist
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 40 +++++++++++++++++++++--
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Step2EnvSetup.vue b/frontend/src/components/Step2EnvSetup.vue
index b7905b9..62ddefd 100644
--- a/frontend/src/components/Step2EnvSetup.vue
+++ b/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;