dsh-audiogen 0.1.0

package/src/client/AudioGenPanel.tsx

@@ -0,0 +1,206 @@
+/**
+ * The AI 音频 panel: a compact audio-generation studio.
+ */
+
+import { useEffect, useMemo, useState } from 'react'
+import type { AudiogenApi } from './api.ts'
+import type { AudiogenScope } from './settings-scope.ts'
+import { audioModelOptions } from './settings-scope.ts'
+import { tt } from './helpers.ts'
+import { GENERATE_API, HISTORY_API, type AudioMode, type GeneratedAudio, type HistoryEntry } from '../protocol.ts'
+import css from './audio-panel.module.css'
+
+function useConfig(scope: AudiogenScope) {
+  const [value, setValue] = useState(scope.getSnapshot().value)
+  useEffect(() => scope.subscribe(() => { setValue(scope.getSnapshot().value) }), [scope])
+  return value
+}
+
+function useHistory(): { entries: HistoryEntry[]; reload: () => void; clear: () => void } {
+  const [entries, setEntries] = useState<HistoryEntry[]>([])
+  const reload = (): void => {
+    void fetch(HISTORY_API.list, { method: 'POST' })
+      .then(async response => {
+        const body = await response.json() as { ok?: boolean; history?: HistoryEntry[] }
+        if (body.ok === true) setEntries(body.history ?? [])
+      })
+      .catch(() => { /* history is best-effort */ })
+  }
+  useEffect(() => { reload() }, [])
+  const clear = (): void => {
+    void fetch(HISTORY_API.clear, { method: 'POST' })
+      .then(() => reload())
+      .catch(() => { /* best-effort */ })
+  }
+  return { entries, reload, clear }
+}
+
+function dataUrlOf(audio: GeneratedAudio): string {
+  return `data:${audio.mime};base64,${audio.b64}`
+}
+
+export function AudioGenPanel(props: { api: AudiogenApi; scope: AudiogenScope }) {
+  const { api, scope } = props
+  const config = useConfig(scope)
+  const enabled = config?.enabled ?? true
+  const modelOptions = audioModelOptions(config)
+  const channels = config?.channels ?? []
+  const connected = enabled && channels.some(channel => {
+    const keyHeld = scope.getSecretSetSnapshot(`channelSecrets.${channel.id}`)
+    return channel.apiUrl.trim() !== '' && keyHeld && channel.models.length > 0
+  })
+
+  const [mode, setMode] = useState<AudioMode>('tts')
+  const [prompt, setPrompt] = useState('')
+  const [model, setModel] = useState('')
+  const [voice, setVoice] = useState('')
+  const [speed, setSpeed] = useState('')
+  const [duration, setDuration] = useState('')
+  const [format, setFormat] = useState('mp3')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [outputs, setOutputs] = useState<GeneratedAudio[]>([])
+  const { entries, reload, clear } = useHistory()
+
+  useEffect(() => {
+    if (modelOptions.models.length > 0 && !modelOptions.models.includes(model)) {
+      setModel(modelOptions.models[0]!)
+    }
+  }, [modelOptions.models, model])
+
+  const submit = async (): Promise<void> => {
+    if (prompt.trim() === '') {
+      setError(tt('prompt.required'))
+      return
+    }
+    setLoading(true)
+    setError(null)
+    try {
+      const response = await api.generate({
+        mode,
+        model: (model || modelOptions.models[0]) ?? '',
+        prompt: prompt.trim(),
+        ...(voice.trim() !== '' ? { voice: voice.trim() } : {}),
+        ...(speed.trim() !== '' ? { speed: Number(speed) } : {}),
+        ...(duration.trim() !== '' ? { duration: Number(duration) } : {}),
+        ...(format.trim() !== '' ? { format: format.trim() } : {}),
+      })
+      if (!response.ok) {
+        setError(response.message ?? '生成失败')
+        return
+      }
+      setOutputs(response.outputs ?? [])
+      reload()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const modeLabel = useMemo(() => {
+    if (mode === 'tts') return tt('mode.tts')
+    if (mode === 'music') return tt('mode.music')
+    return tt('mode.sfx')
+  }, [mode])
+
+  return (
+    <div className={css.panel}>
+      <header className={css.header}>
+        <h2 className={css.title}>{tt('panel.title')}</h2>
+        <span className={css.hint}>{modeLabel}</span>
+      </header>
+      <div className={css.layout}>
+        <div className={css.form}>
+          <div className={css.modeRow}>
+            {(['tts', 'music', 'sfx'] as const).map(item => (
+              <button
+                key={item}
+                type="button"
+                className={css.modeButton}
+                data-active={mode === item ? 'true' : 'false'}
+                onClick={() => setMode(item)}
+              >
+                {item === 'tts' ? tt('mode.tts') : item === 'music' ? tt('mode.music') : tt('mode.sfx')}
+              </button>
+            ))}
+          </div>
+          <label className={css.label}>
+            <span>{mode === 'tts' ? '文本' : '提示词'}</span>
+            <textarea className={css.textarea} value={prompt} onChange={event => setPrompt(event.target.value)} placeholder={tt('prompt.placeholder')} />
+          </label>
+          <label className={css.label}>
+            <span>{tt('model.label')}</span>
+            <select className={css.select} value={model} onChange={event => setModel(event.target.value)}>
+              {modelOptions.models.length === 0 ? <option value="">（请在设置中添加）</option> : null}
+              {modelOptions.models.map(item => <option key={item} value={item}>{item}</option>)}
+            </select>
+          </label>
+          {mode === 'tts' ? (
+            <label className={css.label}>
+              <span>{tt('voice.label')}</span>
+              <input className={css.input} value={voice} onChange={event => setVoice(event.target.value)} placeholder="alloy / 自定义音色" />
+            </label>
+          ) : null}
+          <label className={css.label}>
+            <span>{tt('speed.label')}</span>
+            <input className={css.input} type="number" step="0.1" min="0.5" max="2" value={speed} onChange={event => setSpeed(event.target.value)} placeholder="1.0" />
+          </label>
+          <label className={css.label}>
+            <span>{tt('duration.label')}</span>
+            <input className={css.input} type="number" step="1" min="1" max="120" value={duration} onChange={event => setDuration(event.target.value)} placeholder="30" />
+          </label>
+          <label className={css.label}>
+            <span>{tt('format.label')}</span>
+            <select className={css.select} value={format} onChange={event => setFormat(event.target.value)}>
+              <option value="mp3">mp3</option>
+              <option value="wav">wav</option>
+              <option value="flac">flac</option>
+              <option value="ogg">ogg</option>
+              <option value="pcm">pcm</option>
+            </select>
+          </label>
+          {!connected && <p className={css.hint}>{tt('config.missing')}</p>}
+          <button type="button" className={css.generate} disabled={loading || !connected} onClick={() => void submit()}>
+            {loading ? tt('generating') : tt('generate')}
+          </button>
+        </div>
+        <div className={css.result}>
+          {error !== null ? <p className={css.error}>{error}</p> : null}
+          {outputs.length === 0 ? <p className={css.empty}>{tt('result.empty')}</p> : (
+            <>
+              <p className={css.hint}>{tt('result.done', { count: outputs.length })}</p>
+              <div className={css.audioList}>
+                {outputs.map((audio, index) => (
+                  <div className={css.audioCard} key={audio.id}>
+                    <audio className={css.audio} controls preload="metadata" src={dataUrlOf(audio)} />
+                    <a className={css.download} href={dataUrlOf(audio)} download={`generated-${index + 1}.${audio.mime.split('/')[1]?.replace('mpeg', 'mp3') ?? 'mp3'}`}>下载</a>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+        <aside className={css.history}>
+          <div className={css.historyHeader}>
+            <strong className={css.historyTitle}>{tt('history.title')}</strong>
+            <button type="button" onClick={clear} style={{ border: 0, background: 'none', cursor: 'pointer', color: 'inherit', fontSize: 12 }}>清空</button>
+          </div>
+          {entries.length === 0 ? <p className={css.historyEmpty}>{tt('history.empty')}</p> : (
+            <div>
+              {entries.map(entry => (
+                <div className={css.historyItem} key={entry.id}>
+                  <div className={css.historyPrompt}>{entry.prompt}</div>
+                  <div className={css.historyMeta}>{entry.mode} · {entry.model}{entry.channel ? ` · ${entry.channel}` : ''}</div>
+                  {entry.audio.map((audio, index) => (
+                    <audio key={index} className={css.historyAudio} controls preload="none" src={audio.url} />
+                  ))}
+                </div>
+              ))}
+            </div>
+          )}
+        </aside>
+      </div>
+    </div>
+  )
+}

package/src/client/SettingsCard.tsx

@@ -0,0 +1,337 @@
+/**
+ * The dsh-audiogen settings card.
+ *
+ * Registers into the official `settings.plugin.item` slot. It manages a list
+ * of audio channels (each with API URL, per-channel secret, and model/voice
+ * catalog), plus master switches.
+ */
+
+import { useEffect, useState } from 'react'
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { createSnapshotStore, type SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import { CardForm, booleanField, textField, type CardActions, type CardShell, type FieldState as CardFieldState } from './settings-form.ts'
+import { ChannelsForm, type ChannelDraft, type ChannelsFormActions, type ChannelsFormState } from './channels-form.ts'
+import type { AudiogenScope } from './settings-scope.ts'
+import { PRESETS_API, type ModelMapping, type PresetProviderView } from '../protocol.ts'
+import type { AudioGenKey } from './locales.ts'
+import css from './settings-card.module.css'
+
+export interface AudioGenSettings {
+  enabled?: boolean
+  announceToAgent?: boolean
+  allowAgentAudioGeneration?: boolean
+  defaultModel?: string
+}
+
+export interface AudioGenSettingsCardState extends CardShell {
+  channels: ChannelsFormState
+  enabled: CardFieldState
+  announceToAgent: CardFieldState
+  allowAgentAudioGeneration: CardFieldState
+  defaultModel: CardFieldState
+}
+
+export interface AudioGenSettingsCardFace extends CardActions {
+  channels: ChannelsFormActions
+  hooks: {
+    audioGenSettingsCard: SnapshotStore<AudioGenSettingsCardState>
+  }
+}
+
+export class AudioGenSettingsCardController {
+  private readonly form: CardForm<AudioGenSettings>
+  private readonly channelsForm: ChannelsForm
+
+  constructor(private readonly scope: AudiogenScope) {
+    this.form = new CardForm(scope, [
+      booleanField('enabled'),
+      booleanField('announceToAgent'),
+      booleanField('allowAgentAudioGeneration'),
+      textField('defaultModel'),
+    ])
+    this.channelsForm = new ChannelsForm(scope)
+  }
+
+  private projection(): AudioGenSettingsCardState {
+    const shell = this.form.shell()
+    return {
+      ...shell,
+      dirty: shell.dirty || this.channelsForm.snapshot().dirty,
+      channels: this.channelsForm.snapshot(),
+      enabled: this.form.field('enabled'),
+      announceToAgent: this.form.field('announceToAgent'),
+      allowAgentAudioGeneration: this.form.field('allowAgentAudioGeneration'),
+      defaultModel: this.form.field('defaultModel'),
+    }
+  }
+
+  inject(): AudioGenSettingsCardFace {
+    const cardStore = this.form.bind(() => this.projection())
+    this.channelsForm.subscribe(() => { cardStore.set(this.projection()) })
+    return {
+      hooks: {
+        audioGenSettingsCard: cardStore,
+      },
+      channels: this.channelsForm.actions(),
+      ...this.form.actions(),
+    }
+  }
+}
+
+export type AudioGenSettingsCardProps =
+  PropsRuntime<'settings.plugin.item'>
+  & PropsLocale<'dsh-audiogen'>
+  & InjectFace<AudioGenSettingsCardFace>
+
+function newChannelDraft(preset: PresetProviderView | undefined, existing: ChannelDraft[]): ChannelDraft {
+  const id = `ch-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`
+  if (preset === undefined) {
+    return { id, preset: '', name: '', apiUrl: '', models: [] }
+  }
+  return {
+    id,
+    preset: preset.id,
+    name: preset.name,
+    apiUrl: preset.apiUrl,
+    models: preset.models.map(model => ({ ...model })),
+  }
+}
+
+function modelsToText(models: ModelMapping[]): string {
+  return models.map(model => `${model.alias}=${model.id}`).join('\n')
+}
+
+function textToModels(text: string): ModelMapping[] {
+  return text.split(/\n|,/).map(line => line.trim()).filter(Boolean).map(line => {
+    const eq = line.indexOf('=')
+    if (eq < 0) return { alias: line, id: line }
+    return { alias: line.slice(0, eq).trim(), id: line.slice(eq + 1).trim() }
+  }).filter(model => model.alias !== '')
+}
+
+export function AudioGenSettingsCard(props: AudioGenSettingsCardProps) {
+  const { t } = props
+  const state = props.useAudioGenSettingsCard(snapshot => snapshot)
+  const [open, setOpen] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [presetPickerOpen, setPresetPickerOpen] = useState(false)
+  const [presets, setPresets] = useState<PresetProviderView[]>([])
+  const [presetError, setPresetError] = useState<string | null>(null)
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null)
+
+  const [editName, setEditName] = useState('')
+  const [editUrl, setEditUrl] = useState('')
+  const [editKey, setEditKey] = useState('')
+  const [editModels, setEditModels] = useState('')
+  const [editDefault, setEditDefault] = useState(false)
+
+  const channels = state.channels.channels
+  const editing = editingId === null ? undefined : channels.find(channel => channel.id === editingId)
+
+  useEffect(() => {
+    if (editing === undefined) return
+    setEditName(editing.name)
+    setEditUrl(editing.apiUrl)
+    setEditKey('')
+    setEditModels(modelsToText(editing.models))
+    setEditDefault(editing.id === state.channels.defaultChannelId)
+  }, [editingId, editing?.id]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!state.available) return null
+
+  const blocked = !state.dirty || state.invalid || state.saving || state.channels.saving
+
+  const saveEdit = (): void => {
+    if (editingId === null) return
+    const existing = channels.find(channel => channel.id === editingId)
+    const models = textToModels(editModels)
+    const updated: ChannelDraft = {
+      id: editingId,
+      preset: existing?.preset ?? '',
+      name: editName.trim(),
+      apiUrl: editUrl.trim(),
+      models,
+    }
+    const next = existing === undefined
+      ? [...channels, updated]
+      : channels.map(channel => channel.id === editingId ? updated : channel)
+    props.channels.setChannels(next)
+    if (editKey.trim() !== '') props.channels.setChannelKey(editingId, editKey.trim())
+    if (editDefault) props.channels.setDefaultChannel(editingId)
+    setEditingId(null)
+  }
+
+  return (
+    <li className={css.card}>
+      <button
+        type="button"
+        className={css.header}
+        aria-expanded={open}
+        aria-label={`${t(open ? 'settings.collapse' : 'settings.expand')}: ${t('settings.title')}`}
+        onClick={() => { setOpen(!open) }}
+      >
+        <span className={css.headText}>
+          <span className={css.name}>{t('settings.title')}</span>
+          <span className={css.description}>{t('settings.description')}</span>
+        </span>
+        {state.dirty ? <span className={css.pending}>{t('settings.unsaved')}</span> : null}
+        <span className={open ? css.chevronOpen : css.chevron}>▾</span>
+      </button>
+      {!open ? null : (
+        <div className={css.body}>
+          {!state.writable ? <p className={css.readOnly} role="status">{t('settings.readOnly')}</p> : null}
+          <section className={css.channelSection} aria-label={t('channels.title')}>
+            <div className={css.sectionHeader}>
+              <div>
+                <h3 className={css.sectionTitle}>{t('channels.title')}</h3>
+                <p className={css.sectionHint}>{t('channels.hint')}</p>
+              </div>
+            </div>
+            {channels.length === 0 ? <p className={css.channelEmpty}>{t('channels.empty')}</p> : (
+              <ul className={css.channelList}>
+                {channels.map(channel => {
+                  const keyHeld = state.channels.keySet[channel.id] === true
+                  const ready = keyHeld && channel.models.length > 0
+                  const isDefault = channel.id === state.channels.defaultChannelId
+                  if (confirmDeleteId === channel.id) {
+                    return (
+                      <li key={channel.id} className={css.channelRow} data-action>
+                        <span className={css.deleteConfirmText}>{t('channels.confirm')}: {channel.name || t('channels.untitled')}</span>
+                        <button type="button" className={css.channelDanger} disabled={!state.writable} onClick={() => {
+                          props.channels.setChannels(channels.filter(candidate => candidate.id !== channel.id))
+                          if (isDefault && channels.length > 1) {
+                            const next = channels.find(candidate => candidate.id !== channel.id)
+                            if (next !== undefined) props.channels.setDefaultChannel(next.id)
+                          }
+                          setConfirmDeleteId(null)
+                          if (editingId === channel.id) setEditingId(null)
+                        }}>{t('channels.confirm')}</button>
+                        <button type="button" className={css.channelAction} onClick={() => setConfirmDeleteId(null)}>{t('channels.cancel')}</button>
+                      </li>
+                    )
+                  }
+                  return (
+                    <li key={channel.id} className={css.channelRow}>
+                      <span className={ready ? css.channelDotReady : css.channelDotWarn} aria-hidden="true" title={t(ready ? 'channels.statusReady' : 'channels.statusIncomplete')} />
+                      <button type="button" className={css.channelMain} disabled={!state.writable} onClick={() => setEditingId(channel.id)}>
+                        <span className={css.channelName}>{isDefault ? `★ ${channel.name || t('channels.untitled')}` : (channel.name || t('channels.untitled'))}</span>
+                        <span className={css.channelMeta}>
+                          <span className={css.channelHost}>{channel.apiUrl || '(no url)'}</span>
+                          <span className={css.channelBadge} data-warn={!keyHeld || channel.models.length === 0 ? '' : undefined}>
+                            {keyHeld ? t('channels.keySet') : t('channels.keyMissing')}
+                            {' · '}
+                            {channel.models.length > 0 ? t('channels.modelCount', { n: channel.models.length }) : t('channels.noModels')}
+                          </span>
+                        </span>
+                      </button>
+                      <button type="button" className={css.channelAction} onClick={() => setEditingId(channel.id)}>{t('channels.edit')}</button>
+                      <button type="button" className={css.channelAction} data-danger onClick={() => setConfirmDeleteId(channel.id)}>{t('channels.delete')}</button>
+                    </li>
+                  )
+                })}
+              </ul>
+            )}
+            {presetPickerOpen ? (
+              <div className={css.channelControls}>
+                <p className={css.sectionHint}>{t('presets.title')}</p>
+                {presetError !== null ? <p className={css.failed}>{presetError}</p> : null}
+                <div className={css.channelAddRow}>
+                  <button type="button" className={css.channelAdd} onClick={() => {
+                    setPresets([])
+                    setPresetError(null)
+                    void fetch(PRESETS_API, { method: 'POST' })
+                      .then(async response => {
+                        const body = await response.json() as { ok?: boolean; presets?: PresetProviderView[]; message?: string }
+                        if (!response.ok || body.ok !== true || body.presets === undefined) throw new Error(body.message ?? `HTTP ${response.status}`)
+                        setPresets(body.presets)
+                      })
+                      .catch(error => setPresetError(error instanceof Error ? error.message : String(error)))
+                  }}>{t('channels.addProvider')}</button>
+                  <button type="button" className={css.channelAdd} onClick={() => {
+                    const draft = newChannelDraft(undefined, channels)
+                    props.channels.setChannels([...channels, draft])
+                    setPresetPickerOpen(false)
+                    setEditingId(draft.id)
+                  }}>{t('channels.addCustom')}</button>
+                  <button type="button" className={css.channelAction} onClick={() => setPresetPickerOpen(false)}>×</button>
+                </div>
+                {presets.map(preset => (
+                  <button key={preset.id} type="button" className={css.channelAdd} onClick={() => {
+                    const draft = newChannelDraft(preset, channels)
+                    props.channels.setChannels([...channels, draft])
+                    setPresetPickerOpen(false)
+                    setEditingId(draft.id)
+                  }}>
+                    {preset.name} — {preset.hint}
+                  </button>
+                ))}
+              </div>
+            ) : (
+              <div className={css.channelAddRow}>
+                <button type="button" className={css.channelAdd} disabled={!state.writable} onClick={() => { setPresetError(null); setPresetPickerOpen(true) }}>{t('channels.addProvider')}</button>
+                <button type="button" className={css.channelAdd} disabled={!state.writable} onClick={() => {
+                  const draft = newChannelDraft(undefined, channels)
+                  props.channels.setChannels([...channels, draft])
+                  setEditingId(draft.id)
+                }}>{t('channels.addCustom')}</button>
+              </div>
+            )}
+          </section>
+
+          {editing !== undefined ? (
+            <div className={css.body}>
+              <div className={css.field}>
+                <label className={css.label} htmlFor={`audiogen-name-${editing.id}`}>{t('channel.name')}</label>
+                <input id={`audiogen-name-${editing.id}`} className={css.input} value={editName} onChange={event => setEditName(event.target.value)} />
+              </div>
+              <div className={css.field}>
+                <label className={css.label} htmlFor={`audiogen-url-${editing.id}`}>{t('channel.apiUrl')}</label>
+                <input id={`audiogen-url-${editing.id}`} className={css.input} value={editUrl} onChange={event => setEditUrl(event.target.value)} placeholder="https://…" />
+              </div>
+              <div className={css.field}>
+                <label className={css.label} htmlFor={`audiogen-key-${editing.id}`}>{t('channel.apiKey')}</label>
+                <input id={`audiogen-key-${editing.id}`} className={css.input} type="password" value={editKey} onChange={event => setEditKey(event.target.value)} placeholder={state.channels.keySet[editing.id] ? '••••••' : ''} />
+                <p className={css.sectionHint}>{t('channel.apiKeyHint')}</p>
+              </div>
+              <div className={css.field}>
+                <label className={css.label} htmlFor={`audiogen-models-${editing.id}`}>{t('channel.models')}</label>
+                <textarea id={`audiogen-models-${editing.id}`} className={css.textarea} value={editModels} onChange={event => setEditModels(event.target.value)} />
+                <p className={css.sectionHint}>{t('channel.modelsHint')}</p>
+              </div>
+              <label className={css.label}>
+                <input type="checkbox" checked={editDefault} onChange={event => setEditDefault(event.target.checked)} /> {t('channel.default')}
+              </label>
+              <div className={css.footer}>
+                <button type="button" className={css.discard} onClick={() => setEditingId(null)}>{t('channel.cancel')}</button>
+                <button type="button" className={css.save} onClick={saveEdit}>{t('channel.save')}</button>
+              </div>
+            </div>
+          ) : null}
+
+          <div className={css.field}>
+            <label className={css.label}>
+              <input type="checkbox" checked={state.enabled.text === 'true' || state.enabled.text === ''} disabled={!state.writable} onChange={event => props.edit('enabled', String(event.target.checked))} /> {t('settings.enabled')}
+            </label>
+          </div>
+          <div className={css.field}>
+            <label className={css.label}>
+              <input type="checkbox" checked={state.announceToAgent.text === 'true' || state.announceToAgent.text === ''} disabled={!state.writable} onChange={event => props.edit('announceToAgent', String(event.target.checked))} /> {t('settings.announceToAgent')}
+            </label>
+          </div>
+          <div className={css.field}>
+            <label className={css.label}>
+              <input type="checkbox" checked={state.allowAgentAudioGeneration.text === 'true' || state.allowAgentAudioGeneration.text === ''} disabled={!state.writable} onChange={event => props.edit('allowAgentAudioGeneration', String(event.target.checked))} /> {t('settings.allowAgentAudio')}
+            </label>
+          </div>
+          <div className={css.footer}>
+            {state.failed ? <p className={css.failed}>保存失败</p> : null}
+            <button type="button" className={css.discard} disabled={!state.dirty || state.saving} onClick={() => props.discard()}>{t('settings.discard')}</button>
+            <button type="button" className={css.save} disabled={blocked} onClick={() => { void props.save(); void props.channels.commit() }}>
+              {state.saving ? t('settings.saving') : t('settings.save')}
+            </button>
+          </div>
+        </div>
+      )}
+    </li>
+  )
+}

package/src/client/api.ts

@@ -0,0 +1,36 @@
+/**
+ * Browser-side API client for the audio generation and history routes.
+ */
+
+import { GENERATE_API, HISTORY_API, type GenerateAudioRequest, type GeneratedAudio, type HistoryEntry } from '../protocol.ts'
+
+export interface GenerateResponse {
+  ok: boolean
+  outputs?: GeneratedAudio[]
+  history?: HistoryEntry[]
+  historyError?: string
+  code?: string
+  message?: string
+}
+
+export class AudiogenApi {
+  async generate(request: GenerateAudioRequest): Promise<GenerateResponse> {
+    const response = await fetch(GENERATE_API, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(request),
+    })
+    const body = await response.json() as GenerateResponse
+    return body
+  }
+
+  async history(): Promise<HistoryEntry[]> {
+    const response = await fetch(HISTORY_API.list, { method: 'POST' })
+    const body = await response.json() as { ok?: boolean; history?: HistoryEntry[] }
+    return body.ok === true ? (body.history ?? []) : []
+  }
+
+  async clearHistory(): Promise<void> {
+    await fetch(HISTORY_API.clear, { method: 'POST' })
+  }
+}