@huai_xin/dsh-model-picker 0.1.2 → 0.2.0

package/client.js

@@ -5,561 +5,472 @@
  * This bundle is what the Client module loader serves; it is the only browser
  * entry the loader knows about for this package.
  */
-//# module: src/core/store.js
+//# module: src/core/rank.js
 /**
- * A snapshot store with the contract the slot renderer's hooks expect.
+ * Fuzzy ranking for the model search box.
  *
- * The Client's own engine (`@deepseek-ai/dsh-client-store`) is a Harness Client
- * package, and a plain-JS plugin must not require those: they change without
- * notice and there is no type check here. This is the same four-method surface
- * the renderer needs — `getSnapshot`, `subscribe`, `set`, `update` — over a
- * state object that is replaced, never mutated.
+ * This is the shipped `rankByName` from `@deepseek-ai/dsh-client-ui-primitives`
+ * (the `/` menu's own search), vendored verbatim rather than required: the
+ * Client module table only carries `react`, and pulling a host package into the
+ * offline unit test would make it impossible to run without DSH installed. The
+ * algorithm is self-contained — no imports, no state — so copying it keeps the
+ * picker's results identical to the shipped menus while the source tree stays
+ * dependency-free.
  *
- * @param init - the initial state object.
- * @returns the store.
+ * What it does, per the original doc comment: the query must be a
+ * case-insensitive ORDERED SUBSEQUENCE of the candidate's name (or its `label`
+ * when it carries one). Prefix hits rank first, then the strongest alignment
+ * score over either key, then the source order of the input.
+ *
+ * Upstream: `packages/client/ui-primitives/src/rank-by-name.ts`.
  */
-function createStore(init) {
-  let state = init
-  const listeners = new Set()
-
-  const publish = (next) => {
-    state = next
-    for (const listener of [...listeners]) {
-      try {
-        listener()
-      } catch {
-        // One failing subscriber must not stop the others.
-      }
-    }
-  }
 
-  return {
-    getSnapshot: () => state,
-    subscribe: (listener) => {
-      listeners.add(listener)
-      return () => { listeners.delete(listener) }
-    },
-    set: (next) => publish(next),
-    update: (mutate) => {
-      const draft = { ...state }
-      mutate(draft)
-      publish(draft)
-    }
-  }
+/** Extra weight for name starts and separator boundaries. */
+function boundaryBonus(name, index) {
+  return index === 0 || name.charAt(index - 1) === '-' || name.charAt(index - 1) === '_' ? 8 : 0
 }
 
 /**
- * Subscribe to any `{ getSnapshot, subscribe }` source, for a component.
+ * Score the strongest ordered-subsequence alignment in O(name × query).
  *
- * @param useState - React's useState, passed in so this module needs no import.
- * @param useEffect - React's useEffect.
- * @param source - the observable source, or undefined while it is not resolved.
- * @returns the current snapshot.
+ * Boundary and adjacent matches earn weight; skipped and leading characters
+ * cost weight.
+ *
+ * @param name - the lowercased candidate name.
+ * @param query - the lowercased query.
+ * @returns the score, or undefined when the query is not a subsequence.
  */
-function readSnapshot(useState, useEffect, source) {
-  const [value, setValue] = useState(() => source?.getSnapshot?.())
-  useEffect(() => {
-    if (source === undefined || source === null) return undefined
-    const update = () => setValue(source.getSnapshot())
-    update()
-    return source.subscribe(update)
-  }, [source])
-  return value
-}
-
-//# module: src/core/catalog.js
-
-/**
- * The Host notifications that can change the catalogue.
- *
- * `llm/adapters-updated` covers a provider adding or removing a model; the other
- * three cover the inputs a provider's availability is derived from (settings,
- * stored credentials, credential references). The shipped directory subscribes to
- * exactly these four, so a model switched off in a provider's own panel
- * disappears here on the same tick it disappears there. Listening to the first
- * one alone left this picker offering models the Host would refuse until the page
- * was reloaded.
- */
-const INVALIDATION_EVENTS = Object.freeze([
-  'llm/adapters-updated',
-  'settings/document-updated',
-  'credentials/record-updated',
-  'credentials/reference-updated'
-])
-
-/**
- * One Host-generation catalogue shared by every session.
- *
- * Mirrors the shipped `ModelCatalogDirectory`: a single value, one in-flight
- * request shared by every reader, a generation counter that discards responses
- * from a superseded generation, and a `reasoning` map that remembers each
- * model's effort metadata *after* the model leaves the catalogue — so a level
- * still shows its name while its model is gone.
- *
- * @param resolveRemote - returns the client remote face carrying `session.modelCatalog`.
- *   A THUNK, not the face itself: this catalogue is built in `apply`, where the
- *   `remote` service is often not visible yet (it arrives later in the client boot
- *   sequence). Capturing the value here froze `undefined` and every load then
- *   reported "modelCatalog is unavailable".
- * @param onDiagnostic - optional sink for load-stage notes.
- * @returns the catalogue controller.
- */
-function createCatalog(resolveRemote, onDiagnostic) {
-  const store = createStore({ value: null, status: 'idle', error: null })
-  const reasoning = new Map()
-  // Bumped by every invalidation. A response that resolves under an older
-  // generation is dropped instead of publishing a catalogue the Host has
-  // already superseded.
-  let generation = 0
-  let inflight
-
-  const note = (message) => {
-    try { onDiagnostic?.(message) } catch { /* diagnostics never break the load */ }
-  }
-
-  /** The remote face as it is right now, or undefined while the service is absent. */
-  const currentRemote = () => {
-    try { return typeof resolveRemote === 'function' ? resolveRemote() : resolveRemote } catch { return undefined }
-  }
-
-  const reasoningFor = (selection) => selection === null || selection === undefined
-    ? undefined
-    : reasoning.get(JSON.stringify([selection.provider, selection.model]))
-
-  const load = () => {
-    const state = store.getSnapshot()
-    if (state.status === 'ready' && state.value !== null) return Promise.resolve(state.value)
-    if (inflight !== undefined) return inflight
-    const remote = currentRemote()
-    const run = remote?.session?.modelCatalog
-    if (typeof run !== 'function') {
-      note('modelCatalog 不可用：remote 尚未就绪')
-      store.set({ value: state.value, status: 'error', error: 'modelCatalog is unavailable' })
-      return Promise.resolve(undefined)
-    }
-    const at = generation
-    // Keep the previous value visible while reloading: an invalidation is not an
-    // error, and blanking the list would flash on every provider edit.
-    store.update((draft) => { draft.status = 'loading'; draft.error = null })
-    const operation = Promise.resolve(run.call(remote.session)).then((result) => {
-      if (result?.ok !== true) {
-        note(`modelCatalog 失败：${result?.error?.code ?? '?'} ${result?.error?.message ?? ''}`)
-        if (at === generation) {
-          store.set({
-            value: store.getSnapshot().value,
-            status: 'error',
-            error: result?.error?.message ?? 'failed'
-          })
-        }
-        return undefined
-      }
-      const groups = Array.isArray(result.value?.groups) ? result.value.groups : []
-      note(`modelCatalog 成功：${groups.length} 组，gen ${at}/${generation}`)
-      if (at === generation) {
-        for (const group of groups) {
-          for (const model of group.models) {
-            reasoning.set(JSON.stringify([group.id, model.id]), model.reasoning)
-          }
-        }
-        store.set({ value: result.value, status: 'ready', error: null })
-      } else {
-        // The result was dropped: another load superseded it. Say so, because a
-        // silently discarded success is what leaves the store on `loading`.
-        note(`modelCatalog 结果被丢弃（gen ${at} != ${generation}）`)
-      }
-      return result.value
-    }).catch((error) => {
-      note(`modelCatalog 抛错：${error instanceof Error ? error.message : String(error)}`)
-      if (at === generation) {
-        store.set({
-          value: store.getSnapshot().value,
-          status: 'error',
-          error: error instanceof Error ? error.message : String(error)
-        })
-      }
-      return undefined
-    }).finally(() => {
-      if (at === generation && inflight === operation) inflight = undefined
-    })
-    inflight = operation
-    return operation
-  }
-  const invalidate = (clear) => {
-    generation += 1
-    inflight = undefined
-    store.set({
-      value: clear === true ? null : store.getSnapshot().value,
-      status: 'idle',
-      error: null
-    })
-  }
-
-  /** Re-read on the next explicit load, keeping the stale value on screen. */
-  const refresh = () => {
-    note(`refresh 被调用（gen ${generation} → ${generation + 1}）`)
-    invalidate(false)
-    load()
-  }
-
-  /** Drop everything: the value belonged to a Host generation that is gone. */
-  const resetGeneration = () => { reasoning.clear(); invalidate(true); load() }
-
-  /**
-   * Subscribe the invalidation events.
-   *
-   * Call this from the plugin's `apply` body, not from a scope or slot callback.
-   * The gateway registers a forwarded-event listener in the CALLING fiber's
-   * private event domain, and only the plugin's own `apply` fiber is in the
-   * domain the dispatcher publishes to — a subscription installed from a
-   * `ctx.inject` callback is accepted (it returns a disposer) but never fires.
-   *
-   * @param target - the client remote carrying `$on`.
-   * @param onEvent - optional observer called with each delivered event name.
-   * @returns a disposer removing every subscription.
-   */
-  const attach = (target, onEvent) => {
-    const offs = []
-    const failed = []
-    for (const event of INVALIDATION_EVENTS) {
-      try {
-        if (typeof target?.$on !== 'function') {
-          failed.push(`${event}: 目标没有 $on`)
-          continue
-        }
-        const off = target.$on(event, () => {
-          onEvent?.(event)
-          refresh()
-        })
-        if (typeof off === 'function') offs.push(off)
-        else failed.push(`${event}: 返回的不是 disposer`)
-      } catch (error) {
-        failed.push(`${event}: ${error instanceof Error ? error.message : String(error)}`)
-      }
-    }
-    note(`订阅结果：成功 ${offs.length}/${INVALIDATION_EVENTS.length}${failed.length > 0 ? `；问题：${failed.join(' | ')}` : ''}`)
-    return () => { for (const off of offs) off() }
-  }
-
-  /** Whether this target can carry event subscriptions at all. */
-  const canAttach = (target) => typeof target?.$on === 'function'
-
-  return { store, reasoningFor, load, refresh, resetGeneration, attach, canAttach }
+function alignmentScore(name, query) {
+  if (query.length > name.length) return undefined
+  const noMatch = Number.NEGATIVE_INFINITY
+  let previous = Array(name.length).fill(noMatch)
+  for (let index = 0; index < name.length; index += 1) {
+    if (name.charAt(index) === query.charAt(0)) previous[index] = 1 + boundaryBonus(name, index) - index
+  }
+  for (let queryIndex = 1; queryIndex < query.length; queryIndex += 1) {
+    const current = Array(name.length).fill(noMatch)
+    let left = noMatch
+    let leftLeft = noMatch
+    let bestGapped = noMatch
+    for (const [index, prior] of previous.entries()) {
+      if (leftLeft !== noMatch) bestGapped = Math.max(bestGapped, leftLeft + index - 2)
+      if (name.charAt(index) === query.charAt(queryIndex)) {
+        const bonus = 1 + boundaryBonus(name, index)
+        let score = noMatch
+        if (left !== noMatch) score = left + bonus + 4
+        if (bestGapped !== noMatch) score = Math.max(score, bestGapped + bonus + 1 - index)
+        current[index] = score
+      }
+      leftLeft = left
+      left = prior
+    }
+    previous = current
+  }
+  let best = noMatch
+  for (const score of previous) best = Math.max(best, score)
+  return best === noMatch ? undefined : best
 }
 
-//# module: src/core/selection.js
 /**
- * Reading a model selection out of whatever shape the Host handed over.
+ * Rank named items by a search query.
  *
- * The projection carries the selection; older and newer Host generations have
- * spelled the fields differently (`provider` / `providerId` / `provider_id`),
- * so every known shape is accepted and an unknown one simply yields `null`
- * rather than guessing.
- *
- * @param projection - a projection frame, a selection, or nothing.
- * @returns `{ provider, model, reasoningEffort }`, or null when unreadable.
+ * @param items - candidates in source order; an item's optional `label` is a
+ *   second search key beside its `name`.
+ * @param rawQuery - the text typed into the search box, matched case-insensitively.
+ * @returns the matching items: prefix hits first, then by alignment score, then
+ *   in source order. The input list itself for an empty query.
  */
-function readSelection(projection) {
-  const value = projection?.next ?? projection?.current ?? projection
-  if (value === null || typeof value !== 'object') return null
-  const provider = value.provider ?? value.providerId ?? value.provider_id
-  const model = value.model ?? value.modelId ?? value.model_id
-  if (typeof provider !== 'string' || typeof model !== 'string') return null
-  return { provider, model, reasoningEffort: value.reasoningEffort }
+function rankByName(items, rawQuery) {
+  const query = String(rawQuery ?? '').toLowerCase()
+  if (query === '') return items
+  const ranked = []
+  items.forEach((item, index) => {
+    const name = String(item?.name ?? item?.id ?? '')
+    const keys = item?.label === undefined ? [name] : [name, String(item.label)]
+    let prefix = false
+    let score
+    for (const key of keys) {
+      const lower = key.toLowerCase()
+      const keyScore = alignmentScore(lower, query)
+      if (keyScore === undefined) continue
+      prefix ||= lower.startsWith(query)
+      score = score === undefined ? keyScore : Math.max(score, keyScore)
+    }
+    if (score !== undefined) ranked.push({ item, index, prefix, score })
+  })
+  ranked.sort((left, right) => Number(right.prefix) - Number(left.prefix) ||
+    right.score - left.score ||
+    left.index - right.index)
+  return ranked.map((match) => match.item)
 }
 
+//# module: src/ui/Chevron.js
 /**
- * Whether this session may change its model at all.
- *
- * An addressed subagent session cannot: the Host rejects the RPC. The shipped
- * picker renders nothing in that case rather than offering a control whose every
- * click fails. `subagentAddress` is the same probe it uses; a client generation
- * without it counts as available, so an older build keeps showing the control
- * instead of silently losing it.
+ * The chevron that turns when its panel is open.
  *
- * @param sessions - the sessions service face.
- * @param sessionId - the session being rendered.
- * @returns whether the model control should be offered.
+ * @param props - `{ h, open }`: the createElement function and the open flag.
+ * @returns the svg element.
  */
-function isAvailable(sessions, sessionId) {
-  try {
-    if (typeof sessions?.subagentAddress !== 'function') return true
-    return sessions.subagentAddress(sessionId) === undefined
-  } catch {
-    return true
-  }
+function Chevron({ h, open }) {
+  return h('svg', {
+    className: `dmp-chevron${open ? ' dmp-chevron-open' : ''}`,
+    viewBox: '0 0 16 16', width: 14, height: 14, 'aria-hidden': true
+  }, h('path', {
+    d: 'M4 6.5L8 10.5L12 6.5', fill: 'none', stroke: 'currentColor', 'stroke-width': 1.6,
+    'stroke-linecap': 'round', 'stroke-linejoin': 'round'
+  }))
 }
 
-//# module: src/core/directory.js
-
-
+//# module: src/ui/anchor.js
 /**
- * One session's directory, mirroring the shipped `ModelDirectory`.
+ * Anchor a popover to the centre of its trigger, clamped to the viewport.
  *
- * The catalogue is Host-wide, but the *selection* is per session: which model is
- * in effect, whether that model is still routable, what is in flight, and which
- * provider groups failed to load. The shipped picker renders all four, and a
- * replacement that collapsed them into "the catalogue plus the projection" loses
- * the in-flight state (so a slow switch shows nothing) and the failure list (so a
- * broken provider group is silently missing).
+ * Both popovers in this picker open ABOVE their button, and both are wider than
+ * the button they belong to. Anchoring by a fixed side (`left: 0` or `right: 0`)
+ * makes the panel drift away from the control the user just pressed, and near
+ * either screen edge it runs off the window entirely.
  *
- * The store contract is the same one the renderer's hooks read:
- * `{ current, routable, groups, failures, status, pending, error }`.
+ * The hook measures the trigger, centres the panel on it, then shifts the result
+ * so the panel stays inside the viewport with a small margin. It returns:
  *
- * @param catalog - the shared catalogue controller.
- * @param projectedFace - the session's `modelSelection` projection face.
- * @param remote - the client remote face carrying `session.selectModel`.
- * @param sessionId - the owning session.
- * @returns the directory controller.
+ *  - `ref`     — attach to the trigger element,
+ *  - `panelRef`— attach to the panel element (its width depends on content),
+ *  - `style`   — spread onto the panel: centring transform, clamp offset, and
+ *                `visibility` gated on the first measurement so the panel never
+ *                paints at the wrong place for a frame.
+ *
+ * @param React - the React runtime.
+ * @param options - `{ open, fallbackWidth, deps }`.
+ * @returns `{ ref, panelRef, style }`.
  */
-function createDirectory(catalog, projectedFace, remote, sessionId) {
-  const store = createStore({
-    current: null,
-    routable: null,
-    groups: [],
-    failures: [],
-    status: 'idle',
-    pending: null,
-    error: null
-  })
-  // Latest selection wins: an older response must never overwrite a newer one.
-  let generation = 0
-  let disposed = false
-
-  /**
-   * Recompute the effective selection from the two inputs that define it.
-   *
-   * `intended` is the session's explicit choice, else the catalogue default —
-   * exactly the shipped precedence. `routable` says whether the Host would still
-   * accept it, which is what lets the trigger distinguish "this model" from "a
-   * model that no longer exists".
-   */
-  const sync = () => {
-    if (disposed) return
-    const catalogState = catalog.store.getSnapshot()
-    const projected = readSelection(projectedFace?.getSnapshot?.())
-    const intended = projected ?? readSelection(catalogState.value?.default)
-    const reasoning = catalog.reasoningFor(intended)
-    const effort = intended?.reasoningEffort ?? reasoning?.defaultEffort
-    const retainedEffort = effort === undefined
-      ? undefined
-      : reasoning?.efforts?.find((level) => level.id === effort)?.name ?? effort
-    const ready = catalogState.status === 'ready' && catalogState.value !== null
-    if (!ready || intended === null) {
-      store.set({
-        current: catalogState.value === null ? null : store.getSnapshot().current,
-        ...retainedEffort === undefined ? {} : { retainedEffort },
-        routable: null,
-        groups: catalogState.value?.groups ?? [],
-        failures: catalogState.value?.failures ?? [],
-        status: catalogState.status === 'error' ? 'error' : 'loading',
-        pending: store.getSnapshot().pending,
-        error: catalogState.error
-      })
-      return
-    }
-    const routable = (catalogState.value.groups ?? []).some((group) =>
-      group.id === intended.provider && (group.models ?? []).some((model) => model.id === intended.model))
-    store.set({
-      current: intended,
-      ...retainedEffort === undefined ? {} : { retainedEffort },
-      routable,
-      groups: catalogState.value.groups,
-      failures: catalogState.value.failures ?? [],
-      status: store.getSnapshot().status === 'selecting' ? 'selecting' : 'ready',
-      pending: store.getSnapshot().pending,
-      error: null
-    })
-  }
+function createAnchoredPanel(React, options) {
+  const { useState, useEffect, useRef } = React
+  const { open, fallbackWidth = 280, margin = 8, deps = [] } = options
 
-  const unsubscribeCatalog = catalog.store.subscribe(() => { sync() })
-  const unsubscribeProjection = projectedFace?.subscribe?.(() => { sync() })
-  sync()
+  const [anchor, setAnchor] = useState({ offset: 0, ready: false })
+  const triggerRef = useRef(null)
+  const panelRef = useRef(null)
 
-  /**
-   * Select the complete provider/model/effort triple.
-   *
-   * The pending selection is published before the RPC and cleared after it, so
-   * the trigger can show which row is settling. A response that arrives after a
-   * newer selection (or after disposal) is dropped rather than written, which is
-   * the bug a bare `busy` flag cannot avoid: two fast clicks would otherwise let
-   * the first reply overwrite the second choice.
-   *
-   * @param selection - provider, model, and optional reasoningEffort.
-   * @returns the Host result, or a synthesized failure.
-   */
-  const select = async (selection) => {
-    // The adapter's default effort is part of the selection the shipped picker
-    // submits, so a model switch also settles the level instead of leaving the
-    // Host to guess on the next call.
-    const nextEffort = selection.reasoningEffort ?? catalog.reasoningFor(selection)?.defaultEffort
-    const next = { ...selection, ...nextEffort === undefined ? {} : { reasoningEffort: nextEffort } }
-    const generationAt = ++generation
-    store.update((draft) => {
-      draft.status = 'selecting'
-      draft.pending = next
-      draft.error = null
-    })
-    const run = remote?.session?.selectModel
-    if (typeof run !== 'function') {
-      store.update((draft) => {
-        draft.status = 'error'
-        draft.pending = null
-        draft.error = 'selectModel is unavailable'
-      })
-      return { ok: false, error: { code: 'unavailable', message: 'selectModel is unavailable' } }
-    }
-    let result
-    try {
-      result = await run.call(remote.session, {
-        sessionId,
-        provider: next.provider,
-        model: next.model,
-        ...next.reasoningEffort === undefined ? {} : { reasoningEffort: next.reasoningEffort }
-      })
-    } catch (error) {
-      result = {
-        ok: false,
-        error: { code: 'threw', message: error instanceof Error ? error.message : String(error) }
-      }
+  useEffect(() => {
+    if (!open) {
+      setAnchor({ offset: 0, ready: false })
+      return undefined
     }
-    if (disposed || generationAt !== generation) {
-      return result?.ok === true ? { ok: true, value: undefined } : result
+    const measure = () => {
+      const trigger = triggerRef.current
+      if (trigger === null || typeof trigger.getBoundingClientRect !== 'function') return
+      const rect = trigger.getBoundingClientRect()
+      const viewport = (typeof window !== 'undefined' && window.innerWidth)
+        || (typeof document !== 'undefined' && document.documentElement?.clientWidth)
+        || 0
+      if (viewport === 0) return
+
+      // Read the panel's real width: it depends on content (a five-level slider is
+      // wider than a three-level one). `visibility: hidden` does not affect
+      // `getBoundingClientRect`, so the width is available before the first paint.
+      // The ref is attached in the same commit the panel is rendered in, so it is
+      // set by the time this effect runs.
+      const panel = panelRef.current
+      const measured = panel !== null && panel !== undefined
+        && typeof panel.getBoundingClientRect === 'function'
+        ? panel.getBoundingClientRect().width
+        : 0
+      const width = measured > 0 ? measured : Math.min(fallbackWidth, viewport - 32)
+
+      const centre = rect.left + rect.width / 2
+      const centred = centre - width / 2
+      const maxLeft = viewport - width - margin
+      const clamped = Math.max(margin, Math.min(centred, Math.max(margin, maxLeft)))
+      setAnchor({ offset: clamped - centred, ready: true })
     }
-    if (result?.ok !== true) {
-      store.update((draft) => {
-        draft.status = 'error'
-        draft.pending = null
-        draft.error = `${result?.error?.code ?? 'error'}: ${result?.error?.message ?? 'failed'}`
-      })
-      return result
-    }
-    store.update((draft) => {
-      draft.status = 'ready'
-      draft.pending = null
-      draft.error = null
-    })
-    /**
-     * Do NOT re-project here.
-     *
-     * `sync()` recomputes `current` from the session's projected selection. The
-     * Host answers `selectModel` before it publishes that projection, so calling
-     * `sync()` at this point reads the OLD selection and writes it straight back
-     * over the one just chosen — the picker then looks like the click did
-     * nothing. The projection's own subscription calls `sync()` when the Host
-     * actually publishes, which is the only moment the new value is real.
-     *
-     * Until that push arrives, `current` is the selection the Host just
-     * acknowledged. `selected` in the answer is authoritative when present;
-     * otherwise the triple we sent is what the Host accepted.
-     */
-    const settled = readSelection(result?.value?.selected) ?? next
-    store.update((draft) => {
-      draft.current = settled
-      draft.routable = true
-    })
-    return { ok: true, value: undefined }
-  }
 
-  /** Invalidate an in-flight response from a previous Host generation. */
-  const resetConnected = () => {
-    if (disposed) return
-    generation += 1
-    store.update((draft) => {
-      if (draft.status === 'selecting') draft.status = 'idle'
-      draft.pending = null
-      draft.error = null
-    })
-    sync()
-  }
+    measure()
+    // Second pass after layout: the first can see the min-width instead of the
+    // real width when the content is wider than the minimum.
+    const raf = typeof requestAnimationFrame === 'function'
+      ? requestAnimationFrame(measure)
+      : undefined
+    if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+      window.addEventListener('resize', measure)
+      return () => {
+        window.removeEventListener('resize', measure)
+        if (raf !== undefined && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(raf)
+      }
+    }
+    return undefined
+    // `deps` carries content-dependent values (level count, model count) that
+    // change the panel's width without changing `open`.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, ...deps])
 
-  /** Ensure the shared catalogue is loaded, then re-project. */
-  const load = async () => {
-    await catalog.load()
-    sync()
-    return store.getSnapshot()
+  return {
+    ref: triggerRef,
+    panelRef,
+    style: {
+      left: '50%',
+      right: 'auto',
+      transform: `translateX(calc(-50% + ${anchor.offset}px))`,
+      visibility: anchor.ready ? 'visible' : 'hidden'
+    }
   }
+}
 
-  /** Scope teardown: late settlements lose write access to the store. */
-  const dispose = () => {
-    disposed = true
-    unsubscribeCatalog?.()
-    unsubscribeProjection?.()
-  }
+//# module: src/ui/caption-glyphs.js
+/**
+ * The panel heading as vector art.
+ *
+ * Why a path and not text: Montserrat has no CJK glyphs, so the four
+ * characters cannot get the brand face from a font stack. These outlines were
+ * taken from Noto Sans SC — the closest geometric match available — with a
+ * rounded stroke applied so the joins read like Montserrat's.
+ *
+ * Filled with `currentColor`, so the mark follows the theme exactly as the text
+ * beside it does, and holds its shape at any zoom or DPI.
+ */
+const CAPTION_VIEWBOX = '0 0 3891 910'
 
-  return { store, select, load, resetConnected, dispose, sync }
-}
+/** One entry per character: horizontal offset, baseline, and outline. */
+const CAPTION_GLYPHS = [
+  { x: -61, y: 833, d: 'M293 248 L323 248 L323 15 Q323 -5 350 -18 L398 -18 Q409 -18 474 -18 Q553 -18 623 -18 L638 -18 Q666 -18 694 2 Q706 64 708 127 Q713 124 723 118 Q733 114 737 113 Q734 48 718 -22 Q679 -48 639 -48 Q633 -48 585 -48 Q520 -48 454 -48 Q406 -48 401 -48 Q360 -48 312 -38 Q293 -11 293 16 Z M379 294 L399 312 Q439 292 523 240 Q597 187 621 164 L601 143 Q578 165 504 219 Q419 273 379 294 Z M754 238 L780 249 Q811 211 872 120 Q921 33 933 -1 L905 -15 Q892 19 845 107 Q785 199 754 238 Z M175 233 L200 225 Q189 186 156 94 Q113 7 87 -25 L61 -13 Q88 19 131 105 Q164 196 175 233 Z M183 557 L183 386 L808 386 L808 557 Z M183 755 L183 586 L808 586 L808 755 Z M154 784 L837 784 L837 357 L154 357 Z M483 773 L513 773 L513 372 L483 372 Z' },
+  { x: 939, y: 833, d: 'M748 205 L778 205 Q778 205 777 198 Q777 189 776 186 Q761 78 730 -23 L708 -42 Q695 -52 668 -58 L645 -59 Q622 -59 521 -56 L463 -52 Q462 -45 458 -29 L453 -22 Q493 -26 569 -30 Q626 -31 638 -31 Q658 -31 679 -28 L686 -23 Q706 -8 733 92 L748 200 Z M313 205 L759 205 L759 176 L306 176 Z M368 361 L845 361 L845 331 L354 331 Z M73 519 L933 519 L933 489 L73 489 Z M166 698 L705 698 L705 669 L166 669 Z M442 831 L472 831 L472 505 L442 505 Z M857 778 L882 763 Q806 670 620 508 Q410 368 185 252 L68 206 Q66 210 58 219 Q49 229 44 232 Q163 276 392 390 Q602 529 784 689 L857 778 Z M360 361 L392 361 Q375 314 333 211 L317 176 L285 176 Q304 214 344 317 L360 361 Z' },
+  { x: 1939, y: 833, d: 'M378 -13 Q440 -9 608 3 Q799 17 896 25 L895 -3 Q803 -10 618 -25 Q451 -38 385 -43 Z M783 134 L808 148 Q838 116 894 40 Q940 -33 952 -62 L926 -77 Q914 -48 869 26 Q812 102 783 134 Z M456 406 L456 220 L863 220 L863 406 Z M427 435 L892 435 L892 190 L427 190 Z M477 747 L477 578 L837 578 L837 747 Z M448 776 L867 776 L867 549 L448 549 Z M642 560 L672 560 L672 -14 L642 -16 Z M84 324 L323 324 L323 294 L84 294 Z M315 324 L345 324 Q345 324 344 317 Q344 307 343 304 Q336 186 319 43 Q299 -29 285 -43 Q276 -53 252 -62 L233 -62 Q217 -63 157 -61 L124 -58 Q123 -52 120 -35 L115 -29 Q153 -32 216 -34 L228 -34 Q241 -34 256 -31 L262 -24 Q273 -13 291 59 Q308 201 315 317 Z M97 551 L127 551 Q123 510 110 415 Q97 327 91 295 L61 295 Q68 328 82 417 Q93 511 97 551 Z M110 551 L329 551 L329 747 L64 747 L64 776 L358 776 L358 522 L110 522 Z' },
+  { x: 2939, y: 833, d: 'M200 551 L928 551 L928 522 L200 522 Z M220 259 L816 259 L816 229 L220 229 Z M386 659 L416 659 L416 376 L720 376 L720 659 L749 659 L749 347 L386 347 Z M807 259 L814 259 L820 261 L839 248 Q797 173 657 65 Q481 -8 286 -53 L187 -65 Q186 -60 178 -44 L174 -38 Q269 -28 461 14 Q633 83 768 184 L807 252 Z M371 228 Q422 151 598 39 Q825 -31 952 -45 Q949 -48 942 -58 Q936 -67 934 -71 Q808 -54 579 19 Q398 135 345 216 Z M155 718 L941 718 L941 688 L155 688 Z M141 718 L171 718 L171 441 Q171 385 164 254 Q144 117 106 -15 L74 -72 Q72 -69 62 -63 Q53 -57 49 -56 Q81 0 117 128 Q136 260 141 386 L141 441 Z M484 824 L512 833 Q531 805 570 737 L579 714 L551 702 Q541 726 504 796 L484 824 Z' },
+]
 
-//# module: src/core/directories.js
+//# module: src/ui/CaptionMark.js
 
 /**
- * The `modelDirectories` service: one directory per session, shared by
- * everything that renders a model seat.
+ * The panel heading, drawn as vector art.
+ *
+ * Montserrat has no CJK glyphs, so a font stack cannot give these four characters
+ * the host's brand face — they always fall back to the platform UI font. This
+ * renders them from outlines instead, so the heading keeps one shape everywhere and
+ * can be styled like a mark rather than a run of text.
  *
- * The shipped plugin registers exactly this service, and reusing its instance is
- * what keeps a replacement picker and the `/model` popup agreeing on one
- * selection state. When it is absent (the shipped bundle disabled, an older
- * build), this plugin provides its own under the same name so the rest of the
- * code has one contract either way.
+ * The fill is `currentColor`: the mark inherits whatever colour the surrounding
+ * element already resolved from the theme tokens, so light and dark follow
+ * automatically and no JS has to read the theme.
  *
- * @param catalog - the shared catalogue controller.
- * @param sessions - the sessions service face.
- * @param resolveRemote - returns the client remote face. A thunk for the same
- *   reason the catalogue takes one: the service is often not visible yet when
- *   this object is built, and capturing it froze `undefined`.
- * @returns the service object with `directoryFor`.
+ * The text is still exposed to assistive tech through `aria-label` and a `<title>`,
+ * because the glyphs themselves carry no semantics.
+ *
+ * @param props - `{ h, label, className, height }`.
+ * @returns the SVG element tree.
  */
-function createDirectoryService(catalog, sessions, resolveRemote) {
-  /** The remote face as it is right now, or undefined while the service is absent. */
-  const currentRemote = () => {
-    try { return typeof resolveRemote === 'function' ? resolveRemote() : resolveRemote } catch { return undefined }
-  }
+function createCaptionMark(React) {
+  const h = React.createElement
 
-  /**
-   * Keyed by session id, not by binding object.
-   *
-   * The shipped resolver keys a WeakMap by `sessions.binding(id)` because it
-   * disposes each directory with the session scope. Keying by the binding here
-   * would be wrong for a different reason: a binding accessor is free to return a
-   * fresh wrapper per call, and each call would then allocate a new directory —
-   * every remount of the seat losing the in-flight selection and re-projecting
-   * from scratch. The id is the stable identity; `directoryFor` is called per
-   * render, so it must be cheap and idempotent.
-   */
-  const directories = new Map()
-
-  const directoryFor = (sessionId) => {
-    const key = String(sessionId)
-    const existing = directories.get(key)
-    if (existing !== undefined) return existing
-    const binding = (() => {
-      try { return sessions?.binding?.(sessionId) } catch { return undefined }
-    })()
-    const projectedFace = (() => {
-      try { return binding?.session?.projections?.faceOf?.('modelSelection') } catch { return undefined }
-    })()
-    const directory = createDirectory(catalog, projectedFace, currentRemote(), sessionId)
-    directories.set(key, directory)
-    return directory
+  return function CaptionMark({ label, className = 'dmp-caption-mark', height = 19 }) {
+    // The outlines use font units with Y pointing up, so each glyph is flipped on
+    // its own baseline. Doing it per glyph keeps the path data verbatim.
+    const glyphs = CAPTION_GLYPHS.map((glyph, index) => h('path', {
+      key: index,
+      transform: `translate(${glyph.x} ${glyph.y}) scale(1 -1)`,
+      d: glyph.d
+    }))
+
+    return h('svg', {
+      className,
+      viewBox: CAPTION_VIEWBOX,
+      height,
+      // Width follows the viewBox ratio, so `height` alone is enough to size it.
+      role: 'img',
+      'aria-label': label,
+      focusable: 'false'
+    },
+      h('title', null, label),
+      h('g', {
+        // A rounded stroke widens the strokes and softens every join, which is what
+        // brings the geometric Noto skeleton closer to Montserrat's weight.
+        fill: 'currentColor',
+        stroke: 'currentColor',
+        strokeWidth: 76,
+        strokeLinejoin: 'round',
+        strokeLinecap: 'round'
+      }, glyphs))
   }
-
-  return { directoryFor, directories }
 }
 
-//# module: src/ui/Chevron.js
+//# module: src/ui/EffortSlider.js
 /**
- * The chevron that turns when its panel is open.
+ * A discrete reasoning slider over the model's declared levels.
  *
- * @param props - `{ h, open }`: the createElement function and the open flag.
- * @returns the svg element.
+ * The visuals inherit the Host theme. A real range input owns pointer and
+ * keyboard interaction; the thin track and thumb are its painted layer. Labels
+ * remain clickable jump targets.
+ *
+ * ## Why this component keeps its own position
+ *
+ * Every stop submits a selection to the Host, and the Host answers a round trip
+ * later. Two things follow from that, and both were visible as "the thumb does
+ * not follow the mouse":
+ *
+ *  - A CONTROLLED input (`value={index}`) gets the old index written back on
+ *    every parent render, so the thumb snaps backwards mid-drag.
+ *  - Re-submitting on every pixel of travel queues a request per stop, and the
+ *    directory flips to `selecting` in between — which used to disable the input
+ *    and kill the gesture after the first stop.
+ *
+ * So the input is uncontrolled and this component tracks the live stop itself.
+ * `onInput` updates local state only (instant, no Host involved); the commit to
+ * the Host happens once, on `onChange` — the event browsers fire when the pointer
+ * is released. A drag is therefore always smooth, and one gesture is one request.
+ *
+ * The one thing the uncontrolled input cannot do on its own is follow a level
+ * chosen WITHOUT a drag — clicking a label under the rail, or a level arriving
+ * from `/model`. Those change `activeId` while the input's internal value still
+ * points at the old stop, so the next key press would start from there. A ref
+ * writes the value back whenever no drag is in progress; it is never written
+ * during a gesture, which is exactly what keeps the thumb glued to the pointer.
+ *
+ * @param props - `{ h, efforts, activeId, disabled, onChange, t, caption }`.
+ * @returns the slider element tree.
  */
-function Chevron({ h, open }) {
-  return h('svg', {
-    className: `dmp-chevron${open ? ' dmp-chevron-open' : ''}`,
-    viewBox: '0 0 16 16', width: 14, height: 14, 'aria-hidden': true
-  }, h('path', {
-    d: 'M4 6.5L8 10.5L12 6.5', fill: 'none', stroke: 'currentColor', 'stroke-width': 1.6,
-    'stroke-linecap': 'round', 'stroke-linejoin': 'round'
-  }))
+
+function createEffortSlider(React) {
+  const h = React.createElement
+  const CaptionMark = createCaptionMark(React)
+  const { useState, useEffect, useRef } = React
+
+  return function EffortSlider({ efforts, activeId, disabled, onChange, t, caption }) {
+    const count = efforts.length
+    const incoming = Math.max(0, efforts.findIndex((effort) => effort.id === activeId))
+
+    /**
+     * The stop under the pointer, which is ahead of `activeId` while dragging.
+     *
+     * `null` means "no drag in progress, follow the prop".
+     */
+    const [dragging, setDragging] = useState(null)
+    const index = dragging ?? incoming
+    const active = efforts[index]
+    const activeName = active?.name ?? active?.id ?? ''
+    const inputRef = useRef(null)
+
+    // A prop change from outside (another entry changed the level, the session
+    // switched model) wins over a stale drag value.
+    useEffect(() => { setDragging(null) }, [activeId, efforts.length])
+
+    // The DOM value follows the level unless a gesture owns it. Writing during a
+    // drag would fight the pointer, so `dragging` gates it.
+    useEffect(() => {
+      if (dragging !== null) return
+      const input = inputRef.current
+      if (input !== null && typeof input === 'object' && 'value' in input) {
+        input.value = String(incoming)
+      }
+    }, [incoming, dragging])
+
+    // A model with just one effort keeps its stop in the middle.
+    const position = (at) => count <= 1 ? '50%' : `${(at / (count - 1)) * 100}%`
+
+    return h('div', {
+      className: 'dmp-slider',
+      'aria-disabled': disabled === true,
+      style: { '--dmp-effort-at': position(index) }
+    },
+      h('div', { className: 'dmp-slider-head' },
+        h('span', { className: 'dmp-slider-caption' },
+          // The vector marks are CJK outlines; a Latin heading is plain text.
+          caption === undefined
+            ? h(CaptionMark, { label: t.effortHeading, height: 16 })
+            : h('span', { className: 'dmp-caption-text' }, caption)),
+        h('span', { className: 'dmp-slider-value' }, activeName)),
+
+      h('div', { className: 'dmp-slider-rail' },
+        /**
+         * The moving parts live in an INSET track.
+         *
+         * Stops are drawn inside the rail rather than on its very edge — a dot
+         * sitting flush against the rounded end reads as part of the border, not
+         * as a stop. The track is inset by the knob's radius on both sides, which
+         * is also exactly the knob's own travel: the native range input spans the
+         * rail with a thumb that size, so its centre runs from inset to width
+         * minus inset. Keeping all three — fill, dots, knob — on THIS box means
+         * the percentage positions from `--dmp-effort-at` line up without any
+         * per-element inset arithmetic.
+         */
+        h('div', { className: 'dmp-slider-track' },
+          h('div', { className: 'dmp-slider-fill', 'aria-hidden': true }),
+          h('div', { className: 'dmp-slider-dots', 'aria-hidden': true },
+            efforts.map((effort, at) => h('span', {
+              key: effort.id,
+              className: `dmp-slider-dot${at <= index ? ' dmp-slider-dot-lit' : ''}`,
+              style: { left: position(at) }
+            }))),
+          /**
+           * The knob is an SVG circle, not a border-radius box.
+           *
+           * A `<div>` with `border-radius` is only round as long as nothing else
+           * controls its box, and something in the host does: the same CSS that is
+           * perfectly round in isolation rendered as a rounded rectangle inside the
+           * app, at every radius value tried. An SVG circle's shape comes from its
+           * geometry, so no `border-radius`, `padding`, or inherited box rule can
+           * square it off.
+           */
+          h('svg', {
+            className: 'dmp-slider-thumb',
+            viewBox: '0 0 28 28',
+            'aria-hidden': true
+          },
+          h('circle', {
+            // Outer edge = r + stroke/2 = 13.25 + 0.75 = 14 units, and the 28-unit
+            // box is drawn at 32px — so the disc's radius is exactly 16px, the same
+            // as the rail's end cap. Smaller and the blue cap peeks out as a thin
+            // rim around the knob at the first stop; larger and the knob spills
+            // past the pill.
+            cx: 14,
+            cy: 14,
+            r: 13.25,
+            // Fill and ring come from CSS so the two themes can differ: the dark
+            // theme keeps the knob the panel's own grey with a black ring, the light
+            // theme flips the fill to white and keeps the black ring.
+            fill: 'var(--dmp-thumb-fill, currentColor)',
+            stroke: 'var(--dmp-thumb-ring, #000)',
+            strokeWidth: 1.5
+          }))),
+        h('input', {
+          type: 'range',
+          ref: inputRef,
+          className: 'dmp-slider-input',
+          min: 0,
+          max: Math.max(0, count - 1),
+          step: 1,
+          // Uncontrolled: the DOM owns the position during a gesture, so a parent
+          // render cannot snap it back. `defaultValue` seeds it on mount, and the
+          // effect above re-seeds it whenever the level changes from outside.
+          defaultValue: incoming,
+          disabled: disabled === true || count <= 1,
+          'aria-label': t.effortHeading,
+          'aria-valuetext': activeName,
+          // Live feedback only — no Host call, so the thumb tracks at full speed.
+          onInput: (event) => {
+            const at = Number(event.target.value)
+            if (Number.isFinite(at)) setDragging(at)
+          },
+          // The commit: browsers fire `change` on release (and on every key press).
+          onChange: (event) => {
+            const at = Number(event.target.value)
+            const next = efforts[at]
+            setDragging(null)
+            if (next !== undefined) onChange(next.id)
+          }
+        })),
+
+      h('div', { className: 'dmp-slider-legend' },
+        efforts.map((effort, at) => h('button', {
+          key: effort.id,
+          type: 'button',
+          className: `dmp-slider-tick${at === index ? ' dmp-slider-tick-active' : ''}`,
+          disabled: disabled === true,
+          'aria-pressed': at === index,
+          'data-edge': count <= 1 ? undefined : at === 0 ? 'start' : at === count - 1 ? 'end' : undefined,
+          title: effort.name ?? effort.id,
+          style: { left: position(at) },
+          onClick: () => onChange(effort.id)
+        }, effort.name ?? effort.id))),
+      h('p', { className: 'dmp-slider-hint' }, t.effortHint))
+  }
 }
 
 //# module: src/ui/styles.js
@@ -567,92 +478,387 @@ function Chevron({ h, open }) {
  * The picker's stylesheet.
  *
  * Host theme tokens only, plus the two composer variables the row sets when its
- * controls no longer fit on one line. Every class is prefixed `dmp-` so a copied
+ * controls no longer fit on one line. Every class is prefixed dmp- so a copied
  * host pattern can never collide with the host's own rules.
+ *
+ * Sizing follows the shipped menu rather than inventing its own scale: the panel
+ * is max-content wide (so a short list stays narrow instead of stretching to a
+ * fixed width), rows are 34px tall with 5px/7px padding, and the panel pads 4px.
+ * Those numbers are what makes the replacement feel like part of the composer
+ * instead of a dialog dropped on top of it.
  */
 const CSS = `
-.dmp-root { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; }
+.dmp-root { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
 /* One popover anchor per control: the model list and the level list open above
    their own button and never overlap each other. */
 .dmp-control { position: relative; display: flex; align-items: center; min-width: 0; }
-.dmp-trigger { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: min(360px, 45cqw);
-  height: 28px; padding: 0 4px 0 8px; border: 0; border-radius: 6px; cursor: pointer;
+/* The model tag keeps a stable box too, for the same reason: switching models must
+   not move the level tag beside it. It is capped rather than fixed so a long model
+   name still gets room, but the cap is what the layout reserves. */
+.dmp-trigger { display: flex; align-items: center; gap: 4px; min-width: 0;
+  max-width: min(220px, 34cqw); height: 28px; padding: 0 4px 0 8px; border: 0;
+  border-radius: var(--dsw-radius-sm, 6px); cursor: pointer;
   background: transparent; color: var(--dsw-alias-label-secondary);
   font: inherit; font-size: 13px; line-height: 20px; }
-.dmp-trigger-effort { max-width: min(150px, 28cqw); padding: 0 4px 0 6px; font-size: 12px;
-  color: var(--dsw-alias-label-secondary); }
+/* The level tag has a FIXED width.
+   Level names differ in length ("Low" vs "X-High"), so a content-sized tag made
+   the whole composer row shift every time the level changed — and pushed the
+   model button sideways with it. A fixed box keeps both controls still.
+
+   The width is sized to the longest name a provider is likely to send: "Medium"
+   measures ~50px at 12px/600, and the earlier 74px box only left 44px for text,
+   so it rendered as "Medi…". 92px leaves 56px, which also covers "Extreme" and
+   "Minimal".
+
+   The label is CENTRED in the button, which needs the caret out of the flex flow:
+   a normal flex child reserves 18px on the right only, so centring the label in
+   what was left pushed it ~7px left of the button's true centre. Absolutely
+   positioning the caret and giving the button 18px padding on BOTH sides makes
+   the label's own box symmetric, so text-align: center lands on the button's
+   centre. 18px is exactly the caret's own width (14px) plus its 4px inset, which
+   also stops a long label from running underneath it.
+   The caret keeps its transform free for the open-state rotation by centring
+   with margin-top instead of translateY. */
+.dmp-trigger-effort { position: relative; width: 92px; box-sizing: border-box;
+  padding: 0 18px; font-size: 12px; color: var(--dsw-alias-label-secondary); }
+.dmp-trigger-effort > .dmp-chevron { position: absolute; right: 4px; top: 50%;
+  margin-top: -7px; }
+/* The tag names the level; it is not a brightness meter. Taking the ramp colour here
+   made "Low" render dim grey and "High" near white, so the control appeared to change
+   weight as the level moved. The ramp stays on the track, where it means intensity. */
+.dmp-trigger-effort-text { flex: 1 1 auto; min-width: 0; text-align: center;
+  color: var(--dsw-alias-label-primary); font-weight: 600; }
+/* Hover and open share ONE background, and it is the translucent interactive
+   token, not the opaque layer-2 surface.
+   The layer-2 token resolves to the composer's own surface colour in both themes
+   (light white on white, dark 2c2c2e on 2c2c2e), so hovering this tag painted
+   nothing at all — the level button was the only control in the row with no
+   pointer feedback. The translucent token composes over whatever is behind it
+   and matches the model tag beside it. */
+.dmp-trigger-effort:hover:not(:disabled),
+.dmp-trigger-effort[aria-expanded="true"] {
+  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-interactive-bg-active));
+  color: var(--dsw-alias-label-primary); }
+.dmp-trigger-effort:focus-visible { outline: 2px solid var(--dsw-alias-border-l2); outline-offset: 2px; }
 .dmp-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.12)); }
-.dmp-trigger:disabled { color: var(--dsw-alias-state-idle-primary); cursor: default; }
-.dmp-trigger-icon { display: var(--dsh-composer-model-icon-display, none); flex: none; }
+.dmp-trigger:disabled { color: var(--dsw-alias-label-dimmed, var(--dsw-alias-state-idle-primary)); cursor: default; }
 .dmp-trigger-text { display: var(--dsh-composer-model-text-display, block);
   min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dmp-chevron { flex: none; color: var(--dsw-alias-label-secondary); transition: transform .12s; }
+.dmp-chevron { flex: none; color: var(--dsw-alias-label-caption, var(--dsw-alias-label-secondary));
+  transition: transform .12s; }
 .dmp-chevron-open { transform: rotate(180deg); }
-.dmp-panel { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 40;
-  width: min(420px, 84vw); max-height: 320px; display: flex; flex-direction: column;
-  border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px;
-  background: var(--dsw-alias-bg-overlay, var(--dsw-alias-bg-layer-1));
-  box-shadow: 0 8px 28px rgba(0,0,0,.18); overflow: hidden; }
-.dmp-search { flex: none; padding: 8px 10px; border-bottom: 1px solid var(--dsw-alias-border-l1); }
-.dmp-search input { width: 100%; box-sizing: border-box; padding: 6px 8px; font: inherit; font-size: 12.5px;
-  color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2, transparent);
-  border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; outline: none; }
-.dmp-search input:focus-visible { border-color: var(--dsw-alias-brand-primary); }
-.dmp-list { flex: 1; overflow-y: auto; padding: 4px 0 6px; }
-.dmp-group { padding: 6px 12px 2px; font-size: 11px; letter-spacing: .04em;
-  color: var(--dsw-alias-label-secondary); }
-.dmp-item { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
-  padding: 6px 12px; border: 0; background: transparent; cursor: pointer; text-align: left;
+/* Content-sized, like the shipped menu: a two-model list must not be as wide as a
+   twenty-model one. The caps only exist so a long model name cannot run off the
+   viewport. */
+.dmp-panel { position: absolute; bottom: calc(100% + 6px + var(--dmp-notice-lift, 0px)); z-index: 1000;
+  width: max-content; min-width: min(240px, 100vw - 32px); max-width: min(360px, 92vw);
+  max-height: min(320px, 60vh); display: flex; flex-direction: column; padding: 4px;
+  border: 1px solid var(--dsw-alias-border-l1); border-radius: var(--dsw-radius-lg, 10px);
+  background: var(--dsw-alias-bg-module-platform, var(--dsw-alias-bg-layer-1));
+  box-shadow: var(--dsw-elevation-panel, var(--dsw-shadow-lv3));
+  color: var(--dsw-alias-label-primary); overflow: hidden; }
+.dmp-search { flex: none; padding: 0 0 4px; }
+.dmp-search input { width: 100%; box-sizing: border-box; padding: 5px 7px; font: inherit; font-size: 12.5px;
+  color: var(--dsw-alias-label-primary); background: transparent;
+  border: 1px solid var(--dsw-alias-border-l1); border-radius: var(--dsw-radius-md, 8px); outline: none; }
+.dmp-search input:focus-visible { border-color: var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary)); }
+/* The scroll container.
+ *
+ * The scrollbar is NOT styled here. The host owns scrollbar appearance through two
+ * CSS variables that its own stylesheets consume, so setting them on the panel is
+ * the whole job: the shell then paints a thin, rounded, theme-aware bar that matches
+ * every other DSH popover. Writing -webkit-scrollbar rules as well would override
+ * the host's treatment and is what made this panel look different from the rest of
+ * the app.
+ *
+ * This mirrors the shipped picker and the thinking-slider plugin, which both do
+ * exactly this much. */
+.dmp-list { flex: 1; overflow-y: auto; min-height: 0;
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2); }
+.dmp-group { padding: 6px 7px 2px; font-size: 11px; letter-spacing: .04em;
+  color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); }
+.dmp-item { display: flex; align-items: center; width: 100%; box-sizing: border-box;
+  min-height: 34px; padding: 5px 7px; border: 0; border-radius: var(--dsw-radius-md, 8px);
+  background: transparent; cursor: pointer; text-align: left;
   color: var(--dsw-alias-label-primary); font: inherit; font-size: 12.5px; }
 .dmp-item:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.12)); }
 .dmp-item-current { color: var(--dsw-alias-brand-primary); font-weight: 600; }
 .dmp-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dmp-item-note { margin-left: auto; padding-left: 8px; font-size: 11px;
-  color: var(--dsw-alias-label-secondary); }
-/* The level list holds short labels, so it stays narrow and tight. */
-.dmp-panel-narrow { width: min(220px, 60vw); max-height: 260px; }
-.dmp-note { padding: 10px 12px; font-size: 12px; color: var(--dsw-alias-label-secondary); }
+.dmp-note { padding: 8px 7px; font-size: 12px; line-height: 18px;
+  color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); }
 .dmp-note-error { color: var(--dsw-alias-state-error-primary); }
 .dmp-retry { margin-top: 6px; padding: 4px 10px; border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
-`
+  border-radius: var(--dsw-radius-sm, 6px); background: transparent; color: inherit;
+  font: inherit; font-size: 12px; cursor: pointer; }
+
+/* The padding is what keeps the heading and the hint off the panel edge; the values
+   are generous because this panel has no menu rows to create natural breathing room. */
+.dmp-panel-slider { width: max-content; box-sizing: border-box;
+  min-width: min(322px, 100vw - 32px); max-width: min(374px, 100vw - 32px);
+  padding: 17px 19px 15px; border-radius: var(--dsw-radius-lg, 12px); }
+/* The type stack, in two parts.
+ *
+ * The level names are Latin ("Low", "Medium", "X-High") and get the host's own
+ * brand face, Montserrat, which the theme plugin already ships at 300/400/500 —
+ * so this costs no download and matches the host's own headings. The CJK copy
+ * ("思考强度", the hint line) has no glyphs in Montserrat, so the stack falls
+ * through to the platform UI face, which is what the host uses for body text.
+ *
+ * Nothing here sets a size: that stays with each element, so a host font-size
+ * change still reaches this control. The slider inherits this from the panel it is
+ * always rendered inside, so it is not named here. */
+.dmp-panel {
+  font-family: Montserrat, var(--dsw-font-family-sans, system-ui, -apple-system,
+    'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif); }
+.dmp-slider { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
+.dmp-slider-head { display: flex; align-items: center; gap: 14px; margin-bottom: 5px; }
+/* The heading is vector art, not text: see CaptionMark.js for why. It only needs a
+   colour — which it takes from the theme token below through currentColor — and a
+   display box that sits it on the same line as the value pill. */
+.dmp-slider-caption { display: flex; align-items: center;
+  color: var(--dsw-alias-label-primary); }
+.dmp-caption-mark { display: block; width: auto; }
+/* The Latin heading, used wherever the vector mark would be unreadable. It takes
+   the heading's own size so the two stay interchangeable on the same line. */
+.dmp-caption-text { display: block; font-size: 13px; font-weight: 600; line-height: 16px;
+  letter-spacing: .01em; white-space: nowrap; }
+/* The value pill is sized close to the heading beside it, so the two read as one
+   line: the earlier 19px box with 11.5px type made the current level look like a
+   footnote next to the title. 26px / 14px keeps the pair balanced and still fits
+   a long level name. */
+.dmp-slider-value { margin-left: auto; display: inline-flex; align-items: center;
+  height: 22px; box-sizing: border-box; padding: 0 8px; border-radius: 8px;
+  font-size: 12px; line-height: 1; font-weight: 600; white-space: nowrap;
+  letter-spacing: .01em;
+  /* The pill is a label, not a rank meter: it must read the SAME at every level.
+     It used to take the level's ramp colour, so Low rendered dim grey and Max near
+     white — the same component looking like two different things depending on the
+     setting. The ramp colour stays on the track, where it encodes intensity. */
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover); }
+/* Reasoning effort: the slider.
+   ---------------------------------------------------------------------------
+   A thick pill-shaped track with a solid accent fill and a disc riding on it. The
+   thick track is what makes the control legible at a glance — a hairline rail with
+   a small dot reads as a status indicator, not something you can drag.
+
+   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. */
+.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
+   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.
+   The two numbers are tied: change the height, move the radius with it.
+
+   clip-path does the actual shaping. A border-radius of 16px on this 32px box was
+   measured painting an ~10px corner in the host, so the ends kept reading as a
+   rounded rectangle no matter what the declaration said. clip-path: inset(... round
+   17px) is a different property: it clips the element AND its children to the same
+   shape, so neither the track nor the fill can be squared off by whatever was
+   winning on border-radius. border-radius stays as the fallback. */
+.dmp-slider-rail { position: relative; height: var(--dmp-rail-height);
+  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 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. */
+.dmp-slider-track { position: absolute; top: 0; bottom: 0;
+  left: var(--dmp-stop-left); right: var(--dmp-stop-right); }
+/* The fill starts at the RAIL's left edge and ends on the knob's centre line.
+
+   Starting it at the stop axis left a grey stub at the left cap, and the rail's
+   clip gives that end its shape, so the run is pulled back to the rail's edge.
+
+   It carries NO radius of its own: it is a plain rectangle clipped by the rail,
+   which is what makes its left cap identical to the track's. */
+.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));
+  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. */
+.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; }
+/* 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
+   same variable so the three cannot drift apart. */
+.dmp-slider-thumb { position: absolute; top: 50%; left: var(--dmp-effort-at);
+  width: var(--dmp-thumb-size); height: var(--dmp-thumb-size);
+  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. */
+  --dmp-thumb-fill: var(--dsw-alias-bg-module-platform);
+  --dmp-thumb-ring: #000;
+  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); }
+/* 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
+   knob is drawn on. Spanning the full rail instead would start the travel one
+   radius short of the first stop, and the pointer would disagree with the knob. */
+.dmp-slider-input { position: absolute; z-index: 6; top: 0;
+  left: calc(var(--dmp-stop-left) - var(--dmp-thumb-size) / 2);
+  width: calc(100% - var(--dmp-stop-left) + var(--dmp-thumb-size) / 2);
+  height: var(--dmp-rail-height); margin: 0; cursor: pointer;
+  -webkit-appearance: none; appearance: none; background: transparent;
+  /* Two-level invisibility: opacity alone leaves the native thumb able to paint
+     through on some engines, which reads as a stray rectangle riding the track. */
+  opacity: 0; color: transparent; border: 0; }
+.dmp-slider-input::-webkit-slider-runnable-track { background: transparent; border: 0; }
+/* The native thumb is sized to the painted one so pointer travel matches, then made
+   fully transparent: leaving it visible is what produced a square riding the track. */
+.dmp-slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
+  width: var(--dmp-thumb-size); height: var(--dmp-thumb-size);
+  background: transparent; border: 0; }
+.dmp-slider-input::-moz-range-thumb { width: var(--dmp-thumb-size); height: var(--dmp-thumb-size); border: 0; }
+.dmp-slider-input:disabled { cursor: default; }
+.dmp-slider[aria-disabled="true"] { opacity: .5; }
+/* The legend shares the track's inset so a label sits under the stop it names. */
+.dmp-slider-legend { position: relative; height: 16px;
+  margin: 0 var(--dmp-stop-right) 0 var(--dmp-stop-left); }
+/* The level labels are Latin, so they take Montserrat explicitly — inheriting from
+   the panel would pull the platform face back in. */
+.dmp-slider-tick { position: absolute; top: 0; transform: translateX(-50%);
+  padding: 1px 4px; border: 0; border-radius: 6px; background: transparent;
+  /* One brightness for every unselected label: the tertiary token sat too close to
+     the panel background, so the secondary token lifts all of them equally. */
+  color: var(--dsw-alias-label-secondary);
+  /* 12px, up from 11px: at 11 the stop names sat visibly below the heading's weight
+     and were hard to hit by eye under a 32px rail. */
+  font-size: 11px; line-height: 15px;
+  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; }
+.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; }
+.dmp-slider-tick:disabled { cursor: default; }
+/* The active label is marked by COLOUR only, not weight.
+   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-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. */
+@media (prefers-color-scheme: light) {
+  .dmp-slider-thumb {
+    --dmp-thumb-fill: var(--dsw-alias-bg-base);
+    --dmp-thumb-ring: var(--dsw-alias-border-l2);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dmp-slider-fill, .dmp-slider-thumb { transition: none; }
+}
+/* ---------------------------------------------------------------------------
+   Rejected-selection notice
+   ---------------------------------------------------------------------------
+   A failed switch is reported ABOVE the panels, never inside them: the list and
+   the slider are for choosing, and a raw "code: message" dumped among the rows
+   both crowds the list and scrolls away. Collapsed it is one quiet line; the
+   detail is opt-in.
+
+   It is absolutely positioned above the row so it takes no width from the
+   composer, and --dmp-notice-lift (measured in ModelPicker) is what raises an
+   open panel over its measured height instead of on top of it. */
+.dmp-notice { position: absolute; bottom: calc(100% + 6px); left: 0; right: auto;
+  z-index: 1100; display: flex; flex-direction: column; align-items: flex-start;
+  width: max-content; max-width: min(360px, 92vw); box-sizing: border-box;
+  border: 1px solid var(--dsw-alias-border-l1); border-radius: var(--dsw-radius-md, 8px);
+  background: var(--dsw-alias-bg-module-platform, var(--dsw-alias-bg-layer-1));
+  box-shadow: var(--dsw-elevation-panel, var(--dsw-shadow-lv2));
+  overflow: hidden; }
+.dmp-notice-toggle { display: flex; align-items: center; gap: 6px; width: 100%;
+  box-sizing: border-box; padding: 6px 8px; border: 0; background: transparent;
+  color: var(--dsw-alias-state-error-primary); font: inherit; font-size: 12px;
+  line-height: 18px; text-align: left; cursor: pointer; }
+.dmp-notice-toggle:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.dmp-notice-toggle:focus-visible { outline: 2px solid var(--dsw-alias-border-l2); outline-offset: -2px; }
+.dmp-notice-toggle .dmp-chevron { margin-left: auto; }
+.dmp-notice-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* The raw provider error: monospaced so a "code: message" pair is readable, and
+   selectable so it can be copied into a bug report. */
+.dmp-notice-detail { width: 100%; box-sizing: border-box; padding: 6px 8px;
+  border-top: 1px solid var(--dsw-alias-border-l1);
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  font-size: 11.5px; line-height: 16px; white-space: pre-wrap; word-break: break-word;
+  color: var(--dsw-alias-label-secondary); user-select: text; }`
 
 //# module: src/ui/dict.js
-/**
+/**
  * The picker's two dictionaries.
  *
  * Kept as a plain object rather than the Client locale service because the
  * strings are this component's own copy, not a namespace other plugins
  * translate. Adding a language is one more entry here.
+ *
+ * Only keys the component actually reads belong here: an entry nobody looks up
+ * is a string that silently rots, and a reviewer cannot tell it is dead.
  */
 const DICT = {
   'zh-CN': {
     placeholder: '搜索模型',
     empty: '没有匹配的模型',
     loading: '正在读取模型列表…',
-    failed: '读取模型列表失败',
     retry: '重试',
     noCatalog: '当前没有可用模型',
     trigger: (name) => `${name}（点此切换模型）`,
     effortTitle: (name) => `思考档位：${name}（点此调整）`,
+    effortHeading: '思考强度',
+    effortHint: '更高的强度通常需要更多思考时间。',
     switching: '切换中…',
-    switchFailed: '切换失败',
-    providerDefault: '默认',
-    groupFailed: (name) => `${name} 加载失败`
+    switchFailed: '切换失败'
   },
   en: {
     placeholder: 'Search models',
     empty: 'No matching model',
     loading: 'Loading models…',
-    failed: 'Could not load the model list',
     retry: 'Retry',
     noCatalog: 'No model is currently available',
     trigger: (name) => `${name} (click to switch model)`,
     effortTitle: (name) => `Reasoning level: ${name} (click to change)`,
+    effortHeading: 'Reasoning effort',
+    effortHint: 'Higher effort usually takes more time to think.',
     switching: 'Switching…',
-    switchFailed: 'Switch failed',
-    providerDefault: 'Default',
-    groupFailed: (name) => `${name} failed to load`
+    switchFailed: 'Switch failed'
   }
 }
 
@@ -671,7 +877,27 @@ function dictionaryFor(localeId) {
 
 
 
-const LABEL_SLOT = 'conversation.input.model.label'
+
+
+/**
+ * Turn a failed `select` result into the two strings the notice shows.
+ *
+ * `ModelDirectory.select` resolves to `{ ok: false, error: { code, message } }`
+ * on a rejected selection. The summary is the short, always-visible line; the
+ * detail is what expanding the notice reveals, and it is the only place the
+ * provider's raw error text appears — the panels themselves stay free of it.
+ *
+ * @param result - the value `select` resolved to, possibly undefined.
+ * @param t - the active dictionary.
+ * @returns `{ summary, detail }`.
+ */
+function failureOf(result, t) {
+  const error = result?.error
+  if (error === undefined || error === null) return { summary: t.switchFailed, detail: '' }
+  const code = typeof error.code === 'string' ? error.code : ''
+  const message = typeof error.message === 'string' ? error.message : String(error)
+  return { summary: t.switchFailed, detail: code.length > 0 ? `${code}: ${message}` : message }
+}
 
 /**
  * The composer's model seat: a searchable, provider-grouped picker plus a
@@ -681,59 +907,114 @@ const LABEL_SLOT = 'conversation.input.model.label'
  * `current` (the effective selection, projection or default), `routable`
  * (whether the Host would still accept it), `pending` (the selection being
  * settled), `failures` (provider groups that failed to load) and `error`.
- * Deriving those in the component is what made an in-flight switch invisible and
- * a broken provider group silently absent.
  *
- * @param props - slot props: `locked`, the session id, `renderSlot` (when the
- *   entry declared children), plus what `inject` supplied.
- * @returns the rendered control, or null when the session cannot change models.
+ * @param React - the React runtime.
+ * @returns the slot component.
  */
 function createModelPicker(React) {
   const h = React.createElement
+  const EffortSlider = createEffortSlider(React)
   const { useCallback, useEffect, useMemo, useRef, useState } = React
 
+  /**
+   * Subscribe to any `{ getSnapshot, subscribe }` source.
+   *
+   * Both sources this component reads — the session directory and the locale
+   * service — expose exactly that pair, so one hook covers them. It lives here
+   * rather than in a shared module because it needs the component's own hooks,
+   * which are bound to this factory's React instance.
+   *
+   * @param source - the observable source, or undefined while it is not resolved.
+   * @returns the current snapshot.
+   */
+  const useSnapshot = (source) => {
+    const [value, setValue] = useState(() => source?.getSnapshot?.())
+    useEffect(() => {
+      if (source === undefined || source === null) return undefined
+      const update = () => setValue(source.getSnapshot())
+      update()
+      return source.subscribe(update)
+    }, [source])
+    return value
+  }
+
   return function ModelPicker(props) {
-    const { sessionId, locked, renderSlot, directory, catalog: catalogFace, available } = props
+    /**
+     * The props bundle the shipped registration hands its own component.
+     *
+     * `directory` is the session directory's STORE (already subscribed-ready),
+     * `load` asks it to refresh, `select` submits a triple, and `available` says
+     * whether this session may change models at all. Nothing here reaches behind
+     * that bundle: the data layer is the shipped one, this file is the view.
+     */
+    const { locked, directory, available, load, select: submit } = props
 
-    const localeId = typeof props.localeId === 'string' ? props.localeId : 'zh-CN'
+    /**
+     * The active language, followed live.
+     *
+     * `localeSource` is the locale service itself (`getSnapshot` / `subscribe`),
+     * so a language switch made while the composer is on screen re-renders with
+     * the new dictionary. `localeId` is the value resolved when the seat was
+     * registered, used only until the first snapshot arrives.
+     */
+    const localeState = useSnapshot(props.localeSource)
+    const localeId = typeof localeState?.active === 'string' && localeState.active.length > 0
+      ? localeState.active
+      : typeof props.localeId === 'string' ? props.localeId : 'zh-CN'
     const t = dictionaryFor(localeId)
+    // The panel heading is vector art drawn from CJK outlines, so it only reads
+    // as words in Chinese; every other language prints the plain string.
+    const glyphCaption = String(localeId).toLowerCase().startsWith('zh')
 
     // One panel at a time: the model list and the effort list are separate
     // controls, and opening either closes the other.
     const [panel, setPanel] = useState(null)
     const [query, setQuery] = useState('')
+    // The level the thumb should sit on right now, before the Host confirms.
+    // Null means "follow the directory".
+    const [draftEffort, setDraftEffort] = useState(null)
+    // A rejected selection. Kept out of the panels on purpose: the notice above
+    // them is collapsed until the user asks for the raw error.
+    const [failure, setFailure] = useState(null)
+    const [noticeOpen, setNoticeOpen] = useState(false)
+    const [noticeLift, setNoticeLift] = useState(0)
     const rootRef = useRef(null)
+    const noticeRef = useRef(null)
+    // Whether the most recent action was a load or a selection. `state.error`
+    // carries both, and only a LOAD failure belongs inside the model panel.
+    const lastActionRef = useRef('load')
 
-    const state = readSnapshot(useState, useEffect, directory?.store) ?? {}
-    // `catalogFace` is the catalogue controller, not a store: its snapshot source
-    // is `store`. Passing the controller itself made the hook call a missing
-    // `getSnapshot` on first render.
-    const catalogState = readSnapshot(useState, useEffect, catalogFace?.store)
+    const state = useSnapshot(directory) ?? {}
     const groups = Array.isArray(state.groups) ? state.groups : []
     const failures = Array.isArray(state.failures) ? state.failures : []
     const selection = state.current ?? null
     const pending = state.pending ?? null
-    const busy = pending !== null || state.status === 'selecting'
+    /**
+     * Distinguish a MODEL change from a LEVEL change.
+     *
+     * The directory reports one `selecting` status for both, and `pending` holds
+     * whichever triple is in flight. They are not the same event to the user: a
+     * level change is a dial, dragged back and forth, and each stop submits. So a
+     * pending selection is treated as a model change ONLY when it names a
+     * different model than the one in effect — otherwise every slider stop made
+     * the model trigger print "Switching…" and go dim, which read as the model
+     * button flickering on its own.
+     */
+    const modelKeyOf = (value) => value === null ? null : `${value.provider ?? ''}:${value.model ?? ''}`
+    const swappingModel = pending !== null && modelKeyOf(pending) !== modelKeyOf(selection)
+    const busy = swappingModel
+
+    const doLoad = useCallback(() => {
+      lastActionRef.current = 'load'
+      // Ask the directory to load. It is idempotent: the shipped controller
+      // shares one in-flight request and re-projects when it settles.
+      if (typeof load === 'function') load()
+    }, [load])
 
     useEffect(() => {
-      /**
-       * Load the directory, not just a catalogue.
-       *
-       * In reuse mode `directory` is the shipped one and `catalogFace` is this
-       * plugin's own catalogue — loading the latter alone left the shipped
-       * directory's catalogue untouched, so its `groups` never advanced past
-       * whatever it held when the seat first mounted. `directory.load()` asks the
-       * object that actually feeds `state.groups`; its own `load` is idempotent
-       * and internally refreshes the catalogue it reads.
-       */
-      if (typeof directory?.load === 'function') {
-        const outcome = directory.load()
-        if (outcome !== undefined && typeof outcome.then === 'function') outcome.catch(() => {})
-      } else if (catalogFace !== undefined && catalogFace !== null) {
-        catalogFace.load()
-      }
+      doLoad()
       return undefined
-    }, [directory, catalogFace])
+    }, [doLoad])
 
     useEffect(() => {
       if (panel === null) return undefined
@@ -749,38 +1030,116 @@ function createModelPicker(React) {
       }
     }, [panel])
 
+    // Closing a panel also clears the transient state it carried: the search
+    // text (so reopening shows the full list) and the failure notice.
+    useEffect(() => {
+      if (panel !== null) return
+      setQuery('')
+      setFailure(null)
+      setNoticeOpen(false)
+    }, [panel])
+
+    /**
+     * Push a failure into the notice and collapse it again.
+     *
+     * @param result - the failed `select` result.
+     */
+    const showFailure = useCallback((result) => {
+      setFailure(failureOf(result, t))
+      setNoticeOpen(false)
+    }, [t])
+
     /**
      * Choose a model, carrying the adapter's default effort when the caller did
-     * not name one — the shipped picker sends the same triple, so a model whose
-     * adapter defaults to a level records that level rather than an unset field.
+     * not name one — the shipped picker sends the same triple.
+     *
+     * Returns the directory's own result unchanged: `{ ok: true }` or
+     * `{ ok: false, error }`. Anything else would make a successful pick look
+     * like a failure and leave the panel open.
      */
     const select = useCallback(async (group, model, reasoningEffort) => {
-      if (directory === undefined || directory === null) return
+      if (typeof submit !== 'function') return undefined
+      lastActionRef.current = 'select'
       const effort = reasoningEffort ?? model?.reasoning?.defaultEffort
-      const result = await directory.select({
+      return submit({
         provider: group.id,
         model: model.id,
         ...effort === undefined ? {} : { reasoningEffort: effort }
       })
-      if (result?.ok !== true) return
-      setPanel(null)
-    }, [directory])
-
-    const needle = query.trim().toLowerCase()
-    const filtered = useMemo(() => {
-      const match = (model) => needle.length === 0 ||
-        String(model.name ?? model.id).toLowerCase().includes(needle) ||
-        String(model.id).toLowerCase().includes(needle)
-      return groups
-        .map((group) => ({ group, models: (group.models ?? []).filter(match) }))
-        .filter((entry) => entry.models.length > 0)
-    }, [groups, needle])
+    }, [submit])
+
+    /**
+     * Choosing a MODEL closes the panel on success.
+     *
+     * A rejected selection keeps it open and raises the notice instead, so the
+     * user can pick another model without reopening the list.
+     */
+    const chooseModel = useCallback(async (group, model, reasoningEffort) => {
+      const result = await select(group, model, reasoningEffort)
+      if (result?.ok === true) {
+        setFailure(null)
+        setPanel(null)
+        return
+      }
+      showFailure(result)
+    }, [select, showFailure])
+
+    const queryText = query.trim()
+    /**
+     * The model list, ranked exactly like the shipped menus.
+     *
+     * `rankByName` is the host's own fuzzy matcher: an ordered subsequence of
+     * the name (or of the model id, supplied as the second search key), prefix
+     * hits first. A plain substring test could not find `gpt61` in
+     * `GPT-6.1-Sol`, which is most of the point of having a search box.
+     */
+    const filtered = useMemo(() => groups
+      .map((group) => ({
+        group,
+        models: rankByName(
+          (group.models ?? []).map((model) => ({
+            ...model,
+            label: typeof model.label === 'string' ? model.label : model.id
+          })),
+          queryText
+        )
+      }))
+      .filter((entry) => entry.models.length > 0), [groups, queryText])
 
     const current = selection === null ? null : groups
       .find((group) => group.id === selection.provider)?.models
       ?.find((model) => model.id === selection.model)
     const currentGroup = selection === null ? null : groups.find((group) => group.id === selection.provider) ?? null
 
+    /**
+     * A level change keeps the panel open, and moves the thumb IMMEDIATELY.
+     *
+     * Two things were wrong before:
+     *
+     *  - Closing the panel on success made it vanish mid-drag, so the animation
+     *    never played — a level is a dial, not a commitment.
+     *  - The thumb was positioned from the directory's `current`, which only
+     *    updates after the Host answers. During a drag that means the thumb is
+     *    dragged back to the old stop on every render — it looks stuck to the
+     *    start and refuses to follow the pointer.
+     *
+     * `draftEffort` is the optimistic stop: set it on every move so the thumb
+     * tracks the pointer, and clear it once the Host confirms so the directory
+     * becomes the source of truth again. If the RPC fails the draft is dropped,
+     * the thumb springs back to the real value, and the notice says why.
+     */
+    const chooseEffort = useCallback(async (effortId) => {
+      if (currentGroup === null || current === null) return
+      setDraftEffort(effortId)
+      const result = await select(currentGroup, current, effortId)
+      if (result?.ok === true) {
+        setFailure(null)
+        return
+      }
+      setDraftEffort(null)
+      showFailure(result)
+    }, [select, currentGroup, current, showFailure])
+
     /**
      * What the trigger says, in the shipped picker's precedence.
      *
@@ -802,25 +1161,79 @@ function createModelPicker(React) {
      * will use, so that is what the control shows rather than a blank.
      */
     const efforts = Array.isArray(current?.reasoning?.efforts) ? current.reasoning.efforts : []
-    const activeEffortId = selection?.reasoningEffort ?? current?.reasoning?.defaultEffort
+    /**
+     * The level to show, and why it is NOT simply `selection.reasoningEffort`.
+     *
+     * `selection.reasoningEffort` belongs to the SESSION, not to the model. When
+     * the user switches to a model they have never used, that field still carries
+     * the previous model's level — `xhigh` while the new model only declares
+     * `low/high`, or `high` for both, where inheriting it silently starts the new
+     * model at a level the user never chose for it.
+     *
+     * The rule is therefore: a level is only "current" for a model that has
+     * already been used in this session. On a model switch the adapter's declared
+     * default takes over, which is what the Host would use anyway. `modelKey`
+     * tracks which model the level belongs to, so a switch is detectable.
+     */
+    const declares = (id) => id !== undefined && id !== null && efforts.some((effort) => effort.id === id)
+    const modelKey = current === null ? null : `${selection?.provider ?? ''}:${selection?.model ?? ''}`
+    const seenModelRef = useRef(null)
+    const switchedModel = seenModelRef.current !== null && seenModelRef.current !== modelKey
+    const inheritedEffortId = switchedModel ? undefined : selection?.reasoningEffort
+    /**
+     * The level in effect, resolved through three fallbacks.
+     *
+     * A provider may declare `reasoningEfforts` without a default — the
+     * `openai-responses` models in this profile do exactly that (five levels, no
+     * default). Taking `defaultEffort` verbatim then left `activeEffortId`
+     * undefined, so the tag rendered with an empty label even though the slider
+     * had five stops. The first declared level is the right fallback: it is what
+     * an unspecified request uses.
+     */
+    const confirmedEffortId = declares(inheritedEffortId)
+      ? inheritedEffortId
+      : declares(current?.reasoning?.defaultEffort)
+        ? current.reasoning.defaultEffort
+        : efforts[0]?.id
+    useEffect(() => { seenModelRef.current = modelKey }, [modelKey])
+    const activeEffortId = draftEffort !== null && declares(draftEffort)
+      ? draftEffort
+      : confirmedEffortId
     const activeEffort = efforts.find((effort) => effort.id === activeEffortId) ?? null
-    const effortName = (effort) => effort?.name ?? effort?.id ?? String(activeEffortId ?? '')
+
+    /**
+     * What the trigger prints for the current level.
+     *
+     * The trigger is only rendered when the model declares levels, so a resolved
+     * name always exists by then; the id is a fallback for a level whose entry has
+     * no display name, and an empty string is the last resort.
+     */
+    const effortLabel = activeEffort?.name ?? activeEffort?.id ?? String(activeEffortId ?? '')
+
+    /**
+     * Drop the draft once the Host agrees with it.
+     *
+     * Until the directory catches up the draft IS the truth, so it must not be
+     * cleared earlier or the thumb would jump back for one frame. When the
+     * confirmed value finally matches, the draft has done its job.
+     */
+    useEffect(() => {
+      if (draftEffort !== null && confirmedEffortId === draftEffort) setDraftEffort(null)
+    }, [draftEffort, confirmedEffortId])
 
     /**
      * The label, in the shipped picker's addressable wrapper.
      *
-     * The `data-provider-id` / `data-model-id` span is kept because CSS that
-     * targets one model by id still works. `renderSlot` is probed rather than
-     * assumed: the renderer hands an entry that binding only for children the
-     * entry declared itself, and this one deliberately declares none (the shipped
-     * occupant owns the declaration), so the plain name is what actually renders.
+     * The `data-provider-id` / `data-model-id` span is kept because host CSS that
+     * targets one model by id still works. It is deliberately plain text: this entry
+     * does not declare the `conversation.input.model.label` child, so the renderer
+     * hands it no `renderSlot` and provider badges cannot mount here (see AGENTS.md,
+     * invariant 2 — declaring that child breaks the whole registration).
      */
-    const renderLabel = (group, model, placement, selected) => h('span', {
+    const renderLabel = (group, model) => h('span', {
       'data-provider-id': group?.id,
       'data-model-id': model?.id
-    }, renderSlot === undefined
-      ? model?.name
-      : renderSlot(LABEL_SLOT, { provider: group, model, placement, selected }, { fallback: model?.name }))
+    }, model?.name)
 
     const renderItem = (group, model) => {
       const isCurrent = selection !== null &&
@@ -831,9 +1244,9 @@ function createModelPicker(React) {
         role: 'option',
         'aria-selected': isCurrent,
         className: `dmp-item${isCurrent ? ' dmp-item-current' : ''}`,
-        onClick: () => void select(group, model)
+        onClick: () => void chooseModel(group, model)
       },
-        h('span', { className: 'dmp-item-name' }, renderLabel(group, model, 'option', isCurrent)))
+        h('span', { className: 'dmp-item-name' }, renderLabel(group, model)))
     }
 
     const renderGroup = ({ group, models }) => h('div', { key: group.id },
@@ -842,24 +1255,23 @@ function createModelPicker(React) {
 
     const notes = []
     /**
-     * Three independent problems, reported separately.
+     * Catalogue problems only.
      *
-     * A catalogue failure belongs to the shared cache and affects every session;
-     * a selection failure belongs to this session's directory; a provider group
-     * that failed to load belongs to the catalogue's failure list and explains a
-     * group that is simply absent. Collapsing them into one message meant a
-     * failed switch erased the load error and vice versa.
+     * A selection failure is reported by the notice above the panels instead: it
+     * belongs to this session, and the raw `code: message` text is not worth
+     * pushing into the list. `lastActionRef` keeps a selection error from
+     * appearing here as if it were a load failure.
      */
-    const catalogError = typeof catalogState?.error === 'string' ? catalogState.error : ''
-    const selectionError = typeof state.error === 'string' ? state.error : ''
-    if (state.status === 'loading' && groups.length === 0 && catalogError.length === 0) {
+    const loadError = state.status === 'error' && lastActionRef.current === 'load' &&
+      typeof state.error === 'string' && state.error.length > 0 ? state.error : ''
+    if (state.status === 'loading' && groups.length === 0) {
       notes.push(h('div', { key: 'loading', className: 'dmp-note' }, t.loading))
     }
-    if (catalogError.length > 0 || selectionError.length > 0) {
+    if (loadError.length > 0) {
       notes.push(h('div', { key: 'error', className: 'dmp-note dmp-note-error' },
-        catalogError.length > 0 ? catalogError : selectionError,
+        loadError,
         h('div', null, h('button', {
-          type: 'button', className: 'dmp-retry', onClick: () => catalogFace?.refresh()
+          type: 'button', className: 'dmp-retry', onClick: doLoad
         }, t.retry))))
     }
     // A provider group whose catalogue failed: say so, instead of leaving a
@@ -873,40 +1285,114 @@ function createModelPicker(React) {
       notes.push(h('div', { key: 'empty', className: 'dmp-note' }, t.empty))
     }
 
-    const effortButton = current === null || currentGroup === null || efforts.length === 0
+    const hasEfforts = efforts.length > 0
+
+    /**
+     * Where each popover sits.
+     *
+     * Both panels are wider than their trigger and open above it, so a fixed side
+     * anchor drifts away from the button and runs off the window near an edge.
+     * The shared hook centres each panel on its trigger and clamps the result to
+     * the viewport; `deps` re-measures when the content width changes (a five-level
+     * slider is wider than a three-level one, and a longer model list is wider than
+     * a short one).
+     */
+    const effortAnchor = createAnchoredPanel(React, {
+      open: panel === 'effort',
+      fallbackWidth: 280,
+      deps: [efforts.length]
+    })
+    const modelAnchor = createAnchoredPanel(React, {
+      open: panel === 'model',
+      fallbackWidth: 320,
+      deps: [filtered.length, groups.length]
+    })
+
+    /**
+     * Measure the notice so the open panel can sit above it instead of under it.
+     *
+     * The panel's `bottom` adds `--dmp-notice-lift`, so this only has to report
+     * the notice's rendered height.
+     */
+    useEffect(() => {
+      const node = noticeRef.current
+      if (failure === null || node === null || typeof node.getBoundingClientRect !== 'function') {
+        setNoticeLift(0)
+        return
+      }
+      const height = node.getBoundingClientRect().height
+      setNoticeLift(Number.isFinite(height) && height > 0 ? height + 6 : 0)
+    }, [failure, noticeOpen])
+
+    const notice = failure === null
+      ? null
+      : h('div', { className: 'dmp-notice', ref: noticeRef, role: 'status' },
+        h('button', {
+          type: 'button',
+          className: 'dmp-notice-toggle',
+          'aria-expanded': noticeOpen,
+          title: failure.detail,
+          onClick: () => setNoticeOpen((value) => !value)
+        },
+          h('span', { className: 'dmp-notice-text' }, failure.summary),
+          h(Chevron, { h, open: noticeOpen })),
+        noticeOpen && failure.detail.length > 0
+          ? h('div', { className: 'dmp-notice-detail' }, failure.detail)
+          : null)
+
+    const effortButton = current === null || currentGroup === null || !hasEfforts
       ? null
       : h('button', {
         type: 'button',
+        ref: effortAnchor.ref,
         className: 'dmp-trigger dmp-trigger-effort',
-        disabled: locked === true || busy,
-        title: t.effortTitle(effortName(activeEffort)),
-        'aria-haspopup': 'listbox',
+        // Only a locked composer disables the level tag. Its own commits flip the
+        // directory to `selecting`, and disabling here killed the drag after the
+        // first stop — the same reason the slider's range input stays enabled.
+        disabled: locked === true,
+        title: t.effortTitle(effortLabel),
+        'aria-haspopup': 'dialog',
         'aria-expanded': panel === 'effort',
         onClick: () => setPanel((value) => (value === 'effort' ? null : 'effort'))
       },
-        h('span', { className: 'dmp-trigger-text' }, effortName(activeEffort)),
+        h('span', { className: 'dmp-trigger-text dmp-trigger-effort-text' }, effortLabel),
         h(Chevron, { h, open: panel === 'effort' }))
 
     const effortPanel = panel === 'effort' && effortButton !== null
-      ? h('div', { className: 'dmp-panel dmp-panel-narrow', role: 'listbox' },
-        h('div', { className: 'dmp-list' }, efforts.map((effort) => {
-          const isCurrent = effort.id === activeEffortId
-          return h('button', {
-            key: effort.id,
-            type: 'button',
-            role: 'option',
-            'aria-selected': isCurrent,
-            className: `dmp-item${isCurrent ? ' dmp-item-current' : ''}`,
-            onClick: () => void select(currentGroup, current, effort.id)
-          }, h('span', { className: 'dmp-item-name' }, effortName(effort)),
-          effort.description === undefined
-            ? null
-            : h('span', { className: 'dmp-item-note' }, String(effort.description)))
-        })))
+      ? h('div', {
+        className: 'dmp-panel dmp-panel-slider',
+        role: 'dialog',
+        'aria-label': t.effortHeading,
+        ref: effortAnchor.panelRef,
+        style: effortAnchor.style
+      },
+        h(EffortSlider, {
+          efforts,
+          activeId: activeEffortId,
+          /**
+           * Deliberately NOT disabled while a change is settling.
+           *
+           * `busy` tracks the directory's `status === 'selecting'`, and every stop
+           * the slider passes submits a selection — so the first stop flipped
+           * `busy`, disabled the input mid-gesture, and the drag died. The user
+           * then had to press again for each further stop. A level is a dial: it
+           * stays live, and the draft value keeps the thumb honest while the Host
+           * catches up.
+           */
+          disabled: locked === true,
+          caption: glyphCaption ? undefined : t.effortHeading,
+          t,
+          onChange: (effortId) => { void chooseEffort(effortId) }
+        }))
       : null
 
     const modelPanel = panel === 'model'
-      ? h('div', { className: 'dmp-panel', role: 'listbox' },
+      ? h('div', {
+        className: 'dmp-panel',
+        role: 'listbox',
+        ref: modelAnchor.panelRef,
+        style: modelAnchor.style
+      },
         h('div', { className: 'dmp-search' },
           h('input', {
             type: 'search',
@@ -928,7 +1414,11 @@ function createModelPicker(React) {
      */
     if (available === false) return null
 
-    return h('div', { className: 'dmp-root', ref: rootRef },
+    return h('div', {
+      className: 'dmp-root',
+      ref: rootRef,
+      style: noticeLift > 0 ? { '--dmp-notice-lift': `${noticeLift}px` } : undefined
+    },
       h('style', null, CSS),
       // The model control and the reasoning-level control are deliberately two
       // buttons: they are two independent choices, and a model change must not
@@ -936,6 +1426,7 @@ function createModelPicker(React) {
       h('div', { className: 'dmp-control' },
         h('button', {
           type: 'button',
+          ref: modelAnchor.ref,
           className: 'dmp-trigger',
           disabled: locked === true || busy,
           title: t.trigger(currentLabel),
@@ -948,10 +1439,11 @@ function createModelPicker(React) {
               ? t.switching
               : (current === null || currentGroup === null
                 ? currentLabel
-                : renderLabel(currentGroup, current, 'trigger', true))),
+                : renderLabel(currentGroup, current))),
           h(Chevron, { h, open: panel === 'model' })),
         modelPanel),
-      effortButton === null ? null : h('div', { className: 'dmp-control' }, effortButton, effortPanel))
+      effortButton === null ? null : h('div', { className: 'dmp-control' }, effortButton, effortPanel),
+      notice)
   }
 }
 
@@ -959,40 +1451,34 @@ function createModelPicker(React) {
 /**
  * Client entry: the module-loader registration and the plugin object.
  *
- * This file is the only browser entry the Client module loader knows about for
- * this package. Everything it uses lives in sibling modules under `src/`, and
- * `scripts/build.mjs` concatenates them into the served `client.js`.
+ * This plugin replaces ONLY the composer's model-selection UI. Everything behind
+ * it — the per-session directory, the catalogue cache, the invalidation events,
+ * the selection RPC — is the shipped `ui-model-selection` implementation, reached
+ * through its `modelDirectories` service.
  *
- * Why the picker shadows this slot at all: `conversation.input.model` is a
- * `single` slot whose shipped occupant carries `replaceRisk: shadows-shipped-ui`.
- * Shadowing it is a visual choice, so it lives in a bundle that can be turned
- * off again without touching any provider registration.
+ * That split works because the shipped plugin keeps its slot registration and its
+ * component apart: the registration's `inject` hands the component a plain props
+ * bundle (`available`, a `directory` store, `load`, `select`), and the component
+ * may render however it likes. This entry registers the same slot with the same
+ * `inject` contract and substitutes its own component.
  *
- * On the `conversation.input.model.label` child slot: the shipped picker declares
- * it and provider plugins decorate it. This picker cannot join them — a child
- * slot may be declared exactly once and the shipped occupant keeps its
- * declaration even while shadowed, so a second declaration throws at
- * registration. The renderer then hands an entry a `renderSlot` binding only for
- * children that entry declared itself, so not declaring means not rendering. The
- * decorations therefore do not appear here and each model is shown by its plain
- * name. That is an accepted consequence of shadowing this slot, not an oversight.
+ * Why not copy the shipped bundle instead: a copy registers a second
+ * `ModelDirectoryResolver` under the same service name, the two fight over it,
+ * and the shipped plugin parks in `loading` — which fails the whole renderer
+ * boot. Reusing the service avoids that, and keeps tracking upstream fixes.
  */
 
-
-
-
 const PLUGIN = 'dsh-model-picker'
 const SLOT = 'conversation.input.model'
-/** The shipped service that owns per-session model directories. */
+/** The service the shipped picker exposes for per-session model directories. */
 const MODEL_DIRECTORIES = 'modelDirectories'
 /**
  * BELOW the shipped occupant's `priority: 0`.
  *
  * For a `single` slot the LOWEST priority renders — the registry says so in its
  * own error text ("register at a different priority to shadow it (lowest
- * renders)"), and `entriesOfSlot` returns the first survivor of a
- * priority-sorted list. A larger number would have lost to the shipped picker
- * instead of shadowing it.
+ * renders)"). A larger number would lose to the shipped picker instead of
+ * shadowing it.
  */
 const SHADOW_PRIORITY = -1
 
@@ -1001,17 +1487,12 @@ const SHADOW_PRIORITY = -1
  *
  * The packaged desktop app has no devtools, so a client half that fails to
  * register is indistinguishable from one that never loaded. Each stage is posted
- * to the Host half, which logs it next to its own `host 半边已 apply` line: the
- * pair tells the two cases apart immediately.
+ * to the Host half, which logs it beside its own line: the pair tells the two
+ * cases apart immediately.
  *
  * @param stage - a short description of the load stage reached.
  */
 const report = (stage) => {
-  // The renderer console reaches the desktop app log, which is captured in every
-  // diagnostics bundle. A POST to the Host half is kept as the richer channel,
-  // but it cannot be the only one: it is a second thing that can fail (trust
-  // fence, no route yet, offline), and a missing report then looks exactly like
-  // "apply was never called".
   try {
     console.error(`[model-picker] ${stage}`)
   } catch {
@@ -1032,8 +1513,7 @@ const report = (stage) => {
 /**
  * The failure worth capturing happens *outside* apply: the client composition
  * builds this plugin object, then never applies it, and whatever it threw on the
- * way is only visible in the page — which the packaged desktop app gives no
- * devtools for. Both global hooks forward to the host log instead.
+ * way is only visible in the page.
  *
  * @param value - the thrown value, in any shape.
  * @returns a short description safe to log.
@@ -1070,184 +1550,153 @@ window.__ModuleLoader__.load({
     return {
       name: PLUGIN,
       /**
-       * No fiber-level `inject`.
+       * The services this half reads, PLUS the ones the shipped directory service
+       * reads on its own behalf.
+       *
+       * `remote` and `remote.session` look unused here — this file never mentions
+       * them — but `models.directoryFor(sessionId)` calls into the shipped
+       * resolver, and that call runs in THIS entry's fiber. Cordis only exposes a
+       * service to a fiber that declares it, so dropping them makes every
+       * `directoryFor` throw
        *
-       * A required service that is not visible from this context keeps the whole
-       * entry in `loading`: Cordis never calls `apply`, and the client Loader
-       * turns that into `web boot: 1 entry did not activate`, i.e. a dead
-       * renderer. Waiting *inside* apply means an unmet dependency costs only the
-       * registration instead of the entire boot.
+       *   cannot get property "remote.session" without inject
+       *
+       * from inside `inject`. The renderer catches that, retires the entry and
+       * silently paints the shipped picker — the plugin "just disappears".
+       * Declaring what the callee needs is part of calling it, so they stay.
        */
+      inject: ['locale', 'sessions', 'slots', 'remote', 'remote.session'],
       apply(ctx) {
         report(`apply 已调用（slots=${ctx.get('slots') === undefined ? '尚未就绪' : '就绪'}）`)
 
         /**
-         * The catalogue is built HERE, in `apply`, but it reads the `remote`
-         * service LAZILY.
-         *
-         * Two facts pull in opposite directions and this is the seam between
-         * them:
-         *
-         *  - Event subscriptions must be installed from the plugin's own `apply`
-         *    fiber. The gateway registers a forwarded-event listener in the
-         *    CALLING fiber's private event domain, and a subscription made from a
-         *    `ctx.inject` callback lands in a different domain: `$on` returns a
-         *    disposer, so it looks successful, but the listener never fires.
-         *  - `remote` is frequently NOT visible yet when `apply` runs. Capturing
-         *    `ctx.get('remote')` here froze `undefined`, and every catalogue load
-         *    then answered "modelCatalog is unavailable".
-         *
-         * So the catalogue holds a resolver, not the face, and the subscription
-         * is attached as soon as the service appears.
-         */
-        const remoteFace = () => {
-          try { return ctx.get('remote') } catch { return undefined }
-        }
-        const catalog = createCatalog(remoteFace, (message) => { report(message) })
-        /**
-         * Attach the invalidation listeners, retrying once the remote exists.
+         * Register the seat through the shipped directory service.
          *
-         * `ctx.inject` runs the callback as soon as the named services are
-         * visible, which is the point at which `$on` can be reached — and it runs
-         * in this same `apply` fiber, so the subscription still lands in the
-         * dispatching domain.
+         * `ctx.inject` runs this callback once the named services are visible, so
+         * the registration lands at the same point the shipped one would. It is
+         * also re-run if a service goes away and returns, which is what keeps the
+         * seat from binding to `undefined` across a reconnect.
          */
-        let detachCatalog = () => {}
-        const attachCatalog = () => {
-          const remote = remoteFace()
-          if (remote === undefined) return false
-          detachCatalog = catalog.attach(remote, (event) => {
-            report(`收到失效事件 ${event}`)
-          })
-          report(`失效订阅：已挂到 remote.$on`)
-          return true
-        }
-        if (!attachCatalog()) {
-          report('remote 尚未就绪，等它出现后再挂失效订阅')
-          if (typeof ctx.inject === 'function') {
-            ctx.inject(['remote'], () => { attachCatalog() })
+        // `remote` / `remote.session` are declared here as well as on the plugin:
+        // this callback runs in the fiber that `ctx.inject` creates, and the
+        // directory resolver uses those two services through that context.
+        ctx.inject(['slots', MODEL_DIRECTORIES, 'remote', 'remote.session'], (scope) => {
+          const slots = scope.get('slots')
+          const sessions = scope.get('sessions')
+          /**
+           * The locale SERVICE, handed to the component as an observable source.
+           *
+           * Its snapshot is `{ active, locales, revision }` — NOT `{ locale }`.
+           * Reading the wrong field made every UI string fall back to Chinese no
+           * matter which language the shell was set to.
+           *
+           * It is passed through as a `{ getSnapshot, subscribe }` pair rather
+           * than resolved to a string here: `inject` is cached per session
+           * binding, so a string captured now would never follow a language
+           * switch made while the composer is on screen.
+           */
+          const locale = scope.get('locale')
+          const localeSource = locale !== undefined &&
+            typeof locale.getSnapshot === 'function' &&
+            typeof locale.subscribe === 'function'
+            ? locale
+            : undefined
+          const initialLocale = localeSource?.getSnapshot?.()?.active
+          const localeId = typeof initialLocale === 'string' && initialLocale.length > 0
+            ? initialLocale
+            : 'zh-CN'
+
+          if (slots === undefined) {
+            report('槽位未注册：slots 缺失')
+            return
           }
-        }
-        const detachReset = typeof ctx.on === 'function'
-          ? ctx.on('connection/reset', () => { catalog.resetGeneration() })
-          : undefined
-        const sessions = (() => {
-          try { return ctx.get('sessions') } catch { return undefined }
-        })()
-        const shipped = (() => {
-          try { return ctx.get(MODEL_DIRECTORIES) } catch { return undefined }
-        })()
-        const directories = shipped !== undefined && typeof shipped.directoryFor === 'function'
-          ? shipped
-          : createDirectoryService(catalog, sessions, remoteFace)
-        const ownsDirectories = directories !== shipped
-        report(`目录来源：${ownsDirectories ? '本插件自带实现' : '复用官方 modelDirectories'}`)
-        const detachDirectories = ownsDirectories && typeof ctx.provide === 'function'
-          ? ctx.provide(MODEL_DIRECTORIES, directories)
-          : undefined
-        if (typeof ctx.effect === 'function') {
-          ctx.effect(() => {
-            detachCatalog()
-            detachReset?.()
-            detachDirectories?.()
-          }, 'dsh-model-picker: catalogue and directories')
-        }
-
-        const install = (scope) => {
-          try {
-            const at = scope ?? ctx
-            const slots = at.slots ?? ctx.get('slots')
-            if (slots === undefined) {
-              report('slots 服务仍不可用，槽位未注册')
-              return
+
+          /**
+           * Register the seat.
+           *
+           * Two details matter:
+           *
+           *  - NO `children` table. The child slot `conversation.input.model.label`
+           *    is declared by the shipped occupant, and a child declaration is
+           *    EXCLUSIVE per slot key: `slots.register` throws
+           *    `slot "…label" is already declared (by …)` the moment a second entry
+           *    offers the same child. The throw escapes the slot callback and the
+           *    picker stops rendering. Disposing first does not help either — the
+           *    declaration belongs to the shipped entry, which never disposes.
+           *
+           *  - The service lookup happens INSIDE the callback. `models` may not be
+           *    visible yet when `apply` runs; reading it here means the registration
+           *    waits for it instead of binding to undefined.
+           *
+           * The cost of dropping the child declaration is that provider badges
+           * mounted at `conversation.input.model.label` no longer render here. That
+           * is the same trade the reference plugin makes, and it is what makes the
+           * registration survive.
+           */
+          let disposeCurrent = null
+          slots.inject(SLOT, () => {
+            const models = scope.get(MODEL_DIRECTORIES)
+            if (models === undefined) {
+              report('modelDirectories 缺失，暂不注册')
+              return () => {}
             }
-            const locale = ctx.get('locale')
-            const localeId = typeof locale?.getLocale === 'function'
-              ? String(locale.getLocale()?.locale ?? 'zh-CN')
-              : 'zh-CN'
-            /**
-             * Neither `ctx.remote` nor `ctx.remote.session` can be read through
-             * the property proxy without an `inject` entry — Cordis throws
-             * `cannot get property "remote.session" without inject`, which crashed
-             * this component on its first render and got the entry abdicated.
-             *
-             * `ctx.get(...)` returns `undefined` instead of throwing, so the
-             * picker degrades to its "could not load the model list" state rather
-             * than taking the whole slot down.
-             */
-            const remoteSession = at['remote.session'] ?? ctx.get('remote.session') ?? remoteFace()?.session
-
-            slots.inject(SLOT, () => {
-              report('槽位回调已运行，准备注册 occupant')
-              /**
-               * NO `children` declaration, on purpose.
-               *
-               * A child slot may be declared exactly once, and the shipped picker
-               * already declares `conversation.input.model.label` for its own
-               * occupant. Declaring it here threw during registration, which is
-               * what removed the shipped occupant and left the slot empty.
-               *
-               * The consequence is that provider decorations mounted on the label
-               * child do not render while this picker is in charge. Rendering them
-               * would require owning the declaration, i.e. the shipped
-               * `ui-model-selection` occupant being absent entirely.
-               */
-              const dispose = slots.register({
-                name: SLOT,
-                priority: SHADOW_PRIORITY,
-                inject: (sessionId) => {
-                  const sessionSessions = ctx.get('sessions')
-                  /**
-                   * The per-session directory is the data face of this picker.
-                   *
-                   * `directoryFor` is the shipped service's own entry point; when
-                   * this plugin had to provide the service, the fallback has the
-                   * same signature, so the component never knows the difference.
-                   */
-                  const directory = directories.directoryFor(sessionId)
-                  // The shipped directory projects inside its constructor and on
-                  // its subscriptions; it exposes no `sync`. Only this plugin's
-                  // fallback has one, so probe instead of assuming — calling it
-                  // unconditionally threw on the shipped service and took the
-                  // whole slot registration down with it.
-                  if (typeof directory?.sync === 'function') directory.sync()
+            // The callback can fire more than once (a service re-appearing re-runs
+            // it). Registering twice at the same priority throws
+            // `single slot "…" already has a registration`, so the previous one is
+            // released first. Without a children table this is safe — the child
+            // declaration is what cannot be released.
+            if (disposeCurrent !== null) {
+              try {
+                disposeCurrent()
+              } catch {
+                // Already gone.
+              }
+              disposeCurrent = null
+            }
+            report('槽位回调已运行，准备注册 occupant')
+            disposeCurrent = slots.register({
+              name: SLOT,
+              priority: SHADOW_PRIORITY,
+              inject: (sessionId) => {
+                const directory = models.directoryFor(sessionId)
+                const available = typeof sessions?.subagentAddress === 'function'
+                  ? sessions.subagentAddress(sessionId) === undefined
+                  : true
+                return {
+                  localeId,
+                  localeSource,
+                  available,
+                  // The shipped registration hands over the STORE, not the
+                  // controller; the component subscribes to it directly.
+                  directory: directory.store,
+                  load: () => {
+                    if (available) directory.load().catch(() => {})
+                  },
                   /**
-                   * The directory's own snapshot, reported once per registration.
+                   * Submit one triple.
                    *
-                   * This is the line that tells the two "not refreshed" failure
-                   * modes apart: if the group count here stops matching what the
-                   * Host now offers, the directory is stale; if it tracks the Host
-                   * while the panel still shows old rows, the panel is not
-                   * rendering the update.
+                   * The RESULT IS PASSED THROUGH UNCHANGED. `ModelDirectory.select`
+                   * resolves to `{ ok: true, value }` or `{ ok: false, error }`,
+                   * and the component — like the shipped one — reads `ok` to
+                   * decide whether to close the panel and which failure to show.
+                   * Mapping it to a boolean here made every successful pick look
+                   * like a failure: the model switched but the list stayed open,
+                   * and a settled effort level dropped its optimistic draft.
                    */
-                  const snapshot = directory?.store?.getSnapshot?.()
-                  report(`目录快照：${Array.isArray(snapshot?.groups) ? snapshot.groups.length : 0} 组 / 状态 ${snapshot?.status ?? '?'}`)
-                  return {
-                    sessionId,
-                    localeId,
-                    remote: remoteFace(),
-                    remoteSession,
-                    sessions: sessionSessions,
-                    catalog,
-                    directory,
-                    available: isAvailable(sessionSessions, sessionId)
-                  }
+                  select: (selection) => available
+                    ? directory.select(selection)
+                    : Promise.resolve(undefined)
                 }
-              }, ModelPicker)
-              report('occupant 已注册（priority ' + SHADOW_PRIORITY + '）')
-              return dispose
-            })
-          } catch (error) {
-            report(`槽位注册抛错：${error instanceof Error ? `${error.message}` : String(error)}`)
-          }
-        }
-
-        // Soft wait: `apply` has already run, so a service that never shows up
-        // can no longer fail the boot. The remotes are included because the
-        // picker cannot do anything without them, and waiting here keeps the
-        // failure to a missing control instead of a crashed one.
-        if (typeof ctx.inject === 'function') ctx.inject(['slots', 'remote', 'remote.session'], install)
-        else install(ctx)
+              }
+            }, ModelPicker)
+            return () => {
+              if (disposeCurrent !== null) {
+                try { disposeCurrent() } catch { /* already gone */ }
+                disposeCurrent = null
+              }
+            }
+          })
+        })
       }
     }
   }