npm - ava-engine - Versions diffs - 0.0.0-stage → 0.1.0 - Mend

ava-engine 0.0.0-stage → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/.env.example +63 -0
package/CLA.md +43 -0
package/COMMERCIAL-LICENSE.md +43 -0
package/LICENSE +73 -0
package/README.md +238 -2
package/THIRD_PARTY_NOTICES.md +38 -0
package/TRADEMARKS.md +31 -0
package/bin/ava-engine.mjs +12 -0
package/lib/asr.mjs +143 -0
package/lib/cli/config.mjs +95 -0
package/lib/cli/main.mjs +152 -0
package/lib/cli/setup.mjs +219 -0
package/lib/fetch-models.mjs +104 -0
package/lib/guard.mjs +92 -0
package/lib/models.mjs +47 -0
package/lib/openrouter.mjs +153 -0
package/lib/ours.mjs +766 -0
package/lib/platforms.mjs +201 -0
package/lib/state.mjs +150 -0
package/lib/stt.mjs +22 -0
package/lib/tts.mjs +178 -0
package/lib/workflow.mjs +18 -0
package/package.json +72 -4
package/public/app.js +1708 -0
package/public/demo.js +420 -0
package/public/favicon.svg +1 -0
package/public/fonts/OFL.txt +96 -0
package/public/fonts/inter-tight-var.woff2 +0 -0
package/public/fonts/inter-var.woff2 +0 -0
package/public/fonts/plex-mono-400.woff2 +0 -0
package/public/fonts/plex-mono-500.woff2 +0 -0
package/public/img/cta-1600.avif +0 -0
package/public/img/cta-1600.webp +0 -0
package/public/img/cta-2400.avif +0 -0
package/public/img/cta-2400.webp +0 -0
package/public/img/cta-960.avif +0 -0
package/public/img/cta-960.webp +0 -0
package/public/img/flows-1600.avif +0 -0
package/public/img/flows-1600.webp +0 -0
package/public/img/flows-2400.avif +0 -0
package/public/img/flows-2400.webp +0 -0
package/public/img/flows-960.avif +0 -0
package/public/img/flows-960.webp +0 -0
package/public/img/hero-1600.avif +0 -0
package/public/img/hero-1600.webp +0 -0
package/public/img/hero-2400.avif +0 -0
package/public/img/hero-2400.webp +0 -0
package/public/img/hero-960.avif +0 -0
package/public/img/hero-960.webp +0 -0
package/public/img/p-csm-480.avif +0 -0
package/public/img/p-csm-480.webp +0 -0
package/public/img/p-csm-800.avif +0 -0
package/public/img/p-csm-800.webp +0 -0
package/public/img/p-docs-480.avif +0 -0
package/public/img/p-docs-480.webp +0 -0
package/public/img/p-docs-800.avif +0 -0
package/public/img/p-docs-800.webp +0 -0
package/public/img/p-quiet-480.avif +0 -0
package/public/img/p-quiet-480.webp +0 -0
package/public/img/p-quiet-800.avif +0 -0
package/public/img/p-quiet-800.webp +0 -0
package/public/img/p-tickets-480.avif +0 -0
package/public/img/p-tickets-480.webp +0 -0
package/public/img/p-tickets-800.avif +0 -0
package/public/img/p-tickets-800.webp +0 -0
package/public/img/p-trial-480.avif +0 -0
package/public/img/p-trial-480.webp +0 -0
package/public/img/p-trial-800.avif +0 -0
package/public/img/p-trial-800.webp +0 -0
package/public/img/sees-1600.avif +0 -0
package/public/img/sees-1600.webp +0 -0
package/public/img/sees-2400.avif +0 -0
package/public/img/sees-2400.webp +0 -0
package/public/img/sees-960.avif +0 -0
package/public/img/sees-960.webp +0 -0
package/public/img/speaks-1600.avif +0 -0
package/public/img/speaks-1600.webp +0 -0
package/public/img/speaks-2400.avif +0 -0
package/public/img/speaks-2400.webp +0 -0
package/public/img/speaks-960.avif +0 -0
package/public/img/speaks-960.webp +0 -0
package/public/img/voice-1600.avif +0 -0
package/public/img/voice-1600.webp +0 -0
package/public/img/voice-2400.avif +0 -0
package/public/img/voice-2400.webp +0 -0
package/public/img/voice-960.avif +0 -0
package/public/img/voice-960.webp +0 -0
package/public/index.html +440 -0
package/public/landing.html +975 -0
package/public/pcm-worklet.js +11 -0
package/public/perceptionWorker.js +103 -0
package/public/rtc.js +60 -0
package/public/specialist.html +92 -0
package/public/specialist.js +132 -0
package/public/style.css +836 -0
package/public/vendor/lenis.min.js +3 -0
package/scripts/fetch-models.sh +15 -0
package/server.mjs +502 -0

package/public/img/p-tickets-800.avif ADDED Viewed

Binary file

package/public/img/p-tickets-800.webp ADDED Viewed

Binary file

package/public/img/p-trial-480.avif ADDED Viewed

Binary file

package/public/img/p-trial-480.webp ADDED Viewed

Binary file

package/public/img/p-trial-800.avif ADDED Viewed

Binary file

package/public/img/p-trial-800.webp ADDED Viewed

Binary file

package/public/img/sees-1600.avif ADDED Viewed

Binary file

package/public/img/sees-1600.webp ADDED Viewed

Binary file

package/public/img/sees-2400.avif ADDED Viewed

Binary file

package/public/img/sees-2400.webp ADDED Viewed

Binary file

package/public/img/sees-960.avif ADDED Viewed

Binary file

package/public/img/sees-960.webp ADDED Viewed

Binary file

package/public/img/speaks-1600.avif ADDED Viewed

Binary file

package/public/img/speaks-1600.webp ADDED Viewed

Binary file

package/public/img/speaks-2400.avif ADDED Viewed

Binary file

package/public/img/speaks-2400.webp ADDED Viewed

Binary file

package/public/img/speaks-960.avif ADDED Viewed

Binary file

package/public/img/speaks-960.webp ADDED Viewed

Binary file

package/public/img/voice-1600.avif ADDED Viewed

Binary file

package/public/img/voice-1600.webp ADDED Viewed

Binary file

package/public/img/voice-2400.avif ADDED Viewed

Binary file

package/public/img/voice-2400.webp ADDED Viewed

Binary file

package/public/img/voice-960.avif ADDED Viewed

Binary file

package/public/img/voice-960.webp ADDED Viewed

Binary file

package/public/index.html ADDED Viewed

@@ -0,0 +1,440 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+<base href="/">
+<title>Ava · Live session</title>
+<link rel="preload" href="/fonts/inter-tight-var.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="screen-onboard">
+<!-- ════════════════ ONBOARD SCREEN (pre-call) ════════════════ -->
+<section id="onboard">
+  <!-- left brand panel -->
+  <aside class="ob-aside">
+    <div class="ob-abrand">
+      <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="ob-toptag">Screen-aware voice agent</span>
+    </div>
+    <div class="ob-amid">
+      <h2>An assistant that sees your screen.</h2>
+      <p>Ava joins your call, watches the window you share, and helps you through whatever you're doing — live.</p>
+      <ul class="ob-features">
+        <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>Understands your screen as it changes, in real time</li>
+        <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>Natural voice that answers in under a second</li>
+        <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>Sees only the window you share — never the rest of your desktop</li>
+      </ul>
+    </div>
+    <div class="ob-preview">
+      <div class="ob-pvtop">
+        <span class="ob-pvava"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.6" stroke-linecap="round"><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="#FFFFFF" fill="none" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+        <span class="ob-pvid"><span class="ob-pvname">Ava</span><span class="ob-pvstatus">listening</span></span>
+        <span class="ob-pvwave"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
+      </div>
+      <p class="ob-pvcap">"Looks like you're on the billing page — <b>want a hand adding credits?</b>"</p>
+    </div>
+  </aside>
+  <!-- right form panel -->
+  <div class="ob-form">
+    <div class="ob-panel">
+      <div class="ob-header">
+        <h1>Start a session</h1>
+        <p>Choose how Ava should work, then check your audio before connecting.</p>
+      </div>
+      <div class="ob-section">
+        <span class="ob-seclabel">Agent</span>
+        <div class="ob-modes" id="obModes"><!-- mode cards injected --></div>
+        <div class="ob-platwrap" id="obPlatformBlock" hidden>
+          <span class="ob-sublabel">Platform to onboard</span>
+          <div class="ob-plats" id="obPlats"><!-- platform cards injected --></div>
+          <p class="ob-platnote" id="obPlatNote"></p>
+        </div>
+      </div>
+      <div class="ob-divider"></div>
+      <div class="ob-section">
+        <span class="ob-seclabel">Audio &amp; recognition</span>
+        <div class="ob-gear">
+          <div class="ob-field">
+            <label class="ob-flabel" for="micsel">Microphone</label>
+            <div class="ob-fctl">
+              <select id="micsel" class="ob-select"><option value="">System default</option></select>
+              <button type="button" id="mictest" class="ob-ghost">Test</button>
+            </div>
+            <div class="miclevel" id="miclevel"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
+          </div>
+          <div class="ob-field">
+            <label class="ob-flabel" for="voicesel2">Ava's voice</label>
+            <div class="ob-fctl">
+              <select id="voicesel2" class="ob-select"></select>
+              <button type="button" id="voicetest" class="ob-ghost">Preview</button>
+            </div>
+            <span class="ob-fnote">Preview also warms the voice, so the call starts fast.</span>
+          </div>
+          <div class="ob-field ob-field-wide">
+            <label class="ob-flabel" for="sttsel">Speech recognition</label>
+            <select id="sttsel" class="ob-select"></select>
+            <span class="ob-fnote" id="sttnote">Choose before the call.</span>
+          </div>
+        </div>
+      </div>
+      <div class="ob-footer">
+        <div class="ob-actions">
+          <button type="button" id="joinvoice" class="amberbtn ob-bigbtn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><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>
+            Join with voice
+          </button>
+          <button type="button" id="jointext" class="ghostbtn ob-bigbtn">Join text-only</button>
+          <span class="ob-joinstate" id="joinstate"></span>
+        </div>
+        <p class="ob-noshare">Screen sharing needs a desktop browser. On this device Ava can still talk you through things and answer questions.</p>
+        <p class="ob-priv"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 5 6v6c0 4.4 3 7.9 7 9 4-1.1 7-4.6 7-9V6l-7-3Z"/></svg> Ava only ever sees the single window you share — never the rest of your desktop.</p>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- ════════════════ CONNECTING SCREEN ════════════════ -->
+<!-- a short dark pre-roll that flows straight into the (dark) call stage -->
+<section id="connecting">
+  <div class="cn-brand"><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></div>
+  <div class="cn-stage">
+    <span class="cn-rings" aria-hidden="true"><i></i><i></i><i></i>
+      <span class="cn-core"><svg width="34" height="34" viewBox="0 0 24 24" aria-hidden="true"><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="#FFFFFF" fill="none" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+    </span>
+    <canvas class="cn-wave" id="cnWave" aria-hidden="true"></canvas>
+    <h2 id="cnTitle">Connecting you to Ava…</h2>
+    <ol class="cn-steps" id="cnSteps">
+      <li data-step="session"><span class="cn-dot"></span>Opening the room</li>
+      <li data-step="voice"><span class="cn-dot"></span>Warming Ava's voice</li>
+      <li data-step="greet"><span class="cn-dot"></span>Ava is joining</li>
+    </ol>
+  </div>
+  <p class="cn-foot"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 5 6v6c0 4.4 3 7.9 7 9 4-1.1 7-4.6 7-9V6l-7-3Z"/></svg>Ava only sees the window you choose to share.</p>
+</section>
+<!-- ════════════════ CALL UI ════════════════ -->
+<header id="topbar">
+  <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="vdiv"></span>
+  <span class="apptitle" id="apptitle">Flexible Agent</span>
+  <span class="mono meta hide-narrow" id="topsub">screen-aware assistant</span>
+  <span id="livepill" class="pill standby"><span class="dot"></span><span id="livepilltext">STANDBY</span></span>
+  <div class="grow"></div>
+  <span id="privacy" class="privacypill" hidden>
+    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#8B8880" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 5 6v6c0 4.4 3 7.9 7 9 4-1.1 7-4.6 7-9V6l-7-3Z"/></svg>
+    <span>Ava sees only <b id="privwin">your window</b></span>
+  </span>
+  <span id="modelchip" class="chip mono hide-narrow">—</span>
+  <span id="timer" class="mono timer">00:00:00</span>
+  <button id="pipbtn" class="iconbtn sm" title="Pop out" aria-label="Pop out">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><rect x="12" y="12" width="7" height="5" rx="1"/></svg>
+  </button>
+</header>
+<div id="main">
+  <!-- ── WORKFLOW TRACKER (left) ── -->
+  <aside id="workflow" hidden>
+    <div class="wf-head">
+      <div class="wf-titlerow"><span class="wf-title" id="wfTitle">Getting you set up</span><span class="mono wf-count" id="wfCount">—</span></div>
+      <div class="wf-bar"><div class="wf-fill" id="wfFill"></div></div>
+      <span class="mono wf-eta" id="wfEta"></span>
+    </div>
+    <div class="wf-steps" id="wfSteps"></div>
+    <div class="wf-foot">
+      <div class="wf-handoffbanner" id="wfHandoffBanner" hidden>
+        <span class="wf-spin" id="wfSpin"></span>
+        <div class="wf-hbcol">
+          <span class="wf-hbtext" id="wfHandoffText">Connecting you with a specialist…</span>
+          <button type="button" class="wf-hblink mono" id="wfHandoffLink" hidden></button>
+        </div>
+      </div>
+      <div class="wf-agent">
+        <span class="wf-agentava"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.6" stroke-linecap="round"><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="#FFFFFF" fill="none" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+        <div class="wf-agentid"><span class="wf-agentname">Ava is guiding you</span><span class="mono wf-agentstate" id="wfAgentState">connecting</span></div>
+        <span class="eq mini" id="wfEq"><i></i><i></i><i></i></span>
+      </div>
+      <span class="wf-know mono" id="wfKnow" hidden></span>
+      <button type="button" id="wfHandoff" class="wf-handoff">Talk to a person</button>
+      <p class="mono wf-priv">Ava only sees the window you share — nothing is recorded.</p>
+    </div>
+  </aside>
+  <!-- ── STAGE COLUMN ── -->
+  <main id="stagecol">
+    <!-- mini participant tiles (shown while sharing) -->
+    <div id="minitiles" hidden>
+      <div class="minitile ava" id="minitileAva">
+        <span class="miniicon amber"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.8" stroke-linecap="round"><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="#FFFFFF" fill="none" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+        <span class="minifoot"><span class="mininame">Ava</span><span class="eq mini" id="eqMini"><i></i><i></i><i></i></span></span>
+      </div>
+      <div class="minitile" id="minitileYou">
+        <span class="miniicon you">YOU</span>
+        <span class="minifoot"><span class="mininame dim">You</span><span class="minidot" id="miniShareDot"></span></span>
+      </div>
+      <div class="grow"></div>
+      <span class="mono meta" id="stagelabel">stage · nothing shared</span>
+    </div>
+    <!-- stage -->
+    <div id="stage">
+      <video id="video" autoplay muted playsinline></video>
+      <!-- Google-Meet-style presence grid (joined, not sharing) -->
+      <div id="meetgrid" hidden>
+        <div class="mtile ava" id="avaBig">
+          <span class="mt-badge mono">AVA</span>
+          <span class="mt-rethink" id="avaRethink" hidden><i></i>rethinking</span>
+          <span class="mt-orb" id="avaOrb" aria-hidden="true"><i></i><i></i><span class="mt-orbcore"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round"><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="#FFFFFF" fill="none" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span>
+          <div class="mt-foot">
+            <span class="mt-name">Ava</span>
+            <span class="mono mt-status" id="avastatusBig">joining…</span>
+            <span class="eq big" id="eqBig"><i></i><i></i><i></i><i></i><i></i></span>
+          </div>
+        </div>
+        <div class="mtile you" id="youBig">
+          <span class="mt-badge mono">YOU</span>
+          <span class="mt-avatar" id="youAvatar"><span class="mt-level" id="youLevel"></span>YOU</span>
+          <div class="mt-foot">
+            <span class="mt-name dim">You</span>
+            <span class="mono mt-status" id="youstatusBig">mic ready</span>
+          </div>
+          <button type="button" id="meetShare" class="ghostamber mt-share">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4" width="19" height="13" rx="2"/><path d="M8 21h8M12 17v4M12 12.5V7.5M9.5 10 12 7.5l2.5 2.5"/></svg>
+            Share a window
+          </button>
+        </div>
+      </div>
+      <!-- Ava's attention callout -->
+      <span id="callout" class="callout" hidden><span class="cdot"></span><span class="mono" id="callouttext"></span></span>
+    </div>
+    <!-- live caption -->
+    <div id="capwrap" hidden>
+      <span class="avarow">
+        <span class="mono avalabel">AVA</span>
+        <span class="eq" id="eqCap"><i></i><i></i><i></i><i></i><i></i></span>
+      </span>
+      <p id="cap" aria-live="polite"></p>
+    </div>
+    <!-- composer -->
+    <div id="composerwrap">
+      <form id="composer">
+        <input id="input" type="text" placeholder="Tell Ava what you're working on…" aria-label="Message Ava" autocomplete="off">
+        <span class="kbd mono">⌘K</span>
+      </form>
+      <button type="button" id="mic" class="iconbtn lg" title="Talk" aria-label="Talk to Ava">
+        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><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>
+      </button>
+      <button type="button" id="sharemain" class="amberbtn">Share a window</button>
+    </div>
+  </main>
+  <!-- ── SIDE PANEL (transcript / captions) ── -->
+  <aside id="people">
+    <div class="railhead"><span class="mono sectionlabel">LIVE TRANSCRIPT</span><button type="button" id="agentlog" class="mono railbtn on">agents on</button></div>
+    <div id="transcript" role="log" aria-label="Transcript"></div>
+    <!-- hidden presence mirrors (kept for state wiring; presence shows on the stage) -->
+    <div class="tile ava" id="avatile" hidden>
+      <div class="tilefoot"><div class="tileid"><span class="tilename">Ava</span><span class="mono tilestatus" id="avastatus">standby</span></div><span class="eq big" id="eqTile"><i></i><i></i><i></i><i></i><i></i></span></div>
+    </div>
+    <div class="tile" id="youtile" hidden>
+      <div class="tiletop"><span class="chip mono sm green" id="youshare" hidden><span class="gdot"></span>sharing</span></div>
+      <div class="tilefoot"><div class="tileid"><span class="tilename dim">You</span><span class="mono tilestatus" id="youmic">mic off</span></div></div>
+    </div>
+  </aside>
+  <!-- ── CONSOLE DRAWER ── -->
+  <aside id="console" hidden>
+    <div class="conhead">
+      <span class="conheadleft"><span class="mono conlabel">CONSOLE</span><span class="mono meta" id="conturn">turn 0 · —</span></span>
+      <button type="button" id="conclose" class="iconbtn xs" aria-label="Close console">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="m7 7 10 10M17 7 7 17"/></svg>
+      </button>
+    </div>
+    <!-- trace -->
+    <div class="consec trace">
+      <div class="tracehead">
+        <div class="tracebig">
+          <span class="mono sectionlabel" id="tracelabel">END-TO-END</span>
+          <div class="bignum">
+            <span id="bigLat" class="null">—.——</span><span class="unit">s</span>
+            <span class="mono delta" id="latDelta"></span>
+          </div>
+        </div>
+        <div class="spark" id="spark"></div>
+      </div>
+      <div class="lanebar" id="lanebar"><div class="laneempty"></div></div>
+      <div class="axis mono"><span>0</span><span id="ax1">0.4s</span><span id="ax2">0.8s</span><span id="ax3">1.2s</span></div>
+    </div>
+    <!-- crew -->
+    <div class="consec crew">
+      <div class="crewhead"><span class="mono sectionlabel">CREW</span><span class="mono meta" id="crewcount">0 / 5 RUNNING</span></div>
+      <div class="crewrow" id="row-vision"><span class="ldot vision"></span><span class="lname">Vision</span><span class="mono lstate" id="st-vision">waiting for a window</span><span class="mono lms" id="ms-vision">—</span><span class="mono lcalls" id="ca-vision"></span></div>
+      <div class="crewrow" id="row-intent"><span class="ldot intent"></span><span class="lname">Intent</span><span class="mono lstate" id="st-intent">waiting for input</span><span class="mono lms" id="ms-intent">—</span><span class="mono lcalls" id="ca-intent"></span></div>
+      <div class="crewrow" id="row-router"><span class="ldot router"></span><span class="lname">Router</span><span class="mono lstate" id="st-router">idle</span><span class="mono lms" id="ms-router">—</span><span class="mono lcalls" id="ca-router"></span></div>
+      <div class="crewrow" id="row-planner"><span class="ldot planner"></span><span class="lname">Planner</span><span class="mono lstate" id="st-planner">no threads</span><span class="mono lms" id="ms-planner">—</span><span class="mono lcalls" id="ca-planner"></span></div>
+      <div class="crewrow" id="row-voice"><span class="ldot voice"></span><span class="lname">Voice</span><span class="mono lstate" id="st-voice">muted</span><span class="mono lms" id="ms-voice">—</span><span class="mono lcalls" id="ca-voice"></span></div>
+    </div>
+    <!-- compiled context -->
+    <div class="consec ctx">
+      <div class="ctxhead"><span class="mono sectionlabel">COMPILED CONTEXT</span><span class="mono" id="ctxtok"><b>—</b> <span class="meta">/ 32k</span></span></div>
+      <div class="ctxmeter" id="ctxmeter"><div class="seg sys" style="width:0%"></div><div class="seg screen" style="width:0%"></div><div class="seg talk" style="width:0%"></div></div>
+      <div class="ctxlegend mono">
+        <span><i class="sq metabg"></i>system</span>
+        <span><i class="sq visionbg"></i>screen</span>
+        <span><i class="sq intentbg"></i>conversation</span>
+      </div>
+      <pre id="ctxtext" class="mono">— no turns yet —</pre>
+    </div>
+    <!-- spend -->
+    <div class="consec spendrow">
+      <div class="spendcol">
+        <span class="mono sectionlabel">SPEND</span>
+        <span class="spendnum null" id="spend">$0.0000</span>
+        <span class="mono meta" id="spendrate">$0.000 / hr</span>
+      </div>
+      <div class="spendcol">
+        <span class="mono sectionlabel">GOAL</span>
+        <span class="goaltext" id="goal">—</span>
+      </div>
+    </div>
+    <!-- status strip -->
+    <div class="constrip mono">
+      <span>TURNS <b id="sTurns">0</b></span>
+      <span>TOK <b id="sTok">0</b></span>
+      <span>AVG <b id="sAvg">—</b></span>
+      <span>VISION <b id="sVision">0/0</b></span>
+      <div class="grow"></div>
+      <span class="health" id="health"><span class="hdot"></span><span id="healthtext">READY</span></span>
+    </div>
+  </aside>
+</div>
+<!-- ── CONTROL BAR ── -->
+<footer id="controlbar">
+  <div class="footleft">
+    <span class="mono footline" id="footmode">recording off · transcript on</span>
+    <span class="mono footline dim">voice out · <select id="voicesel" class="mono" aria-label="Ava's voice"></select></span>
+  </div>
+  <div class="footcenter">
+    <button type="button" id="mic2" class="ctlbtn" title="Talk" aria-label="Talk to Ava">
+      <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><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>
+    </button>
+    <button type="button" id="share" class="ctlbtn wide" title="Share screen">
+      <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4" width="19" height="13" rx="2"/><path d="M8 21h8M12 17v4M12 12.5V7.5M9.5 10 12 7.5l2.5 2.5"/></svg>
+      <span id="sharelabel">Share a window</span>
+    </button>
+    <button type="button" id="ccbtn" class="ctlbtn on" title="Captions" aria-pressed="true" aria-label="Toggle captions">
+      <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5" width="19" height="14" rx="2.5"/><path d="M10 10.5a2.8 2.8 0 1 0 0 3M17.5 10.5a2.8 2.8 0 1 0 0 3"/></svg>
+    </button>
+    <button type="button" id="speakbtn" class="ctlbtn on" title="Ava's voice" aria-pressed="true" aria-label="Toggle Ava's voice">
+      <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><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.8"/><path d="M18 7a7 7 0 0 1 0 10"/></svg>
+    </button>
+    <input type="checkbox" id="speak" checked hidden>
+  </div>
+  <div class="footright">
+    <button type="button" id="consolebtn" class="utilbtn">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7.5 8 12l-4 4.5M11 16.5h9"/></svg>
+      <span class="mono">Console</span>
+      <span class="kbd mono">⌘\</span>
+    </button>
+    <button type="button" id="endcall" class="leavebtn" disabled>
+      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M3.5 14.5c5.5-5 11.5-5 17 0l.5-3c-6-5.5-12-5.5-18 0Z"/></svg>
+      Leave
+    </button>
+  </div>
+</footer>
+<!-- ════════════════ SESSION REPORT (after Leave) ════════════════ -->
+<div id="report" hidden>
+  <div class="rep-card">
+    <div class="rep-head">
+      <div class="rep-titleblock">
+        <span class="mono repeyebrow">SESSION RECAP</span>
+        <h2 id="repHeadline">Session complete</h2>
+      </div>
+      <div class="rep-headmeta">
+        <span class="mono" id="repDur">00:00</span>
+        <button id="repClose" class="iconbtn xs" aria-label="Close"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="m7 7 10 10M17 7 7 17"/></svg></button>
+      </div>
+    </div>
+    <div class="rep-body">
+      <div class="rep-left">
+        <p id="repSummary" class="rep-summary">Preparing your recap…</p>
+        <ul id="repHighlights" class="rep-highlights"></ul>
+        <div class="rep-stats" id="repStats"></div>
+      </div>
+      <div class="rep-right">
+        <div class="rep-flowhead mono">HOW THE AGENTS WORKED TOGETHER</div>
+        <div class="flow" id="flow">
+          <svg class="flow-conn" viewBox="0 0 100 100" preserveAspectRatio="none">
+            <line x1="10.5" y1="25" x2="10.5" y2="46"/><line x1="30" y1="25" x2="30" y2="46"/>
+            <line x1="50" y1="25" x2="50" y2="46"/><line x1="69.5" y1="25" x2="69.5" y2="46"/>
+            <line x1="88.5" y1="25" x2="88.5" y2="46"/><line x1="50" y1="59" x2="50" y2="77"/>
+          </svg>
+          <div class="fnode vision" id="fn-vision"><b>Perception</b><span>vision</span><em class="fcount" id="fc-vision">0</em></div>
+          <div class="fnode intent" id="fn-intent"><b>Intent</b><span>read</span><em class="fcount" id="fc-intent">0</em></div>
+          <div class="fnode router" id="fn-router"><b>Router</b><span>code</span><em class="fcount" id="fc-router">0</em></div>
+          <div class="fnode planner" id="fn-planner"><b>Planner</b><span>async</span><em class="fcount" id="fc-planner">0</em></div>
+          <div class="fnode voice" id="fn-voice"><b>Talker</b><span>speaks</span><em class="fcount" id="fc-voice">0</em></div>
+          <div class="fnode bb" id="fn-bb"><b>Compiled context — blackboard</b></div>
+          <div class="fnode usern" id="fn-user"><b>User</b><span>voice + screen</span></div>
+        </div>
+        <!-- detailed, timestamped agent timeline (Gantt) -->
+        <div class="rep-flowhead mono" style="margin-top:4px">WHERE THE TIME WENT — TIMESTAMPED</div>
+        <div class="gantt" id="gantt">
+          <div class="gantt-rows" id="ganttRows"></div>
+          <div class="gantt-axis mono" id="ganttAxis"></div>
+          <div class="gantt-head" id="ganttHead"></div>
+        </div>
+      </div>
+    </div>
+    <div class="rep-replay">
+      <button id="repPlay" class="amberbtn"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg> Play replay</button>
+      <div class="rep-tlwrap">
+        <div class="rep-timeline" id="repTimeline"><div class="rep-progress" id="repProgress"></div><div class="rep-playhead" id="repPlayhead"></div></div>
+        <div class="rep-now mono" id="repNow">Press play to watch the session unfold, agent by agent.</div>
+      </div>
+    </div>
+    <div class="rep-foot">
+      <span class="mono meta" id="repFootnote">Screen-record this replay for a tech review.</span>
+      <button id="repNew" class="ghostbtn">New session</button>
+    </div>
+  </div>
+</div>
+<canvas id="capcanvas" hidden></canvas>
+<canvas id="hashcanvas" hidden></canvas>
+<audio id="rtcAudio" autoplay></audio>
+<script src="rtc.js"></script>
+<script src="app.js"></script>
+<script src="demo.js"></script>
+</body>
+</html>