@ouraihub/aether-ui 0.1.0 → 0.1.2

package/src/search/SearchProviderCard.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import ActivityIcon from '@lucide/svelte/icons/activity'
+  import ListIcon from '@lucide/svelte/icons/list'
+  import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle'
+  import ExternalLinkIcon from '@lucide/svelte/icons/external-link'
+  import { Button } from '#lib/components/ui/button/index.js'
+  import { Input } from '#lib/components/ui/input/index.js'
+  import CopyInput from '../CopyInput.svelte'
+  import * as Alert from '#lib/components/ui/alert/index.js'
+  import * as Field from '#lib/components/ui/field/index.js'
+  import { getKitContext } from '../context'
+  import type { SearchCap, SearchProvider, SearchSettingsDto } from '../ports'
+
+  type Draft = { baseUrl?: string; basicAuthUsername?: string }
+  let {
+    cap,
+    provider,
+    settings,
+    pending,
+    error,
+    draft,
+    keyDraft,
+    check,
+    onChoose,
+    onOpenKeys,
+    onKeyInput,
+    onPatchDraft,
+    onSave,
+  }: {
+    cap: SearchCap
+    provider: SearchProvider
+    settings: SearchSettingsDto
+    pending: boolean
+    error: string
+    draft: Draft
+    keyDraft: string
+    check?: number | undefined
+    onChoose: (provider: string) => void
+    onOpenKeys: () => void
+    onKeyInput: (value: string) => void
+    onPatchDraft: (patch: Draft) => void
+    onSave: (check?: boolean) => void
+  } = $props()
+
+  const { i18n } = getKitContext()
+  const { t } = i18n
+  const safeUrl = (raw?: string) => {
+    if (!raw) return null
+    try {
+      const url = new URL(raw)
+      return ['https:', 'http:'].includes(url.protocol) ? url.href : null
+    } catch {
+      return null
+    }
+  }
+</script>
+
+<section
+  class="flex min-w-0 flex-col gap-3 rounded-kit border p-4"
+  aria-labelledby={`search-${cap}`}
+>
+  <header class="flex flex-wrap items-start justify-between gap-3">
+    <div class="min-w-0 flex-1">
+      <h2 id={`search-${cap}`} class="text-kit-base font-semibold">{t(`search.${cap}`)}</h2>
+      <p class="text-muted-foreground text-kit-sm">
+        {provider.description}
+        {#if safeUrl(provider.officialWebsite)}<a
+            class="text-primary inline-flex"
+            href={safeUrl(provider.officialWebsite) ?? ''}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={t('search.website')}
+            title={t('search.website')}><ExternalLinkIcon size={13} /></a
+          >{/if}
+      </p>
+    </div>
+    <select
+      class="bg-background border-input h-kit-control max-w-full rounded-kit-sm border px-2 text-kit-sm"
+      aria-label={t(`search.${cap}`)}
+      disabled={pending}
+      value={settings.defaultProvider}
+      onchange={(event) => onChoose(event.currentTarget.value)}
+    >
+      {#each settings.providers as option (option.id)}<option value={option.id}
+          >{option.name}</option
+        >{/each}
+    </select>
+  </header>
+  {#if error}<Alert.Root variant="destructive"
+      ><Alert.Description>{error}</Alert.Description></Alert.Root
+    >{/if}
+  <Field.Group class="gap-3 border-t pt-3">
+    {#if provider.keyMode !== 'none' || provider.basicAuth}
+      <Field.Field data-disabled={pending}>
+        <div class="flex flex-wrap items-baseline gap-2">
+          <Field.Label for={`search-key-${cap}`}
+            >{provider.basicAuth ? t('search.password') : t('search.apiKey')}</Field.Label
+          >
+          {#if safeUrl(provider.apiKeyWebsite)}<a
+              class="text-primary text-kit-sm hover:underline"
+              href={safeUrl(provider.apiKeyWebsite) ?? ''}
+              target="_blank"
+              rel="noopener noreferrer">{t('search.apiKeyWebsite')}</a
+            >{/if}
+        </div>
+        <div class="flex min-w-0 items-center gap-2">
+          <Input
+            id={`search-key-${cap}`}
+            class="min-w-0 flex-1"
+            type="password"
+            autocomplete="off"
+            spellcheck={false}
+            maxlength={4096}
+            disabled={pending}
+            placeholder={t('search.newKey')}
+            value={keyDraft}
+            oninput={(event) => onKeyInput(event.currentTarget.value)}
+          />
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            disabled={pending}
+            aria-label={t('search.manageKeys')}
+            title={t('search.manageKeys')}
+            onclick={onOpenKeys}><ListIcon /></Button
+          >
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            disabled={pending}
+            aria-label={t('search.check')}
+            title={t('search.check')}
+            onclick={() => onSave(true)}
+          >
+            {#if pending}<LoaderCircleIcon class="animate-spin" />{:else}<ActivityIcon />{/if}
+          </Button>
+        </div>
+        <Field.Description
+          >{provider.keys.length
+            ? provider.keys.map((item) => item.masked).join(' · ')
+            : t('search.keyNotSet')}</Field.Description
+        >
+      </Field.Field>
+    {/if}
+    {#if provider.defaultBaseUrl !== undefined}
+      <Field.Field data-disabled={pending}>
+        <Field.Label for={`search-url-${cap}`}>{t('search.baseUrl')}</Field.Label>
+        <div class="flex min-w-0 items-center gap-2">
+          <CopyInput
+            id={`search-url-${cap}`}
+            class="min-w-0 flex-1"
+            disabled={pending}
+            value={draft.baseUrl ?? provider.baseUrl ?? provider.defaultBaseUrl}
+            oninput={(event) => onPatchDraft({ baseUrl: event.currentTarget.value })}
+          />
+          {#if provider.keyMode === 'none' && !provider.basicAuth}<Button
+              type="button"
+              variant="outline"
+              size="icon-sm"
+              disabled={pending}
+              aria-label={t('search.check')}
+              title={t('search.check')}
+              onclick={() => onSave(true)}><ActivityIcon /></Button
+            >{/if}
+        </div>
+      </Field.Field>
+    {/if}
+    {#if provider.basicAuth}
+      <Field.Field
+        ><Field.Label for={`search-user-${cap}`}>{t('search.username')}</Field.Label><Input
+          id={`search-user-${cap}`}
+          disabled={pending}
+          value={draft.basicAuthUsername ?? provider.basicAuthUsername ?? ''}
+          oninput={(event) => onPatchDraft({ basicAuthUsername: event.currentTarget.value })}
+        /></Field.Field
+      >
+    {/if}
+  </Field.Group>
+  <div class="flex flex-wrap items-center gap-2">
+    {#if provider.defaultBaseUrl !== undefined || provider.keyMode !== 'none'}<Button
+        type="button"
+        size="sm"
+        disabled={pending}
+        onclick={() => onSave()}>{t('search.save')}</Button
+      >{/if}
+    {#if pending}<span class="text-muted-foreground text-kit-sm" role="status"
+        >{t('search.checking')}</span
+      >
+    {:else if check !== undefined}<span class="text-muted-foreground text-kit-sm" role="status"
+        >{t('search.resultCount', { count: check })}</span
+      >{/if}
+  </div>
+</section>

package/src/search/SearchSettings.svelte

@@ -1,16 +1,12 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import ActivityIcon from '@lucide/svelte/icons/activity'
-  import ListIcon from '@lucide/svelte/icons/list'
-  import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle'
-  import ExternalLinkIcon from '@lucide/svelte/icons/external-link'
   import { Button } from '#lib/components/ui/button/index.js'
   import { Input } from '#lib/components/ui/input/index.js'
-  import CopyInput from '../CopyInput.svelte'
-  import { Textarea } from '#lib/components/ui/textarea/index.js'
   import * as Alert from '#lib/components/ui/alert/index.js'
   import * as Empty from '#lib/components/ui/empty/index.js'
   import * as Field from '#lib/components/ui/field/index.js'
+  import SearchProviderCard from './SearchProviderCard.svelte'
+  import SearchAdvancedTools from './SearchAdvancedTools.svelte'
   import { getKitContext } from '../context'
   import { isKitClientError } from '../ports'
   import { createClientSession } from '../session'
@@ -67,7 +63,8 @@
   let passwordRevision = 0
 
   const keyOf = (cap: SearchCap, provider: string) => `${cap}:${provider}`
-  const errorText = (error: unknown) => (isKitClientError(error) ? t(`errors.${error.code}`) : t('errors.internal'))
+  const errorText = (error: unknown) =>
+    isKitClientError(error) ? t(`errors.${error.code}`) : t('errors.internal')
   const activeProvider = (cap: SearchCap) =>
     settings[cap]?.providers.find((p) => p.id === settings[cap]?.defaultProvider)
   const dialogProvider = $derived.by(() => {
@@ -85,20 +82,12 @@
   function setError(key: string, value: string) {
     errors = { ...errors, [key]: value }
   }
-  function safeUrl(raw?: string) {
-    if (!raw) return null
-    try {
-      const url = new URL(raw)
-      return ['https:', 'http:'].includes(url.protocol) ? url.href : null
-    } catch {
-      return null
-    }
-  }
   function patchDraft(cap: SearchCap, provider: string, patch: Draft) {
     const key = keyOf(cap, provider)
     drafts = { ...drafts, [key]: { ...drafts[key], ...patch } }
     const revisions = draftRevisions[key] ?? {}
-    for (const field of Object.keys(patch) as (keyof Draft)[]) revisions[field] = (revisions[field] ?? 0) + 1
+    for (const field of Object.keys(patch) as (keyof Draft)[])
+      revisions[field] = (revisions[field] ?? 0) + 1
     draftRevisions[key] = revisions
     checks = { ...checks, [key]: undefined }
   }
@@ -168,7 +157,8 @@
           onConfigSaved(sent) {
             const next = { ...drafts[key] }
             for (const field of ['baseUrl', 'basicAuthUsername'] as const) {
-              if (sent[field] !== undefined && draftRevisions[key]?.[field] === revisions[field]) delete next[field]
+              if (sent[field] !== undefined && draftRevisions[key]?.[field] === revisions[field])
+                delete next[field]
             }
             drafts = { ...drafts, [key]: next }
           },
@@ -276,7 +266,8 @@
         if (isCurrent()) notify.toast('success', t('search.copied'))
       } else revealed = { ...revealed, [key.id]: value }
     } catch (error) {
-      if (isCurrent()) dialogError = copy && !isKitClientError(error) ? t('search.copyFailed') : errorText(error)
+      if (isCurrent())
+        dialogError = copy && !isKitClientError(error) ? t('search.copyFailed') : errorText(error)
     } finally {
       if (isCurrent() && passwordRevision === revision) {
         password = ''
@@ -362,250 +353,47 @@
   <div class="mx-auto flex w-full min-w-0 max-w-3xl flex-col gap-4">
     {#each caps as cap (cap)}
       {@const provider = activeProvider(cap)}
-      {#if provider}
+      {@const current = settings[cap]}
+      {#if provider && current}
         {@const key = keyOf(cap, provider.id)}
-        <section class="flex min-w-0 flex-col gap-3 rounded-kit border p-4" aria-labelledby={`search-${cap}`}>
-          <header class="flex flex-wrap items-start justify-between gap-3">
-            <div class="min-w-0 flex-1">
-              <h2 id={`search-${cap}`} class="text-kit-base font-semibold">{t(`search.${cap}`)}</h2>
-              <p class="text-muted-foreground text-kit-sm">
-                {provider.description}
-                {#if safeUrl(provider.officialWebsite)}<a
-                    class="text-primary inline-flex"
-                    href={safeUrl(provider.officialWebsite) ?? ''}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label={t('search.website')}
-                    title={t('search.website')}><ExternalLinkIcon size={13} /></a
-                  >{/if}
-              </p>
-            </div>
-            <select
-              class="bg-background border-input h-kit-control max-w-full rounded-kit-sm border px-2 text-kit-sm"
-              aria-label={t(`search.${cap}`)}
-              disabled={pending[cap]}
-              value={settings[cap]?.defaultProvider}
-              onchange={(event) => void choose(cap, event.currentTarget.value)}
-            >
-              {#each settings[cap]?.providers ?? [] as option (option.id)}<option value={option.id}
-                  >{option.name}</option
-                >{/each}
-            </select>
-          </header>
-          {#if errors[cap]}<Alert.Root variant="destructive"
-              ><Alert.Description>{errors[cap]}</Alert.Description></Alert.Root
-            >{/if}
-          <Field.Group class="gap-3 border-t pt-3">
-            {#if provider.keyMode !== 'none' || provider.basicAuth}
-              <Field.Field data-disabled={pending[cap]}>
-                <div class="flex flex-wrap items-baseline gap-2">
-                  <Field.Label for={`search-key-${cap}`}
-                    >{provider.basicAuth ? t('search.password') : t('search.apiKey')}</Field.Label
-                  >
-                  {#if safeUrl(provider.apiKeyWebsite)}<a
-                      class="text-primary text-kit-sm hover:underline"
-                      href={safeUrl(provider.apiKeyWebsite) ?? ''}
-                      target="_blank"
-                      rel="noopener noreferrer">{t('search.apiKeyWebsite')}</a
-                    >{/if}
-                </div>
-                <div class="flex min-w-0 items-center gap-2">
-                  <Input
-                    id={`search-key-${cap}`}
-                    class="min-w-0 flex-1"
-                    type="password"
-                    autocomplete="off"
-                    spellcheck={false}
-                    maxlength={4096}
-                    disabled={pending[cap]}
-                    placeholder={t('search.newKey')}
-                    value={keyDrafts[key] ?? ''}
-                    oninput={(event) => {
-                      keyDrafts = { ...keyDrafts, [key]: event.currentTarget.value }
-                      keyRevisions[key] = (keyRevisions[key] ?? 0) + 1
-                      checks = { ...checks, [key]: undefined }
-                    }}
-                  />
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="icon-sm"
-                    disabled={pending[cap]}
-                    aria-label={t('search.manageKeys')}
-                    title={t('search.manageKeys')}
-                    onclick={() => openKeys(cap, provider.id)}><ListIcon /></Button
-                  >
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="icon-sm"
-                    disabled={pending[cap]}
-                    aria-label={t('search.check')}
-                    title={t('search.check')}
-                    onclick={() => void saveAndCheck(cap, provider, true)}
-                    >{#if pending[cap]}<LoaderCircleIcon class="animate-spin" />{:else}<ActivityIcon />{/if}</Button
-                  >
-                </div>
-                <Field.Description
-                  >{provider.keys.length
-                    ? provider.keys.map((item) => item.masked).join(' · ')
-                    : t('search.keyNotSet')}</Field.Description
-                >
-              </Field.Field>
-            {/if}
-            {#if provider.defaultBaseUrl !== undefined}
-              <Field.Field data-disabled={pending[cap]}>
-                <Field.Label for={`search-url-${cap}`}>{t('search.baseUrl')}</Field.Label>
-                <div class="flex min-w-0 items-center gap-2">
-                  <CopyInput
-                    id={`search-url-${cap}`}
-                    class="min-w-0 flex-1"
-                    disabled={pending[cap]}
-                    value={draftOf(cap, provider.id).baseUrl ?? provider.baseUrl ?? provider.defaultBaseUrl}
-                    oninput={(event) => patchDraft(cap, provider.id, { baseUrl: event.currentTarget.value })}
-                  />
-                  {#if provider.keyMode === 'none' && !provider.basicAuth}<Button
-                      type="button"
-                      variant="outline"
-                      size="icon-sm"
-                      disabled={pending[cap]}
-                      aria-label={t('search.check')}
-                      title={t('search.check')}
-                      onclick={() => void saveAndCheck(cap, provider, true)}><ActivityIcon /></Button
-                    >{/if}
-                </div>
-              </Field.Field>
-            {/if}
-            {#if provider.basicAuth}
-              <Field.Field
-                ><Field.Label for={`search-user-${cap}`}>{t('search.username')}</Field.Label><Input
-                  id={`search-user-${cap}`}
-                  disabled={pending[cap]}
-                  value={draftOf(cap, provider.id).basicAuthUsername ?? provider.basicAuthUsername ?? ''}
-                  oninput={(event) => patchDraft(cap, provider.id, { basicAuthUsername: event.currentTarget.value })}
-                /></Field.Field
-              >
-            {/if}
-          </Field.Group>
-          <div class="flex flex-wrap items-center gap-2">
-            {#if provider.defaultBaseUrl !== undefined || provider.keyMode !== 'none'}<Button
-                type="button"
-                size="sm"
-                disabled={pending[cap]}
-                onclick={() => void saveAndCheck(cap, provider)}>{t('search.save')}</Button
-              >{/if}
-            {#if pending[cap]}<span class="text-muted-foreground text-kit-sm" role="status">{t('search.checking')}</span
-              >{:else if checks[key] !== undefined}<span class="text-muted-foreground text-kit-sm" role="status"
-                >{t('search.resultCount', { count: checks[key] ?? 0 })}</span
-              >{/if}
-          </div>
-        </section>
+        <SearchProviderCard
+          {cap}
+          {provider}
+          settings={current}
+          pending={pending[cap] === true}
+          error={errors[cap] ?? ''}
+          draft={draftOf(cap, provider.id)}
+          keyDraft={keyDrafts[key] ?? ''}
+          check={checks[key]}
+          onChoose={(next) => void choose(cap, next)}
+          onOpenKeys={() => openKeys(cap, provider.id)}
+          onKeyInput={(value) => {
+            keyDrafts = { ...keyDrafts, [key]: value }
+            keyRevisions[key] = (keyRevisions[key] ?? 0) + 1
+            checks = { ...checks, [key]: undefined }
+          }}
+          onPatchDraft={(patch) => patchDraft(cap, provider.id, patch)}
+          onSave={(check = false) => void saveAndCheck(cap, provider, check)}
+        />
       {/if}
     {/each}
-    <section class="rounded-kit border p-4">
-      <details>
-        <summary class="cursor-pointer text-kit-base font-semibold">{t('search.advanced')}</summary>
-        <Field.Group class="mt-3 gap-3">
-          <Field.Field orientation="horizontal"
-            ><Field.Label for="search-max-results">{t('search.maxResults')}</Field.Label><Input
-              id="search-max-results"
-              class="ml-auto w-20"
-              type="number"
-              min="1"
-              max="50"
-              disabled={pending.preferences}
-              bind:value={preferences.maxResults}
-            /></Field.Field
-          >
-          <Field.Field orientation="horizontal"
-            ><Field.Label for="search-compression">{t('search.compression')}</Field.Label><select
-              id="search-compression"
-              class="bg-background border-input h-kit-control ml-auto rounded-kit-sm border px-2 text-kit-sm"
-              disabled={pending.preferences}
-              bind:value={preferences.compression}
-              ><option value="none">{t('search.compressionNone')}</option><option value="cutoff"
-                >{t('search.compressionCutoff')}</option
-              ></select
-            ></Field.Field
-          >
-          {#if preferences.compression === 'cutoff'}<Field.Field orientation="horizontal"
-              ><Field.Label for="search-cutoff">{t('search.cutoffLimit')}</Field.Label><Input
-                id="search-cutoff"
-                class="ml-auto w-24"
-                type="number"
-                min="100"
-                max="20000"
-                disabled={pending.preferences}
-                bind:value={preferences.cutoffLimit}
-              /></Field.Field
-            >{/if}
-          <Field.Field
-            ><Field.Label for="search-blacklist">{t('search.blacklist')}</Field.Label><Textarea
-              id="search-blacklist"
-              rows={3}
-              disabled={pending.preferences}
-              placeholder="example.com\n*://*.example.org/*"
-              bind:value={blacklist}
-            /></Field.Field
-          >
-        </Field.Group>
-      </details>
-      <Field.Field class="mt-3 border-t pt-3"
-        ><label class="flex items-center gap-2 text-kit-sm"
-          ><input type="checkbox" disabled={pending.preferences} bind:checked={preferences.modelToolsPreferred} />{t(
-            'search.nativePreferred',
-          )}</label
-        ><Field.Description>{t('search.nativePrivacy')}</Field.Description></Field.Field
-      >
-      {#if errors.preferences}<p role="alert" class="text-destructive text-kit-sm">{errors.preferences}</p>{/if}
-      <Button class="mt-3" type="button" size="sm" disabled={pending.preferences} onclick={() => void savePreferences()}
-        >{t('search.save')}</Button
-      >
-    </section>
-    <section class="flex min-w-0 flex-col gap-3 rounded-kit border p-4" aria-label={t('search.tools')}>
-      <Field.Field
-        ><Field.Label for="search-query">{t('search.query')}</Field.Label>
-        <div class="flex min-w-0 gap-2">
-          <Input id="search-query" class="min-w-0 flex-1" disabled={pending.query} bind:value={query} /><Button
-            type="button"
-            disabled={pending.query || !query.trim()}
-            onclick={() => void search()}>{t('search.runSearch')}</Button
-          >
-        </div></Field.Field
-      >
-      {#if errors.query}<p class="text-destructive text-kit-sm" role="alert">{errors.query}</p>{/if}
-      {#if result}<p class="text-muted-foreground text-kit-sm">
-          {t('search.resultCount', { count: result.hits.length })}
-        </p>
-        {#each result.hits as hit (hit.url)}<article class="min-w-0 text-kit-sm">
-            <a
-              class="text-primary break-words hover:underline"
-              href={safeUrl(hit.url) ?? ''}
-              target="_blank"
-              rel="noopener noreferrer">{hit.title}</a
-            >
-            <p class="whitespace-pre-wrap break-words">{hit.snippet}</p>
-          </article>{/each}{/if}
-      <Field.Field
-        ><Field.Label for="search-page-url">{t('search.pageUrl')}</Field.Label>
-        <div class="flex min-w-0 gap-2">
-          <Input id="search-page-url" class="min-w-0 flex-1" disabled={pending.page} bind:value={pageUrl} /><Button
-            type="button"
-            disabled={pending.page || !pageUrl.trim()}
-            onclick={() => void readPage()}>{t('search.read')}</Button
-          >
-        </div></Field.Field
-      >
-      {#if errors.page}<p class="text-destructive text-kit-sm" role="alert">{errors.page}</p>{/if}
-      {#if page}<h3 class="text-kit-base font-medium">{page.title}</h3>
-        <a
-          class="text-primary break-words text-kit-sm"
-          href={safeUrl(page.url) ?? ''}
-          target="_blank"
-          rel="noopener noreferrer">{page.url}</a
-        >
-        <pre class="max-h-96 overflow-auto whitespace-pre-wrap break-words text-kit-sm">{page.content}</pre>{/if}
-    </section>
+    <SearchAdvancedTools
+      bind:preferences
+      bind:blacklist
+      bind:query
+      bind:pageUrl
+      preferencesPending={pending.preferences === true}
+      preferencesError={errors.preferences ?? ''}
+      {result}
+      {page}
+      queryPending={pending.query === true}
+      pagePending={pending.page === true}
+      queryError={errors.query ?? ''}
+      pageError={errors.page ?? ''}
+      onSavePreferences={() => void savePreferences()}
+      onSearch={() => void search()}
+      onReadPage={() => void readPage()}
+    />
   </div>
 {/if}
 
@@ -665,15 +453,21 @@
                 disabled={dialogBusy || (port?.revealNeedsPassword && !password)}
                 onclick={() => void revealKey(key, true)}>{t('search.copy')}</Button
               >
-              <Button type="button" variant="ghost" size="sm" disabled={dialogBusy} onclick={() => void removeKey(key)}
-                >{t('search.delete')}</Button
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                disabled={dialogBusy}
+                onclick={() => void removeKey(key)}>{t('search.delete')}</Button
               >
             </div>
           </li>
         {/each}
       </ul>
       <Field.Field
-        ><Field.Label for="search-edit-key">{t(editingId ? 'search.editKey' : 'search.newKey')}</Field.Label><Input
+        ><Field.Label for="search-edit-key"
+          >{t(editingId ? 'search.editKey' : 'search.newKey')}</Field.Label
+        ><Input
           id="search-edit-key"
           type="password"
           autocomplete="off"
@@ -692,8 +486,11 @@
         <Button
           type="button"
           size="sm"
-          disabled={dialogBusy || !editValue.trim() || (!editingId && dialogProvider.keys.length >= 16)}
-          onclick={() => void saveEditedKey()}>{t(editingId ? 'search.save' : 'search.addKey')}</Button
+          disabled={dialogBusy ||
+            !editValue.trim() ||
+            (!editingId && dialogProvider.keys.length >= 16)}
+          onclick={() => void saveEditedKey()}
+          >{t(editingId ? 'search.save' : 'search.addKey')}</Button
         ><Button type="button" variant="outline" size="sm" onclick={() => keyDialog.close()}
           >{t('common.cancel')}</Button
         >

package/src/search/settings-flow.ts

@@ -17,7 +17,8 @@ export async function saveSearchSettings(
   const config = { ...input.config }
   const key = input.key ? { ...input.key } : undefined
   const check = input.check
-  const cancelled = () => new KitClientError({ code: 'cancelled', message: 'Search settings cancelled', details: {} })
+  const cancelled = () =>
+    new KitClientError({ code: 'cancelled', message: 'Search settings cancelled', details: {} })
   function assertCurrent() {
     if (options?.signal?.aborted || !session.isCurrent()) throw cancelled()
   }
@@ -51,12 +52,16 @@ export async function saveSearchSettings(
   assertCurrent()
   session.onConfigSaved(config)
   if (key?.value.trim()) {
-    settings = await step(() => port.saveKey(config.capability, config.provider, key.value, key.keyId, options))
+    settings = await step(() =>
+      port.saveKey(config.capability, config.provider, key.value, key.keyId, options),
+    )
     session.onSettings(settings)
     assertCurrent()
     session.onKeySaved()
   }
-  const checked = check ? await step(() => port.check(config.capability, config.provider, options)) : undefined
+  const checked = check
+    ? await step(() => port.check(config.capability, config.provider, options))
+    : undefined
   assertCurrent()
   return checked ? { settings, checked } : { settings }
 }