myagent-ai 1.23.83 → 1.24.0

package/agents/base.py

@@ -5,6 +5,7 @@ agents/base.py - Agent 基类
 """
 from __future__ import annotations
 
+import asyncio
 import json
 import time
 from abc import ABC, abstractmethod

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myagent-ai",
-  "version": "1.23.83",
+  "version": "1.24.0",
   "description": "本地桌面端执行型AI助手 - Open Interpreter 风格 | Local Desktop Execution-Oriented AI Assistant",
   "main": "main.py",
   "bin": {
@@ -43,4 +43,4 @@
     "python": ">=3.10",
     "node": ">=18"
   }
-}
+}

package/web/ui/admin/admin-core.js

@@ -47,7 +47,7 @@ async function checkUpdate(manual){
     if(r.error){if(manual) showToast('检查更新失败: '+r.error,'danger'); return}
     if(r.has_update){
       $('updateBadge').style.display='inline';
-      showToast('发现新版本 v'+r.latest_version,'warn');
+      showToast('发现新版本 v'+r.latest_version+'，更新后任务将自动继续','warn',5000);
     }else{
       $('updateBadge').style.display='none';
       if(manual) showToast('已是最新版本 v'+r.current_version,'success');
@@ -55,14 +55,39 @@ async function checkUpdate(manual){
   }catch(e){if(manual) showToast('检查更新失败','danger')}
 }
 async function doUpdate(){
-  if(!confirm('确定要更新到最新版本吗？更新后将自动重启。'))return;
+  if(!confirm('确定要更新到最新版本吗？\n\n更新过程中服务会自动重启，重启后任务将自动继续执行。'))return;
   try{
+    showToast('正在准备更新...','info');
     const r=await api('/api/update/apply',{method:'POST',body:JSON.stringify({type:'full'})});
     if(r.error){showToast('更新失败: '+r.error,'danger');return}
-    showToast('更新已开始，服务将自动重启...','success');
+    showToast('更新已开始，正在轮询进度...','info',5000);
+    // 开始轮询更新状态
+    pollAdminUpdateStatus();
   }catch(e){showToast('更新失败','danger')}
 }
 
+var _adminUpdatePollTimer=null;
+function pollAdminUpdateStatus(){
+  if(_adminUpdatePollTimer)clearInterval(_adminUpdatePollTimer);
+  var startTime=Date.now();
+  _adminUpdatePollTimer=setInterval(async function(){
+    if(Date.now()-startTime>5*60*1000){clearInterval(_adminUpdatePollTimer);showToast('更新超时，请刷新页面查看状态','warn');return}
+    try{
+      var data=await api('/api/update/status');
+      var s=data.status||'idle';
+      var statusMsg={draining:'正在安全停止任务...',downloading:'正在下载更新...',updating:'正在安装更新...',reloading:'正在重载模块...',restarting:'即将重启...',success:'更新完成！正在刷新...',failed:'更新失败'};
+      if(s==='success'){clearInterval(_adminUpdatePollTimer);showToast('更新完成！','success');setTimeout(()=>location.reload(),2000);return}
+      if(s==='failed'||s==='rollback'){clearInterval(_adminUpdatePollTimer);showToast('更新失败，请稍后重试','danger');return}
+      if(statusMsg[s]){showToast(statusMsg[s],'info',4000)}
+    }catch(e){
+      // 服务器可能在重启中
+      clearInterval(_adminUpdatePollTimer);
+      showToast('连接中断，服务可能正在重启...','warn',5000);
+      setTimeout(()=>location.reload(),10000);
+    }
+  },5000);
+}
+
 // ── Theme Management ──
 function initTheme(){const s=localStorage.getItem('myagent-theme')||'claude';document.documentElement.setAttribute('data-theme',s);updateThemeIcon(s)}
 function toggleTheme(){const c=document.documentElement.getAttribute('data-theme')||'claude';const n=c==='claude'?'dark':'claude';document.documentElement.setAttribute('data-theme',n);localStorage.setItem('myagent-theme',n);updateThemeIcon(n)}

package/web/ui/chat/chat.css

@@ -29,16 +29,17 @@
   --shadow-lg:0 10px 25px rgba(0,0,0,.1);
 }
 [data-theme="dark"]{
-  --bg:#0f1117;--bg2:#1a1d27;--bg3:#232733;--bg4:#2e3347;--bg5:#3a3f57;
-  --text:#e1e4ed;--text2:#8b92a5;--text3:#5c6378;
-  --accent:#6366f1;--accent2:#818cf8;--accent-light:#2d2f5e;--accent-dark:#9da3f8;
-  --user-bubble:#6366f1;--user-text:#ffffff;
-  --bot-bubble:#1a1d27;--bot-text:#e1e4ed;
-  --ok:#22c55e;--warn:#f59e0b;--danger:#ef4444;--info:#3b82f6;
-  --border:#2e3347;--border-light:#232733;
-  --shadow-sm:0 1px 2px rgba(0,0,0,.2);
-  --shadow:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);
-  --shadow-lg:0 10px 25px rgba(0,0,0,.4);
+  --bg:#1a1816;--bg2:#211f1b;--bg3:#2a2720;--bg4:#353128;--bg5:#433c32;
+  --text:#e5ddd0;--text2:#a39b8c;--text3:#6d665b;
+  --accent:#c96442;--accent2:#d97a5a;--accent-light:#2a1f18;--accent-dark:#a0502e;
+  --card:#262320;
+  --user-bubble:#c96442;--user-text:#ffffff;
+  --bot-bubble:#211f1b;--bot-text:#e5ddd0;
+  --ok:#6ee7a0;--warn:#fcd34d;--danger:#f87171;--info:#7db8f0;
+  --border:#322c24;--border-light:#2a2520;
+  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
+  --shadow:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
+  --shadow-lg:0 10px 25px rgba(0,0,0,.55);
 }
 
 html,body{width:100%;height:100%;margin:0;padding:0;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}
@@ -90,7 +91,7 @@ input,textarea,select{font:inherit}
 }
 .sidebar-logo{
   width:36px;height:36px;border-radius:10px;
-  background:linear-gradient(135deg,var(--accent),#7c3aed);
+  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
   display:grid;place-items:center;flex-shrink:0;
 }
 .sidebar-logo svg{width:20px;height:20px;color:#fff}
@@ -226,7 +227,7 @@ input,textarea,select{font:inherit}
   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-row.assistant .message-avatar{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff}
 
 .message-bubble{
   max-width:85%;padding:12px 16px;border-radius:var(--radius);
@@ -256,7 +257,7 @@ input,textarea,select{font:inherit}
 }
 .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);
+  background:var(--bg3);color:var(--text);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;
   max-width:100%;white-space:pre-wrap;word-break:break-all;
@@ -283,7 +284,7 @@ input,textarea,select{font:inherit}
 }
 .exec-timer-icon{
   width:28px;height:28px;border-radius:6px;
-  background:linear-gradient(135deg,var(--accent),#7c3aed);
+  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
   display:grid;place-items:center;flex-shrink:0;
   font-size:14px;
 }
@@ -359,7 +360,7 @@ input,textarea,select{font:inherit}
   background:var(--accent);border-radius:1.5px;
   margin-left:1px;vertical-align:text-bottom;
   animation:cursorBlink 1.06s step-end infinite;
-  box-shadow:0 0 6px rgba(99,102,241,.35);
+  box-shadow:0 0 6px rgba(201,100,66,.35);
   position:relative;
 }
 @keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
@@ -397,8 +398,8 @@ input,textarea,select{font:inherit}
   animation:toolRunPulse 2s ease-in-out infinite;
 }
 @keyframes toolRunPulse{
-  0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.08)}
-  50%{box-shadow:0 0 0 4px rgba(99,102,241,.12)}
+  0%,100%{box-shadow:0 0 0 0 rgba(201,100,66,.08)}
+  50%{box-shadow:0 0 0 4px rgba(201,100,66,.12)}
 }
 .tool-elapsed-timer{
   font-size:10px;font-variant-numeric:tabular-nums;
@@ -469,13 +470,13 @@ input,textarea,select{font:inherit}
   animation:completeFlash .4s ease-out;
 }
 @keyframes completeFlash{
-  0%{background:rgba(99,102,241,.06)}
+  0%{background:rgba(217,119,6,.06)}
   100%{background:transparent}
 }
 
 /* ── Thought Block (Agent Thinking) ── */
 .thought-block{width:100%!important;max-width:100%!important;display:flex;flex-direction:column;margin:0 0 10px 0;border:1px solid var(--border-light);border-radius:var(--radius-sm);overflow:hidden;background:linear-gradient(135deg,var(--accent-light),var(--bg2));animation:thoughtFadeIn .4s ease-out;flex-shrink:0;box-sizing:border-box;align-self:stretch}
-.thought-block.streaming{border-color:var(--accent);box-shadow:0 0 12px rgba(99,102,241,.15)}
+.thought-block.streaming{border-color:var(--accent);box-shadow:0 0 12px rgba(217,119,6,.15)}
 @keyframes thoughtFadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
 .thought-block summary{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;font-size:12px;font-weight:600;color:var(--text2);user-select:none;transition:var(--transition);text-transform:uppercase;letter-spacing:.3px}
 .thought-block summary:hover{background:var(--bg3)}
@@ -510,7 +511,7 @@ input,textarea,select{font:inherit}
 .exec-event-icon.code{background:#fefce8;color:#eab308}
 .exec-event-icon.success{background:#ecfdf5;color:#10b981}
 .exec-event-icon.error{background:#fef2f2;color:#ef4444}
-.exec-event-icon.running{background:#eef2ff;color:#6366f1;animation:brainPulse 1.2s infinite}
+.exec-event-icon.running{background:rgba(217,119,6,.12);color:#D97706;animation:brainPulse 1.2s infinite}
 .exec-event-body{flex:1;min-width:0}
 .exec-event-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:2px}
 .exec-event-meta{font-size:11px;color:var(--text3);display:flex;gap:8px;align-items:center}
@@ -600,7 +601,7 @@ input,textarea,select{font:inherit}
 .attach-btn svg{width:18px;height:18px}
 
 /* [v1.16.12] 拖拽高亮 */
-.input-box.drag-over{border-color:var(--accent) !important;box-shadow:0 0 0 2px rgba(79,70,229,.2)}
+.input-box.drag-over{border-color:var(--accent) !important;box-shadow:0 0 0 2px rgba(217,119,6,.2)}
 
 /* [v1.16.12] 附件预览 */
 .attachment-preview {
@@ -1008,9 +1009,9 @@ input,textarea,select{font:inherit}
   }
 }
 
-/* Dark theme */
+/* Dark theme early overrides (voice recording) */
 [data-theme="dark"] .voice-record-btn.recording {
-  background: rgba(239, 68, 68, 0.15);
+  background: rgba(239, 68, 68, 0.2);
 }
 
 /* ── Toast ── */
@@ -1021,10 +1022,10 @@ input,textarea,select{font:inherit}
   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}
-.toast-warning{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
+.toast-error{background:#2d1515;color:#f87171;border:1px solid #3d1f1f}
+.toast-success{background:#152d1e;color:#4ade80;border:1px solid #1f3d28}
+.toast-info{background:#1a2535;color:#60a5fa;border:1px solid #253545}
+.toast-warning{background:#2d2515;color:#fbbf24;border:1px solid #3d3019}
 
 /* ── Confirm Dialog ── */
 .modal-overlay{
@@ -1158,11 +1159,11 @@ input,textarea,select{font:inherit}
   background:linear-gradient(135deg,var(--accent-light),var(--bg));
 }
 .rp-master-card:hover{border-color:var(--accent);background:var(--accent-light)}
-.rp-master-card.active{border-color:var(--accent);background:var(--accent-light);box-shadow:0 0 16px rgba(99,102,241,.15)}
+.rp-master-card.active{border-color:var(--accent);background:var(--accent-light);box-shadow:0 0 16px rgba(217,119,6,.15)}
 .rp-master-avatar{
   width:44px;height:44px;border-radius:12px;flex-shrink:0;
   display:grid;place-items:center;font-size:22px;color:#fff;
-  background:linear-gradient(135deg,#6366f1,#8b5cf6);
+  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
 }
 .rp-master-info{flex:1;min-width:0}
 .rp-master-name{font-size:14px;font-weight:700;color:var(--text)}
@@ -1263,8 +1264,8 @@ input,textarea,select{font:inherit}
   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}
+.exec-badge.local{background:rgba(74,222,128,.15);color:#4ade80}
+.exec-badge.sandbox{background:rgba(251,191,36,.15);color:#fbbf24}
 
 /* Agent add-child button (shows on hover) */
 .agent-add-child-btn{
@@ -1818,7 +1819,7 @@ input,textarea,select{font:inherit}
   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);
+  background:var(--bg3);color:var(--text);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;
 }
@@ -2100,31 +2101,31 @@ input,textarea,select{font:inherit}
 
 /* ── Dark Theme Overrides ── */
 [data-theme="dark"] .message-bubble code{background:rgba(255,255,255,.1)}
-[data-theme="dark"] .message-row.user .message-bubble code{background:rgba(255,255,255,.15)}
-[data-theme="dark"] .message-bubble pre{background:#0a0c10;color:#cdd6f4}
-[data-theme="dark"] .group-msg-bubble code{background:rgba(255,255,255,.08)}
-[data-theme="dark"] .group-msg-bubble pre{background:#0a0c10;color:#cdd6f4}
+[data-theme="dark"] .message-row.user .message-bubble code{background:rgba(0,0,0,.15)}
+[data-theme="dark"] .message-bubble pre{background:#161412;color:#d4cdc0}
+[data-theme="dark"] .group-msg-bubble code{background:rgba(255,255,255,.06)}
+[data-theme="dark"] .group-msg-bubble pre{background:#161412;color:#d4cdc0}
 [data-theme="dark"] .toast-error{background:rgba(127,29,29,.8);color:#fca5a5;border-color:rgba(239,68,68,.4)}
 [data-theme="dark"] .toast-success{background:rgba(6,78,59,.8);color:#6ee7b7;border-color:rgba(16,185,129,.4)}
 [data-theme="dark"] .toast-info{background:rgba(30,64,175,.8);color:#93c5fd;border-color:rgba(59,130,246,.4)}
 [data-theme="dark"] .toast-warning{background:rgba(113,63,18,.8);color:#fcd34d;border-color:rgba(245,158,11,.4)}
-[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.5)}
-[data-theme="dark"] .exec-badge.local{background:rgba(16,185,129,.15);color:#6ee7b7}
-[data-theme="dark"] .exec-badge.sandbox{background:rgba(245,158,11,.15);color:#fcd34d}
+[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.6)}
+[data-theme="dark"] .exec-badge.local{background:rgba(74,222,128,.15);color:#4ade80}
+[data-theme="dark"] .exec-badge.sandbox{background:rgba(251,191,36,.15);color:#fbbf24}
 [data-theme="dark"] .mode-btn.active-chat{background:var(--bg2);color:var(--accent);box-shadow:var(--shadow-sm)}
 [data-theme="dark"] .mode-btn.active-exec{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
-[data-theme="dark"] .exec-mode-btn.active-local{background:rgba(16,185,129,.15);color:#6ee7b7;border-color:rgba(16,185,129,.3)}
-[data-theme="dark"] .exec-mode-btn.active-local:hover{background:rgba(16,185,129,.25)}
-[data-theme="dark"] .lock-indicator{background:rgba(127,29,29,.3);border-color:rgba(239,68,68,.3);color:#fca5a5}
+[data-theme="dark"] .exec-mode-btn.active-local{background:rgba(74,222,128,.15);color:#4ade80;border-color:rgba(74,222,128,.3)}
+[data-theme="dark"] .exec-mode-btn.active-local:hover{background:rgba(74,222,128,.25)}
+[data-theme="dark"] .lock-indicator{background:rgba(127,29,29,.3);border-color:rgba(248,113,113,.3);color:#f87171}
 [data-theme="dark"] .lock-indicator:hover{background:rgba(127,29,29,.5)}
-[data-theme="dark"] .code-block-wrapper pre{background:#0a0c10;color:#cdd6f4}
+[data-theme="dark"] .code-block-wrapper pre{background:#161412;color:#d4cdc0}
 [data-theme="dark"] .code-copy-btn{background:var(--bg4);color:var(--text2)}
 [data-theme="dark"] .code-copy-btn:hover{background:var(--bg5);color:var(--text)}
-[data-theme="dark"] .code-copy-btn.copied{background:rgba(16,185,129,.3);color:#a7f3d0}
-[data-theme="dark"] .group-member-role.owner{background:rgba(245,158,11,.15);color:#fcd34d}
-[data-theme="dark"] .group-member-role.admin{background:rgba(59,130,246,.15);color:#93c5fd}
-[data-theme="dark"] .setup-wizard-overlay{background:rgba(10,10,20,.9)}
-[data-theme="dark"] .largetext-option:hover,[data-theme="dark"] .largetext-option.selected{border-color:var(--accent);background:rgba(99,102,241,.1)}
+[data-theme="dark"] .code-copy-btn.copied{background:rgba(74,222,128,.3);color:#a7f3d0}
+[data-theme="dark"] .group-member-role.owner{background:rgba(251,191,36,.15);color:#fbbf24}
+[data-theme="dark"] .group-member-role.admin{background:rgba(96,165,250,.15);color:#60a5fa}
+[data-theme="dark"] .setup-wizard-overlay{background:rgba(0,0,0,.9)}
+[data-theme="dark"] .largetext-option:hover,[data-theme="dark"] .largetext-option.selected{border-color:var(--accent);background:rgba(217,119,6,.1)}
 [data-theme="dark"] .platform-toggle{background:var(--bg4)}
 [data-theme="dark"] .quick-action{background:var(--bg2);border-color:var(--border)}
 [data-theme="dark"] .quick-action:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
@@ -2173,7 +2174,7 @@ input,textarea,select{font:inherit}
 .timeline-segment p{margin-bottom:8px}
 .timeline-segment p:last-child{margin-bottom:0}
 .timeline-segment 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}
-.timeline-segment 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;max-width:100%;white-space:pre-wrap;word-break:break-all}
+.timeline-segment pre{background:var(--bg3);color:var(--text);padding:14px 16px;border-radius:var(--radius-sm);overflow-x:auto;margin:8px 0;font-size:12.5px;line-height:1.5;max-width:100%;white-space:pre-wrap;word-break:break-all}
 .timeline-segment strong{font-weight:600}
 .timeline-segment em{font-style:italic}
 .timeline-segment ul,.timeline-segment ol{padding-left:20px;margin:2px 0}
@@ -2239,10 +2240,10 @@ input,textarea,select{font:inherit}
 [data-theme="dark"] .exec-event-icon.code-ok{background:rgba(22,163,74,.15);color:#86efac}
 [data-theme="dark"] .exec-event-icon.code-fail{background:rgba(220,38,38,.15);color:#fca5a5}
 [data-theme="dark"] .exec-event-icon.code-timeout{background:rgba(219,39,119,.15);color:#f9a8d4}
-[data-theme="dark"] .exec-event-icon.skill{background:rgba(124,58,237,.15);color:#c4b5fd}
+[data-theme="dark"] .exec-event-icon.skill{background:rgba(217,119,6,.15);color:#fbbf24}
 [data-theme="dark"] .exec-events-panel{background:var(--bg2);border-color:var(--border)}
 [data-theme="dark"] .exec-result-modal{background:var(--bg2);border-color:var(--border)}
-[data-theme="dark"] .exec-result-modal-body pre{background:#0a0c10;color:#cdd6f4}
+[data-theme="dark"] .exec-result-modal-body pre{background:#161412;color:#d4cdc0}
 [data-theme="dark"] .exec-result-info-item{background:var(--bg3)}
 [data-theme="dark"] .inline-exec-event{background:var(--bg3);border-left-color:var(--border)}
 [data-theme="dark"] .inline-exec-event.tool-call-pending{border-left-color:rgba(96,165,250,.6)}
@@ -2481,7 +2482,7 @@ body.popout-mode #popoutBtn{display:none !important}
   transition: border-color .3s ease, box-shadow .3s ease;
 }
 .v2-tool-event.tool-running {
-  border-left-color: var(--accent, #6366f1);
+  border-left-color: var(--accent, #D97706);
 }
 .v2-tool-event.tool-success {
   border-left-color: var(--ok, #10b981);
@@ -2567,15 +2568,15 @@ body.popout-mode #popoutBtn{display:none !important}
   border: 1px solid var(--border, #e0e0e8);
   border-radius: 4px;
   font-size: 12px;
-  color: var(--accent, #6366f1);
+  color: var(--accent, #D97706);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .v2-tool-event .inline-exec-result-btn:hover {
-  background: var(--accent, #6366f1);
+  background: var(--accent, #D97706);
   color: white;
-  border-color: var(--accent, #6366f1);
+  border-color: var(--accent, #D97706);
 }
 
 .v2-tool-event .inline-exec-result-btn svg {
@@ -2740,3 +2741,264 @@ body.popout-mode #popoutBtn{display:none !important}
   background:var(--accent);
   color:#fff;
 }
+
+/* ── [v1.24.0] Update Notification Banner ── */
+.update-notification-banner{
+  position:fixed;top:0;left:0;right:0;z-index:99998;
+  transform:translateY(-100%);
+  transition:transform .35s cubic-bezier(.4,0,.2,1);
+  pointer-events:none;
+}
+.update-notification-banner.visible{
+  transform:translateY(0);
+  pointer-events:auto;
+}
+.update-banner-content{
+  display:flex;align-items:center;gap:14px;
+  padding:12px 20px;
+  background:var(--bg2);
+  border-bottom:1px solid var(--border);
+  box-shadow:0 4px 20px rgba(0,0,0,.12);
+}
+.update-banner-icon{
+  width:36px;height:36px;border-radius:10px;
+  background:var(--accent-light);
+  display:grid;place-items:center;flex-shrink:0;
+  color:var(--accent);
+  animation:bannerIconSpin 3s linear infinite;
+}
+@keyframes bannerIconSpin{
+  0%{transform:rotate(0deg)}
+  100%{transform:rotate(360deg)}
+}
+.update-banner-info{flex:1;min-width:0}
+.update-banner-title{
+  font-size:14px;font-weight:600;color:var(--text);
+  display:flex;align-items:center;gap:6px;
+  margin-bottom:2px;
+}
+.update-banner-ver{
+  display:inline-block;padding:1px 8px;border-radius:10px;
+  background:var(--accent);color:#fff;font-size:11px;font-weight:600;
+  animation:bannerVerPulse 2s ease-in-out infinite;
+}
+@keyframes bannerVerPulse{
+  0%,100%{opacity:1}
+  50%{opacity:.75}
+}
+.update-banner-desc{
+  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
+  font-size:12px;color:var(--text2);
+}
+.update-banner-countdown-wrap{
+  display:flex;align-items:center;gap:2px;
+}
+.update-banner-cd-num{
+  display:inline-block;min-width:20px;text-align:center;
+  font-size:18px;font-weight:800;color:var(--accent);
+  font-variant-numeric:tabular-nums;
+  animation:bannerCdPulse 1s ease-in-out infinite;
+  line-height:1;
+}
+@keyframes bannerCdPulse{
+  0%,100%{transform:scale(1)}
+  50%{transform:scale(1.15)}
+}
+.update-banner-reassure{
+  display:inline-flex;align-items:center;gap:4px;
+  padding:2px 10px;border-radius:12px;
+  background:rgba(16,185,129,.08);color:var(--ok);
+  font-size:11px;font-weight:500;
+  border:1px solid rgba(16,185,129,.15);
+}
+.update-banner-reassure::before{
+  content:'';display:inline-block;width:6px;height:6px;
+  border-radius:50%;background:var(--ok);flex-shrink:0;
+  animation:reassureDot 2s ease-in-out infinite;
+}
+@keyframes reassureDot{
+  0%,100%{opacity:1;transform:scale(1)}
+  50%{opacity:.4;transform:scale(.7)}
+}
+.update-banner-actions{
+  display:flex;gap:8px;flex-shrink:0;
+}
+.update-banner-btn{
+  padding:6px 16px;border-radius:var(--radius-xs);
+  font-size:12px;font-weight:600;cursor:pointer;
+  transition:var(--transition);white-space:nowrap;
+  border:1px solid var(--border);
+}
+.update-banner-btn-primary{
+  background:var(--accent);color:#fff;border-color:var(--accent);
+}
+.update-banner-btn-primary:hover{
+  background:var(--accent2);transform:translateY(-1px);
+  box-shadow:0 2px 8px rgba(201,100,66,.3);
+}
+.update-banner-btn-secondary{
+  background:var(--bg);color:var(--text2);
+}
+.update-banner-btn-secondary:hover{
+  background:var(--bg3);color:var(--text);
+}
+.update-banner-close{
+  width:28px;height:28px;border-radius:50%;
+  display:grid;place-items:center;flex-shrink:0;
+  color:var(--text3);cursor:pointer;transition:var(--transition);
+  border:none;background:none;
+}
+.update-banner-close:hover{
+  background:var(--bg3);color:var(--text);
+}
+/* Banner dark theme */
+[data-theme="dark"] .update-banner-content{
+  background:var(--bg2);
+  border-bottom-color:var(--border);
+  box-shadow:0 4px 20px rgba(0,0,0,.35);
+}
+[data-theme="dark"] .update-banner-reassure{
+  background:rgba(74,222,128,.08);
+  border-color:rgba(74,222,128,.15);
+}
+/* Banner mobile responsive */
+@media(max-width:768px){
+  .update-banner-content{
+    padding:10px 14px;gap:10px;flex-wrap:wrap;
+  }
+  .update-banner-desc{gap:6px}
+  .update-banner-actions{width:100%;justify-content:flex-end}
+  .update-banner-icon{width:32px;height:32px}
+  .update-banner-cd-num{font-size:16px}
+}
+
+/* ── [v1.24.0] Update Overlay ── */
+.update-overlay{
+  position:fixed;inset:0;z-index:99999;
+  display:flex;align-items:center;justify-content:center;
+  background:rgba(0,0,0,.65);
+  animation:updateOverlayIn .4s ease;
+  backdrop-filter:blur(4px);
+}
+@keyframes updateOverlayIn{from{opacity:0}to{opacity:1}}
+.update-overlay-content{
+  background:var(--bg2);border-radius:16px;
+  padding:40px 48px;text-align:center;
+  max-width:420px;width:90%;
+  box-shadow:0 25px 60px rgba(0,0,0,.3);
+  border:1px solid var(--border);
+  animation:updateContentIn .5s ease;
+}
+@keyframes updateContentIn{from{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
+.update-overlay-icon{
+  width:56px;height:56px;border-radius:50%;
+  margin:0 auto 20px;
+  display:flex;align-items:center;justify-content:center;
+  background:var(--accent-light);
+}
+.update-spinner{
+  width:28px;height:28px;
+  border:3px solid var(--bg4);
+  border-top-color:var(--accent);
+  border-radius:50%;
+  animation:spin 1s linear infinite;
+}
+.update-overlay-title{
+  font-size:20px;font-weight:700;color:var(--text);
+  margin-bottom:8px;
+}
+.update-overlay-status{
+  font-size:14px;color:var(--text2);
+  margin-bottom:24px;line-height:1.6;
+}
+.update-overlay-countdown{
+  display:flex;align-items:baseline;justify-content:center;gap:6px;
+  margin-bottom:20px;
+}
+.update-countdown-num{
+  font-size:48px;font-weight:800;color:var(--accent);
+  font-variant-numeric:tabular-nums;
+  line-height:1;
+  animation:countdownPulse 1.5s ease-in-out infinite;
+}
+@keyframes countdownPulse{0%,100%{opacity:1}50%{opacity:.7}}
+.update-countdown-label{
+  font-size:14px;color:var(--text2);font-weight:500;
+}
+.update-overlay-progress{
+  width:100%;height:4px;background:var(--bg4);
+  border-radius:2px;overflow:hidden;
+  margin-bottom:20px;
+}
+.update-progress-bar{
+  height:100%;width:0%;border-radius:2px;
+  background:linear-gradient(90deg,var(--accent),var(--accent2));
+  transition:width .5s ease;
+}
+.update-overlay-progress.active .update-progress-bar{
+  animation:updateProgress 2s ease-in-out infinite;
+}
+@keyframes updateProgress{
+  0%{width:5%;margin-left:0}
+  50%{width:45%;margin-left:25%}
+  100%{width:5%;margin-left:90%}
+}
+.update-overlay-reassure{
+  display:flex;align-items:center;justify-content:center;gap:8px;
+  padding:12px 20px;
+  background:rgba(16,185,129,.08);
+  border-radius:var(--radius-sm);
+  color:var(--ok);font-size:13px;font-weight:500;
+  line-height:1.5;
+  border:1px solid rgba(16,185,129,.12);
+}
+.update-overlay-reassure svg{flex-shrink:0;color:var(--ok);opacity:.7}
+.update-overlay.restarting .update-overlay-icon{
+  background:rgba(239,68,68,.12);
+}
+.update-overlay.restarting .update-spinner{
+  border-top-color:var(--danger);
+}
+.update-overlay.success .update-overlay-icon{
+  background:rgba(16,185,129,.12);
+}
+.update-overlay.success .update-spinner{
+  animation:none;
+  border:none;
+  border-top:none;
+  font-size:24px;
+  color:var(--ok);
+}
+.update-overlay.success .update-spinner::after{
+  content:'✓';
+  font-weight:700;
+}
+.update-overlay.failed .update-overlay-icon{
+  background:rgba(239,68,68,.12);
+}
+.update-overlay.failed .update-spinner{
+  animation:none;
+  border:none;
+  border-top:none;
+  font-size:24px;
+  color:var(--danger);
+}
+.update-overlay.failed .update-spinner::after{
+  content:'✗';
+  font-weight:700;
+}
+
+/* Update overlay dark theme */
+[data-theme="dark"] .update-overlay{background:rgba(0,0,0,.8)}
+[data-theme="dark"] .update-overlay-content{background:var(--bg2);border-color:var(--border)}
+[data-theme="dark"] .update-overlay-reassure{
+  background:rgba(74,222,128,.06);
+  border-color:rgba(74,222,128,.1);
+}
+
+/* Mobile responsive for update overlay */
+@media(max-width:480px){
+  .update-overlay-content{padding:28px 24px}
+  .update-countdown-num{font-size:36px}
+  .update-overlay-title{font-size:18px}
+}

package/web/ui/chat/chat_container.html

@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
 <title>MyAgent - AI 助手</title>
-<link rel="stylesheet" href="chat.css?v=11">
+<link rel="stylesheet" href="chat.css?v=12">
 </head>
 <body>
 <div class="app">
@@ -320,6 +320,53 @@
   </div>
 </div>
 
+<!-- [v1.24.0] Update Notification Banner -->
+<div id="updateNotificationBanner" class="update-notification-banner" style="display:none">
+  <div class="update-banner-content">
+    <div class="update-banner-icon">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M21 12a9 9 0 11-6.22-8.56"/><polyline points="21 3 21 9 15 9"/></svg>
+    </div>
+    <div class="update-banner-info">
+      <div class="update-banner-title">发现新版本 <span id="updateBannerVersion" class="update-banner-ver"></span></div>
+      <div class="update-banner-desc">
+        <span class="update-banner-countdown-wrap">
+          更新将在 <span id="updateBannerCountdown" class="update-banner-cd-num">60</span> 秒后自动开始
+        </span>
+        <span class="update-banner-reassure">不用担心，更新完成后任务将自动继续执行</span>
+      </div>
+    </div>
+    <div class="update-banner-actions">
+      <button class="update-banner-btn update-banner-btn-primary" onclick="bannerUpdateNow()">立即更新</button>
+      <button class="update-banner-btn update-banner-btn-secondary" onclick="dismissUpdateBanner()">稍后提醒</button>
+    </div>
+    <button class="update-banner-close" onclick="dismissUpdateBanner()" title="关闭">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+    </button>
+  </div>
+</div>
+
+<!-- [v1.24.0] Update Countdown Overlay -->
+<div id="updateOverlay" style="display:none" class="update-overlay">
+  <div class="update-overlay-content">
+    <div class="update-overlay-icon" id="updateOverlayIcon">
+      <span class="update-spinner"></span>
+    </div>
+    <h2 class="update-overlay-title" id="updateOverlayTitle">正在准备更新...</h2>
+    <p class="update-overlay-status" id="updateOverlayStatus">正在安全停止当前任务</p>
+    <div class="update-overlay-countdown" id="updateOverlayCountdown" style="display:none">
+      <span class="update-countdown-num" id="updateCountdownNum">30</span>
+      <span class="update-countdown-label">秒后重启</span>
+    </div>
+    <div class="update-overlay-progress">
+      <div class="update-progress-bar" id="updateProgressBar"></div>
+    </div>
+    <div class="update-overlay-reassure" id="updateOverlayReassure">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+      <span>更新完成后任务将自动继续，无需担心</span>
+    </div>
+  </div>
+</div>
+
 <!-- Mobile Overlay -->
 <div class="mobile-overlay" id="chatMobileOverlay"></div>
 <!-- Toast Container -->
@@ -330,6 +377,6 @@
 <div id="groupModalContainer"></div>
 
 <!-- Load JS scripts (no HTML fragments to fetch) -->
-<script src="chat.js?v=9"></script>
+<script src="chat.js?v=10"></script>
 </body>
 </html>

package/web/ui/chat/chat_main.js

@@ -980,6 +980,12 @@ async function loadStatus() {
 }
 
 // ── 版本号 & 更新检查 (chat 页面) ──
+var _bannerCountdownTimer = null;
+var _bannerCountdownSec = 0;
+var _bannerDismissed = false;
+var _updateStatusPollTimer = null;
+var _updateLatestInfo = null; // 存储最新版本信息
+
 async function loadChatVersion() {
   try {
     const r = await api('/api/status');
@@ -992,10 +998,119 @@ async function loadChatVersion() {
     try {
       const r = await api('/api/update/check', {method: 'POST'});
       if (r.has_update) {
+        _updateLatestInfo = r;
         document.getElementById('chatUpdateBadge').style.display = 'inline';
+        showUpdateBanner(r);
       }
     } catch (e) {}
   }, 30000);
+  // 启动定期轮询更新状态（检测从其他来源触发的更新）
+  startUpdateStatusPolling();
+}
+
+/**
+ * 显示更新通知横幅，带倒计时自动更新。
+ * @param {object} updateInfo - {latest_version, changelog, ...}
+ */
+function showUpdateBanner(updateInfo) {
+  var banner = document.getElementById('updateNotificationBanner');
+  if (!banner) return;
+  _bannerDismissed = false;
+  // 设置版本号
+  var verEl = document.getElementById('updateBannerVersion');
+  if (verEl && updateInfo && updateInfo.latest_version) {
+    verEl.textContent = 'v' + updateInfo.latest_version;
+  }
+  // 重置倒计时
+  _bannerCountdownSec = 60;
+  var cdEl = document.getElementById('updateBannerCountdown');
+  if (cdEl) cdEl.textContent = _bannerCountdownSec;
+  // 显示横幅
+  banner.style.display = 'block';
+  banner.className = 'update-notification-banner visible';
+  // 启动倒计时
+  if (_bannerCountdownTimer) clearInterval(_bannerCountdownTimer);
+  _bannerCountdownTimer = setInterval(function() {
+    _bannerCountdownSec--;
+    if (cdEl) cdEl.textContent = Math.max(0, _bannerCountdownSec);
+    if (_bannerCountdownSec <= 0) {
+      clearInterval(_bannerCountdownTimer);
+      _bannerCountdownTimer = null;
+      // 倒计时结束，自动开始更新
+      bannerUpdateNow();
+    }
+  }, 1000);
+}
+
+/**
+ * 关闭更新通知横幅（稍后提醒）。
+ */
+function dismissUpdateBanner() {
+  _bannerDismissed = true;
+  if (_bannerCountdownTimer) { clearInterval(_bannerCountdownTimer); _bannerCountdownTimer = null; }
+  var banner = document.getElementById('updateNotificationBanner');
+  if (banner) {
+    banner.className = 'update-notification-banner';
+    setTimeout(function() { banner.style.display = 'none'; }, 300);
+  }
+  toast('将在 10 分钟后再次提醒更新', 'info');
+  // 10 分钟后再次检查更新
+  setTimeout(async function() {
+    try {
+      // 如果当前没有在更新中，重新检查
+      var statusData = await api('/api/update/status');
+      if (statusData.is_updating) return; // 正在更新中，不重复提醒
+      var r = await api('/api/update/check', {method: 'POST'});
+      if (r.has_update) {
+        _updateLatestInfo = r;
+        showUpdateBanner(r);
+      }
+    } catch (e) {}
+  }, 10 * 60 * 1000);
+}
+
+/**
+ * 从横幅立即开始更新。
+ */
+function bannerUpdateNow() {
+  // 先关闭横幅倒计时
+  if (_bannerCountdownTimer) { clearInterval(_bannerCountdownTimer); _bannerCountdownTimer = null; }
+  // 隐藏横幅
+  var banner = document.getElementById('updateNotificationBanner');
+  if (banner) { banner.style.display = 'none'; banner.className = 'update-notification-banner'; }
+  // 调用主更新流程（跳过确认对话框，用户已通过横幅确认）
+  doChatUpdate(true);
+}
+
+/**
+ * 定期轮询 /api/update/status，检测从其他来源触发的更新（如管理后台、CLI等）。
+ * 当检测到更新正在进行时，自动显示 update overlay。
+ */
+function startUpdateStatusPolling() {
+  if (_updateStatusPollTimer) clearInterval(_updateStatusPollTimer);
+  _updateStatusPollTimer = setInterval(async function() {
+    try {
+      var data = await api('/api/update/status');
+      // 检测是否有更新正在进行（可能是从其他地方触发的）
+      if (data.is_updating || (data.status && data.status !== 'idle' && data.status !== 'checking' && data.status !== 'available')) {
+        var overlay = document.getElementById('updateOverlay');
+        // 如果 overlay 没有显示，自动显示它
+        if (overlay && overlay.style.display === 'none') {
+          showUpdateOverlay();
+          updateOverlayUI(data);
+          // 开始轮询更新进度
+          pollUpdateStatus();
+          // 关闭横幅（如果正在显示）
+          if (_bannerCountdownTimer) { clearInterval(_bannerCountdownTimer); _bannerCountdownTimer = null; }
+          var banner = document.getElementById('updateNotificationBanner');
+          if (banner) { banner.style.display = 'none'; banner.className = 'update-notification-banner'; }
+          toast('检测到更新正在进行中...', 'info');
+        }
+      }
+    } catch (e) {
+      // 静默失败 — 服务器可能在重启中
+    }
+  }, 15000); // 每 15 秒检查一次
 }
 
 // ══════════════════════════════════════════════════════
@@ -1153,13 +1268,278 @@ async function stopVNC() {
   }
 }
 
-async function doChatUpdate() {
-  if (!confirm('确定要更新到最新版本吗？更新后将自动重启。')) return;
+// ── Update Overlay Controller ──
+var _updatePollTimer = null;
+var _updateCountdownTimer = null;
+var _updateCountdownSec = 0;
+
+/**
+ * Show the update overlay with initial state.
+ * Called right after the user confirms the update.
+ */
+function showUpdateOverlay() {
+  var overlay = document.getElementById('updateOverlay');
+  if (!overlay) return;
+  overlay.style.display = 'flex';
+  overlay.className = 'update-overlay';
+  document.getElementById('updateOverlayTitle').textContent = '正在准备更新...';
+  document.getElementById('updateOverlayStatus').textContent = '正在安全停止当前任务';
+  document.getElementById('updateOverlayCountdown').style.display = 'none';
+  document.getElementById('updateProgressBar').style.width = '10%';
+  document.getElementById('updateProgressBar').parentElement.classList.remove('active');
+  document.getElementById('updateOverlayReassure').style.display = 'flex';
+}
+
+/**
+ * Update overlay UI based on backend /api/update/status response.
+ */
+function updateOverlayUI(statusData) {
+  var overlay = document.getElementById('updateOverlay');
+  if (!overlay || overlay.style.display === 'none') return;
+
+  var s = statusData.status || 'idle';
+  var titleEl = document.getElementById('updateOverlayTitle');
+  var statusEl = document.getElementById('updateOverlayStatus');
+  var countdownEl = document.getElementById('updateOverlayCountdown');
+  var progressEl = document.getElementById('updateProgressBar');
+  var progressBarParent = progressEl ? progressEl.parentElement : null;
+  var iconEl = document.getElementById('updateOverlayIcon');
+
+  // Status → UI mapping
+  var progressWidth = '10%';
+  var title = '正在准备更新...';
+  var status = '请稍候...';
+  var showCountdown = false;
+
+  if (s === 'draining') {
+    progressWidth = '20%';
+    title = '正在安全停止任务';
+    status = '等待运行中的任务完成，请勿操作...';
+    var bc = statusData.broadcaster;
+    var paused = bc ? (bc.paused_tasks || 0) : 0;
+    var total = bc ? (bc.active_tasks || 0) : 0;
+    if (total > 0) {
+      status = '已暂停 ' + paused + '/' + total + ' 个任务';
+    }
+  } else if (s === 'downloading') {
+    progressWidth = '40%';
+    title = '正在下载更新';
+    status = '正在从远程仓库下载最新版本...';
+    progressBarParent && progressBarParent.classList.add('active');
+  } else if (s === 'updating') {
+    progressWidth = '60%';
+    title = '正在安装更新';
+    status = '正在安装新版本，请耐心等待...';
+    progressBarParent && progressBarParent.classList.add('active');
+  } else if (s === 'reloading') {
+    progressWidth = '80%';
+    title = '正在重载模块';
+    status = '正在热更新代码模块...';
+  } else if (s === 'restarting') {
+    progressWidth = '95%';
+    title = '即将重启';
+    status = '系统即将自动重启以完成更新';
+    showCountdown = true;
+    overlay.className = 'update-overlay restarting';
+  } else if (s === 'success') {
+    progressWidth = '100%';
+    title = '更新完成';
+    status = '服务已成功更新，即将自动刷新页面...';
+    overlay.className = 'update-overlay success';
+    // Auto-reload after short delay
+    setTimeout(function() { location.reload(); }, 2000);
+  } else if (s === 'failed' || s === 'rollback') {
+    title = '更新失败';
+    status = '更新过程中遇到错误，请稍后重试或联系管理员';
+    overlay.className = 'update-overlay failed';
+    // Auto-close overlay after delay
+    setTimeout(hideUpdateOverlay, 5000);
+  } else {
+    // idle / checking
+    title = '正在检查版本...';
+    status = '请稍候...';
+  }
+
+  titleEl.textContent = title;
+  statusEl.textContent = status;
+  progressEl.style.width = progressWidth;
+  countdownEl.style.display = showCountdown ? 'flex' : 'none';
+
+  // Countdown when restarting
+  if (showCountdown && _updateCountdownSec <= 0) {
+    _updateCountdownSec = 30;
+    startUpdateCountdown();
+  }
+}
+
+/**
+ * Start a countdown timer (shown when status is "restarting").
+ * After countdown reaches 0, try to reload the page.
+ */
+function startUpdateCountdown() {
+  if (_updateCountdownTimer) clearInterval(_updateCountdownTimer);
+  _updateCountdownSec = 30;
+  document.getElementById('updateCountdownNum').textContent = _updateCountdownSec;
+  _updateCountdownTimer = setInterval(function() {
+    _updateCountdownSec--;
+    var el = document.getElementById('updateCountdownNum');
+    if (el) el.textContent = Math.max(0, _updateCountdownSec);
+    if (_updateCountdownSec <= 0) {
+      clearInterval(_updateCountdownTimer);
+      _updateCountdownTimer = null;
+      // Force reload — the server may have already restarted
+      location.reload();
+    }
+  }, 1000);
+}
+
+/**
+ * Stop update status polling and clean up timers.
+ */
+function stopUpdatePolling() {
+  if (_updatePollTimer) { clearInterval(_updatePollTimer); _updatePollTimer = null; }
+  if (_updateCountdownTimer) { clearInterval(_updateCountdownTimer); _updateCountdownTimer = null; }
+  _updateCountdownSec = 0;
+}
+
+/**
+ * Hide the update overlay and stop polling.
+ */
+function hideUpdateOverlay() {
+  stopUpdatePolling();
+  var overlay = document.getElementById('updateOverlay');
+  if (overlay) overlay.style.display = 'none';
+}
+
+/**
+ * Poll /api/update/status every 3 seconds to track update progress.
+ * Stops when status reaches "success", "failed", "idle", or after 5 minutes timeout.
+ */
+function pollUpdateStatus() {
+  if (_updatePollTimer) clearInterval(_updatePollTimer);
+  var startTime = Date.now();
+  var maxDuration = 5 * 60 * 1000; // 5 minutes max
+
+  _updatePollTimer = setInterval(async function() {
+    // Timeout safety
+    if (Date.now() - startTime > maxDuration) {
+      stopUpdatePolling();
+      hideUpdateOverlay();
+      toast('更新超时，请刷新页面查看状态', 'warning');
+      return;
+    }
+    try {
+      var data = await api('/api/update/status');
+      updateOverlayUI(data);
+      // Stop polling on terminal states
+      if (['success', 'failed', 'idle'].includes(data.status) && data.status !== 'idle') {
+        // success and failed will auto-handle via updateOverlayUI
+        if (data.status === 'idle' && !data.is_updating) {
+          // Somehow back to idle without completing — might be an error
+          stopUpdatePolling();
+        } else if (data.status !== 'idle') {
+          stopUpdatePolling();
+        }
+      }
+    } catch (e) {
+      // Connection error — server might have restarted
+      console.log('Update status poll failed (server may be restarting):', e.message);
+      // If we were in restarting phase, just reload
+      var overlay = document.getElementById('updateOverlay');
+      if (overlay && overlay.className.includes('restarting')) {
+        stopUpdatePolling();
+        location.reload();
+      }
+    }
+  }, 3000);
+}
+
+/**
+ * Main entry point: user clicks the [可更新] badge or banner "立即更新" button.
+ * When called from the banner (skipConfirm=true), skip the confirm dialog.
+ * Shows a 10-second pre-update countdown in the overlay, then triggers the update.
+ */
+var _preUpdateTimer = null;
+var _preUpdateSec = 0;
+
+async function doChatUpdate(skipConfirm) {
+  if (!skipConfirm && !confirm('确定要更新到最新版本吗？\n\n更新过程中服务会自动重启，重启后任务将自动继续执行。')) return;
+
+  // Show overlay with pre-update countdown
+  showPreUpdateCountdown();
+}
+
+/**
+ * Show a 10-second pre-update countdown in the overlay.
+ * During this time, the user sees a reassuring message and can cancel.
+ */
+function showPreUpdateCountdown() {
+  var overlay = document.getElementById('updateOverlay');
+  if (!overlay) return;
+  overlay.style.display = 'flex';
+  overlay.className = 'update-overlay';
+
+  document.getElementById('updateOverlayTitle').textContent = '准备开始更新';
+  document.getElementById('updateOverlayStatus').textContent = '系统将在更新开始前安全保存所有任务状态';
+  document.getElementById('updateOverlayCountdown').style.display = 'flex';
+  document.getElementById('updateCountdownNum').textContent = '10';
+  document.getElementById('updateProgressBar').style.width = '5%';
+  document.getElementById('updateProgressBar').parentElement.classList.remove('active');
+  document.getElementById('updateOverlayReassure').style.display = 'flex';
+
+  // 更新倒计时标签为"秒后开始更新"
+  var countdownLabel = document.querySelector('#updateOverlayCountdown .update-countdown-label');
+  if (countdownLabel) countdownLabel.textContent = '秒后开始更新';
+
+  // 图标改为旋转的更新图标
+  var iconEl = document.getElementById('updateOverlayIcon');
+  if (iconEl) iconEl.innerHTML = '<span class="update-spinner"></span>';
+
+  _preUpdateSec = 10;
+  if (_preUpdateTimer) clearInterval(_preUpdateTimer);
+  _preUpdateTimer = setInterval(function() {
+    _preUpdateSec--;
+    var el = document.getElementById('updateCountdownNum');
+    if (el) el.textContent = Math.max(0, _preUpdateSec);
+    // 更新进度条
+    var progress = document.getElementById('updateProgressBar');
+    if (progress) progress.style.width = (5 + (10 - _preUpdateSec) * 0.5) + '%';
+
+    if (_preUpdateSec <= 0) {
+      clearInterval(_preUpdateTimer);
+      _preUpdateTimer = null;
+      // 倒计时结束，开始实际更新
+      triggerUpdate();
+    }
+  }, 1000);
+}
+
+/**
+ * Actually call the update API and start polling.
+ */
+async function triggerUpdate() {
+  // 重置overlay UI进入更新状态
+  document.getElementById('updateOverlayTitle').textContent = '正在准备更新...';
+  document.getElementById('updateOverlayStatus').textContent = '正在安全停止当前任务';
+  document.getElementById('updateOverlayCountdown').style.display = 'none';
+  // 恢复倒计时标签
+  var countdownLabel = document.querySelector('#updateOverlayCountdown .update-countdown-label');
+  if (countdownLabel) countdownLabel.textContent = '秒后重启';
+
   try {
     const r = await api('/api/update/apply', {method: 'POST', body: JSON.stringify({type: 'full'})});
-    if (r.error) { toast('更新失败: ' + r.error, 'error'); return; }
-    toast('更新已开始，服务将自动重启...', 'success');
-  } catch (e) { toast('更新失败', 'error'); }
+    if (r.error) {
+      toast('更新失败: ' + r.error, 'error');
+      hideUpdateOverlay();
+      return;
+    }
+    toast('更新已开始...', 'info');
+    // Start polling for status updates
+    pollUpdateStatus();
+  } catch (e) {
+    toast('更新请求失败: ' + e.message, 'error');
+    hideUpdateOverlay();
+  }
 }
 
 // ══════════════════════════════════════════════════════

package/web/ui/index.html

@@ -7,13 +7,13 @@
 <style>
 *{margin:0;padding:0;box-sizing:border-box}
 :root{
-  --bg:#0f1117;--bg2:#1a1d27;--bg3:#232733;--bg4:#2e3347;--bg5:#3a3f57;
-  --surface:#1a1d27;--surface2:#232733;
-  --text:#e1e4ed;--text2:#8b92a5;--text3:#5c6378;
-  --accent:#6366f1;--accent2:#818cf8;--accent-light:#2d2f5e;--accent-dark:#9da3f8;
-  --primary:#6366f1;--primary-h:#818cf8;
-  --ok:#22c55e;--success:#22c55e;--warn:#f59e0b;--danger:#ef4444;--info:#3b82f6;
-  --border:#2e3347;--border-light:#232733;
+  --bg:#1a1816;--bg2:#211f1b;--bg3:#2a2720;--bg4:#353128;--bg5:#433c32;
+  --surface:#211f1b;--surface2:#2a2720;
+  --text:#e5ddd0;--text2:#a39b8c;--text3:#6d665b;
+  --accent:#c96442;--accent2:#d97a5a;--accent-light:#2a1f18;--accent-dark:#a0502e;
+  --primary:#c96442;--primary-h:#d97a5a;
+  --ok:#6ee7a0;--success:#6ee7a0;--warn:#fcd34d;--danger:#f87171;--info:#7db8f0;
+  --border:#322c24;--border-light:#2a2520;
   --radius:8px;
 }
 [data-theme="claude"]{
@@ -26,13 +26,13 @@
   --border:#d6cfc3;--border-light:#e2dace;
 }
 [data-theme="dark"]{
-  --bg:#0f1117;--bg2:#1a1d27;--bg3:#232733;--bg4:#2e3347;--bg5:#3a3f57;
-  --surface:#1a1d27;--surface2:#232733;
-  --text:#e1e4ed;--text2:#8b92a5;--text3:#5c6378;
-  --accent:#6366f1;--accent2:#818cf8;--accent-light:#2d2f5e;--accent-dark:#9da3f8;
-  --primary:#6366f1;--primary-h:#818cf8;
-  --ok:#22c55e;--success:#22c55e;--warn:#f59e0b;--danger:#ef4444;--info:#3b82f6;
-  --border:#2e3347;--border-light:#232733;
+  --bg:#1a1816;--bg2:#211f1b;--bg3:#2a2720;--bg4:#353128;--bg5:#433c32;
+  --surface:#211f1b;--surface2:#2a2720;
+  --text:#e5ddd0;--text2:#a39b8c;--text3:#6d665b;
+  --accent:#c96442;--accent2:#d97a5a;--accent-light:#2a1f18;--accent-dark:#a0502e;
+  --primary:#c96442;--primary-h:#d97a5a;
+  --ok:#6ee7a0;--success:#6ee7a0;--warn:#fcd34d;--danger:#f87171;--info:#7db8f0;
+  --border:#322c24;--border-light:#2a2520;
 }
 body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);height:100vh;height:100dvh;display:flex}
 .sidebar{width:220px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
@@ -124,10 +124,12 @@ tr:hover{background:var(--surface2)}
 .modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;width:90%;max-width:720px;max-height:85vh;overflow-y:auto}
 .modal-wide{max-width:900px}
 .modal h3{margin-bottom:16px}
-.log-viewer{background:#0a0c10;border:1px solid var(--border);border-radius:var(--radius);padding:12px;font-family:monospace;font-size:12px;line-height:1.6;max-height:500px;overflow-y:auto;white-space:pre-wrap;color:#a0a8c0}
-.log-viewer .INFO{color:#22c55e}.log-viewer .WARNING{color:#f59e0b}.log-viewer .ERROR{color:#ef4444}.log-viewer .DEBUG{color:#6366f1}
-.config-preview{background:#0a0c10;border:1px solid var(--border);border-radius:var(--radius);padding:16px;font-family:'Cascadia Code',Consolas,monospace;font-size:12px;line-height:1.8;white-space:pre-wrap;color:#a0a8c0;max-height:400px;overflow-y:auto}
-.config-preview .key{color:#6366f1;font-weight:600}
+.log-viewer{background:#161412;border:1px solid var(--border);border-radius:var(--radius);padding:12px;font-family:monospace;font-size:12px;line-height:1.6;max-height:500px;overflow-y:auto;white-space:pre-wrap;color:#a39b8c}
+.log-viewer .INFO{color:#6ee7a0}.log-viewer .WARNING{color:#fcd34d}.log-viewer .ERROR{color:#f87171}.log-viewer .DEBUG{color:#c96442}
+.log-viewer{background:#161412;border:1px solid var(--border);border-radius:var(--radius);padding:12px;font-family:monospace;font-size:12px;line-height:1.6;max-height:500px;overflow-y:auto;white-space:pre-wrap;color:#a39b8c}
+.log-viewer .INFO{color:#6ee7a0}.log-viewer .WARNING{color:#fcd34d}.log-viewer .ERROR{color:#f87171}.log-viewer .DEBUG{color:#c96442}
+.config-preview{background:#161412;border:1px solid var(--border);border-radius:var(--radius);padding:16px;font-family:'Cascadia Code',Consolas,monospace;font-size:12px;line-height:1.8;white-space:pre-wrap;color:#a39b8c;max-height:400px;overflow-y:auto}
+.config-preview .key{color:#c96442;font-weight:600}
 .drop-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:24px;text-align:center;cursor:pointer;transition:all .2s;color:var(--text2)}
 .drop-zone:hover,.drop-zone.dragover{border-color:var(--primary);background:var(--surface2)}
 .status-msg{margin-top:8px;padding:8px 12px;border-radius:6px;font-size:12px;display:none}
@@ -165,14 +167,6 @@ tr:hover{background:var(--surface2)}
 .confirm-box h4{margin-bottom:12px}
 .confirm-box p{font-size:13px;color:var(--text2);margin-bottom:16px}
 .confirm-box .btns{display:flex;gap:8px;justify-content:center}
-.config-preview{background:#0a0c10;border:1px solid var(--border);border-radius:var(--radius);padding:16px;font-family:'Cascadia Code',Consolas,monospace;font-size:12px;line-height:1.8;white-space:pre-wrap;color:#a0a8c0;max-height:400px;overflow-y:auto}
-.config-preview .key{color:#6366f1;font-weight:600}
-.drop-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:24px;text-align:center;cursor:pointer;transition:all .2s;color:var(--text2)}
-.drop-zone:hover,.drop-zone.dragover{border-color:var(--primary);background:var(--surface2)}
-.status-msg{margin-top:8px;padding:8px 12px;border-radius:6px;font-size:12px}
-.status-msg.loading{color:var(--info)}
-.status-msg.success{color:var(--success);background:rgba(34,197,94,.1)}
-.status-msg.error{color:var(--danger);background:rgba(239,68,68,.1)}
 /* ── Theme & Sidebar ── */
 .sidebar{overflow:hidden;position:relative;transition:width .3s cubic-bezier(.4,0,.2,1)}
 .sidebar.collapsed{width:56px}