@jeffusion/bungee-core 5.9.0 → 5.11.0

package/dist/plugins/token-stats/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "token-stats",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "schemaVersion": 2,
   "artifactKind": "runtime-plugin",
   "main": "index.js",
@@ -43,7 +43,8 @@
     ]
   },
   "dependencies": {
-    "token-metering": "^1.0.0"
+    "token-metering": "^1.0.0",
+    "models-dev": "^1.0.0"
   },
   "services": {
     "provides": [
@@ -59,6 +60,20 @@
         "version": 1,
         "process": "worker",
         "plugin": "token-metering"
+      },
+      {
+        "id": "models-dev.catalog.v1",
+        "version": 1,
+        "process": "worker",
+        "plugin": "models-dev",
+        "kind": "local"
+      },
+      {
+        "id": "models-dev.catalog.v1",
+        "version": 1,
+        "process": "control",
+        "plugin": "models-dev",
+        "kind": "local"
       }
     ]
   },
@@ -98,22 +113,40 @@
         "capability": "config.read"
       },
       {
-        "path": "/pricing/settings",
+        "path": "/pricing/models",
+        "methods": [
+          "GET"
+        ],
+        "handler": "getPricingModels",
+        "execution": "control",
+        "capability": "config.read"
+      },
+      {
+        "path": "/pricing/mappings",
+        "methods": [
+          "GET"
+        ],
+        "handler": "getPricingMappings",
+        "execution": "control",
+        "capability": "config.read"
+      },
+      {
+        "path": "/pricing/mappings",
         "methods": [
           "PUT"
         ],
-        "handler": "configurePricing",
+        "handler": "configurePricingMappings",
         "execution": "control",
         "capability": "config.write"
       },
       {
-        "path": "/pricing/refresh",
+        "path": "/models",
         "methods": [
-          "POST"
+          "GET"
         ],
-        "handler": "refreshPricing",
+        "handler": "getClientModels",
         "execution": "control",
-        "capability": "config.write"
+        "capability": "logs.read"
       }
     ],
     "navigation": [
@@ -158,7 +191,7 @@
       "ui.loadFailed": "Unable to load token usage",
       "ui.noData": "No token usage in this range",
       "settings.title": "Price settings",
-      "settings.description": "Load model prices from an online catalog to estimate costs for subsequent requests.",
+      "settings.description": "Configure model price aliases for subsequent cost estimates. Manage catalog downloads in Models.dev Catalog settings.",
       "settings.autoRefresh": "Automatic refresh",
       "settings.interval": "Refresh interval (minutes)",
       "settings.timeout": "Download timeout (seconds)",
@@ -186,6 +219,23 @@
       "settings.networkError": "Network or source error",
       "settings.invalid_catalogError": "No valid model prices returned",
       "settings.storageError": "Unable to save the price cache",
+      "settings.mappingsTitle": "Model price aliases",
+      "settings.mappingsDescription": "Map an exact, case-sensitive client model name to a provider's catalog price. Explicit aliases take priority and only affect subsequent cost estimates, not requests, recorded model names or historical costs. Up to 100 aliases.",
+      "settings.mappingsNoCatalog": "No catalog models available. Refresh the catalog in Models.dev Catalog settings.",
+      "settings.modelsError": "Unable to load pricing models.",
+      "settings.mappingSource": "Client model alias",
+      "settings.mappingSourcePlaceholder": "e.g. deepseek-ai/deepseek-v4-flash",
+      "settings.mappingProvider": "Pricing provider",
+      "settings.mappingTarget": "Catalog model",
+      "settings.mappingSearch": "Search model ID or name",
+      "settings.mappingNoModels": "No matching pricing models",
+      "settings.mappingRemove": "Remove",
+      "settings.mappingAdd": "Add alias",
+      "settings.mappingRetry": "Reload aliases",
+      "settings.mappingsSave": "Save aliases",
+      "settings.mappingsSaved": "Aliases saved",
+      "settings.mappingsInvalid": "Enter a unique alias and select an available provider/model for every row. Aliases are case-sensitive; blank fields and leading/trailing whitespace are not allowed.",
+      "settings.mappingUnavailable": "Target is no longer in the price catalog. Its cost is unknown; select another model or remove this alias.",
       "widgets.overview.title": "Token Overview",
       "widgets.time.title": "Token Trend",
       "page.title": "Token Statistics",
@@ -221,7 +271,17 @@
       "page.key.all": "All",
       "page.key.unattributed": "Unattributed / anonymous",
       "page.key.missing": "Unavailable key",
-      "page.key.loadFailed": "Unable to load key names; the selected ID filter remains active."
+      "page.key.loadFailed": "Unable to load key names; the selected ID filter remains active.",
+      "settings.catalogState": "Status",
+      "settings.catalogVersion": "Version",
+      "settings.stale": "Using last available catalog",
+      "settings.failed": "Unavailable",
+      "settings.catalogFailure": "Catalog refresh failed. The last available catalog is retained. Check Models.dev Catalog settings.",
+      "settings.clientModelsLoading": "Searching recorded client models…",
+      "settings.clientModelsError": "Unable to search client models. You can still enter an alias directly.",
+      "settings.clientModelsEmpty": "No matching client models. You can enter an alias directly.",
+      "settings.previousPage": "Previous page",
+      "settings.nextPage": "Next page"
     },
     "zh-CN": {
       "metadata.name": "Token 统计",
@@ -246,7 +306,7 @@
       "ui.loadFailed": "Token 用量加载失败",
       "ui.noData": "所选范围暂无 Token 用量",
       "settings.title": "价格设置",
-      "settings.description": "从在线价格目录获取模型单价，用于估算后续请求的费用。",
+      "settings.description": "配置用于后续费用估算的模型价格映射。目录下载请在 models.dev 目录设置中管理。",
       "settings.autoRefresh": "自动刷新",
       "settings.interval": "刷新间隔（分钟）",
       "settings.timeout": "下载超时（秒）",
@@ -274,6 +334,23 @@
       "settings.networkError": "网络或数据源错误",
       "settings.invalid_catalogError": "数据源没有有效的模型价格",
       "settings.storageError": "价格缓存保存失败",
+      "settings.mappingsTitle": "模型价格映射",
+      "settings.mappingsDescription": "将客户端模型别名精确映射到指定提供商的目录价格。区分大小写，映射优先于默认匹配，仅用于后续费用估算，不修改请求、统计模型名或历史金额。最多 100 条。",
+      "settings.mappingsNoCatalog": "暂无目录模型，请在 models.dev 目录设置中刷新。",
+      "settings.modelsError": "价格模型列表加载失败。",
+      "settings.mappingSource": "客户端模型别名",
+      "settings.mappingSourcePlaceholder": "例如 deepseek-ai/deepseek-v4-flash",
+      "settings.mappingProvider": "价格提供商",
+      "settings.mappingTarget": "价格表模型",
+      "settings.mappingSearch": "搜索模型 ID 或名称",
+      "settings.mappingNoModels": "没有匹配的价格模型",
+      "settings.mappingRemove": "移除",
+      "settings.mappingAdd": "添加映射",
+      "settings.mappingRetry": "重新加载映射",
+      "settings.mappingsSave": "保存映射",
+      "settings.mappingsSaved": "映射已保存",
+      "settings.mappingsInvalid": "每行需填写唯一别名并选择目录中可用的提供商及模型。别名区分大小写，不允许空值或首尾空格。",
+      "settings.mappingUnavailable": "目标模型已不在价格目录中，费用将显示未知；请选择其他模型或移除此映射。",
       "widgets.overview.title": "Token 概览",
       "widgets.time.title": "Token 趋势",
       "page.title": "Token 统计",
@@ -309,7 +386,17 @@
       "page.key.all": "全部",
       "page.key.unattributed": "未归属 / 匿名",
       "page.key.missing": "未找到的 Key",
-      "page.key.loadFailed": "Key 名称加载失败，仍按所选 ID 筛选。"
+      "page.key.loadFailed": "Key 名称加载失败，仍按所选 ID 筛选。",
+      "settings.catalogState": "状态",
+      "settings.catalogVersion": "版本",
+      "settings.stale": "使用上一次有效目录",
+      "settings.failed": "不可用",
+      "settings.catalogFailure": "目录刷新失败，保留上一次有效目录。请查看 models.dev 目录设置。",
+      "settings.clientModelsLoading": "正在搜索已记录的客户端模型…",
+      "settings.clientModelsError": "客户端模型搜索失败，仍可直接输入别名。",
+      "settings.clientModelsEmpty": "没有匹配的客户端模型，仍可直接输入别名。",
+      "settings.previousPage": "上一页",
+      "settings.nextPage": "下一页"
     }
   }
 }

package/dist/plugins/token-stats/ui/ClientModelPicker.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { requestPluginControl } from '@bungee/plugin-sdk';
+  import { createClientModelSearch, type ClientModelSearchState } from './client-model-search';
+
+  let { id, value, disabled = false, label, placeholder, loadingLabel, errorLabel, emptyLabel, previousLabel, nextLabel, onchange }: {
+    id: string; value: string; disabled?: boolean; label: string; placeholder: string;
+    loadingLabel: string; errorLabel: string; emptyLabel: string; previousLabel: string; nextLabel: string;
+    onchange: (value: string) => void;
+  } = $props();
+  const listId = $props.id();
+  let open = $state(false);
+  let keyword = $state('');
+  let restoringFocus = false;
+  let highlighted = $state(-1);
+  let container = $state<HTMLDivElement>();
+  let input = $state<HTMLInputElement>();
+  let results = $state<ClientModelSearchState>({ models: [], total: 0, page: 1, pageSize: 50, loading: false, error: false });
+  const search = createClientModelSearch(
+    (path, signal) => requestPluginControl('token-stats', path, 'GET', undefined, signal),
+    state => { results = state; highlighted = -1; },
+  );
+  const pages = $derived(Math.max(1, Math.ceil(results.total / results.pageSize)));
+  function changePage(page: number) {
+    // Keep the combobox focus while loading replaces the candidate list.
+    restoringFocus = true; input?.focus(); restoringFocus = false;
+    search.search(keyword, page, false);
+  }
+  function select(model: string) { onchange(model); open = false; search.cancel(); restoringFocus = true; input?.focus(); restoringFocus = false; }
+  function keydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') { event.preventDefault(); open = false; search.cancel(); }
+    else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (!open) { open = true; keyword = value; search.search(keyword); }
+      highlighted = Math.max(-1, Math.min(results.models.length - 1, highlighted + (event.key === 'ArrowDown' ? 1 : -1)));
+      if (highlighted >= 0) document.getElementById(`${listId}-${highlighted}`)?.scrollIntoView({ block: 'nearest' });
+    } else if (event.key === 'Enter' && open) {
+      event.preventDefault(); select(highlighted >= 0 ? results.models[highlighted] : value);
+    }
+  }
+  onMount(() => () => search.destroy());
+</script>
+
+<div class="relative min-w-0" bind:this={container} data-testid="client-model-picker"
+  onfocusout={(event) => { if (!container?.contains(event.relatedTarget as Node | null)) { open = false; search.cancel(); } }}>
+  <input {id} bind:this={input} type="text" {value} {disabled} {placeholder} maxlength={256}
+    class="nx-input w-full" data-testid="client-model-input" aria-label={label} autocomplete="off"
+    role="combobox" aria-expanded={open} aria-autocomplete="list" aria-controls={open ? listId : undefined}
+    aria-activedescendant={open && highlighted >= 0 ? `${listId}-${highlighted}` : undefined}
+    onfocus={() => { if (restoringFocus) return; keyword = value; open = true; search.search(keyword); }}
+    oninput={(event) => { keyword = event.currentTarget.value; onchange(keyword); open = true; search.search(keyword); }}
+    onkeydown={keydown} />
+  {#if open && !disabled}
+    <div class="absolute z-[200] left-0 right-0 mt-1 border border-carbon-600 bg-carbon-900 shadow-industrial">
+      <div id={listId} role="listbox" aria-label={label} class="max-h-52 overflow-y-auto">
+        {#each results.models as model, index (model)}
+          <button type="button" role="option" id={`${listId}-${index}`} aria-selected={model === value}
+            tabindex="-1" class="block w-full break-all px-3 py-2 text-left font-mono text-xs {highlighted === index ? 'bg-carbon-700 text-zinc-100' : 'text-zinc-200'}"
+            onpointermove={() => highlighted = index} onmousedown={(event) => event.preventDefault()} onclick={() => select(model)}>{model}</button>
+        {/each}
+      </div>
+      {#if results.loading}<p role="status" class="px-3 py-2 text-xs text-zinc-400">{loadingLabel}</p>
+      {:else if results.error}<p role="alert" data-testid="client-model-search-error" class="px-3 py-2 text-xs text-red-400">{errorLabel}</p>
+      {:else if !results.models.length}<p role="status" class="px-3 py-2 text-xs text-zinc-400">{emptyLabel}</p>{/if}
+      {#if !results.loading && pages > 1}
+        <div class="flex items-center justify-between border-t border-carbon-600 p-2">
+          <button type="button" class="nx-pager-btn" aria-label={previousLabel} disabled={results.page <= 1}
+            onmousedown={(event) => event.preventDefault()} onclick={() => changePage(results.page - 1)}>«</button>
+          <span class="text-xs text-zinc-400">{results.page} / {pages}</span>
+          <button type="button" class="nx-pager-btn" data-testid="client-model-next-page" aria-label={nextLabel} disabled={results.page >= pages}
+            onmousedown={(event) => event.preventDefault()} onclick={() => changePage(results.page + 1)}>»</button>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/plugins/token-stats/ui/PriceModelPicker.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { requestPluginControl } from '@bungee/plugin-sdk';
+  import * as Popover from '$components/ui/popover';
+  import * as Command from '$components/ui/command';
+  import { Button } from '$components/ui/button';
+  import ChevronDown from 'lucide-svelte/icons/chevron-down';
+  import { createPricingModelSearch, type PricingModelSearchState } from './pricing-catalog';
+
+  let { provider, catalogVersion, value, disabled = false, label, placeholder, searchLabel, emptyLabel,
+    loadingLabel, errorLabel, retryLabel, previousLabel, nextLabel, onchange }: {
+    provider: string;
+    catalogVersion: number | null;
+    value: string;
+    disabled?: boolean;
+    label: string;
+    placeholder: string;
+    searchLabel: string;
+    emptyLabel: string;
+    loadingLabel: string;
+    errorLabel: string;
+    retryLabel: string;
+    previousLabel: string;
+    nextLabel: string;
+    onchange: (model: string) => void;
+  } = $props();
+  let open = $state(false);
+  let width = $state(0);
+  let search = $state('');
+  let results = $state<PricingModelSearchState>({ models: [], total: 0, page: 1, pageSize: 50, loading: false, error: false });
+  const modelSearch = createPricingModelSearch(
+    (path, signal) => requestPluginControl('token-stats', path, 'GET', undefined, signal),
+    state => { results = state; },
+  );
+  const pages = $derived(Math.max(1, Math.ceil(results.total / results.pageSize)));
+  $effect(() => {
+    // A new catalog version invalidates an open picker's current results too.
+    void catalogVersion;
+    if (!open || disabled || !provider) { modelSearch.cancel(); return; }
+    modelSearch.search({ provider, search }, 1, search.length > 0);
+  });
+  function changePage(page: number) { modelSearch.search({ provider, search }, page, false); }
+  onMount(() => () => modelSearch.destroy());
+</script>
+
+<div class="min-w-0 w-full" bind:clientWidth={width}>
+  <Popover.Root bind:open>
+    <Popover.Trigger asChild let:builder>
+      <Button builders={[builder]} variant="outline" {disabled} aria-label={label} aria-haspopup="listbox"
+        onclick={() => { search = ''; }}
+        class="h-[34px] w-full min-w-0 justify-between border-carbon-500 bg-carbon-900 px-2 font-mono text-[11px] font-normal normal-case tracking-normal focus-visible:border-nexus-500">
+        <span class="truncate text-zinc-200" title={value}>{value || placeholder}</span>
+        <ChevronDown class="h-4 w-4 shrink-0 opacity-50" />
+      </Button>
+    </Popover.Trigger>
+    <Popover.Content style={`width: ${width}px`} class="max-w-[calc(100vw-2rem)] border-carbon-600 p-0" align="start">
+      <!-- cmdk-sv's imperative sorting moves Svelte-owned nodes; keep filtering declarative. -->
+      <Command.Root shouldFilter={false}>
+        <Command.Input bind:value={search} placeholder={searchLabel} aria-label={searchLabel} />
+        <Command.List>
+          {#if results.loading}<p role="status" class="px-3 py-2 text-xs text-zinc-400">{loadingLabel}</p>
+          {:else if results.error}
+            <p role="alert" class="px-3 py-2 text-xs text-red-400">{errorLabel}</p>
+            <Button variant="ghost" onclick={() => changePage(results.page)}>{retryLabel}</Button>
+          {:else}
+          <Command.Empty>{emptyLabel}</Command.Empty>
+          {#each results.models as option (option.model)}
+            <Command.Item value={option.model} onSelect={() => { onchange(option.model); open = false; }}
+              class="min-w-0 break-all text-zinc-200">
+              {option.model}
+            </Command.Item>
+          {/each}
+          {/if}
+        </Command.List>
+      </Command.Root>
+      {#if !results.loading && !results.error && pages > 1}
+        <div class="flex items-center justify-between border-t border-carbon-600 p-2">
+          <button type="button" class="nx-pager-btn" aria-label={previousLabel} disabled={results.page <= 1}
+            onmousedown={(event) => event.preventDefault()} onclick={() => changePage(results.page - 1)}>«</button>
+          <span class="text-xs text-zinc-400">{results.page} / {pages}</span>
+          <button type="button" class="nx-pager-btn" data-testid="price-model-next-page" aria-label={nextLabel} disabled={results.page >= pages}
+            onmousedown={(event) => event.preventDefault()} onclick={() => changePage(results.page + 1)}>»</button>
+        </div>
+      {/if}
+    </Popover.Content>
+  </Popover.Root>
+</div>

package/dist/plugins/token-stats/ui/TokenStatsSettings.svelte

@@ -2,39 +2,111 @@
   import { onMount } from 'svelte';
   import { isLoading } from 'svelte-i18n';
   import { getPluginText } from '$utils/plugin-i18n';
-  import { PanelCard, IndustrialToggle, LoadingIndicator } from '$components/industrial';
+  import { PanelCard, LoadingIndicator, BSelect } from '$components/industrial';
   import { Button } from '$components/ui/button';
-  import { Input } from '$components/ui/input';
   import { Label } from '$components/ui/label';
   import { requestPluginControl, _ } from '@bungee/plugin-sdk';
-  import type { PriceStatus } from '../server/price-catalog';
+  import type { ModelsDevCatalogStatus, ModelsDevProviderSummary } from '../../models-dev/contract';
+  import ClientModelPicker from './ClientModelPicker.svelte';
+  import { MAX_PRICE_MODEL_MAPPINGS, parsePriceModelMappings, type PriceModelMapping } from '../server/model-mappings';
+  import PriceModelPicker from './PriceModelPicker.svelte';
 
-  let status: PriceStatus | null = $state(null);
-  let autoRefresh = $state(true);
-  let intervalMinutes = $state(60);
-  let timeoutSeconds = $state(15);
+  let status: ModelsDevCatalogStatus | null = $state(null);
   let loading = $state(true);
-  let busy = $state(false);
   let error = $state('');
-  let saved = $state(false);
+  let mappings = $state<PriceModelMapping[]>([]);
+  let mappingsBusy = $state(false);
+  let mappingsLoaded = $state(false);
+  let mappingsSaved = $state(false);
+  let mappingsError = $state('');
+  let providersError = $state(false);
+  let catalogVersion: number | null = $state(null);
+  let providers = $state<ModelsDevProviderSummary[]>([]);
+  let providersVersion: number | null | undefined;
+  let providersPendingVersion: number | null | undefined;
+  let providersGeneration = 0;
+  let mappingIds = $state<number[]>([]);
+  let nextMappingId = 0;
+  const providerOptions = $derived(providers.map(provider => ({
+    value: provider.provider, label: `${provider.name} · ${provider.provider}`,
+  })));
   let alive = false;
   let polling = false;
   const controller = new AbortController();
   const t = (key: string) => $isLoading ? '' : getPluginText(`settings.${key}`, 'token-stats', (id, options) => $_(id, options));
   const date = (value: number | null) => value === null ? t('never') : new Date(value).toLocaleString();
 
-  async function load(initial = false) {
+  async function loadProviders(version: number | null) {
+    if (providersPendingVersion === version) return;
+    providersPendingVersion = version;
+    const generation = ++providersGeneration;
+    try {
+      const providerResult = await requestPluginControl<{ providers: ModelsDevProviderSummary[] }>('models-dev', '/catalog/providers', 'GET', undefined, controller.signal);
+      if (alive && generation === providersGeneration && catalogVersion === version) {
+        providers = providerResult.providers;
+        providersVersion = version;
+        providersError = false;
+      }
+    } catch { if (alive && generation === providersGeneration) providersError = true; }
+    finally { if (generation === providersGeneration) providersPendingVersion = undefined; }
+  }
+
+  async function loadMappings() {
+    try {
+      const result = await requestPluginControl<{ mappings: PriceModelMapping[] }>('token-stats', '/pricing/mappings', 'GET', undefined, controller.signal);
+      if (alive) {
+        mappings = result.mappings;
+        mappingIds = mappings.map(() => nextMappingId++);
+        mappingsLoaded = true;
+        mappingsError = '';
+      }
+    } catch { if (alive) mappingsError = 'error'; }
+  }
+
+  function changeMapping(index: number, key: keyof PriceModelMapping, value: string) {
+    mappings = mappings.map((mapping, i) => i === index ? { ...mapping, [key]: value, ...(key === 'provider' ? { model: '' } : {}) } : mapping);
+    mappingsSaved = false;
+    mappingsError = '';
+  }
+
+  function addMapping() {
+    mappings = [...mappings, { source: '', provider: '', model: '' }];
+    mappingIds = [...mappingIds, nextMappingId++];
+    mappingsSaved = false;
+  }
+
+  function removeMapping(index: number) {
+    mappings = mappings.filter((_, i) => i !== index);
+    mappingIds = mappingIds.filter((_, i) => i !== index);
+    mappingsSaved = false;
+    mappingsError = '';
+  }
+
+  async function saveMappings() {
+    if (!mappingsLoaded || mappingsBusy) return;
+    mappingsSaved = false;
+    let parsed: PriceModelMapping[];
+    try {
+      parsed = parsePriceModelMappings(mappings);
+    } catch { mappingsError = 'mappingsInvalid'; return; }
+    mappingsBusy = true;
+    mappingsError = '';
+    try {
+      const result = await requestPluginControl<{ mappings: PriceModelMapping[] }>('token-stats', '/pricing/mappings', 'PUT', parsed, controller.signal);
+      if (alive) { mappings = result.mappings; mappingsSaved = true; }
+    } catch (error) { if (alive) mappingsError = error instanceof Error && error.message === 'invalid_input' ? 'mappingsInvalid' : 'error'; }
+    finally { if (alive) mappingsBusy = false; }
+  }
+
+  async function load() {
     if (polling) return;
     polling = true;
     try {
-      const result = await requestPluginControl<PriceStatus>('token-stats', '/pricing', 'GET', undefined, controller.signal);
+      const result = await requestPluginControl<ModelsDevCatalogStatus>('token-stats', '/pricing', 'GET', undefined, controller.signal);
       if (!alive) return;
       status = result;
-      if (initial) {
-        autoRefresh = result.settings.autoRefresh;
-        intervalMinutes = result.settings.intervalMinutes;
-        timeoutSeconds = result.settings.timeoutSeconds;
-      }
+      catalogVersion = result.version;
+      if (providersVersion !== result.version || providersError) void loadProviders(result.version);
       error = '';
     } catch {
       if (alive) error = 'error';
@@ -44,38 +116,11 @@
     }
   }
 
-  async function save() {
-    saved = false;
-    const interval = Number(intervalMinutes);
-    const timeout = Number(timeoutSeconds);
-    if (!Number.isInteger(interval) || interval < 1 || interval > 1440
-      || !Number.isInteger(timeout) || timeout < 5 || timeout > 60) {
-      error = 'invalid'; return;
-    }
-    busy = true;
-    error = '';
-    try {
-      const result = await requestPluginControl<PriceStatus>('token-stats', '/pricing/settings', 'PUT',
-        { autoRefresh, intervalMinutes: interval, timeoutSeconds: timeout }, controller.signal);
-      if (alive) { status = result; saved = true; }
-    } catch { if (alive) error = 'error'; }
-    finally { if (alive) busy = false; }
-  }
-
-  async function refresh() {
-    busy = true;
-    error = '';
-    try {
-      const result = await requestPluginControl<PriceStatus>('token-stats', '/pricing/refresh', 'POST', undefined, controller.signal);
-      if (alive) status = result;
-    } catch { if (alive) error = 'error'; }
-    finally { if (alive) busy = false; }
-  }
-
   onMount(() => {
     alive = true;
-    void load(true);
-    const timer = setInterval(() => { if (!busy) void load(); }, 3000);
+    void load();
+    void loadMappings();
+    const timer = setInterval(() => { void load(); }, 3000);
     return () => { alive = false; controller.abort(); clearInterval(timer); };
   });
 </script>
@@ -86,45 +131,56 @@
   {#if loading}
     <LoadingIndicator />
   {:else if status}
-    <PanelCard title={t('title')}>
-      <form class="space-y-5" onsubmit={(event) => { event.preventDefault(); void save(); }}>
-        <div class="flex items-center justify-between gap-4 border-b border-carbon-600 pb-4">
-          <Label for="token-price-auto">{t('autoRefresh')}</Label>
-          <IndustrialToggle id="token-price-auto" label={t('autoRefresh')} bind:checked={autoRefresh} disabled={busy} />
-        </div>
-        <div class="grid gap-5 sm:grid-cols-2">
-          <div class="space-y-2">
-            <Label for="token-price-interval">{t('interval')}</Label>
-            <Input id="token-price-interval" type="number" min={1} max={1440} step={1} bind:value={intervalMinutes} disabled={busy} required />
-          </div>
-          <div class="space-y-2">
-            <Label for="token-price-timeout">{t('timeout')}</Label>
-            <Input id="token-price-timeout" type="number" min={5} max={60} step={1} bind:value={timeoutSeconds} disabled={busy} required />
+    <PanelCard title={t('mappingsTitle')}>
+      <div class="space-y-5">
+        <p class="text-sm text-zinc-400">{t('mappingsDescription')}</p>
+        {#if providersError}<p role="alert" class="text-sm text-red-400">{t('modelsError')}</p>{/if}
+        {#if mappingsError}<p role="alert" class="text-sm text-red-400">{t(mappingsError)}</p>{/if}
+        {#if !mappingsLoaded}
+          <Button variant="outline" onclick={() => void loadMappings()}>{t('mappingRetry')}</Button>
+        {/if}
+        {#if !status.modelCount}<p class="text-sm text-amber-400">{t('mappingsNoCatalog')}</p>{/if}
+        {#each mappings as mapping, index (mappingIds[index])}
+          <div class="grid min-w-0 gap-3 border-b border-carbon-600 pb-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,0.8fr)_minmax(0,1.2fr)_auto] sm:items-end" data-testid="price-model-mapping">
+            <div class="min-w-0 space-y-2">
+              <Label for={`price-alias-${mappingIds[index]}`}>{t('mappingSource')}</Label>
+              <ClientModelPicker id={`price-alias-${mappingIds[index]}`} value={mapping.source} label={t('mappingSource')}
+                placeholder={t('mappingSourcePlaceholder')} loadingLabel={t('clientModelsLoading')} errorLabel={t('clientModelsError')}
+                emptyLabel={t('clientModelsEmpty')} previousLabel={t('previousPage')} nextLabel={t('nextPage')}
+                disabled={mappingsBusy} onchange={(value) => changeMapping(index, 'source', value)} />
+            </div>
+            <div class="min-w-0 space-y-2">
+              <span class="nx-field-label block">{t('mappingProvider')}</span>
+              <BSelect value={mapping.provider} options={providerOptions} ariaLabel={t('mappingProvider')} placeholder={t('mappingProvider')}
+                disabled={mappingsBusy || !providers.length} onchange={(value) => changeMapping(index, 'provider', String(value))} />
+            </div>
+            <div class="min-w-0 space-y-2">
+              <span class="nx-field-label block">{t('mappingTarget')}</span>
+              <PriceModelPicker value={mapping.model} provider={mapping.provider} {catalogVersion}
+                disabled={mappingsBusy || !mapping.provider || !status.modelCount} label={t('mappingTarget')} placeholder={t('mappingTarget')}
+                searchLabel={t('mappingSearch')} emptyLabel={t('mappingNoModels')} loadingLabel={t('clientModelsLoading')}
+                errorLabel={t('modelsError')} retryLabel={t('mappingRetry')} previousLabel={t('previousPage')} nextLabel={t('nextPage')}
+                onchange={(value) => changeMapping(index, 'model', value)} />
+            </div>
+            <Button variant="ghost" disabled={mappingsBusy} onclick={() => removeMapping(index)}>{t('mappingRemove')}</Button>
           </div>
+        {/each}
+        <div class="flex flex-wrap items-center gap-4">
+          <Button variant="outline" disabled={!mappingsLoaded || mappingsBusy || mappings.length >= MAX_PRICE_MODEL_MAPPINGS} onclick={addMapping}>{t('mappingAdd')}</Button>
+          <Button data-testid="price-mappings-save" disabled={!mappingsLoaded || mappingsBusy} aria-busy={mappingsBusy} onclick={() => void saveMappings()}>{t(mappingsBusy ? 'saving' : 'mappingsSave')}</Button>
+          {#if mappingsSaved}<span role="status" class="text-sm text-emerald-400">{t('mappingsSaved')}</span>{/if}
         </div>
-        <div class="flex items-center gap-4">
-          <Button type="submit" disabled={busy} aria-busy={busy}>{t(busy ? 'saving' : 'save')}</Button>
-          {#if saved}<span role="status" class="text-sm text-emerald-400">{t('saved')}</span>{/if}
-        </div>
-      </form>
+      </div>
     </PanelCard>
     <PanelCard title={t('catalog')}>
-      <div slot="actions">
-        <Button variant="outline" disabled={busy || status.refreshing} aria-busy={status.refreshing} onclick={() => void refresh()}>
-          {t(status.refreshing ? 'refreshing' : 'refresh')}
-        </Button>
-      </div>
-      <dl class="grid gap-5 text-sm sm:grid-cols-2 lg:grid-cols-3">
-        <div class="space-y-2"><dt class="text-zinc-400">{t('source')}</dt><dd class="break-all text-zinc-200"><a href={status.source} target="_blank" rel="noopener noreferrer" class="hover:text-nexus-400 underline underline-offset-4">models.dev</a></dd></div>
-        <div class="space-y-2"><dt class="text-zinc-400">{t('modelCount')}</dt><dd class="font-display text-xl text-nexus-500">{status.modelCount}</dd></div>
-        <div class="space-y-2"><dt class="text-zinc-400">{t('providerCount')}</dt><dd class="font-display text-xl text-zinc-100">{status.providerCount}</dd></div>
-        <div class="space-y-2"><dt class="text-zinc-400">{t('lastAttempt')}</dt><dd class="font-mono text-zinc-200">{date(status.lastAttemptAt)}</dd></div>
-        <div class="space-y-2"><dt class="text-zinc-400">{t('lastSuccess')}</dt><dd data-testid="price-last-success" class="font-mono text-zinc-200">{date(status.lastSuccessAt)}</dd></div>
-        <div class="space-y-2"><dt class="text-zinc-400">{t('nextRefresh')}</dt><dd class="font-mono text-zinc-200">{status.nextRefreshAt === null ? t(status.settings.autoRefresh ? 'refreshing' : 'disabled') : date(status.nextRefreshAt)}</dd></div>
+      <dl class="grid gap-5 text-sm sm:grid-cols-2 lg:grid-cols-3" data-testid="pricing-catalog-status">
+        <div class="space-y-2"><dt class="text-zinc-400">{t('catalogState')}</dt><dd data-testid="pricing-catalog-state">{t(status.state)}</dd></div>
+        <div class="space-y-2"><dt class="text-zinc-400">{t('catalogVersion')}</dt><dd data-testid="pricing-catalog-version">{status.version ?? t('never')}</dd></div>
+        <div class="space-y-2"><dt class="text-zinc-400">{t('lastSuccess')}</dt><dd data-testid="price-last-success" class="font-mono text-zinc-200">{date(status.fetchedAt)}</dd></div>
+        <div class="space-y-2"><dt class="text-zinc-400">{t('modelCount')}</dt><dd>{status.modelCount}</dd></div>
+        <div class="space-y-2"><dt class="text-zinc-400">{t('providerCount')}</dt><dd>{status.providerCount}</dd></div>
       </dl>
-      {#if status.lastError}
-        <p role="status" class="mt-5 border-l-2 border-amber-400 pl-3 text-sm text-amber-400">{t(`${status.lastError}Error`)} · {t('failure')}</p>
-      {/if}
+      {#if status.error}<p role="status" data-testid="pricing-catalog-error" class="mt-5 border-l-2 border-amber-400 pl-3 text-sm text-amber-400">{t('catalogFailure')}</p>{/if}
       <p class="mt-5 border-t border-carbon-600 pt-4 text-xs leading-relaxed text-zinc-400">{t('history')}</p>
     </PanelCard>
   {/if}