context-gauge

1// 입력창 위에 현재 세션의 컨텍스트 사용량을 표시하는 mod
2import { atom, read, update } from 'claude-code'
3import type { Register, SessionContextUsage } from 'claude-code'
4
5import type { ContextFill } from '../types'
6
7const CAUTION_PERCENT = 50
8const WARN_PERCENT = 60
9const DANGER_PERCENT = 70
10const ORANGE = '#ff8700'
11const TOKENS_PER_K = 1000
12const BAR_CELLS = 20
13const FULL_PERCENT = 100
14const COMMAND = 'context-gauge'
15
16const fill = atom({ plugin: 'context-gauge', key: 'fill' } as const, null)
17const isHidden = atom({ plugin: 'context-gauge', key: 'isHidden' } as const, false)
18
19const toFill = (context: SessionContextUsage): ContextFill | null =>
20  context.tokens === undefined || context.percent === undefined
21    ? null
22    : { tokens: context.tokens, window: context.window, percent: context.percent }
23
24const colorOf = (percent: number) => {
25  if (percent >= DANGER_PERCENT) return 'red'
26  if (percent >= WARN_PERCENT) return ORANGE
27  if (percent >= CAUTION_PERCENT) return 'yellow'
28
29  return 'green'
30}
31
32const kilo = (tokens: number) => `${Math.round(tokens / TOKENS_PER_K)}k`
33
34const filledCells = (percent: number) =>
35  Math.min(BAR_CELLS, Math.round((percent / FULL_PERCENT) * BAR_CELLS))
36
37export const register: Register = on => {
38  on('session.start', async ($, e, next) => {
39    await $.command.register({
40      name: COMMAND,
41      description: 'Show or hide the context usage gauge above the prompt',
42    })
43    const { context } = await $.session.usage()
44    await update($, fill, () => toFill(context))
45
46    return next(e)
47  })
48
49  on('command.run', { command: COMMAND }, async $ => {
50    const hidden = await update($, isHidden, value => !value)
51
52    return { text: hidden ? 'Context gauge hidden.' : 'Context gauge shown.' }
53  })
54
55  on('session.measure', async ($, e, next) => {
56    if (e.changed.includes('context')) {
57      await update($, fill, () => toFill(e.context))
58    }
59
60    return next(e)
61  })
62
63  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
64    const current = await read($, fill)
65
66    if (e.props.hasSurvey || current === null || (await read($, isHidden))) {
67      return next(e)
68    }
69
70    const { Box, Button, Text } = $.ui.resolve(e)
71    const color = colorOf(current.percent)
72    const filled = filledCells(current.percent)
73
74    return (
75      <Box flexDirection="row">
76        <Text color={color}>{'█'.repeat(filled)}</Text>
77        <Text dimColor>{'░'.repeat(BAR_CELLS - filled)}</Text>
78        <Text color={color}>
79          {' '}Context {current.percent}% · {kilo(current.tokens)} / {kilo(current.window)}{' '}
80        </Text>
81        <Button key="close" label="✕" onPress={() => update($, isHidden, () => true)} />
82      </Box>
83    )
84  })
85}
86

1// context-gauge mod의 $.state 타입 계약
2export type ContextFill = { tokens: number; window: number; percent: number }
3
4declare module 'claude-code' {
5  interface PluginState {
6    'context-gauge': { fill: ContextFill | null; isHidden: boolean }
7  }
8}
9