@ouraihub/aether-ui 0.0.0-stage → 0.1.1

package/fixtures/sse/openai-responses/text.sse

@@ -0,0 +1,33 @@
+event: response.created
+data: {"type":"response.created","sequence_number":0,"response":{"id":"resp_67ccd2bed1ec8190b14f964abc0542670bb6a6b452d3795b","object":"response","created_at":1741476542,"status":"in_progress","model":"gpt-4.1-2025-04-14","output":[],"incomplete_details":null,"usage":null}}
+
+event: response.in_progress
+data: {"type":"response.in_progress","sequence_number":1,"response":{"id":"resp_67ccd2bed1ec8190b14f964abc0542670bb6a6b452d3795b","object":"response","created_at":1741476542,"status":"in_progress","model":"gpt-4.1-2025-04-14","output":[],"incomplete_details":null,"usage":null}}
+
+event: response.output_item.added
+data: {"type":"response.output_item.added","sequence_number":2,"output_index":0,"item":{"id":"msg_67ccd2bf17f0819081ff3bb2cf6508e60bb6a6b452d3795b","type":"message","status":"in_progress","role":"assistant","content":[]}}
+
+event: response.content_part.added
+data: {"type":"response.content_part.added","sequence_number":3,"item_id":"msg_67ccd2bf17f0819081ff3bb2cf6508e60bb6a6b452d3795b","output_index":0,"content_index":0,"part":{"type":"output_text","text":"","annotations":[]}}
+
+event: response.output_text.delta
+data: {"type":"response.output_text.delta","sequence_number":4,"item_id":"msg_67ccd2bf17f0819081ff3bb2cf6508e60bb6a6b452d3795b","output_index":0,"content_index":0,"delta":"Hello"}
+
+event: response.output_text.delta
+data: {"type":"response.output_text.delta","sequence_number":5,"item_id":"msg_67ccd2bf17f0819081ff3bb2cf6508e60bb6a6b452d3795b","output_index":0,"content_index":0,"delta":"! How can I"}
+
+event: response.output_text.delta
+data: {"type":"response.output_text.delta","sequence_number":6,"item_id":"msg_67ccd2bf17f0819081ff3bb2cf6508e60bb6a6b452d3795b","output_index":0,"content_index":0,"delta":" help you today?"}
+
+event: response.output_text.done
+data: {"type":"response.output_text.done","sequence_number":7,"item_id":"msg_67ccd2bf17f0819081ff3bb2cf6508e60bb6a6b452d3795b","output_index":0,"content_index":0,"text":"Hello! How can I help you today?"}
+
+event: response.content_part.done
+data: {"type":"response.content_part.done","sequence_number":8,"item_id":"msg_67ccd2bf17f0819081ff3bb2cf6508e60bb6a6b452d3795b","output_index":0,"content_index":0,"part":{"type":"output_text","text":"Hello! How can I help you today?","annotations":[]}}
+
+event: response.output_item.done
+data: {"type":"response.output_item.done","sequence_number":9,"output_index":0,"item":{"id":"msg_67ccd2bf17f0819081ff3bb2cf6508e60bb6a6b452d3795b","type":"message","status":"completed","role":"assistant","content":[{"type":"output_text","text":"Hello! How can I help you today?","annotations":[]}]}}
+
+event: response.completed
+data: {"type":"response.completed","sequence_number":10,"response":{"id":"resp_67ccd2bed1ec8190b14f964abc0542670bb6a6b452d3795b","object":"response","created_at":1741476542,"status":"completed","model":"gpt-4.1-2025-04-14","output":[],"incomplete_details":null,"usage":{"input_tokens":37,"input_tokens_details":{"cached_tokens":0},"output_tokens":11,"output_tokens_details":{"reasoning_tokens":0},"total_tokens":48}}}
+

package/fixtures/sse/openai-responses/truncated.sse

@@ -0,0 +1,30 @@
+event: response.created
+data: {"type":"response.created","sequence_number":0,"response":{"id":"resp_67ccd2bed1ec8190b14f964abc0542670bb6a6b452d3795b","object":"response","created_at":1741476542,"status":"in_progress","model":"gpt-4.1-2025-04-14","output":[],"incomplete_details":null,"usage":null}}
+
+event: response.in_progress
+data: {"type":"response.in_progress","sequence_number":1,"response":{"id":"resp_67ccd2bed1ec8190b14f964abc0542670bb6a6b452d3795b","object":"response","created_at":1741476542,"status":"in_progress","model":"gpt-4.1-2025-04-14","output":[],"incomplete_details":null,"usage":null}}
+
+event: response.output_item.added
+data: {"type":"response.output_item.added","sequence_number":2,"output_index":0,"item":{"id":"msg_67ccd3a9da748190baa7f1570fe91ac604becb25c45c1d41","type":"message","status":"in_progress","role":"assistant","content":[]}}
+
+event: response.content_part.added
+data: {"type":"response.content_part.added","sequence_number":3,"item_id":"msg_67ccd3a9da748190baa7f1570fe91ac604becb25c45c1d41","output_index":0,"content_index":0,"part":{"type":"output_text","text":"","annotations":[]}}
+
+event: response.output_text.delta
+data: {"type":"response.output_text.delta","sequence_number":4,"item_id":"msg_67ccd3a9da748190baa7f1570fe91ac604becb25c45c1d41","output_index":0,"content_index":0,"delta":"Here is a long story. Once upon"}
+
+event: response.output_text.delta
+data: {"type":"response.output_text.delta","sequence_number":5,"item_id":"msg_67ccd3a9da748190baa7f1570fe91ac604becb25c45c1d41","output_index":0,"content_index":0,"delta":" a time there"}
+
+event: response.output_text.done
+data: {"type":"response.output_text.done","sequence_number":6,"item_id":"msg_67ccd3a9da748190baa7f1570fe91ac604becb25c45c1d41","output_index":0,"content_index":0,"text":"Here is a long story. Once upon a time there"}
+
+event: response.content_part.done
+data: {"type":"response.content_part.done","sequence_number":7,"item_id":"msg_67ccd3a9da748190baa7f1570fe91ac604becb25c45c1d41","output_index":0,"content_index":0,"part":{"type":"output_text","text":"Here is a long story. Once upon a time there","annotations":[]}}
+
+event: response.output_item.done
+data: {"type":"response.output_item.done","sequence_number":8,"output_index":0,"item":{"id":"msg_67ccd3a9da748190baa7f1570fe91ac604becb25c45c1d41","type":"message","status":"completed","role":"assistant","content":[{"type":"output_text","text":"Here is a long story. Once upon a time there","annotations":[]}]}}
+
+event: response.incomplete
+data: {"type":"response.incomplete","sequence_number":9,"response":{"id":"resp_67ccd2bed1ec8190b14f964abc0542670bb6a6b452d3795b","object":"response","created_at":1741476542,"status":"incomplete","model":"gpt-4.1-2025-04-14","output":[],"incomplete_details":{"reason":"max_output_tokens"},"usage":{"input_tokens":30,"input_tokens_details":{"cached_tokens":0},"output_tokens":16,"output_tokens_details":{"reasoning_tokens":0},"total_tokens":46}}}
+

package/fixtures/sse/openai-responses/upstream-error.sse

@@ -0,0 +1,9 @@
+event: response.created
+data: {"type":"response.created","sequence_number":0,"response":{"id":"resp_67ccd2bed1ec8190b14f964abc0542670bb6a6b452d3795b","object":"response","created_at":1741476542,"status":"in_progress","model":"gpt-4.1-2025-04-14","output":[],"incomplete_details":null,"usage":null}}
+
+event: response.in_progress
+data: {"type":"response.in_progress","sequence_number":1,"response":{"id":"resp_67ccd2bed1ec8190b14f964abc0542670bb6a6b452d3795b","object":"response","created_at":1741476542,"status":"in_progress","model":"gpt-4.1-2025-04-14","output":[],"incomplete_details":null,"usage":null}}
+
+event: response.failed
+data: {"type":"response.failed","sequence_number":2,"response":{"id":"resp_67ccd2bed1ec8190b14f964abc0542670bb6a6b452d3795b","object":"response","created_at":1741476542,"status":"failed","model":"gpt-4.1-2025-04-14","output":[],"incomplete_details":null,"usage":null,"error":{"code":"server_error","message":"The model failed to generate a response."}}}
+

package/package.json

@@ -1,6 +1,74 @@
 {
   "name": "@ouraihub/aether-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "license": "LGPL-3.0-only",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ouraihub/Aether.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "imports": {
+    "#lib/*": "./src/*"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./ports": "./src/ports/index.ts",
+    "./tauri": "./src/tauri/index.ts",
+    "./web": "./src/web/index.ts",
+    "./providers": "./src/providers/index.ts",
+    "./chat": "./src/chat/index.ts",
+    "./search": "./src/search/index.ts",
+    "./skills": "./src/skills/index.ts",
+    "./mcp": "./src/mcp/index.ts",
+    "./logs": "./src/logs/index.ts",
+    "./styles.css": "./src/styles/kit.css",
+    "./tokens.css": "./src/styles/tokens.css",
+    "./fixtures/*": "./fixtures/*"
+  },
+  "peerDependencies": {
+    "svelte": "^5.57.1"
+  },
+  "dependencies": {
+    "@ouraihub/aether-contracts": "0.1.1",
+    "@internationalized/date": "3.12.4",
+    "@lucide/svelte": "0.561.0",
+    "@tauri-apps/api": "2.11.1",
+    "bits-ui": "2.19.5",
+    "cn": "0.4.0",
+    "dompurify": "3.4.16",
+    "marked": "18.1.0",
+    "mode-watcher": "1.1.0",
+    "shadcn-svelte": "1.7.0",
+    "svelte-sonner": "1.2.1",
+    "tailwind-variants": "3.3.1",
+    "tw-animate-css": "1.4.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "7.3.1",
+    "@tailwindcss/vite": "4.3.3",
+    "@testing-library/svelte": "5.4.2",
+    "jsdom": "30.1.2",
+    "svelte": "5.57.2",
+    "svelte-check": "4.7.6",
+    "tailwindcss": "4.3.3",
+    "typescript": "5.9.3",
+    "vite": "8.3.4",
+    "vitest": "4.1.10"
+  },
+  "files": [
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.svelte",
+    "!src/**/__tests__",
+    "fixtures"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
+    "test": "vitest run --passWithNoTests"
+  }
 }

package/src/CopyInput.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  // Input with a hover/focus copy button at the inline end; shown only when non-empty.
+  import CopyIcon from '@lucide/svelte/icons/copy'
+  import type { ComponentProps } from 'svelte'
+  import { Input } from '#lib/components/ui/input/index.js'
+  import { cn } from '#lib/utils.js'
+  import { getKitContext } from './context'
+
+  let { value = $bindable(), class: className, ...rest }: ComponentProps<typeof Input> = $props()
+  const { i18n, notify } = getKitContext()
+  const { t } = i18n
+  const text = $derived(String(value ?? '').trim())
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(text)
+      notify.toast('success', t('chat.copied'))
+    } catch {
+      notify.toast('error', t('chat.copyFailed'))
+    }
+  }
+</script>
+
+<div class={cn('group/copy relative min-w-0', className)}>
+  <Input bind:value class={cn('w-full', text && 'pr-8')} {...rest} />
+  {#if text}<button
+      type="button"
+      class="text-muted-foreground hover:text-foreground hover:bg-accent focus-visible:ring-ring/50 rounded-kit absolute top-1/2 right-1.5 inline-flex size-6 -translate-y-1/2 items-center justify-center opacity-0 transition-opacity outline-none group-focus-within/copy:opacity-100 group-hover/copy:opacity-100 focus-visible:opacity-100 focus-visible:ring-2"
+      aria-label={t('chat.copy')}
+      title={t('chat.copy')}
+      onclick={() => void copy()}><CopyIcon class="size-3.5" /></button
+    >{/if}
+</div>

package/src/KitNotifier.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  // Mounts the toaster and the single confirm dialog behind DefaultNotify (docs/16 §3).
+  import * as AlertDialog from '#lib/components/ui/alert-dialog/index.js'
+  import { Toaster } from '#lib/components/ui/sonner/index.js'
+  import type { KitI18n } from './i18n'
+  import type { DefaultNotify } from './notify.svelte'
+
+  interface Props {
+    notify: DefaultNotify
+    i18n: KitI18n
+  }
+
+  let { notify, i18n }: Props = $props()
+</script>
+
+<Toaster />
+<AlertDialog.Root open={notify.open} onOpenChange={(isOpen) => !isOpen && notify.answer(false)}>
+  <AlertDialog.Content>
+    <AlertDialog.Header>
+      <AlertDialog.Title>{notify.request?.title}</AlertDialog.Title>
+      <AlertDialog.Description>{notify.request?.body}</AlertDialog.Description>
+    </AlertDialog.Header>
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel>{i18n.t('common.cancel')}</AlertDialog.Cancel>
+      <AlertDialog.Action
+        variant={notify.request?.danger ? 'destructive' : 'default'}
+        onclick={() => notify.answer(true)}
+      >
+        {i18n.t('common.confirm')}
+      </AlertDialog.Action>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>

package/src/chat/ApprovalCard.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  // Approval of one `Ask` call (docs/16 §4.2): tool, source, arguments preview, allow once / deny.
+  import * as Alert from '#lib/components/ui/alert/index.js'
+  import { Button } from '#lib/components/ui/button/index.js'
+  import { getKitContext } from '../context'
+  import type { ToolItem } from './run-session.svelte'
+
+  let { tool, onAnswer }: { tool: ToolItem; onAnswer: (allow: boolean) => void } = $props()
+  const { t } = getKitContext().i18n
+</script>
+
+<Alert.Root aria-label={t('chat.approval.title', { name: tool.name })}>
+  <Alert.Title>{t('chat.approval.title', { name: tool.name })}</Alert.Title>
+  <Alert.Description class="flex flex-col gap-2">
+    <span
+      >{tool.server
+        ? t('chat.approval.mcp', { server: tool.server })
+        : t('chat.approval.host')}</span
+    >
+    <pre
+      class="bg-muted max-h-40 w-full overflow-auto rounded-kit-sm p-2 text-kit-xs whitespace-pre-wrap">{tool.pending}</pre>
+    <span class="flex gap-2">
+      <Button size="sm" onclick={() => onAnswer(true)}>{t('chat.approval.allow')}</Button>
+      <Button size="sm" variant="outline" onclick={() => onAnswer(false)}
+        >{t('chat.approval.deny')}</Button
+      >
+    </span>
+  </Alert.Description>
+</Alert.Root>

package/src/chat/ChatComposer.svelte

@@ -0,0 +1,277 @@
+<script lang="ts">
+  import { tick, untrack, type Snippet } from 'svelte'
+  import MaximizeIcon from '@lucide/svelte/icons/maximize-2'
+  import MinimizeIcon from '@lucide/svelte/icons/minimize-2'
+  import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
+  import SquareIcon from '@lucide/svelte/icons/square'
+  import { Button } from '#lib/components/ui/button/index.js'
+
+  let {
+    value = $bindable(''),
+    label,
+    placeholder,
+    submitLabel,
+    stopLabel = 'Stop',
+    disabled = false,
+    running = false,
+    stopping = false,
+    maxlength,
+    onsubmit,
+    onstop,
+    oninput,
+    onpaste,
+    onfiles,
+    top,
+    tools,
+    actions,
+    override,
+    expandLabel = 'Expand input',
+    collapseLabel = 'Collapse input',
+  }: {
+    value?: string | undefined
+    label: string
+    placeholder?: string | undefined
+    submitLabel: string
+    stopLabel?: string | undefined
+    disabled?: boolean | undefined
+    running?: boolean | undefined
+    stopping?: boolean | undefined
+    maxlength?: number | undefined
+    onsubmit: () => void
+    onstop?: (() => void) | undefined
+    oninput?: (() => void) | undefined
+    onpaste?: ((event: ClipboardEvent) => void) | undefined
+    onfiles?: ((files: File[]) => void) | undefined
+    top?: Snippet | undefined
+    tools?: Snippet | undefined
+    actions?: Snippet | undefined
+    override?: Snippet | undefined
+    expandLabel?: string | undefined
+    collapseLabel?: string | undefined
+  } = $props()
+  let expanded = $state(false)
+  let textarea = $state<HTMLTextAreaElement | null>(null)
+  let normal = $state<HTMLFormElement | null>(null)
+  let replacement = $state<HTMLDivElement | null>(null)
+  let restoreFocus: HTMLElement | null = null
+  let overridden = false
+  function submit() {
+    if (!disabled && !running && !override) onsubmit()
+  }
+  function resize() {
+    if (!textarea) return
+    textarea.style.height = 'auto'
+    textarea.style.height = `${textarea.scrollHeight}px`
+  }
+  $effect(() => {
+    void value
+    void expanded
+    void override
+    void tick().then(resize)
+  })
+  $effect.pre(() => {
+    const next = !!override
+    untrack(() => {
+      if (next && !overridden) {
+        const active = document.activeElement
+        restoreFocus = active instanceof HTMLElement && normal?.contains(active) ? active : null
+      } else if (!next && overridden) {
+        const active = document.activeElement
+        const shouldRestore =
+          active === document.body || !!(active && replacement?.contains(active))
+        const target = restoreFocus
+        void tick().then(() => {
+          if (
+            shouldRestore &&
+            target?.isConnected &&
+            (document.activeElement === document.body || document.activeElement === active)
+          )
+            target.focus({ preventScroll: true })
+        })
+        restoreFocus = null
+      }
+      overridden = next
+    })
+  })
+</script>
+
+<div class="composer-shell">
+  <form
+    class="composer"
+    class:expanded
+    bind:this={normal}
+    hidden={!!override}
+    inert={!!override}
+    onsubmit={(event) => {
+      event.preventDefault()
+      submit()
+    }}
+    ondragover={(event) => {
+      if (onfiles && event.dataTransfer?.types.includes('Files')) event.preventDefault()
+    }}
+    ondrop={(event) => {
+      if (!onfiles || !event.dataTransfer?.files.length) return
+      event.preventDefault()
+      onfiles([...event.dataTransfer.files])
+    }}
+  >
+    <div class="expand-control">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        aria-label={expanded ? collapseLabel : expandLabel}
+        title={expanded ? collapseLabel : expandLabel}
+        aria-expanded={expanded}
+        onmousedown={(event) => event.preventDefault()}
+        onclick={() => {
+          expanded = !expanded
+        }}
+      >
+        {#if expanded}<MinimizeIcon />{:else}<MaximizeIcon />{/if}
+      </Button>
+    </div>
+    {#if top}<div class="composer-top">{@render top()}</div>{/if}
+    <textarea
+      bind:this={textarea}
+      bind:value
+      rows="2"
+      aria-label={label}
+      {placeholder}
+      {maxlength}
+      oninput={() => {
+        resize()
+        oninput?.()
+      }}
+      {onpaste}
+      onkeydown={(event) => {
+        if (event.key === 'Escape' && expanded && !event.isComposing && !event.defaultPrevented) {
+          event.preventDefault()
+          event.stopPropagation()
+          expanded = false
+          return
+        }
+        if (
+          event.key === 'Enter' &&
+          (event.ctrlKey || event.metaKey) &&
+          !event.isComposing &&
+          event.keyCode !== 229
+        ) {
+          event.preventDefault()
+          if (!event.repeat) submit()
+        }
+      }}></textarea>
+    <div class="composer-tools">
+      <div class="tool-group">
+        {#if tools}{@render tools()}{/if}
+      </div>
+      <div class="tool-group send-tools">
+        {#if actions}{@render actions()}{/if}
+        {#if running && onstop}<Button
+            type="button"
+            variant="destructive"
+            size="icon-sm"
+            disabled={stopping}
+            aria-label={stopLabel}
+            title={stopLabel}
+            onclick={onstop}><SquareIcon /></Button
+          >
+        {:else}<Button
+            type="submit"
+            size="icon-sm"
+            disabled={disabled || running}
+            aria-label={submitLabel}
+            title={submitLabel}><ArrowUpIcon /></Button
+          >{/if}
+      </div>
+    </div>
+  </form>
+  {#if override}<div class="composer-override" bind:this={replacement}>
+      {@render override()}
+    </div>{/if}
+</div>
+
+<style>
+  /* Hallmark · component: integrated composer · theme: host semantic tokens */
+  .composer-shell {
+    min-width: 0;
+  }
+  .composer {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 0;
+    max-height: 68cqh;
+    overflow-y: auto;
+    border: 1px solid var(--color-border);
+    border-radius: calc(var(--kit-radius, var(--radius)) * 1.5);
+    padding: 0.5rem;
+    background: var(--color-background);
+  }
+  .composer[hidden] {
+    display: none;
+  }
+  .expand-control {
+    position: absolute;
+    top: 0.25rem;
+    right: 0.25rem;
+  }
+  .expand-control :global(button),
+  .composer-tools :global(button) {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .composer-top {
+    padding-right: 2.75rem;
+    min-width: 0;
+  }
+  textarea {
+    box-sizing: border-box;
+    display: block;
+    flex-shrink: 0;
+    width: 100%;
+    min-width: 0;
+    min-height: 3.5rem;
+    max-height: 35cqh;
+    resize: none;
+    padding: 0.5rem 2.75rem 0.5rem 0.5rem;
+    border: 0;
+    border-radius: var(--kit-radius-sm, var(--radius));
+    background: transparent;
+    color: var(--color-foreground);
+    font: inherit;
+    line-height: 1.5;
+    overflow-y: auto;
+  }
+  textarea::placeholder {
+    color: var(--color-muted-foreground);
+  }
+  textarea:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: -2px;
+  }
+  .expanded textarea {
+    min-height: 55cqh;
+    max-height: 55cqh;
+  }
+  .composer-tools,
+  .tool-group {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+  .composer-tools {
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+  .send-tools {
+    margin-left: auto;
+  }
+  .composer-override {
+    min-width: 0;
+  }
+</style>