shadok-ai 0.8.21 → 0.8.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadok-ai",
-  "version": "0.8.21",
+  "version": "0.8.23",
   "main": "dist/session.js",
   "scripts": {
     "test": "node --import tsx --test test/*.ts context/*/test/*.test.mjs",

package/public/index.html

@@ -11,7 +11,7 @@
 <title>shadok-ai — cockpit</title>
 <!-- The idle favicon: a resting Shadok. paint() swaps in the pumping / "!" / "?"
      variants once the JS runs; this is only the pre-script icon. -->
-<link rel="icon" id="favicon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20rx%3D%227%22%20fill%3D%22%2314161d%22%2F%3E%3Cg%20fill%3D%22%23f0a848%22%3E%3Crect%20x%3D%2211.4%22%20y%3D%2221%22%20width%3D%221.7%22%20height%3D%229%22%20rx%3D%220.85%22%2F%3E%3Crect%20x%3D%2217.4%22%20y%3D%2221%22%20width%3D%221.7%22%20height%3D%229%22%20rx%3D%220.85%22%2F%3E%3Crect%20x%3D%229.2%22%20y%3D%2228.7%22%20width%3D%224.6%22%20height%3D%221.7%22%20rx%3D%220.85%22%2F%3E%3Crect%20x%3D%2216.4%22%20y%3D%2228.7%22%20width%3D%224.6%22%20height%3D%221.7%22%20rx%3D%220.85%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23f0a848%22%3E%3Cellipse%20cx%3D%2215%22%20cy%3D%2216.8%22%20rx%3D%227.4%22%20ry%3D%227.6%22%2F%3E%3Cg%20transform%3D%22rotate(6%2019.6%2015.6)%22%3E%3Crect%20x%3D%2218.6%22%20y%3D%2215%22%20width%3D%222.1%22%20height%3D%228.4%22%20rx%3D%221.05%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M14.6%2010%20C%2014.6%206.6%2C%2016.6%204.8%2C%2018.9%204.8%22%20stroke%3D%22%23f0a848%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2219.5%22%20cy%3D%224.7%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M22.1%203.5%20L26.4%205%20L22.1%206.5%20Z%22%2F%3E%3Ccircle%20cx%3D%2220.2%22%20cy%3D%224.2%22%20r%3D%220.95%22%20fill%3D%22%2314161d%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E">
+<link rel="icon" id="favicon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20rx%3D%227%22%20fill%3D%22%2314161d%22%2F%3E%3Cg%20fill%3D%22%23f0a848%22%3E%3Crect%20x%3D%2212%22%20y%3D%2224%22%20width%3D%221.9%22%20height%3D%227%22%20rx%3D%220.95%22%2F%3E%3Crect%20x%3D%2216.1%22%20y%3D%2224%22%20width%3D%221.9%22%20height%3D%227%22%20rx%3D%220.95%22%2F%3E%3Crect%20x%3D%229.8%22%20y%3D%2229.8%22%20width%3D%224.8%22%20height%3D%221.9%22%20rx%3D%220.95%22%2F%3E%3Crect%20x%3D%2215.4%22%20y%3D%2229.8%22%20width%3D%224.8%22%20height%3D%221.9%22%20rx%3D%220.95%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cellipse%20cx%3D%227.7%22%20cy%3D%2219.5%22%20rx%3D%222.1%22%20ry%3D%223.5%22%20fill%3D%22%23f0a848%22%20transform%3D%22rotate(-16%207.7%2019.5)%22%2F%3E%3Cellipse%20cx%3D%2222.3%22%20cy%3D%2219.5%22%20rx%3D%222.1%22%20ry%3D%223.5%22%20fill%3D%22%23f0a848%22%20transform%3D%22rotate(16%2022.3%2019.5)%22%2F%3E%3Cellipse%20cx%3D%2215%22%20cy%3D%2219.5%22%20rx%3D%227.8%22%20ry%3D%228.2%22%20fill%3D%22%23f0a848%22%2F%3E%3Crect%20x%3D%2213.4%22%20y%3D%228%22%20width%3D%223.2%22%20height%3D%225%22%20rx%3D%221.6%22%20fill%3D%22%23f0a848%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%226.2%22%20r%3D%224.3%22%20fill%3D%22%23f0a848%22%2F%3E%3Cpath%20d%3D%22M13.6%209.8%20L16.4%209.8%20L15%2011.8%20Z%22%20fill%3D%22%23f0a848%22%2F%3E%3Ccircle%20cx%3D%2213.1%22%20cy%3D%226%22%20r%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2216.9%22%20cy%3D%226%22%20r%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2213.1%22%20cy%3D%226.1%22%20r%3D%221.1%22%20fill%3D%22%2314161d%22%2F%3E%3Ccircle%20cx%3D%2216.9%22%20cy%3D%226.1%22%20r%3D%221.1%22%20fill%3D%22%2314161d%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E">
 <style>
   :root {
     --bg: #14161d;
@@ -1019,17 +1019,15 @@
   /* The pumping Shadok: `color` feeds its `currentColor` fill so it follows the
      palette. The body bobs and the arm swings — the pump — on the same beat. */
   #thinking .tw-shadok { display: inline-flex; color: var(--amber); }
-  #thinking .tw-shadok svg { width: 20px; height: 20px; overflow: visible; }
-  /* Body bobs with translate (no transform-origin needed — that unit is a
-     cross-browser trap on SVG). The arm swings from its own top via fill-box, so
-     it reads as working a pump handle. */
-  #thinking .tw-shadok .sh-body { animation: tw-pump 0.7s ease-in-out infinite; }
-  #thinking .tw-shadok .sh-arm { animation: tw-arm 0.7s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
-  @keyframes tw-pump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.5px); } }
-  @keyframes tw-arm { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(28deg); } }
+  #thinking .tw-shadok svg { width: 22px; height: 22px; overflow: visible; }
+  /* The whole Shadok (body + arm + handle) bobs with translate — no
+     transform-origin, which is a cross-browser trap on SVG — while the pump rod
+     and legs stay planted, so the handle strokes up and down the rod. */
+  #thinking .tw-shadok .sh-bob { animation: tw-bob 0.55s ease-in-out infinite; }
+  @keyframes tw-bob { 0%, 100% { transform: translateY(-1.8px); } 50% { transform: translateY(2.2px); } }
   @media (prefers-reduced-motion: reduce) {
     #thinking .tw-text { animation: none; color: var(--phosphor); -webkit-text-fill-color: currentColor; }
-    #thinking .tw-shadok .sh-body, #thinking .tw-shadok .sh-arm { animation: none; }
+    #thinking .tw-shadok .sh-bob { animation: none; }
   }
 
   /* Composer */
@@ -3167,34 +3165,52 @@
     const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
     return v || fallback;
   }
-  /** The Shadok itself — the cockpit's mascot, which famously PUMPS. One drawing
-   *  serves every use: the favicon states here and the in-page "pumping"
-   *  indicator. `dx` shifts it left to clear room for a "!" / "?"; `bob`/`armRot`
-   *  pose a single frame of the pump (the favicon animates by re-generating with
-   *  new values, like the old spinner did); `anim` instead tags the body and arm
-   *  groups so CSS can drive them (used only in the DOM indicator, never a data
-   *  URI — CSS animation inside a favicon is unreliable). Legs stay planted. */
-  function shadokInner(fill, { dx = 0, bob = 0, armRot = 6, anim = false } = {}) {
+  /** The Shadok itself — the cockpit's mascot, which famously PUMPS. Drawn
+   *  FRONT-ON: a plump round body, a short neck, a round head with two big googly
+   *  eyes (their signature — a side profile with a long beak read as a dinosaur),
+   *  a tiny beak, two stub wings, two long legs. One drawing serves every use.
+   *  `bob` poses one frame of the pump (the favicon animates by re-generating);
+   *  `anim` instead tags the bobbing group so CSS drives it (the DOM indicator
+   *  only — CSS animation inside a favicon data URI is unreliable). `pump` adds a
+   *  FIXED rod on the right the Shadok works with its wing; that steady reference,
+   *  with the planted legs, is what makes the bob read at favicon size. `sym`
+   *  stamps a bold "!" / "?" over the belly, outlined in the ground colour so the
+   *  accent-on-accent "?" still reads (the eyes stay clear above it). Legs (and,
+   *  pumping, the rod) stay planted; the body/head/wings bob. The Shadok shifts a
+   *  little left when pumping, to seat the rod on its right. Eyes are always
+   *  white + dark, never the accent, so they read on any `fill`. */
+  function shadokInner(fill, { bob = 0, pump = false, anim = false, sym = null, symColor } = {}) {
     const base = themeColor("--bg", "#14161d");
-    const bodyCls = anim ? ' class="sh-body"' : "";
-    const armCls = anim ? ' class="sh-arm"' : "";
-    const bodyTf = anim ? "" : ` transform="translate(0 ${bob})"`;
-    const armTf = anim ? "" : ` transform="rotate(${armRot} 19.6 15.6)"`;
+    const hx = pump ? 13.6 : 15; // body/head centre X
+    const hy = 6.2; // head centre Y
+    const bobCls = anim ? ' class="sh-bob"' : "";
+    const bobTf = anim ? "" : ` transform="translate(0 ${bob})"`;
+    // The right wing rests low, or — pumping — angles up to work the rod's handle.
+    const rWing = pump
+      ? `<ellipse cx="${hx + 7.6}" cy="17.8" rx="2.1" ry="3.4" fill="${fill}" transform="rotate(28 ${hx + 7.6} 17.8)"/>`
+      : `<ellipse cx="${hx + 7.3}" cy="19.5" rx="2.1" ry="3.5" fill="${fill}" transform="rotate(16 ${hx + 7.3} 19.5)"/>`;
+    const rod = pump ? `<rect x="23.4" y="15.5" width="1.5" height="13.7" rx="0.6" fill="${fill}"/>` : "";
+    const glyph = sym
+      ? `<text x="${hx}" y="22" font-family="monospace" font-size="15.5" font-weight="800" fill="${symColor || fill}" stroke="${base}" stroke-width="2.6" paint-order="stroke" text-anchor="middle">${sym}</text>`
+      : "";
     return (
-      `<g transform="translate(${dx} 0)">` +
+      rod +
       // legs + feet (planted, not part of the bob)
       `<g fill="${fill}">` +
-      `<rect x="11.4" y="21" width="1.7" height="9" rx="0.85"/><rect x="17.4" y="21" width="1.7" height="9" rx="0.85"/>` +
-      `<rect x="9.2" y="28.7" width="4.6" height="1.7" rx="0.85"/><rect x="16.4" y="28.7" width="4.6" height="1.7" rx="0.85"/>` +
+      `<rect x="${hx - 3}" y="24" width="1.9" height="7" rx="0.95"/><rect x="${hx + 1.1}" y="24" width="1.9" height="7" rx="0.95"/>` +
+      `<rect x="${hx - 5.2}" y="29.8" width="4.8" height="1.9" rx="0.95"/><rect x="${hx + 0.4}" y="29.8" width="4.8" height="1.9" rx="0.95"/>` +
+      `</g>` +
+      // wings + body + neck + head + beak + two eyes — all bob together
+      `<g${bobCls}${bobTf}>` +
+      `<ellipse cx="${hx - 7.3}" cy="19.5" rx="2.1" ry="3.5" fill="${fill}" transform="rotate(-16 ${hx - 7.3} 19.5)"/>${rWing}` +
+      `<ellipse cx="${hx}" cy="19.5" rx="7.8" ry="8.2" fill="${fill}"/>` +
+      `<rect x="${hx - 1.6}" y="8" width="3.2" height="5" rx="1.6" fill="${fill}"/>` +
+      `<circle cx="${hx}" cy="${hy}" r="4.3" fill="${fill}"/>` +
+      `<path d="M${hx - 1.4} ${hy + 3.6} L${hx + 1.4} ${hy + 3.6} L${hx} ${hy + 5.6} Z" fill="${fill}"/>` +
+      `<circle cx="${hx - 1.9}" cy="${hy - 0.2}" r="2" fill="#fff"/><circle cx="${hx + 1.9}" cy="${hy - 0.2}" r="2" fill="#fff"/>` +
+      `<circle cx="${hx - 1.9}" cy="${hy - 0.1}" r="1.1" fill="${base}"/><circle cx="${hx + 1.9}" cy="${hy - 0.1}" r="1.1" fill="${base}"/>` +
       `</g>` +
-      // body + pumping arm + long neck + head + beak + eye
-      `<g${bodyCls} fill="${fill}"${bodyTf}>` +
-      `<ellipse cx="15" cy="16.8" rx="7.4" ry="7.6"/>` +
-      `<g${armCls}${armTf}><rect x="18.6" y="15" width="2.1" height="8.4" rx="1.05"/></g>` +
-      `<path d="M14.6 10 C 14.6 6.6, 16.6 4.8, 18.9 4.8" stroke="${fill}" stroke-width="3" fill="none" stroke-linecap="round"/>` +
-      `<circle cx="19.5" cy="4.7" r="3"/><path d="M22.1 3.5 L26.4 5 L22.1 6.5 Z"/>` +
-      `<circle cx="20.2" cy="4.2" r="0.95" fill="${base}"/>` +
-      `</g></g>`
+      glyph
     );
   }
   function faviconWrap(inner) {
@@ -3207,27 +3223,21 @@
       )
     );
   }
-  /** The favicon: an accent Shadok on the dark ground. A waiting state adds a
-   *  bold "!" (something to answer) or "?" (something to read) in its colour, and
-   *  the Shadok slides left to make room — the coloured glyph is what the user
-   *  asked to distinguish the two. No symbol → the idle Shadok. */
+  /** The favicon: an accent Shadok on the dark ground. A waiting state stamps a
+   *  bold "!" (something to answer) or "?" (something to read) OVER it, in its
+   *  colour. No symbol → the idle Shadok. */
   function faviconSVG(symbol, symColor) {
     const accent = themeColor("--amber", "#f0a848");
-    const shadok = shadokInner(accent, symbol ? { dx: -3.6 } : {});
-    const sym = symbol
-      ? `<text x="25.8" y="13" font-family="monospace" font-size="15" font-weight="800" fill="${symColor || accent}" text-anchor="middle">${symbol}</text>`
-      : "";
-    return faviconWrap(shadok + sym);
+    return faviconWrap(shadokInner(accent, symbol ? { sym: symbol, symColor } : {}));
   }
-  /** The "working" favicon: the Shadok pumping. `phase` (0..PUMP_FRAMES-1) rides
-   *  a cycle — the body bobs and the arm swings, re-generated each tick. */
+  /** The "working" favicon: the Shadok pumping. `phase` (0..PUMP_FRAMES-1) rides a
+   *  cycle; the whole Shadok heaves up and down against the fixed rod. */
   const PUMP_FRAMES = 8;
   function faviconPumpingSVG(phase) {
     const accent = themeColor("--amber", "#f0a848");
     const p = (Math.sin((phase / PUMP_FRAMES) * 2 * Math.PI - Math.PI / 2) + 1) / 2; // 0..1..0
-    const bob = +(p * 1.8).toFixed(2);
-    const armRot = Math.round(-8 + p * 32); // -8 (up) .. +24 (down)
-    return faviconWrap(shadokInner(accent, { bob, armRot }));
+    const bob = +(-2 + p * 4.4).toFixed(2); // -2 (up) .. +2.4 (down): a big, visible stroke
+    return faviconWrap(shadokInner(accent, { bob, pump: true }));
   }
   /** What each channel is asking for, as the pure module wants it. */
   function attentionInput() {
@@ -3299,7 +3309,7 @@
     const twShadok = document.querySelector("#thinking .tw-shadok");
     if (twShadok)
       twShadok.innerHTML =
-        `<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">${shadokInner("currentColor", { anim: true })}</svg>`;
+        `<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">${shadokInner("currentColor", { pump: true, anim: true })}</svg>`;
   }
   // Coming back must stop the blink at once, not at the next tick. Both signals
   // matter: switching tabs fires visibilitychange, switching application only