@bolloon/bolloon-agent 0.2.9 → 0.2.11

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

@@ -1,375 +1,279 @@
-/**
- * step-timeline.ts — 气泡内 4 状态步骤条 (2026-06-15)
- *
- * 职责 (单一):
- *   - 给每条 AI 消息挂一个可折叠/展开的步骤条
- *   - 状态机: idle ○ / active ● / done 🟢 / error 🔴
- *   - 摘要条 + 详情区共用同一份 Step[] 数据
- *   - 流式期间在 streaming 元素内, finalize 时搬到正式 message
- *   - 折叠状态按 channel 持久化 (localStorage)
- *
- * 状态 (模块私有, 每个 message 一个实例):
- *   - steps: Step[]
- *   - currentIndex: number
- *   - expanded: boolean  (受 localStorage 影响)
- *
- * 输入 (从 message-renderer 调用):
- *   - createEmptyStepTimeline(channelId) -> HTMLElement
- *   - mountStepTimeline(messageEl, channelId)  // 已有 message 上挂 timeline
- *   - pushStepToTimeline(timelineEl, type, data)  // 订阅 step_start/done/error
- *   - migrateStepTimeline(fromEl, toEl)  // finalize 时搬家
- *
- * 输出 (DOM):
- *   - .step-timeline / .step-timeline-summary / .step-timeline-body
- *   - .step-dot (摘要条圆点) / .step-timeline-node (详情区节点)
- */
 const MAX_VISIBLE_NODES = 8;
-const STORAGE_PREFIX = 'bolloon.stepTimeline.expanded.';
-const stateMap = new WeakMap();
-// ---------------------------------------------------------------------------
-// 工具: 持久化
-// ---------------------------------------------------------------------------
+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;
-    }
+  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 { /* localStorage 写失败 (隐私模式), 静默 */ }
+  if (!channelId) return;
+  try {
+    localStorage.setItem(STORAGE_PREFIX + channelId, expanded ? "1" : "0");
+  } catch {
+  }
 }
-// ---------------------------------------------------------------------------
-// 工具: 摘要条 title
-// ---------------------------------------------------------------------------
 function computeTitle(steps) {
-    if (steps.length === 0)
-        return '执行步骤';
-    // 优先 active, 其次最后一个 error
-    const activeIdx = steps.findIndex(s => s.status === 'active');
-    if (activeIdx >= 0)
-        return `● 执行中 · ${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 `✗ 失败 · ${steps[lastErrorIdx].name}`;
-    return `✓ 已完成 · ${steps.length} 步`;
+  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`;
 }
-// ---------------------------------------------------------------------------
-// 核心: 渲染 (摘要条 + 详情区, 共用 steps 状态)
-// ---------------------------------------------------------------------------
 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);
-    // 摘要条 dots
-    const dotsEl = timelineEl.querySelector('[data-dots]');
-    if (dotsEl) {
-        // diff: 复用现有 dot, 多余 remove, 缺少 append
-        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} · ${step.status}`);
-        }
-        while (dotsEl.children.length > steps.length) {
-            dotsEl.removeChild(dotsEl.lastChild);
-        }
+  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}`);
     }
-    // 详情区 list
-    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;
-        // "+N 更多" 折叠行 (仅在 showAll=false 且有 hidden 时)
-        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} 更多`;
-                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} 更多`;
-            }
-            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 label = document.createElement('span');
-                label.className = 'step-timeline-label';
-                const args = document.createElement('span');
-                args.className = 'step-timeline-args';
-                node.appendChild(marker);
-                node.appendChild(label);
-                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++;
-        }
-        // 清理多余 li
-        while (listEl.children.length > htmlIdx) {
-            listEl.removeChild(listEl.lastChild);
-        }
-    }
-    // 折叠态: 空状态显示占位, 有节点就保持
-    if (steps.length === 0) {
-        timelineEl.setAttribute('data-empty', 'true');
+    while (dotsEl.children.length > steps.length) {
+      dotsEl.removeChild(dotsEl.lastChild);
     }
-    else {
-        timelineEl.removeAttribute('data-empty');
-    }
-    // 折叠 class
-    const body = timelineEl.querySelector('[data-body]');
-    if (body) {
-        if (expanded) {
-            body.style.maxHeight = body.scrollHeight + 'px';
-            setTimeout(() => {
-                // 动画结束后清掉, 让内容自适应 (新 step 进来时能撑开)
-                if (state.expanded)
-                    body.style.maxHeight = '';
-            }, 300);
+  }
+  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 {
-            body.style.maxHeight = '0';
+      } 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);
     }
-    const arrow = timelineEl.querySelector('.step-timeline-arrow');
-    if (arrow)
-        arrow.style.transform = expanded ? 'rotate(180deg)' : 'rotate(0deg)';
-    // 自动滚到底 (新节点进来时, 详情区跟到底)
-    if (expanded && listEl) {
-        listEl.scrollTop = listEl.scrollHeight;
+  }
+  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;
+  }
 }
-// ---------------------------------------------------------------------------
-// 公共: 创建一个空 timeline (AI 消息创建时挂的占位)
-// ---------------------------------------------------------------------------
-export 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 = '执行步骤';
-    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 = '▾';
-    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,
-    });
+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);
-    return 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;
 }
-// ---------------------------------------------------------------------------
-// 公共: 把 timeline 挂到 message 上 (初始化或补挂)
-// ---------------------------------------------------------------------------
-export 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;
-    }
-    // 找插入点: 在 .bubble 之后, .message-actions 之前
-    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 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;
 }
-// ---------------------------------------------------------------------------
-// 公共: 推一个 step 事件 (start/done/error)
-// ---------------------------------------------------------------------------
-export 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 {
-        // step_done / step_error — 找当前 active 节点关闭
-        // 优先匹配 currentIndex, 其次回退到最后一个 active
-        let targetIdx = state.currentIndex;
-        if (targetIdx < 0 || !steps[targetIdx] || steps[targetIdx].name !== data.tool) {
-            // 兜底: 找最后一个同名 active
-            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) {
-            // 没有 active 节点匹配, 当作新 error 节点
-            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;
+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;
         }
-        steps[targetIdx].eventType = eventType;
-        state.currentIndex = -1;
+      }
     }
-    render(timelineEl);
-}
-// ---------------------------------------------------------------------------
-// 公共: finalize 时把 timeline 元素从 from 搬到 to (避免重渲)
-// 接受 timelineEl 本身或 fromEl 内部的 timeline
-// ---------------------------------------------------------------------------
-export function migrateStepTimeline(fromEl, toEl) {
-    const fromTimeline = fromEl.querySelector('[data-step-timeline]');
-    const toTimeline = toEl.querySelector('[data-step-timeline]');
-    if (!fromTimeline)
-        return;
-    // 移除 toEl 的占位, 搬 fromEl 的过来
-    if (toTimeline && toTimeline !== fromTimeline) {
-        toTimeline.remove();
-    }
-    if (toTimeline !== fromTimeline) {
-        toEl.appendChild(fromTimeline);
+    if (targetIdx < 0) {
+      targetIdx = steps.length;
+      steps.push({ name: data.tool, status: "error", eventType });
     }
-    // 重渲一次 (channelId 注入)
-    const state = stateMap.get(fromTimeline);
-    if (state) {
-        render(fromTimeline);
+    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);
+  }
 }
-// ---------------------------------------------------------------------------
-// 公共: 拿到一个 message 内的 timeline (无则返回 null)
-// ---------------------------------------------------------------------------
-export function getStepTimeline(messageEl) {
-    if (!messageEl)
-        return null;
-    return messageEl.querySelector('[data-step-timeline]');
+function getStepTimeline(messageEl) {
+  if (!messageEl) return null;
+  return messageEl.querySelector("[data-step-timeline]");
 }
+export {
+  createEmptyStepTimeline,
+  getStepTimeline,
+  migrateStepTimeline,
+  mountStepTimeline,
+  pushStepToTimeline
+};