From f948dfc45f6927cc231a5da2539417692dba6ad1 Mon Sep 17 00:00:00 2001
From: ViperEkura <3081035982@qq.com>
Date: Wed, 29 Apr 2026 12:48:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E6=96=87=E4=BB=B6=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/room/AddToRoomModal.vue    |  166 ++
 .../src/components/room/AgentFormModal.vue    |  377 ++++
 .../src/components/room/CreateRoomModal.vue   |  381 +++++
 .../src/components/room/RoomMessageList.vue   |  399 +++++
 dashboard/src/components/room/RoomSidebar.vue |  694 ++++++++
 dashboard/src/components/room/RoomToolbar.vue |  423 +++++
 dashboard/src/views/ChatRoomView.vue          | 1522 ++++-------------
 7 files changed, 2818 insertions(+), 1144 deletions(-)
 create mode 100644 dashboard/src/components/room/AddToRoomModal.vue
 create mode 100644 dashboard/src/components/room/AgentFormModal.vue
 create mode 100644 dashboard/src/components/room/CreateRoomModal.vue
 create mode 100644 dashboard/src/components/room/RoomMessageList.vue
 create mode 100644 dashboard/src/components/room/RoomSidebar.vue
 create mode 100644 dashboard/src/components/room/RoomToolbar.vue

diff --git a/dashboard/src/components/room/AddToRoomModal.vue b/dashboard/src/components/room/AddToRoomModal.vue
new file mode 100644
index 0000000..b83f9a8
--- /dev/null
+++ b/dashboard/src/components/room/AddToRoomModal.vue
@@ -0,0 +1,166 @@
+<script setup>
+// Props
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  agentPool: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// Emits
+const emit = defineEmits([
+  'close',
+  'add'
+])
+
+// Handlers
+function handleClose() {
+  emit('close')
+}
+
+function handleAdd(agent) {
+  emit('add', agent)
+  handleClose()
+}
+</script>
+
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="handleClose">
+    <div class="modal">
+      <!-- Header -->
+      <div class="modal-head">
+        <h3>添加 Agent 到房间</h3>
+        <button class="btn-close" @click="handleClose">&times;</button>
+      </div>
+
+      <!-- Body -->
+      <div class="modal-body">
+        <div v-if="agentPool.length === 0" class="no-agents-hint">
+          请先在左侧 Agent 池中创建 Agent
+        </div>
+        <div v-else class="agents-list">
+          <div 
+            v-for="a in agentPool" 
+            :key="a.id" 
+            class="agent-pick-row"
+            @click="handleAdd(a)"
+          >
+            <span class="agent-dot" :style="{ background: a.color }">
+              {{ a.name.charAt(0) }}
+            </span>
+            <span class="agent-checkbox-name" :style="{ color: a.color }">
+              {{ a.name }}
+            </span>
+            <span class="agent-checkbox-model">{{ a.model || 'default' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: var(--bg-primary);
+  border-radius: 16px;
+  width: 400px;
+  max-width: 95vw;
+  max-height: 85vh;
+  overflow-y: auto;
+}
+
+.modal-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.modal-head h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 1.4rem;
+  cursor: pointer;
+  color: var(--text-secondary);
+  padding: 0;
+  line-height: 1;
+}
+
+.modal-body {
+  padding: 1.25rem;
+}
+
+.no-agents-hint {
+  color: var(--text-secondary);
+  font-size: 0.8rem;
+  padding: 0.5rem 0;
+  text-align: center;
+}
+
+.agents-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.agent-pick-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.7rem 0.8rem;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.agent-pick-row:hover {
+  background: var(--bg-secondary);
+  border-color: var(--border-light);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.agent-dot {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: white;
+  flex-shrink: 0;
+}
+
+.agent-checkbox-name {
+  font-size: 0.85rem;
+  font-weight: 600;
+  flex: 1;
+}
+
+.agent-checkbox-model {
+  font-size: 0.7rem;
+  color: var(--text-secondary);
+}
+</style>
diff --git a/dashboard/src/components/room/AgentFormModal.vue b/dashboard/src/components/room/AgentFormModal.vue
new file mode 100644
index 0000000..01fb67f
--- /dev/null
+++ b/dashboard/src/components/room/AgentFormModal.vue
@@ -0,0 +1,377 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+// Props
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  editingAgent: {
+    type: [Object, String],
+    default: null // null | 'new' | agent object
+  },
+  agentForm: {
+    type: Object,
+    default: () => ({})
+  },
+  providers: {
+    type: Array,
+    default: () => []
+  },
+  availableModels: {
+    type: Array,
+    default: () => []
+  },
+  saving: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits([
+  'close',
+  'save',
+  'delete',
+  'providerChange',
+  'update:modelValue'
+])
+
+// Computed
+const isNew = computed(() => props.editingAgent === 'new')
+const title = computed(() => isNew.value ? '新建 Agent' : '编辑 Agent')
+const canSave = computed(() => props.agentForm.name && !props.saving)
+const canDelete = computed(() => !isNew.value)
+
+// Handlers
+function handleClose() {
+  emit('close')
+}
+
+function handleSave() {
+  if (canSave.value) {
+    emit('save')
+  }
+}
+
+function handleDelete() {
+  emit('delete', props.editingAgent)
+}
+
+function handleProviderChange() {
+  emit('providerChange')
+}
+
+function handleModelChange(e) {
+  emit('update:modelValue', e.target.value)
+}
+
+// Color picker
+function randomColor() {
+  const colors = ['#2563eb', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16']
+  return colors[Math.floor(Math.random() * colors.length)]
+}
+</script>
+
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="handleClose">
+    <div class="modal">
+      <!-- Header -->
+      <div class="modal-head">
+        <h3>{{ title }}</h3>
+        <button class="btn-close" @click="handleClose">&times;</button>
+      </div>
+
+      <!-- Body -->
+      <div class="modal-body">
+        <!-- Name -->
+        <div class="fg">
+          <label>名称</label>
+          <input 
+            v-model="agentForm.name" 
+            placeholder="如: 架构师" 
+            class="fi"
+          />
+        </div>
+
+        <!-- Role -->
+        <div class="fg">
+          <label>角色</label>
+          <input 
+            v-model="agentForm.role" 
+            placeholder="如: 架构师、开发者、审查员" 
+            class="fi"
+          />
+        </div>
+
+        <!-- Provider & Color -->
+        <div class="fg-row">
+          <div class="fg" style="flex: 1;">
+            <label>Provider</label>
+            <select 
+              v-model="agentForm.provider_id" 
+              @change="handleProviderChange"
+              class="fi"
+            >
+              <option :value="null">默认 Provider</option>
+              <option 
+                v-for="p in providers" 
+                :key="p.id" 
+                :value="p.id"
+              >
+                {{ p.name }}
+              </option>
+            </select>
+          </div>
+          <div class="fg fg-color">
+            <label>颜色</label>
+            <div class="color-picker-wrap">
+              <input 
+                type="color" 
+                v-model="agentForm.color" 
+                class="color-input" 
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Model -->
+        <div class="fg">
+          <label>模型</label>
+          <select 
+            :value="agentForm.model"
+            @change="handleModelChange"
+            class="fi"
+          >
+            <option value="">自动选择</option>
+            <option 
+              v-for="m in availableModels" 
+              :key="m" 
+              :value="m"
+            >
+              {{ m }}
+            </option>
+          </select>
+        </div>
+
+        <!-- System Prompt -->
+        <div class="fg">
+          <label>系统提示词</label>
+          <textarea 
+            v-model="agentForm.system_prompt" 
+            rows="3" 
+            placeholder="定义 Agent 的角色和行为..."
+            class="fi"
+          ></textarea>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="modal-foot">
+        <button 
+          v-if="canDelete" 
+          class="btn-danger" 
+          @click="handleDelete"
+        >
+          删除
+        </button>
+        <div style="flex: 1;"></div>
+        <button class="btn-secondary" @click="handleClose">取消</button>
+        <button 
+          class="btn-primary" 
+          @click="handleSave" 
+          :disabled="!canSave"
+        >
+          {{ saving ? '保存中...' : '保存' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: var(--bg-primary);
+  border-radius: 16px;
+  width: 480px;
+  max-width: 95vw;
+  max-height: 85vh;
+  overflow-y: auto;
+}
+
+.modal-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.modal-head h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 1.4rem;
+  cursor: pointer;
+  color: var(--text-secondary);
+  padding: 0;
+  line-height: 1;
+}
+
+.modal-body {
+  padding: 1.25rem;
+}
+
+.modal-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--border-light);
+}
+
+.fg {
+  margin-bottom: 1.25rem;
+}
+
+.fg label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 0.4rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.fg input,
+.fg textarea,
+.fg select {
+  width: 100%;
+  padding: 0.6rem 0.875rem;
+  border: 1px solid var(--border-light);
+  border-radius: 10px;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+}
+
+.fg input:focus,
+.fg textarea:focus,
+.fg select:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.fg textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.fg-row {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.fg-color {
+  width: 70px;
+  flex-shrink: 0;
+}
+
+.fg-color label {
+  margin-bottom: 0.4rem;
+  display: block;
+}
+
+.color-picker-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 42px;
+  padding: 4px 10px;
+  border: 1px solid var(--border-light);
+  border-radius: 10px;
+  background: var(--bg-secondary);
+  transition: all 0.2s ease;
+}
+
+.color-picker-wrap:hover {
+  border-color: var(--accent-primary);
+}
+
+.color-input {
+  width: 32px !important;
+  height: 32px !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 6px;
+  cursor: pointer;
+  background: none;
+  flex-shrink: 0;
+}
+
+/* Buttons */
+.btn-primary {
+  padding: 0.5rem 1rem;
+  background: var(--accent-primary);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  transition: all 0.2s;
+}
+
+.btn-primary:hover {
+  background: var(--accent-primary-hover);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  padding: 0.5rem 1rem;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-light);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.btn-danger {
+  padding: 0.5rem 1rem;
+  background: var(--danger-bg, rgba(239, 68, 68, 0.1));
+  color: #ef4444;
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.btn-danger:hover {
+  background: rgba(239, 68, 68, 0.2);
+}
+</style>
diff --git a/dashboard/src/components/room/CreateRoomModal.vue b/dashboard/src/components/room/CreateRoomModal.vue
new file mode 100644
index 0000000..dfe8e3f
--- /dev/null
+++ b/dashboard/src/components/room/CreateRoomModal.vue
@@ -0,0 +1,381 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+// Props
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  agentPool: {
+    type: Array,
+    default: () => []
+  },
+  creating: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits([
+  'close',
+  'create'
+])
+
+// Local state
+const newRoom = ref({
+  title: '',
+  task: '',
+  max_rounds: 5,
+  agent_ids: [],
+  execution_mode: 'sequential'
+})
+
+// Computed
+const canCreate = computed(() => 
+  newRoom.value.title && 
+  newRoom.value.task && 
+  newRoom.value.agent_ids.length > 0 && 
+  !props.creating
+)
+
+// Watch show to reset
+function resetForm() {
+  newRoom.value = {
+    title: '',
+    task: '',
+    max_rounds: 5,
+    agent_ids: [],
+    execution_mode: 'sequential'
+  }
+}
+
+// Handlers
+function handleClose() {
+  emit('close')
+  resetForm()
+}
+
+function handleCreate() {
+  if (canCreate.value) {
+    emit('create', { ...newRoom.value })
+  }
+}
+
+function toggleAgent(agentId) {
+  const idx = newRoom.value.agent_ids.indexOf(agentId)
+  if (idx >= 0) {
+    newRoom.value.agent_ids.splice(idx, 1)
+  } else {
+    newRoom.value.agent_ids.push(agentId)
+  }
+}
+</script>
+
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="handleClose">
+    <div class="modal">
+      <!-- Header -->
+      <div class="modal-head">
+        <h3>新建聊天室</h3>
+        <button class="btn-close" @click="handleClose">&times;</button>
+      </div>
+
+      <!-- Body -->
+      <div class="modal-body">
+        <!-- Title -->
+        <div class="fg">
+          <label>标题</label>
+          <input 
+            v-model="newRoom.title" 
+            placeholder="项目架构设计讨论" 
+          />
+        </div>
+
+        <!-- Task -->
+        <div class="fg">
+          <label>任务描述</label>
+          <textarea 
+            v-model="newRoom.task" 
+            rows="3" 
+            placeholder="描述需要 Agent 讨论的问题..."
+          ></textarea>
+        </div>
+
+        <!-- Max rounds & Execution mode -->
+        <div class="fg-row">
+          <div class="fg" style="flex: 1;">
+            <label>最大轮次</label>
+            <input 
+              v-model.number="newRoom.max_rounds" 
+              type="number" 
+              min="1" 
+              max="20" 
+            />
+          </div>
+          <div class="fg" style="flex: 1;">
+            <label>执行模式</label>
+            <select v-model="newRoom.execution_mode">
+              <option value="sequential">📋 串行</option>
+              <option value="parallel">⚡ 并行</option>
+              <option value="review_loop">🔄 监督循环</option>
+            </select>
+          </div>
+        </div>
+
+        <!-- Agent selection -->
+        <div class="agents-select">
+          <label class="agents-select-label">选择 Agent</label>
+          <div v-if="agentPool.length === 0" class="no-agents-hint">
+            请先在左侧 Agent 池中创建 Agent
+          </div>
+          <div v-else class="agents-checkboxes">
+            <label 
+              v-for="a in agentPool" 
+              :key="a.id" 
+              class="agent-checkbox" 
+              :class="{ checked: newRoom.agent_ids.includes(a.id) }"
+            >
+              <input 
+                type="checkbox" 
+                :value="a.id" 
+                v-model="newRoom.agent_ids" 
+              />
+              <span class="agent-dot" :style="{ background: a.color }">
+                {{ a.name.charAt(0) }}
+              </span>
+              <span class="agent-checkbox-name" :style="{ color: a.color }">
+                {{ a.name }}
+              </span>
+              <span class="agent-checkbox-model">{{ a.model || 'default' }}</span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="modal-foot">
+        <button class="btn-secondary" @click="handleClose">取消</button>
+        <button 
+          class="btn-primary" 
+          @click="handleCreate" 
+          :disabled="!canCreate"
+        >
+          {{ creating ? '创建中...' : '创建' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: var(--bg-primary);
+  border-radius: 16px;
+  width: 480px;
+  max-width: 95vw;
+  max-height: 85vh;
+  overflow-y: auto;
+}
+
+.modal-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.modal-head h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 1.4rem;
+  cursor: pointer;
+  color: var(--text-secondary);
+  padding: 0;
+  line-height: 1;
+}
+
+.modal-body {
+  padding: 1.25rem;
+}
+
+.modal-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--border-light);
+}
+
+.fg {
+  margin-bottom: 1.25rem;
+}
+
+.fg label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 0.4rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.fg input,
+.fg textarea,
+.fg select {
+  width: 100%;
+  padding: 0.6rem 0.875rem;
+  border: 1px solid var(--border-light);
+  border-radius: 10px;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+}
+
+.fg input:focus,
+.fg textarea:focus,
+.fg select:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.fg textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.fg-row {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.agents-select {
+  margin-top: 0.5rem;
+}
+
+.agents-select-label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.no-agents-hint {
+  color: var(--text-secondary);
+  font-size: 0.8rem;
+  padding: 0.5rem 0;
+}
+
+.agents-checkboxes {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 0.25rem;
+}
+
+.agent-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.6rem 0.75rem;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.agent-checkbox:hover {
+  background: var(--bg-secondary);
+  border-color: var(--border-light);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.agent-checkbox.checked {
+  background: var(--accent-primary-light);
+  border-color: var(--accent-primary);
+}
+
+.agent-checkbox input {
+  display: none;
+}
+
+.agent-dot {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.65rem;
+  font-weight: 700;
+  color: white;
+  flex-shrink: 0;
+}
+
+.agent-checkbox-name {
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.agent-checkbox-model {
+  font-size: 0.7rem;
+  color: var(--text-secondary);
+  margin-left: auto;
+}
+
+/* Buttons */
+.btn-primary {
+  padding: 0.5rem 1rem;
+  background: var(--accent-primary);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  transition: all 0.2s;
+}
+
+.btn-primary:hover {
+  background: var(--accent-primary-hover);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  padding: 0.5rem 1rem;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-light);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+</style>
diff --git a/dashboard/src/components/room/RoomMessageList.vue b/dashboard/src/components/room/RoomMessageList.vue
new file mode 100644
index 0000000..a208453
--- /dev/null
+++ b/dashboard/src/components/room/RoomMessageList.vue
@@ -0,0 +1,399 @@
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue'
+import MessageBubble from '../MessageBubble.vue'
+import ParallelMessages from '../ParallelMessages.vue'
+
+// Props
+const props = defineProps({
+  messages: {
+    type: Array,
+    default: () => []
+  },
+  streamingMessages: {
+    type: Object,
+    default: () => ({})
+  },
+  streaming: {
+    type: Boolean,
+    default: false
+  },
+  messagesLoading: {
+    type: Boolean,
+    default: false
+  },
+  isParallelMode: {
+    type: Boolean,
+    default: false
+  },
+  roomId: {
+    type: String,
+    default: null
+  }
+})
+
+// Refs
+const messagesContainer = ref(null)
+const isNearBottom = ref(true)
+
+// Group messages by round number
+const groupedMessages = computed(() => {
+  const groups = []
+  let currentGroup = []
+  let currentRound = null
+  
+  for (const msg of props.messages) {
+    const round = msg.round_number || 0
+    if (round !== currentRound) {
+      if (currentGroup.length > 0) {
+        groups.push(currentGroup)
+      }
+      currentGroup = [msg]
+      currentRound = round
+    } else {
+      currentGroup.push(msg)
+    }
+  }
+  if (currentGroup.length > 0) {
+    groups.push(currentGroup)
+  }
+  return groups
+})
+
+const hasMessages = computed(() => 
+  props.messages.length > 0 || Object.keys(props.streamingMessages).length > 0
+)
+
+const streamingMessageList = computed(() => Object.values(props.streamingMessages))
+
+// Scroll functions
+function scrollToBottom() {
+  if (!isNearBottom.value) return
+  if (messagesContainer.value) {
+    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+  }
+}
+
+function checkNearBottom() {
+  if (!messagesContainer.value) return
+  const { scrollTop, scrollHeight, clientHeight } = messagesContainer.value
+  const distanceFromBottom = scrollHeight - scrollTop - clientHeight
+  isNearBottom.value = distanceFromBottom <= 100
+}
+
+function handleScroll() {
+  checkNearBottom()
+}
+
+function forceScrollToBottom() {
+  nextTick(() => {
+    if (messagesContainer.value) {
+      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+      isNearBottom.value = true
+    }
+  })
+}
+
+// Watchers
+watch(() => props.messages, () => {
+  nextTick(scrollToBottom)
+}, { deep: true })
+
+watch(() => props.streaming, (val) => {
+  if (val) forceScrollToBottom()
+})
+
+// Expose methods for parent
+defineExpose({
+  forceScrollToBottom
+})
+</script>
+
+<template>
+  <div 
+    class="chat-messages" 
+    ref="messagesContainer" 
+    @scroll="handleScroll"
+  >
+    <!-- Parallel mode streaming view -->
+    <ParallelMessages
+      v-if="isParallelMode && streaming"
+      :room-id="roomId"
+      mode="parallel"
+    />
+
+    <!-- Parallel mode history messages (card layout) -->
+    <template v-else-if="isParallelMode">
+      <div v-if="messagesLoading" class="loading-messages">
+        <div class="spinner-small"></div>
+        <span>加载中...</span>
+      </div>
+      <div v-else-if="messages.length === 0" class="chat-empty">
+        <p>点击「开始」启动多 Agent 对话</p>
+      </div>
+      <div v-else class="parallel-history">
+        <div v-for="(roundMsgs, rIdx) in groupedMessages" :key="rIdx" class="parallel-round">
+          <div class="round-divider">
+            <span class="round-divider-line"></span>
+            <span class="round-divider-label">第 {{ roundMsgs[0].round_number || rIdx + 1 }} 轮</span>
+            <span class="round-divider-line"></span>
+          </div>
+          <div class="parallel-grid">
+            <div
+              v-for="msg in roundMsgs"
+              :key="msg.id"
+              class="parallel-card completed"
+              :style="{ borderColor: msg.sender_color }"
+            >
+              <div class="card-header">
+                <span class="agent-avatar" :style="{ background: msg.sender_color || '#2563eb' }">
+                  {{ (msg.sender_name || '?').charAt(0) }}
+                </span>
+                <span class="agent-name" :style="{ color: msg.sender_color }">{{ msg.sender_name }}</span>
+              </div>
+              <div class="card-body">
+                <MessageBubble :message="msg" :deletable="false" :compact="true" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Sequential mode -->
+    <template v-else>
+      <div v-if="messagesLoading" class="loading-messages">
+        <div class="spinner-small"></div>
+        <span>加载中...</span>
+      </div>
+      <div 
+        v-else-if="messages.length === 0 && Object.keys(streamingMessages).length === 0" 
+        class="chat-empty"
+      >
+        <p>点击「开始」启动多 Agent 对话</p>
+      </div>
+      <div v-else>
+        <div v-for="(roundMsgs, rIdx) in groupedMessages" :key="rIdx">
+          <div class="round-divider" v-if="rIdx > 0">
+            <span class="round-divider-line"></span>
+            <span class="round-divider-label">第 {{ roundMsgs[0].round_number }} 轮</span>
+            <span class="round-divider-line"></span>
+          </div>
+          <div class="round-group">
+            <div class="round-header" v-if="roundMsgs[0].round_number">
+              <span class="round-header-icon">💬</span>
+              <span class="round-header-text">第 {{ roundMsgs[0].round_number }} 轮对话</span>
+            </div>
+            <MessageBubble 
+              v-for="msg in roundMsgs" 
+              :key="msg.id" 
+              :message="msg" 
+              :deletable="false" 
+            />
+          </div>
+        </div>
+
+        <!-- Streaming messages -->
+        <template v-if="Object.keys(streamingMessages).length > 0">
+          <div class="round-divider" v-if="messages.length > 0">
+            <span class="round-divider-line"></span>
+            <span class="round-divider-label">进行中...</span>
+            <span class="round-divider-line"></span>
+          </div>
+          <div class="round-group">
+            <MessageBubble
+              v-for="(msg, idx) in streamingMessageList"
+              :key="msg.id + '-' + idx"
+              :message="msg"
+              :deletable="false"
+              class="streaming-message"
+            />
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.75rem;
+}
+
+.chat-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  height: 100%;
+}
+
+.loading-messages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.spinner-small {
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--border-light);
+  border-top-color: var(--accent-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 0.5rem;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Round group styling */
+.round-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.round-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  margin-bottom: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.round-header-icon {
+  font-size: 0.85rem;
+}
+
+.round-header-text {
+  opacity: 0.8;
+}
+
+.round-divider {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 1.25rem 0;
+  padding: 0 0.5rem;
+}
+
+.round-divider-line {
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
+}
+
+.round-divider-label {
+  font-size: 0.7rem;
+  color: var(--text-tertiary);
+  background: var(--bg-secondary);
+  padding: 0.2rem 0.6rem;
+  border-radius: 10px;
+  border: 1px solid var(--border-light);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* Parallel history messages */
+.parallel-history {
+  padding: 0.5rem 0;
+}
+
+.parallel-round {
+  margin-bottom: 1rem;
+}
+
+.parallel-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 12px;
+  padding: 0.5rem 0;
+}
+
+.parallel-card {
+  background: var(--bg-primary);
+  border: 2px solid var(--border-light);
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.2s ease;
+}
+
+.parallel-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.parallel-card .card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.parallel-card .agent-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.parallel-card .agent-name {
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.parallel-card .card-body {
+  padding: 12px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+/* Streaming message animation */
+.streaming-message {
+  opacity: 0.85;
+  animation: streamingPulse 2s ease-in-out infinite;
+}
+
+@keyframes streamingPulse {
+  0%, 100% {
+    opacity: 0.85;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+.streaming-message :deep(.avatar) {
+  animation: avatarPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes avatarPulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+</style>
diff --git a/dashboard/src/components/room/RoomSidebar.vue b/dashboard/src/components/room/RoomSidebar.vue
new file mode 100644
index 0000000..0d407ae
--- /dev/null
+++ b/dashboard/src/components/room/RoomSidebar.vue
@@ -0,0 +1,694 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { agentsAPI } from '../../utils/api.js'
+
+// Props
+const props = defineProps({
+  agentPool: {
+    type: Array,
+    default: () => []
+  },
+  rooms: {
+    type: Array,
+    default: () => []
+  },
+  selectedId: {
+    type: String,
+    default: null
+  },
+  room: {
+    type: Object,
+    default: null
+  },
+  canEditRoom: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits([
+  'selectRoom',
+  'createRoom',
+  'deleteRoom',
+  'createAgent',
+  'editAgent',
+  'deleteAgent',
+  'showAddToRoom'
+])
+
+// Sidebar tab state
+const sidebarTab = ref('rooms') // 'agents' | 'rooms' | 'roomAgents'
+
+// Status map
+const statusMap = {
+  idle: { label: '就绪', class: 'status-idle' },
+  running: { label: '进行中', class: 'status-running' },
+  paused: { label: '已暂停', class: 'status-paused' },
+  completed: { label: '已完成', class: 'status-completed' },
+  error: { label: '错误', class: 'status-error' }
+}
+
+// Computed
+const roomAgents = computed(() => props.room?.agents || [])
+const canEdit = computed(() => props.canEditRoom)
+
+// Handlers
+function handleSelectRoom(id) {
+  emit('selectRoom', id)
+}
+
+function handleDeleteRoom(e, id) {
+  e.stopPropagation()
+  emit('deleteRoom', id)
+}
+
+function handleCreateRoom() {
+  emit('createRoom')
+}
+
+function handleCreateAgent() {
+  emit('createAgent')
+}
+
+function handleEditAgent(agent) {
+  emit('editAgent', agent)
+}
+
+function handleDeleteAgent(agent) {
+  emit('deleteAgent', agent)
+}
+
+function handleShowAddToRoom() {
+  emit('showAddToRoom')
+}
+
+function handleBack() {
+  emit('selectRoom', null)
+}
+</script>
+
+<template>
+  <aside class="rooms-sidebar">
+    <!-- Tab bar -->
+    <div class="sidebar-tabs">
+      <button 
+        class="tab-btn" 
+        :class="{ active: sidebarTab === 'rooms' }" 
+        @click="sidebarTab = 'rooms'"
+      >
+        💬 聊天室
+      </button>
+      <button 
+        class="tab-btn" 
+        :class="{ active: sidebarTab === 'agents' }" 
+        @click="sidebarTab = 'agents'"
+      >
+        🤖 Agent 池
+      </button>
+    </div>
+
+    <!-- Agent Pool tab -->
+    <div v-if="sidebarTab === 'agents'" class="sidebar-tab-content">
+      <div class="sidebar-header">
+        <button class="btn-new-conv" @click="handleCreateAgent">+ 新建 Agent</button>
+      </div>
+      <div v-if="loading" class="sidebar-loading">
+        <div class="spinner-small"></div>
+      </div>
+      <div v-else-if="agentPool.length === 0" class="sidebar-empty">暂无 Agent</div>
+      <div v-else class="pool-list">
+        <div 
+          v-for="agent in agentPool" 
+          :key="agent.id"
+          class="pool-item"
+          @click="handleEditAgent(agent)"
+        >
+          <span class="agent-dot" :style="{ background: agent.color }">
+            {{ agent.name.charAt(0) }}
+          </span>
+          <div class="agent-info">
+            <span class="agent-name" :style="{ color: agent.color }">{{ agent.name }}</span>
+            <span v-if="agent.role" class="agent-role">{{ agent.role }}</span>
+            <span class="agent-model">{{ agent.model || 'default' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Room list tab -->
+    <div v-if="sidebarTab === 'rooms'" class="sidebar-tab-content">
+      <div class="sidebar-header">
+        <button class="btn-new-conv" @click="handleCreateRoom">+ 新建聊天室</button>
+      </div>
+      <div v-if="loading" class="sidebar-loading">
+        <div class="spinner-small"></div>
+      </div>
+      <div v-else-if="rooms.length === 0" class="sidebar-empty">暂无聊天室</div>
+      <div v-else class="room-list">
+        <div 
+          v-for="r in rooms" 
+          :key="r.id" 
+          class="room-item" 
+          :class="{ active: selectedId === r.id }" 
+          @click="handleSelectRoom(r.id)"
+        >
+          <div class="room-item-header">
+            <span class="room-item-title">{{ r.title }}</span>
+            <span 
+              class="status-dot" 
+              :class="statusMap[r.status]?.class" 
+              :title="statusMap[r.status]?.label"
+            ></span>
+          </div>
+          <div class="room-item-meta">
+            <span class="meta-text">
+              <span 
+                v-for="a in (r.agents || []).slice(0, 4)" 
+                :key="a.id" 
+                class="mini-dot" 
+                :style="{ background: a.color }" 
+                :title="a.name"
+              ></span>
+              {{ r.agents?.length || 0 }} Agents
+            </span>
+            <span class="meta-text">{{ r.current_round }}/{{ r.max_rounds }}</span>
+            <div class="room-item-actions" @click.stop>
+              <button @click="(e) => handleDeleteRoom(e, r.id)" class="btn-icon-sm" title="删除">
+                <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="3 6 5 6 21 6"></polyline>
+                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Room agents tab (shown when a room is selected) -->
+    <div v-if="sidebarTab === 'roomAgents' && room" class="sidebar-tab-content">
+      <div class="sidebar-header sidebar-header-row">
+        <button class="btn-back" @click="handleBack">
+          <svg width="18" height="18">
+            <use href="#arrow-left-icon"/>
+          </svg>
+        </button>
+        <span class="sidebar-title">{{ room.title }}</span>
+        <button 
+          v-if="canEdit" 
+          class="btn-add-agent-sm" 
+          @click="handleShowAddToRoom" 
+          title="添加 Agent"
+        >
+          +
+        </button>
+      </div>
+      <div class="room-agent-list">
+        <div 
+          v-for="agent in roomAgents" 
+          :key="agent.id"
+          class="agent-row"
+          :class="{ editing: false }"
+          @click="$emit('editRoomAgent', agent)"
+        >
+          <span class="agent-dot" :style="{ background: agent.color }">
+            {{ agent.name.charAt(0) }}
+          </span>
+          <div class="agent-info">
+            <span class="agent-name" :style="{ color: agent.color }">{{ agent.name }}</span>
+            <span v-if="agent.role" class="agent-role">{{ agent.role }}</span>
+            <span class="agent-model">{{ agent.model || 'default' }}</span>
+          </div>
+          <button 
+            v-if="canEdit" 
+            class="btn-del-agent" 
+            @click.stop="$emit('deleteRoomAgent', agent)"
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+        <div v-if="roomAgents.length === 0" class="no-agents">
+          <p>暂无 Agent</p>
+        </div>
+      </div>
+      <!-- Room agent edit form (inline) -->
+      <slot name="agentEditForm"></slot>
+      
+      <!-- Room info -->
+      <div class="sidebar-room-info">
+        <div class="info-item">
+          <span class="info-label">任务</span>
+          <p class="info-value">{{ room.task }}</p>
+        </div>
+        <div class="info-item">
+          <span class="info-label">轮次</span>
+          <p class="info-value">{{ room.max_rounds }}</p>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+/* Sidebar container */
+.rooms-sidebar {
+  width: 100%;
+  height: 100%;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Tab bar */
+.sidebar-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border-light);
+  flex-shrink: 0;
+  background: var(--bg-secondary);
+}
+
+.tab-btn {
+  flex: 1;
+  min-width: 0;
+  padding: 0.6rem 0.4rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: 0.72rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tab-btn:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.tab-btn.active {
+  color: var(--accent-primary);
+  border-bottom-color: var(--accent-primary);
+  background: var(--accent-primary-light);
+}
+
+/* Tab content */
+.sidebar-tab-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Scrollable lists */
+.pool-list,
+.room-list,
+.room-agent-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.pool-list {
+  padding: 0.3rem 0.5rem;
+}
+
+.room-agent-list {
+  padding: 0.3rem 0.5rem;
+}
+
+/* Header */
+.sidebar-header {
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.sidebar-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.btn-back {
+  background: var(--accent-primary);
+  border: 1px solid var(--accent-primary);
+  color: white;
+  cursor: pointer;
+  padding: 0.35rem;
+  margin-right: 0.5rem;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.btn-back:hover {
+  background: var(--accent-primary-hover);
+  border-color: var(--accent-primary-hover);
+}
+
+.btn-back svg {
+  width: 18px;
+  height: 18px;
+}
+
+.sidebar-title {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.btn-add-agent-sm {
+  width: 26px;
+  height: 26px;
+  background: var(--accent-primary);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.btn-add-agent-sm:hover {
+  background: var(--accent-primary-hover);
+}
+
+.btn-new-conv {
+  width: 100%;
+  padding: 0.5rem;
+  background: var(--accent-primary);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.btn-new-conv:hover {
+  background: var(--accent-primary-hover);
+}
+
+.sidebar-loading,
+.sidebar-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  color: var(--text-secondary);
+  font-size: 0.8rem;
+}
+
+/* Pool item */
+.pool-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.5rem 0.6rem;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.pool-item:hover {
+  background: var(--bg-secondary);
+  border-color: var(--border-light);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+/* Room item */
+.room-item {
+  padding: 0.55rem 0.75rem;
+  border-bottom: 1px solid var(--border-light);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.room-item:hover {
+  background: var(--bg-hover);
+}
+
+.room-item.active {
+  background: var(--accent-primary-light);
+  border-left: 3px solid var(--accent-primary);
+}
+
+.room-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.2rem;
+}
+
+.room-item-title {
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-idle {
+  background: var(--text-secondary);
+}
+
+.status-running {
+  background: #22c55e;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.status-paused {
+  background: #f59e0b;
+}
+
+.status-completed {
+  background: #3b82f6;
+}
+
+.status-error {
+  background: #ef4444;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.room-item-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.7rem;
+  color: var(--text-secondary);
+}
+
+.meta-text {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.mini-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.room-item-actions {
+  margin-left: auto;
+}
+
+.btn-icon-sm {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  border-radius: 3px;
+  color: var(--text-secondary);
+  transition: all 0.15s;
+  display: flex;
+  align-items: center;
+}
+
+.btn-icon-sm:hover {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+/* Agent row */
+.agent-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.5rem 0.6rem;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.agent-row:hover {
+  background: var(--bg-secondary);
+  border-color: var(--border-light);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.agent-row:hover .agent-dot {
+  transform: scale(1.1);
+}
+
+.agent-dot {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: white;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transition: transform 0.2s ease;
+}
+
+.agent-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.agent-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  display: block;
+}
+
+.agent-role {
+  font-size: 0.65rem;
+  color: var(--text-secondary);
+  display: block;
+  margin-top: 1px;
+}
+
+.agent-model {
+  font-size: 0.6rem;
+  color: var(--text-secondary);
+  display: block;
+  margin-top: 1px;
+  opacity: 0.7;
+}
+
+.btn-del-agent {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 2px;
+  opacity: 0;
+  transition: all 0.15s;
+}
+
+.agent-row:hover .btn-del-agent {
+  opacity: 1;
+}
+
+.btn-del-agent:hover {
+  color: #ef4444;
+}
+
+.no-agents {
+  text-align: center;
+  padding: 0.8rem 0;
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+}
+
+.no-agents p {
+  margin: 0;
+}
+
+/* Sidebar room info */
+.sidebar-room-info {
+  border-top: 1px solid var(--border-light);
+  padding: 0.5rem 0.6rem;
+  flex-shrink: 0;
+}
+
+.info-item {
+  margin-bottom: 0.2rem;
+}
+
+.info-label {
+  font-size: 0.6rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.info-value {
+  font-size: 0.75rem;
+  color: var(--text-primary);
+  margin: 0.1rem 0 0;
+  line-height: 1.4;
+}
+
+/* Spinner */
+.spinner-small {
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--border-light);
+  border-top-color: var(--accent-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 0.5rem;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/dashboard/src/components/room/RoomToolbar.vue b/dashboard/src/components/room/RoomToolbar.vue
new file mode 100644
index 0000000..f7ac190
--- /dev/null
+++ b/dashboard/src/components/room/RoomToolbar.vue
@@ -0,0 +1,423 @@
+<script setup>
+import { computed } from 'vue'
+
+// Props
+const props = defineProps({
+  room: {
+    type: Object,
+    default: null
+  },
+  streaming: {
+    type: Boolean,
+    default: false
+  },
+  canEditRoom: {
+    type: Boolean,
+    default: false
+  },
+  isParallelMode: {
+    type: Boolean,
+    default: false
+  },
+  parallelStats: {
+    type: Object,
+    default: () => ({ total: 0, completed: 0, streaming: 0, error: 0 })
+  },
+  parallelAgentList: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// Emits
+const emit = defineEmits([
+  'start',
+  'stop',
+  'reset',
+  'updateExecutionMode'
+])
+
+// Status map
+const statusMap = {
+  idle: { label: '就绪', class: 'status-idle' },
+  running: { label: '进行中', class: 'status-running' },
+  paused: { label: '已暂停', class: 'status-paused' },
+  completed: { label: '已完成', class: 'status-completed' },
+  error: { label: '错误', class: 'status-error' }
+}
+
+// Computed
+const executionMode = computed(() => props.room?.execution_mode || 'sequential')
+
+const modeLabel = computed(() => {
+  const labels = {
+    sequential: '📋 Sequential',
+    parallel: '⚡ Parallel',
+    review_loop: '🔄 Review Loop'
+  }
+  return labels[executionMode.value] || executionMode.value
+})
+
+const modeClass = computed(() => {
+  const classes = {
+    sequential: 'sequential',
+    parallel: 'parallel',
+    review_loop: 'review-loop'
+  }
+  return classes[executionMode.value] || 'sequential'
+})
+
+const showStart = computed(() => !props.streaming && props.room?.status !== 'running')
+const showStop = computed(() => props.streaming || props.room?.status === 'running')
+const showReset = computed(() => props.room?.status !== 'running' && (props.room?.message_count || 0) > 0)
+
+// Handlers
+function handleStart() {
+  emit('start')
+}
+
+function handleStop() {
+  emit('stop')
+}
+
+function handleReset() {
+  emit('reset')
+}
+
+function handleExecutionModeChange(e) {
+  emit('updateExecutionMode', e.target.value)
+}
+</script>
+
+<template>
+  <div class="room-toolbar">
+    <!-- Room info -->
+    <div class="toolbar-info">
+      <h3>{{ room?.title || '聊天室' }}</h3>
+      <div class="toolbar-badges">
+        <span 
+          v-if="room" 
+          class="status-badge" 
+          :class="statusMap[room.status]?.class"
+        >
+          {{ statusMap[room.status]?.label }}
+        </span>
+        <span 
+          v-if="room?.current_round > 0" 
+          class="round-badge"
+        >
+          R{{ room.current_round }}/{{ room.max_rounds }}
+        </span>
+        <span 
+          v-if="isParallelMode" 
+          class="mode-badge parallel"
+        >
+          ⚡ Parallel
+        </span>
+        <span 
+          v-else-if="executionMode === 'review_loop'" 
+          class="mode-badge review-loop"
+        >
+          🔄 Review Loop
+        </span>
+        <span v-else class="mode-badge sequential">
+          📋 Sequential
+        </span>
+      </div>
+    </div>
+
+    <!-- Execution mode selector -->
+    <div class="mode-selector">
+      <select
+        v-if="room"
+        :value="executionMode"
+        @change="handleExecutionModeChange"
+        class="mode-select"
+        :disabled="!canEditRoom"
+      >
+        <option value="sequential">📋 Sequential</option>
+        <option value="parallel">⚡ Parallel</option>
+        <option value="review_loop">🔄 Review Loop</option>
+      </select>
+    </div>
+
+    <!-- Parallel status indicator -->
+    <div 
+      v-if="isParallelMode && streaming && parallelAgentList.length > 0" 
+      class="parallel-status"
+    >
+      <div class="agent-dots">
+        <span
+          v-for="agent in parallelAgentList"
+          :key="agent.id"
+          class="status-dot-small"
+          :class="agent.status"
+          :style="{ background: agent.message?.sender_color || agent.color || '#2563eb' }"
+          :title="agent.name + ': ' + agent.status"
+        ></span>
+      </div>
+      <span class="progress-text">
+        {{ parallelStats.completed }}/{{ parallelStats.total }}
+      </span>
+    </div>
+
+    <!-- Control buttons -->
+    <div class="toolbar-actions">
+      <!-- Start button -->
+      <button 
+        v-if="showStart" 
+        class="btn-ctrl btn-start" 
+        @click="handleStart"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+          <polygon points="5 3 19 12 5 21 5 3"></polygon>
+        </svg>
+        {{ room?.status === 'paused' ? '继续' : '开始' }}
+      </button>
+
+      <!-- Stop button -->
+      <button 
+        v-if="showStop" 
+        class="btn-ctrl btn-stop" 
+        @click="handleStop"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+          <rect x="6" y="4" width="4" height="16"></rect>
+          <rect x="14" y="4" width="4" height="16"></rect>
+        </svg>
+        停止
+      </button>
+
+      <!-- Reset button -->
+      <button 
+        v-if="showReset" 
+        class="btn-ctrl btn-reset" 
+        @click="handleReset"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="23 4 23 10 17 10"></polyline>
+          <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+        </svg>
+        重置
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.room-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--border-light);
+  flex-shrink: 0;
+}
+
+.toolbar-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.toolbar-info h3 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.toolbar-badges {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin-top: 2px;
+}
+
+.status-badge {
+  font-size: 0.65rem;
+  padding: 0.1rem 0.4rem;
+  border-radius: 8px;
+  font-weight: 600;
+}
+
+.round-badge {
+  font-size: 0.65rem;
+  color: var(--text-secondary);
+}
+
+.mode-badge {
+  font-size: 0.6rem;
+  padding: 0.1rem 0.4rem;
+  border-radius: 8px;
+  font-weight: 600;
+}
+
+.mode-badge.parallel {
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+}
+
+.mode-badge.sequential {
+  background: rgba(107, 114, 128, 0.1);
+  color: #6b7280;
+}
+
+.mode-badge.review-loop {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
+/* Status colors */
+.status-idle {
+  background: rgba(107, 114, 128, 0.1);
+  color: #6b7280;
+}
+
+.status-running {
+  background: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
+}
+
+.status-paused {
+  background: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+}
+
+.status-completed {
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+}
+
+.status-error {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
+/* Mode selector */
+.mode-selector {
+  margin-left: auto;
+}
+
+.mode-select {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  border: 1px solid var(--border-light);
+  border-radius: 6px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.mode-select:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  background: var(--bg-secondary);
+}
+
+/* Parallel status */
+.parallel-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px;
+  background: rgba(59, 130, 246, 0.1);
+  border-radius: 8px;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.agent-dots {
+  display: flex;
+  gap: 4px;
+}
+
+.status-dot-small {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+}
+
+.status-dot-small.streaming {
+  animation: pulse 1.5s ease-in-out infinite;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
+}
+
+.status-dot-small.completed {
+  opacity: 1;
+}
+
+.status-dot-small.error {
+  opacity: 0.6;
+}
+
+.status-dot-small.pending {
+  opacity: 0.4;
+}
+
+.progress-text {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: #3b82f6;
+  white-space: nowrap;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Toolbar actions */
+.toolbar-actions {
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+}
+
+.btn-ctrl {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.35rem 0.75rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.btn-start {
+  background: #22c55e;
+  color: white;
+}
+
+.btn-start:hover {
+  background: #16a34a;
+}
+
+.btn-stop {
+  background: #ef4444;
+  color: white;
+}
+
+.btn-stop:hover {
+  background: #dc2626;
+}
+
+.btn-reset {
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-light);
+}
+
+.btn-reset:hover {
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
+}
+</style>
diff --git a/dashboard/src/views/ChatRoomView.vue b/dashboard/src/views/ChatRoomView.vue
index f3f52bb..a8f8ad0 100644
--- a/dashboard/src/views/ChatRoomView.vue
+++ b/dashboard/src/views/ChatRoomView.vue
@@ -1,59 +1,56 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
 import { chatRoomsAPI, providersAPI, agentsAPI } from '../utils/api.js'
 import { parallelStreamManager } from '../utils/parallelStreamManager.js'
 import { useParallelStreamStore } from '../utils/parallelStreamStore.js'
-import MessageBubble from '../components/MessageBubble.vue'
-import ParallelMessages from '../components/ParallelMessages.vue'
+
+// Components
+import RoomSidebar from '../components/room/RoomSidebar.vue'
+import RoomToolbar from '../components/room/RoomToolbar.vue'
+import RoomMessageList from '../components/room/RoomMessageList.vue'
+import AgentFormModal from '../components/room/AgentFormModal.vue'
+import AddToRoomModal from '../components/room/AddToRoomModal.vue'
+import CreateRoomModal from '../components/room/CreateRoomModal.vue'
 import SupervisionGraphEditor from '../components/SupervisionGraphEditor.vue'
 
+// Store
 const store = useParallelStreamStore()
 
-// ============ Sidebar tab state ============
-const sidebarTab = ref('rooms') // 'agents' | 'rooms' | 'roomAgents'
+// ============ State ============
 
-// ============ Agent pool state ============
+// Agent pool
 const agentPool = ref([])
 const agentPoolLoading = ref(false)
-const showAgentModal = ref(false) // 控制弹窗显示
-const editingAgent = ref(null) // null | 'new' | agent object
+const showAgentModal = ref(false)
+const editingAgent = ref(null)
 const agentForm = ref({})
 const agentSaving = ref(false)
 
-// Computed models from selected provider
-const availableModels = computed(() => {
-  const providerList = Array.isArray(providers.value) ? providers.value : []
-  if (!agentForm.value.provider_id) {
-    return providerList.flatMap(p => (p.models || [p.default_model]).map(m => `${p.name}: ${m}`))
-  } else {
-    const p = providerList.find(p => p.id === agentForm.value.provider_id)
-    if (p) return (p.models || [p.default_model]).map(m => `${p.name}: ${m}`)
-  }
-  return []
-})
-
-// Model display value for dropdown
-const modelDisplayValue = computed({
-  get() {
-    if (!agentForm.value.model) return ''
-    const found = availableModels.value.find(m => m.endsWith(`: ${agentForm.value.model}`))
-    return found || agentForm.value.model
-  },
-  set(val) {
-    agentForm.value.model = val.includes(': ') ? val.split(': ')[1] : val
-  }
-})
-
-// ============ Room list state ============
+// Room list
 const rooms = ref([])
 const roomsLoading = ref(false)
 const providers = ref([])
 const showCreate = ref(false)
 const creating = ref(false)
-const newRoom = ref({ title: '', task: '', max_rounds: 5, agent_ids: [], execution_mode: 'sequential' })
+
+// Selected room
+const selectedId = ref(null)
+const room = ref(null)
+const messages = ref([])
+const messagesLoading = ref(false)
+const streaming = ref(false)
+const streamingMessages = ref({})
+const error = ref('')
 const showAddToRoom = ref(false)
 
-// ============ Wizard state (Supervision Graph) ============
+// Room agent editing
+const editingRoomAgent = ref(null)
+const roomAgentForm = ref({})
+const roomAgentSaving = ref(false)
+
+let abortController = null
+
+// ============ Wizard State ============
 const showCreateWizard = ref(false)
 const wizardStep = ref(1)
 const wizardData = ref({
@@ -65,159 +62,18 @@ const wizardData = ref({
   agent_roles: {},
   supervision_edges: []
 })
-const wizardRef = ref(null) // 用于参考 SuperGraphEditor 组件
+const wizardRef = ref(null)
 
-// Wizard navigation
-function openWizard() {
-  wizardStep.value = 1
-  wizardData.value = {
-    title: '',
-    task: '',
-    max_rounds: 5,
-    execution_mode: 'sequential',
-    agent_ids: [],
-    agent_roles: {},
-    supervision_edges: []
-  }
-  showCreateWizard.value = true
-}
+// ============ Computed ============
 
-function closeWizard() {
-  showCreateWizard.value = false
-  wizardStep.value = 1
-}
-
-function nextWizardStep() {
-  if (wizardStep.value < 4) wizardStep.value++
-}
-
-function prevWizardStep() {
-  if (wizardStep.value > 1) wizardStep.value--
-}
-
-function selectWizardTemplate(templateId) {
-  // 根据任务模板填充默认的 task 描述
-  const templates = {
-    custom: '请描述需要 Agent 团队完成的任务...',
-    code_review: '请对以下代码进行全面的审查和改进：\n\n```\n\n```',
-    architecture: '请设计一个系统架构方案，涵盖：\n1. 系统架构概览\n2. 核心模块设计\n3. 数据流设计\n4. 技术选型',
-    debugging: '请协助排查以下问题：\n\n问题描述：\n\n复现步骤：\n\n错误日志：'
-  }
-  if (templates[templateId] && !wizardData.value.task) {
-    wizardData.value.task = templates[templateId]
-  }
-}
-
-function toggleWizardAgent(agentId) {
-  const idx = wizardData.value.agent_ids.indexOf(agentId)
-  if (idx >= 0) {
-    wizardData.value.agent_ids.splice(idx, 1)
-    delete wizardData.value.agent_roles[agentId]
-  } else {
-    wizardData.value.agent_ids.push(agentId)
-    wizardData.value.agent_roles[agentId] = 'producer'
-  }
-}
-
-function onSupervisionChange(config) {
-  if (config) {
-    wizardData.value.agent_roles = config.roles || {}
-    wizardData.value.supervision_edges = config.edges || []
-  }
-}
-
-async function createRoomFromWizard() {
-  const data = wizardData.value
-  if (!data.title || !data.task || data.agent_ids.length === 0) return
-
-  creating.value = true
-  try {
-    // 获取 SupervisionGraphEditor 的完整配置
-    let supervisionConfig = null
-    if (wizardRef.value && data.execution_mode === 'review_loop') {
-      supervisionConfig = wizardRef.value.getSupervisionConfig()
-    }
-
-    // 构建 agent 列表
-    const agents = data.agent_ids
-      .map(id => agentPool.value.find(a => a.id === id))
-      .filter(Boolean)
-      .map((a, idx) => {
-        const base = { agent_id: a.id }
-        if (data.execution_mode === 'review_loop') {
-          // 添加监督角色和边配置
-          const role = data.agent_roles[a.id] || 'producer'
-          const edgeConfig = supervisionConfig?.edges?.filter(e => e.source === a.id || e.target === a.id) || []
-          return {
-            ...base,
-            agent_type: role,
-            reviews_for: JSON.stringify(
-              edgeConfig.filter(e => e.source === a.id).map(e => e.target)
-            ),
-            reviewed_by: JSON.stringify(
-              edgeConfig.filter(e => e.target === a.id).map(e => e.source)
-            )
-          }
-        }
-        return base
-      })
-
-    const res = await chatRoomsAPI.create({
-      title: data.title,
-      task: data.task,
-      max_rounds: data.max_rounds,
-      execution_mode: data.execution_mode,
-      agents
-    })
-    closeWizard()
-    await loadRooms()
-    const created = res.data
-    if (created?.id) selectRoom(created.id)
-  } catch (e) {
-    console.error('Failed to create room:', e)
-  } finally {
-    creating.value = false
-  }
-}
-
-// ============ Selected room state ============
-const selectedId = ref(null)
-const room = ref(null)
-const messages = ref([])
-const messagesLoading = ref(false)
-const streaming = ref(false)
-const streamingMessages = ref({}) // Track in-progress streaming messages
-const error = ref('')
-const messagesContainer = ref(null)
-const isNearBottom = ref(true)  // 是否接近底部
-
-// Room agent editing
-const editingRoomAgent = ref(null)
-const roomAgentForm = ref({})
-const roomAgentSaving = ref(false)
-
-let abortController = null
-
-const statusMap = {
-  idle: { label: '就绪', class: 'status-idle' },
-  running: { label: '进行中', class: 'status-running' },
-  paused: { label: '已暂停', class: 'status-paused' },
-  completed: { label: '已完成', class: 'status-completed' },
-  error: { label: '错误', class: 'status-error' }
-}
-
-const roomAgents = computed(() => room.value?.agents || [])
 const canEditRoom = computed(() => room.value?.status !== 'running' && !streaming.value)
 
-// New: execution mode
 const executionMode = computed(() => room.value?.execution_mode || 'sequential')
 const isParallelMode = computed(() => executionMode.value === 'parallel')
 
-// Parallel mode agent states
 const parallelAgents = computed(() => {
   const roomData = store.rooms[selectedId.value]
-  if (!roomData || !roomData.agents) return {}
-  return roomData.agents
+  return roomData?.agents || {}
 })
 
 const parallelAgentList = computed(() => Object.values(parallelAgents.value))
@@ -232,28 +88,39 @@ const parallelStats = computed(() => {
   }
 })
 
-// Group messages by round number for better visual organization
-const groupedMessages = computed(() => {
-  const groups = []
-  let currentGroup = []
-  let currentRound = null
-  
-  for (const msg of messages.value) {
-    const round = msg.round_number || 0
-    if (round !== currentRound) {
-      if (currentGroup.length > 0) {
-        groups.push(currentGroup)
-      }
-      currentGroup = [msg]
-      currentRound = round
-    } else {
-      currentGroup.push(msg)
-    }
+// Agent form computed
+const availableModels = computed(() => {
+  const providerList = Array.isArray(providers.value) ? providers.value : []
+  if (!agentForm.value.provider_id) {
+    return providerList.flatMap(p => (p.models || [p.default_model]).map(m => `${p.name}: ${m}`))
+  } else {
+    const p = providerList.find(p => p.id === agentForm.value.provider_id)
+    if (p) return (p.models || [p.default_model]).map(m => `${p.name}: ${m}`)
   }
-  if (currentGroup.length > 0) {
-    groups.push(currentGroup)
+  return []
+})
+
+const modelDisplayValue = computed({
+  get() {
+    if (!agentForm.value.model) return ''
+    const found = availableModels.value.find(m => m.endsWith(`: ${agentForm.value.model}`))
+    return found || agentForm.value.model
+  },
+  set(val) {
+    agentForm.value.model = val.includes(': ') ? val.split(': ')[1] : val
   }
-  return groups
+})
+
+// ============ Lifecycle ============
+
+onMounted(() => {
+  loadAgentPool()
+  loadRooms()
+  loadProviders()
+})
+
+onUnmounted(() => {
+  if (abortController) abortController.abort()
 })
 
 // ============ Agent Pool ============
@@ -270,16 +137,14 @@ async function loadAgentPool() {
   }
 }
 
-function onProviderChange() {
+function handleProviderChange() {
   const p = providers.value.find(p => p.id === agentForm.value.provider_id)
   agentForm.value.model = p ? p.default_model : ''
 }
 
 function startCreateAgent() {
-  // 先重置状态，再设置新值
   showAgentModal.value = false
   editingAgent.value = null
-  
   nextTick(() => {
     agentForm.value = {
       name: '', role: '', provider_id: null, model: '',
@@ -293,7 +158,6 @@ function startCreateAgent() {
 function startEditAgent(agent) {
   showAgentModal.value = false
   editingAgent.value = null
-  
   nextTick(() => {
     agentForm.value = { ...agent }
     editingAgent.value = agent
@@ -327,8 +191,8 @@ async function saveAgent() {
   }
 }
 
-async function deleteAgentFromPool(agent) {
-  if (!confirm(`删除 Agent「${agent.name}」？它将仅从 Agent 池中移除，已加入房间的副本不受影响。`)) return
+async function deleteAgent(agent) {
+  if (!confirm(`删除 Agent「${agent.name}」？`)) return
   try {
     await agentsAPI.delete(agent.id)
     cancelAgentEdit()
@@ -338,7 +202,7 @@ async function deleteAgentFromPool(agent) {
   }
 }
 
-// ============ Room list ============
+// ============ Room List ============
 
 async function loadRooms() {
   roomsLoading.value = true
@@ -361,25 +225,27 @@ async function loadProviders() {
   }
 }
 
-async function createRoom() {
-  if (!newRoom.value.title || !newRoom.value.task) return
+function openCreateRoom() {
+  showCreate.value = true
+}
+
+async function createRoom(data) {
+  if (!data.title || !data.task) return
   creating.value = true
   try {
-    // Build agents list from selected agent_ids
-    const agents = newRoom.value.agent_ids
+    const agents = data.agent_ids
       .map(id => agentPool.value.find(a => a.id === id))
       .filter(Boolean)
       .map(a => ({ agent_id: a.id }))
 
     const res = await chatRoomsAPI.create({
-      title: newRoom.value.title,
-      task: newRoom.value.task,
-      max_rounds: newRoom.value.max_rounds,
-      execution_mode: newRoom.value.execution_mode,
+      title: data.title,
+      task: data.task,
+      max_rounds: data.max_rounds,
+      execution_mode: data.execution_mode,
       agents
     })
     showCreate.value = false
-    resetNewRoom()
     await loadRooms()
     const created = res.data
     if (created?.id) selectRoom(created.id)
@@ -390,19 +256,6 @@ async function createRoom() {
   }
 }
 
-function resetNewRoom() {
-  newRoom.value = { title: '', task: '', max_rounds: 5, agent_ids: [], execution_mode: 'sequential' }
-}
-
-function toggleAgentInNewRoom(agentId) {
-  const idx = newRoom.value.agent_ids.indexOf(agentId)
-  if (idx >= 0) {
-    newRoom.value.agent_ids.splice(idx, 1)
-  } else {
-    newRoom.value.agent_ids.push(agentId)
-  }
-}
-
 async function deleteRoom(id) {
   if (!confirm('确定删除此聊天室？')) return
   try {
@@ -418,7 +271,7 @@ async function deleteRoom(id) {
   }
 }
 
-// ============ Select room ============
+// ============ Select Room ============
 
 async function selectRoom(id) {
   if (streaming.value) {
@@ -428,7 +281,7 @@ async function selectRoom(id) {
     }
     streaming.value = false
   }
-  // Clean up both mode states
+  
   streamingMessages.value = {}
   store.cleanupRoom(selectedId.value)
   
@@ -436,6 +289,7 @@ async function selectRoom(id) {
   error.value = ''
   editingRoomAgent.value = null
   messagesLoading.value = true
+  
   try {
     const [roomRes, msgRes] = await Promise.all([
       chatRoomsAPI.get(id),
@@ -444,8 +298,6 @@ async function selectRoom(id) {
     room.value = roomRes.data
     messages.value = msgRes.data?.messages || []
     if (msgRes.data?.room) room.value = msgRes.data.room
-    await nextTick()
-    forceScrollToBottom()  // 选择聊天室时强制滚动到底部
   } catch (e) {
     console.error('Failed to load room:', e)
     error.value = '加载失败'
@@ -454,36 +306,6 @@ async function selectRoom(id) {
   }
 }
 
-function scrollToBottom() {
-  if (!isNearBottom.value) return
-  if (messagesContainer.value) {
-    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
-  }
-}
-
-// 智能滚动：检测是否接近底部
-function checkNearBottom() {
-  if (!messagesContainer.value) return
-  const { scrollTop, scrollHeight, clientHeight } = messagesContainer.value
-  const distanceFromBottom = scrollHeight - scrollTop - clientHeight
-  isNearBottom.value = distanceFromBottom <= 100
-}
-
-// 滚动事件处理
-function handleScroll() {
-  checkNearBottom()
-}
-
-// 强制滚动到底部（启动聊天室时使用）
-function forceScrollToBottom() {
-  nextTick(() => {
-    if (messagesContainer.value) {
-      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
-      isNearBottom.value = true
-    }
-  })
-}
-
 // ============ SSE Streaming ============
 
 async function startRoom() {
@@ -494,14 +316,12 @@ async function startRoom() {
   const token = localStorage.getItem('access_token')
 
   if (isParallelMode.value) {
-    // Parallel mode
     try {
       await parallelStreamManager.startParallelRoom(selectedId.value, token)
     } catch (e) {
       if (e.name !== 'AbortError') error.value = e.message
     } finally {
       streaming.value = false
-      // Reload messages after parallel execution completes
       if (selectedId.value) {
         const [roomRes, msgRes] = await Promise.all([
           chatRoomsAPI.get(selectedId.value),
@@ -514,7 +334,6 @@ async function startRoom() {
       }
     }
   } else {
-    // Sequential mode (original logic)
     abortController = new AbortController()
     try {
       const url = chatRoomsAPI.start(selectedId.value)
@@ -527,16 +346,20 @@ async function startRoom() {
         const err = await response.json().catch(() => ({}))
         throw new Error(err.message || `HTTP ${response.status}`)
       }
+      
       const reader = response.body.getReader()
       const decoder = new TextDecoder()
       let buffer = ''
+      
       while (true) {
         const { done, value } = await reader.read()
         if (value) buffer += decoder.decode(value, { stream: true })
         if (done) break
+        
         const lines = buffer.split('\n')
         buffer = lines.pop() || ''
         let currentEvent = ''
+        
         for (const line of lines) {
           if (line.startsWith('event: ')) currentEvent = line.slice(7).trim()
           else if (line.startsWith('data: ')) {
@@ -560,23 +383,16 @@ async function startRoom() {
 
 function handleSSEEvent(event, data) {
   switch (event) {
-    // Streaming events
-    case 'message_start': {
+    case 'message_start':
       streamingMessages.value[data.id] = {
-        id: data.id,
-        room_id: data.room_id,
-        role: data.role,
-        sender_name: data.sender_name,
-        sender_color: data.sender_color,
-        round_number: data.round_number,
-        content: '',
-        text: '',
+        id: data.id, room_id: data.room_id, role: data.role,
+        sender_name: data.sender_name, sender_color: data.sender_color,
+        round_number: data.round_number, content: '', text: '',
         process_steps: [{ id: 'step-0', index: 0, type: 'text', content: '' }],
         streaming: true
       }
       break
-    }
-    case 'message_chunk': {
+    case 'message_chunk':
       const msg = streamingMessages.value[data.id]
       if (msg) {
         msg.content += data.content
@@ -584,28 +400,19 @@ function handleSSEEvent(event, data) {
         msg.process_steps[0].content = data.accumulated
       }
       break
-    }
-    case 'message_end': {
-      const msg = streamingMessages.value[data.id]
-      if (msg) {
-        msg.streaming = false
-        msg.token_count = data.token_count
-        // Move from streaming to complete messages
+    case 'message_end':
+      const endedMsg = streamingMessages.value[data.id]
+      if (endedMsg) {
+        endedMsg.streaming = false
+        endedMsg.token_count = data.token_count
         delete streamingMessages.value[data.id]
-        messages.value.push(msg)
-        forceScrollToBottom()  // 聊天室消息结束时强制滚动
+        messages.value.push(endedMsg)
       }
       break
-    }
-    // Legacy complete message event
-    case 'message': {
-      // Remove any streaming version of this message
+    case 'message':
       delete streamingMessages.value[data.id]
-      // Add complete message
       messages.value.push(data)
-      forceScrollToBottom()  // 聊天室消息结束时强制滚动
       break
-    }
     case 'room_started': room.value = { ...room.value, status: 'running' }; break
     case 'room_completed': room.value = { ...room.value, status: 'completed' }; break
     case 'room_paused': room.value = { ...room.value, status: 'paused' }; break
@@ -617,12 +424,10 @@ function handleSSEEvent(event, data) {
 
 async function stopRoom() {
   try {
-    // Cancel sequential mode
     if (abortController) {
-      abortController.abort();
+      abortController.abort()
       abortController = null
     }
-    // Cancel parallel mode
     if (isParallelMode.value) {
       parallelStreamManager.cancelRoom(selectedId.value)
     }
@@ -630,7 +435,6 @@ async function stopRoom() {
     room.value = { ...room.value, status: 'paused' }
     streaming.value = false
     streamingMessages.value = {}
-    // Clean up parallel store
     store.cleanupRoom(selectedId.value)
   } catch (e) { console.error('Failed to stop room:', e) }
 }
@@ -646,10 +450,10 @@ async function resetRoom() {
   } catch (e) { console.error('Failed to reset room:', e) }
 }
 
-async function updateExecutionMode() {
+async function updateExecutionMode(mode) {
   if (!room.value || !canEditRoom.value) return
   try {
-    await chatRoomsAPI.update(room.value.id, { execution_mode: room.value.execution_mode })
+    await chatRoomsAPI.update(room.value.id, { execution_mode: mode })
   } catch (e) {
     console.error('Failed to update execution mode:', e)
   }
@@ -657,10 +461,10 @@ async function updateExecutionMode() {
 
 // ============ Room Agent Management ============
 
-async function addAgentToRoom(agentFromPool) {
+async function addAgentToRoom(agent) {
   if (!canEditRoom.value) return
   try {
-    await chatRoomsAPI.addAgent(selectedId.value, { agent_id: agentFromPool.id })
+    await chatRoomsAPI.addAgent(selectedId.value, { agent_id: agent.id })
     const res = await chatRoomsAPI.get(selectedId.value)
     room.value = res.data
   } catch (e) {
@@ -704,12 +508,114 @@ async function deleteRoomAgent(agent) {
   }
 }
 
+// ============ Wizard ============
+
+function openWizard() {
+  wizardStep.value = 1
+  wizardData.value = {
+    title: '', task: '', max_rounds: 5, execution_mode: 'sequential',
+    agent_ids: [], agent_roles: {}, supervision_edges: []
+  }
+  showCreateWizard.value = true
+}
+
+function closeWizard() {
+  showCreateWizard.value = false
+  wizardStep.value = 1
+}
+
+function nextWizardStep() {
+  if (wizardStep.value < 4) wizardStep.value++
+}
+
+function prevWizardStep() {
+  if (wizardStep.value > 1) wizardStep.value--
+}
+
+function selectWizardTemplate(templateId) {
+  const templates = {
+    custom: '请描述需要 Agent 团队完成的任务...',
+    code_review: '请对以下代码进行全面的审查和改进：\n\n```\n\n```',
+    architecture: '请设计一个系统架构方案，涵盖：\n1. 系统架构概览\n2. 核心模块设计\n3. 数据流设计\n4. 技术选型',
+    debugging: '请协助排查以下问题：\n\n问题描述：\n\n复现步骤：\n\n错误日志：'
+  }
+  if (templates[templateId] && !wizardData.value.task) {
+    wizardData.value.task = templates[templateId]
+  }
+}
+
+function toggleWizardAgent(agentId) {
+  const idx = wizardData.value.agent_ids.indexOf(agentId)
+  if (idx >= 0) {
+    wizardData.value.agent_ids.splice(idx, 1)
+    delete wizardData.value.agent_roles[agentId]
+  } else {
+    wizardData.value.agent_ids.push(agentId)
+    wizardData.value.agent_roles[agentId] = 'producer'
+  }
+}
+
+function onSupervisionChange(config) {
+  if (config) {
+    wizardData.value.agent_roles = config.roles || {}
+    wizardData.value.supervision_edges = config.edges || []
+  }
+}
+
+async function createRoomFromWizard() {
+  const data = wizardData.value
+  if (!data.title || !data.task || data.agent_ids.length === 0) return
+
+  creating.value = true
+  try {
+    let supervisionConfig = null
+    if (wizardRef.value && data.execution_mode === 'review_loop') {
+      supervisionConfig = wizardRef.value.getSupervisionConfig()
+    }
+
+    const agents = data.agent_ids
+      .map(id => agentPool.value.find(a => a.id === id))
+      .filter(Boolean)
+      .map((a) => {
+        const base = { agent_id: a.id }
+        if (data.execution_mode === 'review_loop') {
+          const role = data.agent_roles[a.id] || 'producer'
+          const edgeConfig = supervisionConfig?.edges?.filter(e => e.source === a.id || e.target === a.id) || []
+          return {
+            ...base,
+            agent_type: role,
+            reviews_for: JSON.stringify(edgeConfig.filter(e => e.source === a.id).map(e => e.target)),
+            reviewed_by: JSON.stringify(edgeConfig.filter(e => e.target === a.id).map(e => e.source))
+          }
+        }
+        return base
+      })
+
+    const res = await chatRoomsAPI.create({
+      title: data.title,
+      task: data.task,
+      max_rounds: data.max_rounds,
+      execution_mode: data.execution_mode,
+      agents
+    })
+    closeWizard()
+    await loadRooms()
+    const created = res.data
+    if (created?.id) selectRoom(created.id)
+  } catch (e) {
+    console.error('Failed to create room:', e)
+  } finally {
+    creating.value = false
+  }
+}
+
+// ============ Helpers ============
+
 function randomColor() {
   const colors = ['#2563eb', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16']
   return colors[Math.floor(Math.random() * colors.length)]
 }
 
-// ============ Wizard helpers ============
 function getAgentColor(id) {
   const agent = agentPool.value.find(a => a.id === id)
   return agent?.color || '#3b82f6'
@@ -735,397 +641,111 @@ function getRoleLabelText(role) {
   }
   return labels[role] || role
 }
-
-watch(messages, () => { nextTick(scrollToBottom) }, { deep: true })
-
-// 启动聊天室时强制滚动
-watch(streaming, (val) => {
-  if (val) forceScrollToBottom()
-})
-
-onMounted(() => {
-  loadAgentPool()
-  loadRooms()
-  loadProviders()
-})
-
-onUnmounted(() => {
-  if (abortController) abortController.abort()
-})
 </script>
 
 <template>
   <div class="page-container chat-rooms">
     <div class="rooms-layout">
-      <!-- Left sidebar -->
-      <aside class="rooms-sidebar">
-        <!-- Tab bar -->
-        <div class="sidebar-tabs">
-          <button class="tab-btn" :class="{ active: sidebarTab === 'rooms' }" @click="sidebarTab = 'rooms'">
-            💬 聊天室
-          </button>
-          <button class="tab-btn" :class="{ active: sidebarTab === 'agents' }" @click="sidebarTab = 'agents'">
-            🤖 Agent 池
-          </button>
-        </div>
+      <!-- Left Sidebar -->
+      <RoomSidebar
+        :agent-pool="agentPool"
+        :rooms="rooms"
+        :selected-id="selectedId"
+        :room="room"
+        :can-edit-room="canEditRoom"
+        :loading="agentPoolLoading || roomsLoading"
+        @select-room="selectRoom"
+        @create-room="openCreateRoom"
+        @delete-room="deleteRoom"
+        @create-agent="startCreateAgent"
+        @edit-agent="startEditAgent"
+        @delete-agent="deleteAgent"
+        @show-add-to-room="showAddToRoom = true"
+        @edit-room-agent="startEditRoomAgent"
+        @delete-room-agent="deleteRoomAgent"
+      />
 
-        <!-- Agent Pool tab -->
-        <div v-if="sidebarTab === 'agents'" class="sidebar-tab-content">
-          <div class="sidebar-header">
-            <button class="btn-new-conv" @click="startCreateAgent">+ 新建 Agent</button>
-          </div>
-          <div v-if="agentPoolLoading" class="sidebar-loading"><div class="spinner-small"></div></div>
-          <div v-else-if="agentPool.length === 0" class="sidebar-empty">暂无 Agent</div>
-          <div v-else class="pool-list">
-            <div v-for="agent in agentPool" :key="agent.id"
-              class="pool-item"
-              @click="startEditAgent(agent)"
-            >
-              <span class="agent-dot" :style="{ background: agent.color }">{{ agent.name.charAt(0) }}</span>
-              <div class="agent-info">
-                <span class="agent-name" :style="{ color: agent.color }">{{ agent.name }}</span>
-                <span v-if="agent.role" class="agent-role">{{ agent.role }}</span>
-                <span class="agent-model">{{ agent.model || 'default' }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Room list tab -->
-        <div v-if="sidebarTab === 'rooms'" class="sidebar-tab-content">
-          <div class="sidebar-header">
-            <button class="btn-new-conv" @click="openWizard">+ 新建聊天室</button>
-          </div>
-          <div v-if="roomsLoading" class="sidebar-loading"><div class="spinner-small"></div></div>
-          <div v-else-if="rooms.length === 0" class="sidebar-empty">暂无聊天室</div>
-          <div v-else class="room-list">
-            <div v-for="r in rooms" :key="r.id" class="room-item" :class="{ active: selectedId === r.id }" @click="selectRoom(r.id)">
-              <div class="room-item-header">
-                <span class="room-item-title">{{ r.title }}</span>
-                <span class="status-dot" :class="statusMap[r.status]?.class" :title="statusMap[r.status]?.label"></span>
-              </div>
-              <div class="room-item-meta">
-                <span class="meta-text">
-                  <span v-for="a in (r.agents || []).slice(0, 4)" :key="a.id" class="mini-dot" :style="{ background: a.color }" :title="a.name"></span>
-                  {{ r.agents?.length || 0 }} Agents
-                </span>
-                <span class="meta-text">{{ r.current_round }}/{{ r.max_rounds }}</span>
-                <div class="room-item-actions" @click.stop>
-                  <button @click="deleteRoom(r.id)" class="btn-icon-sm" title="删除">
-                    <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Room agents tab (shown when a room is selected) -->
-        <div v-if="sidebarTab === 'roomAgents' && room" class="sidebar-tab-content">
-          <div class="sidebar-header sidebar-header-row">
-            <button class="btn-back" @click="sidebarTab = 'rooms'; selectedId = null; room = null">
-              <svg width="18" height="18"><use href="#arrow-left-icon"/></svg>
-            </button>
-            <span class="sidebar-title">{{ room.title }}</span>
-            <button v-if="canEditRoom" class="btn-add-agent-sm" @click="showAddToRoom = true" title="添加 Agent">+</button>
-          </div>
-          <div class="room-agent-list">
-            <div v-for="agent in roomAgents" :key="agent.id"
-              class="agent-row"
-              :class="{ editing: editingRoomAgent?.id === agent.id }"
-              @click="startEditRoomAgent(agent)"
-            >
-              <span class="agent-dot" :style="{ background: agent.color }">{{ agent.name.charAt(0) }}</span>
-              <div class="agent-info">
-                <span class="agent-name" :style="{ color: agent.color }">{{ agent.name }}</span>
-                <span v-if="agent.role" class="agent-role">{{ agent.role }}</span>
-                <span class="agent-model">{{ agent.model || 'default' }}</span>
-              </div>
-              <button v-if="canEditRoom" class="btn-del-agent" @click.stop="deleteRoomAgent(agent)">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-              </button>
-            </div>
-            <div v-if="roomAgents.length === 0" class="no-agents">
-              <p>暂无 Agent</p>
-            </div>
-          </div>
-          <!-- Room agent edit form -->
-          <div v-if="editingRoomAgent" class="agent-form">
-            <div class="agent-form-header">
-              <span>编辑房间 Agent</span>
-              <button class="btn-close-xs" @click="cancelRoomAgentEdit">&times;</button>
-            </div>
-            <div class="agent-form-body">
-              <div class="form-row"><input v-model="roomAgentForm.name" placeholder="名称" class="fi" /><input type="color" v-model="roomAgentForm.color" class="fi-color" /></div>
-              <div class="form-row">
-                <select v-model="roomAgentForm.provider_id" class="fi">
-                  <option :value="null">默认 Provider</option>
-                  <option v-for="p in providers" :key="p.id" :value="p.id">{{ p.name }}</option>
-                </select>
-              </div>
-              <div class="form-row"><input v-model="roomAgentForm.model" placeholder="模型" class="fi" /></div>
-              <div class="form-row"><textarea v-model="roomAgentForm.system_prompt" rows="2" placeholder="系统提示词" class="fi"></textarea></div>
-              <div class="form-row" style="justify-content: flex-end; gap: 0.4rem;">
-                <button class="btn-xs btn-secondary" @click="cancelRoomAgentEdit">取消</button>
-                <button class="btn-xs btn-primary" @click="saveRoomAgent" :disabled="!roomAgentForm.name || roomAgentSaving">{{ roomAgentSaving ? '...' : '保存' }}</button>
-              </div>
-            </div>
-          </div>
-          <div class="sidebar-room-info">
-            <div class="info-item"><span class="info-label">任务</span><p class="info-value">{{ room.task }}</p></div>
-            <div class="info-item"><span class="info-label">轮次</span><p class="info-value">{{ room.max_rounds }}</p></div>
-          </div>
-        </div>
-      </aside>
-
-      <!-- Right content -->
+      <!-- Right Content -->
       <main class="rooms-content">
+        <!-- Empty state -->
         <div v-if="!room" class="empty-content">
           <div class="empty-icon">
             <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle>
-              <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+              <circle cx="9" cy="7" r="4"></circle>
+              <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
             </svg>
           </div>
           <p>选择一个聊天室或创建新的</p>
         </div>
 
+        <!-- Room detail -->
         <div v-else class="room-detail">
-          <div class="room-toolbar">
-            <div class="toolbar-info">
-              <h3>{{ room.title }}</h3>
-              <div class="toolbar-badges">
-                <span class="status-badge" :class="statusMap[room.status]?.class">{{ statusMap[room.status]?.label }}</span>
-                <span class="round-badge" v-if="room.current_round > 0">R{{ room.current_round }}/{{ room.max_rounds }}</span>
-                <span v-if="executionMode === 'parallel'" class="mode-badge parallel">⚡ Parallel</span>
-                <span v-else-if="executionMode === 'review_loop'" class="mode-badge review-loop">🔄 Review Loop</span>
-                <span v-else class="mode-badge sequential">📋 Sequential</span>
-              </div>
-            </div>
-            <div class="mode-selector">
-              <select
-                v-model="room.execution_mode"
-                @change="updateExecutionMode"
-                class="mode-select"
-                :disabled="!canEditRoom"
-              >
-                <option value="sequential">📋 Sequential</option>
-                <option value="parallel">⚡ Parallel</option>
-                <option value="review_loop">🔄 Review Loop</option>
-              </select>
-            </div>
-            <!-- Parallel status indicator -->
-            <div v-if="isParallelMode && streaming && parallelAgentList.length > 0" class="parallel-status">
-              <div class="agent-dots">
-                <span
-                  v-for="agent in parallelAgentList"
-                  :key="agent.id"
-                  class="status-dot-small"
-                  :class="agent.status"
-                  :style="{ background: agent.message?.sender_color || agent.color || '#2563eb' }"
-                  :title="agent.name + ': ' + agent.status"
-                ></span>
-              </div>
-              <span class="progress-text">{{ parallelStats.completed }}/{{ parallelStats.total }}</span>
-            </div>
-            <div class="toolbar-actions">
-              <button v-if="!streaming && room.status !== 'running'" class="btn-ctrl btn-start" @click="startRoom">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
-                {{ room.status === 'paused' ? '继续' : '开始' }}
-              </button>
-              <button v-if="streaming || room.status === 'running'" class="btn-ctrl btn-stop" @click="stopRoom">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
-                停止
-              </button>
-              <button v-if="room.status !== 'running' && messages.length > 0" class="btn-ctrl btn-reset" @click="resetRoom">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
-                重置
-              </button>
-            </div>
-          </div>
-          <div v-if="error" class="error-bar">{{ error }}<button @click="error = ''">&times;</button></div>
-          <div class="chat-messages" ref="messagesContainer" @scroll="handleScroll">
-            <!-- Parallel mode streaming view -->
-            <ParallelMessages
-              v-if="isParallelMode && streaming"
-              :room-id="selectedId"
-              mode="parallel"
-            />
-            <!-- Parallel mode history messages (card layout) -->
-            <template v-else-if="isParallelMode">
-              <div v-if="messagesLoading" class="loading-messages"><div class="spinner-small"></div><span>加载中...</span></div>
-              <div v-else-if="messages.length === 0" class="chat-empty"><p>点击「开始」启动多 Agent 对话</p></div>
-              <div v-else class="parallel-history">
-                <div v-for="(roundMsgs, rIdx) in groupedMessages" :key="rIdx" class="parallel-round">
-                  <div class="round-divider">
-                    <span class="round-divider-line"></span>
-                    <span class="round-divider-label">第 {{ roundMsgs[0].round_number || rIdx + 1 }} 轮</span>
-                    <span class="round-divider-line"></span>
-                  </div>
-                  <div class="parallel-grid">
-                    <div
-                      v-for="msg in roundMsgs"
-                      :key="msg.id"
-                      class="parallel-card completed"
-                      :style="{ borderColor: msg.sender_color }"
-                    >
-                      <div class="card-header">
-                        <span class="agent-avatar" :style="{ background: msg.sender_color || '#2563eb' }">
-                          {{ (msg.sender_name || '?').charAt(0) }}
-                        </span>
-                        <span class="agent-name" :style="{ color: msg.sender_color }">{{ msg.sender_name }}</span>
-                      </div>
-                      <div class="card-body">
-                        <MessageBubble :message="msg" :deletable="false" :compact="true" />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </template>
-            <!-- Sequential mode -->
-            <template v-else>
-              <div v-if="messagesLoading" class="loading-messages"><div class="spinner-small"></div><span>加载中...</span></div>
-              <div v-else-if="messages.length === 0 && Object.keys(streamingMessages).length === 0" class="chat-empty"><p>点击「开始」启动多 Agent 对话</p></div>
-              <div v-else>
-                <div v-for="(roundMsgs, rIdx) in groupedMessages" :key="rIdx">
-                  <div class="round-divider" v-if="rIdx > 0">
-                    <span class="round-divider-line"></span>
-                    <span class="round-divider-label">第 {{ roundMsgs[0].round_number }} 轮</span>
-                    <span class="round-divider-line"></span>
-                  </div>
-                  <div class="round-group">
-                    <div class="round-header" v-if="roundMsgs[0].round_number">
-                      <span class="round-header-icon">💬</span>
-                      <span class="round-header-text">第 {{ roundMsgs[0].round_number }} 轮对话</span>
-                    </div>
-                    <MessageBubble v-for="msg in roundMsgs" :key="msg.id" :message="msg" :deletable="false" />
-                  </div>
-                </div>
-                <!-- Streaming messages -->
-                <template v-if="Object.keys(streamingMessages).length > 0">
-                  <div class="round-divider" v-if="messages.length > 0">
-                    <span class="round-divider-line"></span>
-                    <span class="round-divider-label">进行中...</span>
-                    <span class="round-divider-line"></span>
-                  </div>
-                  <div class="round-group">
-                    <MessageBubble
-                      v-for="(msg, idx) in Object.values(streamingMessages)"
-                      :key="msg.id + '-' + idx"
-                      :message="msg"
-                      :deletable="false"
-                      class="streaming-message"
-                    />
-                  </div>
-                </template>
-              </div>
-            </template>
+          <!-- Toolbar -->
+          <RoomToolbar
+            :room="room"
+            :streaming="streaming"
+            :can-edit-room="canEditRoom"
+            :is-parallel-mode="isParallelMode"
+            :parallel-stats="parallelStats"
+            :parallel-agent-list="parallelAgentList"
+            @start="startRoom"
+            @stop="stopRoom"
+            @reset="resetRoom"
+            @update-execution-mode="updateExecutionMode"
+          />
+
+          <!-- Error bar -->
+          <div v-if="error" class="error-bar">
+            {{ error }}
+            <button @click="error = ''">&times;</button>
           </div>
+
+          <!-- Message list -->
+          <RoomMessageList
+            :messages="messages"
+            :streaming-messages="streamingMessages"
+            :streaming="streaming"
+            :messages-loading="messagesLoading"
+            :is-parallel-mode="isParallelMode"
+            :room-id="selectedId"
+          />
         </div>
       </main>
     </div>
 
-    <!-- Create room modal -->
-    <div v-if="showCreate" class="modal-overlay" @click.self="showCreate = false">
-      <div class="modal">
-        <div class="modal-head"><h3>新建聊天室</h3><button class="btn-close" @click="showCreate = false">&times;</button></div>
-        <div class="modal-body">
-          <div class="fg"><label>标题</label><input v-model="newRoom.title" placeholder="项目架构设计讨论" /></div>
-          <div class="fg"><label>任务描述</label><textarea v-model="newRoom.task" rows="3" placeholder="描述需要 Agent 讨论的问题..."></textarea></div>
-          <div class="fg-row">
-            <div class="fg" style="flex: 1;">
-              <label>最大轮次</label>
-              <input v-model.number="newRoom.max_rounds" type="number" min="1" max="20" />
-            </div>
-            <div class="fg" style="flex: 1;">
-              <label>执行模式</label>
-              <select v-model="newRoom.execution_mode">
-                <option value="sequential">📋 串行 - Agent按顺序发言</option>
-                <option value="parallel">⚡ 并行 - Agent同时发言</option>
-                <option value="review_loop">🔄 监督循环 - Agent相互审查</option>
-              </select>
-            </div>
-          </div>
-          <div class="agents-select">
-            <label class="agents-select-label">选择 Agent</label>
-            <div v-if="agentPool.length === 0" class="no-agents-hint">请先在左侧 Agent 池中创建 Agent</div>
-            <div v-else class="agents-checkboxes">
-              <label v-for="a in agentPool" :key="a.id" class="agent-checkbox" :class="{ checked: newRoom.agent_ids.includes(a.id) }">
-                <input type="checkbox" :value="a.id" v-model="newRoom.agent_ids" />
-                <span class="agent-dot" :style="{ background: a.color }">{{ a.name.charAt(0) }}</span>
-                <span class="agent-checkbox-name" :style="{ color: a.color }">{{ a.name }}</span>
-                <span class="agent-checkbox-model">{{ a.model || 'default' }}</span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div class="modal-foot">
-          <button class="btn-secondary" @click="showCreate = false">取消</button>
-          <button class="btn-primary" @click="createRoom" :disabled="!newRoom.title || !newRoom.task || newRoom.agent_ids.length === 0 || creating">{{ creating ? '创建中...' : '创建' }}</button>
-        </div>
-      </div>
-    </div>
+    <!-- Modals -->
+    <CreateRoomModal
+      :show="showCreate"
+      :agent-pool="agentPool"
+      :creating="creating"
+      @close="showCreate = false"
+      @create="createRoom"
+    />
 
-    <!-- Add agent to room modal -->
-    <div v-if="showAddToRoom" class="modal-overlay" @click.self="showAddToRoom = false">
-      <div class="modal">
-        <div class="modal-head"><h3>添加 Agent 到房间</h3><button class="btn-close" @click="showAddToRoom = false">&times;</button></div>
-        <div class="modal-body">
-          <div v-if="agentPool.length === 0" class="no-agents-hint">请先在左侧 Agent 池中创建 Agent</div>
-          <div v-else class="agents-checkboxes">
-            <div v-for="a in agentPool" :key="a.id" class="agent-pick-row" @click="addAgentToRoom(a); showAddToRoom = false">
-              <span class="agent-dot" :style="{ background: a.color }">{{ a.name.charAt(0) }}</span>
-              <span class="agent-checkbox-name" :style="{ color: a.color }">{{ a.name }}</span>
-              <span class="agent-checkbox-model">{{ a.model || 'default' }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <AddToRoomModal
+      :show="showAddToRoom"
+      :agent-pool="agentPool"
+      @close="showAddToRoom = false"
+      @add="addAgentToRoom"
+    />
 
-    <!-- Agent create/edit modal -->
-    <div v-if="showAgentModal" class="modal-overlay" @click.self="cancelAgentEdit">
-      <div class="modal">
-        <div class="modal-head"><h3>{{ editingAgent === 'new' ? '新建 Agent' : '编辑 Agent' }}</h3><button class="btn-close" @click="cancelAgentEdit">&times;</button></div>
-        <div class="modal-body">
-          <div class="fg"><label>名称</label><input v-model="agentForm.name" placeholder="如: 架构师" /></div>
-          <div class="fg"><label>角色</label><input v-model="agentForm.role" placeholder="如: 架构师、开发者、审查员" /></div>
-          <div class="fg-row">
-            <div class="fg" style="flex: 1;">
-              <label>Provider</label>
-              <select v-model="agentForm.provider_id" @change="onProviderChange">
-                <option :value="null">默认 Provider</option>
-                <option v-for="p in providers" :key="p.id" :value="p.id">{{ p.name }}</option>
-              </select>
-            </div>
-            <div class="fg fg-color">
-              <label>颜色</label>
-              <div class="color-picker-wrap">
-                <input type="color" v-model="agentForm.color" class="color-input" />
-              </div>
-            </div>
-          </div>
-          <div class="fg">
-            <label>模型</label>
-            <select v-model="modelDisplayValue">
-              <option value="">自动选择</option>
-              <option v-for="m in availableModels" :key="m" :value="m">{{ m }}</option>
-            </select>
-          </div>
-          <div class="fg"><label>系统提示词</label><textarea v-model="agentForm.system_prompt" rows="3" placeholder="定义 Agent 的角色和行为..."></textarea></div>
-        </div>
-        <div class="modal-foot">
-          <button v-if="editingAgent !== 'new'" class="btn-danger" @click="deleteAgentFromPool(editingAgent)">删除</button>
-          <div style="flex: 1;"></div>
-          <button class="btn-secondary" @click="cancelAgentEdit">取消</button>
-          <button class="btn-primary" @click="saveAgent" :disabled="!agentForm.name || agentSaving">{{ agentSaving ? '保存中...' : '保存' }}</button>
-        </div>
-      </div>
-    </div>
-  </div>
+    <AgentFormModal
+      :show="showAgentModal"
+      :editing-agent="editingAgent"
+      :agent-form="agentForm"
+      :providers="providers"
+      :available-models="availableModels"
+      :saving="agentSaving"
+      @close="cancelAgentEdit"
+      @save="saveAgent"
+      @delete="deleteAgent"
+      @provider-change="handleProviderChange"
+      @update:model-value="(v) => agentForm.model = v"
+    />
 
-    <!-- ===== Wizard: Create Room with Supervision Graph ===== -->
+    <!-- Wizard Dialog -->
     <div v-if="showCreateWizard" class="wizard-overlay" @click.self="closeWizard">
       <div class="wizard-container">
         <!-- Header -->
@@ -1134,7 +754,7 @@ onUnmounted(() => {
           <button class="btn-close" @click="closeWizard">&times;</button>
         </div>
 
-        <!-- Step indicators -->
+        <!-- Steps -->
         <div class="wizard-steps">
           <div class="step-indicator" :class="{ active: wizardStep >= 1, current: wizardStep === 1 }">
             <span class="step-num">1</span>
@@ -1157,78 +777,49 @@ onUnmounted(() => {
           </div>
         </div>
 
-        <!-- Step 1: Basic Info -->
+        <!-- Body -->
         <div class="wizard-body">
+          <!-- Step 1 -->
           <div v-if="wizardStep === 1" class="wizard-step">
             <div class="step-title">📋 基本设置</div>
             <div class="fg"><label>聊天室标题</label><input v-model="wizardData.title" placeholder="项目架构设计讨论" /></div>
             <div class="fg"><label>任务描述</label><textarea v-model="wizardData.task" rows="4" placeholder="描述需要 Agent 团队讨论的问题..."></textarea></div>
             <div class="fg-row">
-              <div class="fg" style="flex: 1;">
-                <label>最大轮次</label>
-                <input v-model.number="wizardData.max_rounds" type="number" min="1" max="20" />
-              </div>
+              <div class="fg" style="flex: 1;"><label>最大轮次</label><input v-model.number="wizardData.max_rounds" type="number" min="1" max="20" /></div>
               <div class="fg" style="flex: 1;">
                 <label>执行模式</label>
                 <select v-model="wizardData.execution_mode">
-                  <option value="sequential">📋 串行 - Agent按顺序发言</option>
-                  <option value="parallel">⚡ 并行 - Agent同时发言</option>
-                  <option value="review_loop">🔄 监督循环 - Agent相互审查</option>
+                  <option value="sequential">📋 串行</option>
+                  <option value="parallel">⚡ 并行</option>
+                  <option value="review_loop">🔄 监督循环</option>
                 </select>
               </div>
             </div>
-            <!-- 任务模板快捷选择 -->
             <div class="template-grid">
-              <div class="template-card" :class="{ selected: wizardData.task.includes('代码') }" @click="selectWizardTemplate('code_review')">
-                <span class="template-icon">🔍</span>
-                <span class="template-name">代码审查</span>
-              </div>
-              <div class="template-card" @click="selectWizardTemplate('architecture')">
-                <span class="template-icon">🏗️</span>
-                <span class="template-name">架构设计</span>
-              </div>
-              <div class="template-card" @click="selectWizardTemplate('debugging')">
-                <span class="template-icon">🐛</span>
-                <span class="template-name">调试排查</span>
-              </div>
-              <div class="template-card" @click="selectWizardTemplate('custom')">
-                <span class="template-icon">📝</span>
-                <span class="template-name">自定义</span>
-              </div>
+              <div class="template-card" @click="selectWizardTemplate('code_review')"><span class="template-icon">🔍</span><span class="template-name">代码审查</span></div>
+              <div class="template-card" @click="selectWizardTemplate('architecture')"><span class="template-icon">🏗️</span><span class="template-name">架构设计</span></div>
+              <div class="template-card" @click="selectWizardTemplate('debugging')"><span class="template-icon">🐛</span><span class="template-name">调试排查</span></div>
+              <div class="template-card" @click="selectWizardTemplate('custom')"><span class="template-icon">📝</span><span class="template-name">自定义</span></div>
             </div>
           </div>
 
-          <!-- Step 2: Select Agents -->
+          <!-- Step 2 -->
           <div v-if="wizardStep === 2" class="wizard-step">
             <div class="step-title">🤖 选择参与讨论的 Agent</div>
-            <div v-if="agentPool.length === 0" class="empty-hint">
-              <p>暂无可用 Agent，请先在 Agent 池中创建</p>
-              <button class="btn-link" @click="closeWizard(); startCreateAgent()">前往创建</button>
-            </div>
+            <div v-if="agentPool.length === 0" class="empty-hint"><p>暂无可用 Agent，请先在 Agent 池中创建</p></div>
             <div v-else class="agent-selection">
-              <div
-                v-for="agent in agentPool"
-                :key="agent.id"
-                class="agent-option"
-                :class="{ selected: wizardData.agent_ids.includes(agent.id) }"
-                @click="toggleWizardAgent(agent.id)"
-              >
+              <div v-for="agent in agentPool" :key="agent.id" class="agent-option" :class="{ selected: wizardData.agent_ids.includes(agent.id) }" @click="toggleWizardAgent(agent.id)">
                 <input type="checkbox" :checked="wizardData.agent_ids.includes(agent.id)" />
                 <span class="agent-dot" :style="{ background: agent.color }">{{ agent.name.charAt(0) }}</span>
-                <div class="agent-option-info">
-                  <span class="agent-option-name">{{ agent.name }}</span>
-                  <span class="agent-option-role">{{ agent.role || '通用' }}</span>
-                </div>
+                <div class="agent-option-info"><span class="agent-option-name">{{ agent.name }}</span><span class="agent-option-role">{{ agent.role || '通用' }}</span></div>
                 <span class="agent-option-model">{{ agent.model || 'default' }}</span>
               </div>
             </div>
-            <div class="selected-info" v-if="wizardData.agent_ids.length > 0">
-              已选择 <strong>{{ wizardData.agent_ids.length }}</strong> 个 Agent
-            </div>
+            <div class="selected-info" v-if="wizardData.agent_ids.length > 0">已选择 <strong>{{ wizardData.agent_ids.length }}</strong> 个 Agent</div>
             <div class="selected-info" v-else>请选择至少 1 个 Agent</div>
           </div>
 
-          <!-- Step 3: Supervision Graph (only for review_loop mode) -->
+          <!-- Step 3 -->
           <div v-if="wizardStep === 3" class="wizard-step">
             <template v-if="wizardData.execution_mode === 'review_loop'">
               <div class="step-title">🔗 配置监督关系</div>
@@ -1236,71 +827,40 @@ onUnmounted(() => {
                 <p>设置每个 Agent 的角色类型，以及它们之间的监督关系。</p>
                 <ul>
                   <li><strong>🎨 Producer</strong> - 方案提出者</li>
-                  <li><strong>🔍 Reviewer</strong> - 审查员（可指定能力标签）</li>
+                  <li><strong>🔍 Reviewer</strong> - 审查员</li>
                   <li><strong>⚙️ Executor</strong> - 执行者</li>
                   <li><strong>👁️ Observer</strong> - 观察员</li>
                 </ul>
               </div>
-
-              <!-- 角色分配 -->
               <div class="role-assignment-section">
                 <div class="sub-title">Agent 角色分配</div>
-                <div class="role-assignment-list">
-                  <div
-                    v-for="agentId in wizardData.agent_ids"
-                    :key="agentId"
-                    class="role-assignment-row"
-                  >
-                    <div class="role-agent-badge" :style="{ background: getAgentColor(agentId) }">
-                      {{ getAgentName(agentId).charAt(0) }}
-                    </div>
-                    <span class="role-agent-name">{{ getAgentName(agentId) }}</span>
-                    <select
-                      v-model="wizardData.agent_roles[agentId]"
-                      class="role-select"
-                      @change="onSupervisionChange"
-                    >
-                      <option value="producer">🎨 Producer - 方案提出者</option>
-                      <option value="reviewer">🔍 Reviewer - 审查员</option>
-                      <option value="executor">⚙️ Executor - 执行者</option>
-                      <option value="observer">👁️ Observer - 观察员</option>
-                    </select>
-                  </div>
+                <div v-for="agentId in wizardData.agent_ids" :key="agentId" class="role-assignment-row">
+                  <div class="role-agent-badge" :style="{ background: getAgentColor(agentId) }">{{ getAgentName(agentId).charAt(0) }}</div>
+                  <span class="role-agent-name">{{ getAgentName(agentId) }}</span>
+                  <select v-model="wizardData.agent_roles[agentId]" class="role-select" @change="onSupervisionChange">
+                    <option value="producer">🎨 Producer</option>
+                    <option value="reviewer">🔍 Reviewer</option>
+                    <option value="executor">⚙️ Executor</option>
+                    <option value="observer">👁️ Observer</option>
+                  </select>
                 </div>
               </div>
-
-              <!-- Supervision Graph Editor -->
               <div class="sub-title" style="margin-top: 1rem;">监督关系图</div>
-              <div class="graph-hint">拖拽节点移动 · 双击节点连线 · 点击边配置 · 按 Delete 删除边</div>
-              <SupervisionGraphEditor
-                ref="wizardRef"
-                :agents="getSelectedAgents()"
-                :initial-roles="wizardData.agent_roles"
-                :initial-edges="wizardData.supervision_edges"
-                :container-height="420"
-                @change="onSupervisionChange"
-              />
+              <SupervisionGraphEditor ref="wizardRef" :agents="getSelectedAgents()" :initial-roles="wizardData.agent_roles" :initial-edges="wizardData.supervision_edges" :container-height="420" @change="onSupervisionChange" />
             </template>
             <template v-else>
-              <!-- For non-review_loop modes, skip to confirmation -->
               <div class="step-title">✅ 确认 Agent 选择</div>
               <div v-if="wizardData.agent_ids.length === 0" class="empty-hint">请先选择 Agent</div>
               <div v-else class="confirm-agents-list">
-                <div
-                  v-for="agentId in wizardData.agent_ids"
-                  :key="agentId"
-                  class="confirm-agent-item"
-                >
-                  <span class="agent-dot" :style="{ background: getAgentColor(agentId) }">
-                    {{ getAgentName(agentId).charAt(0) }}
-                  </span>
+                <div v-for="agentId in wizardData.agent_ids" :key="agentId" class="confirm-agent-item">
+                  <span class="agent-dot" :style="{ background: getAgentColor(agentId) }">{{ getAgentName(agentId).charAt(0) }}</span>
                   <span class="confirm-agent-name">{{ getAgentName(agentId) }}</span>
                 </div>
               </div>
             </template>
           </div>
 
-          <!-- Step 4: Confirmation -->
+          <!-- Step 4 -->
           <div v-if="wizardStep === 4" class="wizard-step">
             <div class="step-title">📋 确认配置</div>
             <div class="confirm-summary">
@@ -1313,37 +873,11 @@ onUnmounted(() => {
               </div>
               <div class="summary-section">
                 <h4>Agent 列表</h4>
-                <div class="summary-agents">
-                  <div
-                    v-for="agentId in wizardData.agent_ids"
-                    :key="agentId"
-                    class="summary-agent"
-                  >
-                    <span class="agent-dot-sm" :style="{ background: getAgentColor(agentId) }">
-                      {{ getAgentName(agentId).charAt(0) }}
-                    </span>
-                    <div class="summary-agent-info">
-                      <span class="summary-agent-name">{{ getAgentName(agentId) }}</span>
-                      <span v-if="wizardData.execution_mode === 'review_loop'" class="summary-agent-role">
-                        {{ getRoleLabelText(wizardData.agent_roles[agentId]) }}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div v-if="wizardData.execution_mode === 'review_loop' && wizardData.supervision_edges.length > 0" class="summary-section">
-                <h4>监督关系 ({{ wizardData.supervision_edges.length }} 条)</h4>
-                <div class="summary-edges">
-                  <div
-                    v-for="edge in wizardData.supervision_edges"
-                    :key="edge.id"
-                    class="summary-edge-item"
-                  >
-                    <span class="edge-src">{{ getAgentName(edge.source) }}</span>
-                    <span class="edge-arrow-summary">→</span>
-                    <span class="edge-tgt">{{ getAgentName(edge.target) }}</span>
-                    <span class="edge-strictness">★{{ edge.strictness }}</span>
-                    <span v-if="edge.focus" class="edge-focus">{{ edge.focus }}</span>
+                <div v-for="agentId in wizardData.agent_ids" :key="agentId" class="summary-agent">
+                  <span class="agent-dot-sm" :style="{ background: getAgentColor(agentId) }">{{ getAgentName(agentId).charAt(0) }}</span>
+                  <div class="summary-agent-info">
+                    <span class="summary-agent-name">{{ getAgentName(agentId) }}</span>
+                    <span v-if="wizardData.execution_mode === 'review_loop'" class="summary-agent-role">{{ getRoleLabelText(wizardData.agent_roles[agentId]) }}</span>
                   </div>
                 </div>
               </div>
@@ -1356,26 +890,12 @@ onUnmounted(() => {
           <button v-if="wizardStep > 1" class="btn-secondary" @click="prevWizardStep">← 上一步</button>
           <div class="flex-spacer"></div>
           <button class="btn-secondary" @click="closeWizard">取消</button>
-          <button
-            v-if="wizardStep < 4"
-            class="btn-primary"
-            @click="nextWizardStep"
-            :disabled="(wizardStep === 1 && (!wizardData.title || !wizardData.task)) || (wizardStep === 2 && wizardData.agent_ids.length === 0)"
-          >
-            下一步 →
-          </button>
-          <button
-            v-if="wizardStep === 4"
-            class="btn-primary"
-            @click="createRoomFromWizard"
-            :disabled="creating || wizardData.agent_ids.length === 0"
-          >
-            {{ creating ? '创建中...' : '✅ 确认创建' }}
-          </button>
+          <button v-if="wizardStep < 4" class="btn-primary" @click="nextWizardStep" :disabled="(wizardStep === 1 && (!wizardData.title || !wizardData.task)) || (wizardStep === 2 && wizardData.agent_ids.length === 0)">下一步 →</button>
+          <button v-if="wizardStep === 4" class="btn-primary" @click="createRoomFromWizard" :disabled="creating || wizardData.agent_ids.length === 0">{{ creating ? '创建中...' : '✅ 确认创建' }}</button>
         </div>
       </div>
     </div>
-
+  </div>
 </template>
 
 <style scoped>
@@ -1384,338 +904,25 @@ onUnmounted(() => {
 .chat-rooms { height: 100% !important; }
 .rooms-layout { display: flex; gap: 1rem; height: 100%; flex: 1; min-height: 0; }
 
-/* ===== Left Sidebar ===== */
-.rooms-sidebar { width: 22%; min-width: 240px; max-width: 320px; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
+/* Sidebar wrapper */
+.rooms-sidebar { width: 22%; min-width: 240px; max-width: 320px; }
 
-/* Tab bar */
-.sidebar-tabs { display: flex; border-bottom: 1px solid var(--border-light); flex-shrink: 0; background: var(--bg-secondary); }
-.tab-btn { flex: 1; min-width: 0; padding: 0.6rem 0.4rem; background: none; border: none; border-bottom: 2px solid transparent; font-size: 0.72rem; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.tab-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
-.tab-btn.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); background: var(--accent-primary-light); }
-.tab-room-btn { flex: 1 1 auto; min-width: 0; max-width: 100px; }
-
-/* Tab content */
-.sidebar-tab-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
-
-/* Shared section styles */
-.sidebar-section { display: flex; flex-direction: column; overflow: hidden; border-bottom: 1px solid var(--border-light); }
-.sidebar-section:last-child { border-bottom: none; }
-
-/* Pool & room list scrollable */
-.pool-list, .room-list, .room-agent-list { flex: 1; overflow-y: auto; }
-.pool-list { padding: 0.3rem 0.5rem; }
-.room-agent-list { padding: 0.3rem 0.5rem; }
-
-.sidebar-header { padding: 0.75rem; border-bottom: 1px solid var(--border-light); }
-.sidebar-header-row { display: flex; justify-content: space-between; align-items: center; }
-.btn-back { background: var(--accent-primary); border: 1px solid var(--accent-primary); color: white; cursor: pointer; padding: 0.35rem; margin-right: 0.5rem; line-height: 1; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: all 0.2s; flex-shrink: 0; }
-.btn-back:hover { background: var(--accent-primary-hover); border-color: var(--accent-primary-hover); }
-.btn-back svg { width: 18px; height: 18px; }
-.sidebar-title { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.btn-new-conv { width: 100%; padding: 0.5rem; background: var(--accent-primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: all 0.2s; }
-.btn-new-conv:hover { background: var(--accent-primary-hover); }
-.btn-add-agent-sm { width: 26px; height: 26px; background: var(--accent-primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
-.btn-add-agent-sm:hover { background: var(--accent-primary-hover); }
-
-.sidebar-loading, .sidebar-empty { display: flex; align-items: center; justify-content: center; padding: 1.5rem; color: var(--text-secondary); font-size: 0.8rem; }
-
-/* Agent pool list */
-.pool-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
-.pool-item:hover, .pool-item.editing { background: var(--bg-secondary); border-color: var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
-.room-item { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: all 0.15s; }
-.room-item:hover { background: var(--bg-hover); }
-.room-item.active { background: var(--accent-primary-light); border-left: 3px solid var(--accent-primary); }
-.room-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.2rem; }
-.room-item-title { font-size: 0.78rem; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
-.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-.status-idle { background: var(--text-secondary); }
-.status-running { background: #22c55e; animation: pulse 1.5s ease-in-out infinite; }
-.status-paused { background: #f59e0b; }
-.status-completed { background: #3b82f6; }
-.status-error { background: #ef4444; }
-@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
-.room-item-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.7rem; color: var(--text-secondary); }
-.meta-text { display: flex; align-items: center; gap: 3px; }
-.mini-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
-.room-item-actions { margin-left: auto; }
-.btn-icon-sm { background: transparent; border: none; cursor: pointer; padding: 2px; border-radius: 3px; color: var(--text-secondary); transition: all 0.15s; display: flex; align-items: center; }
-.btn-icon-sm:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
-
-/* Shared agent row */
-.agent-row, .pool-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
-.agent-row:hover, .agent-row.editing { background: var(--bg-secondary); border-color: var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
-.agent-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: white; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: transform 0.2s ease; }
-.agent-row:hover .agent-dot, .pool-item:hover .agent-dot { transform: scale(1.1); }
-.agent-info { flex: 1; min-width: 0; }
-.agent-name { font-size: 0.8rem; font-weight: 600; display: block; }
-.agent-role { font-size: 0.65rem; color: var(--text-secondary); display: block; margin-top: 1px; }
-.agent-model { font-size: 0.6rem; color: var(--text-secondary); display: block; margin-top: 1px; opacity: 0.7; }
-.btn-del-agent { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 2px; opacity: 0; transition: all 0.15s; }
-.agent-row:hover .btn-del-agent { opacity: 1; }
-.btn-del-agent:hover { color: #ef4444; }
-.no-agents { text-align: center; padding: 0.8rem 0; color: var(--text-secondary); font-size: 0.75rem; }
-.no-agents p { margin: 0; }
-
-/* Room agent list */
-
-/* Sidebar inline form */
-.btn-close-xs { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--text-secondary); padding: 0; line-height: 1; transition: color 0.15s; }
-.btn-close-xs:hover { color: var(--text-primary); }
-.form-row { margin-bottom: 0.5rem; display: flex; gap: 0.4rem; }
-.fi { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.8rem; transition: all 0.2s ease; }
-.fi:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); }
-.fi-color { width: 32px !important; height: 32px; padding: 2px !important; border-radius: 6px; cursor: pointer; flex-shrink: 0; }
-textarea.fi { resize: vertical; min-height: 50px; }
-
-/* Sidebar room info */
-.sidebar-room-info { border-top: 1px solid var(--border-light); padding: 0.5rem 0.6rem; flex-shrink: 0; }
-.info-item { margin-bottom: 0.2rem; }
-.info-label { font-size: 0.6rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
-.info-value { font-size: 0.75rem; color: var(--text-primary); margin: 0.1rem 0 0; line-height: 1.4; }
-
-/* ===== Right Content ===== */
+/* Content wrapper */
 .rooms-content { flex: 1; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
+
+/* Empty state */
 .empty-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); }
-.empty-content .empty-icon { opacity: 0.4; margin-bottom: 0.75rem; }
+.empty-icon { opacity: 0.4; margin-bottom: 0.75rem; }
 .empty-content p { font-size: 0.9rem; }
 
+/* Room detail */
 .room-detail { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
-.room-toolbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border-light); flex-shrink: 0; }
-.toolbar-info { flex: 1; min-width: 0; }
-.toolbar-info h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.toolbar-badges { display: flex; gap: 0.5rem; align-items: center; margin-top: 2px; }
-.status-badge { font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 8px; font-weight: 600; }
-.round-badge { font-size: 0.65rem; color: var(--text-secondary); }
-
-.mode-badge { font-size: 0.6rem; padding: 0.1rem 0.4rem; border-radius: 8px; font-weight: 600; }
-.mode-badge.parallel { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
-.mode-badge.sequential { background: rgba(107, 114, 128, 0.1); color: #6b7280; }
-.mode-badge.review-loop { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
-
-.mode-selector { margin-left: auto; }
-.mode-select { padding: 0.25rem 0.5rem; font-size: 0.75rem; border: 1px solid var(--border-light); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); cursor: pointer; }
-.mode-select:disabled { opacity: 0.7; cursor: not-allowed; background: var(--bg-secondary); }
-
-.toolbar-actions { display: flex; gap: 0.4rem; align-items: center; }
-.btn-ctrl { display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.75rem; border: none; border-radius: 6px; font-size: 0.8rem; cursor: pointer; font-weight: 500; }
-.btn-start { background: #22c55e; color: white; }
-.btn-start:hover { background: #16a34a; }
-.btn-stop { background: #ef4444; color: white; }
-.btn-stop:hover { background: #dc2626; }
-.btn-reset { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-light); }
-.btn-reset:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
 
+/* Error bar */
 .error-bar { padding: 0.5rem 1rem; background: rgba(239,68,68,0.1); color: #ef4444; font-size: 0.8rem; display: flex; justify-content: space-between; align-items: center; }
 .error-bar button { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 1.2rem; }
 
-.chat-messages { flex: 1; overflow-y: auto; padding: 0.75rem; }
-.chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.85rem; }
-.loading-messages { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; color: var(--text-secondary); font-size: 0.85rem; }
-.spinner-small { width: 24px; height: 24px; border: 3px solid var(--border-light); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 0.5rem; }
-.spinner-sm { width: 16px; height: 16px; border: 2px solid var(--border-light); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
-@keyframes spin { to { transform: rotate(360deg); } }
-.streaming-hint { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; color: var(--text-secondary); font-size: 0.8rem; }
-
-/* Parallel status indicator */
-.parallel-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 10px;
-  background: rgba(59, 130, 246, 0.1);
-  border-radius: 8px;
-  border: 1px solid rgba(59, 130, 246, 0.2);
-}
-.agent-dots {
-  display: flex;
-  gap: 4px;
-}
-.status-dot-small {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  transition: all 0.3s ease;
-}
-.status-dot-small.streaming {
-  animation: pulse 1.5s ease-in-out infinite;
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
-}
-.status-dot-small.completed {
-  opacity: 1;
-}
-.status-dot-small.error {
-  opacity: 0.6;
-}
-.status-dot-small.pending {
-  opacity: 0.4;
-}
-.progress-text {
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: #3b82f6;
-  white-space: nowrap;
-}
-
-/* Round group styling */
-.round-group { display: flex; flex-direction: column; gap: 0.5rem; }
-
-.round-header { 
-  display: flex; 
-  align-items: center; 
-  gap: 0.5rem; 
-  padding: 0.5rem 0.75rem; 
-  background: var(--bg-secondary); 
-  border-radius: 8px; 
-  margin-bottom: 0.25rem;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  font-weight: 600;
-}
-.round-header-icon { font-size: 0.85rem; }
-.round-header-text { opacity: 0.8; }
-
-.round-divider { 
-  display: flex; 
-  align-items: center; 
-  gap: 0.75rem; 
-  margin: 1.25rem 0; 
-  padding: 0 0.5rem;
-}
-.round-divider-line { 
-  flex: 1; 
-  height: 1px; 
-  background: linear-gradient(90deg, transparent, var(--border-light), transparent); 
-}
-.round-divider-label { 
-  font-size: 0.7rem; 
-  color: var(--text-tertiary); 
-  background: var(--bg-secondary); 
-  padding: 0.2rem 0.6rem; 
-  border-radius: 10px; 
-  border: 1px solid var(--border-light);
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-/* Parallel history messages */
-.parallel-history { padding: 0.5rem 0; }
-.parallel-round { margin-bottom: 1rem; }
-.parallel-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 12px;
-  padding: 0.5rem 0;
-}
-.parallel-card {
-  background: var(--bg-primary);
-  border: 2px solid var(--border-light);
-  border-radius: 12px;
-  overflow: hidden;
-  transition: all 0.2s ease;
-}
-.parallel-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-.parallel-card .card-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-light);
-}
-.parallel-card .agent-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-weight: 600;
-  font-size: 13px;
-}
-.parallel-card .agent-name {
-  font-weight: 600;
-  font-size: 0.85rem;
-}
-.parallel-card .card-body {
-  padding: 12px;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-/* Streaming message animation */
-.streaming-message {
-  opacity: 0.85;
-  animation: streamingPulse 2s ease-in-out infinite;
-}
-
-@keyframes streamingPulse {
-  0%, 100% { opacity: 0.85; }
-  50% { opacity: 0.7; }
-}
-
-.streaming-message :deep(.avatar) {
-  animation: avatarPulse 1.5s ease-in-out infinite;
-}
-
-@keyframes avatarPulse {
-  0%, 100% { transform: scale(1); }
-  50% { transform: scale(1.05); }
-}
-
-/* ===== Buttons ===== */
-.btn-xs { padding: 0.2rem 0.5rem; font-size: 0.7rem; border-radius: 4px; border: none; cursor: pointer; }
-.btn-xs.btn-primary { background: var(--accent-primary); color: white; }
-.btn-xs.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
-.btn-xs.btn-secondary { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-light); }
-.btn-xs.btn-danger { background: var(--danger-bg, rgba(239,68,68,0.1)); color: #ef4444; }
-.btn-primary { padding: 0.5rem 1rem; background: var(--accent-primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
-.btn-primary:hover { background: var(--accent-primary-hover); }
-.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
-.btn-secondary { padding: 0.5rem 1rem; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-light); border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
-.btn-danger { padding: 0.5rem 1rem; background: var(--danger-bg, rgba(239,68,68,0.1)); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
-.btn-danger:hover { background: rgba(239,68,68,0.2); }
-
-/* ===== Modal ===== */
-.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
-.modal { background: var(--bg-primary); border-radius: 16px; width: 480px; max-width: 95vw; max-height: 85vh; overflow-y: auto; }
-.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-light); }
-.modal-head h3 { margin: 0; font-size: 1rem; }
-.btn-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--text-secondary); padding: 0; line-height: 1; }
-.modal-body { padding: 1.25rem; }
-.modal-foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border-light); }
-
-.fg { margin-bottom: 1.25rem; }
-.fg label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.5px; }
-.fg input, .fg textarea, .fg select { width: 100%; padding: 0.6rem 0.875rem; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.875rem; box-sizing: border-box; transition: all 0.2s ease; }
-.fg input:focus, .fg textarea:focus, .fg select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
-.fg textarea { resize: vertical; min-height: 80px; }
-.fg-row { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; }
-.fg-color { width: 70px; flex-shrink: 0; }
-.fg-color label { margin-bottom: 0.4rem; display: block; }
-.color-picker-wrap { position: relative; display: flex; align-items: center; justify-content: center; height: 42px; padding: 4px 10px; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-secondary); transition: all 0.2s ease; }
-.color-picker-wrap:hover { border-color: var(--accent-primary); }
-.color-input { width: 32px !important; height: 32px !important; padding: 0 !important; border: none !important; border-radius: 6px; cursor: pointer; background: none; flex-shrink: 0; }
-
-/* Agent selection in create room modal */
-.agents-select { margin-top: 0.5rem; }
-.agents-select-label { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 0.5rem; }
-.no-agents-hint { color: var(--text-secondary); font-size: 0.8rem; padding: 0.5rem 0; }
-.agents-checkboxes { display: flex; flex-direction: column; gap: 0.4rem; max-height: 200px; overflow-y: auto; padding: 0.25rem; }
-.agent-checkbox { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
-.agent-checkbox:hover { background: var(--bg-secondary); border-color: var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
-.agent-checkbox.checked { background: var(--accent-primary-light); border-color: var(--accent-primary); }
-.agent-checkbox input { display: none; }
-.agent-checkbox-name { font-size: 0.85rem; font-weight: 600; }
-.agent-checkbox-model { font-size: 0.7rem; color: var(--text-secondary); margin-left: auto; }
-
-/* Agent pick row in add-to-room modal */
-.agent-pick-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
-.agent-pick-row:hover { background: var(--bg-secondary); border-color: var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
-
-/* ===== Wizard Styles ===== */
+/* Wizard styles */
 .wizard-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 2000; }
 .wizard-container { background: var(--bg-primary); border-radius: 16px; width: 640px; max-width: 95vw; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
 .wizard-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-light); }
@@ -1738,18 +945,9 @@ textarea.fi { resize: vertical; min-height: 50px; }
 .template-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 0.5rem; }
 .template-card { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.75rem; border: 2px solid var(--border-light); border-radius: 10px; cursor: pointer; transition: all 0.2s; text-align: center; }
 .template-card:hover { border-color: var(--accent-primary); background: var(--accent-primary-light); }
-.template-card.selected { border-color: var(--accent-primary); background: var(--accent-primary-light); }
 .template-icon { font-size: 1.5rem; }
 .template-name { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); }
 
-.mode-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
-.mode-card { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1rem; border: 2px solid var(--border-light); border-radius: 10px; cursor: pointer; transition: all 0.2s; text-align: center; }
-.mode-card:hover { border-color: var(--accent-primary); }
-.mode-card.selected { border-color: var(--accent-primary); background: var(--accent-primary-light); }
-.mode-icon { font-size: 1.5rem; }
-.mode-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
-.mode-desc { font-size: 0.7rem; color: var(--text-secondary); }
-
 .agent-selection { display: flex; flex-direction: column; gap: 0.5rem; max-height: 300px; overflow-y: auto; }
 .agent-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 2px solid var(--border-light); border-radius: 10px; cursor: pointer; transition: all 0.2s; }
 .agent-option:hover { border-color: var(--accent-primary); background: var(--bg-secondary); }
@@ -1757,20 +955,56 @@ textarea.fi { resize: vertical; min-height: 50px; }
 .agent-option input[type="checkbox"] { display: none; }
 .selected-info { margin-top: 1rem; padding: 0.75rem; background: var(--bg-secondary); border-radius: 8px; font-size: 0.85rem; color: var(--text-secondary); text-align: center; }
 
+.supervision-hint { padding: 0.75rem; background: var(--bg-secondary); border-radius: 8px; margin-bottom: 1rem; }
+.supervision-hint p { margin: 0 0 0.5rem; }
+.supervision-hint ul { margin: 0; padding-left: 1.25rem; font-size: 0.85rem; }
+.supervision-hint li { margin-bottom: 0.25rem; }
+
+.role-assignment-section { margin-bottom: 1rem; }
+.sub-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; }
+.role-assignment-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-light); }
+.role-agent-badge { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem; font-weight: 700; }
+.role-agent-name { flex: 1; font-size: 0.85rem; }
+.role-select { padding: 0.35rem 0.5rem; border: 1px solid var(--border-light); border-radius: 6px; background: var(--bg-primary); font-size: 0.8rem; }
+
 .confirm-summary { display: flex; flex-direction: column; gap: 1.25rem; }
 .summary-section h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light); }
 .summary-item { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.4rem; }
 .summary-item strong { color: var(--text-primary); }
+.summary-task { padding: 0.75rem; background: var(--bg-secondary); border-radius: 8px; font-size: 0.85rem; color: var(--text-secondary); white-space: pre-wrap; }
 .summary-agents { display: flex; flex-direction: column; gap: 0.5rem; }
 .summary-agent { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: var(--bg-secondary); border-radius: 8px; font-size: 0.85rem; }
-.agent-order { width: 20px; height: 20px; background: var(--accent-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; }
 .agent-dot-sm { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem; font-weight: 600; }
-.summary-task { padding: 0.75rem; background: var(--bg-secondary); border-radius: 8px; font-size: 0.85rem; color: var(--text-secondary); white-space: pre-wrap; max-height: 150px; overflow-y: auto; }
+.summary-agent-name { font-weight: 600; }
+.summary-agent-role { font-size: 0.75rem; color: var(--text-secondary); margin-left: 0.5rem; }
+
+.confirm-agents-list { display: flex; flex-direction: column; gap: 0.5rem; }
+.confirm-agent-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: var(--bg-secondary); border-radius: 8px; }
+.confirm-agent-name { font-weight: 600; }
 
 .wizard-footer { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-light); }
 .flex-spacer { flex: 1; }
 .empty-hint { text-align: center; padding: 2rem; color: var(--text-secondary); }
-.empty-hint p { margin: 0 0 1rem; }
-.btn-link { background: none; border: none; color: var(--accent-primary); cursor: pointer; text-decoration: underline; font-size: 0.85rem; }
-.btn-link:hover { color: var(--accent-primary-hover); }
+
+/* Form styles */
+.fg { margin-bottom: 1.25rem; }
+.fg label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.5px; }
+.fg input, .fg textarea, .fg select { width: 100%; padding: 0.6rem 0.875rem; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.875rem; box-sizing: border-box; transition: all 0.2s ease; }
+.fg input:focus, .fg textarea:focus, .fg select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
+.fg textarea { resize: vertical; min-height: 80px; }
+.fg-row { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; }
+
+/* Buttons */
+.btn-primary { padding: 0.5rem 1rem; background: var(--accent-primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
+.btn-primary:hover { background: var(--accent-primary-hover); }
+.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-secondary { padding: 0.5rem 1rem; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-light); border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
+.btn-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--text-secondary); padding: 0; line-height: 1; }
+
+/* Agent dots */
+.agent-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: white; flex-shrink: 0; }
+.agent-option-info { flex: 1; min-width: 0; }
+.agent-option-name { font-size: 0.85rem; font-weight: 600; display: block; }
+.agent-option-role { font-size: 0.7rem; color: var(--text-secondary); }
+.agent-option-model { font-size: 0.7rem; color: var(--text-secondary); }
 </style>