@ouraihub/aether-ui 0.0.0-stage → 0.1.0

package/src/skills/SkillsSettings.svelte

@@ -0,0 +1,140 @@
+<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/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);
+}

package/src/tauri/index.ts

@@ -0,0 +1,282 @@
+// The only directory allowed to import @tauri-apps/* (ESLint enforces): createTauriPorts() (docs/16 §2).
+// Argument names are the camelCase of the Rust command parameters (docs/15 §5).
+import { Channel, invoke } from '@tauri-apps/api/core'
+import { KitClientError } from '../ports'
+import type {
+  DesktopActions,
+  KitError,
+  KitPorts,
+  LogsPort,
+  PreparedSkill,
+  RunAccepted,
+  RunEvent,
+  SearchPort,
+} from '../ports'
+
+/** Which feature ports the host enabled; the rest stay absent so their UI areas are hidden. */
+export interface TauriPortsOptions {
+  providers?: boolean
+  search?: boolean
+  chat?: boolean
+  /** Independent conversation storage capability (`aether:chat-history`). */
+  conversations?: boolean
+  skills?: boolean
+  /** Read-only discovery/pickers; generation additionally requires chat and providers. */
+  skillSources?: boolean
+  mcpClient?: boolean
+  mcpServer?: boolean
+}
+
+const CANCELLED: KitError = { code: 'cancelled', message: 'cancelled' }
+
+/** Invokes `plugin:aether|<command>` and turns any rejection into a KitClientError at the boundary. */
+async function call<T>(command: string, args: Record<string, unknown> = {}): Promise<T> {
+  try {
+    return await invoke<T>(`plugin:aether|${command}`, args)
+  } catch (error) {
+    const isKitError =
+      typeof error === 'object' &&
+      error !== null &&
+      typeof (error as Partial<KitError>).code === 'string' &&
+      typeof (error as Partial<KitError>).message === 'string'
+    throw new KitClientError(isKitError ? (error as KitError) : { code: 'internal', message: String(error) })
+  }
+}
+
+/** The plugin always registers the log commands, so desktop hosts always get `logs`. */
+export function createTauriPorts(
+  options: TauriPortsOptions = {},
+): KitPorts & { logs: LogsPort; desktop: DesktopActions } {
+  const ports: KitPorts & { logs: LogsPort; desktop: DesktopActions } = {
+    logs: {
+      tail: (limit) => call('logs_tail', { limit }),
+      ingest: (batch) => call('logs_ingest', { batch }),
+      getLevel: () => call('logs_get_level'),
+      setLevel: (level) => call('logs_set_level', { level }),
+    },
+    desktop: { openLogsDirectory: () => call('logs_open_dir') },
+  }
+  if (options.providers) {
+    ports.providers = {
+      list: () => call('providers_list'),
+      setEnabled: (id, enabled) => call('providers_set_enabled', { id, enabled }),
+      save: (input) => call('providers_save', { input }),
+      remove: (id) => call('providers_delete', { id }),
+      modelOptions: (filter = {}) => call('providers_model_options', { filter }),
+      // Aborting calls providers_cancel; the pending probe then rejects with `cancelled`.
+      probe: async (target, callOptions) => {
+        const signal = callOptions?.signal
+        if (signal?.aborted) throw new KitClientError(CANCELLED)
+        const jobId = crypto.randomUUID()
+        const cancel = () => void call('providers_cancel', { jobId }).catch(() => undefined)
+        signal?.addEventListener('abort', cancel, { once: true })
+        try {
+          return await call('providers_probe', { jobId, target })
+        } finally {
+          signal?.removeEventListener('abort', cancel)
+        }
+      },
+      revealNeedsPassword: false,
+      keyStrategies: false,
+      saveKey: (input) => call('providers_key_save', { input }),
+      removeKey: (endpointId, keyId) => call('providers_key_delete', { endpointId, keyId }),
+      revealKey: (keyId) => call('providers_key_reveal', { keyId }),
+    }
+  }
+  if (options.search) {
+    const searchCall = async <T>(
+      command: string,
+      args: Record<string, unknown> = {},
+      callOptions?: { signal?: AbortSignal },
+    ): Promise<T> => {
+      const signal = callOptions?.signal
+      if (signal?.aborted) throw new KitClientError(CANCELLED)
+      const jobId = crypto.randomUUID()
+      const cancel = () => void call('search_cancel', { jobId }).catch(() => undefined)
+      signal?.addEventListener('abort', cancel, { once: true })
+      try {
+        return await call<T>(command, { ...args, jobId })
+      } finally {
+        signal?.removeEventListener('abort', cancel)
+      }
+    }
+    const search: SearchPort = {
+      settings: (capability, o) => searchCall('search_settings', { capability }, o),
+      save: (input, o) => searchCall('search_save', { input }, o),
+      setDefault: (capability, provider, o) => searchCall('search_set_default', { capability, provider }, o),
+      savePreferences: (input, o) => searchCall('search_save_preferences', { input }, o),
+      saveKey: (capability, provider, value, keyId, o) =>
+        searchCall('search_save_key', { capability, provider, value, keyId: keyId ?? null }, o),
+      removeKey: (capability, provider, keyId, o) =>
+        searchCall('search_remove_key', { capability, provider, keyId }, o),
+      reveal: (capability, provider, keyId, currentPassword, o) =>
+        searchCall('search_reveal', { capability, provider, keyId, currentPassword: currentPassword ?? null }, o),
+      check: (capability, provider, o) => searchCall('search_check', { capability, provider }, o),
+      search: (query, o) => searchCall('search_query', { query }, o),
+      fetch: (url, o) => searchCall('search_fetch', { url }, o),
+    }
+    ports.search = search
+  }
+  if (options.chat) {
+    ports.chat = {
+      start: async (request, onEvent, callOptions) => {
+        const signal = callOptions?.signal
+        if (signal?.aborted) throw new KitClientError(CANCELLED)
+        let accepted: RunAccepted | null = null
+        let ended = false
+        let requested = false
+        let dispatched = false
+        const cleanup = () => signal?.removeEventListener('abort', cancel)
+        const dispatchCancel = () => {
+          if (!accepted || ended || dispatched) return
+          dispatched = true
+          void call('chat_cancel', { runId: accepted.runId }).catch(() => undefined)
+        }
+        const cancel = () => {
+          requested = true
+          dispatchCancel()
+        }
+        signal?.addEventListener('abort', cancel, { once: true })
+        const channel = new Channel<RunEvent>((event) => {
+          if (ended) return
+          if (event.kind === 'end') {
+            ended = true
+            cleanup()
+          }
+          onEvent(event)
+        })
+        try {
+          accepted = await call<RunAccepted>('chat_run', { request, onEvent: channel })
+          if (requested || signal?.aborted) dispatchCancel()
+          return accepted
+        } catch (error) {
+          ended = true
+          cleanup()
+          throw error
+        }
+      },
+      cancel: (runId) => call('chat_cancel', { runId }),
+      getSnapshot: (runId) => call('chat_snapshot', { runId }),
+      approve: async (runId, callId, allow) => {
+        await call('chat_approve', { runId, callId, allow })
+      },
+    }
+  }
+  if (options.conversations) {
+    ports.conversations = {
+      list: (scope) => call('chat_conversations', { scope: scope ?? null }),
+      get: (id) => call('chat_conversation', { id }),
+      remove: async (id) => {
+        await call('chat_delete', { id })
+      },
+      rename: (id, title) => call('chat_rename', { id, title }),
+      editTurn: (conversationId, turnId, text, expectedText) =>
+        call('chat_edit_turn', { conversationId, turnId, text, expectedText }),
+      removeTurn: (conversationId, turnId) => call('chat_remove_turn', { conversationId, turnId }),
+      fork: (conversationId, turnId) => call('chat_fork', { conversationId, turnId }),
+      selectTurn: (conversationId, turnId) => call('chat_select_turn', { conversationId, turnId }),
+    }
+  }
+  if (options.skills) {
+    ports.skills = {
+      list: () => call('skills_list'),
+      get: (id) => call('skills_get', { id }),
+      save: (input) => call('skills_save', { input }),
+      preview: (source) => call('skills_preview', { source }),
+      install: (source, confirmedDigest, replace) => call('skills_install', { source, confirmedDigest, replace }),
+      duplicate: (id, newName) => call('skills_duplicate', { id, newName }),
+      reorder: (ids) => call('skills_reorder', { ids }),
+      remove: (id) => call('skills_delete', { id }),
+    }
+  }
+  if (options.skillSources) {
+    const sourceCall = async <T>(
+      command: string,
+      args: Record<string, unknown>,
+      o?: { signal?: AbortSignal },
+    ): Promise<T> => {
+      if (o?.signal?.aborted) throw new KitClientError(CANCELLED)
+      const result = await call<T>(command, args)
+      if (o?.signal?.aborted) throw new KitClientError(CANCELLED)
+      return result
+    }
+    ports.skillSources = {
+      search: (query, o) => sourceCall('skills_source_search', { query }, o),
+      prepare: (url, o) => sourceCall('skills_source_prepare', { url }, o),
+      discover: (o) => sourceCall('skills_system_discover', {}, o),
+      prepareSystem: (path, o) => sourceCall('skills_system_prepare', { path }, o),
+      pickDirectory: (o) => sourceCall('skills_pick_directory', {}, o),
+      pickSearchDirectory: (o) => sourceCall('skills_pick_search_directory', {}, o),
+    }
+    if (options.chat && options.providers) {
+      ports.skillSources.authoring = {
+        create: (o) => sourceCall<string>('skills_authoring_create', {}, o),
+        send: async (sessionId, input, model, onEvent, o) => {
+          const signal = o?.signal
+          if (signal?.aborted) throw new KitClientError(CANCELLED)
+          let accepted: RunAccepted | null = null
+          let ended = false
+          const cancel = () => {
+            if (accepted && !ended)
+              void call('skills_authoring_cancel', { sessionId, runId: accepted.runId }).catch(() => undefined)
+          }
+          signal?.addEventListener('abort', cancel, { once: true })
+          const channel = new Channel<RunEvent>((event) => {
+            if (ended) return
+            if (event.kind === 'end') {
+              ended = true
+              signal?.removeEventListener('abort', cancel)
+            }
+            onEvent(event)
+          })
+          try {
+            accepted = await call<RunAccepted>('skills_authoring_send', { sessionId, input, model, onEvent: channel })
+            if (signal?.aborted) cancel()
+            return accepted
+          } catch (error) {
+            ended = true
+            signal?.removeEventListener('abort', cancel)
+            throw error
+          }
+        },
+        approve: async (sessionId, runId, callId, allow) => {
+          await call('skills_authoring_approve', { sessionId, runId, callId, allow })
+        },
+        cancel: async (sessionId, runId) => {
+          await call('skills_authoring_cancel', { sessionId, runId })
+        },
+        prepare: (sessionId, o) => sourceCall<PreparedSkill>('skills_authoring_prepare', { sessionId }, o),
+        close: async (sessionId) => {
+          await call('skills_authoring_close', { sessionId })
+        },
+      }
+    }
+  }
+  if (options.mcpClient) {
+    ports.mcpClient = {
+      list: () => call('mcp_client_list'),
+      save: (input) => call('mcp_client_save', { input }),
+      remove: (id) => call('mcp_client_delete', { id }),
+      refresh: (serverId) => call('mcp_client_refresh', { serverId }),
+      setToolApproval: async (serverId, tool, approval) => {
+        await call('mcp_client_set_tool_approval', { serverId, tool, approval })
+      },
+    }
+  }
+  if (options.mcpServer) {
+    ports.mcpServer = {
+      status: () => call('mcp_server_status'),
+      tokens: () => call('mcp_server_tokens'),
+      start: () => call('mcp_server_start'),
+      stop: () => call('mcp_server_stop'),
+      setPort: (port) => call('mcp_server_set_port', { port }),
+      issueToken: (name, scopes) => call('mcp_server_issue_token', { name, scopes }),
+      revokeToken: async (id) => {
+        await call('mcp_server_revoke_token', { id })
+      },
+      scopes: () => call('mcp_server_scopes'),
+      setScopes: (ids) => call('mcp_server_set_scopes', { ids }),
+    }
+  }
+  return ports
+}

package/src/utils.ts

@@ -0,0 +1,22 @@
+import { createCn } from 'cn/config'
+import { createTV } from 'tailwind-variants'
+export type { VariantProps } from 'tailwind-variants'
+
+const twMergeConfig = {
+  extend: {
+    theme: {
+      text: ['kit-xs', 'kit-sm', 'kit-base', 'kit-lg'],
+      spacing: ['kit-control', 'kit-control-sm'],
+      radius: ['kit', 'kit-sm'],
+    },
+  },
+}
+export const cn = createCn(twMergeConfig)
+export const tv = createTV({ twMergeConfig })
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null }