shadok-ai 0.8.17 → 0.8.19

package/package.json

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

package/public/index.html

@@ -9,7 +9,9 @@
      fields (see the coarse-pointer query) fix it at the source instead. -->
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <title>shadok-ai — cockpit</title>
-<link rel="icon" id="favicon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%2314161d'/%3E%3Ctext x='16' y='25' font-family='monospace' font-size='26' font-weight='700' fill='%23f0a848' text-anchor='middle'%3E%E2%80%BA%3C/text%3E%3C/svg%3E">
+<!-- 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">
 <style>
   :root {
     --bg: #14161d;
@@ -679,6 +681,12 @@
   .prof-drift { margin-left: 8px; font-size: 11px; color: var(--amber); }
   /* À qui ce secret est injecté. Discret : c'est une information de contexte,
      pas une alerte — contrairement à sec-orphan juste en dessous. */
+  /* Le pont ESM n'a jamais chargé : le dire plutôt que d'afficher un écran
+     amputé sans explication. */
+  .bridge-dead {
+    position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 200;
+    background: #e2564a; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 13px;
+  }
   .sec-users { margin-left: 8px; font-size: 11px; color: var(--text-dim); }
   .sec-orphan { margin-left: 8px; font-size: 11px; color: var(--amber); font-family: var(--sans, inherit); }
   /* Profile picker for a running agent (the tab's context menu). */
@@ -999,7 +1007,7 @@
   .freetext-row input { flex: 1; }
   #thinking { display: none; align-self: flex-start; color: var(--text-dim); font-family: var(--mono); font-size: 12.5px; padding: 0 22px 6px; }
   #thinking.visible { display: flex; align-items: center; gap: 6px; }
-  /* Shimmering text (an amber sweep) + three bouncing dots. */
+  /* Shimmering text (an amber sweep) + a little Shadok pumping alongside. */
   #thinking .tw-text {
     background: linear-gradient(90deg, var(--text-dim) 30%, var(--phosphor) 50%, var(--text-dim) 70%);
     background-size: 220% 100%;
@@ -1008,17 +1016,20 @@
     animation: tw-shimmer 1.9s linear infinite;
   }
   @keyframes tw-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
-  #thinking .tw-dots { display: inline-flex; align-items: flex-end; gap: 3px; }
-  #thinking .tw-dots i {
-    width: 3px; height: 3px; border-radius: 50%; background: var(--amber);
-    opacity: 0.3; animation: tw-dot 1.2s ease-in-out infinite;
-  }
-  #thinking .tw-dots i:nth-child(2) { animation-delay: 0.18s; }
-  #thinking .tw-dots i:nth-child(3) { animation-delay: 0.36s; }
-  @keyframes tw-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
+  /* 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); } }
   @media (prefers-reduced-motion: reduce) {
     #thinking .tw-text { animation: none; color: var(--phosphor); -webkit-text-fill-color: currentColor; }
-    #thinking .tw-dots i { animation: none; opacity: 0.6; }
+    #thinking .tw-shadok .sh-body, #thinking .tw-shadok .sh-arm { animation: none; }
   }
 
   /* Composer */
@@ -1894,7 +1905,9 @@
     </div>
 
     <div id="transcripts"></div>
-    <div id="thinking"><span class="tw-text">Shadok is working</span><span class="tw-dots"><i></i><i></i><i></i></span></div>
+    <!-- The Shadok is injected into .tw-shadok by the script (one drawing shared
+         with the favicon, `shadokInner`); it pumps via CSS. -->
+    <div id="thinking"><span class="tw-text">Shadok is pumping</span><span class="tw-shadok" aria-hidden="true"></span></div>
 
     <form id="composer" hidden>
       <textarea id="promptInput" rows="1"
@@ -1985,8 +1998,71 @@
   window.arcSegments = arcSegments;
   window.dialTitle = dialTitle;
   window.SWEEP_DEG = SWEEP_DEG;
+  // Les bouchons du script classique sont maintenant remplacés par les vraies
+  // fonctions : tout ce qui a pu être peint entre-temps est incomplet.
+  window.dispatchEvent(new Event("shadok-bridge-ready"));
 </script>
 <script nonce="__CSP_NONCE__">
+  // ── Bouchons du pont ESM (invariant 10) ─────────────────────────────────
+  // Le bloc module ci-dessus est DIFFÉRÉ : il s'exécute après le parsing,
+  // alors que ce script-ci tourne PENDANT et câble déjà les boutons.
+  // Un clic dans cet intervalle appelait un window.<fn> inexistant — c'est
+  // ainsi que `profileBadges` a levé sur un clic Secrets, à cinq lignes d'un
+  // appel voisin correctement gardé. Garder chaque site d'appel était un
+  // combat perdu : le suivant oubliait. Un bouchon neutre par nom, remplacé à
+  // l'arrivée du module, rend tous les sites sûrs par construction.
+  // test/esm-bridge.test.ts verrouille la correspondance nom ↔ bouchon.
+  const BRIDGE_STUBS = {
+    profileBlurb: () => "",
+    profileBadges: () => [],
+    defaultAgentName: (_p, cwd) => String(cwd ?? "").split("/").filter(Boolean).pop() || "agent",
+    hasReadonlyPreset: () => false,
+    applyReadonlyPreset: (deny) => deny,
+    isManagedProfile: () => false,
+    profileSaveBody: (form) => ({ ...form }),
+    secretUsers: () => [],
+    extractLiveText: () => "",
+    livePreviewDecision: () => null,
+    echoAuthor: () => "",
+    notifyState: () => ({ color: null, badge: "", blink: false }),
+    dialPos: () => 0,
+    dialColor: () => "",
+    arcSegments: () => [],
+    dialTitle: () => "",
+    bubblePlacement: () => null,
+    unionRect: () => null,
+    visibleSteps: (steps) => steps ?? [],
+  };
+  for (const [name, stub] of Object.entries(BRIDGE_STUBS)) {
+    if (typeof window[name] !== "function") { stub.__stub = true; window[name] = stub; }
+  }
+  // Un bouchon empêche le plantage, il ne remplace pas la fonction : si le
+  // module n'arrive JAMAIS (un des six fichiers en échec, une coupure), l'écran
+  // resterait silencieusement amputé — pas de badges, pas d'aperçu en direct,
+  // pas de notifications. Une dégradation muette est pire que l'erreur qu'elle
+  // masque : on le dit.
+  window.addEventListener("load", () => setTimeout(() => {
+    const dead = Object.keys(BRIDGE_STUBS).filter((n) => window[n] && window[n].__stub);
+    if (!dead.length) return;
+    console.error("shadok-ai: le pont ESM n'a pas chargé — " + dead.join(", "));
+    const bar = document.createElement("div");
+    bar.className = "bridge-dead";
+    bar.textContent = "⚠ This page did not load fully — some panels will look empty. Reload it.";
+    document.body.appendChild(bar);
+  }, 3000));
+  // Un écran peint pendant que les bouchons étaient en place est incomplet
+  // (une carte sans badges, une jauge à plat). Le module signale son arrivée :
+  // on repeint ce qui est à l'écran, plutôt que de laisser un rendu dégradé.
+  window.addEventListener("shadok-bridge-ready", () => {
+    try {
+      if (typeof renderProfileGrid === "function" && $("profileGrid")) renderProfileGrid(false);
+      if (typeof renderProfilesList === "function" && !$("profilesOverlay").hidden) renderProfilesList();
+      if (typeof renderSecrets === "function" && !$("secretsOverlay").hidden) renderSecrets();
+    } catch {
+      /* une repeinte ratée ne doit pas casser le chargement */
+    }
+  });
+
   const $ = (id) => document.getElementById(id);
   const tabbar = $("tabbar"), newTabBtn = $("newTab"), newGroupBtn = $("newGroup");
   const ungroupedEl = $("ungrouped"), groupsEl = $("groups");
@@ -3091,33 +3167,67 @@
     const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
     return v || fallback;
   }
-  /** SVG data-URI favicon: the base mark, plus a coloured corner pip if given. */
-  /** The indicator fills the WHOLE favicon: at rest, a dark background + an
-   *  accent chevron; for a state (red = to do, amber = to read) the whole square
-   *  takes the colour, dark chevron on top. Far more visible than a small pip. */
-  function faviconSVG(bg) {
+  /** 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 } = {}) {
     const base = themeColor("--bg", "#14161d");
-    const accent = themeColor("--amber", "#f0a848");
-    const svg =
-      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">` +
-      `<rect width="32" height="32" rx="7" fill="${bg || base}"/>` +
-      `<text x="16" y="25" font-family="monospace" font-size="26" font-weight="700" fill="${bg ? base : accent}" text-anchor="middle">›</text>` +
-      `</svg>`;
-    return "data:image/svg+xml," + encodeURIComponent(svg);
-  }
-  /** The "working" favicon: one BIG centred spinner filling the favicon (a faint
-   *  track + a rotating accent arc). */
-  function faviconWorkingSVG(angle) {
+    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)"`;
+    return (
+      `<g transform="translate(${dx} 0)">` +
+      // 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"/>` +
+      `</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>`
+    );
+  }
+  function faviconWrap(inner) {
     const base = themeColor("--bg", "#14161d");
+    return (
+      "data:image/svg+xml," +
+      encodeURIComponent(
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">` +
+          `<rect width="32" height="32" rx="7" fill="${base}"/>${inner}</svg>`,
+      )
+    );
+  }
+  /** 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. */
+  function faviconSVG(symbol, symColor) {
     const accent = themeColor("--amber", "#f0a848");
-    const track = accent + "38"; // ~0.22 alpha on a 6-digit-hex accent
-    const svg =
-      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">` +
-      `<rect width="32" height="32" rx="7" fill="${base}"/>` +
-      `<circle cx="16" cy="16" r="11" fill="none" stroke="${track}" stroke-width="4"/>` +
-      `<g transform="rotate(${angle} 16 16)"><circle cx="16" cy="16" r="11" fill="none" stroke="${accent}" stroke-width="4" stroke-linecap="round" stroke-dasharray="34 100"/></g>` +
-      `</svg>`;
-    return "data:image/svg+xml," + encodeURIComponent(svg);
+    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);
+  }
+  /** 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. */
+  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 }));
   }
   /** What each channel is asking for, as the pure module wants it. */
   function attentionInput() {
@@ -3133,8 +3243,8 @@
   // costs no timer at all.
   let blinkTimer = null;
   let blinkPhase = 0;
-  let workTimer = null;   // animates the "working" favicon (spinner)
-  let workAngle = 0;
+  let workTimer = null;   // animates the "working" favicon (the pumping Shadok)
+  let workPhase = 0;
   function stopWork() { if (workTimer) { clearInterval(workTimer); workTimer = null; } }
   function paint() {
     // The ESM bridge lands after the document is parsed (gotcha #10): until it
@@ -3154,20 +3264,24 @@
       phase: blinkPhase,
     });
     document.title = s.badge + titleBase;
-    // "working" = animated favicon (spinner). The module only returns that mode
+    // "working" = the animated pumping Shadok. The module only returns that mode
     // when NOTHING of higher priority (blocked / unread) is waiting — priority is
     // therefore handled upstream: a waiting agent always beats a busy one.
     if (s.mode === "working") {
       if (blinkTimer) { clearInterval(blinkTimer); blinkTimer = null; blinkPhase = 0; }
       if (!workTimer) {
-        const tick = () => { workAngle = (workAngle + 30) % 360; favicon.href = faviconWorkingSVG(workAngle); };
+        const tick = () => { workPhase = (workPhase + 1) % PUMP_FRAMES; favicon.href = faviconPumpingSVG(workPhase); };
         tick();
-        workTimer = setInterval(tick, 120);
+        workTimer = setInterval(tick, 110);
       }
       return;
     }
     stopWork();
-    favicon.href = faviconSVG(s.color);
+    // A waiting Shadok carries the glyph the user asked for: "!" when it needs an
+    // answer, "?" when something's there to read. The colour is notifyState's
+    // (RED / RED_DIM on the away-blink, AMBER for unread); idle → no glyph.
+    const symbol = s.mode === "blocked" ? "!" : s.mode === "unread" ? "?" : null;
+    favicon.href = faviconSVG(symbol, s.color);
     if (s.blink && !blinkTimer) {
       blinkTimer = setInterval(() => { blinkPhase ^= 1; paint(); }, window.BLINK_MS || 900);
     } else if (!s.blink && blinkTimer) {
@@ -3177,6 +3291,16 @@
     }
   }
   function refreshBadge() { paint(); }
+  // The in-page "pumping" Shadok, drawn once from the SAME `shadokInner` as the
+  // favicon. `currentColor` lets the CSS palette (var(--amber)) tint it, so it
+  // follows a theme change with no redraw; `anim` tags the body/arm for the CSS
+  // pump. The element sits earlier in the document, so it's here to fill now.
+  {
+    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>`;
+  }
   // Coming back must stop the blink at once, not at the next tick. Both signals
   // matter: switching tabs fires visibilitychange, switching application only
   // fires focus/blur.
@@ -3324,7 +3448,7 @@
     $("chanBarName").title = t.cwd || "";
     updateSendDisabled(); // t === active here; also honours a pending upload
     thinking.classList.toggle("visible", t.status === "busy");
-    // Showing/hiding "Shadok is working…" changes the transcript area's height:
+    // Showing/hiding "Shadok is pumping" changes the transcript area's height:
     // without re-pinning to the bottom, the last message slips below the fold
     // (typically "cut off" right after sending a prompt).
     pinBottom(t);

package/public/notify.js

@@ -65,8 +65,8 @@ export function notifyState(channels, view) {
       : { color: RED, badge: "● ", blink: true, mode: "blocked" };
   }
   if (unread) return { color: AMBER, badge: "● ", blink: false, mode: "unread" };
-  // "working" has neither pip colour nor badge: the favicon is animated (a
-  // spinner) by the caller for as long as the mode is "working".
+  // "working" has neither pip colour nor badge: the caller animates the favicon
+  // (the Shadok pumping) for as long as the mode is "working".
   if (working) return { color: null, badge: "", blink: false, mode: "working" };
   return { color: null, badge: "", blink: false, mode: null };
 }