@ouraihub/aether-ui 0.0.0-stage → 0.1.1

package/src/chat/ReasoningControl.svelte

@@ -0,0 +1,286 @@
+<script lang="ts">
+  import GaugeIcon from '@lucide/svelte/icons/gauge'
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
+  import { Popover } from 'bits-ui'
+  import { Button } from '#lib/components/ui/button/index.js'
+  import * as Field from '#lib/components/ui/field/index.js'
+  import type { KitI18n } from '../i18n'
+  import type { ReasoningEffort } from '../ports'
+  import { REASONING_EFFORTS } from '../providers/reasoning'
+
+  let {
+    value = 'default',
+    efforts,
+    disabled = false,
+    open = $bindable(false),
+    i18n,
+    onchange,
+    onOpenSettings,
+  }: {
+    value?: ReasoningEffort
+    efforts: readonly ReasoningEffort[]
+    disabled?: boolean
+    open?: boolean
+    i18n: KitI18n
+    onchange: (effort: ReasoningEffort) => void
+    onOpenSettings?: (() => void) | undefined
+  } = $props()
+  const id = $props.id()
+  let trigger = $state<HTMLButtonElement | null>(null)
+  const t = (key: string) => i18n.t(key)
+  const allowedEfforts = $derived(REASONING_EFFORTS.filter((effort) => efforts.includes(effort)))
+  const effectiveEffort = $derived(
+    value === 'default' || allowedEfforts.includes(value) ? value : 'default',
+  )
+  const effortLabel = $derived(t(`chat.effort.${effectiveEffort}`))
+  const effortIndex = $derived(
+    effectiveEffort === 'default'
+      ? Math.floor(allowedEfforts.length / 2)
+      : allowedEfforts.indexOf(effectiveEffort),
+  )
+  function choose(effort: ReasoningEffort) {
+    if (!disabled && (effort === 'default' || allowedEfforts.includes(effort))) onchange(effort)
+  }
+  function commit(event: Event & { currentTarget: HTMLInputElement }) {
+    const effort = allowedEfforts[Number(event.currentTarget.value)]
+    if (effort) choose(effort)
+  }
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger {disabled}>
+    {#snippet child({ props })}
+      <Button
+        {...props}
+        bind:ref={trigger}
+        variant="ghost"
+        size="sm"
+        aria-label={`${t('chat.reasoningEffort')}: ${effortLabel}`}
+      >
+        <GaugeIcon data-icon="inline-start" />
+        {effortLabel}
+        <ChevronDownIcon data-icon="inline-end" />
+      </Button>
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Portal>
+    <Popover.Content
+      class="reasoning-popover"
+      side="top"
+      align="end"
+      sideOffset={8}
+      collisionPadding={8}
+      trapFocus={false}
+      preventScroll={false}
+      aria-label={t('chat.reasoningEffort')}
+      onEscapeKeydown={(event) => {
+        if (event.isComposing) event.preventDefault()
+        event.stopPropagation()
+      }}
+      onCloseAutoFocus={(event) => {
+        event.preventDefault()
+        trigger?.focus({ preventScroll: true })
+      }}
+    >
+      <div class="reasoning-heading">
+        <p>{t('chat.reasoningStrength')}: <strong>{effortLabel}</strong></p>
+        <Button
+          variant="secondary"
+          size="xs"
+          disabled={disabled || value === 'default'}
+          onclick={() => choose('default')}>{t('chat.resetReasoning')}</Button
+        >
+      </div>
+      {#if allowedEfforts.length === 0}
+        <p class="reasoning-hint">{t('chat.reasoningUnconfigured')}</p>
+        {#if onOpenSettings}<Button
+            variant="outline"
+            size="sm"
+            onclick={() => {
+              open = false
+              onOpenSettings()
+            }}>{t('chat.openSettings')}</Button
+          >{/if}
+      {:else if allowedEfforts.length > 1}
+        <div class="reasoning-scale" aria-hidden="true">
+          <span>{t('chat.reasoningFaster')}</span><span>{t('chat.reasoningSmarter')}</span>
+        </div>
+        <div
+          class="reasoning-slider"
+          style:--reasoning-progress={`${(effortIndex / (allowedEfforts.length - 1)) * 100}%`}
+        >
+          <input
+            type="range"
+            min="0"
+            max={allowedEfforts.length - 1}
+            step="1"
+            value={effortIndex}
+            aria-label={t('chat.reasoningEffort')}
+            aria-valuetext={effortLabel}
+            {disabled}
+            oninput={commit}
+            onpointerup={(event) => {
+              if (event.button === 0) commit(event)
+            }}
+            onkeyup={(event) => {
+              if (
+                !event.isComposing &&
+                ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(
+                  event.key,
+                )
+              ) {
+                commit(event)
+              }
+            }}
+          />
+          <div class="reasoning-ticks" aria-hidden="true">
+            {#each allowedEfforts as effort, index (effort)}
+              <span
+                class="reasoning-tick"
+                data-effort={effort}
+                class:current={index === effortIndex}
+                style:left={`${(index / (allowedEfforts.length - 1)) * 100}%`}
+              ></span>
+            {/each}
+          </div>
+        </div>
+      {:else}
+        <Field.FieldSet {disabled}>
+          <Field.FieldLegend class="sr-only">{t('chat.reasoningEffort')}</Field.FieldLegend>
+          {#each ['default' as const, ...allowedEfforts] as effort (effort)}
+            <label class="reasoning-option">
+              <input
+                type="radio"
+                name={id}
+                value={effort}
+                checked={effectiveEffort === effort}
+                onchange={() => choose(effort)}
+              />
+              {t(`chat.effort.${effort}`)}
+            </label>
+          {/each}
+        </Field.FieldSet>
+      {/if}
+      {#if effectiveEffort === 'default'}<p class="reasoning-hint">
+          {t('chat.reasoningDefaultHint')}
+        </p>{/if}
+    </Popover.Content>
+  </Popover.Portal>
+</Popover.Root>
+
+<style>
+  :global(.reasoning-popover) {
+    box-sizing: border-box;
+    z-index: 210;
+    width: min(18rem, calc(100vw - 1rem));
+    max-height: calc(100dvh - 1rem);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--kit-radius, var(--radius));
+    background: var(--color-popover);
+    color: var(--color-popover-foreground);
+    box-shadow: 0 4px 12px color-mix(in oklch, var(--color-foreground) 12%, transparent);
+    font-size: var(--kit-font-size-sm, 0.8125rem);
+  }
+  .reasoning-heading,
+  .reasoning-scale {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .reasoning-heading p,
+  .reasoning-hint {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+  .reasoning-scale,
+  .reasoning-hint {
+    color: var(--color-muted-foreground);
+  }
+  :global(.reasoning-popover input) {
+    accent-color: var(--color-primary);
+  }
+  .reasoning-slider {
+    position: relative;
+    height: 1.75rem;
+    display: flex;
+    align-items: center;
+  }
+  :global(.reasoning-slider input[type='range']) {
+    appearance: none;
+    width: 100%;
+    height: 1.75rem;
+    margin: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+  :global(.reasoning-slider input::-webkit-slider-runnable-track) {
+    height: 0.375rem;
+    border-radius: 999px;
+    background: linear-gradient(
+      to right,
+      var(--color-primary) var(--reasoning-progress),
+      var(--color-muted) var(--reasoning-progress)
+    );
+  }
+  :global(.reasoning-slider input::-moz-range-track) {
+    height: 0.375rem;
+    border-radius: 999px;
+    background: linear-gradient(
+      to right,
+      var(--color-primary) var(--reasoning-progress),
+      var(--color-muted) var(--reasoning-progress)
+    );
+  }
+  :global(.reasoning-slider input::-webkit-slider-thumb) {
+    appearance: none;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin-top: -0.375rem;
+    border: 1px solid var(--color-border);
+    border-radius: 50%;
+    background: var(--color-popover);
+  }
+  :global(.reasoning-slider input::-moz-range-thumb) {
+    width: 1.125rem;
+    height: 1.125rem;
+    box-sizing: border-box;
+    border: 1px solid var(--color-border);
+    border-radius: 50%;
+    background: var(--color-popover);
+  }
+  .reasoning-ticks {
+    position: absolute;
+    inset: 50% 0.5625rem auto;
+    pointer-events: none;
+  }
+  .reasoning-tick {
+    position: absolute;
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 50%;
+    background: var(--color-popover);
+    transform: translate(-50%, -50%);
+  }
+  .reasoning-tick.current {
+    visibility: hidden;
+  }
+  :global(.reasoning-slider input:disabled) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  :global(.reasoning-popover input:focus-visible) {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+  .reasoning-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+</style>

package/src/chat/SkillPicker.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  // Per-run skill selection above the composer (docs/16 §4.2): metadata only, selected chars / budget.
+  // `changed` (a `skill_changed` rejection) opens the current text for re-confirmation (docs/14 §5).
+  import * as Select from '#lib/components/ui/select/index.js'
+  import { cn } from '#lib/utils.js'
+  import { getKitContext } from '../context'
+  import { isKitClientError } from '../ports'
+  import type { SkillDto, SkillMeta, SkillRef, SkillsPort } from '../ports'
+  import SkillPreviewDialog from '../skills/SkillPreviewDialog.svelte'
+
+  let {
+    port,
+    value,
+    budget,
+    changed,
+    onchange,
+    onresolved,
+  }: {
+    port: SkillsPort
+    value: SkillRef[]
+    /** `Budget.skills_chars` of the backend. */
+    budget: number
+    /** Skill id from a `skill_changed` rejection, or null. */
+    changed: string | null
+    onchange: (refs: SkillRef[]) => void
+    onresolved: () => void
+  } = $props()
+
+  const { i18n, notify } = getKitContext()
+  const { t } = i18n
+  let skills = $state<SkillMeta[]>([])
+  let reconfirm = $state<SkillDto | null>(null)
+  let reconfirmOpen = $state(false)
+
+  const ids = $derived(value.map((r) => r.id))
+  const chars = $derived(
+    skills.filter((s) => ids.includes(s.id)).reduce((sum, s) => sum + s.bodyChars, 0),
+  )
+
+  async function refresh() {
+    try {
+      skills = await port.list()
+    } catch (error) {
+      notify.toast('error', t(`errors.${isKitClientError(error) ? error.code : 'internal'}`))
+    }
+  }
+  void refresh()
+
+  // Kept refs keep their pinned revision: an edited skill is caught by `snapshot`, not silently re-pinned.
+  function pick(next: string[]) {
+    onchange(
+      next.flatMap((id) => {
+        const kept = value.find((r) => r.id === id)
+        const meta = skills.find((s) => s.id === id)
+        return kept ? [kept] : meta ? [{ id, revision: meta.revision }] : []
+      }),
+    )
+  }
+
+  $effect(() => {
+    if (changed !== null) void openChanged(changed)
+  })
+
+  async function openChanged(id: string) {
+    void refresh()
+    try {
+      reconfirm = await port.get(id)
+      reconfirmOpen = true
+    } catch {
+      // Deleted since it was selected: drop it.
+      onchange(value.filter((r) => r.id !== id))
+      notify.toast('info', t('skills.removed'))
+      onresolved()
+    }
+  }
+
+  function confirmChanged() {
+    const skill = reconfirm
+    if (skill)
+      onchange(value.map((r) => (r.id === skill.id ? { id: r.id, revision: skill.revision } : r)))
+    reconfirm = null
+    reconfirmOpen = false
+    onresolved()
+  }
+
+  // Closing the dialog without confirming deselects the changed skill.
+  $effect(() => {
+    if (!reconfirmOpen && reconfirm) {
+      const id = reconfirm.id
+      reconfirm = null
+      onchange(value.filter((r) => r.id !== id))
+      onresolved()
+    }
+  })
+</script>
+
+<div class="flex min-w-0 max-w-full flex-wrap items-center gap-2 text-kit-sm">
+  <Select.Root
+    type="multiple"
+    value={ids}
+    onValueChange={pick}
+    onOpenChange={(open) => {
+      if (open) void refresh()
+    }}
+  >
+    <Select.Trigger size="sm" class="max-w-full shrink-0" aria-label={t('skills.picker')}>
+      {value.length === 0
+        ? t('skills.picker_none')
+        : t('skills.picker_count', { count: value.length })}
+    </Select.Trigger>
+    <Select.Content>
+      <Select.Group>
+        {#each skills as skill (skill.id)}
+          <Select.Item value={skill.id} label={skill.name} />
+        {:else}
+          <p class="text-muted-foreground px-2 py-1">{t('skills.empty')}</p>
+        {/each}
+      </Select.Group>
+    </Select.Content>
+  </Select.Root>
+  <span
+    class={cn('max-w-full shrink-0 text-muted-foreground', chars > budget && 'text-destructive')}
+  >
+    {t('skills.budget', { chars, budget })}
+  </span>
+</div>
+<SkillPreviewDialog
+  bind:open={reconfirmOpen}
+  skill={reconfirm}
+  title={t('skills.changed_title')}
+  confirmLabel={t('skills.use')}
+  onconfirm={confirmChanged}
+/>

package/src/chat/ToolCallItem.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  // One tool call collapsed to a line (docs/16 §4.2): calling, then its outcome and summary.
+  import { getKitContext } from '../context'
+  import type { ToolItem } from './run-session.svelte'
+
+  let { tool }: { tool: ToolItem } = $props()
+  const { t } = getKitContext().i18n
+  const name = $derived(tool.server ? `${tool.name} · ${tool.server}` : tool.name)
+</script>
+
+<p class="text-muted-foreground truncate text-kit-sm">
+  {#if tool.outcome === null}
+    {t('chat.tool.calling', { name })}
+  {:else if tool.outcome === 'denied'}
+    {t('chat.tool.denied', { name })}
+  {:else if tool.outcome === 'unknown'}
+    {t('chat.tool.unknown', { name })}
+  {:else if tool.outcome === 'error'}
+    {t('chat.tool.error', { name, summary: tool.summary })}
+  {:else}
+    {t('chat.tool.ok', { name, summary: tool.summary })}
+  {/if}
+</p>

package/src/chat/UsageControl.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import { Popover } from 'bits-ui'
+  import Settings2Icon from '@lucide/svelte/icons/settings-2'
+  import { Button } from '#lib/components/ui/button/index.js'
+  import type { KitI18n } from '../i18n'
+
+  let {
+    context = null,
+    i18n,
+    settings,
+    details,
+    open = $bindable(false),
+  }: {
+    context?: {
+      tokens: number | null
+      contextWindow: number | null
+      modelName: string
+      source: 'reported' | 'estimated' | 'unknown'
+    } | null
+    i18n: KitI18n
+    settings?: Snippet | undefined
+    details?: Snippet | undefined
+    open?: boolean
+  } = $props()
+  const t = (key: string) => i18n.t(key)
+  const percent = $derived(
+    context?.tokens != null && context.contextWindow != null && context.contextWindow > 0
+      ? Math.min(100, Math.max(0, (context.tokens / context.contextWindow) * 100))
+      : null,
+  )
+  const format = (value: number | null | undefined) =>
+    value == null ? t('chat.unknown') : value.toLocaleString(i18n.locale)
+  let trigger = $state<HTMLButtonElement | null>(null)
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      <Button
+        {...props}
+        bind:ref={trigger}
+        variant="ghost"
+        size="icon-sm"
+        aria-label={t('chat.usageSettings')}
+        title={t('chat.usageSettings')}
+      >
+        <Settings2Icon aria-hidden="true" />
+      </Button>
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Portal>
+    <Popover.Content
+      class="usage-popover"
+      side="top"
+      align="end"
+      sideOffset={8}
+      collisionPadding={12}
+      aria-label={t('chat.usageSettings')}
+      trapFocus={false}
+      preventScroll={false}
+      onEscapeKeydown={(event) => {
+        if (event.isComposing) event.preventDefault()
+        event.stopPropagation()
+      }}
+      onCloseAutoFocus={(event) => {
+        event.preventDefault()
+        trigger?.focus({ preventScroll: true })
+      }}
+    >
+      <section class="context-summary" aria-label={t('chat.contextUsage')}>
+        <h3>{t('chat.contextUsage')}</h3>
+        {#if percent !== null}
+          <meter min="0" max="100" value={percent} aria-label={t('chat.contextUsage')}></meter>
+        {/if}
+        <div class="context-values">
+          <span
+            >{format(context?.tokens)} / {format(context?.contextWindow)}{#if percent !== null}
+              ({Math.round(percent)}%){/if}</span
+          >
+          {#if context?.modelName}<span class="context-model" title={context.modelName}
+              >{context.modelName}</span
+            >{/if}
+        </div>
+        <small
+          >{t(
+            context?.source === 'reported'
+              ? 'chat.reported'
+              : context?.source === 'estimated'
+                ? 'chat.estimated'
+                : 'chat.unknown',
+          )}</small
+        >
+      </section>
+      {#if settings}<section class="usage-settings" aria-label={t('chat.runSettings')}>
+          <h3>{t('chat.runSettings')}</h3>
+          {@render settings()}
+        </section>{/if}
+      {#if details}<details class="usage-more">
+          <summary>{t('chat.usage')}</summary>
+          <div class="usage-more-content">{@render details()}</div>
+        </details>{/if}
+    </Popover.Content>
+  </Popover.Portal>
+</Popover.Root>
+
+<style>
+  /* Hallmark · component: usage-settings · theme: inherited Aether
+   * Pre-emit critique: Philosophy 5 · Hierarchy 5 · Execution 4 · Specificity 5 · Restraint 5 · Variety 4 */
+  :global(.usage-popover) {
+    box-sizing: border-box;
+    z-index: 210;
+    width: min(360px, calc(100vw - 24px));
+    max-height: min(70dvh, var(--bits-popover-content-available-height));
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--kit-radius, var(--radius));
+    background: var(--color-popover);
+    color: var(--color-popover-foreground);
+    font-size: var(--kit-font-size-sm, 0.8125rem);
+  }
+  h3 {
+    margin: 0;
+    font: inherit;
+    font-weight: 500;
+  }
+  .context-summary {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 0;
+  }
+  .context-values {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    color: var(--color-muted-foreground);
+    font-variant-numeric: tabular-nums;
+  }
+  .context-values > span:first-child {
+    flex: none;
+  }
+  .context-model {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  small {
+    color: var(--color-muted-foreground);
+    font-size: 11px;
+  }
+  meter {
+    appearance: none;
+    width: 100%;
+    height: 6px;
+    border: 0;
+    border-radius: 999px;
+    background: var(--color-muted);
+  }
+  meter::-webkit-meter-bar {
+    border: 0;
+    border-radius: 999px;
+    background: var(--color-muted);
+  }
+  meter::-webkit-meter-optimum-value {
+    background: var(--color-primary);
+    border-radius: 999px;
+  }
+  meter::-moz-meter-bar {
+    background: var(--color-primary);
+    border-radius: 999px;
+  }
+  .usage-settings {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    border-top: 1px solid var(--color-border);
+    padding-top: 12px;
+  }
+  .usage-more {
+    border-top: 1px solid var(--color-border);
+    padding-top: 12px;
+  }
+  summary {
+    cursor: pointer;
+    color: var(--color-muted-foreground);
+  }
+  summary:hover {
+    color: var(--color-foreground);
+  }
+  summary:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+  .usage-more-content {
+    padding-top: 12px;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  @media (max-width: 375px) {
+    .context-values {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .context-model {
+      max-width: 100%;
+    }
+  }
+</style>