@lolannn/dsh-effort-slider 0.2.6 → 0.2.7

package/README.md

@@ -46,6 +46,14 @@ actually using.
   four-point stars, a breathing star core, and a three-armed galaxy that
   collapses out of the rail at the top level. Reaching the top fires a shockwave
   burst, a star-warp starfield and a light-blade flash.
+- The composer itself carries the light: a halo wraps the whole input card, with
+  the same hue as the rail. Brightness, ring alpha and glow radius all follow the
+  level, so `off` is a faint rim and the top level breathes; opening the panel
+  lifts it. The pill only keeps an outline while the halo is on.
+- The halo is a setting, not a hard rule. A `外圈光环` switch sits under the rail;
+  turn it off and the glow returns to the pill alone, the way it was before the
+  halo existed. The choice is stored in `localStorage` under
+  `effort-slider:halo`, so it survives a reload.
 - Models without reasoning efforts are tagged `无档位` in the model list and
   degrade gracefully once selected: the rail is dimmed and the status line says so
   instead of pretending to switch.
@@ -65,11 +73,6 @@ would clip a `position: fixed` child.
 
 - Click the trigger, then drag the rail or press `←` `→` `↑` `↓` `Home` `End`.
 - The rail snaps to the nearest level on release (elastic overshoot).
-- Reaching **high** turns the starfield into warp: the stars stream, the rail
-  becomes a slow galaxy swirl, and it stays lit for as long as the dial is at
-  high or above — so `xhigh` and `max` keep the look instead of only the top.
-  Dropping back below high switches it off. The top level still adds the full
-  celebration (flash, quake, caption).
 - The level names under the rail are buttons too — same edge math as the thumb,
   so each label sits exactly under its stop.
 - Click the 模型 row to expand the model list; picking a model carries the current
@@ -92,9 +95,6 @@ would clip a `position: fixed` child.
 - Only transforms, `opacity` and canvas are animated; no layout thrash.
 - The canvas is sized from the card (`getBoundingClientRect` + `ResizeObserver`),
   not from the viewport.
-- The warp gate is the level named `high`; a model that declares no `high`
-  warps from the last level at or below it on the shared ladder, and a model
-  with one level never warps.
 - Opening the popup while already on the top level arms the burst guard instead of
   firing it, so the celebration only plays when you actually move into the top
   level.

package/client.js

@@ -50,6 +50,8 @@ window.__ModuleLoader__.load({
       clamped: "该模型没有「{from}」档，已自动切到最接近的「{to}」",
       noEffortModel: "「{model}」没有思考强度档位，已按模型默认运行",
       noLevelsTag: "无档位",
+      haloLabel: "外圈光环",
+      haloTitle: "在输入框外面加一圈随档位变化的光环；关闭后只在档位按钮周围发光",
       boom: "宇宙毁灭",
       afterBoom: "星际探索"
     };
@@ -72,6 +74,8 @@ window.__ModuleLoader__.load({
       clamped: "This model has no \"{from}\" level — switched to the nearest one, \"{to}\"",
       noEffortModel: "\"{model}\" exposes no effort levels — running at its default",
       noLevelsTag: "no levels",
+      haloLabel: "Composer halo",
+      haloTitle: "Ring the input box with a glow that follows the effort level; off keeps the glow on the pill only",
       boom: "SINGULARITY",
       afterBoom: "DEEP SPACE"
     };
@@ -84,8 +88,12 @@ window.__ModuleLoader__.load({
       ".es-anchor{display:inline-flex;align-items:center;min-width:0;max-width:100%}",
       ".es-trigger{--es-hue:214;--es-e:0;position:relative;display:inline-flex;align-items:center;gap:6px;height:28px;max-width:min(340px,44vw);padding:0 9px;margin:0;border-radius:999px;border:1px solid transparent;background:transparent;color:#c3cbdb;font:inherit;font-size:12.5px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;transition:background .2s ease,border-color .25s ease,color .2s ease,box-shadow .35s ease}",
       ".es-trigger:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.1);color:#eef2fb}",
-      '.es-trigger[data-open="1"]{background:rgba(255,255,255,.08);border-color:hsl(var(--es-hue) 100% 74% / .45);color:#fff;box-shadow:0 0 14px hsl(var(--es-hue) 100% 66% / .28)}',
+      '.es-trigger[data-open="1"]{background:rgba(255,255,255,.09);border-color:hsl(var(--es-hue) 100% 76% / .34);color:#fff}',
       '.es-trigger[data-locked="1"]{opacity:.5;cursor:default}',
+      ".es-halo{position:fixed;z-index:2147482600;pointer-events:none;opacity:0;border-radius:20px;border:1px solid hsl(var(--es-hue) 100% 74% / var(--es-a0,.12));box-shadow:0 0 0 1px hsl(var(--es-hue) 100% 74% / var(--es-a1,.05)),0 0 var(--es-b1,10px) hsl(var(--es-hue) 100% 64% / var(--es-a2,.1)),0 0 var(--es-b2,34px) hsl(var(--es-hue) 100% 58% / var(--es-a3,.05));transition:opacity .5s ease,box-shadow .45s ease,border-color .45s ease;will-change:opacity,box-shadow}",
+      '.es-halo[data-on="1"]{opacity:1}',
+      '.es-halo[data-hot="1"]{animation:es-halo-breathe 3.6s ease-in-out infinite}',
+      "@keyframes es-halo-breathe{0%,100%{opacity:.62}50%{opacity:1}}",
       ".es-trigger-bolt{display:var(--dsh-composer-model-icon-display,none);width:14px;height:14px;flex:none;align-items:center;justify-content:center;color:hsl(var(--es-hue) 100% 78%)}",
       ".es-trigger-text{display:var(--dsh-composer-model-text-display,inline);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}",
       ".es-trigger-effort{display:var(--dsh-composer-model-text-display,inline);font-weight:600;color:hsl(var(--es-hue) 100% 84%);text-shadow:0 0 10px hsl(var(--es-hue) 100% 70% / .45)}",
@@ -133,6 +141,12 @@ window.__ModuleLoader__.load({
       ".es-foot{display:flex;align-items:center;gap:8px;padding:10px 2px 0;font-size:11.5px;color:#7f8798;min-height:18px;line-height:1.4}",
       '.es-foot[data-err="1"]{color:#ff9a9a}',
       '.es-foot[data-note="1"]{color:hsl(var(--es-hue) 100% 84%)}',
+      ".es-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px 0;font-size:11.5px;color:#8b93a6}",
+      ".es-switch{flex:none;width:34px;height:19px;padding:0;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);position:relative;cursor:pointer;transition:background .2s ease,border-color .2s ease}",
+      '.es-switch[data-on="1"]{background:hsl(var(--es-hue) 100% 62% / .38);border-color:hsl(var(--es-hue) 100% 70% / .55)}',
+      ".es-switch-knob{position:absolute;top:1.5px;left:1.5px;width:14px;height:14px;border-radius:50%;background:#cfd6e6;transition:transform .18s ease,background .18s ease}",
+      '.es-switch[data-on="1"] .es-switch-knob{transform:translateX(15px);background:#fff}',
+      '.es-trigger[data-halo="0"][data-open="1"]{box-shadow:0 0 14px hsl(var(--es-hue) 100% 66% / .28)}',
       ".es-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;display:block}",
       ".es-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(60% 60% at 50% 50%,#fff,rgba(190,215,255,.6) 45%,transparent 72%)}",
       ".es-flash.go{animation:es-flash 1.1s ease-out both}",
@@ -427,9 +441,6 @@ window.__ModuleLoader__.load({
         anim: null,
         dragging: false,
         warp: 0,
-        heat: 0,
-        warpFrom: -1,
-        warpFired: false,
         topFired: false,
         reduce: false,
         els: null,
@@ -514,7 +525,7 @@ window.__ModuleLoader__.load({
         s.y = Math.random() * 2 - 1;
         s.z = 0.98;
         s.born = S.time;
-        s.life = S.warp > 0.5 ? 6 + Math.random() * 5.5 : 4.2 + Math.random() * 4.2;
+        s.life = S.idx === topIndex() ? 6 + Math.random() * 5.5 : 4.2 + Math.random() * 4.2;
       }
 
       function initStars() {
@@ -558,23 +569,8 @@ window.__ModuleLoader__.load({
         }
       }
 
-      /**
-       * Visual spec for the rail. At or above the warp gate the rail renders
-       * the galaxy tier — the same swirl the top level shows — and keeps it for
-       * as long as the dial stays there.
-       */
-      function railSpec() {
-        const spec = specAt(S.t);
-        if (S.heat > 0.01 && spec.kind !== "none") {
-          spec.kind = "galaxy";
-          spec.n = Math.max(spec.n, 38);
-          spec.ribbon = false;
-        }
-        return spec;
-      }
-
       function ensureParticles() {
-        const spec = railSpec();
+        const spec = specAt(S.t);
         buildParticles(spec.n, spec.kind);
       }
 
@@ -763,7 +759,7 @@ window.__ModuleLoader__.load({
         const hh = S.rh;
         c.setTransform(S.rdpr, 0, 0, S.rdpr, 0, 0);
         c.clearRect(0, 0, w, hh);
-        const spec = railSpec();
+        const spec = specAt(S.t);
         const e = S.e;
         const hue = hueAtT(S.t);
         const pad = 11;
@@ -839,26 +835,22 @@ window.__ModuleLoader__.load({
         }
 
         if (spec.kind === "galaxy") {
-          const ga = clamp01(S.heat);
-          /* Centred on what is actually filled, so the swirl is whole when the
-           * gate is high rather than half-clipped at the fill edge. */
-          const gw = Math.max(24, reach);
-          const cxx = pad + gw * 0.5;
-          const gr = gw * 0.24;
-          const core = c.createRadialGradient(cxx, cyy, 0, cxx, cyy, gr);
+          const ga = clamp01((e - 0.9) / 0.1);
+          const cxx = pad + iw * 0.5;
+          const core = c.createRadialGradient(cxx, cyy, 0, cxx, cyy, iw * 0.24);
           core.addColorStop(0, "rgba(255,255,255,.95)");
           core.addColorStop(0.35, "hsla(196,100%,82%,.75)");
           core.addColorStop(0.72, "hsla(258,100%,62%,.34)");
           core.addColorStop(1, "hsla(258,100%,60%,0)");
           c.fillStyle = core;
           c.beginPath();
-          c.arc(cxx, cyy, gr, 0, Math.PI * 2);
+          c.arc(cxx, cyy, iw * 0.24, 0, Math.PI * 2);
           c.fill();
           for (let a = 0; a < 3; a++) {
             for (let i = 0; i < 130; i++) {
               const f = i / 130;
               const ang = a * ((Math.PI * 2) / 3) + f * 5.4 + S.time * 0.55;
-              const rad = f * gw * 0.46;
+              const rad = f * iw * 0.46;
               const x = cxx + Math.cos(ang) * rad;
               const y = cyy + Math.sin(ang) * rad * 0.42;
               const alpha = (1 - f) * 0.5 * (0.4 + ga * 0.6);
@@ -959,33 +951,6 @@ window.__ModuleLoader__.load({
         }
       }
 
-      /**
-       * Light celebration for crossing the warp gate at a level below the top.
-       *
-       * The full boom (quake, white flash, the big caption) stays reserved for
-       * the top level; this one only throws streaks, embers and two thin rings,
-       * so the rail lights up the moment the dial reaches high territory.
-       */
-      function surge() {
-        if (!S.els || S.reduce) return;
-        spawnStreaks();
-        S.waves.push({ r: 0, a: 0.72, w: 7, hue: 190 });
-        S.waves.push({ r: 0, a: 0.4, w: 18, hue: 300 });
-        for (let i = 0; i < 90; i++) {
-          const ang = Math.random() * Math.PI * 2;
-          const sp = 40 + Math.random() * 320;
-          S.debris.push({
-            x: S.W * 0.5,
-            y: S.H * 0.5,
-            vx: Math.cos(ang) * sp,
-            vy: Math.sin(ang) * sp,
-            life: 1,
-            hue: [190, 300, 45][i % 3],
-            size: 0.5 + Math.random() * 1.6
-          });
-        }
-      }
-
       function boom() {
         const els = S.els;
         if (!els) return;
@@ -1049,27 +1014,13 @@ window.__ModuleLoader__.load({
             }
           }
         }
-        /*
-         * The starfield goes to warp from the "gate" level upward, not only at
-         * the very top: the gate is the index of the level named "high" (see
-         * warpIndexOf), so moving into high — or anything above it — lights the
-         * rail and keeps it lit until the slider drops back below.
-         */
-        const gate = S.warpFrom >= 0 ? Math.min(S.warpFrom, top) : top;
-        const inside = top > 0 && i >= gate;
-        if (inside && !S.warpFired) {
-          S.warpFired = true;
-          S.warp = 1;
-          if (i < top) surge();
-        } else if (!inside) {
-          S.warpFired = false;
-          if (S.warp > 0.01) S.warp = 0;
-        }
-        if (i < top) {
-          S.topFired = false;
-        } else if (i === top && !S.topFired) {
+        const isTop = top > 0 && i === top;
+        if (isTop && !S.topFired) {
           S.topFired = true;
           boom();
+        } else if (!isTop) {
+          S.topFired = false;
+          if (S.warp > 0.01) S.warp = 0;
         }
       }
 
@@ -1103,18 +1054,10 @@ window.__ModuleLoader__.load({
         if (S.prevFade > 0) S.prevFade = Math.max(0, S.prevFade - dt / 0.24);
 
         syncLevel();
-
-        /* 0 outside the warp gate, 1 inside it, eased so the galaxy on the rail
-         * fades in instead of popping when the dial crosses high. */
-        const heatTarget = S.warpFired ? 1 : 0;
-        S.heat += (heatTarget - S.heat) * Math.min(1, dt * 7);
-        if (Math.abs(heatTarget - S.heat) < 0.002) S.heat = heatTarget;
-
         ensureParticles();
 
         const top = topIndex();
-        const gate = S.warpFrom >= 0 ? Math.min(S.warpFrom, top) : top;
-        if (!S.reduce && top > 0 && S.idx >= gate && S.frameNo % 10 === 0) spawnStreaks();
+        if (!S.reduce && top > 0 && S.idx === top && S.frameNo % 10 === 0) spawnStreaks();
 
         drawBG(dt);
         drawRail();
@@ -1206,14 +1149,12 @@ window.__ModuleLoader__.load({
         S.texts = opts.texts || S.texts;
         S.reduce = !!opts.reduce;
         S.count = Math.max(1, (opts.count || 1) | 0);
-        S.warpFrom = typeof opts.warpFrom === "number" ? opts.warpFrom | 0 : -1;
         S.mounted = true;
         S.time = 0;
         S.frameNo = 0;
         S.last = 0;
         S.e = S.t;
         S.topFired = false;
-        S.warpFired = false;
         S.warp = 0;
         S.waves.length = 0;
         S.debris.length = 0;
@@ -1282,20 +1223,6 @@ window.__ModuleLoader__.load({
         S.idx = Math.min(S.idx, topIndexOf(S.count));
       }
 
-      /** Move the warp gate when the model (and so its level list) changes. */
-      function setWarpFrom(index) {
-        const next = typeof index === "number" && index >= 0 ? index | 0 : -1;
-        if (next === S.warpFrom) return;
-        S.warpFrom = next;
-        if (!S.mounted) return;
-        const top = topIndex();
-        const gate = S.warpFrom >= 0 ? Math.min(S.warpFrom, top) : top;
-        if (S.idx < gate) {
-          S.warpFired = false;
-          if (S.warp > 0.01) S.warp = 0;
-        }
-      }
-
       function setIndex(index, immediate) {
         const top = topIndex();
         const to = levelT(clamp(index, 0, top), S.count);
@@ -1305,17 +1232,11 @@ window.__ModuleLoader__.load({
           S.e = to;
           S.idx = Math.round(to * top);
           /*
-           * Opening the panel must not replay the celebration. Only a real move
-           * into the warp gate (drag, click, keyboard) fires it; mounting with
-           * the slider already at or above the gate just arms the guards. The
-           * warp glow itself stays on either way: the state, not the burst, is
-           * what marks "this model is running hot".
+           * Opening the panel must not replay the top-level celebration. Only a
+           * real move into the top level (drag, click, keyboard) fires boom();
+           * mounting while already at the top just arms the guard.
            */
-          const gate = S.warpFrom >= 0 ? Math.min(S.warpFrom, top) : top;
-          const inside = S.count > 1 && S.idx >= gate;
           S.topFired = S.count > 1 && S.idx === top;
-          S.warpFired = inside;
-          S.warp = inside ? 1 : 0;
         } else {
           snapTo(to, 320);
         }
@@ -1325,7 +1246,6 @@ window.__ModuleLoader__.load({
         mount,
         unmount,
         setCount,
-        setWarpFrom,
         setIndex,
         beginDrag,
         isDragging() {
@@ -1483,25 +1403,231 @@ window.__ModuleLoader__.load({
     }
 
     /**
-     * Index of the level where the starfield jumps to warp.
-     *
-     * It is the level named "high" — from there upward the rail runs hot. A
-     * model that declares no "high" gets the last level at or below high on the
-     * shared effort ladder (a three-step off/low/max model starts warping at
-     * low), and a model with a single level never warps at all.
+     * The composer card that owns the trigger. The shipped DOM uses hashed
+     * CSS-module names (`<hash>_card`), so match that suffix first and fall
+     * back to "the nearest rounded box that owns a text field".
      */
-    function warpIndexOf(levels) {
-      const list = Array.isArray(levels) ? levels : [];
-      if (list.length <= 1) return 0;
-      const named = list.findIndex((lv) => lv && lv.id === "high");
-      if (named >= 0) return named;
-      const gate = EFFORT_LADDER.indexOf("high");
-      let best = 0;
-      for (let i = 0; i < list.length; i++) {
-        const rank = EFFORT_LADDER.indexOf(list[i] && list[i].id);
-        if (rank >= 0 && rank <= gate) best = i;
+    /* A preference, not state: the halo can be switched off, and the choice
+       outlives the page. localStorage is guarded because a host context may
+       refuse it. */
+    const HALO_KEY = "effort-slider:halo";
+    function readHaloPref() {
+      try {
+        if (typeof window === "undefined" || !window.localStorage) return true;
+        const raw = window.localStorage.getItem(HALO_KEY);
+        return raw === null ? true : raw !== "0";
+      } catch (err) {
+        return true;
+      }
+    }
+    function writeHaloPref(on) {
+      try {
+        if (typeof window === "undefined" || !window.localStorage) return;
+        window.localStorage.setItem(HALO_KEY, on ? "1" : "0");
+      } catch (err) {
+        /* a preference that cannot persist still applies to this page */
+      }
+    }
+
+    function composerBox(el) {
+      if (!el || typeof el.closest !== "function") return null;
+      const card = el.closest('[class*="_card"]');
+      if (card && card.querySelector && card.querySelector('textarea,[contenteditable="true"],[role="textbox"]')) return card;
+      let node = el.parentElement;
+      while (node && node !== document.body) {
+        if (node.querySelector && node.querySelector('textarea,[contenteditable="true"],[role="textbox"]')) {
+          const cs = window.getComputedStyle(node);
+          if ((parseFloat(cs.borderTopLeftRadius) || 0) >= 10) return node;
+        }
+        node = node.parentElement;
       }
-      return best;
+      return null;
+    }
+
+    /** The page shares one ring, so a second mount cannot leave a ghost. */
+    let HALO = null;
+    function haloLayer() {
+      if (HALO === null) HALO = createHalo();
+      return HALO;
+    }
+
+    /**
+     * One fixed ring that hugs the composer. It is created once and reused, so
+     * re-renders never stack copies; the geometry follows the card through a
+     * ResizeObserver plus the window events that can move it.
+     */
+    function createHalo() {
+      let node = null;
+      let target = null;
+      let observer = null;
+      let frame = 0;
+      let mounts = 0;
+      let anchor = null;
+      let pollTimer = 0;
+      let until = 0;
+      let lastGeom = "";
+
+      function paint() {
+        if (!node) return;
+        /*
+         * The host may rebuild the composer node (a session switch, a layout
+         * change) without telling us; look the card up again from the trigger
+         * rather than keeping a ring pinned to a detached node.
+         */
+        if ((!target || !target.isConnected) && anchor && anchor.isConnected) {
+          const again = composerBox(anchor);
+          if (again !== target) {
+            target = again;
+            if (again && typeof window.ResizeObserver === "function") {
+              if (observer && typeof observer.disconnect === "function") observer.disconnect();
+              observer = new window.ResizeObserver(schedule);
+              observer.observe(again);
+            }
+          }
+        }
+        if (!target || !target.isConnected) {
+          hide();
+          return;
+        }
+        const rect = target.getBoundingClientRect();
+        if (!rect.width || !rect.height || rect.bottom < 0 || rect.top > window.innerHeight) {
+          hide();
+          return;
+        }
+        /*
+         * The composer moves without resizing — a Session switch turns the
+         * centred empty state into the docked conversation view, and a pure
+         * ResizeObserver never fires for that. Re-read the geometry instead of
+         * trusting the last placed rect, but only touch the DOM when it moved.
+         */
+        const key = rect.left + "," + rect.top + "," + rect.width + "," + rect.height;
+        if (key === lastGeom && node.dataset.on === "1") return;
+        lastGeom = key;
+        const radius = parseFloat(window.getComputedStyle(target).borderTopLeftRadius) || 16;
+        node.style.left = rect.left - 2 + "px";
+        node.style.top = rect.top - 2 + "px";
+        node.style.width = rect.width + 4 + "px";
+        node.style.height = rect.height + 4 + "px";
+        node.style.borderRadius = radius + 2 + "px";
+      }
+
+      /** Frames follow the card closely for a moment after anything may have moved it. */
+      function watchFor(ms) {
+        until = Math.max(until, Date.now() + ms);
+        if (frame) return;
+        frame = window.requestAnimationFrame(track);
+      }
+
+      function track() {
+        frame = 0;
+        if (!node) return;
+        paint();
+        if (!target || Date.now() >= until) return;
+        frame = window.requestAnimationFrame(track);
+      }
+
+      function schedule() {
+        watchFor(1200);
+      }
+
+      /* A layout change can also land long after the switch, so a slow poll
+         keeps watching for as long as the ring exists. */
+      function poll() {
+        pollTimer = setTimeout(() => {
+          pollTimer = 0;
+          if (!node) return;
+          paint();
+          poll();
+        }, 250);
+      }
+
+      function startPoll() {
+        if (pollTimer || typeof setTimeout !== "function") return;
+        poll();
+      }
+
+      function stopPoll() {
+        if (!pollTimer) return;
+        clearTimeout(pollTimer);
+        pollTimer = 0;
+      }
+
+      /** Leaving no paint behind matters more than leaving no state behind. */
+      function hide() {
+        if (!node) return;
+        node.dataset.on = "0";
+        node.dataset.hot = "0";
+        node.style.opacity = "0.000";
+        node.style.visibility = "hidden";
+        lastGeom = "";
+      }
+
+      function ensure() {
+        if (node) return node;
+        /* An earlier copy of this module may have left its ring in the body. */
+        if (typeof document.querySelectorAll === "function") {
+          const stale = document.querySelectorAll(".es-halo");
+          for (let i = 0; i < stale.length; i += 1) {
+            if (stale[i].parentNode) stale[i].parentNode.removeChild(stale[i]);
+          }
+        }
+        node = document.createElement("div");
+        node.className = "es-halo";
+        node.setAttribute("aria-hidden", "true");
+        document.body.appendChild(node);
+        window.addEventListener("resize", schedule, { passive: true });
+        document.addEventListener("scroll", schedule, { capture: true, passive: true });
+        return node;
+      }
+
+      function place(box, opts, from) {
+        const el = ensure();
+        if (from) anchor = from;
+        if (box !== target) {
+          target = box;
+          if (observer && typeof observer.disconnect === "function") observer.disconnect();
+          observer = null;
+          if (target && typeof window.ResizeObserver === "function") {
+            observer = new window.ResizeObserver(schedule);
+            observer.observe(target);
+          }
+          lastGeom = "";
+          if (target) startPoll();
+          watchFor(3000);
+        }
+        const heat = Math.max(0, Math.min(1, Number(opts.heat) || 0));
+        el.style.setProperty("--es-hue", String(opts.hue | 0));
+        el.style.setProperty("--es-a0", (0.1 + heat * 0.34).toFixed(3));
+        el.style.setProperty("--es-a1", (0.04 + heat * 0.14).toFixed(3));
+        el.style.setProperty("--es-a2", (0.1 + heat * 0.44).toFixed(3));
+        el.style.setProperty("--es-a3", (0.05 + heat * 0.3).toFixed(3));
+        el.style.setProperty("--es-b1", (10 + heat * 26).toFixed(1) + "px");
+        el.style.setProperty("--es-b2", (34 + heat * 78).toFixed(1) + "px");
+        el.style.opacity = String((!target ? 0 : opts.open ? 0.62 + heat * 0.38 : 0.2 + heat * 0.8).toFixed(3));
+        el.style.visibility = target ? "visible" : "hidden";
+        el.dataset.on = target ? "1" : "0";
+        el.dataset.hot = target && opts.hot ? "1" : "0";
+        if (!target) hide();
+        else schedule();
+      }
+
+      function retain() {
+        mounts += 1;
+      }
+
+      function release() {
+        mounts = Math.max(0, mounts - 1);
+        if (mounts > 0) return;
+        stopPoll();
+        lastGeom = "";
+        if (observer && typeof observer.disconnect === "function") observer.disconnect();
+        observer = null;
+        target = null;
+        anchor = null;
+        hide();
+      }
+
+      return { place, retain, release };
     }
 
     class EffortController {
@@ -1513,6 +1639,13 @@ window.__ModuleLoader__.load({
         this.defaultIndex = 0;
         this.sessionId = void 0;
         this.loading = false;
+        /* A read requested while another is in flight is queued, not dropped:
+           the correction that follows a Session switch almost always arrives
+           during the first catalogue read, and dropping it left the pill on
+           the deployment default until something else happened to refresh. */
+        this.refreshQueued = false;
+        this.bindTimer = 0;
+        this.bindTries = 0;
         this.commitTimer = 0;
         this.pendingIndex = -1;
         this.noticeTimer = 0;
@@ -1537,7 +1670,8 @@ window.__ModuleLoader__.load({
           ready: false,
           modelName: "",
           modelId: "",
-          provider: ""
+          provider: "",
+          halo: readHaloPref()
         });
       }
 
@@ -1575,6 +1709,7 @@ window.__ModuleLoader__.load({
           close: () => this.close(),
           toggle: () => this.toggle(),
           toggleModels: () => this.toggleModels(),
+          toggleHalo: () => this.toggleHalo(),
           chooseModel: (provider, modelId) => this.chooseModel(provider, modelId),
           reset: () => this.reset(),
           commit: (i) => this.commit(i),
@@ -1583,8 +1718,18 @@ window.__ModuleLoader__.load({
         };
       }
 
+      toggleHalo() {
+        const on = !this.store.getSnapshot().halo;
+        writeHaloPref(on);
+        this.store.set({ halo: on });
+      }
+
       dispose() {
         clearTimeout(this.commitTimer);
+        if (this.bindTimer) {
+          clearTimeout(this.bindTimer);
+          this.bindTimer = 0;
+        }
         this.dropSelectionSubscription();
       }
 
@@ -1670,9 +1815,25 @@ window.__ModuleLoader__.load({
        */
       bindSelection() {
         const face = this.selectionFace();
-        if (face === this.selFace) return;
+        /* Both being undefined is not "already bound": a Session that was just
+           created has no binding yet, and comparing undefined to undefined
+           used to skip the retry that fixes it. */
+        if (face) {
+          if (face === this.selFace) return;
+        } else {
+          this.scheduleBind();
+          return;
+        }
         this.dropSelectionSubscription();
-        if (!face || typeof face.subscribe !== "function") return;
+        if (typeof face.subscribe !== "function") {
+          this.scheduleBind();
+          return;
+        }
+        this.bindTries = 0;
+        if (this.bindTimer) {
+          clearTimeout(this.bindTimer);
+          this.bindTimer = 0;
+        }
         this.selFace = face;
         this.selUnsub = face.subscribe(() => {
           /* Opening the face and later commits both notify; defer so the
@@ -1683,6 +1844,17 @@ window.__ModuleLoader__.load({
         });
       }
 
+      scheduleBind() {
+        if (this.bindTimer || this.bindTries >= 12) return;
+        const delay = this.bindTries < 6 ? 200 : 1000;
+        this.bindTries += 1;
+        this.bindTimer = setTimeout(() => {
+          this.bindTimer = 0;
+          this.bindSelection();
+          this.refresh();
+        }, delay);
+      }
+
       resolveSessionId() {
         if (this.sessionId) return this.sessionId;
         const sessions = readService(() => this.ctx.sessions);
@@ -1804,8 +1976,22 @@ window.__ModuleLoader__.load({
       /* ---------------- catalogue ---------------- */
 
       async refresh() {
-        if (this.loading) return;
+        if (this.loading) {
+          this.refreshQueued = true;
+          return;
+        }
         this.loading = true;
+        try {
+          do {
+            this.refreshQueued = false;
+            await this.refreshOnce();
+          } while (this.refreshQueued);
+        } finally {
+          this.loading = false;
+        }
+      }
+
+      async refreshOnce() {
         /* Reading a projection before subscribing to it can return no value at
            all, so the follow-up starts the subscription first. */
         this.bindSelection();
@@ -1813,12 +1999,10 @@ window.__ModuleLoader__.load({
         try {
           remote = this.ctx.remote.session;
         } catch (err) {
-          this.loading = false;
           this.store.set({ supported: false, ready: true, levels: [], modelName: "", error: null, debug: "inject:" + messageOf(err) });
           return;
         }
         if (!remote || typeof remote.modelCatalog !== "function") {
-          this.loading = false;
           this.store.set({
             supported: false,
             ready: true,
@@ -1888,8 +2072,6 @@ window.__ModuleLoader__.load({
           });
         } catch (err) {
           this.store.set({ ready: true, error: messageOf(err), debug: "throw:" + messageOf(err) });
-        } finally {
-          this.loading = false;
         }
       }
 
@@ -2014,6 +2196,33 @@ window.__ModuleLoader__.load({
 
       if (engineRef.current === null) engineRef.current = createEngine();
 
+      /* The glow that used to sit on the pill now wraps the composer card. */
+      react.useEffect(() => {
+        const halo = haloLayer();
+        halo.retain();
+        return () => halo.release();
+      }, []);
+      react.useEffect(() => {
+        const halo = haloLayer();
+        const count = snap.levels.length;
+        if (!snap.halo || !snap.ready || !count) {
+          /* Hide, but keep the mount counted: release() belongs to unmount. */
+          halo.place(null, { hue: 0, heat: 0, open: false, hot: false });
+          return;
+        }
+        const heat = count > 1 ? snap.index / (count - 1) : 0;
+        halo.place(
+          composerBox(triggerRef.current),
+          {
+            hue: Math.round(hueAtT(snap.t)),
+            heat: heat,
+            open: snap.open,
+            hot: heat >= 0.85
+          },
+          triggerRef.current
+        );
+      }, [snap.halo, snap.ready, snap.index, snap.levels.length, snap.open, snap.t]);
+
       /* Anchor the popup above the trigger, clamped into the viewport. */
       react.useEffect(() => {
         if (!snap.open) {
@@ -2059,7 +2268,6 @@ window.__ModuleLoader__.load({
       }, [snap.open]);
 
       const ready = snap.open && pos !== null;
-      const warpFrom = warpIndexOf(snap.levels);
 
       react.useEffect(() => {
         if (!ready) return;
@@ -2078,7 +2286,6 @@ window.__ModuleLoader__.load({
             big: bigRef.current
           },
           count: levelsRef.current.length,
-          warpFrom: warpFrom,
           texts: { boom: props.t("boom"), after: props.t("afterBoom") },
           reduce,
           onLevel: (i) => props.setIndex(i),
@@ -2091,10 +2298,9 @@ window.__ModuleLoader__.load({
       react.useEffect(() => {
         const engine = engineRef.current;
         if (!engine || !ready || !engine.isMounted()) return;
-        engine.setWarpFrom(warpFrom);
         engine.setCount(snap.levels.length);
         if (!engine.isDragging()) engine.setIndex(snap.index, true);
-      }, [snap.levels.length, warpFrom]);
+      }, [snap.levels.length]);
 
       /* Dismiss on an outside press or Escape. */
       react.useEffect(() => {
@@ -2139,6 +2345,7 @@ window.__ModuleLoader__.load({
           "aria-expanded": snap.open ? "true" : "false",
           "data-open": snap.open ? "1" : "0",
           "data-locked": locked ? "1" : "0",
+          "data-halo": snap.halo ? "1" : "0",
           disabled: locked,
           style: { "--es-hue": String(hue), "--es-e": snap.t.toFixed(3) },
           onClick: () => props.toggle()
@@ -2280,6 +2487,25 @@ window.__ModuleLoader__.load({
               )
             )
           ),
+          h(
+            "div",
+            { className: "es-opt", key: "opt" },
+            h("span", { key: "l" }, props.t("haloLabel")),
+            h(
+              "button",
+              {
+                type: "button",
+                role: "switch",
+                className: "es-switch",
+                title: props.t("haloTitle"),
+                "aria-label": props.t("haloLabel"),
+                "aria-checked": snap.halo ? "true" : "false",
+                "data-on": snap.halo ? "1" : "0",
+                onClick: () => props.toggleHalo()
+              },
+              h("span", { className: "es-switch-knob", key: "k" })
+            )
+          ),
           h("div", { className: "es-foot", key: "foot", "data-err": snap.error ? "1" : "0", "data-note": footNote ? "1" : "0" }, footText)
         ),
         h("canvas", { className: "es-fx", key: "fx", ref: fxRef }),

package/package.json

@@ -1,60 +1,60 @@
-{
-  "name": "@lolannn/dsh-effort-slider",
-  "version": "0.2.6",
-  "description": "Replaces the dsh web GUI composer model selector: one control for the model list and its reasoning effort, drawn as a starfield popup with a glowing particle rail, iridescent four-point stars, ribbon waves and a galaxy collapse at the top level.",
-  "icon": "icon.svg",
-  "type": "module",
-  "main": "index.js",
-  "exports": {
-    ".": "./index.js",
-    "./client": "./client.js",
-    "./package.json": "./package.json"
-  },
-  "scripts": {
-    "check": "node --check client.js && node --check index.js",
-    "test": "node test/run.cjs",
-    "prepublishOnly": "npm test"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/suyunxing/dsh-effort-slider.git"
-  },
-  "homepage": "https://github.com/suyunxing/dsh-effort-slider#readme",
-  "bugs": {
-    "url": "https://github.com/suyunxing/dsh-effort-slider/issues"
-  },
-  "author": "suyunxing",
-  "dsh": {
-    "bundle": {
-      "patch": "./cordis.patch.yml"
-    },
-    "client": {
-      "inject": [
-        "@deepseek-ai/dsh-client-connection",
-        "@deepseek-ai/dsh-client-ui-renderer",
-        "@deepseek-ai/dsh-api-remotes",
-        "@deepseek-ai/dsh-api-session-controller"
-      ],
-      "platform": "web",
-      "immediately": true
-    }
-  },
-  "files": [
-    "index.js",
-    "client.js",
-    "icon.svg",
-    "cordis.patch.yml",
-    "README.md"
-  ],
-  "license": "MIT",
-  "keywords": [
-    "dsh",
-    "dsh-plugin",
-    "reasoning-effort",
-    "model-selector",
-    "composer",
-    "slider",
-    "canvas",
-    "starfield"
-  ]
-}
+{
+  "name": "@lolannn/dsh-effort-slider",
+  "version": "0.2.7",
+  "description": "Replaces the dsh web GUI composer model selector: one control for the model list and its reasoning effort, drawn as a starfield popup with a glowing particle rail, iridescent four-point stars, ribbon waves and a galaxy collapse at the top level.",
+  "icon": "icon.svg",
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "check": "node --check client.js && node --check index.js",
+    "test": "node test/run.cjs",
+    "prepublishOnly": "npm test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/suyunxing/dsh-effort-slider.git"
+  },
+  "homepage": "https://github.com/suyunxing/dsh-effort-slider#readme",
+  "bugs": {
+    "url": "https://github.com/suyunxing/dsh-effort-slider/issues"
+  },
+  "author": "suyunxing",
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-ui-renderer",
+        "@deepseek-ai/dsh-api-remotes",
+        "@deepseek-ai/dsh-api-session-controller"
+      ],
+      "platform": "web",
+      "immediately": true
+    }
+  },
+  "files": [
+    "index.js",
+    "client.js",
+    "icon.svg",
+    "cordis.patch.yml",
+    "README.md"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "dsh",
+    "dsh-plugin",
+    "reasoning-effort",
+    "model-selector",
+    "composer",
+    "slider",
+    "canvas",
+    "starfield"
+  ]
+}