token-weather

1import { atom, read, update } from 'claude-code'
2import type { Register, SessionContextUsage } from 'claude-code'
3
4import type { Forecast } from '../types'
5
6const forecast = atom({ plugin: 'token-weather', key: 'forecast' } as const, null)
7
8const TURNS = 12
9const BLOCKS = '▁▂▃▄▅▆▇█'
10
11type Weather = { icon: string; word: string; color: string }
12
13export function weatherOf(percent: number): Weather {
14  if (percent < 25) return { icon: '☀', word: 'Heiter (clear)', color: 'yellow' }
15  if (percent < 50) return { icon: '☁', word: 'Bewölkt (cloudy)', color: 'cyan' }
16  if (percent < 75) return { icon: '☂', word: 'Regenschauer (showers)', color: 'blue' }
17  if (percent < 90) return { icon: '☇', word: 'Gewitter (storm)', color: 'magenta' }
18  return { icon: '↯', word: 'Bald komprimieren (compact soon)', color: 'red' }
19}
20
21// German style: 134400 → "134,4k", 200000 → "200k", 1000000 → "1M"
22export function tokensOf(n: number): string {
23  const abs = Math.abs(n)
24  const [value, unit] = abs >= 1_000_000 ? [n / 1_000_000, 'M'] : abs >= 1000 ? [n / 1000, 'k'] : [n, '']
25  return `${value.toFixed(unit ? 1 : 0).replace(/\.0$/, '').replace('.', ',')}${unit}`
26}
27
28// each bar is that turn's fill of the whole window, so a full row of █ is a full window
29export function sparklineOf(history: number[], window: number): string {
30  return history
31    .map(t => BLOCKS[Math.min(BLOCKS.length - 1, Math.max(0, Math.floor((t / window) * BLOCKS.length)))])
32    .join('')
33}
34
35export function deltaOf(delta: number): string {
36  if (delta > 0) return `▲ +${tokensOf(delta)} letzte Runde (last turn)`
37  if (delta < 0) return `▼ −${tokensOf(-delta)} letzte Runde (last turn)`
38  return '= ±0 letzte Runde (last turn)'
39}
40
41function percentOf(f: Forecast, tokens: number): number {
42  return Math.min(100, Math.round((tokens / f.window) * 100))
43}
44
45// one reading per turn: the input side of the turn's last response against the window
46function record(prev: Forecast | null, context: SessionContextUsage): Forecast | null {
47  const tokens = context.tokens
48  if (tokens === undefined || !context.window) return prev
49  const last = prev?.history.at(-1)
50  return {
51    history: [...(prev?.history ?? []), tokens].slice(-TURNS),
52    window: context.window,
53    delta: last === undefined ? null : tokens - last,
54  }
55}
56
57export const register: Register = on => {
58  // a resumed session already has a fill: start the chart from it
59  on('session.start', async ($, e, next) => {
60    const result = await next(e)
61    if ((await read($, forecast)) === null) {
62      const { context } = await $.session.usage()
63      await update($, forecast, f => record(f, context))
64    }
65    return result
66  })
67
68  // the engine measures after each main-thread turn; `context` in `changed` means the fill moved
69  on('session.measure', async ($, e, next) => {
70    if (e.changed.includes('context')) {
71      await update($, forecast, f => record(f, e.context))
72    }
73    return next(e)
74  })
75
76  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
77    const f = await read($, forecast)
78    const tokens = f?.history.at(-1)
79    if (!f || tokens === undefined || e.props.hasSurvey) {
80      return next(e)
81    }
82
83    const { Box, Text } = $.ui.resolve(e)
84    const percent = percentOf(f, tokens)
85    const w = weatherOf(percent)
86
87    const line = (
88      <Box key="token-weather" flexDirection="row" gap={2} width={e.props.bodyColumns}>
89        <Text color={w.color} bold wrap="truncate">{`${w.icon} ${w.word}`}</Text>
90        <Text wrap="truncate">
91          {`${percent}% · ${tokensOf(tokens)} / ${tokensOf(f.window)}`}
92        </Text>
93        <Text color={w.color} wrap="truncate">{sparklineOf(f.history, f.window)}</Text>
94        {f.delta === null ? null : (
95          <Text dimColor wrap="truncate">{deltaOf(f.delta)}</Text>
96        )}
97      </Box>
98    )
99
100    // what the host and other plugins draw here (plan-progress's bars) stays, above this line
101    const below = await next(e)
102    return below ? (
103      <Box flexDirection="column">
104        {below}
105        {line}
106      </Box>
107    ) : (
108      line
109    )
110  })
111}
112

1export type Forecast = {
2  /** Input tokens the context held after each of the last turns, oldest first (at most 12). */
3  history: number[]
4  /** The model's context window, in tokens. */
5  window: number
6  /** What the last turn added (negative after a compaction); null before the second reading. */
7  delta: number | null
8}
9
10declare module 'claude-code' {
11  interface PluginState {
12    'token-weather': { forecast: Forecast | null }
13  }
14}
15