Function initTranscript

docs/src/javascripts/lifecycle.js:140–205

(host)

  ];

  function initTranscript(host) {
    if (!host) return;
    host.innerHTML = "";
    host.classList.add("lc-transcript");
    const head = htmlEl("div", { class: "lc-transcript__head" });
    head.appendChild(htmlEl("span", { class: "lc-transcript__title" }, "$ agents-cli playground · root_agent"));
    const status = htmlEl("span", { class: "lc-transcript__status" }, "auto · idle");
    head.appendChild(status);
    const body = htmlEl("div", { class: "lc-transcript__body" });
    const foot = htmlEl("div", { class: "lc-transcript__foot" });
    const replayBtn = htmlEl("button", { class: "lc-btn lc-btn--ghost", type: "button" }, "↺ Replay");
    replayBtn.style.display = "none";
    replayBtn.addEventListener("click", () => play());
    foot.appendChild(replayBtn);
    foot.appendChild(htmlEl("span", { class: "lc-muted" }, "a recorded session — different scenario in /lifecycle"));
    host.appendChild(head);
    host.appendChild(body);
    host.appendChild(foot);

    function turnNode(t) {
      if (t.kind === "user") {
        const wrap = htmlEl("div", { class: "lc-row lc-row--right" });
        wrap.appendChild(htmlEl("div", { class: "lc-bubble lc-bubble--user" }, t.text));
        return wrap;
      }
      if (t.kind === "tool") {
        const wrap = htmlEl("div", { class: "lc-row" });
        const card = htmlEl("div", { class: "lc-tool" });
        card.appendChild(
          htmlEl("div", { class: "lc-tool__sig" }, [
            htmlEl("span", { class: "lc-tool__name" }, t.tool),
            htmlEl("span", { class: "lc-muted" }, "(" + t.args + ")"),
          ])
        );
        card.appendChild(htmlEl("div", { class: "lc-tool__result" }, "↳ " + t.result));
        wrap.appendChild(card);
        return wrap;
      }
      const wrap = htmlEl("div", { class: "lc-row" });
      wrap.appendChild(htmlEl("div", { class: "lc-bubble lc-bubble--agent" }, t.text));
      return wrap;
    }

    function play() {
      body.innerHTML = "";
      replayBtn.style.display = "none";
      status.textContent = "auto · playing";
      let i = 0;
      function step() {
        if (i >= TRANSCRIPT_TURNS.length) {
          status.textContent = "auto · done";
          replayBtn.style.display = "";
          return;
        }
        const node = turnNode(TRANSCRIPT_TURNS[i]);
        node.classList.add("lc-fade-in");
        body.appendChild(node);
        body.scrollTop = body.scrollHeight;