@7ots/cli 0.1.5 → 0.1.6

package/cli/pet/pet.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="utf-8">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>7ots</title>
 <style>
@@ -114,21 +115,41 @@
   .ask input:focus { border-color: var(--accent); }
   /* ── desktop: transparent frameless window walking along the bottom of the screen ── */
   html:has(body.desktop:not(.opaque)) { background: transparent; } /* html also paints --bg: without this the window is a white box */
-  body.desktop { background: transparent; padding: 0; place-items: end center; height: 100vh; overflow: hidden; -webkit-app-region: drag; user-select: none; }
+  body.desktop { background: transparent; padding: 0; place-items: end center; height: 100vh; overflow: hidden; user-select: none; } /* dragged by hand (see 'drag' below): a drag region would swallow clicks and double clicks */
   body.desktop .app { width: 100%; background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
   body.desktop .top, body.desktop .who, body.desktop .level, body.desktop .stats, body.desktop .feed, body.desktop .foot { display: none; }
   body.desktop .hero { background: none; padding: 0 0 6px; }
   body.desktop .stage { width: 140px; height: 148px; }
   body.desktop .stage.flip .face { transform: scaleX(-1); }
+  /* scenes with other ots (electron/director.cjs): the acts move .act; props (fireballs, beams, sabers, bullets) */
+  .actor { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 92%; }
+  .props { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
+  .props > * { position: absolute; }
+  .props .ball { left: 50%; top: 42%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff 0 18%, #8fe3ff 30%, #2a7bff 62%, transparent 72%); box-shadow: 0 0 22px 8px #4cb8ff; }
+  .props .beam { left: 50%; top: 40%; height: 26px; margin-top: -13px; border-radius: 13px; background: linear-gradient(180deg, #bfefff, #fff 45%, #fff 55%, #7fd6ff); box-shadow: 0 0 24px 10px #49b6ff, 0 0 60px 18px #1f6bff88; }
+  .props .bullet { top: 34%; width: 14px; height: 6px; margin-top: -3px; border-radius: 3px; background: linear-gradient(90deg, #6b5a2b, #e9cf7a); }
+  .props .ring { top: 34%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; border: 2px solid rgb(180 220 255 / .8); }
+  .props .saber { left: 50%; top: 50%; width: 6px; height: 92px; margin-left: -3px; transform-origin: 50% 100%; border-radius: 4px; background: #fff; }
+  .props .flash { top: 44%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: radial-gradient(#fff, #ffd35a 40%, #ff7a1a 60%, transparent 70%); }
+  .props .pow { left: 50%; top: 6%; font: 900 22px/1 system-ui, sans-serif; color: #ffd400; -webkit-text-stroke: 2px #1a1020; transform: translateX(-50%); white-space: nowrap; }
+  /* a visiting ot: its own little menu (play, say goodbye, settings, move); feeding, talking and sleep are the host's */
+  body.guest .ask, body.guest #talkBtn, body.guest #micBtn, body.guest #sleepBtn { display: none !important; }
+  .bye { display: none; }
+  body.desktop.guest .bye { display: flex; }
   body.desktop .bubble { max-width: 220px; font-size: 12.5px; padding: 8px 12px; }
-  body.desktop .actions { position: absolute; right: 8px; bottom: 14px; transform: translateX(6px); display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 99px;
+  body.desktop .actions { position: absolute; right: auto; left: calc(50% + 66px); bottom: 14px; transform: translateX(6px); display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 99px;
     background: color-mix(in srgb, var(--panel) 86%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(10px);
-    opacity: 0; transition: opacity .18s, transform .18s; -webkit-app-region: no-drag; z-index: 3; }
-  body.desktop:hover .actions { opacity: 1; transform: none; }
+    opacity: 0; transition: none; /* a transition here never finished painting in the transparent window: the menu stayed invisible */ -webkit-app-region: no-drag; z-index: 5; } /* above the 3D stage canvas (z 3) */
+  body.desktop:hover .actions, body.desktop.hover .actions, body.desktop.menu .actions { opacity: 1; transform: none; } /* .hover: set by the shell, which sees the cursor even when no mouse event reaches the page */
   body.desktop .act { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 0; background: transparent; }
   body.desktop .act span { display: none; }
+  .grip { display: none; }
+  body.desktop .grip { display: flex; cursor: grab; touch-action: none; }
+  body.desktop .grip:active { cursor: grabbing; }
   body.desktop .act.primary { background: var(--accent); }
   body.desktop .badge { display: flex; }
+  body.listening #micBtn { background: var(--err); color: #fff; animation: rec 1s ease-in-out infinite; }
+  @keyframes rec { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--err) 30%, transparent); } }
   body.desktop .ask { display: none; position: absolute; left: 6px; right: 6px; top: 6px; margin: 0; z-index: 4; -webkit-app-region: no-drag; }
   body.desktop.talking .ask { display: flex; }
   .badge { display: none; position: absolute; z-index: 2; left: -6px; bottom: 18px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; align-items: center; justify-content: center;
@@ -152,7 +173,8 @@
     <div class="stage" id="stage">
       <div class="bubble" id="bubble" role="status" aria-live="polite"></div>
       <span class="zz" aria-hidden="true">z</span>
-      <div class="face" id="face"></div>
+      <div class="actor" id="act"><div class="face" id="face"></div></div>
+      <div class="props" id="props" aria-hidden="true"></div>
       <div class="floor" aria-hidden="true"></div>
       <span class="badge" id="badge"></span>
     </div>
@@ -173,9 +195,11 @@
   <nav class="actions">
     <button class="act primary" data-act="feed"><svg viewBox="0 0 24 24"><path d="M12 7c-1.5-2.5-6-2.5-7 1.5S7 20 9.5 20c1.2 0 1.6-.6 2.5-.6s1.3.6 2.5.6C17 20 20 12.5 19 8.5S13.5 4.5 12 7z"/><path d="M12 7c0-2 1-3.5 3-4"/></svg><span data-t="feed"></span></button>
     <button class="act" id="talkBtn" type="button"><svg viewBox="0 0 24 24"><path d="M5 6h14v9H9l-4 3z"/></svg><span data-t="talk"></span></button>
-    <button class="act" data-act="play"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M5 8.5c3 1.5 11 1.5 14 0M5 15.5c3-1.5 11-1.5 14 0"/></svg><span data-t="play"></span></button>
+    <button class="act" id="micBtn" type="button"><svg viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21"/></svg><span data-t="listen"></span></button>
     <button class="act" data-act="sleep" id="sleepBtn"><svg viewBox="0 0 24 24"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/></svg><span data-t="sleep"></span></button>
     <a class="act" id="setBtn" target="_blank" rel="noopener"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1"/></svg><span data-t="settings"></span></a>
+    <button class="act bye" id="byeBtn" type="button"><svg viewBox="0 0 24 24"><path d="M15 4h4v16h-4M10 8l-4 4 4 4M6 12h10"/></svg></button>
+    <button class="act grip" id="moveBtn" type="button" title="⇔"><svg viewBox="0 0 24 24"><path d="M12 3v18M3 12h18M12 3l-3 3M12 3l3 3M12 21l-3-3M12 21l3-3M3 12l3-3M3 12l3 3M21 12l-3-3M21 12l-3 3"/></svg></button>
   </nav>
 
   <section class="feed" aria-labelledby="feed-h">
@@ -189,17 +213,17 @@
 <script type="module">
   const BOOT = __BOOT__;
   const T = {
-    en: { settings: 'Settings', talk: 'Talk', askPh: 'Remind me to check email in 10 min…', feed: 'Feed', play: 'Play', sleep: 'Sleep', wake: 'Wake', food: 'Food', energy: 'Energy', fun: 'Fun', level: 'Level {l}', xp: '{x} / {n} xp', live: 'Live', off: 'Reconnecting…',
+    en: { settings: 'Settings', dismiss: 'Send home', listen: 'Listen', listening: 'Listening… 🎙️', noStt: 'Voice control needs an OpenAI or ElevenLabs key (Settings).', noMic: 'I can’t reach the microphone.', sttErr: 'I didn’t catch that.', talk: 'Talk', askPh: 'Remind me to check email in 10 min…', feed: 'Treat', play: 'Play', sleep: 'Sleep', wake: 'Wake', food: 'Food', energy: 'Energy', fun: 'Fun', level: 'Level {l}', xp: '{x} / {n} xp', live: 'Live', off: 'Reconnecting…',
       activity: 'Activity', empty: 'Nothing yet. Run a command or ask your coding agent something.', tally: '{ok} ok · {fail} failed · turns {turns}',
       brain: 'Brain: {b}', age: 'Born {d}', lines: 'built-in phrases', now: 'now', m: '{n}m', h: '{n}h',
       moods: { happy: 'Happy', neutral: 'Calm', sad: 'Sad', disgust: 'Bored', sleep: 'Asleep', thinking: 'Thinking' },
       kind: { tool: 'Tool', shell: 'Shell', prompt: 'You asked', stop: 'Turn finished', notify: 'Needs you', start: 'Session started' } },
-    es: { settings: 'Ajustes', talk: 'Hablar', askPh: 'Recuérdame ver el correo en 10 min…', feed: 'Comida', play: 'Jugar', sleep: 'Dormir', wake: 'Despertar', food: 'Comida', energy: 'Energía', fun: 'Diversión', level: 'Nivel {l}', xp: '{x} / {n} xp', live: 'En vivo', off: 'Reconectando…',
+    es: { settings: 'Ajustes', dismiss: 'Despedir', listen: 'Escuchar', listening: 'Te escucho… 🎙️', noStt: 'Para hablarme por voz falta una key de OpenAI o ElevenLabs (Ajustes).', noMic: 'No puedo usar el micrófono.', sttErr: 'No te entendí.', talk: 'Hablar', askPh: 'Recuérdame ver el correo en 10 min…', feed: 'Mimar', play: 'Jugar', sleep: 'Dormir', wake: 'Despertar', food: 'Comida', energy: 'Energía', fun: 'Diversión', level: 'Nivel {l}', xp: '{x} / {n} xp', live: 'En vivo', off: 'Reconectando…',
       activity: 'Actividad', empty: 'Nada todavía. Ejecuta un comando o pregúntale algo a tu agente.', tally: '{ok} ok · {fail} fallos · turnos {turns}',
       brain: 'Cerebro: {b}', age: 'Nació {d}', lines: 'frases propias', now: 'ahora', m: '{n} min', h: '{n} h',
       moods: { happy: 'Feliz', neutral: 'Tranquilo', sad: 'Triste', disgust: 'Aburrido', sleep: 'Dormido', thinking: 'Pensando' },
       kind: { tool: 'Herramienta', shell: 'Terminal', prompt: 'Preguntaste', stop: 'Turno terminado', notify: 'Te necesita', start: 'Sesión iniciada' } },
-    pt: { settings: 'Ajustes', talk: 'Falar', askPh: 'Me lembre de ver o e-mail em 10 min…', feed: 'Comida', play: 'Brincar', sleep: 'Dormir', wake: 'Acordar', food: 'Comida', energy: 'Energia', fun: 'Diversão', level: 'Nível {l}', xp: '{x} / {n} xp', live: 'Ao vivo', off: 'Reconectando…',
+    pt: { settings: 'Ajustes', dismiss: 'Despedir', listen: 'Ouvir', listening: 'Estou ouvindo… 🎙️', noStt: 'Para falar por voz falta uma key da OpenAI ou ElevenLabs (Ajustes).', noMic: 'Não consigo usar o microfone.', sttErr: 'Não entendi.', talk: 'Falar', askPh: 'Me lembre de ver o e-mail em 10 min…', feed: 'Mimar', play: 'Brincar', sleep: 'Dormir', wake: 'Acordar', food: 'Comida', energy: 'Energia', fun: 'Diversão', level: 'Nível {l}', xp: '{x} / {n} xp', live: 'Ao vivo', off: 'Reconectando…',
       activity: 'Atividade', empty: 'Nada ainda. Rode um comando ou pergunte algo ao seu agente.', tally: '{ok} ok · {fail} falhas · turnos {turns}',
       brain: 'Cérebro: {b}', age: 'Nasceu {d}', lines: 'frases próprias', now: 'agora', m: '{n} min', h: '{n} h',
       moods: { happy: 'Feliz', neutral: 'Tranquilo', sad: 'Triste', disgust: 'Entediado', sleep: 'Dormindo', thinking: 'Pensando' },
@@ -211,6 +235,8 @@
   const $ = (s) => document.querySelector(s);
   const id = BOOT.identity;
   const desktop = new URLSearchParams(location.search).has('desktop');
+  const guest = BOOT.guest || ''; // a visiting ot: no state, no voice, only the scenes
+  document.body.classList.toggle('guest', !!guest);
 
   document.documentElement.lang = lang;
   document.body.classList.toggle('desktop', desktop);
@@ -237,7 +263,7 @@
     // three comes from the CDN; without WebGL or network the 2D ot takes over
     try {
       const m = await loadCharacter3D();
-      ch = m.createCharacter3D($('#face'), spec, { material: 'plush', backdrop: !desktop, orbit: !desktop, stage: { key: 'pet', zIndex: 3, maxDpr: 2 } });
+      ch = m.createCharacter3D($('#face'), spec, { material: 'plush', backdrop: !desktop, orbit: !desktop, bleed: desktop ? 'window' : 0, stage: { key: 'pet', zIndex: 3, maxDpr: 2, minDpr: 1.25, supersample: desktop } });
       if (ch.fallback) console.warn('[7ots pet] no WebGL: 2D ot');
     } catch (err) {
       console.warn('[7ots pet] 3D ot unavailable, using 2D:', err?.message || err);
@@ -246,14 +272,106 @@
   }
   ch ||= createCharacter($('#face'), spec, { locale: lang, title: id.name });
   const is3d = !!ch.character;
+  // While a gesture/effect/morph plays the ot needs room around it (wings, hearts, confetti): the desktop
+  // shell reads window.__need() and sizes the window to what is really on screen.
+  let fxUntil = 0;
+  let actUntil = 0; // a scene act is playing: it needs actRoom px on each side (a beam, a saber swing)
+  let actRoom = 0;
+  for (const k of ['gesture', 'effect', 'morph']) {
+    const f = ch[k]?.bind(ch);
+    if (!f) continue;
+    try {
+      ch[k] = (n, o) => ((fxUntil = Math.max(fxUntil, Date.now() + Math.max(2600, o?.ms || 0) + 400)), tellNeed(), f(n, o));
+    } catch {}
+  }
+  // Effects the character starts on its own (a mood's steam, a gesture's sparkles) skip the wrapper: they show
+  // up as children of its fx layers, so those count as "playing" too.
+  const fxLayers = () => $('#face').querySelectorAll('[data-p="fx"], [data-p="fxback"], [data-p="fxface"]');
+  const fxOn = () => Date.now() < fxUntil || [...fxLayers()].some((g) => g.childElementCount);
+  // What the figure really covers (arms out, a raised hand, a hop): the union of the drawn parts, which can
+  // stick out of the stage. The window is centred on the ot, so the width is twice the widest side.
+  const drawn = () => {
+    const parts = $('#face').querySelectorAll('svg > g, svg > use, svg > path');
+    let l = Infinity, t = Infinity, r = -Infinity;
+    for (const e of parts) {
+      const b = e.getBoundingClientRect();
+      if (!b.width && !b.height) continue;
+      l = Math.min(l, b.left), t = Math.min(t, b.top), r = Math.max(r, b.right);
+    }
+    return l === Infinity ? null : { l, t, r };
+  };
+  window.__need = () => {
+    const st = $('#stage').getBoundingClientRect();
+    // playing: room up front (hearts rise, confetti flies), not grown pixel by pixel as they move
+    const on = fxOn();
+    let w = st.width + (on ? 72 : 12) * 2;
+    let h = st.height + 6 + (on ? 96 : 12);
+    const d = drawn();
+    if (d) {
+      const cx = st.left + st.width / 2;
+      w = Math.max(w, 2 * Math.max(cx - d.l, d.r - cx) + 24);
+      h = Math.max(h, innerHeight - d.t + 12);
+    }
+    const b = $('#bubble');
+    if (b.classList.contains('on')) {
+      w = Math.max(w, b.offsetWidth + 24);
+      h = Math.max(h, st.height + 6 + b.offsetHeight + 16);
+    }
+    if (document.body.classList.contains('talking')) (w = Math.max(w, 240)), (h = Math.max(h, st.height + 60));
+    if (Date.now() < actUntil) (w = Math.max(w, actRoom * 2)), (h = Math.max(h, st.height + 70));
+    return { w: Math.ceil(w), h: Math.ceil(h) };
+  };
+  // The shell polls __need every 250 ms; when an effect starts it's told at once (a console line it listens
+  // for), so the window is big before the first frame that needs it instead of cutting it off.
+  let toldNeed = '';
+  function tellNeed() {
+    if (!desktop) return;
+    requestAnimationFrame(() => {
+      const n = JSON.stringify(window.__need());
+      if (n !== toldNeed) (toldNeed = n), console.debug('\u00a77need' + n);
+    });
+  }
+  if (!is3d) {
+    const mo = new MutationObserver(tellNeed);
+    for (const g of fxLayers()) mo.observe(g, { childList: true });
+  }
+  // Drag: the page tells the shell when the button goes down and up on the ot; the shell moves the window
+  // with the cursor in between. A click that doesn't move stays a click.
+  const onOt = (e) => {
+    const r = $('#stage').getBoundingClientRect();
+    return e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
+  };
+  if (desktop) {
+    let down = false;
+    const up = () => down && ((down = false), console.debug('\u00a77drag' + JSON.stringify({ on: false })));
+    // on the document: in 3D the ot is drawn on a canvas above the page, so events don't target #stage
+    addEventListener('pointerdown', (e) => {
+      // on the ot itself, or on the move handle in the menu (a sure grip while the ot is mid-animation)
+      const grip = e.target.closest?.('#moveBtn');
+      if (e.button !== 0 || (!grip && (e.target.closest?.('.actions, .ask, a, button') || !onOt(e)))) return;
+      down = true;
+      document.documentElement.setPointerCapture?.(e.pointerId);
+      console.debug('\u00a77drag' + JSON.stringify({ on: true }));
+    });
+    for (const ev of ['pointerup', 'pointercancel', 'lostpointercapture']) addEventListener(ev, up);
+    addEventListener('blur', up);
+  }
   let lookFree = 0; // while > now, the eyes wander on their own (a glance) instead of following the cursor
   addEventListener('pointermove', (e) => Date.now() > lookFree && ch.lookAtPoint(e.clientX, e.clientY));
   $('#face').addEventListener('click', () => ch.gesture('bounce'));
 
   const post = (path, body) => fetch(path, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-7ots-Token': BOOT.token }, body: JSON.stringify(body) });
   let asleep = false;
+  // something urgent while asleep: it wakes up for a moment (says it, walks over), then dozes off again
+  let stirUntil = 0, stirT = 0;
+  function stir() {
+    stirUntil = Date.now() + 30000;
+    document.body.classList.remove('asleep');
+    clearTimeout(stirT);
+    stirT = setTimeout(() => last && render(last), 30500);
+  }
   document.querySelectorAll('[data-act]').forEach((b) =>
-    b.addEventListener('click', () => post('/event', { type: b.dataset.act === 'sleep' && asleep ? 'wake' : b.dataset.act })),
+    b.addEventListener('click', () => guest ? (b.dataset.act === 'feed' && postMessage({ gesture: 'celebrate' })) : post('/event', { type: b.dataset.act === 'sleep' && asleep ? 'wake' : b.dataset.act })),
   );
 
   // ── state ──
@@ -277,8 +395,9 @@
   function render(s) {
     last = s;
     asleep = s.asleep;
-    document.body.classList.toggle('asleep', asleep);
-    ch.mood(s.mood);
+    const stirred = asleep && Date.now() < stirUntil;
+    document.body.classList.toggle('asleep', asleep && !stirred);
+    ch.mood(stirred ? 'neutral' : s.mood);
     paintMood();
     $('#sleepBtn [data-t]').textContent = t(asleep ? 'wake' : 'sleep');
     $('#sleepBtn').setAttribute('aria-label', t(asleep ? 'wake' : 'sleep'));
@@ -432,12 +551,36 @@
 
   // ── live updates ──
   const live = $('#live');
+  // The daemon restarts (another ot): wait for it, then reload with the new identity.
+  async function waitAndReload() {
+    for (let i = 0; i < 60; i++) {
+      await new Promise((r) => setTimeout(r, 500));
+      // the new daemon, not the one still letting go of the port (it would serve the old ot again)
+      const h = await fetch('/health').then((r) => (r.ok ? r.json() : null), () => null);
+      if (h && h.pid !== BOOT.pid) return location.reload();
+    }
+  }
+  // The view is in the URL (?3d): on the desktop the shell reloads it (and relaunches when the 3D ot needs
+  // the GPU it started without); in a browser tab the page reloads itself with the new URL.
+  function setView(on) {
+    const q = new URLSearchParams(location.search);
+    if (q.has('3d') === on) return false;
+    if (desktop) return console.debug('§7view' + (on ? '3d' : '2d')), true;
+    on ? q.set('3d', '1') : q.delete('3d');
+    location.replace(`${location.pathname}?${q}`);
+    return true;
+  }
   function connect() {
     const es = new EventSource(`/events?token=${encodeURIComponent(BOOT.token)}`);
     es.onopen = () => { live.classList.add('on'); live.textContent = t('live'); };
     es.onerror = () => { live.classList.remove('on'); live.textContent = t('off'); };
     es.onmessage = (e) => {
       const m = JSON.parse(e.data);
+      if (m.reload) return location.reload(); // e.g. the voice changed in the settings
+      if (m.restart) return waitAndReload(); // it became another ot: a new daemon is starting
+      if (m.view && setView(m.view === '3d')) return; // 2D ↔ 3D changed in the settings
+      if (guest) return; // the host's events are the host's
+      if (m.stir || (m.say && asleep && Date.now() < stirUntil)) stir(); // awake until it has said it
       if (m.state) render(m.state);
       if ('thinking' in m) setThinking(!!m.thinking);
       if (m.activity) addActivity(m.activity);
@@ -445,6 +588,7 @@
       if (m.morph) ch.morph?.(m.morph);
       if (m.effect) ch.effect?.(m.effect);
       if (m.say) say(m.say, !m.gesture);
+      if (m.point && desktop) window.__goal = m.point; // the desktop shell walks it over there
     };
   }
   live.textContent = t('off');
@@ -456,12 +600,23 @@
   askIn.placeholder = t('askPh');
   $('#setBtn').href = `/settings?token=${encodeURIComponent(BOOT.token)}`;
   $('#setBtn').title = t('settings');
+  $('#byeBtn').title = t('dismiss');
+  $('#byeBtn').addEventListener('click', () => console.debug('\u00a77bye')); // the shell sends the visitor home
   const talking = (on) => {
     document.body.classList.toggle('talking', on);
     if (on) askIn.focus();
   };
   $('#talkBtn').addEventListener('click', () => talking(!document.body.classList.contains('talking') || !desktop));
-  $('#face').addEventListener('dblclick', () => talking(true));
+  // double click: the menu stays out (for a while, or until another double click); talking is its 💬 button
+  let menuT = 0;
+  addEventListener('dblclick', (e) => {
+    if (!onOt(e) || e.target.closest?.('.actions, .ask')) return;
+    console.log('[7ots] menu');
+    const on = !document.body.classList.contains('menu');
+    document.body.classList.toggle('menu', on);
+    clearTimeout(menuT);
+    if (on) menuT = setTimeout(() => document.body.classList.remove('menu'), 8000);
+  });
   askIn.addEventListener('keydown', (e) => e.key === 'Escape' && talking(false));
   ask.addEventListener('submit', async (e) => {
     e.preventDefault();
@@ -474,6 +629,75 @@
   });
   addEventListener('message', (e) => e.data?.talk && talking(true));
 
+  // ── voice: record until you stop talking, transcribe (/stt), then it's like typing it (/ask) ──
+  let rec = null;
+  async function listen() {
+    if (rec) return rec.state === 'recording' && rec.stop();
+    if (!BOOT.stt) return say(t('noStt'));
+    let stream;
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true } });
+    } catch {
+      return say(t('noMic'));
+    }
+    const type = MediaRecorder.isTypeSupported('audio/webm;codecs=opus') ? 'audio/webm;codecs=opus' : '';
+    const chunks = [];
+    rec = new MediaRecorder(stream, type ? { mimeType: type } : {});
+    rec.ondataavailable = (e) => e.data.size && chunks.push(e.data);
+    const ac = new AudioContext();
+    const an = ac.createAnalyser();
+    an.fftSize = 1024;
+    ac.createMediaStreamSource(stream).connect(an);
+    const buf = new Float32Array(an.fftSize);
+    const t0 = Date.now();
+    let heard = false;
+    let quiet = t0;
+    let peak = 0;
+    const iv = setInterval(() => {
+      an.getFloatTimeDomainData(buf);
+      let sum = 0;
+      for (const x of buf) sum += x * x;
+      const now = Date.now();
+      const level = Math.sqrt(sum / buf.length);
+      if (level > 0.015) (heard = true), (quiet = now);
+      peak = Math.max(peak, level);
+      // stops after 1.3 s of silence, 6 s without a word, or 15 s in all
+      if ((heard && now - quiet > 1300) || (!heard && now - t0 > 6000) || now - t0 > 15000) rec?.state === 'recording' && rec.stop();
+    }, 80);
+    rec.onstop = async () => {
+      clearInterval(iv);
+      stream.getTracks().forEach((x) => x.stop());
+      ac.close().catch(() => {});
+      rec = null;
+      document.body.classList.remove('listening');
+      console.log('[7ots voice] stopped', { heard, peak: peak.toFixed(3), chunks: chunks.length, ms: Date.now() - t0 });
+      if (!chunks.length) return bubble.classList.remove('on');
+      if (!heard && peak < 0.004) return say(t('noMic')); // silence all along: wrong or muted microphone
+      setThinking(true);
+      const blob = new Blob(chunks, { type: chunks[0].type || 'audio/webm' });
+      const r = await fetch('/stt', { method: 'POST', headers: { 'Content-Type': blob.type, 'X-7ots-Token': BOOT.token }, body: blob })
+        .then((x) => x.json())
+        .catch(() => null);
+      setThinking(false);
+      const text = r?.text?.trim();
+      if (!text) return say(r?.error && !/stt/.test(r.error) ? t('noStt') : t('sttErr'));
+      showBubble(document.createTextNode(`🎙️ “${text}”`), 2500);
+      post('/ask', { text });
+    };
+    rec.onerror = (e) => console.warn('[7ots voice] recorder', e.error?.message || e);
+    const hard = setTimeout(() => rec?.state === 'recording' && rec.stop(), 15000); // whatever the level meter says
+    rec.addEventListener('stop', () => clearTimeout(hard));
+    ac.resume().catch(() => {});
+    rec.start(250);
+    console.log('[7ots voice] listening', rec.mimeType, ac.state);
+    document.body.classList.add('listening');
+    showBubble(document.createTextNode(t('listening')), 0);
+    ch.gesture('nod');
+    lookFree = Date.now() + 2000;
+    ch.lookAt(0, 0);
+  }
+  $('#micBtn').addEventListener('click', listen);
+
   // The desktop shell tells us how we move: facing (walk -1..1), hops, being dropped, following, the cursor.
   addEventListener('message', (e) => {
     const d = e.data || {};
@@ -482,11 +706,100 @@
       else $('#stage').classList.toggle('flip', d.walk < 0);
     }
     if (d.hop) ch.gesture('bounce');
+    if (d.errand) ch.effect?.('exclaim');
+    if (d.point) {
+      lookFree = Date.now() + 3500;
+      ch.lookAtPoint(d.at[0], d.at[1]);
+      ch.gesture('point', { ms: 2200 });
+    }
+    if (d.listen) listen();
     if (d.dropped) (ch.gesture('dizzy'), ch.effect?.('dizzy'));
     if (d.follow) ch.effect?.(Math.random() < 0.6 ? 'hearts' : 'question');
     if (d.look && Date.now() > lookFree) ch.lookAtPoint(d.look[0], d.look[1]); // the cursor anywhere on screen
   });
 
+  // ── scenes with other ots: the shell's director sends lines, gestures and acts to each one ──
+  const act = $('#act');
+  const props = $('#props');
+  const prop = (cls, css = {}, text = '') => {
+    const e = Object.assign(document.createElement('div'), { className: cls, textContent: text });
+    Object.assign(e.style, css);
+    props.append(e);
+    return e;
+  };
+  const gone = (e, a) => a.finished.then(() => e.remove(), () => e.remove());
+  const ACTS = {
+    guard: () => act.animate([{ transform: 'none' }, { transform: 'translateY(-5px) rotate(-3deg)' }, { transform: 'none' }, { transform: 'translateY(-5px) rotate(3deg)' }, { transform: 'none' }], { duration: 700, iterations: 3 }),
+    jab: (d) => act.animate([{ transform: 'none' }, { transform: `translateX(${d * 30}px) rotate(${d * 7}deg) scaleX(1.06)`, offset: 0.35 }, { transform: 'none' }], { duration: 280, easing: 'ease-out' }),
+    uppercut: (d) => act.animate([{ transform: 'none' }, { transform: `translate(${-d * 6}px, 8px) rotate(${-d * 8}deg)`, offset: 0.3 }, { transform: `translate(${d * 22}px, -30px) rotate(${d * 16}deg)`, offset: 0.6 }, { transform: 'none' }], { duration: 650, easing: 'ease-out' }),
+    hit: (d) => act.animate([{ transform: 'none' }, { transform: `translateX(${-d * 16}px) rotate(${-d * 12}deg)`, offset: 0.25 }, { transform: 'none' }], { duration: 420 }),
+    pow: (d, o) => {
+      const e = prop('pow', {}, o?.text || 'POW!');
+      return gone(e, e.animate([{ opacity: 0, transform: 'translateX(-50%) scale(.3)' }, { opacity: 1, transform: 'translateX(-50%) scale(1.25) rotate(-8deg)', offset: 0.3 }, { opacity: 0, transform: 'translate(-50%, -16px) scale(1)' }], { duration: 900 }));
+    },
+    // Matrix: bending back in slow motion while the bullets go by
+    lean: (d) => {
+      const a = act.animate([{ transform: 'none' }, { transform: `rotate(${-d * 74}deg) translateX(${-d * 8}px)`, offset: 0.22 }, { transform: `rotate(${-d * 80}deg) translateX(${-d * 10}px)`, offset: 0.78 }, { transform: 'none' }], { duration: 3200, easing: 'cubic-bezier(.3,.7,.3,1)' });
+      for (let i = 0; i < 3; i++) {
+        const y = `${26 + i * 7}%`;
+        const from = d > 0 ? `calc(100% + ${actRoom}px)` : `-${actRoom}px`;
+        const to = d > 0 ? `-${actRoom}px` : `calc(100% + ${actRoom}px)`;
+        const b = prop('bullet', { top: y, left: from });
+        gone(b, b.animate([{ left: from }, { left: to }], { duration: 2400, delay: 500 + i * 260, easing: 'linear', fill: 'both' }));
+        const r = prop('ring', { top: y, left: from, opacity: 0 });
+        gone(r, r.animate([{ left: from, opacity: 0 }, { left: '50%', opacity: 1, transform: 'scale(1)' }, { left: to, opacity: 0, transform: 'scale(2.6)' }], { duration: 2400, delay: 500 + i * 260, fill: 'both' }));
+      }
+      return a;
+    },
+    fall: (d) => act.animate([{ transform: 'none' }, { transform: `rotate(${-d * 90}deg) translateY(10px)`, offset: 0.2 }, { transform: `rotate(${-d * 90}deg) translateY(10px)`, offset: 0.8 }, { transform: 'none' }], { duration: 2600, easing: 'ease-in-out' }),
+    charge: () => act.animate([{ transform: 'none', filter: 'none' }, { transform: 'translate(-2px,1px)', filter: 'drop-shadow(0 0 10px #59c4ff)' }, { transform: 'translate(2px,-1px)', filter: 'drop-shadow(0 0 18px #59c4ff)' }, { transform: 'none', filter: 'none' }], { duration: 160, iterations: 9 }),
+    hadouken: (d) => {
+      const b = prop('ball');
+      gone(b, b.animate([{ transform: 'translateX(0) scale(.4)' }, { transform: `translateX(${d * (actRoom - 10)}px) scale(1.15)` }], { duration: 650, easing: 'ease-in' }));
+      return act.animate([{ transform: 'none' }, { transform: `translateX(${d * 12}px)`, offset: 0.2 }, { transform: 'none' }], { duration: 700 });
+    },
+    beam: (d) => {
+      const b = prop('beam', d > 0 ? { left: '50%' } : { right: '50%', left: 'auto' });
+      gone(b, b.animate([{ width: '0px', opacity: 1 }, { width: `${actRoom}px`, opacity: 1, offset: 0.25 }, { width: `${actRoom}px`, opacity: 1, offset: 0.8 }, { width: `${actRoom}px`, opacity: 0 }], { duration: 1800 }));
+      return act.animate([{ transform: 'none' }, { transform: `translateX(${-d * 6}px)` }], { duration: 120, iterations: 14, direction: 'alternate' });
+    },
+    saber: (d, o) => {
+      const c = o?.color || '#ff3b3b';
+      const s = prop('saber', { background: `linear-gradient(90deg, ${c}, #fff 40%, #fff 60%, ${c})`, boxShadow: `0 0 12px 4px ${c}`, left: `calc(50% + ${d * 34}px)` });
+      return gone(s, s.animate([{ transform: `rotate(${-d * 40}deg)` }, { transform: `rotate(${d * 50}deg)` }, { transform: `rotate(${-d * 20}deg)` }, { transform: `rotate(${d * 70}deg)` }, { transform: `rotate(${-d * 40}deg)` }], { duration: 2400, easing: 'ease-in-out' }));
+    },
+    bang: (d) => {
+      const f = prop('flash', { left: `calc(50% + ${d * 46}px)` });
+      return gone(f, f.animate([{ opacity: 1, transform: 'scale(.4)' }, { opacity: 0, transform: 'scale(1.6)' }], { duration: 260 }));
+    },
+    twist: () => act.animate([{ transform: 'rotate(-12deg) translateX(-6px)' }, { transform: 'rotate(12deg) translateX(6px)' }], { duration: 330, iterations: 10, direction: 'alternate', easing: 'ease-in-out' }),
+    shove: (d) => act.animate([{ transform: 'none' }, { transform: `translateX(${d * 24}px) scaleX(1.1)`, offset: 0.4 }, { transform: 'none' }], { duration: 380 }),
+  };
+  addEventListener('message', (e) => {
+    const d = e.data || {};
+    if (d.hush) (bubble.classList.remove('on'), clearTimeout(say.t), talk(false)); // the other ot's turn to talk
+    if (d.line) {
+      showBubble(document.createTextNode(d.line), d.ms || Math.max(2200, d.line.length * 70));
+      talk(true, d.line);
+      clearTimeout(say.t);
+      say.t = setTimeout(() => talk(false), 400 + d.line.length * 55);
+    }
+    if (d.gesture) ch.gesture(d.gesture, d.gms ? { ms: d.gms } : undefined);
+    if (d.effect) ch.effect?.(d.effect);
+    if (d.act && ACTS[d.act]) {
+      actRoom = d.room || 150;
+      actUntil = Date.now() + (d.ms || 3600);
+      tellNeed();
+      requestAnimationFrame(() => ACTS[d.act](d.dir || 1, d));
+    }
+    if (d.face != null) {
+      if (is3d) ch.character.yaw = -d.face * 0.9;
+      else $('#stage').classList.toggle('flip', d.face < 0);
+      lookFree = Date.now() + 1500;
+      ch.lookAt?.(d.face * 0.8, 0);
+    }
+  });
+
   // ── personality: small life between events (glances, fidgets, effects, shape changes) ──
   const pick = (a) => a[Math.floor(Math.random() * a.length)];
   const SHAPES = ['round', 'egg', 'pear', 'bean', 'squircle', 'drop', 'ghost', 'cat', 'cloud', 'blob', 'heart', 'mushroom', 'tall', 'wide'].filter((x) => x !== spec.shape);
@@ -528,7 +841,7 @@
   }
   (function life() {
     setTimeout(() => {
-      if (!asleep && !thinking && !bubble.classList.contains('on') && !document.hidden) fidget();
+      if (!asleep && !thinking && !rec && !bubble.classList.contains('on') && !document.hidden) fidget();
       life();
     }, 4000 + Math.random() * 8000);
   })();