@ouraihub/aether-ui 0.0.0-stage → 0.1.1

package/src/logs/LogPanel.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  // Log viewer (docs/16 §4.5): tail(300) every 2 s while the page is visible; problems-only filter; open folder.
+  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 { Switch } from '#lib/components/ui/switch/index.js'
+  import { getKitContext } from '../context'
+  import type { LogEntry } from '../ports'
+  import { cn } from '../utils'
+
+  const POLL_MS = 2000
+  const LIMIT = 300
+
+  const { ports, i18n, notify } = getKitContext()
+  const t = i18n.t
+  const logs = ports.logs
+
+  let entries = $state<LogEntry[]>([])
+  let failed = $state(false)
+  let problemsOnly = $state(false)
+  const shown = $derived(
+    problemsOnly ? entries.filter((e) => e.level === 'ERROR' || e.level === 'WARN') : entries,
+  )
+
+  async function refresh() {
+    if (!logs) return
+    try {
+      entries = await logs.tail(LIMIT)
+      failed = false
+    } catch {
+      failed = true
+    }
+  }
+
+  $effect(() => {
+    if (!logs) return
+    let timer: number | undefined
+    const sync = () => {
+      window.clearInterval(timer)
+      timer = undefined
+      if (document.visibilityState !== 'visible') return
+      void refresh()
+      timer = window.setInterval(() => void refresh(), POLL_MS)
+    }
+    sync()
+    document.addEventListener('visibilitychange', sync)
+    return () => {
+      window.clearInterval(timer)
+      document.removeEventListener('visibilitychange', sync)
+    }
+  })
+
+  async function openDir() {
+    try {
+      await ports.desktop?.openLogsDirectory()
+    } catch {
+      notify.toast('error', t('errors.internal'))
+    }
+  }
+</script>
+
+{#if logs}
+  <section class="flex min-h-0 flex-1 flex-col gap-3" aria-label={t('logs.title')}>
+    <header class="flex items-center gap-3">
+      <h2 class="text-base font-medium">{t('logs.title')}</h2>
+      <label class="ml-auto flex items-center gap-2 text-sm">
+        <Switch bind:checked={problemsOnly} />
+        {t('logs.problemsOnly')}
+      </label>
+      {#if ports.desktop}
+        <Button variant="outline" size="sm" onclick={() => void openDir()}
+          >{t('logs.openDir')}</Button
+        >
+      {/if}
+    </header>
+    {#if failed}
+      <Alert variant="destructive"
+        ><AlertDescription>{t('logs.loadFailed')}</AlertDescription></Alert
+      >
+    {/if}
+    {#if shown.length === 0}
+      <Empty.Root>
+        <Empty.Header><Empty.Title>{t('logs.empty')}</Empty.Title></Empty.Header>
+      </Empty.Root>
+    {:else}
+      <ol class="bg-muted min-h-0 flex-1 overflow-auto rounded-md p-2 font-mono text-xs">
+        {#each shown as entry (entry.seq)}
+          <li
+            class={cn(
+              'break-all whitespace-pre-wrap',
+              entry.level === 'ERROR' && 'text-destructive',
+              (entry.level === 'DEBUG' || entry.level === 'TRACE') && 'text-muted-foreground',
+            )}
+          >
+            {entry.time}
+            {entry.level}
+            {entry.target}: {entry.message}
+          </li>
+        {/each}
+      </ol>
+    {/if}
+  </section>
+{/if}

package/src/logs/LogSettings.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  // Log level (docs/16 §4.5): applies immediately; warns when the log file cannot be written.
+  import { Alert, AlertDescription } from '#lib/components/ui/alert/index.js'
+  import * as Field from '#lib/components/ui/field/index.js'
+  import * as Select from '#lib/components/ui/select/index.js'
+  import { getKitContext } from '../context'
+  import { isKitClientError } from '../ports'
+  import type { LogLevel, LogStatus } from '../ports'
+
+  const LEVELS: readonly LogLevel[] = ['ERROR', 'WARN', 'INFO', 'DEBUG', 'TRACE']
+
+  const { ports, i18n, notify } = getKitContext()
+  const t = i18n.t
+  const logs = ports.logs
+
+  let status = $state<LogStatus | null>(null)
+
+  async function run(call: () => Promise<LogStatus>) {
+    try {
+      status = await call()
+    } catch (error) {
+      notify.toast('error', t(`errors.${isKitClientError(error) ? error.code : 'internal'}`))
+    }
+  }
+
+  $effect(() => {
+    if (logs) void run(() => logs.getLevel())
+  })
+</script>
+
+{#if logs}
+  <Field.Group>
+    <Field.Field>
+      <Field.Label for="kit-log-level">{t('logs.level')}</Field.Label>
+      <Select.Root
+        type="single"
+        value={status?.level ?? ''}
+        disabled={!status}
+        onValueChange={(value) => void run(() => logs.setLevel(value as LogLevel))}
+      >
+        <Select.Trigger id="kit-log-level" class="w-40">{status?.level ?? '—'}</Select.Trigger>
+        <Select.Content>
+          <Select.Group>
+            {#each LEVELS as level (level)}
+              <Select.Item value={level} label={level} />
+            {/each}
+          </Select.Group>
+        </Select.Content>
+      </Select.Root>
+      <Field.Description>{t('logs.levelHint')}</Field.Description>
+    </Field.Field>
+    {#if status && !status.available}
+      <Alert variant="destructive"
+        ><AlertDescription>{t('logs.unavailable')}</AlertDescription></Alert
+      >
+    {/if}
+  </Field.Group>
+{/if}

package/src/logs/index.ts

@@ -0,0 +1,5 @@
+// LogPanel、LogSettings、createLogger。设计：docs/16 §4.5。
+export { createLogger } from './logger'
+export type { BatchingLogger } from './logger'
+export { default as LogPanel } from './LogPanel.svelte'
+export { default as LogSettings } from './LogSettings.svelte'

package/src/logs/logger.ts

@@ -0,0 +1,96 @@
+// createLogger (docs/16 §4.5): same whitelist as the backend (docs/10 §10), batched into LogsPort.ingest.
+// ponytail: secret detection stays in the backend (it rejects and counts); mirror mask.rs here
+// if a secret-looking value must never leave the page.
+import type { KitLogger, LogFields } from '../context'
+import type { IngestEntry, IngestLevel, LogsPort } from '../ports'
+
+const MAX_QUEUE = 200
+const BATCH = 20
+const MAX_BATCH = 50
+const DELAY_MS = 250
+const MAX_FIELDS = 16
+const MAX_STRING = 200
+const EVENT = /^[a-z][a-z0-9_]*(\.[a-z0-9_]+){1,5}$/
+const KEY = /^[a-z][a-z0-9_]*(\.[a-z0-9_]+){0,5}$/
+
+export interface BatchingLogger extends KitLogger {
+  /** Sends everything queued now (also done on `pagehide`). */
+  flush(): Promise<void>
+}
+
+function isValid(event: string, fields: LogFields | undefined): boolean {
+  if (!EVENT.test(event)) return false
+  const entries = Object.entries(fields ?? {})
+  return (
+    entries.length <= MAX_FIELDS &&
+    entries.every(([key, value]) => {
+      if (!KEY.test(key)) return false
+      if (typeof value === 'string') return [...value].length <= MAX_STRING
+      return typeof value === 'boolean' || Number.isFinite(value)
+    })
+  )
+}
+
+export function createLogger(port: LogsPort): BatchingLogger {
+  const queue: IngestEntry[] = []
+  let dropped = 0
+  let timer: number | undefined
+  let inFlight: Promise<void> | null = null
+
+  // One request at a time; entries queue meanwhile, bounded by MAX_QUEUE.
+  async function drain(): Promise<void> {
+    while (queue.length > 0 || dropped > 0) {
+      const entries = queue.splice(0, MAX_BATCH)
+      const droppedCount = dropped
+      dropped = 0
+      try {
+        await port.ingest({ entries, droppedCount })
+      } catch {
+        dropped += droppedCount + entries.length
+        return
+      }
+    }
+  }
+
+  function schedule(): void {
+    timer ??= window.setTimeout(() => void flush(), DELAY_MS)
+  }
+
+  function flush(): Promise<void> {
+    window.clearTimeout(timer)
+    timer = undefined
+    inFlight ??= drain().finally(() => {
+      inFlight = null
+      if (queue.length > 0) schedule()
+    })
+    return inFlight
+  }
+
+  function push(level: IngestLevel, event: string, fields?: LogFields): void {
+    if (!isValid(event, fields)) {
+      dropped++
+      return
+    }
+    if (queue.length >= MAX_QUEUE) {
+      // Full: drop the oldest debug/info first; a new debug/info entry is dropped itself.
+      dropped++
+      const low = queue.findIndex((entry) => entry.level === 'debug' || entry.level === 'info')
+      if (low >= 0) queue.splice(low, 1)
+      else if (level === 'debug' || level === 'info') return
+      else queue.shift()
+    }
+    queue.push(fields ? { level, event, fields } : { level, event })
+    if (queue.length >= BATCH) void flush()
+    else schedule()
+  }
+
+  window.addEventListener('pagehide', () => void flush())
+
+  return {
+    debug: (event, fields) => push('debug', event, fields),
+    info: (event, fields) => push('info', event, fields),
+    warn: (event, fields) => push('warn', event, fields),
+    error: (event, fields) => push('error', event, fields),
+    flush,
+  }
+}

package/src/markdown.ts

@@ -0,0 +1,8 @@
+// Markdown → sanitized HTML. Render it with `{@attach (node) => { node.innerHTML = html }}`, never `{@html}` (docs/04 §5).
+import DOMPurify from 'dompurify'
+import { marked } from 'marked'
+
+/** Model and skill text is untrusted: DOMPurify drops scripts, event handlers and `javascript:` URLs. */
+export function renderMarkdown(source: string): string {
+  return DOMPurify.sanitize(marked.parse(source, { async: false, gfm: true }))
+}

package/src/mcp/McpClientEditor.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+  import { Button } from '#lib/components/ui/button/index.js'
+  import * as Dialog from '#lib/components/ui/dialog/index.js'
+  import * as Field from '#lib/components/ui/field/index.js'
+  import { Input } from '#lib/components/ui/input/index.js'
+  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 CopyInput from '../CopyInput.svelte'
+  import { getKitContext } from '../context'
+  import type { McpTransport } from '../ports'
+
+  let {
+    open = $bindable(false),
+    editId,
+    name = $bindable(''),
+    slug = $bindable(''),
+    kind = $bindable<McpTransport['kind']>('http'),
+    url = $bindable(''),
+    command = $bindable(''),
+    args = $bindable(''),
+    cwd = $bindable(''),
+    replaceSecret = $bindable(true),
+    headers = $bindable(''),
+    query = $bindable(''),
+    env = $bindable(''),
+    currentKeys = [],
+    editorSaving = false,
+    busy = false,
+    onclose,
+    onsave,
+    onchangeKind,
+    onchangeReplacement,
+    oninputRevision,
+    onsecretInput,
+  }: {
+    open?: boolean
+    editId: string | null
+    name?: string
+    slug?: string
+    kind?: McpTransport['kind']
+    url?: string
+    command?: string
+    args?: string
+    cwd?: string
+    replaceSecret?: boolean
+    headers?: string
+    query?: string
+    env?: string
+    currentKeys?: string[]
+    editorSaving?: boolean
+    busy?: boolean
+    onclose: () => void
+    onsave: () => void
+    onchangeKind: (kind: McpTransport['kind']) => void
+    onchangeReplacement: (value: boolean) => void
+    oninputRevision: () => void
+    onsecretInput: () => void
+  } = $props()
+
+  const { t } = getKitContext().i18n
+  const KINDS: McpTransport['kind'][] = ['http', 'stdio']
+  const ARGS_PLACEHOLDER = '-y\n@modelcontextprotocol/server-filesystem'
+</script>
+
+<Dialog.Root
+  bind:open
+  onOpenChange={(isOpen) => {
+    if (!isOpen) onclose()
+  }}
+>
+  <Dialog.Content class="sm:max-w-xl" oninput={oninputRevision}>
+    <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) => onchangeKind(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={onchangeReplacement}
+          />
+          <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={onsecretInput}
+          />
+        </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={onsecretInput}
+          />
+          <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={onsecretInput}
+          />
+          <Field.Description>{t('mcp.client.envHint')}</Field.Description>
+        </Field.Field>
+      {/if}
+    </Field.Group>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={onclose}>{t('common.cancel')}</Button>
+      <Button
+        disabled={busy ||
+          editorSaving ||
+          !name.trim() ||
+          !slug.trim() ||
+          !(kind === 'http' ? url.trim() : command.trim())}
+        onclick={onsave}>{t('mcp.client.save')}</Button
+      >
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>