| 396 | ]; |
| 397 | |
| 398 | function initScaffold(host) { |
| 399 | if (!host) return; |
| 400 | host.innerHTML = ""; |
| 401 | host.classList.add("lc-wizard"); |
| 402 | |
| 403 | const state = {}; |
| 404 | SCAFFOLD_STEPS.forEach((s) => (state[s.key] = s.default)); |
| 405 | |
| 406 | // Header |
| 407 | host.appendChild(htmlEl("div", { class: "lc-wizard__head" }, [ |
| 408 | htmlEl("strong", null, "scaffold wizard"), |
| 409 | htmlEl("span", { class: "lc-muted" }, "every choice updates the command"), |
| 410 | ])); |
| 411 | |
| 412 | // Steps |
| 413 | SCAFFOLD_STEPS.forEach((s, i) => { |
| 414 | const step = htmlEl("div", { class: "lc-wizard__step" }); |
| 415 | step.appendChild(htmlEl("span", { class: "lc-wizard__num" }, String(i + 1))); |
| 416 | const main = htmlEl("div", {}); |
| 417 | main.appendChild(htmlEl("p", { class: "lc-wizard__q" }, s.q)); |
| 418 | main.appendChild(htmlEl("p", { class: "lc-wizard__help" }, s.help)); |
| 419 | const toggle = htmlEl("div", { class: "lc-toggle" }); |
| 420 | s.options.forEach((o) => { |
| 421 | const btn = htmlEl("button", { type: "button", "data-v": o.v, class: "lc-toggle__btn" }, o.l); |
| 422 | if (o.v === state[s.key]) btn.classList.add("lc-toggle__btn--on"); |
| 423 | btn.addEventListener("click", () => { |
| 424 | state[s.key] = o.v; |
| 425 | toggle.querySelectorAll(".lc-toggle__btn").forEach((b) => b.classList.remove("lc-toggle__btn--on")); |
| 426 | btn.classList.add("lc-toggle__btn--on"); |
| 427 | render(); |
| 428 | }); |
| 429 | toggle.appendChild(btn); |
| 430 | }); |
| 431 | main.appendChild(toggle); |
| 432 | step.appendChild(main); |
| 433 | host.appendChild(step); |
| 434 | }); |
| 435 | |
| 436 | // Output: the live command |
| 437 | const cmdBox = htmlEl("pre", { class: "lc-wizard__cmd" }); |
| 438 | const cmdCode = htmlEl("code", null, ""); |
| 439 | cmdBox.appendChild(cmdCode); |
| 440 | host.appendChild(cmdBox); |
| 441 | |
| 442 | // Output: file count |
| 443 | const summary = htmlEl("div", { class: "lc-wizard__summary" }); |
| 444 | host.appendChild(summary); |
| 445 | |
| 446 | function render() { |
| 447 | const c = state; |
| 448 | const lines = [ |
| 449 | "agents-cli scaffold create outage-recovery-bot \\", |
| 450 | " --agent adk \\", |
| 451 | ]; |
| 452 | lines.push(" --deployment-target " + c.target + " \\"); |
| 453 | if (c.session !== "in_memory") lines.push(" --session-type " + c.session + " \\"); |
| 454 | if (c.cicd !== "skip") lines.push(" --cicd-runner " + c.cicd + " \\"); |
| 455 | lines.push(c.bq === "yes" ? " --bq-analytics" : " --auto-approve"); |