@7ots/cli 0.1.5 → 0.1.6

package/cli/lib/watchers.mjs

@@ -0,0 +1,151 @@
+/**
+ * Watchers: things the pet keeps an eye on until they happen, then it tells you (like a reminder, but on a
+ * condition instead of a time).
+ *
+ *   price    "avísame si BTC llega a 85 mil"      { kind: 'price', coin: 'bitcoin', op: '>=', value: 85000, vs: 'usd' }
+ *            CoinGecko's free simple-price API, every 60 s (all coins in one request).
+ *   process  "avísame cuando termine el build"   { kind: 'process', match: 'npm run build', until: 'exit' | 'start' }
+ *            the running processes (ps), every 5 s.
+ *
+ * State: ~/.7ots/watchers.json. Also: processes() = what runs on this computer right now (access.processes).
+ */
+
+import { execFile } from 'node:child_process';
+import { randomBytes } from 'node:crypto';
+import { homeFile, readJson, writeJson } from './paths.mjs';
+
+const COINS = {
+  btc: 'bitcoin', bitcoin: 'bitcoin', eth: 'ethereum', ethereum: 'ethereum', sol: 'solana', solana: 'solana',
+  xrp: 'ripple', ada: 'cardano', doge: 'dogecoin', bnb: 'binancecoin', usdc: 'usd-coin', ton: 'the-open-network',
+  avax: 'avalanche-2', dot: 'polkadot', link: 'chainlink', matic: 'matic-network', pol: 'matic-network', ltc: 'litecoin', xlm: 'stellar',
+};
+export const coinId = (s) => {
+  const k = String(s || '').trim().toLowerCase();
+  return COINS[k] || (/^[a-z0-9-]{2,60}$/.test(k) ? k : null);
+};
+const OPS = { '>=': (a, b) => a >= b, '<=': (a, b) => a <= b, '>': (a, b) => a > b, '<': (a, b) => a < b };
+
+/** What runs on this computer: [{ pid, name, cmd, cpu, mem, since }], heaviest first. Linux/macOS (ps). */
+export function processes({ n = 40 } = {}) {
+  if (process.platform === 'win32') return Promise.resolve([]);
+  return new Promise((resolve) =>
+    execFile('ps', ['-eo', 'pid=,pcpu=,pmem=,etimes=,comm=,args='], { maxBuffer: 8 << 20, timeout: 4000 }, (err, out) => {
+      if (err) return resolve([]);
+      const rows = [];
+      for (const line of String(out).split('\n')) {
+        const m = line.trim().match(/^(\d+)\s+([\d.]+)\s+([\d.]+)\s+(\d+)\s+(\S+)\s+(.*)$/);
+        if (!m || Number(m[1]) === process.pid || m[5] === 'ps') continue;
+        rows.push({ pid: +m[1], cpu: +m[2], mem: +m[3], since: Date.now() - m[4] * 1000, name: m[5], cmd: redactCmd(m[6]) });
+      }
+      rows.sort((a, b) => b.cpu - a.cpu || b.mem - a.mem);
+      resolve(rows.slice(0, n));
+    }),
+  );
+}
+
+// Command lines can carry secrets (--token=…, URLs with passwords): those never leave this function.
+const redactCmd = (s) =>
+  String(s)
+    .replace(/(--?[\w-]*(?:token|key|secret|pass(?:word)?|auth)[\w-]*[= ])\S+/gi, '$1***')
+    .replace(/\b(sk|pk|ghp|gho|xox[bp]|7d|oek)[-_][A-Za-z0-9_-]{8,}/g, '$1_***')
+    .replace(/(\/\/[^/\s:@]+:)[^@\s]+@/g, '$1***@')
+    .slice(0, 300);
+
+/** A short text for the brain: the busiest processes, no command arguments. */
+export async function processSummary(n = 12) {
+  const ps = await processes({ n });
+  return ps.map((p) => `${p.name} (cpu ${p.cpu}%, mem ${p.mem}%)`).join(', ');
+}
+
+/**
+ * @param {{ onFire: (w, now: { price?: number }) => void, log?: Function }} o
+ */
+export function createWatchers({ onFire, log = () => {} }) {
+  const file = homeFile('watchers.json');
+  let list = (readJson(file, []) || []).filter((w) => w && !w.done);
+  const save = () => writeJson(file, list);
+  const last = new Map(); // id → last value seen (price) or present (process), for the processes tab
+
+  function add(w) {
+    const x = { id: randomBytes(4).toString('hex'), created: Date.now(), ...w };
+    list.push(x);
+    save();
+    return x;
+  }
+  function fire(w, now) {
+    w.done = true;
+    list = list.filter((x) => !x.done);
+    save();
+    onFire(w, now);
+  }
+
+  async function checkPrices() {
+    const ws = list.filter((w) => w.kind === 'price');
+    if (!ws.length) return;
+    const ids = [...new Set(ws.map((w) => w.coin))].join(',');
+    const vs = [...new Set(ws.map((w) => w.vs || 'usd'))].join(',');
+    try {
+      const r = await fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${encodeURIComponent(ids)}&vs_currencies=${encodeURIComponent(vs)}`, { signal: AbortSignal.timeout(10_000) });
+      if (!r.ok) throw new Error(`coingecko ${r.status}`);
+      const j = await r.json();
+      for (const w of ws) {
+        const price = j[w.coin]?.[w.vs || 'usd'];
+        if (!Number.isFinite(price)) continue;
+        last.set(w.id, { price, at: Date.now() });
+        if (OPS[w.op]?.(price, w.value)) fire(w, { price });
+      }
+    } catch (e) {
+      log(`watchers: ${e.message}`);
+    }
+  }
+
+  async function checkProcesses() {
+    const ws = list.filter((w) => w.kind === 'process');
+    if (!ws.length) return;
+    const ps = await processes({ n: 5000 });
+    for (const w of ws) {
+      const needle = w.match.toLowerCase();
+      const hit = ps.find((p) => p.cmd.toLowerCase().includes(needle) || p.name.toLowerCase() === needle);
+      const prev = last.get(w.id)?.present;
+      last.set(w.id, { present: !!hit, pid: hit?.pid, at: Date.now() });
+      // "until it ends": it has to have been seen running first (or be running when the watch starts)
+      if (w.until === 'start' ? hit : prev === true && !hit) fire(w, {});
+      else if (w.until !== 'start' && prev === undefined && !hit) w.notYet = true;
+    }
+  }
+
+  const tPrice = setInterval(checkPrices, 60_000);
+  const tProc = setInterval(checkProcesses, 5000);
+  tPrice.unref?.();
+  tProc.unref?.();
+  setTimeout(checkPrices, 1500).unref?.();
+
+  return {
+    get list() {
+      return list.map((w) => ({ ...w, last: last.get(w.id) || null }));
+    },
+    addPrice({ coin, op = '>=', value, vs = 'usd', text = '' }) {
+      const id = coinId(coin);
+      if (!id || !Number.isFinite(Number(value)) || !OPS[op]) return null;
+      const w = add({ kind: 'price', coin: id, op, value: Number(value), vs: String(vs || 'usd').toLowerCase(), text: String(text).slice(0, 200) });
+      checkPrices();
+      return w;
+    },
+    addProcess({ match, until = 'exit', text = '' }) {
+      if (!match || String(match).length < 2) return null;
+      const w = add({ kind: 'process', match: String(match).slice(0, 120), until: until === 'start' ? 'start' : 'exit', text: String(text).slice(0, 200) });
+      checkProcesses();
+      return w;
+    },
+    cancel(id) {
+      const n = list.length;
+      list = id === 'all' ? [] : list.filter((w) => w.id !== id);
+      save();
+      return n !== list.length;
+    },
+    stop() {
+      clearInterval(tPrice);
+      clearInterval(tProc);
+    },
+  };
+}

package/cli/pet/card.html

@@ -0,0 +1,294 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>7ots card</title>
+<link rel="icon" href="/favicon.svg" />
+<style>
+  /* An ot's trading card: its public face. Holo foil in the spirit of Pokémon/Magic cards (color-dodge rainbow
+     bands + glitter + a glare that follows the light), tilted by the pointer. ?shot=1 is the still frame the
+     daemon screenshots at high resolution for /card.png. */
+  :root {
+    --c: #6d5dfc; --a: #22d3ee; --ink: #fff;
+    --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --o: 0.6;
+    --bg: #0d0b14; --fg: #ece9f6; --mut: #9c96b3; --line: #2a2538; --btn: #1b1726;
+  }
+  @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #efedf5; --fg: #17141f; --mut: #6b6580; --line: #d9d4e6; --btn: #fff; } }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; min-height: 100%; }
+  body { background: radial-gradient(1200px 700px at 50% 30%, color-mix(in srgb, var(--c) 18%, var(--bg)), var(--bg)); color: var(--fg);
+    font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 28px 16px 40px; }
+  body.shot { background: transparent; padding: 20px; gap: 0; }
+  body.shot .controls { display: none; }
+  body.shot .card { box-shadow: none; transition: none; }
+
+  .scene { perspective: 1400px; }
+  .card { --w: 420px; width: var(--w); aspect-ratio: 5 / 7; position: relative; border-radius: 22px; transform-style: preserve-3d;
+    transform: rotateY(var(--ry)) rotateX(var(--rx)); transition: transform .5s cubic-bezier(.2,.8,.2,1);
+    box-shadow: 0 30px 60px -20px rgb(0 0 0 / .65), 0 0 0 1px rgb(255 255 255 / .06), 0 0 60px -10px color-mix(in srgb, var(--c) 60%, transparent); }
+  .card.live { transition: transform .08s linear; }
+  @media (max-width: 480px) { .card { --w: calc(100vw - 40px); } }
+
+  /* frame: metallic, in the ot's colours */
+  .frame { position: absolute; inset: 0; border-radius: inherit; padding: 12px; overflow: hidden;
+    background: linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 22%, color-mix(in srgb, var(--a) 80%, #000) 50%, var(--c) 78%, color-mix(in srgb, var(--a) 60%, #fff) 100%); }
+  .card[data-foil="gold"] .frame { background: linear-gradient(135deg, #fff3b0, #d4a017 20%, #8a6100 45%, #f7d774 62%, #b8860b 80%, #fff1a8); }
+  .card[data-foil="cosmos"] .frame { background: linear-gradient(135deg, #2b1b5e, #120a2e 40%, #3b2380 70%, #0b0720); }
+  .face { position: relative; height: 100%; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden;
+    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #15121e), #0f0c17 60%); color: #f4f1ff; }
+
+  header { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px 8px; }
+  .name { font: 800 26px/1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif; letter-spacing: -.01em; text-shadow: 0 2px 0 rgb(0 0 0 / .35); }
+  .lvl { margin-left: auto; font: 700 12px/1 ui-monospace, monospace; color: #fff; opacity: .9; }
+  .lvl b { font-size: 20px; }
+
+  .art { position: relative; margin: 0 12px; flex: 1 1 auto; min-height: 0; border-radius: 8px; overflow: hidden; isolation: isolate;
+    box-shadow: inset 0 0 0 2px rgb(255 255 255 / .25), 0 6px 14px rgb(0 0 0 / .45);
+    background: radial-gradient(120% 90% at 50% 70%, color-mix(in srgb, var(--a) 55%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 40%, #000) 100%); }
+  .rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(255 255 255 / .14) 0 6deg, transparent 6deg 18deg); animation: spin 60s linear infinite; }
+  .shot .rays { animation: none; }
+  @keyframes spin { to { transform: rotate(1turn); } }
+  .dots { position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / .35) 1px, transparent 1.5px); background-size: 14px 14px; mask-image: linear-gradient(transparent, #000 70%); opacity: .5; }
+  .floor { position: absolute; left: 18%; right: 18%; bottom: 7%; height: 9%; border-radius: 50%; background: radial-gradient(rgb(0 0 0 / .45), transparent 70%); }
+  #fig { position: absolute; left: 10%; right: 10%; top: 6%; bottom: 4%; z-index: 1; }
+  #fig canvas { width: 100% !important; height: 100% !important; }
+
+  .type { display: flex; justify-content: space-between; gap: 8px; margin: 8px 12px 0; padding: 5px 10px; border-radius: 999px;
+    background: rgb(255 255 255 / .08); font: 600 11px/1.3 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #e6e1ff; }
+  .type span:last-child { opacity: .7; }
+  .stats { margin: 10px 14px 0; display: grid; gap: 7px; }
+  .stat { display: grid; grid-template-columns: 74px 1fr 30px; align-items: center; gap: 8px; font: 600 12px/1 system-ui, sans-serif; }
+  .bar { height: 7px; border-radius: 9px; background: rgb(255 255 255 / .1); overflow: hidden; }
+  .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c), var(--a)); box-shadow: 0 0 10px var(--a); }
+  .stat em { font-style: normal; text-align: right; font-family: ui-monospace, monospace; }
+  .flavor { margin: 10px 14px 0; padding-top: 8px; font: italic 12px/1.35 Georgia, serif; color: #cfc8ea; border-top: 1px solid rgb(255 255 255 / .12); }
+  footer { margin-top: 4px; display: flex; align-items: center; gap: 6px; padding: 8px 14px 10px; font: 600 10px/1 ui-monospace, monospace; color: #b9b1d8; letter-spacing: .04em; }
+  footer img { width: 14px; height: 14px; }
+  .rar { margin-left: auto; display: flex; align-items: center; gap: 4px; color: #fff; }
+  .rar svg { width: 12px; height: 12px; fill: currentColor; }
+
+  /* ── foil layers ── */
+  .holo, .glitter, .glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
+  .holo {
+    mix-blend-mode: color-dodge; opacity: var(--o); filter: brightness(.55) contrast(1.6) saturate(1.4);
+    background:
+      repeating-linear-gradient(110deg, #ff3b6b 0%, #ffd23b 6%, #3bff9a 12%, #3bd6ff 18%, #a63bff 24%, #ff3b6b 30%),
+      repeating-linear-gradient(-45deg, #0e152e 0%, #8fa3bf 3.8%, #8fa3bf 4.5%, #0e152e 5.2%, #0e152e 10%);
+    background-size: 400% 400%, 300% 300%; background-blend-mode: overlay;
+    background-position: calc(var(--mx) * 1) calc(var(--my) * 1), calc(100% - var(--mx)) calc(100% - var(--my));
+  }
+  /* classic holo: only the art shines */
+  .card[data-foil="holo"] .holo { -webkit-mask: var(--artmask); mask: var(--artmask); }
+  .card[data-foil="gold"] .holo { background: repeating-linear-gradient(115deg, #3a2500 0%, #ffe9a0 5%, #b8860b 9%, #3a2500 14%); background-size: 300% 300%; filter: brightness(.7) contrast(1.4); }
+  .card[data-foil="cosmos"] .holo { background:
+      radial-gradient(circle at var(--mx) var(--my), #ff6be6 0%, transparent 35%),
+      repeating-radial-gradient(circle at 30% 70%, #2b2b8f 0, #8f2bd6 8%, #2bd6c4 16%, #2b2b8f 24%); background-size: 100% 100%, 200% 200%; }
+  .glitter { mix-blend-mode: color-dodge; opacity: calc(var(--o) * .9);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 9 -6.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    background-size: 220px; background-position: var(--mx) var(--my);
+    -webkit-mask: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgb(0 0 0 / .25) 55%, transparent 80%); mask: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgb(0 0 0 / .25) 55%, transparent 80%); }
+  .card[data-foil="none"] .holo, .card[data-foil="none"] .glitter { display: none; }
+  .glare { mix-blend-mode: overlay; background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgb(255 255 255 / .75) 0%, rgb(255 255 255 / .15) 30%, rgb(0 0 0 / .35) 90%); opacity: calc(.4 + var(--o) * .5); }
+
+  .controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; max-width: 520px; }
+  .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
+  .seg button, .btn { font: 600 13px/1 system-ui, sans-serif; color: var(--fg); background: var(--btn); border: 0; padding: 9px 12px; cursor: pointer; }
+  .seg button + button { border-left: 1px solid var(--line); }
+  .seg button[aria-pressed="true"] { background: var(--c); color: #fff; }
+  .btn { border: 1px solid var(--line); border-radius: 10px; }
+  .btn.pri { background: linear-gradient(135deg, var(--c), var(--a)); color: #fff; border: 0; }
+  .btn[disabled] { opacity: .6; cursor: progress; }
+  select.btn { appearance: none; }
+  .hint { width: 100%; text-align: center; color: var(--mut); font-size: 12px; }
+</style>
+</head>
+<body>
+<div class="scene"><div class="card" id="card" data-foil="holo">
+  <div class="frame"><div class="face">
+    <header><span class="name" id="name">…</span><span class="lvl" id="lvl"></span></header>
+    <div class="art" id="art"><div class="rays"></div><div class="dots"></div><div class="floor"></div><div id="fig"></div></div>
+    <div class="type"><span id="role"></span><span id="llm"></span></div>
+    <div class="stats" id="stats"></div>
+    <div class="flavor" id="flavor"></div>
+    <footer><img src="/favicon.svg" alt="" /><span id="serial"></span><span class="rar" id="rar"></span></footer>
+  </div></div>
+  <div class="holo"></div><div class="glitter"></div><div class="glare"></div>
+</div></div>
+
+<div class="controls">
+  <div class="seg" id="foils"></div>
+  <div class="seg" id="dims"><button data-d="2d">2D</button><button data-d="3d">3D</button></div>
+  <select class="btn" id="scale" aria-label="resolution"><option value="3">1320×1800</option><option value="4" selected>1760×2400</option><option value="6">2640×3600</option></select>
+  <button class="btn pri" id="dl"></button>
+  <div class="hint" id="hint"></div>
+</div>
+
+<script type="module">
+  const BOOT = __BOOT__;
+  const $ = (s) => document.querySelector(s);
+  const q = new URLSearchParams(location.search);
+  const shot = q.has('shot');
+  document.body.classList.toggle('shot', shot);
+  const lang = /^(es|pt)/.test(BOOT.lang || '') ? BOOT.lang.slice(0, 2) : 'en';
+  const T = {
+    en: { foils: { holo: 'Holo', prism: 'Prism', cosmos: 'Cosmos', gold: 'Gold', none: 'Plain' }, dl: 'Download PNG', making: 'Rendering…', hint: 'Move the mouse over the card. The PNG is a still frame at high resolution.', stats: ['Energy', 'Wit', 'Charm', 'Chaos'], rar: ['Common', 'Rare', 'Epic', 'Legendary'], lvl: 'LV', fail: 'Could not render' },
+    es: { foils: { holo: 'Holo', prism: 'Prisma', cosmos: 'Cosmos', gold: 'Oro', none: 'Simple' }, dl: 'Descargar PNG', making: 'Renderizando…', hint: 'Pasa el mouse sobre la carta. El PNG es una toma fija en alta resolución.', stats: ['Energía', 'Ingenio', 'Encanto', 'Caos'], rar: ['Común', 'Rara', 'Épica', 'Legendaria'], lvl: 'NV', fail: 'No se pudo renderizar' },
+    pt: { foils: { holo: 'Holo', prism: 'Prisma', cosmos: 'Cosmos', gold: 'Ouro', none: 'Simples' }, dl: 'Baixar PNG', making: 'Renderizando…', hint: 'Passe o mouse sobre a carta. O PNG é um quadro fixo em alta resolução.', stats: ['Energia', 'Engenho', 'Charme', 'Caos'], rar: ['Comum', 'Rara', 'Épica', 'Lendária'], lvl: 'NV', fail: 'Não foi possível renderizar' },
+  }[lang];
+  const api = (p) => fetch(p, { headers: { 'X-7ots-Token': BOOT.token } }).then((r) => r.json());
+
+  // Which ot: ?id= one of the account's, else the one on this computer.
+  let ot = { id: BOOT.otsId || '', identity: BOOT.identity, createdAt: 0 };
+  let state = null;
+  if (q.get('id')) {
+    const acc = await api('/account').catch(() => ({}));
+    const o = (acc.ots || []).find((x) => x.id === q.get('id'));
+    if (o) ot = o;
+    if (acc.current?.otsId === q.get('id')) state = (await api('/state').catch(() => ({}))).state;
+  } else state = (await api('/state').catch(() => ({}))).state;
+  const id = ot.identity || {};
+  const look = id.look || {};
+  const hex = (v, d) => (/^#[0-9a-f]{6}$/i.test(v || '') ? v : d);
+  const C = hex(look.character?.body?.color, hex(look.color, '#6d5dfc'));
+  const A = hex(look.accent, hex(look.character?.cheeks?.color, '#22d3ee'));
+  document.documentElement.style.setProperty('--c', C);
+  document.documentElement.style.setProperty('--a', A);
+
+  // Seeded traits: the same ot always gets the same card.
+  let h = 2166136261;
+  for (const ch of (ot.id || id.name || 'ot') + '|' + (id.name || '')) h = Math.imul(h ^ ch.charCodeAt(0), 16777619);
+  const rnd = () => ((h = Math.imul(h ^ (h >>> 15), 2246822507) ^ Math.imul(h ^ (h >>> 13), 3266489909)), (h >>> 0) / 4294967296);
+  const traits = T.stats.map((n) => [n, 25 + Math.round(rnd() * 74)]);
+  const r = rnd();
+  const rarity = r > 0.94 ? 3 : r > 0.75 ? 2 : r > 0.4 ? 1 : 0;
+
+  $('#name').textContent = id.name || ot.name || 'ot';
+  document.title = `${id.name || 'ot'} · 7ots`;
+  if (state?.level) $('#lvl').innerHTML = `${T.lvl} <b>${state.level}</b>`;
+  $('#role').textContent = id.role || 'ot';
+  const model = String(ot.llm || BOOT.brain || '').split(/[·:]/).pop().trim();
+  $('#llm').textContent = model.length > 24 ? `${model.slice(0, 23)}…` : model;
+  $('#stats').innerHTML = traits.map(([n, v]) => `<div class="stat"><span>${n}</span><div class="bar"><i style="width:${v}%"></i></div><em>${v}</em></div>`).join('');
+  $('#flavor').textContent = id.bio || id.tagline || id.persona?.slice?.(0, 140) || id.description || '';
+  if (!$('#flavor').textContent) $('#flavor').remove();
+  const year = new Date(ot.createdAt || state?.born || Date.now()).getFullYear();
+  $('#serial').textContent = `#${(ot.id || 'local').replace(/^ots_/, '').slice(-6).toUpperCase()} · ${year}`;
+  const star = '<svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7-6.3-3.9-6.3 3.9 1.7-7L2 9.5l7.1-.6z"/></svg>';
+  $('#rar').innerHTML = star.repeat(rarity + 1) + `<span>${T.rar[rarity]}</span>`;
+
+  // Foil: from ?foil=, else by rarity.
+  const FOILS = ['holo', 'prism', 'cosmos', 'gold', 'none'];
+  let foil = FOILS.includes(q.get('foil')) ? q.get('foil') : ['holo', 'holo', 'prism', 'cosmos'][rarity];
+  let dim = q.get('3d') ? '3d' : '2d';
+  const card = $('#card');
+  const art = $('#art');
+  // the classic holo shines only on the art: a mask with the art window cut out of the card
+  const setMask = () => {
+    const c = card.getBoundingClientRect();
+    const a = art.getBoundingClientRect();
+    const [x, y, w, hh] = [a.left - c.left, a.top - c.top, a.width, a.height].map((v) => (v / c.width) * 100);
+    const H = (c.height / c.width) * 100;
+    card.style.setProperty('--artmask', `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 ${H}' preserveAspectRatio='none'><rect x='${x}' y='${y}' width='${w}' height='${hh}' rx='2'/></svg>`)}") 0 0 / 100% 100%`);
+  };
+  const setFoil = (f) => {
+    foil = f;
+    card.dataset.foil = f;
+    $('#foils').innerHTML = FOILS.map((k) => `<button data-f="${k}" aria-pressed="${k === f}">${T.foils[k]}</button>`).join('');
+  };
+  $('#foils').addEventListener('click', (e) => e.target.dataset.f && setFoil(e.target.dataset.f));
+  setFoil(foil);
+  addEventListener('resize', setMask);
+
+  // The ot itself, big.
+  const { createCharacter, loadCharacter3D } = await import('/dist/7ots.esm.js');
+  const spec = look.character || {};
+  let figure = null;
+  async function draw() {
+    figure?.destroy?.();
+    $('#fig').innerHTML = '';
+    figure = null;
+    if (dim === '3d') {
+      try {
+        const m = await loadCharacter3D();
+        figure = m.createCharacter3D($('#fig'), spec, { material: look.material || 'plush', backdrop: false, orbit: false, stage: { key: 'card', zIndex: 1, maxDpr: 4 } });
+        if (figure.fallback) figure = null;
+      } catch {
+        figure = null;
+      }
+    }
+    figure ||= createCharacter($('#fig'), spec, { locale: lang, title: id.name, moodFx: false });
+    figure.mood?.('happy', { fx: false });
+    document.querySelectorAll('#dims button').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.d === dim)));
+  }
+  $('#dims').addEventListener('click', (e) => e.target.dataset.d && e.target.dataset.d !== dim && ((dim = e.target.dataset.d), draw()));
+  await draw();
+  setMask();
+
+  // Light: follows the pointer over the card; on its own it sways gently, like turning it in your hand.
+  const light = (px, py) => {
+    card.style.setProperty('--mx', `${px * 100}%`);
+    card.style.setProperty('--my', `${py * 100}%`);
+    card.style.setProperty('--ry', `${(px - 0.5) * 26}deg`);
+    card.style.setProperty('--rx', `${(0.5 - py) * 26}deg`);
+    card.style.setProperty('--o', String(0.35 + Math.min(1, Math.hypot(px - 0.5, py - 0.5) * 1.6) * 0.65));
+  };
+  // the still frame: lit from the upper right, but flat (a straight card for the PNG)
+  if (shot) light(0.68, 0.3), card.style.setProperty('--rx', '0deg'), card.style.setProperty('--ry', '0deg');
+  else {
+    let hovering = false;
+    card.addEventListener('pointermove', (e) => {
+      const b = card.getBoundingClientRect();
+      hovering = true;
+      card.classList.add('live');
+      light((e.clientX - b.left) / b.width, (e.clientY - b.top) / b.height);
+    });
+    card.addEventListener('pointerleave', () => ((hovering = false), card.classList.remove('live')));
+    const t0 = performance.now();
+    const sway = (t) => {
+      if (!hovering) {
+        const s = (t - t0) / 1000;
+        light(0.5 + Math.sin(s * 0.7) * 0.28, 0.45 + Math.cos(s * 0.5) * 0.2);
+      }
+      requestAnimationFrame(sway);
+    };
+    requestAnimationFrame(sway);
+  }
+
+  // High-res PNG: the daemon screenshots ?shot=1 in headless Chrome (blend modes and 3D included).
+  $('#dl').textContent = T.dl;
+  $('#hint').textContent = T.hint;
+  $('#dl').addEventListener('click', async () => {
+    const b = $('#dl');
+    b.disabled = true;
+    b.textContent = T.making;
+    try {
+      const p = new URLSearchParams({ foil, scale: $('#scale').value });
+      if (q.get('id')) p.set('id', q.get('id'));
+      if (dim === '3d') p.set('3d', '1');
+      const r = await fetch(`/card.png?${p}`, { headers: { 'X-7ots-Token': BOOT.token } });
+      if (!r.ok) throw new Error((await r.json().catch(() => ({}))).error || r.status);
+      const a = Object.assign(document.createElement('a'), { href: URL.createObjectURL(await r.blob()), download: `${(id.name || 'ot').toLowerCase()}-7ots-card.png` });
+      a.click();
+      setTimeout(() => URL.revokeObjectURL(a.href), 5000);
+    } catch (e) {
+      $('#hint').textContent = `${T.fail}: ${e.message}`;
+    } finally {
+      b.disabled = false;
+      b.textContent = T.dl;
+    }
+  });
+  window.__ready = true;
+  // 3D: let it render a while first (it grows in and settles), up to ~10 s on a software GPU
+  const frames = (n, ms) => new Promise((ok) => { const end = performance.now() + ms; const f = () => (--n <= 0 || performance.now() > end ? ok() : requestAnimationFrame(f)); requestAnimationFrame(f); });
+  if (shot && window.__cardReady)
+    document.fonts.ready.then(() => (dim === '3d' ? frames(40, 10000) : null)).then(() => requestAnimationFrame(() => requestAnimationFrame(() => {
+      const b = card.getBoundingClientRect();
+      // the still frame: the 3D render loop stops here (the canvas keeps its last frame), so the
+      // screenshot isn't queued behind frames that take seconds on a software GPU
+      if (dim === '3d') window.requestAnimationFrame = () => 0;
+      window.__cardReady(JSON.stringify({ x: b.left, y: b.top, w: b.width, h: b.height }));
+    })));
+</script>
+</body>
+</html>

package/cli/pet/electron/director.cjs

@@ -0,0 +1,175 @@
+/**
+ * Scenes between ots on the same desktop: when two meet (or now and then) they square off and play a bit
+ * from a famous fight — Rocky, Street Fighter, Dragon Ball vs Matrix, a western duel, Star Wars, a plain
+ * argument that ends in hugs, or the Pulp Fiction twist. The director moves both windows (walkTo/face/fling,
+ * see makeOt in main.cjs) and tells each page what to show: { line }, { gesture }, { effect }, { act, dir }.
+ */
+
+const LINES = {
+  es: {
+    rocky: ['¡Vamos, campeón!', '¡Esto no es nada!', '¡Adriaaanaaa!'],
+    sf: ['¡HADOUKEN!', '¡Aaaay!'],
+    dbz: ['Kaaa… meee… haaa… meee…', '¡HAAAAA!', 'Esquivé las balas… digo, el rayo.'],
+    duel: ['Este escritorio es muy chico para los dos.', '¡Bang!', '…me diste. Era broma 😂'],
+    sw: ['Yo soy tu padre.', '¡Noooooo!', 'Bueno, ¿abrazo?'],
+    fight: ['¡Me quitaste mi pixel!', '¡Era MI rincón!', 'Ya, perdón 💕', 'Yo también…'],
+    twist: ['¿Bailamos?', '¡Twist!'],
+  },
+  en: {
+    rocky: ['Come on, champ!', "Ain't so bad!", 'Adriaaaan!'],
+    sf: ['HADOUKEN!', 'Aaargh!'],
+    dbz: ['Kaaa… meee… haaa… meee…', 'HAAAAA!', 'I dodged bullets… I mean, the beam.'],
+    duel: ["This desktop ain't big enough for the two of us.", 'Bang!', '…you got me. Kidding 😂'],
+    sw: ['I am your father.', 'Nooooo!', 'So… hug?'],
+    fight: ['You took my pixel!', 'That was MY corner!', 'Fine, sorry 💕', 'Me too…'],
+    twist: ['Shall we dance?', 'Twist!'],
+  },
+  pt: {
+    rocky: ['Vamos, campeão!', 'Isso não é nada!', 'Adriaaanaaa!'],
+    sf: ['HADOUKEN!', 'Aaai!'],
+    dbz: ['Kaaa… meee… raaa… meee…', 'HAAAAA!', 'Desviei das balas… digo, do raio.'],
+    duel: ['Esta área de trabalho é pequena demais pra nós dois.', 'Bang!', '…você me pegou. Brincadeira 😂'],
+    sw: ['Eu sou seu pai.', 'Nãããão!', 'Então… abraço?'],
+    fight: ['Você pegou meu pixel!', 'Era o MEU canto!', 'Tá, desculpa 💕', 'Eu também…'],
+    twist: ['Vamos dançar?', 'Twist!'],
+  },
+};
+
+// Each scene: a list of [delay ms since the previous step, (a, b, L) => …]. a is on the left, facing right (+1).
+const SCENES = {
+  rocky: [
+    [0, (a, b) => (a.say({ act: 'guard', dir: 1, ms: 2400 }), b.say({ act: 'guard', dir: -1, ms: 2400 }))],
+    [300, (a, b, L) => a.say({ line: L.rocky[0] })],
+    [1700, (a, b) => (a.say({ act: 'jab', dir: 1, room: 90 }), setTimeout(() => b.say({ act: 'hit', dir: -1 }), 140))],
+    [600, (a, b) => (b.say({ act: 'jab', dir: -1, room: 90 }), setTimeout(() => a.say({ act: 'hit', dir: 1 }), 140))],
+    [600, (a, b) => (a.say({ act: 'jab', dir: 1, room: 90 }), setTimeout(() => b.say({ act: 'hit', dir: -1 }), 140))],
+    [700, (a, b) => (b.say({ act: 'uppercut', dir: -1, room: 90 }), setTimeout(() => (a.say({ act: 'pow', text: 'POW!', ms: 1200 }), a.fling(-260, 60)), 330))],
+    [900, (a) => (a.say({ gesture: 'dizzy' }), a.say({ effect: 'dizzy' }))],
+    [1600, (a, b, L) => (b.say({ gesture: 'celebrate' }), b.say({ line: L.rocky[2] }))],
+    [2600, (a, b, L) => a.say({ line: L.rocky[1] })],
+  ],
+  sf: [
+    [0, (a) => a.say({ act: 'charge', dir: 1, ms: 1800 })],
+    [1500, (a, b, L) => (a.say({ line: L.sf[0] }), a.say({ act: 'hadouken', dir: 1, room: 170 }))],
+    [650, (a, b, L) => (b.say({ act: 'hit', dir: -1 }), b.say({ effect: 'dizzy' }), b.fling(220, 50), b.say({ line: L.sf[1] }))],
+    [1800, (a) => a.say({ gesture: 'thumbsup' })],
+  ],
+  dbz: [
+    [0, (a, b, L) => (a.say({ line: L.dbz[0], ms: 2600 }), a.say({ act: 'charge', dir: 1, ms: 2600 }))],
+    [2400, (a, b, L) => (a.say({ line: L.dbz[1] }), a.say({ act: 'beam', dir: 1, room: 170, ms: 3400 }), b.say({ act: 'lean', dir: -1, room: 170, ms: 3400 }))],
+    [3400, (a, b, L) => (b.say({ line: L.dbz[2] }), b.say({ effect: 'sparkles' }))],
+    [2200, (a) => (a.say({ gesture: 'shrug' }), a.say({ effect: 'sweat' }))],
+  ],
+  matrix: [
+    [0, (a) => a.say({ act: 'bang', dir: 1, room: 170 })],
+    [120, (a, b) => b.say({ act: 'lean', dir: -1, room: 170, ms: 3400 })],
+    [3300, (a, b) => (b.say({ effect: 'sparkles' }), a.say({ effect: 'exclaim' }), a.say({ gesture: 'surprise' }))],
+  ],
+  duel: [
+    [0, (a, b, L) => (a.say({ line: L.duel[0] }), a.walkTo(a.pos().x - 80, undefined, 60), b.walkTo(b.pos().x + 80, undefined, 60), a.face(-1), b.face(1))],
+    [2400, (a, b) => (a.face(1), b.face(-1))],
+    [900, (a, b) => (a.say({ effect: 'sweat' }), b.say({ effect: 'sweat' }))],
+    [1200, (a, b, L) => (a.say({ act: 'bang', dir: 1, room: 170 }), a.say({ line: L.duel[1] }))],
+    [200, (a, b) => b.say({ act: 'fall', dir: -1, ms: 2800 })],
+    [2700, (a, b, L) => (b.say({ line: L.duel[2] }), b.say({ gesture: 'laugh' }))],
+    [800, (a) => a.say({ gesture: 'laugh' })],
+  ],
+  sw: [
+    [0, (a, b) => (a.say({ act: 'saber', dir: 1, room: 70, color: '#ff3b3b', ms: 2600 }), b.say({ act: 'saber', dir: -1, room: 70, color: '#44a8ff', ms: 2600 }))],
+    [2500, (a, b, L) => a.say({ line: L.sw[0] })],
+    [1800, (a, b, L) => (b.say({ line: L.sw[1] }), b.say({ gesture: 'shake' }), b.say({ effect: 'tears' }))],
+    [2400, (a, b, L) => (a.say({ line: L.sw[2] }), a.say({ effect: 'hearts' }))],
+  ],
+  fight: [
+    [0, (a, b, L) => (a.say({ line: L.fight[0] }), a.say({ gesture: 'stomp' }), a.say({ effect: 'anger' }))],
+    [1800, (a, b, L) => (b.say({ line: L.fight[1] }), b.say({ effect: 'steam' }), b.say({ act: 'shove', dir: -1, room: 60 }))],
+    [380, (a) => (a.say({ act: 'hit', dir: 1 }), a.fling(-120, 18, 420))],
+    [1200, (a, b) => (a.say({ act: 'shove', dir: 1, room: 60 }), setTimeout(() => b.fling(120, 18, 420), 150))],
+    [1400, (a, b) => (a.say({ effect: 'question' }), b.say({ effect: 'question' }))],
+    [1300, (a, b, L) => (b.say({ line: L.fight[2] }), b.say({ effect: 'hearts' }))],
+    [1600, (a, b, L) => (a.say({ line: L.fight[3] }), a.say({ effect: 'hearts' }), a.walkTo(a.pos().x + 50), b.walkTo(b.pos().x - 50))],
+  ],
+  twist: [
+    [0, (a, b, L) => (a.say({ line: L.twist[0] }), a.say({ gesture: 'bow' }))],
+    [1600, (a, b, L) => (b.say({ line: L.twist[1] }), a.say({ act: 'twist', ms: 3600 }), b.say({ act: 'twist', ms: 3600 }), a.say({ effect: 'notes' }), b.say({ effect: 'notes' }))],
+    [3500, (a, b) => (a.say({ gesture: 'celebrate' }), b.say({ gesture: 'celebrate' }), a.say({ effect: 'confetti' }))],
+  ],
+};
+
+const GAP = 170; // how far apart they stand (their windows grow for what flies between them)
+
+exports.createDirector = ({ ots, lang = 'en' }) => {
+  const L = LINES[lang] || LINES.en;
+  let running = false;
+  const SOON = process.env.SEVENOTS_PET_SCENES_SOON === '1'; // testing: one scene after another
+  let nextAt = Date.now() + (SOON ? 4000 : 25000);
+  let last = '';
+  const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+  // waits, but gives up as soon as the mouse is on either of them (to click or drag it): true = interrupted
+  const pause = async (ms, ...pair) => {
+    for (const end = Date.now() + ms; Date.now() < end; await wait(Math.min(80, end - Date.now()))) if (pair.some((o) => o.interrupted())) return true;
+    return pair.some((o) => o.interrupted());
+  };
+
+  async function play(x, y) {
+    running = true;
+    // they take turns: a line from one ends the other's (one speech bubble at a time)
+    const turns = (o, other) => ({ ...o, say: (m) => (m?.line && other.say({ hush: true }), o.say(m)) });
+    [x, y] = [turns(x, y), turns(y, x)];
+    let [a, b] = x.pos().x <= y.pos().x ? [x, y] : [y, x];
+    for (const o of [x, y]) o.hold({ w: GAP * 2 + 120, h: 400 }); // room for beams, flings and lines, no resizing mid-scene
+    try {
+      // meet in the middle, GAP apart, then face each other
+      const { minX, maxX } = a.bounds();
+      const mid = Math.max(minX + GAP / 2, Math.min(maxX - GAP / 2, (a.pos().x + b.pos().x) / 2));
+      const fy = (b.host ? b : a).pos().y; // at the host's height (it may live up the screen)
+      a.walkTo(mid - GAP / 2, fy, 150);
+      b.walkTo(mid + GAP / 2, fy, 150);
+      for (let t = 0; t < 120 && !(a.arrivedAt() && b.arrivedAt()); t++) {
+        if (a.interrupted() || b.interrupted()) return;
+        await wait(100);
+      }
+      a.face(1);
+      b.face(-1);
+      if (await pause(500, a, b)) return;
+      const names = Object.keys(SCENES).filter((n) => n !== last);
+      const name = process.env.SEVENOTS_PET_SCENE || names[Math.floor(Math.random() * names.length)];
+      last = name;
+      console.log(`[7ots director] ${name}`);
+      // half the time the right one starts (scenes are written for the left one)
+      if (Math.random() < 0.5 && !['duel', 'fight'].includes(name)) [a, b] = [mirror(b), mirror(a)];
+      for (const [ms, step] of SCENES[name]) {
+        if (await pause(ms, a, b)) return;
+        step(a, b, L);
+      }
+      await pause(2500, a, b);
+    } finally {
+      for (const o of [x, y]) (o.hold(null), o.inScene() && o.release());
+      running = false;
+      nextAt = Date.now() + (SOON ? 3000 : 90000 + Math.random() * 120000);
+    }
+  }
+
+  // the same ot with directions flipped, so a scene can be played from the other side
+  function mirror(o) {
+    const flip = (m) => (m && typeof m.dir === 'number' ? { ...m, dir: -m.dir } : m);
+    return { ...o, say: (m) => o.say(flip(m)), face: (d) => o.face(-d), fling: (vx, ...r) => o.fling(-vx, ...r), walkTo: (px, ...r) => o.walkTo(o.pos().x - (px - o.pos().x), ...r) };
+  }
+
+  setInterval(() => {
+    if (running) return;
+    const free = [...ots.values()].filter((o) => o.free());
+    if (free.length < 2) return;
+    // two that wandered close start right away; otherwise now and then
+    let pair = null;
+    for (let i = 0; i < free.length && !pair; i++)
+      for (let j = i + 1; j < free.length && !pair; j++) if (Math.abs(free[i].pos().x - free[j].pos().x) < 220 && Date.now() > nextAt - 30000) pair = [free[i], free[j]];
+    if (!pair && Date.now() > nextAt) {
+      const s = free.sort(() => Math.random() - 0.5);
+      pair = [s[0], s[1]];
+    }
+    if (pair) play(...pair).catch((e) => console.log('[7ots director]', e.message));
+  }, 1000);
+
+  return { play: (i, j) => play(ots.get(i), ots.get(j)) };
+};