@ouraihub/aether-ui 0.0.0-stage → 0.1.0

package/src/logs/LogPanel.svelte

@@ -0,0 +1,97 @@
+<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,56 @@
+<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 }))
+}