Add firstboot onboarding and prep/check tooling

pikit-web/assets/firstboot-ui.js

@@ -0,0 +1,142 @@
+const STATUS_CLASS = {
+  pending: "pending",
+  current: "current",
+  running: "current",
+  done: "done",
+  error: "error",
+};
+
+function normalizeStatus(status) {
+  const key = (status || "pending").toString().toLowerCase();
+  return STATUS_CLASS[key] || "pending";
+}
+
+function currentStepLabel(steps = [], fallback = "") {
+  const current = steps.find((step) => {
+    const status = typeof step === "string" ? "pending" : step.status;
+    return ["current", "running", "error"].includes(status);
+  });
+  if (current) {
+    return typeof current === "string" ? current : current.label;
+  }
+  const first = steps.find((step) => (typeof step === "string" ? step : step.label));
+  if (first) return typeof first === "string" ? first : first.label;
+  return fallback || "";
+}
+
+function renderSteps(stepsEl, steps = []) {
+  if (!stepsEl) return;
+  stepsEl.innerHTML = "";
+  steps.forEach((step) => {
+    const li = document.createElement("li");
+    const status = normalizeStatus(step.status);
+    li.className = `firstboot-step ${status}`;
+    const dot = document.createElement("span");
+    dot.className = "step-dot";
+    dot.setAttribute("aria-hidden", "true");
+    const label = document.createElement("span");
+    label.className = "step-label";
+    label.textContent = step.label || "";
+    li.appendChild(dot);
+    li.appendChild(label);
+    stepsEl.appendChild(li);
+  });
+}
+
+function setLogText(logEl, text) {
+  if (!logEl) return;
+  const value = text && text.trim().length ? text : "Waiting for setup logs...";
+  logEl.textContent = value;
+  logEl.scrollTop = logEl.scrollHeight;
+}
+
+function wireCopyButton(btn, getText, showToast) {
+  if (!btn) return;
+  btn.addEventListener("click", async () => {
+    const text = getText();
+    if (!text) return;
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.style.position = "fixed";
+        ta.style.opacity = "0";
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand("copy");
+        document.body.removeChild(ta);
+      }
+      showToast?.("Copied error log", "success");
+    } catch (err) {
+      showToast?.("Copy failed", "error");
+    }
+  });
+}
+
+export function createFirstbootUI({
+  overlay,
+  stepsEl,
+  currentStepEl,
+  logEl,
+  logNoteEl,
+  errorModal,
+  errorLogEl,
+  errorCloseBtn,
+  errorCopyBtn,
+  errorShowRecoveryBtn,
+  recoveryEl,
+  showToast,
+}) {
+  let lastErrorText = "";
+
+  if (errorModal) {
+    errorModal.addEventListener("click", (e) => {
+      if (e.target === errorModal) errorModal.classList.add("hidden");
+    });
+  }
+  errorCloseBtn?.addEventListener("click", () => errorModal?.classList.add("hidden"));
+  errorShowRecoveryBtn?.addEventListener("click", () => recoveryEl?.classList.toggle("hidden"));
+  wireCopyButton(errorCopyBtn, () => lastErrorText, showToast);
+
+  function update(data) {
+    if (!data) return;
+  const steps = Array.isArray(data.steps) ? data.steps : [];
+  const current = data.current_step || currentStepLabel(steps);
+  renderSteps(
+    stepsEl,
+    steps.map((step) => {
+      const label = typeof step === "string" ? step : step.label || "";
+      const status = typeof step === "string" ? "pending" : step.status;
+      return { label, status: normalizeStatus(status) };
+    })
+  );
+
+    if (currentStepEl) {
+      currentStepEl.textContent = current ? `Current step: ${current}` : "Current step: preparing";
+    }
+    setLogText(logEl, data.log_tail || "");
+    if (logNoteEl) logNoteEl.textContent = "If this stalls for more than 10 minutes, refresh the page or check SSH.";
+
+  }
+
+  function showOverlay(show) {
+    if (!overlay) return;
+    overlay.classList.toggle("hidden", !show);
+  }
+
+  function showError(text) {
+    lastErrorText = text || "";
+    if (errorLogEl) {
+      errorLogEl.textContent = lastErrorText || "(no error log found)";
+    }
+    if (errorModal) errorModal.classList.remove("hidden");
+  }
+
+  return {
+    update,
+    showOverlay,
+    showError,
+  };
+}