diff --git a/dashboard/src/components/AppHeader.vue b/dashboard/src/components/AppHeader.vue
index 590ddea..b61690e 100644
--- a/dashboard/src/components/AppHeader.vue
+++ b/dashboard/src/components/AppHeader.vue
@@ -40,10 +40,6 @@ const navItems = [
     path: '/tools', 
     icon: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>`
   },
-  { 
-    path: '/agents', 
-    icon: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"></path><path d="M8.5 8.5v.01"></path><path d="M16 15.5v.01"></path><path d="M12 12v.01"></path><path d="M11 17v.01"></path><path d="M7 14v.01"></path></svg>`
-  },
   { 
     path: '/settings', 
     icon: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>`
diff --git a/dashboard/src/components/InlineForm.vue b/dashboard/src/components/InlineForm.vue
new file mode 100644
index 0000000..91d1662
--- /dev/null
+++ b/dashboard/src/components/InlineForm.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="inline-form">
+    <div class="form-header">
+      <h3>{{ title }}</h3>
+      <button class="btn-close" @click="$emit('close')">×</button>
+    </div>
+    <form @submit.prevent="$emit('submit')">
+      <slot></slot>
+      <div class="form-actions">
+        <button type="button" class="btn-secondary" @click="$emit('close')">取消</button>
+        <button type="submit" class="btn-primary">{{ submitText }}</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  submitText: { type: String, default: '保存' },
+})
+
+defineEmits(['submit', 'close'])
+</script>
+
+<style scoped>
+.inline-form {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--bg-primary);
+  padding: 16px;
+  overflow-y: auto;
+  z-index: 10;
+}
+
+.form-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.form-header h3 {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.btn-close {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1.25rem;
+  color: var(--text-tertiary);
+  border-radius: 6px;
+  transition: all 0.15s;
+}
+
+.btn-close:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.4rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  font-size: 0.8rem;
+}
+
+.form-group input,
+.form-group textarea,
+.form-group select {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--border-input);
+  border-radius: 8px;
+  background: var(--bg-input);
+  box-sizing: border-box;
+  color: var(--text-primary);
+  font-size: 0.85rem;
+}
+
+.form-group textarea {
+  resize: vertical;
+  min-height: 60px;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.form-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
+}
+
+.btn-secondary,
+.btn-primary {
+  flex: 1;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-secondary {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-light);
+}
+
+.btn-secondary:hover {
+  background: var(--bg-hover);
+}
+
+.btn-primary {
+  background: var(--accent-primary);
+  color: white;
+  border: none;
+}
+
+.btn-primary:hover {
+  background: var(--accent-primary-hover);
+}
+</style>
diff --git a/dashboard/src/components/ListItem.vue b/dashboard/src/components/ListItem.vue
new file mode 100644
index 0000000..9b24061
--- /dev/null
+++ b/dashboard/src/components/ListItem.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="list-item" :class="{ active, 'in-room': inRoom }" @click="$emit('click')">
+    <!-- 左侧图标/头像 -->
+    <div v-if="avatar" class="item-avatar" :style="avatarStyle">
+      {{ avatar }}
+    </div>
+    <div v-else-if="icon" class="item-icon">
+      {{ icon }}
+    </div>
+
+    <!-- 信息 -->
+    <div class="item-info">
+      <span class="item-name">{{ title }}</span>
+      <span v-if="subtitle" class="item-subtitle">{{ subtitle }}</span>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="item-actions">
+      <slot name="actions">
+        <button v-if="onEdit" @click.stop="$emit('edit')" class="btn-icon" title="编辑">
+          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+          </svg>
+        </button>
+        <button v-if="onDelete" @click.stop="$emit('delete')" class="btn-icon btn-delete-icon" title="删除">
+          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <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>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  title: { type: String, required: true },
+  subtitle: { type: String, default: '' },
+  icon: { type: String, default: '' },
+  avatar: { type: String, default: '' },
+  avatarColor: { type: String, default: '#667eea' },
+  active: { type: Boolean, default: false },
+  inRoom: { type: Boolean, default: false },
+  onEdit: { type: Boolean, default: true },
+  onDelete: { type: Boolean, default: true },
+})
+
+defineEmits(['click', 'edit', 'delete'])
+
+const avatarStyle = computed(() => ({
+  background: `linear-gradient(135deg, ${props.avatarColor}, #764ba2)`
+}))
+</script>
+
+<style scoped>
+.list-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 1rem;
+  border-bottom: 1px solid var(--border-light);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.list-item:hover {
+  background: var(--bg-hover);
+}
+
+.list-item.active {
+  background: var(--accent-primary-light);
+  border-left: 3px solid var(--accent-primary);
+}
+
+.list-item.in-room {
+  background: var(--accent-primary-light);
+}
+
+.item-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.item-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+  flex-shrink: 0;
+}
+
+.item-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.item-name {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-subtitle {
+  font-size: 0.65rem;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-actions {
+  display: flex;
+  gap: 0.25rem;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.list-item:hover .item-actions {
+  opacity: 1;
+}
+
+.btn-icon {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  transition: all 0.15s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-icon:hover {
+  background: var(--bg-hover);
+  color: var(--accent-primary);
+}
+
+.btn-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.btn-delete-icon {
+  color: var(--danger-color);
+}
+
+.btn-delete-icon:hover {
+  background: var(--danger-bg);
+}
+</style>
diff --git a/dashboard/src/components/RoomMessageBubble.vue b/dashboard/src/components/RoomMessageBubble.vue
new file mode 100644
index 0000000..8a9c924
--- /dev/null
+++ b/dashboard/src/components/RoomMessageBubble.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="message-bubble" :class="message.sender_type">
+    <div class="message-avatar">
+      {{ message.sender_name?.charAt(0).toUpperCase() }}
+    </div>
+    <div class="message-container">
+      <div class="message-body">
+        <ProcessBlock
+          v-if="message.process_steps && message.process_steps.length > 0"
+          :process-steps="message.process_steps"
+        />
+        <div v-else class="md-content message-text" v-html="renderedContent"></div>
+      </div>
+      <div class="message-footer">
+        <span class="sender-name">{{ message.sender_name }}</span>
+        <span class="message-time">{{ formatTime(message.created_at) }}</span>
+        <button class="ghost-btn accent" @click="copyContent" title="复制">
+          <span v-html="copyIcon"></span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { renderMarkdown } from '@/utils/markdown.js'
+import ProcessBlock from './ProcessBlock.vue'
+
+const props = defineProps({
+  message: { type: Object, required: true },
+})
+
+const renderedContent = computed(() => {
+  const text = props.message.content || props.message.text || ''
+  if (!text) return ''
+  return renderMarkdown(text)
+})
+
+function formatTime(time) {
+  if (!time) return ''
+  return new Date(time).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+}
+
+function copyContent() {
+  let text = props.message.content || props.message.text || ''
+  if (props.message.process_steps && props.message.process_steps.length > 0) {
+    const parts = props.message.process_steps
+      .filter(s => s && s.type === 'text')
+      .map(s => s.content)
+    if (parts.length > 0) text = parts.join('\n\n')
+  }
+  navigator.clipboard.writeText(text).catch(() => {})
+}
+
+const copyIcon = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`
+</script>
+
+<style scoped>
+.message-bubble {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.message-bubble.user {
+  flex-direction: row-reverse;
+}
+
+.message-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.9rem;
+  flex-shrink: 0;
+}
+
+.message-bubble.user .message-avatar {
+  background: linear-gradient(135deg, #11998e, #38ef7d);
+}
+
+.message-container {
+  max-width: 70%;
+}
+
+.message-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.message-text {
+  padding: 0.75rem 1rem;
+  background: var(--bg-primary);
+  border-radius: 12px;
+  border: 1px solid var(--border-light);
+  line-height: 1.6;
+}
+
+.message-bubble.user .message-text {
+  background: var(--accent-primary);
+  color: white;
+  border: none;
+}
+
+.message-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--text-tertiary);
+}
+
+.message-bubble.user .message-footer {
+  flex-direction: row-reverse;
+}
+
+.sender-name {
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.ghost-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  color: var(--text-tertiary);
+  transition: all 0.15s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ghost-btn:hover {
+  background: var(--bg-hover);
+  color: var(--accent-primary);
+}
+</style>
diff --git a/dashboard/src/views/RoomView.vue b/dashboard/src/views/RoomView.vue
index 97eb083..194dafb 100644
--- a/dashboard/src/views/RoomView.vue
+++ b/dashboard/src/views/RoomView.vue
@@ -1,29 +1,113 @@
 <template>
   <div class="room-view">
-    <!-- 左侧：房间列表 -->
-    <aside class="sidebar">
-      <div class="sidebar-header">
-        <h2>聊天室</h2>
-        <button class="btn-icon" @click="showCreateRoom = true" title="创建房间">+</button>
+    <!-- 左侧：侧栏 -->
+    <aside class="room-sidebar">
+      <!-- 标签切换 -->
+      <div class="sidebar-tabs">
+        <button :class="{ active: sidebarTab === 'rooms' }" @click="sidebarTab = 'rooms'">
+          聊天室
+        </button>
+        <button :class="{ active: sidebarTab === 'agents' }" @click="sidebarTab = 'agents'">
+          Agent
+        </button>
       </div>
 
-      <div class="room-list">
-        <div v-for="room in rooms" :key="room.id"
-          class="room-item" :class="{ active: currentRoom?.id === room.id }"
-          @click="joinRoom(room)">
-          <div class="room-icon">💬</div>
-          <div class="room-info">
-            <span class="room-name">{{ room.name }}</span>
-            <span class="room-desc">{{ room.description || '无描述' }}</span>
+      <!-- 聊天室列表 -->
+      <template v-if="sidebarTab === 'rooms' && !showRoomForm">
+        <div class="sidebar-header">
+          <button @click="openRoomForm(null)" class="btn-new-room">+ 新建房间</button>
+        </div>
+        <div class="list-container">
+          <ListItem
+            v-for="room in rooms" :key="room.id"
+            :title="room.name"
+            :subtitle="room.description || '无描述'"
+            icon="💬"
+            :active="currentRoom?.id === room.id"
+            @click="joinRoom(room)"
+            @edit="openRoomForm(room)"
+            @delete="handleDeleteRoom(room.id)"
+          />
+          <div v-if="!rooms.length" class="empty-hint">暂无房间</div>
+        </div>
+      </template>
+
+      <!-- 房间表单 -->
+      <InlineForm v-if="sidebarTab === 'rooms' && showRoomForm"
+        :title="editingRoom ? '编辑房间' : '新建房间'"
+        @submit="saveRoom"
+        @close="closeRoomForm">
+        <div class="form-group">
+          <label>房间名称 *</label>
+          <input v-model="roomForm.name" type="text" required />
+        </div>
+        <div class="form-group">
+          <label>描述</label>
+          <input v-model="roomForm.description" type="text" />
+        </div>
+      </InlineForm>
+
+      <!-- Agent 列表 -->
+      <template v-if="sidebarTab === 'agents' && !showAgentForm">
+        <div class="sidebar-header">
+          <button @click="openCreateAgent" class="btn-new-room">+ 新建 Agent</button>
+        </div>
+        <div class="list-container">
+          <ListItem
+            v-for="agent in allAgents" :key="agent.id"
+            :title="agent.name"
+            :subtitle="`${agent.auto_response ? '自动' : '@触发'} · ${agent.role}`"
+            :avatar="agent.name?.charAt(0).toUpperCase()"
+            :in-room="isAgentInRoom(agent.id)"
+            @edit="editAgent(agent)"
+            @delete="deleteAgent(agent.id)"
+          />
+          <div v-if="!allAgents.length" class="empty-hint">暂无 Agent</div>
+        </div>
+      </template>
+
+      <!-- Agent 表单 -->
+      <InlineForm v-if="sidebarTab === 'agents' && showAgentForm"
+        :title="editingAgent ? '编辑 Agent' : '创建 Agent'"
+        @submit="saveAgent"
+        @close="closeAgentForm">
+        <div class="form-group">
+          <label>名称 *</label>
+          <input v-model="agentForm.name" type="text" required />
+        </div>
+        <div class="form-group">
+          <label>角色 *</label>
+          <input v-model="agentForm.role" type="text" required />
+        </div>
+        <div class="form-group">
+          <label>系统提示词 *</label>
+          <textarea v-model="agentForm.system_prompt" rows="3" required></textarea>
+        </div>
+        <div class="form-group">
+          <label>Provider</label>
+          <select v-model="agentForm.provider_id">
+            <option :value="null">默认</option>
+            <option v-for="p in providers" :key="p.id" :value="p.id">{{ p.name }}</option>
+          </select>
+        </div>
+        <div class="form-row">
+          <div class="form-group">
+            <label>模型</label>
+            <input v-model="agentForm.model" type="text" />
+          </div>
+          <div class="form-group">
+            <label>优先级</label>
+            <input v-model.number="agentForm.priority" type="number" min="1" max="10" />
           </div>
         </div>
-      </div>
-
-      <div class="sidebar-footer">
-        <router-link to="/agents" class="nav-link">
-          <span>⚙️</span> 管理 Agent
-        </router-link>
-      </div>
+        <div class="form-group">
+          <label>响应方式</label>
+          <select v-model="agentForm.auto_response">
+            <option :value="true">自动</option>
+            <option :value="false">@触发</option>
+          </select>
+        </div>
+      </InlineForm>
     </aside>
 
     <!-- 主聊天区 -->
@@ -36,7 +120,7 @@
             <span class="agents-count">{{ roomAgents.length }} 个 Agent</span>
           </div>
           <div class="header-actions">
-            <button class="btn-small" @click="showManageAgents = true">管理成员</button>
+            <button v-if="currentRoom" class="btn-small" @click="openAddMembers">添加成员</button>
           </div>
         </header>
 
@@ -52,19 +136,10 @@
 
         <!-- 消息列表 -->
         <div class="messages-container" ref="messagesContainer">
-          <div v-for="msg in messages" :key="msg.id" class="message-wrapper"
-            :class="msg.sender_type">
-            <div class="message-avatar">
-              {{ msg.sender_name?.charAt(0).toUpperCase() }}
-            </div>
-            <div class="message-content">
-              <div class="message-meta">
-                <span class="sender-name">{{ msg.sender_name }}</span>
-                <span class="message-time">{{ formatTime(msg.created_at) }}</span>
-              </div>
-              <div class="message-text" v-html="renderMarkdown(msg.content)"></div>
-            </div>
-          </div>
+          <RoomMessageBubble
+            v-for="msg in messages" :key="msg.id"
+            :message="msg"
+          />
 
           <!-- 正在输入的流式消息 -->
           <div v-for="(stream, agentId) in streamingMessages" :key="'stream-' + agentId"
@@ -128,35 +203,93 @@
       </div>
     </div>
 
-    <!-- 管理 Agent Modal -->
-    <div v-if="showManageAgents" class="modal-overlay" @click.self="showManageAgents = false">
-      <div class="modal">
-        <h2>管理聊天室成员</h2>
-        <div class="agents-management">
-          <div class="section">
-            <h3>当前成员</h3>
-            <div class="agent-tags">
-              <span v-for="agent in roomAgents" :key="agent.id" class="agent-tag">
-                {{ agent.name }}
-                <button @click="removeAgentFromRoom(agent.id)">×</button>
-              </span>
-              <div v-if="!roomAgents.length" class="empty-hint">暂无成员</div>
-            </div>
-          </div>
-          <div class="section">
-            <h3>添加成员</h3>
-            <div class="agent-list-select">
-              <div v-for="agent in availableAgents" :key="agent.id"
-                class="agent-option" @click="addAgentToRoom(agent.id)">
-                <span class="agent-avatar-sm">{{ agent.name?.charAt(0) }}</span>
-                <span>{{ agent.name }}</span>
-                <span class="role">{{ agent.role }}</span>
+    <!-- 管理房间 Modal -->
+    <div v-if="showRoomManage" class="modal-overlay" @click.self="showRoomManage = false">
+      <div class="modal modal-wide">
+        <div class="modal-tabs">
+          <button :class="{ active: roomTab === 'list' }" @click="roomTab = 'list'">
+            房间列表
+          </button>
+          <button :class="{ active: roomTab === 'edit' }" @click="openRoomForm">
+            {{ editingRoom ? '编辑房间' : '创建房间' }}
+          </button>
+        </div>
+
+        <!-- 房间列表 -->
+        <div v-if="roomTab === 'list'" class="rooms-management">
+          <div class="rooms-grid">
+            <div v-for="room in rooms" :key="room.id" 
+              class="room-card" :class="{ active: currentRoom?.id === room.id }">
+              <div class="room-card-header">
+                <div class="room-icon">💬</div>
+                <div class="room-card-info">
+                  <span class="room-card-name">{{ room.name }}</span>
+                  <span class="room-card-desc">{{ room.description || '无描述' }}</span>
+                </div>
+              </div>
+              <div class="room-card-actions">
+                <button class="btn-tiny" @click="joinRoom(room); showRoomManage = false">进入</button>
+                <button class="btn-tiny" @click="editRoom(room)">编辑</button>
+                <button class="btn-tiny btn-danger" @click="deleteRoom(room.id)">删除</button>
               </div>
             </div>
+            <div v-if="!rooms.length" class="empty-hint">暂无房间</div>
+          </div>
+        </div>
+
+        <!-- 房间表单 -->
+        <div v-if="roomTab === 'edit'" class="room-form-section">
+          <h3>{{ editingRoom ? '编辑房间' : '创建房间' }}</h3>
+          <form @submit.prevent="saveRoom">
+            <div class="form-group">
+              <label>房间名称 *</label>
+              <input v-model="roomForm.name" type="text" required />
+            </div>
+            <div class="form-group">
+              <label>描述</label>
+              <input v-model="roomForm.description" type="text" />
+            </div>
+            <div class="form-actions">
+              <button type="button" class="btn-secondary" @click="roomTab = 'list'">取消</button>
+              <button type="submit" class="btn-primary">保存</button>
+            </div>
+          </form>
+        </div>
+
+        <div class="form-actions">
+          <button class="btn-secondary" @click="showRoomManage = false">关闭</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 添加成员 Modal -->
+    <div v-if="showAddMembers" class="modal-overlay" @click.self="showAddMembers = false">
+      <div class="modal">
+        <h2>房间成员管理</h2>
+        <div class="section">
+          <h3>当前成员</h3>
+          <div class="agent-tags">
+            <span v-for="agent in roomAgents" :key="agent.id" class="agent-tag">
+              {{ agent.name }}
+              <button @click="removeAgentFromRoom(agent.id)">×</button>
+            </span>
+            <div v-if="!roomAgents.length" class="empty-hint">暂无成员</div>
+          </div>
+        </div>
+        <div class="section">
+          <h3>添加成员</h3>
+          <div class="agent-list-select">
+            <div v-for="agent in availableAgents" :key="agent.id"
+              class="agent-option" @click="addAgentToRoom(agent.id)">
+              <span class="agent-avatar-sm">{{ agent.name?.charAt(0) }}</span>
+              <span>{{ agent.name }}</span>
+              <span class="role">{{ agent.role }}</span>
+            </div>
+            <div v-if="!availableAgents.length" class="empty-hint">没有可添加的 Agent</div>
           </div>
         </div>
         <div class="form-actions">
-          <button class="btn-secondary" @click="showManageAgents = false">关闭</button>
+          <button class="btn-secondary" @click="showAddMembers = false">关闭</button>
         </div>
       </div>
     </div>
@@ -165,24 +298,42 @@
 
 <script setup>
 import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
-import { roomsAPI, createRoomWS, agentsAPI } from '@/api'
+import { roomsAPI, createRoomWS, agentsAPI, providersAPI } from '@/api'
 import { marked } from 'marked'
+import ListItem from '@/components/ListItem.vue'
+import InlineForm from '@/components/InlineForm.vue'
+import RoomMessageBubble from '@/components/RoomMessageBubble.vue'
 
 const rooms = ref([])
 const currentRoom = ref(null)
 const messages = ref([])
 const roomAgents = ref([])
 const allAgents = ref([])
+const providers = ref([])
 const typingAgents = ref(new Set())
 const streamingMessages = ref({})
+const sidebarTab = ref('rooms')
+const showRoomForm = ref(false)
+const showAgentForm = ref(false)
+const editingRoom = ref(null)
+const editingAgent = ref(null)
 
-const showCreateRoom = ref(false)
-const showManageAgents = ref(false)
+const showAddMembers = ref(false)
 const inputMessage = ref('')
 const messagesContainer = ref(null)
 let ws = null
 
-const newRoom = reactive({ name: '', description: '' })
+const roomForm = reactive({ name: '', description: '' })
+
+const agentForm = reactive({
+  name: '',
+  role: '',
+  system_prompt: '',
+  provider_id: null,
+  model: '',
+  priority: 5,
+  auto_response: true
+})
 
 const availableAgents = computed(() => {
   const roomAgentIds = new Set(roomAgents.value.map(a => a.id))
@@ -224,16 +375,60 @@ async function loadAllAgents() {
   }
 }
 
-async function createRoom() {
+function isAgentInRoom(agentId) {
+  return roomAgents.value.some(a => a.id === agentId)
+}
+
+function openAddMembers() {
+  showAddMembers.value = true
+}
+
+// ============ 房间操作 ============
+function openRoomForm(room = null) {
+  editingRoom.value = room
+  Object.assign(roomForm, { name: room?.name || '', description: room?.description || '' })
+  showRoomForm.value = true
+}
+
+function closeRoomForm() {
+  showRoomForm.value = false
+  editingRoom.value = null
+  Object.assign(roomForm, { name: '', description: '' })
+}
+
+async function saveRoom() {
   try {
-    const res = await roomsAPI.create(newRoom)
-    rooms.value.push(res.room)
-    showCreateRoom.value = false
-    Object.assign(newRoom, { name: '', description: '' })
-    joinRoom(res.room)
+    if (editingRoom.value) {
+      await roomsAPI.update(editingRoom.value.id, roomForm)
+      const idx = rooms.value.findIndex(r => r.id === editingRoom.value.id)
+      if (idx !== -1) rooms.value[idx] = { ...rooms.value[idx], ...roomForm }
+      if (currentRoom.value?.id === editingRoom.value.id) {
+        currentRoom.value = { ...currentRoom.value, ...roomForm }
+      }
+    } else {
+      const res = await roomsAPI.create(roomForm)
+      rooms.value.push(res.room)
+      joinRoom(res.room)
+    }
+    closeRoomForm()
   } catch (e) {
-    console.error('Failed to create room:', e)
-    alert('创建失败')
+    console.error('Failed to save room:', e)
+    alert('保存失败')
+  }
+}
+
+async function handleDeleteRoom(roomId) {
+  if (!confirm('确定删除此聊天室？')) return
+  try {
+    await roomsAPI.delete(roomId)
+    rooms.value = rooms.value.filter(r => r.id !== roomId)
+    if (currentRoom.value?.id === roomId) {
+      currentRoom.value = null
+      messages.value = []
+    }
+  } catch (e) {
+    console.error('Failed to delete room:', e)
+    alert('删除失败')
   }
 }
 
@@ -280,14 +475,27 @@ async function joinRoom(room) {
     },
     onStream: (event, data, agentId, agentName) => {
       if (event === 'process_step') {
+        // data.step contains {id, index, type, content}
+        const step = data.step || data
         if (!streamingMessages.value[agentId]) {
           streamingMessages.value[agentId] = { agentName, content: '' }
         }
-        if (data.type === 'text') {
-          streamingMessages.value[agentId].content = data.content
+        if (step.type === 'text') {
+          streamingMessages.value[agentId].content = step.content
         }
       } else if (event === 'done') {
-        delete streamingMessages.value[agentId]
+        // Save streaming message to messages list before removing
+        if (streamingMessages.value[agentId]) {
+          messages.value.push({
+            id: `msg-${Date.now()}`,
+            sender_type: 'agent',
+            sender_id: agentId,
+            sender_name: agentName,
+            content: streamingMessages.value[agentId].content,
+            created_at: new Date().toISOString()
+          })
+          delete streamingMessages.value[agentId]
+        }
         typingAgents.value.delete(agentId)
       }
     },
@@ -323,6 +531,69 @@ async function removeAgentFromRoom(agentId) {
   }
 }
 
+async function loadProviders() {
+  try {
+    const res = await providersAPI.list()
+    if (res.success) {
+      providers.value = res.data?.providers || []
+    }
+  } catch (e) {
+    console.error('Failed to load providers:', e)
+  }
+}
+
+function openCreateAgent() {
+  editingAgent.value = null
+  // 默认选中用户设置的默认 Provider
+  const defaultProvider = providers.value.find(p => p.is_default)
+  Object.assign(agentForm, { name: '', role: '', system_prompt: '', provider_id: defaultProvider?.id || null, model: '', priority: 5, auto_response: true })
+  showAgentForm.value = true
+}
+
+function editAgent(agent) {
+  editingAgent.value = agent
+  Object.assign(agentForm, {
+    name: agent.name,
+    role: agent.role,
+    system_prompt: agent.system_prompt,
+    provider_id: agent.provider_id,
+    model: agent.model || '',
+    priority: agent.priority || 5,
+    auto_response: agent.auto_response
+  })
+  showAgentForm.value = true
+}
+
+async function saveAgent() {
+  try {
+    if (editingAgent.value) {
+      await agentsAPI.update(editingAgent.value.id, agentForm)
+    } else {
+      await agentsAPI.create(agentForm)
+    }
+    await loadAllAgents()
+    closeAgentForm()
+  } catch (e) {
+    console.error('Failed to save agent:', e)
+    alert('保存失败')
+  }
+}
+
+async function deleteAgent(agentId) {
+  if (!confirm('确定删除此 Agent？')) return
+  try {
+    await agentsAPI.delete(agentId)
+    await loadAllAgents()
+  } catch (e) {
+    console.error('Failed to delete agent:', e)
+  }
+}
+
+function closeAgentForm() {
+  showAgentForm.value = false
+  editingAgent.value = null
+}
+
 function scrollToBottom() {
   nextTick(() => {
     if (messagesContainer.value) {
@@ -334,6 +605,7 @@ function scrollToBottom() {
 onMounted(() => {
   loadRooms()
   loadAllAgents()
+  loadProviders()
 })
 
 onUnmounted(() => {
@@ -349,98 +621,73 @@ onUnmounted(() => {
 }
 
 /* Sidebar */
-.sidebar {
-  width: 280px;
-  background: var(--card-bg, #fff);
-  border-right: 1px solid var(--border-color);
+.room-sidebar {
+  width: 20%;
+  min-width: 200px;
+  max-width: 300px;
+  position: relative;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
+  border-radius: 12px;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.sidebar-tabs button {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  transition: all 0.15s;
+}
+
+.sidebar-tabs button.active {
+  color: var(--accent-primary);
+  background: var(--accent-primary-light);
+  border-bottom: 2px solid var(--accent-primary);
 }
 
 .sidebar-header {
-  padding: 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--border-color);
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--border-light);
 }
 
-.sidebar-header h2 {
-  margin: 0;
-  font-size: 18px;
-}
-
-.btn-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  border: none;
-  background: #667eea;
+.btn-new-room {
+  width: 100%;
+  padding: 0.5rem;
+  background: var(--accent-primary);
   color: white;
+  border: none;
+  border-radius: 6px;
   cursor: pointer;
-  font-size: 18px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  transition: all 0.2s;
 }
 
-.room-list {
+.btn-new-room:hover {
+  background: var(--accent-primary-hover);
+}
+
+.list-container {
   flex: 1;
   overflow-y: auto;
-  padding: 12px;
 }
 
-.room-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.room-item:hover {
-  background: var(--hover-bg, #f0f0f0);
-}
-
-.room-item.active {
-  background: #667eea20;
-  border-left: 3px solid #667eea;
-}
-
-.room-icon {
-  font-size: 24px;
-}
-
-.room-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.room-name {
-  font-weight: 500;
-}
-
-.room-desc {
-  font-size: 12px;
-  color: #888;
-}
-
-.sidebar-footer {
-  padding: 16px;
-  border-top: 1px solid var(--border-color);
-}
-
-.nav-link {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #666;
-  text-decoration: none;
-  padding: 8px;
-  border-radius: 6px;
-}
-
-.nav-link:hover {
-  background: var(--hover-bg);
+.empty-hint {
+  padding: 1.5rem 1rem;
+  text-align: center;
+  color: var(--text-tertiary);
+  font-size: 0.8rem;
 }
 
 /* Main */
@@ -452,9 +699,9 @@ onUnmounted(() => {
 }
 
 .chat-header {
-  padding: 16px 24px;
-  background: var(--card-bg, #fff);
-  border-bottom: 1px solid var(--border-color);
+  padding: 1rem 1.5rem;
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border-light);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -462,35 +709,35 @@ onUnmounted(() => {
 
 .chat-header h1 {
   margin: 0;
-  font-size: 20px;
+  font-size: 1.25rem;
 }
 
 .agents-count {
-  font-size: 13px;
-  color: #888;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
 }
 
 .agents-bar {
-  padding: 8px 24px;
-  background: var(--card-bg, #fff);
-  border-bottom: 1px solid var(--border-color);
+  padding: 0.5rem 1.5rem;
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border-light);
   display: flex;
-  gap: 8px;
+  gap: 0.5rem;
   flex-wrap: wrap;
 }
 
 .agent-pill {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 12px;
+  gap: 0.4rem;
+  padding: 0.25rem 0.75rem;
   background: #e5e7eb;
   border-radius: 20px;
-  font-size: 13px;
+  font-size: 0.8rem;
 }
 
 .agent-pill.typing {
-  background: #fef3c7;
+  background: var(--accent-primary-light);
 }
 
 .agent-avatar-sm {
@@ -502,7 +749,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: 0.75rem;
 }
 
 .typing-indicator {
@@ -518,13 +765,14 @@ onUnmounted(() => {
 .messages-container {
   flex: 1;
   overflow-y: auto;
-  padding: 24px;
+  padding: 1.5rem;
 }
 
+/* 流式消息（未使用组件的部分） */
 .message-wrapper {
   display: flex;
-  gap: 12px;
-  margin-bottom: 20px;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
 }
 
 .message-wrapper.user {
@@ -540,6 +788,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 0.9rem;
   flex-shrink: 0;
 }
 
@@ -553,68 +802,87 @@ onUnmounted(() => {
 
 .message-meta {
   display: flex;
-  gap: 8px;
-  margin-bottom: 4px;
-  font-size: 12px;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+  font-size: 0.75rem;
 }
 
 .message-wrapper.user .message-meta {
   flex-direction: row-reverse;
 }
 
-.sender-name {
-  font-weight: 500;
-}
-
-.message-time {
-  color: #888;
-}
-
 .message-text {
-  padding: 12px 16px;
-  background: var(--card-bg, #fff);
+  padding: 0.75rem 1rem;
+  background: var(--bg-primary);
   border-radius: 12px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-light);
   line-height: 1.6;
 }
 
 .message-wrapper.user .message-text {
-  background: #667eea;
+  background: var(--accent-primary);
   color: white;
   border: none;
 }
 
+.message-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--text-tertiary);
+}
+
+.ghost-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  color: var(--text-tertiary);
+  transition: all 0.15s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ghost-btn:hover {
+  background: var(--bg-hover);
+  color: var(--accent-primary);
+}
+
 /* Input */
 .input-area {
-  padding: 16px 24px;
-  background: var(--card-bg, #fff);
-  border-top: 1px solid var(--border-color);
+  padding: 1rem 1.5rem;
+  background: var(--bg-primary);
+  border-top: 1px solid var(--border-light);
 }
 
 .input-hint {
-  font-size: 12px;
-  color: #888;
-  margin-bottom: 8px;
+  font-size: 0.75rem;
+  color: var(--text-tertiary);
+  margin-bottom: 0.5rem;
 }
 
 .input-row {
   display: flex;
-  gap: 12px;
+  gap: 0.75rem;
 }
 
 .input-row textarea {
   flex: 1;
-  padding: 12px;
-  border: 1px solid var(--border-color);
+  padding: 0.75rem;
+  border: 1px solid var(--border-light);
   border-radius: 8px;
   resize: none;
   font-family: inherit;
-  font-size: 14px;
+  font-size: 0.9rem;
 }
 
 .btn-send {
-  padding: 12px 24px;
-  background: #667eea;
+  padding: 0.75rem 1.5rem;
+  background: var(--accent-primary);
   color: white;
   border: none;
   border-radius: 8px;
@@ -633,22 +901,22 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: #888;
+  color: var(--text-tertiary);
 }
 
 .empty-icon {
-  font-size: 64px;
-  margin-bottom: 16px;
+  font-size: 4rem;
+  margin-bottom: 1rem;
 }
 
 .btn-primary {
-  background: #667eea;
+  background: var(--accent-primary);
   color: white;
   border: none;
-  padding: 12px 24px;
+  padding: 0.75rem 1.5rem;
   border-radius: 8px;
   cursor: pointer;
-  margin-top: 16px;
+  margin-top: 1rem;
 }
 
 /* Modal */
@@ -663,9 +931,9 @@ onUnmounted(() => {
 }
 
 .modal {
-  background: var(--card-bg, #fff);
-  border-radius: 16px;
-  padding: 24px;
+  background: var(--bg-primary);
+  border-radius: 12px;
+  padding: 1.5rem;
   width: 90%;
   max-width: 500px;
   max-height: 80vh;
@@ -673,75 +941,79 @@ onUnmounted(() => {
 }
 
 .modal h2 {
-  margin: 0 0 20px;
+  margin: 0 0 1.25rem;
+  font-size: 1.1rem;
 }
 
 .form-group {
-  margin-bottom: 16px;
+  margin-bottom: 1rem;
 }
 
 .form-group label {
   display: block;
-  margin-bottom: 6px;
+  margin-bottom: 0.4rem;
   font-weight: 500;
+  font-size: 0.85rem;
 }
 
 .form-group input {
   width: 100%;
-  padding: 10px;
-  border: 1px solid var(--border-color);
+  padding: 0.65rem;
+  border: 1px solid var(--border-input);
   border-radius: 8px;
   box-sizing: border-box;
+  font-size: 0.9rem;
 }
 
 .form-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 12px;
-  margin-top: 20px;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
 }
 
 .btn-secondary {
-  background: #e5e7eb;
-  color: #333;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 8px;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-light);
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
   cursor: pointer;
+  font-size: 0.85rem;
 }
 
 /* Agent management */
 .agents-management .section {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 }
 
 .agents-management h3 {
-  margin: 0 0 12px;
-  font-size: 14px;
-  color: #888;
+  margin: 0 0 0.75rem;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
 }
 
 .agent-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 0.5rem;
 }
 
 .agent-tag {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  background: #667eea20;
+  gap: 0.4rem;
+  padding: 0.25rem 0.75rem;
+  background: var(--accent-primary-light);
   border-radius: 20px;
-  font-size: 13px;
+  font-size: 0.8rem;
 }
 
 .agent-tag button {
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 1rem;
   color: #666;
 }
 
@@ -782,4 +1054,224 @@ onUnmounted(() => {
   background: transparent;
   cursor: pointer;
 }
+
+/* Tabs */
+.modal-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 12px;
+}
+
+.modal-tabs button {
+  padding: 8px 16px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 6px;
+  color: #666;
+  font-size: 14px;
+}
+
+.modal-tabs button.active {
+  background: #667eea;
+  color: white;
+}
+
+/* Wide modal */
+.modal-wide {
+  max-width: 800px;
+}
+
+/* Section header */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.section-header h3 {
+  margin: 0;
+}
+
+/* Agent cards in grid */
+.agents-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 12px;
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.agent-card-small {
+  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--bg);
+}
+
+.agent-card-small .agent-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.agent-card-small .agent-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.agent-card-small .name {
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.agent-card-small .role-badge {
+  font-size: 11px;
+  color: #888;
+}
+
+.agent-meta-row {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.agent-actions-row {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-tiny {
+  padding: 4px 8px;
+  font-size: 12px;
+  border-radius: 4px;
+  border: 1px solid var(--border-color);
+  background: transparent;
+  cursor: pointer;
+}
+
+.btn-tiny.btn-danger {
+  color: #dc2626;
+  border-color: #dc2626;
+}
+
+.btn-small.btn-primary {
+  background: #667eea;
+  color: white;
+  border: none;
+}
+
+/* Agent form section */
+.agent-form-section {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border-color);
+}
+
+.agent-form-section h3 {
+  margin: 0 0 16px;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+textarea {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-sizing: border-box;
+  font-family: inherit;
+  resize: vertical;
+}
+
+select {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-sizing: border-box;
+  background: white;
+}
+
+/* Header actions */
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* Rooms management */
+.rooms-management {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.rooms-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.room-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--bg);
+}
+
+.room-card.active {
+  border-color: #667eea;
+  background: #667eea10;
+}
+
+.room-card-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.room-icon {
+  font-size: 24px;
+}
+
+.room-card-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.room-card-name {
+  font-weight: 500;
+}
+
+.room-card-desc {
+  font-size: 12px;
+  color: #888;
+}
+
+.room-card-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.room-form-section {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-color);
+}
+
+.room-form-section h3 {
+  margin: 0 0 16px;
+}
 </style>
diff --git a/luxx/services/room_ws.py b/luxx/services/room_ws.py
index b6e83ce..fc143a4 100644
--- a/luxx/services/room_ws.py
+++ b/luxx/services/room_ws.py
@@ -123,27 +123,48 @@ async def websocket_handler(websocket: WebSocket, room_id: str):
                     })
 
                 context = {"user_id": user_id, "username": user_name}
+                logger.info(f"[ROOM_WS] Starting process_message, agents count: {len(agents)}")
 
+                event_count = 0
                 async for event in chat_room_service.process_message(
                     room_id=room_id, user_message=content, user_id=user_id,
                     user_name=user_name, context=context
                 ):
+                    event_count += 1
+                    logger.info(f"[ROOM_WS] Received event {event_count}: {event.get('event')}")
+                    
                     if event.get("event") in ["process_step", "done", "error"]:
+                        # Find agent_name from agents list
+                        agent_name = None
+                        for agent in agents:
+                            if agent.agent_id == event.get("agent_id"):
+                                agent_name = agent.name
+                                break
                         await connection_manager.broadcast_to_room(room_id, {
                             "event": event.get("event"),
                             "data": event.get("data", {}),
                             "agent_id": event.get("agent_id"),
-                            "agent_name": event.get("agent_name")
+                            "agent_name": agent_name
                         })
 
                         if event.get("event") == "done":
+                            # Find agent_name from agents list
+                            agent_name = None
+                            for agent in agents:
+                                if agent.agent_id == event.get("agent_id"):
+                                    agent_name = agent.name
+                                    break
                             chat_room_service.save_message(
                                 room_id=room_id, sender_type="agent",
                                 sender_id=event.get("agent_id"),
-                                sender_name=event.get("agent_name"),
-                                content=event.get("content", ""),
-                                token_count=event.get("token_count", 0)
+                                sender_name=agent_name,
+                                content=event.get("data", {}).get("content", "") if isinstance(event.get("data"), dict) else "",
+                                token_count=event.get("data", {}).get("token_count", 0) if isinstance(event.get("data"), dict) else 0
                             )
+                    else:
+                        logger.info(f"[ROOM_WS] Skipping event: {event.get('event')}")
+                
+                logger.info(f"[ROOM_WS] process_message completed, total events: {event_count}")
 
                 for agent in agents:
                     await connection_manager.broadcast_to_room(room_id, {
diff --git a/luxx/services/stream_service.py b/luxx/services/stream_service.py
index 7f2dd7d..bd60492 100644
--- a/luxx/services/stream_service.py
+++ b/luxx/services/stream_service.py
@@ -369,6 +369,7 @@ class StreamService:
 
                 yield _sse_event("done", {
                     "message_id": msg_id,
+                    "content": ctx.full_content,
                     "token_count": actual_token_count,
                     "usage": total_usage
                 })