openclaw-openagent 1.0.9 → 1.0.11

package/src/plugin-ui/assets/openagent-override.js

@@ -2,7 +2,7 @@
  * OpenAgent UI Override — Auto-generated, do not edit directly!
  *
  * Source: src/plugin-ui/modules/
- * Built:  2026-06-29T06:32:31.586Z
+ * Built:  2026-07-01T12:59:59.814Z
  *
  * To modify, edit the source modules and run:
  *   npm run build:override
@@ -48,6 +48,9 @@ const CL = {
   handleDelegateWsEvent: function(msg) {},
   processCustomCards: function(bubble) {},
 
+  // ── Host 版本（构建时注入，fallback 运行时检测）──
+  hostVersion: '__OPENCLAW_HOST_VERSION__',
+
   // ── 配置 ──
   OPENAGENT_API: 'https://api.openagent.club',
   AUTH_API: '/plugins/openagent',  // Proxied via Gateway registerHttpRoute (see src/proxy/auth-proxy.ts)
@@ -56,6 +59,57 @@ const CL = {
   CACHE_TTL: 30000,
 };
 
+// ── 版本解析与比较（供 execution-card V2 分支使用）──
+
+function _clParseHostVersion(v) {
+  if (!v) return [0, 0, 0];
+  var base = String(v).split('-')[0];
+  var parts = base.split('.');
+  if (parts.length !== 3) return [0, 0, 0];
+  var y = parseInt(parts[0], 10);
+  var m = parseInt(parts[1], 10);
+  var d = parseInt(parts[2], 10);
+  if (isNaN(y) || isNaN(m) || isNaN(d)) return [0, 0, 0];
+  return [y, m, d];
+}
+
+function _clIsHostVersionGte(minVer) {
+  var cur = _clParseHostVersion(CL.hostVersion || '');
+  var min = _clParseHostVersion(minVer);
+  for (var i = 0; i < 3; i++) {
+    if (cur[i] > min[i]) return true;
+    if (cur[i] < min[i]) return false;
+  }
+  return true;
+}
+
+// ─ 运行时 fallback：当构建时未注入版本，通过 CSS/DOM 特征检测 ──
+// v5.x (2026.5+) 有 data-theme 属性和 --glass-surface CSS 变量
+// v4.x (2026.3-4.x) 有 data-theme-mode 属性和 --vscode-* CSS 变量
+if (CL.hostVersion === '__OPENCLAW_HOST_VERSION__' || !CL.hostVersion) {
+  try {
+    if (document.documentElement.hasAttribute('data-theme')) {
+      // v5.x (2026.5+) — 有 data-theme 属性
+      CL.hostVersion = '2026.6.9';
+    } else if (document.documentElement.hasAttribute('data-theme-mode')) {
+      // v4.x — 有 data-theme-mode 属性
+      CL.hostVersion = '2026.4.0';
+    } else {
+      var cs = getComputedStyle(document.documentElement);
+      if (cs.getPropertyValue('--glass-surface').trim()) {
+        CL.hostVersion = '2026.6.9';
+      } else if (cs.getPropertyValue('--vscode-editor-background').trim()) {
+        CL.hostVersion = '2026.4.0';
+      } else {
+        CL.hostVersion = '2026.3.0';
+      }
+    }
+    console.log('[cl-version] detected via DOM/CSS features: ' + CL.hostVersion);
+  } catch (e) {
+    CL.hostVersion = '2026.3.0';
+  }
+}
+
 // 暴露到 window 供控制台调试/测试
 window.__CL = CL;
 
@@ -1405,7 +1459,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;' };
@@ -1478,17 +1532,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) => {
@@ -1524,14 +1584,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();
@@ -1568,14 +1633,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); });
@@ -1700,80 +1770,39 @@ function injectStyles() {
       border-color: #3b82f6;
     }
 
-    /* ── @ Agent Book 按钮（Figma 1:1117 物理级复刻 — Mesh Gradient） ── */
+    /* ── @ Agent Book 按钮（Figma 129:955 Frame 72552 — 紫色渐变） ── */
     .openagent-at-btn {
       position: relative;
-      overflow: hidden; /* Figma clipsContent: true */
+      overflow: hidden;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 4px;
-      height: 26px;
-      padding: 0 16px;
-      border-radius: 100px;
+      height: 27px;
+      padding: 0 12px;
+      border-radius: 150px;
       border: none;
-      background: #6ECCFF; /* Figma Frame 72552 底色 */
-      box-shadow: inset 0 0 8.5px 0 #96ECFF; /* Figma INNER_SHADOW */
+      background: linear-gradient(90deg, #5c4aff 0%, #8274ff 100%);
       color: #fff;
-      font-size: 13px;
-      font-weight: 600;
+      font-size: 12px;
+      font-weight: 500;
       cursor: pointer;
       transition: all 0.2s ease;
-      line-height: 26px;
+      line-height: 27px;
       margin-left: 6px;
       white-space: nowrap;
       flex-shrink: 0;
       letter-spacing: 0.2px;
-      /* 建立层叠上下文，让伪元素在底层 */
-      z-index: 1;
-      isolation: isolate;
-    }
-
-    /* Figma 外层 Ellipse 12873：蓝色椭圆，偏左 */
-    .openagent-at-btn::before {
-      content: '';
-      position: absolute;
-      left: -13%;
-      top: -98%;
-      width: 50%;
-      height: 304%;
-      background: #7A94FF;
-      filter: blur(23px); /* Figma LAYER_BLUR: 23.2px */
-      transform: rotate(174deg);
-      z-index: -1;
-      pointer-events: none;
-    }
-
-    /* Figma 外层 Ellipse 12872：黄绿色椭圆，偏右 */
-    .openagent-at-btn::after {
-      content: '';
-      position: absolute;
-      left: 70%;
-      top: -49%;
-      width: 54%;
-      height: 145%;
-      background: #A1FF2E;
-      filter: blur(30.5px); /* Figma LAYER_BLUR: 30.5px */
-      transform: rotate(27deg);
-      z-index: -1;
-      pointer-events: none;
-    }
-
-    /* 确保文字始终在最高层 */
-    .openagent-at-btn .at-sym,
-    .openagent-at-btn span {
-      position: relative;
-      z-index: 2;
+      font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     }
 
     .openagent-at-btn:hover {
-      filter: brightness(1.08);
       transform: translateY(-1px);
-      box-shadow: inset 0 0 8.5px 0 #96ECFF, 0 2px 8px rgba(110, 204, 255, 0.4);
+      box-shadow: inset 0 0 6px 1px rgba(255, 255, 255, 0.65);
     }
     .openagent-at-btn .at-sym {
-      font-size: 14px;
-      font-weight: 700;
+      font-size: 11.6px;
+      font-weight: 500;
       color: #fff;
     }
 
@@ -1796,8 +1825,8 @@ function injectStyles() {
       position: fixed;
       max-height: none;
       background: var(--oa-panel-bg, #fff);
-      border: 1.2px solid var(--oa-border, rgba(47, 47, 51, 0.12));
-      border-radius: 18px;
+      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;
@@ -1842,9 +1871,8 @@ function injectStyles() {
       flex-shrink: 0;
     }
     .openagent-panel-close {
-      background: var(--oa-card-bg, rgba(249, 249, 249, 1));
+      background: transparent;
       border: none;
-      color: rgba(47, 47, 51, 0.6);
       cursor: pointer;
       width: 21px;
       height: 21px;
@@ -1860,7 +1888,6 @@ function injectStyles() {
     }
     .openagent-panel-close:hover {
       background: #eee;
-      color: rgba(47, 47, 51, 1);
     }
 
     /* ── 分隔线（Figma: 0.2px, opacity 0.16） ── */
@@ -1871,6 +1898,174 @@ function injectStyles() {
       margin: 0;
     }
 
+    /* ── 提示栏（Figma 141:3293，页面加载即显示） ── */
+    .openagent-hint-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 12px;
+      margin-bottom: 12px;
+      background: #fff;
+      border: 1.2px solid rgba(47, 47, 51, 0.1);
+      border-radius: var(--radius-lg, 18px);
+      gap: 12px;
+      width: 100%;
+      box-sizing: border-box;
+      margin:0 auto;
+      margin-bottom: 12px;
+    }
+    .openagent-hint-bar__content {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      flex: 1;
+      min-width: 0;
+    }
+    .openagent-hint-bar__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 27px;
+      height: 27px;
+      border-radius: 6px;
+      background: linear-gradient(135deg, rgba(130,116,255,0.1) 0%, rgba(56,144,255,0.1) 100%);
+      flex-shrink: 0;
+    }
+    .openagent-hint-bar__text {
+      font-family: "PingFang SC", sans-serif;
+      font-size: 15px;
+      font-weight: 400;
+      color: rgba(51, 51, 51, 0.8);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .openagent-hint-bar__close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 21px;
+      height: 21px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      flex-shrink: 0;
+      border-radius: 4px;
+      transition: all 0.1s;
+    }
+    .openagent-hint-bar__close:hover {
+      background: #eee;
+    }
+
+    /* 暗色主题 */
+    [data-theme-mode="dark"] .openagent-hint-bar,
+    [data-theme="dark"] .openagent-hint-bar {
+      background: #1c1c1c;
+      border-color: rgba(255,255,255,0.1);
+    }
+    [data-theme-mode="dark"] .openagent-hint-bar__text,
+    [data-theme="dark"] .openagent-hint-bar__text {
+      color: rgba(224, 224, 224, 0.8);
+    }
+    [data-theme-mode="dark"] .openagent-hint-bar__close,
+    [data-theme="dark"] .openagent-hint-bar__close {
+    }
+    [data-theme-mode="dark"] .openagent-hint-bar__close:hover,
+    [data-theme="dark"] .openagent-hint-bar__close:hover {
+      background: #333;
+    }
+
+    /* ── 空状态独立浮层（Figma 144:3444） ── */
+    .openagent-empty-toast {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      padding: 18px;
+      background: #fff;
+      border: 1.2px solid rgba(47, 47, 51, 0.1);
+      border-radius: 18px;
+      box-sizing: border-box;
+      animation: openagent-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+      box-shadow: 0 -4px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
+    }
+    [data-theme-mode="dark"] .openagent-empty-toast,
+    [data-theme="dark"] .openagent-empty-toast {
+      background: #1c1c1c; border-color: rgba(255,255,255,0.1);
+      box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
+    }
+    [data-theme-mode="dark"] .openagent-empty-toast .openagent-empty-state__text,
+    [data-theme="dark"] .openagent-empty-toast .openagent-empty-state__text {
+      color: rgba(224, 224, 224, 0.8);
+    }
+    [data-theme-mode="dark"] .openagent-empty-toast .openagent-empty-state__close,
+    [data-theme="dark"] .openagent-empty-toast .openagent-empty-state__close {
+    }
+
+    /* ── 空状态（Figma 144:3444）— 无匹配结果 ── */
+    .openagent-empty-state {
+      padding: 18px;
+      background: #fff;
+      border: 1.2px solid rgba(47, 47, 51, 0.1);
+      border-radius: 18px;
+    }
+    .openagent-empty-state__row {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 9px;
+    }
+    .openagent-empty-state__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 27px;
+      height: 27px;
+      border-radius: 6px;
+      background: linear-gradient(135deg, rgba(92,74,255,0.1) 0%, rgba(130,116,255,0.1) 100%);
+      flex-shrink: 0;
+    }
+    .openagent-empty-state__text {
+      flex: 1;
+      font-family: "PingFang SC", sans-serif;
+      font-size: 15px;
+      font-weight: 400;
+      color: rgba(51, 51, 51, 0.8);
+      line-height: 1.5;
+    }
+    .openagent-empty-state__close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 21px;
+      height: 21px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      flex-shrink: 0;
+      border-radius: 4px;
+    }
+    .openagent-empty-state__close:hover {
+      background: #eee;
+    }
+    [data-theme-mode="dark"] .openagent-empty-state,
+    [data-theme="dark"] .openagent-empty-state {
+      background: #1c1c1c;
+      border-color: rgba(255,255,255,0.1);
+    }
+    [data-theme-mode="dark"] .openagent-empty-state__text,
+    [data-theme="dark"] .openagent-empty-state__text {
+      color: rgba(224, 224, 224, 0.8);
+    }
+    [data-theme-mode="dark"] .openagent-empty-state__close,
+    [data-theme="dark"] .openagent-empty-state__close {
+    }
+    [data-theme-mode="dark"] .openagent-empty-state__close:hover,
+    [data-theme="dark"] .openagent-empty-state__close:hover {
+      background: #333;
+    }
+
     /* ── Agent 列表（section stack） ── */
     .openagent-agent-list {
       overflow-y: auto;
@@ -1926,9 +2121,9 @@ function injectStyles() {
 
     /* ── 分组标题 ── */
     .openagent-section-heading {
-      font-size: 14px;
+      font-size: 16px;
       font-weight: 400;
-      line-height: 14px;
+      line-height: 16px;
       color: rgba(47, 47, 51, 0.80);
       padding: 0 12px 0 12px;
       letter-spacing: 0;
@@ -1999,6 +2194,23 @@ function injectStyles() {
       gap: 0;
       flex-wrap: wrap;
     }
+    /* 星标+数字 紧密组合（Figma gap 1.5px） */
+    .agent-card__stat-group {
+      display: flex;
+      align-items: center;
+      gap: 1.5px;
+    }
+    .agent-card__stat-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 12px;
+      height: 12px;
+      font-size: 14px;
+      line-height: 1;
+      color: #666;
+      flex-shrink: 0;
+    }
     .agent-card__stat {
       font-family: "PingFang SC", sans-serif;
       font-size: 13.5px;
@@ -2024,96 +2236,80 @@ function injectStyles() {
       white-space: nowrap;
     }
 
-    /* ── mode: mention（Figma Agent item → avart 实例） ── */
+    /* ── mode: mention（Figma Agent 卡片 142:3392） ── */
     .agent-card--mention {
       flex-direction: row;
-      align-items: stretch;
-      gap: 0;
-      padding: 0;
-      border-radius: 8px;
-      border: none;
-      background: transparent;
-      min-height: 88px;
+      align-items: center;
+      gap: 10px;
+      padding: 15px;
+      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);
     }
-    /* 键盘导航高亮（§1.5）— 对标 TIM index.vue:32 'selected' class */
-    .agent-card--mention.openagent-card-selected {
-      background: rgba(99, 102, 241, 0.06);
-      outline: 2px solid rgba(99, 102, 241, 0.3);
-      outline-offset: -2px;
-    }
-    [data-theme-mode="dark"] .agent-card--mention.openagent-card-selected {
-      background: rgba(99, 102, 241, 0.12);
-      outline-color: rgba(99, 102, 241, 0.4);
-    }
-
-    /* avart 外壳: Figma px 12, centered */
+    /* avart 外壳简化 — 不再需要 */
     .agent-card--mention .agent-card__avart {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      gap: 0;
-      padding: 0 10px;
-      flex: 1;
+      display: contents;
+      padding: 0;
+      flex: none;
       min-width: 0;
-      box-sizing: border-box;
     }
 
-    /* 第一行: row, gap:24 (内容组 + @Try) */
+    /* 第一行: 内容区 + 按钮 */
     .agent-card--mention .agent-card__row1 {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 16px;
-      width: 100%;
+      display: contents;
+      gap: 0;
+      width: auto;
       min-width: 0;
     }
 
-    /* 内容组: row, gap:18 (头像 + 信息列) */
+    /* 内容组: 头像 + 信息列 */
     .agent-card--mention .agent-card__content-group {
       display: flex;
       flex-direction: row;
-      align-items: flex-start;
-      gap: 12px;
+      align-items: center;
+      gap: 10px;
       flex: 1;
       min-width: 0;
     }
 
-    /* 头像 */
+    /* 头像: 50×50 */
     .agent-card--mention .agent-card__avatar {
-      width: 48px;
-      height: 48px;
+      width: 50px;
+      height: 50px;
       border-radius: 50%;
       border: none;
       flex-shrink: 0;
       margin-top: 0;
     }
 
-    /* 信息列: name / bio / stats */
+    /* 信息列 */
     .agent-card--mention .agent-card__info {
       display: flex;
       flex-direction: column;
-      gap: 4px;
-      padding: 3px 0;
+      gap: 6px;
+      padding: 0;
       flex: 1;
       min-width: 0;
     }
 
     .agent-card--mention .agent-card__name {
-      font-size: 12px;
+      font-size: 15px;
       font-weight: 600;
-      line-height: 14px;
-      color: rgba(47, 47, 51, 1);
+      line-height: 1;
+      color: #333;
+      width:200px;
     }
     .agent-card--mention .agent-card__bio {
-      font-size: 10px;
+      font-size: 14px;
       font-weight: 400;
-      line-height: 14px;
-      color: rgba(47, 47, 51, 0.40);
-      text-align: justify;
+      line-height: 1.5;
+      color: rgba(47, 47, 51, 0.80);
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
@@ -2122,37 +2318,31 @@ function injectStyles() {
       margin-top: 0;
     }
 
-    /* @Try 按钮 */
+    /* @召唤 按钮 */
     .agent-card--mention .agent-card__action {
-      width: 64px;
-      height: 30px;
-      padding: 0 14px;
-      border-radius: 10px;
-      background: #EFF0F2;
-      border: 1.286px solid rgba(47, 47, 51, 0.04);
-      color: rgba(47, 47, 51, 1);
+      height: 36px;
+      padding: 0 18px;
+      border-radius: 23px;
+      background: transparent;
+      border: 0.5px solid #dbdbdb;
+      color: #333;
       font-family: "PingFang SC", sans-serif;
-      font-size: 12px;
+      font-size: 16px;
       font-weight: 500;
-      line-height: 12px;
+      line-height: 15.43px;
       text-transform: capitalize;
       flex-shrink: 0;
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      width: auto;
     }
-    .agent-card--mention .agent-card__action::before { content: '@'; font-weight: 600; }
+    .agent-card--mention .agent-card__action::before { content: none; }
     .agent-card--mention .agent-card__action:hover {
-      background: #e2e3e5;
+      background: rgba(0, 0, 0, 0.04);
     }
 
-    /* Legacy row2 kept for older generated DOM, but current mention card keeps stats in info. */
-    .agent-card--mention .agent-card__row2 {
-      display: none;
-      flex-direction: row;
-      align-items: center;
-      padding-left: 60px;
-    }
+    /* 统计行 */
     .agent-card--mention .agent-card__stats {
       display: flex;
       align-items: center;
@@ -2160,16 +2350,21 @@ function injectStyles() {
       margin-top: 0;
     }
     .agent-card--mention .agent-card__stat--claws {
-      color: rgba(240, 152, 0, 1);
-      font-size: 10px;
-      line-height: 12px;
-      letter-spacing: 1px;
+      color: #666;
+      font-size: 14px;
+      line-height: 1;
+      letter-spacing: 1.5px;
     }
     .agent-card--mention .agent-card__stat--owner {
-      color: rgba(47, 47, 51, 1);
-      font-size: 10px;
-      line-height: 12px;
-      letter-spacing: 1px;
+      color: #666;
+      font-size: 14px;
+      line-height: 1;
+      letter-spacing: 1.5px;
+    }
+
+    /* row2 (legacy compat) */
+    .agent-card--mention .agent-card__row2 {
+      display: none;
     }
 
     /* ── mode: search（有输入搜索结果，沿用旧式单列行） ── */
@@ -2179,18 +2374,14 @@ function injectStyles() {
       width: 100%;
       min-height: 64px;
       padding: 10px 12px;
-      border-radius: 10px;
+      border-radius: 20px;
       background: transparent;
+      border: 0.5px solid transparent;
       box-sizing: border-box;
     }
     .agent-card--search:hover {
       background: rgba(0, 0, 0, 0.02);
     }
-    .agent-card--search.openagent-card-selected {
-      background: rgba(99, 102, 241, 0.06);
-      outline: 2px solid rgba(99, 102, 241, 0.3);
-      outline-offset: -2px;
-    }
     .agent-card--search .agent-card__avatar {
       width: 40px;
       height: 40px;
@@ -2204,48 +2395,50 @@ function injectStyles() {
       min-width: 0;
     }
     .agent-card--search .agent-card__name {
-      font-size: 13px;
+      font-size: 15px;
       line-height: 16px;
       font-weight: 600;
-      color: rgba(47, 47, 51, 1);
+      color: #333;
     }
     .agent-card--search .agent-card__bio {
-      font-size: 11px;
-      line-height: 15px;
-      color: rgba(47, 47, 51, 0.45);
+      font-size: 14px;
+      line-height: 1.5;
+      color: rgba(47, 47, 51, 0.80);
       -webkit-line-clamp: 1;
     }
     .agent-card--search .agent-card__stats {
       margin-top: 0;
     }
     .agent-card--search .agent-card__stat--claws {
-      font-size: 11px;
-      line-height: 13px;
-      color: rgba(240, 152, 0, 1);
+      font-size: 14px;
+      line-height: 1;
+      color: #666;
+      letter-spacing: 1.5px;
     }
     .agent-card--search .agent-card__stat--owner {
-      font-size: 11px;
-      line-height: 13px;
-      color: rgba(47, 47, 51, 0.65);
+      font-size: 14px;
+      line-height: 1;
+      color: #666;
+      letter-spacing: 1.5px;
     }
     .agent-card--search .agent-card__action {
-      width: 60px;
-      height: 28px;
-      padding: 0 12px;
-      border-radius: 10px;
-      background: #EFF0F2;
-      border: 1px solid rgba(47, 47, 51, 0.04);
-      color: rgba(47, 47, 51, 1);
+      height: 36px;
+      padding: 0 18px;
+      border-radius: 23px;
+      background: transparent;
+      border: 0.5px solid #dbdbdb;
+      color: #333;
       font-family: "PingFang SC", sans-serif;
-      font-size: 12px;
-      line-height: 12px;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 15.43px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
     }
-    .agent-card--search .agent-card__action::before { content: '@'; font-weight: 600; }
+    .agent-card--search .agent-card__action::before { content: none; }
     .agent-card--search .agent-card__action:hover {
-      background: #e2e3e5;
+      background: rgba(0, 0, 0, 0.04);
     }
 
     @media (max-width: 980px) {
@@ -2313,9 +2506,9 @@ function injectStyles() {
     [data-theme-mode="dark"] .openagent-panel-title,
     [data-theme="dark"] .openagent-panel-title { color: rgba(224, 224, 224, 0.8); }
     [data-theme-mode="dark"] .openagent-panel-close,
-    [data-theme="dark"] .openagent-panel-close { background: #2a2a2a; color: #888; }
+    [data-theme="dark"] .openagent-panel-close { background: #2a2a2a; }
     [data-theme-mode="dark"] .openagent-panel-close:hover,
-    [data-theme="dark"] .openagent-panel-close:hover { background: #333; color: #ccc; }
+    [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,
@@ -2331,28 +2524,39 @@ function injectStyles() {
     [data-theme="dark"] .agent-card__stat { color: #64748b; }
 
     [data-theme-mode="dark"] .agent-card--mention,
-    [data-theme="dark"] .agent-card--mention { background: transparent; }
+    [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-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,
+    [data-theme="dark"] .agent-card--mention .agent-card__bio { color: rgba(224,224,224,0.7); }
+    [data-theme-mode="dark"] .agent-card--mention .agent-card__stat--claws,
+    [data-theme="dark"] .agent-card--mention .agent-card__stat--claws { color: #aaa; }
+    [data-theme-mode="dark"] .agent-card--mention .agent-card__stat--owner,
+    [data-theme="dark"] .agent-card--mention .agent-card__stat--owner { color: #aaa; }
     [data-theme-mode="dark"] .agent-card--mention .agent-card__action,
     [data-theme="dark"] .agent-card--mention .agent-card__action {
-      background: #333; border-color: #555; color: #ddd;
+      background: transparent; border-color: rgba(255,255,255,0.2); color: #ddd;
     }
     [data-theme-mode="dark"] .agent-card--mention .agent-card__action:hover,
-    [data-theme="dark"] .agent-card--mention .agent-card__action:hover { background: #444; }
+    [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.openagent-card-selected,
-    [data-theme="dark"] .agent-card--search.openagent-card-selected {
-      background: rgba(99, 102, 241, 0.12);
-      outline-color: rgba(99, 102, 241, 0.4);
-    }
+    [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,
+    [data-theme="dark"] .agent-card--search .agent-card__bio { color: rgba(224, 224, 224, 0.65); }
+    [data-theme-mode="dark"] .agent-card--search .agent-card__stat--claws,
+    [data-theme="dark"] .agent-card--search .agent-card__stat--claws { color: #aaa; }
+    [data-theme-mode="dark"] .agent-card--search .agent-card__stat--owner,
+    [data-theme="dark"] .agent-card--search .agent-card__stat--owner { color: #aaa; }
     [data-theme-mode="dark"] .agent-card--search .agent-card__action,
     [data-theme="dark"] .agent-card--search .agent-card__action {
-      background: #333; border-color: #555; color: #ddd;
+      background: transparent; border-color: rgba(255,255,255,0.2); color: #ddd;
     }
     [data-theme-mode="dark"] .agent-card--search .agent-card__action:hover,
-    [data-theme="dark"] .agent-card--search .agent-card__action:hover { background: #444; }
+    [data-theme="dark"] .agent-card--search .agent-card__action:hover { background: rgba(255,255,255,0.06); }
 
 
     [data-theme-mode="dark"] .agent-card--inline,
@@ -2370,7 +2574,8 @@ function injectStyles() {
     [data-theme="dark"] .agent-card__loading {
       background: #1e1b3a; border-color: #2d2b55; color: #64748b;
     }
-  `;
+
+      `;
   document.head.appendChild(style);
 }
 
@@ -2636,9 +2841,9 @@ panel.innerHTML = `
         <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">
@@ -2651,6 +2856,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;
@@ -2689,6 +2903,12 @@ 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 上方
 p.classList.add('visible');
@@ -2872,14 +3092,82 @@ 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 _showEmptyToast(query) {
+  _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',
+    query ? '暂未匹配到您想要的Agent 我们将持续上新～' : '暂无在线 Agent，请输入关键词搜索'));
+
+  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';
+    toast.style.zIndex = '100000';
+  }
+  document.body.appendChild(toast);
+}
+
+function _createEmptyState(query) {
+  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',
+    query ? '暂未匹配到您想要的Agent 我们将持续上新～' : '暂无在线 Agent，请输入关键词搜索');
+  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) {
+      _currentAgents = [];
+      _currentTextarea = textarea;
+      closePanel();
+      _showEmptyToast(query);
+      return;
 }
 
 console.log('[openagent] renderAgentList:', agents.length, 'agents, textarea:', !!textarea);
@@ -3213,6 +3501,8 @@ function tryInject() {
     const pos = ta.selectionStart;
     // 如果光标前已经是 @，不重复插入
     if (pos > 0 && val[pos - 1] === '@') {
+      // 按钮主动触发 → 清除 dismissed 状态，确保弹窗能打开
+      if (typeof resetMention === 'function') resetMention();
       _handleStateChange(ta);
       return;
     }
@@ -3271,9 +3561,53 @@ function tryInject() {
 
   console.log('[openagent] ✅ Agent Book UI injected (v3 hook-driven)');
 
+  // ── 提示栏（Figma 141:3293）：页面加载即显示 ──
+  _injectHintBar(inputContainer || textarea.parentElement);
+
   return true;
 }
 
+/** 注入提示栏到输入区域上方 */
+function _injectHintBar(anchorEl) {
+  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';
+  });
+
+  // 插入到 wrapper 外面、上方
+  anchorEl.parentElement.insertBefore(hintBar, anchorEl);
+}
+
 // ════════════════════════════════════════════════════════════════
 // ── window.__clMention — OC 注入钩子的桥接对象 ──
 // ════════════════════════════════════════════════════════════════
@@ -5731,7 +6065,8 @@ function _clScan() {
 // 注意：不使用 .chat-tool-card 类名，避免 scanner.js 误匹配。
 
 (function _clInjectRemoteAgentStyles() {
-  if (document.getElementById('cl-remote-agent-styles')) return;
+  var oldStyle = document.getElementById('cl-remote-agent-styles');
+  if (oldStyle) oldStyle.remove();
   var style = document.createElement('style');
   style.id = 'cl-remote-agent-styles';
   style.textContent = [
@@ -5794,7 +6129,20 @@ function _clScan() {
     '  border: 0 !important;',
     '  background: transparent !important;',
     '  box-shadow: none !important;',
-    '  padding-top: 0 !important;',
+    '  padding: 10px 0 !important;',
+    '  width: 100%;',
+    '  max-width: 100% !important;',
+    '  overflow: hidden !important;',
+    '}',
+    '.chat-tool-msg-collapse.chat-tool-msg-collapse--manual.is-open:has(.cl-remote-agent-card) {',
+    '  margin-left: 0 !important;',
+    '}',
+    // ── 外层活动组容器 ──
+    '.chat-activity-group__body:has(.cl-remote-agent-card) {',
+    '  border-radius: 14px;',
+    '  border: 1px solid #E5E5EA;',
+    '  background: #F8F9FA;',
+    '  margin: 8px;',
     '  padding-bottom: 0 !important;',
     '}',
     '.chat-bubble:has(.cl-remote-agent-card) > .chat-text,',
@@ -5825,567 +6173,578 @@ function _clScan() {
     '.cl-remote-agent-card {',
     '  max-height: none;',
     '  overflow: visible;',
-    '  width: fit-content;',
+    '  width: 100%;',
     '  max-width: 100%;',
-    '  border: 1px solid color-mix(in srgb, var(--border, rgba(47,47,51,0.10)) 85%, transparent);',
-    '  border-radius: var(--cl-native-shell-radius, 14px);',
-    '  padding: var(--cl-native-shell-padding, 8px);',
-    '  background: var(--card, #fff);',
+    '  border: 1px solid rgba(0,0,0,0.05);',
+    '  border-radius: 14px;',
+    '  background: #fff;',
     '  display: flex;',
     '  flex-direction: column;',
-    '  gap: var(--cl-native-shell-gap, 4px);',
+    '  gap: 10px;',
     '  box-sizing: border-box;',
     '}',
 
     // ── 顶部 OpenAgent 标题条 ──
     '.cl-openagent-header {',
-    '  width: fit-content;',
     '  max-width: 100%;',
-    '  min-height: var(--cl-native-summary-min-height, 34px);',
     '  display: flex;',
     '  align-items: center;',
-    '  gap: var(--cl-native-summary-gap, 6px);',
-    '  padding: var(--cl-native-summary-padding, 6px 10px);',
+    '  gap: 6px;',
+    '  height: 34px;',
+    '  padding: 6px 0;',
+    '  border-radius: 10px;',
     '  box-sizing: border-box;',
-    '  border: 1px solid color-mix(in srgb, var(--border, rgba(47,47,51,0.10)) 85%, transparent);',
-    '  border-radius: var(--cl-native-summary-radius, 10px);',
-    '  background: color-mix(in srgb, var(--bg-hover, #F4F5F7) 50%, transparent);',
-    '  color: var(--text, #2F2F33);',
+    '  border: none;',
+    '  background: transparent;',
     '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: var(--cl-native-summary-font-size, 13px);',
-    '  line-height: var(--cl-native-summary-line-height, 1.2);',
     '}',
-    '.cl-openagent-header-caret {',
-    '  width: 6px;',
-    '  color: var(--muted, rgba(47,47,51,0.45));',
-    '  font-size: 8px;',
-    '  line-height: 1;',
-    '  flex: 0 0 auto;',
+    '.cl-openagent-header:hover {',
     '}',
-    '.cl-openagent-header-icon {',
-    '  position: relative;',
+    '/* Output mode (Figma 373:12082) */',
+    '.cl-openagent-header--output,',
+    '.cl-exec-v2 .cl-openagent-header--output {',
+    '  border-radius: 10px 10px 0 0 !important;',
+    '  border: 1px solid rgba(229, 229, 234, 0.75) !important;',
+    '  background: linear-gradient(90deg, rgba(220, 38, 38, 0.09) 0%, rgba(220, 38, 38, 0) 34%),',
+    '              linear-gradient(90deg, rgb(253, 253, 254) 0%, rgb(253, 253, 254) 100%) !important;',
+    '  box-shadow: 0px 8px 11px rgba(0, 0, 0, 0.12);',
+    '  padding: 8px 6px !important;',
+    '}',
+    '.cl-openagent-header--output .cl-openagent-agent,',
+    '.cl-exec-v2 .cl-openagent-header--output .cl-openagent-agent {',
+    '  display: none;',
+    '}',
+    '.cl-openagent-header--output:hover,',
+    '.cl-exec-v2 .cl-openagent-header--output:hover {',
+    '  border-color: rgba(0,0,0,0.1);',
+    '}',
+    '.cl-openagent-expand-icon {',
+    '  display: flex;',
+    '  align-items: center;',
+    '  justify-content: center;',
     '  width: 15px;',
-    '  height: 14px;',
-    '  flex: 0 0 15px;',
+    '  height: 15px;',
+    '  flex-shrink: 0;',
+    '  transition: transform 0.2s ease;',
     '}',
-    '.cl-openagent-header-icon::before,',
-    '.cl-openagent-header-icon::after {',
-    '  content: "";',
-    '  position: absolute;',
-    '  width: 8px;',
-    '  height: 8px;',
-    '  border: 1.5px solid #10BDEB;',
-    '  border-radius: 2px;',
-    '  box-sizing: border-box;',
+    '.cl-openagent-expand-icon.cl-openagent-expanded {',
+    '  transform: rotate(180deg);',
     '}',
-    '.cl-openagent-header-icon::before { left: 2px; top: 5px; }',
-    '.cl-openagent-header-icon::after { left: 5px; top: 2px; }',
-    '.cl-openagent-header-title {',
+    '.cl-openagent-badge {',
+    '  width: 14px;',
+    '  height: 14px;',
+    '  border-radius: 14px;',
+    '  background: url(./icon.png) center/cover no-repeat;',
+    '  flex-shrink: 0;',
+    '  overflow: hidden;',
+    '}',
+    '.cl-openagent-text-row {',
     '  display: flex;',
     '  align-items: center;',
-    '  gap: 3px;',
+    '  gap: 6px;',
     '  min-width: 0;',
+    '  line-height: 1.32;',
+    '}',
+    '.cl-openagent-label {',
+    '  font-size: 12px;',
+    '  font-weight: 500;',
+    '  color: #333;',
     '  white-space: nowrap;',
     '}',
-    '.cl-openagent-header-primary {',
-    '  color: var(--text, #2F2F33);',
-    '  font-weight: 600;',
-    '  overflow: hidden;',
-    '  text-overflow: ellipsis;',
+    '.cl-openagent-agent {',
+    '  font-size: 12px;',
+    '  font-weight: 500;',
+    '  color: #333;',
+    '  white-space: nowrap;',
     '}',
-    '.cl-openagent-header-secondary {',
-    '  color: var(--muted, rgba(47,47,51,0.40));',
+    '.cl-openagent-status {',
+    '  font-size: 11px;',
     '  font-weight: 400;',
+    '  color: #666;',
+    '  white-space: nowrap;',
     '}',
-    // ── Figma 内容框 ──
+    // ── Execution detail card (Figma 346:181) ──
     '.cl-thought-chain-content {',
-    '  width: 100%;',
-    '  min-height: 0;',
-    '  box-sizing: border-box;',
-    '  border: 1px solid color-mix(in srgb, var(--border, rgba(0,0,0,0.04)) 60%, transparent);',
-    '  border-radius: 8px;',
-    '  background: var(--card, #fff);',
-    '  padding: 8px;',
     '  display: flex;',
     '  flex-direction: column;',
-    '  align-items: flex-start;',
-    '  gap: 12px;',
-    '}',
-    // ── 共享展开态宿主清理 ──
-    'details.chat-tools-collapse:has(.cl-thought-chain-content--execution),',
-    'details.chat-tools-collapse:has(.cl-output-result),',
-    'details.chat-tool-msg-collapse:has(.cl-thought-chain-content--execution),',
-    'details.chat-tool-msg-collapse:has(.cl-output-result),',
-    '.chat-tools-collapse:has(.cl-thought-chain-content--execution),',
-    '.chat-tools-collapse:has(.cl-output-result),',
-    '.chat-tool-msg-collapse:has(.cl-thought-chain-content--execution),',
-    '.chat-tool-msg-collapse:has(.cl-output-result) {',
-    '  max-width: 100% !important;',
-    '  display: block !important;',
-    '  box-sizing: border-box !important;',
+    '  gap: 16px;',
     '}',
-    // ── 共享展开态 card 基础 ──
-    '.cl-remote-agent-card:has(.cl-thought-chain-content--execution),',
-    '.cl-remote-agent-card:has(.cl-output-result) {',
-    '  /* padding/radius/gap 继承 base card，不覆盖 */',
+    '.cl-exec-detail-card {',
+    '  padding: 8px 16px 8px 12px;',
+    '  border-radius: 8px;',
+    '  background: #f8f8f8 url(./bg.png) no-repeat;',
+    '  background-size: 100% 100%;',
+    '  background-position: center;',
+    '  width: 460px;',
+    '  max-width: 100%;',
     '  box-sizing: border-box;',
     '}',
-    '.cl-remote-agent-card:has(.cl-thought-chain-content--execution:not(.cl-content-collapsed)) {',
-    '  width: 514px !important;',
-    '  max-width: 100%;',
+    '.cl-exec-detail-row {',
+    '  display: flex;',
+    '  align-items: center;',
+    '  gap: 16px;',
     '}',
-    '.cl-remote-agent-card:has(.cl-thought-chain-content:not(.cl-content-collapsed)) .cl-openagent-header {',
-    '  width: 100%;',
+    '.cl-exec-agent-avatar {',
+    '  width: 68px;',
+    '  height: 68px;',
+    '  border-radius: 50%;',
+    '  object-fit: cover;',
+    '  flex-shrink: 0;',
     '}',
-    // ── 展开内容宽度：外层 card 保持 fit-content，content 出现时自然撑开 ──
-    '.cl-thought-chain-content--execution {',
-    '  width: 100%;',
+    '.cl-exec-detail-info {',
+    '  display: flex;',
+    '  flex-direction: column;',
+    '  gap: 6px;',
+    '  flex: 1;',
+    '  min-width: 0;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-thought-chain-content {',
-    '  width: min(900px, 100%);',
+    '.cl-exec-name-row {',
+    '  display: flex;',
+    '  align-items: center;',
+    '  justify-content: space-between;',
+    '  gap: 8px;',
+    '  margin-bottom: 6px;',
     '}',
-    // ── output 专用 content 样式 ──
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-thought-chain-content {',
-    '  border: 1.5px solid color-mix(in srgb, var(--border, rgba(0,0,0,0.06)) 60%, transparent);',
-    '  border-radius: 12px;',
-    '  padding: 12px;',
-    '  gap: 12px;',
+    '.cl-exec-agent-name {',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 17px;',
+    '  font-weight: 500;',
+    '  color: #000;',
+    '  margin: 0;',
+    '  line-height: 1;',
     '}',
-    // ── Figma Agent pill（297:696）──
-    '.cl-agent-pill {',
-    '  display: inline-flex;',
+    '.cl-exec-star-badge {',
+    '  display: flex;',
     '  align-items: center;',
-    '  justify-content: center;',
-    '  gap: 9px;',
-    '  height: 42px;',
-    '  min-height: 42px;',
-    '  padding: 0 15px;',
-    '  border: 0;',
-    '  border-radius: 9px;',
-    '  background: #FBFBFB;',
-    '  box-shadow: inset 0 0 0 1.2px rgba(47,47,51,0.06);',
-    '  width: fit-content;',
-    '  box-sizing: border-box;',
+    '  gap: 2px;',
+    '  padding: 2px 10px 2px 8px;',
+    '  border-radius: 30px;',
+    '  background: #ebebeb;',
+    '  flex-shrink: 0;',
+    '}',
+    ,
+    ,
+    ,
+    '.cl-exec-star-count {',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 11px;',
+    '  font-weight: 500;',
+    '  color: #555;',
+    '  white-space: nowrap;',
+    '}',
+    '.cl-exec-agent-bio {',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 14px;',
+    '  font-weight: 400;',
+    '  color: #555;',
     '  margin: 0;',
+    '  line-height: 1;',
     '}',
-    '.cl-agent-pill-avatar {',
-    '  width: 24px;',
-    '  height: 24px;',
-    '  border-radius: 50%;',
-    '  object-fit: cover;',
-    '  flex: 0 0 24px;',
-    '  border: 0.6px solid rgba(47,47,51,0.20);',
-    '  box-sizing: border-box;',
+
+    // ── Progress text (Figma 346:253) ──
+    '.cl-thought-chain-content.cl-content-collapsed {',
+    '  display: none;',
     '}',
-    '.cl-agent-pill-name {',
-    '  display: inline-flex;',
+    ,
+        '.cl-exec-progress-row {',
+    '  display: flex;',
     '  align-items: center;',
+    '  gap: 2px;',
+    '}',
+    '.cl-exec-progress-text {',
     '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: 15px;',
-    '  color: rgba(47,47,51,0.90);',
+    '  font-size: 14px;',
+    '  font-weight: 400;',
     '  line-height: 1.2;',
-    '  letter-spacing: 0;',
+    '  margin: 0;',
     '  white-space: nowrap;',
+    '  background-image: linear-gradient(90deg, #555 0%, #555 36%, #eee 55%, #555 77%, #555 100%);',
+    '  background-size: 200% 100%;',
+    '  -webkit-background-clip: text;',
+    '  background-clip: text;',
+    '  -webkit-text-fill-color: transparent;',
+    '  animation: cl-progress-shimmer 2.5s ease-in-out infinite;',
     '}',
-    '.cl-agent-pill-at { font-weight: 600; }',
-    '.cl-agent-pill-label { font-weight: 400; }',
-    '.cl-thought-chain-pill-slot {',
+    '.cl-exec-progress-arrow {',
     '  display: flex;',
     '  align-items: center;',
-    '  width: 100%;',
-    '}',
-    '.cl-thought-chain-divider {',
-    '  display: none;',
+    '  flex-shrink: 0;',
     '}',
-    '.cl-thought-chain-content--execution {',
-    '  border: 1.5px solid rgba(0,0,0,0.04);',
-    '  border-radius: 12px;',
-    '  padding: 12px;',
-    '  gap: 18px;',
+
+
+    // ── Progress shimmer keyframes ──
+    '@keyframes cl-progress-shimmer {',
+    '  0% { background-position: 200% 0; }',
+    '  100% { background-position: -200% 0; }',
     '}',
-    '.cl-thought-chain-content--execution .cl-agent-pill {',
-    '  gap: 9px;',
-    '  height: 42px;',
-    '  min-height: 42px;',
-    '  padding: 0 15px;',
-    '  border: 0;',
-    '  border-radius: 9px;',
-    '  box-shadow: inset 0 0 0 1.2px rgba(47,47,51,0.06);',
+
+    // ── Output card（Figma 160:6681） ──
+    '.cl-output-card {',
+    '  background: #fff !important;',
+    '  border: 1.2px solid rgba(47,47,51,0.1) !important;',
+    '  border-radius: 24px !important;',
+    '  padding: 10px 15px !important;',
+    '  gap: 10px !important;',
     '}',
-    '.cl-thought-chain-content--execution .cl-agent-pill-avatar {',
-    '  width: 24px;',
-    '  height: 24px;',
-    '  flex-basis: 24px;',
+    '.cl-output-card > .cl-thought-chain-content {',
+    '  background: #fff;',
+    '  border: 1px solid #f4f4f4;',
+    '  border-radius: 12px;',
+    '  padding: 20px 30px;',
+    '  overflow: hidden;',
+    '  max-width: 100%;',
+    '  box-sizing: border-box;',
     '}',
-    '.cl-thought-chain-content--execution .cl-agent-pill-name {',
-    '  font-size: 15px;',
-    '  line-height: 1.2;',
+    '.cl-output-card > .cl-thought-chain-content * {',
+    '  max-width: 100%;',
+    '  box-sizing: border-box;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-agent-pill {',
-    '  gap: 9px;',
-    '  height: 42px;',
-    '  min-height: 42px;',
-    '  padding: 0 15px;',
-    '  border: 0;',
-    '  border-radius: 9px;',
-    '  box-shadow: inset 0 0 0 1.2px rgba(47,47,51,0.06);',
+    '.cl-output-card > .cl-thought-chain-content pre,',
+    '.cl-output-card > .cl-thought-chain-content code {',
+    '  overflow-x: auto;',
+    '  white-space: pre-wrap;',
+    '  word-break: break-all;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-agent-pill-avatar {',
-    '  width: 24px;',
-    '  height: 24px;',
-    '  flex-basis: 24px;',
+    // V2 output card：统一 border/padding 与 execution card 一致
+    '.cl-exec-v2.cl-output-card {',
+    '  border: 1px solid rgba(0,0,0,0.05) !important;',
+    '  border-radius: 14px !important;',
+    '  padding: 0 !important;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-agent-pill-name {',
-    '  font-size: 15px;',
-    '  line-height: 1.2;',
+    // V2 output card：去掉 content 区多余的内边距，detail card 自带动间距
+    '.cl-exec-v2.cl-output-card > .cl-thought-chain-content {',
+    '  background: transparent;',
+    '  border: none;',
+    '  border-radius: 0;',
+    '  padding: 0 14px !important;',
     '}',
 
-    // ── Figma 思考步骤（297:716）──
-    '.cl-thought-chain-steps-section {',
-    '  width: 100%;',
-    '  display: flex;',
-    '  flex-direction: column;',
-    '  align-items: flex-start;',
-    '  gap: 4px;',
-    '  padding: 4px 0;',
-    '  box-sizing: border-box;',
+    // ── Collapsed state（Figma 145:3466） ──
+    '.cl-remote-agent-card:has(.cl-content-collapsed) {',
+    '  padding: 0 !important;',
     '}',
-    '.cl-tools-collapse-header {',
+    // ── Output card Footer（Figma 131:2091） ──
+    '.cl-output-footer {',
     '  display: flex;',
     '  align-items: center;',
-    '  gap: 0;',
-    '  padding: 0;',
-    '  cursor: default;',
-    '  user-select: none;',
-    '}',
-    '.cl-tools-collapse-header:hover { opacity: 1; }',
-    '.cl-tools-collapse-header-icon { display: none; }',
-    '.cl-tools-collapse-header-title {',
-    '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: 10px;',
-    '  font-weight: 600;',
-    '  line-height: 1.2;',
-    '  color: rgba(47,47,51,0.90);',
-    '}',
-    '.cl-tools-collapse-body {',
-    '  position: relative;',
-    '  display: flex;',
-    '  flex-direction: column;',
     '  gap: 4px;',
-    '  width: 100%;',
-    '  overflow: hidden;',
-    '  padding: 0;',
-    '  transition: max-height 0.25s ease, opacity 0.2s ease;',
-    '}',
-    '.cl-tools-collapse-body::before {',
-    '  content: "";',
-    '  position: absolute;',
-    '  left: 7px;',
-    '  top: 14px;',
-    '  bottom: 14px;',
-    '  width: 1px;',
-    '  background: rgba(47,47,51,0.10);',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 14px;',
+    '  color: #999;',
     '}',
-    '.cl-tools-collapse-body.cl-expanded { max-height: 2000px; opacity: 1; }',
-    '.cl-tools-collapse-body.cl-collapsed { max-height: 0; opacity: 0; }',
-    '.cl-tools-collapse-step {',
-    '  position: relative;',
-    '  display: block;',
-    '  width: 100%;',
-    '  padding: 0;',
-    '  z-index: 1;',
+    '.cl-output-footer-text {',
+    '  white-space: nowrap;',
     '}',
-    '.cl-tools-collapse-step-row {',
+    '.cl-output-footer-star {',
     '  display: flex;',
     '  align-items: center;',
-    '  gap: 8px;',
-    '  min-height: 14px;',
+    '  flex-shrink: 0;',
     '}',
-    '.cl-tools-collapse-step-icon {',
-    '  width: 14px;',
-    '  height: 14px;',
-    '  flex: 0 0 14px;',
-    '  display: flex;',
-    '  align-items: center;',
-    '  justify-content: center;',
-    '  background: #fff;',
+    '.cl-output-footer-count {',
+    '  font-weight: 500;',
+    '  white-space: nowrap;',
     '}',
-    '.cl-tools-collapse-step-dot {',
-    '  width: 5px;',
-    '  height: 5px;',
-    '  border-radius: 50%;',
-    '  background: #D9D9D9;',
-    '  animation: none;',
+
+/* ── Sidebar 面板（Figma 145:5712） ── */
+    '.chat-sidebar {',
+    '  background: #fff !important;',
+    '  border: 1px solid rgba(0,0,0,0.05) !important;',
+    '  border-radius: 14px !important;',
+    '  padding: 16px 20px !important;',
+    '  box-sizing: border-box !important;',
+    '  display: flex !important;',
+    '  flex-direction: column !important;',
+    '  gap: 16px !important;',
     '}',
-    '.cl-tools-collapse-step-dot::before,',
-    '.cl-tools-collapse-step-dot::after,',
-    '.cl-tools-collapse-step-dot span {',
-    '  content: none;',
-    '  display: none;',
+    '.chat-sidebar > .sidebar-panel {',
+    '  display: flex !important;',
+    '  flex-direction: column !important;',
+    '  gap: 16px !important;',
+    '  width: 100% !important;',
+    '  background: transparent !important;',
     '}',
-    '.cl-tools-collapse-step-check {',
-    '  position: relative;',
-    '  width: 14px;',
-    '  height: 14px;',
-    '  border-radius: 50%;',
-    '  background: #D9D9D9;',
+    '.chat-sidebar .sidebar-header {',
+    '  display: flex !important;',
+    '  align-items: center !important;',
+    '  justify-content: space-between !important;',
+    '  padding: 6px 0 !important;',
+    '  border-radius: 10px !important;',
+    '  width: 100% !important;',
+    '  border: none !important;',
+    '  background: transparent !important;',
     '}',
-    '.cl-tools-collapse-step-check::after {',
-    '  content: "";',
-    '  position: absolute;',
-    '  left: 4px;',
-    '  top: 3px;',
-    '  width: 4px;',
-    '  height: 7px;',
-    '  border: solid #fff;',
-    '  border-width: 0 1.3px 1.3px 0;',
-    '  transform: rotate(45deg);',
+    '.chat-sidebar .sidebar-title {',
+    '  font-family: "PingFang SC", sans-serif !important;',
+    '  font-weight: 500 !important;',
+    '  font-size: 18px !important;',
+    '  color: #333 !important;',
+    '  line-height: 1.32 !important;',
     '}',
-    '.cl-tools-collapse-step-title {',
-    '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: 9.5px;',
-    '  font-weight: 400;',
-    '  line-height: 1.32;',
-    '  color: rgba(47,47,51,0.40);',
-    '  white-space: nowrap;',
-    '  overflow: hidden;',
-    '  text-overflow: ellipsis;',
+    '.chat-sidebar .sidebar-header button {',
+    '  width: 16px !important;',
+    '  height: 16px !important;',
+    '  padding: 0 !important;',
+    '  border: none !important;',
+    '  background: transparent !important;',
+    '  cursor: pointer !important;',
+    '  flex-shrink: 0 !important;',
     '}',
-    '.cl-tools-collapse-step-detail {',
-    '  margin: 2px 0 0 22px;',
-    '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: 9px;',
-    '  line-height: 1.32;',
-    '  color: rgba(47,47,51,0.40);',
+    '.chat-sidebar .sidebar-content {',
+    '  font-family: "PingFang SC", sans-serif !important;',
+    '  font-size: 14px !important;',
+    '  font-weight: 400 !important;',
+    '  line-height: 1.8 !important;',
+    '  color: #333 !important;',
+    '  width: 100% !important;',
+    '  padding: 0 !important;',
     '}',
-    '.cl-thought-chain-content--execution .cl-thought-chain-steps-section {',
-    '  gap: 6px;',
-    '  padding: 6px 0;',
+    '.chat-sidebar .sidebar-markdown {',
+    '  font-family: "PingFang SC", sans-serif !important;',
+    '  font-size: 14px !important;',
+    '  font-weight: 400 !important;',
+    '  line-height: 1.8 !important;',
+    '  color: #333 !important;',
+    '  background: transparent !important;',
+    '  border: none !important;',
+    '  padding: 0 !important;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-header-title {',
-    '  font-size: 15px;',
-    '  line-height: 1.2;',
+    // 隐藏宿主 sidebar 自带的 "Rendered Markdown / View Raw Text" 工具栏
+    '.chat-sidebar .sidebar-markdown-shell__toolbar {',
+    '  display: none !important;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-body {',
-    '  gap: 6px;',
+    // ═══════════════════════════════════════════════════════════════
+    // V2 执行卡片样式（2026.6.9+ 新版 UI）
+    // 所有 V2 样式在 .cl-exec-v2 下隔离，不影响旧版
+    // ═══════════════════════════════════════════════════════════════
+
+    // ── V2 容器 ──
+    '.cl-exec-v2 {',
+    '  position: relative;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-body::before {',
-    '  left: 10px;',
-    '  top: 21px;',
-    '  bottom: 21px;',
-    '  width: 1px;',
-    '  background: #DBDBDB;',
-    '  transform: scaleX(0.3);',
-    '  transform-origin: left center;',
+
+    // ── V2 Header（Figma 371:6987 — 红晕渐变背景 + 独立边框）──
+    '.cl-exec-v2 .cl-openagent-header-v2 {',
+    '  background: linear-gradient(90deg, rgba(220, 38, 38, 0.09) 0%, rgba(220, 38, 38, 0) 34%),',
+    '              linear-gradient(90deg, rgb(253, 253, 254) 0%, rgb(253, 253, 254) 100%) !important;',
+    '  border-bottom: 1px solid rgba(229, 229, 234, 0.75) !important;',
+    '  padding: 8px 6px !important;',
+    '  margin: 0 !important;',
+    '  border-radius: 10px 10px 0 0;',
+    '  height: auto !important;',
+    '  min-height: auto !important;',
+    '  box-sizing: border-box;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-step-row {',
-    '  gap: 12px;',
-    '  min-height: 21px;',
+    '.cl-exec-v2 .cl-openagent-header-v2:hover {',
+    '  background: linear-gradient(90deg, rgba(220, 38, 38, 0.12) 0%, rgba(220, 38, 38, 0) 34%),',
+    '              linear-gradient(90deg, rgb(250, 250, 251) 0%, rgb(250, 250, 251) 100%) !important;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-step-icon {',
-    '  width: 21px;',
-    '  height: 21px;',
-    '  flex-basis: 21px;',
+
+    // ── V2 圆形灰色头像（替代小徽章）──
+    '.cl-exec-v2 .cl-openagent-avatar-v2 {',
+    '  display: inline-block;',
+    '  width: 24px;',
+    '  height: 24px;',
+    '  border-radius: 50%;',
+    '  background: #d0d0d0;',
+    '  flex-shrink: 0;',
+    '  margin-right: 4px;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-step-dot {',
-    '  width: 6px;',
-    '  height: 6px;',
-    '  background: #DCDCDC;',
+
+    // ── V2 隐藏旧版 OASN 小徽章和 @agentName ──
+    '.cl-exec-v2 .cl-openagent-badge,',
+    '.cl-exec-v2 .cl-openagent-agent {',
+    '  display: none !important;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-step-check {',
-    '  width: 15px;',
-    '  height: 15px;',
-    '  background: #DCDCDC;',
+    // ── V2 隐藏步骤标题栏（▼ + "思考中..."），保留进度文字行 ──
+    '.cl-exec-v2 .cl-tools-collapse-header-v2 {',
+    '  display: none !important;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-step-check::after {',
-    '  left: 4px;',
-    '  top: 2px;',
-    '  width: 5px;',
-    '  height: 8px;',
-    '  border-width: 0 1.4px 1.4px 0;',
+
+    // ── V2 Detail Card（大头像 + 右置星级 + 网格点背景）──
+    '.cl-exec-v2 .cl-exec-detail-card-v2 {',
+    '  max-width: 488px !important;',
+    '  width: 100% !important;',
+    '  padding: 8px 16px 8px 12px !important;',
+    '  padding-right: 90px !important;',
+    '  border-radius: 12px !important;',
+    '  background: #f7f7f8 !important;',
+    '  margin: 12px 14px 14px 14px !important;',
+    '  margin-left: 0 !important;',
+    '  position: relative;',
+    '  overflow: hidden;',
+    '  box-sizing: border-box;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-step-title {',
-    '  font-size: 14px;',
-    '  line-height: 1.32;',
+    /* 四角网格点装饰 */
+    '.cl-exec-v2 .cl-exec-detail-card-v2::before,',
+    '.cl-exec-v2 .cl-exec-detail-card-v2::after {',
+    '  content: "";',
+    '  position: absolute;',
+    '  width: 40px;',
+    '  height: 40px;',
+    '  background-image: radial-gradient(circle, #ddd 1px, transparent 1px);',
+    '  background-size: 8px 8px;',
+    '  opacity: 0.5;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-step-detail {',
-    '  display: none;',
+    '.cl-exec-v2 .cl-exec-detail-card-v2::before {',
+    '  top: 8px;',
+    '  left: 8px;',
+    '}',
+    '.cl-exec-v2 .cl-exec-detail-card-v2::after {',
+    '  bottom: 8px;',
+    '  right: 8px;',
     '}',
 
-    // ── output 等待渲染完成前，隐藏整张 result card 和宿主 shell ──
-    'details.chat-tools-collapse:has(.cl-output-card--pending),',
-    'details.chat-tool-msg-collapse:has(.cl-output-card--pending),',
-    '.chat-tools-collapse:has(.cl-output-card--pending),',
-    '.chat-tool-msg-collapse:has(.cl-output-card--pending) {',
-    '  display: none !important;',
+    '.cl-exec-v2 .cl-exec-detail-row-v2 {',
+    '  display: flex;',
+    '  align-items: flex-start;',
+    '  gap: 16px;',
     '}',
-    '.cl-output-card--pending {',
-    '  display: none !important;',
+
+    '.cl-exec-v2 .cl-exec-detail-info-v2 {',
+    '  display: flex;',
+    '  flex-direction: column;',
+    '  gap: 6px;',
+    '  flex: 1;',
+    '  min-width: 0;',
     '}',
 
-    // ── 结果展示区 ──
-    '.cl-output-result {',
-    '  margin-top: 4px;',
-    '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: 13px;',
-    '  line-height: 1.6;',
-    '  color: #2F2F33;',
-    '  word-break: break-word;',
+    // ── V2 大头像 80×80 ──
+    '.cl-exec-v2 .cl-exec-agent-avatar-v2 {',
+    '  width: 80px !important;',
+    '  height: 80px !important;',
+    '  border-radius: 16px !important;',
+    '  object-fit: cover;',
+    '  flex-shrink: 0;',
     '}',
-    '.cl-output-result--pending {',
-    '  display: none !important;',
+
+    // ── V2 名称 ~20px/600/黑色 ──
+    '.cl-exec-v2 .cl-exec-agent-name-v2 {',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 20px !important;',
+    '  font-weight: 600 !important;',
+    '  color: #000 !important;',
+    '  margin: 0;',
+    '  line-height: 1.3;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result {',
-    '  width: 100%;',
-    '  max-height: 600px;',
-    '  overflow-y: auto;',
-    '  overflow-x: hidden;',
-    '  box-sizing: border-box;',
-    '  margin-top: 0;',
-    '  padding: 6px 30px 24px 18px;',
-    '  border: 0;',
-    '  border-radius: 0;',
-    '  background: transparent;',
-    '  font-size: 14.25px;',
-    '  line-height: 1.42;',
-    '  color: rgba(47,47,51,0.50);',
-    '  scrollbar-width: thin;',
-    '  scrollbar-color: #ECECEC transparent;',
+
+    // ── V2 描述 ~14px/400/灰色 ──
+    '.cl-exec-v2 .cl-exec-agent-bio-v2 {',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 14px !important;',
+    '  font-weight: 400;',
+    '  color: #888 !important;',
+    '  margin: 0;',
+    '  line-height: 1.4;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result::-webkit-scrollbar {',
-    '  width: 4.5px;',
+
+    // ── V2 星级右置到卡片右上角 ──
+    '.cl-exec-v2 .cl-exec-star-badge-v2 {',
+    '  position: absolute;',
+    '  right: 24px;',
+    '  top: 20px;',
+    '  display: flex;',
+    '  align-items: center;',
+    '  gap: 4px;',
+    '  padding: 4px 12px;',
+    '  border-radius: 30px;',
+    '  background: #ebebeb;',
+    '  z-index: 1;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result::-webkit-scrollbar-track {',
-    '  background: transparent;',
+    '.cl-exec-v2 .cl-exec-star-count-v2 {',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 13px;',
+    '  font-weight: 500;',
+    '  color: #555;',
+    '  white-space: nowrap;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result::-webkit-scrollbar-thumb {',
-    '  background: #ECECEC;',
-    '  border-radius: 150px;',
+
+    // ── V2 Progress Row（Figma 373:9765 — shimmer 渐变文字 + 箭头）──
+    '.cl-exec-v2 .cl-exec-progress-row-v2 {',
+    '  display: flex;',
+    '  align-items: center;',
+    '  gap: 2px;',
+    '  margin-top: 16px;',
+    '  padding: 0 4px;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result h1,',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result h2 {',
-    '  margin: 18px 0 9px;',
-    '  font-size: 20px;',
-    '  font-weight: 600;',
+    '.cl-exec-v2 .cl-exec-progress-row-v2 .cl-exec-progress-text {',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 14px;',
+    '  font-weight: 400;',
     '  line-height: 1.2;',
-    '  color: rgba(47,47,51,0.90);',
+    '  margin: 0;',
+    '  white-space: nowrap;',
+    '  background-image: linear-gradient(90deg, #555 0%, #555 36%, #eee 55%, #555 77%, #555 100%);',
+    '  background-size: 200% 100%;',
+    '  -webkit-background-clip: text;',
+    '  background-clip: text;',
+    '  -webkit-text-fill-color: transparent;',
+    '  animation: cl-progress-shimmer 2.5s ease-in-out infinite;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result h1:first-child,',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result h2:first-child {',
-    '  margin-top: 6px;',
+    '.cl-exec-v2 .cl-exec-progress-row-v2 .cl-exec-progress-arrow {',
+    '  display: flex;',
+    '  align-items: center;',
+    '  flex-shrink: 0;',
+    '  opacity: 1;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result h3 {',
-    '  margin: 18px 0 9px;',
-    '  font-size: 15px;',
-    '  font-weight: 600;',
-    '  line-height: 1.2;',
-    '  color: rgba(47,47,51,0.90);',
+
+    // ── V2 隐藏旧版 name-row（星级原来在名称旁边）──
+    '.cl-exec-v2 .cl-exec-name-row,',
+    '.cl-exec-v2 .cl-exec-star-badge:not(.cl-exec-star-badge-v2) {',
+    '  display: none !important;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result p,',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result li {',
-    '  font-size: 14.25px;',
-    '  line-height: 1.42;',
-    '  color: rgba(47,47,51,0.50);',
+
+    // ─ V2 步骤列表样式（覆盖 thought-chain-card.js 默认值）──
+    '.cl-exec-v2 .cl-tools-collapse-body-v2 {',
+    '  padding: 4px 0 8px;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result strong,',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result b,',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result a {',
-    '  color: rgba(47,47,51,0.90) !important;',
-    '  font-weight: 600;',
+    '.cl-exec-v2 .cl-tools-collapse-step {',
+    '  padding: 5px 0;',
+    '  gap: 10px;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result ul,',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result ol {',
-    '  padding-left: 20px;',
-    '  margin: 6px 0;',
+    '.cl-exec-v2 .cl-tools-collapse-step-title {',
+    '  font-size: 13px;',
+    '  color: #555;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result hr {',
-    '  border: 0;',
-    '  border-top: 1px solid rgba(47,47,51,0.12);',
-    '  margin: 15px 0;',
+    '.cl-exec-v2 .cl-tools-collapse-step-check {',
+    '  width: 12px;',
+    '  height: 12px;',
+    '  background: #ccc;',
     '}',
-    '.cl-output-result p { margin: 4px 0; }',
-    '.cl-output-result ul, .cl-output-result ol { padding-left: 20px; margin: 4px 0; }',
-    '.cl-output-result code {',
-    '  background: rgba(0,0,0,0.05);',
-    '  padding: 1px 4px;',
-    '  border-radius: 3px;',
-    '  font-size: 12px;',
+    '.cl-exec-v2 .cl-tools-collapse-step-dot {',
+    '  width: 14px;',
+    '  height: 14px;',
+    '}',
+    '.cl-exec-v2 .cl-tools-collapse-step-dot::before,',
+    '.cl-exec-v2 .cl-tools-collapse-step-dot::after,',
+    '.cl-exec-v2 .cl-tools-collapse-step-dot span {',
+    '  width: 3px;',
+    '  height: 3px;',
+    '  background: #bbb;',
     '}',
 
-    // ── 附件下载区 ──
-    '.cl-openagent-media-links {',
+    // ── V2 Footer（-由xxx完成 + 星级）──
+    '.cl-exec-v2 .cl-output-footer-v2 {',
     '  display: flex;',
-    '  flex-wrap: wrap;',
-    '  gap: 8px;',
-    '  width: 100%;',
-    '  box-sizing: border-box;',
-    '  padding: 6px 18px 12px;',
-    '}',
-    '.cl-openagent-media-link {',
-    '  display: inline-grid;',
-    '  grid-template-columns: auto auto;',
-    '  grid-template-areas: "icon action" "icon file";',
     '  align-items: center;',
-    '  column-gap: 8px;',
-    '  row-gap: 1px;',
-    '  max-width: min(100%, 360px);',
-    '  box-sizing: border-box;',
-    '  padding: 8px 10px;',
-    '  border: 1px solid rgba(47,47,51,0.12);',
-    '  border-radius: 8px;',
-    '  background: rgba(47,47,51,0.03);',
-    '  color: rgba(47,47,51,0.90) !important;',
-    '  text-decoration: none !important;',
+    '  gap: 4px;',
     '  font-family: "PingFang SC", sans-serif;',
-    '}',
-    '.cl-openagent-media-link:hover {',
-    '  background: rgba(16,189,235,0.08);',
-    '  border-color: rgba(16,189,235,0.35);',
-    '}',
-    '.cl-openagent-media-link-icon {',
-    '  grid-area: icon;',
-    '  width: 28px;',
-    '  height: 28px;',
-    '  border-radius: 6px;',
-    '  background: rgba(16,189,235,0.12);',
-    '  color: #088BAE;',
-    '  display: inline-flex;',
-    '  align-items: center;',
-    '  justify-content: center;',
-    '  font-size: 11px;',
-    '  font-weight: 700;',
-    '}',
-    '.cl-openagent-media-link-text {',
-    '  grid-area: action;',
-    '  min-width: 0;',
     '  font-size: 13px;',
-    '  font-weight: 600;',
-    '  line-height: 1.2;',
+    '  color: #999;',
+    '  padding: 12px;',
+    '  margin-top: 8px;',
     '}',
-    '.cl-openagent-media-link-file {',
-    '  grid-area: file;',
-    '  min-width: 0;',
-    '  overflow: hidden;',
-    '  text-overflow: ellipsis;',
+    '.cl-exec-v2 .cl-output-footer-v2 .cl-output-footer-text {',
     '  white-space: nowrap;',
-    '  font-size: 11px;',
-    '  line-height: 1.2;',
-    '  color: rgba(47,47,51,0.50);',
     '}',
-
-    // ── 错误状态 ──
-    '.cl-remote-agent-card--error {',
-    '  border-color: rgba(220, 38, 38, 0.3);',
-    '  background: rgba(254, 242, 242, 0.5);',
-    '}',
-
-    // ── Header 折叠/展开 ──
-    '.cl-openagent-header:hover {',
-    '  background: color-mix(in srgb, var(--bg-hover, #ECEDF0) 75%, transparent);',
-    '  transition: background 0.15s ease;',
+    '.cl-exec-v2 .cl-output-footer-v2 .cl-output-footer-star {',
+    '  display: flex;',
+    '  align-items: center;',
+    '  flex-shrink: 0;',
+    '  margin-left: 2px;',
     '}',
-    '.cl-content-collapsed {',
-    '  display: none !important;',
+    '.cl-exec-v2 .cl-output-footer-v2 .cl-output-footer-count {',
+    '  font-weight: 500;',
+    '  white-space: nowrap;',
     '}',
   ].join('\n');
   document.head.appendChild(style);
@@ -7016,6 +7375,8 @@ function _clParseToolCardModel(card) {
   var agentId = args.agent_id || args.agentId || null;
   var agentName = args.agent_name || args.agentName || agentId || 'Remote Agent';
   var agentAvatar = args.agent_avatar || args.agentAvatar || args.avatar || args.avatar_url || args.avatarUrl || null;
+  var agentBio = args.agent_bio || args.agentBio || args.description || args.agent_description || args.MOM || '';
+  var agentStars = args.agent_stars || args.agentStars || args.stars || args.claws || '3.2万';
   var taskText = args.task || args.message || args.instruction || '';
 
   // 从 text 解析思考步骤 / 最终文本
@@ -7031,10 +7392,14 @@ function _clParseToolCardModel(card) {
     agentId: agentId,
     agentName: agentName,
     agentAvatar: agentAvatar,
+    agentBio: agentBio,
+    agentStars: agentStars,
     taskText: taskText,
     toolCallId: card.toolCallId || '',
     status: hasOutput ? 'completed' : 'executing',
     rawText: rawText,
+    text: rawText,
+    outputText: rawText,
     chunks: chunks,
     isError: isError,
     inferredKind: inferredKind,
@@ -7065,6 +7430,11 @@ function _clParseToolCardModel(card) {
 // UI 结构使用 shared thought-chain styles，数据来源是 RenderHook model。
 
 function _clRenderExecutionCard(model) {
+  // ── V2 版本判断：≥ 2026.6.9 启用新版 UI ──
+  if (typeof _clIsHostVersionGte === 'function' && _clIsHostVersionGte('2026.6.9')) {
+    return _clRenderExecutionCardV2(model);
+  }
+
   var container = document.createElement('div');
   container.className = 'cl-remote-agent-card cl-thought-chain';
   if (CL && typeof CL.diagMarkCard === 'function') {
@@ -7074,111 +7444,45 @@ function _clRenderExecutionCard(model) {
   container.appendChild(_clCreateOpenAgentHeader(model));
 
   var content = document.createElement('div');
-  content.className = 'cl-thought-chain-content cl-thought-chain-content--execution';
+  content.className = 'cl-thought-chain-content cl-thought-chain-content--execution cl-content-collapsed';
   container.appendChild(content);
 
-  // ── Agent Pill ──
-  console.log('[cl-exec] 🏷️ agentName=' + JSON.stringify(model.agentName) + ' agentId=' + JSON.stringify(model.agentId));
-  var pillSlot = document.createElement('div');
-  pillSlot.className = 'cl-thought-chain-pill-slot';
-  var pill = _clCreateAgentPill(model.agentName, model.agentId, model.agentAvatar);
-  pillSlot.appendChild(pill);
-  content.appendChild(pillSlot);
-
-  // ── 分隔线 ──
-  var divider = document.createElement('div');
-  divider.className = 'cl-thought-chain-divider';
-  content.appendChild(divider);
-
-  // ── 思考步骤区 ──
-  var stepsSection = document.createElement('div');
-  stepsSection.className = 'cl-thought-chain-steps-section';
-
-  // 标题栏
-  var header = document.createElement('div');
-  header.className = 'cl-tools-collapse-header';
-
-  var headerIcon = document.createElement('span');
-  headerIcon.className = 'cl-tools-collapse-header-icon';
-  headerIcon.textContent = '▼';
-
-  var headerTitle = document.createElement('span');
-  headerTitle.className = 'cl-tools-collapse-header-title';
-
-  // 从 chunks 提取步骤
-  var steps = [];
-  for (var i = 0; i < model.chunks.length; i++) {
-    var chunk = model.chunks[i];
-    if (chunk.type === 'step') {
-      steps.push({ title: chunk.title, detail: chunk.detail || '' });
-    }
-  }
-
-  // 合并预缓冲步骤（WS 先于 Lit 渲染到达时）
-  if (model._bufferedSteps && model._bufferedSteps.length > 0) {
-    steps = model._bufferedSteps;
-  }
-  if (typeof _cl_compactThoughtSteps === 'function') {
-    steps = _cl_compactThoughtSteps(steps);
-  }
-
-  headerTitle.textContent = '思考中...';
-
-  header.appendChild(headerIcon);
-  header.appendChild(headerTitle);
-
-  // 步骤列表（可折叠）
-  var body = document.createElement('div');
-  body.className = 'cl-tools-collapse-body cl-expanded';
-
-  for (var si = 0; si < steps.length; si++) {
-    var isLatest = (si === steps.length - 1);
-    var stepEl = _clCreateStepElement(steps[si], isLatest);
-    body.appendChild(stepEl);
-  }
-
-  // 折叠/展开
-  header.style.cursor = 'pointer';
-  header.addEventListener('click', function(evt) {
-    evt.stopPropagation();  // 防止外层容器拦截
-    var isExpanded = body.classList.contains('cl-expanded');
-    console.log('[cl-exec] 🖱️ header click: expanded=' + isExpanded + ' bodyChildren=' + body.childElementCount);
-    if (isExpanded) {
-      body.classList.remove('cl-expanded');
-      body.classList.add('cl-collapsed');
-      headerIcon.classList.add('cl-collapsed');
-      if (typeof _cl_setCardUiState === 'function') {
-        _cl_setCardUiState(model, { stepsExpanded: false });
-      }
-    } else {
-      body.classList.remove('cl-collapsed');
-      body.classList.add('cl-expanded');
-      headerIcon.classList.remove('cl-collapsed');
-      if (typeof _cl_setCardUiState === 'function') {
-        _cl_setCardUiState(model, { stepsExpanded: true });
-      }
-    }
-  });
-
-  stepsSection.appendChild(header);
-  stepsSection.appendChild(body);
-  content.appendChild(stepsSection);
+  // ── Agent 详情卡片（Figma 346:181） ──
+  try {
+    var detailCard = _clCreateAgentDetailCard(model);
+    content.appendChild(detailCard);
+  } catch(e) {
+    console.warn('[cl-exec] detail card creation failed:', e);
+  }
+
+  // ── 进度文字（Figma 346:253） — 动态读取 response.progress?.safe_status_message ──
+  var progressRow = document.createElement('div');
+  progressRow.className = 'cl-exec-progress-row';
+  var progressText = document.createElement('p');
+  progressText.className = 'cl-exec-progress-text';
+  progressText.textContent = (model.progressMessage || model.rawText || '').trim() || '思考中，正在了解你的需求';
+  progressRow.appendChild(progressText);
+  // 箭头图标
+  var arrowIcon = document.createElement('span');
+  arrowIcon.className = 'cl-exec-progress-arrow';
+  arrowIcon.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 4L9 7L5 10" stroke="#555" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+  progressRow.appendChild(arrowIcon);
+  content.appendChild(progressRow);
+  if (model.status === 'completed') progressRow.style.display = 'none';
 
   // ── 异步更新真实 Agent 身份 ──
   if ((model.agentId || model.agentName) && typeof fetchAgentById === 'function') {
     fetchAgentById(model.agentId, model.agentName).then(function(agent) {
       if (!agent) return;
-      var pa = container.querySelector('.cl-agent-pill-avatar');
-      var pn = container.querySelector('.cl-agent-pill-name');
-      if (pa && typeof avatarUrl === 'function') {
-        var resolvedAvatar = avatarUrl(agent);
-        console.log('[cl-diag][pill] fetch-update agentId=' + JSON.stringify(model.agentId)
-          + ' name=' + JSON.stringify(agent.name || model.agentName)
-          + ' src=' + JSON.stringify(resolvedAvatar));
-        pa.src = resolvedAvatar;
-        pa.style.display = '';
-      }
-      _clSetAgentPillName(container, agent.name || model.agentName);
+      var avatarEl = container.querySelector('.cl-exec-agent-avatar');
+      var nameEl = container.querySelector('.cl-exec-agent-name');
+      var bioEl = container.querySelector('.cl-exec-agent-bio');
+      // avatar 保持 icon.png，不覆盖
+      if (nameEl) nameEl.textContent = agent.name || model.agentName;
+      if (bioEl && (agent.bio || agent.description)) bioEl.textContent = agent.bio || agent.description;
+      var starsEl = container.querySelector('.cl-exec-star-count');
+      if (starsEl && agent.claws) starsEl.textContent = _cl_formatStarCount(agent.claws);
+      if (starsEl && agent.stars && !agent.claws) starsEl.textContent = _cl_formatStarCount(agent.stars);
       _clSetOpenAgentHeaderAgent(container, agent.name || model.agentName);
     }).catch(function() {});
   }
@@ -7187,40 +7491,103 @@ function _clRenderExecutionCard(model) {
     _cl_applyCardUiState(container, model);
   }
 
-  console.log('[cl-exec] ✅ execution card built: steps=' + steps.length);
+  console.log('[cl-exec] execution card built');
   return container;
 }
 
+// ── Agent 详情卡片（Figma 266:11136） ──
+function _clCreateAgentDetailCard(model) {
+  var card = document.createElement('div');
+  card.className = 'cl-exec-detail-card';
+
+  var row = document.createElement('div');
+  row.className = 'cl-exec-detail-row';
+
+  // 头像 68×68
+  var avatar = document.createElement('img');
+  avatar.className = 'cl-exec-agent-avatar';
+  avatar.alt = model.agentName || '';
+  avatar.src = './icon.png';
+  avatar.onerror = function() { this.style.visibility = 'hidden'; };
+  row.appendChild(avatar);
+
+  // 信息列
+  var info = document.createElement('div');
+  info.className = 'cl-exec-detail-info';
+
+  // 名称行：名称 + 星级徽章
+  var nameRow = document.createElement('div');
+  nameRow.className = 'cl-exec-name-row';
+
+  var nameEl = document.createElement('p');
+  nameEl.className = 'cl-exec-agent-name';
+  nameEl.textContent = model.agentName || 'Remote Agent';
+  nameRow.appendChild(nameEl);
+
+  // 星级徽章
+  var starBadge = document.createElement('div');
+  starBadge.className = 'cl-exec-star-badge';
+  var starSvgOutline = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1.16L8.356 5.33H12.78L9.195 7.94L10.565 12.1L7 9.51L3.435 12.1L4.805 7.94L1.22 5.33H5.644L7 1.16Z" stroke="#999" stroke-width="0.8"/></svg>';
+  starBadge.innerHTML = starSvgOutline +
+    '<span class="cl-exec-star-count">' + (model.agentStars || '3.2万') + '</span>';
+  nameRow.appendChild(starBadge);
+  info.appendChild(nameRow);
+
+  var bioEl = document.createElement('p');
+  bioEl.className = 'cl-exec-agent-bio';
+  bioEl.textContent = model.agentBio || '智能行程规划·定制每日行程·优化路线安排';
+  info.appendChild(bioEl);
+
+  row.appendChild(info);
+  card.appendChild(row);
+
+  return card;
+}
+
 // ── 共用 DOM 构建函数 ──
 
 function _clCreateOpenAgentHeader(model) {
   var header = document.createElement('div');
   header.className = 'cl-openagent-header';
+  if (model._outputMode) header.classList.add('cl-openagent-header--output');
   header.style.cursor = 'pointer';
 
-  var caret = document.createElement('span');
-  caret.className = 'cl-openagent-header-caret';
-  caret.textContent = '▼';
-  header.appendChild(caret);
-
-  var icon = document.createElement('span');
-  icon.className = 'cl-openagent-header-icon';
-  icon.setAttribute('aria-hidden', 'true');
-  header.appendChild(icon);
-
-  var title = document.createElement('div');
-  title.className = 'cl-openagent-header-title';
-
-  var primary = document.createElement('span');
-  primary.className = 'cl-openagent-header-primary';
-  primary.textContent = 'OpenAgent @' + (model.agentName || 'Remote Agent');
-  title.appendChild(primary);
-
-  var secondary = document.createElement('span');
-  secondary.className = 'cl-openagent-header-secondary';
-  title.appendChild(secondary);
-
-  header.appendChild(title);
+  // 展开/收起图标
+  var expandIcon = document.createElement('span');
+  expandIcon.className = 'cl-openagent-expand-icon';
+  // 收起态三角（向右）
+  expandIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M9.75 6.79978C10.0833 6.99223 10.0833 7.47336 9.75 7.66581L6.75 9.39786C6.41667 9.59031 6 9.34975 6 8.96485L6 5.50075C6 5.11585 6.41667 4.87528 6.75 5.06773L9.75 6.79978Z" fill="#666666"/></svg>';
+  // 展开态三角（向下）
+  var expandedSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M8.43313 8.98291C8.24068 9.31624 7.75955 9.31624 7.5671 8.98291L5.83505 5.98291C5.6426 5.64958 5.88316 5.23291 6.26806 5.23291L9.73216 5.23291C10.1171 5.23291 10.3576 5.64958 10.1652 5.98291L8.43313 8.98291Z" fill="#666666"/></svg>';
+  header.appendChild(expandIcon);
+
+  // OASN 小图标
+  var oasnBadge = document.createElement('span');
+  oasnBadge.className = 'cl-openagent-badge';
+  oasnBadge.style.backgroundImage = "url(./icon.png)";
+  oasnBadge.style.backgroundSize = 'cover';
+  header.appendChild(oasnBadge);
+
+  // 文字行
+  var textRow = document.createElement('span');
+  textRow.className = 'cl-openagent-text-row';
+
+  var labelOpenAgent = document.createElement('span');
+  labelOpenAgent.className = 'cl-openagent-label';
+  labelOpenAgent.textContent = 'OpenAgent';
+  textRow.appendChild(labelOpenAgent);
+
+  var labelAgent = document.createElement('span');
+  labelAgent.className = 'cl-openagent-agent';
+  labelAgent.textContent = '@' + (model.agentName || 'Remote Agent');
+  textRow.appendChild(labelAgent);
+
+  var labelStatus = document.createElement('span');
+  labelStatus.className = 'cl-openagent-status';
+  labelStatus.textContent = (model.status === 'completed') ? '执行已完成' : '正在执行任务';
+  textRow.appendChild(labelStatus);
+
+  header.appendChild(textRow);
 
   // 点击 header 折叠/展开卡片内容
   header.addEventListener('click', function(e) {
@@ -7230,7 +7597,10 @@ function _clCreateOpenAgentHeader(model) {
     var content = card.querySelector('.cl-thought-chain-content');
     if (!content) return;
     var isCollapsed = content.classList.toggle('cl-content-collapsed');
-    caret.textContent = isCollapsed ? '▶' : '▼';
+    // 切换图标
+    expandIcon.innerHTML = isCollapsed
+      ? '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M9.75 6.79978C10.0833 6.99223 10.0833 7.47336 9.75 7.66581L6.75 9.39786C6.41667 9.59031 6 9.34975 6 8.96485L6 5.50075C6 5.11585 6.41667 4.87528 6.75 5.06773L9.75 6.79978Z" fill="#666666"/></svg>'
+      : '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M8.43313 8.98291C8.24068 9.31624 7.75955 9.31624 7.5671 8.98291L5.83505 5.98291C5.6426 5.64958 5.88316 5.23291 6.26806 5.23291L9.73216 5.23291C10.1171 5.23291 10.3576 5.64958 10.1652 5.98291L8.43313 8.98291Z" fill="#666666"/></svg>';
     if (typeof _cl_setCardUiState === 'function') {
       _cl_setCardUiState(model, { contentCollapsed: isCollapsed });
     }
@@ -7240,8 +7610,8 @@ function _clCreateOpenAgentHeader(model) {
 }
 
 function _clSetOpenAgentHeaderAgent(container, agentName) {
-  var title = container && container.querySelector('.cl-openagent-header-primary');
-  if (title) title.textContent = 'OpenAgent @' + (agentName || 'Remote Agent');
+  var label = container && container.querySelector('.cl-openagent-agent');
+  if (label) label.textContent = '@' + (agentName || 'Remote Agent');
 }
 
 function _clCreateAgentPill(agentName, agentId, agentAvatar) {
@@ -7263,7 +7633,7 @@ function _clCreateAgentPill(agentName, agentId, agentAvatar) {
   console.log('[cl-diag][pill] create agentName=' + JSON.stringify(agentName || '')
     + ' agentId=' + JSON.stringify(agentId || '')
     + ' src=' + JSON.stringify(avatar.getAttribute('src')));
-  avatar.onerror = function() { this.style.display = 'none'; };
+  avatar.onerror = function() { this.style.visibility = 'hidden'; };
   pill.appendChild(avatar);
 
   var nameEl = document.createElement('span');
@@ -7322,6 +7692,224 @@ function _clCreateStepElement(step, isLatest) {
   return item;
 }
 
+
+// ── 动态更新 header 状态文字 ──
+function _clUpdateAgentStatusText(cardNode, status) {
+  var label = cardNode && cardNode.querySelector('.cl-openagent-status');
+  if (label) label.textContent = (status === 'completed') ? '执行已完成' : '正在执行任务';
+  var progressRow = cardNode && cardNode.querySelector('.cl-exec-progress-row');
+  if (progressRow) progressRow.style.display = (status === 'completed') ? 'none' : '';
+}
+
+function _cl_formatStarCount(count) {
+  var n = Number(count);
+  if (!isFinite(n)) return '3.2万';
+  if (n >= 10000) return (n / 10000).toFixed(1).replace(/.0$/, '') + '万';
+  if (n >= 1000) return (n / 1000).toFixed(1).replace(/.0$/, '') + 'k';
+  return String(Math.floor(n));
+}
+
+// ═══════════════════════════════════════════════════════════════
+// V2 执行卡片渲染（2026.6.9+ 新版 UI）
+// ═══════════════════════════════════════════════════════════════
+
+function _clRenderExecutionCardV2(model) {
+  var container = document.createElement('div');
+  container.className = 'cl-remote-agent-card cl-thought-chain cl-exec-v2';
+  if (CL && typeof CL.diagMarkCard === 'function') {
+    CL.diagMarkCard(container, 'execution', { tcid: model.toolCallId || '' });
+  }
+
+  container.appendChild(_clCreateOpenAgentHeaderV2(model));
+
+  var content = document.createElement('div');
+  content.className = 'cl-thought-chain-content cl-thought-chain-content--execution cl-content-collapsed';
+  container.appendChild(content);
+
+  // ── Agent 详情卡片 V2 ──
+  try {
+    var detailCard = _clCreateAgentDetailCardV2(model);
+    content.appendChild(detailCard);
+  } catch(e) {
+    console.warn('[cl-exec-v2] detail card creation failed:', e);
+  }
+
+  // ── 进度文字 V2 ──
+  var progressRow = document.createElement('div');
+  progressRow.className = 'cl-exec-progress-row cl-exec-progress-row-v2';
+  var progressText = document.createElement('p');
+  progressText.className = 'cl-exec-progress-text';
+  progressText.textContent = (model.progressMessage || model.rawText || '').trim() || '思考中，正在了解你的需求';
+  progressRow.appendChild(progressText);
+  var arrowIcon = document.createElement('span');
+  arrowIcon.className = 'cl-exec-progress-arrow';
+  arrowIcon.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 4L9 7L5 10" stroke="#555" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+  progressRow.appendChild(arrowIcon);
+  content.appendChild(progressRow);
+  if (model.status === 'completed') progressRow.style.display = 'none';
+
+  // ── 步骤列表容器（供 _cl_updateCardSteps 使用）──
+  var stepsHeader = document.createElement('div');
+  stepsHeader.className = 'cl-tools-collapse-header cl-tools-collapse-header-v2';
+  var stepsHeaderIcon = document.createElement('span');
+  stepsHeaderIcon.className = 'cl-tools-collapse-header-icon';
+  stepsHeaderIcon.textContent = '▼';
+  stepsHeader.appendChild(stepsHeaderIcon);
+  var stepsHeaderTitle = document.createElement('span');
+  stepsHeaderTitle.className = 'cl-tools-collapse-header-title cl-tools-collapse-header-title-v2';
+  stepsHeaderTitle.textContent = '思考中...';
+  stepsHeader.appendChild(stepsHeaderTitle);
+  content.appendChild(stepsHeader);
+
+  var stepsBody = document.createElement('div');
+  stepsBody.className = 'cl-tools-collapse-body cl-tools-collapse-body-v2 cl-expanded';
+  content.appendChild(stepsBody);
+
+  // ─ Footer（Figma: -由xxx完成 + 星级）──
+  var footer = document.createElement('div');
+  footer.className = 'cl-output-footer cl-output-footer-v2';
+  footer.innerHTML = '<span class="cl-output-footer-text">-由' + (model.agentName || 'Remote Agent') + '完成</span>'
+    + '<span class="cl-output-footer-star"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1.16L8.356 5.33H12.78L9.195 7.94L10.565 12.1L7 9.51L3.435 12.1L4.805 7.94L1.22 5.33H5.644L7 1.16Z" stroke="#999" stroke-width="0.8"/></svg></span>'
+    + '<span class="cl-output-footer-count">' + (model.agentStars || '3.2万') + '</span>';
+  container.appendChild(footer);
+
+  // ── 异步更新真实 Agent 身份 ──
+  if ((model.agentId || model.agentName) && typeof fetchAgentById === 'function') {
+    fetchAgentById(model.agentId, model.agentName).then(function(agent) {
+      if (!agent) return;
+      var avatarEl = container.querySelector('.cl-exec-agent-avatar-v2');
+      var nameEl = container.querySelector('.cl-exec-agent-name-v2');
+      var bioEl = container.querySelector('.cl-exec-agent-bio-v2');
+      if (nameEl) nameEl.textContent = agent.name || model.agentName;
+      if (bioEl && (agent.bio || agent.description)) bioEl.textContent = agent.bio || agent.description;
+      var starsEl = container.querySelector('.cl-exec-star-count-v2');
+      if (starsEl && agent.claws) starsEl.textContent = _cl_formatStarCount(agent.claws);
+      if (starsEl && agent.stars && !agent.claws) starsEl.textContent = _cl_formatStarCount(agent.stars);
+    }).catch(function() {});
+  }
+
+  if (typeof _cl_applyCardUiState === 'function') {
+    _cl_applyCardUiState(container, model);
+  }
+
+  console.log('[cl-exec-v2] execution card built');
+  return container;
+}
+
+// ── V2 Header（粉色背景 + 圆形头像 + 无 @agentName）──
+function _clCreateOpenAgentHeaderV2(model) {
+  var header = document.createElement('div');
+  header.className = 'cl-openagent-header cl-openagent-header-v2';
+  if (model._outputMode) header.classList.add('cl-openagent-header--output');
+  header.style.cursor = 'pointer';
+
+  // 展开/收起图标
+  var expandIcon = document.createElement('span');
+  expandIcon.className = 'cl-openagent-expand-icon';
+  expandIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M9.75 6.79978C10.0833 6.99223 10.0833 7.47336 9.75 7.66581L6.75 9.39786C6.41667 9.59031 6 9.34975 6 8.96485L6 5.50075C6 5.11585 6.41667 4.87528 6.75 5.06773L9.75 6.79978Z" fill="#666666"/></svg>';
+  var expandedSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M8.43313 8.98291C8.24068 9.31624 7.75955 9.31624 7.5671 8.98291L5.83505 5.98291C5.6426 5.64958 5.88316 5.23291 6.26806 5.23291L9.73216 5.23291C10.1171 5.23291 10.3576 5.64958 10.1652 5.98291L8.43313 8.98291Z" fill="#666666"/></svg>';
+  header.appendChild(expandIcon);
+
+  // 圆形灰色头像（替代小徽章）
+  var avatar = document.createElement('span');
+  avatar.className = 'cl-openagent-avatar-v2';
+  header.appendChild(avatar);
+
+  // 文字行：OpenAgent + 状态文字（去掉 @agentName）
+  var textRow = document.createElement('span');
+  textRow.className = 'cl-openagent-text-row';
+
+  var labelOpenAgent = document.createElement('span');
+  labelOpenAgent.className = 'cl-openagent-label';
+  labelOpenAgent.textContent = 'OpenAgent';
+  textRow.appendChild(labelOpenAgent);
+
+  var labelStatus = document.createElement('span');
+  labelStatus.className = 'cl-openagent-status';
+  labelStatus.textContent = (model.status === 'completed') ? '执行已完成' : '正在执行任务';
+  textRow.appendChild(labelStatus);
+
+  header.appendChild(textRow);
+
+  // 点击 header 折叠/展开卡片内容
+  header.addEventListener('click', function(e) {
+    e.stopPropagation();
+    var card = header.closest('.cl-remote-agent-card');
+    if (!card) return;
+    var content = card.querySelector('.cl-thought-chain-content');
+    if (!content) return;
+    var isCollapsed = content.classList.toggle('cl-content-collapsed');
+    expandIcon.innerHTML = isCollapsed
+      ? '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M9.75 6.79978C10.0833 6.99223 10.0833 7.47336 9.75 7.66581L6.75 9.39786C6.41667 9.59031 6 9.34975 6 8.96485L6 5.50075C6 5.11585 6.41667 4.87528 6.75 5.06773L9.75 6.79978Z" fill="#666666"/></svg>'
+      : expandedSvg;
+    if (typeof _cl_setCardUiState === 'function') {
+      _cl_setCardUiState(model, { contentCollapsed: isCollapsed });
+    }
+  });
+
+  return header;
+}
+
+// ─ V2 Agent 详情卡片（大头像 + 右置星级 + 网格点背景）──
+function _clCreateAgentDetailCardV2(model) {
+  var card = document.createElement('div');
+  card.className = 'cl-exec-detail-card cl-exec-detail-card-v2';
+
+  var row = document.createElement('div');
+  row.className = 'cl-exec-detail-row cl-exec-detail-row-v2';
+
+  // 大头像 80×80
+  var avatar = document.createElement('img');
+  avatar.className = 'cl-exec-agent-avatar cl-exec-agent-avatar-v2';
+  avatar.alt = model.agentName || '';
+  avatar.src = './icon.png';
+  avatar.onerror = function() { this.style.visibility = 'hidden'; };
+  row.appendChild(avatar);
+
+  // 信息列
+  var info = document.createElement('div');
+  info.className = 'cl-exec-detail-info cl-exec-detail-info-v2';
+
+  // 名称（无星级徽章，星级右置到卡片右上角）
+  var nameEl = document.createElement('p');
+  nameEl.className = 'cl-exec-agent-name cl-exec-agent-name-v2';
+  nameEl.textContent = model.agentName || 'Remote Agent';
+  info.appendChild(nameEl);
+
+  // 描述文字
+  var bioEl = document.createElement('p');
+  bioEl.className = 'cl-exec-agent-bio cl-exec-agent-bio-v2';
+  bioEl.textContent = model.agentBio || '智能行程规划·定制每日行程·优化路线安排';
+  info.appendChild(bioEl);
+
+  row.appendChild(info);
+  card.appendChild(row);
+
+  // 星级徽章右置到卡片右上角
+  var starBadge = document.createElement('div');
+  starBadge.className = 'cl-exec-star-badge cl-exec-star-badge-v2';
+  var starSvgOutline = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1.16L8.356 5.33H12.78L9.195 7.94L10.565 12.1L7 9.51L3.435 12.1L4.805 7.94L1.22 5.33H5.644L7 1.16Z" stroke="#999" stroke-width="0.8"/></svg>';
+  starBadge.innerHTML = starSvgOutline +
+    '<span class="cl-exec-star-count cl-exec-star-count-v2">' + (model.agentStars || '3.2万') + '</span>';
+  card.appendChild(starBadge);
+
+  return card;
+}
+
+// ── V2 状态文字更新 ──
+function _clUpdateAgentStatusTextV2(cardNode, status) {
+  var label = cardNode && cardNode.querySelector('.cl-openagent-status');
+  if (label) label.textContent = (status === 'completed') ? '执行已完成' : '正在执行任务';
+  // 进度文字行：完成后隐藏
+  var progressRow = cardNode && cardNode.querySelector('.cl-exec-progress-row-v2');
+  if (progressRow) progressRow.style.display = (status === 'completed') ? 'none' : '';
+  // 步骤列表：完成后隐藏
+  var stepsBody = cardNode && cardNode.querySelector('.cl-tools-collapse-body-v2');
+  if (stepsBody) stepsBody.style.display = (status === 'completed') ? 'none' : '';
+  var stepsHeader = cardNode && cardNode.querySelector('.cl-tools-collapse-header-v2');
+  if (stepsHeader) stepsHeader.style.display = (status === 'completed') ? 'none' : '';
+}
+
 // ════════════════════════════════════════════════════════════════
 // MODULE: remote-agent/markdown-renderer.js
 // ════════════════════════════════════════════════════════════════
@@ -7779,11 +8367,20 @@ function _clRenderOutputCard(model, onOpenSidebar) {
     }
   }
 
+  // ── V2 版本判断 ──
+  var isV2 = typeof _clIsHostVersionGte === 'function' && _clIsHostVersionGte('2026.6.9');
+
   if (resultTexts.length === 0 && mediaLinks.length === 0) {
     var placeholder = document.createElement('span');
     placeholder.className = 'cl-remote-agent-card cl-remote-agent-output-placeholder';
     placeholder.style.display = 'none';
     placeholder.__clEmptyOutput = true;
+    // 防止 OpenClaw native 代码读 .textContent 报 undefined.trim()
+    var hiddenText = document.createElement('span');
+    hiddenText.className = 'chat-text';
+    hiddenText.style.display = 'none';
+    hiddenText.textContent = '';
+    placeholder.appendChild(hiddenText);
     if (model.toolCallId) {
       placeholder.dataset.clCardTcid = model.toolCallId;
     }
@@ -7792,34 +8389,54 @@ function _clRenderOutputCard(model, onOpenSidebar) {
   }
 
   var container = document.createElement('div');
-  container.className = 'cl-remote-agent-card cl-thought-chain cl-output-card'
+  var cardClasses = 'cl-remote-agent-card cl-thought-chain cl-output-card'
     + (resultTexts.length > 0 ? ' cl-output-card--pending' : '');
+  if (isV2) cardClasses += ' cl-exec-v2';
+  container.className = cardClasses;
   container.dataset.clCardRole = 'output';
+  // 防止 OpenClaw native 代码读 .textContent 报 undefined.trim()
+  var safetyText = document.createElement('div');
+  safetyText.className = 'chat-text';
+  safetyText.style.display = 'none';
+  safetyText.textContent = '';
+  container.appendChild(safetyText);
+  if (model.toolCallId) container.dataset.clCardTcid = model.toolCallId;
+  // 阻止点击冒泡到原生 tool card handler
+  container.addEventListener('click', function(e) { e.stopPropagation(); });
   if (CL && typeof CL.diagMarkCard === 'function') {
     CL.diagMarkCard(container, 'output', { tcid: model.toolCallId || '' });
   }
 
-  var shellHeader = _clCreateOpenAgentHeader(model);
-  container.appendChild(shellHeader);
-  if (typeof _clSetOpenAgentHeaderAgent === 'function') {
-    _clSetOpenAgentHeaderAgent(container, model.agentName || model.agentId || 'Remote Agent');
+  model._outputMode = true;
+  model.status = 'completed';
+  if (isV2) {
+    var v2Header = _clCreateOpenAgentHeaderV2(model);
+    v2Header.classList.remove('cl-openagent-header--output');
+    container.appendChild(v2Header);
+    if (typeof _clUpdateAgentStatusTextV2 === 'function') {
+      _clUpdateAgentStatusTextV2(container, 'completed');
+    }
+  } else {
+    var shellHeader = _clCreateOpenAgentHeader(model);
+    container.appendChild(shellHeader);
+    if (typeof _clSetOpenAgentHeaderAgent === 'function') {
+      _clSetOpenAgentHeaderAgent(container, model.agentName || model.agentId || 'Remote Agent');
+    }
   }
 
   var content = document.createElement('div');
   content.className = 'cl-thought-chain-content';
   container.appendChild(content);
 
-  // ── Agent Pill ──
-  var pillSlot = document.createElement('div');
-  pillSlot.className = 'cl-thought-chain-pill-slot';
-  var pill = _clCreateAgentPill(model.agentName, model.agentId, model.agentAvatar);
-  pillSlot.appendChild(pill);
-  content.appendChild(pillSlot);
-
-  // ── 分隔线 ──
-  var divider = document.createElement('div');
-  divider.className = 'cl-thought-chain-divider';
-  content.appendChild(divider);
+  // ── V2 Agent 详情卡片 ──
+  if (isV2) {
+    try {
+      var detailCard = _clCreateAgentDetailCardV2(model);
+      content.appendChild(detailCard);
+    } catch(e) {
+      console.warn('[cl-output-v2] detail card creation failed:', e);
+    }
+  }
 
   // ── 附件下载链接 ──
   if (mediaLinks.length > 0 && typeof _clCreateOpenagentMediaLinksSection === 'function') {
@@ -7864,12 +8481,23 @@ function _clRenderOutputCard(model, onOpenSidebar) {
   }
 
   // ── onOpenSidebar 支持：点击展开到侧边栏 ──
-  if (onOpenSidebar && model.rawText) {
+  // 宿主 sidebar 渲染器要求 content 为 { kind: 'markdown', content, rawText } 对象，
+  // kind 必须为 'markdown' 才会进入 markdown 渲染路径，否则显示 "No previewable markdown content."。
+  // travel card 标签（<sh_card>等）sidebar 原生 markdown 解析不认，先 strip 再传。
+  var sidebarRaw = resultText || model.rawText || '';
+  var sidebarText = String(sidebarRaw).replace(/<\/?[a-z]+_card[^>]*>/gi, '');
+  if (typeof _clStripSuppressedTravelTags === 'function') {
+    sidebarText = _clStripSuppressedTravelTags(sidebarText);
+  }
+  if (onOpenSidebar && sidebarText.trim()) {
     container.style.cursor = 'pointer';
     container.addEventListener('click', function(e) {
-      // 不拦截折叠/展开点击
       if (e.target.closest('.cl-tools-collapse-header')) return;
-      onOpenSidebar(model.rawText);
+      onOpenSidebar({ kind: 'markdown', content: sidebarText, rawText: sidebarText });
+      setTimeout(function() {
+        var titleEl = document.querySelector('.chat-sidebar .sidebar-title');
+        if (titleEl) titleEl.textContent = 'OpenAgent @' + (model.agentName || 'Remote Agent');
+      }, 100);
     });
   }
 
@@ -7877,18 +8505,18 @@ function _clRenderOutputCard(model, onOpenSidebar) {
   if ((model.agentId || model.agentName) && typeof fetchAgentById === 'function') {
     fetchAgentById(model.agentId, model.agentName).then(function(agent) {
       if (!agent) return;
-      var pa = container.querySelector('.cl-agent-pill-avatar');
-      var pn = container.querySelector('.cl-agent-pill-name');
-      if (pa && typeof avatarUrl === 'function') {
-        var resolvedAvatar = avatarUrl(agent);
-        console.log('[cl-diag][pill] fetch-update agentId=' + JSON.stringify(model.agentId)
-          + ' name=' + JSON.stringify(agent.name || model.agentName)
-          + ' src=' + JSON.stringify(resolvedAvatar));
-        pa.src = resolvedAvatar;
-        pa.style.display = '';
+      if (isV2) {
+        var avatarElV2 = container.querySelector('.cl-exec-agent-avatar-v2');
+        var nameElV2 = container.querySelector('.cl-exec-agent-name-v2');
+        var bioElV2 = container.querySelector('.cl-exec-agent-bio-v2');
+        if (nameElV2) nameElV2.textContent = agent.name || model.agentName;
+        if (bioElV2 && (agent.bio || agent.description)) bioElV2.textContent = agent.bio || agent.description;
+        var starsElV2 = container.querySelector('.cl-exec-star-count-v2');
+        if (starsElV2 && agent.claws) starsElV2.textContent = _cl_formatStarCount(agent.claws);
+        if (starsElV2 && agent.stars && !agent.claws) starsElV2.textContent = _cl_formatStarCount(agent.stars);
+      } else {
+        _clSetOpenAgentHeaderAgent(container, agent.name || model.agentName);
       }
-      _clSetAgentPillName(container, agent.name || model.agentName);
-      _clSetOpenAgentHeaderAgent(container, agent.name || model.agentName);
     }).catch(function() {});
   }
 
@@ -7896,7 +8524,25 @@ function _clRenderOutputCard(model, onOpenSidebar) {
     _cl_applyCardUiState(container, model);
   }
 
-  console.log('[cl-output] ✅ output card built: results=' + resultTexts.length);
+  // ── Footer ──
+  if (isV2) {
+    var footerV2 = document.createElement('div');
+    footerV2.className = 'cl-output-footer cl-output-footer-v2';
+    footerV2.innerHTML = '<span class="cl-output-footer-text">-由' + (model.agentName || 'Remote Agent') + '完成</span>'
+      + '<span class="cl-output-footer-star"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1.16L8.356 5.33H12.78L9.195 7.94L10.565 12.1L7 9.51L3.435 12.1L4.805 7.94L1.22 5.33H5.644L7 1.16Z" stroke="#999" stroke-width="0.8"/></svg></span>'
+      + '<span class="cl-output-footer-count">' + (model.agentStars || '3.2万') + '</span>';
+    container.appendChild(footerV2);
+  } else {
+    // ── Footer（Figma 131:2091） ──
+    var footer = document.createElement('div');
+    footer.className = 'cl-output-footer';
+    footer.innerHTML = '<span class="cl-output-footer-text">-由' + (model.agentName || 'Remote Agent') + '完成</span>'
+      + '<span class="cl-output-footer-star"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1.16L8.356 5.33H12.78L9.195 7.94L10.565 12.1L7 9.51L3.435 12.1L4.805 7.94L1.22 5.33H5.644L7 1.16Z" stroke="#999" stroke-width="0.8"/></svg></span>'
+      + '<span class="cl-output-footer-count">' + (model.agentStars || '3.2万') + '</span>';
+    container.appendChild(footer);
+  }
+
+  console.log('[cl-output] ✅ output card built: results=' + resultTexts.length + ' v2=' + isV2);
   return container;
 }
 
@@ -8020,6 +8666,8 @@ function _clScheduleOutputCardProcessing(resultSection, model) {
   setTimeout(run, 0);
 }
 
+// ── Sidebar Figma 145:5712 内联样式 ──
+
 // ════════════════════════════════════════════════════════════════
 // MODULE: remote-agent/render-hooks.js
 // ════════════════════════════════════════════════════════════════
@@ -8039,8 +8687,14 @@ var __cl_toolStates = new Map();
 // 每个 entry: { steps: [], phase: 'active'|'completed', cardNode: null, args: {} }
 
 var __cl_lastCallModel = null;   // 同一 render cycle 里 call card 的 model（供 result card 读取 agent 身份）
-var __cl_outputCardCache = new Map();  // toolCallId → cached output DOM
-var __cl_cardUiStates = new Map();     // execution/output 展开状态，避免 OpenClaw rerender 覆盖用户操作
+var __cl_outputCardCache = new Map();    // toolCallId → cached output DOM
+var __cl_executionCardCache = new Map(); // toolCallId → cached historical execution DOM
+var __cl_cardUiStates = new Map();       // execution/output 展开状态，避免 OpenClaw rerender 覆盖用户操作
+var __cl_progressMessageMap = new Map(); // toolCallId → 动态进度文字（来自 response.progress?.safe_status_message）
+
+// ── 诊断：渲染频率计数器 ──
+var __clDiag = { renderCalls: 0, lastDiagTs: 0, version: 'v4-oneshot-20260630' };
+console.log('[cl-diag] render-hooks loaded, version=' + __clDiag.version);
 
 var CL_REMOTE_AGENT_PROGRESS_MODE_TRAVEL_TITLE = 'travel-title';
 var CL_REMOTE_AGENT_PROGRESS_MODE_GENERIC_STREAM = 'generic-stream';
@@ -8336,6 +8990,16 @@ function _cl_ensureRemoteToolState(toolCallId, data, rawText) {
 // ═══════════════════════════════════════════════════════════════
 
 window.__openagentRenderToolCard = function(card, onOpenSidebar) {
+  // ── 诊断：渲染频率计数器 ──
+  __clDiag.renderCalls++;
+  var diagNow = Date.now();
+  if (diagNow - __clDiag.lastDiagTs > 2000) {
+    var rps = (__clDiag.renderCalls / ((diagNow - __clDiag.lastDiagTs) / 1000)).toFixed(1);
+    console.log('[cl-diag] render rate: ' + rps + ' calls/sec, total=' + __clDiag.renderCalls + ', version=' + __clDiag.version);
+    __clDiag.renderCalls = 0;
+    __clDiag.lastDiagTs = diagNow;
+  }
+
   var n = (card && card.name || '').toLowerCase();
   var cardTcid = card && (card.toolCallId || '');
   var cardKind = typeof _clInferToolCardKind === 'function' ? _clInferToolCardKind(card) : (card && card.kind || '');
@@ -8373,19 +9037,34 @@ window.__openagentRenderToolCard = function(card, onOpenSidebar) {
         }
         if (state.phase === 'active') {
           model.status = 'executing';
+          if (typeof _clUpdateAgentStatusTextV2 === 'function' && state.cardNode && state.cardNode.classList.contains('cl-exec-v2')) {
+            _clUpdateAgentStatusTextV2(state.cardNode, 'executing');
+          } else if (typeof _clUpdateAgentStatusText === 'function') {
+            _clUpdateAgentStatusText(state.cardNode, 'executing');
+          }
         }
         // 有 streaming 状态 — 复用或新建
         if (state.cardNode) {
           // Lit 重复调用会复用同一个 DOM 节点；但 OpenClaw 外层 native
           // <details> 可能被 rerender 成 closed。这里重新打开的是外层原生
-          // details，不影响卡片内部的“思考中/思考完成”折叠状态。
+          // details，不影响卡片内部的”思考中/思考完成”折叠状态。
           _cl_applyCardUiState(state.cardNode, { toolCallId: tcid, cardKind: 'call' });
           if (state.phase === 'active') {
             _cl_autoOpenStepsIfUncontrolled(state.cardNode);
           }
-          _cl_forceOpenNativeToolDetails(state.cardNode, 'execution-cache', tcid);
-          if (typeof _cl_scheduleHostShellMark === 'function') _cl_scheduleHostShellMark(state.cardNode);
-          _cl_hideHostRawText(state.cardNode);
+          // ── 更新进度文字：来自 response.progress?.safe_status_message ──
+          var progressEl = state.cardNode.querySelector('.cl-exec-progress-text');
+          if (progressEl && model.rawText) {
+            var msg = (model.rawText || '').trim();
+            if (msg) progressEl.textContent = msg;
+          }
+          // ── 一次性外壳初始化：首次渲染时打开 native details + 隐藏 raw text，之后永久跳过 ──
+          if (!state.cardNode.__clShellReady) {
+            state.cardNode.__clShellReady = true;
+            _cl_forceOpenNativeToolDetails(state.cardNode, 'execution-cache', tcid);
+            if (typeof _cl_scheduleHostShellMark === 'function') _cl_scheduleHostShellMark(state.cardNode);
+            _cl_hideHostRawText(state.cardNode);
+          }
           return state.cardNode;
         }
 
@@ -8423,6 +9102,20 @@ window.__openagentRenderToolCard = function(card, onOpenSidebar) {
 
       // 无状态 → 刷新/历史态。前端 store 如果有同一 toolCallId 的卡片快照，
       // 就用快照参数重建 steps；没有 store 时仍展示完成态外壳。
+
+      // 缓存：历史态 execution card 只创建一次，Lit 重复调用时复用（与 output card 逻辑一致）
+      var cachedExecution = tcid ? __cl_executionCardCache.get(tcid) : null;
+      if (cachedExecution && cachedExecution.isConnected) {
+        _cl_applyCardUiState(cachedExecution, { toolCallId: tcid, cardKind: 'call' });
+        if (!cachedExecution.__clShellReady) {
+          cachedExecution.__clShellReady = true;
+          _cl_forceOpenNativeToolDetails(cachedExecution, 'execution-history-cache', tcid);
+          if (typeof _cl_scheduleHostShellMark === 'function') _cl_scheduleHostShellMark(cachedExecution);
+          _cl_hideHostRawText(cachedExecution);
+        }
+        return cachedExecution;
+      }
+
       var storedCallRecord = tcid && typeof _clRemoteAgentProgressStore !== 'undefined' && _clRemoteAgentProgressStore
         ? _clRemoteAgentProgressStore.get(tcid)
         : null;
@@ -8439,10 +9132,16 @@ window.__openagentRenderToolCard = function(card, onOpenSidebar) {
       model.cardKind = 'call';
       model.status = 'completed';
       var historyNode = _clRenderExecutionCard(model);
+      if (historyNode && historyNode.classList && historyNode.classList.contains('cl-exec-v2')) {
+        if (typeof _clUpdateAgentStatusTextV2 === 'function') _clUpdateAgentStatusTextV2(historyNode, 'completed');
+      } else if (typeof _clUpdateAgentStatusText === 'function') {
+        _clUpdateAgentStatusText(historyNode, 'completed');
+      }
       _cl_finalizeCard(historyNode, model._bufferedSteps || []);
       _cl_forceOpenNativeToolDetails(historyNode, 'execution-history', tcid);
       if (typeof _cl_scheduleHostShellMark === 'function') _cl_scheduleHostShellMark(historyNode);
       _cl_hideHostRawText(historyNode);
+      if (tcid) __cl_executionCardCache.set(tcid, historyNode);
       console.log('[cl-render] 🗂️ built historical call card, tcid=' + tcid.substring(0, 8));
       return historyNode;
     }
@@ -8495,9 +9194,13 @@ window.__openagentRenderToolCard = function(card, onOpenSidebar) {
       var cachedOutput = resTcid ? __cl_outputCardCache.get(resTcid) : null;
       if (cachedOutput && cachedOutput.isConnected) {
         _cl_applyCardUiState(cachedOutput, { toolCallId: resTcid, cardKind: 'result' });
-        _cl_forceOpenNativeToolDetails(cachedOutput, 'output-cache', resTcid);
-        if (typeof _cl_scheduleHostShellMark === 'function') _cl_scheduleHostShellMark(cachedOutput);
-        _cl_hideHostRawText(cachedOutput);
+        // ── 一次性外壳初始化：首次渲染时打开 native details + 隐藏 raw text，之后永久跳过 ──
+        if (!cachedOutput.__clShellReady) {
+          cachedOutput.__clShellReady = true;
+          _cl_forceOpenNativeToolDetails(cachedOutput, 'output-cache', resTcid);
+          if (typeof _cl_scheduleHostShellMark === 'function') _cl_scheduleHostShellMark(cachedOutput);
+          _cl_hideHostRawText(cachedOutput);
+        }
         return cachedOutput;
       }
 
@@ -8580,6 +9283,8 @@ function _cl_replayBufferedSteps(toolCallId, state) {
 
 function _cl_hideHostRawText(cardNode) {
   if (!cardNode) return;
+  // 幂等性守卫：如果父链已经标记为隐藏，跳过重复操作
+  if (cardNode.closest && cardNode.closest('.cl-remote-agent-raw-hidden')) return;
   function hide() {
     var hosts = _cl_collectRawTextHosts(cardNode);
     for (var h = 0; h < hosts.length; h++) {
@@ -8589,10 +9294,7 @@ function _cl_hideHostRawText(cardNode) {
   hide();
   if (typeof requestAnimationFrame === 'function') requestAnimationFrame(hide);
   setTimeout(hide, 0);
-  setTimeout(hide, 80);
-  setTimeout(hide, 250);
-  setTimeout(hide, 800);
-  setTimeout(hide, 2000);
+  setTimeout(hide, 200);
 }
 
 function _cl_isRemoteToolNameText(text) {
@@ -8826,8 +9528,6 @@ function _cl_forceOpenNativeToolDetails(node, source, tcid) {
   // openNearest 是幂等的（已 open 不重复操作），不需要防抖。
   openNearest();
   if (typeof requestAnimationFrame === 'function') requestAnimationFrame(openNearest);
-  setTimeout(openNearest, 0);
-  setTimeout(openNearest, 80);
   setTimeout(openNearest, 300);  // 兜底：慢速 Lit render / 异步 wrapper 挂载
 }
 
@@ -8921,6 +9621,12 @@ function _cl_applyStoredRecordToModel(model, record) {
   if (!model.agentAvatar) {
     model.agentAvatar = args.agent_avatar || args.agentAvatar || args.avatar || args.avatar_url || args.avatarUrl || null;
   }
+  if (!model.agentBio) {
+    model.agentBio = args.agent_bio || args.agentBio || '';
+  }
+  if (!model.agentStars) {
+    model.agentStars = args.agent_stars || args.agentStars || '3.2万';
+  }
   var identity = CL && typeof CL.getAgentIdentity === 'function'
     ? CL.getAgentIdentity(model.agentId, model.agentName)
     : null;
@@ -9326,8 +10032,6 @@ function _cl_updateCardSteps(card, steps) {
     var stepEl = _clCreateStepElement(steps[i], i === steps.length - 1);
     body.appendChild(stepEl);
   }
-
-  _cl_forceOpenNativeToolDetails(card, 'steps-update', card.dataset && card.dataset.clCardTcid || '');
 }
 
 function _cl_autoOpenStepsIfUncontrolled(card) {
@@ -9335,7 +10039,11 @@ function _cl_autoOpenStepsIfUncontrolled(card) {
   var uiState = _cl_getCardUiState(card);
   if (uiState && uiState.stepsExpanded !== undefined) return;
 
-  var body = card.querySelector('.cl-tools-collapse-body');
+  // 缓存 body 引用，避免 5-16Hz Lit rerender 时重复 querySelector
+  if (!card.__clStepsBody) {
+    card.__clStepsBody = card.querySelector('.cl-tools-collapse-body');
+  }
+  var body = card.__clStepsBody;
   if (!body) return;
 
   body.classList.remove('cl-collapsed');
@@ -9390,6 +10098,11 @@ function _cl_countChunkTypes(chunks) {
 }
 
 function _cl_finalizeCard(card, steps) {
+  if (card && card.classList && card.classList.contains('cl-exec-v2')) {
+    if (typeof _clUpdateAgentStatusTextV2 === 'function') _clUpdateAgentStatusTextV2(card, 'completed');
+  } else if (typeof _clUpdateAgentStatusText === 'function') {
+    _clUpdateAgentStatusText(card, 'completed');
+  }
   var header = card.querySelector('.cl-tools-collapse-header-title');
   if (header) {
     header.textContent = '思考完成';
@@ -9400,6 +10113,20 @@ function _cl_finalizeCard(card, steps) {
     dots[i].className = 'cl-tools-collapse-step-check';
   }
 
+  // 执行完成后隐藏第一个 chat-bubble（execution card），仅保留 output card
+  // 仅 V2 启用：V1 的 output card 布局不同，不宜隐藏 execution bubble
+  var isV2Finalize = typeof _clIsHostVersionGte === 'function' && _clIsHostVersionGte('2026.6.9');
+  if (isV2Finalize && card && !card.__clBubbleHidden) {
+    card.__clBubbleHidden = true;
+    var bubble = card.closest && card.closest('.chat-bubble');
+    if (bubble) {
+      // 延迟隐藏，等 output card（第二个 bubble）渲染完毕
+      setTimeout(function() {
+        bubble.style.display = 'none';
+      }, 500);
+    }
+  }
+
   // Finalize 只负责把 execution card 标记为完成态。
   // 不在这里强制折叠 steps：OpenClaw 会周期性 rerender，若 finalize 每次都
   // 写 cl-collapsed，会覆盖用户手动展开后的状态。
@@ -9645,7 +10372,7 @@ var _clObserverTarget = null;
 
 const _clObserver = new MutationObserver(() => {
   if (_clDebounceTimer) clearTimeout(_clDebounceTimer);
-  _clDebounceTimer = setTimeout(_debouncedClScan, 50); // Reduced from 500ms to 50ms to fix UI flash
+  _clDebounceTimer = setTimeout(_debouncedClScan, 300); // Debounce to reduce DOM churn feedback loops
 });
 
 function _debouncedClScan() {