openclaw-openagent 1.0.9 → 1.0.12

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

@@ -6,6 +6,7 @@ let panel = null;
 let backdrop = null;
 
 let inputWrapperRef = null; // 保存输入框包裹层引用
+let panelPositionResizeObserver = null;
 
 // ── 键盘导航状态（§1.5）──
 // 对标 TIM index.ts:13 "let selectedIndex: number = 0"
@@ -40,14 +41,14 @@ panel.className = 'openagent-agent-panel';
 panel.innerHTML = `
   <div class="openagent-panel-head">
     <span class="openagent-panel-title">
-      <svg class="openagent-panel-title-icon" width="28" height="28" viewBox="0 0 56 56" fill="none">
+      <svg class="openagent-panel-title-icon" width="24" height="24" viewBox="0 0 56 56" fill="none">
         <path d="M28 25H32C34.2091 25 36 26.7909 36 29V39C36 41.2091 34.2091 43 32 43H14C11.7909 43 10 41.2091 10 39V29C10 26.7909 11.7909 25 14 25H15" stroke="#12CCF6" stroke-width="3.3" stroke-linecap="round"/>
         <path d="M39 31H42C44.2091 31 46 29.2091 46 27V17C46 14.7909 44.2091 13 42 13H24C21.7909 13 20 14.7909 20 17V27C20 29.2091 21.7909 31 24 31H30.0652C30.236 31 30.3282 31.2004 30.217 31.3302L27.5 34.5" stroke="#12CCF6" stroke-width="3.3" stroke-linecap="round"/>
         <path d="M27 25.5L32.5 21" stroke="#12CCF6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
-      <span class="panel-title-text">Agent Book</span>
+      <span class="panel-title-text">OpenAgent</span>
     </span>
-    <button class="openagent-panel-close">✕</button>
+    <button class="openagent-panel-close"><svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none"><path d="M5.625 5.625L15.375 15.375" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.375 5.625L5.625 15.375" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
   </div>
   <hr class="openagent-panel-divider" />
   <div class="openagent-agent-list">
@@ -60,6 +61,15 @@ panel.querySelector('.openagent-panel-close').addEventListener('click', () => {
   closePanel();
 });
 
+
+	// 提示栏关闭按钮
+	const hintClose = panel.querySelector('.openagent-hint-bar__close');
+	if (hintClose) {
+	  hintClose.addEventListener('click', () => {
+	    const hintBar = panel.querySelector('.openagent-hint-bar');
+	    if (hintBar) hintBar.style.display = 'none';
+	  });
+	}
 // 挂到 body（与 backdrop 同级，z-index 自然生效）
 document.body.appendChild(panel);
 return panel;
@@ -74,12 +84,71 @@ const width = Math.min(rect.width, window.innerWidth - viewportPadding * 2);
 const left = Math.max(viewportPadding, Math.min(rect.left, window.innerWidth - width - viewportPadding));
 panel.style.left = left + 'px';
 panel.style.width = width + 'px';
-panel.style.bottom = (window.innerHeight - rect.top + 8) + 'px';
+const toolbar = _findPanelToolbar();
+const isComposerWrapper = inputWrapperRef.classList
+  && inputWrapperRef.classList.contains('agent-chat__composer-combobox');
+if (isComposerWrapper) {
+  panel.style.bottom = (_readElementHeight(inputWrapperRef) + _readElementHeight(toolbar) + 35) + 'px';
+} else {
+  panel.style.bottom = (window.innerHeight - rect.top + 8) + 'px';
+}
 }
 
 /** resize 时实时跟随输入框 */
 function _onResize() { _positionPanel(); }
 
+function _findPanelToolbar() {
+  if (!inputWrapperRef) return null;
+  var chatInput = inputWrapperRef.closest && inputWrapperRef.closest('.agent-chat__input');
+  if (chatInput) {
+    var toolbar = chatInput.querySelector('.agent-chat__toolbar');
+    if (toolbar) return toolbar;
+  }
+
+  var parentEl = inputWrapperRef.parentElement;
+  if (parentEl) {
+    for (var i = 0; i < parentEl.children.length; i++) {
+      var child = parentEl.children[i];
+      if (child !== inputWrapperRef && child.className && String(child.className).indexOf('agent-chat__toolbar') !== -1) {
+        return child;
+      }
+    }
+  }
+  return 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;
+}
+
+function _schedulePanelPosition() {
+  window.requestAnimationFrame
+    ? window.requestAnimationFrame(_positionPanel)
+    : setTimeout(_positionPanel, 0);
+}
+
+function _installPanelPositionObservers() {
+  if (panelPositionResizeObserver) {
+    panelPositionResizeObserver.disconnect();
+    panelPositionResizeObserver = null;
+  }
+  if (typeof ResizeObserver !== 'function' || !inputWrapperRef) return;
+
+  panelPositionResizeObserver = new ResizeObserver(_schedulePanelPosition);
+  panelPositionResizeObserver.observe(inputWrapperRef);
+  var toolbar = _findPanelToolbar();
+  if (toolbar) panelPositionResizeObserver.observe(toolbar);
+}
+
+function _teardownPanelPositionObservers() {
+  if (!panelPositionResizeObserver) return;
+  panelPositionResizeObserver.disconnect();
+  panelPositionResizeObserver = null;
+}
+
 // 搜索状态管理
 let currentAbort = null;  // AbortController for in-flight search
 let searchDebounceId = null;
@@ -98,8 +167,15 @@ return textarea.value.replace(/@/g, ' ').replace(/\s+/g, ' ').trim();
 }
 
 function openPanel(textarea) {
+// 清除上次的空状态弹窗
+var oldToast = document.querySelector('.openagent-empty-toast');
+if (oldToast) oldToast.remove();
+var oldEmpty = document.querySelector('.openagent-empty-state');
+if (oldEmpty) oldEmpty.remove();
+
 const p = ensurePanel();
 _positionPanel(); // 动态定位到 input 上方
+_installPanelPositionObservers();
 p.classList.add('visible');
 backdrop.classList.add('visible');
 window.addEventListener('resize', _onResize);
@@ -162,6 +238,7 @@ function closePanel() {
 if (panel) panel.classList.remove('visible');
 if (backdrop) backdrop.classList.remove('visible');
 window.removeEventListener('resize', _onResize);
+_teardownPanelPositionObservers();
 // 清理搜索状态
 if (currentAbort) { currentAbort.abort(); currentAbort = null; }
 if (searchDebounceId) { clearTimeout(searchDebounceId); searchDebounceId = null; }
@@ -216,7 +293,6 @@ function _scrollItemIntoView(index) {
 
 function _appendParentSection(container, parentTitle, children, textarea, renderedAgents) {
   const parentSec = _el('section', 'openagent-parent-section');
-  parentSec.appendChild(_text('div', 'openagent-parent-heading', parentTitle));
   children.forEach(function(child) {
     if (child.agents && child.agents.length > 0) {
       _appendAgentSection(parentSec, child.title, child.agents, textarea, renderedAgents);
@@ -281,14 +357,91 @@ function _appendSearchResults(container, agents, textarea, renderedAgents) {
   container.appendChild(list);
 }
 
+/**
+ * 空状态组件（Figma 144:3444）— 未匹配到 Agent 时显示
+ */
+/** 关闭已有空状态浮层 */
+function _dismissEmptyToast() {
+  var existing = document.querySelector('.openagent-empty-toast');
+  if (existing) existing.remove();
+}
+
+/** 独立浮层空状态（不在面板内） */
+function _getEmptyMessage(query) {
+  return CL.agentBookLastError ||
+    (query ? '暂未匹配到您想要的Agent 我们将持续上新～' : '暂无在线 Agent，请输入关键词搜索');
+}
+
+function _showEmptyToast(query, message) {
+  _dismissEmptyToast();
+  var toast = _el('div', 'openagent-empty-toast');
+
+  var iconWrap = _el('div', 'openagent-empty-state__icon');
+  iconWrap.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none">' +
+    '<path d="M7 1.5C10.0376 1.5 12.5 3.96243 12.5 7C12.5 8.69527 11.7389 10.2145 10.5237 11.2559L13.0303 13.7626C13.3232 14.0555 13.3232 14.5303 13.0303 14.8232C12.7374 15.1161 12.2626 15.1161 11.9697 14.8232L9.38402 12.2376C8.53401 12.7803 7.49507 13.1079 6.37793 13.1079L7 12.5C6.99363 12.5008 6.98726 12.5012 6.98089 12.5012C3.9368 12.5307 1.46927 10.0632 1.49878 7.01908C1.52829 3.97499 3.99398 1.50537 7.03789 1.5H7ZM7 3C4.79086 3 3 4.79086 3 7C3 9.20914 4.79086 11 7 11C9.20914 11 11 9.20914 11 7C11 4.79086 9.20914 3 7 3Z" fill="#8274ff" fill-opacity="0.6"/>' +
+    '</svg>';
+  toast.appendChild(iconWrap);
+
+  toast.appendChild(_text('span', 'openagent-empty-state__text', message || _getEmptyMessage(query)));
+
+  var closeBtn = _el('button', 'openagent-empty-state__close');
+  closeBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none">' +
+    '<path d="M1 1L11 11M11 1L1 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>' +
+    '</svg>';
+  closeBtn.addEventListener('click', function() { toast.remove(); });
+  toast.appendChild(closeBtn);
+
+  // 定位到输入框上方
+  if (inputWrapperRef) {
+    var rect = inputWrapperRef.getBoundingClientRect();
+    toast.style.position = 'fixed';
+    toast.style.left = Math.max(16, rect.left) + 'px';
+    toast.style.width = Math.min(rect.width, window.innerWidth - 32) + 'px';
+    toast.style.bottom = (window.innerHeight - rect.top + 8) + 'px';
+    // ── V2 版本兼容：v1 bottom 固定 117px ──
+    var isV2Toast = typeof _clIsHostVersionGte === 'function' && _clIsHostVersionGte('2026.6.9');
+    if (!isV2Toast) {
+      toast.style.bottom = '117px';
+    }
+    toast.style.zIndex = '100000';
+  }
+  document.body.appendChild(toast);
+}
+
+function _createEmptyState(query, message) {
+  var wrapper = _el('div', 'openagent-empty-state');
+  var row = _el('div', 'openagent-empty-state__row');
+
+  var iconWrap = _el('div', 'openagent-empty-state__icon');
+  iconWrap.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none">' +
+    '<path d="M7 1.5C10.0376 1.5 12.5 3.96243 12.5 7C12.5 8.69527 11.7389 10.2145 10.5237 11.2559L13.0303 13.7626C13.3232 14.0555 13.3232 14.5303 13.0303 14.8232C12.7374 15.1161 12.2626 15.1161 11.9697 14.8232L9.38402 12.2376C8.53401 12.7803 7.49507 13.1079 6.37793 13.1079L7 12.5C6.99363 12.5008 6.98726 12.5012 6.98089 12.5012C3.9368 12.5307 1.46927 10.0632 1.49878 7.01908C1.52829 3.97499 3.99398 1.50537 7.03789 1.5H7ZM7 3C4.79086 3 3 4.79086 3 7C3 9.20914 4.79086 11 7 11C9.20914 11 11 9.20914 11 7C11 4.79086 9.20914 3 7 3Z" fill="#8274ff" fill-opacity="0.6"/>' +
+    '</svg>';
+  row.appendChild(iconWrap);
+
+  var text = _text('span', 'openagent-empty-state__text', message || _getEmptyMessage(query));
+  row.appendChild(text);
+
+  var closeBtn = _el('button', 'openagent-empty-state__close');
+  closeBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none">' +
+    '<path d="M1 1L11 11M11 1L1 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>' +
+    '</svg>';
+  closeBtn.addEventListener('click', function() {
+    wrapper.style.display = 'none';
+  });
+  row.appendChild(closeBtn);
+
+  wrapper.appendChild(row);
+  return wrapper;
+}
+
 function renderAgentList(container, agents, textarea, query) {
-if (!agents.length) {
-  const message = CL.agentBookLastError || '暂无在线 Agent';
-  container.innerHTML = '';
-  container.appendChild(_text('div', 'openagent-loading', message));
-  _currentAgents = [];
-  _currentTextarea = textarea;
-  return;
+  if (!agents.length) {
+      var emptyMessage = _getEmptyMessage(query);
+      _currentAgents = [];
+      _currentTextarea = textarea;
+      closePanel();
+      _showEmptyToast(query, emptyMessage);
+      return;
 }
 
 console.log('[openagent] renderAgentList:', agents.length, 'agents, textarea:', !!textarea);
@@ -324,6 +477,19 @@ _highlightItem(0);
  * 对齐 openagent-frontend NewChatPanel L92-105：
  * 找到最后一个 @，替换其后内容为 @agentName
  */
+function _pickMentionAgentDescription(agent) {
+  if (!agent || typeof agent !== 'object') return '';
+  if (CL && typeof CL.pickAgentIdentityDescription === 'function') {
+    return CL.pickAgentIdentityDescription(agent);
+  }
+  const keys = ['agent_bio', 'agentBio', 'bio', 'description', 'desc', 'agent_description', 'agentDescription', 'MOM', 'mom'];
+  for (let i = 0; i < keys.length; i++) {
+    const value = agent[keys[i]];
+    if (typeof value === 'string' && value.trim()) return value.trim();
+  }
+  return '';
+}
+
 function insertMention(textarea, agentName, agentData) {
 // 重新查找 textarea（Lit 可能重新渲染导致引用失效）
 const liveTextarea = document.querySelector(
@@ -343,9 +509,11 @@ liveTextarea.focus();
 const agentId = agentData?.agent_id || agentData?.agentId || agentData?.id || agentData?.tag ||
   agentData?.user_id || agentData?.userId || agentData?.identifier || agentData?.tim_user_id || agentData?.timUserId || '';
 const agentAvatar = agentData?.avatar || agentData?.avatar_url || agentData?.avatarUrl || agentData?.image || agentData?.logo || agentData?.photo || null;
+const agentBio = _pickMentionAgentDescription(agentData);
 console.log('[cl-diag][mention-select]', {
   agentName,
   resolvedAgentId: agentId || null,
+  hasAgentBio: !!agentBio,
   rawKeys: Object.keys(agentData || {}),
   rawAgent: agentData,
 });
@@ -354,9 +522,14 @@ if (!agentId) {
   console.warn('[openagent] mention skipped: missing agent identifier for', agentName, agentData);
   return;
 }
-CL.pendingMention = { agent_id: agentId, name: agentName, avatar: agentAvatar };
+CL.pendingMention = { agent_id: agentId, name: agentName, avatar: agentAvatar, agent_bio: agentBio };
 if (CL && typeof CL.storeAgentIdentity === 'function') {
-  CL.storeAgentIdentity({ agent_id: agentId, name: agentName, avatar: agentAvatar });
+  CL.storeAgentIdentity(Object.assign({}, agentData || {}, {
+    agent_id: agentId,
+    name: agentName,
+    avatar: agentAvatar,
+    agent_bio: agentBio,
+  }));
 }
 console.log('[openagent] mention stored:', CL.pendingMention);
 

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

@@ -44,17 +44,23 @@ function AgentCard(agent, opts = {}) {
     info.appendChild(_text('div', 'agent-card__name', agent.name || ''));
     info.appendChild(_text('div', 'agent-card__bio', agent.bio || '暂无简介'));
     const stats = _el('div', 'agent-card__stats');
-    stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--claws', `${formatNumber(agent.claws)}☆`));
+    // 星标 + 数字 紧密组合（Figma gap 1.5px）
+    const statGroup = _el('span', 'agent-card__stat-group');
+    var starIcon = _el('span', 'agent-card__stat-icon');
+    starIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M5.94531 0.525391C6.08953 0.525551 6.20334 0.604267 6.25098 0.701172L7.59668 3.43262L7.71875 3.68066L7.99121 3.7207L11.0859 4.16992V4.1709H11.0869C11.1865 4.18536 11.2656 4.2375 11.3135 4.30371L11.3506 4.37402C11.3752 4.44422 11.3691 4.52183 11.3301 4.58984L11.2803 4.6543L9.01172 6.86914L8.81543 7.06152L8.86133 7.33301L9.3877 10.4043C9.40428 10.501 9.36472 10.6085 9.26172 10.6797C9.20158 10.7197 9.13 10.7412 9.05762 10.7412C9.00017 10.7412 8.94132 10.7275 8.8877 10.7002L6.18945 9.2793L5.94531 9.15039L5.7002 9.2793L3.00684 10.6982C2.95198 10.7266 2.89097 10.7412 2.83203 10.7412C2.77821 10.7412 2.72454 10.7298 2.67578 10.707L2.62891 10.6797C2.52556 10.6083 2.48649 10.5012 2.50293 10.4053V10.4043L3.0293 7.33301L3.0752 7.06152L2.87793 6.86914L0.611328 4.6543L0.610352 4.65332L0.560547 4.58984C0.521516 4.522 0.515166 4.44401 0.540039 4.37305L0.539062 4.37207C0.573747 4.27569 0.671018 4.18999 0.803711 4.1709L0.804688 4.16992L3.89844 3.7207L4.17188 3.68066L4.29395 3.43262L5.63867 0.702148C5.68788 0.603278 5.80274 0.525391 5.94531 0.525391Z" stroke="#666666" stroke-width="1.05"/></svg>';
+    statGroup.appendChild(starIcon);
+    statGroup.appendChild(_text('span', 'agent-card__stat agent-card__stat--claws', formatNumber(agent.claws)));
+    stats.appendChild(statGroup);
     if (agent.owner) {
-      stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--owner', ` · owner${agent.owner}`));
+      stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--owner', ` · ${agent.owner}`));
     }
     info.appendChild(stats);
     contentGroup.appendChild(info);
 
     row1.appendChild(contentGroup);
 
-    // @Try 按钮
-    const defaultLabel = 'Try';
+    // @召唤 按钮
+    const defaultLabel = '@召唤';
     const btn = _text('button', 'agent-card__action', actionLabel || defaultLabel);
     if (onAction) {
       btn.addEventListener('click', (e) => {
@@ -90,14 +96,19 @@ function AgentCard(agent, opts = {}) {
     body.appendChild(_text('div', 'agent-card__bio', agent.bio || '暂无简介'));
 
     const stats = _el('div', 'agent-card__stats');
-    stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--claws', `${formatNumber(agent.claws)}☆`));
+    const statGroup = _el('span', 'agent-card__stat-group');
+    var starIcon = _el('span', 'agent-card__stat-icon');
+    starIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M5.94531 0.525391C6.08953 0.525551 6.20334 0.604267 6.25098 0.701172L7.59668 3.43262L7.71875 3.68066L7.99121 3.7207L11.0859 4.16992V4.1709H11.0869C11.1865 4.18536 11.2656 4.2375 11.3135 4.30371L11.3506 4.37402C11.3752 4.44422 11.3691 4.52183 11.3301 4.58984L11.2803 4.6543L9.01172 6.86914L8.81543 7.06152L8.86133 7.33301L9.3877 10.4043C9.40428 10.501 9.36472 10.6085 9.26172 10.6797C9.20158 10.7197 9.13 10.7412 9.05762 10.7412C9.00017 10.7412 8.94132 10.7275 8.8877 10.7002L6.18945 9.2793L5.94531 9.15039L5.7002 9.2793L3.00684 10.6982C2.95198 10.7266 2.89097 10.7412 2.83203 10.7412C2.77821 10.7412 2.72454 10.7298 2.67578 10.707L2.62891 10.6797C2.52556 10.6083 2.48649 10.5012 2.50293 10.4053V10.4043L3.0293 7.33301L3.0752 7.06152L2.87793 6.86914L0.611328 4.6543L0.610352 4.65332L0.560547 4.58984C0.521516 4.522 0.515166 4.44401 0.540039 4.37305L0.539062 4.37207C0.573747 4.27569 0.671018 4.18999 0.803711 4.1709L0.804688 4.16992L3.89844 3.7207L4.17188 3.68066L4.29395 3.43262L5.63867 0.702148C5.68788 0.603278 5.80274 0.525391 5.94531 0.525391Z" stroke="#666666" stroke-width="1.05"/></svg>';
+    statGroup.appendChild(starIcon);
+    statGroup.appendChild(_text('span', 'agent-card__stat agent-card__stat--claws', formatNumber(agent.claws)));
+    stats.appendChild(statGroup);
     if (agent.owner) {
-      stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--owner', ` · owner${agent.owner}`));
+      stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--owner', ` · ${agent.owner}`));
     }
     body.appendChild(stats);
     card.appendChild(body);
 
-    const btn = _text('button', 'agent-card__action', actionLabel || 'Try');
+    const btn = _text('button', 'agent-card__action', actionLabel || '@召唤');
     if (onAction) {
       btn.addEventListener('click', (e) => {
         e.stopPropagation();
@@ -134,14 +145,19 @@ function AgentCard(agent, opts = {}) {
     body.appendChild(_text('div', 'agent-card__bio', agent.bio || '暂无简介'));
 
     const stats = _el('div', 'agent-card__stats');
-    stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--claws', `${formatNumber(agent.claws)}☆`));
+    const statGroup = _el('span', 'agent-card__stat-group');
+    var starIcon = _el('span', 'agent-card__stat-icon');
+    starIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M5.94531 0.525391C6.08953 0.525551 6.20334 0.604267 6.25098 0.701172L7.59668 3.43262L7.71875 3.68066L7.99121 3.7207L11.0859 4.16992V4.1709H11.0869C11.1865 4.18536 11.2656 4.2375 11.3135 4.30371L11.3506 4.37402C11.3752 4.44422 11.3691 4.52183 11.3301 4.58984L11.2803 4.6543L9.01172 6.86914L8.81543 7.06152L8.86133 7.33301L9.3877 10.4043C9.40428 10.501 9.36472 10.6085 9.26172 10.6797C9.20158 10.7197 9.13 10.7412 9.05762 10.7412C9.00017 10.7412 8.94132 10.7275 8.8877 10.7002L6.18945 9.2793L5.94531 9.15039L5.7002 9.2793L3.00684 10.6982C2.95198 10.7266 2.89097 10.7412 2.83203 10.7412C2.77821 10.7412 2.72454 10.7298 2.67578 10.707L2.62891 10.6797C2.52556 10.6083 2.48649 10.5012 2.50293 10.4053V10.4043L3.0293 7.33301L3.0752 7.06152L2.87793 6.86914L0.611328 4.6543L0.610352 4.65332L0.560547 4.58984C0.521516 4.522 0.515166 4.44401 0.540039 4.37305L0.539062 4.37207C0.573747 4.27569 0.671018 4.18999 0.803711 4.1709L0.804688 4.16992L3.89844 3.7207L4.17188 3.68066L4.29395 3.43262L5.63867 0.702148C5.68788 0.603278 5.80274 0.525391 5.94531 0.525391Z" stroke="#666666" stroke-width="1.05"/></svg>';
+    statGroup.appendChild(starIcon);
+    statGroup.appendChild(_text('span', 'agent-card__stat agent-card__stat--claws', formatNumber(agent.claws)));
+    stats.appendChild(statGroup);
     if (agent.owner) {
-      stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--owner', ` · owner${agent.owner}`));
+      stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--owner', ` · ${agent.owner}`));
     }
     body.appendChild(stats);
     card.appendChild(body);
 
-    const btn = _text('button', 'agent-card__action', actionLabel || '@ Chat');
+    const btn = _text('button', 'agent-card__action', actionLabel || '@召唤');
     if (onAction) {
       btn.addEventListener('click', (e) => { e.stopPropagation(); onAction(agent); });
       card.addEventListener('click', (e) => { e.stopPropagation(); onAction(agent); });

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

@@ -619,7 +619,7 @@ function avatarUrl(agent) {
     if (agent.avatar.startsWith('http')) return agent.avatar;
     return CL.AUTH_API + '/' + agent.avatar;
   }
-  return `https://ui-avatars.com/api/?name=${encodeURIComponent(agent.name)}&background=random&size=64`;
+  return './icon.png';
 }
 
 const ESC_MAP = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };

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) {
@@ -220,6 +235,8 @@ function tryInject() {
     const pos = ta.selectionStart;
     // 如果光标前已经是 @，不重复插入
     if (pos > 0 && val[pos - 1] === '@') {
+      // 按钮主动触发 → 清除 dismissed 状态，确保弹窗能打开
+      if (typeof resetMention === 'function') resetMention();
       _handleStateChange(ta);
       return;
     }
@@ -278,9 +295,140 @@ function tryInject() {
 
   console.log('[openagent] ✅ Agent Book UI injected (v3 hook-driven)');
 
+  // ── 提示栏（Figma 141:3293）：页面加载即显示 ──
+  _injectHintBar(inputContainer || textarea.parentElement, toolbarRow);
+
   return true;
 }
 
+/** 注入提示栏到输入区域上方 */
+function _injectHintBar(anchorEl, toolbarEl) {
+  if (!anchorEl || document.querySelector('.openagent-hint-bar')) return;
+
+  const hintBar = document.createElement('div');
+  hintBar.className = 'openagent-hint-bar';
+  hintBar.innerHTML = '' +
+    '<div class="openagent-hint-bar__content">' +
+      '<div class="openagent-hint-bar__icon">' +
+        '<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27" fill="none">' +
+          '<rect width="27" height="27" rx="6" fill="url(#paint0_linear_141_3277)" fill-opacity="0.1"/>' +
+          '<path d="M13.5 6.75098C16.8137 6.75098 19.5 9.43727 19.5 12.751C19.5 14.3288 18.8894 15.7629 17.8936 16.834L20.7803 19.7207C21.0732 20.0136 21.0732 20.4884 20.7803 20.7812C20.4874 21.0741 20.0126 21.0741 19.7197 20.7812L16.7383 17.7998C15.8038 18.4004 14.6933 18.751 13.5 18.751C10.1863 18.751 7.5 16.0647 7.5 12.751C7.5 9.43727 10.1863 6.75098 13.5 6.75098ZM13.5 8.25098C11.0147 8.25098 9 10.2657 9 12.751C9 15.2363 11.0147 17.251 13.5 17.251C15.9853 17.251 18 15.2363 18 12.751C18 10.2657 15.9853 8.25098 13.5 8.25098Z" fill="url(#paint1_linear_141_3277)"/>' +
+          '<defs>' +
+            '<linearGradient id="paint0_linear_141_3277" x1="0" y1="13.5" x2="27" y2="13.5" gradientUnits="userSpaceOnUse">' +
+              '<stop stop-color="#8274FF"/>' +
+              '<stop offset="1" stop-color="#3890FF"/>' +
+            '</linearGradient>' +
+            '<linearGradient id="paint1_linear_141_3277" x1="7.5" y1="13.8759" x2="20.9999" y2="13.8759" gradientUnits="userSpaceOnUse">' +
+              '<stop stop-color="#8274FF"/>' +
+              '<stop offset="1" stop-color="#3890FF"/>' +
+            '</linearGradient>' +
+          '</defs>' +
+        '</svg>' +
+      '</div>' +
+      '<span class="openagent-hint-bar__text">输入你的需求，调配远端Agent为你解决</span>' +
+    '</div>' +
+    '<button class="openagent-hint-bar__close">' +
+      '<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">' +
+        '<path d="M5.625 5.625L15.375 15.375" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>' +
+        '<path d="M15.375 5.625L5.625 15.375" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>' +
+      '</svg>' +
+    '</button>';
+
+  hintBar.querySelector('.openagent-hint-bar__close').addEventListener('click', () => {
+    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'] });
+  }
+}
+
 // ════════════════════════════════════════════════════════════════
 // ── window.__clMention — OC 注入钩子的桥接对象 ──
 // ════════════════════════════════════════════════════════════════