ember

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) {
      return next(e)
    }

    const current = await read($, mood)
    const { Box, Text } = $.ui.resolve(e)

    // Before the first prompt this one dim word is how he knows it is there.
    if (current.phase === 'rest') {
      return <Text dimColor>○ ember</Text>
    }

    const step = await read($, live)
    const crew = await read($, agents)
    const at = await read($, now)
    const asked = await read($, ask)
    // Only the terminal's spinner line narrates the step; elsewhere the band says it.
    const status = statusOf(current, step, crew, at, await read($, isBusy), e.surface === 'terminal')
    const goal = current.phase === 'done' && asked !== '' ? `You asked: ${clip(asked, ASK_SHOWN)}` : ''

    // The state comes first and never shrinks; what he asked takes the room that is left and is cut there.
    return (
      <Box flexDirection="row" columnGap={2}>
        <Box flexShrink={0}>
          <Text color={status.color} bold>
            {status.head}
          </Text>
        </Box>
        {status.tail !== '' && (
          <Box flexShrink={0}>
            <Text dimColor>{status.tail}</Text>
          </Box>
        )}
        {goal !== '' && (
          <Box flexShrink={1} minWidth={0}>
            <Text dimColor wrap="truncate-end">
              {goal}
            </Text>
          </Box>
        )}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const current = await read($, mood)
    const step = await read($, live)
    const crew = await read($, agents)
    const muted = await read($, isMuted)
    const look = { ...current, heat: heatOf(current, step) }
    const { Box, Text, Button } = $.ui.resolve(e)
    const width = Math.max(120, Math.min(220, e.props.bodyColumns * 7))

    let creature: RenderElement

    if (e.surface === 'terminal') {
      const status = statusOf(current, step, crew, 0, await read($, isBusy), false)
      creature = (
        <Text color={status.color} bold>
          {status.head}
        </Text>
      )
    } else {
      const { Svg } = $.ui.resolve(e)
      creature = (
        <Svg
          source={portrait(look, width)}
          alt={`Ember, a small flame. ${caption(look)}`}
          width={width}
          height={Math.round(width * 0.9)}
          isInteractive
        />
      )
    }

    return (
      <Box flexDirection="column" alignItems="center" rowGap={1} paddingX={1}>
        {creature}
        <Text dimColor>{crew.length > 0 && current.phase === 'work' ? `${plural(crew.length, 'agent')} at work.` : caption(look)}</Text>
        <Button
          key="sound"
          label={muted ? 'Sound is off' : 'Sound is on'}
          dimColor
          onPress={() => toggleSound($)}
        />
      </Box>
    )
  })