From 3854d78c9c77364a371c5f8751a5904affae1ca6 Mon Sep 17 00:00:00 2001
From: hubian <908234780@qq.com>
Date: Sun, 12 Apr 2026 16:43:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BD=91=E9=A1=B5=E7=AB=AFAgent?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=20+=20=E5=BF=AB=E6=8D=B7=E8=AF=AD=E5=8F=A5?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main_v2.py                    |    7 +
 templates/admin_v2/index.html | 1005 +++++++--------------------------
 templates/index.html          |  829 +++++++++++++--------------
 3 files changed, 600 insertions(+), 1241 deletions(-)

diff --git a/main_v2.py b/main_v2.py
index c21e5f4..60bb908 100644
--- a/main_v2.py
+++ b/main_v2.py
@@ -567,6 +567,13 @@ async def websocket_endpoint(websocket: WebSocket, user_id: str, db: Session = D
                 message = data.get("message", "")
                 conversation_id = data.get("conversation_id")
                 enable_thinking = data.get("enable_thinking", True)  # 可临时关闭思考
+                agent_id_override = data.get("agent_id")  # 前端可以指定agent
+                
+                # 如果前端指定了agent，使用它
+                if agent_id_override:
+                    agent = agent_service.get_agent(agent_id_override)
+                    if agent and agent.is_active:
+                        current_agent_id = agent_id_override
                 
                 if not message.strip():
                     continue
diff --git a/templates/admin_v2/index.html b/templates/admin_v2/index.html
index f62d87a..04bc535 100644
--- a/templates/admin_v2/index.html
+++ b/templates/admin_v2/index.html
@@ -7,612 +7,185 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
     <style>
-        :root {
-            --sidebar-width: 240px;
-        }
-        body {
-            background: #f5f7fa;
-        }
-        .sidebar {
-            position: fixed;
-            left: 0;
-            top: 0;
-            width: var(--sidebar-width);
-            height: 100vh;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 20px 0;
-        }
-        .sidebar .logo {
-            padding: 0 20px 30px;
-            border-bottom: 1px solid rgba(255,255,255,0.1);
-        }
-        .sidebar .logo h4 {
-            margin: 0;
-            font-size: 18px;
-        }
-        .sidebar .logo .version {
-            font-size: 12px;
-            color: rgba(255,255,255,0.7);
-        }
-        .sidebar .nav-item {
-            padding: 10px 20px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        .sidebar .nav-item:hover {
-            background: rgba(255,255,255,0.1);
-        }
-        .sidebar .nav-item.active {
-            background: rgba(255,255,255,0.2);
-            border-left: 3px solid white;
-        }
-        .sidebar .nav-item i {
-            margin-right: 10px;
-        }
-        .main-content {
-            margin-left: var(--sidebar-width);
-            padding: 30px;
-        }
-        .page-header {
-            margin-bottom: 30px;
-        }
-        .page-header h2 {
-            margin: 0;
-            font-size: 24px;
-        }
-        .card {
-            border: none;
-            border-radius: 12px;
-            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
-        }
-        .card-header {
-            background: white;
-            border-bottom: 1px solid #eee;
-            padding: 15px 20px;
-        }
-        .btn-primary {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border: none;
-        }
-        .btn-primary:hover {
-            background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
-        }
-        .table th {
-            background: #f8f9fa;
-            font-weight: 600;
-        }
-        .badge-active {
-            background: #28a745;
-        }
-        .badge-inactive {
-            background: #6c757d;
-        }
-        .badge-default {
-            background: #ffc107;
-            color: #212529;
-        }
-        .thinking-toggle {
-            width: 50px;
-        }
-        .thinking-toggle .form-check-input {
-            width: 40px;
-            height: 20px;
-        }
-        .page-section {
-            display: none;
-        }
-        .page-section.active {
-            display: block;
-        }
-        /* Agent 卡片样式 */
-        .agent-card {
-            border-left: 4px solid #667eea;
-        }
-        .agent-card.default-agent {
-            border-left-color: #ffc107;
-        }
-        /* 渠道样式 */
-        .channel-web {
-            border-left: 4px solid #17a2b8;
-        }
-        .channel-matrix {
-            border-left: 4px solid #28a745;
-        }
-        /* Modal 表单样式 */
-        .modal-body .form-label {
-            font-weight: 600;
-            margin-top: 10px;
-        }
-        .thinking-config {
-            background: #f8f9fa;
-            padding: 15px;
-            border-radius: 8px;
-            margin-top: 10px;
-        }
+        :root { --sidebar-width: 240px; }
+        body { background: #f5f7fa; }
+        .sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar-width); height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px 0; }
+        .sidebar .logo { padding: 0 20px 30px; border-bottom: 1px solid rgba(255,255,255,0.1); }
+        .sidebar .logo h4 { margin: 0; font-size: 18px; }
+        .sidebar .logo .version { font-size: 12px; color: rgba(255,255,255,0.7); }
+        .sidebar .nav-item { padding: 10px 20px; cursor: pointer; transition: all 0.2s; }
+        .sidebar .nav-item:hover { background: rgba(255,255,255,0.1); }
+        .sidebar .nav-item.active { background: rgba(255,255,255,0.2); border-left: 3px solid white; }
+        .sidebar .nav-item i { margin-right: 10px; }
+        .main-content { margin-left: var(--sidebar-width); padding: 30px; }
+        .page-header { margin-bottom: 30px; }
+        .page-header h2 { margin: 0; font-size: 24px; }
+        .card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
+        .card-header { background: white; border-bottom: 1px solid #eee; padding: 15px 20px; }
+        .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; }
+        .btn-primary:hover { background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%); }
+        .table th { background: #f8f9fa; font-weight: 600; }
+        .page-section { display: none; }
+        .page-section.active { display: block; }
+        .channel-web { border-left: 4px solid #17a2b8; }
+        .channel-matrix { border-left: 4px solid #28a745; }
+        .thinking-config { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-top: 10px; }
     </style>
 </head>
 <body>
-    <!-- 侧边栏 -->
     <div class="sidebar">
         <div class="logo">
             <h4><i class="ri-robot-line"></i> AI对话系统</h4>
             <div class="version">v2.0.0 后台管理</div>
         </div>
         <div class="nav mt-3">
-            <div class="nav-item active" data-page="llm-providers">
-                <i class="ri-cloud-line"></i> 大模型池
-            </div>
-            <div class="nav-item" data-page="agents">
-                <i class="ri-robot-2-line"></i> Agent管理
-            </div>
-            <div class="nav-item" data-page="channels">
-                <i class="ri-chat-3-line"></i> 渠道管理
-            </div>
-            <div class="nav-item" data-page="stats">
-                <i class="ri-bar-chart-box-line"></i> 统计数据
-            </div>
-            <div class="nav-item" data-page="config">
-                <i class="ri-settings-3-line"></i> 系统配置
-            </div>
+            <div class="nav-item active" data-page="llm-providers"><i class="ri-cloud-line"></i> 大模型池</div>
+            <div class="nav-item" data-page="agents"><i class="ri-robot-2-line"></i> Agent管理</div>
+            <div class="nav-item" data-page="channels"><i class="ri-chat-3-line"></i> 渠道管理</div>
+            <div class="nav-item" data-page="stats"><i class="ri-bar-chart-box-line"></i> 统计数据</div>
         </div>
     </div>
 
-    <!-- 主内容 -->
     <div class="main-content">
-        <!-- 大模型池管理 -->
+        <!-- 大模型池 -->
         <div class="page-section active" id="page-llm-providers">
-            <div class="page-header">
-                <h2><i class="ri-cloud-line"></i> 大模型池管理</h2>
-                <p class="text-muted">配置多个大模型API，供Agent选择使用</p>
-            </div>
+            <div class="page-header"><h2><i class="ri-cloud-line"></i> 大模型池管理</h2></div>
             <div class="card">
                 <div class="card-header d-flex justify-content-between">
                     <span>大模型提供商列表</span>
-                    <button class="btn btn-primary btn-sm" onclick="showAddProviderModal()">
-                        <i class="ri-add-line"></i> 添加大模型
-                    </button>
+                    <button class="btn btn-primary btn-sm" onclick="showAddProviderModal()"><i class="ri-add-line"></i> 添加</button>
                 </div>
                 <div class="card-body">
                     <table class="table">
-                        <thead>
-                            <tr>
-                                <th>名称</th>
-                                <th>API地址</th>
-                                <th>默认模型</th>
-                                <th>思考支持</th>
-                                <th>状态</th>
-                                <th>操作</th>
-                            </tr>
-                        </thead>
-                        <tbody id="providers-list">
-                            <tr><td colspan="6" class="text-center">加载中...</td></tr>
-                        </tbody>
+                        <thead><tr><th>名称</th><th>API地址</th><th>默认模型</th><th>思考支持</th><th>状态</th><th>操作</th></tr></thead>
+                        <tbody id="providers-list"><tr><td colspan="6" class="text-center">加载中...</td></tr></tbody>
                     </table>
                 </div>
             </div>
         </div>
 
-        <!-- Agent管理 -->
+        <!-- Agent -->
         <div class="page-section" id="page-agents">
-            <div class="page-header">
-                <h2><i class="ri-robot-2-line"></i> Agent管理</h2>
-                <p class="text-muted">配置AI智能体，设定系统提示和思考功能</p>
-            </div>
+            <div class="page-header"><h2><i class="ri-robot-2-line"></i> Agent管理</h2></div>
             <div class="card">
                 <div class="card-header d-flex justify-content-between">
                     <span>Agent列表</span>
-                    <button class="btn btn-primary btn-sm" onclick="showAddAgentModal()">
-                        <i class="ri-add-line"></i> 添加Agent
-                    </button>
+                    <button class="btn btn-primary btn-sm" onclick="showAddAgentModal()"><i class="ri-add-line"></i> 添加</button>
                 </div>
                 <div class="card-body">
                     <table class="table">
-                        <thead>
-                            <tr>
-                                <th>名称</th>
-                                <th>显示名</th>
-                                <th>大模型池</th>
-                                <th>思考功能</th>
-                                <th>默认</th>
-                                <th>状态</th>
-                                <th>操作</th>
-                            </tr>
-                        </thead>
-                        <tbody id="agents-list">
-                            <tr><td colspan="7" class="text-center">加载中...</td></tr>
-                        </tbody>
+                        <thead><tr><th>名称</th><th>显示名</th><th>大模型池</th><th>思考</th><th>默认</th><th>状态</th><th>操作</th></tr></thead>
+                        <tbody id="agents-list"><tr><td colspan="7" class="text-center">加载中...</td></tr></tbody>
                     </table>
                 </div>
             </div>
         </div>
 
-        <!-- 渠道管理 -->
+        <!-- 渠道 -->
         <div class="page-section" id="page-channels">
-            <div class="page-header">
-                <h2><i class="ri-chat-3-line"></i> 渠道管理</h2>
-                <p class="text-muted">管理网页端、Matrix等渠道，绑定Agent</p>
-            </div>
+            <div class="page-header"><h2><i class="ri-chat-3-line"></i> 渠道管理</h2></div>
             <div class="row">
                 <div class="col-md-6 mb-4">
                     <div class="card channel-web">
-                        <div class="card-header">
-                            <i class="ri-global-line"></i> 网页端渠道
-                        </div>
-                        <div class="card-body" id="web-channel-info">
-                            加载中...
-                        </div>
+                        <div class="card-header"><i class="ri-global-line"></i> 网页端渠道</div>
+                        <div class="card-body" id="web-channel-info">加载中...</div>
                     </div>
                 </div>
                 <div class="col-md-6 mb-4">
                     <div class="card channel-matrix">
-                        <div class="card-header">
-                            <i class="ri-message-3-line"></i> Matrix渠道
-                        </div>
-                        <div class="card-body" id="matrix-channel-info">
-                            加载中...
-                        </div>
+                        <div class="card-header"><i class="ri-message-3-line"></i> Matrix渠道</div>
+                        <div class="card-body" id="matrix-channel-info">加载中...</div>
                     </div>
                 </div>
             </div>
             <div class="card">
-                <div class="card-header">
-                    渠道-Agent绑定关系
-                </div>
+                <div class="card-header">渠道-Agent绑定关系</div>
                 <div class="card-body">
                     <table class="table">
-                        <thead>
-                            <tr>
-                                <th>渠道</th>
-                                <th>绑定Agent</th>
-                                <th>优先级</th>
-                                <th>模式</th>
-                                <th>条件</th>
-                                <th>操作</th>
-                            </tr>
-                        </thead>
-                        <tbody id="mappings-list">
-                            <tr><td colspan="6" class="text-center">加载中...</td></tr>
-                        </tbody>
+                        <thead><tr><th>渠道</th><th>绑定Agent</th><th>优先级</th><th>模式</th><th>条件</th><th>操作</th></tr></thead>
+                        <tbody id="mappings-list"><tr><td colspan="6" class="text-center">加载中...</td></tr></tbody>
                     </table>
                 </div>
             </div>
         </div>
 
-        <!-- 统计数据 -->
+        <!-- 统计 -->
         <div class="page-section" id="page-stats">
-            <div class="page-header">
-                <h2><i class="ri-bar-chart-box-line"></i> 统计数据</h2>
-            </div>
+            <div class="page-header"><h2><i class="ri-bar-chart-box-line"></i> 统计数据</h2></div>
             <div class="row">
-                <div class="col-md-3 mb-4">
-                    <div class="card">
-                        <div class="card-body text-center">
-                            <i class="ri-user-line" style="font-size: 40px; color: #667eea;"></i>
-                            <h3 id="stat-users" class="mt-2">-</h3>
-                            <p class="text-muted">用户数</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-3 mb-4">
-                    <div class="card">
-                        <div class="card-body text-center">
-                            <i class="ri-chat-1-line" style="font-size: 40px; color: #28a745;"></i>
-                            <h3 id="stat-conversations" class="mt-2">-</h3>
-                            <p class="text-muted">对话数</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-3 mb-4">
-                    <div class="card">
-                        <div class="card-body text-center">
-                            <i class="ri-message-2-line" style="font-size: 40px; color: #ffc107;"></i>
-                            <h3 id="stat-messages" class="mt-2">-</h3>
-                            <p class="text-muted">消息数</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-3 mb-4">
-                    <div class="card">
-                        <div class="card-body text-center">
-                            <i class="ri-robot-line" style="font-size: 40px; color: #17a2b8;"></i>
-                            <h3 id="stat-agents" class="mt-2">-</h3>
-                            <p class="text-muted">Agent数</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- 系统配置 -->
-        <div class="page-section" id="page-config">
-            <div class="page-header">
-                <h2><i class="ri-settings-3-line"></i> 系统配置</h2>
-            </div>
-            <div class="card">
-                <div class="card-body">
-                    <p class="text-muted">系统级别的通用配置...</p>
-                </div>
+                <div class="col-md-3 mb-4"><div class="card"><div class="card-body text-center"><i class="ri-user-line" style="font-size:40px;color:#667eea;"></i><h3 id="stat-users" class="mt-2">-</h3><p class="text-muted">用户数</p></div></div></div>
+                <div class="col-md-3 mb-4"><div class="card"><div class="card-body text-center"><i class="ri-chat-1-line" style="font-size:40px;color:#28a745;"></i><h3 id="stat-conversations" class="mt-2">-</h3><p class="text-muted">对话数</p></div></div></div>
+                <div class="col-md-3 mb-4"><div class="card"><div class="card-body text-center"><i class="ri-message-2-line" style="font-size:40px;color:#ffc107;"></i><h3 id="stat-messages" class="mt-2">-</h3><p class="text-muted">消息数</p></div></div></div>
+                <div class="col-md-3 mb-4"><div class="card"><div class="card-body text-center"><i class="ri-robot-line" style="font-size:40px;color:#17a2b8;"></i><h3 id="stat-agents" class="mt-2">-</h3><p class="text-muted">Agent数</p></div></div></div>
             </div>
         </div>
     </div>
 
-    <!-- 添加大模型Modal -->
-    <div class="modal fade" id="providerModal">
-        <div class="modal-dialog modal-lg">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">添加/编辑大模型</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-                </div>
-                <div class="modal-body">
-                    <form id="provider-form">
-                        <input type="hidden" id="provider-id">
-                        <div class="row">
-                            <div class="col-md-6">
-                                <label class="form-label">名称标识 *</label>
-                                <input type="text" class="form-control" id="provider-name" required placeholder="如: DeepSeek, 本地LLM">
-                            </div>
-                            <div class="col-md-6">
-                                <label class="form-label">默认模型</label>
-                                <input type="text" class="form-control" id="provider-default-model" placeholder="auto">
-                            </div>
-                        </div>
-                        <div class="row mt-3">
-                            <div class="col-md-12">
-                                <label class="form-label">API地址 *</label>
-                                <input type="text" class="form-control" id="provider-api-base" required placeholder="http://xxx:port/v1">
-                            </div>
-                        </div>
-                        <div class="row mt-3">
-                            <div class="col-md-12">
-                                <label class="form-label">API密钥</label>
-                                <input type="text" class="form-control" id="provider-api-key" placeholder="sk-xxx">
-                            </div>
-                        </div>
-                        <div class="row mt-3">
-                            <div class="col-md-4">
-                                <label class="form-label">Max Tokens</label>
-                                <input type="number" class="form-control" id="provider-max-tokens" value="4096">
-                            </div>
-                            <div class="col-md-4">
-                                <label class="form-label">Temperature</label>
-                                <input type="number" class="form-control" id="provider-temperature" value="0.7" step="0.1">
-                            </div>
-                            <div class="col-md-4">
-                                <label class="form-label">优先级</label>
-                                <input type="number" class="form-control" id="provider-priority" value="0">
-                            </div>
-                        </div>
-                        <div class="mt-3">
-                            <label class="form-label">描述</label>
-                            <textarea class="form-control" id="provider-description" rows="2"></textarea>
-                        </div>
-                        <div class="mt-3 form-check">
-                            <input type="checkbox" class="form-check-input" id="provider-active" checked>
-                            <label class="form-check-label">启用</label>
-                        </div>
-                        <hr>
-                        <h6>思考功能配置</h6>
-                        <div class="thinking-config">
-                            <div class="row">
-                                <div class="col-md-6 form-check">
-                                    <input type="checkbox" class="form-check-input" id="provider-supports-thinking">
-                                    <label class="form-check-label">支持原生思考功能</label>
-                                </div>
-                                <div class="col-md-6">
-                                    <label class="form-label">思考模式模型名</label>
-                                    <input type="text" class="form-control" id="provider-thinking-model" placeholder="如果有单独的思考模型">
-                                </div>
-                            </div>
-                        </div>
-                        <div class="mt-3">
-                            <button type="button" class="btn btn-outline-primary" onclick="fetchProviderModels()">
-                                <i class="ri-refresh-line"></i> 从API获取模型列表
-                            </button>
-                            <button type="button" class="btn btn-outline-secondary" onclick="testProviderConnection()">
-                                <i class="ri-link"></i> 测试连接
-                            </button>
-                        </div>
-                        <div class="mt-2" id="provider-models-preview"></div>
-                        <div class="mt-2" id="provider-test-result"></div>
-                    </form>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
-                    <button type="button" class="btn btn-primary" onclick="saveProvider()">保存</button>
-                </div>
-            </div>
-        </div>
-    </div>
+    <!-- Provider Modal -->
+    <div class="modal fade" id="providerModal"><div class="modal-dialog modal-lg"><div class="modal-content">
+        <div class="modal-header"><h5 class="modal-title">添加/编辑大模型</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
+        <div class="modal-body"><form id="provider-form">
+            <input type="hidden" id="provider-id">
+            <div class="row"><div class="col-md-6"><label class="form-label">名称 *</label><input type="text" class="form-control" id="provider-name" required></div><div class="col-md-6"><label class="form-label">默认模型</label><input type="text" class="form-control" id="provider-default-model"></div></div>
+            <div class="row mt-3"><div class="col-md-12"><label class="form-label">API地址 *</label><input type="text" class="form-control" id="provider-api-base" required></div></div>
+            <div class="row mt-3"><div class="col-md-12"><label class="form-label">API密钥</label><input type="text" class="form-control" id="provider-api-key"></div></div>
+            <div class="row mt-3"><div class="col-md-4"><label class="form-label">MaxTokens</label><input type="number" class="form-control" id="provider-max-tokens" value="4096"></div><div class="col-md-4"><label class="form-label">Temperature</label><input type="number" class="form-control" id="provider-temperature" value="0.7" step="0.1"></div><div class="col-md-4"><label class="form-label">优先级</label><input type="number" class="form-control" id="provider-priority" value="0"></div></div>
+            <div class="mt-3"><label class="form-label">描述</label><textarea class="form-control" id="provider-description" rows="2"></textarea></div>
+            <div class="mt-3 form-check"><input type="checkbox" class="form-check-input" id="provider-active" checked><label class="form-check-label">启用</label></div>
+            <hr><h6>思考功能</h6>
+            <div class="thinking-config"><div class="row"><div class="col-md-6 form-check"><input type="checkbox" class="form-check-input" id="provider-supports-thinking"><label class="form-check-label">支持原生思考</label></div><div class="col-md-6"><label class="form-label">思考模型名</label><input type="text" class="form-control" id="provider-thinking-model"></div></div></div>
+            <div class="mt-3"><button type="button" class="btn btn-outline-primary" onclick="fetchProviderModels()"><i class="ri-refresh-line"></i> 获取模型</button><button type="button" class="btn btn-outline-secondary" onclick="testProviderConnection()"><i class="ri-link"></i> 测试连接</button></div>
+            <div class="mt-2" id="provider-models-preview"></div><div class="mt-2" id="provider-test-result"></div>
+        </form></div>
+        <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="button" class="btn btn-primary" onclick="saveProvider()">保存</button></div>
+    </div></div></div>
 
-    <!-- 添加AgentModal -->
-    <div class="modal fade" id="agentModal">
-        <div class="modal-dialog modal-lg">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">添加/编辑Agent</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-                </div>
-                <div class="modal-body">
-                    <form id="agent-form">
-                        <input type="hidden" id="agent-id">
-                        <div class="row">
-                            <div class="col-md-4">
-                                <label class="form-label">名称标识 *</label>
-                                <input type="text" class="form-control" id="agent-name" required placeholder="如: assistant, coder">
-                            </div>
-                            <div class="col-md-4">
-                                <label class="form-label">显示名称</label>
-                                <input type="text" class="form-control" id="agent-display-name" placeholder="默认助手">
-                            </div>
-                            <div class="col-md-4">
-                                <label class="form-label">大模型池 *</label>
-                                <select class="form-select" id="agent-llm-provider" required>
-                                    <option value="">请选择...</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="row mt-3">
-                            <div class="col-md-6">
-                                <label class="form-label">模型覆盖</label>
-                                <input type="text" class="form-control" id="agent-model-override" placeholder="覆盖Provider默认模型">
-                            </div>
-                            <div class="col-md-6">
-                                <label class="form-label">最大历史数</label>
-                                <input type="number" class="form-control" id="agent-max-history" value="20">
-                            </div>
-                        </div>
-                        <div class="mt-3">
-                            <label class="form-label">系统设定（System Prompt）</label>
-                            <textarea class="form-control" id="agent-system-prompt" rows="4">你是一个有用的AI助手。</textarea>
-                        </div>
-                        <div class="mt-3">
-                            <label class="form-label">描述</label>
-                            <textarea class="form-control" id="agent-description" rows="2"></textarea>
-                        </div>
-                        <div class="row mt-3">
-                            <div class="col-md-4 form-check">
-                                <input type="checkbox" class="form-check-input" id="agent-active" checked>
-                                <label class="form-check-label">启用</label>
-                            </div>
-                            <div class="col-md-4 form-check">
-                                <input type="checkbox" class="form-check-input" id="agent-default">
-                                <label class="form-check-label">设为默认</label>
-                            </div>
-                            <div class="col-md-4">
-                                <label class="form-label">温度覆盖</label>
-                                <input type="number" class="form-control" id="agent-temperature-override" step="0.1" placeholder="可选">
-                            </div>
-                        </div>
-                        <hr>
-                        <h6>思考功能配置</h6>
-                        <div class="thinking-config">
-                            <div class="form-check mb-2">
-                                <input type="checkbox" class="form-check-input" id="agent-enable-thinking" checked>
-                                <label class="form-check-label">启用思考功能</label>
-                            </div>
-                            <div class="mt-2">
-                                <label class="form-label">思考提示词</label>
-                                <textarea class="form-control" id="agent-thinking-prompt" rows="2" placeholder="请先仔细思考这个问题..."></textarea>
-                            </div>
-                            <div class="row mt-2">
-                                <div class="col-md-6">
-                                    <label class="form-label">思考前缀标识</label>
-                                    <input type="text" class="form-control" id="agent-thinking-prefix" placeholder="如: ">
-                                </div>
-                                <div class="col-md-6">
-                                    <label class="form-label">思考后缀标识</label>
-                                    <input type="text" class="form-control" id="agent-thinking-suffix" placeholder="如: ">
-                                </div>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
-                    <button type="button" class="btn btn-primary" onclick="saveAgent()">保存</button>
-                </div>
-            </div>
-        </div>
-    </div>
+    <!-- Agent Modal -->
+    <div class="modal fade" id="agentModal"><div class="modal-dialog modal-lg"><div class="modal-content">
+        <div class="modal-header"><h5 class="modal-title">添加/编辑Agent</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
+        <div class="modal-body"><form id="agent-form">
+            <input type="hidden" id="agent-id">
+            <div class="row"><div class="col-md-4"><label class="form-label">名称 *</label><input type="text" class="form-control" id="agent-name" required></div><div class="col-md-4"><label class="form-label">显示名</label><input type="text" class="form-control" id="agent-display-name"></div><div class="col-md-4"><label class="form-label">大模型池 *</label><select class="form-select" id="agent-llm-provider" required><option value="">请选择...</option></select></div></div>
+            <div class="row mt-3"><div class="col-md-6"><label class="form-label">模型覆盖</label><input type="text" class="form-control" id="agent-model-override"></div><div class="col-md-6"><label class="form-label">最大历史</label><input type="number" class="form-control" id="agent-max-history" value="20"></div></div>
+            <div class="mt-3"><label class="form-label">系统设定</label><textarea class="form-control" id="agent-system-prompt" rows="3">你是一个有用的AI助手。</textarea></div>
+            <div class="mt-3"><label class="form-label">描述</label><textarea class="form-control" id="agent-description" rows="2"></textarea></div>
+            <div class="row mt-3"><div class="col-md-4 form-check"><input type="checkbox" class="form-check-input" id="agent-active" checked><label class="form-check-label">启用</label></div><div class="col-md-4 form-check"><input type="checkbox" class="form-check-input" id="agent-default"><label class="form-check-label">默认</label></div><div class="col-md-4"><label class="form-label">温度覆盖</label><input type="number" class="form-control" id="agent-temperature-override" step="0.1"></div></div>
+            <hr><h6>思考功能</h6>
+            <div class="thinking-config"><div class="form-check"><input type="checkbox" class="form-check-input" id="agent-enable-thinking" checked><label class="form-check-label">启用思考</label></div><div class="mt-2"><label class="form-label">思考提示词</label><textarea class="form-control" id="agent-thinking-prompt" rows="2"></textarea></div><div class="row mt-2"><div class="col-md-6"><label class="form-label">前缀</label><input type="text" class="form-control" id="agent-thinking-prefix"></div><div class="col-md-6"><label class="form-label">后缀</label><input type="text" class="form-control" id="agent-thinking-suffix"></div></div></div>
+        </form></div>
+        <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="button" class="btn btn-primary" onclick="saveAgent()">保存</button></div>
+    </div></div></div>
 
-    <!-- 绑定AgentModal -->
-    <div class="modal fade" id="bindingModal">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">绑定Agent到渠道</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-                </div>
-                <div class="modal-body">
-                    <form id="binding-form">
-                        <input type="hidden" id="binding-channel-id">
-                        <div class="mb-3">
-                            <label class="form-label">选择Agent</label>
-                            <select class="form-select" id="binding-agent-id" required>
-                                <option value="">请选择...</option>
-                            </select>
-                        </div>
-                        <div class="mb-3">
-                            <label class="form-label">优先级</label>
-                            <input type="number" class="form-control" id="binding-priority" value="0">
-                            <small class="text-muted">数字越小优先级越高</small>
-                        </div>
-                        <div class="mb-3">
-                            <label class="form-label">模式</label>
-                            <select class="form-select" id="binding-mode">
-                                <option value="single">single - 单Agent</option>
-                                <option value="round_robin">round_robin - 轮询</option>
-                                <option value="fallback">fallback - 备用</option>
-                            </select>
-                        </div>
-                        <div class="mb-3">
-                            <label class="form-label">条件（JSON）</label>
-                            <textarea class="form-control" id="binding-conditions" rows="2" placeholder='{"user_level": "vip"}'></textarea>
-                            <small class="text-muted">可选，满足条件时才使用此Agent</small>
-                        </div>
-                    </form>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
-                    <button type="button" class="btn btn-primary" onclick="saveBinding()">保存</button>
-                </div>
-            </div>
-        </div>
-    </div>
+    <!-- Binding Modal -->
+    <div class="modal fade" id="bindingModal"><div class="modal-dialog"><div class="modal-content">
+        <div class="modal-header"><h5 class="modal-title">绑定Agent</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
+        <div class="modal-body"><form id="binding-form">
+            <input type="hidden" id="binding-channel-id">
+            <div class="mb-3"><label class="form-label">选择Agent</label><select class="form-select" id="binding-agent-id" required><option value="">请选择...</option></select></div>
+            <div class="mb-3"><label class="form-label">优先级</label><input type="number" class="form-control" id="binding-priority" value="0"></div>
+            <div class="mb-3"><label class="form-label">模式</label><select class="form-select" id="binding-mode"><option value="single">single</option><option value="round_robin">轮询</option><option value="fallback">备用</option></select></div>
+            <div class="mb-3"><label class="form-label">条件(JSON)</label><textarea class="form-control" id="binding-conditions" rows="2"></textarea></div>
+        </form></div>
+        <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="button" class="btn btn-primary" onclick="saveBinding()">保存</button></div>
+    </div></div></div>
 
-    <!-- 编辑Matrix配置Modal -->
-    <div class="modal fade" id="matrixConfigModal">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">Matrix配置</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-                </div>
-                <div class="modal-body">
-                    <form id="matrix-config-form">
-                        <div class="mb-3">
-                            <label class="form-label">服务器地址</label>
-                            <input type="text" class="form-control" id="matrix-homeserver" placeholder="http://matrix.tphai.com">
-                        </div>
-                        <div class="mb-3">
-                            <label class="form-label">Bot用户名</label>
-                            <input type="text" class="form-control" id="matrix-username" placeholder="@ai-bot:matrix.tphai.com">
-                        </div>
-                        <div class="mb-3">
-                            <label class="form-label">密码</label>
-                            <input type="text" class="form-control" id="matrix-password">
-                        </div>
-                    </form>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
-                    <button type="button" class="btn btn-primary" onclick="saveMatrixConfig()">保存</button>
-                </div>
-            </div>
-        </div>
-    </div>
+    <!-- Matrix Config Modal -->
+    <div class="modal fade" id="matrixConfigModal"><div class="modal-dialog"><div class="modal-content">
+        <div class="modal-header"><h5 class="modal-title">Matrix配置</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
+        <div class="modal-body"><form id="matrix-config-form">
+            <div class="mb-3"><label class="form-label">服务器地址</label><input type="text" class="form-control" id="matrix-homeserver"></div>
+            <div class="mb-3"><label class="form-label">Bot用户名</label><input type="text" class="form-control" id="matrix-username"></div>
+            <div class="mb-3"><label class="form-label">密码</label><input type="text" class="form-control" id="matrix-password"></div>
+        </form></div>
+        <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="button" class="btn btn-primary" onclick="saveMatrixConfig()">保存</button></div>
+    </div></div></div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        // 页面切换
-        document.querySelectorAll('.sidebar .nav-item').forEach(item => {
-            item.addEventListener('click', () => {
-                // 更新导航状态
-                document.querySelectorAll('.sidebar .nav-item').forEach(i => i.classList.remove('active'));
-                item.classList.add('active');
-                
-                // 切换页面
-                const page = item.dataset.page;
-                document.querySelectorAll('.page-section').forEach(s => s.classList.remove('active'));
-                document.getElementById('page-' + page).classList.add('active');
-                
-                // 加载数据
-                loadPageData(page);
-            });
-        });
+        // 全局数据
+        let providersData = [], agentsData = [], channelsData = [];
 
+        // 页面切换函数
         function loadPageData(page) {
             if (page === 'llm-providers') loadProviders();
             if (page === 'agents') loadAgents();
@@ -620,55 +193,29 @@
             if (page === 'stats') loadStats();
         }
 
-        // 初始加载
-        loadProviders();
-        loadStats();
-
         // ===== 大模型池 =====
-        let providersData = [];
-        
         async function loadProviders() {
             const res = await fetch('/api/v2/providers');
             const data = await res.json();
             providersData = data.providers || [];
-            
             const tbody = document.getElementById('providers-list');
             if (providersData.length === 0) {
                 tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">暂无数据</td></tr>';
                 return;
             }
-            
-            tbody.innerHTML = providersData.map(p => `
-                <tr>
-                    <td><strong>${p.name}</strong></td>
-                    <td><small>${p.api_base || '-'}</small></td>
-                    <td>${p.default_model || 'auto'}</td>
-                    <td>
-                        ${p.supports_thinking ? '<span class="badge bg-success">支持</span>' : '<span class="badge bg-secondary">不支持</span>}
-                        ${p.thinking_model ? `<small class="text-muted">(${p.thinking_model})</small>` : ''}
-                    </td>
-                    <td>${p.is_active ? '<span class="badge badge-active">启用</span>' : '<span class="badge badge-inactive">禁用</span>'}</td>
-                    <td>
-                        <button class="btn btn-sm btn-outline-primary" onclick="editProvider(${p.id})">
-                            <i class="ri-edit-line"></i>
-                        </button>
-                        <button class="btn btn-sm btn-outline-danger" onclick="deleteProvider(${p.id}, '${p.name}')">
-                            <i class="ri-delete-bin-line"></i>
-                        </button>
-                    </td>
-                </tr>
-            `).join('');
-            
-            // 更新Agent选择框
+            tbody.innerHTML = providersData.map(p => `<tr>
+                <td><strong>${p.name}</strong></td><td><small>${p.api_base||'-'}</small></td><td>${p.default_model||'auto'}</td>
+                <td>${p.supports_thinking?'<span class="badge bg-success">支持</span>':'<span class="badge bg-secondary">不支持</span>'}</td>
+                <td>${p.is_active?'<span class="badge bg-success">启用</span>':'<span class="badge bg-secondary">禁用</span>'}</td>
+                <td><button class="btn btn-sm btn-outline-primary" onclick="editProvider(${p.id})"><i class="ri-edit-line"></i></button>
+                    <button class="btn btn-sm btn-outline-danger" onclick="deleteProvider(${p.id},'${p.name}')"><i class="ri-delete-bin-line"></i></button></td>
+            </tr>`).join('');
             updateProviderSelect();
         }
 
         function updateProviderSelect() {
             const select = document.getElementById('agent-llm-provider');
-            select.innerHTML = '<option value="">请选择...</option>' + 
-                providersData.filter(p => p.is_active).map(p => 
-                    `<option value="${p.id}">${p.name} (${p.default_model || 'auto'})</option>`
-                ).join('');
+            select.innerHTML = '<option value="">请选择...</option>' + providersData.filter(p=>p.is_active).map(p=>`<option value="${p.id}">${p.name}</option>`).join('');
         }
 
         function showAddProviderModal() {
@@ -683,7 +230,6 @@
         function editProvider(id) {
             const p = providersData.find(x => x.id === id);
             if (!p) return;
-            
             document.getElementById('provider-id').value = id;
             document.getElementById('provider-name').value = p.name;
             document.getElementById('provider-api-base').value = p.api_base || '';
@@ -696,7 +242,6 @@
             document.getElementById('provider-active').checked = p.is_active;
             document.getElementById('provider-supports-thinking').checked = p.supports_thinking;
             document.getElementById('provider-thinking-model').value = p.thinking_model || '';
-            
             new bootstrap.Modal(document.getElementById('providerModal')).show();
         }
 
@@ -715,143 +260,63 @@
                 supports_thinking: document.getElementById('provider-supports-thinking').checked,
                 thinking_model: document.getElementById('provider-thinking-model').value
             };
-            
-            const url = id ? `/api/v2/providers/${id}` : '/api/v2/providers';
-            const method = id ? 'PUT' : 'POST';
-            
-            const res = await fetch(url, {
-                method: method,
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify(data)
-            });
-            
+            const res = await fetch(id ? `/api/v2/providers/${id}` : '/api/v2/providers', { method: id ? 'PUT' : 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data) });
             const result = await res.json();
-            if (result.success) {
-                bootstrap.Modal.getInstance(document.getElementById('providerModal')).hide();
-                loadProviders();
-                alert('保存成功');
-            } else {
-                alert('保存失败: ' + result.message);
-            }
+            if (result.success) { bootstrap.Modal.getInstance(document.getElementById('providerModal')).hide(); loadProviders(); alert('保存成功'); }
+            else alert('失败: ' + result.message);
         }
 
         async function deleteProvider(id, name) {
-            if (!confirm(`确定删除大模型 "${name}"？\n注意：如果有Agent使用此模型，删除将失败。`)) return;
-            
-            const res = await fetch(`/api/v2/providers/${id}`, {method: 'DELETE'});
+            if (!confirm(`确定删除 "${name}"？`)) return;
+            const res = await fetch(`/api/v2/providers/${id}`, {method:'DELETE'});
             const result = await res.json();
-            
-            if (result.success) {
-                loadProviders();
-                alert('删除成功');
-            } else {
-                alert('删除失败: ' + result.message);
-            }
+            if (result.success) { loadProviders(); alert('删除成功'); }
+            else alert('失败: ' + result.message);
         }
 
         async function fetchProviderModels() {
             const api_base = document.getElementById('provider-api-base').value;
-            const api_key = document.getElementById('provider-api-key').value;
-            
-            if (!api_base) {
-                alert('请先填写API地址');
-                return;
-            }
-            
-            document.getElementById('provider-models-preview').innerHTML = '正在获取...';
-            
-            const res = await fetch('/api/v2/providers/models', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({api_base, api_key})
-            });
-            
+            if (!api_base) { alert('请先填写API地址'); return; }
+            document.getElementById('provider-models-preview').innerHTML = '获取中...';
+            const res = await fetch('/api/v2/providers/models', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({api_base, api_key: document.getElementById('provider-api-key').value}) });
             const result = await res.json();
-            if (result.models && result.models.length > 0) {
-                document.getElementById('provider-models-preview').innerHTML = 
-                    '<strong>可用模型:</strong> ' + result.models.map(m => `<span class="badge bg-secondary">${m.id}</span>`).join(' ');
-            } else {
-                document.getElementById('provider-models-preview').innerHTML = 
-                    '<span class="text-warning">无法获取模型列表</span>';
-            }
+            document.getElementById('provider-models-preview').innerHTML = result.models?.length > 0 
+                ? '<strong>可用模型:</strong> ' + result.models.map(m=>`<span class="badge bg-secondary">${m.id}</span>`).join(' ')
+                : '<span class="text-warning">无法获取</span>';
         }
 
         async function testProviderConnection() {
             const api_base = document.getElementById('provider-api-base').value;
-            const api_key = document.getElementById('provider-api-key').value;
-            const model = document.getElementById('provider-default-model').value || 'auto';
-            
-            if (!api_base) {
-                alert('请先填写API地址');
-                return;
-            }
-            
-            document.getElementById('provider-test-result').innerHTML = '正在测试...';
-            
-            const res = await fetch('/api/v2/providers/test', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({api_base, api_key, model})
-            });
-            
+            if (!api_base) { alert('请先填写API地址'); return; }
+            document.getElementById('provider-test-result').innerHTML = '测试中...';
+            const res = await fetch('/api/v2/providers/test', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({api_base, api_key: document.getElementById('provider-api-key').value, model: document.getElementById('provider-default-model').value||'auto'}) });
             const result = await res.json();
-            if (result.success) {
-                document.getElementById('provider-test-result').innerHTML = 
-                    '<span class="text-success"><i class="ri-check-line"></i> ' + result.message + '</span>';
-            } else {
-                document.getElementById('provider-test-result').innerHTML = 
-                    '<span class="text-danger"><i class="ri-close-line"></i> ' + result.message + '</span>';
-            }
+            document.getElementById('provider-test-result').innerHTML = result.success 
+                ? '<span class="text-success">✅ ' + result.message + '</span>'
+                : '<span class="text-danger">❌ ' + result.message + '</span>';
         }
 
         // ===== Agent =====
-        let agentsData = [];
-        
         async function loadAgents() {
             const res = await fetch('/api/v2/agents');
             const data = await res.json();
             agentsData = data.agents || [];
-            
             const tbody = document.getElementById('agents-list');
-            if (agentsData.length === 0) {
-                tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">暂无数据</td></tr>';
-                return;
-            }
-            
-            tbody.innerHTML = agentsData.map(a => `
-                <tr class="${a.is_default ? 'default-agent' : ''}">
-                    <td><strong>${a.name}</strong></td>
-                    <td>${a.display_name || a.name}</td>
-                    <td>${a.llm_provider_name || '-'}</td>
-                    <td>
-                        ${a.enable_thinking ? '<span class="badge bg-success">开启</span>' : '<span class="badge bg-secondary">关闭</span>'}
-                    </td>
-                    <td>${a.is_default ? '<span class="badge badge-default">默认</span>' : '-'}</td>
-                    <td>${a.is_active ? '<span class="badge badge-active">启用</span>' : '<span class="badge badge-inactive">禁用</span>'}</td>
-                    <td>
-                        <button class="btn btn-sm btn-outline-primary" onclick="editAgent(${a.id})">
-                            <i class="ri-edit-line"></i>
-                        </button>
-                        ${!a.is_default ? `<button class="btn btn-sm btn-outline-warning" onclick="setDefaultAgent(${a.id})">
-                            <i class="ri-star-line"></i>
-                        </button>` : ''}
-                        ${!a.is_default ? `<button class="btn btn-sm btn-outline-danger" onclick="deleteAgent(${a.id}, '${a.name}')">
-                            <i class="ri-delete-bin-line"></i>
-                        </button>` : ''}
-                    </td>
-                </tr>
-            `).join('');
-            
-            // 更新绑定选择框
+            if (agentsData.length === 0) { tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">暂无数据</td></tr>'; return; }
+            tbody.innerHTML = agentsData.map(a => `<tr>
+                <td><strong>${a.name}</strong></td><td>${a.display_name||a.name}</td><td>${a.llm_provider_name||'-'}</td>
+                <td>${a.enable_thinking?'<span class="badge bg-success">开启</span>':'<span class="badge bg-secondary">关闭</span>'}</td>
+                <td>${a.is_default?'<span class="badge bg-warning">默认</span>':'-'}</td>
+                <td>${a.is_active?'<span class="badge bg-success">启用</span>':'<span class="badge bg-secondary">禁用</span>'}</td>
+                <td><button class="btn btn-sm btn-outline-primary" onclick="editAgent(${a.id})"><i class="ri-edit-line"></i></button>
+                    ${!a.is_default?`<button class="btn btn-sm btn-outline-warning" onclick="setDefaultAgent(${a.id})"><i class="ri-star-line"></i></button><button class="btn btn-sm btn-outline-danger" onclick="deleteAgent(${a.id},'${a.name}')"><i class="ri-delete-bin-line"></i></button>`:''}</td>
+            </tr>`).join('');
             updateAgentSelect();
         }
 
         function updateAgentSelect() {
             const select = document.getElementById('binding-agent-id');
-            select.innerHTML = '<option value="">请选择...</option>' + 
-                agentsData.filter(a => a.is_active).map(a => 
-                    `<option value="${a.id}">${a.display_name || a.name}</option>`
-                ).join('');
+            select.innerHTML = '<option value="">请选择...</option>' + agentsData.filter(a=>a.is_active).map(a=>`<option value="${a.id}">${a.display_name||a.name}</option>`).join('');
         }
 
         function showAddAgentModal() {
@@ -867,9 +332,7 @@
         function editAgent(id) {
             const a = agentsData.find(x => x.id === id);
             if (!a) return;
-            
             updateProviderSelect();
-            
             document.getElementById('agent-id').value = id;
             document.getElementById('agent-name').value = a.name;
             document.getElementById('agent-display-name').value = a.display_name || '';
@@ -885,7 +348,6 @@
             document.getElementById('agent-thinking-prompt').value = a.thinking_prompt || '';
             document.getElementById('agent-thinking-prefix').value = a.thinking_prefix || '';
             document.getElementById('agent-thinking-suffix').value = a.thinking_suffix || '';
-            
             new bootstrap.Modal(document.getElementById('agentModal')).show();
         }
 
@@ -907,112 +369,57 @@
                 thinking_prefix: document.getElementById('agent-thinking-prefix').value,
                 thinking_suffix: document.getElementById('agent-thinking-suffix').value
             };
-            
-            const url = id ? `/api/v2/agents/${id}` : '/api/v2/agents';
-            const method = id ? 'PUT' : 'POST';
-            
-            const res = await fetch(url, {
-                method: method,
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify(data)
-            });
-            
+            const res = await fetch(id ? `/api/v2/agents/${id}` : '/api/v2/agents', { method: id ? 'PUT' : 'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
             const result = await res.json();
-            if (result.success) {
-                bootstrap.Modal.getInstance(document.getElementById('agentModal')).hide();
-                loadAgents();
-                alert('保存成功');
-            } else {
-                alert('保存失败: ' + result.message);
-            }
+            if (result.success) { bootstrap.Modal.getInstance(document.getElementById('agentModal')).hide(); loadAgents(); alert('保存成功'); }
+            else alert('失败: ' + result.message);
         }
 
         async function setDefaultAgent(id) {
-            const res = await fetch(`/api/v2/agents/${id}/default`, {method: 'POST'});
+            const res = await fetch(`/api/v2/agents/${id}/default`, {method:'POST'});
             const result = await res.json();
-            if (result.success) {
-                loadAgents();
-                alert('已设为默认Agent');
-            }
+            if (result.success) { loadAgents(); alert('已设为默认'); }
         }
 
         async function deleteAgent(id, name) {
-            if (!confirm(`确定删除Agent "${name}"？`)) return;
-            
-            const res = await fetch(`/api/v2/agents/${id}`, {method: 'DELETE'});
+            if (!confirm(`确定删除 "${name}"？`)) return;
+            const res = await fetch(`/api/v2/agents/${id}`, {method:'DELETE'});
             const result = await res.json();
-            
-            if (result.success) {
-                loadAgents();
-                alert('删除成功');
-            } else {
-                alert('删除失败: ' + result.message);
-            }
+            if (result.success) { loadAgents(); alert('删除成功'); }
+            else alert('失败: ' + result.message);
         }
 
         // ===== 渠道 =====
-        let channelsData = [];
-        let mappingsData = [];
-        
         async function loadChannels() {
             const res = await fetch('/api/v2/channels');
             const data = await res.json();
             channelsData = data.channels || [];
-            mappingsData = data.mappings || [];
+            const mappings = data.mappings || [];
             
-            // 显示渠道信息
             const webChannel = channelsData.find(c => c.channel_type === 'web');
             const matrixChannel = channelsData.find(c => c.channel_type === 'matrix');
             
             document.getElementById('web-channel-info').innerHTML = renderChannelInfo(webChannel, 'web');
             document.getElementById('matrix-channel-info').innerHTML = renderChannelInfo(matrixChannel, 'matrix');
             
-            // 显示绑定关系
             const tbody = document.getElementById('mappings-list');
-            if (mappingsData.length === 0) {
-                tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">暂无绑定</td></tr>';
-                return;
-            }
-            
-            tbody.innerHTML = mappingsData.map(m => `
-                <tr>
-                    <td><span class="badge bg-${m.channel_type === 'web' ? 'info' : 'success'}">${m.channel_name}</span></td>
-                    <td>${m.agent_name}</td>
-                    <td>${m.priority}</td>
-                    <td><span class="badge bg-secondary">${m.mode}</span></td>
-                    <td>${m.conditions ? JSON.stringify(m.conditions) : '-'}</td>
-                    <td>
-                        <button class="btn btn-sm btn-outline-danger" onclick="deleteMapping(${m.id})">
-                            <i class="ri-delete-bin-line"></i>
-                        </button>
-                    </td>
-                </tr>
-            `).join('');
+            if (mappings.length === 0) { tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">暂无绑定</td></tr>'; return; }
+            tbody.innerHTML = mappings.map(m => `<tr>
+                <td><span class="badge bg-info">${m.channel_name}</span></td><td>${m.agent_name}</td><td>${m.priority}</td>
+                <td><span class="badge bg-secondary">${m.mode}</span></td><td>${m.conditions?JSON.stringify(m.conditions):'-'}</td>
+                <td><button class="btn btn-sm btn-outline-danger" onclick="deleteMapping(${m.id})"><i class="ri-delete-bin-line"></i></button></td>
+            </tr>`).join('');
         }
 
         function renderChannelInfo(channel, type) {
-            if (!channel) {
-                return `<p class="text-muted">未配置</p>
-                        <button class="btn btn-sm btn-primary" onclick="createChannel('${type}')">创建渠道</button>`;
-            }
-            
-            const agentsHtml = channel.agent_mappings && channel.agent_mappings.length > 0
+            if (!channel) return '<p class="text-muted">未配置</p>';
+            const agentsHtml = channel.agent_mappings?.length > 0 
                 ? channel.agent_mappings.map(m => `<span class="badge bg-secondary">${m.agent.display_name}</span>`).join(' ')
-                : '<span class="text-muted">未绑定Agent</span>';
-            
+                : '<span class="text-muted">未绑定</span>';
             const configBtn = type === 'matrix' 
-                ? `<button class="btn btn-sm btn-outline-primary mt-2" onclick="editMatrixConfig(${channel.id})">
-                       <i class="ri-settings-3-line"></i> 配置Matrix
-                   </button>`
-                : '';
-            
-            return `
-                <p><strong>名称:</strong> ${channel.name}</p>
-                <p><strong>状态:</strong> ${channel.is_active ? '<span class="badge bg-success">启用</span>' : '<span class="badge bg-secondary">禁用</span>'}</p>
-                <p><strong>绑定Agent:</strong> ${agentsHtml}</p>
-                <button class="btn btn-sm btn-primary" onclick="showBindAgentModal(${channel.id})">绑定Agent</button>
-                ${configBtn}
-            `;
+                ? `<button class="btn btn-sm btn-outline-primary mt-2" onclick="editMatrixConfig(${channel.id})"><i class="ri-settings-3-line"></i> 配置</button>` : '';
+            return `<p><strong>名称:</strong> ${channel.name}</p><p><strong>状态:</strong> ${channel.is_active?'<span class="badge bg-success">启用</span>':'<span class="badge bg-secondary">禁用</span>'}</p>
+                    <p><strong>绑定Agent:</strong> ${agentsHtml}</p><button class="btn btn-sm btn-primary" onclick="showBindAgentModal(${channel.id})">绑定Agent</button>${configBtn}`;
         }
 
         function showBindAgentModal(channelId) {
@@ -1025,7 +432,6 @@
         async function saveBinding() {
             const channelId = document.getElementById('binding-channel-id').value;
             const conditionsStr = document.getElementById('binding-conditions').value;
-            
             const data = {
                 channel_id: parseInt(channelId),
                 agent_id: parseInt(document.getElementById('binding-agent-id').value),
@@ -1033,87 +439,66 @@
                 mode: document.getElementById('binding-mode').value,
                 conditions: conditionsStr ? JSON.parse(conditionsStr) : null
             };
-            
-            const res = await fetch('/api/v2/channels/bind', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify(data)
-            });
-            
+            const res = await fetch('/api/v2/channels/bind', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
             const result = await res.json();
-            if (result.success) {
-                bootstrap.Modal.getInstance(document.getElementById('bindingModal')).hide();
-                loadChannels();
-                alert('绑定成功');
-            } else {
-                alert('绑定失败: ' + result.message);
-            }
+            if (result.success) { bootstrap.Modal.getInstance(document.getElementById('bindingModal')).hide(); loadChannels(); alert('绑定成功'); }
+            else alert('失败: ' + result.message);
         }
 
         async function deleteMapping(id) {
-            if (!confirm('确定解绑此Agent？')) return;
-            
-            const res = await fetch(`/api/v2/channels/unbind/${id}`, {method: 'DELETE'});
+            if (!confirm('确定解绑？')) return;
+            const res = await fetch(`/api/v2/channels/unbind/${id}`, {method:'DELETE'});
             const result = await res.json();
-            
-            if (result.success) {
-                loadChannels();
-                alert('解绑成功');
-            }
+            if (result.success) { loadChannels(); alert('解绑成功'); }
         }
 
         function editMatrixConfig(channelId) {
             const channel = channelsData.find(c => c.id === channelId);
             if (!channel) return;
-            
             const config = channel.config || {};
             document.getElementById('matrix-homeserver').value = config.homeserver || '';
             document.getElementById('matrix-username').value = config.username || '';
             document.getElementById('matrix-password').value = config.password || '';
-            
-            // 保存channel ID用于更新
             document.getElementById('matrix-config-form').dataset.channelId = channelId;
-            
             new bootstrap.Modal(document.getElementById('matrixConfigModal')).show();
         }
 
         async function saveMatrixConfig() {
             const channelId = document.getElementById('matrix-config-form').dataset.channelId;
-            
-            const res = await fetch(`/api/v2/channels/${channelId}/config`, {
-                method: 'PUT',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({
-                    config: {
-                        homeserver: document.getElementById('matrix-homeserver').value,
-                        username: document.getElementById('matrix-username').value,
-                        password: document.getElementById('matrix-password').value
-                    }
-                })
-            });
-            
+            const res = await fetch(`/api/v2/channels/${channelId}/config`, { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ config: { homeserver: document.getElementById('matrix-homeserver').value, username: document.getElementById('matrix-username').value, password: document.getElementById('matrix-password').value } }) });
             const result = await res.json();
-            if (result.success) {
-                bootstrap.Modal.getInstance(document.getElementById('matrixConfigModal')).hide();
-                loadChannels();
-                alert('Matrix配置已更新');
-            }
+            if (result.success) { bootstrap.Modal.getInstance(document.getElementById('matrixConfigModal')).hide(); loadChannels(); alert('配置已更新'); }
         }
 
         // ===== 统计 =====
         async function loadStats() {
             const res = await fetch('/api/admin/stats');
             const data = await res.json();
-            
             document.getElementById('stat-users').textContent = data.total_users || 0;
             document.getElementById('stat-conversations').textContent = data.total_conversations || 0;
             document.getElementById('stat-messages').textContent = data.total_messages || 0;
-            
-            // Agent数量
             const agentsRes = await fetch('/api/v2/agents');
             const agentsData = await agentsRes.json();
             document.getElementById('stat-agents').textContent = (agentsData.agents || []).length;
         }
+
+        // ===== 初始化 =====
+        document.addEventListener('DOMContentLoaded', function() {
+            // 页面切换事件绑定
+            document.querySelectorAll('.sidebar .nav-item').forEach(item => {
+                item.addEventListener('click', () => {
+                    document.querySelectorAll('.sidebar .nav-item').forEach(i => i.classList.remove('active'));
+                    item.classList.add('active');
+                    const page = item.dataset.page;
+                    document.querySelectorAll('.page-section').forEach(s => s.classList.remove('active'));
+                    document.getElementById('page-' + page).classList.add('active');
+                    loadPageData(page);
+                });
+            });
+            // 初始加载
+            loadProviders();
+            loadStats();
+        });
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 85f1fe4..5c18947 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,375 +3,322 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI 对话系统</title>
+    <title>AI 对话系统 v2.0</title>
     <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; height: 100vh; display: flex; }
         
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background: #f5f5f5;
-            height: 100vh;
-            display: flex;
-        }
+        .sidebar { width: 260px; background: #202123; color: #fff; display: flex; flex-direction: column; }
+        .sidebar-header { padding: 16px; border-bottom: 1px solid #4d4d4f; }
+        .new-chat-btn { width: 100%; padding: 12px 16px; background: transparent; border: 1px solid #4d4d4f; border-radius: 6px; color: #fff; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; transition: background 0.2s; }
+        .new-chat-btn:hover { background: #2a2b32; }
+        .conversation-list { flex: 1; overflow-y: auto; padding: 8px; }
+        .conversation-item { padding: 12px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; color: #ececf1; }
+        .conversation-item:hover { background: #2a2b32; }
+        .conversation-item.active { background: #343541; }
+        .conversation-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
+        .conversation-item .delete-btn { opacity: 0; background: none; border: none; color: #999; cursor: pointer; padding: 4px; }
+        .conversation-item:hover .delete-btn { opacity: 1; }
         
-        .sidebar {
-            width: 260px;
-            background: #202123;
-            color: #fff;
-            display: flex;
-            flex-direction: column;
-        }
+        .main-content { flex: 1; display: flex; flex-direction: column; background: #fff; }
+        .chat-header { padding: 16px 24px; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; justify-content: space-between; }
+        .chat-header h1 { font-size: 18px; font-weight: 600; }
+        .header-controls { display: flex; align-items: center; gap: 16px; }
         
-        .sidebar-header {
-            padding: 16px;
-            border-bottom: 1px solid #4d4d4f;
-        }
+        /* Agent选择器 */
+        .agent-selector { display: flex; align-items: center; gap: 8px; }
+        .agent-selector label { font-size: 14px; color: #666; }
+        .agent-selector select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: #fff; cursor: pointer; min-width: 150px; }
+        .agent-selector select:focus { border-color: #10a37f; outline: none; }
         
-        .new-chat-btn {
-            width: 100%;
-            padding: 12px 16px;
-            background: transparent;
-            border: 1px solid #4d4d4f;
-            border-radius: 6px;
-            color: #fff;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-size: 14px;
-            transition: background 0.2s;
-        }
+        .messages-container { flex: 1; overflow-y: auto; padding: 24px; }
+        .message { max-width: 800px; margin: 0 auto 24px; display: flex; gap: 16px; }
+        .message-avatar { width: 36px; height: 36px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
+        .message.user .message-avatar { background: #5436da; color: #fff; }
+        .message.assistant .message-avatar { background: #19c37d; color: #fff; }
+        .message-content { flex: 1; line-height: 1.6; }
+        .message-content pre { background: #1e1e1e; color: #d4d4d4; padding: 16px; border-radius: 8px; overflow-x: auto; margin: 12px 0; }
+        .message-content code { background: #f0f0f0; padding: 2px 6px; border-radius: 4px; font-family: monospace; }
+        .message-content pre code { background: transparent; padding: 0; }
         
-        .new-chat-btn:hover {
-            background: #2a2b32;
-        }
+        /* 思考内容样式 */
+        .thinking-content { background: #f8f9fa; border-left: 3px solid #667eea; padding: 12px 16px; margin: 8px 0; font-size: 14px; color: #666; border-radius: 4px; }
+        .thinking-toggle { cursor: pointer; color: #667eea; font-size: 12px; margin-top: 4px; }
         
-        .conversation-list {
-            flex: 1;
-            overflow-y: auto;
-            padding: 8px;
-        }
+        .input-container { padding: 24px; border-top: 1px solid #e5e5e5; }
+        .input-wrapper { max-width: 800px; margin: 0 auto; display: flex; gap: 12px; align-items: flex-end; }
+        .input-wrapper textarea { flex: 1; padding: 12px 16px; border: 1px solid #ddd; border-radius: 12px; font-size: 16px; resize: none; outline: none; font-family: inherit; max-height: 200px; }
+        .input-wrapper textarea:focus { border-color: #10a37f; }
+        .send-btn { width: 48px; height: 48px; border-radius: 12px; background: #10a37f; border: none; color: #fff; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
+        .send-btn:hover { background: #0d8c6d; }
+        .send-btn:disabled { background: #ccc; cursor: not-allowed; }
         
-        .conversation-item {
-            padding: 12px;
-            border-radius: 6px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 4px;
-            color: #ececf1;
-        }
+        /* 快捷语句 */
+        .quick-phrases { max-width: 800px; margin: 0 auto; padding-top: 12px; }
+        .quick-phrases-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
+        .quick-phrases-header span { font-size: 12px; color: #999; }
+        .quick-phrases-header button { font-size: 12px; background: none; border: 1px solid #ddd; padding: 4px 8px; border-radius: 4px; cursor: pointer; color: #666; }
+        .quick-phrases-header button:hover { background: #f5f5f5; }
+        .quick-phrases-list { display: flex; flex-wrap: wrap; gap: 8px; }
+        .quick-phrase-item { display: flex; align-items: center; gap: 4px; padding: 6px 12px; background: #f0f0f0; border-radius: 16px; cursor: pointer; font-size: 13px; color: #333; transition: all 0.2s; border: 1px solid transparent; }
+        .quick-phrase-item:hover { background: #e8e8e8; border-color: #10a37f; }
+        .quick-phrase-item .delete-btn { opacity: 0; font-size: 12px; color: #999; margin-left: 4px; }
+        .quick-phrase-item:hover .delete-btn { opacity: 1; }
         
-        .conversation-item:hover {
-            background: #2a2b32;
-        }
+        /* 快捷语句管理弹窗 */
+        .phrase-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 1000; }
+        .phrase-modal.show { display: flex; }
+        .phrase-modal-content { background: #fff; padding: 24px; border-radius: 12px; max-width: 400px; width: 90%; }
+        .phrase-modal-content h3 { margin-bottom: 16px; }
+        .phrase-modal-content input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 16px; }
+        .phrase-modal-buttons { display: flex; gap: 12px; justify-content: flex-end; }
+        .phrase-modal-buttons button { padding: 8px 16px; border-radius: 8px; cursor: pointer; }
+        .phrase-modal-buttons .cancel { background: #f5f5f5; border: 1px solid #ddd; }
+        .phrase-modal-buttons .save { background: #10a37f; color: #fff; border: none; }
         
-        .conversation-item.active {
-            background: #343541;
-        }
+        .welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #666; }
+        .welcome h2 { font-size: 28px; margin-bottom: 16px; color: #333; }
+        .welcome p { font-size: 16px; }
         
-        .conversation-item .title {
-            flex: 1;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            font-size: 14px;
-        }
+        .loading::after { content: ''; animation: dots 1.5s infinite; }
+        @keyframes dots { 0%, 20% { content: '.'; } 40% { content: '..'; } 60%, 100% { content: '...'; } }
         
-        .conversation-item .delete-btn {
-            opacity: 0;
-            background: none;
-            border: none;
-            color: #999;
-            cursor: pointer;
-            padding: 4px;
-        }
-        
-        .conversation-item:hover .delete-btn {
-            opacity: 1;
-        }
-        
-        .main-content {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            background: #fff;
-        }
-        
-        .chat-header {
-            padding: 16px 24px;
-            border-bottom: 1px solid #e5e5e5;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-        
-        .chat-header h1 {
-            font-size: 18px;
-            font-weight: 600;
-        }
-        
-        .user-id-display {
-            font-size: 12px;
-            color: #666;
-            background: #f0f0f0;
-            padding: 4px 8px;
-            border-radius: 4px;
-        }
-        
-        .messages-container {
-            flex: 1;
-            overflow-y: auto;
-            padding: 24px;
-        }
-        
-        .message {
-            max-width: 800px;
-            margin: 0 auto 24px;
-            display: flex;
-            gap: 16px;
-        }
-        
-        .message-avatar {
-            width: 36px;
-            height: 36px;
-            border-radius: 4px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-            font-size: 18px;
-        }
-        
-        .message.user .message-avatar {
-            background: #5436da;
-            color: #fff;
-        }
-        
-        .message.assistant .message-avatar {
-            background: #19c37d;
-            color: #fff;
-        }
-        
-        .message-content {
-            flex: 1;
-            line-height: 1.6;
-        }
-        
-        .message-content pre {
-            background: #1e1e1e;
-            color: #d4d4d4;
-            padding: 16px;
-            border-radius: 8px;
-            overflow-x: auto;
-            margin: 12px 0;
-        }
-        
-        .message-content code {
-            background: #f0f0f0;
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-family: monospace;
-        }
-        
-        .message-content pre code {
-            background: transparent;
-            padding: 0;
-        }
-        
-        .input-container {
-            padding: 24px;
-            border-top: 1px solid #e5e5e5;
-        }
-        
-        .input-wrapper {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            gap: 12px;
-            align-items: flex-end;
-        }
-        
-        .input-wrapper textarea {
-            flex: 1;
-            padding: 12px 16px;
-            border: 1px solid #ddd;
-            border-radius: 12px;
-            font-size: 16px;
-            resize: none;
-            outline: none;
-            font-family: inherit;
-            max-height: 200px;
-        }
-        
-        .input-wrapper textarea:focus {
-            border-color: #10a37f;
-        }
-        
-        .send-btn {
-            width: 48px;
-            height: 48px;
-            border-radius: 12px;
-            background: #10a37f;
-            border: none;
-            color: #fff;
-            cursor: pointer;
-            font-size: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: background 0.2s;
-        }
-        
-        .send-btn:hover {
-            background: #0d8c6d;
-        }
-        
-        .send-btn:disabled {
-            background: #ccc;
-            cursor: not-allowed;
-        }
-        
-        .welcome {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            color: #666;
-        }
-        
-        .welcome h2 {
-            font-size: 28px;
-            margin-bottom: 16px;
-            color: #333;
-        }
-        
-        .welcome p {
-            font-size: 16px;
-        }
-        
-        .loading {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            color: #666;
-        }
-        
-        .loading::after {
-            content: '';
-            animation: dots 1.5s infinite;
-        }
-        
-        @keyframes dots {
-            0%, 20% { content: '.'; }
-            40% { content: '..'; }
-            60%, 100% { content: '...'; }
-        }
-        
-        .empty-state {
-            text-align: center;
-            color: #666;
-            padding: 40px;
-        }
-        
-        /* 滚动条样式 */
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-        
-        ::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        ::-webkit-scrollbar-thumb {
-            background: #c1c1c1;
-            border-radius: 4px;
-        }
-        
-        ::-webkit-scrollbar-thumb:hover {
-            background: #a1a1a1;
-        }
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }
     </style>
 </head>
 <body>
     <div class="sidebar">
         <div class="sidebar-header">
             <button class="new-chat-btn" onclick="createNewConversation()">
-                <i class="ri-add-line"></i>
-                新对话
+                <i class="ri-add-line"></i> 新对话
             </button>
         </div>
         <div class="conversation-list" id="conversationList">
-            <div class="empty-state">暂无对话</div>
+            <div class="empty-state" style="text-align:center;color:#999;padding:40px;">暂无对话</div>
         </div>
     </div>
     
     <div class="main-content">
         <div class="chat-header">
-            <h1>AI 对话</h1>
-            <div class="user-id-display" id="userIdDisplay">用户: 加载中...</div>
+            <h1>AI 对话 v2.0</h1>
+            <div class="header-controls">
+                <div class="agent-selector">
+                    <label><i class="ri-robot-line"></i> Agent:</label>
+                    <select id="agentSelect" onchange="switchAgent()">
+                        <option value="">加载中...</option>
+                    </select>
+                </div>
+                <div style="font-size:12px;color:#666;background:#f0f0f0;padding:4px 8px;border-radius:4px;">
+                    <i class="ri-user-line"></i> 主用户
+                </div>
+            </div>
         </div>
         
         <div class="messages-container" id="messagesContainer">
             <div class="welcome">
                 <h2>👋 欢迎使用 AI 对话系统</h2>
-                <p>开始一段新对话吧</p>
+                <p>选择Agent，开始对话吧</p>
             </div>
         </div>
         
         <div class="input-container">
             <div class="input-wrapper">
-                <textarea 
-                    id="messageInput" 
-                    placeholder="输入消息... (Shift+Enter换行, Enter发送)"
-                    rows="1"
-                ></textarea>
+                <textarea id="messageInput" placeholder="输入消息... (Shift+Enter换行)" rows="1"></textarea>
                 <button class="send-btn" id="sendBtn" onclick="sendMessage()">
                     <i class="ri-send-plane-fill"></i>
                 </button>
             </div>
+            
+            <!-- 快捷语句 -->
+            <div class="quick-phrases">
+                <div class="quick-phrases-header">
+                    <span><i class="ri-flashlight-line"></i> 快捷语句</span>
+                    <button onclick="showAddPhraseModal()"><i class="ri-add-line"></i> 添加</button>
+                </div>
+                <div class="quick-phrases-list" id="quickPhrasesList"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 添加快捷语句弹窗 -->
+    <div class="phrase-modal" id="phraseModal">
+        <div class="phrase-modal-content">
+            <h3><i class="ri-add-line"></i> 添加快捷语句</h3>
+            <input type="text" id="newPhraseInput" placeholder="输入快捷语句内容..." maxlength="100">
+            <div class="phrase-modal-buttons">
+                <button class="cancel" onclick="hidePhraseModal()">取消</button>
+                <button class="save" onclick="addPhrase()">添加</button>
+            </div>
         </div>
     </div>
 
     <script>
-        // 全局变量 - 使用固定主用户（与Matrix AI用户相同）
+        // 全局变量
         let ws = null;
-        let userId = 'main_user';  // 固定主用户ID
+        let userId = 'main_user';
         let currentConversationId = null;
+        let currentAgentId = null;
         let conversations = [];
+        let agents = [];
+        let quickPhrases = [];
+        
+        // 默认快捷语句
+        const DEFAULT_phrases = [
+            '请帮我总结一下',
+            '帮我分析这个问题',
+            '用简单的话解释一下',
+            '给我举个例子',
+            '有什么建议吗？'
+        ];
         
         // 初始化
         document.addEventListener('DOMContentLoaded', () => {
-            document.getElementById('userIdDisplay').textContent = '主用户模式';
+            loadAgents();
+            loadQuickPhrases();
             connectWebSocket();
             loadConversations();
             setupTextarea();
-            
-            // 监听最新会话更新
-            setInterval(checkLatestConversation, 2000);
+            setInterval(checkLatestConversation, 3000);
         });
         
-        // 检查最新会话（用于Matrix同步）
+        // 加载Agent列表
+        async function loadAgents() {
+            try {
+                const res = await fetch('/api/v2/agents');
+                const data = await res.json();
+                agents = data.agents || [];
+                
+                const select = document.getElementById('agentSelect');
+                select.innerHTML = agents.filter(a => a.is_active).map(a => 
+                    `<option value="${a.id}" ${a.is_default ? 'selected' : ''}>${a.display_name || a.name}</option>`
+                ).join('');
+                
+                // 设置当前Agent
+                const defaultAgent = agents.find(a => a.is_default) || agents[0];
+                if (defaultAgent) currentAgentId = defaultAgent.id;
+            } catch (e) {
+                console.error('加载Agent失败:', e);
+                document.getElementById('agentSelect').innerHTML = '<option value="">加载失败</option>';
+            }
+        }
+        
+        // 切换Agent
+        function switchAgent() {
+            const newAgentId = document.getElementById('agentSelect').value;
+            if (newAgentId && newAgentId !== currentAgentId) {
+                currentAgentId = parseInt(newAgentId);
+                console.log('切换Agent:', currentAgentId);
+                
+                // 发送切换消息到WebSocket
+                if (ws && ws.readyState === WebSocket.OPEN) {
+                    ws.send(JSON.stringify({
+                        action: 'switch_agent',
+                        agent_id: currentAgentId
+                    }));
+                }
+                
+                // 显示切换提示
+                const agent = agents.find(a => a.id === currentAgentId);
+                if (agent) {
+                    showAgentSwitchNotice(agent.display_name || agent.name);
+                }
+            }
+        }
+        
+        // 显示Agent切换提示
+        function showAgentSwitchNotice(agentName) {
+            const container = document.getElementById('messagesContainer');
+            const notice = document.createElement('div');
+            notice.className = 'message assistant';
+            notice.innerHTML = `
+                <div class="message-avatar">🔄</div>
+                <div class="message-content" style="color:#667eea;font-size:14px;">
+                    已切换到 Agent: <strong>${agentName}</strong>，开始新对话生效
+                </div>
+            `;
+            container.appendChild(notice);
+            container.scrollTop = container.scrollHeight;
+            
+            // 3秒后移除提示
+            setTimeout(() => notice.remove(), 3000);
+        }
+        
+        // 加载快捷语句
+        function loadQuickPhrases() {
+            const saved = localStorage.getItem('quickPhrases');
+            quickPhrases = saved ? JSON.parse(saved) : DEFAULT_phrrases;
+            renderQuickPhrases();
+        }
+        
+        // 渲染快捷语句
+        function renderQuickPhrases() {
+            const container = document.getElementById('quickPhrasesList');
+            if (quickPhrases.length === 0) {
+                container.innerHTML = '<span style="color:#999;font-size:12px;">点击"添加"创建快捷语句</span>';
+                return;
+            }
+            container.innerHTML = quickPhrases.map((p, i) => `
+                <div class="quick-phrase-item" onclick="usePhrase(${i})">
+                    <span>${p}</span>
+                    <span class="delete-btn" onclick="deletePhrase(${i}, event)"><i class="ri-close-line"></i></span>
+                </div>
+            `).join('');
+        }
+        
+        // 使用快捷语句
+        function usePhrase(index) {
+            const input = document.getElementById('messageInput');
+            input.value = quickPhrases[index];
+            input.focus();
+        }
+        
+        // 删除快捷语句
+        function deletePhrase(index, event) {
+            event.stopPropagation();
+            quickPhrases.splice(index, 1);
+            localStorage.setItem('quickPhrases', JSON.stringify(quickPhrases));
+            renderQuickPhrases();
+        }
+        
+        // 显示添加弹窗
+        function showAddPhraseModal() {
+            document.getElementById('phraseModal').classList.add('show');
+            document.getElementById('newPhraseInput').value = '';
+            document.getElementById('newPhraseInput').focus();
+        }
+        
+        // 隐藏弹窗
+        function hidePhraseModal() {
+            document.getElementById('phraseModal').classList.remove('show');
+        }
+        
+        // 添加快捷语句
+        function addPhrase() {
+            const input = document.getElementById('newPhraseInput');
+            const phrase = input.value.trim();
+            if (phrase) {
+                quickPhrases.push(phrase);
+                localStorage.setItem('quickPhrases', JSON.stringify(quickPhrases));
+                renderQuickPhrases();
+                hidePhraseModal();
+            }
+        }
+        
+        // 检查最新会话
         async function checkLatestConversation() {
             try {
-                const response = await fetch('/api/conversations/latest');
-                if (response.ok) {
-                    const data = await response.json();
+                const res = await fetch('/api/conversations/latest');
+                if (res.ok) {
+                    const data = await res.json();
                     if (data.conversation && data.conversation.id !== currentConversationId) {
-                        // 有新会话，自动切换
                         selectConversation(data.conversation.id);
                     }
                 }
-            } catch (error) {
-                // 忽略错误
-            }
+            } catch (e) {}
         }
         
         // WebSocket连接
@@ -379,23 +326,10 @@
             const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
             ws = new WebSocket(`${protocol}//${window.location.host}/ws/${userId}`);
             
-            ws.onopen = () => {
-                console.log('WebSocket已连接');
-            };
-            
-            ws.onmessage = (event) => {
-                const data = JSON.parse(event.data);
-                handleWebSocketMessage(data);
-            };
-            
-            ws.onclose = () => {
-                console.log('WebSocket已断开，3秒后重连...');
-                setTimeout(connectWebSocket, 3000);
-            };
-            
-            ws.onerror = (error) => {
-                console.error('WebSocket错误:', error);
-            };
+            ws.onopen = () => console.log('WebSocket已连接');
+            ws.onmessage = (event) => handleWebSocketMessage(JSON.parse(event.data));
+            ws.onclose = () => setTimeout(connectWebSocket, 3000);
+            ws.onerror = (e) => console.error('WebSocket错误:', e);
         }
         
         // 处理WebSocket消息
@@ -404,40 +338,39 @@
                 case 'history':
                     displayHistory(data.messages);
                     break;
-                    
                 case 'conversation_created':
                     currentConversationId = data.conversation_id;
                     loadConversations();
                     break;
-                    
                 case 'new_conversation':
-                    // Matrix创建了新会话，自动切换
                     currentConversationId = data.conversation_id;
                     loadConversations();
-                    // 清空消息区域
-                    const container = document.getElementById('messagesContainer');
-                    container.innerHTML = `
-                        <div class="welcome">
-                            <h2>👋 开始新对话</h2>
-                            <p>输入您的问题开始对话</p>
-                        </div>
-                    `;
+                    clearMessages();
+                    break;
+                case 'agent_switched':
+                    currentAgentId = data.agent_id;
+                    console.log('Agent已切换:', data.agent_name);
+                    break;
+                case 'thinking_start':
+                    showThinkingIndicator();
+                    break;
+                case 'thinking_content':
+                    updateThinkingContent(data.content);
+                    break;
+                case 'thinking_end':
+                    hideThinkingIndicator();
                     break;
-                    
                 case 'user_message':
                     appendMessage('user', data.message.content, data.message.source);
-                    // 如果消息来自Matrix，切换到对应会话
                     if (data.message.source === 'matrix' && data.conversation_id) {
                         currentConversationId = data.conversation_id;
                         renderConversations();
                     }
                     break;
-                    
                 case 'assistant_message':
-                    appendMessage('assistant', data.message.content, data.message.source);
+                    appendMessage('assistant', data.message.content, data.message.source, data.message.thinking_content, data.message.agent_name);
                     document.getElementById('sendBtn').disabled = false;
                     break;
-                    
                 case 'error':
                     alert(data.message);
                     document.getElementById('sendBtn').disabled = false;
@@ -445,39 +378,113 @@
             }
         }
         
+        // 显示思考指示器
+        function showThinkingIndicator() {
+            const container = document.getElementById('messagesContainer');
+            const thinking = document.createElement('div');
+            thinking.id = 'thinkingIndicator';
+            thinking.className = 'message assistant';
+            thinking.innerHTML = `
+                <div class="message-avatar">🤔</div>
+                <div class="message-content" style="color:#667eea;">
+                    <span class="loading">正在思考</span>
+                </div>
+            `;
+            container.appendChild(thinking);
+            container.scrollTop = container.scrollHeight;
+        }
+        
+        // 更新思考内容
+        function updateThinkingContent(content) {
+            const indicator = document.getElementById('thinkingIndicator');
+            if (indicator) {
+                indicator.querySelector('.message-content').innerHTML = `
+                    <div class="thinking-content">${formatContent(content)}</div>
+                `;
+            }
+        }
+        
+        // 隐藏思考指示器
+        function hideThinkingIndicator() {
+            const indicator = document.getElementById('thinkingIndicator');
+            if (indicator) indicator.remove();
+        }
+        
+        // 清空消息
+        function clearMessages() {
+            document.getElementById('messagesContainer').innerHTML = `
+                <div class="welcome">
+                    <h2>👋 开始新对话</h2>
+                    <p>当前Agent: ${getAgentName()}</p>
+                </div>
+            `;
+        }
+        
+        // 获取当前Agent名称
+        function getAgentName() {
+            const agent = agents.find(a => a.id === currentAgentId);
+            return agent ? (agent.display_name || agent.name) : '默认助手';
+        }
+        
         // 显示历史消息
         function displayHistory(messages) {
             const container = document.getElementById('messagesContainer');
             container.innerHTML = '';
-            
             messages.forEach(msg => {
-                appendMessage(msg.role, msg.content, msg.source);
+                appendMessage(msg.role, msg.content, msg.source, msg.thinking_content);
             });
         }
         
-        // 添加消息到界面
-        function appendMessage(role, content, source = 'web') {
+        // 添加消息
+        function appendMessage(role, content, source = 'web', thinking = null, agentName = null) {
             const container = document.getElementById('messagesContainer');
+            container.querySelector('.welcome')?.remove();
+            document.getElementById('thinkingIndicator')?.remove();
             
-            // 移除欢迎界面
-            const welcome = container.querySelector('.welcome');
-            if (welcome) welcome.remove();
-            
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `message ${role}`;
+            const div = document.createElement('div');
+            div.className = `message ${role}`;
             
             const avatar = role === 'user' ? '👤' : '🤖';
+            let html = `<div class="message-avatar">${avatar}</div><div class="message-content">`;
             
-            messageDiv.innerHTML = `
-                <div class="message-avatar">${avatar}</div>
-                <div class="message-content">${formatContent(content)}</div>
-            `;
+            // 思考内容
+            if (thinking) {
+                html += `<div class="thinking-content" id="thinking-${Date.now()}">
+                    <strong>💭 思考过程:</strong><br>${formatContent(thinking)}
+                    <div class="thinking-toggle" onclick="toggleThinking(this)">收起</div>
+                </div>`;
+            }
             
-            container.appendChild(messageDiv);
+            // 主要内容
+            html += formatContent(content);
+            
+            // Agent信息
+            if (role === 'assistant' && agentName) {
+                html += `<div style="font-size:12px;color:#999;margin-top:8px;"><i class="ri-robot-line"></i> ${agentName}</div>`;
+            }
+            
+            html += '</div>';
+            div.innerHTML = html;
+            container.appendChild(div);
             container.scrollTop = container.scrollHeight;
         }
         
-        // 格式化消息内容（简单的Markdown支持）
+        // 切换思考内容显示
+        function toggleThinking(btn) {
+            const content = btn.parentElement;
+            const isCollapsed = content.style.maxHeight;
+            if (isCollapsed) {
+                content.style.maxHeight = '';
+                content.style.overflow = '';
+                btn.textContent = '收起';
+            } else {
+                content.style.maxHeight = '60px';
+                content.style.overflow = 'hidden';
+                btn.textContent = '展开';
+            }
+        }
+        
+        // 格式化内容
         function formatContent(content) {
             return content
                 .replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>')
@@ -488,125 +495,81 @@
         // 加载会话列表
         async function loadConversations() {
             try {
-                const response = await fetch('/api/conversations');
-                const data = await response.json();
-                conversations = data.conversations;
+                const res = await fetch('/api/conversations');
+                const data = await res.json();
+                conversations = data.conversations || [];
                 renderConversations();
-                
-                // 如果没有当前会话且有会话列表，自动选择最新的
                 if (!currentConversationId && conversations.length > 0) {
                     selectConversation(conversations[0].id);
                 }
-            } catch (error) {
-                console.error('加载会话失败:', error);
-            }
+            } catch (e) { console.error('加载会话失败:', e); }
         }
         
         // 渲染会话列表
         function renderConversations() {
             const container = document.getElementById('conversationList');
-            
             if (conversations.length === 0) {
-                container.innerHTML = '<div class="empty-state">暂无对话</div>';
+                container.innerHTML = '<div style="text-align:center;color:#999;padding:40px;">暂无对话</div>';
                 return;
             }
-            
-            container.innerHTML = conversations.map(conv => `
-                <div class="conversation-item ${conv.id === currentConversationId ? 'active' : ''}" 
-                     onclick="selectConversation('${conv.id}')">
-                    <span class="title">${conv.title}</span>
-                    <button class="delete-btn" onclick="deleteConversation('${conv.id}', event)">
-                        <i class="ri-delete-bin-line"></i>
-                    </button>
+            container.innerHTML = conversations.map(c => `
+                <div class="conversation-item ${c.id === currentConversationId ? 'active' : ''}" onclick="selectConversation('${c.id}')">
+                    <span class="title">${c.title}</span>
+                    <button class="delete-btn" onclick="deleteConversation('${c.id}', event)"><i class="ri-delete-bin-line"></i></button>
                 </div>
             `).join('');
         }
         
         // 选择会话
-        function selectConversation(conversationId) {
-            currentConversationId = conversationId;
+        function selectConversation(id) {
+            currentConversationId = id;
             renderConversations();
-            
-            if (ws && ws.readyState === WebSocket.OPEN) {
-                ws.send(JSON.stringify({
-                    action: 'select_conversation',
-                    conversation_id: conversationId
-                }));
+            if (ws?.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({ action: 'select_conversation', conversation_id: id }));
             }
         }
         
         // 创建新会话
         async function createNewConversation() {
             try {
-                const response = await fetch('/api/conversations', {
-                    method: 'POST'
-                });
-                const data = await response.json();
+                const res = await fetch('/api/conversations', { method: 'POST' });
+                const data = await res.json();
                 currentConversationId = data.id;
-                
-                // 清空消息区域
-                const container = document.getElementById('messagesContainer');
-                container.innerHTML = `
-                    <div class="welcome">
-                        <h2>👋 开始新对话</h2>
-                        <p>输入您的问题开始对话</p>
-                    </div>
-                `;
-                
+                clearMessages();
                 loadConversations();
-            } catch (error) {
-                console.error('创建会话失败:', error);
-            }
+            } catch (e) { console.error('创建会话失败:', e); }
         }
         
         // 删除会话
-        async function deleteConversation(conversationId, event) {
+        async function deleteConversation(id, event) {
             event.stopPropagation();
-            
-            if (!confirm('确定删除这个对话？')) return;
-            
+            if (!confirm('确定删除？')) return;
             try {
-                await fetch(`/api/conversations/${conversationId}`, {
-                    method: 'DELETE'
-                });
-                
-                if (conversationId === currentConversationId) {
+                await fetch(`/api/conversations/${id}`, { method: 'DELETE' });
+                if (id === currentConversationId) {
                     currentConversationId = null;
-                    const container = document.getElementById('messagesContainer');
-                    container.innerHTML = `
-                        <div class="welcome">
-                            <h2>👋 欢迎使用 AI 对话系统</h2>
-                            <p>开始一段新对话吧</p>
-                        </div>
-                    `;
+                    clearMessages();
                 }
-                
                 loadConversations();
-            } catch (error) {
-                console.error('删除会话失败:', error);
-            }
+            } catch (e) { console.error('删除失败:', e); }
         }
         
         // 发送消息
         function sendMessage() {
             const input = document.getElementById('messageInput');
-            const message = input.value.trim();
+            const msg = input.value.trim();
+            if (!msg) return;
             
-            if (!message) return;
-            
-            // 禁用发送按钮
             document.getElementById('sendBtn').disabled = true;
-            
-            // 清空输入框
             input.value = '';
             input.style.height = 'auto';
             
-            // 发送WebSocket消息
-            if (ws && ws.readyState === WebSocket.OPEN) {
+            if (ws?.readyState === WebSocket.OPEN) {
                 ws.send(JSON.stringify({
                     action: 'chat',
-                    message: message,
-                    conversation_id: currentConversationId
+                    message: msg,
+                    conversation_id: currentConversationId,
+                    agent_id: currentAgentId
                 }));
             }
         }
@@ -614,19 +577,23 @@
         // 设置文本框
         function setupTextarea() {
             const textarea = document.getElementById('messageInput');
-            
             textarea.addEventListener('keydown', (e) => {
                 if (e.key === 'Enter' && !e.shiftKey) {
                     e.preventDefault();
                     sendMessage();
                 }
             });
-            
             textarea.addEventListener('input', () => {
                 textarea.style.height = 'auto';
                 textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px';
             });
         }
+        
+        // 弹窗键盘事件
+        document.getElementById('newPhraseInput').addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') addPhrase();
+            if (e.key === 'Escape') hidePhraseModal();
+        });
     </script>
 </body>
 </html>
\ No newline at end of file