@ouraihub/aether-ui 0.1.0 → 0.1.2

package/src/providers/EndpointPanel.svelte

@@ -1,34 +1,21 @@
 <script lang="ts">
-  // One endpoint's keys, address and models.
+  // One endpoint's keys and address.
   // Fields edit the draft in place; `oncommit` asks the parent to save (docs/33 §3); keys save on their own (docs/34).
-  import BrainIcon from '@lucide/svelte/icons/brain'
-  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right'
-  import ChevronsDownUpIcon from '@lucide/svelte/icons/chevrons-down-up'
-  import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down'
-  import EyeIcon from '@lucide/svelte/icons/eye'
-  import Globe2Icon from '@lucide/svelte/icons/globe-2'
   import LoaderIcon from '@lucide/svelte/icons/loader-circle'
-  import MinusIcon from '@lucide/svelte/icons/minus'
-  import PlusIcon from '@lucide/svelte/icons/plus'
-  import RefreshIcon from '@lucide/svelte/icons/refresh-cw'
-  import SearchIcon from '@lucide/svelte/icons/search'
   import Settings2Icon from '@lucide/svelte/icons/settings-2'
-  import WrenchIcon from '@lucide/svelte/icons/wrench'
   import { Button } from '#lib/components/ui/button/index.js'
   import { Switch } from '#lib/components/ui/switch/index.js'
-  import * as Dialog from '#lib/components/ui/dialog/index.js'
   import * as Field from '#lib/components/ui/field/index.js'
-  import { Input } from '#lib/components/ui/input/index.js'
   import CopyInput from '../CopyInput.svelte'
   import * as Select from '#lib/components/ui/select/index.js'
   import { getKitContext } from '../context'
-  import type { KeyStrategy, Model, Protocol, Provider } from '../ports'
+  import type { KeyStrategy, Protocol, Provider } from '../ports'
   import { cn } from '../utils'
-  import { groupKey, keyError, maskedText, probeUrl, validUrl, type EndpointDraft } from './draft'
-  import ModelSettingsDialog from './ModelSettingsDialog.svelte'
+  import { keyError, maskedText, probeUrl, validUrl, type EndpointDraft } from './draft'
   import RequestConfigDialog from './RequestConfigDialog.svelte'
   import { settingsTarget } from './revision.svelte'
   import SecretInput from './SecretInput.svelte'
+  import EndpointModels from './EndpointModels.svelte'
 
   export type CheckOutcome =
     { state: 'ok'; count: number; suggested: Protocol | null } | { state: 'error'; message: string }
@@ -64,15 +51,6 @@
     /** Localized roles bound to a stored model (contract §6). */
     usedBy?: ((endpointId: string, modelId: string) => string[]) | undefined
   } = $props()
-
-  const CAPS = ['vision', 'reasoning', 'tools', 'web'] as const
-  type Cap = (typeof CAPS)[number]
-  const CAP_STYLE: Record<Cap, string> = {
-    vision: 'bg-success/15 text-success',
-    reasoning: 'bg-info/15 text-info',
-    tools: 'bg-warning/15 text-warning',
-    web: 'bg-primary/10 text-primary',
-  }
   const { ports, i18n, notify } = getKitContext()
   const { t } = i18n
   let keySaving = $state(false)
@@ -101,40 +79,12 @@
     urlError = false
   })
   let settingsOpen = $state(false)
-  // A chat "open settings" action names this endpoint's model: open its dialog once.
+  // A chat "open settings" action names this endpoint's model: consume it once.
   const targeted = settingsTarget.value?.endpointId === endpoint.saved?.id
   const targetModel = targeted
     ? (endpoint.models.find((model) => model.id === settingsTarget.value?.modelId) ?? null)
     : null
   if (targeted) settingsTarget.value = null
-  let modelOpen = $state(targetModel !== null)
-  let editing = $state<Model | null>(targetModel)
-  let addOpen = $state(false)
-  let newModelId = $state('')
-  let searching = $state(false)
-  let query = $state('')
-  let capFilter = $state<Cap | 'all'>('all')
-  let folded = $state<Record<string, boolean>>({})
-
-  const has = (model: Model, cap: Cap) =>
-    cap === 'vision'
-      ? model.canVision
-      : cap === 'reasoning'
-        ? model.reasoning !== null
-        : cap === 'tools'
-          ? model.supportsTools === true
-          : model.nativeWebSearch
-  const shown = $derived.by(() => {
-    const search = query.trim().toLowerCase()
-    return endpoint.models.filter(
-      (model) =>
-        (model.id.toLowerCase().includes(search) || !!model.name?.toLowerCase().includes(search)) &&
-        (capFilter === 'all' || has(model, capFilter)),
-    )
-  })
-  const groups = $derived(Object.entries(Object.groupBy(shown, groupKey)))
-  const allFolded = $derived(groups.length > 0 && groups.every(([group]) => folded[group]))
-
   function commitUrl() {
     const next = url.trim()
     if (next === endpoint.baseUrl) return
@@ -146,39 +96,12 @@
     endpoint.baseUrl = next
     oncommit()
   }
-  function setModels(models: Model[]) {
-    endpoint.models = models
-    oncommit()
-  }
-  function addModel() {
-    const id = newModelId.trim()
-    if (id && !endpoint.models.some((model) => model.id === id)) {
-      setModels([
-        ...endpoint.models,
-        {
-          id,
-          name: null,
-          groupName: null,
-          modelType: 'chat',
-          typeSource: 'user',
-          contextWindow: null,
-          maxOutput: null,
-          canVision: false,
-          supportsTools: null,
-          reasoning: null,
-          nativeWebSearch: false,
-          pricing: null,
-        },
-      ])
-    }
-    newModelId = ''
-    addOpen = false
-  }
   /** First probe suggestion: the whole check or any key's (all keys share one relay). */
   const suggested = $derived.by((): Protocol | null => {
     if (check?.state === 'ok') return check.suggested
     if (check?.state !== 'keys') return null
-    for (const { value } of check.results) if (value.state === 'ok' && value.suggested) return value.suggested
+    for (const { value } of check.results)
+      if (value.state === 'ok' && value.suggested) return value.suggested
     return null
   })
 </script>
@@ -196,7 +119,12 @@
     </div>
     <div class="flex min-w-0 items-start gap-2">
       <SecretInput id="kit-endpoint-key" endpoint={endpoint.saved} onchanged={onkeys} />
-      <Button variant="outline" class="shrink-0" disabled={!validUrl(endpoint.baseUrl)} onclick={oncheck}>
+      <Button
+        variant="outline"
+        class="shrink-0"
+        disabled={!validUrl(endpoint.baseUrl)}
+        onclick={oncheck}
+      >
         {#if check?.state === 'running'}<LoaderIcon class="animate-spin" />{/if}
         {t('providers.check')}
       </Button>
@@ -219,7 +147,9 @@
               >
               <Switch
                 size="sm"
-                aria-label={t('providers.keys_enable_for', { name: key.label || maskedText(key, t) })}
+                aria-label={t('providers.keys_enable_for', {
+                  name: key.label || maskedText(key, t),
+                })}
                 checked={key.enabled}
                 disabled={keySaving}
                 onCheckedChange={(enabled) => void setKeyEnabled(key.id, enabled)}
@@ -231,14 +161,20 @@
     {:else if check && check.state !== 'running'}
       <p
         role="status"
-        class={cn('text-kit-xs whitespace-pre-line', check.state === 'ok' ? 'text-success' : 'text-destructive')}
+        class={cn(
+          'text-kit-xs whitespace-pre-line',
+          check.state === 'ok' ? 'text-success' : 'text-destructive',
+        )}
       >
         {check.state === 'ok' ? t('providers.check_ok', { count: check.count }) : check.message}
       </p>
     {/if}
     {#if suggested && suggested !== endpoint.protocol}
       {@const next = suggested}
-      <div role="status" class="bg-info/10 flex min-w-0 items-center gap-2 rounded-md px-2.5 py-1.5 text-kit-xs">
+      <div
+        role="status"
+        class="bg-info/10 flex min-w-0 items-center gap-2 rounded-md px-2.5 py-1.5 text-kit-xs"
+      >
         <span class="min-w-0 flex-1">{t('providers.suggest_protocol')}</span>
         <Button
           variant="outline"
@@ -287,7 +223,11 @@
     <div class="flex items-center gap-2">
       <Field.Label for="kit-endpoint-url">{t('providers.base_url')}</Field.Label>
       {#if onaddendpoint}
-        <button type="button" class="text-primary text-kit-xs hover:underline" onclick={onaddendpoint}>
+        <button
+          type="button"
+          class="text-primary text-kit-xs hover:underline"
+          onclick={onaddendpoint}
+        >
           {t('providers.add_endpoint')}
         </button>
       {/if}
@@ -314,178 +254,13 @@
     {#if urlError}
       <p role="alert" class="text-destructive text-kit-xs">{t('providers.url_invalid')}</p>
     {:else if validUrl(endpoint.baseUrl)}
-      <p class="text-muted-foreground truncate font-mono text-kit-xs">GET {probeUrl(endpoint.baseUrl)}</p>
+      <p class="text-muted-foreground truncate font-mono text-kit-xs">
+        GET {probeUrl(endpoint.baseUrl)}
+      </p>
     {/if}
   </Field.Field>
 
-  <section class="flex min-w-0 flex-col gap-2" aria-labelledby="kit-endpoint-models">
-    <div class="flex min-w-0 flex-wrap items-center gap-1">
-      <h3 id="kit-endpoint-models" class="mr-1 text-kit-base font-semibold">{t('providers.models')}</h3>
-      <Button
-        variant="ghost"
-        size="icon-xs"
-        title={t(allFolded ? 'providers.expand_all' : 'providers.collapse_all')}
-        aria-label={t(allFolded ? 'providers.expand_all' : 'providers.collapse_all')}
-        disabled={groups.length === 0}
-        onclick={() => (folded = allFolded ? {} : Object.fromEntries(groups.map(([group]) => [group, true])))}
-        >{#if allFolded}<ChevronsUpDownIcon />{:else}<ChevronsDownUpIcon />{/if}</Button
-      >
-      {#if searching || query}
-        <Input
-          class="h-7 w-36 text-kit-sm"
-          autofocus
-          placeholder={t('providers.model_search')}
-          aria-label={t('providers.model_search')}
-          bind:value={query}
-          onblur={() => (searching = false)}
-          onkeydown={(event) => event.key === 'Escape' && ((query = ''), event.currentTarget.blur())}
-        />
-      {:else}
-        <Button
-          variant="ghost"
-          size="icon-xs"
-          title={t('providers.model_search')}
-          aria-label={t('providers.model_search')}
-          onclick={() => (searching = true)}><SearchIcon /></Button
-        >
-      {/if}
-      <Select.Root type="single" value={capFilter} onValueChange={(value) => (capFilter = value as Cap | 'all')}>
-        <Select.Trigger
-          size="sm"
-          class={cn('border-0 shadow-none', capFilter !== 'all' && 'bg-accent')}
-          aria-label={t('providers.cap_filter')}
-        >
-          {capFilter === 'all' ? t('providers.all_types') : t(`providers.cap_${capFilter}`)}
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Group>
-            <Select.Item value="all" label={t('providers.all_types')} />
-            {#each CAPS as cap (cap)}<Select.Item value={cap} label={t(`providers.cap_${cap}`)} />{/each}
-          </Select.Group>
-        </Select.Content>
-      </Select.Root>
-      <div class="ml-auto flex items-center gap-1">
-        <Button variant="outline" size="sm" disabled={!validUrl(endpoint.baseUrl)} onclick={onsync}>
-          <RefreshIcon />{t('providers.sync_models')}
-        </Button>
-        <Button
-          variant="outline"
-          size="icon-sm"
-          title={t('providers.add_model_manual')}
-          aria-label={t('providers.add_model_manual')}
-          onclick={() => (addOpen = true)}><PlusIcon /></Button
-        >
-      </div>
-    </div>
-
-    {#each groups as [group, models = []] (group)}
-      <section class="group/model-group overflow-hidden rounded-kit border">
-        <div class="bg-muted/30 flex items-center gap-1 pr-2">
-          <button
-            type="button"
-            class="flex min-w-0 flex-1 items-center gap-2 px-3 py-2 text-left text-kit-sm"
-            aria-expanded={!folded[group]}
-            onclick={() => (folded[group] = !folded[group])}
-          >
-            <ChevronRightIcon class={cn('size-4 shrink-0 transition-transform', !folded[group] && 'rotate-90')} />
-            <span class="truncate">{group || t('providers.no_group')}</span>
-            <span class="text-muted-foreground text-kit-xs tabular-nums">{models.length}</span>
-          </button>
-          <Button
-            variant="ghost"
-            size="icon-xs"
-            class="opacity-0 group-hover/model-group:opacity-100 focus-visible:opacity-100"
-            title={t('providers.remove_group')}
-            aria-label={t('providers.remove_group')}
-            onclick={() => setModels(endpoint.models.filter((model) => !models.includes(model)))}><MinusIcon /></Button
-          >
-        </div>
-        {#if !folded[group]}
-          <ul class="divide-y border-t">
-            {#each models as model (model.id)}
-              <li class="hover:bg-accent/40 flex min-w-0 items-center gap-2 px-3 py-1.5">
-                <span
-                  aria-hidden="true"
-                  class="bg-muted text-muted-foreground flex size-6 shrink-0 items-center justify-center rounded-full text-kit-xs uppercase"
-                  >{(model.name ?? model.id).slice(0, 1)}</span
-                >
-                <span class="min-w-0 flex-1 truncate text-kit-sm" title={model.id}>{model.name ?? model.id}</span>
-                <span class="flex shrink-0 items-center gap-0.5">
-                  {#each CAPS.filter((cap) => has(model, cap)) as cap (cap)}
-                    <span
-                      class={cn('flex h-5 w-6 items-center justify-center rounded-full', CAP_STYLE[cap])}
-                      title={t(`providers.cap_${cap}`)}
-                    >
-                      {#if cap === 'vision'}<EyeIcon class="size-3" />{:else if cap === 'reasoning'}<BrainIcon
-                          class="size-3"
-                        />{:else if cap === 'tools'}<WrenchIcon class="size-3" />{:else}<Globe2Icon
-                          class="size-3"
-                        />{/if}
-                      <span class="sr-only">{t(`providers.cap_${cap}`)}</span>
-                    </span>
-                  {/each}
-                </span>
-                <Button
-                  variant="ghost"
-                  size="icon-xs"
-                  title={t('providers.model_settings')}
-                  aria-label={t('providers.model_settings_for', { id: model.id })}
-                  onclick={() => {
-                    editing = model
-                    modelOpen = true
-                  }}><Settings2Icon /></Button
-                >
-                <Button
-                  variant="ghost"
-                  size="icon-xs"
-                  title={t('providers.remove_model', { id: model.id })}
-                  aria-label={t('providers.remove_model', { id: model.id })}
-                  onclick={() => setModels(endpoint.models.filter((item) => item.id !== model.id))}
-                  ><MinusIcon /></Button
-                >
-              </li>
-            {/each}
-          </ul>
-        {/if}
-      </section>
-    {:else}
-      <p class="text-muted-foreground rounded-kit border border-dashed px-3 py-6 text-center text-kit-sm">
-        {endpoint.models.length === 0 ? t('providers.no_models') : t('providers.no_model_matches')}
-      </p>
-    {/each}
-  </section>
+  <EndpointModels {endpoint} {onsync} {oncommit} {usedBy} {targetModel} />
 </div>
 
-<ModelSettingsDialog
-  bind:open={modelOpen}
-  model={editing}
-  protocol={endpoint.protocol}
-  usedBy={editing && endpoint.saved && usedBy ? usedBy(endpoint.saved.id, editing.id) : []}
-  onsave={(saved) => setModels(endpoint.models.map((model) => (model.id === saved.id ? saved : model)))}
-/>
-
 <RequestConfigDialog bind:open={settingsOpen} bind:endpoint {onaddendpoint} {onremove} {oncommit} />
-
-<Dialog.Root bind:open={addOpen}>
-  <Dialog.Content class="sm:max-w-md">
-    <Dialog.Header>
-      <Dialog.Title>{t('providers.add_model_manual')}</Dialog.Title>
-    </Dialog.Header>
-    <form
-      class="contents"
-      onsubmit={(event) => {
-        event.preventDefault()
-        addModel()
-      }}
-    >
-      <Field.Field>
-        <Field.Label for="kit-model-new">{t('providers.model_id')}</Field.Label>
-        <Input id="kit-model-new" class="font-mono" autocomplete="off" spellcheck={false} bind:value={newModelId} />
-      </Field.Field>
-      <Dialog.Footer>
-        <Button type="button" variant="outline" onclick={() => (addOpen = false)}>{t('common.cancel')}</Button>
-        <Button type="submit" disabled={!newModelId.trim()}>{t('common.confirm')}</Button>
-      </Dialog.Footer>
-    </form>
-  </Dialog.Content>
-</Dialog.Root>

package/src/providers/ModelPickerDialog.svelte

@@ -26,7 +26,16 @@
     onchange: (models: Model[]) => void
   } = $props()
 
-  const TYPES: ModelType[] = ['chat', 'image', 'video', 'tts', 'stt', 'embedding', 'rerank', 'unknown']
+  const TYPES: ModelType[] = [
+    'chat',
+    'image',
+    'video',
+    'tts',
+    'stt',
+    'embedding',
+    'rerank',
+    'unknown',
+  ]
   const { t } = getKitContext().i18n
 
   let checked = $state<Record<string, boolean>>({})
@@ -39,15 +48,21 @@
     if (!open || !result) return
     const current = Object.fromEntries(untrack(() => selected).map((m) => [m.id, m]))
     checked = Object.fromEntries(result.models.map((m) => [m.id, m.id in current]))
-    types = Object.fromEntries(result.models.map((m) => [m.id, current[m.id]?.modelType ?? m.modelType]))
+    types = Object.fromEntries(
+      result.models.map((m) => [m.id, current[m.id]?.modelType ?? m.modelType]),
+    )
     query = ''
     filter = 'all'
     collapsed = {}
   })
 
   const models = $derived(result?.models ?? [])
-  const searched = $derived(models.filter((m) => m.id.toLowerCase().includes(query.trim().toLowerCase())))
-  const shown = $derived(searched.filter((m) => filter === 'all' || (types[m.id] ?? m.modelType) === filter))
+  const searched = $derived(
+    models.filter((m) => m.id.toLowerCase().includes(query.trim().toLowerCase())),
+  )
+  const shown = $derived(
+    searched.filter((m) => filter === 'all' || (types[m.id] ?? m.modelType) === filter),
+  )
   const groups = $derived(Object.entries(Object.groupBy(shown, (m) => m.group ?? '')))
   const count = $derived(models.filter((m) => checked[m.id]).length)
   const bulkRemoves = $derived(shown.length > 0 && shown.every((m) => checked[m.id]))
@@ -77,7 +92,9 @@
     <Dialog.Header class="shrink-0 text-left">
       <Dialog.Title class="flex items-center gap-2 pr-6">
         {t('providers.picker_title')}
-        <span aria-hidden="true" class="bg-muted rounded px-1.5 text-kit-xs tabular-nums">{models.length}</span>
+        <span aria-hidden="true" class="bg-muted rounded px-1.5 text-kit-xs tabular-nums"
+          >{models.length}</span
+        >
       </Dialog.Title>
       <Dialog.Description>{t('providers.picker_hint')}</Dialog.Description>
     </Dialog.Header>
@@ -90,14 +107,26 @@
         autocomplete="off"
         spellcheck={false}
       />
-      <Button variant="outline" size="sm" class="shrink-0" disabled={shown.length === 0} onclick={bulk}>
+      <Button
+        variant="outline"
+        size="sm"
+        class="shrink-0"
+        disabled={shown.length === 0}
+        onclick={bulk}
+      >
         {t(bulkRemoves ? 'providers.remove_all' : 'providers.add_all')}
       </Button>
     </div>
-    <div class="flex shrink-0 gap-1 overflow-x-auto pb-1" role="group" aria-label={t('providers.model_type')}>
+    <div
+      class="flex shrink-0 gap-1 overflow-x-auto pb-1"
+      role="group"
+      aria-label={t('providers.model_type')}
+    >
       {#each ['all', ...TYPES] as type (type)}
         {@const hits =
-          type === 'all' ? searched.length : searched.filter((m) => (types[m.id] ?? m.modelType) === type).length}
+          type === 'all'
+            ? searched.length
+            : searched.filter((m) => (types[m.id] ?? m.modelType) === type).length}
         <Button
           variant={filter === type ? 'secondary' : 'ghost'}
           size="sm"
@@ -111,9 +140,15 @@
         </Button>
       {/each}
     </div>
-    <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto" role="region" aria-label={t('providers.models')}>
+    <div
+      class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto"
+      role="region"
+      aria-label={t('providers.models')}
+    >
       {#if shown.length === 0}
-        <p class="text-muted-foreground py-8 text-center text-kit-sm">{t('providers.no_model_matches')}</p>
+        <p class="text-muted-foreground py-8 text-center text-kit-sm">
+          {t('providers.no_model_matches')}
+        </p>
       {/if}
       {#each groups as [group, items = []] (group)}
         {@const folded = !query.trim() && collapsed[group]}
@@ -132,8 +167,12 @@
           {#if !folded}
             <ul>
               {#each items as model (model.id)}
-                <li class="hover:bg-accent/50 flex min-w-0 items-center gap-1 rounded-md py-0.5 pl-4">
-                  <span class="min-w-0 flex-1 truncate font-mono text-kit-sm" title={model.id}>{model.id}</span>
+                <li
+                  class="hover:bg-accent/50 flex min-w-0 items-center gap-1 rounded-md py-0.5 pl-4"
+                >
+                  <span class="min-w-0 flex-1 truncate font-mono text-kit-sm" title={model.id}
+                    >{model.id}</span
+                  >
                   <Select.Root
                     type="single"
                     value={types[model.id] ?? model.modelType}
@@ -154,7 +193,8 @@
                       </Select.Group></Select.Content
                     >
                   </Select.Root>
-                  {#if model.canVision}<span class="text-muted-foreground hidden shrink-0 text-kit-xs sm:inline"
+                  {#if model.canVision}<span
+                      class="text-muted-foreground hidden shrink-0 text-kit-xs sm:inline"
                       >{t('providers.vision')}</span
                     >{/if}
                   <span class="text-success w-8 shrink-0 text-right text-kit-xs"
@@ -164,9 +204,12 @@
                     variant="ghost"
                     size="icon-sm"
                     class="shrink-0"
-                    aria-label={t(checked[model.id] ? 'providers.remove_model' : 'providers.add_model', {
-                      id: model.id,
-                    })}
+                    aria-label={t(
+                      checked[model.id] ? 'providers.remove_model' : 'providers.add_model',
+                      {
+                        id: model.id,
+                      },
+                    )}
                     onclick={() => toggle(model.id)}
                   >
                     {#if checked[model.id]}<Minus />{:else}<Plus />{/if}

package/src/providers/ModelPricing.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  import { getKitContext } from '../context'
+  import MinusIcon from '@lucide/svelte/icons/minus'
+  import PlusIcon from '@lucide/svelte/icons/plus'
+  import { Button } from '#lib/components/ui/button/index.js'
+  import * as Field from '#lib/components/ui/field/index.js'
+  import { Input } from '#lib/components/ui/input/index.js'
+  import type { Model, PricingTier } from '../ports'
+  import type { ModelField } from './draft'
+
+  let {
+    edit,
+    errorFor,
+  }: { edit: Model | null; errorFor: (field: ModelField) => { message: string }[] } = $props()
+  const { t } = getKitContext().i18n
+  const PRICES: (keyof PricingTier)[] = ['input', 'output', 'cacheRead', 'cacheWrite']
+  const CURRENCIES = [
+    ['USD', '$'],
+    ['CNY', '¥'],
+  ] as const
+  const CHIP = 'aria-pressed:border-primary aria-pressed:bg-primary/10 aria-pressed:text-primary'
+  const count = (value: number) => (Number.isNaN(value) ? null : value)
+  const tier = (minInputTokens: number): PricingTier => ({
+    minInputTokens,
+    input: 0,
+    output: 0,
+    cacheRead: null,
+    cacheWrite: null,
+  })
+  function setPrice(index: number, key: keyof PricingTier, value: number) {
+    const target = edit?.pricing?.tiers[index]
+    if (!target) return
+    if (key === 'cacheRead' || key === 'cacheWrite') target[key] = count(value)
+    else target[key] = value
+  }
+  function removeTier(index: number) {
+    const pricing = edit?.pricing
+    if (!edit || !pricing) return
+    pricing.tiers.splice(index, 1)
+    if (pricing.tiers[0]) pricing.tiers[0].minInputTokens = 0
+    else edit.pricing = null
+  }
+</script>
+
+<Field.Set>
+  <Field.Legend variant="label">{t('providers.pricing')}</Field.Legend>
+  {#if edit?.pricing}
+    {@const current = edit.pricing}
+    <div class="flex flex-wrap gap-1.5" role="group" aria-label={t('providers.currency')}>
+      {#each CURRENCIES as [currency, symbol] (currency)}
+        <Button
+          variant="outline"
+          size="sm"
+          class={CHIP}
+          aria-pressed={current.currency === currency}
+          aria-label={t(`providers.currency.${currency}`)}
+          onclick={() => (current.currency = currency)}>{symbol}</Button
+        >
+      {/each}
+    </div>
+    <p class="text-muted-foreground text-kit-xs">{t('providers.pricing_unit')}</p>
+    {#each current.tiers as item, index (index)}
+      <fieldset class="flex flex-col gap-2 rounded-kit border p-2">
+        <legend class="flex w-full items-center gap-2 px-1 text-kit-sm"
+          >{t('providers.tier', { n: index + 1 })}{#if current.tiers.length > 1}<Button
+              variant="ghost"
+              size="icon-xs"
+              class="ml-auto"
+              aria-label={t('providers.tier_remove', { n: index + 1 })}
+              title={t('providers.tier_remove', { n: index + 1 })}
+              onclick={() => removeTier(index)}><MinusIcon /></Button
+            >{/if}</legend
+        >
+        <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
+          <label class="flex flex-col gap-1 text-kit-xs"
+            >{t('providers.tier_start')}<Input
+              type="number"
+              min="0"
+              step="1"
+              disabled={index === 0}
+              value={item.minInputTokens}
+              oninput={(event) =>
+                setPrice(index, 'minInputTokens', event.currentTarget.valueAsNumber)}
+            /></label
+          >
+          {#each PRICES as key (key)}
+            <label class="flex flex-col gap-1 text-kit-xs"
+              >{t(`providers.price.${key}`)}<Input
+                type="number"
+                min="0"
+                step="any"
+                placeholder={key === 'cacheRead' || key === 'cacheWrite'
+                  ? t('providers.price_same_as_input')
+                  : ''}
+                value={item[key] ?? ''}
+                oninput={(event) => setPrice(index, key, event.currentTarget.valueAsNumber)}
+              /></label
+            >
+          {/each}
+        </div>
+      </fieldset>
+    {/each}
+    <Field.Error errors={errorFor('pricing')} />
+    <div class="flex flex-wrap gap-1.5">
+      {#if current.tiers.length < 8}<Button
+          variant="outline"
+          size="sm"
+          onclick={() =>
+            current.tiers.push(tier((current.tiers.at(-1)?.minInputTokens ?? 0) + 200000))}
+          ><PlusIcon />{t('providers.tier_add')}</Button
+        >{/if}
+      <Button variant="ghost" size="sm" onclick={() => edit && (edit.pricing = null)}
+        >{t('providers.pricing_clear')}</Button
+      >
+    </div>
+  {:else}
+    <Button
+      variant="outline"
+      size="sm"
+      class="self-start"
+      onclick={() => edit && (edit.pricing = { currency: 'USD', tiers: [tier(0)] })}
+      ><PlusIcon />{t('providers.pricing_add')}</Button
+    >
+  {/if}
+</Field.Set>