context-bars

1import type { Register } from 'claude-code'
2
3// legend labels, lower-cased; a category not listed keeps its own name
4const SHORT: Record<string, string> = {
5  'system tools': 'tools',
6  'custom agents': 'agents',
7  'free space': 'free',
8}
9
10// the engine names each row by theme key, and the terminal's dark theme paints System prompt
11// (promptBorder) and System tools (inactive) in near-identical greys; the desktop has its own palette.
12// A category not listed keeps the engine's color.
13const TERMINAL_COLORS: Record<string, string> = {
14  'System prompt': '#5b8db8',
15  'System tools': '#4fb6b2',
16  'MCP tools': '#9d7bf0',
17  'Custom agents': '#7fbf6a',
18  'Memory files': '#e6b655',
19  'Skills': '#f08fb4',
20  'Messages': '#d9644a',
21}
22
23// 4200 -> 4.2k, 52000 -> 52k, 1000000 -> 1M
24const fmt = (n: number) =>
25  n >= 999_500 ? `${+(n / 1e6).toFixed(1)}M`
26  : n >= 1e4 ? `${Math.round(n / 1e3)}k`
27  : n >= 1e3 ? `${+(n / 1e3).toFixed(1)}k`
28  : `${n}`
29
30export const register: Register = on => {
31  // redraw once the window has changed
32  on('turn.complete', ($, e, next) => {
33    $.ui.invalidate('ui.render')
34
35    return next(e)
36  })
37
38  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
39    // the band is one instance: a hook that answers without next hides every other mod's band, so draw above what is beneath
40    const below = await next(e)
41    const { context } = await $.session.usage({ breakdown: 'summary' })
42    const b = context.breakdown
43
44    if (e.props.hasSurvey || !b) return below
45
46    const { Box, Text } = $.ui.resolve(e)
47    // deferred rows sit outside the window and the buffer is drawn as part of the track
48    const used = b.categories.filter(c => c.kind === 'used')
49      .map(c => e.surface === 'terminal' ? { ...c, color: TERMINAL_COLORS[c.name] ?? c.color } : c)
50    // the engine paints Free space promptBorder, System prompt's color too: recolor it so the track reads as empty
51    const track = 'subtle'
52    const found = b.categories.find(c => c.kind === 'free')
53    const free = found && { ...found, color: track }
54    if (used.length === 0) return below
55
56    const total = Math.max(b.rawMaxTokens, b.totalTokens)
57    const pct = (n: number) => Math.round((n / total) * 100)
58    const compact = b.autoCompactThreshold
59    const percent = Math.round(b.percentage)
60
61    // whole-percent widths from cumulative edges, so they never add past 100%
62    let sum = 0
63    const segments = used.map(c => {
64      const from = pct(sum)
65      sum += c.tokens
66
67      return { c, w: pct(sum) - from }
68    }).filter(s => s.w > 0)
69    // the track up to the compaction marker; the flexible one after it takes the rest
70    const gap = compact === undefined ? 0 : Math.floor((compact / total) * 100) - pct(sum)
71
72    const legend = free ? [...used, free] : used
73    const cols = e.props.bodyColumns >= 80 ? 4 : 2
74    const lines = Array.from({ length: Math.ceil(legend.length / cols) }, (_, i) => legend.slice(i * cols, (i + 1) * cols))
75
76    return (
77      <Box flexDirection="column">
78        {below}
79        <Box justifyContent="space-between">
80          <Text wrap="truncate">
81            <Text color="claude">◆</Text> <Text bold>context</Text>
82          </Text>
83          <Text wrap="truncate">
84            <Text bold>{fmt(b.totalTokens)}</Text>
85            <Text dimColor> of {fmt(b.rawMaxTokens)}{compact === undefined ? '' : ' · compacts at '}</Text>
86            {compact === undefined ? null : <Text bold>{fmt(compact)}</Text>}
87            {'  '}
88            <Text bold inverse color={percent >= 90 ? 'error' : percent >= 70 ? 'warning' : 'success'}> {percent}% </Text>
89          </Text>
90        </Box>
91        {/* segments are percent-wide Boxes with a background, so the layout fits the band
92            whatever its cell metric */}
93        <Box width="100%" height={1}>
94          {segments.map(({ c, w }) => <Box width={`${w}%`} height={1} backgroundColor={c.color} />)}
95          {gap > 0 ? <Box width={`${gap}%`} height={1} backgroundColor={track} /> : null}
96          {compact === undefined ? null : <Box width={1} height={1} backgroundColor="warning" />}
97          <Box flexGrow={1} height={1} backgroundColor={track} />
98        </Box>
99        {lines.map(line => (
100          <Box>
101            {line.map(c => {
102              const name = c.name.toLowerCase()
103
104              return (
105                <Box width={`${100 / cols}%`}>
106                  <Text wrap="truncate">
107                    <Text color={c.color}>■</Text> {SHORT[name] ?? name} <Text bold>{fmt(c.tokens)}</Text>
108                    {c.kind === 'free' ? null : <Text dimColor> {pct(c.tokens)}%</Text>}
109                  </Text>
110                </Box>
111              )
112            })}
113          </Box>
114        ))}
115      </Box>
116    )
117  })
118}
119