| 1067 | ]; |
| 1068 | |
| 1069 | function initPlayground(host) { |
| 1070 | if (!host) return; |
| 1071 | host.innerHTML = ""; |
| 1072 | host.classList.add("lc-transcript"); |
| 1073 | const head = htmlEl("div", { class: "lc-transcript__head" }); |
| 1074 | head.appendChild(htmlEl("span", { class: "lc-transcript__title" }, "$ agents-cli playground · root_agent")); |
| 1075 | const counter = htmlEl("span", { class: "lc-mono lc-muted" }, "0/" + PLAYGROUND_TURNS.length); |
| 1076 | head.appendChild(counter); |
| 1077 | const body = htmlEl("div", { class: "lc-transcript__body" }); |
| 1078 | const foot = htmlEl("div", { class: "lc-transcript__foot" }); |
| 1079 | const advance = htmlEl("button", { class: "lc-btn", type: "button" }, "▶ Send the first prompt"); |
| 1080 | foot.appendChild(advance); |
| 1081 | foot.appendChild(htmlEl("span", { class: "lc-muted" }, "click to step through · payments triage · 5 turns")); |
| 1082 | host.appendChild(head); |
| 1083 | host.appendChild(body); |
| 1084 | host.appendChild(foot); |
| 1085 | |
| 1086 | function renderTurn(t) { |
| 1087 | if (t.kind === "user") { |
| 1088 | const w = htmlEl("div", { class: "lc-row lc-row--right" }); |
| 1089 | w.appendChild(htmlEl("div", { class: "lc-bubble lc-bubble--user" }, t.text)); |
| 1090 | return w; |
| 1091 | } |
| 1092 | if (t.kind === "tool") { |
| 1093 | const w = htmlEl("div", { class: "lc-row" }); |
| 1094 | const c = htmlEl("div", { class: "lc-tool" }); |
| 1095 | c.appendChild(htmlEl("div", { class: "lc-tool__sig" }, [ |
| 1096 | htmlEl("span", { class: "lc-tool__name" }, t.tool), |
| 1097 | htmlEl("span", { class: "lc-muted" }, "(" + t.args + ")"), |
| 1098 | ])); |
| 1099 | c.appendChild(htmlEl("div", { class: "lc-tool__result" }, "↳ " + t.result)); |
| 1100 | w.appendChild(c); |
| 1101 | return w; |
| 1102 | } |
| 1103 | const w = htmlEl("div", { class: "lc-row" }); |
| 1104 | w.appendChild(htmlEl("div", { class: "lc-bubble lc-bubble--agent" }, t.text)); |
| 1105 | return w; |
| 1106 | } |
| 1107 | |
| 1108 | let step = 0; |
| 1109 | function next() { |
| 1110 | if (step >= PLAYGROUND_TURNS.length) { |
| 1111 | // reset |
| 1112 | step = 0; |
| 1113 | body.innerHTML = ""; |
| 1114 | counter.textContent = "0/" + PLAYGROUND_TURNS.length; |
| 1115 | advance.textContent = "▶ Send the first prompt"; |
| 1116 | return; |
| 1117 | } |
| 1118 | const node = renderTurn(PLAYGROUND_TURNS[step]); |
| 1119 | node.classList.add("lc-fade-in"); |
| 1120 | body.appendChild(node); |
| 1121 | body.scrollTop = body.scrollHeight; |
| 1122 | step += 1; |
| 1123 | counter.textContent = step + "/" + PLAYGROUND_TURNS.length; |
| 1124 | advance.textContent = step >= PLAYGROUND_TURNS.length ? "↺ Replay" : "→ Next turn"; |
| 1125 | } |
| 1126 | advance.addEventListener("click", next); |