holdtime

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || !e.props.isWorking || e.props.view.agentId) return next(e)
    const card = await read($, cardAtom)
    const feedback = await read($, feedbackAtom)
    const needsYou = await read($, needsYouAtom)
    if (needsYou || !card) return next(e)

    const { Box, Button, Markdown, Text } = $.ui.resolve(e)
    const isAsking = card.kind === 'yesno' && !feedback
    const title = `Holdtime · ${labelOf(card.topic)}${isAsking ? ' · yes or no?' : ''}`
    const body = feedback ? `${feedback.isRight ? '**Right.**' : '**Not quite.**'} ${feedback.text}` : card.text

    // The buttons share the first row with the title: a band shorter than the
    // card scrolls, and a bare digit only presses a button in view.
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" columnGap={3}>
          <Text dimColor>{title}</Text>
          {isAsking && <Button key="yes" label="Yes" hotkey="1" plain onPress={() => answer($, card, true)} />}
          {isAsking && <Button key="no" label="No" hotkey="2" plain onPress={() => answer($, card, false)} />}
          {!isAsking && <Button key="next" label={feedback ? 'Next' : 'Got it'} hotkey="1" plain onPress={() => moveOn($, card)} />}
          <Button key="hide" label="Hide" hotkey="9" plain dimColor onPress={() => hide($)} />
        </Box>
        <Markdown text={body} />
      </Box>
    )
  })