openclaw-openagent 1.0.9 → 1.0.11

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

@@ -5,7 +5,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() {

package/src/plugin-ui/modules/loader/shared-state.js

@@ -31,6 +31,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)
@@ -39,6 +42,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;
 

package/src/plugin-ui/modules/remote-agent/execution-card.js

@@ -11,6 +11,11 @@
 // 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') {
@@ -20,111 +25,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);
+  // ── Agent 详情卡片（Figma 346:181） ──
+  try {
+    var detailCard = _clCreateAgentDetailCard(model);
+    content.appendChild(detailCard);
+  } catch(e) {
+    console.warn('[cl-exec] detail card creation failed:', e);
   }
 
-  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);
+  // ── 进度文字（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() {});
   }
@@ -133,40 +72,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) {
@@ -176,7 +178,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 });
     }
@@ -186,8 +191,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) {
@@ -209,7 +214,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');
@@ -267,3 +272,221 @@ 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' : '';
+}