@bolloon/bolloon-agent 0.1.35 → 0.1.37

package/dist/web/ui/message-renderer.js

@@ -0,0 +1,352 @@
+import {
+  mountStepTimeline,
+  pushStepToTimeline,
+  migrateStepTimeline,
+  getStepTimeline
+} from "./step-timeline.js";
+let streamingMessageEl = null;
+let streamingTextNode = null;
+let streamingText = "";
+let lastUserCommand = "";
+let lastAiContent = "";
+let scrollToBottomTimer = null;
+function scheduleScrollToBottom(container) {
+  if (!container) return;
+  if (scrollToBottomTimer) return;
+  scrollToBottomTimer = setTimeout(() => {
+    container.scrollTop = container.scrollHeight;
+    scrollToBottomTimer = null;
+  }, 60);
+}
+function getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl) {
+  if (currentChannelId && messagesContainers.get(currentChannelId)) {
+    return messagesContainers.get(currentChannelId) || null;
+  }
+  return messagesEl;
+}
+function escapeHtml(s) {
+  return String(s ?? "").replace(/[&<>"']/g, (c) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  })[c]);
+}
+function addMessage(content, type, save = true, container, usedJudgmentIds = [], ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }) {
+  const messagesEl = ctx.messagesEl || (typeof document !== "undefined" ? document.getElementById("messages") : null);
+  const messagesContainers = ctx.messagesContainers || /* @__PURE__ */ new Map();
+  const currentChannelId = ctx.currentChannelId;
+  const msgContainer = container || getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
+  if (!save && msgContainer && msgContainer.children.length > 200) {
+    const toRemove = msgContainer.children.length - 200;
+    for (let i = 0; i < toRemove; i++) {
+      const first = msgContainer.firstElementChild;
+      if (first) msgContainer.removeChild(first);
+    }
+  }
+  if (save) {
+    const lastContent = type === "user" ? lastUserCommand : lastAiContent;
+    if (lastContent && content === lastContent) {
+      console.log(`[addMessage] \u8DF3\u8FC7\u91CD\u590D\u7684 ${type} \u6D88\u606F`);
+      return;
+    }
+    if (type === "user") lastUserCommand = content;
+    else lastAiContent = content;
+  }
+  const div = document.createElement("div");
+  div.className = `message message-${type}`;
+  let cleanContent = content.replace(/\[TOOL_CALL\][\s\S]*?\[\/TOOL_CALL\]/g, "").replace(/TOOL_CALL[\s\S]*?\/TOOL_CALL/g, "").replace(/<tool_call>[\s\S]*?<\/tool_call>/gi, "").replace(/\{\s*"tool":[\s\S]*?\}/g, "").replace(/\{\s*tool\s*=>\s*["'][^"']+["']\s*(?:,\s*args\s*=>\s*\{[\s\S]*?\})?\s*\}/g, "").replace(/\[Function[^\]]*\]\s*/g, "").trim();
+  const thinkMatch = cleanContent.match(/<think>([\s\S]*?)<\/think>/);
+  let mainContent = cleanContent;
+  let thinkContainer = null;
+  if (thinkMatch) {
+    const thinkContent = thinkMatch[1].trim();
+    mainContent = cleanContent.replace(/<think>[\s\S]*?<\/think>/, "").trim();
+    thinkContainer = buildThinkContainer(thinkContent);
+  }
+  const envMatch = mainContent.match(/^(.+?)\n<environment_details>([\s\S]*?)<\/environment_details>\n([\s\S]*)$/);
+  if (envMatch) {
+    const identity = envMatch[1].trim();
+    const envDetails = envMatch[2].trim();
+    const messageBody = envMatch[3].trim();
+    const header = document.createElement("div");
+    header.className = "message-header";
+    header.textContent = identity;
+    div.appendChild(header);
+    div.appendChild(buildEnvContainer(envDetails));
+    if (thinkContainer) div.appendChild(thinkContainer);
+    if (messageBody) div.appendChild(buildBubble(messageBody, type));
+  } else if (cleanContent) {
+    if (thinkContainer) div.appendChild(thinkContainer);
+    div.appendChild(buildBubble(cleanContent, type));
+  } else {
+    return;
+  }
+  const rawContent = cleanContent.replace(/<[^>]+>/g, "").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&nbsp;/g, " ");
+  const time = document.createElement("div");
+  time.className = "time";
+  time.textContent = (/* @__PURE__ */ new Date()).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
+  if (type === "ai") {
+    div.appendChild(buildMessageActions(div, rawContent, ctx));
+  }
+  if (type === "ai" && Array.isArray(usedJudgmentIds) && usedJudgmentIds.length > 0) {
+    const link = document.createElement("a");
+    link.className = "used-judgments-link";
+    link.textContent = `\u{1F4CE} \u53C2\u8003 ${usedJudgmentIds.length} \u6761\u539F\u5219`;
+    link.onclick = (e) => {
+      e.preventDefault();
+      if (typeof ctx.openJudgmentsModalWithFilter === "function") {
+        ctx.openJudgmentsModalWithFilter(usedJudgmentIds);
+      }
+    };
+    div.appendChild(link);
+  }
+  if (type === "ai" && msgContainer) {
+    mountStepTimeline(div, currentChannelId);
+  }
+  div.appendChild(time);
+  if (msgContainer) {
+    msgContainer.appendChild(div);
+    scheduleScrollToBottom(msgContainer);
+  }
+}
+function buildThinkContainer(thinkContent) {
+  const container = document.createElement("div");
+  container.className = "think-container";
+  const toggle = document.createElement("div");
+  toggle.className = "think-toggle";
+  toggle.innerHTML = '\u{1F4AD} \u601D\u8003\u8FC7\u7A0B <span class="think-arrow">\u25B8</span>';
+  toggle.onclick = function() {
+    const details = container.querySelector(".think-content");
+    const arrow = toggle.querySelector(".think-arrow");
+    if (!details || !arrow) return;
+    if (details.style.display === "none") {
+      details.style.display = "block";
+      arrow.textContent = "\u25BE";
+    } else {
+      details.style.display = "none";
+      arrow.textContent = "\u25B8";
+    }
+  };
+  const content = document.createElement("div");
+  content.className = "think-content";
+  content.style.display = "none";
+  content.innerHTML = `<pre>${escapeHtml(thinkContent)}</pre>`;
+  container.appendChild(toggle);
+  container.appendChild(content);
+  return container;
+}
+function buildEnvContainer(envDetails) {
+  const container = document.createElement("div");
+  container.className = "env-container";
+  const toggle = document.createElement("div");
+  toggle.className = "env-toggle";
+  toggle.innerHTML = '\u2699\uFE0F \u73AF\u5883\u4FE1\u606F <span class="env-arrow">\u25B8</span>';
+  toggle.onclick = function() {
+    const details = container.querySelector(".environment-details");
+    const arrow = toggle.querySelector(".env-arrow");
+    if (!details || !arrow) return;
+    if (details.style.display === "none") {
+      details.style.display = "block";
+      arrow.textContent = "\u25BE";
+    } else {
+      details.style.display = "none";
+      arrow.textContent = "\u25B8";
+    }
+  };
+  const content = document.createElement("div");
+  content.className = "environment-details";
+  content.style.display = "none";
+  content.innerHTML = `<pre>${escapeHtml(envDetails)}</pre>`;
+  container.appendChild(toggle);
+  container.appendChild(content);
+  return container;
+}
+function buildBubble(text, type) {
+  const bubble = document.createElement("div");
+  bubble.className = `bubble bubble-${type}`;
+  const marked = window.marked;
+  bubble.innerHTML = marked ? marked.parse(text) : escapeHtml(text);
+  return bubble;
+}
+function buildMessageActions(div, rawContent, ctx) {
+  const actions = document.createElement("div");
+  actions.className = "message-actions";
+  const copyBtn = document.createElement("button");
+  copyBtn.className = "action-btn copy-btn";
+  copyBtn.innerHTML = copyIcon() + " \u590D\u5236";
+  copyBtn.title = "\u590D\u5236\u6D88\u606F";
+  copyBtn.onclick = () => {
+    navigator.clipboard.writeText(rawContent).then(() => {
+      copyBtn.innerHTML = checkIcon() + " \u5DF2\u590D\u5236";
+      setTimeout(() => {
+        copyBtn.innerHTML = copyIcon() + " \u590D\u5236";
+      }, 2e3);
+    });
+  };
+  actions.appendChild(copyBtn);
+  const saveJudgmentBtn = document.createElement("button");
+  saveJudgmentBtn.className = "action-btn save-as-judgment";
+  saveJudgmentBtn.title = "AI \u84B8\u998F\u4E3A 30-80 \u5B57\u5224\u65AD\u529B + \u81EA\u52A8\u6F14\u5316\u5BF9\u9F50";
+  saveJudgmentBtn.setAttribute("data-decision", rawContent.substring(0, 800));
+  if (ctx.currentChannelId) saveJudgmentBtn.setAttribute("data-channel-id", ctx.currentChannelId);
+  saveJudgmentBtn.innerHTML = shieldIcon() + " \u84B8\u998F\u4E3A\u5224\u65AD";
+  actions.appendChild(saveJudgmentBtn);
+  const regenBtn = document.createElement("button");
+  regenBtn.className = "action-btn regenerate-btn";
+  regenBtn.innerHTML = refreshIcon(false) + " \u91CD\u65B0\u56DE\u7B54";
+  regenBtn.title = "\u91CD\u65B0\u751F\u6210\u56DE\u590D";
+  regenBtn.onclick = () => {
+    regenBtn.innerHTML = refreshIcon(true) + " \u751F\u6210\u4E2D...";
+    regenBtn.disabled = true;
+    const messages = div.parentElement?.querySelectorAll(".message") || [];
+    let lastUserMsg = "";
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const msg = messages[i];
+      if (msg.classList.contains("message-user")) {
+        const bubble = msg.querySelector(".bubble");
+        if (bubble) {
+          lastUserMsg = bubble.textContent || bubble.innerText || "";
+          break;
+        }
+      }
+    }
+    fetch("/regenerate", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ channelId: ctx.currentChannelId, userMessage: lastUserMsg })
+    }).then((res) => {
+      if (!res.ok) throw new Error("regenerate failed");
+    }).catch((err) => {
+      console.error("\u91CD\u65B0\u751F\u6210\u5931\u8D25:", err);
+      regenBtn.innerHTML = refreshIcon(false) + " \u5931\u8D25";
+      setTimeout(() => {
+        regenBtn.innerHTML = refreshIcon(false) + " \u91CD\u65B0\u56DE\u7B54";
+        regenBtn.disabled = false;
+      }, 2e3);
+    });
+  };
+  actions.appendChild(regenBtn);
+  return actions;
+}
+function copyIcon() {
+  return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+}
+function checkIcon() {
+  return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+}
+function shieldIcon() {
+  return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4z"></path><path d="M9 12l2 2 4-4"></path></svg>';
+}
+function refreshIcon(spin = false) {
+  const cls = spin ? ' class="spin"' : "";
+  return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"${cls}><path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16"></path></svg>`;
+}
+function handleStreamTokenEvent(data, ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }) {
+  const messagesEl = ctx.messagesEl || (typeof document !== "undefined" ? document.getElementById("messages") : null);
+  const messagesContainers = ctx.messagesContainers || /* @__PURE__ */ new Map();
+  const currentChannelId = ctx.currentChannelId;
+  const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
+  if (!container) return;
+  const delta = data.content || "";
+  if (!delta) return;
+  if (!streamingMessageEl || !streamingMessageEl.isConnected) {
+    streamingMessageEl = document.createElement("div");
+    streamingMessageEl.className = "message message-ai message-streaming";
+    streamingTextNode = document.createTextNode("");
+    streamingMessageEl.appendChild(streamingTextNode);
+    streamingText = "";
+    mountStepTimeline(streamingMessageEl, currentChannelId);
+    container.appendChild(streamingMessageEl);
+    if (typeof ctx.setTimelineState === "function") {
+      ctx.setTimelineState("streaming");
+    }
+    scheduleScrollToBottom(container);
+  }
+  if (streamingTextNode) streamingTextNode.appendData(delta);
+  streamingText += delta;
+  scheduleScrollToBottom(container);
+}
+function finalizeTimelineAsMessage(ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }) {
+  const messagesEl = ctx.messagesEl || (typeof document !== "undefined" ? document.getElementById("messages") : null);
+  const messagesContainers = ctx.messagesContainers || /* @__PURE__ */ new Map();
+  const currentChannelId = ctx.currentChannelId;
+  const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
+  if (streamingText.trim().length > 0) {
+    const oldStreamingEl = streamingMessageEl;
+    if (oldStreamingEl && oldStreamingEl.parentNode) {
+      oldStreamingEl.parentNode.removeChild(oldStreamingEl);
+    }
+    addMessage(streamingText, "ai", true, container, ctx.lastUsedJudgmentIds || [], ctx);
+    if (oldStreamingEl && container) {
+      const newAiMsg = container.querySelector(".message-ai:last-of-type");
+      if (newAiMsg && newAiMsg !== oldStreamingEl) {
+        migrateStepTimeline(oldStreamingEl, newAiMsg);
+      }
+    }
+  }
+  streamingMessageEl = null;
+  streamingTextNode = null;
+  streamingText = "";
+  if (typeof ctx.setTimelineState === "function") {
+    ctx.setTimelineState("done");
+  }
+}
+function handleStepEvent(data, ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }) {
+  const messagesEl = ctx.messagesEl || (typeof document !== "undefined" ? document.getElementById("messages") : null);
+  const messagesContainers = ctx.messagesContainers || /* @__PURE__ */ new Map();
+  const currentChannelId = ctx.currentChannelId;
+  const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
+  if (!container) return;
+  if (!data || !data.type) return;
+  let target = streamingMessageEl && streamingMessageEl.isConnected ? streamingMessageEl : null;
+  if (!target) {
+    const aiMsgs = container.querySelectorAll(".message-ai");
+    if (aiMsgs.length === 0) return;
+    target = aiMsgs[aiMsgs.length - 1];
+  }
+  if (!target) return;
+  const timeline = getStepTimeline(target);
+  if (!timeline) return;
+  pushStepToTimeline(timeline, data.type, {
+    tool: data.tool || "unknown",
+    args: data.args,
+    success: data.success,
+    output: data.output,
+    error: data.error
+  });
+}
+function resetRendererState() {
+  streamingMessageEl = null;
+  streamingTextNode = null;
+  streamingText = "";
+  lastUserCommand = "";
+  lastAiContent = "";
+  if (scrollToBottomTimer) {
+    clearTimeout(scrollToBottomTimer);
+    scrollToBottomTimer = null;
+  }
+}
+const MessageRenderer = {
+  addMessage,
+  handleStreamTokenEvent,
+  finalizeTimelineAsMessage,
+  handleStepEvent,
+  escapeHtml,
+  getMessagesContainerForCurrent,
+  resetRendererState
+};
+if (typeof window !== "undefined") {
+  window.MR = MessageRenderer;
+}
+export {
+  MessageRenderer,
+  addMessage,
+  escapeHtml,
+  finalizeTimelineAsMessage,
+  getMessagesContainerForCurrent,
+  handleStepEvent,
+  handleStreamTokenEvent,
+  resetRendererState
+};

package/dist/web/ui/step-timeline.js

@@ -0,0 +1,279 @@
+const MAX_VISIBLE_NODES = 8;
+const STORAGE_PREFIX = "bolloon.stepTimeline.expanded.";
+const stateMap = /* @__PURE__ */ new WeakMap();
+function readExpanded(channelId) {
+  if (!channelId) return false;
+  try {
+    return localStorage.getItem(STORAGE_PREFIX + channelId) === "1";
+  } catch {
+    return false;
+  }
+}
+function writeExpanded(channelId, expanded) {
+  if (!channelId) return;
+  try {
+    localStorage.setItem(STORAGE_PREFIX + channelId, expanded ? "1" : "0");
+  } catch {
+  }
+}
+function computeTitle(steps) {
+  if (steps.length === 0) return "\u6267\u884C\u6B65\u9AA4";
+  const activeIdx = steps.findIndex((s) => s.status === "active");
+  if (activeIdx >= 0) return `\u25CF \u6267\u884C\u4E2D \xB7 ${steps[activeIdx].name}`;
+  const lastErrorIdx = (() => {
+    for (let i = steps.length - 1; i >= 0; i--) {
+      if (steps[i].status === "error") return i;
+    }
+    return -1;
+  })();
+  if (lastErrorIdx >= 0) return `\u2717 \u5931\u8D25 \xB7 ${steps[lastErrorIdx].name}`;
+  return `\u2713 \u5DF2\u5B8C\u6210 \xB7 ${steps.length} \u6B65`;
+}
+function render(timelineEl) {
+  const state = stateMap.get(timelineEl);
+  if (!state) return;
+  const { steps, expanded, showAll } = state;
+  const titleEl = timelineEl.querySelector("[data-current-tool]");
+  if (titleEl) titleEl.textContent = computeTitle(steps);
+  const dotsEl = timelineEl.querySelector("[data-dots]");
+  if (dotsEl) {
+    const existing = Array.from(dotsEl.children);
+    for (let i = 0; i < steps.length; i++) {
+      const step = steps[i];
+      let dot = existing[i];
+      if (!dot) {
+        dot = document.createElement("span");
+        dot.className = "step-dot";
+        dot.setAttribute("data-index", String(i));
+        dotsEl.appendChild(dot);
+      }
+      dot.setAttribute("data-status", step.status);
+      dot.setAttribute("title", `${step.name} \xB7 ${step.status}`);
+    }
+    while (dotsEl.children.length > steps.length) {
+      dotsEl.removeChild(dotsEl.lastChild);
+    }
+  }
+  const listEl = timelineEl.querySelector("[data-list]");
+  if (listEl) {
+    const hiddenCount = Math.max(0, steps.length - MAX_VISIBLE_NODES);
+    const visibleSteps = showAll ? steps : steps.slice(-MAX_VISIBLE_NODES);
+    const existing = Array.from(listEl.children);
+    let htmlIdx = 0;
+    if (!showAll && hiddenCount > 0) {
+      let moreBtn = existing[htmlIdx];
+      if (!moreBtn || !moreBtn.classList.contains("step-timeline-more")) {
+        moreBtn = document.createElement("li");
+        moreBtn.className = "step-timeline-more";
+        moreBtn.setAttribute("role", "button");
+        moreBtn.textContent = `+ ${hiddenCount} \u66F4\u591A`;
+        moreBtn.onclick = () => {
+          state.showAll = true;
+          render(timelineEl);
+        };
+        if (existing[htmlIdx] && existing[htmlIdx] !== moreBtn) {
+          listEl.replaceChild(moreBtn, existing[htmlIdx]);
+        } else {
+          listEl.appendChild(moreBtn);
+        }
+      } else {
+        moreBtn.textContent = `+ ${hiddenCount} \u66F4\u591A`;
+      }
+      htmlIdx++;
+    }
+    for (let i = 0; i < visibleSteps.length; i++) {
+      const step = visibleSteps[i];
+      const realIndex = showAll ? i : steps.length - visibleSteps.length + i;
+      let node = existing[htmlIdx];
+      if (!node || !node.classList.contains("step-timeline-node")) {
+        node = document.createElement("li");
+        node.className = "step-timeline-node";
+        node.setAttribute("data-index", String(realIndex));
+        const marker = document.createElement("span");
+        marker.className = "step-timeline-marker";
+        const label2 = document.createElement("span");
+        label2.className = "step-timeline-label";
+        const args = document.createElement("span");
+        args.className = "step-timeline-args";
+        node.appendChild(marker);
+        node.appendChild(label2);
+        node.appendChild(args);
+        if (existing[htmlIdx] && existing[htmlIdx] !== node) {
+          listEl.replaceChild(node, existing[htmlIdx]);
+        } else {
+          listEl.appendChild(node);
+        }
+      } else {
+        node.setAttribute("data-index", String(realIndex));
+      }
+      node.setAttribute("data-status", step.status);
+      const label = node.querySelector(".step-timeline-label");
+      if (label) label.textContent = step.name;
+      const argsEl = node.querySelector(".step-timeline-args");
+      if (argsEl) {
+        const argStr = step.args && Object.keys(step.args).length > 0 ? JSON.stringify(step.args).slice(0, 60) : "";
+        argsEl.textContent = argStr;
+        argsEl.style.display = argStr ? "" : "none";
+      }
+      htmlIdx++;
+    }
+    while (listEl.children.length > htmlIdx) {
+      listEl.removeChild(listEl.lastChild);
+    }
+  }
+  if (steps.length === 0) {
+    timelineEl.setAttribute("data-empty", "true");
+  } else {
+    timelineEl.removeAttribute("data-empty");
+  }
+  const body = timelineEl.querySelector("[data-body]");
+  if (body) {
+    if (expanded) {
+      body.style.maxHeight = body.scrollHeight + "px";
+      setTimeout(() => {
+        if (state.expanded) body.style.maxHeight = "";
+      }, 300);
+    } else {
+      body.style.maxHeight = "0";
+    }
+  }
+  const arrow = timelineEl.querySelector(".step-timeline-arrow");
+  if (arrow) arrow.style.transform = expanded ? "rotate(180deg)" : "rotate(0deg)";
+  if (expanded && listEl) {
+    listEl.scrollTop = listEl.scrollHeight;
+  }
+}
+function createEmptyStepTimeline(channelId = null) {
+  const root = document.createElement("div");
+  root.className = "step-timeline";
+  root.setAttribute("data-step-timeline", "");
+  root.setAttribute("data-empty", "true");
+  const summary = document.createElement("div");
+  summary.className = "step-timeline-summary";
+  summary.setAttribute("data-summary", "");
+  const titleSpan = document.createElement("span");
+  titleSpan.className = "step-timeline-title";
+  const titleContent = document.createElement("span");
+  titleContent.setAttribute("data-current-tool", "");
+  titleContent.textContent = "\u6267\u884C\u6B65\u9AA4";
+  titleSpan.appendChild(titleContent);
+  const dots = document.createElement("div");
+  dots.className = "step-timeline-dots";
+  dots.setAttribute("data-dots", "");
+  const arrow = document.createElement("span");
+  arrow.className = "step-timeline-arrow";
+  arrow.textContent = "\u25BE";
+  summary.appendChild(titleSpan);
+  summary.appendChild(dots);
+  summary.appendChild(arrow);
+  summary.onclick = () => {
+    const state = stateMap.get(root);
+    if (!state) return;
+    state.expanded = !state.expanded;
+    writeExpanded(state.channelId, state.expanded);
+    render(root);
+  };
+  const body = document.createElement("div");
+  body.className = "step-timeline-body";
+  body.setAttribute("data-body", "");
+  const list = document.createElement("ul");
+  list.className = "step-timeline-list";
+  list.setAttribute("data-list", "");
+  body.appendChild(list);
+  root.appendChild(summary);
+  root.appendChild(body);
+  const initialExpanded = readExpanded(channelId);
+  stateMap.set(root, {
+    steps: [],
+    currentIndex: -1,
+    expanded: initialExpanded,
+    channelId: channelId || null,
+    showAll: false
+  });
+  render(root);
+  return root;
+}
+function mountStepTimeline(messageEl, channelId) {
+  const existing = messageEl.querySelector("[data-step-timeline]");
+  if (existing) {
+    const state = stateMap.get(existing);
+    if (state && channelId && !state.channelId) state.channelId = channelId;
+    return existing;
+  }
+  const bubble = messageEl.querySelector(".bubble");
+  const actions = messageEl.querySelector(".message-actions");
+  const timeline = createEmptyStepTimeline(channelId);
+  if (actions && actions.parentNode === messageEl) {
+    messageEl.insertBefore(timeline, actions);
+  } else if (bubble && bubble.parentNode === messageEl) {
+    bubble.parentNode.insertBefore(timeline, bubble.nextSibling);
+  } else {
+    messageEl.appendChild(timeline);
+  }
+  return timeline;
+}
+function pushStepToTimeline(timelineEl, eventType, data) {
+  const state = stateMap.get(timelineEl);
+  if (!state) return;
+  const { steps } = state;
+  if (eventType === "step_start") {
+    state.currentIndex = steps.length;
+    steps.push({
+      name: data.tool,
+      status: "active",
+      args: data.args,
+      eventType
+    });
+  } else {
+    let targetIdx = state.currentIndex;
+    if (targetIdx < 0 || !steps[targetIdx] || steps[targetIdx].name !== data.tool) {
+      for (let i = steps.length - 1; i >= 0; i--) {
+        if (steps[i].name === data.tool && steps[i].status === "active") {
+          targetIdx = i;
+          break;
+        }
+      }
+    }
+    if (targetIdx < 0) {
+      targetIdx = steps.length;
+      steps.push({ name: data.tool, status: "error", eventType });
+    }
+    if (eventType === "step_done") {
+      steps[targetIdx].status = data.success === false ? "error" : "done";
+      if (data.output) steps[targetIdx].output = data.output;
+      if (data.error) steps[targetIdx].error = data.error;
+    } else {
+      steps[targetIdx].status = "error";
+      if (data.error) steps[targetIdx].error = data.error;
+    }
+    steps[targetIdx].eventType = eventType;
+    state.currentIndex = -1;
+  }
+  render(timelineEl);
+}
+function migrateStepTimeline(fromEl, toEl) {
+  const fromTimeline = fromEl.querySelector("[data-step-timeline]");
+  const toTimeline = toEl.querySelector("[data-step-timeline]");
+  if (!fromTimeline) return;
+  if (toTimeline && toTimeline !== fromTimeline) {
+    toTimeline.remove();
+  }
+  if (toTimeline !== fromTimeline) {
+    toEl.appendChild(fromTimeline);
+  }
+  const state = stateMap.get(fromTimeline);
+  if (state) {
+    render(fromTimeline);
+  }
+}
+function getStepTimeline(messageEl) {
+  if (!messageEl) return null;
+  return messageEl.querySelector("[data-step-timeline]");
+}
+export {
+  createEmptyStepTimeline,
+  getStepTimeline,
+  migrateStepTimeline,
+  mountStepTimeline,
+  pushStepToTimeline
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolloon/bolloon-agent",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "type": "module",
   "description": "P2P AI Document Agent - 全局安装后执行 `bolloon` 启动产品",
   "main": "dist/cli.js",
@@ -32,7 +32,7 @@
     "src/constraint-runtime"
   ],
   "dependencies": {
-    "@bolloon/bolloon-agent": "^0.1.35",
+    "@bolloon/bolloon-agent": "^0.1.36",
     "@bolloon/constraint-runtime": "0.1.0",
     "@chainsafe/libp2p-noise": "^17.0.0",
     "@chainsafe/libp2p-yamux": "^8.0.1",

package/.auto-evolve-calls

@@ -1 +0,0 @@
-2026-06-14:6

package/.last-auto-evolve-baseline

@@ -1 +0,0 @@
-auto-evolve-baseline-20260614T110128Z