@tzyc/dsh-model-visibility 1.9.0 → 1.10.0

package/client-src/checker-view.mjs

@@ -0,0 +1,221 @@
+/**
+ * The online capability verification panel.
+ *
+ * The user picks a checker route (provider + model) and a write-back switch,
+ * runs the sweep, and the panel polls the Host for progress and the checker's
+ * token spend. The last route choice is kept in browser storage only: the
+ * Host persists run facts, not UI selections.
+ *
+ * @module client-src/checker-view
+ */
+
+const React = require('react')
+const h = React.createElement
+
+import { formatTokens, checkerRoutesOf } from './pure.mjs'
+import { useSource } from './hooks.mjs'
+
+const PICK_KEY = 'dsh-model-visibility:checker-pick:v1'
+
+function readPick() {
+  try {
+    const parsed = JSON.parse(window.localStorage.getItem(PICK_KEY))
+    return parsed !== null && typeof parsed === 'object'
+      ? {
+          provider: typeof parsed.provider === 'string' ? parsed.provider : '',
+          model: typeof parsed.model === 'string' ? parsed.model : '',
+          writeBack: parsed.writeBack !== false,
+        }
+      : { provider: '', model: '', writeBack: true }
+  } catch (_error) {
+    return { provider: '', model: '', writeBack: true }
+  }
+}
+
+function persistPick(pick) {
+  try {
+    window.localStorage.setItem(PICK_KEY, JSON.stringify(pick))
+  } catch (_error) {
+    // Storage availability is optional for this preference.
+  }
+}
+
+export function VerifyPanel({ verify, catalog, t, canUse }) {
+  const state = useSource(verify)
+  const [pick, setPick] = React.useState(readPick)
+  const [message, setMessage] = React.useState(null)
+  const [open, setOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    verify.load()
+  }, [verify])
+
+  const routeOptions = checkerRoutesOf(catalog?.groups)
+  const route = routeOptions.find((entry) => entry.id === pick.provider) ?? null
+  const progress = state.snapshot?.state
+  const running = progress?.running === true
+  const finished = progress?.phase === 'done' || progress?.phase === 'cancelled'
+  const models = (catalog?.groups ?? [])
+    .find((group) => group.id === pick.provider)?.models ?? []
+
+  if (!canUse) {
+    return h('div', { className: 'mvp_fallback' }, t('checker.hostStale'))
+  }
+
+  const tokensSpent = progress ? formatTokens((progress.tokenUsage?.[0] ?? 0) + (progress.tokenUsage?.[1] ?? 0)) : null
+
+  const commit = (next) => {
+    setPick(next)
+    persistPick(next)
+  }
+
+  const run = () => {
+    setMessage(null)
+    verify
+      .start({ provider: pick.provider, model: pick.model, writeBack: pick.writeBack })
+      .then((result) => {
+        if (result !== undefined && result.ok === false) {
+          setMessage(result.message ?? t('checker.failed'))
+        }
+      })
+      .catch((error) => setMessage(String(error?.message ?? error)))
+  }
+
+  const cancel = () => {
+    verify.cancel().catch((error) => setMessage(String(error?.message ?? error)))
+  }
+
+  return h(
+    'div',
+    { className: 'mvp_checker' + (open ? '' : ' mvp_checker--closed') },
+    h(
+      'button',
+      {
+        type: 'button',
+        className: 'mvp_checkerHead',
+        'aria-expanded': open,
+        onClick: () => setOpen(!open),
+      },
+      h('span', { className: 'mvp_checkerTitle' }, t('checker.title')),
+      h(
+        'span',
+        { className: 'mvp_checkerSummary' },
+        running
+          ? t('checker.running', {
+              done: progress?.done ?? 0,
+              total: progress?.total ?? 0,
+              phase: t(`checker.phase.${progress?.phase ?? 'checker'}`),
+            })
+          : finished
+            ? t('checker.finished', { done: progress?.done ?? 0, total: progress?.total ?? 0, tokens: tokensSpent })
+            : t('checker.idle'),
+      ),
+    ),
+    open
+      ? h(
+          'div',
+          { className: 'mvp_checkerBody' },
+          h('div', { className: 'mvp_checkerHint' }, t('checker.description')),
+          h(
+            'div',
+            { className: 'mvp_checkerForm' },
+            h(
+              'label',
+              { className: 'mvp_field' },
+              h('span', { className: 'mvp_fieldLabel' }, t('checker.provider')),
+              h(
+                'select',
+                {
+                  className: 'mvp_select',
+                  value: pick.provider,
+                  'aria-label': t('checker.provider'),
+                  onChange: (event) => commit({ ...pick, provider: event.target.value, model: '' }),
+                },
+                h('option', { key: '', value: '' }, t('override.kindAuto')),
+                routeOptions.map((entry) => h('option', { key: entry.id, value: entry.id }, entry.name)),
+              ),
+            ),
+            h(
+              'label',
+              { className: 'mvp_field' },
+              h('span', { className: 'mvp_fieldLabel' }, t('checker.model')),
+              h(
+                'select',
+                {
+                  className: 'mvp_select',
+                  value: pick.model,
+                  'aria-label': t('checker.model'),
+                  disabled: route === null,
+                  onChange: (event) => commit({ ...pick, model: event.target.value }),
+                },
+                h('option', { key: '', value: '' }, t('override.kindAuto')),
+                models.map((model) =>
+                  h('option', { key: model.id, value: model.id }, model.name ?? model.id),
+                ),
+              ),
+            ),
+          ),
+          h(
+            'div',
+            { className: 'mvp_checkerActions' },
+            h(
+              'button',
+              {
+                type: 'button',
+                role: 'switch',
+                className: 'mvp_switch',
+                'aria-checked': pick.writeBack,
+                title: t('checker.writeBackTitle'),
+                disabled: running,
+                onClick: () => commit({ ...pick, writeBack: !pick.writeBack }),
+              },
+              h('span', { className: 'mvp_thumb' }),
+            ),
+            h(
+              'button',
+              {
+                type: 'button',
+                className: 'mvp_button',
+                title: t('checker.writeBackTitle'),
+                onClick: () => commit({ ...pick, writeBack: !pick.writeBack }),
+              },
+              t('checker.writeBack'),
+            ),
+            h(
+              'button',
+              {
+                type: 'button',
+                className: running ? 'mvp_button' : 'mvp_button mvp_button--accent',
+                disabled: running ? false : pick.provider === '' || pick.model === '',
+                title: running ? t('checker.cancelTitle') : t('checker.startTitle'),
+                onClick: running ? cancel : run,
+              },
+              running ? t('checker.cancel') : t('checker.start'),
+            ),
+          ),
+          progress !== null && (running || finished)
+            ? h(
+                'div',
+                { className: 'mvp_checkerProgress' },
+                t('checker.progress', {
+                  done: progress?.done ?? 0,
+                  total: progress?.total ?? 0,
+                  tokens: tokensSpent,
+                }),
+              )
+            : null,
+          (progress?.errors?.length ?? 0) > 0
+            ? h(
+                'div',
+                {
+                  className: 'mvp_usageHint mvp_usageHint--warn',
+                  title: progress.errors.join('\n'),
+                },
+                t('checker.errors', { count: progress.errors.length }),
+              )
+            : null,
+          message !== null ? h('div', { className: 'mvp_usageHint mvp_usageHint--warn' }, message) : null,
+        )
+      : null,
+  )
+}

package/client-src/composer-filter.mjs

@@ -0,0 +1,153 @@
+import { keyOf } from './format.mjs'
+import { FIELD } from './constants.mjs'
+
+function hiddenListOf(snapshot) {
+  const value = snapshot && snapshot.value
+  return value && Array.isArray(value[FIELD]) ? value[FIELD] : []
+}
+
+/**
+ * Rewrite one directory store in place so its snapshots omit hidden models.
+ *
+ * The shipped composer seat may capture the directory store before this plugin
+ * applies, so replacing the store object would never reach it; rewriting
+ * getSnapshot/subscribe on the captured object does. The session's active
+ * model stays listed even while hidden, because the shipped trigger
+ * resolves its label from this same catalog.
+ */
+export function patchDirectoryStore(store, form) {
+  const readBase = store.getSnapshot.bind(store)
+  const subscribeBase = store.subscribe.bind(store)
+  const originalGet = store.getSnapshot
+  const originalSubscribe = store.subscribe
+  const listeners = new Set()
+  let snapshot = null
+  let lastBase
+  let lastSignature
+
+  const build = (baseSnapshot) => {
+    const hidden = new Set(hiddenListOf(form.getSnapshot()))
+    const activeSelection = baseSnapshot.current
+    const groups = []
+    for (const group of baseSnapshot.groups || []) {
+      const all = group.models || []
+      const models = []
+      for (const model of all) {
+        const key = keyOf(group.id, model.id)
+        const active =
+          activeSelection !== null &&
+          activeSelection !== undefined &&
+          activeSelection.provider === group.id &&
+          activeSelection.model === model.id
+        if (!hidden.has(key) || active) models.push(model)
+      }
+      if (models.length === 0) continue
+      groups.push(models.length === all.length ? group : { ...group, models })
+    }
+    return { ...baseSnapshot, groups }
+  }
+
+  const current = () => {
+    const baseSnapshot = readBase()
+    const signature = hiddenListOf(form.getSnapshot()).join('\u0000')
+    if (snapshot !== null && baseSnapshot === lastBase && signature === lastSignature) {
+      return snapshot
+    }
+    lastBase = baseSnapshot
+    lastSignature = signature
+    snapshot = build(baseSnapshot)
+    return snapshot
+  }
+
+  const emit = () => {
+    const previous = snapshot
+    const next = current()
+    if (previous === next) return
+    for (const listener of Array.from(listeners)) listener()
+  }
+
+  Object.defineProperties(store, {
+    __modelVisibilityPatched: { value: true, configurable: true },
+    getSnapshot: { value: current, configurable: true, writable: true },
+    subscribe: {
+      value(listener) {
+        listeners.add(listener)
+        const stop = subscribeBase(listener)
+        return () => {
+          listeners.delete(listener)
+          stop()
+        }
+      },
+      configurable: true,
+      writable: true,
+    },
+  })
+
+  return {
+    emit,
+    restore() {
+      Object.defineProperties(store, {
+        getSnapshot: { value: originalGet, configurable: true, writable: true },
+        subscribe: { value: originalSubscribe, configurable: true, writable: true },
+      })
+      delete store.__modelVisibilityPatched
+      listeners.clear()
+    },
+  }
+}
+
+/**
+ * Patch every model directory — the ones already live when the plugin
+ * applies and every directory resolved later — so the shipped seat keeps
+ * owning the trigger, the Model / Effort rows, and third-party menu
+ * enhancements such as the reasoning-effort slider.
+ */
+export function installComposerFilter(scope, form) {
+  const models = scope.modelDirectories
+  const original = models.directoryFor
+  if (typeof original !== 'function') return
+  const records = new Set()
+
+  const ensure = (directory) => {
+    if (directory === undefined || directory === null) return directory
+    const store = directory.store
+    if (store === undefined || store === null || store.__modelVisibilityPatched === true) {
+      return directory
+    }
+    try {
+      records.add(patchDirectoryStore(store, form))
+    } catch (_error) {
+      // Fail open: an unwritable store simply keeps showing every model.
+    }
+    return directory
+  }
+
+  scope.effect(() => {
+    const live = models.live && models.live.directories ? models.live.directories.values : null
+    if (live instanceof Set) for (const directory of live) ensure(directory)
+
+    const stopForm = form.subscribe(() => {
+      for (const record of records) record.emit()
+    })
+
+    const wrapper = function directoryFor(sessionId) {
+      return ensure(original.call(this, sessionId))
+    }
+    Object.defineProperty(models, 'directoryFor', {
+      value: wrapper,
+      configurable: true,
+      writable: true,
+    })
+
+    return () => {
+      stopForm()
+      for (const record of records) record.restore()
+      records.clear()
+      if (Object.getOwnPropertyDescriptor(models, 'directoryFor')?.value === wrapper) {
+        delete models.directoryFor
+      }
+    }
+  }, 'model-visibility: filtered model directory')
+}
+
+/* ----------------------------------------------------- settings page */

package/client-src/constants.mjs

@@ -0,0 +1,20 @@
+/** Dictionary namespace owned by this plugin. */
+export const NS = 'model-visibility'
+/** Host entry id from cordis.patch.yml; also the settings namespace. */
+export const ENTRY = 'model-visibility'
+/** Config field persisted by the Host settings document. */
+export const FIELD = 'hidden'
+/** Settings section id. */
+export const SECTION_ID = 'model-visibility'
+/**
+ * Same-origin route the Host half registers through `connection.fetch`.
+ * Resolved against the page base so a reverse-proxy prefix is preserved.
+ */
+export const API = (() => {
+  if (typeof document === 'undefined') return '/api/dsh-model-visibility'
+  try {
+    return new URL('api/dsh-model-visibility', document.baseURI).pathname
+  } catch (_error) {
+    return '/api/dsh-model-visibility'
+  }
+})()

package/client-src/css.mjs

@@ -0,0 +1,248 @@
+export const CSS = `
+.mvp_page{box-sizing:border-box;width:100%;height:100%;min-height:0;flex-direction:column;display:flex;overflow-y:auto;padding-bottom:24px}
+.mvp_head{flex:none;flex-direction:column;gap:6px;padding:4px 0 14px;display:flex}
+.mvp_title{color:var(--dsw-alias-label-primary);margin:0;font-size:16px;font-weight:500;line-height:24px}
+.mvp_desc{color:var(--dsw-alias-label-secondary);margin:0;font-size:12px;line-height:18px}
+.mvp_toolbar{border-bottom:.5px solid var(--dsw-alias-border-l2);flex:none;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;display:flex}
+.mvp_summary{color:var(--dsw-alias-label-secondary);flex:1;min-width:0;font-size:12px;line-height:18px}
+.mvp_actions{flex:none;align-items:center;justify-content:flex-end;gap:8px;display:flex;flex-wrap:wrap}
+.mvp_button{box-sizing:border-box;height:28px;color:var(--dsw-alias-label-primary);cursor:pointer;background:0 0;border:1px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-sm,6px);padding:0 10px;font-family:inherit;font-size:12px;line-height:18px}
+.mvp_button--accent{color:var(--dsw-alias-brand-primary);border-color:color-mix(in srgb, var(--dsw-alias-brand-primary) 55%, transparent)}
+.mvp_button:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
+.mvp_button:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+.mvp_button:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
+.mvp_group{flex:none;flex-direction:column;display:flex}
+.mvp_groupHead{justify-content:space-between;align-items:center;gap:12px;padding:14px 0 6px;display:flex}
+.mvp_groupTitle{color:var(--dsw-alias-label-primary);align-items:baseline;row-gap:2px;gap:8px;font-size:14px;font-weight:500;line-height:22px;display:flex;flex-wrap:wrap}
+.mvp_groupName{min-width:0}
+.mvp_collapse{box-sizing:border-box;flex:none;align-self:center;width:18px;height:18px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:0;border-radius:4px;justify-content:center;align-items:center;padding:0;font-family:inherit;font-size:11px;line-height:18px;display:inline-flex}
+.mvp_collapse:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
+.mvp_collapse:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+.mvp_groupCount{color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:400;line-height:18px}
+.mvp_row{border-bottom:.5px solid var(--dsw-alias-border-l1);justify-content:space-between;align-items:center;gap:16px;padding:10px 0;display:flex}
+.mvp_row--gen{background:transparent;background:color-mix(in srgb, var(--dsw-alias-brand-primary) 4%, transparent)}
+.mvp_row--kind-image{box-shadow:inset 2px 0 0 color-mix(in srgb, var(--dsw-alias-state-business-primary) 70%, transparent);background:transparent;background:color-mix(in srgb, var(--dsw-alias-state-business-primary) 4%, transparent)}
+.mvp_row--kind-video{box-shadow:inset 2px 0 0 color-mix(in srgb, var(--dsw-alias-state-success-primary) 70%, transparent);background:transparent;background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 4%, transparent)}
+.mvp_row--kind-embedding{box-shadow:inset 2px 0 0 color-mix(in srgb, var(--dsw-alias-state-warn-primary) 70%, transparent);background:transparent;background:color-mix(in srgb, var(--dsw-alias-state-warn-primary) 4%, transparent)}
+.mvp_row--kind-rerank{box-shadow:inset 2px 0 0 color-mix(in srgb, var(--dsw-alias-state-error-primary) 60%, transparent);background:transparent;background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 3%, transparent)}
+.mvp_row--kind-audio{box-shadow:inset 2px 0 0 color-mix(in srgb, color-mix(in srgb, var(--dsw-alias-state-business-primary) 50%, var(--dsw-alias-state-error-primary)) 70%, transparent);background:transparent;background:color-mix(in srgb, color-mix(in srgb, var(--dsw-alias-state-business-primary) 50%, var(--dsw-alias-state-error-primary)) 4%, transparent)}
+.mvp_row--kind-classifier{box-shadow:inset 2px 0 0 color-mix(in srgb, var(--dsw-alias-state-error-secondary) 60%, transparent);background:transparent;background:color-mix(in srgb, var(--dsw-alias-state-error-secondary) 3%, transparent)}
+.mvp_row--kind-translation{box-shadow:inset 2px 0 0 var(--dsw-alias-border-l2)}
+.mvp_rowText{flex-direction:column;gap:2px;min-width:0;display:flex}
+.mvp_rowTitle{color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
+.mvp_rowMeta{color:var(--dsw-alias-label-tertiary);text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:18px;overflow:hidden}
+.mvp_error{color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px;padding:6px 0}
+.mvp_switch{position:relative;flex:none;box-sizing:border-box;width:36px;height:20px;padding:0;border:0;border-radius:999px;background:var(--dsw-alias-border-l2);cursor:pointer;transition:background-color .15s ease}
+.mvp_switch[aria-checked="true"]{background:var(--dsw-alias-bg-base)}
+.mvp_switch:disabled{opacity:.45;cursor:default}
+.mvp_switch:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
+.mvp_thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--dsw-alias-label-secondary);transition:transform .15s ease,background-color .15s ease}
+.mvp_switch[aria-checked="true"] .mvp_thumb{background:var(--dsw-alias-label-primary);transform:translateX(16px)}
+.mvp_tags{flex-wrap:wrap;align-items:center;gap:4px;margin-top:4px;display:flex}
+.mvp_tag{box-sizing:border-box;max-width:100%;height:18px;color:var(--dsw-alias-label-secondary);white-space:nowrap;background:0 0;border:.5px solid var(--dsw-alias-border-l2);border-radius:4px;align-items:center;padding:0 6px;font-size:11px;line-height:16px;display:inline-flex;overflow:hidden;text-overflow:ellipsis}
+.mvp_tag--accent{color:var(--dsw-alias-brand-primary);background:transparent;background:color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent);border-color:color-mix(in srgb, var(--dsw-alias-brand-primary) 45%, transparent)}
+.mvp_tag--vision{color:var(--dsw-alias-state-business-primary);background:transparent;background:color-mix(in srgb, var(--dsw-alias-state-business-primary) 10%, transparent);border-color:color-mix(in srgb, var(--dsw-alias-state-business-primary) 45%, transparent)}
+.mvp_tag--kind{font-weight:500}
+.mvp_tag--kind-image{color:var(--dsw-alias-state-business-primary);background:transparent;background:color-mix(in srgb, var(--dsw-alias-state-business-primary) 12%, transparent);border-color:color-mix(in srgb, var(--dsw-alias-state-business-primary) 55%, transparent)}
+.mvp_tag--kind-video{color:var(--dsw-alias-state-success-primary);background:transparent;background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 12%, transparent);border-color:color-mix(in srgb, var(--dsw-alias-state-success-primary) 55%, transparent)}
+.mvp_tag--kind-embedding{color:var(--dsw-alias-state-warn-primary);background:transparent;background:color-mix(in srgb, var(--dsw-alias-state-warn-primary) 14%, transparent);border-color:color-mix(in srgb, var(--dsw-alias-state-warn-primary) 55%, transparent)}
+.mvp_tag--kind-rerank{color:var(--dsw-alias-state-error-primary);background:transparent;background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);border-color:color-mix(in srgb, var(--dsw-alias-state-error-primary) 50%, transparent)}
+.mvp_tag--kind-audio{color:color-mix(in srgb, var(--dsw-alias-state-business-primary) 50%, var(--dsw-alias-state-error-primary));background:transparent;background:color-mix(in srgb, color-mix(in srgb, var(--dsw-alias-state-business-primary) 50%, var(--dsw-alias-state-error-primary)) 12%, transparent);border-color:color-mix(in srgb, color-mix(in srgb, var(--dsw-alias-state-business-primary) 50%, var(--dsw-alias-state-error-primary)) 50%, transparent)}
+.mvp_tag--kind-classifier{color:var(--dsw-alias-state-error-secondary);background:transparent;background:color-mix(in srgb, var(--dsw-alias-state-error-secondary) 12%, transparent);border-color:color-mix(in srgb, var(--dsw-alias-state-error-secondary) 55%, transparent)}
+.mvp_tag--kind-translation{color:var(--dsw-alias-label-tertiary);border-color:var(--dsw-alias-border-l2)}
+.mvp_tag--kind-unknown{color:var(--dsw-alias-label-secondary);border-color:var(--dsw-alias-border-l2)}
+.mvp_tag--inferred{border-style:dashed}
+.mvp_tag--muted{color:var(--dsw-alias-label-tertiary);border-color:var(--dsw-alias-border-l1)}
+.mvp_groupCap{color:var(--dsw-alias-label-tertiary);font-size:11px;font-weight:400;line-height:16px}
+.mvp_kindCount--image{color:var(--dsw-alias-state-business-primary)}
+.mvp_kindCount--video{color:var(--dsw-alias-state-success-primary)}
+.mvp_kindCount--other{color:var(--dsw-alias-state-warn-primary)}
+.mvp_applyRow{flex:none;align-items:flex-start;gap:10px;margin:8px 0 2px;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-sm,6px);padding:8px 10px;display:flex;background:transparent;background:color-mix(in srgb, var(--dsw-alias-brand-primary) 4%, transparent)}
+.mvp_applyText{flex-direction:column;gap:2px;min-width:0;display:flex}
+.mvp_applyTitle{color:var(--dsw-alias-label-primary);font-size:12px;font-weight:500;line-height:18px}
+.mvp_applyHint{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}
+.mvp_applyRow .mvp_switch{margin-top:1px}
+.mvp_groupProbe{color:var(--dsw-alias-label-tertiary);border:.5px dashed var(--dsw-alias-border-l2);border-radius:4px;max-width:100%;white-space:nowrap;text-overflow:ellipsis;padding:0 5px;font-size:10px;line-height:15px;overflow:hidden}
+.mvp_filters{align-items:center;gap:6px;padding:8px 0 2px;display:flex;flex-wrap:wrap}
+.mvp_filterLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}
+.mvp_search{align-items:center;gap:6px;display:flex;min-width:220px;flex:1 1 220px}
+.mvp_searchInput{box-sizing:border-box;width:100%;height:28px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-base);border:1px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-sm,6px);padding:0 8px;font-family:inherit;font-size:12px;line-height:18px}
+.mvp_searchInput:focus-visible,.mvp_contextSelect:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+.mvp_context{align-items:center;gap:6px;display:flex}
+.mvp_contextSelect{box-sizing:border-box;height:24px;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-bg-base);border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-sm,6px);padding:0 6px;font-family:inherit;font-size:11px;line-height:18px}
+.mvp_filter{box-sizing:border-box;height:24px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:.5px solid var(--dsw-alias-border-l2);border-radius:999px;padding:0 9px;font-family:inherit;font-size:11px;line-height:18px}
+.mvp_filter:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
+.mvp_filter[aria-pressed="true"]{color:var(--dsw-alias-brand-primary);border-color:color-mix(in srgb, var(--dsw-alias-brand-primary) 55%, transparent);background:transparent;background:color-mix(in srgb, var(--dsw-alias-brand-primary) 12%, transparent)}
+.mvp_filter:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+.mvp_note{color:var(--dsw-alias-label-tertiary);flex:none;padding:6px 0 0;font-size:10px;line-height:15px}
+.mvp_legend{color:var(--dsw-alias-label-tertiary);flex:none;padding:8px 0 2px;font-size:11px;line-height:16px}
+.mvp_fallback{color:var(--dsw-alias-label-secondary);background:transparent;background:color-mix(in srgb, var(--dsw-alias-state-warn-primary) 10%, transparent);border-radius:var(--dsw-radius-sm,6px);padding:6px 8px;font-size:11px;line-height:16px;margin-top:8px}
+.mvp_rowActions{flex:none;align-items:center;gap:8px;display:flex}
+.mvp_editButton{height:24px;padding:0 8px;font-size:11px;line-height:18px}
+.mvp_editButton[aria-pressed="true"]{color:var(--dsw-alias-brand-primary);border-color:color-mix(in srgb, var(--dsw-alias-brand-primary) 55%, transparent)}
+.mvp_editor{box-sizing:border-box;border:.5px solid color-mix(in srgb, var(--dsw-alias-brand-primary) 45%, transparent);border-radius:var(--dsw-radius-sm,6px);background:transparent;background:color-mix(in srgb, var(--dsw-alias-brand-primary) 4%, transparent);margin:2px 0 12px;padding:10px 12px;flex-direction:column;gap:10px;display:flex}
+.mvp_editorHead{flex-direction:column;gap:2px;display:flex}
+.mvp_editorTitle{color:var(--dsw-alias-label-primary);font-size:12px;font-weight:500;line-height:18px}
+.mvp_editorSub{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}
+.mvp_editorGrid{flex-wrap:wrap;align-items:flex-end;gap:10px 16px;display:flex}
+.mvp_field{flex-direction:column;gap:4px;min-width:140px;display:flex}
+.mvp_field--wide{flex:1 1 100%}
+.mvp_fieldLabel{color:var(--dsw-alias-label-secondary);font-size:11px;line-height:16px}
+.mvp_select,.mvp_number{box-sizing:border-box;height:26px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-base);border:1px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-sm,6px);padding:0 8px;font-family:inherit;font-size:12px;line-height:18px}
+.mvp_number{width:180px}
+.mvp_select:focus-visible,.mvp_number:focus-visible,.mvp_chip:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+.mvp_chips{flex-wrap:wrap;align-items:center;gap:6px;display:flex}
+.mvp_chip{box-sizing:border-box;height:24px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:.5px solid var(--dsw-alias-border-l2);border-radius:999px;padding:0 10px;font-family:inherit;font-size:11px;line-height:18px}
+.mvp_chip:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
+.mvp_chip[aria-pressed="true"]{color:var(--dsw-alias-brand-primary);border-color:color-mix(in srgb, var(--dsw-alias-brand-primary) 55%, transparent);background:transparent;background:color-mix(in srgb, var(--dsw-alias-brand-primary) 12%, transparent)}
+.mvp_chip:disabled{opacity:.45;cursor:default}
+.mvp_editorFooter{justify-content:space-between;align-items:center;gap:12px;display:flex;flex-wrap:wrap}
+.mvp_editorNote{color:var(--dsw-alias-label-tertiary);font-size:10px;line-height:15px;flex:1 1 220px;min-width:0}
+.mvp_check{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dsw-alias-label-secondary);cursor:pointer}
+.mvp_check input{accent-color:var(--dsw-alias-brand-primary, #4c8dff);margin:0}
+.mvp_editorActions{flex:none;align-items:center;gap:6px;display:flex;flex-wrap:wrap}
+/* ---------------------------------------------------- usage & checker */
+
+.mvp_usage {
+  margin: 0 0 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border, transparent);
+  border-radius: 10px;
+  background: transparent;
+  background: color-mix(in srgb, currentColor 4%, transparent);
+}
+
+.mvp_usage--off {
+  opacity: 0.75;
+}
+
+.mvp_usageHead {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mvp_usageTitle {
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.mvp_usageComputing {
+  color: var(--dsw-alias-text-tertiary, currentColor);
+  font-size: 11px;
+}
+
+.mvp_usageActions {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.mvp_usageRanges {
+  display: flex;
+  gap: 18px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
+
+.mvp_stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.mvp_statLabel {
+  font-size: 11px;
+  color: var(--dsw-alias-text-tertiary, currentColor);
+}
+
+.mvp_statValue {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.mvp_stat--total .mvp_statValue {
+  font-weight: 600;
+}
+
+.mvp_usageHint {
+  margin-top: 8px;
+  font-size: 11px;
+  color: var(--dsw-alias-text-tertiary, currentColor);
+}
+
+.mvp_usageHint--warn {
+  color: var(--dsw-alias-danger, #d0605e);
+}
+
+.mvp_checker {
+  margin: 0 0 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border, transparent);
+  border-radius: 10px;
+}
+
+.mvp_checkerHead {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 10px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mvp_checkerTitle {
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.mvp_checkerSummary {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--dsw-alias-text-tertiary, currentColor);
+}
+
+.mvp_checker--closed.mvp_checker {
+  padding: 8px 12px;
+}
+
+.mvp_checkerBody {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mvp_checkerHint {
+  font-size: 11px;
+  color: var(--dsw-alias-text-tertiary, currentColor);
+}
+
+.mvp_checkerForm {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  max-width: 560px;
+}
+
+.mvp_checkerActions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mvp_checkerSwitchText {
+  font-size: 12px;
+}
+
+.mvp_checkerProgress {
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--dsw-alias-text-secondary, currentColor);
+}
+
+`