@ouraihub/aether-ui 0.1.0 → 0.1.2

package/src/chat/ReasoningSlider.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+  // The one discrete effort rail: a tone gradient fill and a pill thumb carrying the level's
+  // mark and name over a native range input (docs/16, 31).
+  import type { ReasoningEffort } from '../ports'
+  import { effortTone } from './model-effort'
+  import PathIcon from './icons/PathIcon.svelte'
+  import { effortPath } from './icons/effort-icons'
+
+  let {
+    efforts,
+    value,
+    defaultIndex = 0,
+    disabled = false,
+    label,
+    valueText,
+    onchange,
+  }: {
+    /** Declared levels in display order; needs at least two. */
+    efforts: readonly ReasoningEffort[]
+    value: ReasoningEffort
+    /** Visual position for `default`; never written back. */
+    defaultIndex?: number
+    disabled?: boolean
+    label: string
+    valueText: string
+    onchange: (effort: ReasoningEffort) => void
+  } = $props()
+  const found = $derived(efforts.indexOf(value))
+  const index = $derived(found >= 0 ? found : defaultIndex)
+  const last = $derived(Math.max(1, efforts.length - 1))
+  const tone = $derived(effortTone(found >= 0 ? value : 'default'))
+  const TONE_COLOR = {
+    fast: 'var(--color-info)',
+    regular: 'var(--color-primary)',
+    deep: 'var(--color-warning)',
+  } as const
+  const fill = $derived(
+    `linear-gradient(to right, ${efforts
+      .map((effort, at) => `${TONE_COLOR[effortTone(effort)]} ${(at / last) * 100}%`)
+      .join(', ')})`,
+  )
+  function commit(event: Event & { currentTarget: HTMLInputElement }) {
+    const effort = efforts[Number(event.currentTarget.value)]
+    if (effort && !disabled) onchange(effort)
+  }
+</script>
+
+<div
+  class="reasoning-slider"
+  data-tone={tone}
+  style:--reasoning-fraction={index / last}
+  style:--reasoning-fill={fill}
+>
+  <div class="reasoning-track" aria-hidden="true"><span class="reasoning-fill"></span></div>
+  <input
+    type="range"
+    min="0"
+    max={efforts.length - 1}
+    step="1"
+    value={index}
+    aria-label={label}
+    aria-valuetext={valueText}
+    {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)
+    }}
+  />
+  <span class="reasoning-thumb" aria-hidden="true"
+    ><PathIcon d={effortPath(found >= 0 ? value : 'default')} class="reasoning-icon" /><span
+      >{valueText}</span
+    ></span
+  >
+</div>
+
+<style>
+  /* The native thumb is as wide as the pill, so the range maps 1:1 onto the inset track. */
+  .reasoning-slider {
+    --reasoning-color: var(--color-primary);
+    --reasoning-pill: 4.25rem;
+    position: relative;
+    height: 2rem;
+  }
+  .reasoning-slider[data-tone='fast'] {
+    --reasoning-color: var(--color-info);
+  }
+  .reasoning-slider[data-tone='deep'] {
+    --reasoning-color: var(--color-warning);
+  }
+  .reasoning-track {
+    position: absolute;
+    top: 50%;
+    inset-inline: calc(var(--reasoning-pill) / 2);
+    height: 0.75rem;
+    overflow: hidden;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-secondary, var(--color-muted));
+    transform: translateY(-50%);
+  }
+  .reasoning-fill {
+    position: absolute;
+    inset: 0;
+    background: var(--reasoning-fill);
+    clip-path: inset(0 calc((1 - var(--reasoning-fraction)) * 100%) 0 0);
+  }
+  .reasoning-thumb {
+    position: absolute;
+    top: 50%;
+    left: calc(
+      var(--reasoning-pill) / 2 + (100% - var(--reasoning-pill)) * var(--reasoning-fraction)
+    );
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    box-sizing: border-box;
+    width: var(--reasoning-pill);
+    height: 1.5rem;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-popover);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
+    color: var(--color-foreground);
+    font-size: var(--kit-font-size-xs, 0.75rem);
+    white-space: nowrap;
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+  }
+  .reasoning-thumb :global(.reasoning-icon) {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex-shrink: 0;
+    color: var(--reasoning-color);
+  }
+  input[type='range'] {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    appearance: none;
+    background: transparent;
+    opacity: 0;
+    cursor: pointer;
+  }
+  input::-webkit-slider-thumb {
+    appearance: none;
+    width: var(--reasoning-pill);
+    height: 1.5rem;
+  }
+  input::-moz-range-thumb {
+    width: var(--reasoning-pill);
+    height: 1.5rem;
+    border: 0;
+  }
+  input:disabled {
+    cursor: not-allowed;
+  }
+  .reasoning-slider:has(input:disabled) {
+    opacity: 0.5;
+  }
+  .reasoning-slider:has(input:focus-visible) .reasoning-thumb {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+</style>

package/src/chat/SkillPicker.svelte

@@ -33,7 +33,9 @@
   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))
+  const chars = $derived(
+    skills.filter((s) => ids.includes(s.id)).reduce((sum, s) => sum + s.bodyChars, 0),
+  )
 
   async function refresh() {
     try {
@@ -74,7 +76,8 @@
 
   function confirmChanged() {
     const skill = reconfirm
-    if (skill) onchange(value.map((r) => (r.id === skill.id ? { id: r.id, revision: skill.revision } : r)))
+    if (skill)
+      onchange(value.map((r) => (r.id === skill.id ? { id: r.id, revision: skill.revision } : r)))
     reconfirm = null
     reconfirmOpen = false
     onresolved()
@@ -91,7 +94,7 @@
   })
 </script>
 
-<div class="flex items-center gap-2 text-kit-sm">
+<div class="flex min-w-0 max-w-full flex-wrap items-center gap-2 text-kit-sm">
   <Select.Root
     type="multiple"
     value={ids}
@@ -100,8 +103,10 @@
       if (open) void refresh()
     }}
   >
-    <Select.Trigger size="sm" class="w-64" aria-label={t('skills.picker')}>
-      {value.length === 0 ? t('skills.picker_none') : t('skills.picker_count', { count: value.length })}
+    <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>
@@ -113,7 +118,10 @@
       </Select.Group>
     </Select.Content>
   </Select.Root>
-  <span class={cn('text-muted-foreground', chars > budget && 'text-destructive')}>
+  <span
+    data-composer-capacity
+    class={cn('max-w-full shrink-0 text-muted-foreground', chars > budget && 'text-destructive')}
+  >
     {t('skills.budget', { chars, budget })}
   </span>
 </div>

package/src/chat/UsageControl.svelte

@@ -0,0 +1,223 @@
+<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,
+    summary,
+    summaryLabel,
+    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
+    /** Replaces the icon with inline content; the popover, focus return and meter stay shared. */
+    summary?: Snippet | undefined
+    summaryLabel?: string | 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={summary ? 'sm' : 'icon-sm'}
+        class={summary ? 'min-w-0 max-w-full shrink px-1' : undefined}
+        aria-label={summary ? (summaryLabel ?? t('chat.contextUsage')) : t('chat.usageSettings')}
+        title={summary ? undefined : t('chat.usageSettings')}
+      >
+        {#if summary}{@render summary()}{:else}<Settings2Icon aria-hidden="true" />{/if}
+      </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>

package/src/chat/UsageDetails.svelte

@@ -1,70 +1,68 @@
 <script lang="ts">
   import type { ContextUsage, Cost, TokenUsage } from '../ports'
   import { getKitContext } from '../context'
-  import ChartNoAxesColumnIcon from '@lucide/svelte/icons/chart-no-axes-column'
-  let details = $state<HTMLDetailsElement | null>(null)
+  import ContextUsageStatus from './ContextUsageStatus.svelte'
+  import type { SpendingTurn } from './context-status'
   interface Props {
     context: ContextUsage | null
+    /** Selected model's window when the usage report has none. */
+    contextWindow?: number | null | undefined
+    /** Every turn's usage and cost; the inline summary prices only fully priced sessions. */
+    turns: readonly SpendingTurn[]
     usage: TokenUsage | null
     total: TokenUsage
     /** Last turn's cost; null when its model has no pricing or a round lacked token counts. */
     cost: Cost | null
     /** Session total per currency. */
     totalCost: Cost[]
+    open?: boolean
   }
-  let { context, usage, total, cost, totalCost }: Props = $props()
-  const { t } = getKitContext().i18n
-  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 fields = ['inputTokens', 'outputTokens', 'cacheReadTokens', 'cacheWriteTokens', 'reasoningTokens'] as const
-  const money = ({ amount, currency }: Cost) => `${currency === 'CNY' ? '¥' : '$'}${amount.toFixed(4)}`
+  let {
+    context,
+    contextWindow = null,
+    turns,
+    usage,
+    total,
+    cost,
+    totalCost,
+    open = $bindable(false),
+    modelName = '',
+  }: Props & { modelName?: string } = $props()
+  const { i18n } = getKitContext()
+  const { t } = i18n
+  const fields = [
+    'inputTokens',
+    'outputTokens',
+    'cacheReadTokens',
+    'cacheWriteTokens',
+    'reasoningTokens',
+  ] as const
+  const money = ({ amount, currency }: Cost) =>
+    `${currency === 'CNY' ? '¥' : '$'}${amount.toFixed(4)}`
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions (Esc closes this disclosure first) -->
-<details
-  class="usage-details"
-  bind:this={details}
-  aria-label={t('chat.usage')}
-  onkeydown={(e) => {
-    if (e.key === 'Escape' && details?.open) {
-      details.open = false
-      e.preventDefault()
-      e.stopPropagation()
-    }
-  }}
+<ContextUsageStatus
+  bind:open
+  {context}
+  contextWindow={contextWindow ?? null}
+  {turns}
+  {modelName}
+  {i18n}
 >
-  <summary aria-label={t('chat.usage')} title={t('chat.contextUsage')}>
-    <ChartNoAxesColumnIcon aria-hidden="true" />
-    <span>{percent === null ? t('chat.unknown') : `${percent.toFixed(1)}%`}</span>
-  </summary>
-  <div class="usage-content">
-    <p>
-      {t('chat.contextUsage')}: {context?.tokens ?? t('chat.unknown')}{#if context?.contextWindow != null}
-        / {context.contextWindow}{/if} · {t(
-        context?.source === 'reported'
-          ? 'chat.reported'
-          : context?.source === 'estimated'
-            ? 'chat.estimated'
-            : 'chat.unknown',
-      )}
-    </p>
-    {#if percent !== null}<meter min="0" max="100" value={percent} aria-label={t('chat.contextUsage')}></meter>{/if}
+  {#snippet details()}
     <table>
       <thead
         ><tr
-          ><th scope="col">{t('chat.usage')}</th><th scope="col">{t('chat.currentUsage')}</th><th scope="col"
-            >{t('chat.totalUsage')}</th
+          ><th scope="col">{t('chat.usage')}</th><th scope="col">{t('chat.currentUsage')}</th><th
+            scope="col">{t('chat.totalUsage')}</th
           ></tr
         ></thead
       >
       <tbody
         >{#each fields as field (field)}<tr
-            ><th scope="row">{t(`chat.usage.${field}`)}</th><td>{usage?.[field] ?? t('chat.unknown')}</td><td
-              >{total[field] ?? t('chat.unknown')}</td
-            ></tr
+            ><th scope="row">{t(`chat.usage.${field}`)}</th><td
+              >{usage?.[field] ?? t('chat.unknown')}</td
+            ><td>{total[field] ?? t('chat.unknown')}</td></tr
           >{/each}<tr
           ><th scope="row">{t('chat.cost')}</th><td>{cost ? money(cost) : t('chat.unknown')}</td><td
             >{totalCost.length ? totalCost.map(money).join(' + ') : t('chat.unknown')}</td
@@ -73,51 +71,10 @@
       >
     </table>
     <p>{t('chat.usageHint')}</p>
-  </div>
-</details>
+  {/snippet}
+</ContextUsageStatus>
 
 <style>
-  .usage-details {
-    position: relative;
-    min-width: 0;
-    color: var(--color-muted-foreground);
-    font-size: var(--kit-font-size-sm, 0.8125rem);
-  }
-  summary {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    cursor: pointer;
-    padding: 0.25rem;
-    border-radius: var(--kit-radius, var(--radius));
-  }
-  summary::-webkit-details-marker {
-    display: none;
-  }
-  summary:focus-visible {
-    outline: 2px solid var(--color-ring);
-  }
-  summary :global(svg) {
-    width: 1rem;
-    height: 1rem;
-    flex-shrink: 0;
-  }
-  .usage-content {
-    position: absolute;
-    bottom: calc(100% + 0.5rem);
-    right: 0;
-    width: min(20rem, calc(100cqw - 5rem));
-    max-height: 45cqh;
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    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);
-  }
   p {
     margin: 0;
     overflow-wrap: anywhere;
@@ -132,7 +89,4 @@
     text-align: left;
     overflow-wrap: anywhere;
   }
-  meter {
-    width: 100%;
-  }
 </style>

package/src/chat/chat-attachments.svelte.ts

@@ -0,0 +1,78 @@
+import type { KitI18n } from '../i18n'
+import type { KitNotify } from '../context'
+import type { ImagePart } from '../ports'
+
+export type AttachedImage = ImagePart & { preview: string }
+
+export function hasImages(files: FileList | null | undefined): boolean {
+  return [...(files ?? [])].some((file) => file.type.startsWith('image/'))
+}
+
+function readBase64(file: File): Promise<string> {
+  const { promise, resolve, reject } = Promise.withResolvers<string>()
+  const reader = new FileReader()
+  reader.onload = () => resolve(String(reader.result).slice(String(reader.result).indexOf(',') + 1))
+  reader.onerror = () => reject(reader.error ?? new Error('read failed'))
+  reader.readAsDataURL(file)
+  return promise
+}
+
+/** Owns attachment reads and previews; the panel transfers images to run/draft recovery. */
+export class ChatAttachments {
+  images = $state<AttachedImage[]>([])
+  reading = $state(0)
+
+  private readonly canVision: () => boolean
+  private readonly notify: KitNotify
+  private readonly i18n: KitI18n
+
+  constructor(canVision: () => boolean, notify: KitNotify, i18n: KitI18n) {
+    this.canVision = canVision
+    this.notify = notify
+    this.i18n = i18n
+  }
+
+  remove = (index: number): void => {
+    const [image] = this.images.splice(index, 1)
+    if (image) URL.revokeObjectURL(image.preview)
+  }
+
+  attach = async (files: FileList | File[] | null | undefined): Promise<void> => {
+    const picked = [...(files ?? [])].filter((file) => file.type.startsWith('image/'))
+    if (picked.length === 0) return
+    const { t } = this.i18n
+    if (!this.canVision()) this.notify.toast('error', t('chat.visionUnsupported'))
+    else if (
+      picked.some(
+        (file) => !['image/png', 'image/jpeg', 'image/webp', 'image/gif'].includes(file.type),
+      )
+    )
+      this.notify.toast('error', t('chat.imageType'))
+    else if (picked.some((file) => file.size > 4 * 1024 * 1024))
+      this.notify.toast('error', t('chat.imageSize'))
+    else if (this.images.length + picked.length > 4)
+      this.notify.toast('error', t('chat.imageLimit', { max: 4 }))
+    else {
+      this.reading++
+      try {
+        const read = await Promise.all(
+          picked.map(async (file) => ({ mime: file.type, data: await readBase64(file), file })),
+        )
+        if (this.images.length + read.length > 4)
+          this.notify.toast('error', t('chat.imageLimit', { max: 4 }))
+        else
+          this.images.push(
+            ...read.map(({ mime, data, file }) => ({
+              mime,
+              data,
+              preview: URL.createObjectURL(file),
+            })),
+          )
+      } catch {
+        this.notify.toast('error', t('errors.internal'))
+      } finally {
+        this.reading--
+      }
+    }
+  }
+}