openclaw-openagent 1.0.11 → 1.0.13

package/src/plugin-ui/modules/agent-book/panel/inject-ui.js

@@ -34,12 +34,27 @@ function _setTextareaValue(textarea, value) {
   textarea.dispatchEvent(new Event('input', { bubbles: true }));
 }
 
+function _escapeRemoteAgentMarkerValue(value) {
+  return String(value || '')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .replace(/"/g, "'");
+}
+
 function _buildRemoteAgentMarker(mention, userText) {
   const hasChinese = /[\u4e00-\u9fff]/.test(userText || '');
   const instruction = hasChinese
     ? '请调用 openagent_call_remote_agent 工具将此请求转发给远端 Agent 处理'
     : 'Please invoke the openagent_call_remote_agent tool to forward this request to the remote agent';
-  return `{openagent_call_remote_agent:agent_id="${mention.agent_id}",agent_name="${mention.name}",instruction="${instruction}"}`;
+  const attrs = [
+    `agent_id="${_escapeRemoteAgentMarkerValue(mention.agent_id)}"`,
+    `agent_name="${_escapeRemoteAgentMarkerValue(mention.name)}"`,
+  ];
+  if (mention.agent_bio) {
+    attrs.push(`agent_bio="${_escapeRemoteAgentMarkerValue(mention.agent_bio)}"`);
+  }
+  attrs.push(`instruction="${_escapeRemoteAgentMarkerValue(instruction)}"`);
+  return `{openagent_call_remote_agent:${attrs.join(',')}}`;
 }
 
 function _composeRemoteAgentMessage(textarea, mention) {
@@ -281,13 +296,13 @@ function tryInject() {
   console.log('[openagent] ✅ Agent Book UI injected (v3 hook-driven)');
 
   // ── 提示栏（Figma 141:3293）：页面加载即显示 ──
-  _injectHintBar(inputContainer || textarea.parentElement);
+  _injectHintBar(inputContainer || textarea.parentElement, toolbarRow);
 
   return true;
 }
 
 /** 注入提示栏到输入区域上方 */
-function _injectHintBar(anchorEl) {
+function _injectHintBar(anchorEl, toolbarEl) {
   if (!anchorEl || document.querySelector('.openagent-hint-bar')) return;
 
   const hintBar = document.createElement('div');
@@ -323,8 +338,95 @@ function _injectHintBar(anchorEl) {
     hintBar.style.display = 'none';
   });
 
+  // ── V2 版本兼容：≥ 2026.6.9 使用 absolute 定位，bottom 动态跟随输入区高度 ──
+  var isV2 = typeof _clIsHostVersionGte === 'function' && _clIsHostVersionGte('2026.6.9');
+  if (isV2) {
+    hintBar.style.position = 'absolute';
+  }
+
   // 插入到 wrapper 外面、上方
   anchorEl.parentElement.insertBefore(hintBar, anchorEl);
+
+  function _findHintBarToolbar() {
+    if (toolbarEl) return toolbarEl;
+    var parentEl = anchorEl.parentElement;
+    if (parentEl) {
+      for (var i = 0; i < parentEl.children.length; i++) {
+        var child = parentEl.children[i];
+        if (child !== anchorEl && child.className && String(child.className).indexOf('agent-chat__toolbar') !== -1) {
+          return child;
+        }
+      }
+    }
+    return anchorEl.closest && anchorEl.closest('.agent-chat__input')
+      ? anchorEl.closest('.agent-chat__input').querySelector('.agent-chat__toolbar')
+      : null;
+  }
+
+  function _readElementHeight(el) {
+    if (!el) return 0;
+    var rect = el.getBoundingClientRect ? el.getBoundingClientRect() : null;
+    if (rect && rect.height > 0) return rect.height;
+    return typeof el.offsetHeight === 'number' ? el.offsetHeight : 0;
+  }
+
+  // 跟随 composer wrapper 的实际尺寸。侧栏拖拽/布局重排不一定触发 window resize。
+  function _syncHintBarLayout() {
+    var rect = anchorEl.getBoundingClientRect();
+    if (rect.width > 0) {
+      hintBar.style.width = rect.width + 'px';
+      var rootStyle = document.documentElement && document.documentElement.style;
+      if (rootStyle) {
+        rootStyle.setProperty('--openagent-input-wrapper-right-offset', Math.max(0, window.innerWidth - rect.right) + 'px');
+        rootStyle.setProperty('--openagent-input-wrapper-right-edge', Math.max(0, rect.right) + 'px');
+        rootStyle.setProperty('--openagent-input-wrapper-width', rect.width + 'px');
+      }
+      _syncSidebarRightEdge(rect);
+    }
+    if (isV2) {
+      var toolbar = _findHintBarToolbar();
+      var bottom = _readElementHeight(anchorEl) + _readElementHeight(toolbar) + 6;
+      hintBar.style.bottom = bottom + 'px';
+    }
+  }
+
+  function _syncSidebarRightEdge(inputRect) {
+    var sidebars = document.querySelectorAll('.chat-sidebar');
+    for (var i = 0; i < sidebars.length; i++) {
+      var sidebar = sidebars[i];
+      var sidebarRect = sidebar.getBoundingClientRect();
+      if (!sidebarRect || sidebarRect.width <= 0) continue;
+      var left = Math.max(0, sidebarRect.left);
+      var targetRight = Math.min(window.innerWidth, Math.max(0, inputRect.right));
+      var targetWidth = Math.floor(targetRight - left);
+      if (targetWidth <= 0) continue;
+      sidebar.style.setProperty('--openagent-sidebar-target-width', targetWidth + 'px');
+      sidebar.style.setProperty('width', targetWidth + 'px', 'important');
+      sidebar.style.setProperty('max-width', targetWidth + 'px', 'important');
+      sidebar.style.setProperty('flex-basis', targetWidth + 'px', 'important');
+      sidebar.style.setProperty('margin-right', '0px', 'important');
+    }
+  }
+
+  function _scheduleHintBarLayoutSync() {
+    window.requestAnimationFrame
+      ? window.requestAnimationFrame(_syncHintBarLayout)
+      : setTimeout(_syncHintBarLayout, 0);
+  }
+
+  _syncHintBarLayout();
+  _scheduleHintBarLayoutSync();
+  window.addEventListener('resize', _scheduleHintBarLayoutSync);
+  if (typeof ResizeObserver === 'function') {
+    var hintBarResizeObserver = new ResizeObserver(_scheduleHintBarLayoutSync);
+    hintBarResizeObserver.observe(anchorEl);
+    var toolbarForResize = _findHintBarToolbar();
+    if (toolbarForResize) hintBarResizeObserver.observe(toolbarForResize);
+  }
+  if (typeof MutationObserver === 'function' && document.body) {
+    var sidebarLayoutObserver = new MutationObserver(_scheduleHintBarLayoutSync);
+    sidebarLayoutObserver.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });
+  }
 }
 
 // ════════════════════════════════════════════════════════════════

package/src/plugin-ui/modules/agent-book/panel/styles.js

@@ -1,10 +1,13 @@
 // ── 样式注入 ──
 
 function injectStyles() {
-  if (document.getElementById('openagent-override-styles')) return;
+  var oldStyle = document.getElementById('openagent-override-styles');
+  if (oldStyle) oldStyle.remove();
 
   const style = document.createElement('style');
   style.id = 'openagent-override-styles';
+  style.setAttribute('data-openagent-style', 'agent-book-panel');
+  style.setAttribute('data-openagent-host-version', CL.hostVersion || 'unknown');
   style.textContent = `
     /* ── 流式回复边框闪烁：覆盖为蓝色 ── */
     @keyframes chatStreamPulse {
@@ -73,7 +76,6 @@ function injectStyles() {
       background: var(--oa-panel-bg, #fff);
       border: 0.5px solid #dbdbdb;
       border-radius: 16px;
-      box-shadow: 0 -4px 24px var(--oa-shadow-color, rgba(0,0,0,0.08)), 0 2px 8px var(--oa-shadow-color, rgba(0,0,0,0.04));
       z-index: 99999;
       overflow: hidden;
       display: none;
@@ -82,9 +84,17 @@ function injectStyles() {
       padding: 14px;
       font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       box-sizing: border-box;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+    .openagent-agent-panel::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+      display: none;
     }
     .openagent-agent-panel.visible {
       display: flex;
+      padding: 30px;
       animation: openagent-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     }
     @keyframes openagent-up {
@@ -98,22 +108,21 @@ function injectStyles() {
       justify-content: space-between;
       align-items: center;
       min-height: 26px;
-      padding: 6px 10px 0 10px;
       border-bottom: none;
     }
     .openagent-panel-title {
       display: flex;
       align-items: center;
       gap: 6px;
-      font-size: 16px;
+      font-size: 18px;
       font-weight: 500;
-      color: rgba(47, 47, 51, 0.8);
+      color: #333;
       text-transform: uppercase;
       letter-spacing: 0.3px;
     }
     .openagent-panel-title-icon {
-      width: 21px;
-      height: 21px;
+      width: 24px;
+      height: 24px;
       flex-shrink: 0;
     }
     .openagent-panel-close {
@@ -140,7 +149,7 @@ function injectStyles() {
     .openagent-panel-divider {
       height: 0;
       border: none;
-      border-top: 0.2px solid rgba(47, 47, 51, 0.16);
+      border-top: 0.2px solid #EAEAEA;
       margin: 0;
     }
 
@@ -319,32 +328,23 @@ function injectStyles() {
       flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 14px;
       min-height: 0;
       max-height: min(56vh, 451px);
-      scrollbar-width: thin;
-      scrollbar-color: #ddd transparent;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
     }
     .openagent-agent-list::-webkit-scrollbar {
-      width: 4px;
-    }
-    .openagent-agent-list::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    .openagent-agent-list::-webkit-scrollbar-thumb {
-      background: #ddd;
-      border-radius: 2px;
-    }
-    .openagent-agent-list::-webkit-scrollbar-thumb:hover {
-      background: #bbb;
+      width: 0;
+      height: 0;
+      display: none;
     }
 
     .openagent-agent-section {
       display: flex;
       flex-direction: column;
-      gap: 8px;
       width: 100%;
       min-width: 0;
+      margin-bottom: 30px;
     }
 
     /* ── 父分类标题（两级结构：Research > Market Research） ── */
@@ -355,33 +355,22 @@ function injectStyles() {
       width: 100%;
       min-width: 0;
     }
-    .openagent-parent-heading {
-      font-size: 11px;
-      font-weight: 600;
-      line-height: 13px;
-      color: rgba(47, 47, 51, 0.45);
-      padding: 0 12px;
-      text-transform: uppercase;
-      letter-spacing: 0.8px;
-    }
-
     /* ── 分组标题 ── */
     .openagent-section-heading {
       font-size: 16px;
       font-weight: 400;
       line-height: 16px;
       color: rgba(47, 47, 51, 0.80);
-      padding: 0 12px 0 12px;
       letter-spacing: 0;
+      margin-bottom: 20px;
     }
 
     /* ── 分组网格容器 ── */
     .openagent-section-grid {
       display: grid;
-      grid-template-columns: repeat(3, minmax(0, 439.5px));
+      grid-template-columns: repeat(3, 1fr);
       justify-content: start;
-      gap: 8px 14px;
-      padding: 0 12px;
+      gap: 12px;
       width: 100%;
       box-sizing: border-box;
     }
@@ -414,9 +403,15 @@ function injectStyles() {
     .agent-card__body { flex: 1; min-width: 0; }
     .agent-card__name-line { display: flex; align-items: baseline; gap: 8px; }
     .agent-card__name {
+      display: block;
+      min-width: 0;
+      max-width: 100%;
       font-family: "PingFang SC", sans-serif;
       font-weight: 600;
       color: rgba(47, 47, 51, 1);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .agent-card__tag { font-size: 12px; color: #6366f1; font-weight: 500; }
     .agent-card__specialty { font-size: 12px; color: #999; font-weight: 400; }
@@ -491,12 +486,31 @@ function injectStyles() {
       border-radius: 20px;
       border: 0.5px solid #dbdbdb;
       background: #fff;
-      min-height: 0;
       min-width: 0;
       box-sizing: border-box;
     }
     .agent-card--mention:hover {
-      background: rgba(0, 0, 0, 0.02);
+      border-color: transparent;
+      box-shadow: 0 4px 12px 0 rgba(149, 147, 240, 0.10);
+    }
+    .openagent-agent-list .agent-card--mention:hover,
+    .openagent-agent-list .agent-card--search:hover {
+      position: relative;
+      border-color: transparent;
+    }
+    .openagent-agent-list .agent-card--mention:hover::after,
+    .openagent-agent-list .agent-card--search:hover::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: 1px;
+      background: linear-gradient(90deg, rgba(92, 74, 255, 0.5), rgba(130, 116, 255, 0.5));
+      pointer-events: none;
+      box-sizing: border-box;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
     }
     /* avart 外壳简化 — 不再需要 */
     .agent-card--mention .agent-card__avart {
@@ -625,9 +639,6 @@ function injectStyles() {
       border: 0.5px solid transparent;
       box-sizing: border-box;
     }
-    .agent-card--search:hover {
-      background: rgba(0, 0, 0, 0.02);
-    }
     .agent-card--search .agent-card__avatar {
       width: 40px;
       height: 40px;
@@ -745,7 +756,6 @@ function injectStyles() {
     [data-theme-mode="dark"] .openagent-agent-panel,
     [data-theme="dark"] .openagent-agent-panel {
       background: #1c1c1c; border-color: rgba(255,255,255,0.12);
-      box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
     }
     [data-theme-mode="dark"] .openagent-panel-head,
     [data-theme="dark"] .openagent-panel-head { border-color: #2a2a2a; }
@@ -757,8 +767,6 @@ function injectStyles() {
     [data-theme="dark"] .openagent-panel-close:hover { background: #333; }
     [data-theme-mode="dark"] .openagent-section-heading,
     [data-theme="dark"] .openagent-section-heading { color: rgba(224, 224, 224, 0.45); }
-    [data-theme-mode="dark"] .openagent-parent-heading,
-    [data-theme="dark"] .openagent-parent-heading { color: rgba(224, 224, 224, 0.3); }
     [data-theme-mode="dark"] .openagent-panel-divider,
     [data-theme="dark"] .openagent-panel-divider { border-color: rgba(255,255,255,0.1); }
 
@@ -772,7 +780,7 @@ function injectStyles() {
     [data-theme-mode="dark"] .agent-card--mention,
     [data-theme="dark"] .agent-card--mention { background: #1c1c1c; border-color: rgba(255,255,255,0.12); }
     [data-theme-mode="dark"] .agent-card--mention:hover,
-    [data-theme="dark"] .agent-card--mention:hover { background: #252525; }
+    [data-theme="dark"] .agent-card--mention:hover { border-color: transparent; }
     [data-theme-mode="dark"] .agent-card--mention .agent-card__name,
     [data-theme="dark"] .agent-card--mention .agent-card__name { color: #e0e0e0; }
     [data-theme-mode="dark"] .agent-card--mention .agent-card__bio,
@@ -787,8 +795,6 @@ function injectStyles() {
     }
     [data-theme-mode="dark"] .agent-card--mention .agent-card__action:hover,
     [data-theme="dark"] .agent-card--mention .agent-card__action:hover { background: rgba(255,255,255,0.06); }
-    [data-theme-mode="dark"] .agent-card--search:hover,
-    [data-theme="dark"] .agent-card--search:hover { background: #252525; }
     [data-theme-mode="dark"] .agent-card--search .agent-card__name,
     [data-theme="dark"] .agent-card--search .agent-card__name { color: #e0e0e0; }
     [data-theme-mode="dark"] .agent-card--search .agent-card__bio,

package/src/plugin-ui/modules/agent-book/remote-agent-tool/components-core.js

@@ -103,10 +103,12 @@ registerComponent('agent-card', async (data) => {
 function _clHandleTripDataSignal(payload, contextNode) {
   if (!payload) return;
   console.log('[trip-data] detected signal, payload:', payload.substring(0, 40));
+  const hostTextContextSelector = (typeof CL !== 'undefined' && CL.hostAdapter && CL.hostAdapter.selectors && CL.hostAdapter.selectors.textContext)
+    || '.chat-text';
 
   if (payload === 'file') {
     const chatText = contextNode && contextNode.closest
-      ? contextNode.closest('.chat-text, .chat-tool-card__detail, .chat-tools-collapse__body')
+      ? contextNode.closest(hostTextContextSelector)
       : null;
     if (chatText) {
       chatText.dataset.clProcessed = '';
@@ -123,7 +125,7 @@ function _clHandleTripDataSignal(payload, contextNode) {
       }
       console.log('[trip-data] ✅ Card data from base64');
       const chatText = contextNode && contextNode.closest
-        ? contextNode.closest('.chat-text, .chat-tool-card__detail, .chat-tools-collapse__body')
+        ? contextNode.closest(hostTextContextSelector)
         : null;
       if (chatText) {
         chatText.dataset.clProcessed = '';

package/src/plugin-ui/modules/agent-book/remote-agent-tool/thought-chain-card.js

@@ -6,9 +6,12 @@
 // ── 1. CSS 注入 ──
 
 (function injectThoughtChainStyles() {
-  if (document.getElementById('cl-tools-collapse-css')) return;
+  var oldStyle = document.getElementById('cl-tools-collapse-css');
+  if (oldStyle) oldStyle.remove();
   const style = document.createElement('style');
   style.id = 'cl-tools-collapse-css';
+  style.setAttribute('data-openagent-style', 'thought-chain');
+  style.setAttribute('data-openagent-host-version', CL.hostVersion || 'unknown');
   style.textContent = `
     /* ── Agent Pill（通用身份标签） ── */
     .cl-agent-pill {

package/src/plugin-ui/modules/agent-book/scanner.js

@@ -5,20 +5,32 @@
 
 // CL.clScanCount lives on CL.clScanCount
 
+function _clIsInsideNativeToolHost(node) {
+  var adapter = CL && CL.hostAdapter;
+  var cur = node;
+  var hops = 0;
+  while (cur && cur !== document.body && hops < 12) {
+    if (adapter && adapter.isToolLikeShell && adapter.isToolLikeShell(cur)) return true;
+    cur = cur.parentElement;
+    hops++;
+  }
+  return !!(node && node.closest && node.closest('details'));
+}
+
 function _clScan() {
   CL.clScanCount++;
 
   // ── 0.5 清理标记 → 显示为 @agentName ──
-  // 新格式: {openagent_call_remote_agent:agent_id="...",agent_name="...",instruction="..."}
+  // 新格式: {openagent_call_remote_agent:agent_id="...",agent_name="...",agent_bio="...",instruction="..."}
   // 旧格式: {openagent:agent_id="...",agent_name="..."}
   // 两种都要匹配清理；这里只处理普通聊天气泡，不处理 ToolCard。
   var CL_MENTION_STYLE = '';
   document.querySelectorAll('.chat-bubble').forEach(function(el) {
     if (el.dataset.clMarkerCleaned) return;
-    if (el.closest('.chat-tool-card, .chat-tools-collapse, details')) return;
+    if (_clIsInsideNativeToolHost(el)) return;
 
     var text = el.textContent || '';
-    var rawRegex = /\{openagent(?:_call_remote_agent)?:agent_id="([^"]*)",agent_name="([^"]*)"(?:,instruction="[^"]*")?\}\s*/g;
+    var rawRegex = /\{openagent(?:_call_remote_agent)?:agent_id="([^"]*)",agent_name="([^"]*)"(?:,[^{}]*)?\}\s*/g;
     if (!rawRegex.test(text)) return;
 
     if (el.querySelector('.cl-remote-agent-card')) {
@@ -26,7 +38,7 @@ function _clScan() {
       return;  // 包含活 DOM，跳过 innerHTML 重写
     }
 
-    var htmlRegex = /\{openagent(?:_call_remote_agent)?:agent_id=(?:&quot;|")([^&"]*)(?:&quot;|"),agent_name=(?:&quot;|")([^&"]*)(?:&quot;|")(?:,instruction=(?:&quot;|")[^&"]*(?:&quot;|"))?\}\s*/g;
+    var htmlRegex = /\{openagent(?:_call_remote_agent)?:agent_id=(?:&quot;|")([^&"]*)(?:&quot;|"),agent_name=(?:&quot;|")([^&"]*)(?:&quot;|")(?:,[^{}]*)?\}\s*/g;
     if (CL && typeof CL.diagHtmlRewrite === 'function') {
       CL.diagHtmlRewrite('scanner.marker.before', el, { scan: CL.clScanCount });
     }
@@ -61,7 +73,7 @@ function _clScan() {
   if (mentionedAgents.length > 0) {
     document.querySelectorAll('.chat-bubble').forEach(function(el) {
       if (el.dataset.clAgentStyled) return;
-      if (el.closest('.chat-tool-card, .chat-tools-collapse, details')) return;
+      if (_clIsInsideNativeToolHost(el)) return;
 
       var text = el.textContent || '';
       var html = el.innerHTML;

package/src/plugin-ui/modules/agent-book/travelcard/travel-styles.js

@@ -1,5 +1,10 @@
 // ── 1. CSS 注入 ──
+var _oldTripCSS = document.getElementById('openagent-trip-card-styles');
+if (_oldTripCSS) _oldTripCSS.remove();
 const _tripCSS = document.createElement('style');
+_tripCSS.id = 'openagent-trip-card-styles';
+_tripCSS.setAttribute('data-openagent-style', 'trip-card');
+_tripCSS.setAttribute('data-openagent-host-version', CL.hostVersion || 'unknown');
 _tripCSS.textContent = `
 /* ── 行程文字：普通文字灰色，特殊标注(粗体/链接/标题)黑色 ── */
 .trip-styled li, .trip-styled p { color: #888 !important; }
@@ -74,7 +79,13 @@ margin: 0 8px; position: relative; top: -1px;
 .trip-img-card {
 display: flex; flex-direction: row; gap: 6px;
 overflow-x: auto; padding: 8px 0; margin-left: 20px;
-scrollbar-width: thin;
+scrollbar-width: none;
+-ms-overflow-style: none;
+}
+.trip-img-card::-webkit-scrollbar {
+width: 0;
+height: 0;
+display: none;
 }
 .trip-img-item {
 position: relative; width: 191px; height: 100px; border-radius: 8px;

package/src/plugin-ui/modules/loader/bootstrap.js

@@ -26,9 +26,104 @@ function _startClObserver() {
   _clObserverTarget = document.querySelector('openclaw-app') || document.body;
   _clObserver.observe(_clObserverTarget, { childList: true, subtree: true });
   setTimeout(_debouncedClScan, 2000);
+  setTimeout(_clCheckPluginUpdateStatus, 5000);
   /* muted */ void 0;
 }
 
+function _clCheckPluginUpdateStatus() {
+  fetch('/plugins/openagent/update-status', { cache: 'no-store' })
+    .then(function(res) {
+      if (!res.ok) return null;
+      return res.json();
+    })
+    .then(function(status) {
+      if (!status || !status.updateAvailable) return;
+      _clShowPluginUpdateNotice(status);
+    })
+    .catch(function() {});
+}
+
+function _clShowPluginUpdateNotice(status) {
+  var latestVersion = String(status.latestVersion || '').trim();
+  var currentVersion = String(status.currentVersion || '').trim();
+  var dismissKey = 'openagent-update-dismissed-' + latestVersion;
+  try {
+    if (latestVersion && localStorage.getItem(dismissKey) === '1') return;
+  } catch (e) {}
+
+  var existing = document.getElementById('openagent-update-notice');
+  if (existing) existing.remove();
+
+  var notice = document.createElement('div');
+  notice.id = 'openagent-update-notice';
+  notice.style.cssText = [
+    'position:fixed',
+    'right:18px',
+    'bottom:18px',
+    'z-index:2147483647',
+    'max-width:360px',
+    'padding:14px 16px',
+    'border:1px solid rgba(0,0,0,0.08)',
+    'border-radius:12px',
+    'background:#fff',
+    'box-shadow:0 12px 32px rgba(15,23,42,0.16)',
+    'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif',
+    'color:#1f2937',
+    'font-size:13px',
+    'line-height:1.5'
+  ].join(';');
+
+  var title = document.createElement('div');
+  title.textContent = 'OpenAgent 有新版本 ' + latestVersion;
+  title.style.cssText = 'font-weight:600;font-size:14px;margin-right:22px;margin-bottom:4px;';
+  notice.appendChild(title);
+
+  var body = document.createElement('div');
+  var command = String(status.installCommand || 'npx -y openclaw-openagent-cli update');
+  body.textContent = currentVersion ? ('当前版本 ' + currentVersion + '，运行命令完成更新。') : '运行命令完成更新。';
+  body.style.cssText = 'color:#4b5563;margin-bottom:10px;';
+  notice.appendChild(body);
+
+  var code = document.createElement('code');
+  code.textContent = command;
+  code.style.cssText = 'display:block;white-space:normal;word-break:break-all;background:#f6f7f9;border-radius:8px;padding:8px 10px;color:#111827;';
+  notice.appendChild(code);
+
+  var actions = document.createElement('div');
+  actions.style.cssText = 'display:flex;justify-content:flex-end;gap:8px;margin-top:10px;';
+  var copy = document.createElement('button');
+  copy.type = 'button';
+  copy.textContent = '复制命令';
+  copy.style.cssText = 'border:1px solid #d1d5db;background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer;color:#374151;';
+  copy.onclick = function() {
+    try {
+      navigator.clipboard.writeText(command);
+      copy.textContent = '已复制';
+    } catch (e) {}
+  };
+  actions.appendChild(copy);
+
+  var close = document.createElement('button');
+  close.type = 'button';
+  close.textContent = '关闭';
+  close.style.cssText = 'border:0;background:#111827;color:#fff;border-radius:8px;padding:6px 10px;cursor:pointer;';
+  close.onclick = function() {
+    try {
+      if (latestVersion) localStorage.setItem(dismissKey, '1');
+    } catch (e) {}
+    notice.remove();
+  };
+  actions.appendChild(close);
+  notice.appendChild(actions);
+
+  if (status.policy === 'auto' && status.autoUpdateStarted) {
+    body.textContent = '正在自动更新，OpenClaw Gateway 可能会自动重启。';
+    actions.remove();
+  }
+
+  document.body.appendChild(notice);
+}
+
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', _startClObserver);
 } else {