@ouraihub/aether-ui 0.0.0-stage → 0.1.1

package/src/skills/SkillsSettings.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  // Skill list, import → full-text preview → confirm, view, edit, duplicate, reorder, delete (docs/16 §4.3).
+  import { Button } from '#lib/components/ui/button/index.js'
+  import * as Empty from '#lib/components/ui/empty/index.js'
+  import { getKitContext } from '../context'
+  import type { SkillDto, SkillMeta } from '../ports'
+  import { errorText } from './error'
+  import SkillEditor from './SkillEditor.svelte'
+  import SkillPreviewDialog from './SkillPreviewDialog.svelte'
+  import SkillAdd from './SkillAdd.svelte'
+
+  const { ports, i18n, notify } = getKitContext()
+  const { t } = i18n
+  const port = ports.skills
+
+  let skills = $state<SkillMeta[]>([])
+  let busy = $state(false)
+  let viewing = $state<SkillDto | null>(null)
+  let viewOpen = $state(false)
+  let editing = $state<SkillDto | null>(null)
+  let editOpen = $state(false)
+
+  async function act(run: () => Promise<void>) {
+    busy = true
+    try {
+      await run()
+    } catch (error) {
+      notify.toast('error', errorText(t, error))
+    } finally {
+      busy = false
+    }
+  }
+
+  if (port) void act(async () => void (skills = await port.list()))
+
+  function view(id: string) {
+    if (!port) return
+    void act(async () => {
+      viewing = await port.get(id)
+      viewOpen = true
+    })
+  }
+
+  function edit(id: string | null) {
+    if (!port) return
+    void act(async () => {
+      editing = id === null ? null : await port.get(id)
+      editOpen = true
+    })
+  }
+
+  function duplicate(skill: SkillMeta) {
+    if (!port) return
+    void act(async () => void (skills = await port.duplicate(skill.id, `${skill.name}-copy`)))
+  }
+
+  function move(index: number, by: number) {
+    if (!port) return
+    const ids = skills.map((s) => s.id)
+    const [id] = ids.splice(index, 1)
+    if (id === undefined) return
+    ids.splice(index + by, 0, id)
+    void act(async () => void (skills = await port.reorder(ids)))
+  }
+
+  async function remove(skill: SkillMeta) {
+    if (!port) return
+    const ok = await notify.confirm({
+      title: t('skills.delete'),
+      body: t('skills.delete_confirm', { name: skill.name }),
+      danger: true,
+    })
+    if (ok) void act(async () => void (skills = await port.remove(skill.id)))
+  }
+</script>
+
+{#if port}
+  <section class="flex flex-col gap-4" aria-label={t('skills.title')}>
+    <SkillAdd disabled={busy} oninstalled={(next) => (skills = next)} onmanual={() => edit(null)} />
+    {#if skills.length === 0}
+      <Empty.Root>
+        <Empty.Header>
+          <Empty.Title>{t('skills.empty')}</Empty.Title>
+          <Empty.Description>{t('skills.empty_hint')}</Empty.Description>
+        </Empty.Header>
+      </Empty.Root>
+    {:else}
+      <ul class="flex flex-col gap-2" aria-label={t('skills.list')}>
+        {#each skills as skill, index (skill.id)}
+          <li class="flex items-center gap-3 rounded-md border p-3">
+            <div class="flex min-w-0 flex-1 flex-col">
+              <span class="flex min-w-0 items-center gap-2">
+                <span class="truncate font-mono text-sm">{skill.name}</span>
+                {#if skill.hasScripts}
+                  <span class="shrink-0 rounded border px-1.5 text-xs"
+                    >{t('skills.has_scripts')}</span
+                  >
+                {/if}
+              </span>
+              <span class="text-muted-foreground truncate text-xs">
+                {skill.version ?? t('skills.unversioned')} · {t(`skills.origin.${skill.origin}`)} ·
+                {t('skills.revision', { revision: skill.revision })} · {t('skills.chars', {
+                  count: skill.bodyChars,
+                })}
+                {#if skill.fileCount > 0}· {t('skills.file_count', { count: skill.fileCount })}{/if}
+              </span>
+            </div>
+            <Button
+              size="sm"
+              variant="ghost"
+              disabled={busy || index === 0}
+              aria-label={t('skills.up', { name: skill.name })}
+              onclick={() => move(index, -1)}>↑</Button
+            >
+            <Button
+              size="sm"
+              variant="ghost"
+              disabled={busy || index === skills.length - 1}
+              aria-label={t('skills.down', { name: skill.name })}
+              onclick={() => move(index, 1)}>↓</Button
+            >
+            <Button size="sm" variant="outline" disabled={busy} onclick={() => view(skill.id)}
+              >{t('skills.view')}</Button
+            >
+            {#if skill.origin === 'builtin'}
+              <Button size="sm" variant="outline" disabled={busy} onclick={() => duplicate(skill)}
+                >{t('skills.duplicate')}</Button
+              >
+            {:else}
+              <Button size="sm" variant="outline" disabled={busy} onclick={() => edit(skill.id)}
+                >{t('skills.edit')}</Button
+              >
+              <Button
+                size="sm"
+                variant="destructive"
+                disabled={busy}
+                onclick={() => void remove(skill)}>{t('skills.delete')}</Button
+              >
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </section>
+  <SkillPreviewDialog bind:open={viewOpen} skill={viewing} title={viewing?.name ?? ''} />
+  <SkillEditor bind:open={editOpen} {port} skill={editing} onsaved={(next) => (skills = next)} />
+{/if}

package/src/skills/error.ts

@@ -0,0 +1,32 @@
+// Error text for skill commands: the docs/14 reasons the user can act on, else the generic code text.
+import { isKitClientError } from '../ports'
+import type { KitI18n } from '../i18n'
+
+export function errorText(t: KitI18n['t'], error: unknown): string {
+  if (!isKitClientError(error)) return t('errors.internal')
+  const { reason, field, limit } = error.details
+  switch (reason) {
+    case 'exists':
+      return t('skills.err.exists')
+    case 'builtin_name':
+      return t('skills.err.builtin_name')
+    case 'revision_changed':
+      return t('skills.err.revision_changed')
+    case 'secret_detected':
+      return t('skills.err.secret_detected', { field: field ?? '' })
+    case 'unsupported_files':
+      return t('skills.err.unsupported_files', { field: field ?? '' })
+    case 'too_large':
+      return t('skills.err.too_large', { field: field ?? '', limit: limit ?? '' })
+    case 'frontmatter_unsupported':
+      return t('skills.err.frontmatter', { field: field ?? '' })
+    case 'invalid_name':
+      return t('skills.err.invalid_name', { field: field ?? '' })
+    case 'too_deep':
+      return t('skills.err.too_deep', { field: field ?? '', limit: limit ?? '' })
+    case 'not_utf8':
+      return t('skills.err.not_utf8', { field: field ?? '' })
+    default:
+      return field ? `${t(`errors.${error.code}`)} (${field})` : t(`errors.${error.code}`)
+  }
+}

package/src/skills/index.ts

@@ -0,0 +1,4 @@
+// SkillsSettings, SkillPreviewDialog, SkillEditor (docs/16 §4.3). SkillPicker lives in ChatPanel.
+export { default as SkillEditor } from './SkillEditor.svelte'
+export { default as SkillPreviewDialog } from './SkillPreviewDialog.svelte'
+export { default as SkillsSettings } from './SkillsSettings.svelte'

package/src/skills/test-support/skills-fixture.ts

@@ -0,0 +1,139 @@
+import { render, screen, fireEvent } from '@testing-library/svelte'
+import { createI18n } from '../../i18n'
+import {
+  createFakePorts,
+  type FakePortsOptions,
+  type Preview,
+  type RunEvent,
+  type SkillAuthoringPort,
+  type SkillDto,
+  type SkillMeta,
+  type Source,
+} from '../../ports'
+import { vi } from 'vitest'
+import Harness from '../Harness.test.svelte'
+
+export const meta = (
+  revision: number,
+  files: Pick<SkillMeta, 'hasScripts' | 'fileCount'> = { hasScripts: false, fileCount: 0 },
+): SkillMeta => ({
+  id: 's1',
+  name: 'writer',
+  description: 'Writes',
+  version: null,
+  origin: 'imported',
+  revision,
+  bodyChars: 4,
+  updatedAt: 0,
+  ...files,
+})
+
+export const preview = (body: string): Preview => ({
+  digest: `d-${body}`,
+  name: 'writer',
+  description: 'Writes',
+  version: '1.0.0',
+  body,
+  license: null,
+  extra: {},
+  files: [],
+  action: 'install',
+  current: null,
+})
+
+export function mount(options: FakePortsOptions, skills?: { id: string; revision: number }[]) {
+  const ports = createFakePorts({
+    providers: {
+      modelOptions: () =>
+        Promise.resolve([
+          {
+            endpointId: 'e1',
+            modelId: 'm1',
+            label: 'm1',
+            name: null,
+            modelType: 'chat',
+            supportsTools: null,
+            reasoning: null,
+            nativeWebSearch: false,
+            canVision: false,
+          },
+        ]),
+    },
+    ...options,
+  })
+  const notify = { toast: vi.fn(), confirm: () => Promise.resolve(true) }
+  const logger = { debug: vi.fn(), info: vi.fn(), warn: vi.fn(), error: vi.fn() }
+  const view = render(Harness, {
+    kit: { ports, i18n: createI18n('en'), notify, logger },
+    ...(skills ? { skills } : {}),
+  })
+  return { ...notify, unmount: view.unmount }
+}
+
+export async function addFrom(name: string) {
+  await fireEvent.click(screen.getByRole('button', { name: 'Add skill' }))
+  await fireEvent.click(await screen.findByRole('menuitem', { name }))
+}
+
+export async function selectAuthoringModel() {
+  await fireEvent.click(await screen.findByLabelText('Select a model'))
+  await fireEvent.click(await screen.findByRole('option', { name: /m1/ }))
+}
+
+export const creator: SkillDto = {
+  ...meta(1),
+  id: 'builtin-creator',
+  name: 'skill-creator',
+  origin: 'builtin',
+  body: 'Complete creator instructions: capture intent, draft, evaluate, improve, package.',
+  license: null,
+  extra: {},
+  files: [{ path: 'scripts/quick_validate.py', kind: 'script', size: 10 }],
+}
+
+export function authoring(overrides: Partial<SkillAuthoringPort> = {}): SkillAuthoringPort {
+  return {
+    create: vi.fn(async () => 'authoring-1'),
+    send: vi.fn<SkillAuthoringPort['send']>(async (_session, _input, _model, emit) => {
+      emit({ kind: 'end', status: 'completed' })
+      return { runId: 'authoring-run', conversationId: null, turnId: null }
+    }),
+    approve: vi.fn(async () => {}),
+    cancel: vi.fn(async () => {}),
+    prepare: vi.fn(async () => ({
+      source: { bytes: { fileName: 'writer.zip', bytes: [1] } },
+      origin: 'Authoring workspace',
+    })),
+    close: vi.fn(async () => {}),
+    ...overrides,
+  }
+}
+
+export function mountAuthoring(api: SkillAuthoringPort, options: FakePortsOptions = {}) {
+  return mount({
+    ...options,
+    skillSources: { ...options.skillSources, authoring: api },
+    skills: {
+      list: async () => [creator],
+      get: async () => creator,
+      ...options.skills,
+    },
+  })
+}
+
+export async function startAuthoring() {
+  await addFrom('Create with Agent')
+  await fireEvent.click(await screen.findByRole('button', { name: 'Review skill-creator' }))
+  await screen.findByText(creator.body)
+  await fireEvent.click(screen.getByRole('button', { name: 'Confirm skill-creator and start' }))
+  await screen.findByLabelText('Message to the skill creation assistant')
+}
+
+export async function authorMessage(text: string) {
+  await fireEvent.input(screen.getByLabelText('Message to the skill creation assistant'), {
+    target: { value: text },
+  })
+  await fireEvent.click(screen.getByRole('button', { name: /^Send$/ }))
+}
+
+export type { Preview, RunEvent, SkillAuthoringPort, Source }

package/src/styles/kit.css

@@ -0,0 +1,137 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import 'shadcn-svelte/tailwind.css';
+@import './tokens.css';
+/* Generated by shadcn-svelte init; font import removed (fonts belong to the host). Hosts without shadcn import this file (docs/16 §3). */
+@source "../";
+
+@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
+
+:root {
+  --background: oklch(0.995 0.002 265);
+  --foreground: oklch(0.21 0.01 265);
+  --card: oklch(0.995 0.002 265);
+  --card-foreground: oklch(0.21 0.01 265);
+  --popover: oklch(0.995 0.002 265);
+  --popover-foreground: oklch(0.21 0.01 265);
+  --primary: oklch(0.25 0.012 265);
+  --primary-foreground: oklch(0.985 0.002 265);
+  --secondary: oklch(0.965 0.004 265);
+  --secondary-foreground: oklch(0.25 0.012 265);
+  --muted: oklch(0.965 0.004 265);
+  --muted-foreground: oklch(0.5 0.01 265);
+  --accent: oklch(0.965 0.004 265);
+  --accent-foreground: oklch(0.25 0.012 265);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.915 0.005 265);
+  --input: oklch(0.915 0.005 265);
+  --ring: oklch(0.7 0.01 265);
+  --chart-1: oklch(0.87 0.005 265);
+  --chart-2: oklch(0.556 0.01 265);
+  --chart-3: oklch(0.439 0.01 265);
+  --chart-4: oklch(0.371 0.01 265);
+  --chart-5: oklch(0.269 0.01 265);
+  --success: oklch(0.6 0.15 150);
+  --warning: oklch(0.7 0.15 75);
+  --info: oklch(0.58 0.14 250);
+  --radius: var(--kit-radius);
+  --sidebar: oklch(0.98 0.003 265);
+  --sidebar-foreground: oklch(0.21 0.01 265);
+  --sidebar-primary: oklch(0.25 0.012 265);
+  --sidebar-primary-foreground: oklch(0.985 0.002 265);
+  --sidebar-accent: oklch(0.965 0.004 265);
+  --sidebar-accent-foreground: oklch(0.25 0.012 265);
+  --sidebar-border: oklch(0.915 0.005 265);
+  --sidebar-ring: oklch(0.7 0.01 265);
+}
+
+.dark,
+[data-theme='dark'] {
+  --background: oklch(0.17 0.008 265);
+  --foreground: oklch(0.93 0.004 265);
+  --card: oklch(0.215 0.01 265);
+  --card-foreground: oklch(0.93 0.004 265);
+  --popover: oklch(0.215 0.01 265);
+  --popover-foreground: oklch(0.93 0.004 265);
+  --primary: oklch(0.9 0.006 265);
+  --primary-foreground: oklch(0.21 0.01 265);
+  --secondary: oklch(0.27 0.011 265);
+  --secondary-foreground: oklch(0.93 0.004 265);
+  --muted: oklch(0.27 0.011 265);
+  --muted-foreground: oklch(0.7 0.008 265);
+  --accent: oklch(0.27 0.011 265);
+  --accent-foreground: oklch(0.93 0.004 265);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0.01 265);
+  --chart-1: oklch(0.87 0.005 265);
+  --chart-2: oklch(0.556 0.01 265);
+  --chart-3: oklch(0.439 0.01 265);
+  --chart-4: oklch(0.371 0.01 265);
+  --chart-5: oklch(0.269 0.01 265);
+  --sidebar: oklch(0.215 0.01 265);
+  --sidebar-foreground: oklch(0.93 0.004 265);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.002 265);
+  --sidebar-accent: oklch(0.27 0.011 265);
+  --sidebar-accent-foreground: oklch(0.93 0.004 265);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0.01 265);
+  --success: oklch(0.72 0.15 150);
+  --warning: oklch(0.8 0.15 80);
+  --info: oklch(0.72 0.13 250);
+}
+
+@theme static inline {
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,22 @@
+/* Size tokens and their Tailwind utilities (docs/16 §3). Hosts with their own Tailwind entry import this after tailwindcss and override the --kit-* values. */
+:root {
+  --kit-text-xs: 11.5px;
+  --kit-text-sm: 12px;
+  --kit-text-base: 13px;
+  --kit-text-lg: 13.5px;
+  --kit-control-h: 30px;
+  --kit-control-h-sm: 28px;
+  --kit-radius: 8px;
+  --kit-radius-sm: 6px;
+}
+
+@theme inline {
+  --text-kit-xs: var(--kit-text-xs);
+  --text-kit-sm: var(--kit-text-sm);
+  --text-kit-base: var(--kit-text-base);
+  --text-kit-lg: var(--kit-text-lg);
+  --spacing-kit-control: var(--kit-control-h);
+  --spacing-kit-control-sm: var(--kit-control-h-sm);
+  --radius-kit: var(--kit-radius);
+  --radius-kit-sm: var(--kit-radius-sm);
+}