openclaw-openagent 1.0.12 → 1.0.14

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

@@ -1,342 +0,0 @@
-// ── OpenAgent Output Card — Agent 完成态 UI ──
-//
-// 输入: OpenAgentCardModel (from tool-card-model.js), onOpenSidebar callback
-// 输出: DOM Node (嵌入 Lit template)
-//
-// 显示内容:
-//   - Agent Pill（头像 + @名称）
-//   - 分隔线
-//   - 最终结果（如有）
-//
-// UI 结构复用 shared thought-chain styles；数据来源是 RenderHook model。
-
-function _clRenderOutputCard(model, onOpenSidebar) {
-  var mediaLinks = typeof _clExtractOpenagentMediaLinksFromModel === 'function'
-    ? _clExtractOpenagentMediaLinksFromModel(model)
-    : [];
-
-  // ── 从 chunks 提取最终结果。SSE 思考链只由 call/execution card 展示，避免重复。──
-  var resultTexts = [];
-  for (var i = 0; i < model.chunks.length; i++) {
-    var chunk = model.chunks[i];
-    if (chunk.type === 'result') {
-      var resultText = typeof _clStripOpenagentMediaLines === 'function'
-        ? _clStripOpenagentMediaLines(chunk.text)
-        : chunk.text;
-      if (_clShouldRenderOutputText(resultText)) resultTexts.push(resultText);
-    } else if (chunk.type === 'text') {
-      // 远端 Agent 最终回复是普通文本（toolResult(reply.content)），
-      // chunk-parser 归为 type='text'，也应作为最终结果显示
-      var textChunk = typeof _clStripOpenagentMediaLines === 'function'
-        ? _clStripOpenagentMediaLines(chunk.text)
-        : chunk.text;
-      if (_clShouldRenderOutputText(textChunk)) resultTexts.push(textChunk);
-    } else if (chunk.type === 'error') {
-      var errorText = chunk.text || model.rawText || '远端 Agent 调用失败';
-      if (_clShouldRenderOutputText(errorText)) resultTexts.push(errorText);
-    }
-  }
-
-  // ── 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;
-    }
-    console.log('[cl-output] hidden empty output tcid=' + String(model.toolCallId || '').substring(0, 8));
-    return placeholder;
-  }
-
-  var container = document.createElement('div');
-  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 || '' });
-  }
-
-  model._outputMode = true;
-  model.status = model.isError ? 'failed' : 'completed';
-  if (isV2) {
-    var v2Header = _clCreateOpenAgentHeaderV2(model);
-    v2Header.classList.remove('cl-openagent-header--output');
-    container.appendChild(v2Header);
-    if (typeof _clUpdateAgentStatusTextV2 === 'function') {
-      _clUpdateAgentStatusTextV2(container, model.status);
-    }
-  } 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);
-
-  // ── 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') {
-    var mediaSection = _clCreateOpenagentMediaLinksSection(mediaLinks);
-    if (mediaSection) content.appendChild(mediaSection);
-  }
-
-  // ── 最终结果展示 ──
-  if (resultTexts.length > 0) {
-    var resultSection = document.createElement('div');
-    resultSection.className = 'cl-output-result cl-output-result--pending';
-    resultSection.dataset.clRenderState = 'pending';
-    var resultText = resultTexts.join('\n\n');
-    resultSection.dataset.clToolCallId = model.toolCallId || '';
-
-    if (CL && typeof CL.extractTripCardRefsFromText === 'function') {
-      var refs = CL.extractTripCardRefsFromText(resultText);
-      resultSection.dataset.clRouteIds = refs.routeIds.join(',');
-      resultSection.dataset.clCardRefs = refs.cardRefs.join(',');
-      resultSection.dataset.clCardIds = refs.cardIds.join(',');
-      resultSection.dataset.clUnitIds = refs.unitIds.join(',');
-    }
-
-    // 使用 OpenAgent 自有 markdown renderer（不依赖宿主 marked.js）
-    if (typeof _clRenderOutputMarkdown === 'function') {
-      try {
-        resultSection.innerHTML = _clRenderOutputMarkdown(resultText);
-      } catch (e) {
-        resultSection.textContent = resultText;
-      }
-    } else {
-      resultSection.textContent = resultText;
-    }
-
-    content.appendChild(resultSection);
-    _clScheduleOutputCardProcessing(resultSection, model);
-  }
-
-  // ── 错误状态 ──
-  if (model.isError) {
-    container.classList.add('cl-remote-agent-card--error');
-  }
-
-  // ── onOpenSidebar 支持：点击展开到侧边栏 ──
-  // 宿主 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({ 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);
-    });
-  }
-
-  // ── 异步更新真实 Agent 身份 ──
-  if ((model.agentId || model.agentName) && typeof fetchAgentById === 'function') {
-    fetchAgentById(model.agentId, model.agentName).then(function(agent) {
-      if (!agent) return;
-      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');
-        var agentBioV2 = typeof _clGetAgentDescriptionText === 'function'
-          ? _clGetAgentDescriptionText(agent)
-          : (agent.bio || agent.description || '');
-        if (nameElV2) nameElV2.textContent = agent.name || model.agentName;
-        if (bioElV2 && agentBioV2) bioElV2.textContent = agentBioV2;
-        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);
-      }
-    }).catch(function() {});
-  }
-
-  // ── 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);
-  }
-
-  if (typeof _cl_applyCardUiState === 'function') {
-    _cl_applyCardUiState(container, model);
-  }
-
-  console.log('[cl-output] ✅ output card built: results=' + resultTexts.length + ' v2=' + isV2);
-  return container;
-}
-
-function _clShouldRenderOutputText(text) {
-  var value = String(text || '').trim();
-  if (!value) return false;
-
-  if (_clLooksLikeStructuredDataFragment(value)) return false;
-
-  // output 卡片只展示给用户看的最终内容。远端 SSE 的 data/think 事件
-  // 是旅行卡片原料或执行过程，不应该作为正文出现在 output 里。
-  if (/"msgType"\s*:/.test(value) && /"dataType"\s*:\s*"(data|think)"/.test(value)) {
-    return false;
-  }
-
-  if (value.charAt(0) === '{' && value.charAt(value.length - 1) === '}') {
-    try {
-      var obj = JSON.parse(value);
-      if (obj && (obj.dataType === 'data' || obj.dataType === 'think')) return false;
-      if (obj && obj.msgType != null && obj.dataType && obj.dataType !== 'result') return false;
-    } catch (e) {}
-  }
-
-  return true;
-}
-
-function _clLooksLikeStructuredDataFragment(value) {
-  value = String(value || '').trim();
-  if (!value) return false;
-
-  // Pretty/truncated JSON payloads may be split into text chunks before they can
-  // be parsed as full objects. Those fragments are data source material, not UI
-  // output. Keep this narrow to Trip/itinerary-style payload keys.
-  if (/^[,}\]\s]+$/.test(value)) return true;
-  if (/^\.\.\.\s*\(truncated\)\s*\.\.\.$/.test(value)) return true;
-
-  var dataKeyRe = /"(?:msgType|dataType|sessionId|queryMsgId|itineraryId|itineraryVersionInfo|unitList|unitType|unitContexts?|dayList|trafficInfo|trafficPlanInfo|poiInfo|hotelInfo|foodData|budgetData|rankName|hotScore|remarkText|keywords|sourceType|departure|arrival)"\s*:/;
-  if (!dataKeyRe.test(value)) return false;
-
-  var structuralChars = (value.match(/[{}\[\]",:]/g) || []).length;
-  if (structuralChars >= 6) return true;
-
-  // Some split lines start midway through an object, for example
-  // `"trafficPlanInfo":{...` or `,"arrival":{...`.
-  if (/^\s*,?\s*"(?:unitType|trafficInfo|trafficPlanInfo|poiInfo|hotelInfo|remarkText|keywords|departure|arrival)"\s*:/.test(value)) {
-    return true;
-  }
-
-  return false;
-}
-
-function _clRevealOutputResult(resultSection, reason) {
-  if (!resultSection) return;
-  resultSection.classList.remove('cl-output-result--pending');
-  var card = resultSection.closest && resultSection.closest('.cl-output-card');
-  if (card) {
-    card.classList.remove('cl-output-card--pending');
-  }
-  if (resultSection.dataset) {
-    resultSection.dataset.clRenderState = 'ready';
-    resultSection.dataset.clRenderReadyReason = reason || 'ready';
-  }
-}
-
-function _clHasTripCardContent(el) {
-  if (!el) return false;
-  var html = el.innerHTML || '';
-  var text = el.textContent || '';
-  // Raw card tags (HTML-encoded or literal)
-  if (/(?:&lt;|<)(?:sh_card|tr_card|i_card|bg_card|fr_card|time_data_card)(?:&gt;|>)/.test(html)) return true;
-  if (text.includes('<sh_card>') || text.includes('<tr_card>') || text.includes('<i_card>') ||
-      text.includes('<bg_card>') || text.includes('<fr_card>') ||
-      text.includes('<time_data_card>')) return true;
-  // Ready marker
-  if (html.includes('[TRIP_CARDS_READY]')) return true;
-  // Unprocessed travel links
-  if (el.querySelector && el.querySelector('a[href*="poi_"], a[href*="hotel_"], a[href*="lodgingArea_"], a[href*="ctx_"]')) return true;
-  return false;
-}
-
-function _clScheduleOutputCardProcessing(resultSection, model) {
-  if (!resultSection) return;
-
-  var attempts = 0;
-  function run() {
-    attempts++;
-
-    // Only process if the output actually contains travel card content.
-    // This prevents non-travel remote-agent outputs from triggering
-    // trip-card-data.json fetches and polluting CL.tripCardDataFetchFailed.
-    if (!_clHasTripCardContent(resultSection)) {
-      _clRevealOutputResult(resultSection, 'plain-output');
-      return;
-    }
-
-    if (typeof _processCustomCards === 'function') {
-      try {
-        if (model && model.toolCallId && resultSection.dataset) {
-          resultSection.dataset.clToolCallId = resultSection.dataset.clToolCallId || model.toolCallId;
-        }
-        _processCustomCards(resultSection);
-      } catch (err) {
-        console.warn('[cl-output] trip card processing failed:', err && err.message);
-      }
-    }
-
-    var processed = resultSection.dataset && resultSection.dataset.clProcessed;
-    if (processed === '1') {
-      _clRevealOutputResult(resultSection, 'trip-rendered');
-      return;
-    }
-    if (attempts >= 20) {
-      _clRevealOutputResult(resultSection, processed === 'partial' ? 'trip-partial-timeout' : 'trip-timeout');
-      return;
-    }
-
-    var delay = attempts < 4 ? 250 : 1000;
-    setTimeout(run, delay);
-  }
-
-  setTimeout(run, 0);
-}
-
-// ── Sidebar Figma 145:5712 内联样式 ──