now-playing

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const rest = await next(e) // what other mods and Claude Code draw here stays
    const t = await read($, track)
    const tick = await read($, now) // subscribes the line to the clock
    if (e.props.hasSurvey || !t) return rest
    const l = await read($, lyrics)
    const { Box, Button, Text } = $.ui.resolve(e)
    const press = (action: Action) => () => void control($, action, wantsLyrics).catch(() => false)
    const pos = positionAt(t, Math.max(tick, t.at))
    const line = l && l.id === t.id ? lyricAt(l, pos + LYRIC_LEAD_S) : ''
    const sung = isRtl(line) ? '' : line // a terminal draws right-to-left scripts garbled, cached lyrics included
    const isPaused = t.state !== 'playing'
    const b = bar(pos, t.duration, BAR)
    return (
      <Box flexDirection="column">
        <Box paddingX={1} flexDirection="row">
          {/* Narrow, the end of this Text goes first (the time, then the bar); the buttons stay. */}
          <Box flexShrink={1}>
            <Text wrap="truncate-end">
              {/* A leading emoji is drawn plain: some terminals shift or clip a bold one. */}
              <Text dimColor={isPaused}>{isPaused ? '⏸' : '🎵'}</Text>
              <Text bold={!isPaused} dimColor={isPaused}>{` ${t.name}`}</Text>
              <Text dimColor>{` · ${t.artist}`}</Text>
              {!isPaused && <Text color="#1db954">{`  ${b.done}`}</Text>}
              {!isPaused && <Text dimColor>{b.left}</Text>}
              {!isPaused && <Text dimColor>{` ${clock(pos)}/${clock(t.duration)}`}</Text>}
            </Text>
          </Box>
          <Box flexShrink={0} flexDirection="row" gap={0} marginLeft={2}>
            <Button key="prev" hotkey="b" label="⏮" onPress={press('prev')} />
            <Button key="toggle" hotkey="p" label={isPaused ? '▶' : '⏸'} onPress={press('toggle')} />
            <Button key="next" hotkey="n" label="⏭" onPress={press('next')} />
          </Box>
        </Box>
        {/* The lyric gets a line of its own, so the buttons never cut it. */}
        {!isPaused && sung !== '' && (
          <Box paddingX={1}>
            <Text dimColor italic wrap="truncate-end">{`   ♪ ${sung}`}</Text>
          </Box>
        )}
        {rest}
      </Box>
    )
  })