npm - myagent-ai - Versions diffs - 1.0.0 - Mend

myagent-ai 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (486) hide show

package/web/ui/chat.html ADDED Viewed

@@ -0,0 +1,3235 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>MyAgent - AI 助手</title>
+<style>
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#f7f8fa;--bg2:#ffffff;--bg3:#f0f1f3;--bg4:#e5e7eb;--bg5:#d1d5db;
+  --text:#1a1a2e;--text2:#6b7280;--text3:#9ca3af;
+  --accent:#4f46e5;--accent2:#6366f1;--accent-light:#eef2ff;--accent-dark:#3730a3;
+  --user-bubble:#4f46e5;--user-text:#ffffff;
+  --bot-bubble:#ffffff;--bot-text:#1a1a2e;
+  --ok:#10b981;--warn:#f59e0b;--danger:#ef4444;--info:#3b82f6;
+  --border:#e5e7eb;--border-light:#f0f1f3;
+  --radius:12px;--radius-sm:8px;--radius-xs:6px;
+  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
+  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
+  --shadow-lg:0 10px 25px rgba(0,0,0,.08);
+  --sidebar-w:280px;--header-h:60px;--agent-panel-w:300px;
+  --transition:all .2s ease;
+}
+html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,'Noto Sans SC',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;overflow:hidden}
+a{color:var(--accent);text-decoration:none}
+button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
+input,textarea,select{font:inherit}
+/* ── Layout ── */
+.app{display:flex;height:100vh;width:100vw;overflow:hidden}
+/* ── Sidebar ── */
+.sidebar{
+  width:var(--sidebar-w);min-width:var(--sidebar-w);height:100vh;
+  background:var(--bg2);border-right:1px solid var(--border);
+  display:flex;flex-direction:column;z-index:20;
+  transition:transform .3s ease;
+}
+.sidebar.hidden{transform:translateX(-100%);position:absolute;left:0;top:0}
+.sidebar-header{
+  padding:16px 20px;border-bottom:1px solid var(--border-light);
+  display:flex;align-items:center;gap:12px;min-height:var(--header-h);
+}
+.sidebar-logo{
+  width:36px;height:36px;border-radius:10px;
+  background:linear-gradient(135deg,var(--accent),#7c3aed);
+  display:grid;place-items:center;flex-shrink:0;
+}
+.sidebar-logo svg{width:20px;height:20px;color:#fff}
+.sidebar-title{font-size:16px;font-weight:700;color:var(--text)}
+.sidebar-subtitle{font-size:11px;color:var(--text3)}
+.new-chat-btn{
+  margin:12px 16px 8px;padding:10px 16px;border-radius:var(--radius-sm);
+  background:var(--accent);color:#fff;font-size:13px;font-weight:600;
+  display:flex;align-items:center;gap:8px;transition:var(--transition);
+}
+.new-chat-btn:hover{background:var(--accent2);transform:translateY(-1px)}
+.new-chat-btn svg{width:16px;height:16px}
+.sidebar-search{
+  margin:4px 16px 8px;position:relative;
+}
+.sidebar-search input{
+  width:100%;padding:8px 12px 8px 34px;border-radius:var(--radius-xs);
+  border:1px solid var(--border);background:var(--bg);font-size:13px;
+  outline:none;transition:border-color .2s;
+}
+.sidebar-search input:focus{border-color:var(--accent)}
+.sidebar-search svg{
+  position:absolute;left:10px;top:50%;transform:translateY(-50%);
+  width:16px;height:16px;color:var(--text3);
+}
+.session-list{padding:4px 8px}
+.session-item{
+  display:flex;align-items:center;gap:10px;padding:10px 12px;
+  border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);
+  position:relative;
+}
+.session-item:hover{background:var(--bg3)}
+.session-item.active{background:var(--accent-light);color:var(--accent2)}
+.session-item.active::before{
+  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
+  width:3px;height:24px;background:var(--accent);border-radius:0 2px 2px 0;
+}
+.session-icon{width:32px;height:32px;border-radius:8px;background:var(--bg3);
+  display:grid;place-items:center;flex-shrink:0;font-size:14px}
+.session-item.active .session-icon{background:var(--accent-light);color:var(--accent)}
+.session-info{flex:1;min-width:0}
+.session-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.session-preview{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
+.session-meta{font-size:10px;color:var(--text3);flex-shrink:0;text-align:right}
+.session-delete{
+  opacity:0;position:absolute;right:8px;top:50%;transform:translateY(-50%);
+  width:24px;height:24px;border-radius:4px;display:grid;place-items:center;
+  background:var(--bg2);transition:var(--transition);font-size:12px;color:var(--text3);
+}
+.session-item:hover .session-delete{opacity:1}
+.session-delete:hover{background:var(--danger);color:#fff}
+.sidebar-footer{
+  padding:12px 16px;border-top:1px solid var(--border-light);
+  display:flex;flex-direction:column;gap:6px;
+}
+.sidebar-footer-btn{
+  display:flex;align-items:center;gap:10px;padding:8px 12px;
+  border-radius:var(--radius-xs);font-size:13px;color:var(--text2);
+  transition:var(--transition);
+}
+.sidebar-footer-btn:hover{background:var(--bg3);color:var(--text)}
+.sidebar-footer-btn svg{width:16px;height:16px}
+.model-badge{
+  margin-left:auto;font-size:10px;padding:2px 8px;border-radius:10px;
+  background:var(--accent-light);color:var(--accent);font-weight:600;
+}
+/* ── Main ── */
+.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:var(--bg)}
+.main-header{
+  height:var(--header-h);min-height:var(--header-h);
+  display:flex;align-items:center;gap:12px;padding:0 20px;
+  background:var(--bg2);border-bottom:1px solid var(--border-light);
+}
+.toggle-sidebar{width:36px;height:36px;border-radius:var(--radius-xs);
+  display:grid;place-items:center;color:var(--text2);transition:var(--transition)}
+.toggle-sidebar:hover{background:var(--bg3);color:var(--text)}
+.toggle-sidebar svg{width:20px;height:20px}
+.main-title{flex:1;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
+.main-title .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
+.header-actions{display:flex;gap:6px}
+.header-btn{width:36px;height:36px;border-radius:var(--radius-xs);
+  display:grid;place-items:center;color:var(--text2);transition:var(--transition)}
+.header-btn:hover{background:var(--bg3);color:var(--text)}
+.header-btn svg{width:18px;height:18px}
+/* ── Messages ── */
+.messages-container{flex:1;overflow-y:auto;padding:20px}
+.messages-inner{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
+.message-row{display:flex;gap:10px;animation:msgIn .25s ease-out}
+@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+.message-row.user{flex-direction:row-reverse}
+.message-avatar{
+  width:32px;height:32px;border-radius:8px;flex-shrink:0;
+  display:grid;place-items:center;font-size:14px;
+}
+.message-row.user .message-avatar{background:var(--accent);color:#fff}
+.message-row.assistant .message-avatar{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff}
+.message-bubble{
+  max-width:70%;padding:12px 16px;border-radius:var(--radius);
+  font-size:14px;line-height:1.7;word-break:break-word;
+  box-shadow:var(--shadow-sm);
+}
+.message-row.user .message-bubble{
+  background:var(--user-bubble);color:var(--user-text);
+  border-bottom-right-radius:4px;
+}
+.message-row.assistant .message-bubble{
+  background:var(--bot-bubble);color:var(--bot-text);
+  border:1px solid var(--border-light);
+  border-bottom-left-radius:4px;
+}
+.message-bubble p{margin-bottom:8px}
+.message-bubble p:last-child{margin-bottom:0}
+.message-bubble code{
+  background:rgba(0,0,0,.06);padding:2px 6px;border-radius:4px;
+  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;font-size:12.5px;
+}
+.message-row.user .message-bubble code{background:rgba(255,255,255,.2)}
+.message-bubble pre{
+  background:#1e1e2e;color:#cdd6f4;padding:14px 16px;border-radius:var(--radius-sm);
+  overflow-x:auto;margin:8px 0;font-size:12.5px;line-height:1.5;
+  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
+}
+.message-bubble pre code{background:none;padding:0;font-size:inherit}
+.message-bubble strong{font-weight:600}
+.message-bubble em{font-style:italic}
+.message-bubble ul,.message-bubble ol{padding-left:20px;margin:6px 0}
+.message-bubble li{margin:3px 0}
+.message-bubble blockquote{
+  border-left:3px solid var(--accent);padding:4px 12px;margin:8px 0;
+  color:var(--text2);font-style:italic;
+}
+.message-time{font-size:10px;color:var(--text3);margin-top:4px}
+/* Execution Progress Timer */
+.exec-timer{
+  display:flex;align-items:center;gap:10px;
+  padding:8px 14px;margin:4px 0 8px 0;
+  background:var(--bg2);border:1px solid var(--border-light);
+  border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);
+  animation:msgIn .2s ease-out;
+  max-width:400px;
+}
+.exec-timer-icon{
+  width:28px;height:28px;border-radius:6px;
+  background:linear-gradient(135deg,var(--accent),#7c3aed);
+  display:grid;place-items:center;flex-shrink:0;
+  font-size:14px;
+}
+.exec-timer-body{flex:1;min-width:0}
+.exec-timer-title{
+  font-size:11px;font-weight:600;color:var(--text2);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  margin-bottom:3px;display:flex;align-items:center;gap:6px;
+}
+.exec-timer-title .pulse-dot{
+  width:6px;height:6px;border-radius:50%;background:var(--ok);
+  animation:pulseDot 1.2s infinite;
+}
+.exec-timer-title .pulse-dot.timeout{background:var(--danger)}
+@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.3}}
+.exec-timer-times{
+  display:flex;gap:12px;font-size:11px;color:var(--text3);
+}
+.exec-timer-time{
+  display:flex;align-items:baseline;gap:3px;
+}
+.exec-timer-time .time-val{
+  font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;
+  color:var(--text);
+  min-width:48px;
+}
+.exec-timer-time .time-unit{font-size:10px;color:var(--text3)}
+.exec-timer-time.timeout .time-val{color:var(--danger);animation:pulseDot 1s infinite}
+.exec-timer-bar{
+  height:3px;background:var(--bg4);border-radius:2px;
+  margin-top:4px;overflow:hidden;
+}
+.exec-timer-bar-fill{
+  height:100%;border-radius:2px;
+  background:linear-gradient(90deg,var(--ok),var(--info));
+  transition:width .3s ease;
+}
+.exec-timer-bar-fill.warning{background:linear-gradient(90deg,var(--warn),var(--danger))}
+.exec-timer-bar-fill.danger{background:var(--danger);animation:barPulse 1s infinite}
+@keyframes barPulse{0%,100%{opacity:1}50%{opacity:.6}}
+.exec-timer-code{
+  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
+  font-size:10px;color:var(--text3);margin-top:3px;
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  background:var(--bg);padding:2px 6px;border-radius:3px;
+}
+/* Typing indicator */
+.typing-indicator{
+  display:flex;gap:10px;animation:msgIn .25s ease-out;
+}
+.typing-bubble{
+  background:var(--bot-bubble);border:1px solid var(--border-light);
+  border-radius:var(--radius);border-bottom-left-radius:4px;
+  padding:14px 20px;display:flex;align-items:center;gap:5px;
+  box-shadow:var(--shadow-sm);
+}
+.typing-dot{
+  width:8px;height:8px;border-radius:50%;background:var(--text3);
+  animation:typingBounce 1.4s infinite;
+}
+.typing-dot:nth-child(2){animation-delay:.2s}
+.typing-dot:nth-child(3){animation-delay:.4s}
+@keyframes typingBounce{
+  0%,60%,100%{transform:translateY(0);opacity:.4}
+  30%{transform:translateY(-6px);opacity:1}
+}
+/* Empty state */
+.empty-state{
+  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
+  padding:40px 20px;color:var(--text3);text-align:center;
+}
+.empty-icon{font-size:56px;margin-bottom:16px;opacity:.5}
+.empty-title{font-size:18px;font-weight:600;color:var(--text2);margin-bottom:8px}
+.empty-desc{font-size:13px;max-width:400px;line-height:1.6;margin-bottom:24px}
+.quick-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
+.quick-action{
+  padding:8px 16px;border-radius:20px;background:var(--bg2);
+  border:1px solid var(--border);font-size:13px;color:var(--text2);
+  transition:var(--transition);
+}
+.quick-action:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
+/* ── Input Area ── */
+.input-area{
+  padding:16px 20px;background:var(--bg2);border-top:1px solid var(--border-light);
+}
+.input-wrapper{max-width:800px;margin:0 auto}
+.input-box{
+  display:flex;align-items:flex-end;gap:10px;
+  background:var(--bg);border:1px solid var(--border);
+  border-radius:var(--radius);padding:8px 12px;
+  transition:border-color .2s,box-shadow .2s;
+}
+.input-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
+.input-box textarea{
+  flex:1;border:none;background:none;outline:none;resize:none;
+  font-size:14px;line-height:1.5;max-height:150px;min-height:24px;
+  padding:4px 0;color:var(--text);
+}
+.input-box textarea::placeholder{color:var(--text3)}
+.send-btn{
+  width:36px;height:36px;border-radius:var(--radius-sm);
+  background:var(--accent);color:#fff;
+  display:grid;place-items:center;flex-shrink:0;
+  transition:var(--transition);
+}
+.send-btn:hover{background:var(--accent2)}
+.send-btn:disabled{opacity:.35;cursor:default}
+.send-btn svg{width:18px;height:18px}
+.stop-btn{
+  width:36px;height:36px;border-radius:var(--radius-sm);
+  background:var(--danger);color:#fff;
+  display:grid;place-items:center;flex-shrink:0;
+  transition:var(--transition);animation:pulse 1.5s infinite;
+}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
+.stop-btn svg{width:14px;height:14px}
+.input-hint{font-size:11px;color:var(--text3);text-align:center;margin-top:6px}
+/* ── Toast ── */
+.toast-container{position:fixed;top:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:8px}
+.toast{
+  padding:12px 20px;border-radius:var(--radius-sm);font-size:13px;
+  animation:toastIn .3s ease;box-shadow:var(--shadow-lg);max-width:360px;
+  display:flex;align-items:center;gap:8px;
+}
+@keyframes toastIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
+.toast-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
+.toast-success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
+.toast-info{background:#eff6ff;color:#1e3a5f;border:1px solid #bfdbfe}
+/* ── Confirm Dialog ── */
+.modal-overlay{
+  position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:100;
+  display:flex;align-items:center;justify-content:center;
+  animation:fadeIn .15s ease;
+}
+@keyframes fadeIn{from{opacity:0}to{opacity:1}}
+.modal{
+  background:var(--bg2);border-radius:var(--radius);padding:24px;
+  width:90%;max-width:400px;box-shadow:var(--shadow-lg);
+}
+.modal h3{font-size:16px;font-weight:600;margin-bottom:8px}
+.modal p{font-size:13px;color:var(--text2);margin-bottom:20px}
+.modal-actions{display:flex;gap:8px;justify-content:flex-end}
+.modal-btn{
+  padding:8px 20px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;
+  transition:var(--transition);
+}
+.modal-btn-cancel{background:var(--bg3);color:var(--text2)}
+.modal-btn-cancel:hover{background:var(--bg4)}
+.modal-btn-danger{background:var(--danger);color:#fff}
+.modal-btn-danger:hover{background:#dc2626}
+/* Scrollbar */
+::-webkit-scrollbar{width:6px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}
+::-webkit-scrollbar-thumb:hover{background:var(--bg5)}
+/* ── Welcome Message ── */
+.welcome-card{
+  background:var(--bg2);border:1px solid var(--border-light);
+  border-radius:var(--radius);padding:24px;margin:8px 0;
+}
+.welcome-card h2{font-size:18px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}
+.welcome-card h2 .emoji{font-size:24px}
+.welcome-card .subtitle{font-size:13px;color:var(--text2);margin-bottom:16px}
+.capabilities{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
+.capability{
+  display:flex;align-items:center;gap:8px;padding:8px 12px;
+  border-radius:var(--radius-xs);background:var(--bg);font-size:12px;color:var(--text2);
+}
+.capability .cap-icon{font-size:16px}
+/* ══════════════════════════════════════════════════════
+   ── Agent Panel (RIGHT) ──
+   ══════════════════════════════════════════════════════ */
+.agent-panel{
+  width:var(--agent-panel-w);min-width:0;height:100vh;
+  background:var(--bg2);border-left:1px solid var(--border);
+  display:flex;flex-direction:column;z-index:15;
+  transition:width .35s cubic-bezier(.4,0,.2,1),min-width .35s cubic-bezier(.4,0,.2,1),opacity .25s ease;
+  overflow:hidden;
+}
+.agent-panel.collapsed{
+  width:0;min-width:0;border-left:none;
+}
+.agent-panel-header{
+  padding:16px 16px 12px;border-bottom:1px solid var(--border-light);
+  display:flex;align-items:center;gap:10px;min-height:var(--header-h);
+  flex-shrink:0;
+}
+.agent-panel-header h3{
+  flex:1;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;
+  white-space:nowrap;
+}
+.agent-panel-header h3 .agents-emoji{font-size:18px}
+.agent-create-btn{
+  width:30px;height:30px;border-radius:var(--radius-xs);
+  background:var(--accent);color:#fff;
+  display:grid;place-items:center;flex-shrink:0;
+  transition:var(--transition);font-size:16px;font-weight:600;
+}
+.agent-create-btn:hover{background:var(--accent2);transform:scale(1.05)}
+.agent-create-btn svg{width:16px;height:16px}
+/* Agent list */
+.agent-list{flex:1;overflow-y:auto;padding:8px 12px}
+.agent-card{
+  display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
+  border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);
+  position:relative;margin-bottom:4px;
+  border:1px solid transparent;
+}
+.agent-card:hover{background:var(--bg3);border-color:var(--border-light)}
+.agent-card.active{
+  background:var(--accent-light);
+  border-color:var(--accent);
+}
+.agent-card.active::after{
+  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
+  width:3px;height:24px;background:var(--accent);border-radius:2px 0 0 2px;
+}
+/* Agent tree indent */
+.agent-tree-children{margin-left:16px;border-left:1px dashed var(--border-light);padding-left:4px}
+.agent-tree-toggle{
+  width:18px;height:18px;border-radius:3px;
+  display:inline-grid;place-items:center;font-size:10px;
+  color:var(--text3);flex-shrink:0;transition:var(--transition)
+}
+.agent-tree-toggle:hover{background:var(--bg4);color:var(--text)}
+.agent-tree-toggle.expanded{transform:rotate(90deg)}
+/* Execution mode badge */
+.exec-badge{
+  font-size:9px;font-weight:600;padding:1px 5px;border-radius:4px;
+  white-space:nowrap;flex-shrink:0;
+}
+.exec-badge.local{background:#dcfce7;color:#166534}
+.exec-badge.sandbox{background:#fef3c7;color:#92400e}
+/* Agent add-child button (shows on hover) */
+.agent-add-child-btn{
+  opacity:0;position:absolute;bottom:2px;right:6px;
+  width:20px;height:20px;border-radius:4px;
+  display:grid;place-items:center;font-size:12px;
+  color:var(--text3);transition:var(--transition)
+}
+.agent-card:hover .agent-add-child-btn{opacity:1}
+.agent-add-child-btn:hover{background:var(--accent-light);color:var(--accent)}
+.agent-avatar{
+  width:38px;height:38px;border-radius:10px;flex-shrink:0;
+  display:grid;place-items:center;font-size:16px;font-weight:700;color:#fff;
+  position:relative;
+}
+.agent-avatar .status-dot{
+  position:absolute;bottom:-1px;right:-1px;width:11px;height:11px;
+  border-radius:50%;background:var(--ok);border:2px solid var(--bg2);
+}
+.agent-info{flex:1;min-width:0;padding-top:2px}
+.agent-name{
+  font-size:13px;font-weight:600;color:var(--text);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  display:flex;align-items:center;gap:6px;
+}
+.agent-name .model-tag{
+  font-size:9px;font-weight:500;padding:1px 6px;border-radius:8px;
+  background:var(--bg3);color:var(--text3);white-space:nowrap;
+  max-width:90px;overflow:hidden;text-overflow:ellipsis;
+}
+.agent-card.active .agent-name{color:var(--accent-dark)}
+.agent-desc{
+  font-size:11px;color:var(--text3);margin-top:2px;
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  line-height:1.4;
+}
+.agent-settings-btn{
+  position:absolute;top:10px;right:8px;
+  width:26px;height:26px;border-radius:6px;
+  display:grid;place-items:center;
+  color:var(--text3);opacity:0;
+  transition:var(--transition);
+}
+.agent-card:hover .agent-settings-btn{opacity:1}
+.agent-settings-btn:hover{background:var(--bg4);color:var(--text2)}
+.agent-settings-btn svg{width:14px;height:14px}
+/* Agent panel footer / collapse toggle */
+.agent-panel-footer{
+  padding:10px 16px;border-top:1px solid var(--border-light);
+  flex-shrink:0;
+}
+.agent-collapse-btn{
+  width:100%;padding:8px;border-radius:var(--radius-xs);
+  display:flex;align-items:center;justify-content:center;gap:6px;
+  font-size:12px;color:var(--text3);
+  transition:var(--transition);
+}
+.agent-collapse-btn:hover{background:var(--bg3);color:var(--text2)}
+.agent-collapse-btn svg{width:14px;height:14px;transition:transform .35s ease}
+.agent-panel.collapsed ~ .main .agent-expand-float svg{
+  transform:rotate(180deg);
+}
+/* Floating expand button (visible when panel collapsed) */
+.agent-expand-float{
+  position:fixed;right:12px;top:50%;transform:translateY(-50%);
+  width:32px;height:48px;border-radius:8px;
+  background:var(--bg2);border:1px solid var(--border);
+  box-shadow:var(--shadow);z-index:16;
+  display:grid;place-items:center;
+  color:var(--text2);transition:var(--transition);
+  cursor:pointer;
+}
+.agent-expand-float:hover{background:var(--bg3);color:var(--text);box-shadow:var(--shadow-lg)}
+.agent-expand-float svg{width:16px;height:16px}
+.agent-expand-float.hidden{display:none}
+/* ── Create / Edit Agent Modal ── */
+.agent-modal{
+  background:var(--bg2);border-radius:var(--radius);padding:28px;
+  width:90%;max-width:520px;box-shadow:var(--shadow-lg);
+  max-height:85vh;overflow-y:auto;
+}
+.agent-modal h3{font-size:18px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}
+.agent-modal .modal-subtitle{font-size:12px;color:var(--text3);margin-bottom:20px}
+.agent-form-group{margin-bottom:16px}
+.agent-form-group label{
+  display:block;font-size:12px;font-weight:600;color:var(--text2);
+  margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;
+}
+.agent-form-group input,
+.agent-form-group textarea,
+.agent-form-group select{
+  width:100%;padding:10px 14px;border-radius:var(--radius-xs);
+  border:1px solid var(--border);background:var(--bg);font-size:13px;
+  outline:none;transition:border-color .2s;color:var(--text);
+}
+.agent-form-group input:focus,
+.agent-form-group textarea:focus,
+.agent-form-group select:focus{border-color:var(--accent)}
+.agent-form-group textarea{resize:vertical;min-height:80px;line-height:1.5}
+.agent-form-group .hint{font-size:11px;color:var(--text3);margin-top:4px}
+.agent-avatar-picker{
+  display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;
+}
+.agent-avatar-option{
+  width:36px;height:36px;border-radius:8px;
+  display:grid;place-items:center;font-size:16px;cursor:pointer;
+  border:2px solid transparent;transition:var(--transition);
+}
+.agent-avatar-option:hover{transform:scale(1.1)}
+.agent-avatar-option.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light)}
+.agent-modal-actions{
+  display:flex;gap:8px;justify-content:flex-end;margin-top:24px;
+  padding-top:16px;border-top:1px solid var(--border-light);
+}
+.agent-modal-btn{
+  padding:10px 24px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;
+  transition:var(--transition);
+}
+.agent-modal-btn-cancel{background:var(--bg3);color:var(--text2)}
+.agent-modal-btn-cancel:hover{background:var(--bg4)}
+.agent-modal-btn-primary{background:var(--accent);color:#fff}
+.agent-modal-btn-primary:hover{background:var(--accent2)}
+.agent-modal-btn-delete{background:var(--danger);color:#fff;margin-right:auto}
+.agent-modal-btn-delete:hover{background:#dc2626}
+/* ── Active agent indicator in header ── */
+.active-agent-badge{
+  display:inline-flex;align-items:center;gap:6px;
+  padding:3px 10px 3px 6px;border-radius:20px;
+  background:var(--accent-light);font-size:12px;color:var(--accent);
+  font-weight:500;
+}
+.active-agent-badge .badge-avatar{
+  width:20px;height:20px;border-radius:50%;
+  display:grid;place-items:center;font-size:10px;color:#fff;
+}
+/* ── Agent color themes ── */
+.agent-color-0{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
+.agent-color-1{background:linear-gradient(135deg,#ec4899,#f43f5e)}
+.agent-color-2{background:linear-gradient(135deg,#f59e0b,#f97316)}
+.agent-color-3{background:linear-gradient(135deg,#10b981,#059669)}
+.agent-color-4{background:linear-gradient(135deg,#3b82f6,#0ea5e9)}
+.agent-color-5{background:linear-gradient(135deg,#8b5cf6,#a855f7)}
+.agent-color-6{background:linear-gradient(135deg,#ef4444,#dc2626)}
+.agent-color-7{background:linear-gradient(135deg,#14b8a6,#06b6d4)}
+/* ── No agents empty state ── */
+.agent-empty{
+  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
+  padding:24px 16px;color:var(--text3);text-align:center;
+}
+.agent-empty-icon{font-size:40px;margin-bottom:10px;opacity:.4}
+.agent-empty-text{font-size:12px;line-height:1.5}
+/* ── Tree node indent per depth ── */
+.agent-tree-node[data-depth="1"]{margin-left:12px}
+.agent-tree-node[data-depth="2"]{margin-left:24px}
+.agent-tree-node[data-depth="3"]{margin-left:36px}
+.agent-tree-node[data-depth="4"]{margin-left:48px}
+/* ── Platform badge in agent cards ── */
+.platform-badge{
+  font-size:11px;white-space:nowrap;flex-shrink:0;
+  display:inline-flex;align-items:center;
+}
+/* ── Agent form section (e.g. platform binding) ── */
+.agent-form-section{
+  margin:16px 0;padding:14px 16px;border-radius:var(--radius-sm);
+  background:var(--bg);border:1px solid var(--border-light);
+}
+.agent-form-section-title{
+  font-size:12px;font-weight:700;color:var(--text);
+  margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;
+}
+/* ══════════════════════════════════════════════════════
+   ── Config Modal ──
+   ══════════════════════════════════════════════════════ */
+.config-modal{
+  background:var(--bg2);border-radius:var(--radius);padding:28px;
+  width:90%;max-width:560px;box-shadow:var(--shadow-lg);
+  max-height:85vh;overflow-y:auto;
+}
+.config-modal h3{font-size:18px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}
+.config-modal .modal-subtitle{font-size:12px;color:var(--text3);margin-bottom:20px}
+.config-section{
+  margin-bottom:20px;padding:16px;border-radius:var(--radius-sm);
+  background:var(--bg);border:1px solid var(--border-light);
+}
+.config-section h4{
+  font-size:13px;font-weight:600;color:var(--text);margin-bottom:12px;
+  display:flex;align-items:center;gap:8px;
+}
+.config-section h4 .section-icon{font-size:16px}
+.config-action-row{
+  display:flex;gap:8px;flex-wrap:wrap;
+}
+.config-action-btn{
+  padding:10px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;
+  display:flex;align-items:center;gap:8px;transition:var(--transition);
+  border:1px solid var(--border);
+}
+.config-action-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
+.config-action-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
+.config-action-btn.primary:hover{background:var(--accent2)}
+.config-action-btn.danger{border-color:var(--danger);color:var(--danger)}
+.config-action-btn.danger:hover{background:var(--danger);color:#fff}
+.config-action-btn svg{width:16px;height:16px}
+.config-action-btn:disabled{opacity:.5;cursor:not-allowed}
+.config-preview{
+  margin-top:12px;padding:12px;border-radius:var(--radius-xs);
+  background:var(--bg2);border:1px solid var(--border-light);
+  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
+  font-size:11px;color:var(--text2);max-height:200px;overflow-y:auto;
+  white-space:pre-wrap;word-break:break-all;line-height:1.5;
+}
+.config-preview .key{color:var(--accent);font-weight:600}
+.config-preview .val{color:var(--ok)}
+.config-preview .changed{color:var(--warn);font-weight:600}
+.config-status{
+  margin-top:8px;padding:8px 12px;border-radius:var(--radius-xs);
+  font-size:12px;display:none;align-items:center;gap:6px;
+}
+.config-status.show{display:flex}
+.config-status.success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
+.config-status.error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
+.config-status.loading{background:#eff6ff;color:#1e3a5f;border:1px solid #bfdbfe}
+.config-status .spinner{
+  width:14px;height:14px;border:2px solid var(--info);border-top-color:transparent;
+  border-radius:50%;animation:spin .6s linear infinite;
+}
+@keyframes spin{to{transform:rotate(360deg)}}
+/* Config import file drop area */
+.config-import-area{
+  margin-top:12px;padding:24px;border:2px dashed var(--border);
+  border-radius:var(--radius-sm);text-align:center;
+  transition:var(--transition);cursor:pointer;
+}
+.config-import-area:hover,.config-import-area.dragover{
+  border-color:var(--accent);background:var(--accent-light)
+}
+.config-import-area .upload-icon{font-size:28px;margin-bottom:8px;opacity:.5}
+.config-import-area .upload-text{font-size:13px;color:var(--text2)}
+.config-import-area .upload-hint{font-size:11px;color:var(--text3);margin-top:4px}
+.config-import-area input[type=file]{display:none}
+.config-checkbox-row{
+  display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--text2);
+}
+.config-checkbox-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
+/* ══════════════════════════════════════════════════════
+   ── Mode Toggle (聊天/执行) ──
+   ══════════════════════════════════════════════════════ */
+.mode-toggle{
+  display:flex;align-items:center;gap:4px;
+  background:var(--bg3);border-radius:var(--radius-sm);
+  padding:3px;margin-bottom:10px;
+  width:fit-content;
+}
+.mode-btn{\n  padding:6px 18px;border-radius:var(--radius-xs);font-size:12px;font-weight:500;
+  color:var(--text3);transition:var(--transition);display:flex;align-items:center;gap:5px;
+}
+.mode-btn:hover{color:var(--text)}
+.mode-btn.active-chat{background:var(--bg2);color:var(--accent);box-shadow:var(--shadow-sm)}
+.mode-btn.active-exec{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
+.mode-btn svg{width:14px;height:14px}
+/* ══════════════════════════════════════════════════════
+   ── Task Plan Panel ──
+   ══════════════════════════════════════════════════════ */
+.task-panel{
+  max-width:800px;margin:0 auto 10px;
+  border:1px solid var(--border);border-radius:var(--radius);
+  background:var(--bg2);overflow:hidden;
+  transition:all .25s ease;
+  box-shadow:var(--shadow-sm);
+}
+.task-panel.hidden{display:none}
+.task-panel-header{
+  display:flex;align-items:center;gap:8px;padding:8px 14px;
+  background:var(--bg3);cursor:pointer;user-select:none;
+  transition:var(--transition);
+}
+.task-panel-header:hover{background:var(--bg4)}
+.task-panel-header .tp-icon{font-size:14px}
+.task-panel-header .tp-title{flex:1;font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
+.task-panel-header .tp-count{
+  font-size:11px;color:var(--text3);background:var(--bg);padding:2px 8px;
+  border-radius:10px;font-weight:500;
+}
+.task-panel-header .tp-toggle{
+  width:22px;height:22px;border-radius:4px;display:grid;place-items:center;
+  color:var(--text3);transition:var(--transition);
+}
+.task-panel-header .tp-toggle:hover{background:var(--bg4);color:var(--text)}
+.task-panel-header .tp-toggle svg{width:14px;height:14px;transition:transform .25s ease}
+.task-panel-header .tp-toggle.expanded svg{transform:rotate(180deg)}
+.task-panel-body{
+  max-height:0;overflow:hidden;transition:max-height .3s ease;
+}
+.task-panel-body.expanded{max-height:400px;overflow-y:auto}
+.task-list{padding:6px 0}
+.task-item{
+  display:flex;align-items:center;gap:8px;padding:6px 14px;
+  transition:var(--transition);position:relative;
+}
+.task-item:hover{background:var(--bg3)}
+.task-checkbox{
+  width:18px;height:18px;border-radius:5px;border:2px solid var(--bg5);
+  display:grid;place-items:center;flex-shrink:0;cursor:pointer;
+  transition:var(--transition);font-size:11px;color:transparent;
+}
+.task-checkbox:hover{border-color:var(--accent)}
+.task-checkbox.checked{
+  background:var(--ok);border-color:var(--ok);color:#fff}
+.task-text{
+  flex:1;font-size:13px;color:var(--text);line-height:1.4;transition:var(--transition);
+}
+.task-text.done{text-decoration:line-through;color:var(--text3)}
+.task-delete{
+  width:22px;height:22px;border-radius:4px;display:grid;place-items:center;
+  font-size:13px;color:var(--text3);opacity:0;transition:var(--transition);flex-shrink:0;
+}
+.task-item:hover .task-delete{opacity:1}
+.task-delete:hover{background:#fef2f2;color:var(--danger)}
+.task-empty{
+  padding:20px;text-align:center;color:var(--text3);font-size:12px;
+}
+.task-empty-icon{font-size:24px;margin-bottom:6px;opacity:.4}
+.task-add-row{
+  display:flex;gap:6px;padding:8px 12px;border-top:1px solid var(--border-light);
+}
+.task-add-input{
+  flex:1;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-xs);
+  background:var(--bg);font-size:12px;outline:none;transition:border-color .2s;
+}
+.task-add-input:focus{border-color:var(--accent)}
+.task-add-input::placeholder{color:var(--text3)}
+.task-add-btn{
+  padding:7px 14px;border-radius:var(--radius-xs);background:var(--accent);color:#fff;
+  font-size:12px;font-weight:500;transition:var(--transition);white-space:nowrap;
+}
+.task-add-btn:hover{background:var(--accent2)}
+.task-add-btn:disabled{opacity:.4;cursor:default}
+/* ══════════════════════════════════════════════════════
+   ── Group Chat ──
+   ══════════════════════════════════════════════════════ */
+.sidebar-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column}
+/* Groups Section in Sidebar */
+.groups-section{border-top:1px solid var(--border-light);flex-shrink:0}
+.groups-section-header{
+  display:flex;align-items:center;justify-content:space-between;
+  padding:10px 16px 6px;cursor:pointer;user-select:none;
+}
+.groups-section-title{font-size:12px;font-weight:600;color:var(--text2);display:flex;align-items:center;gap:6px}
+.group-create-btn{
+  width:24px;height:24px;border-radius:6px;
+  display:grid;place-items:center;
+  color:var(--text3);transition:var(--transition);font-size:14px;
+}
+.group-create-btn:hover{background:var(--bg3);color:var(--accent)}
+.group-create-btn svg{width:14px;height:14px}
+.group-list{padding:0 8px 8px}
+.group-item{
+  display:flex;align-items:center;gap:10px;padding:10px 12px;
+  border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);
+  position:relative;
+}
+.group-item:hover{background:var(--bg3)}
+.group-item.active{background:var(--accent-light);color:var(--accent2)}
+.group-item.active::before{
+  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
+  width:3px;height:24px;background:var(--accent);border-radius:0 2px 2px 0;
+}
+.group-icon{
+  width:32px;height:32px;border-radius:8px;background:var(--bg3);
+  display:grid;place-items:center;flex-shrink:0;font-size:14px;
+}
+.group-item.active .group-icon{background:var(--accent-light);color:var(--accent)}
+.group-info{flex:1;min-width:0}
+.group-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.group-preview{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
+.group-badge{
+  font-size:10px;padding:1px 7px;border-radius:10px;
+  background:var(--bg3);color:var(--text3);font-weight:500;flex-shrink:0;
+}
+.group-item.active .group-badge{background:var(--accent-light);color:var(--accent)}
+.group-delete{
+  opacity:0;position:absolute;right:8px;top:50%;transform:translateY(-50%);
+  width:24px;height:24px;border-radius:4px;display:grid;place-items:center;
+  background:var(--bg2);transition:var(--transition);font-size:12px;color:var(--text3);
+}
+.group-item:hover .group-delete{opacity:1}
+.group-delete:hover{background:var(--danger);color:#fff}
+/* Group Chat Messages */
+.group-msg-system{
+  text-align:center;padding:8px 0;
+  font-size:12px;color:var(--text3);
+  animation:msgIn .25s ease-out;
+}
+.group-msg-row{display:flex;gap:10px;animation:msgIn .25s ease-out}
+.group-msg-avatar{
+  width:32px;height:32px;border-radius:8px;flex-shrink:0;
+  display:grid;place-items:center;font-size:14px;
+}
+.group-msg-name{
+  font-size:11px;font-weight:600;color:var(--text2);margin-bottom:4px;
+  display:flex;align-items:center;gap:6px;
+}
+.group-msg-name .role-badge{
+  font-size:9px;padding:1px 5px;border-radius:4px;
+  background:var(--bg3);color:var(--text3);font-weight:500;
+}
+.group-msg-bubble{
+  max-width:70%;padding:12px 16px;border-radius:var(--radius);
+  font-size:14px;line-height:1.7;word-break:break-word;
+  box-shadow:var(--shadow-sm);background:var(--bot-bubble);color:var(--bot-text);
+  border:1px solid var(--border-light);border-bottom-left-radius:4px;
+  border-left:3px solid var(--accent);
+}
+.group-msg-bubble p{margin-bottom:8px}
+.group-msg-bubble p:last-child{margin-bottom:0}
+.group-msg-bubble code{
+  background:rgba(0,0,0,.06);padding:2px 6px;border-radius:4px;
+  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;font-size:12.5px;
+}
+.group-msg-bubble pre{
+  background:#1e1e2e;color:#cdd6f4;padding:14px 16px;border-radius:var(--radius-sm);
+  overflow-x:auto;margin:8px 0;font-size:12.5px;line-height:1.5;
+  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
+}
+.group-msg-bubble pre code{background:none;padding:0;font-size:inherit}
+.group-msg-bubble strong{font-weight:600}
+.group-msg-bubble em{font-style:italic}
+.group-msg-bubble ul,.group-msg-bubble ol{padding-left:20px;margin:6px 0}
+.group-msg-bubble li{margin:3px 0}
+.group-msg-time{font-size:10px;color:var(--text3);margin-top:4px}
+/* Group Modal */
+.group-modal{
+  background:var(--bg2);border-radius:var(--radius);padding:28px;
+  width:90%;max-width:560px;box-shadow:var(--shadow-lg);
+  max-height:85vh;overflow-y:auto;
+}
+.group-modal h3{font-size:18px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}
+.group-modal .modal-subtitle{font-size:12px;color:var(--text3);margin-bottom:20px}
+/* Group member list in settings */
+.group-member-item{
+  display:flex;align-items:center;gap:10px;padding:10px 0;
+  border-bottom:1px solid var(--border-light);
+}
+.group-member-item:last-child{border-bottom:none}
+.group-member-info{flex:1;min-width:0}
+.group-member-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
+.group-member-role{
+  font-size:10px;padding:1px 6px;border-radius:4px;font-weight:500;
+}
+.group-member-role.owner{background:#fef3c7;color:#92400e}
+.group-member-role.admin{background:#dbeafe;color:#1e40af}
+.group-member-role.member{background:var(--bg3);color:var(--text3)}
+.group-member-remove{
+  width:28px;height:28px;border-radius:6px;display:grid;place-items:center;
+  color:var(--text3);transition:var(--transition);font-size:14px;
+}
+.group-member-remove:hover:not(:disabled){background:#fef2f2;color:var(--danger)}
+.group-member-remove:disabled{opacity:.3;cursor:not-allowed}
+/* Group color picker */
+.color-picker-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
+.color-option{
+  width:32px;height:32px;border-radius:8px;cursor:pointer;
+  border:2px solid transparent;transition:var(--transition);
+}
+.color-option:hover{transform:scale(1.1)}
+.color-option.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light)}
+/* Group member picker in create modal */
+.group-member-picker{max-height:200px;overflow-y:auto;padding:4px 0}
+.group-member-pick-item{
+  display:flex;align-items:center;gap:8px;padding:8px 10px;
+  border-radius:var(--radius-xs);cursor:pointer;transition:var(--transition);
+}
+.group-member-pick-item:hover{background:var(--bg3)}
+.group-member-pick-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
+.group-member-pick-item .pick-agent-info{flex:1;min-width:0}
+.group-member-pick-item .pick-agent-name{font-size:13px;font-weight:500}
+.group-member-pick-item .pick-agent-desc{font-size:11px;color:var(--text3)}
+</style>
+</head>
+<body>
+<div class="app">
+  <!-- Sidebar (Sessions) -->
+  <div class="sidebar" id="sidebar">
+    <div class="sidebar-header">
+      <div class="sidebar-logo">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+      </div>
+      <div>
+        <div class="sidebar-title">MyAgent</div>
+        <div class="sidebar-subtitle">AI 助手</div>
+      </div>
+    </div>
+    <button class="new-chat-btn" onclick="newChat()">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+      新对话
+    </button>
+    <div class="sidebar-search">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+      <input type="text" placeholder="搜索对话..." id="searchInput" oninput="filterSessions()">
+    </div>
+    <div class="sidebar-scroll" id="sidebarScroll">
+      <div class="session-list" id="sessionList">
+        <!-- sessions loaded dynamically -->
+      </div>
+      <div class="groups-section" id="groupsSection">
+        <div class="groups-section-header" onclick="toggleGroupsSection()">
+          <span class="groups-section-title">👥 群聊</span>
+          <button class="group-create-btn" onclick="event.stopPropagation();showCreateGroupModal()" title="新建群聊">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+          </button>
+        </div>
+        <div class="group-list" id="groupList">
+          <!-- groups loaded dynamically -->
+        </div>
+      </div>
+    </div>
+    <div class="sidebar-footer">
+      <button class="sidebar-footer-btn" onclick="window.open('/ui/index.html','_blank')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+        管理后台
+      </button>
+      <button class="sidebar-footer-btn" onclick="showStatus()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
+        系统状态
+        <span class="model-badge" id="modelBadge">...</span>
+      </button>
+      <button class="sidebar-footer-btn" onclick="showConfigModal()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+        配置管理
+      </button>
+    </div>
+  </div>
+  <!-- Main (Chat) -->
+  <div class="main" id="mainArea">
+    <div class="main-header">
+      <button class="toggle-sidebar" onclick="toggleSidebar()" title="切换侧栏">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+      </button>
+      <div class="main-title">
+        <span class="dot"></span>
+        <span id="headerTitle">新对话</span>
+        <span class="active-agent-badge" id="activeAgentBadge">
+          <span class="badge-avatar" id="badgeAvatar">D</span>
+          <span id="badgeName">default</span>
+        </span>
+      </div>
+      <div class="header-actions">
+        <button class="header-btn" id="groupBackBtn" onclick="exitGroupChat()" title="返回对话" style="display:none">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
+        </button>
+        <button class="header-btn" id="groupSettingsBtn" onclick="showGroupSettingsModal()" title="群聊设置" style="display:none">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+        </button>
+        <button class="header-btn" id="clearChatBtn" onclick="clearCurrentChat()" title="清空当前对话">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+        </button>
+      </div>
+    </div>
+    <div class="messages-container" id="messagesContainer">
+      <div class="messages-inner" id="messagesInner">
+        <!-- Welcome card shown when no messages -->
+        <div class="welcome-card" id="welcomeCard">
+          <h2><span class="emoji" id="welcomeEmoji">👋</span> <span id="welcomeTitle">你好，我是 MyAgent</span></h2>
+          <p class="subtitle" id="welcomeSubtitle">本地桌面端执行型 AI 助手 — 我可以帮你写代码、搜索信息、管理文件等</p>
+          <div class="capabilities">
+            <div class="capability"><span class="cap-icon">💻</span> 代码编写与执行</div>
+            <div class="capability"><span class="cap-icon">🔍</span> 网络搜索与阅读</div>
+            <div class="capability"><span class="cap-icon">📁</span> 文件管理与操作</div>
+            <div class="capability"><span class="cap-icon">🧠</span> 长期记忆系统</div>
+            <div class="capability"><span class="cap-icon">🌐</span> 多平台接入</div>
+            <div class="capability"><span class="cap-icon">🛠️</span> 系统命令执行</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Task Plan Panel -->
+    <div class="task-panel hidden" id="taskPanel">
+      <div class="task-panel-header" onclick="toggleTaskPanel()">
+        <span class="tp-icon">📋</span>
+        <span class="tp-title">任务计划 (task.md)</span>
+        <span class="tp-count" id="taskCount">0</span>
+        <span class="tp-toggle" id="taskToggle"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></span>
+      </div>
+      <div class="task-panel-body" id="taskBody">
+        <div class="task-list" id="taskList"></div>
+        <div class="task-add-row">
+          <input class="task-add-input" id="taskAddInput" placeholder="添加新任务..." onkeydown="if(event.key==='Enter')addTaskItem()">
+          <button class="task-add-btn" onclick="addTaskItem()">+ 添加</button>
+        </div>
+      </div>
+    </div>
+    <!-- Input -->
+    <div class="input-area">
+      <div class="input-wrapper">
+        <!-- Mode Toggle -->
+        <div class="mode-toggle">
+          <button class="mode-btn active-chat" id="modeChatBtn" onclick="setMode('chat')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+            💬 聊天
+          </button>
+          <button class="mode-btn" id="modeExecBtn" onclick="setMode('exec')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+            ⚡ 执行
+          </button>
+        </div>
+        <div class="input-box">
+          <textarea id="userInput" placeholder="输入消息... (Enter 发送, Shift+Enter 换行)" rows="1" onkeydown="handleKeyDown(event)" oninput="autoResize(this)"></textarea>
+          <button class="send-btn" id="sendBtn" onclick="sendMessage()" disabled>
+            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
+          </button>
+          <button class="stop-btn" id="stopBtn" onclick="stopGenerating()" style="display:none">
+            <svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
+          </button>
+        </div>
+        <div class="input-hint">MyAgent 可能会出错，请核实重要信息</div>
+      </div>
+    </div>
+  </div>
+  <!-- Agent Panel (RIGHT) -->
+  <div class="agent-panel" id="agentPanel">
+    <div class="agent-panel-header">
+      <h3><span class="agents-emoji">🤖</span> Agents</h3>
+      <button class="agent-create-btn" onclick="showCreateAgentModal()" title="创建新 Agent">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+      </button>
+    </div>
+    <div class="agent-list" id="agentList">
+      <!-- agent cards loaded dynamically -->
+    </div>
+    <div class="agent-panel-footer">
+      <button class="agent-collapse-btn" onclick="toggleAgentPanel()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
+        收起面板
+      </button>
+    </div>
+  </div>
+</div>
+<!-- Floating expand button for collapsed agent panel -->
+<button class="agent-expand-float hidden" id="agentExpandFloat" onclick="toggleAgentPanel()" title="展开 Agent 面板">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+</button>
+<!-- Toast Container -->
+<div class="toast-container" id="toastContainer"></div>
+<!-- Agent Modal Container -->
+<div id="agentModalContainer"></div>
+<!-- Config Modal Container -->
+<div id="configModalContainer"></div>
+<!-- Group Modal Container -->
+<div id="groupModalContainer"></div>
+<script>
+// ── State ──
+const state = {
+  sessions: [],          // [{id, name, messages: int, last: string}]
+  chatMode: 'chat',     // 'chat' | 'exec'
+  taskPanelExpanded: true,
+  taskItems: [],        // [{text, done}]
+  activeSessionId: null,
+  messages: [],          // [{role, content, time}]
+  isGenerating: false,
+  abortController: null,
+  execTimerInterval: null,    // polling interval ID for execution progress
+  systemStatus: null,
+  // ── Agent state (层级体系) ──
+  agentTree: [],         // 树形结构 [{path, name, children: [...], ...}]
+  agentsFlat: [],        // 扁平列表 [{path, name, parent, depth, ...}]
+  activeAgent: 'default',
+  agentPanelOpen: true,
+  agentSessions: {},     // {agentPath: [{id, name, messages, last}]}
+  agentDetails: {},      // {agentPath: {soul, identity, model, ...}}
+  expandedNodes: new Set(['default']),  // 树形展开状态
+  modelsLibrary: [],     // 模型库 [{id, name, provider, model, base_url, enabled, has_api_key, ...}]
+};
+// ── Group Chat State ──
+var currentView = 'chat'; // 'chat' | 'group'
+var currentGroupId = null;
+var groups = [];
+var groupMessages = [];
+var groupsSectionExpanded = true;
+// ── 平台图标映射 ──
+const PLATFORM_ICONS = {
+  telegram: '✈️', discord: '🎮', feishu: '🐦', qq: '🐧', wechat: '💬',
+};
+const PLATFORM_LABELS = {
+  telegram: 'Telegram', discord: 'Discord', feishu: '飞书', qq: 'QQ', wechat: '微信',
+};
+// ── Utility: deterministic color from agent name ──
+function hashStr(str) {
+  let h = 0;
+  for (let i = 0; i < str.length; i++) {
+    h = ((h << 5) - h + str.charCodeAt(i)) | 0;
+  }
+  return Math.abs(h);
+}
+function getAgentColorClass(name) {
+  return 'agent-color-' + (hashStr(name) % 8);
+}
+function getAgentInitials(name) {
+  if (!name) return '?';
+  const parts = name.replace(/[-_]/g, ' ').split(/\s+/);
+  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+  return name.slice(0, 2).toUpperCase();
+}
+function getAgentGradient(name) {
+  const palettes = [
+    ['#6366f1','#8b5cf6'],['#ec4899','#f43f5e'],['#f59e0b','#f97316'],
+    ['#10b981','#059669'],['#3b82f6','#0ea5e9'],['#8b5cf6','#a855f7'],
+    ['#ef4444','#dc2626'],['#14b8a6','#06b6d4']
+  ];
+  const idx = hashStr(name) % palettes.length;
+  return `linear-gradient(135deg,${palettes[idx][0]},${palettes[idx][1]})`;
+}
+// ── Init ──
+document.addEventListener('DOMContentLoaded', () => {
+  loadModels();
+  loadAgents();
+  loadStatus();
+  fetchGroups();
+  // Enable/disable send button
+  document.getElementById('userInput').addEventListener('input', function() {
+    document.getElementById('sendBtn').disabled = !this.value.trim();
+  });
+  // Load task plan if in exec mode
+  if (state.chatMode === 'exec') {
+    document.getElementById('taskPanel').classList.remove('hidden');
+    loadTaskPlan();
+  }
+});
+// ══════════════════════════════════════════════════════
+// ── Mode Toggle & Task Plan ──
+// ══════════════════════════════════════════════════════
+function setMode(mode) {
+  state.chatMode = mode;
+  var chatBtn = document.getElementById('modeChatBtn');
+  var execBtn = document.getElementById('modeExecBtn');
+ var taskPanel = document.getElementById('taskPanel');
+ var input = document.getElementById('userInput');
+ if (mode === 'chat') {
+    chatBtn.className = 'mode-btn active-chat';
+    execBtn.className = 'mode-btn';
+    taskPanel.classList.add('hidden');
+    input.placeholder = '输入消息... (Enter 发送, Shift+Enter 换行)';
+  } else {
+    chatBtn.className = 'mode-btn';
+    execBtn.className = 'mode-btn active-exec';
+    taskPanel.classList.remove('hidden');
+    input.placeholder = '执行模式 — 描述任务或输入指令...';
+    loadTaskPlan();
+  }
+}
+function toggleTaskPanel() {
+  state.taskPanelExpanded = !state.taskPanelExpanded;
+  var body = document.getElementById('taskBody');
+  var toggle = document.getElementById('taskToggle');
+  if (state.taskPanelExpanded) {
+    body.classList.add('expanded');
+    toggle.classList.add('expanded');
+  } else {
+    body.classList.remove('expanded');
+    toggle.classList.remove('expanded');
+  }
+}
+async function loadTaskPlan() {
+  try {
+    var agent = state.activeAgent || 'default';
+    var data = await api('/api/task-plan?agent=' + encodeURIComponent(agent));
+    state.taskItems = data.tasks || [];
+    renderTaskList();
+  } catch (e) {
+    state.taskItems = [];
+    renderTaskList();
+  }
+}
+function renderTaskList() {
+  var listEl = document.getElementById('taskList');
+  var countEl = document.getElementById('taskCount');
+  var doneCount = state.taskItems.filter(function(t) { return t.done; }).length;
+  countEl.textContent = doneCount + '/' + state.taskItems.length;
+ if (!state.taskItems.length) {
+    listEl.innerHTML = '<div class="task-empty"><div class="task-empty-icon">📋</div>暂无任务<br>输入任务描述后点击添加</div>';
+    return;
+  }
+  var html = '';
+  for (var i = 0; i < state.taskItems.length; i++) {
+    var t = state.taskItems[i];
+    html += '<div class="task-item" data-idx="' + i + '">' +
+      '<div class="task-checkbox' + (t.done ? ' checked' : '') + '" onclick="toggleTaskDone(' + i + ')">✓</div>' +
+      '<span class="task-text' + (t.done ? ' done' : '') + '">' + escapeHtml(t.text) + '</span>' +
+      '<button class="task-delete" onclick="deleteTaskItem(' + i + ')" title="删除">×</button>' +
+      '</div>';
+  }
+  listEl.innerHTML = html;
+}
+function escapeHtml(text) {
+  var div = document.createElement('div');
+  div.appendChild(document.createTextNode(text));
+  return div.innerHTML;
+}
+async function toggleTaskDone(idx) {
+  if (idx < 0 || idx >= state.taskItems.length) return;
+  state.taskItems[idx].done = !state.taskItems[idx].done;
+  try {
+    var agent = state.activeAgent || 'default';
+    await api('/api/task-plan', {
+      method: 'PUT',
+      body: JSON.stringify({agent: agent, tasks: state.taskItems})
+    });
+    renderTaskList();
+  } catch (e) {
+    toast('更新任务失败: ' + e.message, 'error');
+    state.taskItems[idx].done = !state.taskItems[idx].done;
+    renderTaskList();
+  }
+}
+async function addTaskItem() {
+  var input = document.getElementById('taskAddInput');
+  var text = input.value.trim();
+  if (!text) return;
+  input.value = '';
+  try {
+    var agent = state.activeAgent || 'default';
+    var data = await api('/api/task-plan', {
+      method: 'POST',
+      body: JSON.stringify({agent: agent, text: text})
+    });
+    state.taskItems = data.tasks || [];
+    renderTaskList();
+    toast('任务已添加', 'success');
+  } catch (e) {
+    toast('添加任务失败: ' + e.message, 'error');
+  }
+}
+async function deleteTaskItem(idx) {
+ if (idx < 0 || idx >= state.taskItems.length) return;
+  try {
+    var agent = state.activeAgent || 'default';
+    var data = await api('/api/task-plan/' + idx + '?agent=' + encodeURIComponent(agent), {
+      method: 'DELETE'
+    });
+    state.taskItems = data.tasks || [];
+    renderTaskList();
+    toast('任务已删除', 'info');
+  } catch (e) {
+    toast('删除任务失败: ' + e.message, 'error');
+  }
+}
+// ── Model Library ──
+async function loadModels() {
+  try {
+    var data = await api('/api/models');
+    state.modelsLibrary = data || [];
+  } catch (e) {
+    state.modelsLibrary = [];
+  }
+}
+// ── API Calls ──
+async function api(url, options = {}) {
+  try {
+    const resp = await fetch(url, {
+      headers: { 'Content-Type': 'application/json', ...options.headers },
+      ...options,
+    });
+    const data = await resp.json();
+    if (!resp.ok) throw new Error(data.error || `HTTP ${resp.status}`);
+    return data;
+  } catch (e) {
+    if (e.name === 'AbortError') throw e;
+    console.error('API error:', e);
+    throw e;
+  }
+}
+// ── Status ──
+async function loadStatus() {
+  try {
+    const data = await api('/api/status');
+    state.systemStatus = data;
+    document.getElementById('modelBadge').textContent =
+      `${(data.provider || '?').split('/')[0]}/${(data.model || '?').split('/').pop()}`;
+  } catch (e) {
+    document.getElementById('modelBadge').textContent = '离线';
+  }
+}
+function showStatus() {
+  const s = state.systemStatus;
+  if (!s) { toast('无法获取系统状态', 'error'); return; }
+  const info = `🤖 MyAgent 状态\n━━━━━━━━━━━━\n状态: ${s.running ? '✅ 运行中' : '❌ 停止'}\n模型: ${s.provider}/${s.model}\n技能: ${s.skills} 个\n记忆: ${s.memory?.short_term_count || 0} 短期 / ${s.memory?.long_term_count || 0} 长期`;
+  alert(info);
+}
+// ══════════════════════════════════════════════════════
+// ── Agent Management (层级体系) ──
+// ══════════════════════════════════════════════════════
+function flattenTree(nodes, depth, parent) {
+  const result = [];
+  for (const n of nodes) {
+    const flat = Object.assign({}, n, {depth: depth, parent: parent});
+    const children = flat.children || [];
+    result.push(Object.assign({}, flat, {children: undefined}));
+    if (children.length > 0) {
+      result.push.apply(result, flattenTree(children, depth + 1, n.path));
+    }
+  }
+  return result;
+}
+function findAgentByPath(path) {
+  return state.agentsFlat.find(function(a) { return a.path === path; });
+}
+async function loadAgents() {
+  try {
+    var treeData = await api('/api/agents/tree');
+    state.agentTree = treeData || [];
+    state.agentsFlat = flattenTree(state.agentTree, 0, null);
+    if (!state.agentsFlat.find(function(a) { return a.path === 'default'; })) {
+      var defAgent = {path:'default', name:'default', depth:0, parent:null, description:'默认助手', avatar_emoji:'🤖', execution_mode:'local', avatar_color:getAgentColorClass('default'), session_count:0};
+      state.agentsFlat.unshift(defAgent);
+      state.agentTree.unshift(Object.assign({}, defAgent, {children:[]}));
+    }
+    for (var i = 0; i < state.agentsFlat.length; i++) {
+      state.expandedNodes.add(state.agentsFlat[i].path);
+    }
+    if (!state.activeAgent || !findAgentByPath(state.activeAgent)) {
+      state.activeAgent = 'default';
+    }
+    renderAgentTree();
+    updateActiveAgentBadge();
+    await loadSessions();
+  } catch (e) {
+    var defAgent = {path:'default', name:'default', depth:0, parent:null, description:'默认助手', avatar_emoji:'🤖', execution_mode:'local', avatar_color:getAgentColorClass('default'), session_count:0};
+    state.agentsFlat = [defAgent];
+    state.agentTree = [Object.assign({}, defAgent, {children:[]})];
+    state.activeAgent = 'default';
+    renderAgentTree();
+    updateActiveAgentBadge();
+    await loadSessions();
+  }
+}
+async function loadAgentDetails(agentPath) {
+  if (state.agentDetails[agentPath]) return state.agentDetails[agentPath];
+  try {
+    var data = await api('/api/agents/' + encodeURIComponent(agentPath));
+    state.agentDetails[agentPath] = data || {};
+    return data;
+  } catch (e) {
+    return {};
+  }
+}
+function renderAgentTree() {
+  var list = document.getElementById('agentList');
+  if (state.agentTree.length === 0) {
+    list.innerHTML = '<div class="agent-empty"><div class="agent-empty-icon">🤖</div><div class="agent-empty-text">暂无 Agent<br>点击上方 + 创建</div></div>';
+    return;
+  }
+  list.innerHTML = renderTreeNodes(state.agentTree, 0);
+}
+function renderTreeNodes(nodes, depth) {
+  if (!nodes || nodes.length === 0) return '';
+  var html = '';
+  for (var i = 0; i < nodes.length; i++) {
+    var n = nodes[i];
+    var isActive = n.path === state.activeAgent;
+    var hasChildren = n.children && n.children.length > 0;
+    var isExpanded = state.expandedNodes.has(n.path);
+    var initials = getAgentInitials(n.name);
+    var emoji = n.avatar_emoji || '';
+    var avatarContent = emoji || initials;
+    var colorStyle = n.avatar_color ? 'background:' + n.avatar_color : '';
+    var colorClass = n.avatar_color ? '' : getAgentColorClass(n.name);
+    // 模型名称：优先使用 model_info.name，其次 model 字段
+    var modelDisplayName = '';
+    if (n.model_info && n.model_info.name) {
+      modelDisplayName = n.model_info.name;
+    } else if (n.model) {
+      modelDisplayName = n.model.split('/').pop();
+    } else if (n.model_id) {
+      var found = state.modelsLibrary.find(function(m) { return m.id === n.model_id; });
+      if (found) modelDisplayName = found.name || found.id;
+      else modelDisplayName = n.model_id;
+    }
+    // 平台图标
+    var platformBadge = '';
+    if (n.platform && PLATFORM_ICONS[n.platform]) {
+      platformBadge = '<span class="platform-badge" title="' + escapeHtml(PLATFORM_LABELS[n.platform] || n.platform) + '">' + PLATFORM_ICONS[n.platform] + '</span>';
+    }
+    var execMode = n.execution_mode || 'sandbox';
+    var execLabel = execMode === 'local' ? '本机' : '沙盒';
+    var execClass = execMode === 'local' ? 'local' : 'sandbox';
+    var avatarSize = depth > 0 ? 'width:32px;height:32px;font-size:13px' : '';
+    var dotSize = depth > 0 ? 'width:9px;height:9px' : '';
+    html += '<div class="agent-tree-node" data-depth="' + depth + '" data-path="' + escapeHtml(n.path) + '">';
+    html += '<div class="agent-card ' + (isActive ? 'active' : '') + '" onclick="selectAgent(\'' + escapeHtml(n.path) + '\')">';
+    if (hasChildren) {
+      html += '<button class="agent-tree-toggle ' + (isExpanded ? 'expanded' : '') + '" onclick="event.stopPropagation();toggleTreeNode(\'' + escapeHtml(n.path) + '\')" title="展开/折叠">▶</button>';
+    } else {
+      html += '<span style="width:18px;flex-shrink:0"></span>';
+    }
+    html += '<div class="agent-avatar ' + colorClass + '" style="' + colorStyle + avatarSize + '">' + avatarContent + '<span class="status-dot" style="' + dotSize + '"></span></div>';
+    html += '<div class="agent-info"><div class="agent-name">' + escapeHtml(n.name);
+    if (modelDisplayName) html += '<span class="model-tag">' + escapeHtml(modelDisplayName) + '</span>';
+    if (platformBadge) html += platformBadge;
+    html += '<span class="exec-badge ' + execClass + '" title="执行模式: ' + execLabel + '">' + execLabel + '</span>';
+    html += '</div>';
+    if (n.description) html += '<div class="agent-desc">' + escapeHtml(n.description) + '</div>';
+    html += '</div>';
+    html += '<button class="agent-settings-btn" onclick="event.stopPropagation();showEditAgentModal(\'' + escapeHtml(n.path) + '\')" title="设置"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg></button>';
+    html += '<button class="agent-add-child-btn" onclick="event.stopPropagation();showCreateChildModal(\'' + escapeHtml(n.path) + '\')" title="添加子 Agent">+</button>';
+    html += '</div>';
+    if (hasChildren && isExpanded) {
+      html += '<div class="agent-tree-children">' + renderTreeNodes(n.children, depth + 1) + '</div>';
+    }
+    html += '</div>';
+  }
+  return html;
+}
+function toggleTreeNode(path) {
+  if (state.expandedNodes.has(path)) {
+    state.expandedNodes.delete(path);
+  } else {
+    state.expandedNodes.add(path);
+  }
+  renderAgentTree();
+}
+async function selectAgent(agentPath) {
+  if (agentPath === state.activeAgent) return;
+  state.activeAgent = agentPath;
+  state.activeSessionId = null;
+  state.messages = [];
+  var parts = agentPath.split('/');
+  var cumPath = '';
+  for (var i = 0; i < parts.length; i++) {
+    cumPath = cumPath ? cumPath + '/' + parts[i] : parts[i];
+    state.expandedNodes.add(cumPath);
+  }
+  renderAgentTree();
+  updateActiveAgentBadge();
+  await loadSessions();
+  var details = await loadAgentDetails(agentPath);
+  updateWelcomeCard(agentPath, details);
+  document.getElementById('headerTitle').textContent = '新对话';
+  renderMessages();
+  document.getElementById('userInput').focus();
+  // Reload task plan if in exec mode
+  if (state.chatMode === 'exec') loadTaskPlan();
+}
+function updateActiveAgentBadge() {
+  var badge = document.getElementById('activeAgentBadge');
+  var avatar = document.getElementById('badgeAvatar');
+  var nameEl = document.getElementById('badgeName');
+  var agent = findAgentByPath(state.activeAgent);
+  if (agent) {
+    var emoji = agent.avatar_emoji || '';
+    avatar.textContent = emoji || getAgentInitials(agent.name);
+    avatar.style.background = agent.avatar_color || getAgentGradient(agent.name);
+    avatar.style.borderRadius = '50%';
+    nameEl.textContent = agent.path;
+    badge.style.display = 'inline-flex';
+  } else {
+    badge.style.display = 'none';
+  }
+}
+function updateWelcomeCard(agentPath, details) {
+  var agent = findAgentByPath(agentPath);
+  var emojiEl = document.getElementById('welcomeEmoji');
+  var titleEl = document.getElementById('welcomeTitle');
+  var subEl = document.getElementById('welcomeSubtitle');
+  if (agent) {
+    emojiEl.textContent = agent.avatar_emoji || '👋';
+    var execMode = agent.execution_mode || 'sandbox';
+    var execLabel = execMode === 'local' ? '🖥️ 本机模式' : '📦 沙盒模式';
+    titleEl.textContent = '你好，我是 ' + agent.path;
+    var desc = agent.description || (details && details.identity) || '你的 AI 助手';
+    subEl.textContent = desc + ' (' + execLabel + ')';
+  }
+}
+function toggleAgentPanel() {
+  const panel = document.getElementById('agentPanel');
+  const floatBtn = document.getElementById('agentExpandFloat');
+  state.agentPanelOpen = !state.agentPanelOpen;
+  panel.classList.toggle('collapsed', !state.agentPanelOpen);
+  floatBtn.classList.toggle('hidden', state.agentPanelOpen);
+}
+// ── Agent Create/Edit Modal ──
+function showCreateAgentModal() {
+  showAgentModal(null, null);
+}
+function showCreateChildModal(parentPath) {
+  showAgentModal(null, parentPath);
+}
+async function showEditAgentModal(agentPath) {
+  // 刷新模型库以确保下拉框最新
+  await loadModels();
+  // 清除缓存以获取最新数据
+  delete state.agentDetails[agentPath];
+  var details = await loadAgentDetails(agentPath);
+  var agent = findAgentByPath(agentPath);
+  var merged = agent ? Object.assign({}, agent, details) : details;
+  showAgentModal(agentPath, null, merged);
+}
+function showAgentModal(editPath, parentPath, data) {
+  data = data || {};
+  var isEdit = !!editPath;
+  var isChild = !!parentPath && !isEdit;
+  var path = data.path || editPath || '';
+  var name = data.name || '';
+  var model = data.model || '';
+  var model_id = data.model_id || '';
+  var description = data.description || '';
+  var soul = data.soul || '';
+  var identity = data.identity || '';
+  var avatar_emoji = data.avatar_emoji || '';
+  var execution_mode = data.execution_mode || (isEdit ? 'sandbox' : (parentPath ? 'sandbox' : 'local'));
+  var platform = data.platform || '';
+  var platform_token = data.platform_token || '';
+  var platform_app_id = data.platform_app_id || '';
+  var platform_app_secret = data.platform_app_secret || '';
+  var emojis = ['🤖','🧠','💡','🎯','🔮','⚡','🌟','🎨','📝','🔧','🎭','🌐','🦊','🐱','🐶','🦁'];
+  var title = isEdit ? '⚙️ 编辑 Agent' : (isChild ? '👶 创建子 Agent (' + escapeHtml(parentPath) + ')' : '✨ 创建新 Agent');
+  var subtitle = isEdit ? '修改 ' + escapeHtml(editPath) + ' 的配置' : (isChild ? '在 ' + escapeHtml(parentPath) + ' 下创建子 Agent' : '配置一个新的顶级 AI Agent');
+  // 构建模型选择下拉框
+  var modelsOptions = '<option value="">系统默认</option>';
+  var enabledModels = state.modelsLibrary.filter(function(m) { return m.enabled; });
+  for (var mi = 0; mi < enabledModels.length; mi++) {
+    var m = enabledModels[mi];
+    var selected = (model_id === m.id) ? ' selected' : '';
+    modelsOptions += '<option value="' + escapeHtml(m.id) + '"' + selected + '>' + escapeHtml(m.name) + ' (' + escapeHtml(m.provider) + ')</option>';
+  }
+  var container = document.getElementById('agentModalContainer');
+  container.innerHTML = '<div class="modal-overlay" onclick="if(event.target===this)closeAgentModal()"><div class="agent-modal">'
+    + '<h3>' + title + '</h3>'
+    + '<p class="modal-subtitle">' + subtitle + '</p>'
+    + '<div class="agent-form-group"><label>名称 *</label>'
+    + '<input type="text" id="agentFormName" placeholder="例如: translator, coder, tutor" value="' + escapeHtml(name) + '" ' + (isEdit ? 'readonly style="opacity:.6;cursor:not-allowed"' : '') + '>'
+    + '<div class="hint">' + (isEdit ? '名称不可修改' : '使用英文小写，可用连字符') + '</div></div>'
+    + '<div class="agent-form-group"><label>模型</label>'
+    + '<select id="agentFormModelId" onchange="onModelSelect()">' + modelsOptions + '</select>'
+    + '<div class="hint" id="modelHint">从系统模型库中选择，留空使用系统默认模型</div></div>'
+    + '<div class="agent-form-group"><label>头像</label>'
+    + '<div class="agent-avatar-picker" id="avatarPicker">'
+    + emojis.map(function(e) { return '<div class="agent-avatar-option ' + (avatar_emoji === e ? 'selected' : '') + '" onclick="pickAvatar(this,\'' + e + '\')" data-emoji="' + e + '">' + e + '</div>'; }).join('')
+    + '</div><input type="hidden" id="agentFormEmoji" value="' + escapeHtml(avatar_emoji) + '"></div>'
+    + '<div class="agent-form-group"><label>简介</label>'
+    + '<input type="text" id="agentFormDesc" placeholder="简短描述这个 Agent 的用途" value="' + escapeHtml(description) + '" maxlength="100">'
+    + '<div class="hint">一句话描述，最多 100 字</div></div>'
+    + '<div class="agent-form-group"><label>执行模式</label>'
+    + '<select id="agentFormExecMode">'
+    + '<option value="local"' + (execution_mode === 'local' ? ' selected' : '') + '>🖥️ 本机执行 (无隔离，功能完整)</option>'
+    + '<option value="sandbox"' + (execution_mode === 'sandbox' ? ' selected' : '') + '>📦 沙盒执行 (Docker 隔离，更安全)</option>'
+    + '</select>'
+    + '<div class="hint">默认 Agent 为本机模式，其他默认沙盒模式</div></div>'
+    + '<div class="agent-form-section"><div class="agent-form-section-title">🔗 聊天平台绑定</div>'
+    + '<div class="agent-form-group"><label>聊天平台</label>'
+    + '<select id="agentFormPlatform" onchange="onPlatformSelect()">'
+    + '<option value=""' + (!platform ? ' selected' : '') + '>无 (本地 Web)</option>'
+    + '<option value="telegram"' + (platform === 'telegram' ? ' selected' : '') + '>✈️ Telegram</option>'
+    + '<option value="discord"' + (platform === 'discord' ? ' selected' : '') + '>🎮 Discord</option>'
+    + '<option value="feishu"' + (platform === 'feishu' ? ' selected' : '') + '>🐦 飞书</option>'
+    + '<option value="qq"' + (platform === 'qq' ? ' selected' : '') + '>🐧 QQ</option>'
+    + '<option value="wechat"' + (platform === 'wechat' ? ' selected' : '') + '>💬 微信</option>'
+    + '</select>'
+    + '<div class="hint">选择 Agent 对接的聊天平台</div></div>'
+    + '<div class="agent-form-group" id="platformTokenGroup" style="display:' + (platform ? '' : 'none') + '"><label>平台 Token</label>'
+    + '<input type="text" id="agentFormPlatformToken" placeholder="Bot Token" value="' + escapeHtml(platform_token) + '">'
+    + '<div class="hint">聊天平台的 Bot Token</div></div>'
+    + '<div class="agent-form-group" id="platformAppIdGroup" style="display:' + (platform === 'feishu' ? '' : 'none') + '"><label>App ID</label>'
+    + '<input type="text" id="agentFormPlatformAppId" placeholder="飞书 App ID" value="' + escapeHtml(platform_app_id) + '">'
+    + '<div class="hint">飞书应用的 App ID</div></div>'
+    + '<div class="agent-form-group" id="platformAppSecretGroup" style="display:' + (platform === 'feishu' ? '' : 'none') + '"><label>App Secret</label>'
+    + '<input type="text" id="agentFormPlatformAppSecret" placeholder="飞书 App Secret" value="' + escapeHtml(platform_app_secret) + '">'
+    + '<div class="hint">飞书应用的 App Secret</div></div>'
+    + '</div>'
+    + '<div class="agent-form-group"><label>Identity (身份)</label>'
+    + '<textarea id="agentFormIdentity" placeholder="你是一个... 你擅长... 你的风格是..." rows="3">' + escapeHtml(identity) + '</textarea>'
+    + '<div class="hint">定义 Agent 的身份和角色</div></div>'
+    + '<div class="agent-form-group"><label>Soul (灵魂/人格)</label>'
+    + '<textarea id="agentFormSoul" placeholder="核心指令、行为准则、约束..." rows="4">' + escapeHtml(soul) + '</textarea>'
+    + '<div class="hint">深层人格定义，影响 Agent 的思维方式</div></div>'
+    + '<div class="agent-modal-actions">'
+    + (isEdit ? '<button class="agent-modal-btn agent-modal-btn-delete" onclick="deleteAgent(\'' + escapeHtml(editPath) + '\')">🗑️ 删除</button>' : '')
+    + '<button class="agent-modal-btn agent-modal-btn-cancel" onclick="closeAgentModal()">取消</button>'
+    + '<button class="agent-modal-btn agent-modal-btn-primary" onclick="saveAgentModal(\'' + escapeHtml(editPath || '') + '\',\'' + escapeHtml(parentPath || '') + '\')">'
+    + (isEdit ? '保存修改' : (isChild ? '创建子 Agent' : '创建 Agent'))
+    + '</button></div></div></div>';
+  // Store context in hidden field
+  var hidden = document.createElement('input');
+  hidden.type = 'hidden';
+  hidden.id = 'agentFormContext';
+  hidden.value = JSON.stringify({editPath: editPath || '', parentPath: parentPath || '', isEdit: isEdit, isChild: isChild});
+  container.querySelector('.agent-modal').appendChild(hidden);
+}
+function pickAvatar(el, emoji) {
+  document.querySelectorAll('.agent-avatar-option').forEach(function(e) { e.classList.remove('selected'); });
+  el.classList.add('selected');
+  document.getElementById('agentFormEmoji').value = emoji;
+}
+function onModelSelect() {
+  var sel = document.getElementById('agentFormModelId');
+  var hint = document.getElementById('modelHint');
+  if (!sel || !hint) return;
+  var modelId = sel.value;
+  if (!modelId) {
+    hint.textContent = '从系统模型库中选择，留空使用系统默认模型';
+    return;
+  }
+  var found = state.modelsLibrary.find(function(m) { return m.id === modelId; });
+  if (found) {
+    var details = found.provider;
+    if (found.base_url) details += ' | ' + found.base_url;
+    if (found.model && found.model !== found.id) details += ' | 模型: ' + found.model;
+    hint.textContent = '提供商: ' + details;
+  } else {
+    hint.textContent = '模型: ' + modelId;
+  }
+}
+function onPlatformSelect() {
+  var sel = document.getElementById('agentFormPlatform');
+  var platform = sel ? sel.value : '';
+  var tokenGroup = document.getElementById('platformTokenGroup');
+  var appIdGroup = document.getElementById('platformAppIdGroup');
+  var appSecretGroup = document.getElementById('platformAppSecretGroup');
+  if (tokenGroup) tokenGroup.style.display = platform ? '' : 'none';
+  if (appIdGroup) appIdGroup.style.display = (platform === 'feishu') ? '' : 'none';
+  if (appSecretGroup) appSecretGroup.style.display = (platform === 'feishu') ? '' : 'none';
+}
+function closeAgentModal() {
+  document.getElementById('agentModalContainer').innerHTML = '';
+}
+async function saveAgentModal(editPath, parentPath) {
+  var ctxEl = document.getElementById('agentFormContext');
+  var ctx = ctxEl ? JSON.parse(ctxEl.value) : {};
+  var isEdit = ctx.isEdit;
+  var isChild = ctx.isChild;
+  var nameEl = document.getElementById('agentFormName');
+  var modelIdEl = document.getElementById('agentFormModelId');
+  var descEl = document.getElementById('agentFormDesc');
+  var identityEl = document.getElementById('agentFormIdentity');
+  var soulEl = document.getElementById('agentFormSoul');
+  var emojiEl = document.getElementById('agentFormEmoji');
+  var execEl = document.getElementById('agentFormExecMode');
+  var platformEl = document.getElementById('agentFormPlatform');
+  var platformTokenEl = document.getElementById('agentFormPlatformToken');
+  var platformAppIdEl = document.getElementById('agentFormPlatformAppId');
+  var platformAppSecretEl = document.getElementById('agentFormPlatformAppSecret');
+  var name = nameEl.value.trim().toLowerCase().replace(/[^a-z0-9_-]/g, '');
+  if (!name) { toast('请输入有效的 Agent 名称', 'error'); return; }
+  if (!isEdit && name.length < 2) { toast('名称至少 2 个字符', 'error'); return; }
+  var payload = {
+    name: name,
+    description: descEl.value.trim(),
+    identity: identityEl.value.trim(),
+    soul: soulEl.value.trim(),
+    avatar_emoji: emojiEl.value,
+    execution_mode: execEl.value,
+  };
+  // 模型选择
+  if (modelIdEl && modelIdEl.value) {
+    payload.model_id = modelIdEl.value;
+  }
+  // 平台绑定
+  if (platformEl && platformEl.value) {
+    payload.platform = platformEl.value;
+    if (platformTokenEl && platformTokenEl.value.trim()) {
+      payload.platform_token = platformTokenEl.value.trim();
+    }
+    if (platformAppIdEl && platformAppIdEl.value.trim()) {
+      payload.platform_app_id = platformAppIdEl.value.trim();
+    }
+    if (platformAppSecretEl && platformAppSecretEl.value.trim()) {
+      payload.platform_app_secret = platformAppSecretEl.value.trim();
+    }
+  }
+  try {
+    if (isEdit) {
+      await api('/api/agents/' + encodeURIComponent(editPath), {
+        method: 'PUT',
+        body: JSON.stringify(payload),
+      });
+      toast('Agent 已更新', 'success');
+    } else if (isChild) {
+      var resp = await api('/api/agents/' + encodeURIComponent(parentPath) + '/children', {
+        method: 'POST',
+        body: JSON.stringify(payload),
+      });
+      toast('子 Agent 已创建: ' + (resp.path || name), 'success');
+    } else {
+      await api('/api/agents', {
+        method: 'POST',
+        body: JSON.stringify(payload),
+      });
+      toast('Agent 已创建', 'success');
+    }
+    closeAgentModal();
+    await loadAgents();
+  } catch (e) {
+    toast('保存失败: ' + e.message, 'error');
+  }
+}
+async function deleteAgent(agentPath) {
+  if (agentPath === 'default') { toast('不能删除默认 Agent', 'error'); return; }
+  if (!confirm('确定删除 Agent "' + agentPath + '" 及其所有子 Agent？')) return;
+  try {
+    await api('/api/agents/' + encodeURIComponent(agentPath), { method: 'DELETE' });
+    toast('Agent 已删除', 'success');
+    closeAgentModal();
+    if (state.activeAgent === agentPath || state.activeAgent.startsWith(agentPath + '/')) {
+      state.activeAgent = 'default';
+    }
+    await loadAgents();
+  } catch (e) {
+    toast('删除失败: ' + e.message, 'error');
+  }
+}
+// ══════════════════════════════════════════════════════
+// ── Sessions (scoped to active agent) ──
+// ══════════════════════════════════════════════════════
+async function loadSessions() {
+  try {
+    const url = `/api/sessions?agent=${encodeURIComponent(state.activeAgent)}`;
+    const data = await api(url);
+    state.sessions = (data || []).map(s => ({
+      id: s.id,
+      name: formatSessionName(s.id),
+      messages: s.messages || 0,
+      last: s.last || '',
+    }));
+    // Cache per agent
+    state.agentSessions[state.activeAgent] = [...state.sessions];
+  } catch (e) {
+    // Offline - try cache
+    state.sessions = state.agentSessions[state.activeAgent] || [];
+  }
+  // Add "new chat" option
+  if (state.sessions.length === 0 || state.sessions[0].id !== '__new__') {
+    state.sessions.unshift({ id: '__new__', name: '新对话', messages: 0, last: '' });
+  }
+  renderSessions();
+  // Auto-select most recent session if none selected
+  if (!state.activeSessionId && state.sessions.length > 1) {
+    selectSession(state.sessions[1].id);
+  }
+}
+function formatSessionName(id) {
+  if (id.startsWith('web_')) return id.replace('web_', '').replace(/_/g, ' ');
+  if (id.startsWith('cli_')) return 'CLI: ' + id.replace('cli_', '');
+  // Strip agent prefix if present (e.g., "default_web_2024..." -> "web_2024...")
+  return id.length > 20 ? id.slice(0, 20) + '...' : id;
+}
+function renderSessions(filter = '') {
+  const list = document.getElementById('sessionList');
+  const fl = filter.toLowerCase();
+  const filtered = state.sessions.filter(s =>
+    !fl || s.name.toLowerCase().includes(fl) || s.id.toLowerCase().includes(fl)
+  );
+  list.innerHTML = filtered.map(s => `
+    <div class="session-item ${s.id === state.activeSessionId ? 'active' : ''}"
+         onclick="selectSession('${escapeHtml(s.id)}')" title="${escapeHtml(s.id)}">
+      <div class="session-icon">${s.id === '__new__' ? '✨' : '💬'}</div>
+      <div class="session-info">
+        <div class="session-name">${escapeHtml(s.name)}</div>
+        <div class="session-preview">${s.messages > 0 ? s.messages + ' 条消息' : '暂无消息'}</div>
+      </div>
+      ${s.id !== '__new__' ? `
+        <button class="session-delete" onclick="event.stopPropagation();deleteSession('${escapeHtml(s.id)}')" title="删除">✕</button>
+      ` : ''}
+    </div>
+  `).join('');
+}
+function filterSessions() {
+  renderSessions(document.getElementById('searchInput').value);
+}
+function newChat() {
+  state.activeSessionId = '__new__';
+  state.messages = [];
+  document.getElementById('headerTitle').textContent = '新对话';
+  const agent = findAgentByPath(state.activeAgent);
+  if (agent) {
+    document.getElementById('welcomeEmoji').textContent = agent.avatar_emoji || '👋';
+    document.getElementById('welcomeTitle').textContent = `你好，我是 ${agent.name}`;
+    document.getElementById('welcomeSubtitle').textContent = agent.description || '你的 AI 助手';
+  }
+  document.getElementById('welcomeCard').style.display = '';
+  renderMessages();
+  renderSessions();
+  document.getElementById('userInput').focus();
+}
+async function selectSession(id) {
+  if (id === '__new__') { newChat(); return; }
+  state.activeSessionId = id;
+  document.getElementById('headerTitle').textContent = formatSessionName(id);
+  document.getElementById('welcomeCard').style.display = 'none';
+  renderSessions();
+  // Load messages
+  try {
+    const data = await api(`/api/sessions/${encodeURIComponent(id)}/messages`);
+    state.messages = (data || []).map(m => ({
+      role: m.role,
+      content: m.content,
+      time: m.time || '',
+    }));
+  } catch (e) {
+    state.messages = [];
+    toast('加载消息失败', 'error');
+  }
+  renderMessages();
+}
+async function deleteSession(id) {
+  if (!confirm('确定删除此对话？')) return;
+  try {
+    await api(`/api/sessions/${encodeURIComponent(id)}`, { method: 'DELETE' });
+    if (state.activeSessionId === id) newChat();
+    await loadSessions();
+    toast('对话已删除', 'success');
+  } catch (e) {
+    toast('删除失败', 'error');
+  }
+}
+function clearCurrentChat() {
+  if (!state.activeSessionId || state.activeSessionId === '__new__') return;
+  if (!confirm('确定清空当前对话？')) return;
+  api(`/api/sessions/${encodeURIComponent(state.activeSessionId)}`, { method: 'DELETE' })
+    .then(() => {
+      state.messages = [];
+      renderMessages();
+      toast('对话已清空', 'success');
+      loadSessions();
+    })
+    .catch(() => toast('清空失败', 'error'));
+}
+// ── Messages ──
+function renderMessages() {
+  if (currentView === 'group') {
+    renderGroupMessages();
+    return;
+  }
+  const container = document.getElementById('messagesInner');
+  if (state.messages.length === 0) {
+    // Show welcome card
+    const agent = findAgentByPath(state.activeAgent);
+    container.innerHTML = `
+      <div class="welcome-card" id="welcomeCard">
+        <h2><span class="emoji" id="welcomeEmoji">${agent ? (agent.avatar_emoji || '👋') : '👋'}</span>
+            <span id="welcomeTitle">你好，我是 ${agent ? escapeHtml(agent.name) : 'MyAgent'}</span></h2>
+        <p class="subtitle" id="welcomeSubtitle">${agent ? escapeHtml(agent.description || '你的 AI 助手') : '本地桌面端执行型 AI 助手 — 我可以帮你写代码、搜索信息、管理文件等'}</p>
+        <div class="capabilities">
+          <div class="capability"><span class="cap-icon">💻</span> 代码编写与执行</div>
+          <div class="capability"><span class="cap-icon">🔍</span> 网络搜索与阅读</div>
+          <div class="capability"><span class="cap-icon">📁</span> 文件管理与操作</div>
+          <div class="capability"><span class="cap-icon">🧠</span> 长期记忆系统</div>
+          <div class="capability"><span class="cap-icon">🌐</span> 多平台接入</div>
+          <div class="capability"><span class="cap-icon">🛠️</span> 系统命令执行</div>
+        </div>
+      </div>`;
+    return;
+  }
+  const welcomeCard = document.getElementById('welcomeCard');
+  if (welcomeCard) welcomeCard.style.display = 'none';
+  const agent = findAgentByPath(state.activeAgent);
+  const botEmoji = agent ? (agent.avatar_emoji || '🤖') : '🤖';
+  let html = '';
+  for (const msg of state.messages) {
+    const isUser = msg.role === 'user';
+    const avatar = isUser ? '👤' : botEmoji;
+    const content = renderMarkdown(msg.content);
+    html += `
+      <div class="message-row ${msg.role}">
+        <div class="message-avatar">${avatar}</div>
+        <div>
+          <div class="message-bubble">${content}</div>
+          ${msg.time ? `<div class="message-time">${formatTime(msg.time)}</div>` : ''}
+        </div>
+      </div>`;
+  }
+  // Keep welcome card in DOM but hidden
+  container.innerHTML = html +
+    '<div class="welcome-card" id="welcomeCard" style="display:none"></div>';
+  scrollToBottom();
+}
+function renderMarkdown(text) {
+  if (!text) return '';
+  // Code blocks
+  text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
+    return `<pre><code>${escapeHtml(code.trim())}</code></pre>`;
+  });
+  // Inline code
+  text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
+  // Bold
+  text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  // Italic
+  text = text.replace(/\*(.+?)\*/g, '<em>$1</em>');
+  // Lists
+  text = text.replace(/^[-•]\s+(.+)$/gm, '<li>$1</li>');
+  text = text.replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>');
+  text = text.replace(/^\d+\.\s+(.+)$/gm, '<li>$1</li>');
+  // Blockquote
+  text = text.replace(/^>\s+(.+)$/gm, '<blockquote>$1</blockquote>');
+  // Paragraphs
+  text = text.replace(/\n\n+/g, '</p><p>');
+  text = text.replace(/\n/g, '<br>');
+  text = '<p>' + text + '</p>';
+  // Clean up empty paragraphs
+  text = text.replace(/<p>\s*<\/p>/g, '');
+  return text;
+}
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+function formatTime(timeStr) {
+  if (!timeStr) return '';
+  try {
+    const d = new Date(timeStr);
+    const now = new Date();
+    const diff = now - d;
+    if (diff < 60000) return '刚刚';
+    if (diff < 3600000) return Math.floor(diff / 60000) + ' 分钟前';
+    if (diff < 86400000) return Math.floor(diff / 3600000) + ' 小时前';
+    return d.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+  } catch {
+    return timeStr;
+  }
+}
+function scrollToBottom() {
+  const c = document.getElementById('messagesContainer');
+  requestAnimationFrame(() => { c.scrollTop = c.scrollHeight; });
+}
+// ── Send Message ──
+async function sendMessage() {
+  if (currentView === 'group') {
+    return sendGroupChat();
+  }
+  const input = document.getElementById('userInput');
+  const text = input.value.trim();
+  if (!text || state.isGenerating) return;
+  // Create session if needed (incorporate agent name)
+  let sessionId = state.activeSessionId;
+  if (!sessionId || sessionId === '__new__') {
+    const ts = new Date().toISOString().replace(/[-:T]/g, '').slice(0, 14);
+    sessionId = `${state.activeAgent}_web_${ts}`;
+    state.activeSessionId = sessionId;
+    document.getElementById('headerTitle').textContent = formatSessionName(sessionId);
+  }
+  // Add user message
+  state.messages.push({ role: 'user', content: text, time: new Date().toISOString() });
+  renderMessages();
+  // Clear input
+  input.value = '';
+  input.style.height = 'auto';
+  document.getElementById('sendBtn').disabled = true;
+  // Show typing
+  state.isGenerating = true;
+  showTypingIndicator();
+  document.getElementById('sendBtn').style.display = 'none';
+  document.getElementById('stopBtn').style.display = '';
+  // Start execution progress polling (in exec mode)
+  if (state.chatMode === 'exec') {
+    startExecTimerPolling();
+  }
+  try {
+    state.abortController = new AbortController();
+    const data = await api('/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        message: text,
+        session_id: sessionId,
+        agent_name: state.activeAgent,
+        agent_path: state.activeAgent,
+        mode: state.chatMode,
+      }),
+      signal: state.abortController.signal,
+    });
+    // Add assistant response
+    state.messages.push({
+      role: 'assistant',
+      content: data.response || '(无回复)',
+      time: new Date().toISOString(),
+    });
+    // Update session in list
+    const existing = state.sessions.find(s => s.id === sessionId);
+    if (existing) {
+      existing.messages = (existing.messages || 0) + 2;
+      existing.last = new Date().toISOString();
+    } else {
+      state.sessions.splice(1, 0, {
+        id: sessionId,
+        name: formatSessionName(sessionId),
+        messages: 2,
+        last: new Date().toISOString(),
+      });
+    }
+    // Update cache
+    state.agentSessions[state.activeAgent] = [...state.sessions];
+    renderSessions();
+  } catch (e) {
+    if (e.name === 'AbortError') {
+      state.messages.push({ role: 'assistant', content: '⏹️ 已停止生成', time: new Date().toISOString() });
+    } else {
+      toast('发送失败: ' + e.message, 'error');
+      state.messages.push({ role: 'assistant', content: '❌ 请求失败: ' + e.message, time: new Date().toISOString() });
+    }
+  } finally {
+    state.isGenerating = false;
+    state.abortController = null;
+    hideTypingIndicator();
+    stopExecTimerPolling();
+    document.getElementById('sendBtn').style.display = '';
+    document.getElementById('sendBtn').disabled = true;
+    document.getElementById('stopBtn').style.display = 'none';
+    renderMessages();
+    input.focus();
+  }
+}
+function stopGenerating() {
+  if (state.abortController) {
+    state.abortController.abort();
+  }
+}
+function stopGenerating() {
+  if (state.abortController) {
+    state.abortController.abort();
+  }
+}
+// ── Execution Progress Timer ──
+function startExecTimerPolling() {
+  stopExecTimerPolling();
+  state.execTimerInterval = setInterval(updateExecTimer, 500);
+  updateExecTimer(); // immediate first call
+}
+function stopExecTimerPolling() {
+  if (state.execTimerInterval) {
+    clearInterval(state.execTimerInterval);
+    state.execTimerInterval = null;
+  }
+  // Keep timer visible for a moment to show final status, then fade out
+  const timer = document.getElementById('execTimer');
+  if (timer) {
+    timer.style.opacity = '0';
+    timer.style.transition = 'opacity .5s ease';
+    setTimeout(() => {
+      const t = document.getElementById('execTimer');
+      if (t) t.remove();
+    }, 600);
+  }
+}
+async function updateExecTimer() {
+  try {
+    const data = await fetch('/api/execution/progress');
+    const result = await data.json();
+    renderExecTimer(result);
+  } catch (e) {
+    // Silently ignore polling errors
+  }
+}
+function renderExecTimer(data) {
+  let timer = document.getElementById('execTimer');
+  const active = data.active || [];
+  if (active.length === 0) {
+    if (timer) {
+      // Show completed state briefly
+      timer.style.opacity = '0.6';
+      setTimeout(() => {
+        const t = document.getElementById('execTimer');
+        if (t) t.remove();
+      }, 2000);
+    }
+    return;
+  }
+  // Pick the most recent running execution
+  const exec = active.find(a => a.status === 'running') || active[active.length - 1];
+  if (!exec) return;
+  const elapsed = exec.elapsed || 0;
+  const timeout = exec.timeout || 0;
+  const pct = timeout > 0 ? Math.min((elapsed / timeout) * 100, 100) : 0;
+  const isTimeout = pct >= 95;
+  const isWarning = pct >= 70;
+  const langLabel = {python: 'Python', shell: 'Shell', bash: 'Bash', powershell: 'PowerShell', system: 'System'}[exec.language] || exec.language;
+  const codePreview = exec.code_preview ? escapeHtml(exec.code_preview) : '';
+  const statusLabel = exec.status === 'done' ? '✅ 完成' : exec.status === 'timeout' ? '⏰ 超时' : '⏳ 执行中';
+  const barClass = isTimeout ? 'danger' : isWarning ? 'warning' : '';
+  const timeClass = isTimeout ? 'timeout' : '';
+  const html = `
+    <div class="exec-timer" id="execTimer">
+      <div class="exec-timer-icon">⚡</div>
+      <div class="exec-timer-body">
+        <div class="exec-timer-title">
+          <span class="pulse-dot ${isTimeout ? 'timeout' : ''}"></span>
+          <span>${statusLabel} · ${langLabel}</span>
+        </div>
+        <div class="exec-timer-times">
+          <div class="exec-timer-time ${timeClass}">
+            <span class="time-val">${elapsed.toFixed(1)}</span>
+            <span class="time-unit">s</span>
+          </div>
+          <div style="font-size:10px;color:var(--text3)">
+            上限: ${timeout}s
+          </div>
+        </div>
+        <div class="exec-timer-bar">
+          <div class="exec-timer-bar-fill ${barClass}" style="width:${pct.toFixed(1)}%"></div>
+        </div>
+        ${codePreview ? `<div class="exec-timer-code">${langLabel}: ${codePreview}</div>` : ''}
+      </div>
+    </div>`;
+  if (timer) {
+    timer.outerHTML = html;
+  } else {
+    // Insert after typing indicator
+    const typing = document.getElementById('typingIndicator');
+    const wrapper = document.createElement('div');
+    wrapper.id = 'execTimerWrapper';
+    wrapper.innerHTML = html;
+    wrapper.style.cssText = 'display:none';
+    if (typing) {
+      typing.parentNode.insertBefore(wrapper, typing.nextSibling);
+    } else {
+      const container = document.getElementById('messagesInner');
+      container.appendChild(wrapper);
+    }
+    // Now show it
+    wrapper.style.display = '';
+    // Update the reference
+    document.getElementById('execTimer') || document.getElementById('execTimerWrapper').querySelector('.exec-timer');
+  }
+}
+function showTypingIndicator() {
+  const container = document.getElementById('messagesInner');
+  const agent = findAgentByPath(state.activeAgent);
+  const botEmoji = agent ? (agent.avatar_emoji || '🤖') : '🤖';
+  const el = document.createElement('div');
+  el.className = 'typing-indicator';
+  el.id = 'typingIndicator';
+  el.innerHTML = `
+    <div class="message-avatar" style="background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border-radius:8px;width:32px;height:32px;display:grid;place-items:center;font-size:14px">${botEmoji}</div>
+    <div class="typing-bubble">
+      <div class="typing-dot"></div>
+      <div class="typing-dot"></div>
+      <div class="typing-dot"></div>
+    </div>`;
+  container.appendChild(el);
+  scrollToBottom();
+}
+function hideTypingIndicator() {
+  const el = document.getElementById('typingIndicator');
+  if (el) el.remove();
+}
+// ── Input Handling ──
+function handleKeyDown(e) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    sendMessage();
+  }
+}
+function autoResize(el) {
+  el.style.height = 'auto';
+  el.style.height = Math.min(el.scrollHeight, 150) + 'px';
+}
+// ── Sidebar Toggle ──
+function toggleSidebar() {
+  document.getElementById('sidebar').classList.toggle('hidden');
+}
+// ── Toast ──
+function toast(message, type = 'info') {
+  const container = document.getElementById('toastContainer');
+  const el = document.createElement('div');
+  el.className = `toast toast-${type}`;
+  el.textContent = message;
+  container.appendChild(el);
+  setTimeout(() => { el.style.opacity = '0'; setTimeout(() => el.remove(), 300); }, 3000);
+}
+// ══════════════════════════════════════════════════════
+// ── Config Management (热重载 / 导入 / 导出) ──
+// ══════════════════════════════════════════════════════
+function showConfigModal() {
+  var container = document.getElementById('configModalContainer');
+  container.innerHTML = '<div class="modal-overlay" onclick="if(event.target===this)closeConfigModal()"><div class="config-modal">'
+    + '<h3>⚙️ 配置管理</h3>'
+    + '<p class="modal-subtitle">热重载、导入导出系统配置（无需重启服务）</p>'
+    // ── 热重载 ──
+    + '<div class="config-section">'
+    + '<h4><span class="section-icon">🔄</span> 热重载</h4>'
+    + '<p style="font-size:12px;color:var(--text2);margin-bottom:12px">从配置文件重新加载所有设置，立即生效，无需重启服务。适用于直接编辑了 <code style="background:var(--bg3);padding:1px 4px;border-radius:3px">~/.myagent/config.json</code> 后的场景。</p>'
+    + '<div class="config-action-row">'
+    + '<button class="config-action-btn primary" onclick="hotReloadConfig()" id="reloadBtn">'
+    + '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>'
+    + '热重载配置'</button>'
+    + '</div>'
+    + '<div class="config-status" id="reloadStatus"></div>'
+    + '</div>'
+    // ── 导出 ──
+    + '<div class="config-section">'
+    + '<h4><span class="section-icon">📤</span> 导出备份</h4>'
+    + '<p style="font-size:12px;color:var(--text2);margin-bottom:12px">将当前完整配置导出为 JSON 文件，用于备份或迁移到其他设备。</p>'
+    + '<div class="config-action-row">'
+    + '<button class="config-action-btn" onclick="exportConfig(false)" id="exportSafeBtn">'
+    + '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>'
+    + '导出（脱敏）</button>'
+    + '<button class="config-action-btn danger" onclick="exportConfig(true)" id="exportFullBtn">'
+    + '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>'
+    + '导出（含密钥）</button>'
+    + '</div>'
+    + '<div class="config-status" id="exportStatus"></div>'
+    + '</div>'
+    // ── 导入 ──
+    + '<div class="config-section">'
+    + '<h4><span class="section-icon">📥</span> 导入配置</h4>'
+    + '<p style="font-size:12px;color:var(--text2);margin-bottom:12px">从之前导出的 JSON 备份文件恢复配置。导入后自动热重载生效。</p>'
+    + '<div class="config-import-area" id="importDropArea" onclick="document.getElementById(\'configFileInput\').click()" ondragover="event.preventDefault();this.classList.add(\'dragover\')" ondragleave="this.classList.remove(\'dragover\')" ondrop="handleConfigDrop(event)">'
+    + '<div class="upload-icon">📁</div>'
+    + '<div class="upload-text">点击选择文件或拖拽 JSON 到此处</div>'
+    + '<div class="upload-hint">支持 myagent_config_*.json 格式</div>'
+    + '<input type="file" id="configFileInput" accept=".json" onchange="handleConfigFile(this)" style="display:none">'
+    + '</div>'
+    + '<div class="config-checkbox-row">'
+    + '<input type="checkbox" id="importOverwrite">'
+    + '<label for="importOverwrite">完全覆盖当前配置（否则智能合并）</label>'
+    + '</div>'
+    + '<div class="config-status" id="importStatus"></div>'
+    + '</div>'
+    // ── 当前配置预览 ──
+    + '<div class="config-section">'
+    + '<h4><span class="section-icon">👁️</span> 当前配置预览</h4>'
+    + '<div class="config-preview" id="configPreview">加载中...</div>'
+    + '</div>'
+    // ── 关闭按钮 ──
+    + '<div class="agent-modal-actions" style="margin-top:20px;padding-top:16px;border-top:1px solid var(--border-light)">'
+    + '<button class="agent-modal-btn agent-modal-btn-cancel" onclick="closeConfigModal()">关闭</button>'
+    + '</div></div></div>';
+  // 加载当前配置预览
+  loadConfigPreview();
+}
+function closeConfigModal() {
+  document.getElementById('configModalContainer').innerHTML = '';
+}
+function setConfigStatus(id, type, message) {
+  var el = document.getElementById(id);
+  if (!el) return;
+  el.className = 'config-status show ' + type;
+  if (type === 'loading') {
+    el.innerHTML = '<div class="spinner"></div> ' + escapeHtml(message);
+  } else {
+    el.textContent = message;
+  }
+  if (type !== 'loading') {
+    setTimeout(function() { el.className = 'config-status'; }, 5000);
+  }
+}
+async function loadConfigPreview() {
+  var el = document.getElementById('configPreview');
+  if (!el) return;
+  try {
+    var cfg = await api('/api/config');
+    var c = cfg.config || cfg;
+    var lines = [];
+    if (c.llm) {
+      lines.push('<span class="key">LLM:</span> ' + escapeHtml(c.llm.provider + '/' + c.llm.model));
+      lines.push('<span class="key">Base URL:</span> ' + escapeHtml(c.llm.base_url || 'default'));
+      lines.push('<span class="key">Temperature:</span> ' + c.llm.temperature + ' | Max Tokens: ' + c.llm.max_tokens);
+    }
+    if (c.executor) {
+      lines.push('<span class="key">执行引擎:</span> ' + escapeHtml(c.executor.execution_mode || 'local') + ' | Timeout: ' + (c.executor.timeout || 300) + 's');
+    }
+    if (c.memory) {
+      lines.push('<span class="key">记忆:</span> 短期 ' + (c.memory.max_short_term || 50) + ' 轮 | 自动总结: ' + (c.memory.auto_summarize ? '开' : '关'));
+    }
+    if (c.agent) {
+      lines.push('<span class="key">Agent:</span> 最大迭代 ' + (c.agent.max_iterations || 30) + ' | 并行 ' + (c.agent.max_parallel || 3));
+    }
+    if (c.chat_platforms && c.chat_platforms.length > 0) {
+      var platforms = c.chat_platforms.filter(function(p) { return p.enabled; }).map(function(p) { return p.platform; });
+      if (platforms.length > 0) {
+        lines.push('<span class="key">聊天平台:</span> ' + escapeHtml(platforms.join(', ')));
+      }
+    }
+    if (c.log_level) {
+      lines.push('<span class="key">日志级别:</span> ' + escapeHtml(c.log_level));
+    }
+    if (cfg._meta) {
+      lines.push('');
+      lines.push('<span class="key">备份信息:</span> ' + escapeHtml(cfg._meta.exported_at || 'N/A'));
+    }
+    el.innerHTML = lines.join('\n') || '暂无配置信息';
+  } catch (e) {
+    el.textContent = '加载配置失败: ' + e.message;
+  }
+}
+async function hotReloadConfig() {
+  var btn = document.getElementById('reloadBtn');
+  btn.disabled = true;
+  setConfigStatus('reloadStatus', 'loading', '正在热重载配置...');
+  try {
+    var result = await api('/api/config/reload', { method: 'POST', body: JSON.stringify({}) });
+    if (result.ok) {
+      var changes = result.changes || [];
+      var msg = '✅ 配置已热重载';
+      if (changes.length > 0) {
+        msg += ' — 变更: ' + changes.join(', ');
+      } else {
+        msg += ' — 无显著变更';
+      }
+      setConfigStatus('reloadStatus', 'success', msg);
+      // 刷新配置预览
+      loadConfigPreview();
+      // 刷新状态栏
+      loadStatus();
+      toast('配置已热重载', 'success');
+    } else {
+      setConfigStatus('reloadStatus', 'error', '❌ 热重载失败: ' + (result.error || '未知错误'));
+    }
+  } catch (e) {
+    setConfigStatus('reloadStatus', 'error', '❌ 热重载失败: ' + e.message);
+  }
+  btn.disabled = false;
+}
+async function exportConfig(includeSecrets) {
+  var btnId = includeSecrets ? 'exportFullBtn' : 'exportSafeBtn';
+ var statusId = 'exportStatus';
+  var btn = document.getElementById(btnId);
+  btn.disabled = true;
+  setConfigStatus(statusId, 'loading', '正在导出配置...');
+  try {
+    var resp = await fetch('/api/config/export', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ include_secrets: includeSecrets }),
+    });
+    if (!resp.ok) {
+      var errData = await resp.json();
+      throw new Error(errData.error || '导出失败');
+    }
+    // 下载文件
+    var blob = await resp.blob();
+    var disposition = resp.headers.get('Content-Disposition') || '';
+    var filenameMatch = disposition.match(/filename="([^"]+)"/);
+    var filename = filenameMatch ? filenameMatch[1] : 'myagent_config.json';
+    var url = URL.createObjectURL(blob);
+    var a = document.createElement('a');
+    a.href = url; a.download = filename;
+    document.body.appendChild(a); a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    setConfigStatus(statusId, 'success', '✅ 配置已导出: ' + filename);
+    toast('配置已导出: ' + filename, 'success');
+  } catch (e) {
+    setConfigStatus(statusId, 'error', '❌ 导出失败: ' + e.message);
+  }
+  btn.disabled = false;
+}
+function handleConfigDrop(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  document.getElementById('importDropArea').classList.remove('dragover');
+  var files = event.dataTransfer.files;
+  if (files.length > 0 && files[0].name.endsWith('.json')) {
+    importConfigFromFile(files[0]);
+  } else {
+    toast('请拖入 JSON 文件', 'error');
+  }
+}
+function handleConfigFile(input) {
+  if (input.files.length > 0) {
+    importConfigFromFile(input.files[0]);
+  }
+  input.value = ''; // reset for re-select
+}
+async function importConfigFromFile(file) {
+  var overwrite = document.getElementById('importOverwrite').checked;
+  setConfigStatus('importStatus', 'loading', '正在读取 ' + file.name + '...');
+  try {
+    var text = await file.text();
+    var data = JSON.parse(text);
+    setConfigStatus('importStatus', 'loading', '正在导入配置...');
+    if (overwrite) {
+      data._overwrite = true;
+    }
+    var result = await api('/api/config/import', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+    if (result.ok) {
+      var changed = result.changed_keys || [];
+      var msg = '✅ ' + result.message;
+      if (changed.length > 0) {
+        msg += ' (' + changed.slice(0, 5).join(', ') + (changed.length > 5 ? '...' : '') + ')';
+      }
+      setConfigStatus('importStatus', 'success', msg);
+      loadConfigPreview();
+      loadStatus();
+      toast(result.message, 'success');
+    } else {
+      setConfigStatus('importStatus', 'error', '❌ 导入失败: ' + (result.message || '未知错误'));
+    }
+  } catch (e) {
+    if (e instanceof SyntaxError) {
+      setConfigStatus('importStatus', 'error', '❌ 文件格式错误: 不是有效的 JSON');
+    } else {
+      setConfigStatus('importStatus', 'error', '❌ 导入失败: ' + e.message);
+    }
+  }
+}
+// ══════════════════════════════════════════════════════
+// ── Group Chat ──
+// ══════════════════════════════════════════════════════
+// ── Group API ──
+async function fetchGroups() {
+  try {
+    var data = await api('/api/groups');
+    groups = data || [];
+    renderGroups();
+  } catch (e) {
+    groups = [];
+    renderGroups();
+  }
+}
+async function createGroupApi(name, description, emoji, color, members) {
+  return await api('/api/groups', {
+    method: 'POST',
+    body: JSON.stringify({name: name, description: description, emoji: emoji, color: color, members: members})
+  });
+}
+async function getGroup(gid) {
+  return await api('/api/groups/' + encodeURIComponent(gid));
+}
+async function updateGroup(gid, data) {
+  return await api('/api/groups/' + encodeURIComponent(gid), {
+    method: 'PUT',
+    body: JSON.stringify(data)
+  });
+}
+async function deleteGroup(gid) {
+  return await api('/api/groups/' + encodeURIComponent(gid), {
+    method: 'DELETE'
+  });
+}
+async function getGroupMessages(gid) {
+  return await api('/api/groups/' + encodeURIComponent(gid) + '/messages');
+}
+async function sendGroupMessageApi(gid, message) {
+  return await api('/api/groups/' + encodeURIComponent(gid) + '/messages', {
+    method: 'POST',
+    body: JSON.stringify({message: message})
+  });
+}
+async function addGroupMember(gid, agentPath, role) {
+  return await api('/api/groups/' + encodeURIComponent(gid) + '/members', {
+    method: 'POST',
+    body: JSON.stringify({agent_path: agentPath, role: role || 'member'})
+  });
+}
+async function removeGroupMemberApi(gid, agentPath) {
+  return await api('/api/groups/' + encodeURIComponent(gid) + '/members/' + encodeURIComponent(agentPath), {
+    method: 'DELETE'
+  });
+}
+async function setMemberRole(gid, agentPath, role) {
+  return await api('/api/groups/' + encodeURIComponent(gid) + '/members/' + encodeURIComponent(agentPath) + '/role', {
+    method: 'PUT',
+    body: JSON.stringify({role: role})
+  });
+}
+// ── Group Sidebar ──
+function renderGroups() {
+  var listEl = document.getElementById('groupList');
+  if (!listEl) return;
+  if (!groupsSectionExpanded) {
+    listEl.style.display = 'none';
+    return;
+  }
+  listEl.style.display = '';
+  if (groups.length === 0) {
+    listEl.innerHTML = '<div style="padding:12px 16px;font-size:12px;color:var(--text3);text-align:center">暂无群聊<br>点击 + 创建</div>';
+    return;
+  }
+  var html = '';
+  for (var i = 0; i < groups.length; i++) {
+    var g = groups[i];
+    var memberCount = (g.members || []).length;
+    var isActive = g.id === currentGroupId;
+    html += '<div class="group-item ' + (isActive ? 'active' : '') + '" onclick="selectGroup(\'' + escapeHtml(g.id) + '\')" title="' + escapeHtml(g.name) + '">';
+    html += '<div class="group-icon">' + escapeHtml(g.emoji || '👥') + '</div>';
+    html += '<div class="group-info">';
+    html += '<div class="group-name">' + escapeHtml(g.name) + '</div>';
+    html += '<div class="group-preview">' + escapeHtml(g.description || memberCount + ' 位成员') + '</div>';
+    html += '</div>';
+    html += '<span class="group-badge">' + memberCount + '</span>';
+    html += '<button class="group-delete" onclick="event.stopPropagation();deleteGroupConfirm(\'' + escapeHtml(g.id) + '\')" title="删除">✕</button>';
+    html += '</div>';
+  }
+  listEl.innerHTML = html;
+}
+function toggleGroupsSection() {
+  groupsSectionExpanded = !groupsSectionExpanded;
+  renderGroups();
+}
+// ── Select Group ──
+async function selectGroup(gid) {
+  if (gid === currentGroupId) return;
+  currentView = 'group';
+  currentGroupId = gid;
+  // Update sidebar
+  renderSessions();
+  renderGroups();
+  // Load group data
+  try {
+    var groupData = await getGroup(gid);
+    // Update header
+    document.getElementById('headerTitle').textContent = (groupData.emoji || '👥') + ' ' + groupData.name;
+    document.getElementById('activeAgentBadge').style.display = 'none';
+    document.getElementById('groupBackBtn').style.display = '';
+    document.getElementById('groupSettingsBtn').style.display = '';
+    document.getElementById('clearChatBtn').style.display = 'none';
+    var dot = document.querySelector('.main-title .dot');
+    if (dot) dot.style.display = 'none';
+    // Update input placeholder
+    document.getElementById('userInput').placeholder = '发送到群聊... (Enter 发送, Shift+Enter 换行)';
+    // Load messages
+    var msgsData = await getGroupMessages(gid);
+    groupMessages = msgsData || [];
+    renderGroupMessages();
+  } catch (e) {
+    toast('加载群聊失败: ' + e.message, 'error');
+    exitGroupChat();
+  }
+}
+function exitGroupChat() {
+  currentView = 'chat';
+  currentGroupId = null;
+  groupMessages = [];
+  // Restore header
+  document.getElementById('headerTitle').textContent = '新对话';
+  document.getElementById('activeAgentBadge').style.display = '';
+  document.getElementById('groupBackBtn').style.display = 'none';
+  document.getElementById('groupSettingsBtn').style.display = 'none';
+  document.getElementById('clearChatBtn').style.display = '';
+  var dot = document.querySelector('.main-title .dot');
+  if (dot) dot.style.display = '';
+  // Restore input placeholder
+  document.getElementById('userInput').placeholder = '输入消息... (Enter 发送, Shift+Enter 换行)';
+  // Update sidebar
+  renderSessions();
+  renderGroups();
+  // Show normal messages
+  renderMessages();
+}
+// ── Render Group Messages ──
+function renderGroupMessages() {
+  var container = document.getElementById('messagesInner');
+  var html = '';
+  if (groupMessages.length === 0) {
+    var group = groups.find(function(g) { return g.id === currentGroupId; });
+    html = '<div class="welcome-card">'
+      + '<h2><span class="emoji">' + escapeHtml((group && group.emoji) || '👥') + '</span>'
+      + ' <span>群聊: ' + escapeHtml((group && group.name) || '') + '</span></h2>'
+      + '<p class="subtitle">向所有成员发送消息，每个 Agent 会分别回复</p>'
+      + '</div>';
+    container.innerHTML = html;
+    return;
+  }
+  for (var i = 0; i < groupMessages.length; i++) {
+    var msg = groupMessages[i];
+    if (msg.type === 'system') {
+      html += '<div class="group-msg-system">' + escapeHtml(msg.content || msg.text || '') + '</div>';
+    } else if (msg.role === 'user') {
+      html += '<div class="message-row user" style="animation:msgIn .25s ease-out">'
+        + '<div class="message-avatar" style="background:var(--accent);color:#fff">👤</div>'
+        + '<div><div class="message-bubble">' + renderMarkdown(msg.content || '') + '</div>'
+        + (msg.time ? '<div class="message-time" style="text-align:right">' + formatTime(msg.time) + '</div>' : '')
+        + '</div></div>';
+    } else if (msg.role === 'assistant' || msg.agent) {
+      var agentName = msg.agent_name || msg.agent || 'Agent';
+      var agentEmoji = msg.agent_emoji || '🤖';
+      var agentColor = msg.agent_color || 'var(--accent)';
+      var agentRole = msg.agent_role || '';
+      html += '<div class="group-msg-row">'
+        + '<div class="group-msg-avatar" style="background:' + agentColor + ';color:#fff">' + agentEmoji + '</div>'
+        + '<div>'
+        + '<div class="group-msg-name">' + escapeHtml(agentName)
+        + (agentRole ? ' <span class="role-badge">' + escapeHtml(agentRole) + '</span>' : '')
+        + '</div>'
+        + '<div class="group-msg-bubble" style="border-left-color:' + agentColor + '">' + renderMarkdown(msg.content || '') + '</div>'
+        + (msg.time ? '<div class="group-msg-time">' + formatTime(msg.time) + '</div>' : '')
+        + '</div></div>';
+    } else if (msg.responses) {
+      // Multiple agent responses (broadcast response)
+      for (var j = 0; j < msg.responses.length; j++) {
+        var r = msg.responses[j];
+        var rName = r.agent_name || r.agent || 'Agent';
+        var rEmoji = r.agent_emoji || '🤖';
+        var rColor = r.agent_color || 'var(--accent)';
+        html += '<div class="group-msg-row">'
+          + '<div class="group-msg-avatar" style="background:' + rColor + ';color:#fff">' + rEmoji + '</div>'
+          + '<div>'
+          + '<div class="group-msg-name">' + escapeHtml(rName) + '</div>'
+          + '<div class="group-msg-bubble" style="border-left-color:' + rColor + '">' + renderMarkdown(r.content || r.response || '') + '</div>'
+          + '</div></div>';
+      }
+    }
+  }
+  container.innerHTML = html;
+  scrollToBottom();
+}
+// ── Send Group Message ──
+async function sendGroupChat() {
+  var input = document.getElementById('userInput');
+  var text = input.value.trim();
+  if (!text || state.isGenerating || !currentGroupId) return;
+  // Add user message
+  groupMessages.push({role: 'user', content: text, time: new Date().toISOString()});
+  renderGroupMessages();
+  // Clear input
+  input.value = '';
+  input.style.height = 'auto';
+  document.getElementById('sendBtn').disabled = true;
+  // Show typing
+  state.isGenerating = true;
+  showTypingIndicator();
+  document.getElementById('sendBtn').style.display = 'none';
+  document.getElementById('stopBtn').style.display = '';
+  try {
+    state.abortController = new AbortController();
+    var data = await sendGroupMessageApi(currentGroupId, text);
+    // Handle response - support multiple response formats
+    if (data.responses && data.responses.length > 0) {
+      groupMessages.push({role: 'broadcast', responses: data.responses, time: new Date().toISOString()});
+    } else if (data.response || data.content) {
+      groupMessages.push({role: 'assistant', content: data.response || data.content, agent_name: data.agent_name, agent_emoji: data.agent_emoji, agent_color: data.agent_color, time: new Date().toISOString()});
+    }
+    if (data.system_message) {
+      groupMessages.push({type: 'system', content: data.system_message, time: new Date().toISOString()});
+    }
+    renderGroupMessages();
+    fetchGroups();
+  } catch (e) {
+    if (e.name !== 'AbortError') {
+      toast('发送失败: ' + e.message, 'error');
+      groupMessages.push({type: 'system', content: '❌ 发送失败: ' + e.message});
+      renderGroupMessages();
+    }
+  } finally {
+    state.isGenerating = false;
+    state.abortController = null;
+    hideTypingIndicator();
+    document.getElementById('sendBtn').style.display = '';
+    document.getElementById('sendBtn').disabled = true;
+    document.getElementById('stopBtn').style.display = 'none';
+    input.focus();
+  }
+}
+// ── Create Group Modal ──
+async function showCreateGroupModal() {
+  var agentsList = state.agentsFlat || [];
+  var emojis = ['👥','🚀','💡','🎨','🔧','📚','🎯','🎮','🎬','🎵'];
+  var colors = ['#4f46e5','#ec4899','#f59e0b','#10b981','#3b82f6','#8b5cf6','#ef4444','#14b8a6','#f97316','#06b6d4'];
+  var agentCheckboxes = '';
+  for (var i = 0; i < agentsList.length; i++) {
+    var a = agentsList[i];
+    var checked = i === 0 ? ' checked' : '';
+    var emoji = a.avatar_emoji || '🤖';
+    agentCheckboxes += '<label class="group-member-pick-item">'
+      + '<input type="checkbox" class="group-member-checkbox" value="' + escapeHtml(a.path) + '"' + checked + '>'
+      + '<div class="group-msg-avatar" style="background:' + (a.avatar_color || getAgentGradient(a.name)) + ';color:#fff;width:28px;height:28px;border-radius:6px;font-size:12px;display:grid;place-items:center">' + emoji + '</div>'
+      + '<div class="pick-agent-info">'
+      + '<div class="pick-agent-name">' + escapeHtml(a.name) + '</div>'
+      + '<div class="pick-agent-desc">' + escapeHtml(a.description || a.path) + '</div>'
+      + '</div></label>';
+  }
+  var container = document.getElementById('groupModalContainer');
+  container.innerHTML = '<div class="modal-overlay" onclick="if(event.target===this)closeGroupModal()"><div class="group-modal">'
+    + '<h3>👥 创建群聊</h3>'
+    + '<p class="modal-subtitle">选择多个 Agent 组成群聊，广播消息给所有成员</p>'
+    + '<div class="agent-form-group"><label>群名称 *</label>'
+    + '<input type="text" id="groupFormName" placeholder="例如: 开发团队, 创意工坊" maxlength="30">'
+    + '</div>'
+    + '<div class="agent-form-group"><label>群描述</label>'
+    + '<textarea id="groupFormDesc" placeholder="描述这个群聊的用途..." rows="2" style="min-height:60px"></textarea>'
+    + '</div>'
+    + '<div class="agent-form-group"><label>头像</label>'
+    + '<div class="agent-avatar-picker" id="groupEmojiPicker">'
+    + emojis.map(function(e, idx) { return '<div class="agent-avatar-option ' + (idx === 0 ? 'selected' : '') + '" onclick="pickGroupEmoji(this,\'' + e + '\')" data-emoji="' + e + '">' + e + '</div>'; }).join('')
+    + '</div><input type="hidden" id="groupFormEmoji" value="👥"></div>'
+    + '<div class="agent-form-group"><label>主题色</label>'
+    + '<div class="color-picker-row" id="groupColorPicker">'
+    + colors.map(function(c, idx) { return '<div class="color-option ' + (idx === 0 ? 'selected' : '') + '" style="background:' + c + '" onclick="pickGroupColor(this,\'' + c + '\')" data-color="' + c + '"></div>'; }).join('')
+    + '</div><input type="hidden" id="groupFormColor" value="#4f46e5"></div>'
+    + '<div class="agent-form-group"><label>选择成员</label>'
+    + '<div class="hint">勾选要加入群聊的 Agent（至少 2 个）</div>'
+    + '<div class="group-member-picker">' + agentCheckboxes + '</div>'
+    + '</div>'
+    + '<div class="agent-modal-actions">'
+    + '<button class="agent-modal-btn agent-modal-btn-cancel" onclick="closeGroupModal()">取消</button>'
+    + '<button class="agent-modal-btn agent-modal-btn-primary" onclick="saveCreateGroup()">创建群聊</button>'
+    + '</div></div></div>';
+}
+function pickGroupEmoji(el, emoji) {
+  document.querySelectorAll('#groupEmojiPicker .agent-avatar-option').forEach(function(e) { e.classList.remove('selected'); });
+  el.classList.add('selected');
+  document.getElementById('groupFormEmoji').value = emoji;
+}
+function pickGroupColor(el, color) {
+  document.querySelectorAll('#groupColorPicker .color-option').forEach(function(e) { e.classList.remove('selected'); });
+  el.classList.add('selected');
+  document.getElementById('groupFormColor').value = color;
+}
+function closeGroupModal() {
+  document.getElementById('groupModalContainer').innerHTML = '';
+}
+async function saveCreateGroup() {
+  var name = document.getElementById('groupFormName').value.trim();
+  if (!name) { toast('请输入群名称', 'error'); return; }
+  var desc = document.getElementById('groupFormDesc').value.trim();
+  var emoji = document.getElementById('groupFormEmoji').value;
+  var color = document.getElementById('groupFormColor').value;
+  var members = [];
+  document.querySelectorAll('.group-member-checkbox:checked').forEach(function(cb) {
+    members.push(cb.value);
+  });
+  if (members.length < 2) { toast('至少选择 2 个成员', 'error'); return; }
+  try {
+    var result = await createGroupApi(name, desc, emoji, color, members);
+    toast('群聊创建成功: ' + name, 'success');
+    closeGroupModal();
+    await fetchGroups();
+    if (result && result.id) {
+      selectGroup(result.id);
+    }
+  } catch (e) {
+    toast('创建失败: ' + e.message, 'error');
+  }
+}
+async function deleteGroupConfirm(gid) {
+  var group = groups.find(function(g) { return g.id === gid; });
+  if (!confirm('确定删除群聊 "' + (group ? group.name : gid) + '"？')) return;
+  try {
+    await deleteGroup(gid);
+    toast('群聊已删除', 'success');
+    if (currentGroupId === gid) exitGroupChat();
+    await fetchGroups();
+  } catch (e) {
+    toast('删除失败: ' + e.message, 'error');
+  }
+}
+// ── Group Settings Modal ──
+async function showGroupSettingsModal() {
+  if (!currentGroupId) return;
+  try {
+    var groupData = await getGroup(currentGroupId);
+    var members = groupData.members || [];
+    var emojis = ['👥','🚀','💡','🎨','🔧','📚','🎯','🎮','🎬','🎵'];
+    var memberListHtml = '';
+    for (var i = 0; i < members.length; i++) {
+      var m = members[i];
+      var roleClass = m.role || 'member';
+      var roleLabel = {owner: '群主', admin: '管理员', member: '成员'}[m.role] || m.role;
+      var emoji = m.avatar_emoji || '🤖';
+      var agentName = m.agent_name || m.agent_path || m.name || 'Unknown';
+      var agentPath = m.agent_path || m.path || '';
+      var isSelf = m.role === 'owner';
+      memberListHtml += '<div class="group-member-item">'
+        + '<div class="group-msg-avatar" style="background:' + (m.agent_color || getAgentGradient(agentName)) + ';color:#fff">' + emoji + '</div>'
+        + '<div class="group-member-info">'
+        + '<div class="group-member-name">' + escapeHtml(agentName) + ' <span class="group-member-role ' + roleClass + '">' + escapeHtml(roleLabel) + '</span></div>'
+        + '</div>'
+        + '<select class="group-member-role-select" style="padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius-xs);font-size:12px;background:var(--bg)" onchange="changeMemberRole(\'' + escapeHtml(currentGroupId) + '\',\'' + escapeHtml(agentPath) + '\',this.value)" ' + (isSelf ? 'disabled' : '') + '>'
+        + '<option value="member"' + (m.role === 'member' ? ' selected' : '') + '>成员</option>'
+        + '<option value="admin"' + (m.role === 'admin' ? ' selected' : '') + '>管理员</option>'
+        + (isSelf ? '<option value="owner" selected disabled>群主</option>' : '')
+        + '</select>'
+        + '<button class="group-member-remove" onclick="removeGroupMemberConfirm(\'' + escapeHtml(currentGroupId) + '\',\'' + escapeHtml(agentPath) + '\',\'' + escapeHtml(agentName) + '\')" ' + (isSelf ? 'disabled title="不能移除群主"' : 'title="移除成员"') + '>✕</button>'
+        + '</div>';
+    }
+    var container = document.getElementById('groupModalContainer');
+    container.innerHTML = '<div class="modal-overlay" onclick="if(event.target===this)closeGroupModal()"><div class="group-modal">'
+      + '<h3>⚙️ 群聊设置</h3>'
+      + '<p class="modal-subtitle">' + escapeHtml(groupData.name || '') + '</p>'
+      + '<div class="agent-form-group"><label>群名称</label>'
+      + '<input type="text" id="groupSettingsName" value="' + escapeHtml(groupData.name || '') + '" maxlength="30">'
+      + '</div>'
+      + '<div class="agent-form-group"><label>群描述</label>'
+      + '<textarea id="groupSettingsDesc" rows="2" style="min-height:60px">' + escapeHtml(groupData.description || '') + '</textarea>'
+      + '</div>'
+      + '<div class="agent-form-group"><label>头像</label>'
+      + '<div class="agent-avatar-picker" id="groupSettingsEmojiPicker">'
+      + emojis.map(function(e) { return '<div class="agent-avatar-option ' + ((groupData.emoji || '👥') === e ? 'selected' : '') + '" onclick="pickGroupSettingsEmoji(this,\'' + e + '\')" data-emoji="' + e + '">' + e + '</div>'; }).join('')
+      + '</div><input type="hidden" id="groupSettingsEmoji" value="' + escapeHtml(groupData.emoji || '👥') + '"></div>'
+      + '<div class="agent-form-group"><label>成员 (' + members.length + ')</label>'
+      + '<div style="margin-bottom:8px">'
+      + '<button class="config-action-btn" onclick="showAddMemberToGroup()" style="font-size:12px;padding:6px 12px">'
+      + '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>'
+      + ' 添加成员</button>'
+      + '</div>'
+      + '<div style="background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:8px 12px">'
+      + memberListHtml
+      + '</div>'
+      + '</div>'
+      + '<div class="agent-modal-actions">'
+      + '<button class="agent-modal-btn agent-modal-btn-delete" onclick="dissolveGroup()">🗑️ 解散群聊</button>'
+      + '<button class="agent-modal-btn agent-modal-btn-cancel" onclick="closeGroupModal()">取消</button>'
+      + '<button class="agent-modal-btn agent-modal-btn-primary" onclick="saveGroupSettings()">保存</button>'
+      + '</div></div></div>';
+  } catch (e) {
+    toast('加载群聊设置失败: ' + e.message, 'error');
+  }
+}
+function pickGroupSettingsEmoji(el, emoji) {
+  document.querySelectorAll('#groupSettingsEmojiPicker .agent-avatar-option').forEach(function(e) { e.classList.remove('selected'); });
+  el.classList.add('selected');
+  document.getElementById('groupSettingsEmoji').value = emoji;
+}
+async function saveGroupSettings() {
+  if (!currentGroupId) return;
+  var name = document.getElementById('groupSettingsName').value.trim();
+  if (!name) { toast('群名称不能为空', 'error'); return; }
+  try {
+    await updateGroup(currentGroupId, {
+      name: name,
+      description: document.getElementById('groupSettingsDesc').value.trim(),
+      emoji: document.getElementById('groupSettingsEmoji').value
+    });
+    toast('群聊设置已保存', 'success');
+    closeGroupModal();
+    await fetchGroups();
+    var group = groups.find(function(g) { return g.id === currentGroupId; });
+    if (group) {
+      document.getElementById('headerTitle').textContent = (group.emoji || '👥') + ' ' + group.name;
+    }
+  } catch (e) {
+    toast('保存失败: ' + e.message, 'error');
+  }
+}
+async function dissolveGroup() {
+  if (!currentGroupId) return;
+  if (!confirm('确定解散此群聊？此操作不可恢复。')) return;
+  try {
+    await deleteGroup(currentGroupId);
+    toast('群聊已解散', 'success');
+    closeGroupModal();
+    exitGroupChat();
+    await fetchGroups();
+  } catch (e) {
+    toast('解散失败: ' + e.message, 'error');
+  }
+}
+async function removeGroupMemberConfirm(gid, agentPath, agentName) {
+  if (!confirm('确定将 ' + agentName + ' 移出群聊？')) return;
+  try {
+    await removeGroupMemberApi(gid, agentPath);
+    toast(agentName + ' 已移出群聊', 'success');
+    showGroupSettingsModal();
+    await fetchGroups();
+  } catch (e) {
+    toast('移除失败: ' + e.message, 'error');
+  }
+}
+async function changeMemberRole(gid, agentPath, newRole) {
+  try {
+    await setMemberRole(gid, agentPath, newRole);
+    toast('角色已更新', 'success');
+  } catch (e) {
+    toast('更新角色失败: ' + e.message, 'error');
+  }
+}
+async function showAddMemberToGroup() {
+  if (!currentGroupId) return;
+  try {
+    var groupData = await getGroup(currentGroupId);
+    var existingMembers = (groupData.members || []).map(function(m) { return m.agent_path || m.path; });
+    var available = state.agentsFlat.filter(function(a) { return existingMembers.indexOf(a.path) === -1; });
+    if (available.length === 0) {
+      toast('没有可添加的 Agent', 'info');
+      return;
+    }
+    var checkboxes = '';
+    for (var i = 0; i < available.length; i++) {
+      var a = available[i];
+      checkboxes += '<label class="group-member-pick-item">'
+        + '<input type="checkbox" class="add-member-checkbox" value="' + escapeHtml(a.path) + '">'
+        + '<div class="group-msg-avatar" style="background:' + (a.avatar_color || getAgentGradient(a.name)) + ';color:#fff;width:28px;height:28px;border-radius:6px;font-size:12px;display:grid;place-items:center">' + (a.avatar_emoji || '🤖') + '</div>'
+        + '<div class="pick-agent-info">'
+        + '<div class="pick-agent-name">' + escapeHtml(a.name) + '</div>'
+        + '<div class="pick-agent-desc">' + escapeHtml(a.description || a.path) + '</div>'
+        + '</div></label>';
+    }
+    var container = document.getElementById('groupModalContainer');
+    container.innerHTML = '<div class="modal-overlay" onclick="if(event.target===this)closeGroupModal()"><div class="group-modal">'
+      + '<h3>➕ 添加成员</h3>'
+      + '<p class="modal-subtitle">选择要添加到群聊的 Agent</p>'
+      + '<div class="agent-form-group"><label>可用 Agent</label>'
+      + '<div class="group-member-picker" style="max-height:300px">' + checkboxes + '</div>'
+      + '</div>'
+      + '<div class="agent-modal-actions">'
+      + '<button class="agent-modal-btn agent-modal-btn-cancel" onclick="showGroupSettingsModal()">返回</button>'
+      + '<button class="agent-modal-btn agent-modal-btn-primary" onclick="confirmAddMembers()">添加</button>'
+      + '</div></div></div>';
+  } catch (e) {
+    toast('加载失败: ' + e.message, 'error');
+  }
+}
+async function confirmAddMembers() {
+  if (!currentGroupId) return;
+  var selected = [];
+  document.querySelectorAll('.add-member-checkbox:checked').forEach(function(cb) {
+    selected.push(cb.value);
+  });
+  if (selected.length === 0) { toast('请选择至少一个 Agent', 'error'); return; }
+  try {
+    for (var i = 0; i < selected.length; i++) {
+      await addGroupMember(currentGroupId, selected[i]);
+    }
+    toast(selected.length + ' 个成员已添加', 'success');
+    showGroupSettingsModal();
+    await fetchGroups();
+  } catch (e) {
+    toast('添加失败: ' + e.message, 'error');
+  }
+}
+// ── Keyboard Shortcuts ──
+document.addEventListener('keydown', (e) => {
+  // Ctrl/Cmd + N: new chat
+  if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
+    e.preventDefault();
+    newChat();
+  }
+  // Ctrl/Cmd + B: toggle sidebar
+  if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
+    e.preventDefault();
+    toggleSidebar();
+  }
+  // Ctrl/Cmd + /: focus input
+  if ((e.ctrlKey || e.metaKey) && e.key === '/') {
+    e.preventDefault();
+    document.getElementById('userInput').focus();
+  }
+  // Ctrl/Cmd + ]: toggle agent panel
+  if ((e.ctrlKey || e.metaKey) && e.key === ']') {
+    e.preventDefault();
+    toggleAgentPanel();
+  }
+  // Escape: close modals
+  if (e.key === 'Escape') {
+    closeAgentModal();
+    closeConfigModal();
+    closeGroupModal();
+  }
+});
+</script>
+</body>
+</html>