Phase 5: Agent grouping and selection after Step 2

Backend:
- Add /api/agent-group/categorize endpoint — AI groups agents by role
- Add /api/agent-group/filter endpoint — filter by selected groups
- Groups with default_enabled=false (advertiser, brand) are unchecked

Frontend:
- Add agent groups section in Step2EnvSetup.vue
- 'Auto-categorize' button triggers AI grouping
- Show groups with checkboxes (enabled groups checked, disabled unchecked)
- Auto-remove unchecked agents when proceeding to Step 3
- Show selected count summary

frontend/src/api/agentGroup.js

@@ -0,0 +1,17 @@
+import service from './index'
+
+/**
+ * Categorize agents into groups using AI
+ * @param {Object} data - { agents, simulation_requirement }
+ */
+export const categorizeAgents = (data) => {
+  return service.post('/api/agent-group/categorize', data)
+}
+
+/**
+ * Get selected agent IDs based on enabled groups
+ * @param {Object} data - { agents, groups, selected_group_ids }
+ */
+export const filterAgents = (data) => {
+  return service.post('/api/agent-group/filter', data)
+}

frontend/src/components/Step2EnvSetup.vue

@@ -111,6 +111,57 @@
             </div>
           </div>
         </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"
+              @click="categorizeAgents"
+              :disabled="groupLoading"
+            >
+              <span v-if="groupLoading">⏳</span>
+              <span v-else>✨</span>
+              จัดกลุ่มอัตโนมัติ
+            </button>
+          </div>
+          <div class="groups-list">
+            <div 
+              v-for="(group, gIdx) in agentGroups" 
+              :key="gIdx"
+              class="group-card"
+              :class="{ 'group-disabled': !group.enabled }"
+            >
+              <label class="group-label">
+                <input 
+                  type="checkbox" 
+                  v-model="group.enabled"
+                  class="group-checkbox"
+                />
+                <div class="group-info">
+                  <span class="group-name">{{ group.group_name }}</span>
+                  <span class="group-count">{{ group.agent_indices.length }} agents</span>
+                </div>
+              </label>
+              <div class="group-agents">
+                <span 
+                  v-for="idx in group.agent_indices.slice(0, 5)" 
+                  :key="idx"
+                  class="agent-tag"
+                >
+                  {{ profiles[idx]?.username || `Agent ${idx}` }}
+                </span>
+                <span v-if="group.agent_indices.length > 5" class="agent-more">
+                  +{{ group.agent_indices.length - 5 }}
+                </span>
+              </div>
+            </div>
+          </div>
+          <div class="groups-summary">
+            <span>เลือกแล้ว {{ selectedAgentCount }} จาก {{ profiles.length }} agents</span>
+          </div>
+        </div>
       </div>
 
       <!-- Step 03: 生成双平台模拟配置 -->
@@ -641,6 +692,7 @@ import {
   getSimulationConfig,
   getSimulationConfigRealtime
 } from '../api/simulation'
+import { categorizeAgents as categorizeAgentsApi } from '../api/agentGroup'
 
 const { t } = useI18n()
 
@@ -661,6 +713,21 @@ const currentStage = ref('')
 const progressMessage = ref('')
 const profiles = ref([])
 const entityTypes = ref([])
+
+// Agent grouping state
+const agentGroups = ref([])
+const groupLoading = ref(false)
+
+const selectedAgentCount = computed(() => {
+  if (agentGroups.value.length === 0) return profiles.value.length
+  let count = 0
+  for (const group of agentGroups.value) {
+    if (group.enabled) {
+      count += group.agent_indices.length
+    }
+  }
+  return count
+})
 const expectedTotal = ref(null)
 const simulationConfig = ref(null)
 const selectedProfile = ref(null)
@@ -768,6 +835,55 @@ const selectProfile = (profile) => {
   selectedProfile.value = profile
 }
 
+// Categorize agents into groups using AI
+const categorizeAgents = async () => {
+  if (profiles.value.length === 0) return
+  
+  groupLoading.value = true
+  try {
+    const res = await categorizeAgentsApi({
+      agents: profiles.value.map((p, i) => ({
+        agent_id: i,
+        name: p.username || p.name,
+        profession: p.profession,
+        bio: p.bio,
+        persona: p.persona?.substring(0, 200),
+        interested_topics: p.interested_topics
+      })),
+      simulation_requirement: props.projectData?.simulation_requirement || ''
+    })
+    
+    if (res.success && res.groups) {
+      agentGroups.value = res.groups.map(g => ({
+        ...g,
+        enabled: g.default_enabled !== false
+      }))
+      emit('add-log', `✅ จัดกลุ่ม Agent เป็น ${res.groups.length} กลุ่ม (เลือก ${selectedAgentCount.value} ตัว)`)
+    }
+  } catch (e) {
+    console.error('Agent categorization failed:', e)
+    emit('add-log', `❌ การจัดกลุ่มล้มเหลว: ${e.message}`)
+  } finally {
+    groupLoading.value = false
+  }
+}
+
+// Get selected agent IDs (filter out unchecked groups)
+const getSelectedAgentIds = () => {
+  if (agentGroups.value.length === 0) {
+    // No grouping done — return all
+    return profiles.value.map((_, i) => i)
+  }
+  
+  const selected = new Set()
+  for (const group of agentGroups.value) {
+    if (group.enabled) {
+      group.agent_indices.forEach(idx => selected.add(idx))
+    }
+  }
+  return Array.from(selected).sort()
+}
+
 // 自动开始准备模拟
 const startPrepareSimulation = async () => {
   if (!props.simulationId) {
@@ -1300,6 +1416,120 @@ onUnmounted(() => {
   display: block;
 }
 
+/* Agent Groups Section */
+.agent-groups-section {
+  margin-top: 20px;
+  padding: 16px;
+  background: #F8F9FA;
+  border-radius: 10px;
+  border: 1px solid #E5E7EB;
+}
+
+.groups-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.groups-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: #1a1a1a;
+}
+
+.categorize-btn {
+  background: linear-gradient(135deg, #FF6B35, #FF8F65);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 6px 14px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.categorize-btn:hover { opacity: 0.9; }
+.categorize-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.groups-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.group-card {
+  padding: 12px;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #E5E7EB;
+  transition: opacity 0.2s;
+}
+
+.group-card.group-disabled {
+  opacity: 0.5;
+}
+
+.group-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.group-checkbox {
+  width: 18px;
+  height: 18px;
+  accent-color: #FF6B35;
+}
+
+.group-info {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.group-name {
+  font-weight: 600;
+  font-size: 0.88rem;
+  color: #1a1a1a;
+}
+
+.group-count {
+  font-size: 0.75rem;
+  color: #999;
+}
+
+.group-agents {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding-left: 28px;
+}
+
+.agent-tag {
+  background: #E5E7EB;
+  color: #374151;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 0.72rem;
+}
+
+.agent-more {
+  color: #999;
+  font-size: 0.72rem;
+  padding: 2px 6px;
+}
+
+.groups-summary {
+  margin-top: 10px;
+  text-align: center;
+  font-size: 0.82rem;
+  color: #666;
+}
+
 /* Profiles Preview */
 .profiles-preview {
   margin-top: 20px;