@ouraihub/aether-ui 0.0.0-stage → 0.1.0

package/src/search/index.ts

@@ -0,0 +1,13 @@
+export { default as SearchSettings } from './SearchSettings.svelte'
+export type {
+  SearchCap,
+  SearchKey,
+  SearchPreferences,
+  SearchHit,
+  SearchPage,
+  SearchPort,
+  SearchProvider,
+  SearchResult,
+  SearchSave,
+  SearchSettingsDto,
+} from '../ports/search'

package/src/search/settings-flow.ts

@@ -0,0 +1,62 @@
+import { KitClientError } from '../ports/contract'
+import type { CallOptions } from '../ports/contract'
+import type { SearchPort, SearchSave, SearchSettingsDto } from '../ports/search'
+
+/** Applies each persisted step before attempting the next (docs/30 §4). */
+export async function saveSearchSettings(
+  port: SearchPort,
+  input: { config: SearchSave; key?: { value: string; keyId?: string }; check: boolean },
+  session: {
+    isCurrent(): boolean
+    onSettings(next: SearchSettingsDto): void
+    onConfigSaved(sent: SearchSave): void
+    onKeySaved(): void
+  },
+  options?: CallOptions,
+): Promise<{ settings: SearchSettingsDto; checked?: { count: number } }> {
+  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: {} })
+  function assertCurrent() {
+    if (options?.signal?.aborted || !session.isCurrent()) throw cancelled()
+  }
+  // Consume an in-flight response even if its transport does not honor abort.
+  async function step<T>(call: () => Promise<T>): Promise<T> {
+    assertCurrent()
+    const signal = options?.signal
+    let onAbort: (() => void) | undefined
+    try {
+      const operation = call()
+      let value: T
+      if (signal) {
+        const abort = Promise.withResolvers<never>()
+        onAbort = () => abort.reject(cancelled())
+        signal.addEventListener('abort', onAbort, { once: true })
+        if (signal.aborted) onAbort()
+        value = await Promise.race([operation, abort.promise])
+      } else value = await operation
+      assertCurrent()
+      return value
+    } catch (error) {
+      assertCurrent()
+      throw error
+    } finally {
+      if (signal && onAbort) signal.removeEventListener('abort', onAbort)
+    }
+  }
+
+  let settings = await step(() => port.save(config, options))
+  session.onSettings(settings)
+  assertCurrent()
+  session.onConfigSaved(config)
+  if (key?.value.trim()) {
+    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
+  assertCurrent()
+  return checked ? { settings, checked } : { settings }
+}

package/src/session.ts

@@ -0,0 +1,20 @@
+/** A token belongs to exactly one session instance and one target generation. */
+export interface SessionToken {
+  readonly generation: number
+}
+export interface ClientSession {
+  capture(): SessionToken
+  isCurrent(token: SessionToken): boolean
+  invalidate(): void
+}
+export function createClientSession(): ClientSession {
+  let generation = 0
+  let current: SessionToken = { generation }
+  return {
+    capture: () => current,
+    isCurrent: (token) => token === current,
+    invalidate: () => {
+      current = { generation: ++generation }
+    },
+  }
+}

package/src/skills/SkillAdd.svelte

@@ -0,0 +1,347 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+  import { Bot, ChevronDown, FolderSearch, Import, Plus, Search } from '@lucide/svelte'
+  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 Field from '#lib/components/ui/field/index.js'
+  import { Input } from '#lib/components/ui/input/index.js'
+  import { getKitContext } from '../context'
+  import {
+    isKitClientError,
+    type Preview,
+    type PreparedSkill,
+    type SkillMeta,
+    type Source,
+    type SkillCandidate,
+    type SystemSkillCandidate,
+  } from '../ports'
+  import { errorText } from './error'
+  import SkillPreviewDialog from './SkillPreviewDialog.svelte'
+  import SkillAuthoring from './SkillAuthoring.svelte'
+
+  let {
+    oninstalled,
+    onmanual,
+    disabled = false,
+  }: {
+    oninstalled: (skills: SkillMeta[]) => void
+    onmanual: () => void
+    disabled?: boolean
+  } = $props()
+  const { ports, i18n, notify } = getKitContext()
+  const { t } = i18n
+  const port = ports.skills
+  const sources = ports.skillSources
+  type Mode = 'agent' | 'online' | 'system' | 'local'
+  let mode = $state<Mode | null>(null)
+  let busy = $state(false)
+  let error = $state<string | null>(null)
+  let query = $state('')
+  let candidates = $state<SkillCandidate[]>([])
+  let system = $state<SystemSkillCandidate[]>([])
+  let searched = $state(false)
+  let file = $state<HTMLInputElement | null>(null)
+  let source: Source | null = null
+  let preview = $state<Preview | null>(null)
+  let origin = $state('')
+  let ignored = $state<string[]>([])
+  let operation: AbortController | null = null
+  let generation = 0
+  let alive = true
+
+  function invalidate(): void {
+    generation += 1
+    operation?.abort()
+    operation = null
+    busy = false
+  }
+  function close(): void {
+    invalidate()
+    mode = null
+    preview = null
+    source = null
+    error = null
+  }
+  onDestroy(() => {
+    alive = false
+    invalidate()
+  })
+
+  async function act(work: (signal: AbortSignal, current: () => boolean) => Promise<void>): Promise<void> {
+    invalidate()
+    const id = generation
+    const controller = new AbortController()
+    operation = controller
+    const current = (): boolean => alive && generation === id && !controller.signal.aborted
+    busy = true
+    error = null
+    try {
+      await work(controller.signal, current)
+    } catch (cause) {
+      if (current()) error = errorText(t, cause)
+    } finally {
+      if (current()) {
+        busy = false
+        operation = null
+      }
+    }
+  }
+  function open(next: Mode): void {
+    close()
+    query = ''
+    candidates = []
+    system = []
+    searched = false
+    mode = next
+    if (next === 'system') void scan(false)
+  }
+  async function showPreview(
+    next: Source,
+    from: string,
+    current: () => boolean,
+    excluded: string[] = [],
+  ): Promise<void> {
+    if (!port || !current()) return
+    const result = await port.preview(next)
+    if (!current()) return
+    source = next
+    origin = from
+    ignored = excluded
+    preview = result
+  }
+  function search(): Promise<void> {
+    return act(async (signal, current) => {
+      if (!sources) return
+      const result = await sources.search(query.trim(), { signal })
+      if (current()) {
+        candidates = result
+        searched = true
+      }
+    })
+  }
+  function prepare(candidate: SkillCandidate): Promise<void> {
+    return act(async (signal, current) => {
+      if (!sources) return
+      const prepared = await sources.prepare(candidate.url, { signal })
+      await showPreview(prepared.source, prepared.origin, current, prepared.ignored)
+    })
+  }
+  function scan(pick: boolean): Promise<void> {
+    return act(async (signal, current) => {
+      if (!sources) return
+      const found = await (pick ? sources.pickSearchDirectory({ signal }) : sources.discover({ signal }))
+      if (current() && found !== null) {
+        system = found
+        searched = true
+      }
+    })
+  }
+  function prepareSystem(candidate: SystemSkillCandidate): Promise<void> {
+    return act(async (signal, current) => {
+      if (!sources) return
+      const prepared = await sources.prepareSystem(candidate.path, { signal })
+      await showPreview(prepared.source, prepared.origin, current, prepared.ignored)
+    })
+  }
+  function pickDirectory(): Promise<void> {
+    return act(async (signal, current) => {
+      const prepared = await sources?.pickDirectory({ signal })
+      if (prepared) await showPreview(prepared.source, prepared.origin, current, prepared.ignored)
+    })
+  }
+  function pickFile(input: HTMLInputElement): void {
+    const picked = input.files?.[0]
+    input.value = ''
+    if (!picked) return
+    void act(async (_signal, current) => {
+      const next: Source = { bytes: { fileName: picked.name, bytes: [...new Uint8Array(await picked.arrayBuffer())] } }
+      await showPreview(next, picked.name, current)
+    })
+  }
+  function closePreview(): void {
+    invalidate()
+    preview = null
+    source = null
+  }
+  function install(replace: boolean): void {
+    const confirmed = preview
+    const from = source
+    if (!port || !confirmed || !from || busy) return
+    void act(async (_signal, current) => {
+      try {
+        const installed = await port.install(from, confirmed.digest, replace)
+        if (!current()) return
+        oninstalled(installed)
+        close()
+        notify.toast('success', t('skills.installed', { name: confirmed.name }))
+      } catch (cause) {
+        if (isKitClientError(cause) && cause.details.reason === 'content_changed') {
+          const refreshed = await port.preview(from)
+          if (current()) {
+            preview = refreshed
+            notify.toast('info', t('skills.content_changed'))
+          }
+          return
+        }
+        throw cause
+      }
+    })
+  }
+</script>
+
+<div class="flex gap-2">
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      {#snippet child({ props })}
+        <Button {...props} {disabled}
+          ><Plus data-icon="inline-start" />{t('skills.add.title')}<ChevronDown data-icon="inline-end" /></Button
+        >
+      {/snippet}
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content align="start">
+      <DropdownMenu.Group>
+        {#if sources}
+          {#if sources.authoring && ports.providers}
+            <DropdownMenu.Item onSelect={() => open('agent')}><Bot />{t('skills.add.agent')}</DropdownMenu.Item>
+          {/if}
+          <DropdownMenu.Item onSelect={() => open('online')}><Search />{t('skills.add.online')}</DropdownMenu.Item>
+          <DropdownMenu.Item onSelect={() => open('system')}><FolderSearch />{t('skills.add.system')}</DropdownMenu.Item
+          >
+        {/if}
+        <DropdownMenu.Item onSelect={() => open('local')}><Import />{t('skills.add.local')}</DropdownMenu.Item>
+      </DropdownMenu.Group>
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+  <Button variant="outline" {disabled} onclick={onmanual}>{t('skills.new')}</Button>
+</div>
+<input
+  bind:this={file}
+  type="file"
+  accept=".md,.zip"
+  class="hidden"
+  aria-label={t('skills.import')}
+  onchange={(e) => pickFile(e.currentTarget)}
+/>
+
+<Dialog.Root
+  open={mode !== null && mode !== 'agent' && preview === null}
+  onOpenChange={(value) => {
+    if (!value) close()
+  }}
+>
+  <Dialog.Content class="flex max-h-[85vh] flex-col sm:max-w-2xl">
+    <Dialog.Header>
+      <Dialog.Title>{mode ? t(`skills.add.${mode}`) : t('skills.add.title')}</Dialog.Title>
+      <Dialog.Description>{t('skills.add.review_notice')}</Dialog.Description>
+    </Dialog.Header>
+    <div class="flex min-h-0 flex-col gap-4 overflow-y-auto">
+      {#if error}<p role="alert" class="text-destructive text-sm">{error}</p>{/if}
+      {#if mode === 'online'}
+        <form
+          onsubmit={(event) => {
+            event.preventDefault()
+            if (!busy && query.trim()) void search()
+          }}
+        >
+          <Field.Group>
+            <Field.Field>
+              <Field.Label for="skill-source-query">{t('skills.add.query')}</Field.Label>
+              <Input
+                id="skill-source-query"
+                bind:value={query}
+                placeholder={t('skills.add.query_hint')}
+                disabled={busy}
+              />
+            </Field.Field>
+            <Button type="submit" disabled={busy || !query.trim()}
+              ><Search data-icon="inline-start" />{t('skills.add.search')}</Button
+            >
+          </Field.Group>
+        </form>
+        <ul class="flex flex-col gap-2" aria-label={t('skills.add.results')}>
+          {#each candidates as candidate (candidate.url)}
+            <li class="flex items-start gap-3 rounded-md border p-3">
+              <div class="flex min-w-0 flex-1 flex-col gap-1">
+                <strong class="text-sm">{candidate.name}</strong>
+                <p class="text-muted-foreground text-xs">{candidate.description}</p>
+                <p class="text-muted-foreground break-all text-xs">{candidate.origin} · {candidate.url}</p>
+              </div>
+              <Button size="sm" variant="outline" disabled={busy} onclick={() => void prepare(candidate)}
+                >{t('skills.add.preview')}</Button
+              >
+            </li>
+          {/each}
+        </ul>
+      {:else if mode === 'system'}
+        <p class="text-muted-foreground text-sm">{t('skills.add.system_hint')}</p>
+        <div class="flex flex-wrap gap-2">
+          <Button variant="outline" disabled={busy} onclick={() => void scan(false)}>{t('skills.add.rescan')}</Button>
+          <Button variant="outline" disabled={busy} onclick={() => void scan(true)}
+            ><FolderSearch data-icon="inline-start" />{t('skills.add.pick_search_directory')}</Button
+          >
+        </div>
+        <ul class="flex flex-col gap-2" aria-label={t('skills.add.results')}>
+          {#each system as candidate (candidate.path)}
+            <li class="flex items-start gap-3 rounded-md border p-3">
+              <div class="flex min-w-0 flex-1 flex-col gap-1">
+                <strong class="text-sm">{candidate.name}</strong>
+                <p class="text-muted-foreground break-all text-xs">{candidate.origin} · {candidate.path}</p>
+              </div>
+              <Button size="sm" variant="outline" disabled={busy} onclick={() => void prepareSystem(candidate)}
+                >{t('skills.add.preview')}</Button
+              >
+            </li>
+          {/each}
+        </ul>
+      {:else if mode === 'local'}
+        <p class="text-muted-foreground text-sm">{t('skills.add.local_hint')}</p>
+        <div class="flex flex-wrap gap-2">
+          <Button disabled={busy} onclick={() => file?.click()}
+            ><Import data-icon="inline-start" />{t('skills.import')}</Button
+          >
+          <Button variant="outline" disabled={busy || !sources} onclick={() => void pickDirectory()}
+            ><FolderSearch data-icon="inline-start" />{t('skills.add.pick_directory')}</Button
+          >
+        </div>
+      {/if}
+      {#if busy}<p role="status" class="text-muted-foreground text-sm">{t('skills.add.working')}</p>{/if}
+      {#if !busy && searched && ((mode === 'online' && candidates.length === 0) || (mode === 'system' && system.length === 0))}
+        <p role="status" class="text-muted-foreground text-sm">{t('skills.add.no_results')}</p>
+      {/if}
+    </div>
+    <Dialog.Footer><Button variant="outline" onclick={close}>{t('common.cancel')}</Button></Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
+
+<SkillAuthoring
+  active={mode === 'agent'}
+  open={mode === 'agent' && preview === null}
+  onclose={close}
+  onprepared={async (prepared: PreparedSkill) => {
+    const id = generation
+    await showPreview(
+      prepared.source,
+      prepared.origin,
+      () => alive && generation === id && mode === 'agent',
+      prepared.ignored,
+    )
+  }}
+/>
+
+<SkillPreviewDialog
+  bind:open={
+    () => preview !== null,
+    (value) => {
+      if (!value) closePreview()
+    }
+  }
+  skill={preview}
+  title={t('skills.preview_title')}
+  current={preview?.current ?? null}
+  {busy}
+  {error}
+  {origin}
+  {ignored}
+  onconfirm={install}
+/>