ava-engine 0.1.0 → 0.3.0

package/public/setup.html

@@ -0,0 +1,135 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Set up Ava</title>
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+<link rel="stylesheet" href="/setup.css">
+<script src="/setup.js" defer></script>
+</head>
+<body>
+<div class="shell">
+  <aside class="rail" aria-label="Setup progress">
+    <div class="brand">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="6" fill="#0A0A0C"/><path transform="translate(2.67 8.4) scale(.3)" d="M0 24L9.5 0L19 24M21.6 0L31.1 24L40.6 0M43.2 24L52.7 0L62.2 24" stroke="#fff" fill="none" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      <span>Ava Engine</span>
+    </div>
+    <ol class="steps" id="steps">
+      <li data-step="ai">AI replies</li>
+      <li data-step="voice">Voice</li>
+      <li data-step="speech">Speech recognition</li>
+      <li data-step="access">Access</li>
+      <li data-step="review">Launch</li>
+    </ol>
+    <p class="rail-note">Settings are saved on this computer only, in <code id="configFile">~/.ava-engine/.env</code>.</p>
+  </aside>
+
+  <main class="panel">
+    <div id="fatal" class="banner error" role="alert" hidden></div>
+
+    <!-- 1 · AI -->
+    <section class="step" data-step="ai" aria-labelledby="h-ai">
+      <p class="eyebrow">Step 1 of 5</p>
+      <h1 id="h-ai">How should Ava think?</h1>
+      <p class="lead">Ava's AI runs through <a href="https://openrouter.ai" target="_blank" rel="noopener">OpenRouter</a>: one key for every model. You can also look around first with canned replies.</p>
+      <div class="cards" role="radiogroup" aria-label="AI mode">
+        <label class="card"><input type="radio" name="mode" value="full" checked><span class="card-body"><b>With real AI</b><span>Recommended. Needs an OpenRouter key.</span></span></label>
+        <label class="card"><input type="radio" name="mode" value="mock"><span class="card-body"><b>Just look around first</b><span>No key. Canned replies; voice, screen sharing and everything else work.</span></span></label>
+      </div>
+      <div class="field" id="keyField">
+        <div id="keepKeyRow" class="keep" hidden><label><input type="checkbox" id="keepKey" checked> Keep my current key <code id="currentKey"></code></label></div>
+        <div id="newKeyRow">
+          <div class="connect">
+            <button type="button" class="btn primary" id="connectOr">Connect OpenRouter</button>
+            <p class="hint">Sign in to OpenRouter and approve, and Ava gets its own key. Nothing to copy.</p>
+            <p class="status" id="connectStatus" role="status" aria-live="polite"></p>
+          </div>
+          <p class="or"><span>or paste a key</span></p>
+          <label for="orKey">OpenRouter API key</label>
+          <div class="row">
+            <input id="orKey" type="password" autocomplete="off" spellcheck="false" placeholder="sk-or-v1-…">
+            <button type="button" class="btn ghost" id="checkKey">Check key</button>
+          </div>
+          <p class="hint">Create one at <a href="https://openrouter.ai/keys" target="_blank" rel="noopener">openrouter.ai/keys</a>, and set a credit limit on it.</p>
+          <p class="status" id="keyStatus" role="status" aria-live="polite"></p>
+        </div>
+      </div>
+      <div class="nav"><span></span><button type="button" class="btn primary" data-next>Continue</button></div>
+    </section>
+
+    <!-- 2 · Voice -->
+    <section class="step" data-step="voice" aria-labelledby="h-voice" hidden>
+      <p class="eyebrow">Step 2 of 5</p>
+      <h1 id="h-voice">Which voice should Ava speak with?</h1>
+      <div class="cards" id="voiceCards" role="radiogroup" aria-label="Voice"></div>
+      <div class="job" id="kokoroJob" hidden>
+        <div class="job-head"><span id="kokoroLabel">Downloading the Kokoro voice</span><span id="kokoroPct">0%</span></div>
+        <div class="bar"><i id="kokoroBar"></i></div>
+      </div>
+      <div class="field" id="elevenField" hidden>
+        <div id="keepElevenRow" class="keep" hidden><label><input type="checkbox" id="keepEleven" checked> Keep my current ElevenLabs key <code id="currentEleven"></code></label></div>
+        <div id="newElevenRow">
+          <label for="elKey">ElevenLabs API key</label>
+          <div class="row"><input id="elKey" type="password" autocomplete="off" spellcheck="false"><button type="button" class="btn ghost" id="checkEleven">Check key</button></div>
+          <p class="status" id="elevenStatus" role="status" aria-live="polite"></p>
+        </div>
+        <label for="elVoice">Voice ID <span class="opt">optional, defaults to Matilda</span></label>
+        <input id="elVoice" type="text" autocomplete="off" spellcheck="false" placeholder="XrExE9yKIg1WjnnlVkGX">
+      </div>
+      <div class="nav"><button type="button" class="btn ghost" data-back>Back</button><button type="button" class="btn primary" data-next>Continue</button></div>
+    </section>
+
+    <!-- 3 · Speech -->
+    <section class="step" data-step="speech" aria-labelledby="h-speech" hidden>
+      <p class="eyebrow">Step 3 of 5</p>
+      <h1 id="h-speech">Offline speech recognition</h1>
+      <p class="lead">Turns your customers' speech into text on this computer, free. Skip it to use Chrome's built-in recognition instead.</p>
+      <div class="cards" id="packCards" aria-label="Speech models"></div>
+      <div id="packJobs"></div>
+      <div class="nav"><button type="button" class="btn ghost" data-back>Back</button><button type="button" class="btn primary" data-next>Continue</button></div>
+    </section>
+
+    <!-- 4 · Access -->
+    <section class="step" data-step="access" aria-labelledby="h-access" hidden>
+      <p class="eyebrow">Step 4 of 5</p>
+      <h1 id="h-access">Who will use this Ava?</h1>
+      <div class="cards" role="radiogroup" aria-label="Who will use Ava">
+        <label class="card"><input type="radio" name="audience" value="me" checked><span class="card-body"><b>Just me, on this computer</b><span>Safest. Reachable only at localhost.</span></span></label>
+        <label class="card"><input type="radio" name="audience" value="others"><span class="card-body"><b>My team or customers</b><span>Over a network or the internet. Needs a password, because every call spends your API credit.</span></span></label>
+      </div>
+      <div class="field" id="passwordField" hidden>
+        <div id="keepPassRow" class="keep" hidden><label><input type="checkbox" id="keepPass" checked> Keep my current password</label></div>
+        <div id="newPassRow">
+          <label for="password">Access password</label>
+          <div class="row"><input id="password" type="text" autocomplete="new-password" spellcheck="false" minlength="10"><button type="button" class="btn ghost" id="regen">New one</button><button type="button" class="btn ghost" id="copyPass">Copy</button></div>
+          <p class="hint">At least 10 characters. You'll type it when you open Ava.</p>
+        </div>
+        <label class="check"><input type="checkbox" id="proxy"> It will run behind a proxy or host (Fly.io, Cloudflare, nginx, Render…)</label>
+      </div>
+      <div class="field">
+        <label for="port">Port</label>
+        <input id="port" type="number" min="1" max="65535" inputmode="numeric" class="short">
+      </div>
+      <div class="nav"><button type="button" class="btn ghost" data-back>Back</button><button type="button" class="btn primary" data-next>Continue</button></div>
+    </section>
+
+    <!-- 5 · Review -->
+    <section class="step" data-step="review" aria-labelledby="h-review" hidden>
+      <p class="eyebrow">Step 5 of 5</p>
+      <h1 id="h-review">Ready to launch</h1>
+      <dl class="summary" id="summary"></dl>
+      <p class="status" id="launchStatus" role="status" aria-live="polite"></p>
+      <div class="nav"><button type="button" class="btn ghost" data-back>Back</button><button type="button" class="btn primary" id="launch">Launch Ava</button></div>
+    </section>
+
+    <!-- launching -->
+    <section class="step launching" data-step="launching" aria-live="polite" hidden>
+      <div class="orb" aria-hidden="true"></div>
+      <h1>Starting Ava…</h1>
+      <p class="lead" id="launchMsg">This takes a few seconds. The app opens here when it's ready.</p>
+    </section>
+  </main>
+</div>
+</body>
+</html>

package/public/setup.js

@@ -0,0 +1,289 @@
+"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"), "Connect OpenRouter or check a 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 ──
+  // Connect OpenRouter: sign-in opens in a new tab; the setup server receives the
+  // key and keeps it. This page only learns that it worked, plus a masked key.
+  async function connectOpenRouter() {
+    const tab = window.open("about:blank", "_blank"); // open now, while the click still counts, so it isn't blocked
+    setStatus($("connectStatus"), "Opening OpenRouter…");
+    try {
+      const { url } = await api("openrouter/start", {});
+      if (tab) { tab.opener = null; tab.location = url; } else location.assign(url);
+      setStatus($("connectStatus"), "Waiting for you to approve in the OpenRouter tab…");
+      clearInterval(S.connectTimer);
+      S.connectTimer = setInterval(async () => {
+        let r; try { r = await api("openrouter/status"); } catch { return; }
+        if (r.status === "connected") {
+          clearInterval(S.connectTimer);
+          S.connected = true; S.keyOk = true; $("orKey").value = "";
+          setStatus($("connectStatus"), `✓ Connected (${r.key}). Set a credit limit on it at openrouter.ai/keys.`, "ok");
+          setStatus($("keyStatus"), "");
+        } else if (r.status === "error") {
+          clearInterval(S.connectTimer);
+          setStatus($("connectStatus"), `✗ ${r.error}`, "err");
+        }
+      }, 1500);
+    } catch (e) { tab?.close(); setStatus($("connectStatus"), `✗ ${e.message}`, "err"); }
+  }
+  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" : S.connected && !$("orKey").value.trim() ? "connected" : $("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 = !!S.connected && !$("orKey").value.trim(); setStatus($("keyStatus"), ""); });
+    $("connectOr").addEventListener("click", connectOpenRouter);
+    $("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();
+})();

package/public/style.css

@@ -96,6 +96,10 @@ b { font-weight: 600; }
 .pill { display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; }
 .pill .dot { width: 6px; height: 6px; border-radius: 50%; }
 .pill.standby { background: var(--control); border: 1px solid var(--edge); color: var(--ink2); }
+.pill.demo { background: #FFF6E5; border: 1px solid #F2D49A; color: #7A4B00; }
+.pill.demo[hidden], .ob-demo[hidden] { display: none; }
+.ob-demo { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #FFF6E5; border: 1px solid #F2D49A; color: #5C3A00; font-size: 13.5px; }
+.ob-demo code { font-family: var(--mono); font-size: 12.5px; }
 .pill.standby .dot { border: 1px solid var(--meta); }
 .pill.live { background: var(--brandtint); border: 1px solid var(--brandline); color: var(--amber); }
 .pill.live .dot { background: var(--amber); }

package/server.mjs

@@ -12,8 +12,10 @@ import { oursTurnStream, greetStream, observeUpdate, screenOff, proactiveNudge,
 import { synth, TTS_ENABLED, providers, defaultProvider, warmKokoro, kokoroStream, KOKORO_STREAMS, elevenStream, ELEVEN_STREAMS, TtsBusyError } from "./lib/tts.mjs";
 import { transcribe, STT_ENABLED } from "./lib/stt.mjs";
 import { createAsrSession, asrAvailable, warmAsr, availableEngines, defaultEngine, ENGINE_LABELS } from "./lib/asr.mjs";
-import { platformsView, platformById } from "./lib/platforms.mjs";
+import { platformsView, platformById, CUSTOM_PLAYBOOKS } from "./lib/platforms.mjs";
 import { AUTH_ENABLED, isAuthorized, challengeHeaders, authCookieHeader, clientIp, sameOrigin, limiter } from "./lib/guard.mjs";
+import { emitEvent, WEBHOOKS_ENABLED } from "./lib/webhooks.mjs";
+import { DAILY_BUDGET_USD, dailyCapReached, spentToday } from "./lib/spend.mjs";
 import { WebSocketServer } from "ws";
 
 // A stray rejection is logged, not fatal. An uncaught exception leaves the process
@@ -93,6 +95,7 @@ function send(res, code, body, headers = {}) {
 // Upstream errors (OpenRouter, ElevenLabs, Deepgram…) can carry account or quota
 // detail. Log it here; the browser only gets a short, generic reason.
 function upstreamFail(res, e, what) {
+  if (e?.code === "daily_cap") return send(res, 503, { error: CAP_MSG }, { "Retry-After": untilMidnightUtc() });
   console.error(`  [${what}]`, e?.message || e);
   return send(res, e?.status === 429 ? 429 : 502, { error: `${what} failed` });
 }
@@ -125,7 +128,14 @@ function readBody(req, limit = 3 * 1024 * 1024) {
 
 function safeHost(req) { const h = String(req.headers.host || ""); return /^[a-z0-9.-]+(:\d+)?$/i.test(h) ? h : ""; }
 function validFrame(f) { return typeof f === "string" && f.length <= MAX_FRAME_BYTES && FRAME_RE.test(f) ? f : null; }
-function overBudget(sess) { return sess.score.ours.cost >= SESSION_BUDGET_USD; }
+const CAP_MSG = "Ava has reached today's usage limit — try again tomorrow";
+/** Why a session can't spend more (its own budget, or the daily cap across all sessions), or null. */
+function spendLimit(sess) {
+  if (!MOCK && dailyCapReached()) return CAP_MSG;
+  if (sess.score.ours.cost >= SESSION_BUDGET_USD) return "this session reached its spend limit — start a new call";
+  return null;
+}
+const untilMidnightUtc = () => String(Math.ceil((new Date().setUTCHours(24, 0, 0, 0) - Date.now()) / 1000));
 
 async function serveStatic(req, res, pathname) {
   let p;
@@ -201,6 +211,7 @@ async function handle(req, res) {
     if (req.method === "GET" && url.pathname === "/api/health") {
       return send(res, 200, {
         mock: MOCK,
+        dailyCapReached: !MOCK && dailyCapReached(),
         models: { talker: MODELS.talker, perception: MODELS.perception, planner: MODELS.planner, intent: MODELS.intent },
         labels: ROLE_LABEL,
         tts: { enabled: TTS_ENABLED, providers: providers(), default: defaultProvider() },
@@ -285,11 +296,13 @@ async function handle(req, res) {
     if (req.method === "POST" && url.pathname === "/api/session") {
       if (!rate.session(clientIp(req))) return send(res, 429, { error: "too many new sessions — try again in a minute" }, { "Retry-After": "60" });
       if (!hasCapacity()) return send(res, 503, { error: "Ava is at capacity right now — try again in a few minutes" }, { "Retry-After": "60" });
+      if (!MOCK && dailyCapReached()) return send(res, 503, { error: CAP_MSG }, { "Retry-After": untilMidnightUtc() });
       const body = await readBody(req);
       const mode = body.mode === "onboarding" ? "onboarding" : "flexible";
       const platform = typeof body.platformId === "string" ? platformById(body.platformId) : null; // knowledge in any mode
       const s = newSession({ mode, platform });
       if (!s) return send(res, 503, { error: "Ava is at capacity right now — try again in a few minutes" }, { "Retry-After": "60" });
+      emitEvent("session.started", { sessionId: s.id, mode, platform: platform ? { id: platform.id, name: platform.name } : null });
       // pre-warm the talker route so the greeting isn't a cold start
       if (!MOCK) chat({ model: MODELS.talker, role: "talker", provider: PROVIDER.talker, messages: [{ role: "user", content: "hi" }], maxTokens: 1 }).catch(() => {});
       return send(res, 200, { sessionId: s.id, mock: MOCK, models: MODELS, mode, platform: platform ? { id: platform.id, name: platform.name, url: platform.url } : null });
@@ -300,7 +313,8 @@ async function handle(req, res) {
       const { sessionId, frameHash = null, greet = false, voice = false, changed = false, screenActive = false } = body;
       const sess = getSession(sessionId);
       if (!sess) return send(res, 404, { error: "unknown session" });
-      if (overBudget(sess)) return send(res, 402, { error: "this session reached its spend limit — start a new call" });
+      const limit = spendLimit(sess);
+      if (limit) return send(res, 402, { error: limit });
       const userText = String(body.userText ?? "").slice(0, MAX_USER_TEXT);
       const frame = validFrame(body.frame);
 
@@ -310,8 +324,8 @@ async function handle(req, res) {
         if (greet) await greetStream(sess, emit, !!voice);
         else await oursTurnStream(sess, userText, frame, !!screenActive, frameHash, emit, !!voice, !!changed);
       } catch (e) {
-        console.error("  [turn]", e?.message || e);
-        emit("error", { error: "Ava couldn't answer that one — try again" });
+        if (e?.code === "daily_cap") emit("error", { error: CAP_MSG });
+        else { console.error("  [turn]", e?.message || e); emit("error", { error: "Ava couldn't answer that one — try again" }); }
       }
       res.end();
       return;
@@ -322,7 +336,7 @@ async function handle(req, res) {
       const sess = getSession(sessionId);
       if (!sess) return send(res, 404, { error: "unknown session" });
       if (stopped) return send(res, 200, screenOff(sess)); // user stopped sharing → mark state stale now
-      if (overBudget(sess)) return send(res, 402, { error: "spend limit reached" });
+      if (spendLimit(sess)) return send(res, 402, { error: spendLimit(sess) });
       const frame = validFrame(rawFrame);
       if (!frame) return send(res, 400, { error: "no frame" });
       try { return send(res, 200, await observeUpdate(sess, frame, frameHash, !!changed)); }
@@ -382,7 +396,7 @@ async function handle(req, res) {
       const { sessionId } = await readBody(req);
       const sess = getSession(sessionId);
       if (!sess) return send(res, 404, { error: "unknown session" });
-      if (overBudget(sess)) return send(res, 402, { error: "spend limit reached" });
+      if (spendLimit(sess)) return send(res, 402, { error: spendLimit(sess) });
       try { return send(res, 200, await proactiveNudge(sess)); }
       catch (e) { return upstreamFail(res, e, "nudge"); }
     }
@@ -493,6 +507,9 @@ server.listen(PORT, HOST, () => {
   console.log(`  → http://localhost:${PORT}/app`);
   console.log(`  mode: ${MOCK ? "MOCK (no OPENROUTER_API_KEY set — synthetic replies)" : "LIVE (OpenRouter)"}`);
   if (!MOCK) console.log(`  models: talker=${MODELS.talker}  perception=${MODELS.perception}  planner=${MODELS.planner}  intent=${MODELS.intent}`);
+  if (!MOCK) console.log(DAILY_BUDGET_USD ? `  daily cap: $${DAILY_BUDGET_USD} (spent today: $${spentToday().toFixed(2)})` : "  daily cap: none (set DAILY_BUDGET_USD to limit spend across all calls)");
+  if (CUSTOM_PLAYBOOKS.count) console.log(`  playbooks: ${CUSTOM_PLAYBOOKS.count} from ${CUSTOM_PLAYBOOKS.dir}`);
+  if (WEBHOOKS_ENABLED) console.log("  webhooks: on");
   if (LOCAL_ONLY) console.log("  access: this computer only");
   else if (!AUTH_ENABLED) console.log("  access: OPEN — anyone who can reach this server can spend your API credit. Set ACCESS_PASSWORD before exposing it.");
   else console.log("  access: password protected");