@ouraihub/aether-ui 0.1.0 → 0.1.2

package/src/providers/ModelSelect.svelte

@@ -50,7 +50,8 @@
 
   const key = (r: ModelRef) => `${r.endpointId}\n${r.modelId}`
   // label is `{provider} · {slug} · {modelId}`; a model's display name never enters it.
-  const group = (o: ModelOption) => o.label.slice(0, Math.max(0, o.label.lastIndexOf(' · '))) || o.label
+  const group = (o: ModelOption) =>
+    o.label.slice(0, Math.max(0, o.label.lastIndexOf(' · '))) || o.label
   type Cap = 'vision' | 'reasoning' | 'tools' | 'web'
   const CAPS = [
     { cap: 'vision', icon: EyeIcon, has: (o: ModelOption) => o.canVision },
@@ -105,7 +106,9 @@
   {#if failed}
     <div class="model-error" role="alert">
       <span>{t('chat.modelsFailed')}</span>
-      <Button variant="outline" size="sm" {disabled} onclick={() => reload++}>{t('chat.retry')}</Button>
+      <Button variant="outline" size="sm" {disabled} onclick={() => reload++}
+        >{t('chat.retry')}</Button
+      >
     </div>
   {:else}
     <Popover.Root
@@ -132,7 +135,9 @@
                 <span class="model-group">| {group(current)}</span>
               {:else}
                 <span class="model-name muted"
-                  >{invalid ? t('providers.model_invalid') : (placeholder ?? t('providers.model_placeholder'))}</span
+                  >{invalid
+                    ? t('providers.model_invalid')
+                    : (placeholder ?? t('providers.model_placeholder'))}</span
                 >
               {/if}
               <ChevronDownIcon class="model-chevron" />
@@ -150,7 +155,11 @@
           if (event.isComposing) event.preventDefault()
         }}
       >
-        <Command.Root bind:value={highlighted} filter={match} label={t('providers.model_placeholder')}>
+        <Command.Root
+          bind:value={highlighted}
+          filter={match}
+          label={t('providers.model_placeholder')}
+        >
           <div class="model-search">
             <SearchIcon class="model-search-icon" />
             <Command.Input class="model-search-input" placeholder={t('providers.model_search')} />
@@ -163,8 +172,9 @@
                   class="cap-chip cap-{c.cap}"
                   aria-pressed={active.includes(c.cap)}
                   onclick={() =>
-                    (active = active.includes(c.cap) ? active.filter((x) => x !== c.cap) : [...active, c.cap])}
-                  ><c.icon />{t(`providers.cap_${c.cap}`)}</button
+                    (active = active.includes(c.cap)
+                      ? active.filter((x) => x !== c.cap)
+                      : [...active, c.cap])}><c.icon />{t(`providers.cap_${c.cap}`)}</button
                 >
               {/each}
             </div>
@@ -180,13 +190,17 @@
                       class="model-item"
                       value={key(option)}
                       keywords={[option.modelId, option.name ?? '', name]}
-                      aria-current={value !== null && key(option) === key(value) ? 'true' : undefined}
+                      aria-current={value !== null && key(option) === key(value)
+                        ? 'true'
+                        : undefined}
                       onSelect={() => pick(option)}
                     >
                       <span class="model-avatar" aria-hidden="true"
                         >{(option.name ?? option.modelId).charAt(0).toUpperCase()}</span
                       >
-                      <span class="model-name" title={option.label}>{option.name ?? option.modelId}</span>
+                      <span class="model-name" title={option.label}
+                        >{option.name ?? option.modelId}</span
+                      >
                       <span class="model-tags">
                         {#each CAPS.filter((c) => c.has(option)) as c (c.cap)}
                           <span class="cap-tag cap-{c.cap}" title={t(`providers.cap_${c.cap}`)}

package/src/providers/ModelSettingsDialog.svelte

@@ -2,8 +2,7 @@
   // Per-model settings (docs/41 §3–§4). Edits a copy; nothing changes until Save.
   import { untrack } from 'svelte'
   import ChevronRightIcon from '@lucide/svelte/icons/chevron-right'
-  import MinusIcon from '@lucide/svelte/icons/minus'
-  import PlusIcon from '@lucide/svelte/icons/plus'
+  import ModelPricing from './ModelPricing.svelte'
   import { Button } from '#lib/components/ui/button/index.js'
   import * as Dialog from '#lib/components/ui/dialog/index.js'
   import * as Field from '#lib/components/ui/field/index.js'
@@ -11,10 +10,24 @@
   import * as Select from '#lib/components/ui/select/index.js'
   import CopyInput from '../CopyInput.svelte'
   import { getKitContext } from '../context'
-  import type { Model, ModelType, PricingTier, Protocol, ReasoningDialect, ReasoningEffort } from '../ports'
+  import type { Model, ModelType, Protocol, ReasoningDialect, ReasoningEffort } from '../ports'
   import { cn } from '../utils'
-  import { idPrefix, purposeOf, validateModel, withPurpose, withType, type ModelField, type Purpose } from './draft'
-  import { REASONING_DIALECTS, REASONING_EFFORTS, allowsAuto, dialectFits, emptyReasoning } from './reasoning'
+  import {
+    idPrefix,
+    purposeOf,
+    validateModel,
+    withPurpose,
+    withType,
+    type ModelField,
+    type Purpose,
+  } from './draft'
+  import {
+    REASONING_DIALECTS,
+    REASONING_EFFORTS,
+    allowsAuto,
+    dialectFits,
+    emptyReasoning,
+  } from './reasoning'
 
   let {
     open = $bindable(false),
@@ -48,12 +61,7 @@
     ['64K', 65536],
     ['128K', 131072],
   ]
-  const PRICES = ['input', 'output', 'cacheRead', 'cacheWrite'] as const
   const PURPOSES: Purpose[] = ['chat', 'image', 'edit']
-  const CURRENCIES = [
-    ['USD', '$'],
-    ['CNY', '¥'],
-  ] as const
   const CHIP = 'aria-pressed:border-primary aria-pressed:bg-primary/10 aria-pressed:text-primary'
 
   const { t } = getKitContext().i18n
@@ -90,28 +98,8 @@
   }
   /** Tri-state: not probed → supported → unsupported → not probed. */
   function cycleTools() {
-    if (edit) edit.supportsTools = edit.supportsTools === null ? true : edit.supportsTools ? false : null
-  }
-  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
-    // Required prices stay NaN when cleared so validation flags them; cache prices fall back to the input price.
-    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
+    if (edit)
+      edit.supportsTools = edit.supportsTools === null ? true : edit.supportsTools ? false : null
   }
   function save() {
     if (!edit || errors.length > 0) return
@@ -192,17 +180,22 @@
                   size="sm"
                   class={CHIP}
                   aria-pressed={edit.modelType === type}
-                  onclick={() => edit && (edit = withType(edit, type))}>{t(`providers.type.${type}`)}</Button
+                  onclick={() => edit && (edit = withType(edit, type))}
+                  >{t(`providers.type.${type}`)}</Button
                 >
               {/each}
               <Select.Root
                 type="single"
                 value={OTHER_TYPES.includes(edit.modelType) ? edit.modelType : ''}
-                onValueChange={(value) => edit && value && (edit = withType(edit, value as ModelType))}
+                onValueChange={(value) =>
+                  edit && value && (edit = withType(edit, value as ModelType))}
               >
                 <Select.Trigger
                   size="sm"
-                  class={cn(OTHER_TYPES.includes(edit.modelType) && 'border-primary bg-primary/10 text-primary')}
+                  class={cn(
+                    OTHER_TYPES.includes(edit.modelType) &&
+                      'border-primary bg-primary/10 text-primary',
+                  )}
                   aria-label={t('providers.type_other')}
                   >{OTHER_TYPES.includes(edit.modelType)
                     ? t(`providers.type.${edit.modelType}`)
@@ -220,7 +213,9 @@
             </div>
             {#if usedBy.length > 0 && edit.modelType !== model?.modelType}
               <Field.Description class="text-warning text-kit-xs" role="status"
-                >{t('providers.type_in_use', { roles: usedBy.join(t('providers.list_separator')) })}</Field.Description
+                >{t('providers.type_in_use', {
+                  roles: usedBy.join(t('providers.list_separator')),
+                })}</Field.Description
               >
             {/if}
           </Field.Set>
@@ -234,18 +229,25 @@
                   class={CHIP}
                   aria-pressed={edit.reasoning !== null}
                   onclick={() =>
-                    edit && (edit.reasoning = edit.reasoning ? null : emptyReasoning(dialects[0] ?? 'openai'))}
+                    edit &&
+                    (edit.reasoning = edit.reasoning
+                      ? null
+                      : emptyReasoning(dialects[0] ?? 'openai'))}
                   >{t('providers.cap_reasoning')}</Button
                 >
                 <Button
                   variant="outline"
                   size="sm"
-                  class={cn(CHIP, edit.supportsTools === false && 'text-muted-foreground line-through')}
+                  class={cn(
+                    CHIP,
+                    edit.supportsTools === false && 'text-muted-foreground line-through',
+                  )}
                   aria-pressed={edit.supportsTools === true}
                   title={t(`providers.tools_state.${edit.supportsTools ?? 'unknown'}`)}
                   onclick={cycleTools}
                   >{t('providers.cap_tools')}{#if edit.supportsTools === null}<span
-                      class="text-muted-foreground text-kit-xs">{t('providers.tools_state.unknown')}</span
+                      class="text-muted-foreground text-kit-xs"
+                      >{t('providers.tools_state.unknown')}</span
                     >{/if}</Button
                 >
                 {#if protocol !== 'openai-chat'}
@@ -272,7 +274,8 @@
                   size="sm"
                   class={CHIP}
                   aria-pressed={edit.canVision}
-                  onclick={() => edit && (edit.canVision = !edit.canVision)}>{t('providers.cap_vision')}</Button
+                  onclick={() => edit && (edit.canVision = !edit.canVision)}
+                  >{t('providers.cap_vision')}</Button
                 >
               </div>
             </Field.Set>
@@ -280,7 +283,7 @@
           {@render tokens('contextWindow', CONTEXT_PRESETS, 32000)}
           {@render tokens('maxOutput', OUTPUT_PRESETS, 4096)}
           {#if edit.modelType === 'chat'}
-            {@render pricing()}
+            <ModelPricing {edit} {errorFor} />
           {/if}
         {/if}
       </Field.Group>
@@ -299,12 +302,18 @@
     <Select.Root
       type="single"
       value={dialect}
-      onValueChange={(value) => edit && (edit.reasoning = emptyReasoning(value as ReasoningDialect))}
+      onValueChange={(value) =>
+        edit && (edit.reasoning = emptyReasoning(value as ReasoningDialect))}
     >
-      <Select.Trigger id="kit-model-dialect" class="w-full">{t(`providers.dialect.${dialect}`)}</Select.Trigger>
+      <Select.Trigger id="kit-model-dialect" class="w-full"
+        >{t(`providers.dialect.${dialect}`)}</Select.Trigger
+      >
       <Select.Content>
         <Select.Group>
-          {#each dialects as item (item)}<Select.Item value={item} label={t(`providers.dialect.${item}`)} />{/each}
+          {#each dialects as item (item)}<Select.Item
+              value={item}
+              label={t(`providers.dialect.${item}`)}
+            />{/each}
         </Select.Group>
       </Select.Content>
     </Select.Root>
@@ -322,7 +331,9 @@
         >
       {/each}
     </div>
-    {#if dialect !== 'anthropic-budget' && dialect !== 'qwen'}<Field.Error errors={errorFor('reasoning')} />{/if}
+    {#if dialect !== 'anthropic-budget' && dialect !== 'qwen'}<Field.Error
+        errors={errorFor('reasoning')}
+      />{/if}
   </Field.Set>
   {#if dialect === 'anthropic-budget' || dialect === 'qwen'}
     <Field.Field>
@@ -341,7 +352,11 @@
   {/if}
 {/snippet}
 
-{#snippet tokens(field: 'contextWindow' | 'maxOutput', presets: [string, number][], fallback: number)}
+{#snippet tokens(
+  field: 'contextWindow' | 'maxOutput',
+  presets: [string, number][],
+  fallback: number,
+)}
   {@const value = edit?.[field] ?? null}
   <Field.Field>
     <Field.Label for="kit-model-{field}"
@@ -371,83 +386,3 @@
     <Field.Error errors={errorFor(field)} />
   </Field.Field>
 {/snippet}
-
-{#snippet pricing()}
-  <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>
-{/snippet}

package/src/providers/ProviderDialogs.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  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 { Textarea } from '#lib/components/ui/textarea/index.js'
+  import { Button } from '#lib/components/ui/button/index.js'
+  import type { Provider } from '../ports'
+  import type { ProviderDraft } from './draft'
+  import { getKitContext } from '../context'
+
+  let {
+    addOpen = $bindable(false),
+    infoOpen = $bindable(false),
+    notesOpen = $bindable(false),
+    newName = $bindable(''),
+    editName = $bindable(''),
+    editNotes = $bindable(''),
+    draft,
+    providers,
+    create,
+    rename,
+    saveNotes,
+    remove,
+  }: {
+    addOpen?: boolean
+    infoOpen?: boolean
+    notesOpen?: boolean
+    newName?: string
+    editName?: string
+    editNotes?: string
+    draft: ProviderDraft | null
+    providers: Provider[]
+    create: () => void | Promise<void>
+    rename: () => void
+    saveNotes: () => void
+    remove: () => void | Promise<void>
+  } = $props()
+  const { i18n } = getKitContext()
+  const { t } = i18n
+</script>
+
+<Dialog.Root bind:open={addOpen}>
+  <Dialog.Content class="sm:max-w-md">
+    <Dialog.Header><Dialog.Title>{t('providers.add')}</Dialog.Title></Dialog.Header>
+    <form
+      class="contents"
+      onsubmit={(event) => {
+        event.preventDefault()
+        void create()
+      }}
+    >
+      <Field.Field>
+        <Field.Label for="kit-provider-new">{t('providers.name')}</Field.Label>
+        <Input id="kit-provider-new" maxlength={80} bind:value={newName} />
+      </Field.Field>
+      <Dialog.Footer>
+        <Button type="button" variant="outline" onclick={() => (addOpen = false)}
+          >{t('common.cancel')}</Button
+        >
+        <Button type="submit" disabled={!newName.trim()}>{t('common.confirm')}</Button>
+      </Dialog.Footer>
+    </form>
+  </Dialog.Content>
+</Dialog.Root>
+
+<Dialog.Root bind:open={infoOpen}>
+  <Dialog.Content class="sm:max-w-md">
+    <Dialog.Header><Dialog.Title>{t('providers.settings')}</Dialog.Title></Dialog.Header>
+    <form
+      class="contents"
+      onsubmit={(event) => {
+        event.preventDefault()
+        rename()
+      }}
+    >
+      <Field.Field>
+        <Field.Label for="kit-provider-name">{t('providers.name')}</Field.Label>
+        <Input id="kit-provider-name" maxlength={80} bind:value={editName} />
+      </Field.Field>
+      <Dialog.Footer class="sm:justify-between">
+        {#if !providers.find((p) => p.id === draft?.id)?.presetId}
+          <Button
+            type="button"
+            variant="ghost"
+            class="text-destructive"
+            onclick={() => void remove()}>{t('providers.delete')}</Button
+          >
+        {:else}<span></span>{/if}
+        <Button type="submit" disabled={!editName.trim()}>{t('providers.save')}</Button>
+      </Dialog.Footer>
+    </form>
+  </Dialog.Content>
+</Dialog.Root>
+
+<Dialog.Root bind:open={notesOpen}>
+  <Dialog.Content class="sm:max-w-lg">
+    <Dialog.Header><Dialog.Title>{t('providers.notes')}</Dialog.Title></Dialog.Header>
+    <form
+      class="contents"
+      onsubmit={(event) => {
+        event.preventDefault()
+        saveNotes()
+      }}
+    >
+      <Textarea
+        class="min-h-64 font-mono text-kit-sm"
+        aria-label={t('providers.notes')}
+        placeholder={t('providers.notes_placeholder')}
+        maxlength={10000}
+        bind:value={editNotes}
+      />
+      <Dialog.Footer>
+        <Button type="button" variant="outline" onclick={() => (notesOpen = false)}
+          >{t('common.cancel')}</Button
+        >
+        <Button type="submit">{t('providers.save')}</Button>
+      </Dialog.Footer>
+    </form>
+  </Dialog.Content>
+</Dialog.Root>

package/src/providers/ProviderList.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import EllipsisIcon from '@lucide/svelte/icons/ellipsis-vertical'
+  import PlusIcon from '@lucide/svelte/icons/plus'
+  import SearchIcon from '@lucide/svelte/icons/search'
+  import SquarePenIcon from '@lucide/svelte/icons/square-pen'
+  import SlidersHorizontalIcon from '@lucide/svelte/icons/sliders-horizontal'
+  import Trash2Icon from '@lucide/svelte/icons/trash-2'
+  import UserPenIcon from '@lucide/svelte/icons/user-pen'
+  import { Button } from '#lib/components/ui/button/index.js'
+  import * as DropdownMenu from '#lib/components/ui/dropdown-menu/index.js'
+  import { Input } from '#lib/components/ui/input/index.js'
+  import * as Select from '#lib/components/ui/select/index.js'
+  import { getKitContext } from '../context'
+  import type { Provider } from '../ports'
+  import { cn } from '../utils'
+
+  let {
+    providers,
+    selectedId,
+    onselect,
+    onaction,
+    onadd,
+  }: {
+    providers: Provider[]
+    selectedId: string | null
+    onselect: (provider: Provider) => void
+    onaction: (provider: Provider, action: 'edit' | 'notes' | 'delete') => void
+    onadd: () => void
+  } = $props()
+  const { i18n } = getKitContext()
+  const { t } = i18n
+  const FILTERS = ['all', 'enabled', 'disabled'] as const
+  let query = $state('')
+  let filter = $state<(typeof FILTERS)[number]>('all')
+  let menuFor = $state<string | null>(null)
+  const visible = $derived(
+    providers.filter(
+      (p) =>
+        p.name.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()) &&
+        (filter === 'all' || (filter === 'enabled') === p.enabled),
+    ),
+  )
+  function status(p: Provider): string | null {
+    if (!p.enabled) return null
+    return p.endpoints.length === 0 ||
+      p.endpoints.some((e) => !e.keys.some((k) => k.enabled && k.readable))
+      ? 'bg-warning'
+      : 'bg-success'
+  }
+</script>
+
+<nav class="flex w-full shrink-0 flex-col gap-1 sm:w-60" aria-label={t('providers.title')}>
+  <div class="mb-1 flex items-center gap-1.5">
+    <div class="relative min-w-0 flex-1">
+      <SearchIcon
+        class="text-muted-foreground pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2"
+      />
+      <Input
+        class="pl-8"
+        placeholder={t('providers.search')}
+        aria-label={t('providers.search')}
+        bind:value={query}
+        autocomplete="off"
+      />
+    </div>
+    <Select.Root
+      type="single"
+      value={filter}
+      onValueChange={(value) => (filter = value as typeof filter)}
+    >
+      <Select.Trigger
+        class={cn('shrink-0 px-2 [&>svg:last-child]:hidden', filter !== 'all' && 'bg-accent')}
+        aria-label={t('providers.filter')}
+        title={t(`providers.filter_${filter}`)}
+      >
+        <SlidersHorizontalIcon />
+      </Select.Trigger>
+      <Select.Content
+        ><Select.Group
+          >{#each FILTERS as f (f)}<Select.Item
+              value={f}
+              label={t(`providers.filter_${f}`)}
+            />{/each}</Select.Group
+        ></Select.Content
+      >
+    </Select.Root>
+  </div>
+  <ul class="flex min-w-0 flex-col gap-0.5">
+    {#each visible as p (p.id)}
+      {@const dot = status(p)}
+      <li
+        class="group/row relative"
+        oncontextmenu={(event) => {
+          event.preventDefault()
+          menuFor = p.id
+        }}
+      >
+        <button
+          type="button"
+          class={cn(
+            'hover:bg-muted flex h-9 w-full min-w-0 items-center gap-2.5 rounded-kit px-2 pr-8 text-left text-kit-base',
+            selectedId === p.id && 'bg-muted font-medium',
+          )}
+          aria-current={selectedId === p.id ? 'true' : undefined}
+          onclick={() => onselect(p)}
+        >
+          <span
+            aria-hidden="true"
+            class="bg-primary/10 text-primary flex size-6 shrink-0 items-center justify-center rounded-md text-kit-xs font-semibold"
+            >{p.name.slice(0, 1).toUpperCase()}</span
+          >
+          <span class={cn('min-w-0 flex-1 truncate', !p.enabled && 'text-muted-foreground')}
+            >{p.name}</span
+          >
+          {#if dot}<span class={cn('size-1.5 shrink-0 rounded-full', dot)}></span><span
+              class="sr-only"
+              >{t(
+                dot === 'bg-success' ? 'providers.filter_enabled' : 'providers.needs_setup',
+              )}</span
+            >{/if}
+        </button>
+        <DropdownMenu.Root
+          open={menuFor === p.id}
+          onOpenChange={(open) => (menuFor = open ? p.id : null)}
+        >
+          <DropdownMenu.Trigger
+            >{#snippet child({ props })}<button
+                {...props}
+                type="button"
+                class={cn(
+                  'text-muted-foreground hover:text-foreground hover:bg-accent absolute top-1/2 right-1 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md opacity-0 group-hover/row:opacity-100 focus-visible:opacity-100',
+                  menuFor === p.id && 'opacity-100',
+                )}
+                aria-label={t('providers.row_menu', { name: p.name })}
+                title={t('providers.row_menu', { name: p.name })}
+                ><EllipsisIcon class="size-4" /></button
+              >{/snippet}</DropdownMenu.Trigger
+          >
+          <DropdownMenu.Content align="start" class="min-w-36">
+            <DropdownMenu.Item onSelect={() => onaction(p, 'edit')}
+              ><SquarePenIcon />{t('providers.edit')}</DropdownMenu.Item
+            >
+            <DropdownMenu.Item onSelect={() => onaction(p, 'notes')}
+              ><UserPenIcon />{t('providers.notes')}</DropdownMenu.Item
+            >
+            {#if !p.presetId}<DropdownMenu.Item
+                variant="destructive"
+                onSelect={() => onaction(p, 'delete')}
+                ><Trash2Icon />{t('providers.remove')}</DropdownMenu.Item
+              >{/if}
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </li>
+    {:else}<li class="text-muted-foreground px-2 py-4 text-center text-kit-sm">
+        {t('providers.no_matches')}
+      </li>{/each}
+  </ul>
+  <Button variant="outline" class="mt-2" onclick={onadd}><PlusIcon />{t('providers.add')}</Button>
+</nav>