@huai_xin/dsh-model-picker 0.2.0 → 0.3.0

package/README.md

@@ -19,6 +19,10 @@ DSH 自带的模型选择器是按两级菜单设计的。模型一多，找一
 **档位是一条能拖的滑杆** — 轨道上是各档位的刻度，拖动时滑块跟手，松手才提交一次。滑块整个
 待在轨道里面，不会压出边界；面板是紧凑尺寸，不占半个屏幕。
 
+**档位越高，喷射越远越密** — 滑块身后会拖出一束白色方块，强度随档位变化：最低档只飘出几颗、
+刚离开滑块就散掉，最高档是 60 颗、能一路撒到轨道中段。最高档还会多一层拖尾。粒子跟随档位实时
+变化，拖动时也跟着滑块走。
+
 **跟着模型列表实时变** — 别的插件改了可用模型（开关模型、导入账号、探测到模型不可用……），这个列表会立刻跟着变，不用刷新页面。
 
 **新会话显示默认模型** — 而不是空着或显示"没有可用模型"。
@@ -55,6 +59,11 @@ dsh plugin --profile <你的 profile> add /path/to/dsh-model-picker
 
 本插件替换的只是那层 UI：把两级菜单换成一次点开的可搜索列表，把思考档位拆成独立控件。
 
+## 会不会挡住别的按钮
+
+不会。这个面板会主动请求宿主抬高输入区的层级（`data-trigger-menu`），所以聊天区右下角那个
+「跳到底部」按钮不会盖在面板上面。
+
 ## 兼容性
 
 需要 DSH `0.2.1-rc` 及以上。插件本身不认识任何具体 provider——任何 provider 插件注册的模型都会出现在列表里。

package/client.js

@@ -332,6 +332,142 @@ function createEffortSlider(React) {
   const CaptionMark = createCaptionMark(React)
   const { useState, useEffect, useRef } = React
 
+  /**
+   * The exhaust table.
+   *
+   * Fixed numbers, never `Math.random()`: a render has to be pure, and the stream
+   * must look identical every time the panel opens.
+   *
+   * `dy0` is what makes the particles leave the knob's whole CROSS-SECTION rather
+   * than one point in its centre — it spreads the spawn points down the knob's
+   * height. `dx` / `dy` / `sz` / `rot` stop the squares from marching in step, and
+   * the per-particle `--i` turns one keyframe into a continuous stream (see the
+   * negative `animation-delay` in the stylesheet).
+   *
+   * The entries are ordered so that taking the FIRST N of them always gives a spread
+   * across the whole cross-section: the level only ever slices this table, it never
+   * reorders it. `dy0` therefore alternates up/down rather than counting from -11 to
+   * 11, which would leave a low level emitting only from the top edge.
+   */
+  const EMIT = [
+    { dy0: 0, dx: -143, dy: 1, sz: 3, rot: 0 },
+    { dy0: -8, dx: -118, dy: -4, sz: 4, rot: 45 },
+    { dy0: 8, dx: -124, dy: 5, sz: 3, rot: 90 },
+    { dy0: -4, dx: -98, dy: -2, sz: 4, rot: 0 },
+    { dy0: 4, dx: -108, dy: 3, sz: 4, rot: 45 },
+    { dy0: -11, dx: -130, dy: -6, sz: 3, rot: 90 },
+    { dy0: 11, dx: -136, dy: 7, sz: 3, rot: 0 },
+    { dy0: -2, dx: -88, dy: -1, sz: 3, rot: 45 },
+    { dy0: 2, dx: -95, dy: 2, sz: 4, rot: 0 },
+    { dy0: -6, dx: -150, dy: -3, sz: 3, rot: 90 },
+    { dy0: 6, dx: -114, dy: 4, sz: 4, rot: 45 },
+    { dy0: -9, dx: -104, dy: -5, sz: 3, rot: 0 },
+    { dy0: 9, dx: -128, dy: 6, sz: 3, rot: 90 },
+    { dy0: -1, dx: -91, dy: 0, sz: 4, rot: 45 },
+    { dy0: 1, dx: -101, dy: 1, sz: 3, rot: 0 },
+    { dy0: -5, dx: -110, dy: -2, sz: 4, rot: 90 },
+    { dy0: 5, dx: -121, dy: 3, sz: 3, rot: 0 },
+    { dy0: -3, dx: -85, dy: -1, sz: 3, rot: 45 },
+    // A second pass over the same cross-section, offset in time by the per-particle
+    // delay: it doubles the density without making the stream look striped, and gives
+    // the high levels enough material to read as a real plume.
+    { dy0: -10, dx: -108, dy: -5, sz: 3, rot: 0 },
+    { dy0: 10, dx: -104, dy: 5, sz: 3, rot: 45 },
+    { dy0: -7, dx: -140, dy: -3, sz: 4, rot: 90 },
+    { dy0: 7, dx: -134, dy: 4, sz: 4, rot: 0 },
+    { dy0: -5, dx: -95, dy: -2, sz: 3, rot: 45 },
+    { dy0: 5, dx: -91, dy: 2, sz: 3, rot: 90 },
+    { dy0: -12, dx: -128, dy: -6, sz: 3, rot: 0 },
+    { dy0: 12, dx: -121, dy: 6, sz: 3, rot: 45 },
+    { dy0: -3, dx: -146, dy: -1, sz: 4, rot: 90 },
+    { dy0: 3, dx: -143, dy: 1, sz: 4, rot: 0 },
+    { dy0: -1, dx: -101, dy: 0, sz: 3, rot: 45 },
+    { dy0: 1, dx: -98, dy: 0, sz: 3, rot: 0 },
+    // A third pass. The high levels need enough material to read as a dense plume
+    // rather than a sparse spray, and because only a slice of this table is rendered
+    // the extra entries cost the low levels nothing. The timing stagger in the
+    // stylesheet spreads every pass out, so density rises without banding.
+    { dy0: -9, dx: -114, dy: -4, sz: 4, rot: 0 },
+    { dy0: 9, dx: -110, dy: 4, sz: 3, rot: 45 },
+    { dy0: -4, dx: -136, dy: -2, sz: 3, rot: 90 },
+    { dy0: 4, dx: -130, dy: 2, sz: 4, rot: 0 },
+    { dy0: -11, dx: -124, dy: -5, sz: 3, rot: 45 },
+    { dy0: 11, dx: -118, dy: 5, sz: 3, rot: 90 },
+    { dy0: -6, dx: -95, dy: -3, sz: 4, rot: 0 },
+    { dy0: 6, dx: -91, dy: 3, sz: 3, rot: 45 },
+    { dy0: -2, dx: -140, dy: -1, sz: 3, rot: 90 },
+    { dy0: 2, dx: -134, dy: 1, sz: 4, rot: 0 },
+    { dy0: -8, dx: -104, dy: -4, sz: 3, rot: 45 },
+    { dy0: 8, dx: -101, dy: 4, sz: 3, rot: 90 },
+    // A fourth pass, different seam. Each pass re-covers the same cross-section at a
+    // different spacing so the stream stays dense instead of clumping into bands; the
+    // per-particle delay in the stylesheet then interleaves all four.
+    { dy0: -10, dx: -121, dy: -5, sz: 3, rot: 0 },
+    { dy0: 10, dx: -114, dy: 5, sz: 4, rot: 45 },
+    { dy0: -5, dx: -143, dy: -2, sz: 3, rot: 90 },
+    { dy0: 5, dx: -136, dy: 2, sz: 3, rot: 0 },
+    { dy0: -12, dx: -108, dy: -6, sz: 3, rot: 45 },
+    { dy0: 12, dx: -104, dy: 6, sz: 3, rot: 90 },
+    { dy0: -7, dx: -128, dy: -3, sz: 4, rot: 0 },
+    { dy0: 7, dx: -124, dy: 3, sz: 3, rot: 45 },
+    { dy0: -1, dx: -88, dy: 0, sz: 4, rot: 90 },
+    { dy0: 1, dx: -91, dy: 0, sz: 3, rot: 0 },
+    { dy0: -9, dx: -134, dy: -4, sz: 3, rot: 45 },
+    { dy0: 9, dx: -130, dy: 4, sz: 4, rot: 90 },
+    { dy0: -4, dx: -98, dy: -2, sz: 3, rot: 0 },
+    { dy0: 4, dx: -95, dy: 2, sz: 3, rot: 45 },
+    { dy0: -11, dx: -118, dy: -5, sz: 4, rot: 90 },
+    { dy0: 11, dx: -110, dy: 5, sz: 3, rot: 0 },
+    { dy0: -3, dx: -150, dy: -1, sz: 3, rot: 45 },
+    { dy0: 3, dx: -140, dy: 1, sz: 4, rot: 90 }
+  ]
+
+  /**
+   * How much of the exhaust a level gets.
+   *
+   * The amount of work a level asks for is the one thing the control is saying, so
+   * the exhaust scales with it and the spread between the ends is deliberately wide:
+   * the lowest level emits a handful of squares barely past the knob, the highest
+   * emits the whole table and throws them roughly three times as far. A narrow range
+   * (the first version went 0.28..1.00) made every level look the same at a glance.
+   *
+   * @param index - the level's position, 0-based.
+   * @param count - how many levels the model declares.
+   * @returns `{ share, reach }`, both 0..1.
+   */
+  const exhaustFor = (index, count) => {
+    if (count <= 1) return { share: 0.5, reach: 0.5 }
+    const at = index / (count - 1)
+    // The curve is EASED rather than linear so the ends separate visually, and the
+    // floor is low enough that the lowest level is a scatter of a few squares rather
+    // than a plume. The reach tops out at 1.0 (the table's own distances) so the
+    // furthest level still lands inside the rail rather than being clipped by it.
+    const eased = at * at
+    return { share: 0.08 + eased * 0.92, reach: 0.22 + at * 0.78 }
+  }
+
+  /**
+   * The streaks left behind the squares.
+   *
+   * These read as a SHEET of parallel lines, not as a wedge: every streak is the same
+   * length and the same opacity, and they are evenly spaced down the knob's full
+   * height. An earlier version tapered them (long in the middle, short at the edges)
+   * so the silhouette converged on the knob like a flame, which is not what the bar
+   * should look like — the exhaust leaves the whole cross-section at once.
+   *
+   * The trail is reserved for the TOP level only (see `withTrail` below): it marks the
+   * ceiling of the scale, and drawing it at every level left nothing to escalate to.
+   *
+   * `off` is a PIXEL offset from the knob's centre line, not a percentage: the emitter
+   * is a zero-height box, so a percentage resolves against zero and stacks every
+   * streak on the centre. The spread covers the knob's diameter (28px) edge to edge.
+   */
+  const TRAIL = [
+    { off: -12 }, { off: -9 }, { off: -6 }, { off: -3 },
+    { off: 0 },
+    { off: 3 }, { off: 6 }, { off: 9 }, { off: 12 }
+  ]
+
   return function EffortSlider({ efforts, activeId, disabled, onChange, t, caption }) {
     const count = efforts.length
     const incoming = Math.max(0, efforts.findIndex((effort) => effort.id === activeId))
@@ -364,8 +500,23 @@ function createEffortSlider(React) {
     // A model with just one effort keeps its stop in the middle.
     const position = (at) => count <= 1 ? '50%' : `${(at / (count - 1)) * 100}%`
 
+    // The level drives the exhaust: more of the table, and thrown further.
+    const exhaust = exhaustFor(index, count)
+    /**
+     * The trail belongs to the top level only.
+     *
+     * It is the visual ceiling of the scale — the thing the last stop has that no
+     * other stop does. Drawing it at every level (the first version) made the top
+     * level feel like more of the same instead of the end of the range.
+     */
+    const withTrail = count > 1 && index === count - 1
+
     return h('div', {
-      className: 'dmp-slider',
+      // `dmp-slider-dragging` drops the left transition on the knob, the fill and
+      // the emitter together. Without it the knob eases to its new stop over 150ms
+      // while a transition-free emitter jumps there at once, so the particles left
+      // from a position the knob had not reached yet.
+      className: `dmp-slider${dragging === null ? '' : ' dmp-slider-dragging'}`,
       'aria-disabled': disabled === true,
       style: { '--dmp-effort-at': position(index) }
     },
@@ -378,6 +529,40 @@ function createEffortSlider(React) {
         h('span', { className: 'dmp-slider-value' }, activeName)),
 
       h('div', { className: 'dmp-slider-rail' },
+        /**
+         * The rail's outline, drawn as vector art.
+         *
+         * This started as a `box-shadow` inset, which is a RASTER edge: at 1px it
+         * lands on the pixel grid but reads flat, and at 1.5px it falls between
+         * pixels and smears into a grey band. The knob's ring never had that problem
+         * because it is an SVG stroke — a vector edge, crisp at any scale.
+         *
+         * So the outline uses the same primitive as the knob: a `<rect>` with a
+         * stroked edge, sized to the rail and scaled to it by `preserveAspectRatio`
+         * being off. `vector-effect: non-scaling-stroke` keeps the stroke exactly
+         * 1px however the rect is stretched, so the line stays hairline-crisp instead
+         * of being squashed by the horizontal stretch. `rx` is a percentage of the
+         * half-height, matching the rail's own rounded ends.
+         */
+        h('svg', {
+          className: 'dmp-slider-outline',
+          'aria-hidden': true,
+          preserveAspectRatio: 'none'
+        },
+        h('rect', {
+          // Half the stroke on each axis: an SVG stroke straddles the path, so a 2px
+          // line on the exact edge would be half-clipped by the rail's clip-path.
+          x: 1,
+          y: 1,
+          width: 'calc(100% - 2px)',
+          height: 'calc(100% - 2px)',
+          rx: 14,
+          ry: 14,
+          fill: 'none',
+          stroke: 'var(--dsw-alias-border-l3)',
+          strokeWidth: 2,
+          vectorEffect: 'non-scaling-stroke'
+        })),
         /**
          * The moving parts live in an INSET track.
          *
@@ -392,6 +577,49 @@ function createEffortSlider(React) {
          */
         h('div', { className: 'dmp-slider-track' },
           h('div', { className: 'dmp-slider-fill', 'aria-hidden': true }),
+          /**
+           * The exhaust.
+           *
+           * An empty box pinned at the knob's position (`--dmp-effort-at`), carrying
+           * the particle squares. It is a SIBLING of the knob inside the same inset
+           * track, so it shares the knob's coordinate space and its transition —
+           * which is what keeps the spawn point under the knob while it moves.
+           * The rail's clip-path trims whatever drifts past the end cap.
+           *
+           * How MANY particles exist and how FAR they travel both scale with the
+           * level: `--dmp-emit-reach` multiplies every particle's `dx` / `dy` in the
+           * stylesheet, and only the first `share` of the table is rendered at all.
+           * Keeping the unused entries out of the DOM (rather than hiding them) also
+           * means a low level runs a couple of animations instead of eighteen.
+           */
+          h('span', {
+            className: 'dmp-emit',
+            'aria-hidden': true,
+            // The top level is what turns the trail on; CSS cross-fades the change.
+            'data-trail': withTrail ? 'on' : 'off',
+            style: { '--dmp-emit-reach': exhaust.reach }
+          },
+          EMIT.slice(0, Math.max(2, Math.round(EMIT.length * exhaust.share)))
+            .map((particle, at) => h('i', {
+              key: at,
+              className: 'dmp-emit-p',
+              style: {
+                '--i': at,
+                '--dx': `${particle.dx}px`,
+                '--dy0': `${particle.dy0}px`,
+                '--dy': `${particle.dy}px`,
+                '--sz': `${particle.sz}px`,
+                '--rot': `${particle.rot}deg`
+              }
+            })),
+            // The trail is always in the DOM; `data-trail` fades it in at the top level
+            // only. Mounting it conditionally made it pop in and out as the knob
+            // crossed the last stop, which was the one abrupt moment in the control.
+            TRAIL.map((streak, at) => h('i', {
+              key: `trail-${at}`,
+              className: 'dmp-emit-trail',
+              style: { '--n': at, '--off': `${streak.off}px` }
+            }))),
           h('div', { className: 'dmp-slider-dots', 'aria-hidden': true },
             efforts.map((effort, at) => h('span', {
               key: effort.id,
@@ -646,18 +874,31 @@ const CSS = `
    The fill and the active label take the host's business-primary token — the same
    accent DSH uses for its own interactive highlights — so the control recolours
    with the theme instead of carrying a blue that only suits one of them. */
-/* The knob is the rail's full height (32px). The two stop offsets are deliberately
-   UNEQUAL:
-     --dmp-stop-left  32px  the first stop sits a full knob diameter in from the
-                            left cap, so the knob stops short of that end;
-     --dmp-stop-right 16px  the last stop is one knob RADIUS in from the right cap,
-                            so the knob reaches that end flush.
-   That asymmetry is the requested behaviour, not an oversight. The dots, the
-   labels, the fill and the native input's travel all derive from these two numbers,
-   which is why they are variables rather than four copies of the same value. */
+/* The knob is the rail's full height (28px). Both ends keep the knob clear of the
+   rail's cap, but by DIFFERENT amounts — that asymmetry is the requested behaviour,
+   not an oversight:
+     --dmp-stop-left  28px  the first stop sits a full knob diameter in from the
+                            left cap, so the knob stops well short of that end;
+     --dmp-stop-right 16px  the last stop sits just past the knob's radius (14), so a
+                            hairline of track shows beyond the knob at the top level.
+   The right gap is deliberately the same weight as the knob's own ring: at 14 the
+   knob landed exactly on the cap and the two outlines met, which read as a smudge
+   rather than as a stop. The dots, the labels, the fill and the native input's
+   travel all derive from these two numbers, which is why they are variables rather
+   than four copies of the same value. */
 .dmp-slider { --dmp-rail-height: 28px; --dmp-thumb-size: 28px;
-  --dmp-stop-left: 28px; --dmp-stop-right: 14px; }
-/* Radius is a LITERAL 17px on a 32px-tall rail — deliberately ONE more than half the
+  --dmp-stop-left: 28px; --dmp-stop-right: 16px; }
+/* The accent.
+   The alias token is one step too pale on a dark panel: in the dark theme
+   --dsw-alias-state-business-primary resolves to the deepseek-400 step, which reads
+   as washed out against the panel surface. The ramp's next step down, deepseek-450,
+   is the same hue with the weight the bar needs. The alias token stays as the
+   fallback so a future ramp change still lands on something.
+   The preview pages carry these same values, which is why a preview can look right
+   while the app looks pale — the demo used to hard-code a blue of its own. */
+.dmp-slider { --dmp-accent: var(--dsw-static-deepseek-450,
+    var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary))); }
+/* Radius is a LITERAL 15px on a 28px-tall rail — deliberately ONE more than half the
    height, so the ends curve a touch harder than a true semicircle and read as round
    rather than as pillowed caps. Anything below half looks square; this is the
    user-tuned value.
@@ -673,6 +914,14 @@ const CSS = `
   margin: 12px 0 4px; border-radius: 15px; flex: none;
   clip-path: inset(0 round 15px);
   background: color-mix(in srgb, var(--dsw-alias-label-primary) 12%, transparent); }
+/* The outline: vector, like the knob's ring.
+   An inset box-shadow is a raster edge — 1px reads flat and 1.5px falls between
+   pixels and smears. This SVG stretches to the rail with preserveAspectRatio none
+   and keeps its stroke at exactly 1px through vector-effect, so the line is as
+   crisp as the knob's circle. It sits above the fill so it stays visible across the
+   blue, and pointer-events none keeps the range input reachable underneath. */
+.dmp-slider-outline { position: absolute; inset: 0; width: 100%; height: 100%;
+  pointer-events: none; z-index: 7; overflow: visible; }
 /* The stop axis. Its ends are the two stop offsets, which is why 0% is the first
    stop and 100% the last — the knob's travel, the dots, the labels and the fill all
    read from this one box. */
@@ -688,20 +937,108 @@ const CSS = `
 .dmp-slider-fill { position: absolute; top: 0; height: var(--dmp-rail-height);
   left: calc(var(--dmp-stop-left) * -1);
   width: calc(var(--dmp-effort-at) + var(--dmp-stop-left));
-  background: var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary));
+  background: var(--dmp-accent);
   z-index: 1; transition: width .15s ease-out; pointer-events: none; }
 .dmp-slider-dots { position: absolute; top: 0; bottom: 0; left: 0; right: 0;
   pointer-events: none; z-index: 2; }
-/* Stops stay SMALL and GREY: they mark the stations, the knob is what you grab.
-   The reached stop used to take the panel's surface colour, which is near-black in
-   the dark theme — a black pinhole punched into the blue. Both states now use the
-   label ramp, so a dot reads as grey on the track and as light grey on the fill. */
+/* Stops stay SMALL and GREY, and they are only visible AHEAD of the knob: the blue
+   fill already says "you are this far", so a dot sitting on it read as dust on the
+   colour. Unreached stops keep working as tick marks on the empty part of the track,
+   which is where they still carry information. */
 .dmp-slider-dot { position: absolute; top: 50%; width: 5px; height: 5px;
   border-radius: 50%; transform: translate(-50%, -50%);
   background: var(--dsw-alias-label-tertiary, currentColor); opacity: .55;
-  transition: opacity .15s ease-out, background .15s ease-out; }
-/* A reached stop sits on the coloured fill, so it lightens instead of going dark. */
-.dmp-slider-dot-lit { background: var(--dsw-alias-label-secondary, currentColor); opacity: .9; }
+  transition: opacity .15s ease-out; }
+.dmp-slider-dot-lit { opacity: 0; }
+/* The exhaust: a zero-size point pinned to the knob, carrying the particles.
+   It sits ABOVE the fill and BELOW the knob, so squares are born behind the disc and
+   drift out from under it. Its left offset carries the SAME transition as the knob — that
+   is the whole alignment contract: both are driven by --dmp-effort-at, so as long as
+   they animate with the same duration and easing the spawn point stays under the
+   knob while it travels. (A drag drops the transition on both; see the dragging
+   rule below, which is what fixed particles appearing ahead of the knob.) */
+.dmp-emit { position: absolute; top: 50%; left: var(--dmp-effort-at);
+  width: 0; height: 0; z-index: 3; pointer-events: none;
+  transition: left .15s ease-out; }
+/* One square. The dy0 offset spreads the spawn points down the knob cross-section;
+   the extra dy/dx send each one its own way so they do not travel as a block.
+
+   The colour is FIXED WHITE, not a theme token. The particles are meant to read as
+   light thrown off the bar, and the theme's primary label flips to near-black on a
+   light surface — which painted black specks over a pale blue fill. White is the one
+   value that works against both surfaces, so it is deliberately not themed.
+   --dmp-emit-reach (set per level) multiplies the travel: a low level throws its
+   squares a short way, a high level throws them much further. */
+.dmp-emit-p { position: absolute; left: 0; top: 0;
+  width: var(--sz, 4px); height: var(--sz, 4px); border-radius: 1px;
+  background: #fff;
+  box-shadow: 0 0 4px #fff;
+  opacity: 0; transform: translate(-50%, -50%);
+  /* Speed and rate.
+     The duration is how fast one square crosses its path; the delay is how far apart
+     consecutive squares are in time. Shortening both raises the speed AND the firing
+     rate: 1.7s / 106ms read as a lazy drift, 1.05s / 58ms reads as a jet. The delay
+     stays well under the duration on purpose — it has to, or the stream develops a
+     visible seam where one cycle hands over to the next. */
+  animation: dmp-emit 1.05s cubic-bezier(.22,.08,.62,1) infinite;
+  animation-delay: calc(var(--i) * -58ms); }
+/* The streaks left behind the sheet of squares.
+   A SHEET of parallel lines, not a wedge: all nine are the same length, the same
+   weight and the same opacity, evenly spaced across the knob's diameter. An earlier
+   version tapered them and let each drift, which made the silhouette converge on the
+   knob like a flame; the exhaust should leave the whole cross-section at once, so the
+   lines are deliberately uniform. Only the total length follows the level's reach.
+
+   The offset is a PIXEL amount around the centre, not a percentage: the emitter is a
+   zero-height box, and a percentage top resolves against that zero height, which
+   collapsed every streak onto the centre line.
+
+   The trail is ALWAYS in the DOM and fades in and out through opacity, rather than
+   being mounted only for the top level. Mounting it on the fly made it pop into
+   existence the instant the knob reached the last stop and vanish the instant it left
+   — the one jarring moment in an otherwise smooth control. Because opacity carries
+   the on/off state, the pulse animation drives filter instead, so the two never
+   fight over the same property. */
+.dmp-emit-trail { position: absolute; right: 4px; top: 50%;
+  width: calc(150px * var(--dmp-emit-reach, 1));
+  height: 2px; border-radius: 1px;
+  transform: translateY(calc(-50% + var(--off, 0px)));
+  background: linear-gradient(270deg,
+    #fff 0%,
+    #fff 8%,
+    color-mix(in srgb, #fff 62%, transparent) 26%,
+    color-mix(in srgb, #fff 30%, transparent) 50%,
+    color-mix(in srgb, #fff 11%, transparent) 74%,
+    transparent 100%);
+  opacity: 0;
+  transition: opacity .55s ease;
+  /* The same softness the single bar had: enough to melt the lines into one volume of
+     light at the knob, not enough to lose them as separate lines further out. */
+  filter: blur(1.5px);
+  animation: dmp-emit-pulse 1.7s ease-in-out infinite;
+  /* Staggered per streak so they shimmer out of step instead of pulsing as one band. */
+  animation-delay: calc(var(--n, 0) * -140ms); }
+/* The top level is the only one that shows the trail, but the change is a fade. */
+.dmp-emit[data-trail="on"] .dmp-emit-trail { opacity: .78; }
+@keyframes dmp-emit {
+  0% { transform: translate(-50%, -50%) translate(0, var(--dy0)) scale(1); opacity: 0; }
+  14% { opacity: .95; }
+  70% { opacity: .5; }
+  100% { transform: translate(-50%, -50%)
+    translate(calc(var(--dx) * var(--dmp-emit-reach, 1)),
+      calc(var(--dy0) + var(--dy) * var(--dmp-emit-reach, 1)))
+    scale(.2) rotate(var(--rot)); opacity: 0; } }
+/* The pulse drives filter, not opacity: opacity now carries the fade in and out
+   of the trail, and an animation on the same property would override the transition
+   and snap instead of fading. Brightness reads the same way at this scale. */
+@keyframes dmp-emit-pulse {
+  0%, 100% { filter: blur(1.5px) brightness(1); }
+  50% { filter: blur(1.5px) brightness(1.5); } }
+/* A drag is direct manipulation: the knob, the fill and the emitter all snap to the
+   pointer instead of easing, which keeps the particles born exactly at the knob. */
+.dmp-slider-dragging .dmp-slider-thumb,
+.dmp-slider-dragging .dmp-slider-fill,
+.dmp-slider-dragging .dmp-emit { transition: none; }
 /* The knob fills the rail's height and is drawn as an SVG, so no inherited
    border-radius, padding or box-sizing rule can square it off. Its size comes from
    --dmp-thumb-size; the stop offsets and the input's travel are derived from the
@@ -711,17 +1048,23 @@ const CSS = `
   margin-left: calc(var(--dmp-thumb-size) / -2);
   margin-top: calc(var(--dmp-thumb-size) / -2);
   display: block; overflow: visible; pointer-events: none; z-index: 5;
-  /* The knob takes the panel's grey in dark and pure white in light, with a black
-     ring in both. The two values swing with the host stylesheet's own media query,
-     so no JS theme detection is involved. */
+  /* The knob is the panel's own grey, ringed in the same grey at partial opacity.
+     Three attempts landed here. Pure black read as a hole (a dark ring on a dark disc
+     on a dark panel is no shape at all). A light grey read as a foreign object — it
+     matched neither the fill nor the track. Using the PANEL's own surface colour keeps
+     the knob in the same family as everything around it, and the partial opacity does
+     the separating: the ring is legible over the pale fill and over the dark track
+     without ever becoming a hard contour.
+     The two values swing with the host stylesheet's own media query, so no JS theme
+     detection is involved. */
   --dmp-thumb-fill: var(--dsw-alias-bg-module-platform);
-  --dmp-thumb-ring: #000;
+  --dmp-thumb-ring: color-mix(in srgb, var(--dsw-alias-bg-module-platform) 45%, transparent);
   filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--dsw-alias-label-primary) 28%, transparent));
   transition: left .15s ease-out, transform .12s ease; }
 .dmp-slider-rail:active .dmp-slider-thumb { transform: scale(1.06); }
 .dmp-slider-rail:has(.dmp-slider-input:focus-visible) .dmp-slider-thumb {
   box-shadow: 0 0 0 3px color-mix(in srgb,
-    var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary)) 35%, transparent); }
+    var(--dmp-accent) 35%, transparent); }
 /* The range input spans from the first stop's reach to the rail's right edge, and
    its native thumb is the knob's size. That makes its invisible thumb's centre
    travel exactly from --dmp-stop-left to (width - stop-right) — the same axis the
@@ -760,8 +1103,15 @@ const CSS = `
   font-family: Montserrat, var(--dsw-font-family-sans, system-ui, sans-serif);
   white-space: nowrap; cursor: pointer;
   max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
-.dmp-slider-tick[data-edge="start"] { transform: none; margin-left: -4px; }
-.dmp-slider-tick[data-edge="end"] { transform: translateX(-100%); margin-left: 4px; }
+/* Every label is centred on its stop.
+   The two end labels used to be re-anchored instead (no transform at the start, a full
+   translate at the end) so their text could not overflow the legend. That kept them
+   inside the box, but it also pulled them off their dots: the last label sat entirely
+   to the LEFT of its stop, which is exactly what makes "Max" look misaligned against
+   the dot above it. The legend already spans the stop axis and the labels are short,
+   so plain centring fits — and every label now shares one rule. */
+.dmp-slider-tick[data-edge="start"] { transform: translateX(-50%); margin-left: 0; }
+.dmp-slider-tick[data-edge="end"] { transform: translateX(-50%); margin-left: 0; }
 .dmp-slider-tick:hover:not(:disabled) { color: var(--dsw-alias-label-secondary);
   background: var(--dsw-alias-interactive-bg-hover); }
 .dmp-slider-tick:focus-visible { outline: 2px solid var(--dsw-alias-border-l3); outline-offset: -2px; }
@@ -770,23 +1120,24 @@ const CSS = `
    Bolding it made the selected label measurably wider and taller-looking than its
    neighbours, so the labels appeared to change size as the level moved. Keeping one
    weight keeps every label the same box; the accent colour carries the selection. */
-.dmp-slider-tick-active {
-  color: var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary)); }
+.dmp-slider-tick-active { color: var(--dmp-accent); }
 .dmp-slider-hint { margin: 5px 0 0; padding-top: 8px;
   border-top: 1px solid var(--dsw-alias-border-l1);
   font-size: 11px; line-height: 15px; color: var(--dsw-alias-label-secondary); }
-/* Light surfaces need a softer knob: a black ring reads as a hard edge on a
-   near-white panel, so the light theme pulls the ring to the host's border colour
-   and keeps the fill pure white. The two values swing with the host stylesheet's
-   own media query, so no JS theme detection is involved. */
+/* Light surfaces follow the same rule with their own panel colour: white fill, ringed
+   in that same white at partial opacity. On a near-white panel the ring still reads
+   because it sits over the blue fill for most of the travel, and where it crosses the
+   empty track the drop shadow supplies the edge instead. */
 @media (prefers-color-scheme: light) {
   .dmp-slider-thumb {
     --dmp-thumb-fill: var(--dsw-alias-bg-base);
-    --dmp-thumb-ring: var(--dsw-alias-border-l2);
+    --dmp-thumb-ring: color-mix(in srgb, var(--dsw-alias-bg-base) 55%, transparent);
   }
 }
 @media (prefers-reduced-motion: reduce) {
   .dmp-slider-fill, .dmp-slider-thumb { transition: none; }
+  /* The exhaust is decoration: with motion turned down it is simply not drawn. */
+  .dmp-emit { display: none; }
 }
 /* ---------------------------------------------------------------------------
    Rejected-selection notice
@@ -1363,6 +1714,14 @@ function createModelPicker(React) {
         className: 'dmp-panel dmp-panel-slider',
         role: 'dialog',
         'aria-label': t.effortHeading,
+        // The host lifts the composer's stacking context when one of its own menus
+        // is open: `.composerSeat:has([data-trigger-menu]) { z-index: 9 }`. Without
+        // it the seat stays at z-index 7, and the chat's "jump to latest" button
+        // (z-index 8, a sibling of the seat) paints over this panel no matter what
+        // z-index the panel itself asks for — a child cannot escape its parent's
+        // stacking context. Marking the panel is the supported way to ask for the
+        // same lift.
+        'data-trigger-menu': '',
         ref: effortAnchor.panelRef,
         style: effortAnchor.style
       },
@@ -1390,6 +1749,8 @@ function createModelPicker(React) {
       ? h('div', {
         className: 'dmp-panel',
         role: 'listbox',
+        // Same stacking lift as the effort panel: see the comment there.
+        'data-trigger-menu': '',
         ref: modelAnchor.panelRef,
         style: modelAnchor.style
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huai_xin/dsh-model-picker",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A searchable, provider-grouped replacement for the DSH composer's model picker.",
   "type": "module",
   "license": "MIT",