@7ots/cli 0.1.3 → 0.1.5

package/cli/pet/electron/main.cjs

@@ -1,14 +1,14 @@
 /**
  * Desktop mode: the pet page in a transparent, frameless, always-on-top window that strolls
- * along the bottom of the screen. Launched by `7ots pet --mode desktop` with
+ * along the bottom of the screen. It resizes to what is in use and lets clicks through its empty parts. Launched by `7ots pet --mode desktop` with
  *   ~/.7ots/electron/…/electron cli/pet/electron/main.cjs (installed once by the CLI)
  * and SEVENOTS_PET_URL / SEVENOTS_PET_TOKEN in the environment.
- * Menu: right click on the pet, or the tray icon (Show / Hide / care / Quit).
+ * Menu: right click on the pet, or the tray icon (Show / Hide / Talk / care / Settings / Quit).
  * SEVENOTS_PET_OPAQUE=1 paints a solid card instead of transparency (Linux setups without a compositor).
  */
 
 const path = require('node:path');
-const { app, BrowserWindow, Menu, Tray, nativeImage, screen } = require('electron');
+const { app, BrowserWindow, Menu, Tray, nativeImage, screen, shell } = require('electron');
 
 const URL_ = process.env.SEVENOTS_PET_URL;
 const TOKEN = process.env.SEVENOTS_PET_TOKEN;
@@ -16,16 +16,16 @@ const OPAQUE = process.env.SEVENOTS_PET_OPAQUE === '1';
 const VIEW3D = process.env.SEVENOTS_PET_3D === '1';
 const LANG = String(process.env.SEVENOTS_PET_LANG || 'en').slice(0, 2);
 const ICON = path.join(__dirname, '..', '..', '..', 'brand', 'icon-512.png');
-const W = 240;
-const H = 270;
+const BIG = { w: 240, h: 270 }; // with room for the bubble, the buttons and the talk box
+const SMALL = { w: 160, h: 164 }; // just the ot
 const linux = process.platform === 'linux';
 
 const L = {
-  en: { talk: '💬 Talk', show: 'Show pet', hide: 'Hide (keeps living)', feed: '🍎 Feed', play: '🎾 Play', sleep: '💤 Sleep', wake: '☀️ Wake up', still: 'Stay still', quit: 'Quit pet' },
-  es: { talk: '💬 Hablar', show: 'Mostrar mascota', hide: 'Ocultar (sigue viva)', feed: '🍎 Dar comida', play: '🎾 Jugar', sleep: '💤 Dormir', wake: '☀️ Despertar', still: 'Quedarse quieta', quit: 'Cerrar mascota' },
-  pt: { talk: '💬 Falar', show: 'Mostrar bichinho', hide: 'Esconder (segue vivo)', feed: '🍎 Dar comida', play: '🎾 Brincar', sleep: '💤 Dormir', wake: '☀️ Acordar', still: 'Ficar parado', quit: 'Fechar bichinho' },
+  en: { settings: '⚙️ Settings', talk: '💬 Talk', show: 'Show pet', hide: 'Hide (keeps living)', feed: '🍎 Feed', play: '🎾 Play', sleep: '💤 Sleep', wake: '☀️ Wake up', still: 'Stay still', quit: 'Quit pet' },
+  es: { settings: '⚙️ Configuración', talk: '💬 Hablar', show: 'Mostrar mascota', hide: 'Ocultar (sigue viva)', feed: '🍎 Dar comida', play: '🎾 Jugar', sleep: '💤 Dormir', wake: '☀️ Despertar', still: 'Quedarse quieta', quit: 'Cerrar mascota' },
+  pt: { settings: '⚙️ Configurações', talk: '💬 Falar', show: 'Mostrar bichinho', hide: 'Esconder (segue vivo)', feed: '🍎 Dar comida', play: '🎾 Brincar', sleep: '💤 Dormir', wake: '☀️ Acordar', still: 'Ficar parado', quit: 'Fechar bichinho' },
 }[LANG] || {};
-const tr = (k) => L[k] || { show: 'Show pet', hide: 'Hide', talk: 'Talk', feed: 'Feed', play: 'Play', sleep: 'Sleep', wake: 'Wake up', still: 'Stay still', quit: 'Quit pet' }[k];
+const tr = (k) => L[k] || { show: 'Show pet', hide: 'Hide', talk: 'Talk', settings: 'Settings', feed: 'Feed', play: 'Play', sleep: 'Sleep', wake: 'Wake up', still: 'Stay still', quit: 'Quit pet' }[k];
 
 app.commandLine.appendSwitch('autoplay-policy', 'no-user-gesture-required'); // it talks without a click
 if (linux && !OPAQUE) {
@@ -41,8 +41,8 @@ app.whenReady().then(() => setTimeout(start, linux ? 400 : 0)); // Linux: the co
 
 function start() {
   const area = screen.getPrimaryDisplay().workArea;
-  const home = () => [area.x + area.width - W - 24, area.y + area.height - H];
-  let [x, y] = home();
+  const right = area.x + area.width;
+  const floor = area.y + area.height;
 
   // Tray first: if there is one, the window can stay out of the taskbar; if not, it shows there so it can be found.
   let tray = null;
@@ -54,14 +54,18 @@ function start() {
     }
   } catch {}
 
+  // The ot lives at an anchor (bottom-center of the window). The window is sized to what is in use:
+  // SMALL is just the body; BIG (room for the bubble, the buttons and the talk box) only while needed.
+  const homeAnchor = () => ({ x: right - BIG.w / 2 - 24, y: floor });
+  const pos = homeAnchor();
+  let size = BIG; // it says hi on start
+  const bounds = (s = size, a = pos, lift = 0) => ({ x: Math.round(a.x - s.w / 2), y: Math.round(a.y - s.h - lift), width: s.w, height: s.h });
+
   const win = new BrowserWindow({
-    width: W,
-    height: H,
-    x,
-    y,
+    ...bounds(),
     transparent: !OPAQUE,
     frame: false,
-    resizable: false,
+    resizable: true, // resized by code only; frameless, so no edges to grab
     hasShadow: OPAQUE,
     alwaysOnTop: true,
     skipTaskbar: !!tray,
@@ -73,13 +77,28 @@ function start() {
   win.setAlwaysOnTop(true, 'floating');
   win.setVisibleOnAllWorkspaces?.(true);
   win.loadURL(`${URL_}/pet?desktop=1${OPAQUE ? '&opaque=1' : ''}${VIEW3D ? '&3d=1' : ''}&token=${encodeURIComponent(TOKEN)}`);
-  win.webContents.setWindowOpenHandler(() => ({ action: 'deny' }));
+  const settingsUrl = `${URL_}/settings?token=${encodeURIComponent(TOKEN)}`;
+  const openSettings = () => shell.openExternal(settingsUrl).catch(() => {});
+  // The page's ⚙️ button opens the settings in the real browser; anything else is denied.
+  win.webContents.setWindowOpenHandler(({ url }) => {
+    if (url.startsWith(`${URL_}/settings`)) openSettings();
+    return { action: 'deny' };
+  });
   win.webContents.on('will-navigate', (e) => e.preventDefault());
+  const alive = () => !win.isDestroyed();
+  const page = (js) => alive() && win.webContents.executeJavaScript(js).catch(() => {});
 
   let still = false;
+  let lastBounds = null;
+  const place = (lift = 0) => {
+    const b = bounds(size, pos, lift);
+    if (lastBounds && b.x === lastBounds.x && b.y === lastBounds.y && b.width === lastBounds.width && b.height === lastBounds.height) return;
+    lastBounds = b;
+    win.setBounds(b);
+  };
   const show = () => {
-    [x, y] = home();
-    win.setPosition(x, y);
+    Object.assign(pos, homeAnchor());
+    place();
     win.showInactive();
     win.moveTop();
   };
@@ -87,12 +106,13 @@ function start() {
     Menu.buildFromTemplate([
       win.isVisible() ? { label: tr('hide'), click: () => win.hide() } : { label: tr('show'), click: show },
       { type: 'separator' },
-      { label: tr('talk'), click: () => { show(); win.focus(); win.webContents.executeJavaScript('postMessage({ talk: true })').catch(() => {}); } },
+      { label: tr('talk'), click: () => { show(); win.focus(); page('postMessage({ talk: true })'); } },
       { label: tr('feed'), click: () => post('/event', { type: 'feed' }) },
       { label: tr('play'), click: () => post('/event', { type: 'play' }) },
       { label: tr('sleep'), click: () => post('/event', { type: 'sleep' }) },
       { label: tr('wake'), click: () => post('/event', { type: 'wake' }) },
       { type: 'separator' },
+      { label: tr('settings'), click: openSettings },
       { label: tr('still'), type: 'checkbox', checked: still, click: (i) => (still = i.checked) },
       { label: tr('quit'), click: () => post('/quit').finally(() => app.quit()) },
     ]);
@@ -105,32 +125,176 @@ function start() {
     tray.on('click', () => (win.isVisible() ? win.hide() : show()));
   }
 
-  // Walk: a few seconds walking, a few standing, turn at the edges.
-  let dir = -1;
-  let walking = false;
+  // The user dragged it: adopt the new spot as its anchor and let it rest there a while.
   let dragged = 0;
-  let lastSet = x;
   win.on('moved', () => {
-    if (Math.abs(win.getPosition()[0] - lastSet) > 4) dragged = Date.now(); // the user dragged it
+    if (!alive() || !lastBounds) return;
+    const [wx, wy] = win.getPosition();
+    if (Math.abs(wx - lastBounds.x) < 3 && Math.abs(wy - lastBounds.y) < 3) return;
+    dragged = Date.now();
+    droppedSaid = false;
+    pos.x = wx + size.w / 2;
+    pos.y = wy + size.h;
+    lastBounds = { ...lastBounds, x: wx, y: wy };
+    plan = { mode: 'idle', until: Date.now() + 6000 };
   });
-  const tell = () => win.webContents.executeJavaScript(`postMessage({ walk: ${walking ? dir : 0} })`).catch(() => {});
-  setInterval(() => {
-    walking = !still && Math.random() < 0.45;
-    if (Math.random() < 0.3) dir = -dir;
-    tell();
-  }, 4000);
-  setInterval(() => {
-    if (!walking || still || !win.isVisible() || Date.now() - dragged < 8000 || win.isDestroyed()) return;
-    const [cx, cy] = win.getPosition();
-    x = cx + dir * 2;
-    if (x < area.x || x > area.x + area.width - W) {
-      dir = -dir;
-      tell();
+
+  // ── What the page is showing (polled): hit areas for click-through, and whether it needs the big window ──
+  let rects = [];
+  let busy = false; // bubble or talk box on screen
+  const HIT = `(() => {
+    const out = [];
+    for (const e of document.querySelectorAll('#stage, .actions, .ask')) {
+      const cs = getComputedStyle(e);
+      if (cs.display === 'none' || cs.visibility === 'hidden' || +cs.opacity < 0.3) continue;
+      const r = e.getBoundingClientRect();
+      if (r.width && r.height) out.push([r.left, r.top, r.right, r.bottom]);
+    }
+    return { rects: out, busy: document.body.classList.contains('talking') || !!document.querySelector('.bubble.on') };
+  })()`;
+  const hitTimer = setInterval(() => {
+    if (!alive()) return;
+    win.webContents.executeJavaScript(HIT).then((r) => ({ rects, busy } = r)).catch(() => {});
+  }, 250);
+
+  // Click-through: only the ot, its buttons and the talk box take the mouse; the transparent rest lets
+  // clicks reach the window behind. The cursor is polled because `forward: true` is macOS/Windows only.
+  let passing = null;
+  let hoverUntil = 0;
+  const pass = (p) => {
+    if (p === passing || !alive()) return;
+    passing = p;
+    win.setIgnoreMouseEvents(p, { forward: true });
+  };
+  let cursorNear = false;
+  let lastLook = null;
+  let droppedSaid = true;
+  const mouseTimer = setInterval(() => {
+    if (!alive() || !win.isVisible()) return;
+    const c = screen.getCursorScreenPoint();
+    const [wx, wy] = win.getPosition();
+    const x = c.x - wx;
+    const y = c.y - wy;
+    const over = rects.some(([l, t, r, b]) => x >= l - 4 && x <= r + 4 && y >= t - 4 && y <= b + 4);
+    if (over) hoverUntil = Date.now() + 900;
+    // the eyes follow the cursor anywhere on screen (the page only sees it inside the window)
+    if (!lastLook || Math.abs(x - lastLook[0]) + Math.abs(y - lastLook[1]) > 6) {
+      lastLook = [x, y];
+      page(`postMessage({ look: [${x}, ${y}] })`);
+    }
+    // dropped after a drag: a little dizzy
+    if (dragged && !droppedSaid && Date.now() - dragged > 350) {
+      droppedSaid = true;
+      page('postMessage({ dropped: true })');
+    }
+    cursorNear = Math.hypot(c.x - pos.x, c.y - (pos.y - SMALL.h / 2)) < 260;
+    pass(!(over || busy) && rects.length > 0);
+    // Size: big while it talks, you type, or the cursor is on it (its buttons show on hover).
+    const want = busy || Date.now() < hoverUntil ? BIG : SMALL;
+    if (want !== size && Date.now() - dragged > 400) {
+      size = want;
+      place();
+    }
+  }, 60);
+
+  // ── Movement: steering with ease-in/ease-out, a little gait bounce, hops, pauses, curiosity ──
+  const rnd = (a, b) => a + Math.random() * (b - a);
+  const BAND = 200; // how far above the taskbar it roams
+  const minX = area.x + BIG.w / 2;
+  const maxX = right - BIG.w / 2;
+  const clampY = (y) => Math.max(floor - BAND, Math.min(floor, y));
+  const vel = { x: 0, y: 0 };
+  let plan = { mode: 'idle', until: Date.now() + 2500 };
+  let gait = 0;
+  let facing = 0; // what the page last heard: -1..1 (3D yaw follows it smoothly)
+  let lastT = Date.now();
+
+  function next() {
+    const now = Date.now();
+    const r = Math.random();
+    if (r < 0.38) return { mode: 'idle', until: now + rnd(1800, 7000) };
+    if (r < 0.48) return { mode: 'hop', start: now, hops: 1 + Math.floor(Math.random() * 3), then: { mode: 'idle', until: now + 2500 } };
+    if (r < 0.6 && cursorNear) return { mode: 'follow', until: now + rnd(3000, 6000), speed: rnd(70, 110) };
+    // a stroll: sometimes short and lazy, sometimes across the screen
+    const far = Math.random() < 0.3;
+    const dx = (far ? rnd(300, 900) : rnd(60, 260)) * (Math.random() < 0.5 ? -1 : 1);
+    const tx = Math.max(minX, Math.min(maxX, pos.x + dx));
+    return { mode: 'go', tx, ty: clampY(pos.y + rnd(-60, 60)), speed: far ? rnd(110, 170) : rnd(45, 95) };
+  }
+
+  const stepTimer = setInterval(() => {
+    // isDestroyed first: once the window is gone, isVisible() throws ("Object has been destroyed").
+    if (!alive() || !win.isVisible()) return;
+    const now = Date.now();
+    const dt = Math.min(0.05, (now - lastT) / 1000);
+    lastT = now;
+    if (still || busy || now - dragged < 6000 || now < hoverUntil) {
+      // stop gently
+      vel.x *= 0.8;
+      vel.y *= 0.8;
+      if (Math.abs(vel.x) < 1 && facing !== 0) tellFacing(0);
       return;
     }
-    lastSet = x;
-    win.setPosition(x, cy);
-  }, 40);
+
+    let lift = 0;
+    let tx = pos.x;
+    let ty = pos.y;
+    let speed = 0;
+    if (plan.mode === 'idle' && now > plan.until) {
+      plan = next();
+      if (plan.mode === 'follow') page('postMessage({ follow: true })');
+    }
+    if (plan.mode === 'go') ({ tx, ty, speed } = plan);
+    else if (plan.mode === 'follow') {
+      const c = screen.getCursorScreenPoint();
+      // stays a polite distance from the cursor, on the floor band
+      tx = Math.max(minX, Math.min(maxX, c.x + (c.x > pos.x ? -90 : 90)));
+      ty = clampY(c.y + SMALL.h / 2);
+      speed = plan.speed;
+      if (now > plan.until) plan = { mode: 'idle', until: now + rnd(1500, 4000) };
+    } else if (plan.mode === 'hop') {
+      const t = (now - plan.start) / 480;
+      if (t >= plan.hops) plan = plan.then;
+      else if (Math.floor(t) !== plan.said) (plan.said = Math.floor(t), page('postMessage({ hop: true })'));
+      if (plan.mode === 'hop') lift = Math.sin(Math.PI * (t % 1)) * 34 * (1 - Math.floor(t) * 0.25);
+    }
+
+    // arrive: full speed far away, easing to a stop in the last 140 px; velocity eases too (no jerks)
+    const dx = tx - pos.x;
+    const dy = ty - pos.y;
+    const dist = Math.hypot(dx, dy);
+    const want = speed * Math.min(1, dist / 140);
+    const vx = dist > 0.5 ? (dx / dist) * want : 0;
+    const vy = dist > 0.5 ? (dy / dist) * want : 0;
+    const k = Math.min(1, dt * 2.6);
+    vel.x += (vx - vel.x) * k;
+    vel.y += (vy - vel.y) * k;
+    pos.x = Math.max(minX, Math.min(maxX, pos.x + vel.x * dt));
+    pos.y = clampY(pos.y + vel.y * dt);
+    if (plan.mode === 'go' && dist < 3 && Math.hypot(vel.x, vel.y) < 6) plan = { mode: 'idle', until: now + rnd(1500, 6000) };
+
+    // gait: a small bounce per step, scaled by speed
+    const v = Math.hypot(vel.x, vel.y);
+    gait += dt * (4 + v / 18);
+    if (v > 4) lift += Math.abs(Math.sin(gait * Math.PI)) * Math.min(5, v / 22);
+
+    // facing: turn toward where it walks, back to the front when it stops
+    const f = v > 8 ? Math.max(-1, Math.min(1, vel.x / 70)) : 0;
+    if (Math.abs(f - facing) > 0.15 || (f === 0 && facing !== 0)) tellFacing(Math.round(f * 10) / 10);
+
+    place(Math.round(lift));
+  }, 16);
+
+  function tellFacing(f) {
+    facing = f;
+    page(`postMessage({ walk: ${f} })`);
+  }
+
+  win.on('closed', () => {
+    clearInterval(stepTimer);
+    clearInterval(hitTimer);
+    clearInterval(mouseTimer);
+  });
 }
 
 // Hidden is not closed: the pet lives on in the tray until Quit.

package/cli/pet/pet.html

@@ -80,6 +80,7 @@
   /* actions */
   .actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 18px 16px; }
   .act { display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-weight: 650; font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
+  a.act { color: inherit; text-decoration: none; -webkit-app-region: no-drag; }
   .act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
   .act:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
   .act:active { transform: scale(.97); }
@@ -174,6 +175,7 @@
     <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" 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>
   </nav>
 
   <section class="feed" aria-labelledby="feed-h">
@@ -187,17 +189,17 @@
 <script type="module">
   const BOOT = __BOOT__;
   const T = {
-    en: { 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', 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…',
       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: { 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', 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…',
       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: { 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', 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…',
       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' },
@@ -244,7 +246,8 @@
   }
   ch ||= createCharacter($('#face'), spec, { locale: lang, title: id.name });
   const is3d = !!ch.character;
-  addEventListener('pointermove', (e) => ch.lookAtPoint(e.clientX, e.clientY));
+  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) });
@@ -384,8 +387,35 @@
     clearTimeout(hideT);
     if (ms) hideT = setTimeout(() => bubble.classList.remove('on'), ms);
   }
-  function say(text) {
+  // What it says shows on its face too: a gesture/effect picked from the words (when the server sent none).
+  const REACT = [
+    [/(ja){2,}|(ha){2,}|jeje|lol|kkk|😂|🤣/i, 'laugh', null],
+    [/gracias|thank|obrigad|te quiero|love you|❤|💜|lindo|cute/i, 'bow', 'hearts'],
+    [/error|fail|fall[óo]|rompi|broke|oops|ups|ay no|uh.?oh/i, 'shake', 'sweat'],
+    [/listo|done|logrado|genial|great|bravo|yay|bien hecho|nice|perfect|✓|✅|🎉/i, 'celebrate', 'confetti'],
+    [/hambre|hungry|fome|comida|food|🍎/i, 'point', 'thought'],
+    [/sueño|tired|cansad|dormir|sleep|nap|zz/i, 'yawn', null],
+    [/miedo|scary|assust|fear|😱/i, 'shiver', 'sweat'],
+    [/enojad|angry|bravo con|grr|😠/i, 'stomp', 'anger'],
+    [/hola|hello|hi\b|hey|oi\b|buen(os|as) d[ií]as|good morning/i, 'wave', null],
+    [/[?¿]\s*$/, 'think', 'question'],
+    [/!\s*$/, 'bounce', 'exclaim'],
+  ];
+  function react(text) {
+    for (const [re, g, fx] of REACT) {
+      if (!re.test(text)) continue;
+      if (g) ch.gesture(g);
+      if (fx) ch.effect?.(fx);
+      return;
+    }
+    ch.gesture(Math.random() < 0.5 ? 'nod' : 'wiggle');
+  }
+  function say(text, withFace = false) {
     showBubble(document.createTextNode(text), Math.max(4500, text.length * 90));
+    talk(true, text); // the mouth moves with the words even without a voice; a real voice re-syncs it
+    clearTimeout(say.t);
+    say.t = setTimeout(() => talk(false), 500 + text.length * 60);
+    if (withFace) react(text);
     speak(text);
   }
   function setThinking(on) {
@@ -414,7 +444,7 @@
       if (m.gesture) ch.gesture(m.gesture);
       if (m.morph) ch.morph?.(m.morph);
       if (m.effect) ch.effect?.(m.effect);
-      if (m.say) say(m.say);
+      if (m.say) say(m.say, !m.gesture);
     };
   }
   live.textContent = t('off');
@@ -424,6 +454,8 @@
   const ask = $('#ask');
   const askIn = $('#askIn');
   askIn.placeholder = t('askPh');
+  $('#setBtn').href = `/settings?token=${encodeURIComponent(BOOT.token)}`;
+  $('#setBtn').title = t('settings');
   const talking = (on) => {
     document.body.classList.toggle('talking', on);
     if (on) askIn.focus();
@@ -442,12 +474,64 @@
   });
   addEventListener('message', (e) => e.data?.talk && talking(true));
 
-  // The desktop shell tells us which way we walk.
+  // The desktop shell tells us how we move: facing (walk -1..1), hops, being dropped, following, the cursor.
   addEventListener('message', (e) => {
-    if (e.data?.walk == null) return;
-    if (is3d) ch.character.yaw = e.data.walk ? -e.data.walk * 0.9 : 0; // turns toward where it walks
-    else $('#stage').classList.toggle('flip', e.data.walk < 0);
+    const d = e.data || {};
+    if (d.walk != null) {
+      if (is3d) ch.character.yaw = -d.walk * 0.9; // turns toward where it walks, smoothly
+      else $('#stage').classList.toggle('flip', d.walk < 0);
+    }
+    if (d.hop) ch.gesture('bounce');
+    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
   });
+
+  // ── 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);
+  const weighted = (list) => {
+    let r = Math.random() * list.reduce((a, x) => a + x[0], 0);
+    for (const x of list) if ((r -= x[0]) <= 0) return x[1];
+  };
+  function glance() {
+    lookFree = Date.now() + 1400 + Math.random() * 1200;
+    ch.lookAt((Math.random() * 2 - 1) * 0.8, (Math.random() * 2 - 1) * 0.5);
+    if (Math.random() < 0.4) ch.blink?.();
+  }
+  function fidget() {
+    const s = last || {};
+    const tired = s.energy < 35;
+    const bored = s.fun < 35;
+    const hungry = s.food < 35;
+    const happy = s.mood === 'happy';
+    weighted([
+      [5, glance],
+      [2, () => ch.gesture('wiggle')],
+      [1.5, () => (ch.gesture('think'), ch.effect?.('question'))],
+      [1, () => ch.gesture('shrug')],
+      [0.6, () => ch.gesture('hiccup')],
+      [0.5, () => (ch.gesture('sneeze'), ch.effect?.('sneeze'))],
+      [happy ? 2.5 : 0.6, () => (ch.gesture('dance'), ch.effect?.('notes'))],
+      [happy ? 0.8 : 0.2, () => (ch.gesture('celebrate'), ch.effect?.('sparkles'))],
+      [0.6, () => ch.gesture('spin')],
+      [0.5, () => ch.gesture('clap')],
+      [tired ? 3 : 0.4, () => ch.gesture('yawn')],
+      [bored ? 1.5 : 0.2, () => (ch.gesture('stomp'), ch.effect?.('steam'))],
+      [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 })],
+      [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 })],
+    ])?.();
+  }
+  (function life() {
+    setTimeout(() => {
+      if (!asleep && !thinking && !bubble.classList.contains('on') && !document.hidden) fidget();
+      life();
+    }, 4000 + Math.random() * 8000);
+  })();
 </script>
 </body>
 </html>