@ouraihub/aether-ui 0.0.0-stage → 0.1.1

package/src/providers/ModelSettingsDialog.svelte

@@ -0,0 +1,388 @@
+<script lang="ts">
+  // 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 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'
+  import { Input } from '#lib/components/ui/input/index.js'
+  import * as Select from '#lib/components/ui/select/index.js'
+  import CopyInput from '../CopyInput.svelte'
+  import { getKitContext } from '../context'
+  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'
+
+  let {
+    open = $bindable(false),
+    model,
+    protocol,
+    usedBy = [],
+    onsave,
+  }: {
+    open: boolean
+    model: Model | null
+    protocol: Protocol
+    /** Localized role names bound to this model (contract §6). */
+    usedBy?: string[]
+    onsave: (model: Model) => void
+  } = $props()
+
+  const MAIN_TYPES = ['chat', 'image', 'embedding', 'rerank'] as const
+  const OTHER_TYPES: ModelType[] = ['video', 'tts', 'stt', 'unknown']
+  // Presets mix decimal and binary sizes, so labels are explicit.
+  const CONTEXT_PRESETS: [string, number][] = [
+    ['128K', 128000],
+    ['200K', 200000],
+    ['256K', 262144],
+    ['400K', 400000],
+    ['512K', 524288],
+    ['1M', 1000000],
+  ]
+  const OUTPUT_PRESETS: [string, number][] = [
+    ['16K', 16384],
+    ['32K', 32768],
+    ['64K', 65536],
+    ['128K', 131072],
+  ]
+  const PURPOSES: Purpose[] = ['chat', 'image', 'edit']
+  const CHIP = 'aria-pressed:border-primary aria-pressed:bg-primary/10 aria-pressed:text-primary'
+
+  const { t } = getKitContext().i18n
+  let edit = $state<Model | null>(null)
+  let more = $state(true)
+  $effect.pre(() => {
+    if (!open) return
+    edit = untrack(() => (model ? $state.snapshot(model) : null))
+    more = true
+  })
+  const dialects = $derived(REASONING_DIALECTS.filter((dialect) => dialectFits(dialect, protocol)))
+  const errors = $derived(edit ? validateModel(edit, protocol) : [])
+  const purpose = $derived(edit && purposeOf(edit))
+  const count = (value: number) => (Number.isNaN(value) ? null : value)
+
+  function errorFor(field: ModelField) {
+    return errors
+      .filter((item) => item.field === field)
+      .map((item) => ({ message: t(`providers.error.${field}.${item.reason}`) }))
+  }
+  function toggleEffort(effort: ReasoningEffort) {
+    const config = edit?.reasoning
+    if (!edit || !config) return
+    const efforts = config.efforts.includes(effort)
+      ? config.efforts.filter((item) => item !== effort)
+      : [...config.efforts, effort]
+    edit.reasoning = { ...config, efforts }
+  }
+  function setBudget(value: number) {
+    if (!edit?.reasoning) return
+    const rest = { ...edit.reasoning }
+    delete rest.budgetTokens
+    edit.reasoning = Number.isNaN(value) ? rest : { ...rest, budgetTokens: value }
+  }
+  /** Tri-state: not probed → supported → unsupported → not probed. */
+  function cycleTools() {
+    if (edit)
+      edit.supportsTools = edit.supportsTools === null ? true : edit.supportsTools ? false : null
+  }
+  function save() {
+    if (!edit || errors.length > 0) return
+    const name = edit.name?.trim() || null
+    const groupName = edit.groupName?.trim() || null
+    onsave({ ...$state.snapshot(edit), name, groupName })
+    open = false
+  }
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Content class="flex max-h-[85dvh] min-w-0 flex-col sm:max-w-lg">
+    <Dialog.Header class="min-w-0 text-left">
+      <Dialog.Title>{t('providers.edit_model')}</Dialog.Title>
+    </Dialog.Header>
+    {#if edit}
+      <Field.Group class="min-h-0 overflow-y-auto pr-1">
+        <Field.Field>
+          <Field.Label for="kit-model-id">{t('providers.model_id')}</Field.Label>
+          <CopyInput id="kit-model-id" class="font-mono" readonly value={edit.id} />
+        </Field.Field>
+        <Field.Field>
+          <Field.Label for="kit-model-name">{t('providers.model_name')}</Field.Label>
+          <Input
+            id="kit-model-name"
+            placeholder={edit.id}
+            autocomplete="off"
+            aria-invalid={errorFor('name').length > 0}
+            bind:value={() => edit?.name ?? '', (value) => edit && (edit.name = value)}
+          />
+          <Field.Error errors={errorFor('name')} />
+        </Field.Field>
+        <Field.Field>
+          <Field.Label for="kit-model-group">{t('providers.group_name')}</Field.Label>
+          <Input
+            id="kit-model-group"
+            placeholder={idPrefix(edit.id)}
+            autocomplete="off"
+            aria-invalid={errorFor('groupName').length > 0}
+            bind:value={() => edit?.groupName ?? '', (value) => edit && (edit.groupName = value)}
+          />
+          <Field.Error errors={errorFor('groupName')} />
+        </Field.Field>
+        {#if purpose}
+          <Field.Set>
+            <Field.Legend variant="label">{t('providers.purpose')}</Field.Legend>
+            <div class="flex flex-wrap gap-4">
+              {#each PURPOSES as item (item)}
+                <label class="flex items-center gap-1.5 text-kit-sm"
+                  ><input
+                    type="radio"
+                    name="kit-model-purpose"
+                    checked={purpose === item}
+                    onchange={() => edit && (edit = withPurpose(edit, item))}
+                  />{t(`providers.purpose.${item}`)}</label
+                >
+              {/each}
+            </div>
+          </Field.Set>
+        {/if}
+        <Button
+          variant="ghost"
+          size="sm"
+          class="justify-start self-start px-1"
+          aria-expanded={more}
+          onclick={() => (more = !more)}
+          ><ChevronRightIcon class={cn('transition-transform', more && 'rotate-90')} />{t(
+            'providers.more_settings',
+          )}</Button
+        >
+        {#if more}
+          <Field.Set>
+            <Field.Legend variant="label">{t('providers.model_type')}</Field.Legend>
+            <div class="flex flex-wrap gap-1.5">
+              {#each MAIN_TYPES as type (type)}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  class={CHIP}
+                  aria-pressed={edit.modelType === type}
+                  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))}
+              >
+                <Select.Trigger
+                  size="sm"
+                  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}`)
+                    : t('providers.type_other')}</Select.Trigger
+                >
+                <Select.Content>
+                  <Select.Group>
+                    {#each OTHER_TYPES as type (type)}<Select.Item
+                        value={type}
+                        label={t(`providers.type.${type}`)}
+                      />{/each}
+                  </Select.Group>
+                </Select.Content>
+              </Select.Root>
+            </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
+              >
+            {/if}
+          </Field.Set>
+          {#if edit.modelType === 'chat'}
+            <Field.Set>
+              <Field.Legend variant="label">{t('providers.capabilities')}</Field.Legend>
+              <div class="flex flex-wrap gap-1.5">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  class={CHIP}
+                  aria-pressed={edit.reasoning !== null}
+                  onclick={() =>
+                    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',
+                  )}
+                  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
+                    >{/if}</Button
+                >
+                {#if protocol !== 'openai-chat'}
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    class={CHIP}
+                    aria-pressed={edit.nativeWebSearch}
+                    title={t('providers.nativeWebSearch')}
+                    onclick={() => edit && (edit.nativeWebSearch = !edit.nativeWebSearch)}
+                    >{t('providers.cap_web')}</Button
+                  >
+                {/if}
+              </div>
+            </Field.Set>
+            {#if edit.reasoning}
+              {@render reasoningControls(edit.reasoning.dialect)}
+            {/if}
+            <Field.Set>
+              <Field.Legend variant="label">{t('providers.input_modalities')}</Field.Legend>
+              <div class="flex flex-wrap gap-1.5">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  class={CHIP}
+                  aria-pressed={edit.canVision}
+                  onclick={() => edit && (edit.canVision = !edit.canVision)}
+                  >{t('providers.cap_vision')}</Button
+                >
+              </div>
+            </Field.Set>
+          {/if}
+          {@render tokens('contextWindow', CONTEXT_PRESETS, 32000)}
+          {@render tokens('maxOutput', OUTPUT_PRESETS, 4096)}
+          {#if edit.modelType === 'chat'}
+            <ModelPricing {edit} {errorFor} />
+          {/if}
+        {/if}
+      </Field.Group>
+    {/if}
+    <Dialog.Footer class="items-center">
+      <p class="text-muted-foreground mr-auto text-kit-xs">{t('providers.applies_next')}</p>
+      <Button variant="outline" onclick={() => (open = false)}>{t('common.cancel')}</Button>
+      <Button disabled={errors.length > 0} onclick={save}>{t('providers.save')}</Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
+
+{#snippet reasoningControls(dialect: ReasoningDialect)}
+  <Field.Field>
+    <Field.Label for="kit-model-dialect">{t('providers.reasoning_dialect')}</Field.Label>
+    <Select.Root
+      type="single"
+      value={dialect}
+      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.Content>
+        <Select.Group>
+          {#each dialects as item (item)}<Select.Item
+              value={item}
+              label={t(`providers.dialect.${item}`)}
+            />{/each}
+        </Select.Group>
+      </Select.Content>
+    </Select.Root>
+  </Field.Field>
+  <Field.Set>
+    <Field.Legend variant="label">{t('providers.reasoning_efforts')}</Field.Legend>
+    <div class="flex flex-wrap gap-3">
+      {#each REASONING_EFFORTS.filter((effort) => effort !== 'auto' || allowsAuto(dialect)) as effort (effort)}
+        <label class="flex items-center gap-1 text-kit-sm"
+          ><input
+            type="checkbox"
+            checked={edit?.reasoning?.efforts.includes(effort)}
+            onchange={() => toggleEffort(effort)}
+          />{t(`chat.effort.${effort}`)}</label
+        >
+      {/each}
+    </div>
+    {#if dialect !== 'anthropic-budget' && dialect !== 'qwen'}<Field.Error
+        errors={errorFor('reasoning')}
+      />{/if}
+  </Field.Set>
+  {#if dialect === 'anthropic-budget' || dialect === 'qwen'}
+    <Field.Field>
+      <Field.Label for="kit-model-budget">{t('providers.reasoning_budget')}</Field.Label>
+      <Input
+        id="kit-model-budget"
+        type="number"
+        min={dialect === 'qwen' ? '1' : '1024'}
+        step="1"
+        aria-invalid={errorFor('reasoning').length > 0}
+        value={edit?.reasoning?.budgetTokens ?? ''}
+        oninput={(event) => setBudget(event.currentTarget.valueAsNumber)}
+      />
+      <Field.Error errors={errorFor('reasoning')} />
+    </Field.Field>
+  {/if}
+{/snippet}
+
+{#snippet tokens(
+  field: 'contextWindow' | 'maxOutput',
+  presets: [string, number][],
+  fallback: number,
+)}
+  {@const value = edit?.[field] ?? null}
+  <Field.Field>
+    <Field.Label for="kit-model-{field}"
+      >{t(`providers.${field === 'contextWindow' ? 'context_window' : 'max_output'}`)}</Field.Label
+    >
+    <div class="flex flex-wrap gap-1.5">
+      {#each presets as [label, preset] (preset)}
+        <Button
+          variant="outline"
+          size="sm"
+          class={CHIP}
+          aria-pressed={value === preset}
+          onclick={() => edit && (edit[field] = preset)}>{label}</Button
+        >
+      {/each}
+    </div>
+    <Input
+      id="kit-model-{field}"
+      type="number"
+      min="1"
+      step="1"
+      placeholder={String(fallback)}
+      aria-invalid={errorFor(field).length > 0}
+      value={value ?? ''}
+      oninput={(event) => edit && (edit[field] = count(event.currentTarget.valueAsNumber))}
+    />
+    <Field.Error errors={errorFor(field)} />
+  </Field.Field>
+{/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>