plan-usage

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const current = (await $.state.get(READING)).value ?? null
    const pausing = (await $.state.get(PAUSE)).value ?? null
    const pauseOffUntil = (await $.state.get(OVERRIDE)).value ?? 0
    const onboarding = (await $.state.get(ONBOARDING)).value ?? null
    const now = await $.clock.now()
    const { Box, Text } = $.ui.resolve(e)
    const isNarrow = e.props.bodyColumns < 100
    // The band is shared: keep what the mods after this one draw (Claude Code's own notes included) under these lines.
    const theirs = await next(e)

    // The first-run choice, above the usage line. It needs a text field, which the terminal and the desktop app have.
    let choice = null
    if (onboarding !== null && (e.surface === 'terminal' || e.surface === 'desktop')) {
      const { Button, Input } = $.ui.resolve(e)
      choice =
        onboarding.step === 'choose' ? (
          <Box flexDirection="row" columnGap={2}>
            <Text>Plan usage: show your limits above the prompt</Text>
            <Button key="show-always" label="Always" hotkey="1" plain onPress={() => chooseShowAt($, 0)} />
            <Button key="show-50" label="From 50%" hotkey="2" plain onPress={() => chooseShowAt($, 50)} />
            <Button key="show-80" label="From 80%" hotkey="3" plain onPress={() => chooseShowAt($, 80)} />
            <Button key="show-other" label="Other" hotkey="4" plain onPress={() => askOtherPercent($)} />
            {onboarding.note === undefined ? null : <Text>{onboarding.note}</Text>}
          </Box>
        ) : (
          <Box flexDirection="row" columnGap={2}>
            <Input
              key="show-at"
              label="Plan usage: show limits from what percent"
              placeholder="0 to 100"
              value=""
              submitLabel="save"
              autoFocus
              onSubmit={(text: string) => submitOtherPercent($, text)}
            />
            {onboarding.note === undefined ? null : <Text>{onboarding.note}</Text>}
          </Box>
        )
    }

    let usage = null
    if (current === null) {
      if (showAt === 0) usage = <Text wrap="truncate-end">◌ Plan usage: no reading yet (it appears after the first reply)</Text>
    } else {
      const shown = BAND_KINDS.flatMap(kind => current.limits.filter(limit => limit.kind === kind && limit.percentUsed >= showAt))
      const isStale = now - current.readAt > STALE_MS
      const isOverridden = autoPause && pausing === null && now < pauseOffUntil
      // Below show_at, with nothing paused or overridden, the usage line steps aside.
      if (shown.length > 0 || pausing !== null || isOverridden) {
        usage = (
          <Box flexDirection="row" columnGap={3}>
            {pausing === null ? null : (
              <Text color={ORANGE} bold wrap="truncate-end">
                ⏸ PAUSED at {pausing.percentUsed}% · continues {time.at(pausing.resumeAt, now)}
              </Text>
            )}
            {shown.map(limit => {
              const look = lookOf(limit.percentUsed, warnAt)
              const at = resetsAtMs(limit)
              const resets =
                at === undefined
                  ? ''
                  : isNarrow
                    ? ` · ${formatIn(at - now)}`
                    : ` · resets ${time.at(at, now)} (${formatIn(at - now)})`
              return (
                <Box key={limit.kind} flexDirection="row" columnGap={1}>
                  <Text color={look.color} bold>
                    {look.icon} {look.word}
                  </Text>
                  <Text wrap="truncate-end">
                    {labelOf(limit.kind)} {limit.percentUsed}%{resets}
                  </Text>
                </Box>
              )
            })}
            {isOverridden ? <Text wrap="truncate-end">○ pause off until {time.at(pauseOffUntil, now)}</Text> : null}
            {isStale && shown.length > 0 ? <Text wrap="truncate-end">as of {time.at(current.readAt, now)}</Text> : null}
          </Box>
        )
      }
    }

    if (choice === null && usage === null) return theirs
    return (
      <Box flexDirection="column">
        {choice}
        {usage}
        {theirs}
      </Box>
    )
  })