mod-usage

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

    const current = await read($, usage)
    if (!current) return next(e)

    const messages = MESSAGES[await read($, locale)] ?? MESSAGES[DEFAULT_LOCALE]
    const nowMs = await $.clock.now()
    const { Box, Svg } = $.ui.resolve(e)

    // Bars that have data
    const segmentCandidates: (ISegmentInput | null)[] = [
      current.contextPercent === undefined ? null : { key: SegmentKey.CONTEXT, name: messages.context, percent: current.contextPercent },
      current.fiveHour ? { key: SegmentKey.FIVE, name: messages.fiveHour, percent: current.fiveHour.percent, resetsAt: current.fiveHour.resetsAt } : null,
      current.sevenDay ? { key: SegmentKey.WEEK, name: messages.sevenDay, percent: current.sevenDay.percent, resetsAt: current.sevenDay.resetsAt } : null
    ]
    const segmentInputs = segmentCandidates.filter((segment) => segment !== null)
    if (segmentInputs.length === 0) return next(e)

    // Fixed width of each bar's block = icon + gap (+ gap + countdown when there is one); blocks differ in width
    const remainings = segmentInputs.map((segment) => _formatRemaining(segment.resetsAt, nowMs, messages))
    const timeSvgs = remainings.map((remaining) => (remaining ? _timeSvg(remaining, messages.rtl) : null))
    const fixedWidths = timeSvgs.map((timeSvg) => ICON_CELLS + 1 + (timeSvg ? 1 + timeSvg.cells : 0))

    // Equal-length bars filling the row: what is left after gaps and fixed widths is split evenly between the bars;
    // every block also grows by the same flexGrow, absorbing the remainder and real glyph widths, so bars stay equal
    const totalGap = SEGMENT_GAP * (segmentInputs.length - 1)
    const totalFixed = fixedWidths.reduce((sum, width) => sum + width, 0)
    const barLen = Math.max(MIN_BAR_LEN, Math.floor((e.props.bodyColumns - totalGap - totalFixed) / segmentInputs.length))

    // One block: icon (accent follows usage) + bar (outlined percent centred on it) + reset countdown
    const renderSegment = ({ key, name, percent }: ISegmentInput, index: number) => {
      const percentLabel = `${Math.round(percent)}%`
      const remaining = remainings[index] ?? ''
      const timeSvg = timeSvgs[index] ?? null
      const segmentWidth = (fixedWidths[index] ?? 0) + barLen
      const alt = remaining ? `${name} ${percentLabel} (${remaining})` : `${name} ${percentLabel}`
      const percentSvg = _labelSvg(percentLabel)

      return (
        <Box key={key} flexDirection="row" alignItems="center" gap={1} width={segmentWidth} flexGrow={1} flexShrink={1}>
          <Box width={ICON_CELLS} flexShrink={0} justifyContent="center">
            <Svg source={_iconSources[key](_accentColor(percent))} alt={name} width={ICON_SIZE} height={ICON_SIZE} />
          </Box>
          <Box position="relative" flexDirection="column" justifyContent="center" width={barLen} flexGrow={1} flexShrink={1}>
            <Svg source={_barSvg(key, percent, barLen)} alt={alt} height={BAR_HEIGHT} />
            <Box position="absolute" top={0} bottom={0} left={0} right={0} justifyContent="center" alignItems="center">
              <Svg source={percentSvg.source} alt={percentLabel} width={percentSvg.width} height={LABEL_HEIGHT} />
            </Box>
          </Box>
          {timeSvg ? (
            <Box width={timeSvg.cells} flexShrink={0} justifyContent="center">
              <Svg source={timeSvg.source} alt={remaining} width={timeSvg.width} height={TIME_HEIGHT} />
            </Box>
          ) : null}
        </Box>
      )
    }

    // One row, no wrapping
    const segments = segmentInputs.map(renderSegment)
    const barsRow = (
      <Box flexDirection="row" flexWrap="nowrap" columnGap={SEGMENT_GAP} width={e.props.bodyColumns}>
        {segments}
      </Box>
    )

    // Play well with other band mods: whatever the mods beneath draw is stacked under the bars instead of replaced
    const below = await next(e)
    if (below.type === 'engine') return barsRow
    return (
      <Box flexDirection="column">
        {barsRow}
        {below}
      </Box>
    )
  })