@ouraihub/aether-ui 0.0.0-stage → 0.1.1

package/src/mcp/McpServerSettings.svelte

@@ -0,0 +1,363 @@
+<script lang="ts">
+  // External MCP server settings (docs/16 §4.4): status, start/stop, port, scope switches, tokens.
+  import { onDestroy } from 'svelte'
+  import { Alert, AlertDescription, AlertTitle } from '#lib/components/ui/alert/index.js'
+  import { Button } from '#lib/components/ui/button/index.js'
+  import * as Field from '#lib/components/ui/field/index.js'
+  import { Input } from '#lib/components/ui/input/index.js'
+  import { Switch } from '#lib/components/ui/switch/index.js'
+  import { getKitContext } from '../context'
+  import { isKitClientError } from '../ports'
+  import type { IssuedToken, ScopeState, Status, TokenRecord } from '../ports'
+  import { createClientSession } from '../session'
+  import { buildClaudePosixCommand, buildMcpJsonConfig } from './config'
+
+  /** Server key used in the copied client configs. */
+  let { serverName = 'aether' }: { serverName?: string } = $props()
+
+  const { ports, i18n, notify, logger } = getKitContext()
+  const server = ports.mcpServer
+  const t = i18n.t
+
+  let status = $state<Status | null>(null)
+  let scopes = $state<ScopeState[]>([])
+  let tokens = $state<TokenRecord[]>([])
+  let port = $state('')
+  let tokenName = $state('')
+  let tokenScopes = $state<string[]>([])
+  let issued = $state<IssuedToken | null>(null)
+  let busy = $state(false)
+  let issuing = $state(false)
+  const tokenSession = createClientSession()
+  let tokenRevision = 0
+
+  function clearIssued() {
+    tokenSession.invalidate()
+    issued = null
+    issuing = false
+  }
+
+  $effect(() => {
+    void serverName
+    clearIssued()
+    tokenName = ''
+    tokenScopes = []
+    tokenRevision++
+  })
+
+  onDestroy(() => {
+    clearIssued()
+    tokenName = ''
+    tokenScopes = []
+  })
+
+  function hasHttpUrl(value: string | undefined): value is string {
+    if (!value?.trim()) return false
+    try {
+      const url = new URL(value)
+      return url.protocol === 'http:' || url.protocol === 'https:'
+    } catch {
+      return false
+    }
+  }
+
+  // JSON accepts dynamic keys; Claude CLI names must also satisfy its naming rules.
+  const configInput = $derived.by(() => {
+    const url = status?.url
+    const token = issued?.token
+    if (!hasHttpUrl(url) || !serverName.trim() || !token?.trim()) return null
+    return { serverName, url, token }
+  })
+  const claudeNameValid = $derived(/^[A-Za-z0-9_-]+$/.test(serverName))
+
+  // Actions only render when the port exists; the throw marks a host wiring bug.
+  function need() {
+    if (!server) throw new Error('mcpServer port missing')
+    return server
+  }
+
+  function fail(error: unknown) {
+    const code = isKitClientError(error) ? error.code : 'internal'
+    logger.warn('mcp.server.ui_failed', { code })
+    notify.toast('error', t(`errors.${code}`))
+  }
+
+  async function act(run: () => Promise<void>) {
+    busy = true
+    try {
+      await run()
+    } catch (error) {
+      fail(error)
+    } finally {
+      busy = false
+    }
+  }
+
+  function setStatus(next: Status) {
+    if (status && status.url !== next.url) clearIssued()
+    status = next
+    port = String(next.port)
+  }
+
+  async function load() {
+    if (!server) return
+    const [nextStatus, nextScopes, nextTokens] = await Promise.all([
+      server.status(),
+      server.scopes(),
+      server.tokens(),
+    ])
+    setStatus(nextStatus)
+    scopes = nextScopes
+    tokens = nextTokens
+  }
+
+  $effect(() => {
+    void act(load)
+  })
+
+  const toggleRunning = () =>
+    act(async () => setStatus(status?.running ? await need().stop() : await need().start()))
+
+  const savePort = () => act(async () => setStatus(await need().setPort(Number(port))))
+
+  async function toggleScope(scope: ScopeState, on: boolean) {
+    if (on && scope.destructive) {
+      const ok = await notify.confirm({
+        title: t('mcp.server.destructiveTitle'),
+        body: t('mcp.server.destructiveBody', { scope: t(scope.labelKey) }),
+        danger: true,
+      })
+      if (!ok) return
+    }
+    const ids = scopes.filter((s) => (s.id === scope.id ? on : s.enabled)).map((s) => s.id)
+    await act(async () => {
+      scopes = await need().setScopes(ids)
+    })
+  }
+
+  function toggleTokenScope(id: string, on: boolean) {
+    tokenRevision++
+    tokenScopes = on ? [...tokenScopes, id] : tokenScopes.filter((s) => s !== id)
+  }
+
+  async function issue() {
+    clearIssued()
+    const token = tokenSession.capture()
+    const targetName = serverName
+    const targetUrl = status?.url
+    const revision = tokenRevision
+    const name = tokenName
+    const grants = [...tokenScopes]
+    const current = () =>
+      tokenSession.isCurrent(token) && targetName === serverName && targetUrl === status?.url
+    issuing = true
+    try {
+      const next = await need().issueToken(name, grants)
+      if (!current()) return
+      issued = next
+      if (revision === tokenRevision) {
+        tokenName = ''
+        tokenScopes = []
+      }
+      const nextTokens = await need().tokens()
+      if (current()) tokens = nextTokens
+    } catch (error) {
+      if (current()) fail(error)
+    } finally {
+      if (current()) issuing = false
+    }
+  }
+
+  const revoke = (token: TokenRecord) =>
+    act(async () => {
+      const ok = await notify.confirm({
+        title: t('mcp.server.revokeTitle'),
+        body: t('mcp.server.revokeBody', { name: token.name }),
+        danger: true,
+      })
+      if (!ok) return
+      if (issued?.id === token.id) clearIssued()
+      await need().revokeToken(token.id)
+      tokens = await need().tokens()
+    })
+
+  async function copy(format: 'json' | 'posix') {
+    const input = configInput
+    if (!input || (format === 'posix' && !claudeNameValid)) return
+    const token = tokenSession.capture()
+    const current = () =>
+      tokenSession.isCurrent(token) &&
+      serverName === input.serverName &&
+      status?.url === input.url &&
+      issued?.token === input.token
+    const text = format === 'json' ? buildMcpJsonConfig(input) : buildClaudePosixCommand(input)
+    if (!current()) return
+    try {
+      await navigator.clipboard.writeText(text)
+      if (current()) notify.toast('success', t('mcp.server.copied'))
+    } catch (error) {
+      if (current()) fail(error)
+    }
+  }
+
+  const date = (ms: number | null) => (ms === null ? '—' : new Date(ms).toLocaleString(i18n.locale))
+</script>
+
+{#if server && status}
+  <section class="flex flex-col gap-6" aria-label={t('mcp.server.title')}>
+    <Field.Group>
+      <Field.Field orientation="horizontal">
+        <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')}
+            · {t('mcp.server.toolCount', { count: status.toolCount })}
+          </Field.Description>
+        </Field.Content>
+        <Button
+          disabled={busy || issuing}
+          variant={status.running ? 'outline' : 'default'}
+          onclick={() => void toggleRunning()}
+        >
+          {status.running ? t('mcp.server.stop') : t('mcp.server.start')}
+        </Button>
+      </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}
+        />
+        <Button
+          disabled={busy || issuing || port === String(status.port)}
+          variant="outline"
+          onclick={() => void savePort()}
+        >
+          {t('mcp.server.savePort')}
+        </Button>
+      </Field.Field>
+    </Field.Group>
+
+    <Field.Set>
+      <Field.Legend>{t('mcp.server.scopes')}</Field.Legend>
+      <Field.Description>{t('mcp.server.scopesHint')}</Field.Description>
+      <Field.Group>
+        {#each scopes as scope (scope.id)}
+          <Field.Field orientation="horizontal">
+            <Switch
+              id={`kit-mcp-scope-${scope.id}`}
+              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.Field>
+        {/each}
+      </Field.Group>
+    </Field.Set>
+
+    <Field.Set>
+      <Field.Legend>{t('mcp.server.newToken')}</Field.Legend>
+      <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++}
+          />
+        </Field.Field>
+        {#each scopes as scope (scope.id)}
+          <Field.Field orientation="horizontal">
+            <Switch
+              id={`kit-mcp-grant-${scope.id}`}
+              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.Field>
+        {/each}
+        <Field.Field orientation="horizontal">
+          <Button
+            disabled={busy || issuing || tokenName.trim() === '' || tokenScopes.length === 0}
+            onclick={() => void issue()}
+          >
+            {t('mcp.server.issue')}
+          </Button>
+        </Field.Field>
+      </Field.Group>
+    </Field.Set>
+
+    {#if issued}
+      <Alert>
+        <AlertTitle>{t('mcp.server.issuedTitle', { name: issued.name })}</AlertTitle>
+        <AlertDescription class="flex flex-col gap-2">
+          <p>{t('mcp.server.issuedOnce')}</p>
+          <code class="break-all">{issued.token}</code>
+          <div class="flex flex-wrap gap-2">
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={!configInput || !claudeNameValid}
+              onclick={() => void copy('posix')}
+            >
+              {t('mcp.server.copyClaude')}
+            </Button>
+            <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
+            >
+          </div>
+        </AlertDescription>
+      </Alert>
+    {/if}
+
+    <Field.Set>
+      <Field.Legend>{t('mcp.server.tokens')}</Field.Legend>
+      {#if tokens.length === 0}
+        <Field.Description>{t('mcp.server.noTokens')}</Field.Description>
+      {/if}
+      <ul class="flex flex-col gap-2">
+        {#each tokens as token (token.id)}
+          <li class="flex items-center justify-between gap-4 rounded-md border p-3">
+            <div class="flex min-w-0 flex-col">
+              <span class="truncate font-medium">{token.name}</span>
+              <span class="text-muted-foreground text-sm">
+                {token.scopes.join(', ')} · {t('mcp.server.lastUsed')}: {date(token.lastUsedAt)}
+              </span>
+            </div>
+            {#if token.revokedAt === null}
+              <Button
+                size="sm"
+                variant="destructive"
+                disabled={busy || issuing}
+                onclick={() => void revoke(token)}
+              >
+                {t('mcp.server.revoke')}
+              </Button>
+            {:else}
+              <span class="text-muted-foreground text-sm">{t('mcp.server.revoked')}</span>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    </Field.Set>
+  </section>
+{/if}

package/src/mcp/config.ts

@@ -0,0 +1,26 @@
+interface McpConfigInput {
+  serverName: string
+  url: string
+  token: string
+}
+
+export function buildMcpJsonConfig({ serverName, url, token }: McpConfigInput): string {
+  return JSON.stringify(
+    {
+      mcpServers: {
+        [serverName]: { type: 'http', url, headers: { Authorization: `Bearer ${token}` } },
+      },
+    },
+    null,
+    2,
+  )
+}
+
+function posixQuote(value: string): string {
+  return `'${value.replaceAll("'", "'\"'\"'")}'`
+}
+
+/** POSIX shell only: every dynamic value is exactly one quoted argument. */
+export function buildClaudePosixCommand({ serverName, url, token }: McpConfigInput): string {
+  return `claude mcp add --transport http ${posixQuote(serverName)} ${posixQuote(url)} --header ${posixQuote(`Authorization: Bearer ${token}`)}`
+}

package/src/mcp/index.ts

@@ -0,0 +1,3 @@
+// McpClientSettings、McpServerSettings。设计：docs/16 §4.4。
+export { default as McpClientSettings } from './McpClientSettings.svelte'
+export { default as McpServerSettings } from './McpServerSettings.svelte'

package/src/mcp/input.ts

@@ -0,0 +1,74 @@
+import type { McpTransport, ServerDto, ServerSave, ServerSecret } from '../ports'
+
+/** Write-only editor input; credentials never come from a ServerDto. */
+export interface McpInput {
+  name: string
+  slug: string
+  kind: McpTransport['kind']
+  url: string
+  command: string
+  args: string
+  cwd: string
+  replaceSecret: boolean
+  headers: string
+  query: string
+  env: string
+}
+
+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 {
+  const entries: [string, string][] = []
+  for (const raw of text.split('\n')) {
+    const line = raw.trim()
+    if (!line) continue
+    const at = line.indexOf(separator)
+    const name = line.slice(0, at).trim()
+    if (at <= 0 || !name) return null
+    entries.push([name, line.slice(at + 1).trim()])
+  }
+  return Object.fromEntries(entries)
+}
+
+export function mapMcpInput(current: ServerDto | null, input: McpInput): McpInputResult {
+  if (current && current.transport.kind !== input.kind && !input.replaceSecret) {
+    return { ok: false, error: 'transportChanged' }
+  }
+  const transport: McpTransport =
+    input.kind === 'http'
+      ? { kind: 'http', url: input.url.trim() }
+      : {
+          kind: 'stdio',
+          command: input.command.trim(),
+          args: input.args.split('\n').filter((arg) => arg.trim() !== ''),
+          ...(input.cwd.trim() ? { cwd: input.cwd.trim() } : {}),
+        }
+  const value: ServerSave = {
+    ...(current ? { id: current.id } : {}),
+    name: input.name.trim(),
+    slug: input.slug.trim(),
+    transport,
+    enabled: current?.enabled ?? false,
+    trusted: current?.trusted ?? false,
+    allowPrivate: transport.kind === 'http' ? (current?.allowPrivate ?? false) : false,
+  }
+  if (input.replaceSecret) {
+    const secret: ServerSecret = {}
+    if (input.kind === 'http') {
+      const headers = pairs(input.headers, ':')
+      const query = pairs(input.query, '=')
+      if (!headers || !query) return { ok: false, error: 'secretLine' }
+      if (Object.keys(headers).length) secret.headers = headers
+      if (Object.keys(query).length) secret.query = query
+    } else {
+      const env = pairs(input.env, '=')
+      if (!env) return { ok: false, error: 'secretLine' }
+      if (Object.keys(env).length) secret.env = env
+    }
+    // Omitted preserves; explicit {} clears. New servers need no empty secret.
+    if (current || Object.keys(secret).length) value.secret = secret
+  }
+  return { ok: true, value }
+}

package/src/notify.svelte.ts

@@ -0,0 +1,43 @@
+// Default KitNotify for hosts without their own: svelte-sonner toasts + one shadcn AlertDialog (docs/16 §3).
+// Render <KitNotifier notify={...} /> once next to the host root so the toaster and dialog exist.
+import { toast } from 'svelte-sonner'
+import type { ConfirmOptions, KitNotify } from './context'
+
+export class DefaultNotify implements KitNotify {
+  #request = $state<ConfirmOptions | null>(null)
+  #open = $state(false)
+  #resolve: ((answer: boolean) => void) | null = null
+
+  /** Last request; kept after closing so the dialog keeps its text while it animates out. */
+  get request(): ConfirmOptions | null {
+    return this.#request
+  }
+
+  get open(): boolean {
+    return this.#open
+  }
+
+  toast(kind: 'info' | 'success' | 'error', text: string): void {
+    toast[kind](text)
+  }
+
+  /** A newer confirm answers the pending one with `false`. */
+  confirm(options: ConfirmOptions): Promise<boolean> {
+    this.answer(false)
+    this.#request = options
+    this.#open = true
+    const { promise, resolve } = Promise.withResolvers<boolean>()
+    this.#resolve = resolve
+    return promise
+  }
+
+  answer(isConfirmed: boolean): void {
+    this.#open = false
+    this.#resolve?.(isConfirmed)
+    this.#resolve = null
+  }
+}
+
+export function createDefaultNotify(): DefaultNotify {
+  return new DefaultNotify()
+}

package/src/ports/contract.ts

@@ -0,0 +1,174 @@
+// Port interfaces and KitClientError (docs/16 §2, docs/04 §3.2). Pure TS: no Tauri imports.
+import type {
+  Conversation,
+  ConversationSummary,
+  IngestBatch,
+  IngestReceipt,
+  IssuedToken,
+  KitError,
+  KitErrorCode,
+  Details,
+  EndpointKeySave,
+  LogEntry,
+  LogLevel,
+  LogStatus,
+  ManualSave,
+  Approval,
+  ModelFilter,
+  ModelOption,
+  ProbeResult,
+  Preview,
+  ProbeTarget,
+  Provider,
+  ProviderSave,
+  Protocol,
+  RunAccepted,
+  RunEvent,
+  RunRequest,
+  RunSnapshot,
+  ServerDto,
+  ServerSave,
+  SkillDto,
+  SkillMeta,
+  Source,
+  ScopeState,
+  Status,
+  TokenRecord,
+  ToolDto,
+} from '@ouraihub/aether-contracts'
+import type { SearchPort } from './search'
+import type { SkillSourcesPort } from './skill-sources'
+
+export interface CallOptions {
+  signal?: AbortSignal
+}
+
+export interface LogsPort {
+  tail(limit: number): Promise<LogEntry[]>
+  ingest(batch: IngestBatch): Promise<IngestReceipt>
+  getLevel(): Promise<LogStatus>
+  /** Takes effect immediately and is persisted to `level.json`. */
+  setLevel(level: LogLevel): Promise<LogStatus>
+}
+
+export interface DesktopActions {
+  openLogsDirectory(): Promise<void>
+}
+
+/** Host-supplied provider template, seeded once into the store disabled and keyless (docs/39). */
+export interface ProviderPreset {
+  id: string
+  name: string
+  baseUrl: string
+  protocol: Protocol
+  /** "Get a key" link, e.g. an invite link. */
+  apiKeyUrl?: string
+}
+
+export interface ProvidersPort {
+  /** Browser asks for the current password; desktop uses its local credential boundary. */
+  readonly revealNeedsPassword: boolean
+  /** Host stores `keyStrategy` and key set-aside state (web); `false` = rotation only, fields ignored. */
+  readonly keyStrategies: boolean
+  list(): Promise<Provider[]>
+  setEnabled(id: string, enabled: boolean): Promise<Provider[]>
+  save(provider: ProviderSave): Promise<Provider[]>
+  remove(id: string): Promise<Provider[]>
+  modelOptions(filter?: ModelFilter): Promise<ModelOption[]>
+  probe(target: ProbeTarget, options?: CallOptions): Promise<ProbeResult>
+  saveKey(input: EndpointKeySave): Promise<Provider[]>
+  removeKey(endpointId: string, keyId: string): Promise<Provider[]>
+  revealKey(keyId: string, currentPassword?: string | null): Promise<string>
+}
+
+export interface ConversationClient {
+  list(scope?: string): Promise<ConversationSummary[]>
+  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>
+  removeTurn(conversationId: string, turnId: string): Promise<Conversation>
+  fork(conversationId: string, turnId: string): Promise<Conversation>
+  selectTurn(conversationId: string, turnId: string): Promise<Conversation>
+}
+
+export interface RunClient {
+  /** Resolves once accepted; events may arrive before acceptance. */
+  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>
+}
+
+export interface SkillsPort {
+  list(): Promise<SkillMeta[]>
+  get(id: string): Promise<SkillDto>
+  /** Reads and validates a package; nothing is stored. */
+  preview(source: Source): Promise<Preview>
+  /** `confirmedDigest` is the previewed digest; a changed package rejects with `conflict{content_changed}`. */
+  install(source: Source, confirmedDigest: string, replace: boolean): Promise<SkillMeta[]>
+  save(input: ManualSave): Promise<SkillMeta[]>
+  duplicate(id: string, newName: string): Promise<SkillMeta[]>
+  reorder(ids: readonly string[]): Promise<SkillMeta[]>
+  remove(id: string): Promise<SkillMeta[]>
+}
+
+export interface McpClientPort {
+  list(): Promise<ServerDto[]>
+  save(server: ServerSave): Promise<ServerDto[]>
+  remove(id: string): Promise<ServerDto[]>
+  refresh(serverId: string): Promise<ToolDto[]>
+  setToolApproval(serverId: string, tool: string, approval: Approval): Promise<void>
+}
+
+export interface McpServerPort {
+  status(): Promise<Status>
+  tokens(): Promise<TokenRecord[]>
+  start(): Promise<Status>
+  stop(): Promise<Status>
+  setPort(port: number): Promise<Status>
+  issueToken(name: string, scopes: readonly string[]): Promise<IssuedToken>
+  revokeToken(id: string): Promise<void>
+  scopes(): Promise<ScopeState[]>
+  setScopes(ids: readonly string[]): Promise<ScopeState[]>
+}
+
+/** Ports the host declared; components skip the area of a missing port (docs/16 §2). */
+export interface KitPorts {
+  logs?: LogsPort
+  desktop?: DesktopActions
+  providers?: ProvidersPort
+  chat?: RunClient
+  conversations?: ConversationClient
+  search?: SearchPort
+  skills?: SkillsPort
+  skillSources?: SkillSourcesPort
+  mcpClient?: McpClientPort
+  mcpServer?: McpServerPort
+}
+
+/** The only error type thrown across a port (docs/04 §3.2). */
+export class KitClientError extends Error {
+  readonly code: KitErrorCode
+  readonly details: Details
+
+  constructor(error: KitError) {
+    super(error.message)
+    this.name = 'KitClientError'
+    this.code = error.code
+    this.details = error.details ?? {}
+  }
+}
+
+export function isKitClientError(error: unknown): error is KitClientError {
+  return error instanceof KitClientError
+}