@ouraihub/aether-ui 0.1.1 → 0.1.2

package/src/chat/ChatPanel.svelte

@@ -5,7 +5,6 @@
     isKitClientError,
     type ModelRef,
     type SkillRef,
-    type ModelOption,
     type ReasoningEffort,
     type PermissionMode,
   } from '../ports'
@@ -21,6 +20,8 @@
   import ChatPanelComposer from './ChatPanelComposer.svelte'
   import ChatPanelDialogs from './ChatPanelDialogs.svelte'
   import type { ChatPanelProps } from './chat-panel-props'
+  import { ChatPanelModels } from './chat-panel-models.svelte'
+  import { modelKey, type PickerValue } from './model-effort'
 
   let {
     purpose = 'chat',
@@ -42,6 +43,9 @@
     onToolbarChange,
     reasoningEffort: reasoningEffortProp,
     onReasoningEffortChange,
+    defaultModel = null,
+    defaultReasoningEffort = 'default',
+    onDefaultModelChange,
     permissionModes = ['default', 'plan', 'accept_edits'],
     permissionMode = $bindable('default'),
   }: ChatPanelProps = $props()
@@ -52,15 +56,18 @@
   const session = ports.chat ? new RunSession(ports.chat, history) : null
   // svelte-ignore state_referenced_locally
   let picked = $state<ModelRef | null>(model)
-  let modelOptions = $state<ModelOption[] | null>(null)
-  let modelError = $state<string | null>(null)
-  let modelReload = $state(0)
+  const errorText = (error: unknown) =>
+    t(`errors.${isKitClientError(error) ? error.code : 'internal'}`)
+  const models = new ChatPanelModels(ports.providers, i18n, errorText)
+  const modelOptions = $derived(models.options)
+  const modelError = $derived(models.error)
   const capability = $derived(
     modelOptions?.find(
       (item) => item.endpointId === picked?.endpointId && item.modelId === picked?.modelId,
     ) ?? null,
   )
-  // The saved choice survives model switches; each model sends its nearest allowed effort (docs/28 RT3).
+  // The saved choice survives model switches; each model sends its nearest allowed effort
+  // (docs/28 RT3).
   // svelte-ignore state_referenced_locally
   let chosenEffort = $state<ReasoningEffort>(reasoningEffortProp ?? 'default')
   const allowedEfforts = $derived(
@@ -111,29 +118,10 @@
   }
   let reasoningOpen = $state(false)
   const noModels = $derived(modelOptions !== null && modelOptions.length === 0)
-  const errorText = (error: unknown) =>
-    t(`errors.${isKitClientError(error) ? error.code : 'internal'}`)
   $effect(() => {
-    void modelReload
+    // A provider save swaps options in place: nulling them would reset the chosen effort.
     void providersRevision.value
-    let alive = true
-    // A provider save swaps options in place: nulling them would reset the chosen effort (docs/41 §3.5).
-    modelError = null
-    if (!ports.providers) {
-      modelOptions = []
-      return
-    }
-    void ports.providers.modelOptions({ modelType: 'chat' }).then(
-      (list) => {
-        if (alive) modelOptions = list
-      },
-      (error: unknown) => {
-        if (alive) modelError = errorText(error)
-      },
-    )
-    return () => {
-      alive = false
-    }
+    untrack(() => void models.load())
   })
   $effect(() => {
     // A model that turns out not to take tools cannot keep a pending generate_image request.
@@ -143,6 +131,20 @@
     picked = next
     session?.resetContext()
   }
+  const pickerValue = $derived(
+    picked ? { key: modelKey(picked.endpointId, picked.modelId), effort: reasoningEffort } : null,
+  )
+  const pickerDefault = $derived(
+    defaultModel
+      ? {
+          key: modelKey(defaultModel.endpointId, defaultModel.modelId),
+          effort: defaultReasoningEffort,
+        }
+      : null,
+  )
+  function pickValue(value: PickerValue) {
+    if (!session?.running) models.select(value, picked, chosenEffort, pickModel, chooseEffort)
+  }
 
   let draft = $state('')
   let draftRevision = 0
@@ -170,7 +172,8 @@
     generateImage: purpose === 'chat' && generateImage && paintingModel,
     context: activeContext ? { kind: activeContext.kind, id: activeContext.id } : null,
   })
-  // Consume before awaiting run acceptance, including retries and translations. Never persist full access.
+  // Consume before awaiting run acceptance, including retries and translations.
+  // Never persist full access.
   function consumeBase() {
     const request = { ...base }
     fullAccess = false
@@ -337,7 +340,11 @@
 
 {#if session}
   <!-- svelte-ignore a11y_no_noninteractive_element_interactions (Esc bubbles from controls) -->
-  <section class="chat-panel" aria-label={t('chat.title')} {onkeydown}>
+  <section
+    class="flex min-h-0 min-w-0 flex-1 flex-col gap-3 h-full [container-type:size]"
+    aria-label={t('chat.title')}
+    {onkeydown}
+  >
     <ChatSurface
       label={t('chat.title')}
       messagesLabel={t('chat.messages')}
@@ -354,17 +361,12 @@
           historyBusy={historyState.historyBusy}
           historyOpen={historyState.historyOpen}
           historyError={historyState.historyError}
-          {modelOptions}
-          {modelError}
           onHistory={() => {
             historyState.historyOpen = true
             void historyState.refresh()
           }}
           {onClose}
           onRetryHistory={() => void historyState.retryHistory()}
-          {picked}
-          onPickModel={pickModel}
-          {onOpenSettings}
         />
       {/snippet}
       <ChatPanelMessages
@@ -379,7 +381,7 @@
         {modelError}
         {capability}
         {noModels}
-        onRetryModels={() => modelReload++}
+        onRetryModels={() => void models.load()}
         {onOpenSettings}
         {onInsert}
         {onSaveNote}
@@ -432,10 +434,18 @@
           {mode}
           {allowedModes}
           {chooseMode}
-          {reasoningEffort}
-          {allowedEfforts}
           bind:reasoningOpen
-          {chooseEffort}
+          pickerModels={models.picker}
+          {pickerValue}
+          {pickerDefault}
+          pickerRefreshing={models.refreshing}
+          pickerNotice={models.notice}
+          pickerDisabled={modelError !== null}
+          onPick={pickValue}
+          onSetDefault={onDefaultModelChange
+            ? (value) => void models.saveDefault(value, onDefaultModelChange)
+            : undefined}
+          onRefresh={(force) => void models.load(force)}
           {currentContext}
           {picked}
           {onOpenSettings}
@@ -469,7 +479,7 @@
       {noModels}
       validReplyModel={historyState.validReplyModel}
       submitReply={historyState.submitReply}
-      reloadModels={() => modelReload++}
+      reloadModels={() => void models.load()}
       bind:historyOpen={historyState.historyOpen}
       bind:renaming={historyState.renaming}
       bind:renameTitle={historyState.renameTitle}
@@ -481,16 +491,3 @@
     />
   </section>
 {/if}
-
-<style>
-  .chat-panel {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    gap: 0.75rem;
-    min-width: 0;
-    min-height: 0;
-    height: 100%;
-    container-type: size;
-  }
-</style>

package/src/chat/ChatPanelComposer.svelte

@@ -9,17 +9,17 @@
     ModelOption,
     ModelRef,
     PermissionMode,
-    ReasoningEffort,
     SkillRef,
     SkillsPort,
   } from '../ports'
-  import { settingsTarget } from '../providers/revision.svelte'
   import ChatComposer from './ChatComposer.svelte'
   import ChatPanelMode from './ChatPanelMode.svelte'
   import ChatPanelToolbar from './ChatPanelToolbar.svelte'
-  import ReasoningControl from './ReasoningControl.svelte'
+  import ModelEffortPicker from './ModelEffortPicker.svelte'
   import SkillPicker from './SkillPicker.svelte'
   import UsageDetails from './UsageDetails.svelte'
+  import type { PickerModel, PickerValue } from './model-effort'
+  import { settingsTarget } from '../providers/revision.svelte'
   import type { RunSession } from './run-session.svelte'
 
   type Attached = ImagePart & { preview: string }
@@ -62,10 +62,16 @@
     mode,
     allowedModes,
     chooseMode,
-    reasoningEffort,
-    allowedEfforts,
     reasoningOpen = $bindable(false),
-    chooseEffort,
+    pickerModels,
+    pickerValue,
+    pickerDefault,
+    pickerRefreshing,
+    pickerNotice,
+    pickerDisabled,
+    onPick,
+    onSetDefault,
+    onRefresh,
     currentContext,
     picked,
     onOpenSettings,
@@ -105,10 +111,16 @@
     mode: PermissionMode
     allowedModes: PermissionMode[]
     chooseMode: (mode: PermissionMode) => Promise<void>
-    reasoningEffort: ReasoningEffort
-    allowedEfforts: ReasoningEffort[]
     reasoningOpen?: boolean
-    chooseEffort: (effort: ReasoningEffort) => void
+    pickerModels: PickerModel[]
+    pickerValue: PickerValue | null
+    pickerDefault: PickerValue | null
+    pickerRefreshing: boolean
+    pickerNotice: string
+    pickerDisabled: boolean
+    onPick: (value: PickerValue) => void
+    onSetDefault?: ((value: PickerValue) => void) | undefined
+    onRefresh: (force: boolean) => void
     currentContext: ContextUsage | null
     picked: ModelRef | null
     onOpenSettings?: (() => void) | undefined
@@ -217,28 +229,35 @@
           onresolved={onSkillResolved}
         />
       </div>{/if}
+    <ModelEffortPicker
+      models={pickerModels}
+      value={pickerValue}
+      defaultValue={pickerDefault}
+      disabled={session.running || pickerDisabled}
+      refreshing={pickerRefreshing}
+      notice={pickerNotice}
+      {i18n}
+      bind:open={reasoningOpen}
+      onselect={onPick}
+      onsetdefault={onSetDefault}
+      onrefresh={onRefresh}
+      onopensettings={onOpenSettings && picked
+        ? () => {
+            settingsTarget.value = { endpointId: picked.endpointId, modelId: picked.modelId }
+            onOpenSettings()
+          }
+        : undefined}
+    />
   {/snippet}
   {#snippet actions()}
-    <ChatPanelMode {i18n} {mode} {allowedModes} running={session.running} {chooseMode} />
-    {#if picked}
-      <ReasoningControl
-        value={reasoningEffort}
-        efforts={allowedEfforts}
-        disabled={session.running}
-        bind:open={reasoningOpen}
-        {i18n}
-        onchange={chooseEffort}
-        onOpenSettings={onOpenSettings
-          ? () => {
-              settingsTarget.value = { endpointId: picked.endpointId, modelId: picked.modelId }
-              onOpenSettings()
-            }
-          : undefined}
-      />
+    {#if purpose !== 'chat'}
+      <ChatPanelMode {i18n} {mode} {allowedModes} running={session.running} {chooseMode} />
     {/if}
     <UsageDetails
       context={currentContext}
+      contextWindow={pickerModels.find((model) => model.key === pickerValue?.key)?.contextWindow}
       modelName={capability?.name ?? capability?.modelId ?? ''}
+      turns={session.turns}
       usage={session.turns.at(-1)?.usage ?? null}
       total={session.cumulativeUsage}
       cost={session.turns.at(-1)?.cost ?? null}

package/src/chat/ChatPanelHeader.svelte

@@ -4,8 +4,7 @@
   import { Button } from '#lib/components/ui/button/index.js'
   import * as Alert from '#lib/components/ui/alert/index.js'
   import type { KitI18n } from '../i18n'
-  import type { ConversationClient, ModelOption, ModelRef } from '../ports'
-  import ModelSelect from '../providers/ModelSelect.svelte'
+  import type { ConversationClient } from '../ports'
   import type { RunSession } from './run-session.svelte'
 
   let {
@@ -16,14 +15,9 @@
     historyBusy,
     historyOpen,
     historyError,
-    modelOptions,
-    modelError,
     onHistory,
     onClose,
     onRetryHistory,
-    picked,
-    onPickModel,
-    onOpenSettings,
   }: {
     i18n: KitI18n
     title: string
@@ -32,14 +26,9 @@
     historyBusy: boolean
     historyOpen: boolean
     historyError: string | null
-    modelOptions: ModelOption[] | null
-    modelError: string | null
     onHistory: () => void
     onClose?: (() => void) | undefined
     onRetryHistory: () => void
-    picked: ModelRef | null
-    onPickModel: (model: ModelRef) => void
-    onOpenSettings?: (() => void) | undefined
   } = $props()
   const t = $derived(i18n.t)
 </script>
@@ -63,16 +52,6 @@
         onclick={onClose}><XIcon /></Button
       >{/if}
   </div>
-  <div class="model-row">
-    <ModelSelect
-      value={picked}
-      options={modelOptions}
-      filter={{ modelType: 'chat' }}
-      disabled={session.running || modelError !== null}
-      onchange={onPickModel}
-      {...onOpenSettings ? { onOpenSettings } : {}}
-    />
-  </div>
 </header>
 {#if historyError && !historyOpen}
   <Alert.Root variant="destructive">
@@ -126,7 +105,4 @@
   .title-row :global(button) {
     flex-shrink: 0;
   }
-  .model-row {
-    min-width: 0;
-  }
 </style>

package/src/chat/ChatPanelMode.svelte

@@ -38,9 +38,9 @@
           size="sm"
           class={mode === 'full_access' ? 'mode-danger' : undefined}
           aria-label={`${t('chat.mode.label')}: ${t(`chat.mode.${mode}`)}`}
-          ><ShieldIcon data-icon="inline-start" />{t(`chat.mode.${mode}`)}<ChevronDownIcon
-            data-icon="inline-end"
-          /></Button
+          ><ShieldIcon data-icon="inline-start" /><span data-composer-mode-label>
+            {t(`chat.mode.${mode}`)}</span
+          ><ChevronDownIcon data-composer-mode-label data-icon="inline-end" /></Button
         >{/snippet}
     </DropdownMenu.Trigger>
     <DropdownMenu.Content side="top" align="end" class="mode-menu">

package/src/chat/ChatPanelToolbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tick } from 'svelte'
+  import { onMount, tick } from 'svelte'
   import { Popover } from 'bits-ui'
   import PlusIcon from '@lucide/svelte/icons/plus'
   import GlobeIcon from '@lucide/svelte/icons/globe'
@@ -55,7 +55,17 @@
   const DEFAULT_TOOLBAR = ['new-conversation', 'web-search']
   // svelte-ignore state_referenced_locally
   let pinned = $state<string[]>(toolbar ?? DEFAULT_TOOLBAR)
-  const visiblePinned = $derived(pinned.filter((id) => tools.includes(id)))
+  let compact = $state(false)
+  const visiblePinned = $derived(compact ? [] : pinned.filter((id) => tools.includes(id)))
+  onMount(() => {
+    const shell = fileInput?.closest('.composer-shell')
+    if (!shell) return
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry && entry.contentRect.width > 0) compact = entry.contentRect.width < 400
+    })
+    observer.observe(shell)
+    return () => observer.disconnect()
+  })
   /** Tools usable here; unavailable pinned ids stay stored but hidden (docs/38 §3.2). */
   const tools = $derived(
     ['new-conversation', 'web-search', 'attachment', 'generate-image'].filter(
@@ -286,7 +296,8 @@
     </Popover.Content>
   </Popover.Portal>
 </Popover.Root>
-{#if generateImage && paintingModel && purpose === 'chat' && !pinned.includes('generate-image')}<Button
+{#if generateImage && paintingModel && purpose === 'chat' && !pinned.includes('generate-image')}
+  <Button
     type="button"
     variant="secondary"
     size="sm"

package/src/chat/ContextUsageStatus.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  // Inline context status beside Send (docs/31 §4.3); opens the shared usage popover.
+  import type { Snippet } from 'svelte'
+  import { cn } from '#lib/utils.js'
+  import type { KitI18n } from '../i18n'
+  import type { ContextUsage } from '../ports'
+  import UsageControl from './UsageControl.svelte'
+  import PathIcon from './icons/PathIcon.svelte'
+  import {
+    detectPlatform,
+    pressure,
+    spending,
+    summary as contextSummary,
+    type Platform,
+    type SpendingTurn,
+  } from './context-status'
+  import { applePath, linuxPath, wandPath, windowsPath } from './icons/status-icons'
+
+  let {
+    context,
+    contextWindow = null,
+    turns,
+    modelName = '',
+    i18n,
+    platform = detectPlatform(),
+    settings,
+    details,
+    open = $bindable(false),
+  }: {
+    context: ContextUsage | null
+    /** Fallback capacity, e.g. the selected model's window, when the usage has none. */
+    contextWindow?: number | null
+    turns: readonly SpendingTurn[]
+    modelName?: string
+    i18n: KitI18n
+    platform?: Platform
+    settings?: Snippet | undefined
+    details?: Snippet | undefined
+    open?: boolean
+  } = $props()
+  const marks: Record<Platform, { name: string; path: string } | null> = {
+    windows: { name: 'Windows', path: windowsPath },
+    macos: { name: 'macOS', path: applePath },
+    linux: { name: 'Linux', path: linuxPath },
+    other: null,
+  }
+  const capacity = $derived(context?.contextWindow ?? contextWindow)
+  const text = $derived(contextSummary(context, capacity))
+  const spent = $derived(spending(turns))
+  const level = $derived(pressure(context, capacity))
+  const mark = $derived(marks[platform])
+  const label = $derived(
+    i18n
+      .t('chat.status.label', { platform: mark?.name ?? '', summary: text, spending: spent })
+      .trim(),
+  )
+</script>
+
+<UsageControl
+  bind:open
+  {i18n}
+  {settings}
+  {details}
+  summaryLabel={label}
+  context={{
+    tokens: context?.tokens ?? null,
+    contextWindow: capacity,
+    modelName,
+    source: context?.source ?? 'unknown',
+  }}
+>
+  {#snippet summary()}
+    <span
+      class={cn(
+        'inline-flex min-w-0 items-center gap-1.5 font-mono text-xs tabular-nums',
+        level === 'normal' && 'text-muted-foreground',
+        level === 'warning' && 'text-warning',
+        level === 'high' &&
+          'text-[color-mix(in_oklch,var(--color-warning)_45%,var(--color-destructive))]',
+        level === 'critical' && 'text-destructive',
+      )}
+      data-pressure={level}
+    >
+      {#if mark}<PathIcon
+          data-composer-capacity
+          d={mark.path}
+          class="size-3 shrink-0 text-foreground"
+        />{/if}
+      <span class="shrink-0 whitespace-nowrap"
+        >{text.split('/')[0]}<span data-composer-capacity>/{text.split('/')[1]}</span></span
+      >
+      <PathIcon d={wandPath} class="size-3 shrink-0" />
+      <span data-composer-capacity class="mx-1.5 shrink-0 text-border" aria-hidden="true">·</span>
+      <span data-composer-capacity class="min-w-0 truncate text-muted-foreground">{spent}</span>
+    </span>
+  {/snippet}
+</UsageControl>