dsh-audiogen 0.2.0 → 0.3.2

package/src/client/SettingsCard.tsx

@@ -4,15 +4,21 @@
  * 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.
+ *
+ * Channel management follows the DSH "模型" settings pattern: provider rows
+ * with a status dot and 编辑/删除 actions, and two equal-width add actions
+ * (「添加提供方」 / 「添加自定义提供方」) below. Both add and edit open the
+ * same inline editor card — provider select, API key, 自定义设置 (API 地址)
+ * and a 模型目录 with 「获取可用模型」 discovery and per-row model editing.
  */
 
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, 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 { MODEL_API, PRESETS_API, type DiscoveredAudioModel, type ModelMapping, type PresetProviderView } from '../protocol.ts'
+import { MODEL_API, PRESETS_API, type AudioModelCategory, type DiscoveredAudioModel, type ModelMapping, type PresetProviderView } from '../protocol.ts'
 import type { AudioGenKey } from './locales.ts'
 import css from './settings-card.module.css'
 
@@ -83,118 +89,160 @@ export type AudioGenSettingsCardProps =
   & 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 })),
+/** Which editor card is open. */
+type EditorMode =
+  | { kind: 'edit'; channelId: string }
+  | { kind: 'add-provider' }
+  | { kind: 'add-custom' }
+
+const MODEL_CATEGORIES: Array<AudioModelCategory | undefined> = [
+  undefined, 'tts', 'music', 'sfx', 'voice_design', 'voice_clone',
+]
+
+function newChannelId(): string {
+  return `ch-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`
+}
+
+/** Strip a draft before staging: empty rows removed, aliases default to ids. */
+function cleanModels(models: ModelMapping[]): ModelMapping[] {
+  const cleaned = models.map(model => {
+    const alias = model.alias.trim()
+    const id = model.id.trim() === '' ? alias : model.id.trim()
+    if (alias === '' && id === '') return undefined
+    return {
+      alias: alias === '' ? id : alias,
+      id,
+      ...(model.category === undefined ? {} : { category: model.category }),
+    } as ModelMapping | undefined
+  }).filter((model): model is ModelMapping => model !== undefined)
+  return [...new Map(cleaned.map(model => [model.alias, model])).values()]
+}
+
+/** Translate one key with interpolation (the injected `t` takes no values). */
+function tpl(
+  t: (key: AudioGenKey) => string,
+  key: AudioGenKey,
+  values?: Record<string, string | number>,
+): string {
+  let text = t(key)
+  if (values === undefined) return text
+  for (const [name, value] of Object.entries(values)) {
+    text = text.replaceAll(`{${name}}`, String(value))
   }
+  return text
 }
 
-function modelsToText(models: ModelMapping[]): string {
-  return models.map(model => `${model.alias}=${model.id}${model.category === undefined ? '' : ` @${model.category}`}`).join('\n')
+/** One model row as the editor holds it (never empty—rows are removed). */
+interface ModelRow extends ModelMapping {
+  rowKey: string
 }
 
-function textToModels(text: string): ModelMapping[] {
-  return text.split(/\n|,/).map(line => line.trim()).filter(Boolean).map(line => {
-    const at = line.lastIndexOf(' @')
-    const category = at >= 0 ? line.slice(at + 2).trim() : undefined
-    const body = at >= 0 ? line.slice(0, at).trim() : line
-    const eq = body.indexOf('=')
-    const alias = eq >= 0 ? body.slice(0, eq).trim() : body.trim()
-    const id = eq >= 0 ? body.slice(eq + 1).trim() : alias
-    return {
-      alias,
-      id: id === '' ? alias : id,
-      ...(category === undefined || category === '' ? {} : { category: category as NonNullable<ModelMapping['category']> }),
-    }
-  }).filter(model => model.alias !== '')
+function rowsOf(models: ModelMapping[]): ModelRow[] {
+  return models.map((model, index) => ({ ...model, rowKey: `m-${index}-${model.alias}-${model.id}` }))
 }
 
-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 [discovering, setDiscovering] = useState(false)
-  const [discoverError, setDiscoverError] = useState<string | null>(null)
+// ---------------------------------------------------------------------------
+// Channel editor card (add + edit share it)
+// ---------------------------------------------------------------------------
 
-  const [editName, setEditName] = useState('')
-  const [editUrl, setEditUrl] = useState('')
-  const [editKey, setEditKey] = useState('')
-  const [editModels, setEditModels] = useState('')
-  const [editDefault, setEditDefault] = useState(false)
+interface ChannelEditorProps {
+  t: (key: AudioGenKey) => string
+  writable: boolean
+  /** 'edit' | 'add-provider' | 'add-custom' */
+  mode: EditorMode
+  /** The channel being edited (edit mode). */
+  channel?: ChannelDraft
+  /** Whether the edited channel currently holds a stored secret. */
+  keyHeld: boolean
+  /** Presets available for the 提供方 select (add-provider mode). */
+  presets: PresetProviderView[]
+  /** Whether the edited channel is the default channel. */
+  initiallyDefault: boolean
+  onCancel: () => void
+  onSave: (channel: ChannelDraft, key: string | undefined, isDefault: boolean) => void
+}
 
-  const channels = state.channels.channels
-  const editing = editingId === null ? undefined : channels.find(channel => channel.id === editingId)
+function ChannelEditor(props: ChannelEditorProps): React.JSX.Element {
+  const { t, writable, mode, presets } = props
 
-  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
+  const initialPresetId = mode.kind === 'add-provider' ? (presets[0]?.id ?? '') : ''
+  const [presetId, setPresetId] = useState(initialPresetId)
+  const invited = useMemo(
+    () => (mode.kind === 'add-provider' ? presets.find(preset => preset.id === presetId) : undefined),
+    [mode, presets, presetId],
+  )
 
-  if (!state.available) return null
+  // Draft fields. In add-provider mode the preset change re-seeds them.
+  const [name, setName] = useState(props.channel?.name ?? (invited?.name ?? ''))
+  const [url, setUrl] = useState(props.channel?.apiUrl ?? (invited?.apiUrl ?? ''))
+  const [models, setModels] = useState<ModelRow[]>(rowsOf(props.channel?.models ?? invited?.models ?? []))
+  const [key, setKey] = useState('')
+  const [keyAction, setKeyAction] = useState<'none' | 'clear'>('none')
+  const [isDefault, setIsDefault] = useState(props.initiallyDefault)
 
-  const blocked = !state.dirty || state.invalid || state.saving || state.channels.saving
+  const [discovering, setDiscovering] = useState(false)
+  const [discoverError, setDiscoverError] = useState<string | null>(null)
+  const [candidates, setCandidates] = useState<DiscoveredAudioModel[] | null>(null)
+  const [picked, setPicked] = useState<ReadonlySet<string>>(new Set())
+  const [sourceNote, setSourceNote] = useState<string | null>(null)
+
+  const usePreset = (preset: PresetProviderView | undefined): void => {
+    setPresetId(preset?.id ?? '')
+    setName(preset?.name ?? '')
+    setUrl(preset?.apiUrl ?? '')
+    setModels(rowsOf(preset?.models ?? []))
+    setKey('')
+    setKeyAction('none')
+  }
 
-  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 effectiveKeyHeld = props.keyHeld && keyAction !== 'clear'
+
+  const save = (): void => {
+    const currentId = props.channel?.id ?? newChannelId()
+    const channel: ChannelDraft = {
+      id: currentId,
+      preset: mode.kind === 'edit' ? (props.channel?.preset ?? '') : (mode.kind === 'add-custom' ? '' : invited?.id ?? ''),
+      name: name.trim(),
+      apiUrl: url.trim(),
+      models: cleanModels(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)
+    const stagedKey = key.trim() !== '' ? key.trim() : (keyAction === 'clear' ? '' : undefined)
+    props.onSave(channel, stagedKey, isDefault)
   }
 
-  const discoverModels = async (): Promise<void> => {
-    if (editingId === null) return
+  const discoverable = url.trim() !== '' && (key.trim() !== '' || effectiveKeyHeld)
+
+  const discover = async (): Promise<void> => {
+    if (!discoverable) return
     setDiscovering(true)
     setDiscoverError(null)
+    setSourceNote(null)
     try {
-      const existing = channels.find(channel => channel.id === editingId)
       const response = await fetch(MODEL_API.discover, {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
         body: JSON.stringify({
-          channelId: editingId,
-          ...(editUrl.trim() !== '' ? { apiUrl: editUrl.trim() } : {}),
-          ...(editKey.trim() !== '' ? { apiKey: editKey.trim() } : {}),
+          channelId: props.channel?.id ?? 'preview',
+          preset: mode.kind === 'add-provider' ? (invited?.id ?? '') : (props.channel?.preset ?? ''),
+          apiUrl: url.trim(),
+          ...(key.trim() !== '' ? { apiKey: key.trim() } : {}),
         }),
       })
       const body = await response.json() as { ok?: boolean; models?: DiscoveredAudioModel[]; message?: string; source?: string }
       if (body.ok !== true || body.models === undefined) {
         throw new Error(body.message ?? `HTTP ${response.status}`)
       }
-      setEditModels(modelsToText([
-        ...body.models,
-        ...textToModels(editModels).filter(existingModel => !body.models!.some(model => model.id === existingModel.id)),
-      ]))
-      void existing
+      const known = new Set(models.map(model => model.id.trim()).filter(Boolean))
+      const found = body.models
+        .map(model => ({ ...model, id: model.id.trim() }))
+        .filter(model => model.id !== '')
+      if (found.length === 0) {
+        setDiscoverError(t('channel.fetchEmpty'))
+        return
+      }
+      setCandidates(found)
+      setPicked(new Set(found.filter(model => !known.has(model.id)).map(model => model.id)))
+      setSourceNote(body.source ?? null)
     } catch (error) {
       setDiscoverError(error instanceof Error ? error.message : String(error))
     } finally {
@@ -202,6 +250,362 @@ export function AudioGenSettingsCard(props: AudioGenSettingsCardProps) {
     }
   }
 
+  const closeCandidates = (): void => {
+    setCandidates(null)
+    setPicked(new Set())
+  }
+
+  const adoptCandidates = (): void => {
+    if (candidates === null) return
+    const existing = [...models]
+    const byId = new Map(existing.map((model, index) => [model.id.trim(), { model, index }]))
+    for (const candidate of candidates) {
+      const id = candidate.id.trim()
+      if (id === '' || !picked.has(id)) continue
+      if (byId.has(id)) continue
+      byId.set(id, { model: { rowKey: `m-${Date.now()}-${existing.length}`, alias: candidate.alias, id, ...(candidate.category === undefined ? {} : { category: candidate.category }) }, index: existing.length })
+      existing.push(byId.get(id)!.model)
+    }
+    setModels(existing)
+    closeCandidates()
+  }
+
+  const patchModel = (index: number, next: Partial<ModelMapping>): void => {
+    setModels(models.map((model, at) => at === index ? { ...model, ...next } : model))
+  }
+
+  const presetPlaceholder = invited?.apiUrl ?? t('channel.apiUrlPlaceholder')
+
+  return (
+    <div className={css.channelEditor}>
+      {mode.kind === 'add-provider' ? (
+        <div className={css.field}>
+          <label className={css.label} htmlFor="audiogen-editor-provider">{t('channel.provider')}</label>
+          <select
+            id="audiogen-editor-provider"
+            className={css.select}
+            value={presetId}
+            disabled={!writable}
+            onChange={event => usePreset(presets.find(preset => preset.id === event.target.value))}
+          >
+            {presets.map(preset => <option key={preset.id} value={preset.id}>{preset.name}</option>)}
+          </select>
+          {invited?.site !== undefined ? (
+            <p className={css.sectionHint}>{t('channel.site')}：<a className={css.link} href={invited.site} target="_blank" rel="noreferrer">{invited.site}</a></p>
+          ) : null}
+        </div>
+      ) : null}
+      {mode.kind === 'add-custom' ? (
+        <div className={css.field}>
+          <span className={css.label}>{t('channel.provider')}</span>
+          <p className={css.sectionHint}>{t('channel.providerCustom')} — {t('channel.providerCustomHint')}</p>
+        </div>
+      ) : null}
+      {mode.kind === 'edit' ? (
+        <div className={css.editorHeader}>
+          <span className={css.editorTitle}>{props.channel?.name.trim() !== '' ? props.channel?.name : t('channels.untitled')}</span>
+          <span className={css.editorTag}>{mode.kind === 'edit' ? t('channel.editTitle') : ''}</span>
+        </div>
+      ) : null}
+      <div className={css.field}>
+        <label className={css.label} htmlFor="audiogen-editor-name">{t('channel.name')}</label>
+        <input id="audiogen-editor-name" className={css.input} value={name} placeholder={t('channel.namePlaceholder')} disabled={!writable} onChange={event => setName(event.target.value)} />
+      </div>
+      <div className={css.field}>
+        <div className={css.head}>
+          <label className={css.label} htmlFor="audiogen-editor-key">{t('channel.apiKey')}</label>
+          {effectiveKeyHeld && key.trim() === '' ? (
+            <button type="button" className={css.reset} disabled={!writable} onClick={() => { setKeyAction('clear'); setKey('') }}>
+              {t('channel.clearKey')}
+            </button>
+          ) : null}
+        </div>
+        <input
+          id="audiogen-editor-key"
+          className={css.input}
+          type="password"
+          value={key}
+          autoComplete="off"
+          placeholder={effectiveKeyHeld ? '••••••••' : ''}
+          disabled={!writable}
+          onChange={event => { setKey(event.target.value); if (event.target.value !== '') setKeyAction('none') }}
+        />
+        <p className={css.sectionHint}>{effectiveKeyHeld ? t('channel.apiKeyStoredHint') : t('channel.apiKeyHint')}</p>
+      </div>
+      <details className={css.customSettings}>
+        <summary className={css.customSettingsSummary}>{t('channel.customSettings')}</summary>
+        <div className={css.customSettingsBody}>
+          <div className={css.field}>
+            <label className={css.label} htmlFor="audiogen-editor-url">{t('channel.apiUrl')}</label>
+            <input
+              id="audiogen-editor-url"
+              className={css.input}
+              type="text"
+              value={url}
+              placeholder={presetPlaceholder}
+              disabled={!writable}
+              onChange={event => setUrl(event.target.value)}
+            />
+            <p className={css.sectionHint}>{t('channel.apiUrlHint')}</p>
+          </div>
+        </div>
+      </details>
+      <ModelCatalog
+        t={t}
+        writable={writable}
+        models={models}
+        discoverable={discoverable}
+        discovering={discovering}
+        discoverError={discoverError}
+        candidates={candidates}
+        picked={picked}
+        sourceNote={sourceNote}
+        onPatchModel={patchModel}
+        onRemoveModel={index => setModels(models.filter((_model, at) => at !== index))}
+        onAddModel={() => setModels([...models, { rowKey: `m-${Date.now()}-${models.length}`, alias: '', id: '' }])}
+        onDiscover={() => void discover()}
+        onTogglePicked={id => {
+          setPicked(current => {
+            const next = new Set(current)
+            if (!next.delete(id)) next.add(id)
+            return next
+          })
+        }}
+        onToggleAllPicked={() => {
+          setPicked(current => (candidates !== null && candidates.length > 0 && candidates.every(candidate => current.has(candidate.id)))
+            ? new Set()
+            : new Set((candidates ?? []).map(candidate => candidate.id)))
+        }}
+        onAdopt={() => adoptCandidates()}
+        onCloseCandidates={closeCandidates}
+      />
+      <label className={css.field}>
+        <span className={css.label}>
+          <input type="checkbox" checked={isDefault} disabled={!writable} onChange={event => setIsDefault(event.target.checked)} /> {t('channel.default')}
+        </span>
+      </label>
+      <div className={css.editorFooter}>
+        <button type="button" className={css.discard} onClick={props.onCancel}>{t('channel.cancel')}</button>
+        <button type="button" className={css.save} onClick={save}>{t('channel.save')}</button>
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Model catalog (目录) inside the channel editor
+// ---------------------------------------------------------------------------
+
+interface ModelCatalogProps {
+  t: (key: AudioGenKey) => string
+  writable: boolean
+  models: ModelRow[]
+  discoverable: boolean
+  discovering: boolean
+  discoverError: string | null
+  candidates: DiscoveredAudioModel[] | null
+  picked: ReadonlySet<string>
+  sourceNote: string | null
+  onPatchModel: (index: number, next: Partial<ModelMapping>) => void
+  onRemoveModel: (index: number) => void
+  onAddModel: () => void
+  onDiscover: () => void
+  onTogglePicked: (id: string) => void
+  onToggleAllPicked: () => void
+  onAdopt: () => void
+  onCloseCandidates: () => void
+}
+
+function ModelCatalog(props: ModelCatalogProps): React.JSX.Element {
+  const { t, writable, models, discoverable, discovering, candidates, picked } = props
+  const allPicked = candidates !== null && candidates.length > 0 && candidates.every(candidate => picked.has(candidate.id))
+  return (
+    <section className={css.modelCatalog} aria-label={t('channel.modelsTitle')}>
+      <div className={css.modelCatalogHead}>
+        <div>
+          <span className={css.modelCatalogTitle}>{t('channel.modelsTitle')}</span>
+          <span className={css.modelCatalogMeta}>
+            {models.length > 0 ? tpl(t, 'channel.modelsCount', { n: models.length }) : t('channel.modelsNone')}
+          </span>
+        </div>
+        <button
+          type="button"
+          className={css.linkButton}
+          disabled={!writable || discovering || !discoverable}
+          title={discoverable ? undefined : t('channel.discoverNeedsUrlKey')}
+          onClick={props.onDiscover}
+        >
+          {discovering ? t('channel.fetchingModels') : t('channel.fetchModels')}
+        </button>
+      </div>
+      {models.length === 0 ? <p className={css.modelEmpty}>{t('channel.modelsEmpty')}</p> : (
+        <ul className={css.modelRows}>
+          {models.map((model, index) => (
+            <li key={`${model.rowKey}-${index}`} className={css.modelRow}>
+              <input
+                className={`${css.input} ${css.modelInput}`}
+                type="text"
+                value={model.alias}
+                placeholder={t('channel.modelAlias')}
+                aria-label={`${t('channel.modelAlias')} ${index + 1}`}
+                disabled={!writable}
+                onChange={event => props.onPatchModel(index, { alias: event.target.value })}
+              />
+              <span className={css.modelArrow} aria-hidden="true">→</span>
+              <input
+                className={`${css.input} ${css.modelInput}`}
+                type="text"
+                value={model.id}
+                placeholder={t('channel.modelId')}
+                aria-label={`${t('channel.modelId')} ${index + 1}`}
+                disabled={!writable}
+                onChange={event => props.onPatchModel(index, { id: event.target.value })}
+              />
+              <select
+                className={`${css.select} ${css.modelCategorySelect}`}
+                value={model.category ?? ''}
+                aria-label={`${t('channel.modelCategory')} ${index + 1}`}
+                disabled={!writable}
+                onChange={event => {
+                  const value = event.target.value as AudioModelCategory | ''
+                  props.onPatchModel(index, value === '' ? { category: undefined } : { category: value })
+                }}
+              >
+                {MODEL_CATEGORIES.map(category => (
+                  <option key={category ?? 'auto'} value={category ?? ''}>{category === undefined ? t('channel.category.auto') : t(`channel.category.${category}`)}</option>
+                ))}
+              </select>
+              <button
+                type="button"
+                className={css.modelRowRemove}
+                aria-label={t('channel.removeModel')}
+                disabled={!writable}
+                onClick={() => props.onRemoveModel(index)}
+              >
+                ×
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className={css.modelCatalogTools}>
+        <button type="button" className={css.addModel} disabled={!writable} onClick={props.onAddModel}>
+          {t('channel.addModel')}
+        </button>
+      </div>
+      {props.sourceNote !== null && props.candidates !== null ? (
+        <p className={css.detectOk}>{tpl(t, 'channel.discoverSource', { source: props.sourceNote })}</p>
+      ) : null}
+      {props.discoverError !== null ? <p className={css.failed}>{props.discoverError}</p> : null}
+      {candidates === null ? null : (
+        <div className={css.candidatePanel}>
+          <div className={css.candidateHead}>
+            <span className={css.candidateTitle}>{tpl(t, 'channel.candidates', { n: candidates.length })}</span>
+            <button type="button" className={css.linkButton} onClick={props.onToggleAllPicked}>
+              {allPicked ? t('channel.clearSelection') : t('channel.selectAll')}
+            </button>
+          </div>
+          <ul className={css.candidateList}>
+            {candidates.map(candidate => (
+              <li key={candidate.id} className={css.candidate}>
+                <label className={css.candidateLabel}>
+                  <input
+                    type="checkbox"
+                    checked={picked.has(candidate.id)}
+                    disabled={models.some(model => model.id.trim() === candidate.id)}
+                    onChange={() => props.onTogglePicked(candidate.id)}
+                  />
+                  <span className={css.candidateId}>{candidate.alias === candidate.id ? candidate.id : `${candidate.alias}（${candidate.id}）`}</span>
+                  {candidate.category !== undefined ? <span className={css.modelBadge}>{t(`channel.category.${candidate.category}`)}</span> : null}
+                </label>
+              </li>
+            ))}
+          </ul>
+          <div className={css.candidateActions}>
+            <button type="button" className={css.discard} onClick={props.onCloseCandidates}>{t('channel.cancel')}</button>
+            <button type="button" className={css.save} onClick={props.onAdopt}>
+              {tpl(t, 'channel.adoptSelected', { n: Array.from(picked).length })}
+            </button>
+          </div>
+        </div>
+      )}
+    </section>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Card
+// ---------------------------------------------------------------------------
+
+export function AudioGenSettingsCard(props: AudioGenSettingsCardProps) {
+  const { t } = props
+  const state = props.useAudioGenSettingsCard(snapshot => snapshot)
+  const [open, setOpen] = useState(false)
+  const [editor, setEditor] = useState<EditorMode | null>(null)
+  const [presets, setPresets] = useState<PresetProviderView[]>([])
+  const [presetLoading, setPresetLoading] = useState(false)
+  const [presetError, setPresetError] = useState<string | null>(null)
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null)
+
+  const channels = state.channels.channels
+  const editingChannel = editor !== null && editor.kind === 'edit'
+    ? channels.find(channel => channel.id === editor.channelId)
+    : undefined
+
+  useEffect(() => {
+    if (editor?.kind === 'add-provider' && presets.length === 0 && presetError === null && !presetLoading) {
+      setPresetLoading(true)
+      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)))
+        .finally(() => setPresetLoading(false))
+    }
+  }, [editor, presets.length, presetError, presetLoading])
+
+  if (!state.available) return null
+
+  const blocked = !state.dirty || state.invalid || state.saving || state.channels.saving
+
+  const closeEditor = (): void => { setEditor(null) }
+
+  const saveEditor = (channel: ChannelDraft, key: string | undefined, isDefault: boolean): void => {
+    const exists = channels.some(candidate => candidate.id === channel.id)
+    const next = exists
+      ? channels.map(candidate => candidate.id === channel.id ? channel : candidate)
+      : [...channels, channel]
+    props.channels.setChannels(next)
+    // key === undefined: no staged change; key === '': clear; otherwise set.
+    if (key !== undefined) props.channels.setChannelKey(channel.id, key)
+    if (isDefault) props.channels.setDefaultChannel(channel.id)
+    closeEditor()
+  }
+
+  const removeChannel = (channel: ChannelDraft): void => {
+    const isDefault = channel.id === state.channels.defaultChannelId
+    const next = channels.filter(candidate => candidate.id !== channel.id)
+    props.channels.setChannels(next)
+    if (isDefault && next.length > 0) {
+      props.channels.setDefaultChannel(next[0]!.id)
+    }
+    setConfirmDeleteId(null)
+    if (editor?.kind === 'edit' && editor.channelId === channel.id) closeEditor()
+  }
+
+  const openAddProvider = (): void => {
+    setPresetError(null)
+    setEditor({ kind: 'add-provider' })
+  }
+
+  const openAddCustom = (): void => {
+    setPresetError(null)
+    setEditor({ kind: 'add-custom' })
+  }
+
   return (
     <li className={css.card}>
       <button
@@ -238,15 +642,7 @@ export function AudioGenSettingsCard(props: AudioGenSettingsCardProps) {
                     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.channelDanger} disabled={!state.writable} onClick={() => removeChannel(channel)}>{t('channels.confirm')}</button>
                         <button type="button" className={css.channelAction} onClick={() => setConfirmDeleteId(null)}>{t('channels.cancel')}</button>
                       </li>
                     )
@@ -254,7 +650,7 @@ export function AudioGenSettingsCard(props: AudioGenSettingsCardProps) {
                   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)}>
+                      <button type="button" className={css.channelMain} disabled={!state.writable} onClick={() => { setEditor({ kind: 'edit', channelId: 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>
@@ -265,96 +661,44 @@ export function AudioGenSettingsCard(props: AudioGenSettingsCardProps) {
                           </span>
                         </span>
                       </button>
-                      <button type="button" className={css.channelAction} onClick={() => setEditingId(channel.id)}>{t('channels.edit')}</button>
+                      <button type="button" className={css.channelAction} onClick={() => { setEditor({ kind: 'edit', channelId: 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>
+            {presetError !== null ? <p className={css.failed}>{presetError}</p> : null}
+            <div className={css.channelAddRow}>
+              <button type="button" className={css.channelAdd} disabled={!state.writable} onClick={openAddProvider}>
+                {presetLoading ? t('channels.addProviderLoading') : t('channels.addProvider')}
+              </button>
+              <button type="button" className={css.channelAdd} disabled={!state.writable} onClick={openAddCustom}>
+                {t('channels.addCustom')}
+              </button>
+            </div>
+            {editor !== null ? (
+              editor.kind === 'add-provider' && presets.length === 0 && presetError === null ? (
+                <p className={css.sectionHint}>{presetLoading ? t('channels.addProviderLoading') : t('channels.addProviderFailed')}</p>
+              ) : (
+                <div className={css.editorWrap}>
+                  <ChannelEditor
+                    key={editor.kind === 'edit' ? `edit-${editor.channelId}` : editor.kind}
+                    t={t}
+                    writable={state.writable}
+                    mode={editor}
+                    channel={editingChannel}
+                    keyHeld={editor.kind === 'edit' ? state.channels.keySet[editor.channelId] === true : false}
+                    presets={presets}
+                    initiallyDefault={editor.kind === 'edit' ? editor.channelId === state.channels.defaultChannelId : channels.length === 0}
+                    onCancel={closeEditor}
+                    onSave={saveEditor}
+                  />
                 </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>
-            )}
+              )
+            ) : null}
           </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 className={css.channelAddRow}>
-                  <button type="button" className={css.channelAdd} disabled={discovering || !state.writable} onClick={() => void discoverModels()}>
-                    {discovering ? '获取中…' : '获取可用模型'}
-                  </button>
-                </div>
-                {discoverError !== null ? <p className={css.failed}>{discoverError}</p> : null}
-              </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')}