jr-next-cost

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import { GRADIENTS, colorAt } from './jr/gradient'
5import { nextCost, priceOf, usd } from './prices'
6import type { Price } from './prices'
7
8const next = atom({ plugin: 'jr-next-cost', key: 'next' } as const, null)
9// Hidden until the person asks for it.
10const bandHidden = atom({ plugin: 'jr-next-cost', key: 'isBandHidden' } as const, true)
11const commands = { isRegistered: false }
12const band = { isLoaded: false }
13
14async function ensureCommand($: EngineInterface) {
15  if (commands.isRegistered) return
16  commands.isRegistered = true
17  await $.command.register({ name: 'jrnextcost', description: 'Show or hide the next-prompt cost (hidden by default): /jrnextcost toggles, /jrnextcost on or off' })
18}
19
20/** Reads the saved choice once per load of the mod; outside a drawing, which cannot write state. */
21async function loadBand($: EngineInterface) {
22  if (band.isLoaded) return
23  band.isLoaded = true
24  if ((await $.store.get('isBandHidden')) === false) await update($, bandHidden, () => false)
25}
26
27/** True while the band is hidden (until asked for): one choice for every session. */
28async function isBandHidden($: EngineInterface) {
29  await loadBand($)
30  return read($, bandHidden)
31}
32
33const TICK_MS = 5000
34
35const live = { isTicking: false, ttlMin: 5 }
36
37async function refresh($: EngineInterface, lastAt?: number) {
38  const [usage, model, now] = await Promise.all([$.session.usage(), $.session.model(), $.clock.now()])
39  await update($, next, n => ({ tokens: usage.context.tokens ?? n?.tokens ?? 0, model, lastAt: lastAt ?? n?.lastAt ?? null, now }))
40}
41
42/** Keeps "warm"/"cold" current between turns; once per module load. */
43async function ensureTicking($: EngineInterface) {
44  if (live.isTicking) return
45  live.isTicking = true
46  await refresh($)
47  $.clock.every(TICK_MS, () => {
48    void tickNow($)
49  })
50}
51
52async function tickNow($: EngineInterface) {
53  const now = await $.clock.now()
54  await update($, next, n => (n ? { ...n, now } : n))
55}
56
57export const register: Register = (on, options) => {
58  live.ttlMin = Number(options.ttlMinutes ?? 5) || 5
59  const override: Price | null = Number(options.inputPrice) > 0 ? { input: Number(options.inputPrice), cacheRead: Number(options.cacheReadPrice) || Number(options.inputPrice) / 10 } : null
60
61  on('session.start', async ($, e, nextHook) => {
62    const started = await nextHook(e)
63    await ensureCommand($)
64    await loadBand($)
65    await ensureTicking($)
66    return started
67  })
68
69  on('turn.complete', async ($, e, nextHook) => {
70    const done = await nextHook(e)
71    if (e.agentId !== undefined) return done
72    await ensureTicking($)
73    await refresh($, await $.clock.now())
74    return done
75  })
76
77  on('command.run', { command: 'jrnextcost' }, async ($, e) => {
78    const arg = e.args.trim().toLowerCase()
79    await loadBand($)
80    const hide = arg === 'off' || arg === 'hide' ? true : arg === 'on' || arg === 'show' ? false : arg === '' ? !(await isBandHidden($)) : null
81    if (hide === null) return { text: 'jr next cost · usage: /jrnextcost toggles the band, /jrnextcost on or off' }
82    await $.store.set('isBandHidden', hide)
83    await update($, bandHidden, () => hide)
84    return { text: hide ? 'jr next cost · hidden (/jrnextcost to bring it back)' : 'jr next cost · shown above the prompt (/jrnextcost to hide it)' }
85  })
86
87  on('ui.render', { component: 'AbovePrompt' }, async ($, e, nextHook) => {
88    const below = await nextHook(e)
89    const n = await read($, next)
90    if (!live.isTicking) {
91      $.clock.after(0, () => {
92        void ensureTicking($)
93      })
94    }
95    if (!commands.isRegistered || !band.isLoaded) {
96      $.clock.after(0, () => {
97        void ensureCommand($)
98        void loadBand($)
99      })
100    }
101    if (await read($, bandHidden)) return below
102    const price = override ?? (n ? priceOf(n.model) : null)
103    if (!n || !price || n.tokens <= 0 || e.props.hasSurvey) return below
104    const { Box, Text } = $.ui.resolve(e)
105    const isWarm = n.lastAt !== null && n.lastAt + live.ttlMin * 60_000 > n.now
106    const cost = nextCost(n.tokens, price, isWarm)
107    // One quiet row on the right. The cache countdown itself is jr-cache-clock's.
108    return (
109      <Box flexDirection="column">
110        <Box justifyContent="flex-end">
111          <Text wrap="truncate-end">
112            <Text dimColor>{'next '}</Text>
113            <Text color={colorAt(GRADIENTS.heat, Math.min(1, cost / 2))}>{usd(cost)}</Text>
114            <Text dimColor>{isWarm ? ` · ${usd(nextCost(n.tokens, price, false))} cold` : ' · cold'}</Text>
115          </Text>
116        </Box>
117        {below}
118      </Box>
119    )
120  })
121}
122

1// Shared look of every jr mod: one palette, gradients drawn one cell at a time.
2// Synced into each plugin's hooks/jr/ by scripts/sync-shared.sh: edit it here only.
3
4export type Rgb = readonly [number, number, number]
5
6const hexToRgb = (hex: string): Rgb => {
7  const n = Number.parseInt(hex.replace('#', ''), 16)
8  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
9}
10
11const rgbToHex = ([r, g, b]: Rgb) =>
12  `#${[r, g, b].map(v => Math.round(v).toString(16).padStart(2, '0')).join('')}`
13
14export const GRADIENTS = {
15  // The jr signature: violet to pink to amber.
16  brand: ['#7f5af0', '#ff5ca8', '#ffb86b'],
17  // Calm to alarm, for gauges where full is bad.
18  heat: ['#2cb67d', '#f4d35e', '#ff8c42', '#ef4565'],
19  // Cool, for neutral figures.
20  ice: ['#3da9fc', '#7f5af0'],
21  // Money and growth.
22  money: ['#2cb67d', '#a8e6cf'],
23} as const satisfies Record<string, readonly string[]>
24
25export type GradientName = keyof typeof GRADIENTS
26
27/** The color at `t` (0..1) along the stops. */
28export const colorAt = (stops: readonly string[], t: number): string => {
29  if (stops.length === 1) return stops[0]!
30  const clamped = Math.min(1, Math.max(0, t))
31  const span = clamped * (stops.length - 1)
32  const i = Math.min(stops.length - 2, Math.floor(span))
33  const a = hexToRgb(stops[i]!)
34  const b = hexToRgb(stops[i + 1]!)
35  const local = span - i
36  return rgbToHex([0, 1, 2].map(k => a[k]! + (b[k]! - a[k]!) * local) as unknown as Rgb)
37}
38
39/** One color per character of `text`, spread across the stops. */
40export const paint = (text: string, stops: readonly string[]) => {
41  const chars = [...text]
42  return chars.map((char, i) => ({ char, color: colorAt(stops, chars.length > 1 ? i / (chars.length - 1) : 0) }))
43}
44
45const EIGHTHS = ['', '▏', '▎', '▍', '▌', '▋', '▊', '▉']
46
47/**
48 * A bar `width` cells wide filled to `ratio` (0..1), with eighth-cell precision.
49 * Each filled cell takes the gradient color of its position along the whole bar,
50 * so a nearly full heat bar ends red and a low one stays green.
51 */
52export const bar = (ratio: number, width: number, stops: readonly string[]) => {
53  const filled = Math.min(1, Math.max(0, ratio)) * width
54  const full = Math.floor(filled)
55  const partial = EIGHTHS[Math.round((filled - full) * 7)] ?? ''
56  const cells: { char: string; color: string; empty?: true }[] = []
57  for (let i = 0; i < width; i++) {
58    const color = colorAt(stops, width > 1 ? i / (width - 1) : 0)
59    if (i < full) cells.push({ char: '█', color })
60    else if (i === full && partial) cells.push({ char: partial, color })
61    else cells.push({ char: '·', color, empty: true })
62  }
63  return cells
64}
65
66export const formatTokens = (n: number) =>
67  n >= 1_000_000 ? `${(n / 1_000_000).toFixed(1)}M` : n >= 10_000 ? `${Math.round(n / 1000)}k` : n >= 1000 ? `${(n / 1000).toFixed(1)}k` : `${n}`
68
69export const formatDuration = (ms: number) => {
70  const minutes = Math.max(0, Math.round(ms / 60_000))
71  const h = Math.floor(minutes / 60)
72  const m = minutes % 60
73  return h > 0 ? `${h}h${String(m).padStart(2, '0')}` : `${m}min`
74}
75

1/** USD per million tokens: base input and cache reads. Cache writes (5-minute) are 1.25 × input. */
2export type Price = { input: number; cacheRead: number }
3
4// Anthropic first-party rates, as published for each model (cached table, October 2026).
5const TABLE: [RegExp, Price][] = [
6  [/fable-5-1|mythos-5-1/, { input: 10, cacheRead: 0.25 }],
7  [/fable-5|mythos-5/, { input: 10, cacheRead: 1 }],
8  [/opus-5-5/, { input: 4, cacheRead: 0.2 }],
9  [/opus-5|opus-4-[6-8]/, { input: 5, cacheRead: 0.5 }],
10  [/sonnet-5/, { input: 2, cacheRead: 0.2 }],
11  [/sonnet-4-6/, { input: 3, cacheRead: 0.3 }],
12  [/haiku-5-5/, { input: 0.1, cacheRead: 0.01 }],
13  [/haiku-4-5/, { input: 1, cacheRead: 0.1 }],
14]
15
16export const priceOf = (model: string): Price | null => TABLE.find(([re]) => re.test(model.toLowerCase()))?.[1] ?? null
17
18/**
19 * What resending the current context costs: read from the cache while it is warm,
20 * written to it again once it is cold.
21 */
22export const nextCost = (tokens: number, price: Price, isWarm: boolean) =>
23  (tokens / 1_000_000) * (isWarm ? price.cacheRead : price.input * 1.25)
24
25export const usd = (amount: number) => (amount < 0.01 ? '<$0.01' : `$${amount.toFixed(amount < 10 ? 2 : 1)}`)
26

1export type JrNextCost = {
2  /** Tokens the next request resends: the current context. */
3  tokens: number
4  model: string
5  /** End of the main loop's last model response (epoch ms). */
6  lastAt: number | null
7  now: number
8}
9
10declare module 'claude-code' {
11  interface PluginState {
12    'jr-next-cost': { next: JrNextCost | null; isBandHidden: boolean }
13  }
14}
15