@ouraihub/aether-ui 0.1.1 → 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

@@ -119,6 +119,7 @@
     </Select.Content>
   </Select.Root>
   <span
+    data-composer-capacity
     class={cn('max-w-full shrink-0 text-muted-foreground', chars > budget && 'text-destructive')}
   >
     {t('skills.budget', { chars, budget })}

package/src/chat/UsageControl.svelte

@@ -10,6 +10,8 @@
     i18n,
     settings,
     details,
+    summary,
+    summaryLabel,
     open = $bindable(false),
   }: {
     context?: {
@@ -21,6 +23,9 @@
     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)
@@ -41,11 +46,12 @@
         {...props}
         bind:ref={trigger}
         variant="ghost"
-        size="icon-sm"
-        aria-label={t('chat.usageSettings')}
-        title={t('chat.usageSettings')}
+        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')}
       >
-        <Settings2Icon aria-hidden="true" />
+        {#if summary}{@render summary()}{:else}<Settings2Icon aria-hidden="true" />{/if}
       </Button>
     {/snippet}
   </Popover.Trigger>
@@ -106,7 +112,8 @@
 
 <style>
   /* Hallmark · component: usage-settings · theme: inherited Aether
-   * Pre-emit critique: Philosophy 5 · Hierarchy 5 · Execution 4 · Specificity 5 · Restraint 5 · Variety 4 */
+   * 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;

package/src/chat/UsageDetails.svelte

@@ -1,22 +1,31 @@
 <script lang="ts">
   import type { ContextUsage, Cost, TokenUsage } from '../ports'
   import { getKitContext } from '../context'
-  import UsageControl from './UsageControl.svelte'
+  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,
+    contextWindow = null,
+    turns,
     usage,
     total,
     cost,
     totalCost,
+    open = $bindable(false),
     modelName = '',
   }: Props & { modelName?: string } = $props()
   const { i18n } = getKitContext()
@@ -32,7 +41,14 @@
     `${currency === 'CNY' ? '¥' : '$'}${amount.toFixed(4)}`
 </script>
 
-<UsageControl context={context ? { ...context, modelName } : null} {i18n}>
+<ContextUsageStatus
+  bind:open
+  {context}
+  contextWindow={contextWindow ?? null}
+  {turns}
+  {modelName}
+  {i18n}
+>
   {#snippet details()}
     <table>
       <thead
@@ -56,7 +72,7 @@
     </table>
     <p>{t('chat.usageHint')}</p>
   {/snippet}
-</UsageControl>
+</ContextUsageStatus>
 
 <style>
   p {

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

@@ -22,11 +22,15 @@ export class ChatAttachments {
   images = $state<AttachedImage[]>([])
   reading = $state(0)
 
-  constructor(
-    private readonly canVision: () => boolean,
-    private readonly notify: KitNotify,
-    private readonly i18n: KitI18n,
-  ) {}
+  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)

package/src/chat/chat-panel-models.svelte.ts

@@ -0,0 +1,97 @@
+// Chat model catalog behind the composer picker (docs/31 §5.1). Provider metadata only enriches
+// rows; a failed `list()` never blocks model selection.
+import type { KitI18n } from '../i18n'
+import type { ModelOption, ModelRef, Provider, ProvidersPort, ReasoningEffort } from '../ports'
+import { nearestEffort, REASONING_EFFORTS } from '../providers/reasoning'
+import { modelKey, pickerModels, type PickerModel, type PickerValue } from './model-effort'
+
+export class ChatPanelModels {
+  options = $state<ModelOption[] | null>(null)
+  providers = $state<Provider[] | null>(null)
+  error = $state<string | null>(null)
+  refreshing = $state(false)
+  notice = $state('')
+  readonly #port: ProvidersPort | undefined
+  readonly #i18n: KitI18n
+  readonly #errorText: (error: unknown) => string
+  #generation = 0
+
+  constructor(
+    port: ProvidersPort | undefined,
+    i18n: KitI18n,
+    errorText: (error: unknown) => string,
+  ) {
+    this.#port = port
+    this.#i18n = i18n
+    this.#errorText = errorText
+  }
+
+  get picker(): PickerModel[] {
+    return pickerModels(this.options ?? [], this.providers, this.#i18n)
+  }
+
+  /** Rereads in place: nulling options would reset the chosen effort (docs/41 §3.5). */
+  async load(announce = false): Promise<void> {
+    const generation = ++this.#generation
+    this.error = null
+    if (!this.#port) {
+      this.options = []
+      return
+    }
+    this.refreshing = announce
+    const [options, providers] = await Promise.allSettled([
+      this.#port.modelOptions({ modelType: 'chat' }),
+      this.#port.list(),
+    ])
+    if (generation !== this.#generation) return
+    this.refreshing = false
+    if (options.status === 'rejected') {
+      this.error = this.#errorText(options.reason)
+      if (announce) this.notice = this.error
+      return
+    }
+    this.options = options.value
+    this.providers = providers.status === 'fulfilled' ? providers.value : null
+    if (announce)
+      this.notice = this.#i18n.t('chat.picker.reloaded', { count: options.value.length })
+  }
+
+  #find(key: string): ModelOption | undefined {
+    return this.options?.find((item) => modelKey(item.endpointId, item.modelId) === key)
+  }
+
+  /** Hands the host the model behind the key; a failed save is shown in the picker notice. */
+  async saveDefault(
+    value: PickerValue,
+    save: (model: ModelRef, effort: ReasoningEffort) => Promise<void> | void,
+  ): Promise<void> {
+    const option = this.#find(value.key)
+    if (!option) return
+    try {
+      await save({ endpointId: option.endpointId, modelId: option.modelId }, value.effort)
+    } catch (error) {
+      this.notice = this.#errorText(error)
+    }
+  }
+
+  /**
+   * A model switch keeps the saved effort policy (nearest allowed level); only a level the user
+   * picked on the same model, or typed as a search suffix, is written back.
+   */
+  select(
+    value: PickerValue,
+    picked: ModelRef | null,
+    chosen: ReasoningEffort,
+    pick: (ref: ModelRef) => void,
+    choose: (effort: ReasoningEffort) => void,
+  ): void {
+    const option = this.#find(value.key)
+    if (!option) return
+    const same = picked !== null && modelKey(picked.endpointId, picked.modelId) === value.key
+    if (!same) pick({ endpointId: option.endpointId, modelId: option.modelId })
+    const declared = option.reasoning
+    const allowed = REASONING_EFFORTS.filter((effort) => declared?.efforts.includes(effort))
+    const implied = nearestEffort(chosen, allowed)
+    if (value.effort !== implied && (same || value.effort !== 'default')) choose(value.effort)
+  }
+}

package/src/chat/chat-panel-props.ts

@@ -26,6 +26,12 @@ export interface ChatPanelProps {
   /** Saved preference mapped to the selected model's nearest supported effort. */
   reasoningEffort?: ReasoningEffort
   onReasoningEffortChange?: (effort: ReasoningEffort) => void
+  /** Host default for new conversations; enables「设为默认」when `onDefaultModelChange` is set. */
+  defaultModel?: ModelRef | null
+  /** Saved default effort, independent of the current session choice. */
+  defaultReasoningEffort?: ReasoningEffort
+  /** The host persists the default model and effort; the picker never writes storage itself. */
+  onDefaultModelChange?: (model: ModelRef, effort: ReasoningEffort) => Promise<void> | void
   permissionModes?: PermissionMode[]
   /** Full access stays private and is consumed once, never saved as a preference. */
   permissionMode?: PermissionMode

package/src/chat/context-status.ts

@@ -0,0 +1,101 @@
+// Pure rules for the inline context status beside Send (docs/31 §4.3). No I/O.
+import type { ContextUsage, Cost, TokenUsage } from '../ports'
+
+export type Pressure = 'normal' | 'warning' | 'high' | 'critical'
+export type Platform = 'windows' | 'macos' | 'linux' | 'other'
+
+/** Occupancy in percent, clamped to 0–100; `null` when tokens or window are unknown. */
+export function contextPercent(context: ContextUsage | null, window: number | null): number | null {
+  const tokens = context?.tokens
+  if (tokens == null || window == null || window <= 0) return null
+  return Math.min(100, Math.max(0, (tokens / window) * 100))
+}
+
+/** Highest of percentage and absolute pressure; absolute counts need a known window. */
+export function pressure(context: ContextUsage | null, window: number | null): Pressure {
+  const percent = contextPercent(context, window) ?? 0
+  const tokens = window != null && window > 0 ? (context?.tokens ?? 0) : 0
+  if (percent >= 90 || tokens >= 500_000) return 'critical'
+  if (percent >= 70 || tokens >= 270_000) return 'high'
+  if (percent >= 50 || tokens >= 150_000) return 'warning'
+  return 'normal'
+}
+
+/** Truncates rather than rounds, so 999 999 never reads as 1000k. */
+export function compact(value: number): string {
+  const n = Math.max(0, Math.floor(value))
+  const [divisor, suffix] =
+    n >= 1e9 ? [1e9, 'B'] : n >= 1e6 ? [1e6, 'M'] : n >= 1e3 ? [1e3, 'k'] : [1, '']
+  if (divisor === 1) return String(n)
+  const tenth = Math.floor((n * 10) / divisor)
+  const whole = Math.floor(tenth / 10)
+  return tenth % 10 === 0 ? `${whole}${suffix}` : `${whole}.${tenth % 10}${suffix}`
+}
+
+/** `~12.3%/1.1M`; unknown parts render as `?`. */
+export function summary(context: ContextUsage | null, window: number | null): string {
+  const percent = contextPercent(context, window)
+  const size = window != null && window > 0 ? compact(window) : '?'
+  const estimated = context?.source === 'estimated' ? '~' : ''
+  return `${estimated}${percent === null ? '?' : percent.toFixed(1)}%/${size}`
+}
+
+/** Estimated money from configured prices; invalid amounts are unknown. */
+export function money({ amount, currency }: Cost): string | null {
+  if (!Number.isFinite(amount) || amount < 0) return null
+  const text =
+    amount > 0 && amount < 0.0001
+      ? '<0.0001'
+      : amount > 0 && amount < 0.01
+        ? amount.toFixed(4)
+        : amount.toFixed(2)
+  return `≈${currency === 'CNY' ? '¥' : '$'}${text}`
+}
+
+export interface SpendingTurn {
+  usage: TokenUsage | null
+  cost: Cost | null
+}
+
+/**
+ * Money only when every turn with usage has a priced cost in one currency; otherwise tokens.
+ * Input already contains cache, output contains reasoning, so only the two totals are added.
+ */
+export function spending(turns: readonly SpendingTurn[]): string {
+  const used = turns.filter(
+    ({ usage }) => usage != null && (usage.inputTokens != null || usage.outputTokens != null),
+  )
+  if (used.length === 0) return '? tokens'
+  const priced = used.flatMap(({ usage, cost }) =>
+    cost &&
+    Number.isFinite(cost.amount) &&
+    cost.amount >= 0 &&
+    usage?.inputTokens != null &&
+    usage.outputTokens != null
+      ? [cost]
+      : [],
+  )
+  const first = priced[0]
+  const oneCurrency = priced.every((cost) => cost.currency === first?.currency)
+  if (first && priced.length === used.length && oneCurrency) {
+    const amount = priced.reduce((sum, cost) => sum + cost.amount, 0)
+    const text = money({ amount, currency: first.currency })
+    if (text) return text
+  }
+  let tokens = 0
+  for (const { usage } of used) tokens += (usage?.inputTokens ?? 0) + (usage?.outputTokens ?? 0)
+  return `${compact(tokens)} tokens`
+}
+
+type PlatformNavigator = Navigator & { userAgentData?: { platform?: string } }
+
+/** Browser-reported OS; on the web this is the visitor's system, not the server's. */
+export function detectPlatform(
+  nav: PlatformNavigator | undefined = globalThis.navigator,
+): Platform {
+  const name = (nav?.userAgentData?.platform || nav?.platform || '').toLowerCase()
+  if (name.startsWith('win')) return 'windows'
+  if (name.startsWith('mac') || name.includes('darwin')) return 'macos'
+  if (name.includes('linux') && !name.includes('android')) return 'linux'
+  return 'other'
+}