openclaw-openagent 1.0.11 → 1.0.12

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;
@@ -85,6 +87,7 @@ function injectStyles() {
     }
     .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 +101,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 +142,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,7 +321,6 @@ function injectStyles() {
       flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 14px;
       min-height: 0;
       max-height: min(56vh, 451px);
       scrollbar-width: thin;
@@ -342,9 +343,9 @@ function injectStyles() {
     .openagent-agent-section {
       display: flex;
       flex-direction: column;
-      gap: 8px;
       width: 100%;
       min-width: 0;
+      margin-bottom: 30px;
     }
 
     /* ── 父分类标题（两级结构：Research > Market Research） ── */
@@ -355,33 +356,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 +404,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 +487,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 +640,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 +757,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 +768,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 +781,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 +796,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; }