openclaw-openagent 1.0.9 → 1.0.12

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,46 @@ 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);
+  // ── Agent 详情卡片（Figma 346:181） ──
+  try {
+    var detailCard = _clCreateAgentDetailCard(model);
+    content.appendChild(detailCard);
+  } catch(e) {
+    console.warn('[cl-exec] detail card creation failed:', e);
   }
 
-  // 折叠/展开
-  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');
+      var agentBio = _clGetAgentDescriptionText(agent);
+      // avatar 保持 icon.png，不覆盖
+      if (nameEl) nameEl.textContent = agent.name || model.agentName;
+      if (bioEl && agentBio) bioEl.textContent = agentBio;
+      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 +73,137 @@ 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;
 }
 
-// ── 共用 DOM 构建函数 ──
+function _clGetAgentDescriptionText(model) {
+  if (typeof _clPickAgentDescription === 'function') {
+    var direct = _clPickAgentDescription(model || {});
+    if (direct) return direct;
+    if (model && typeof CL !== 'undefined' && CL && typeof CL.getAgentIdentity === 'function') {
+      var identity = CL.getAgentIdentity(
+        model.agentId || model.agent_id || model.id || model.tag,
+        model.agentName || model.agent_name || model.name
+      );
+      var identityBio = _clPickAgentDescription(identity || {});
+      if (identityBio) return identityBio;
+    }
+    return '';
+  }
+  if (!model) return '';
+  return model.agentBio || model.bio || model.description || model.desc || model.agentDescription || model.agent_description || model.MOM || '';
+}
 
-function _clCreateOpenAgentHeader(model) {
-  var header = document.createElement('div');
-  header.className = 'cl-openagent-header';
-  header.style.cursor = 'pointer';
+function _clSyncOutputFooterVisibility(card, isCollapsed) {
+  if (!card || !card.querySelector || !card.querySelector('.cl-openagent-header--output')) return;
+  var footers = card.querySelectorAll('.cl-output-footer');
+  for (var i = 0; i < footers.length; i++) {
+    footers[i].style.display = isCollapsed ? 'none' : '';
+  }
+}
 
-  var caret = document.createElement('span');
-  caret.className = 'cl-openagent-header-caret';
-  caret.textContent = '▼';
-  header.appendChild(caret);
+function _clGetAgentStatusText(status) {
+  if (status === 'completed') return '执行已完成';
+  if (status === 'failed' || status === 'error') return '执行失败';
+  return '正在执行任务';
+}
 
-  var icon = document.createElement('span');
-  icon.className = 'cl-openagent-header-icon';
-  icon.setAttribute('aria-hidden', 'true');
-  header.appendChild(icon);
+function _clIsAgentTerminalStatus(status) {
+  return status === 'completed' || status === 'failed' || status === 'error';
+}
 
-  var title = document.createElement('div');
-  title.className = 'cl-openagent-header-title';
+// ── Agent 详情卡片（Figma 266:11136） ──
+function _clCreateAgentDetailCard(model) {
+  var card = document.createElement('div');
+  card.className = 'cl-exec-detail-card';
 
-  var primary = document.createElement('span');
-  primary.className = 'cl-openagent-header-primary';
-  primary.textContent = 'OpenAgent @' + (model.agentName || 'Remote Agent');
-  title.appendChild(primary);
+  var row = document.createElement('div');
+  row.className = 'cl-exec-detail-row';
 
-  var secondary = document.createElement('span');
-  secondary.className = 'cl-openagent-header-secondary';
-  title.appendChild(secondary);
+  // 头像 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 xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M6.46401 1.8327C6.66621 1.36177 7.33396 1.36174 7.53612 1.8327L8.82412 4.83481L12.0718 5.1373C12.5808 5.18469 12.7873 5.8177 12.4039 6.15586L9.95148 8.31772L10.6687 11.5101C10.7809 12.0098 10.2404 12.4012 9.80052 12.139L7.00006 10.4699L4.19904 12.139C3.75913 12.4012 3.21924 12.0098 3.33145 11.5101L4.04808 8.31772L1.59626 6.15586C1.21282 5.81777 1.4189 5.18488 1.9278 5.1373L5.17601 4.83481L6.46401 1.8327ZM5.89435 5.8226L3.10073 6.08237L5.20905 7.94118L4.59325 10.6818L7.00006 9.24798L9.40575 10.6818L8.79108 7.94118L10.8983 6.08237L8.10521 5.8226L6.9995 3.24603L5.89435 5.8226Z" fill="#555555"/></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 = _clGetAgentDescriptionText(model);
+  info.appendChild(bioEl);
+
+  row.appendChild(info);
+  card.appendChild(row);
+
+  return card;
+}
 
-  header.appendChild(title);
+// ── 共用 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 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';
+  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 = _clGetAgentStatusText(model.status);
+  textRow.appendChild(labelStatus);
+
+  header.appendChild(textRow);
 
   // 点击 header 折叠/展开卡片内容
   header.addEventListener('click', function(e) {
@@ -176,7 +213,11 @@ 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 ? '▶' : '▼';
+    _clSyncOutputFooterVisibility(card, 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 +227,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 +250,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 +308,223 @@ function _clCreateStepElement(step, isLatest) {
 
   return item;
 }
+
+
+// ── 动态更新 header 状态文字 ──
+function _clUpdateAgentStatusText(cardNode, status) {
+  var label = cardNode && cardNode.querySelector('.cl-openagent-status');
+  if (label) label.textContent = _clGetAgentStatusText(status);
+  var progressRow = cardNode && cardNode.querySelector('.cl-exec-progress-row');
+  if (progressRow) progressRow.style.display = _clIsAgentTerminalStatus(status) ? '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');
+      var agentBio = _clGetAgentDescriptionText(agent);
+      if (nameEl) nameEl.textContent = agent.name || model.agentName;
+      if (bioEl && agentBio) bioEl.textContent = agentBio;
+      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 = _clGetAgentStatusText(model.status);
+  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');
+    _clSyncOutputFooterVisibility(card, 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>'
+      : 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 = _clGetAgentDescriptionText(model);
+  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 xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M6.46401 1.8327C6.66621 1.36177 7.33396 1.36174 7.53612 1.8327L8.82412 4.83481L12.0718 5.1373C12.5808 5.18469 12.7873 5.8177 12.4039 6.15586L9.95148 8.31772L10.6687 11.5101C10.7809 12.0098 10.2404 12.4012 9.80052 12.139L7.00006 10.4699L4.19904 12.139C3.75913 12.4012 3.21924 12.0098 3.33145 11.5101L4.04808 8.31772L1.59626 6.15586C1.21282 5.81777 1.4189 5.18488 1.9278 5.1373L5.17601 4.83481L6.46401 1.8327ZM5.89435 5.8226L3.10073 6.08237L5.20905 7.94118L4.59325 10.6818L7.00006 9.24798L9.40575 10.6818L8.79108 7.94118L10.8983 6.08237L8.10521 5.8226L6.9995 3.24603L5.89435 5.8226Z" fill="#555555"/></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 = _clGetAgentStatusText(status);
+  // 进度文字行：完成后隐藏
+  var progressRow = cardNode && cardNode.querySelector('.cl-exec-progress-row-v2');
+  if (progressRow) progressRow.style.display = _clIsAgentTerminalStatus(status) ? 'none' : '';
+  // 步骤列表：完成后隐藏
+  var stepsBody = cardNode && cardNode.querySelector('.cl-tools-collapse-body-v2');
+  if (stepsBody) stepsBody.style.display = _clIsAgentTerminalStatus(status) ? 'none' : '';
+  var stepsHeader = cardNode && cardNode.querySelector('.cl-tools-collapse-header-v2');
+  if (stepsHeader) stepsHeader.style.display = _clIsAgentTerminalStatus(status) ? 'none' : '';
+}

package/src/plugin-ui/modules/remote-agent/native-style-adapter.js

@@ -8,30 +8,12 @@
 
 (function _clInitNativeStyleAdapter() {
   var _clNativeStyleSampled = false;
+  var hostAdapter = CL.hostAdapter || {};
+  var nativeStyle = hostAdapter.nativeStyle || {};
 
-  var SHELL_SELECTORS = [
-    '.chat-tool-card:not(:has(.cl-remote-agent-card))',
-    '.chat-tool-msg-collapse:not(:has(.cl-remote-agent-card))',
-    '.chat-tools-collapse:not(:has(.cl-remote-agent-card))',
-    // v5.x+ variants
-    '.tool-card:not(:has(.cl-remote-agent-card))',
-    '.chat-tool-card__wrapper:not(:has(.cl-remote-agent-card))'
-  ];
-
-  var SUMMARY_SELECTORS = [
-    '.chat-tool-card__header',
-    '.chat-tool-card__title',
-    '.chat-tool-msg-summary:not(.cl-remote-agent-host-shell *)',
-    '.chat-tools-summary:not(.cl-remote-agent-host-shell *)',
-    // v5.x+ variants
-    '.tool-card__header',
-    '.tool-card__title'
-  ];
-
-  var INDENT_SELECTORS = [
-    '.chat-group.tool:not(:has(.cl-remote-agent-card))',
-    '.chat-bubble:not(:has(.cl-remote-agent-card))'
-  ];
+  var SHELL_SELECTORS = nativeStyle.shellSelectors || [];
+  var SUMMARY_SELECTORS = nativeStyle.summarySelectors || [];
+  var INDENT_SELECTORS = nativeStyle.indentSelectors || [];
 
   // Fallback 默认值（和当前 styles.js 折叠态写死值保持一致，避免跳变）
   var FALLBACKS = {