cc-desktop-statusline

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

    const { usage, ctx, window5h, window7d, blocked } = st
    // Before the first usage.py run, fall back to the machine's offset as seen by this environment.
    const offset = usage?.tzOffsetSec ?? -new Date().getTimezoneOffset() * 60
    const nowMs = await $.clock.now()
    const expired = usage !== null && cacheExpired(usage.cache, nowMs)
    const canCompact = !e.props.isWorking && !st.compacting
    const dash = '-'

    if (e.surface === 'desktop') {
      const { Box, Text, Svg, Button } = $.ui.resolve(e)
      const v = (x: string) => <Text bold dimColor={false}>{x}</Text>
      const monthName = MONTHS[(usage?.month ?? local(nowMs, offset).getUTCMonth() + 1) - 1]
      return (
        // Widest scope first: plan limits, this month, then this session ending in its action.
        <Box flexDirection="row" alignItems="center" flexWrap="wrap" columnGap={3}>
          <Box flexDirection="row" alignItems="center" columnGap={1}>
            <Svg source={ringSvg(window5h?.percent, 'clock')} width={16} height={16} alt={`5-hour limit ${window5h?.percent ?? dash}%`} />
            <Text dimColor>
              5h {v(window5h === null ? dash : `${window5h.percent}%`)}{window5h?.resetsAt === undefined ? '' : ` · ↻ ${localTime(window5h.resetsAt, offset)}`}
            </Text>
          </Box>
          <Box flexDirection="row" alignItems="center" columnGap={1}>
            <Svg source={ringSvg(window7d?.percent, 'calendar')} width={16} height={16} alt={`7-day limit ${window7d?.percent ?? dash}%`} />
            <Text dimColor>
              7d {v(window7d === null ? dash : `${window7d.percent}%`)}{window7d?.resetsAt === undefined ? '' : ` · ↻ ${localDay(window7d.resetsAt, offset)}`}
            </Text>
          </Box>
          {blocked !== null ? (
            <Text dimColor>{blockedText(blocked)}</Text>
          ) : (
            <Box flexDirection="row" alignItems="center" columnGap={1}>
              <Svg source={badgeSvg('dollar')} width={16} height={16} alt="API-equivalent cost this month" />
              <Text dimColor>{monthName} {v(usage === null ? dash : cost(usage, 'month'))}</Text>
              {usage === null || !SHOW_ACTIVITY ? null : (
                <Svg source={heatSvg(usage.daily, usage.day)} width={heatWidth(usage.daily.length)} height={HEAT_H} alt="Tokens per day this month" />
              )}
            </Box>
          )}
          <Text dimColor>|</Text>
          <Box flexDirection="row" alignItems="center" columnGap={1}>
            <Svg source={ringSvg(ctx?.percent, 'context')} width={16} height={16} alt={`Context ${ctx?.percent ?? dash}%`} />
            <Text dimColor>
              Sess {v(ctx?.percent === undefined ? dash : `${ctx.percent}%`)} · {usage === null ? dash : `${cost(usage, 'session')} (+${cost(usage, 'last')})`}
            </Text>
          </Box>
          <Box flexDirection="row" alignItems="center" columnGap={1}>
            {usage === null ? null : <Svg source={badgeSvg('hourglass')} width={16} height={16} alt="What a cache miss would cost" />}
            {usage === null ? null : expired
              ? <Text color="#d4a72c">Cache expired · next {missCost(usage.cache)}</Text>
              : <Text dimColor>Cache miss {v(missCost(usage.cache))}</Text>}
            {canCompact ? <Button key="compact" label="/compact" onPress={() => compact($, st)} /> : null}
            {st.compacting ? <Text dimColor>compacting…</Text> : null}
          </Box>
        </Box>
      )
    }

    // Other surfaces: one line of text, plus the /compact button.
    const { Box, Text, Button } = $.ui.resolve(e)
    const parts: string[] = []
    if (window5h !== null) parts.push(`5h ${bar(window5h.percent / 100, 8)} ${window5h.percent}%`)
    if (window7d !== null) parts.push(`7d ${bar(window7d.percent / 100, 8)} ${window7d.percent}%`)
    if (usage !== null) parts.push(`${MONTHS[usage.month - 1]} ${cost(usage, 'month')}`)
    if (blocked !== null) parts.push(blockedText(blocked))
    if (ctx?.percent !== undefined) parts.push(`Sess ${bar(ctx.percent / 100, 8)} ${ctx.percent}%`)
    if (usage !== null) {
      parts.push(`${cost(usage, 'session')} (+${cost(usage, 'last')})`)
      parts.push(expired ? `Cache expired · next ${missCost(usage.cache)}` : `Cache miss ${missCost(usage.cache)}`)
    }
    if (parts.length === 0) {
      return next(e)
    }
    return (
      <Box flexDirection="row" columnGap={1}>
        <Text dimColor wrap="truncate-end">{parts.join(' · ')}</Text>
        {canCompact ? <Button key="compact" label="/compact" onPress={() => compact($, st)} /> : null}
      </Box>
    )
  })