vercel-deploy-status

  on('ui.render', { component: 'AbovePrompt', surface: 'terminal' }, async ($, e, next) => {
    // A survey owns the band while it is up, and there is nothing to draw
    // when the queue is empty and no push is waiting on a deploy.
    if (e.props.hasSurvey) return next(e)
    const now = $.clock.now()
    if (rows.length === 0 && !waiting(now)) return next(e)

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

    const shown = rows.slice(0, maxRows)
    const hidden = rows.length - shown.length

    // Two JSX rules of this runtime, learned the hard way: a `.map()` array
    // is not a valid Box child, so it is wrapped in a Fragment; and `key` is
    // a Button prop only, so no row carries one.
    return (
      <Box flexDirection="column">
        <Text dimColor>{header(project, rows)}</Text>
        {waiting(now) && inFlightRows().length === 0 ? (
          <Text dimColor>{`◌ waiting for a deploy   ${elapsed(now - pushedAt!)}`}</Text>
        ) : (
          <Text>{''}</Text>
        )}
        <>
          {shown.map((r) => {
            const d = r.d
            const ref = d.meta?.githubCommitRef ?? ''
            const where = [targetOf(d), ref].filter(Boolean).join(' · ')
            const subject = d.meta?.githubCommitMessage ? cut(d.meta.githubCommitMessage, 72) : ''
            return (
              <Box gap={2}>
                <Text color={COLOR[d.state]}>{`${DOT[d.state]} ${LABEL[d.state].padEnd(LABEL_WIDTH)}`}</Text>
                <Text dimColor>{where}</Text>
                <Text>{clock(r, now)}</Text>
                {subject ? <Text dimColor wrap="truncate-end">{subject}</Text> : <Text>{''}</Text>}
              </Box>
            )
          })}
        </>
        {hidden > 0 ? <Text dimColor>{`  … and ${plural(hidden, 'more')}`}</Text> : <Text>{''}</Text>}
      </Box>
    )
  })