ava-engine 0.1.0 → 0.2.0

package/public/setup.js

@@ -0,0 +1,264 @@
+"use strict";
+// Browser setup wizard for `npx ava-engine setup --web`. Talks only to the local
+// setup server; every call carries the one-time token from the URL fragment.
+(() => {
+  const $ = (id) => document.getElementById(id);
+  const TOKEN = new URLSearchParams(location.hash.slice(1)).get("token") || "";
+  const ORDER = ["ai", "voice", "speech", "access", "review"];
+  const S = { step: "ai", state: null, keyOk: false, elevenOk: false, selectedPacks: new Set(), pollTimer: null };
+
+  async function api(path, body) {
+    const r = await fetch(`/api/setup/${path}`, {
+      method: body ? "POST" : "GET",
+      headers: { "X-Setup-Token": TOKEN, ...(body ? { "Content-Type": "application/json" } : {}) },
+      body: body ? JSON.stringify(body) : undefined,
+    });
+    const j = await r.json().catch(() => ({}));
+    if (!r.ok) throw Object.assign(new Error(j.error || `error ${r.status}`), { status: r.status });
+    return j;
+  }
+  const radio = (name) => (document.querySelector(`input[name="${name}"]:checked`) || {}).value;
+  const fatal = (msg) => { const b = $("fatal"); b.textContent = msg; b.hidden = false; };
+  const setStatus = (el, text, kind) => { el.textContent = text; el.className = "status" + (kind ? " " + kind : ""); };
+
+  // ── step navigation ──
+  function show(step) {
+    S.step = step;
+    document.querySelectorAll(".step").forEach((s) => { s.hidden = s.dataset.step !== step; });
+    const idx = ORDER.indexOf(step);
+    document.querySelectorAll("#steps li").forEach((li, i) => {
+      li.classList.toggle("current", i === idx);
+      li.classList.toggle("done", idx > i || step === "launching");
+      if (i === idx) li.setAttribute("aria-current", "step"); else li.removeAttribute("aria-current");
+    });
+    if (step === "voice") syncVoice();
+    if (step === "review") renderSummary();
+    const h = document.querySelector(`.step[data-step="${step}"] h1`);
+    if (h) { h.tabIndex = -1; h.focus({ preventScroll: true }); }
+    window.scrollTo({ top: 0 });
+  }
+  function canLeave(step) {
+    if (step === "ai" && radio("mode") === "full" && !(S.state.current.openrouterKey && $("keepKey").checked) && !S.keyOk) {
+      setStatus($("keyStatus"), "Check your key first, or choose “Just look around first”.", "err"); return false;
+    }
+    if (step === "voice" && radio("voice") === "elevenlabs" && !(S.state.current.elevenKey && $("keepEleven").checked) && !S.elevenOk) {
+      setStatus($("elevenStatus"), "Check your ElevenLabs key first, or pick another voice.", "err"); return false;
+    }
+    if (step === "access" && radio("audience") === "others" && !(S.state.current.hasPassword && $("keepPass").checked) && $("password").value.length < 10) {
+      $("password").focus(); return false;
+    }
+    if (step === "access") { const p = Number($("port").value); if (!(Number.isInteger(p) && p > 0 && p < 65536)) { $("port").focus(); return false; } }
+    return true;
+  }
+  document.addEventListener("click", (e) => {
+    if (e.target.matches("[data-next]")) { if (canLeave(S.step)) show(ORDER[ORDER.indexOf(S.step) + 1]); }
+    if (e.target.matches("[data-back]")) show(ORDER[ORDER.indexOf(S.step) - 1]);
+  });
+
+  // ── 1 · AI ──
+  function syncMode() {
+    const full = radio("mode") === "full";
+    $("keyField").hidden = !full;
+    const hasKey = !!S.state.current.openrouterKey;
+    $("keepKeyRow").hidden = !hasKey;
+    $("newKeyRow").hidden = hasKey && $("keepKey").checked;
+  }
+  async function checkKey(service, input, statusEl, okFlag) {
+    const key = input.value.trim();
+    setStatus(statusEl, "Checking…");
+    try {
+      const r = await api("check", { service, key });
+      S[okFlag] = !!r.ok || !!r.offline;
+      if (r.ok) setStatus(statusEl, `✓ Key works${r.label ? ` (${r.label})` : ""}${r.limit != null ? `, credit limit $${r.limit}` : ""}`, "ok");
+      else setStatus(statusEl, r.offline ? `${r.error}. It will be saved anyway.` : `✗ ${r.error}`, r.offline ? "" : "err");
+    } catch (e) { S[okFlag] = false; setStatus(statusEl, `✗ ${e.message}`, "err"); }
+  }
+
+  // ── 2 · voice ──
+  function renderVoices() {
+    const v = S.state.voices, cur = S.state.current.voice;
+    $("voiceCards").innerHTML = "";
+    for (const [id, info] of Object.entries(v)) {
+      const label = document.createElement("label"); label.className = "card";
+      label.innerHTML = `<input type="radio" name="voice"><span class="card-body"><b></b><span></span></span>`;
+      const input = label.querySelector("input"); input.value = id; input.checked = id === cur;
+      label.querySelector("b").textContent = info.label;
+      label.querySelector(".card-body span").textContent = id === "kokoro" && S.state.kokoro.installed ? "Free, runs on this computer. Installed." : info.hint[0].toUpperCase() + info.hint.slice(1) + ".";
+      $("voiceCards").append(label);
+    }
+  }
+  function syncVoice() {
+    const voice = radio("voice");
+    $("elevenField").hidden = voice !== "elevenlabs";
+    const hasEl = !!S.state.current.elevenKey;
+    $("keepElevenRow").hidden = !hasEl;
+    $("newElevenRow").hidden = hasEl && $("keepEleven").checked;
+    // Only download once you're actually choosing a voice, never just because Kokoro is the default.
+    if (voice === "kokoro" && !S.state.kokoro.installed && S.step === "voice") startDownload("kokoro");
+  }
+
+  // ── 3 · speech models ──
+  function renderPacks() {
+    const box = $("packCards"); box.innerHTML = "";
+    for (const [id, p] of Object.entries(S.state.packs)) {
+      const installed = S.state.installedPacks.includes(id);
+      const label = document.createElement("label"); label.className = "card";
+      label.innerHTML = `<input type="checkbox"><span class="card-body"><b></b><span></span></span>`;
+      const input = label.querySelector("input"); input.value = id;
+      input.checked = installed || S.selectedPacks.has(id); input.disabled = installed;
+      label.querySelector("b").textContent = `${p.label} · ${p.size}`;
+      label.querySelector(".card-body span").textContent = p.hint;
+      if (installed) { const badge = document.createElement("span"); badge.className = "badge"; badge.textContent = "installed"; label.append(badge); }
+      input.addEventListener("change", () => { if (input.checked) { S.selectedPacks.add(id); startDownload(id); } else S.selectedPacks.delete(id); });
+      box.append(label);
+    }
+  }
+
+  // ── downloads ──
+  async function startDownload(id) {
+    try { await api("download", { id }); pollJobs(); } catch (e) { fatal(e.message); }
+  }
+  function renderJob(container, id, job) {
+    let el = document.getElementById(`job-${id}`);
+    if (!el) {
+      el = document.createElement("div"); el.className = "job"; el.id = `job-${id}`;
+      el.innerHTML = `<div class="job-head"><span></span><span></span></div><div class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"><i></i></div>`;
+      container.append(el);
+    }
+    el.className = "job" + (job.state === "done" ? " done" : job.state === "error" ? " error" : "");
+    el.querySelector(".job-head span").textContent = job.state === "error" ? `${job.label}: failed (${job.error})` : job.state === "done" ? `${job.label}: ready` : `Downloading ${job.label}${job.phase === "unpacking" ? " (unpacking)" : ""}`;
+    el.querySelector(".job-head span:last-child").textContent = `${job.pct || 0}%`;
+    el.querySelector(".bar").setAttribute("aria-valuenow", String(job.pct || 0));
+    el.querySelector(".bar i").style.width = `${job.pct || 0}%`;
+  }
+  async function pollJobs() {
+    clearTimeout(S.pollTimer);
+    try {
+      const { jobs, installedPacks, kokoroInstalled } = await api("jobs");
+      S.state.installedPacks = installedPacks; S.state.kokoro.installed = kokoroInstalled;
+      for (const [id, job] of Object.entries(jobs)) {
+        if (id === "kokoro") {
+          $("kokoroJob").hidden = false;
+          $("kokoroJob").className = "job" + (job.state === "done" ? " done" : job.state === "error" ? " error" : "");
+          $("kokoroLabel").textContent = job.state === "done" ? "Kokoro voice ready" : job.state === "error" ? `Kokoro voice failed: ${job.error}` : `Downloading the Kokoro voice (${S.state.kokoro.size})`;
+          $("kokoroPct").textContent = `${job.pct || 0}%`;
+          $("kokoroBar").style.width = `${job.pct || 0}%`;
+        } else renderJob($("packJobs"), id, job);
+      }
+      if (Object.values(jobs).some((j) => j.state === "running")) S.pollTimer = setTimeout(pollJobs, 700);
+      else if (S.step === "review") renderSummary();
+    } catch { S.pollTimer = setTimeout(pollJobs, 2000); }
+  }
+
+  // ── 4 · access ──
+  function syncAudience() {
+    const others = radio("audience") === "others";
+    $("passwordField").hidden = !others;
+    $("keepPassRow").hidden = !S.state.current.hasPassword;
+    $("newPassRow").hidden = S.state.current.hasPassword && $("keepPass").checked;
+  }
+
+  // ── 5 · review & launch ──
+  function answers() {
+    const mode = radio("mode"), voice = radio("voice"), audience = radio("audience");
+    return {
+      mode,
+      openrouterKey: mode === "mock" ? null : S.state.current.openrouterKey && $("keepKey").checked ? "keep" : $("orKey").value.trim(),
+      voice,
+      elevenKey: voice === "elevenlabs" ? (S.state.current.elevenKey && $("keepEleven").checked ? "keep" : $("elKey").value.trim()) : undefined,
+      elevenVoice: voice === "elevenlabs" ? $("elVoice").value.trim() || null : undefined,
+      audience,
+      password: audience === "others" ? (S.state.current.hasPassword && $("keepPass").checked ? "keep" : $("password").value) : undefined,
+      proxy: $("proxy").checked,
+      port: Number($("port").value),
+    };
+  }
+  function renderSummary() {
+    const a = answers(), packs = S.state.installedPacks.map((id) => S.state.packs[id].label);
+    // Wait only for downloads that match the current choices (a voice you switched away from doesn't count).
+    const busy = (el) => el && !el.hidden && !el.classList.contains("done") && !el.classList.contains("error");
+    const running = (a.voice === "kokoro" && busy($("kokoroJob")) ? 1 : 0)
+      + [...S.selectedPacks].filter((id) => busy(document.getElementById(`job-${id}`))).length;
+    const rows = [
+      ["AI replies", a.mode === "mock" ? "MOCK mode (canned replies)" : "OpenRouter"],
+      ["Voice", S.state.voices[a.voice].label],
+      ["Speech recognition", packs.length ? packs.join(", ") : "Chrome's built-in recognition"],
+      ["Access", a.audience === "me" ? "This computer only" : "Password protected"],
+      ["Address", `http://localhost:${a.port}/app`],
+    ];
+    if (a.audience === "others" && a.password !== "keep") rows.splice(4, 0, ["Password", a.password]);
+    const dl = $("summary"); dl.innerHTML = "";
+    for (const [k, v] of rows) { const dt = document.createElement("dt"), dd = document.createElement("dd"); dt.textContent = k; dd.textContent = v; dl.append(dt, dd); }
+    $("launch").disabled = running > 0;
+    setStatus($("launchStatus"), running ? "Waiting for downloads to finish…" : "");
+  }
+  async function launch() {
+    $("launch").disabled = true;
+    setStatus($("launchStatus"), "Saving…");
+    try {
+      const saved = await api("save", { answers: answers() });
+      await api("finish", {});
+      show("launching");
+      const url = saved.url;
+      // Wait until *Ava* answers. On the same port the setup server may still be
+      // closing, so read the reply and make sure it's Ava's health report. On a
+      // different port anything that answers is Ava (no-cors can't read it).
+      const samePort = String(saved.port) === (location.port || "80");
+      for (let i = 0; i < 120; i++) {
+        try {
+          if (samePort) {
+            const r = await fetch("/api/health", { cache: "no-store" });
+            if (r.ok && "models" in (await r.json())) { location.replace(url); return; }
+          } else {
+            await fetch(`http://localhost:${saved.port}/api/health`, { mode: "no-cors", cache: "no-store" });
+            location.replace(url); return;
+          }
+        } catch {}
+        await new Promise((r) => setTimeout(r, 500));
+      }
+      $("launchMsg").textContent = `Ava is taking a while. Open ${url} when it's ready, or check the terminal.`;
+    } catch (e) {
+      setStatus($("launchStatus"), `✗ ${e.message}`, "err");
+      $("launch").disabled = false;
+    }
+  }
+
+  // ── boot ──
+  async function boot() {
+    if (!TOKEN) return fatal("This page needs the link printed by `npx ava-engine setup --web`.");
+    try { S.state = await api("state"); } catch (e) { return fatal(e.message); }
+    history.replaceState(null, "", "/setup"); // drop the token from the address bar (it stays in memory)
+    const c = S.state.current;
+    $("configFile").textContent = S.state.configFile;
+    if (c.openrouterKey) { $("currentKey").textContent = c.openrouterKey; }
+    if (c.elevenKey) $("currentEleven").textContent = c.elevenKey;
+    $("elVoice").value = c.elevenVoice;
+    document.querySelector(`input[name="audience"][value="${c.audience}"]`).checked = true;
+    $("password").value = S.state.suggestedPassword;
+    $("proxy").checked = c.proxy;
+    $("port").value = c.port;
+    renderVoices(); renderPacks();
+    syncMode(); syncVoice(); syncAudience();
+
+    document.querySelectorAll('input[name="mode"]').forEach((i) => i.addEventListener("change", syncMode));
+    $("keepKey").addEventListener("change", syncMode);
+    $("voiceCards").addEventListener("change", syncVoice);
+    $("keepEleven").addEventListener("change", syncVoice);
+    document.querySelectorAll('input[name="audience"]').forEach((i) => i.addEventListener("change", syncAudience));
+    $("keepPass").addEventListener("change", syncAudience);
+    $("orKey").addEventListener("input", () => { S.keyOk = false; setStatus($("keyStatus"), ""); });
+    $("elKey").addEventListener("input", () => { S.elevenOk = false; setStatus($("elevenStatus"), ""); });
+    $("checkKey").addEventListener("click", () => checkKey("openrouter", $("orKey"), $("keyStatus"), "keyOk"));
+    $("checkEleven").addEventListener("click", () => checkKey("elevenlabs", $("elKey"), $("elevenStatus"), "elevenOk"));
+    $("orKey").addEventListener("keydown", (e) => { if (e.key === "Enter") $("checkKey").click(); });
+    $("regen").addEventListener("click", async () => { $("password").value = (await api("password")).password; });
+    $("copyPass").addEventListener("click", async () => { try { await navigator.clipboard.writeText($("password").value); $("copyPass").textContent = "Copied"; setTimeout(() => { $("copyPass").textContent = "Copy"; }, 1400); } catch {} });
+    $("launch").addEventListener("click", launch);
+    show("ai");
+    pollJobs();
+  }
+  // A fresh setup link opened in this same tab only changes the #token, which
+  // doesn't reload the page; reload so the new token is used.
+  window.addEventListener("hashchange", () => { if (/token=/.test(location.hash)) location.reload(); });
+  boot();
+})();