From c7bc4d5ad0156171c7c76c731340b1afb54801f4 Mon Sep 17 00:00:00 2001
From: Ubuntu <ubuntu@ip-172-31-14-53.eu-north-1.compute.internal>
Date: Sun, 3 May 2026 22:17:05 +0000
Subject: [PATCH] feat(step2/step3): add Fase A agent edit/delete/regen modal,
 Fase B config form, and Step3 enable_graph_memory_update checkbox

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/Step2EnvSetup.vue   | 350 +++++++++++++++++++-
 frontend/src/components/Step3Simulation.vue |  24 +-
 2 files changed, 367 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Step2EnvSetup.vue b/frontend/src/components/Step2EnvSetup.vue
index a27ba347..16d6170c 100644
--- a/frontend/src/components/Step2EnvSetup.vue
+++ b/frontend/src/components/Step2EnvSetup.vue
@@ -83,15 +83,17 @@
               <span class="preview-title">{{ $t('step2.generatedAgentPersonas') }}</span>
             </div>
             <div class="profiles-list">
-              <div 
-                v-for="(profile, idx) in profiles" 
-                :key="idx" 
+              <div
+                v-for="(profile, idx) in profiles"
+                :key="idx"
                 class="profile-card"
                 @click="selectProfile(profile)"
               >
                 <div class="profile-header">
                   <span class="profile-realname">{{ profile.username || 'Unknown' }}</span>
                   <span class="profile-username">@{{ profile.name || `agent_${idx}` }}</span>
+                  <span v-if="profile.manually_edited" class="manually-edited-badge">{{ $t('step2.manuallyEditedBadge') }}</span>
+                  <button v-if="currentPhase === 'phase_a'" class="agent-action-btn" @click.stop="openAgentModal(profile)">···</button>
                 </div>
                 <div class="profile-meta">
                   <span class="profile-profession">{{ profile.profession || $t('step2.unknownProfession') }}</span>
@@ -109,6 +111,54 @@
                 </div>
               </div>
             </div>
+
+            <!-- Fase A: continue button -->
+            <div v-if="currentPhase === 'phase_a'" class="phase-a-footer">
+              <button
+                class="continue-btn"
+                :disabled="generateConfigLoading"
+                @click="continueToPhaseB"
+              >
+                <span v-if="generateConfigLoading">{{ $t('step2.generatingConfig') }}</span>
+                <span v-else>{{ $t('step2.continueToPhaseB') }}</span>
+              </button>
+            </div>
+          </div>
+
+          <!-- Fase B: Global parameters form -->
+          <div v-if="currentPhase === 'phase_b'" class="phase-b-section">
+            <h3>{{ $t('step2.phaseBTitle') }}</h3>
+            <p class="section-subtitle">{{ $t('step2.phaseBSubtitle') }}</p>
+
+            <div class="config-form">
+              <div class="config-field">
+                <label>{{ $t('step2.totalHours') }}</label>
+                <input type="number" v-model.number="configForm.total_simulation_hours" min="1" max="720" />
+              </div>
+              <div class="config-field">
+                <label>{{ $t('step2.minutesPerRound') }}</label>
+                <input type="number" v-model.number="configForm.minutes_per_round" min="1" max="1440" />
+              </div>
+              <div class="config-field">
+                <label>{{ $t('step2.followingProbability') }}</label>
+                <input type="number" v-model.number="configForm.following_probability" min="0" max="1" step="0.01" />
+              </div>
+              <div class="config-field">
+                <label>{{ $t('step2.recsysType') }}</label>
+                <select v-model="configForm.recsys_type">
+                  <option value="random">Random</option>
+                  <option value="interest">Interest-based</option>
+                  <option value="twhin">TWHIN</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="phase-b-footer">
+              <button class="action-btn secondary" @click="currentPhase = 'phase_a'">← Back</button>
+              <button class="continue-btn" :disabled="phaseBSaving" @click="launchSimulation">
+                {{ $t('step2.launchSimulation') }}
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -528,6 +578,48 @@
       </div>
     </div>
 
+    <!-- Agent edit/regen modal -->
+    <div v-if="agentModalOpen" class="agent-modal-overlay" @click.self="closeAgentModal">
+      <div class="agent-modal">
+        <div class="modal-header">
+          <span class="modal-title">{{ selectedAgent?.name || selectedAgent?.username }}</span>
+          <span v-if="selectedAgent?.manually_edited" class="edited-badge">{{ $t('step2.manuallyEditedBadge') }}</span>
+          <button class="modal-close" @click="closeAgentModal">✕</button>
+        </div>
+
+        <div v-if="agentModalMode === 'edit'" class="modal-body">
+          <div class="field-group" v-for="field in ['name', 'bio', 'persona', 'age', 'gender', 'mbti', 'country', 'profession', 'stance']" :key="field">
+            <label>{{ field }}</label>
+            <textarea v-if="['bio', 'persona'].includes(field)" v-model="editForm[field]" rows="3" />
+            <input v-else v-model="editForm[field]" />
+          </div>
+          <div class="modal-actions">
+            <button class="btn-secondary" @click="closeAgentModal">{{ $t('common.cancel') }}</button>
+            <button class="btn-primary" :disabled="editLoading" @click="saveAgent">{{ $t('common.save') }}</button>
+          </div>
+        </div>
+
+        <div v-else-if="agentModalMode === 'regen'" class="modal-body">
+          <p>{{ $t('step2.regenerateAgentHint') }}</p>
+          <textarea v-model="regenInstructions" rows="3" :placeholder="$t('step2.extraInstructions')" />
+          <div class="modal-actions">
+            <button class="btn-secondary" @click="closeAgentModal">{{ $t('common.cancel') }}</button>
+            <button class="btn-primary" :disabled="regenLoading" @click="doRegenerate">{{ $t('step2.regenerateAgent') }}</button>
+          </div>
+        </div>
+
+        <div v-else class="modal-body modal-view">
+          <p><strong>Bio:</strong> {{ selectedAgent?.bio }}</p>
+          <p><strong>Persona:</strong> {{ selectedAgent?.persona }}</p>
+          <div class="modal-actions">
+            <button class="btn-secondary" @click="agentModalMode = 'regen'">{{ $t('step2.regenerateAgent') }}</button>
+            <button class="btn-danger" @click="confirmDeleteAgent(selectedAgent); closeAgentModal()">{{ $t('step2.deleteAgent') }}</button>
+            <button class="btn-primary" @click="agentModalMode = 'edit'">{{ $t('step2.editAgent') }}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- Profile Detail Modal -->
     <Transition name="modal">
       <div v-if="selectedProfile" class="profile-modal-overlay" @click.self="selectedProfile = null">
@@ -639,7 +731,12 @@ import {
   getPrepareStatus,
   getSimulationProfilesRealtime,
   getSimulationConfig,
-  getSimulationConfigRealtime
+  getSimulationConfigRealtime,
+  patchAgent,
+  deleteAgent,
+  regenerateAgent,
+  generateConfig,
+  patchSimulationConfig
 } from '../api/simulation'
 
 const { t } = useI18n()
@@ -675,6 +772,29 @@ let lastLoggedConfigStage = ''
 const useCustomRounds = ref(false) // 默认使用自动配置轮数
 const customMaxRounds = ref(40)   // 默认推荐40轮
 
+// Fase A/B state
+const currentPhase = ref('generating') // 'generating' | 'phase_a' | 'phase_b'
+const agentModalOpen = ref(false)
+const agentModalMode = ref('view')    // 'view' | 'edit' | 'regen'
+const selectedAgent = ref(null)
+const editForm = ref({})
+const regenInstructions = ref('')
+const regenLoading = ref(false)
+const editLoading = ref(false)
+const deleteConfirmAgent = ref(null)
+const generateConfigLoading = ref(false)
+const generateConfigTaskId = ref(null)
+
+// Fase B state
+const phaseBConfig = ref(null)
+const phaseBSaving = ref(false)
+const configForm = ref({
+  total_simulation_hours: 24,
+  minutes_per_round: 60,
+  following_probability: 0.05,
+  recsys_type: 'random',
+})
+
 // Watch stage to update phase
 watch(currentStage, (newStage) => {
   if (newStage === '生成Agent人设' || newStage === 'generating_profiles') {
@@ -892,7 +1012,15 @@ const pollPrepareStatus = async () => {
       }
       
       // 检查是否完成
-      if (data.status === 'completed' || data.status === 'ready' || data.already_prepared) {
+      if (data.status === 'profiles_ready') {
+        addLog(t('log.prepareComplete'))
+        stopPolling()
+        stopProfilesPolling()
+        await fetchProfilesRealtime()
+        addLog(t('log.loadedAgentProfiles', { count: profiles.value.length }))
+        currentPhase.value = 'phase_a'
+        emit('update-status', 'profiles_ready')
+      } else if (data.status === 'completed' || data.status === 'ready' || data.already_prepared) {
         addLog(t('log.prepareComplete'))
         stopPolling()
         stopProfilesPolling()
@@ -1058,6 +1186,136 @@ const loadPreparedData = async () => {
   }
 }
 
+// ---- Fase A/B helpers ----
+
+const pollTaskUntilDone = async (taskId, onComplete, intervalMs = 2000) => {
+  return new Promise((resolve) => {
+    const interval = setInterval(async () => {
+      try {
+        const res = await getPrepareStatus({
+          task_id: taskId,
+          simulation_id: props.simulationId
+        })
+        const status = res.data?.status || res.data?.data?.status
+        if (status === 'completed') {
+          clearInterval(interval)
+          onComplete && onComplete(res.data?.result || res.data?.data?.result)
+          resolve()
+        } else if (status === 'failed') {
+          clearInterval(interval)
+          resolve()
+        }
+      } catch {
+        clearInterval(interval)
+        resolve()
+      }
+    }, intervalMs)
+  })
+}
+
+const openAgentModal = (agent, mode = 'view') => {
+  selectedAgent.value = agent
+  agentModalMode.value = mode
+  editForm.value = { ...agent }
+  regenInstructions.value = ''
+  agentModalOpen.value = true
+}
+
+const closeAgentModal = () => {
+  agentModalOpen.value = false
+  selectedAgent.value = null
+}
+
+const saveAgent = async () => {
+  if (!selectedAgent.value || !props.simulationId) return
+  editLoading.value = true
+  try {
+    const res = await patchAgent(props.simulationId, selectedAgent.value.user_id, editForm.value)
+    if (res.data?.success) {
+      const idx = profiles.value.findIndex(p => p.user_id === selectedAgent.value.user_id)
+      if (idx !== -1) profiles.value[idx] = res.data.data
+      closeAgentModal()
+    }
+  } finally {
+    editLoading.value = false
+  }
+}
+
+const confirmDeleteAgent = async (agent) => {
+  if (!confirm(t('step2.deleteAgentConfirm'))) return
+  const res = await deleteAgent(props.simulationId, agent.user_id)
+  if (res.data?.success) {
+    profiles.value = profiles.value.filter(p => p.user_id !== agent.user_id)
+  }
+}
+
+const doRegenerate = async () => {
+  if (!selectedAgent.value) return
+  regenLoading.value = true
+  try {
+    const res = await regenerateAgent(props.simulationId, selectedAgent.value.user_id, {
+      extra_instructions: regenInstructions.value
+    })
+    if (res.data?.success) {
+      await pollTaskUntilDone(res.data.data?.task_id, () => {})
+      // Refresh profiles
+      await fetchProfilesRealtime()
+      closeAgentModal()
+    }
+  } finally {
+    regenLoading.value = false
+  }
+}
+
+const continueToPhaseB = async () => {
+  generateConfigLoading.value = true
+  try {
+    const res = await generateConfig(props.simulationId)
+    if (res.data?.success) {
+      generateConfigTaskId.value = res.data.data?.task_id
+      await pollTaskUntilDone(res.data.data?.task_id, async () => {
+        // Load config for display
+        const configRes = await getSimulationConfig(props.simulationId)
+        if (configRes.data?.success) {
+          phaseBConfig.value = configRes.data.data
+          const tc = phaseBConfig.value?.time_config || {}
+          configForm.value = {
+            total_simulation_hours: tc.total_simulation_hours ?? 24,
+            minutes_per_round: tc.minutes_per_round ?? 60,
+            following_probability: phaseBConfig.value?.following_probability ?? 0.05,
+            recsys_type: phaseBConfig.value?.recsys_type ?? 'random',
+          }
+        }
+        currentPhase.value = 'phase_b'
+      })
+      // If task_id is null, generateConfig was synchronous — set phase_b directly
+      if (!res.data.data?.task_id) {
+        currentPhase.value = 'phase_b'
+      }
+    }
+  } finally {
+    generateConfigLoading.value = false
+  }
+}
+
+const saveGlobalConfig = async () => {
+  phaseBSaving.value = true
+  try {
+    await patchSimulationConfig(props.simulationId, configForm.value)
+  } finally {
+    phaseBSaving.value = false
+  }
+}
+
+const launchSimulation = async () => {
+  await saveGlobalConfig()
+  const params = {}
+  if (useCustomRounds.value) {
+    params.maxRounds = customMaxRounds.value
+  }
+  emit('next-step', params)
+}
+
 // Scroll log to bottom
 const logContent = ref(null)
 watch(() => props.systemLogs?.length, () => {
@@ -2602,4 +2860,86 @@ onUnmounted(() => {
   transform: scale(0.95) translateY(10px);
   opacity: 0;
 }
+
+/* Fase A footer */
+.phase-a-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 0;
+  border-top: 1px solid #EAEAEA;
+  margin-top: 16px;
+}
+
+.continue-btn {
+  padding: 10px 24px;
+  background: #000;
+  color: #FFF;
+  border: none;
+  border-radius: 6px;
+  font-weight: 700;
+  font-size: 14px;
+  cursor: pointer;
+}
+.continue-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* Fase B section */
+.phase-b-section { padding: 16px 0; }
+.section-subtitle { font-size: 13px; color: #666; margin-bottom: 16px; }
+.config-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
+.config-field label { display: block; font-size: 12px; font-weight: 600; color: #666; margin-bottom: 4px; text-transform: uppercase; }
+.config-field input, .config-field select { width: 100%; padding: 8px 12px; border: 1px solid #E0E0E0; border-radius: 6px; font-size: 14px; box-sizing: border-box; }
+.phase-b-footer { display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid #EAEAEA; }
+
+/* Agent action button and badge */
+.agent-action-btn { background: none; border: none; cursor: pointer; padding: 4px 8px; font-size: 18px; color: #666; margin-left: auto; }
+.agent-action-btn:hover { color: #000; }
+.manually-edited-badge {
+  background: #FFF3CD; color: #856404;
+  padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
+}
+
+/* Agent edit/regen modal */
+.agent-modal-overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 1000;
+}
+
+.agent-modal {
+  background: #FFF; border-radius: 12px; padding: 24px;
+  width: 560px; max-height: 80vh; overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
+}
+
+.agent-modal .modal-header {
+  display: flex; align-items: center; gap: 8px;
+  margin-bottom: 16px;
+  padding: 0;
+  border-bottom: none;
+}
+
+.modal-title { font-weight: 700; font-size: 18px; flex: 1; }
+
+.edited-badge {
+  background: #FFF3CD; color: #856404;
+  padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
+}
+
+.modal-close { background: none; border: none; cursor: pointer; font-size: 18px; }
+
+.agent-modal .modal-body { padding: 0; overflow: visible; flex: unset; }
+.agent-modal .modal-body.modal-view p { font-size: 14px; color: #444; line-height: 1.6; margin-bottom: 10px; }
+.agent-modal .field-group { margin-bottom: 12px; }
+.agent-modal label { display: block; font-size: 12px; font-weight: 600; color: #666; margin-bottom: 4px; text-transform: uppercase; }
+.agent-modal input, .agent-modal textarea {
+  width: 100%; padding: 8px 12px; border: 1px solid #E0E0E0;
+  border-radius: 6px; font-size: 14px; resize: vertical;
+  box-sizing: border-box;
+}
+
+.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
+.btn-primary { padding: 8px 16px; background: #000; color: #FFF; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
+.btn-secondary { padding: 8px 16px; background: #F5F5F5; color: #333; border: 1px solid #DDD; border-radius: 6px; cursor: pointer; font-weight: 600; }
+.btn-danger { padding: 8px 16px; background: #FFF; color: #D32F2F; border: 1px solid #FFCDD2; border-radius: 6px; cursor: pointer; font-weight: 600; }
+.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }
 </style>
diff --git a/frontend/src/components/Step3Simulation.vue b/frontend/src/components/Step3Simulation.vue
index 9f2b2977..397d2325 100644
--- a/frontend/src/components/Step3Simulation.vue
+++ b/frontend/src/components/Step3Simulation.vue
@@ -91,7 +91,14 @@
       </div>
 
       <div class="action-controls">
-        <button 
+        <div class="option-row">
+          <label class="toggle-label">
+            <input type="checkbox" v-model="enableGraphMemoryUpdate" :disabled="phase >= 1" />
+            <span>Graph Memory Update</span>
+            <span class="hint">Update agent conversations to graph in real time (needed for report analysis)</span>
+          </label>
+        </div>
+        <button
           class="action-btn primary"
           :disabled="phase !== 2 || isGeneratingReport"
           @click="handleNextStep"
@@ -318,6 +325,7 @@ const router = useRouter()
 // State
 const isGeneratingReport = ref(false)
 const phase = ref(0) // 0: 未开始, 1: 运行中, 2: 已完成
+const enableGraphMemoryUpdate = ref(true)
 const isStarting = ref(false)
 const isStopping = ref(false)
 const startError = ref(null)
@@ -399,7 +407,7 @@ const doStartSimulation = async () => {
       simulation_id: props.simulationId,
       platform: 'parallel',
       force: true,  // 强制重新开始
-      enable_graph_memory_update: true  // 开启动态图谱更新
+      enable_graph_memory_update: enableGraphMemoryUpdate.value  // 开启动态图谱更新
     }
     
     if (props.maxRounds) {
@@ -1302,4 +1310,16 @@ onUnmounted(() => {
   animation: spin 0.8s linear infinite;
   margin-right: 6px;
 }
+
+/* Graph memory update toggle */
+.action-controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.option-row { display: flex; align-items: center; gap: 8px; }
+.toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: #555; }
+.toggle-label input[type="checkbox"] { cursor: pointer; }
+.toggle-label .hint { color: #999; font-size: 11px; }
 </style>
\ No newline at end of file