@ouraihub/aether-ui 0.1.0 → 0.1.2

package/src/mcp/McpClientSettings.svelte

@@ -6,14 +6,11 @@
   import { onDestroy } from 'svelte'
   import { Alert, AlertDescription } from '#lib/components/ui/alert/index.js'
   import { Button } from '#lib/components/ui/button/index.js'
-  import * as Dialog from '#lib/components/ui/dialog/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 CopyInput from '../CopyInput.svelte'
   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 McpClientEditor from './McpClientEditor.svelte'
   import { getKitContext } from '../context'
   import { isKitClientError } from '../ports'
   import type { Approval, McpTransport, ServerDto, ServerSave } from '../ports'
@@ -21,8 +18,6 @@
   import { mapMcpInput } from './input'
 
   const APPROVALS: Approval[] = ['auto', 'ask', 'deny']
-  const KINDS: McpTransport['kind'][] = ['http', 'stdio']
-  const ARGS_PLACEHOLDER = '-y\n@modelcontextprotocol/server-filesystem'
 
   const { ports, i18n, notify, logger } = getKitContext()
   const client = ports.mcpClient
@@ -130,7 +125,9 @@
 
   /** One-line location shown in the list: the URL, or the command line. */
   function location(transport: McpTransport): string {
-    return transport.kind === 'http' ? transport.url : [transport.command, ...transport.args].join(' ')
+    return transport.kind === 'http'
+      ? transport.url
+      : [transport.command, ...transport.args].join(' ')
   }
 
   const update = (next: ServerSave) => act(async () => void (servers = await need().save(next)))
@@ -277,7 +274,9 @@
                 >{server.name} <span class="text-muted-foreground">({server.slug})</span></span
               >
               <span class="text-muted-foreground truncate font-mono text-xs"
-                >{t(`mcp.client.transport.${server.transport.kind}`)} · {location(server.transport)}</span
+                >{t(`mcp.client.transport.${server.transport.kind}`)} · {location(
+                  server.transport,
+                )}</span
               >
               {#if server.secretKeys.length}
                 <span class="text-muted-foreground text-xs">
@@ -291,7 +290,12 @@
             <Button size="sm" variant="outline" disabled={busy} onclick={() => edit(server)}>
               {t('mcp.client.edit')}
             </Button>
-            <Button size="sm" variant="destructive" disabled={busy} onclick={() => void remove(server)}>
+            <Button
+              size="sm"
+              variant="destructive"
+              disabled={busy}
+              onclick={() => void remove(server)}
+            >
               {t('mcp.client.delete')}
             </Button>
           </div>
@@ -303,7 +307,9 @@
                 disabled={busy}
                 onCheckedChange={(on) => void update({ ...base(server), enabled: on })}
               />
-              <Field.Label for={`kit-mcp-enabled-${server.id}`}>{t('mcp.client.enabled')}</Field.Label>
+              <Field.Label for={`kit-mcp-enabled-${server.id}`}
+                >{t('mcp.client.enabled')}</Field.Label
+              >
             </Field.Field>
             <Field.Field orientation="horizontal" class="w-auto">
               <Switch
@@ -312,7 +318,9 @@
                 disabled={busy}
                 onCheckedChange={(on) => void setTrusted(server, on)}
               />
-              <Field.Label for={`kit-mcp-trusted-${server.id}`}>{t('mcp.client.trusted')}</Field.Label>
+              <Field.Label for={`kit-mcp-trusted-${server.id}`}
+                >{t('mcp.client.trusted')}</Field.Label
+              >
             </Field.Field>
             {#if server.transport.kind === 'http'}
               <Field.Field orientation="horizontal" class="w-auto">
@@ -322,13 +330,19 @@
                   disabled={busy}
                   onCheckedChange={(on) => void setPrivate(server, on)}
                 />
-                <Field.Label for={`kit-mcp-private-${server.id}`}>{t('mcp.client.allowPrivate')}</Field.Label>
+                <Field.Label for={`kit-mcp-private-${server.id}`}
+                  >{t('mcp.client.allowPrivate')}</Field.Label
+                >
               </Field.Field>
             {/if}
           </div>
           {#if testErrors[server.id]}
             <Alert variant="destructive">
-              <AlertDescription>{t('mcp.client.testFailed', { error: testErrors[server.id] ?? '' })}</AlertDescription>
+              <AlertDescription
+                >{t('mcp.client.testFailed', {
+                  error: testErrors[server.id] ?? '',
+                })}</AlertDescription
+              >
             </Alert>
           {/if}
           {#if server.tools.length}
@@ -345,7 +359,8 @@
                   <Select.Root
                     type="single"
                     value={tool.approval}
-                    onValueChange={(value) => void setApproval(server, tool.name, value as Approval)}
+                    onValueChange={(value) =>
+                      void setApproval(server, tool.name, value as Approval)}
                   >
                     <Select.Trigger
                       size="sm"
@@ -357,7 +372,10 @@
                     <Select.Content>
                       <Select.Group>
                         {#each APPROVALS as approval (approval)}
-                          <Select.Item value={approval} label={t(`mcp.client.approval.${approval}`)} />
+                          <Select.Item
+                            value={approval}
+                            label={t(`mcp.client.approval.${approval}`)}
+                          />
                         {/each}
                       </Select.Group>
                     </Select.Content>
@@ -373,119 +391,28 @@
     </ul>
   </section>
 
-  <Dialog.Root
-    open={editing}
-    onOpenChange={(open) => {
-      if (!open) closeEditor()
-    }}
-  >
-    <Dialog.Content class="sm:max-w-xl" oninput={() => editRevision++}>
-      <Dialog.Header>
-        <Dialog.Title>{editId ? t('mcp.client.editTitle') : t('mcp.client.add')}</Dialog.Title>
-      </Dialog.Header>
-      <Field.Group>
-        <div class="flex gap-3">
-          <Field.Field class="flex-1">
-            <Field.Label for="kit-mcp-name">{t('mcp.client.name')}</Field.Label>
-            <Input id="kit-mcp-name" maxlength={200} bind:value={name} />
-          </Field.Field>
-          <Field.Field class="w-40">
-            <Field.Label for="kit-mcp-slug">{t('mcp.client.slug')}</Field.Label>
-            <Input id="kit-mcp-slug" class="font-mono" maxlength={24} bind:value={slug} />
-          </Field.Field>
-        </div>
-        <Field.Field>
-          <Field.Label for="kit-mcp-transport">{t('mcp.client.transport')}</Field.Label>
-          <Select.Root type="single" value={kind} onValueChange={(value) => changeKind(value as McpTransport['kind'])}>
-            <Select.Trigger id="kit-mcp-transport" class="w-full">
-              {t(`mcp.client.transport.${kind}`)}
-            </Select.Trigger>
-            <Select.Content>
-              <Select.Group>
-                {#each KINDS as option (option)}
-                  <Select.Item value={option} label={t(`mcp.client.transport.${option}`)} />
-                {/each}
-              </Select.Group>
-            </Select.Content>
-          </Select.Root>
-        </Field.Field>
-        {#if kind === 'http'}
-          <Field.Field>
-            <Field.Label for="kit-mcp-url">{t('mcp.client.url')}</Field.Label>
-            <CopyInput id="kit-mcp-url" class="font-mono" placeholder="https://example.com/mcp" bind:value={url} />
-            <Field.Description>{t('mcp.client.urlHint')}</Field.Description>
-          </Field.Field>
-        {:else}
-          <Field.Field>
-            <Field.Label for="kit-mcp-command">{t('mcp.client.command')}</Field.Label>
-            <Input id="kit-mcp-command" class="font-mono" maxlength={1024} placeholder="npx" bind:value={command} />
-          </Field.Field>
-          <Field.Field>
-            <Field.Label for="kit-mcp-args">{t('mcp.client.args')}</Field.Label>
-            <Textarea id="kit-mcp-args" class="font-mono text-xs" placeholder={ARGS_PLACEHOLDER} bind:value={args} />
-            <Field.Description>{t('mcp.client.argsHint')}</Field.Description>
-          </Field.Field>
-          <Field.Field>
-            <Field.Label for="kit-mcp-cwd">{t('mcp.client.cwd')}</Field.Label>
-            <Input id="kit-mcp-cwd" class="font-mono" bind:value={cwd} />
-            <Field.Description>{t('mcp.client.cwdHint')}</Field.Description>
-          </Field.Field>
-        {/if}
-        {#if editId}
-          <Field.Field orientation="horizontal">
-            <Switch id="kit-mcp-replace" checked={replaceSecret} onCheckedChange={changeReplacement} />
-            <Field.Label for="kit-mcp-replace">
-              {t('mcp.client.replaceSecret', { keys: currentKeys.join(', ') || '—' })}
-            </Field.Label>
-          </Field.Field>
-        {/if}
-        {#if replaceSecret && kind === 'http'}
-          <Field.Field>
-            <Field.Label for="kit-mcp-headers">{t('mcp.client.headers')}</Field.Label>
-            <Textarea
-              id="kit-mcp-headers"
-              class="font-mono text-xs"
-              placeholder="Authorization: Bearer …"
-              bind:value={headers}
-              oninput={() => secretRevision++}
-            />
-          </Field.Field>
-          <Field.Field>
-            <Field.Label for="kit-mcp-query">{t('mcp.client.query')}</Field.Label>
-            <Textarea
-              id="kit-mcp-query"
-              class="font-mono text-xs"
-              placeholder="ak=…"
-              bind:value={query}
-              oninput={() => secretRevision++}
-            />
-            <Field.Description>{t('mcp.client.secretHint')}</Field.Description>
-          </Field.Field>
-        {:else if replaceSecret}
-          <Field.Field>
-            <Field.Label for="kit-mcp-env">{t('mcp.client.env')}</Field.Label>
-            <Textarea
-              id="kit-mcp-env"
-              class="font-mono text-xs"
-              placeholder="GITHUB_TOKEN=…"
-              bind:value={env}
-              oninput={() => secretRevision++}
-            />
-            <Field.Description>{t('mcp.client.envHint')}</Field.Description>
-          </Field.Field>
-        {/if}
-      </Field.Group>
-      <Dialog.Footer>
-        <Button variant="outline" onclick={closeEditor}>{t('common.cancel')}</Button>
-        <Button
-          disabled={busy ||
-            editorSaving ||
-            !name.trim() ||
-            !slug.trim() ||
-            !(kind === 'http' ? url.trim() : command.trim())}
-          onclick={save}>{t('mcp.client.save')}</Button
-        >
-      </Dialog.Footer>
-    </Dialog.Content>
-  </Dialog.Root>
+  <McpClientEditor
+    bind:open={editing}
+    {editId}
+    bind:name
+    bind:slug
+    bind:kind
+    bind:url
+    bind:command
+    bind:args
+    bind:cwd
+    bind:replaceSecret
+    bind:headers
+    bind:query
+    bind:env
+    {currentKeys}
+    {editorSaving}
+    {busy}
+    onclose={closeEditor}
+    onsave={save}
+    onchangeKind={changeKind}
+    onchangeReplacement={changeReplacement}
+    oninputRevision={() => editRevision++}
+    onsecretInput={() => secretRevision++}
+  />
 {/if}

package/src/mcp/McpServerSettings.svelte

@@ -101,7 +101,11 @@
 
   async function load() {
     if (!server) return
-    const [nextStatus, nextScopes, nextTokens] = await Promise.all([server.status(), server.scopes(), server.tokens()])
+    const [nextStatus, nextScopes, nextTokens] = await Promise.all([
+      server.status(),
+      server.scopes(),
+      server.tokens(),
+    ])
     setStatus(nextStatus)
     scopes = nextScopes
     tokens = nextTokens
@@ -111,7 +115,8 @@
     void act(load)
   })
 
-  const toggleRunning = () => act(async () => setStatus(status?.running ? await need().stop() : await need().start()))
+  const toggleRunning = () =>
+    act(async () => setStatus(status?.running ? await need().stop() : await need().start()))
 
   const savePort = () => act(async () => setStatus(await need().setPort(Number(port))))
 
@@ -143,7 +148,8 @@
     const revision = tokenRevision
     const name = tokenName
     const grants = [...tokenScopes]
-    const current = () => tokenSession.isCurrent(token) && targetName === serverName && targetUrl === status?.url
+    const current = () =>
+      tokenSession.isCurrent(token) && targetName === serverName && targetUrl === status?.url
     issuing = true
     try {
       const next = await need().issueToken(name, grants)
@@ -204,7 +210,9 @@
         <Field.Content>
           <Field.Label>{t('mcp.server.title')}</Field.Label>
           <Field.Description>
-            {status.running ? t('mcp.server.running', { url: status.url }) : t('mcp.server.stopped')}
+            {status.running
+              ? t('mcp.server.running', { url: status.url })
+              : t('mcp.server.stopped')}
             · {t('mcp.server.toolCount', { count: status.toolCount })}
           </Field.Description>
         </Field.Content>
@@ -218,7 +226,14 @@
       </Field.Field>
       <Field.Field orientation="horizontal">
         <Field.Label for="kit-mcp-port">{t('mcp.server.port')}</Field.Label>
-        <Input id="kit-mcp-port" class="w-32" type="number" min="1024" max="65535" bind:value={port} />
+        <Input
+          id="kit-mcp-port"
+          class="w-32"
+          type="number"
+          min="1024"
+          max="65535"
+          bind:value={port}
+        />
         <Button
           disabled={busy || issuing || port === String(status.port)}
           variant="outline"
@@ -240,7 +255,9 @@
               bind:checked={() => scope.enabled, (on) => void toggleScope(scope, on)}
               disabled={busy || issuing}
             />
-            <Field.Label for={`kit-mcp-scope-${scope.id}`}>{t(scope.labelKey)} ({scope.id})</Field.Label>
+            <Field.Label for={`kit-mcp-scope-${scope.id}`}
+              >{t(scope.labelKey)} ({scope.id})</Field.Label
+            >
           </Field.Field>
         {/each}
       </Field.Group>
@@ -251,7 +268,12 @@
       <Field.Group>
         <Field.Field>
           <Field.Label for="kit-mcp-token-name">{t('mcp.server.tokenName')}</Field.Label>
-          <Input id="kit-mcp-token-name" bind:value={tokenName} maxlength={200} oninput={() => tokenRevision++} />
+          <Input
+            id="kit-mcp-token-name"
+            bind:value={tokenName}
+            maxlength={200}
+            oninput={() => tokenRevision++}
+          />
         </Field.Field>
         {#each scopes as scope (scope.id)}
           <Field.Field orientation="horizontal">
@@ -260,7 +282,9 @@
               checked={tokenScopes.includes(scope.id)}
               onCheckedChange={(on) => toggleTokenScope(scope.id, on)}
             />
-            <Field.Label for={`kit-mcp-grant-${scope.id}`}>{t(scope.labelKey)} ({scope.id})</Field.Label>
+            <Field.Label for={`kit-mcp-grant-${scope.id}`}
+              >{t(scope.labelKey)} ({scope.id})</Field.Label
+            >
           </Field.Field>
         {/each}
         <Field.Field orientation="horizontal">
@@ -289,10 +313,17 @@
             >
               {t('mcp.server.copyClaude')}
             </Button>
-            <Button size="sm" variant="outline" disabled={!configInput} onclick={() => void copy('json')}>
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={!configInput}
+              onclick={() => void copy('json')}
+            >
               {t('mcp.server.copyJson')}
             </Button>
-            <Button size="sm" variant="ghost" onclick={clearIssued}>{t('mcp.server.dismiss')}</Button>
+            <Button size="sm" variant="ghost" onclick={clearIssued}
+              >{t('mcp.server.dismiss')}</Button
+            >
           </div>
         </AlertDescription>
       </Alert>
@@ -313,7 +344,12 @@
               </span>
             </div>
             {#if token.revokedAt === null}
-              <Button size="sm" variant="destructive" disabled={busy || issuing} onclick={() => void revoke(token)}>
+              <Button
+                size="sm"
+                variant="destructive"
+                disabled={busy || issuing}
+                onclick={() => void revoke(token)}
+              >
                 {t('mcp.server.revoke')}
               </Button>
             {:else}

package/src/mcp/input.ts

@@ -15,7 +15,8 @@ export interface McpInput {
   env: string
 }
 
-export type McpInputResult = { ok: true; value: ServerSave } | { ok: false; error: 'secretLine' | 'transportChanged' }
+export type McpInputResult =
+  { ok: true; value: ServerSave } | { ok: false; error: 'secretLine' | 'transportChanged' }
 
 /** Split only at the first separator; values may themselves contain separators. */
 function pairs(text: string, separator: string): Record<string, string> | null {

package/src/ports/contract.ts

@@ -86,7 +86,12 @@ export interface ConversationClient {
   get(id: string): Promise<Conversation>
   remove(id: string): Promise<void>
   rename(id: string, title: string): Promise<ConversationSummary>
-  editTurn(conversationId: string, turnId: string, text: string, expectedText: string): Promise<Conversation>
+  editTurn(
+    conversationId: string,
+    turnId: string,
+    text: string,
+    expectedText: string,
+  ): Promise<Conversation>
   removeTurn(conversationId: string, turnId: string): Promise<Conversation>
   fork(conversationId: string, turnId: string): Promise<Conversation>
   selectTurn(conversationId: string, turnId: string): Promise<Conversation>
@@ -94,7 +99,11 @@ export interface ConversationClient {
 
 export interface RunClient {
   /** Resolves once accepted; events may arrive before acceptance. */
-  start(request: RunRequest, onEvent: (event: RunEvent) => void, options?: CallOptions): Promise<RunAccepted>
+  start(
+    request: RunRequest,
+    onEvent: (event: RunEvent) => void,
+    options?: CallOptions,
+  ): Promise<RunAccepted>
   cancel(runId: string): Promise<void>
   approve(runId: string, callId: string, allow: boolean): Promise<void>
   getSnapshot(runId: string): Promise<RunSnapshot>

package/src/ports/fake-optional.ts

@@ -0,0 +1,81 @@
+import type { KitClientError } from './contract'
+import type { McpClientPort, McpServerPort } from './contract'
+import type { SearchPort } from './search'
+import type { SkillSourcesPort } from './skill-sources'
+
+export type FakeError = (
+  code: ConstructorParameters<typeof KitClientError>[0]['code'],
+  message: string,
+  details?: Record<string, string>,
+) => KitClientError
+
+const STOPPED = { running: false, port: 0, url: '', toolCount: 0 }
+
+export function mcpClientDefaults(options: Partial<McpClientPort>): McpClientPort {
+  return {
+    list: () => Promise.resolve([]),
+    save: () => Promise.resolve([]),
+    remove: () => Promise.resolve([]),
+    refresh: () => Promise.resolve([]),
+    setToolApproval: () => Promise.resolve(),
+    ...options,
+  }
+}
+
+export function mcpServerDefaults(options: Partial<McpServerPort>): McpServerPort {
+  return {
+    status: () => Promise.resolve(STOPPED),
+    tokens: () => Promise.resolve([]),
+    start: () => Promise.resolve(STOPPED),
+    stop: () => Promise.resolve(STOPPED),
+    setPort: (port) => Promise.resolve({ ...STOPPED, port }),
+    issueToken: (name, scopes) =>
+      Promise.resolve({
+        token: 'kit_fake',
+        id: 'fake-token',
+        name,
+        scopes: [...scopes],
+        createdAt: 0,
+        lastUsedAt: null,
+        revokedAt: null,
+      }),
+    revokeToken: () => Promise.resolve(),
+    scopes: () => Promise.resolve([]),
+    setScopes: () => Promise.resolve([]),
+    ...options,
+  }
+}
+
+export function searchDefaults(options: Partial<SearchPort>, error: FakeError): SearchPort {
+  const unavailable = () => Promise.reject(error('internal', 'Configure the fake search method'))
+  return {
+    settings: unavailable,
+    save: unavailable,
+    setDefault: unavailable,
+    savePreferences: unavailable,
+    saveKey: unavailable,
+    removeKey: unavailable,
+    reveal: unavailable,
+    check: unavailable,
+    search: unavailable,
+    fetch: unavailable,
+    ...options,
+  }
+}
+
+export function skillSourceDefaults(
+  options: Partial<SkillSourcesPort>,
+  error: FakeError,
+): SkillSourcesPort {
+  const unavailable = () =>
+    Promise.reject(error('internal', 'Configure the fake skill source method'))
+  return {
+    search: unavailable,
+    prepare: unavailable,
+    discover: unavailable,
+    prepareSystem: unavailable,
+    pickDirectory: unavailable,
+    pickSearchDirectory: unavailable,
+    ...options,
+  }
+}