usage-ball

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    if (!minuteTimer) minuteTimer = $.clock.every(60_000, async () => {
      const display = (await $.state.get(displayRef)).value
      await $.state.set(displayRef, { ...display, startedAt: display?.startedAt ?? 0, minute: Math.floor((await $.clock.now()) / 60_000) })
    })
    const usage = (await $.state.get(usageRef)).value as UsageState | undefined
    const display = (await $.state.get(displayRef)).value
    const flash = (await $.state.get(flashRef)).value
    const now = await $.clock.now()
    const progress = await progressView($, !e.props.isWorking)
    const showWarning = warningVisible((flash?.tick ?? 12) * 250)
    if (e.surface !== 'terminal') {
      // Proportional fonts: bars and track are vector images; columns are boxes, never padding spaces.
      const { Box, Text, Svg } = $.ui.resolve(e)
      const width = e.props.bodyColumns
      const band = layoutBand(width, usage ?? {}, now, warn, ctxWarn, showWarning, display, progress)
      if (e.props.isWorking && !hopTimer) hopTimer = $.clock.every(100, async () => {
        await $.state.set(hopRef, { tick: ((await $.state.get(hopRef)).value?.tick ?? 0) + 1 })
      })
      if (!e.props.isWorking && hopTimer) { hopTimer.cancel(); hopTimer = undefined }
      const hopTick = (await $.state.get(hopRef)).value?.tick ?? 0
      const hop = e.props.isWorking ? HOP[hopTick % HOP.length]! : 0
      const track = trackSvg({ total: Math.max(1, progress.total), shown: progress.shown, pose: progress.pose, hop })
      const level = (percent: number | undefined, limit: number) =>
        percent === undefined ? { dimColor: true } : { color: levelColor(percent, limit) }
      const bar = (label: string, shownPercent: number, percent: number | undefined, limit: number, size: number) =>
        <Svg source={barSvg(shownPercent, size, percent === undefined ? 'success' : levelColor(percent, limit))} alt={`${label} ${percent === undefined ? 'unknown' : Math.round(percent) + '%'}`} width={size} height={8} />
      const quotaSize = band.narrowBars ? 60 : 120
      const quota = (part: typeof band.parts.five, percent: number | undefined, shownPercent: number | undefined) =>
        <Box flexDirection="row" alignItems="center" columnGap={2}>
          <Box width={3} flexShrink={0}><Text dimColor>{part.label.trim()}</Text></Box>
          {band.showBar && bar(part.label.trim(), shownPercent ?? percent ?? 0, percent, warn, quotaSize)}
          <Box width={band.parts.amountWidth} flexShrink={0} justifyContent="flex-end"><Text {...level(percent, warn)}>{part.amount.trim()}</Text></Box>
          {band.showReset && <Box width={8} flexShrink={0} justifyContent="flex-end"><Text dimColor>{part.reset.trim()}</Text></Box>}
        </Box>
      return <Box flexDirection="row" justifyContent="space-between" alignItems="flex-end" columnGap={5} width={width}>
        <Box flexDirection="row" alignItems="flex-end" flexShrink={1}>
          <Svg source={track} alt={progress.total ? `progress ${progress.done} of ${progress.total}` : 'no progress yet'} width={svgWidth(track)} height={TRACK_HEIGHT} />
          <Box flexDirection="row" alignItems="center" columnGap={1} marginLeft={1}>
            {band.parts.counter.trim() && <Text wrap="truncate-end">{band.parts.counter.trim()}</Text>}
            <Text dimColor>ctx</Text>
            {band.showBar && <Box marginLeft={1}>{bar('ctx', display?.context ?? usage?.context ?? 0, usage?.context, ctxWarn, band.narrowBars ? 36 : 64)}</Box>}
            <Text {...level(usage?.context, ctxWarn)}>{band.parts.ctx.trim()}</Text>
          </Box>
        </Box>
        <Box flexDirection="column" flexShrink={0}>
          {quota(band.parts.five, usage?.fiveHour?.percent, display?.fiveHour)}
          {quota(band.parts.seven, usage?.sevenDay?.percent, display?.sevenDay)}
        </Box>
      </Box>
    }
    const { Box, Text } = $.ui.resolve(e)
    const width = Math.max(0, e.props.bodyColumns - 4)
    const rows = composeBand(width, usage ?? {}, now, warn, ctxWarn, showWarning, display, progress)
    const paint = (line: string) => {
      const pieces = []
      const pattern = /●|[┄○…]+|ctx|5h|7d|[⣿⡇⣀]+|⚠️? \d+% left|\d+%|—|\([^)]*\)/gu
      let cursor = 0
      let section: 'ctx' | '5h' | '7d' = '5h'
      for (const match of line.matchAll(pattern)) {
        const at = match.index ?? 0
        if (at > cursor) pieces.push(line.slice(cursor, at))
        const part = match[0]
        if (/^[┄○…]+$/.test(part)) {
          pieces.push(<Text dimColor>{part}</Text>)
          cursor = at + part.length
          continue
        }
        if (part === '●') {
          pieces.push(<Text color="#D97757">{part}</Text>)
          cursor = at + part.length
          continue
        }
        if (part === 'ctx' || part === '5h' || part === '7d') section = part
        const percent = section === 'ctx' ? usage?.context : section === '5h' ? usage?.fiveHour?.percent : usage?.sevenDay?.percent
        const themed = part.startsWith('⣿') || part.startsWith('⡇') || part.startsWith('⣀') || part.includes('%')
        pieces.push(themed && percent !== undefined
          ? <Text color={levelColor(percent, section === 'ctx' ? ctxWarn : warn)}>{part}</Text>
          : <Text dimColor>{part}</Text>)
        cursor = at + part.length
      }
      if (cursor < line.length) pieces.push(line.slice(cursor))
      return pieces
    }
    return <Box flexDirection="column">
      <Text wrap="truncate-end">{paint(rows[0])}</Text>
      <Text wrap="truncate-end">{paint(rows[1])}</Text>
    </Box>
  })