openclaw-openagent 1.0.0

package/src/plugin-ui/modules/loader/ws-intercept.js

@@ -0,0 +1,199 @@
+// ══════════════════════════════════════════════════════════════
+// 方案 A: WebSocket 构造函数拦截（主力）
+// 直接给每个 WS 实例加 message listener，不依赖 JSON.parse
+// ══════════════════════════════════════════════════════════════
+const _OrigWebSocket = window.WebSocket;
+window.WebSocket = function(url, protocols) {
+  const ws = protocols !== undefined
+    ? new _OrigWebSocket(url, protocols)
+    : new _OrigWebSocket(url);
+
+  ws.addEventListener('message', function(event) {
+    try {
+      const raw = String(event.data || '');
+      const msg = JSON.parse(raw);
+      if (!msg || typeof msg !== 'object') return;
+
+      const p = _extractToolStreamPayload(msg);
+      if (p) {
+        if (_isRawToolStreamDebugEnabled()) {
+          _logRawToolStreamPayload(p, msg);
+        }
+        if (typeof CL.handleDelegateWsEvent === 'function') {
+          CL.handleDelegateWsEvent(p);
+        }
+        _interceptTripData(p);
+      }
+    } catch (err) {
+      // silent — non-JSON messages or parsing errors
+    }
+  });
+
+  return ws;
+};
+// 保留静态属性和原型链
+window.WebSocket.prototype = _OrigWebSocket.prototype;
+window.WebSocket.CONNECTING = _OrigWebSocket.CONNECTING;
+window.WebSocket.OPEN = _OrigWebSocket.OPEN;
+window.WebSocket.CLOSING = _OrigWebSocket.CLOSING;
+window.WebSocket.CLOSED = _OrigWebSocket.CLOSED;
+
+/* muted */ void 0;
+
+function _extractToolStreamPayload(msg) {
+  if (!msg || msg.type !== 'event') return null;
+
+  // Current OpenClaw gateway frames use:
+  //   { type: "event", event: "agent", payload: { stream: "tool", data: ... } }
+  if (msg.event === 'agent' && msg.payload && msg.payload.stream === 'tool') {
+    return msg.payload;
+  }
+
+  // Keep compatibility with older/local frames that already put the tool
+  // stream payload directly under payload, or one level deeper.
+  if (msg.payload && msg.payload.stream === 'tool') return msg.payload;
+  if (msg.payload && msg.payload.payload && msg.payload.payload.stream === 'tool') {
+    return msg.payload.payload;
+  }
+
+  return null;
+}
+
+function _logRawToolStreamPayload(payload, frame) {
+  try {
+    const data = payload && payload.data || {};
+    const entry = {
+      ts: new Date().toISOString(),
+      phase: data.phase || '',
+      toolCallId: data.toolCallId || '',
+      payload,
+      frame
+    };
+    window.__openagentRawToolStreamLog = window.__openagentRawToolStreamLog || [];
+    window.__openagentRawToolStreamLog.push(entry);
+    if (window.__openagentRawToolStreamLog.length > 200) {
+      window.__openagentRawToolStreamLog.splice(0, window.__openagentRawToolStreamLog.length - 200);
+    }
+    _persistRawToolStreamDebugLog(window.__openagentRawToolStreamLog);
+    console.log('[cl-raw-tool-stream] tcid=' + String(entry.toolCallId || '').substring(0, 8)
+      + ' phase=' + entry.phase
+      + ' payload=' + JSON.stringify(payload));
+  } catch (err) {
+    // debug logging must never affect the stream path
+  }
+}
+
+function _isRawToolStreamDebugEnabled() {
+  try {
+    return window.localStorage && window.localStorage.getItem('openagent.debug.rawSse') === '1';
+  } catch (err) {
+    return false;
+  }
+}
+
+function _persistRawToolStreamDebugLog(entries) {
+  try {
+    const json = JSON.stringify(entries || []);
+    try {
+      window.localStorage && window.localStorage.setItem('openagent.rawToolStream.v1', json);
+    } catch (storageErr) {}
+
+    const doc = window.document;
+    if (!doc || !doc.body) return;
+    let node = doc.getElementById('openagent-raw-tool-stream-log');
+    if (!node) {
+      node = doc.createElement('pre');
+      node.id = 'openagent-raw-tool-stream-log';
+      node.style.display = 'none';
+      doc.body.appendChild(node);
+    }
+    node.textContent = json;
+  } catch (err) {}
+}
+
+function _interceptTripData(payload) {
+  try {
+    const data = payload?.data;
+
+    // 深度检查 payload 结构
+    if (data) {
+      const keys = Object.keys(data);
+      const strFields = keys.filter(k => typeof data[k] === 'string' && data[k].length > 50);
+      const hasTripInAny = keys.some(k => typeof data[k] === 'string' && data[k].includes('TRIP_DATA'));
+      /* muted */ void 0;
+      
+      // 深入一层
+      if (data.data && typeof data.data === 'object') {
+        const dk = Object.keys(data.data);
+        const dHas = dk.some(k => typeof data.data[k] === 'string' && data.data[k].includes('TRIP_DATA'));
+        /* muted */ void 0;
+      }
+    }
+    if (!data) return;
+
+    // 检测 [TRIP_CARDS_READY] 信号标记，然后 fetch 卡片数据文件
+    const textFields = ['text', 'content', 'result', 'output'];
+
+    function tryDetectSignal(obj, field) {
+      if (typeof obj[field] !== 'string') return false;
+      const val = obj[field];
+      if (!val.includes('[TRIP_CARDS_READY]')) return false;
+      // 移除信号标记
+      obj[field] = val.replace(/\n*\[TRIP_CARDS_READY\]/, '');
+      CL.fetchTripCardDataOnce('ws-ready-marker');
+      return true;
+    }
+
+    for (const field of textFields) {
+      if (tryDetectSignal(data, field)) return;
+    }
+    if (data.data && typeof data.data === 'object') {
+      for (const field of textFields) {
+        if (tryDetectSignal(data.data, field)) return;
+      }
+    }
+  } catch (err) {
+    // silent
+  }
+}
+
+
+CL.fetchTripCardDataOnce = function(source, options) {
+  const force = !!(options && options.force);
+  const scope = options && options.scope;
+  if (scope && typeof CL.getScopedTripCardData === 'function') {
+    const scoped = CL.getScopedTripCardData(scope);
+    if (scoped && !force) return Promise.resolve(scoped);
+  }
+  if (CL.tripCardData && !force && (!scope || (typeof CL.tripCardDataMatchesScope === 'function' && CL.tripCardDataMatchesScope(CL.tripCardData, scope)))) {
+    return Promise.resolve(CL.tripCardData);
+  }
+  if (CL.tripCardDataFetchPromise) return CL.tripCardDataFetchPromise;
+  if (CL.tripCardDataFetchFailed) return Promise.resolve(null);
+
+  CL.tripCardDataFetchPromise = fetch('./trip-card-data.json?t=' + Date.now())
+    .then(r => {
+      if (!r.ok) throw new Error('HTTP ' + r.status);
+      return r.json();
+    })
+    .then(cardData => {
+      if (typeof CL.mergeTripCardData === 'function') {
+        CL.mergeTripCardData(cardData, { replaceDayList: true, scope: scope });
+      } else {
+        CL.tripCardData = cardData;
+      }
+      CL.tripCardDataFetchFailed = false;
+      /* muted */ void 0;
+      return cardData;
+    })
+    .catch(e => {
+      CL.tripCardDataFetchFailed = true;
+      console.warn('[trip-cards] File fetch failed:', e.message, 'via', source || 'unknown');
+      return null;
+    })
+    .finally(() => {
+      CL.tripCardDataFetchPromise = null;
+    });
+
+  return CL.tripCardDataFetchPromise;
+};

package/src/plugin-ui/modules/remote-agent/chunk-parser.js

@@ -0,0 +1,161 @@
+// ── OpenAgent Chunk Parser — card.text → Chunk[] ──
+//
+// 解析 ToolCard.text 中的 JSON 数据块。
+// 数据格式来自远端 Agent 的 SSE 流：
+//   {"msgType":2,"dataType":"think","thinkType":"title|content","text":"..."}
+//
+// 输出 Chunk 类型:
+//   { type: 'step',    title: string }     — 仅 dataType=think + thinkType=title
+//   { type: 'result',  text: string }      — 最终结果
+//   { type: 'error',   text: string }      — 错误信息
+//   { type: 'data',    raw: object }       — 结构化数据（tripCard 等）
+//   { type: 'text',    text: string }      — 纯文本 fallback
+
+function _clParseChunks(text, scope) {
+  if (!text) return [];
+  var chunks = [];
+
+  // text 通常是多行 JSON，但历史/不同版本里也可能是连续 JSON 或
+  // 带换行的完整 JSON。先按平衡大括号切出 record，避免 data event 退化成正文。
+  var parts = _clSplitJsonRecords(text);
+  for (var pi = 0; pi < parts.length; pi++) {
+    var part = parts[pi];
+    if (part.type === 'json') {
+      chunks.push(_clNormalizeChunk(part.raw, scope));
+      continue;
+    }
+
+    var lines = String(part.text || '').split('\n');
+    for (var i = 0; i < lines.length; i++) {
+      var line = lines[i].trim();
+      if (!line) continue;
+
+      try {
+        var obj = JSON.parse(line);
+        if (obj && typeof obj === 'object') {
+          chunks.push(_clNormalizeChunk(obj, scope));
+          continue;
+        }
+      } catch (e) {
+        // not JSON — treat as plain text fallback
+      }
+
+      // 纯文本 fallback
+      chunks.push({ type: 'text', text: line });
+    }
+  }
+
+  return chunks;
+}
+
+function _clReadJsonRecordAt(text, start) {
+  if (!text || text.charAt(start) !== '{') return null;
+  var depth = 0;
+  var inString = false;
+  var escaping = false;
+
+  for (var i = start; i < text.length; i++) {
+    var ch = text.charAt(i);
+
+    if (inString) {
+      if (escaping) {
+        escaping = false;
+      } else if (ch === '\\') {
+        escaping = true;
+      } else if (ch === '"') {
+        inString = false;
+      }
+      continue;
+    }
+
+    if (ch === '"') {
+      inString = true;
+    } else if (ch === '{') {
+      depth++;
+    } else if (ch === '}') {
+      depth--;
+      if (depth === 0) {
+        var rawText = text.slice(start, i + 1);
+        try {
+          var parsed = JSON.parse(rawText);
+          if (parsed && typeof parsed === 'object') {
+            return { raw: parsed, end: i + 1 };
+          }
+        } catch (e) {
+          return null;
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
+function _clSplitJsonRecords(text) {
+  var parts = [];
+  var last = 0;
+
+  for (var i = 0; i < text.length; i++) {
+    if (text.charAt(i) !== '{') continue;
+    var record = _clReadJsonRecordAt(text, i);
+    if (!record) continue;
+
+    if (i > last) {
+      parts.push({ type: 'text', text: text.slice(last, i) });
+    }
+    parts.push({ type: 'json', raw: record.raw });
+    i = record.end - 1;
+    last = record.end;
+  }
+
+  if (last < text.length) {
+    parts.push({ type: 'text', text: text.slice(last) });
+  }
+
+  return parts.length ? parts : [{ type: 'text', text: text }];
+}
+
+function _clNormalizeChunk(obj, scope) {
+  if (typeof _cl_ingestTripCardData === 'function') {
+    try { _cl_ingestTripCardData(obj, scope); } catch (e) {}
+  }
+
+  // 远端 Agent SSE 格式: {msgType, dataType, thinkType, text, ...}
+  if (obj.dataType === 'think') {
+    if (obj.thinkType === 'title') {
+      return { type: 'step', title: obj.text || '' };
+    }
+    return { type: 'data', raw: obj };
+  }
+
+  if (obj.dataType === 'data') {
+    return { type: 'data', raw: obj };
+  }
+
+  // 结构化数据（tripCardData, unitContext 等）
+  if (obj.fullJson || obj.unitContext || obj.unitContexts || obj.dayList
+      || obj.foodData || obj.budgetData || obj.budget || obj.tripCardData
+      || obj.itineraryVersionInfo || obj.itinerary) {
+    return { type: 'data', raw: obj };
+  }
+
+  // 错误：只接受显式错误事件。不能把普通业务 JSON 里的 error 字段直接当成
+  // OpenClaw tool error，否则刷新历史卡片时会把 output 外壳染成错误态。
+  if (obj.type === 'error' || obj.dataType === 'error' || obj.isError === true) {
+    return { type: 'error', text: obj.message || obj.error || obj.text || '' };
+  }
+
+  // 结果
+  if (obj.type === 'result' || obj.dataType === 'result') {
+    return { type: 'result', text: obj.content || obj.text || '' };
+  }
+
+  // 通用 thinking/step/progress 不再生成过程 UI；只保留为数据。
+  if (obj.type === 'thinking' || obj.type === 'thought'
+      || obj.type === 'step' || obj.type === 'progress') {
+    return { type: 'data', raw: obj };
+  }
+
+  // fallback: 整个对象当数据
+  return { type: 'data', raw: obj };
+}

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

@@ -0,0 +1,269 @@
+// ── OpenAgent Execution Card — Agent 执行态 UI ──
+//
+// 输入: OpenAgentCardModel (from tool-card-model.js)
+// 输出: DOM Node (嵌入 Lit template)
+//
+// 显示内容:
+//   - Agent Pill（头像 + @名称）
+//   - 分隔线
+//   - 思考步骤列表（从 model.chunks 中提取 step 类型）
+//
+// UI 结构使用 shared thought-chain styles，数据来源是 RenderHook model。
+
+function _clRenderExecutionCard(model) {
+  var container = document.createElement('div');
+  container.className = 'cl-remote-agent-card cl-thought-chain';
+  if (CL && typeof CL.diagMarkCard === 'function') {
+    CL.diagMarkCard(container, 'execution', { tcid: model.toolCallId || '' });
+  }
+
+  container.appendChild(_clCreateOpenAgentHeader(model));
+
+  var content = document.createElement('div');
+  content.className = 'cl-thought-chain-content cl-thought-chain-content--execution';
+  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 身份 ──
+  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);
+      _clSetOpenAgentHeaderAgent(container, agent.name || model.agentName);
+    }).catch(function() {});
+  }
+
+  if (typeof _cl_applyCardUiState === 'function') {
+    _cl_applyCardUiState(container, model);
+  }
+
+  console.log('[cl-exec] ✅ execution card built: steps=' + steps.length);
+  return container;
+}
+
+// ── 共用 DOM 构建函数 ──
+
+function _clCreateOpenAgentHeader(model) {
+  var header = document.createElement('div');
+  header.className = 'cl-openagent-header';
+  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);
+
+  // 点击 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');
+    caret.textContent = isCollapsed ? '▶' : '▼';
+    if (typeof _cl_setCardUiState === 'function') {
+      _cl_setCardUiState(model, { contentCollapsed: isCollapsed });
+    }
+  });
+
+  return header;
+}
+
+function _clSetOpenAgentHeaderAgent(container, agentName) {
+  var title = container && container.querySelector('.cl-openagent-header-primary');
+  if (title) title.textContent = 'OpenAgent @' + (agentName || 'Remote Agent');
+}
+
+function _clCreateAgentPill(agentName, agentId, agentAvatar) {
+  var pill = document.createElement('div');
+  pill.className = 'cl-agent-pill';
+
+  var avatar = document.createElement('img');
+  avatar.className = 'cl-agent-pill-avatar';
+  avatar.alt = agentName || 'Agent';
+  var identity = CL && typeof CL.getAgentIdentity === 'function'
+    ? CL.getAgentIdentity(agentId, agentName)
+    : null;
+  var avatarAgent = agentAvatar
+    ? { name: agentName, avatar: agentAvatar }
+    : identity;
+  avatar.src = (avatarAgent && avatarAgent.avatar && typeof avatarUrl === 'function')
+    ? avatarUrl(avatarAgent)
+    : 'https://ui-avatars.com/api/?name=' + encodeURIComponent(agentName || 'A') + '&background=7c3aed&color=fff&size=64';
+  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'; };
+  pill.appendChild(avatar);
+
+  var nameEl = document.createElement('span');
+  nameEl.className = 'cl-agent-pill-name';
+  var atEl = document.createElement('span');
+  atEl.className = 'cl-agent-pill-at';
+  atEl.textContent = '@';
+  var labelEl = document.createElement('span');
+  labelEl.className = 'cl-agent-pill-label';
+  labelEl.textContent = agentName || 'Remote Agent';
+  nameEl.appendChild(atEl);
+  nameEl.appendChild(labelEl);
+  pill.appendChild(nameEl);
+
+  return pill;
+}
+
+function _clSetAgentPillName(container, agentName) {
+  var label = container && container.querySelector('.cl-agent-pill-label');
+  if (label) {
+    label.textContent = agentName || 'Remote Agent';
+    return;
+  }
+  var name = container && container.querySelector('.cl-agent-pill-name');
+  if (name) name.textContent = '@' + (agentName || 'Remote Agent');
+}
+
+function _clCreateStepElement(step, isLatest) {
+  var item = document.createElement('div');
+  item.className = 'cl-tools-collapse-step';
+
+  var row = document.createElement('div');
+  row.className = 'cl-tools-collapse-step-row';
+
+  var iconWrap = document.createElement('div');
+  iconWrap.className = 'cl-tools-collapse-step-icon';
+
+  if (isLatest) {
+    var dot = document.createElement('div');
+    dot.className = 'cl-tools-collapse-step-dot cl-active';
+    iconWrap.appendChild(dot);
+  } else {
+    var check = document.createElement('div');
+    check.className = 'cl-tools-collapse-step-check';
+    iconWrap.appendChild(check);
+  }
+
+  var titleEl = document.createElement('span');
+  titleEl.className = 'cl-tools-collapse-step-title';
+  titleEl.textContent = (step.title || '').replace(/[\u2705\u2611\uFE0F\u2714\uFE0F]/g, '').trim();
+
+  row.appendChild(iconWrap);
+  row.appendChild(titleEl);
+  item.appendChild(row);
+
+  return item;
+}