@ouraihub/aether-ui 0.0.0-stage → 0.1.1

package/src/mcp/McpClientSettings.svelte

@@ -0,0 +1,418 @@
+<script lang="ts">
+  // External MCP servers the in-app AI may call (docs/16 §4.4, docs/13 §2): list, edit with
+  // write-only credentials, test connection, trust/enable/private-network switches, and each
+  // tool's approval default. Only enabled + trusted servers' tools reach a run. A server is
+  // reached over Streamable HTTP or as a local stdio command.
+  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 Empty from '#lib/components/ui/empty/index.js'
+  import * as Field from '#lib/components/ui/field/index.js'
+  import * as Select from '#lib/components/ui/select/index.js'
+  import { Switch } from '#lib/components/ui/switch/index.js'
+  import McpClientEditor from './McpClientEditor.svelte'
+  import { getKitContext } from '../context'
+  import { isKitClientError } from '../ports'
+  import type { Approval, McpTransport, ServerDto, ServerSave } from '../ports'
+  import { createClientSession } from '../session'
+  import { mapMcpInput } from './input'
+
+  const APPROVALS: Approval[] = ['auto', 'ask', 'deny']
+
+  const { ports, i18n, notify, logger } = getKitContext()
+  const client = ports.mcpClient
+  const t = i18n.t
+
+  let servers = $state<ServerDto[]>([])
+  let busy = $state(false)
+  /** Last "test connection" failure per server id. */
+  let testErrors = $state<Record<string, string>>({})
+
+  let editing = $state(false)
+  let editId = $state<string | null>(null)
+  let name = $state('')
+  let slug = $state('')
+  let kind = $state<McpTransport['kind']>('http')
+  let url = $state('')
+  let command = $state('')
+  let args = $state('')
+  let cwd = $state('')
+  let replaceSecret = $state(true)
+  let headers = $state('')
+  let query = $state('')
+  let env = $state('')
+  let currentKeys = $state<string[]>([])
+  const editSession = createClientSession()
+  let editTarget: ServerDto | null = null
+  let editorSaving = $state(false)
+  let editRevision = 0
+  let secretRevision = 0
+
+  function clearSecrets() {
+    headers = ''
+    query = ''
+    env = ''
+    secretRevision++
+  }
+
+  function invalidateEditor() {
+    editSession.invalidate()
+    editorSaving = false
+    clearSecrets()
+  }
+
+  function closeEditor() {
+    invalidateEditor()
+    editing = false
+    editTarget = null
+  }
+
+  function changeKind(next: McpTransport['kind']) {
+    if (next === kind) return
+    invalidateEditor()
+    editRevision++
+    kind = next
+  }
+
+  function changeReplacement(next: boolean) {
+    invalidateEditor()
+    editRevision++
+    replaceSecret = next
+  }
+
+  onDestroy(closeEditor)
+
+  // Actions only render when the port exists; the throw marks a host wiring bug.
+  function need() {
+    if (!client) throw new Error('mcpClient port missing')
+    return client
+  }
+
+  function errorText(error: unknown): string {
+    if (!isKitClientError(error)) return t('errors.internal')
+    const { reason, field } = error.details
+    if (reason === 'credential_query') return t('mcp.client.err.credentialQuery')
+    if (reason === 'duplicate_slug') return t('mcp.client.err.duplicateSlug')
+    if (reason === 'credential_arg') return t('mcp.client.err.credentialArg')
+    if (reason === 'transport_changed') return t('mcp.client.err.transportChanged')
+    return field ? `${t(`errors.${error.code}`)} (${field})` : t(`errors.${error.code}`)
+  }
+
+  function fail(error: unknown) {
+    logger.warn('mcp.client.ui_failed', { code: isKitClientError(error) ? error.code : 'internal' })
+    notify.toast('error', errorText(error))
+  }
+
+  async function act(run: () => Promise<void>) {
+    busy = true
+    try {
+      await run()
+    } catch (error) {
+      fail(error)
+    } finally {
+      busy = false
+    }
+  }
+
+  $effect(() => {
+    if (client) void act(async () => void (servers = await client.list()))
+  })
+
+  function base(server: ServerDto): ServerSave {
+    const { id, slug, name, transport, enabled, trusted, allowPrivate } = server
+    return { id, slug, name, transport, enabled, trusted, allowPrivate }
+  }
+
+  /** 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(' ')
+  }
+
+  const update = (next: ServerSave) => act(async () => void (servers = await need().save(next)))
+
+  async function setTrusted(server: ServerDto, on: boolean) {
+    if (on) {
+      const ok = await notify.confirm({
+        title: t('mcp.client.trustTitle'),
+        body: t('mcp.client.trustBody', { name: server.name }),
+      })
+      if (!ok) return
+    }
+    await update({ ...base(server), trusted: on })
+  }
+
+  async function setPrivate(server: ServerDto, on: boolean) {
+    if (on) {
+      const ok = await notify.confirm({
+        title: t('mcp.client.privateTitle'),
+        body: t('mcp.client.privateBody', { url: location(server.transport) }),
+        danger: true,
+      })
+      if (!ok) return
+    }
+    await update({ ...base(server), allowPrivate: on })
+  }
+
+  const test = (server: ServerDto) =>
+    act(async () => {
+      testErrors = Object.fromEntries(Object.entries(testErrors).filter(([id]) => id !== server.id))
+      try {
+        await need().refresh(server.id)
+      } catch (error) {
+        testErrors = { ...testErrors, [server.id]: errorText(error) }
+      }
+      servers = await need().list()
+    })
+
+  const setApproval = (server: ServerDto, tool: string, approval: Approval) =>
+    act(async () => {
+      await need().setToolApproval(server.id, tool, approval)
+      servers = await need().list()
+    })
+
+  const remove = (server: ServerDto) =>
+    act(async () => {
+      const ok = await notify.confirm({
+        title: t('mcp.client.deleteTitle'),
+        body: t('mcp.client.deleteBody', { name: server.name }),
+        danger: true,
+      })
+      if (ok) servers = await need().remove(server.id)
+    })
+
+  function edit(server: ServerDto | null) {
+    invalidateEditor()
+    editTarget = server
+    editRevision++
+    const transport = server?.transport
+    editId = server?.id ?? null
+    name = server?.name ?? ''
+    slug = server?.slug ?? ''
+    kind = transport?.kind ?? 'http'
+    url = transport?.kind === 'http' ? transport.url : ''
+    command = transport?.kind === 'stdio' ? transport.command : ''
+    args = transport?.kind === 'stdio' ? transport.args.join('\n') : ''
+    cwd = transport?.kind === 'stdio' ? (transport.cwd ?? '') : ''
+    currentKeys = server?.secretKeys ?? []
+    replaceSecret = server === null
+    editing = true
+  }
+
+  async function save() {
+    const mapped = mapMcpInput(editTarget, {
+      name,
+      slug,
+      kind,
+      url,
+      command,
+      args,
+      cwd,
+      replaceSecret,
+      headers,
+      query,
+      env,
+    })
+    if (!mapped.ok) {
+      notify.toast('error', t(`mcp.client.err.${mapped.error}`))
+      return
+    }
+    const token = editSession.capture()
+    const revision = editRevision
+    const sentSecretRevision = secretRevision
+    editorSaving = true
+    try {
+      const next = await need().save(mapped.value)
+      if (!editSession.isCurrent(token)) return
+      servers = next
+      if (editRevision === revision) {
+        closeEditor()
+      } else {
+        // Preserve edits made while saving, but do not retain successfully sent secrets.
+        const stored = editTarget
+          ? next.find((server) => server.id === editTarget?.id)
+          : next.find((server) => server.slug === mapped.value.slug)
+        if (stored) {
+          editTarget = stored
+          editId = stored.id
+          currentKeys = stored.secretKeys
+        }
+        if (sentSecretRevision === secretRevision) {
+          clearSecrets()
+          replaceSecret = false
+        }
+      }
+    } catch (error) {
+      if (editSession.isCurrent(token)) fail(error)
+    } finally {
+      if (editSession.isCurrent(token)) editorSaving = false
+    }
+  }
+</script>
+
+{#if client}
+  <section class="flex flex-col gap-4" aria-label={t('mcp.client.title')}>
+    <div class="flex items-center gap-2">
+      <p class="text-muted-foreground flex-1 text-sm">{t('mcp.client.hint')}</p>
+      <Button disabled={busy} onclick={() => edit(null)}>{t('mcp.client.add')}</Button>
+    </div>
+    {#if servers.length === 0}
+      <Empty.Root>
+        <Empty.Header>
+          <Empty.Title>{t('mcp.client.empty')}</Empty.Title>
+          <Empty.Description>{t('mcp.client.emptyHint')}</Empty.Description>
+        </Empty.Header>
+      </Empty.Root>
+    {/if}
+    <ul class="flex flex-col gap-3">
+      {#each servers as server (server.id)}
+        <li class="flex flex-col gap-3 rounded-md border p-3" aria-label={server.name}>
+          <div class="flex items-start gap-3">
+            <div class="flex min-w-0 flex-1 flex-col">
+              <span class="truncate font-medium"
+                >{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
+              >
+              {#if server.secretKeys.length}
+                <span class="text-muted-foreground text-xs">
+                  {t('mcp.client.secretKeys', { keys: server.secretKeys.join(', ') })}
+                </span>
+              {/if}
+            </div>
+            <Button size="sm" variant="outline" disabled={busy} onclick={() => void test(server)}>
+              {t('mcp.client.test')}
+            </Button>
+            <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)}
+            >
+              {t('mcp.client.delete')}
+            </Button>
+          </div>
+          <div class="flex flex-wrap gap-6">
+            <Field.Field orientation="horizontal" class="w-auto">
+              <Switch
+                id={`kit-mcp-enabled-${server.id}`}
+                checked={server.enabled}
+                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.Field>
+            <Field.Field orientation="horizontal" class="w-auto">
+              <Switch
+                id={`kit-mcp-trusted-${server.id}`}
+                checked={server.trusted}
+                disabled={busy}
+                onCheckedChange={(on) => void setTrusted(server, on)}
+              />
+              <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">
+                <Switch
+                  id={`kit-mcp-private-${server.id}`}
+                  checked={server.allowPrivate}
+                  disabled={busy}
+                  onCheckedChange={(on) => void setPrivate(server, on)}
+                />
+                <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
+              >
+            </Alert>
+          {/if}
+          {#if server.tools.length}
+            <ul class="flex flex-col gap-2" aria-label={t('mcp.client.tools')}>
+              {#each server.tools as tool (tool.name)}
+                <li class="flex items-center gap-3">
+                  <div class="flex min-w-0 flex-1 flex-col">
+                    <span class="truncate font-mono text-sm">{tool.name}</span>
+                    <span class="text-muted-foreground truncate text-xs">
+                      {tool.description}{#if tool.readOnly && tool.approval !== 'auto'}
+                        · {t('mcp.client.readOnlyHint')}{/if}
+                    </span>
+                  </div>
+                  <Select.Root
+                    type="single"
+                    value={tool.approval}
+                    onValueChange={(value) =>
+                      void setApproval(server, tool.name, value as Approval)}
+                  >
+                    <Select.Trigger
+                      size="sm"
+                      class="w-28"
+                      aria-label={t('mcp.client.approvalFor', { tool: tool.name })}
+                    >
+                      {t(`mcp.client.approval.${tool.approval}`)}
+                    </Select.Trigger>
+                    <Select.Content>
+                      <Select.Group>
+                        {#each APPROVALS as approval (approval)}
+                          <Select.Item
+                            value={approval}
+                            label={t(`mcp.client.approval.${approval}`)}
+                          />
+                        {/each}
+                      </Select.Group>
+                    </Select.Content>
+                  </Select.Root>
+                </li>
+              {/each}
+            </ul>
+          {:else}
+            <p class="text-muted-foreground text-sm">{t('mcp.client.noTools')}</p>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  </section>
+
+  <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}