pro-hud

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.surface !== 'desktop' || e.props.hasSurvey) return next(e)
    if (!(await read($, prefs)).band) return next(e)
    const list = await read($, limits)
    const current = await read($, turn)
    const ctx = await read($, context)
    if (list.length === 0 && !current && ctx.pct === undefined) return next(e)

    const { Box, Text, Svg } = $.ui.resolve(e)
    // Reading `now` subscribes the band to the ticks; the time drawn is the
    // clock's own, so it is right before the first tick too.
    await read($, now)
    const t = await $.clock.now()
    const wide = e.props.bodyColumns >= WIDE

    const meter = (key: string, label: string, pct: number, note?: string) => (
      <Box key={key} flexDirection="row" alignItems="center" marginRight={wide ? 4 : 0}>
        <Box width={wide ? 9 : 10}>
          <Text dimColor>{label}</Text>
        </Box>
        <Svg source={barSvg(pct)} alt={`${label} ${pct}%`} width={BAR_WIDTH} height={BAR_HEIGHT} />
        <Box width={6} justifyContent="flex-end">
          <Text bold color={textTone(pct)}>{`${pct}%`}</Text>
        </Box>
        {note !== undefined && <Text dimColor>{`  ${note}`}</Text>}
      </Box>
    )

    const meters = [
      ...list.map(limit => {
        const resetMs = limit.resetsAt ? Date.parse(limit.resetsAt) - t : undefined
        const note = resetMs !== undefined && resetMs > 0 ? (wide ? span(resetMs) : `resets in ${span(resetMs)}`) : undefined
        return meter(limit.kind, LABEL[limit.kind] ?? limit.kind, limit.pct, note)
      }),
      ...(ctx.pct !== undefined
        ? [meter('context', 'Context', ctx.pct, ctx.tokens !== undefined ? `${tokens(ctx.tokens)} tokens` : undefined)]
        : []),
    ]

    const live = current?.isRunning === true
    // Session points the turn used: the latest reading less the one the turn
    // started from, both as Claude Code reported them.
    const fiveNow = list.find(l => l.kind === 'five_hour')?.pct
    const fiveDelta =
      !live && current?.fiveStart !== undefined && fiveNow !== undefined
        ? Math.round((fiveNow - current.fiveStart) * 10) / 10
        : undefined
    const parts = current
      ? [
          live ? clock(t - current.startedAt) : secs(current.ms ?? 0),
          plural(current.tools, 'tool', 'tools'),
          `${plural(current.files, 'file', 'files')} edited`,
          `${tokens(current.inTok)} in`,
          `${tokens(current.cacheTok)} cached`,
          `${tokens(current.outTok)} out`,
        ]
      : []

    return (
      <Box flexDirection="column">
        <Box flexDirection={wide ? 'row' : 'column'}>{meters}</Box>
        {current && (
          <Box flexDirection="row">
            <Box width={wide ? 9 : 10} flexShrink={0}>
              <Text dimColor={!live} color={live ? WARN : undefined}>{live ? 'This turn' : 'Last turn'}</Text>
            </Box>
            {/* Each figure is its own unit: a narrow band wraps whole figures to
                the next line rather than cutting one off. */}
            <Box flexDirection="row" flexWrap="wrap" flexShrink={1}>
              {parts.map((part, i) => (
                <Text key={`p${i}`} dimColor wrap="end">{`${i === 0 ? '' : '  ·  '}${part}`}</Text>
              ))}
              {fiveDelta !== undefined && (
                <Text key="delta" color={fiveDelta >= 5 ? WARN : undefined} dimColor={fiveDelta < 5} wrap="end">
                  {`  ·  +${fiveDelta}% session`}
                </Text>
              )}
            </Box>
          </Box>
        )}
        {ctx.pct !== undefined && ctx.pct >= COMPACT_AT && (
          <Text color={WARN}>{'Context is filling up — run /compact before starting a large task.'}</Text>
        )}
      </Box>
    )
  })