@7ots/cli 0.1.4 → 0.1.5

package/cli/pet/electron/main.cjs

@@ -1,6 +1,6 @@
 /**
  * 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 / Talk / care / Settings / Quit).
@@ -16,8 +16,8 @@ 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 = {
@@ -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,
@@ -81,11 +85,20 @@ function start() {
     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();
   };
@@ -93,7 +106,7 @@ 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' }) },
@@ -112,37 +125,175 @@ 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 alive = () => !win.isDestroyed();
-  const tell = () => alive() && win.webContents.executeJavaScript(`postMessage({ walk: ${walking ? dir : 0} })`).catch(() => {});
-  const walkTimer = setInterval(() => {
-    walking = !still && Math.random() < 0.45;
-    if (Math.random() < 0.3) dir = -dir;
-    tell();
-  }, 4000);
+
+  // ── 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() || !walking || still || !win.isVisible() || Date.now() - dragged < 8000) return;
-    const [cx, cy] = win.getPosition();
-    x = cx + dir * 2;
-    if (x < area.x || x > area.x + area.width - W) {
-      dir = -dir;
-      tell();
+    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(walkTimer);
     clearInterval(stepTimer);
+    clearInterval(hitTimer);
+    clearInterval(mouseTimer);
   });
 }
 

package/cli/pet/pet.html

@@ -246,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) });
@@ -386,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) {
@@ -416,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');
@@ -446,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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7ots/cli",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "7ots.com — open-source embeddable web agent: it sees the page, speaks and acts for your visitor. Web Component + self-hosted Node proxy, Claude/OpenAI, 2D/3D avatar with voice, i18n, backoffice — plus a CLI with reproducible identities, a desktop pet and apuchat meet.",
   "homepage": "https://7ots.com",
   "repository": {