@ouraihub/aether-ui 0.1.0 → 0.1.2

package/src/providers/ProvidersSettings.svelte

@@ -1,29 +1,20 @@
 <script lang="ts">
   // Provider settings (docs/33): list on the left, detail on the right, every field saves itself.
   import { Button } from '#lib/components/ui/button/index.js'
-  import * as Dialog from '#lib/components/ui/dialog/index.js'
-  import * as DropdownMenu from '#lib/components/ui/dropdown-menu/index.js'
   import * as Empty from '#lib/components/ui/empty/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 { Switch } from '#lib/components/ui/switch/index.js'
-  import { Textarea } from '#lib/components/ui/textarea/index.js'
-  import EllipsisIcon from '@lucide/svelte/icons/ellipsis-vertical'
-  import SquarePenIcon from '@lucide/svelte/icons/square-pen'
-  import Trash2Icon from '@lucide/svelte/icons/trash-2'
-  import UserPenIcon from '@lucide/svelte/icons/user-pen'
-  import PlusIcon from '@lucide/svelte/icons/plus'
-  import SearchIcon from '@lucide/svelte/icons/search'
   import Settings2Icon from '@lucide/svelte/icons/settings-2'
-  import SlidersHorizontalIcon from '@lucide/svelte/icons/sliders-horizontal'
+  import PlusIcon from '@lucide/svelte/icons/plus'
   import { getKitContext } from '../context'
   import { isKitClientError, type ProbeResult, type Provider, type ProviderPreset } from '../ports'
-  import { cn } from '../utils'
   import { newEndpoint, savable, toDraft, validateModel, type ProviderDraft } from './draft'
   import { createProviderEditSession, type ProviderEditSession } from './edit-session'
   import EndpointPanel, { type CheckOutcome, type CheckState } from './EndpointPanel.svelte'
   import ModelPickerDialog from './ModelPickerDialog.svelte'
+  import ProviderDialogs from './ProviderDialogs.svelte'
+  import ProviderList from './ProviderList.svelte'
   import { providersRevision, settingsTarget } from './revision.svelte'
 
   let {
@@ -39,7 +30,6 @@
   const { ports, i18n, notify } = getKitContext()
   const { t } = i18n
   const port = ports.providers
-  const FILTERS = ['all', 'enabled', 'disabled'] as const
 
   let providers = $state<Provider[]>([])
   let draft = $state<ProviderDraft | null>(null)
@@ -53,26 +43,15 @@
   /** Last rejected model setting, named in the banner (docs/41 §4.3). */
   let invalid = $state<{ model: string | null; message: string } | null>(null)
   let enabledSaving = $state(false)
-  let query = $state('')
-  let filter = $state<(typeof FILTERS)[number]>('all')
   let addOpen = $state(false)
   let newName = $state('')
   let infoOpen = $state(false)
   let editName = $state('')
   let notesOpen = $state(false)
   let editNotes = $state('')
-  /** Provider whose row menu is open (hover ⋯ or right-click). */
-  let menuFor = $state<string | null>(null)
   let editSession: ProviderEditSession | null = null
   let probeGeneration = 0
 
-  const visible = $derived(
-    providers.filter(
-      (p) =>
-        p.name.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()) &&
-        (filter === 'all' || (filter === 'enabled') === p.enabled),
-    ),
-  )
   const endpoint = $derived(draft?.endpoints[active] ?? null)
 
   function errorText(error: unknown): string {
@@ -87,25 +66,26 @@
     pricing: true,
   }
   /** A rejected model setting: the backend names field + reason; the model is `entity` or found by the local rules. */
-  function modelError(error: unknown, sent: ProviderDraft): { model: string | null; message: string } | null {
+  function modelError(
+    error: unknown,
+    sent: ProviderDraft,
+  ): { model: string | null; message: string } | null {
     if (!isKitClientError(error) || error.code !== 'bad_request') return null
     const { field, reason, entity } = error.details
     if (!field || !reason || !Object.hasOwn(MODEL_FIELDS, field)) return null
-    const models = sent.endpoints.flatMap((e) => e.models.map((model) => ({ model, protocol: e.protocol })))
+    const models = sent.endpoints.flatMap((e) =>
+      e.models.map((model) => ({ model, protocol: e.protocol })),
+    )
     const found =
       models.find(({ model }) => model.id === entity) ??
       models.find(({ model, protocol }) =>
-        validateModel(model, protocol).some((item) => item.field === field && item.reason === reason),
+        validateModel(model, protocol).some(
+          (item) => item.field === field && item.reason === reason,
+        ),
       )
     const model = found ? (found.model.name ?? found.model.id) : null
     return { model, message: t(`providers.error.${field}.${reason}`) }
   }
-  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'
-  }
   function notifyChanged() {
     providersRevision.value++
     onchanged?.()
@@ -151,7 +131,13 @@
   }
   async function select(p: Provider) {
     if (p.id === draft?.id) return
-    if (failed && !(await notify.confirm({ title: t('providers.discard_title'), body: t('providers.discard_body') })))
+    if (
+      failed &&
+      !(await notify.confirm({
+        title: t('providers.discard_title'),
+        body: t('providers.discard_body'),
+      }))
+    )
       return
     load(toDraft(p))
   }
@@ -166,11 +152,14 @@
           name: preset.name,
           presetId: preset.id,
           enabled: false,
-          endpoints: [{ slug: 'ep-1', baseUrl: preset.baseUrl, protocol: preset.protocol, models: [] }],
+          endpoints: [
+            { slug: 'ep-1', baseUrl: preset.baseUrl, protocol: preset.protocol, models: [] },
+          ],
         })
       }
       const target = settingsTarget.value
-      const owner = target && providers.find((p) => p.endpoints.some((e) => e.id === target.endpointId))
+      const owner =
+        target && providers.find((p) => p.endpoints.some((e) => e.id === target.endpointId))
       if (!owner) settingsTarget.value = null
       load(owner ? toDraft(owner) : providers[0] ? toDraft(providers[0]) : null)
       // EndpointPanel opens the target model's dialog when it mounts (and clears the target).
@@ -184,7 +173,8 @@
     }
   }
   const keyUrl = $derived(
-    presets.find((preset) => preset.id === providers.find((p) => p.id === draft?.id)?.presetId)?.apiKeyUrl,
+    presets.find((preset) => preset.id === providers.find((p) => p.id === draft?.id)?.presetId)
+      ?.apiKeyUrl,
   )
   $effect(() => {
     if (port) void refresh()
@@ -246,7 +236,6 @@
   }
   /** Row menu actions act on that row, so select it first (honours the unsaved-changes prompt). */
   async function rowAction(p: Provider, action: 'edit' | 'notes' | 'delete') {
-    menuFor = null
     await select(p)
     if (draft?.id !== p.id) return
     if (action === 'delete') return remove()
@@ -359,101 +348,20 @@
           : { slug, value: { state: 'error', message: errorText(error) } }
     }
   }
-  const probed = $derived(probe ? (draft?.endpoints.find((e) => e.slug === probe?.slug) ?? null) : null)
+  const probed = $derived(
+    probe ? (draft?.endpoints.find((e) => e.slug === probe?.slug) ?? null) : null,
+  )
 </script>
 
 {#if port}
   <div class="flex min-h-0 min-w-0 flex-col gap-4 sm:flex-row">
-    <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',
-                draft?.id === p.id && 'bg-muted font-medium',
-              )}
-              aria-current={draft?.id === p.id ? 'true' : undefined}
-              onclick={() => void select(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={() => void rowAction(p, 'edit')}
-                  ><SquarePenIcon />{t('providers.edit')}</DropdownMenu.Item
-                >
-                <DropdownMenu.Item onSelect={() => void rowAction(p, 'notes')}
-                  ><UserPenIcon />{t('providers.notes')}</DropdownMenu.Item
-                >
-                {#if !p.presetId}<DropdownMenu.Item variant="destructive" onSelect={() => void rowAction(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={() => (addOpen = true)}><PlusIcon />{t('providers.add')}</Button>
-    </nav>
+    <ProviderList
+      {providers}
+      selectedId={draft?.id ?? null}
+      onselect={(provider) => void select(provider)}
+      onaction={(provider, action) => void rowAction(provider, action)}
+      onadd={() => (addOpen = true)}
+    />
 
     <section class="flex min-w-0 flex-1 flex-col gap-5">
       {#if draft}
@@ -483,7 +391,10 @@
           <p role="alert" class="text-destructive flex items-center gap-2 text-kit-sm">
             {invalid
               ? invalid.model
-                ? t('providers.save_model_invalid', { model: invalid.model, error: invalid.message })
+                ? t('providers.save_model_invalid', {
+                    model: invalid.model,
+                    error: invalid.message,
+                  })
                 : invalid.message
               : t('providers.save_failed')}
             <Button variant="link" size="sm" class="h-auto p-0" onclick={() => void commit()}
@@ -493,15 +404,24 @@
         {/if}
         {#if draft.endpoints.length > 1}
           <Field.Field orientation="horizontal" class="gap-2">
-            <Field.Label for="kit-provider-endpoint" class="shrink-0">{t('providers.endpoints')}</Field.Label>
-            <Select.Root type="single" value={String(active)} onValueChange={(value) => (active = Number(value))}>
+            <Field.Label for="kit-provider-endpoint" class="shrink-0"
+              >{t('providers.endpoints')}</Field.Label
+            >
+            <Select.Root
+              type="single"
+              value={String(active)}
+              onValueChange={(value) => (active = Number(value))}
+            >
               <Select.Trigger id="kit-provider-endpoint" class="min-w-0 flex-1">
                 <span class="truncate">{endpoint?.baseUrl || t('providers.endpoint_new')}</span>
               </Select.Trigger>
               <Select.Content>
                 <Select.Group>
                   {#each draft.endpoints as e, index (e.slug)}
-                    <Select.Item value={String(index)} label={e.baseUrl || t('providers.endpoint_new')} />
+                    <Select.Item
+                      value={String(index)}
+                      label={e.baseUrl || t('providers.endpoint_new')}
+                    />
                   {/each}
                 </Select.Group>
               </Select.Content>
@@ -554,78 +474,18 @@
       void commit()
     }}
   />
-
-  <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>
+  <ProviderDialogs
+    bind:addOpen
+    bind:infoOpen
+    bind:notesOpen
+    bind:newName
+    bind:editName
+    bind:editNotes
+    {draft}
+    {providers}
+    {create}
+    {rename}
+    {saveNotes}
+    {remove}
+  />
 {/if}

package/src/providers/RequestConfigDialog.svelte

@@ -84,7 +84,8 @@
     }
   }
   /** Same rule as the backend `image_base`: optional, http(s), ≤2048 bytes. */
-  const badImage = (url: string) => !!url && (!validUrl(url) || new TextEncoder().encode(url).length > 2048)
+  const badImage = (url: string) =>
+    !!url && (!validUrl(url) || new TextEncoder().encode(url).length > 2048)
   function save() {
     error = null
     const url = baseUrl.trim()
@@ -125,13 +126,20 @@
     <Field.Group>
       <Field.Field>
         <Field.Label for="kit-endpoint-protocol">{t('providers.protocol')}</Field.Label>
-        <Select.Root type="single" value={protocol} onValueChange={(value) => (protocol = value as Protocol)}>
+        <Select.Root
+          type="single"
+          value={protocol}
+          onValueChange={(value) => (protocol = value as Protocol)}
+        >
           <Select.Trigger id="kit-endpoint-protocol" class="w-full"
             >{t(`providers.protocol.${protocol}`)}</Select.Trigger
           >
           <Select.Content>
             <Select.Group>
-              {#each PROTOCOLS as p (p)}<Select.Item value={p} label={t(`providers.protocol.${p}`)} />{/each}
+              {#each PROTOCOLS as p (p)}<Select.Item
+                  value={p}
+                  label={t(`providers.protocol.${p}`)}
+                />{/each}
             </Select.Group>
           </Select.Content>
         </Select.Root>
@@ -139,7 +147,9 @@
       <Field.Field>
         <div class="flex items-center gap-2">
           <Field.Label for="kit-request-url">{t('providers.base_url')}</Field.Label>
-          <span class="bg-primary/10 text-primary rounded-kit px-1.5 text-kit-xs">{t('providers.default')}</span>
+          <span class="bg-primary/10 text-primary rounded-kit px-1.5 text-kit-xs"
+            >{t('providers.default')}</span
+          >
         </div>
         <CopyInput
           id="kit-request-url"
@@ -149,7 +159,9 @@
         />
         {#if validUrl(baseUrl)}
           <Field.Description class="truncate font-mono text-kit-xs"
-            >{t('providers.base_url_hint', { url: `POST ${chatUrl(baseUrl, protocol)}` })}</Field.Description
+            >{t('providers.base_url_hint', {
+              url: `POST ${chatUrl(baseUrl, protocol)}`,
+            })}</Field.Description
           >
         {/if}
       </Field.Field>
@@ -171,26 +183,36 @@
           placeholder="https://example.com"
           bind:value={imageBaseUrl}
         />
-        <Field.Description class="text-kit-xs">{t('providers.image_base_url_hint')}</Field.Description>
+        <Field.Description class="text-kit-xs"
+          >{t('providers.image_base_url_hint')}</Field.Description
+        >
       </Field.Field>
       <Field.Field>
-        <Field.Label for="kit-request-image-edit-url">{t('providers.image_edit_base_url')}</Field.Label>
+        <Field.Label for="kit-request-image-edit-url"
+          >{t('providers.image_edit_base_url')}</Field.Label
+        >
         <CopyInput
           id="kit-request-image-edit-url"
           class="font-mono"
           placeholder="https://example.com"
           bind:value={imageEditBaseUrl}
         />
-        <Field.Description class="text-kit-xs">{t('providers.image_edit_base_url_hint')}</Field.Description>
+        <Field.Description class="text-kit-xs"
+          >{t('providers.image_edit_base_url_hint')}</Field.Description
+        >
       </Field.Field>
       <Field.Field>
         <div class="flex items-center justify-between gap-2">
-          <Field.Label for={json === null ? undefined : 'kit-request-headers'}>{t('providers.headers')}</Field.Label>
+          <Field.Label for={json === null ? undefined : 'kit-request-headers'}
+            >{t('providers.headers')}</Field.Label
+          >
           <Button
             variant="ghost"
             size="icon"
             title={json === null ? t('providers.headers_to_json') : t('providers.headers_to_list')}
-            aria-label={json === null ? t('providers.headers_to_json') : t('providers.headers_to_list')}
+            aria-label={json === null
+              ? t('providers.headers_to_json')
+              : t('providers.headers_to_list')}
             onclick={toggle}
             >{#if json === null}<BracesIcon />{:else}<ListIcon />{/if}</Button
           >
@@ -222,10 +244,16 @@
             variant="ghost"
             class="self-start"
             disabled={rows.length >= 20}
-            onclick={() => rows.push({ name: '', value: '' })}><PlusIcon />{t('providers.headers_add')}</Button
+            onclick={() => rows.push({ name: '', value: '' })}
+            ><PlusIcon />{t('providers.headers_add')}</Button
           >
         {:else}
-          <Textarea id="kit-request-headers" class="min-h-32 font-mono text-xs" spellcheck={false} bind:value={json} />
+          <Textarea
+            id="kit-request-headers"
+            class="min-h-32 font-mono text-xs"
+            spellcheck={false}
+            bind:value={json}
+          />
         {/if}
       </Field.Field>
     </Field.Group>

package/src/providers/SecretInput.svelte

@@ -83,7 +83,10 @@
       if (copying) await copy()
     } catch (error) {
       if (session.isCurrent(token))
-        notify.toast('error', error instanceof Error ? error.message : t('providers.key_reveal_failed'))
+        notify.toast(
+          'error',
+          error instanceof Error ? error.message : t('providers.key_reveal_failed'),
+        )
     } finally {
       if (session.isCurrent(token)) {
         busy = false
@@ -143,7 +146,10 @@
     if (!endpointId || !keyId) return
     const token = session.capture()
     if (
-      !(await notify.confirm({ title: t('providers.key_delete'), body: t('providers.key_delete_confirm') })) ||
+      !(await notify.confirm({
+        title: t('providers.key_delete'),
+        body: t('providers.key_delete_confirm'),
+      })) ||
       !session.isCurrent(token)
     )
       return
@@ -189,7 +195,9 @@
           class="flex h-full min-w-0 flex-1 items-center gap-1.5 pl-2.5 text-left outline-none"
           onclick={() => manage(null)}
         >
-          {#if primary.label}<span class="shrink-0 font-sans text-muted-foreground">{primary.label}</span>{/if}
+          {#if primary.label}<span class="shrink-0 font-sans text-muted-foreground"
+              >{primary.label}</span
+            >{/if}
           <span class="min-w-0 truncate">{plain ?? maskedText(primary, t)}</span>
           {#if keys.length > 1}<span class="shrink-0 font-sans text-kit-xs text-muted-foreground"
               >+{keys.length - 1}</span