nukey

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

    const shown = await read($, scene)
    const gauged = (await read($, isMetered)) ? await read($, meter) : undefined
    const detailed = await read($, isDetailed)
    const colours = THEMES[await read($, theme)]

    if (e.surface === 'terminal') {
      return terminalTree($.ui.resolve(e), shown, await read($, frame), gauged, detailed, colours)
    }

    if (e.surface === 'desktop') {
      return desktopTree($.ui.resolve(e), shown, gauged, detailed, colours)
    }

    return next(e)
  })

function desktopTree(table: Elements['desktop'], shown: Scene, gauged: Meter | undefined, detailed: boolean, colours: Theme) {
  const { Box, Svg, Text } = table
  const { activity, detail } = shown
  const label = LABELS[activity]

  return (
    <Box flexDirection="row" alignItems="center" gap={2} width="100%">
      <Box flexDirection="row" gap={0} flexShrink={0}>
        <Svg source={nukeySvg(activity, colours)} alt="Nukey the microwave" width={NUKEY_WIDTH} height={SCENE_HEIGHT} />
        <Svg
          source={propSvg(activity, colours)}
          alt={detail === '' ? label : `${label}: ${detail}`}
          width={PROP_WIDTH}
          height={SCENE_HEIGHT}
        />
      </Box>
      <Box flexDirection="column" flexGrow={1} flexShrink={1} minWidth={0} overflow="hidden">
        <Text bold>{label}</Text>
        {detail !== '' && detailLine(table, detail)}
      </Box>
      {gauged !== undefined && <Svg source={meterSvg(gauged, colours)} alt={meterAlt(gauged)} width={meterWidth(gauged)} height={SCENE_HEIGHT} />}
      {gauged !== undefined && detailed && readings(table, gauged)}
    </Box>
  )
}

function detailLine(table: Elements['terminal'] | Elements['desktop'], detail: string) {
  const { Text } = table

  return (
    <Text dimColor wrap={detail.length <= ONE_LINE ? 'truncate-end' : 'wrap'}>
      {detail === '' ? ' ' : detail}
    </Text>
  )
}

function readings(table: Elements['terminal'] | Elements['desktop'], gauged: Meter) {
  const { Box, Text } = table
  const lines = meterLines(gauged)

  return (
    <Box flexDirection="row" gap={2} flexShrink={0}>
      <Box flexDirection="column" flexShrink={0}>
        {lines.map(line => (
          <Text dimColor>{line.label}</Text>
        ))}
      </Box>
      <Box flexDirection="column" alignItems="flex-end" flexShrink={0}>
        {lines.map(line => (
          <Text bold>{line.value}</Text>
        ))}
      </Box>
    </Box>
  )
}