usage-radar

import type { Register } from 'claude-code'

// Drawn like usage-radar by JJ Englert (pane, band, status, toast), as ModsCode read it from the mod's code:
// https://modscode.com/claude-mods/mods/jjenglert1-usage-radar/
// Written by ModsCode from that reading, not copied from the mod: use it as you like.
// Each value below stands for one the mod works out at run time; put in your own.
export const register: Register = on => {
  // the band above the prompt; what else goes there is drawn under it
  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const text = '…'
    return (
      <Box flexDirection="column">
        <Box flexWrap="wrap">
          <Text>
            {text}
            {" "}
          </Text>
          <Button label="Details" />
          <Button label="Hide" />
        </Box>
        {await next(e)}
      </Box>
    )
  })

  // the pane: open it with $.ui.open({ id: 'my-pane', title: "Usage Radar" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const windowTitle = '…'
    const formatPercent = '…'
    const formatRate = '…'
    const forecastLong = '…'
    const basisLine = '…'
    const windowTitle2 = '…'
    const formatPercent2 = '…'
    const formatRate2 = '…'
    const forecastLong2 = '…'
    const basisLine2 = '…'
    const windowTitle3 = '…'
    const formatPercent3 = '…'
    const formatRate3 = '…'
    const forecastLong3 = '…'
    const basisLine3 = '…'
    const levelsText = '…'
    const MIN_SPAN_MIN = '…'
    return (
      <Box flexDirection="column">
        <Box flexDirection="column" marginBottom={1}>
          <Text bold>
            Reading unavailable
          </Text>
          <Text dimColor>
            No plan limits came back, or the read failed. API-key accounts have none. Usage Radar keeps trying once a minute.
          </Text>
        </Box>
        <Box flexDirection="column" marginBottom={1}>
          <Text bold>
            {windowTitle}
            {": "}
            {formatPercent}
          </Text>
          <Text>
            ████████░░░░░░░░
          </Text>
          <Text>
            Resets:
            {" "}
            not reported
          </Text>
          <Text>
            Burn rate:
            {" "}
            {formatRate}
          </Text>
          <Text>
            {"Forecast: "}
            {forecastLong}
          </Text>
          <Text dimColor>
            {"History: "}
            not enough readings yet
          </Text>
          <Text dimColor>
            {basisLine}
          </Text>
        </Box>
        <Box flexDirection="column" marginBottom={1}>
          <Text bold>
            {windowTitle2}
            {": "}
            {formatPercent2}
          </Text>
          <Text>
            ████████░░░░░░░░
          </Text>
          <Text>
            Resets:
            {" "}
            not reported
          </Text>
          <Text>
            Burn rate:
            {" "}
            {formatRate2}
          </Text>
          <Text>
            {"Forecast: "}
            {forecastLong2}
          </Text>
          <Text dimColor>
            {"History: "}
            not enough readings yet
          </Text>
          <Text dimColor>
            {basisLine2}
          </Text>
        </Box>
        <Box flexDirection="column" marginBottom={1}>
          <Text bold>
            {windowTitle3}
            {": "}
            {formatPercent3}
          </Text>
          <Text>
            ████████░░░░░░░░
          </Text>
          <Text>
            Resets:
            {" "}
            not reported
          </Text>
          <Text>
            Burn rate:
            {" "}
            {formatRate3}
          </Text>
          <Text>
            {"Forecast: "}
            {forecastLong3}
          </Text>
          <Text dimColor>
            {"History: "}
            not enough readings yet
          </Text>
          <Text dimColor>
            {basisLine3}
          </Text>
        </Box>
        <Text>
          Last updated: no reading yet
        </Text>
        <Text>
          {"Warning levels: "}
          {levelsText}
          {" (change: /usage-radar warn 70 90)"}
        </Text>
        <Box flexDirection="column" marginTop={1}>
          <Text bold>
            How the forecast works
          </Text>
          <Text dimColor>
            It takes a reading of your plan limits once a minute and whenever the figures move. For each window it looks only at th…
          </Text>
          <Text dimColor>
            {"It needs at least "}
            4
            {" readings over "}
            {MIN_SPAN_MIN}
            + minutes first. If the rate would take you to 100% before the reset time, it says you may reach the limit.
          </Text>
          <Text dimColor>
            It is an estimate from your recent pace, not a promise. It cannot tell whether a particular task will fit in what is le…
          </Text>
        </Box>
        <Box marginTop={1}>
          <Button label="Show strip" />
        </Box>
      </Box>
    )
  })
}

[![ModsCode](https://modscode.com/badge/jjenglert1-usage-radar.svg)](https://modscode.com/claude-mods/mods/jjenglert1-usage-radar/)