ava-engine 0.2.0 → 0.4.0

package/public/setup.html

@@ -12,34 +12,60 @@
 <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>
+      <svg class="wm" viewBox="0 0 66 27.8" role="img" aria-label="Ava"><path transform="translate(1.9 1.9)" d="M0 24L9.5 0L19 24M21.6 0L31.1 24L40.6 0M43.2 24L52.7 0L62.2 24" fill="none" stroke="currentColor" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      <span class="brand-tag">Engine setup</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>
+      <li data-step="ai"><span class="steps-name">AI replies</span><span class="steps-sub">OpenRouter or demo</span></li>
+      <li data-step="voice"><span class="steps-name">Voice</span><span class="steps-sub">How Ava sounds</span></li>
+      <li data-step="speech"><span class="steps-name">Speech recognition</span><span class="steps-sub">Offline, optional</span></li>
+      <li data-step="access"><span class="steps-name">Access</span><span class="steps-sub">Who can reach Ava</span></li>
+      <li data-step="review"><span class="steps-name">Launch</span><span class="steps-sub">Open the dashboard</span></li>
     </ol>
-    <p class="rail-note">Settings are saved on this computer only, in <code id="configFile">~/.ava-engine/.env</code>.</p>
+    <div class="rail-card" aria-hidden="true">
+      <span class="rail-orb"></span>
+      <span class="rail-card-text"><b>Ava</b><span class="mono">getting ready</span></span>
+      <span class="rail-wave"><i></i><i></i><i></i><i></i><i></i></span>
+    </div>
+    <p class="rail-note">Saved on this computer only, in <code id="configFile">~/.ava-engine/.env</code>.</p>
   </aside>
 
   <main class="panel">
+    <div class="progress" aria-hidden="true"><i id="progressBar"></i></div>
     <div id="fatal" class="banner error" role="alert" hidden></div>
 
+    <!-- 0 · Welcome -->
+    <section class="step welcome" data-step="welcome" aria-labelledby="h-welcome">
+      <div class="hero-orb" aria-hidden="true"><i></i><i></i><span></span></div>
+      <p class="eyebrow">Welcome</p>
+      <h1 id="h-welcome">Let's get Ava ready</h1>
+      <p class="lead">A live, screen-aware guide for your customers. Five short steps, about two minutes. You can change any of it later.</p>
+      <ul class="welcome-list">
+        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/><circle cx="12" cy="12" r="3.2"/></svg><span><b>Pick its brain</b><span>Connect OpenRouter for real answers, or start in demo mode</span></span></li>
+        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11.5 4.5 6.8 8.6H3.2v6.8h3.6l4.7 4.1V4.5Z"/><path d="M15.4 9.6a3.6 3.6 0 0 1 0 4.8M18 7a7 7 0 0 1 0 10"/></svg><span><b>Give it a voice</b><span>Free and offline, or premium cloud voices</span></span></li>
+        <li><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4.5" y="10.5" width="15" height="10" rx="2.5"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/></svg><span><b>Decide who gets in</b><span>Just you, or your team and customers with a password</span></span></li>
+      </ul>
+      <div class="nav"><span></span><button type="button" class="btn primary" data-next>Get started<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button></div>
+    </section>
+
     <!-- 1 · AI -->
-    <section class="step" data-step="ai" aria-labelledby="h-ai">
+    <section class="step" data-step="ai" aria-labelledby="h-ai" hidden>
       <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>
+        <label class="card"><input type="radio" name="mode" value="full" checked><span class="card-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/><circle cx="12" cy="12" r="3.2"/></svg></span><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-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z"/><circle cx="12" cy="12" r="2.8"/></svg></span><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 class="field keybox" 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"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg>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-…">
@@ -49,7 +75,7 @@
           <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>
+      <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>
 
     <!-- 2 · Voice -->
@@ -89,8 +115,8 @@
       <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>
+        <label class="card"><input type="radio" name="audience" value="me" checked><span class="card-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4.5" width="18" height="12" rx="2"/><path d="M8 20h8M12 16.5V20"/></svg></span><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-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg></span><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>
@@ -112,16 +138,17 @@
     <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>
+      <p class="lead">Here's your setup. Launch Ava and your dashboard opens: test a call, describe your product, then share a link with customers.</p>
       <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>
+      <div class="nav"><button type="button" class="btn ghost" data-back>Back</button><button type="button" class="btn primary" id="launch">Launch Ava<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button></div>
     </section>
 
     <!-- launching -->
     <section class="step launching" data-step="launching" aria-live="polite" hidden>
-      <div class="orb" aria-hidden="true"></div>
+      <div class="hero-orb big" aria-hidden="true"><i></i><i></i><span></span></div>
       <h1>Starting Ava…</h1>
-      <p class="lead" id="launchMsg">This takes a few seconds. The app opens here when it's ready.</p>
+      <p class="lead" id="launchMsg">This takes a few seconds. Your dashboard opens here when it's ready.</p>
     </section>
   </main>
 </div>

package/public/setup.js

@@ -4,8 +4,15 @@
 (() => {
   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 };
+  const ORDER = ["welcome", "ai", "voice", "speech", "access", "review"];
+  const STEPS = ORDER.slice(1); // the numbered steps in the rail
+  const ICON = {
+    kokoro: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19c0-8 5-13 14-14-1 9-6 14-14 14Z"/><path d="M5 19 13 11"/></svg>',
+    elevenlabs: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 10v4M8 7v10M12 4v16M16 8v8M20 11v2"/></svg>',
+    browser: '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4.5" width="18" height="14" rx="2.5"/><path d="M3 9h18M6.5 6.8h.01M9 6.8h.01"/></svg>',
+    pack: '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3"/></svg>',
+  };
+  const S = { step: "welcome", state: null, keyOk: false, elevenOk: false, selectedPacks: new Set(), pollTimer: null };
 
   async function api(path, body) {
     const r = await fetch(`/api/setup/${path}`, {
@@ -25,7 +32,8 @@
   function show(step) {
     S.step = step;
     document.querySelectorAll(".step").forEach((s) => { s.hidden = s.dataset.step !== step; });
-    const idx = ORDER.indexOf(step);
+    const idx = STEPS.indexOf(step) === -1 ? (step === "launching" ? STEPS.length : -1) : STEPS.indexOf(step);
+    $("progressBar").style.width = `${step === "welcome" ? 4 : step === "launching" ? 100 : ((idx + 1) / (STEPS.length + 1)) * 100}%`;
     document.querySelectorAll("#steps li").forEach((li, i) => {
       li.classList.toggle("current", i === idx);
       li.classList.toggle("done", idx > i || step === "launching");
@@ -39,7 +47,7 @@
   }
   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;
+      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;
@@ -56,6 +64,30 @@
   });
 
   // ── 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;
@@ -80,7 +112,7 @@
     $("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>`;
+      label.innerHTML = `<input type="radio" name="voice"><span class="card-icon">${ICON[id] || ICON.browser}</span><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) + ".";
@@ -103,7 +135,7 @@
     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>`;
+      label.innerHTML = `<input type="checkbox"><span class="card-icon">${ICON.pack}</span><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}`;
@@ -163,7 +195,7 @@
     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(),
+      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,
@@ -184,7 +216,7 @@
       ["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`],
+      ["Dashboard", `http://localhost:${a.port}/dashboard`],
     ];
     if (a.audience === "others" && a.password !== "keep") rows.splice(4, 0, ["Password", a.password]);
     const dl = $("summary"); dl.innerHTML = "";
@@ -246,7 +278,8 @@
     $("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"), ""); });
+    $("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"));
@@ -254,7 +287,7 @@
     $("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");
+    show("welcome");
     pollJobs();
   }
   // A fresh setup link opened in this same tab only changes the #token, which

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); }
@@ -834,3 +838,20 @@ body { height: 100dvh; }
   .rep-foot { justify-content: flex-end; }
   .rep-foot .ghostbtn { white-space: nowrap; }
 }
+
+/* ── lobby extras: dashboard link (operators) and the journey preview (share links) ── */
+.ob-section[hidden], .ob-dashlink[hidden] { display: none; }
+.ob-dashlink { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; padding: 5px 12px 5px 8px; border-radius: 99px; border: 1px solid var(--edge); background: var(--control); color: var(--ink2); font-size: 13px; font-weight: 500; text-decoration: none; transition: border-color .15s, color .15s; }
+.ob-dashlink:hover { color: var(--ink); border-color: #C6C6D0; }
+.ob-journey { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: j; }
+.ob-journey li { counter-increment: j; display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
+.ob-journey li::before { content: counter(j); width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 500 12px var(--mono); color: var(--amber); background: var(--brandtint); border: 1px solid var(--brandline); }
+.ob-journey + .ob-divider { margin-top: 4px; }
+
+/* ── share-link (customer) mode: the call without operator controls ── */
+.customer #obAgent, .customer #obVoiceField, .customer #obSttField, .customer .ob-dashlink,
+.customer #consolebtn, .customer #modelchip, .customer #agentlog, .customer .rep-right, .customer .rep-replay { display: none !important; }
+.customer .ob-gear { grid-template-columns: 1fr; }
+.customer .rep-left { flex: 1; }
+.wf-nosteps .wf-head, .wf-nosteps .wf-steps { display: none; }
+.ob-unavailable .ob-section, .ob-unavailable .ob-divider, .ob-unavailable .ob-actions, .ob-unavailable .ob-priv { display: none !important; }