openclaw-openagent 1.0.0

package/src/plugin-ui/modules/agent-book/remote-agent-tool/components-core.js

@@ -0,0 +1,293 @@
+// ── Agent Card 内嵌卡片 ──
+
+/** 通过 agent_id / name / query 获取单个 Agent 详情 */
+async function fetchAgentById(identifier, fallbackName) {
+  const keys = [];
+  const pushKey = (value) => {
+    const key = String(value || '').trim();
+    if (key && !keys.includes(key)) keys.push(key);
+  };
+  pushKey(identifier);
+  pushKey(fallbackName);
+
+  // 1. 先从缓存精确匹配
+  const identity = CL && typeof CL.getAgentIdentity === 'function'
+    ? CL.getAgentIdentity(identifier, fallbackName)
+    : null;
+  if (identity) return identity;
+
+  const cached = CL.agentCache.find(a =>
+    keys.includes(a.id) || keys.includes(a.tag) || keys.includes(a.name)
+  );
+  if (cached) return cached;
+
+  // 2. 用列表 API 加载全量数据（如果缓存为空），按 UUID / 名字精确匹配
+  try {
+    const agents = await fetchAgents(); // 会更新 agentCache
+    const exact = agents.find(a =>
+      keys.includes(a.id) || keys.includes(a.tag) || keys.includes(a.name)
+    );
+    if (exact) return exact;
+  } catch (err) {
+    console.warn('[openagent] fetchAgentById list error:', err);
+  }
+
+  // 3. 精确匹配失败 → 逐个关键词搜索。当前后端不支持 UUID 语义搜索时，
+  //    fallbackName 仍能命中真实 Agent，从而拿到 avatar 等展示字段。
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    try {
+      const res = await fetch(`${SEARCH_API}?q=${encodeURIComponent(key)}&top_k=5`);
+      if (!res.ok) continue;
+      const data = await res.json();
+      const list = (data.results || []).map(mapAgent);
+      const exact = list.find(a =>
+        keys.includes(a.id) || keys.includes(a.tag) || keys.includes(a.name)
+      );
+      if (exact) {
+        if (CL && typeof CL.storeAgentIdentity === 'function') CL.storeAgentIdentity(exact);
+        return exact;
+      }
+      if (list[0]) {
+        if (CL && typeof CL.storeAgentIdentity === 'function') CL.storeAgentIdentity(list[0]);
+        return list[0];
+      }
+    } catch (err) {
+      console.warn('[openagent] fetchAgentById search error:', err);
+    }
+  }
+  return null;
+}
+
+/** 构建 Agent 卡片 DOM（使用统一 AgentCard 组件） */
+function buildAgentCard(agent) {
+  return AgentCard(agent, {
+    mode: 'inline',
+    onAction: (a) => {
+      const textarea = document.querySelector('.agent-chat__input textarea');
+      if (textarea) {
+        const current = textarea.value;
+        textarea.value = current + (current && !current.endsWith(' ') ? ' ' : '') + `@${a.name} `;
+        textarea.focus();
+        textarea.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    }
+  });
+}
+
+// ── 组件注册表 ──
+
+const OPENAGENT_COMPONENTS = {};
+
+/** 注册一个自定义组件类型 */
+function registerComponent(type, handler) {
+  OPENAGENT_COMPONENTS[type] = handler;
+}
+
+// 注册：Agent Card
+registerComponent('agent-card', async (data) => {
+  const searchTerm = data.agent_id || data.agentId || data.id || data.name || data.query;
+  if (!searchTerm) return null;
+  const agent = await fetchAgentById(searchTerm);
+  return agent ? buildAgentCard(agent) : null;
+});
+
+// ── 组件协议：[[type:{...}]] 和 [[trip-data:...]] ──
+//
+// 不再使用宿主 marked.js 扩展。统一使用 DOM 文本扫描：
+//   [[agent-card:{"name":"..."}]]  → 替换为 Agent Card 组件
+//   [[trip-data:file]]             → 触发 trip card 数据加载
+//   [[trip-data:<base64>]]         → 内联 trip card 数据注入
+
+/** 处理 [[trip-data:...]] 文本协议 */
+function _clHandleTripDataSignal(payload, contextNode) {
+  if (!payload) return;
+  console.log('[trip-data] detected signal, payload:', payload.substring(0, 40));
+
+  if (payload === 'file') {
+    const chatText = contextNode && contextNode.closest
+      ? contextNode.closest('.chat-text, .chat-tool-card__detail, .chat-tools-collapse__body')
+      : null;
+    if (chatText) {
+      chatText.dataset.clProcessed = '';
+      if (typeof _processCustomCards === 'function') _processCustomCards(chatText);
+    }
+  } else {
+    // base64 payload
+    try {
+      const cardData = JSON.parse(atob(payload));
+      if (typeof CL !== 'undefined' && typeof CL.mergeTripCardData === 'function') {
+        CL.mergeTripCardData(cardData, { replaceDayList: true });
+      } else if (typeof CL !== 'undefined') {
+        CL.tripCardData = cardData;
+      }
+      console.log('[trip-data] ✅ Card data from base64');
+      const chatText = contextNode && contextNode.closest
+        ? contextNode.closest('.chat-text, .chat-tool-card__detail, .chat-tools-collapse__body')
+        : null;
+      if (chatText) {
+        chatText.dataset.clProcessed = '';
+        if (typeof _processCustomCards === 'function') _processCustomCards(chatText);
+      }
+    } catch (e) {
+      console.warn('[trip-data] ❌ base64 decode failed:', e && e.message);
+    }
+  }
+}
+
+/** 扫描 DOM 中的组件占位（纯文本扫描，不依赖 marked） */
+function scanForComponents(root) {
+  if (!root) return;
+  scanTextNodesForComponents(root);
+}
+
+/** DOM 文本扫描降级方案 */
+function scanTextNodesForComponents(root) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+  const matchedNodes = [];
+  let node;
+  while (node = walker.nextNode()) {
+    if (node.textContent.includes('[[') && node.textContent.includes(']]')) {
+      if (node.parentElement?.dataset?.openagentProcessed) continue;
+      matchedNodes.push(node);
+    }
+  }
+  matchedNodes.forEach(replaceComponentTextNode);
+}
+
+/** 替换文本节点中的 [[type:{...}]] 或处理 [[trip-data:...]] */
+function replaceComponentTextNode(textNode) {
+  const text = textNode.textContent;
+  const match = /\[\[([\w][\w-]*):(.*?)\]\]/.exec(text);
+  if (!match) return;
+
+  const type = match[1];
+
+  // ── trip-data 信号：不替换 DOM，直接处理数据 ──
+  if (type === 'trip-data') {
+    _clHandleTripDataSignal(match[2].trim(), textNode);
+    // 隐藏信号文本
+    const parentEl = textNode.parentElement;
+    if (parentEl) parentEl.style.display = 'none';
+    return;
+  }
+
+  const handler = OPENAGENT_COMPONENTS[type];
+  if (!handler) return;
+
+  let data;
+  try {
+    data = JSON.parse(match[2].trim());
+  } catch {
+    return;
+  }
+
+  const parentEl = textNode.parentElement;
+  if (!parentEl) return;
+  parentEl.dataset.openagentProcessed = 'true';
+
+  const before = text.substring(0, match.index);
+  const after = text.substring(match.index + match[0].length);
+  const fragment = document.createDocumentFragment();
+  if (before.trim()) fragment.appendChild(document.createTextNode(before));
+
+  const placeholder = document.createElement('div');
+  placeholder.className = 'agent-card__loading';
+  placeholder.textContent = '🔍 Loading...';
+  fragment.appendChild(placeholder);
+
+  if (after.trim()) fragment.appendChild(document.createTextNode(after));
+  parentEl.replaceChild(fragment, textNode);
+
+  handler(data).then(component => {
+    if (component) {
+      placeholder.replaceWith(component);
+    } else {
+      placeholder.textContent = `⚠️ Component "${type}" load failed`;
+    }
+  }).catch(err => {
+    console.warn(`[openagent] Component "${type}" handler error:`, err);
+    placeholder.textContent = `⚠️ Component "${type}" error`;
+  });
+}
+
+// ── 组件 Observer ──
+
+function startComponentObserver() {
+  const chatThread = document.querySelector('.chat-thread');
+  if (!chatThread) return;
+
+  // 先扫描已有的
+  scanForComponents(chatThread);
+
+  const observer = new MutationObserver(() => {
+    scanForComponents(chatThread);
+  });
+
+  observer.observe(chatThread, { childList: true, subtree: true });
+
+  // 周期扫描兜底（DOM mutation 可能漏掉某些 SPA 渲染）
+  setInterval(() => {
+    const thread = document.querySelector('.chat-thread');
+    if (thread) scanForComponents(thread);
+  }, 1500);
+  console.log('[openagent] ✅ Component observer started (text scan mode)');
+}
+
+// ── 启动（需要 DOM 就绪） ──
+
+function bootstrap() {
+injectStyles();
+
+// 初次加载轮询（兼容 textarea 延迟渲染）
+let attempts = 0;
+const pollTimer = setInterval(() => {
+  attempts++;
+  if (tryInject() || attempts >= CL.MAX_POLL) {
+    clearInterval(pollTimer);
+    if (attempts >= CL.MAX_POLL) {
+      console.warn('[openagent] ⚠️ textarea not found after', CL.MAX_POLL, 'attempts, observer will keep watching');
+    }
+  }
+}, CL.POLL_INTERVAL);
+
+// 持续监听 DOM 变化：无论路由切换、SPA 重渲染、还是延迟加载，
+// 只要 textarea 出现且未注入，就自动注入 Agent Book
+let _injectDebounce = null;
+const routeObserver = new MutationObserver(() => {
+  // debounce 300ms 避免高频触发
+  if (_injectDebounce) clearTimeout(_injectDebounce);
+  _injectDebounce = setTimeout(() => {
+    // 如果还没注入成功，持续尝试
+    if (!document.querySelector('.openagent-at-btn')) {
+      tryInject();
+    }
+    // 检查是否需要启动 component observer
+    const thread = document.querySelector('.chat-thread');
+    if (thread && !thread._openagentCompObs) {
+      thread._openagentCompObs = true;
+      startComponentObserver();
+    }
+  }, 300);
+});
+if (document.body) {
+  routeObserver.observe(document.body, { childList: true, subtree: true });
+} else {
+  const bodyWaiter = setInterval(() => {
+    if (document.body) {
+      clearInterval(bodyWaiter);
+      routeObserver.observe(document.body, { childList: true, subtree: true });
+    }
+  }, 100);
+}
+
+// 首次启动 component observer
+setTimeout(() => startComponentObserver(), 2000);
+} // end bootstrap()
+
+// 等 DOM 就绪后再执行 bootstrap
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', bootstrap);
+} else {
+  bootstrap();
+}

package/src/plugin-ui/modules/agent-book/remote-agent-tool/thought-chain-card.js

@@ -0,0 +1,208 @@
+// ── Shared remote-agent visual primitives ───────────────────────────────
+//
+// Remote-agent ToolCard rendering is owned by remote-agent/render-hooks.js.
+// This module keeps the shared styles/helpers and forwards WS events only.
+
+// ── 1. CSS 注入 ──
+
+(function injectThoughtChainStyles() {
+  if (document.getElementById('cl-tools-collapse-css')) return;
+  const style = document.createElement('style');
+  style.id = 'cl-tools-collapse-css';
+  style.textContent = `
+    /* ── Agent Pill（通用身份标签） ── */
+    .cl-agent-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 10px;
+      border: 0.8px solid rgba(47,47,51,0.15);
+      border-radius: 6px;
+      background: #fff;
+      margin-bottom: 4px;
+      width: fit-content;
+    }
+    .cl-agent-pill-avatar {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      object-fit: cover;
+      flex-shrink: 0;
+    }
+    .cl-agent-pill-name {
+      font-family: "PingFang SC", sans-serif;
+      font-size: 10px;
+      font-weight: 600;
+      color: #2F2F33;
+      white-space: nowrap;
+      line-height: 12px;
+    }
+
+    /* ── ThoughtChain 步骤容器 ── */
+    .cl-thought-chain {
+      margin: 0;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* ── 分隔线 ── */
+    .cl-thought-chain-divider {
+      height: 0;
+      border: none;
+      border-top: 0.2px solid rgba(219, 219, 219, 1);
+      margin: 4px 0;
+    }
+
+    /* ── 标题栏 (状态文字) ── */
+    .cl-tools-collapse-header {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      cursor: pointer;
+      padding: 4px 0 2px 0;
+      user-select: none;
+    }
+    .cl-tools-collapse-header:hover { opacity: 0.8; }
+
+    .cl-tools-collapse-header-icon {
+      display: inline-block;
+      font-size: 8px;
+      color: #999;
+      transition: transform 0.25s ease;
+      line-height: 1;
+    }
+    .cl-tools-collapse-header-icon.cl-collapsed { transform: rotate(-90deg); }
+
+    .cl-tools-collapse-header-title {
+      font-family: "PingFang SC", sans-serif;
+      font-size: 10px;
+      font-weight: 600;
+      color: #2F2F33;
+      line-height: 12px;
+    }
+
+    /* ── 内容区 (折叠动画) ── */
+    .cl-tools-collapse-body {
+      overflow: hidden;
+      transition: max-height 0.35s ease, opacity 0.3s ease;
+      padding-left: 0;
+    }
+    .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 {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 3px 0;
+      position: relative;
+    }
+
+    .cl-tools-collapse-step-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      min-height: 16px;
+    }
+
+    /* ── 步骤圆点/图标 ── */
+    .cl-tools-collapse-step-icon {
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* 加载中：三点脉冲动画 (未完成/进行中) */
+    .cl-tools-collapse-step-dot {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      width: 14px;
+      height: 14px;
+      justify-content: center;
+    }
+    .cl-tools-collapse-step-dot::before,
+    .cl-tools-collapse-step-dot::after,
+    .cl-tools-collapse-step-dot span {
+      content: '';
+      display: block;
+      width: 3px;
+      height: 3px;
+      border-radius: 50%;
+      background: #bbb;
+      animation: cl-dot-pulse 1.2s ease-in-out infinite;
+    }
+    .cl-tools-collapse-step-dot::after { animation-delay: 0.2s; }
+    .cl-tools-collapse-step-dot span { animation-delay: 0.4s; }
+    @keyframes cl-dot-pulse {
+      0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+      40% { opacity: 1; transform: scale(1.1); }
+    }
+
+    /* 转圈 (当前步骤) */
+    .cl-tools-collapse-step-spinner {
+      width: 10px;
+      height: 10px;
+      border: 1.5px solid #999;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: cl-spin 0.8s linear infinite;
+    }
+    @keyframes cl-spin { to { transform: rotate(360deg); } }
+
+    /* 完成 — 灰色实心圆点（Figma: Ellipse 12871, bg #dcdcdc） */
+    .cl-tools-collapse-step-check {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: #dcdcdc;
+    }
+
+    /* ── 步骤标题文本 ── */
+    .cl-tools-collapse-step-title {
+      font-family: "PingFang SC", sans-serif;
+      font-size: 9.5px;
+      font-weight: 400;
+      color: #2F2F33;
+      line-height: 12.54px;
+    }
+
+    /* ── 步骤描述文本 ── */
+    .cl-tools-collapse-step-detail {
+      font-family: "PingFang SC", sans-serif;
+      font-size: 9px;
+      color: #999;
+      line-height: 12px;
+      margin-top: 1px;
+      padding-left: 22px;
+    }
+
+  `;
+  document.head.appendChild(style);
+})();
+
+// ── 2. WebSocket 事件分发 ──
+
+
+var _clWarnedMissingRenderHookHandler = false;
+
+CL.handleDelegateWsEvent = function (msg) {
+  if (window.__cl_handleStreamEvent) {
+    window.__cl_handleStreamEvent(msg);
+    return;
+  }
+
+  // RenderHook is the only remote-agent ToolCard path. Do not fall back to
+  // mutating native .chat-tool-card DOM here; missing handler should be visible
+  // during debugging instead of being masked by the legacy path.
+  if (!_clWarnedMissingRenderHookHandler && msg && msg.stream === 'tool') {
+    console.warn('[cl-ws-gate] RenderHook stream handler missing; remote-agent tool event ignored');
+    _clWarnedMissingRenderHookHandler = true;
+  }
+};
+
+// JSON.parse 拦截已移至 IIFE 顶部（在 bundle 加载前执行）

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

@@ -0,0 +1,119 @@
+// ── OpenAgent DOM Scanner — lightweight non-ToolCard DOM helpers ──
+//
+// RenderHook is the only supported rendering path for remote-agent ToolCards.
+// This scanner must not decorate, restore, or replace call_remote_agent cards.
+
+// CL.clScanCount lives on CL.clScanCount
+
+function _clScan() {
+  CL.clScanCount++;
+
+  // ── 0.5 清理标记 → 显示为 @agentName ──
+  // 新格式: {openagent_call_remote_agent:agent_id="...",agent_name="...",instruction="..."}
+  // 旧格式: {openagent:agent_id="...",agent_name="..."}
+  // 两种都要匹配清理；这里只处理普通聊天气泡，不处理 ToolCard。
+  var CL_MENTION_STYLE = '';
+  document.querySelectorAll('.chat-bubble').forEach(function(el) {
+    if (el.dataset.clMarkerCleaned) return;
+    if (el.closest('.chat-tool-card, .chat-tools-collapse, details')) return;
+
+    var text = el.textContent || '';
+    var rawRegex = /\{openagent(?:_call_remote_agent)?:agent_id="([^"]*)",agent_name="([^"]*)"(?:,instruction="[^"]*")?\}\s*/g;
+    if (!rawRegex.test(text)) return;
+
+    if (el.querySelector('.cl-remote-agent-card')) {
+      el.dataset.clMarkerCleaned = '1';
+      return;  // 包含活 DOM，跳过 innerHTML 重写
+    }
+
+    var htmlRegex = /\{openagent(?:_call_remote_agent)?:agent_id=(?:"|")([^&"]*)(?:"|"),agent_name=(?:"|")([^&"]*)(?:"|")(?:,instruction=(?:"|")[^&"]*(?:"|"))?\}\s*/g;
+    if (CL && typeof CL.diagHtmlRewrite === 'function') {
+      CL.diagHtmlRewrite('scanner.marker.before', el, { scan: CL.clScanCount });
+    }
+    el.innerHTML = el.innerHTML.replace(htmlRegex, function(_, agentId, agentName) {
+      var safeAgentId = escHtml(agentId);
+      var safeAgentName = escHtml(agentName);
+      return '<code style="' + CL_MENTION_STYLE + '" data-agent-id="' + safeAgentId + '" data-agent-name="' + safeAgentName + '">@' + safeAgentName + '</code> ';
+    });
+    if (CL && typeof CL.diagHtmlRewrite === 'function') {
+      CL.diagHtmlRewrite('scanner.marker.after', el, { scan: CL.clScanCount });
+    }
+    el.dataset.clMarkerCleaned = '1';
+  });
+
+  // ── 0.6 LLM 回复中的 agent 名称也加底色标签 ──
+  var mentionedAgents = [];
+  document.querySelectorAll('code').forEach(function(c) {
+    var t = (c.textContent || '').trim();
+    if (t.startsWith('@') && t.length > 1) {
+      var name = t.substring(1);
+      if (mentionedAgents.indexOf(name) === -1) mentionedAgents.push(name);
+    }
+  });
+
+  if (CL.agentCache.length > 0) {
+    for (var ai = 0; ai < CL.agentCache.length; ai++) {
+      var n = CL.agentCache[ai].name;
+      if (n && n.length >= 2 && mentionedAgents.indexOf(n) === -1) mentionedAgents.push(n);
+    }
+  }
+
+  if (mentionedAgents.length > 0) {
+    document.querySelectorAll('.chat-bubble').forEach(function(el) {
+      if (el.dataset.clAgentStyled) return;
+      if (el.closest('.chat-tool-card, .chat-tools-collapse, details')) return;
+
+      var text = el.textContent || '';
+      var html = el.innerHTML;
+      var changed = false;
+      for (var mi = 0; mi < mentionedAgents.length; mi++) {
+        var aName = mentionedAgents[mi];
+        if (html.includes('>@' + aName + '</code>')) continue;
+        if (!text.includes(aName)) continue;
+
+        var escaped = aName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        var quoteWrap = new RegExp(
+          '(?:[\u201C\u201D"\u300C]|&quot;)' + escaped + '(?:[\u201C\u201D"\u300D]|&quot;)',
+          'g'
+        );
+        var newHtml = html.replace(quoteWrap, '<code>@' + aName + '</code>');
+        if (newHtml !== html) {
+          html = newHtml;
+          changed = true;
+        }
+      }
+      // 包含活 DOM 时不重写 innerHTML
+      if (el.querySelector('.cl-remote-agent-card')) {
+        el.dataset.clAgentStyled = '1';
+        return;
+      }
+      if (changed && CL && typeof CL.diagHtmlRewrite === 'function') {
+        CL.diagHtmlRewrite('scanner.agent-style.before', el, {
+          scan: CL.clScanCount,
+          agents: mentionedAgents
+        });
+      }
+      if (changed) el.innerHTML = html;
+      if (changed && CL && typeof CL.diagHtmlRewrite === 'function') {
+        CL.diagHtmlRewrite('scanner.agent-style.after', el, {
+          scan: CL.clScanCount,
+          agents: mentionedAgents
+        });
+      }
+      el.dataset.clAgentStyled = '1';
+    });
+  }
+
+  // Remote-agent ToolCards intentionally have no scanner fallback.
+  // call/result cards, thought steps, completion state, and Agent pill rendering
+  // must all come from remote-agent/render-hooks.js.
+
+  // Travel card tags (<tr_card>, <sh_card>, etc.) are processed exclusively
+  // by the RenderHook pipeline via _clScheduleOutputCardProcessing in output-card.js.
+  // No scanner polling needed.
+
+  // Continue scanning for 2 minutes (mention cleanup only).
+  if (CL.clScanCount < 60) {
+    setTimeout(_clScan, 2000);
+  }
+}