tts

  on('ui.render', { component: 'Pane', requestId: VOICE_PANE }, async ($, e) => {
    const { Box, Text, Button, Select, Input } = $.ui.resolve(e)
    const list = await read($, voices)
    const busy = await read($, voiceBusy)
    const msg = await read($, voiceMsg)
    return (
      <Box flexDirection="column" gap={1}>
        {list && (
          <Box flexDirection="column">
            <Select
              key="voice-pick"
              label="当前音色 "
              options={list.voices.map(v => ({ value: v.id, label: v.name }))}
              value={list.current}
              onSelect={id => void pickVoice($, id)}
            />
            <Box flexDirection="row" gap={2}>
              <Button key="voice-preview" label="🔊 试听" plain onPress={() => void previewVoice($)} />
              <Button key="voice-remove" label="🗑 删除" plain dimColor onPress={() => void removeVoice($)} />
            </Box>
          </Box>
        )}
        <Box flexDirection="column">
          <Text bold>添加音色</Text>
          <Input
            key="voice-id"
            label="音色 ID "
            placeholder="例如 ICL_uranus_zh_female_xingganmeihuo_tob"
            value={await read($, draftId)}
            submitLabel="验证"
            onInput={v => void update($, draftId, () => v)}
            onSubmit={v => void update($, draftId, () => v).then(() => addVoice($))}
          />
          <Input
            key="voice-name"
            label="名字   "
            placeholder="可选，不填就用 ID"
            value={await read($, draftName)}
            submitLabel="验证"
            onInput={v => void update($, draftName, () => v)}
            onSubmit={v => void update($, draftName, () => v).then(() => addVoice($))}
          />
          <Button key="voice-add" label={busy ? '⏳ 验证中…' : '验证并保存'} onPress={() => void addVoice($)} />
        </Box>
        {msg ? <Text>{msg}</Text> : null}
        <Text dimColor>音色 ID 在火山控制台「音色库」里找；验证会真的合成一句试听语（约 10 个字计费）。</Text>
      </Box>
    )
  })