@7ots/cli 0.1.6 → 0.1.8

package/cli/pet/pet.html

@@ -45,6 +45,12 @@
     opacity: 0; transform: translate(-50%, 6px) scale(.97); transform-origin: 50% 100%; transition: opacity .22s, transform .22s; pointer-events: none; }
   .bubble.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
   .bubble::after { content: ''; position: absolute; left: 50%; top: 100%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: inherit; border: inherit; border-width: 0 1px 1px 0; transform: rotate(45deg); }
+  .bubble.asking { pointer-events: auto; -webkit-app-region: no-drag; border-color: var(--accent); }
+  .bubble .q { display: block; margin-bottom: 8px; }
+  .bubble .yn { display: flex; gap: 6px; justify-content: flex-end; }
+  .bubble .yn button { font: inherit; font-size: 12.5px; font-weight: 650; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
+  .bubble .yn button.ok { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+  .bubble .yn button:hover { filter: brightness(1.08); }
   .dots { display: inline-flex; gap: 4px; padding: 2px 0; }
   .dots b { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite ease-in-out; }
   .dots b:nth-child(2) { animation-delay: .15s; } .dots b:nth-child(3) { animation-delay: .3s; }
@@ -119,8 +125,11 @@
   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 { width: calc(140px * var(--pet-scale, 1)); height: calc(148px * var(--pet-scale, 1)); } /* stretched from a corner (see 'resize' below) */
   body.desktop .stage.flip .face { transform: scaleX(-1); }
+  /* the 3D ot is framed with room under its feet (~34px at 1x) that grows with the stretch: the figure is drawn
+     lower by what that room grew, so a bigger ot still stands where it stood; the stage (hit area) stays put */
+  body.desktop.ot3d .face { top: calc(34px * (var(--pet-scale, 1) - 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; }
@@ -137,7 +146,7 @@
   .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: auto; left: calc(50% + 66px); 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% + 70px * var(--pet-scale, 1) - 4px); /* beside the ot at any size: over it, it hid the corners that stretch it */ 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: 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 */
@@ -213,17 +222,17 @@
 <script type="module">
   const BOOT = __BOOT__;
   const T = {
-    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…',
+    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…', approve: 'Approve', reject: 'Reject',
       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', 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…',
+    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…', approve: 'Aprobar', reject: 'Rechazar',
       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', 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…',
+    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…', approve: 'Aprovar', reject: 'Recusar',
       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' },
@@ -272,6 +281,7 @@
   }
   ch ||= createCharacter($('#face'), spec, { locale: lang, title: id.name });
   const is3d = !!ch.character;
+  document.body.classList.toggle('ot3d', is3d);
   // 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;
@@ -319,6 +329,7 @@
     }
     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));
+    w = Math.max(w, st.width + 2 * 58); // the menu beside it (shown on hover)
     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
@@ -341,9 +352,53 @@
     const r = $('#stage').getBoundingClientRect();
     return e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
   };
+  // Size: grabbing the ot by a corner stretches it (bigger or smaller) instead of moving it; remembered per ot.
+  const SCALE_KEY = `7ots.petScale${guest ? `.${guest}` : ''}`;
+  let scale = 1;
+  try {
+    scale = Math.max(0.6, Math.min(2, Number(localStorage.getItem(SCALE_KEY)) || 1));
+  } catch {}
+  const setScale = (k) => ((scale = k), document.documentElement.style.setProperty('--pet-scale', k.toFixed(3)), tellNeed());
+  if (desktop && scale !== 1) setScale(scale);
+  const CORNER = 22;
+  // which corner of the ot the pointer is on ('nw' | 'ne' | 'sw' | 'se'), or ''
+  const cornerAt = (e) => {
+    if (!desktop || !onOt(e)) return '';
+    const r = $('#stage').getBoundingClientRect();
+    const v = e.clientY - r.top < CORNER ? 'n' : r.bottom - e.clientY < CORNER ? 's' : '';
+    const h = e.clientX - r.left < CORNER ? 'w' : r.right - e.clientX < CORNER ? 'e' : '';
+    return v && h ? v + h : '';
+  };
   if (desktop) {
     let down = false;
-    const up = () => down && ((down = false), console.debug('\u00a77drag' + JSON.stringify({ on: false })));
+    let sizing = null;
+    let pulled = null; // { m, on }: a drag that started off the corners
+    const up = () => {
+      if (pulled?.on) {
+        ch.unmorph?.(pulled.m); // let go: back into shape
+        fxUntil = Date.now() + 600; // room while it eases back
+      }
+      pulled = null;
+      if (sizing) {
+        sizing = null;
+        try {
+          localStorage.setItem(SCALE_KEY, String(scale));
+        } catch {}
+      }
+      if (down) (down = false), console.debug('\u00a77drag' + JSON.stringify({ on: false }));
+    };
+    addEventListener('pointermove', (e) => {
+      if (sizing) {
+        // the ot stays anchored at its feet, centred: sideways it grows on both sides, so a corner moves half as much
+        const dx = (e.screenX - sizing.x) * (sizing.c[1] === 'e' ? 1 : -1) * 2;
+        const dy = (e.screenY - sizing.y) * (sizing.c[0] === 's' ? 1 : -1);
+        const k = sizing.k * ((140 * sizing.k + dx) / (140 * sizing.k) + (148 * sizing.k + dy) / (148 * sizing.k)) / 2;
+        return setScale(Math.max(0.6, Math.min(2, k)));
+      }
+      if (down) return;
+      const c = cornerAt(e);
+      document.body.style.cursor = c ? (c === 'nw' || c === 'se' ? 'nwse-resize' : 'nesw-resize') : '';
+    });
     // 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)
@@ -351,14 +406,50 @@
       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 }));
+      const c = !grip && cornerAt(e);
+      if (c) sizing = { c, x: e.screenX, y: e.screenY, k: scale };
+      else if (!grip) {
+        const r = $('#stage').getBoundingClientRect();
+        const side = Math.abs(e.clientX - (r.left + r.width / 2)) / r.width > Math.abs(e.clientY - (r.top + r.height / 2)) / r.height;
+        pulled = { m: side ? 'squish' : 'stretch', on: false };
+      }
+      // resizing: the shell keeps the mouse but leaves the window where it is
+      console.debug('\u00a77drag' + JSON.stringify({ on: true, resize: !!c }));
+    });
+    // pulled by a side or the top: once the shell says the window is really being carried (the page sees
+    // almost no pointer motion then: the window moves with the hand), it stretches toward the pull — wider
+    // from a side, taller from above or below — until it's let go
+    addEventListener('message', (e) => {
+      if (!e.data?.carried || !pulled || pulled.on) return;
+      pulled.on = true;
+      fxUntil = Infinity; // room around it for as long as it's held stretched
+      ch.morph?.(pulled.m, { hold: true });
+      tellNeed();
     });
     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'));
+  // A click on the ot pokes it: it gets squished and, poked again and again, more and more annoyed.
+  // Waits a beat so a double click (the menu) doesn't count as two pokes; a drag or a stretch isn't a poke.
+  let pressAt = null, pokeT = 0, pokes = 0, pokedAt = 0;
+  addEventListener('pointerdown', (e) => (pressAt = { x: e.screenX, y: e.screenY }));
+  addEventListener('click', (e) => {
+    clearTimeout(pokeT);
+    if (e.detail > 1 || !onOt(e) || e.target.closest?.('.actions, .ask, .bubble.asking, a, button')) return;
+    if (pressAt && Math.hypot(e.screenX - pressAt.x, e.screenY - pressAt.y) > 4) return;
+    pokeT = setTimeout(poke, 240);
+  });
+  function poke() {
+    pokes = Date.now() - pokedAt < 2500 ? pokes + 1 : 1;
+    pokedAt = Date.now();
+    lookFree = 0;
+    ch.morph?.('squish', { ms: 420 });
+    if (pokes === 1) ch.gesture('bounce');
+    else if (pokes <= 3) (ch.gesture('surprise'), ch.effect?.('exclaim'));
+    else (ch.gesture(pokes % 2 ? 'stomp' : 'shake'), ch.effect?.('anger'), pokes >= 6 && ch.effect?.('steam'));
+  }
 
   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;
@@ -501,6 +592,8 @@
     speechSynthesis.speak(u);
   }
   function showBubble(content, ms) {
+    if (asking && !content.classList?.contains('askq')) return; // a question waiting for you stays until answered
+    bubble.classList.remove('asking');
     bubble.replaceChildren(content);
     bubble.classList.add('on');
     clearTimeout(hideT);
@@ -537,6 +630,42 @@
     if (withFace) react(text);
     speak(text);
   }
+  // It asks before acting for you (Orquesta…): Approve / Reject in the bubble, answered on POST /approve.
+  let asking = null;
+  function ask4(a) {
+    if (a.done) {
+      if (asking !== a.id) return;
+      asking = null;
+      bubble.classList.remove('on', 'asking');
+      return;
+    }
+    asking = null;
+    const box = document.createElement('div');
+    box.className = 'askq';
+    const q = document.createElement('span');
+    q.className = 'q';
+    q.textContent = a.text;
+    const yn = document.createElement('div');
+    yn.className = 'yn';
+    const btn = (ok) => {
+      const b = document.createElement('button');
+      b.type = 'button';
+      b.textContent = t(ok ? 'approve' : 'reject');
+      if (ok) b.className = 'ok';
+      b.addEventListener('click', () => {
+        yn.querySelectorAll('button').forEach((x) => (x.disabled = true));
+        post('/approve', { id: a.id, ok }).catch(() => {});
+      });
+      return b;
+    };
+    yn.append(btn(false), btn(true));
+    box.append(q, yn);
+    showBubble(box, 0);
+    bubble.classList.add('asking');
+    asking = a.id;
+    ch.gesture('think');
+    speak(a.text);
+  }
   function setThinking(on) {
     if (on === thinking) return;
     thinking = on;
@@ -546,7 +675,7 @@
       d.className = 'dots';
       d.innerHTML = '<b></b><b></b><b></b>';
       showBubble(d, 0);
-    } else if (bubble.querySelector('.dots')) bubble.classList.remove('on');
+    } else if (!asking && bubble.querySelector('.dots')) bubble.classList.remove('on');
   }
 
   // ── live updates ──
@@ -582,6 +711,7 @@
       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 (m.ask) ask4(m.ask); // before thinking: an approved ask hands the bubble back to the dots
       if ('thinking' in m) setThinking(!!m.thinking);
       if (m.activity) addActivity(m.activity);
       if (m.gesture) ch.gesture(m.gesture);
@@ -600,6 +730,7 @@
   askIn.placeholder = t('askPh');
   $('#setBtn').href = `/settings?token=${encodeURIComponent(BOOT.token)}`;
   $('#setBtn').title = t('settings');
+  if (!desktop) $('#setBtn').removeAttribute('target'); // in a browser tab, Settings opens in place (its Back returns here); the desktop window opens a tab
   $('#byeBtn').title = t('dismiss');
   $('#byeBtn').addEventListener('click', () => console.debug('\u00a77bye')); // the shell sends the visitor home
   const talking = (on) => {
@@ -617,6 +748,14 @@
     clearTimeout(menuT);
     if (on) menuT = setTimeout(() => document.body.classList.remove('menu'), 8000);
   });
+  // right click: the shell's menu (settings, talk, sleep, hide…) at the cursor. Asked for by name: Electron's own
+  // 'context-menu' event didn't reach the shell from this transparent click-through window on Linux.
+  if (desktop)
+    addEventListener('contextmenu', (e) => {
+      if (e.target.closest?.('.ask input')) return; // the talk box keeps copy/paste
+      e.preventDefault();
+      console.debug('\u00a77ctx');
+    });
   askIn.addEventListener('keydown', (e) => e.key === 'Escape' && talking(false));
   ask.addEventListener('submit', async (e) => {
     e.preventDefault();
@@ -834,7 +973,7 @@
       [hungry ? 1.2 : 0, () => (ch.gesture('point'), ch.effect?.('thought'))],
       [0.6, () => ch.effect?.('blush')],
       [0.3, () => ch.gesture('shiver')],
-      [1.2, () => ch.morph?.(pick(['puff', 'squish', 'stretch', 'jelly']), { ms: 1600 + Math.random() * 1600 })],
+      [1.2, () => ch.morph?.(pick(['puff', 'squish', 'stretch']), { ms: 1600 + Math.random() * 1600 })],
       [0.7, () => ch.morph?.(pick(['wings', 'horns', 'spikes', 'hands']), { ms: 2500 + Math.random() * 2500 })],
       [0.8, () => ch.morph?.(`shape:${pick(SHAPES)}`, { ms: 2500 + Math.random() * 3000 })],
     ])?.();