read-along

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    saw(e)
    await read($, bandCheck) // so the band check redraws this, and only this and the hint line
    if (e.surface === 'terminal') band.sawBand = true
    if (e.props.hasSurvey || bottomKind() !== 'band') return next(e)
    const others = await next(e)
    const { Box } = $.ui.resolve(e)
    return (
      <Box flexDirection="column">
        {await playerRow($, e)}
        {others}
      </Box>
    )
  }).catch(($, e, next) => next(e))

async function playerRow($: $, e: RenderInput<'AbovePrompt'>): Promise<RenderElement> {
  const { Box, Text, Button } = $.ui.resolve(e)
  const status = await read($, now)
  const s = await settings($)
  const cols = e.props.bodyColumns ?? e.viewport?.columns ?? 80

  if (status === null) {
    const auto = s.autoReadReplies === 'off' && !s.autoReadMine ? 'auto-read off' : `auto-read ${[s.autoReadReplies !== 'off' ? `replies (${s.autoReadReplies})` : '', s.autoReadMine ? 'mine' : ''].filter(Boolean).join(' + ')}`
    return (
      <Box columnGap={1} flexWrap="nowrap" paddingX={1}>
        <Text wrap="truncate-end">
          <Text color="magenta" bold>
            {icon('idle')}
            {'  '}
            {voiceName(await mainVoice($, s))}
          </Text>
          <Text dimColor>
            {'  '}
            {s.speed}× · {auto}
          </Text>
        </Text>
        <Button key="last" hotkey="r" label="▶ last reply" onPress={() => readLast($)} />
        <Button key="settings" hotkey="o" label="settings" onPress={() => $.ui.open({ id: PANE, title: 'Read-along' })} />
      </Box>
    )
  }

  const isPaused = status.state === 'paused'
  const fraction = status.total ? (status.position ?? 0) / status.total : 0
  const where = status.sentences ? ` ${(status.sentence ?? 0) + 1}/${status.sentences}` : ''
  const queued = status.queue ? ` +${status.queue}` : ''
  const voice = voiceName(status.voice ?? (await mainVoice($, s)))
  // Laid out like token-weather's line: icon and voice name in bold colour
  // (where "Showers" sits), then the details. The name is the voice button.
  // Everything but the bar has a fixed width; the bar takes what is left, so the row never wraps.
  const fixed = 1 + 3 + voice.length + 2 + 12 + where.length + queued.length + 6 * 6 + 2
  const width = Math.max(4, Math.min(40, cols - fixed))
  return (
    <Box flexWrap="nowrap" paddingX={1}>
      <Text color="cyan" bold>
        {icon(stateOf(status))}
        {'  '}
      </Text>
      <Button key="voice" plain label={voice} onPress={() => nextVoice($)}>
        <Text color="cyan" bold>
          {voice}
        </Text>
      </Button>
      <Box columnGap={1} marginLeft={2} flexWrap="nowrap">
        <Text color="cyan" wrap="truncate-end">
          {clock(status.position)} {bar(fraction, width)} {clock(status.total)}
          <Text dimColor>
            {where}
            {queued}
          </Text>
        </Text>
        <Button key="toggle" hotkey="p" label={isPaused ? btn('play') : btn('pause')} onPress={() => control($, 'toggle')} />
        <Button key="stop" hotkey="s" label={btn('stop')} onPress={() => control($, 'stop')} />
        <Button key="back" hotkey="b" label={btn('back')} onPress={() => control($, 'back')} />
        <Button key="forward" hotkey="n" label={btn('forward')} onPress={() => control($, status.queue ? 'skip' : 'forward')} />
        <Button key="slower" label={btn('slower')} onPress={() => setSpeed($, s.speed - SPEED_STEP)} />
        <Button key="faster" label={btn('faster')} onPress={() => setSpeed($, s.speed + SPEED_STEP)} />
      </Box>
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    saw(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const s = await settings($)
    const status = await read($, now)
    const info = await read($, machine)
    const open = await read($, browsing)
    const all = (await read($, installed)) ?? []
    const isAsking = await read($, confirmReset)
    const lists = favourites()
    const pick = (isOn: boolean) => (isOn ? ('primary' as const) : undefined)
    // Main, plus every group with a voice set; the rest are a click away.
    const shown = [...new Set(['main', ...Object.keys(lists), ...Object.keys(s.voices)])].filter(g => g in GROUPS)
    const others = Object.keys(GROUPS).filter(g => !shown.includes(g))
    const toggle = async (group: string) => {
      await loadVoices($)
      await update($, browsing, b => (b === group ? null : group))
    }

    return (
      <Box flexDirection="column" rowGap={1}>
        <Text dimColor>
          {status ? `${status.state} · ${status.label ?? ''} · ${clock(status.position)} of ${clock(status.total)}` : 'Not reading.'}
          {info?.auto ? `   auto voice here: ${voiceName(info.auto, true)}` : ''}
        </Text>
        {shown.map(group => {
          const chosen = s.voices[group] ?? 'auto'
          const options = [...new Set(['auto', ...(lists[group] ?? []), chosen])]
          const more = open === group ? voicesFor(all, group, info).filter(v => !options.includes(v.id)) : []
          return (
            <Box key={`group-${group}`} flexDirection="column">
              <Text bold>{group === 'main' ? 'Voice' : `${GROUPS[group]} voice`}</Text>
              <Box columnGap={1} flexWrap="wrap">
                {options.map(v => (
                  <Button key={`${group}-${v}`} label={voiceName(v, true)} variant={pick(v === chosen)} onPress={() => setVoice($, group, v)} />
                ))}
                <Button key={`${group}-more`} label={open === group ? 'fewer' : 'more…'} onPress={() => toggle(group)} />
              </Box>
              {voiceRows(more).map(([label, list]) => (
                <Box key={`${group}-list-${label}`} columnGap={1} flexWrap="wrap">
                  <Text dimColor>{label}:</Text>
                  {list.map(v => (
                    <Button key={`${group}-all-${v.id}`} label={voiceLabel(v.id)} onPress={() => setVoice($, group, v.id)} />
                  ))}
                </Box>
              ))}
            </Box>
          )
        })}
        <Box columnGap={1} flexWrap="wrap">
          <Text dimColor>Other languages:</Text>
          {others.map(g => (
            <Button key={`add-${g}`} label={GROUPS[g] ?? g} onPress={() => setVoice($, g, 'auto')} />
          ))}
        </Box>
        <Box columnGap={1}>
          <Text bold>Speed</Text>
          <Button key="slower" label="−" onPress={() => setSpeed($, s.speed - SPEED_STEP)} />
          <Text>{s.speed}×</Text>
          <Button key="faster" label="+" onPress={() => setSpeed($, s.speed + SPEED_STEP)} />
        </Box>
        <Box columnGap={1}>
          <Text bold>Volume</Text>
          <Button key="quieter" label="−" onPress={() => setVolume($, s.volume - VOLUME_STEP)} />
          <Text>{s.volume}%</Text>
          <Button key="louder" label="+" onPress={() => setVolume($, s.volume + VOLUME_STEP)} />
        </Box>
        {info?.canDuck
          ? [
              <Box key="duck" columnGap={1}>
                <Text bold>Lower other apps while reading</Text>
                {DUCK_LEVELS.map(v => (
                  <Button key={`duck-${v}`} label={v === 'off' ? 'off' : `to ${v}`} variant={pick(s.duckOthers === v)} onPress={() => setDuck($, v)} />
                ))}
              </Box>,
            ]
          : []}
        <Box columnGap={1}>
          <Text bold>Auto-read replies</Text>
          {['off', 'final', 'all'].map(v => (
            <Button key={`replies-${v}`} label={v} variant={pick(s.autoReadReplies === v)} onPress={() => setSettings($, { autoReadReplies: v })} />
          ))}
        </Box>
        <Box columnGap={1}>
          <Text bold>Auto-read my messages</Text>
          {(['off', 'on'] as const).map(v => (
            <Button key={`mine-${v}`} label={v} variant={pick(s.autoReadMine === (v === 'on'))} onPress={() => setSettings($, { autoReadMine: v === 'on' })} />
          ))}
        </Box>
        <Box columnGap={1}>
          <Text bold>Read thinking updates</Text>
          {(['off', 'on'] as const).map(v => (
            <Button key={`thinking-${v}`} label={v} variant={pick(s.readThinking === (v === 'on'))} onPress={() => setSettings($, { readThinking: v === 'on' })} />
          ))}
          <Text dimColor>with auto-read all</Text>
        </Box>
        <Box columnGap={1}>
          <Text bold>Say numbers and symbols as words</Text>
          {(['off', 'on'] as const).map(v => (
            <Button key={`words-${v}`} label={v} variant={pick(s.rewriteForSpeech === (v === 'on'))} onPress={() => setSettings($, { rewriteForSpeech: v === 'on' })} />
          ))}
        </Box>
        <Text dimColor>
          Optional, off by default. When on, each message is sent once to Claude Haiku through this session before it is read, to learn how to say its numbers, versions and symbols. That uses a little of your Claude usage and adds a second or two before reading starts. Speech itself is still made on this machine.
        </Text>
        <Box columnGap={1}>
          <Text bold>Player</Text>
          {['band', 'hint', 'message', 'band+message'].map(v => (
            <Button key={`player-${v}`} label={v} variant={pick(playerAt() === v)} onPress={() => $.config.set({ key: 'read-along.player', value: v })} />
          ))}
        </Box>
        <Box columnGap={1}>
          <Button key="read-last" label="▶ read last reply" onPress={() => readLast($)} />
          <Button key="stop" label="■ stop" onPress={() => control($, 'stop')} />
        </Box>
        <Box columnGap={1}>
          <Button key="save" variant="primary" label="save as defaults" onPress={async () => $.ui.toast(await saveDefaults($))} />
          <Button key="reset" label="reset…" onPress={() => update($, confirmReset, () => true)} />
        </Box>
        {isAsking
          ? [
              <Box key="reset-ask" columnGap={1}>
                <Text>Reset this session's choices to your saved defaults?</Text>
                <Button
                  key="reset-yes"
                  variant="primary"
                  label="yes, reset"
                  onPress={async () => {
                    await update($, confirmReset, () => false)
                    $.ui.toast(await resetSession($))
                  }}
                />
                <Button key="reset-no" label="cancel" onPress={() => update($, confirmReset, () => false)} />
              </Box>,
            ]
          : []}
        <Text dimColor>
          Choices here last for this session until you save them. Voice lists, the highlight, icons and the message buttons are in /config under read-along. /read-along reset defaults puts the saved settings back to the plugin's own. /read-along doctor checks this machine.
        </Text>
      </Box>
    )
  })