@ouraihub/aether-ui 0.1.0 → 0.1.2

package/src/chat/run-session-types.ts

@@ -0,0 +1,69 @@
+import type {
+  ContextRef,
+  ContextUsage,
+  Cost,
+  ImageRef,
+  ModelRef,
+  PermissionMode,
+  ReasoningEffort,
+  SearchHit,
+  SkillRef,
+  TokenUsage,
+  ToolOutcome,
+  TurnStatus,
+} from '../ports'
+
+/** One tool call of a turn, as shown by ToolCallItem / ApprovalCard. */
+export interface ToolItem {
+  callId: string
+  name: string
+  server: string | null
+  pending: string | null
+  outcome: ToolOutcome | null
+  summary: string
+}
+
+export interface ChatTurn {
+  id: string
+  persisted: boolean
+  parentId: string | null
+  questionId: string
+  supersedesId: string | null
+  kind: 'reply' | 'translation'
+  endpointId: string | null
+  modelId: string | null
+  input: string
+  images: ImageRef[]
+  generated: ImageRef[]
+  text: string
+  reasoningText: string
+  reasoningEffort: ReasoningEffort
+  usage: TokenUsage | null
+  cost: Cost | null
+  contextUsage: ContextUsage | null
+  status: TurnStatus
+  error: string | null
+  tools: ToolItem[]
+  exhausted: boolean
+  search: SearchState
+}
+
+export interface SearchState {
+  status: 'idle' | 'searching' | 'complete' | 'failed'
+  query: string | null
+  provider: string | null
+  hits: SearchHit[]
+  error: string | null
+}
+
+export interface RunBase {
+  purpose: string
+  scope: string | null
+  language: string
+  model: ModelRef | null
+  skills: SkillRef[]
+  context: ContextRef | null
+  reasoningEffort?: ReasoningEffort
+  generateImage?: boolean
+  permissionMode?: PermissionMode
+}

package/src/chat/run-session.svelte.ts

@@ -1,86 +1,24 @@
 // One conversation in the panel: turns, the active run and its abort (docs/16 §4.2, §7 trap 4).
 import { SvelteMap } from 'svelte/reactivity'
-import { isKitClientError } from '../ports'
+import type { ChatTurn, RunBase, SearchState, ToolItem } from './run-session-types'
+import { cumulativeCost, cumulativeUsage, fromHistory } from './run-session-history'
 import type {
-  RunClient,
   ConversationClient,
-  ContextRef,
+  ContextUsage,
+  Cost,
   ImagePart,
   ImageRef,
   KitError,
   ModelRef,
+  RunClient,
   RunEvent,
   RunRequest,
-  SearchHit,
-  SkillRef,
-  ToolOutcome,
+  TokenUsage,
   Turn,
   TurnStatus,
 } from '../ports'
-
-/** One tool call of a turn, as shown by ToolCallItem / ApprovalCard. */
-export interface ToolItem {
-  callId: string
-  name: string
-  /** MCP server name; absent for host tools. */
-  server: string | null
-  /** Arguments preview while the call waits for the user. */
-  pending: string | null
-  outcome: ToolOutcome | null
-  summary: string
-}
-
-import type { ContextUsage, Cost, TokenUsage, ReasoningEffort, PermissionMode } from '../ports'
-
-export interface ChatTurn {
-  id: string
-  persisted: boolean
-  parentId: string | null
-  questionId: string
-  supersedesId: string | null
-  kind: 'reply' | 'translation'
-  endpointId: string | null
-  modelId: string | null
-  input: string
-  images: ImageRef[]
-  /** Images `generate_image` produced in this reply (docs/20). */
-  generated: ImageRef[]
-  text: string
-  reasoningText: string
-  reasoningEffort: ReasoningEffort
-  usage: TokenUsage | null
-  /** Priced at run time; later price changes never recompute it (docs/41 §3.7). */
-  cost: Cost | null
-  contextUsage: ContextUsage | null
-  status: TurnStatus
-  error: string | null
-  tools: ToolItem[]
-  exhausted: boolean
-  search: SearchState
-}
-
-export interface SearchState {
-  status: 'idle' | 'searching' | 'complete' | 'failed'
-  query: string | null
-  provider: string | null
-  hits: SearchHit[]
-  error: string | null
-}
-
-export interface RunBase {
-  purpose: string
-  scope: string | null
-  language: string
-  model: ModelRef | null
-  skills: SkillRef[]
-  context: ContextRef | null
-  reasoningEffort?: ReasoningEffort
-  /** Offer the `generate_image` tool (docs/20). */
-  generateImage?: boolean
-  /** Permission mode of the run (docs/16 §4.2); omitted is `default`. */
-  permissionMode?: PermissionMode
-}
-
+import { isKitClientError } from '../ports'
+export type { ChatTurn, RunBase, SearchState, ToolItem } from './run-session-types'
 export class RunSession {
   turns = $state<ChatTurn[]>([])
   conversationId = $state<string | null>(null)
@@ -89,7 +27,13 @@ export class RunSession {
   historyRefreshError = $state<string | null>(null)
   running = $state(false)
   contextUsage = $state<ContextUsage | null>(null)
-  search = $state<SearchState>({ status: 'idle', query: null, provider: null, hits: [], error: null })
+  search = $state<SearchState>({
+    status: 'idle',
+    query: null,
+    provider: null,
+    hits: [],
+    error: null,
+  })
   /** Id of a selected skill the backend rejected as `skill_changed`; the user has to confirm it again. */
   skillChanged = $state<string | null>(null)
   #abort: AbortController | null = null
@@ -108,36 +52,30 @@ export class RunSession {
   }
 
   get cumulativeUsage(): TokenUsage {
-    const total: TokenUsage = {
-      inputTokens: null,
-      outputTokens: null,
-      cacheReadTokens: null,
-      cacheWriteTokens: null,
-      reasoningTokens: null,
-    }
-    for (const turn of this.turns)
-      for (const key of Object.keys(total) as (keyof TokenUsage)[]) {
-        const value = turn.usage?.[key]
-        if (value != null) total[key] = (total[key] ?? 0) + value
-      }
-    return total
+    return cumulativeUsage(this.turns)
   }
 
   /** Known turn costs summed per currency, same scope as `cumulativeUsage` (no exchange rates). */
   get cumulativeCost(): Cost[] {
-    const totals: Cost[] = []
-    for (const { cost } of this.turns) {
-      if (!cost) continue
-      const found = totals.find((item) => item.currency === cost.currency)
-      if (found) found.amount += cost.amount
-      else totals.push({ ...cost })
-    }
-    return totals
+    return cumulativeCost(this.turns)
   }
 
-  send(base: RunBase, input: string, webSearch = false, images: ImagePart[] = []): Promise<boolean> {
+  send(
+    base: RunBase,
+    input: string,
+    webSearch = false,
+    images: ImagePart[] = [],
+  ): Promise<boolean> {
     if (this.running || input.trim() === '') return Promise.resolve(false)
-    return this.#append(base, input, this.selectedTurnId, null, 'reply', images.length ? { images } : {}, webSearch)
+    return this.#append(
+      base,
+      input,
+      this.selectedTurnId,
+      null,
+      'reply',
+      images.length ? { images } : {},
+      webSearch,
+    )
   }
 
   retry(base: RunBase, turnId: string, model?: ModelRef | null): Promise<boolean> {
@@ -161,7 +99,9 @@ export class RunSession {
     const storedSource = this.#stored && source.persisted
     // Without stored history the host cannot read the source images back, so resend the local data URLs.
     const images = source.images.flatMap((image) =>
-      image.url?.startsWith('data:') ? [{ mime: image.mime, data: image.url.slice(image.url.indexOf(',') + 1) }] : [],
+      image.url?.startsWith('data:')
+        ? [{ mime: image.mime, data: image.url.slice(image.url.indexOf(',') + 1) }]
+        : [],
     )
     return this.#append(
       snapshot,
@@ -190,7 +130,9 @@ export class RunSession {
       reasoningEffort: source.reasoningEffort,
       model:
         base.model ??
-        (source.endpointId && source.modelId ? { endpointId: source.endpointId, modelId: source.modelId } : null),
+        (source.endpointId && source.modelId
+          ? { endpointId: source.endpointId, modelId: source.modelId }
+          : null),
     }
     return this.#append(
       snapshot,
@@ -198,7 +140,9 @@ export class RunSession {
       source.id,
       null,
       'translation',
-      this.#stored && source.persisted ? { translateTurnId: source.id, targetLanguage: language.trim() } : {},
+      this.#stored && source.persisted
+        ? { translateTurnId: source.id, targetLanguage: language.trim() }
+        : {},
     )
   }
 
@@ -236,7 +180,10 @@ export class RunSession {
       modelId: base.model?.modelId ?? null,
       input,
       images:
-        action.images?.map((image) => ({ mime: image.mime, url: `data:${image.mime};base64,${image.data}` })) ??
+        action.images?.map((image) => ({
+          mime: image.mime,
+          url: `data:${image.mime};base64,${image.data}`,
+        })) ??
         source?.images ??
         [],
       generated: [],
@@ -262,7 +209,8 @@ export class RunSession {
     if (this.#runId && !this.#ended) {
       const abort = this.#abort
       void this.#port.cancel(this.#runId).catch((error: unknown) => {
-        if (this.#abort === abort && this.running) this.actionError = isKitClientError(error) ? error.code : 'internal'
+        if (this.#abort === abort && this.running)
+          this.actionError = isKitClientError(error) ? error.code : 'internal'
       })
     }
   }
@@ -291,7 +239,9 @@ export class RunSession {
 
   show(conversationId: string | null, turns: readonly Turn[] = [], selectedTurnId?: string | null) {
     const previous =
-      conversationId === this.conversationId ? new SvelteMap(this.turns.map((turn) => [turn.id, turn])) : null
+      conversationId === this.conversationId
+        ? new SvelteMap(this.turns.map((turn) => [turn.id, turn]))
+        : null
     this.stop()
     this.#abort = null
     this.#runId = null
@@ -306,7 +256,7 @@ export class RunSession {
     this.contextUsage = turns.find((turn) => turn.id === this.selectedTurnId)?.contextUsage ?? null
     this.search = { status: 'idle', query: null, provider: null, hits: [], error: null }
     this.turns = turns.map((turn) => {
-      const restored = this.#fromHistory(turn)
+      const restored = fromHistory(turn)
       const current = previous?.get(turn.id)
       if (
         current &&
@@ -322,34 +272,12 @@ export class RunSession {
     })
   }
 
-  #fromHistory(turn: Turn): ChatTurn {
-    return {
-      id: turn.id,
-      persisted: true,
-      parentId: turn.parentId,
-      questionId: turn.questionId,
-      supersedesId: turn.supersedesId,
-      kind: turn.kind,
-      endpointId: turn.endpointId,
-      modelId: turn.modelId,
-      input: turn.input,
-      images: turn.images,
-      generated: turn.generated,
-      text: turn.text,
-      reasoningText: turn.reasoningText ?? '',
-      reasoningEffort: turn.reasoningEffort ?? 'default',
-      usage: turn.usage ?? null,
-      cost: turn.cost ?? null,
-      contextUsage: turn.contextUsage ?? null,
-      status: turn.status,
-      error: turn.errorCode,
-      tools: [],
-      exhausted: false,
-      search: { status: 'idle', query: null, provider: null, hits: [], error: null },
-    }
-  }
-
-  async #start(base: RunBase, input: string, action: Partial<RunRequest>, webSearch: boolean): Promise<boolean> {
+  async #start(
+    base: RunBase,
+    input: string,
+    action: Partial<RunRequest>,
+    webSearch: boolean,
+  ): Promise<boolean> {
     // The proxied element, so streamed writes are reactive.
     const turn = this.turns[this.turns.length - 1]
     if (!turn) return Promise.resolve(false)
@@ -381,15 +309,22 @@ export class RunSession {
             const current = live.get(stored.id)
             live.delete(stored.id)
             return {
-              ...this.#fromHistory(stored),
+              ...fromHistory(stored),
               tools: current?.tools ?? [],
-              search: current?.search ?? { status: 'idle', query: null, provider: null, hits: [], error: null },
+              search: current?.search ?? {
+                status: 'idle',
+                query: null,
+                provider: null,
+                hits: [],
+                error: null,
+              },
               exhausted: current?.exhausted ?? false,
             }
           })
           this.turns.push(...live.values())
           this.selectedTurnId = conversation.summary.selectedTurnId
-          this.contextUsage = this.turns.find((item) => item.id === this.selectedTurnId)?.contextUsage ?? null
+          this.contextUsage =
+            this.turns.find((item) => item.id === this.selectedTurnId)?.contextUsage ?? null
         }
       } catch (error: unknown) {
         if (this.#abort !== abort) return
@@ -476,7 +411,8 @@ export class RunSession {
         }
         case 'tool_result': {
           const item = tool(event.callId)
-          if (item) Object.assign(item, { pending: null, outcome: event.outcome, summary: event.summary })
+          if (item)
+            Object.assign(item, { pending: null, outcome: event.outcome, summary: event.summary })
           const painted = (event.payload as { images?: ImageRef[] } | undefined)?.images
           if (event.outcome === 'ok' && Array.isArray(painted)) turn.generated.push(...painted)
           break
@@ -520,7 +456,8 @@ export class RunSession {
         if (!ended) void this.#port.cancel(result.runId).catch(() => undefined)
         return true
       }
-      if (abort.signal.aborted && !ended) void this.#port.cancel(result.runId).catch(() => undefined)
+      if (abort.signal.aborted && !ended)
+        void this.#port.cancel(result.runId).catch(() => undefined)
       accepted = true
       this.#runId = result.runId
       if (result.conversationId) this.conversationId = result.conversationId
@@ -538,7 +475,8 @@ export class RunSession {
       const code = isKitClientError(error) ? error.code : 'internal'
       if (isKitClientError(error)) this.#checkSkill(error)
       finish(code === 'cancelled' ? 'cancelled' : 'failed', code === 'cancelled' ? null : code)
-      if ((turn.supersedesId !== null || turn.kind === 'translation') && code !== 'cancelled') this.actionError = code
+      if ((turn.supersedesId !== null || turn.kind === 'translation') && code !== 'cancelled')
+        this.actionError = code
       if (turn.supersedesId !== null || turn.kind === 'translation')
         this.turns = this.turns.filter((item) => item !== turn)
       this.#abort = null

package/src/chat/test-support/chat-fixture.ts

@@ -0,0 +1,194 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/svelte'
+import type { ComponentProps } from 'svelte'
+import { expect, vi } from 'vitest'
+import { createI18n } from '../../i18n'
+import {
+  createFakePorts,
+  KitClientError,
+  type ConversationClient,
+  type Conversation,
+  type RunClient,
+  type RunEvent,
+  type RunRequest,
+  type ProvidersPort,
+  type SearchPort,
+  type SkillsPort,
+} from '../../ports'
+import type ChatPanel from '../ChatPanel.svelte'
+import Harness from '../Harness.test.svelte'
+
+export const model = { endpointId: 'e1', modelId: 'm1' }
+
+export function required<T>(value: T | null | undefined): T {
+  if (value == null) throw new Error('Expected chat fixture or control is missing')
+  return value
+}
+
+export interface Run {
+  request: RunRequest
+  turnId: string
+  emit: (event: RunEvent) => void
+  signal: AbortSignal | undefined
+}
+
+export interface Extra {
+  props?: Partial<ComponentProps<typeof ChatPanel>>
+  history?: Partial<ConversationClient>
+  providers?: Partial<ProvidersPort>
+  search?: Partial<SearchPort>
+  skills?: Partial<SkillsPort>
+  chat?: Partial<RunClient>
+}
+
+export function setup(
+  withHistory: boolean,
+  context: { kind: string; id: string; label: string } | null = null,
+  extra: Extra = {},
+) {
+  const runs: Run[] = []
+  const stored: Conversation = {
+    summary: {
+      id: 'c1',
+      title: 'Test',
+      scope: null,
+      selectedTurnId: null,
+      createdAt: 0,
+      updatedAt: 0,
+    },
+    turns: [],
+  }
+  const approve = vi.fn<(runId: string, callId: string, allow: boolean) => Promise<void>>(() =>
+    Promise.resolve(),
+  )
+  const ports = createFakePorts({
+    providers: {
+      modelOptions: () =>
+        Promise.resolve([
+          {
+            ...model,
+            label: 'Local · main · m1',
+            modelType: 'chat',
+            name: null,
+            supportsTools: null,
+            reasoning: null,
+            nativeWebSearch: false,
+            canVision: false,
+          },
+        ]),
+      ...extra.providers,
+    },
+    ...(extra.search ? { search: extra.search } : {}),
+    ...(extra.skills ? { skills: extra.skills } : {}),
+    chat: {
+      start: (request, emit, options) => {
+        const id = crypto.randomUUID()
+        const source = stored.turns.find(
+          (turn) => turn.id === (request.retryTurnId ?? request.translateTurnId),
+        )
+        const turn: Conversation['turns'][number] = {
+          id,
+          parentId: request.retryTurnId
+            ? (source?.parentId ?? null)
+            : (request.translateTurnId ?? request.replyToId ?? stored.summary.selectedTurnId),
+          questionId: request.retryTurnId ? (source?.questionId ?? id) : id,
+          supersedesId: request.retryTurnId ?? null,
+          kind: request.translateTurnId ? 'translation' : 'reply',
+          input: source?.input ?? request.input,
+          images: source
+            ? source.images
+            : (request.images ?? []).map((image) => ({
+                mime: image.mime,
+                url: `data:${image.mime};base64,${image.data}`,
+              })),
+          generated: [],
+          text: '',
+          status: 'running',
+          errorCode: null,
+          endpointId: request.model?.endpointId ?? null,
+          modelId: request.model?.modelId ?? null,
+          reasoningEffort: request.reasoningEffort ?? 'default',
+          reasoningText: null,
+        }
+        stored.turns.push(turn)
+        const wrapped = (event: RunEvent) => {
+          if (event.kind === 'text_delta') turn.text += event.text
+          if (event.kind === 'reasoning_delta')
+            turn.reasoningText = (turn.reasoningText ?? '') + event.text
+          if (event.kind === 'usage') {
+            turn.usage = {
+              inputTokens: event.inputTokens,
+              outputTokens: event.outputTokens,
+              cacheReadTokens: event.cacheReadTokens,
+              cacheWriteTokens: event.cacheWriteTokens,
+              reasoningTokens: event.reasoningTokens,
+            }
+            turn.cost = event.cost
+          }
+          if (event.kind === 'context') turn.contextUsage = event.usage
+          if (event.kind === 'end') {
+            turn.status = event.status
+            turn.errorCode = event.error?.code ?? null
+            if (event.status === 'completed' && !request.retryTurnId)
+              stored.summary.selectedTurnId = id
+          }
+          emit(event)
+        }
+        runs.push({ request, turnId: id, emit: wrapped, signal: options?.signal })
+        options?.signal?.addEventListener('abort', () =>
+          wrapped({ kind: 'end', status: 'cancelled' }),
+        )
+        return Promise.resolve({
+          runId: `r${runs.length}`,
+          conversationId: withHistory ? (request.conversationId ?? 'c1') : null,
+          turnId: withHistory ? id : null,
+        })
+      },
+      approve,
+      ...extra.chat,
+    },
+  })
+  if (ports.conversations)
+    Object.assign(
+      ports.conversations,
+      {
+        get: (id: string) =>
+          id === stored.summary.id
+            ? Promise.resolve(structuredClone(stored))
+            : Promise.reject(
+                new KitClientError({ code: 'not_found', message: 'conversation not found' }),
+              ),
+      },
+      extra.history,
+    )
+  if (!withHistory) delete ports.conversations
+  const notify = { toast: vi.fn(), confirm: vi.fn(() => Promise.resolve(true)) }
+  const logger = { debug: vi.fn(), info: vi.fn(), warn: vi.fn(), error: vi.fn() }
+  const kit = { ports, i18n: createI18n('en'), notify, logger }
+  const view = render(Harness, { props: { kit, model, context, ...extra.props } })
+  return { runs, view, approve, notify }
+}
+
+export async function send(text: string) {
+  await fireEvent.input(screen.getByRole('textbox', { name: 'Message' }), {
+    target: { value: text },
+  })
+  const button = screen.getByRole('button', { name: 'Send' })
+  await waitFor(() => expect(button.hasAttribute('disabled')).toBe(false))
+  await fireEvent.click(button)
+}
+
+const SEARCH = 'Search models, optionally with a level'
+
+/** The composer model/effort pill; its name carries the current model and effort. */
+export const pickerTrigger = () => screen.findByRole('button', { name: /^Model and reasoning:/ })
+
+/** Opens the picker, searches so every group unfolds, picks a row, then closes it like a user. */
+export async function pickModel(search: string, name: RegExp) {
+  const trigger = await pickerTrigger()
+  if (trigger.getAttribute('aria-expanded') !== 'true') await fireEvent.click(trigger)
+  const input = await screen.findByLabelText(SEARCH)
+  await fireEvent.input(input, { target: { value: search } })
+  await fireEvent.click(await screen.findByRole('option', { name }))
+  await fireEvent.keyDown(input, { key: 'Escape' })
+  await waitFor(() => expect(screen.queryByLabelText(SEARCH)).toBeNull())
+}

package/src/chat/test-support/conversation-fixtures.ts

@@ -0,0 +1,32 @@
+import type { Conversation } from '../../ports'
+import { model } from './chat-fixture'
+
+export function candidates(): Conversation {
+  const reply = (id: string, text: string): Conversation['turns'][number] => ({
+    id,
+    parentId: null,
+    questionId: 'q',
+    supersedesId: null,
+    kind: 'reply',
+    ...model,
+    input: 'Shared question',
+    text,
+    status: 'completed',
+    errorCode: null,
+    reasoningEffort: 'default',
+    reasoningText: null,
+    images: [],
+    generated: [],
+  })
+  return {
+    summary: {
+      id: 'saved',
+      title: 'Candidates',
+      scope: null,
+      selectedTurnId: 'a',
+      createdAt: 0,
+      updatedAt: 0,
+    },
+    turns: [reply('a', 'Original **reply**'), reply('b', 'Alternative reply')],
+  }
+}