compact-nudge

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import { row, meter, toneOf } from './kit'
5import { STRINGS } from './strings'
6
7// cockpit: switched on and off in the /cockpit pane
8const OFF = { plugin: 'cockpit', key: 'off' } as const
9
10const isOff = async ($: EngineInterface): Promise<boolean> =>
11  ((await $.state.get(OFF)).value ?? []).includes('compact-nudge')
12
13// cockpit: the language set in /cockpit (English when the hub is not installed)
14const LANG = { plugin: 'cockpit', key: 'lang' } as const
15
16const strings = async ($: EngineInterface) => STRINGS[(await $.state.get(LANG)).value ?? 'en']
17
18const percent = atom({ plugin: 'compact-nudge', key: 'percent' } as const, 0)
19
20const THRESHOLD = 75
21
22const compact = async ($: EngineInterface): Promise<void> => {
23  const s = await strings($)
24  // Rejects while a turn runs: just try again later.
25  const done = await $.session.compact({}).catch(() => undefined)
26
27  $.ui.toast(done === undefined || done.skip !== undefined ? s.failed : s.done)
28}
29
30export const register: Register = on => {
31  on('session.measure', async ($, e, next) => {
32    const now = e.context.percent ?? 0
33    await update($, percent, held => (held === now ? held : now))
34
35    return next(e)
36  })
37
38  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
39    const below = await next(e)
40    const used = await read($, percent)
41
42    if (e.props.hasSurvey || (await isOff($)) || used < THRESHOLD) {
43      return below
44    }
45
46    const ui = $.ui.resolve(e)
47    const { Button, Text } = ui
48    const s = await strings($)
49
50    return row(
51      ui,
52      'session',
53      s.label,
54      [
55        <Text>
56          {meter(ui, used, 14)} <Text color={toneOf(used)}>{used}%</Text>
57          <Text dimColor>  {s.almostFull}  </Text>
58        </Text>,
59        <Button key="compact" label={s.button} variant="primary" onPress={() => compact($)} />,
60      ],
61      below,
62    )
63  })
64}
65

1// Generated by the build from kit/kit.tsx. Do not edit by hand.
2import type { BoxProps, Color, ElementConstructor, RenderChildren, TextProps } from 'claude-code'
3
4// The collection's visual language: every band is an instrument row with a rail and a placard
5// in its subject's hue, then the values. Stacked, the bands line up as one panel.
6
7export type Ui = { Box: ElementConstructor<BoxProps>; Text: ElementConstructor<TextProps> }
8
9export type Group = 'git' | 'session' | 'project' | 'daily'
10
11export type Tone = 'success' | 'warning' | 'error'
12
13// Rail color per subject. Green, amber and red stay reserved for the state of a value.
14const HUE: Record<Group, Color> = { git: 'merged', session: 'claude', project: 'suggestion', daily: 'remember' }
15
16const LABEL_WIDTH = 10
17
18// Indent of continuation lines: lines up with the value column.
19export const INDENT = ' '.repeat(LABEL_WIDTH + 2)
20
21export const toneOf = (percent: number): Tone => (percent >= 85 ? 'error' : percent >= 60 ? 'warning' : 'success')
22
23// Slider gauge: a heavy stroke up to a knob, a light stroke after it. The knob is the same one
24// the settings pane uses for its switches, so every control in the collection reads alike.
25export const gauge = (percent: number, width: number): { fill: string; rest: string } => {
26  const at = Math.round((Math.min(100, Math.max(0, percent)) / 100) * (width - 1))
27
28  return { fill: `${'━'.repeat(at)}●`, rest: '─'.repeat(width - 1 - at) }
29}
30
31export const meter = (ui: Ui, percent: number, width: number, color: Color = toneOf(percent)) => {
32  const { Text } = ui
33  const { fill, rest } = gauge(percent, width)
34
35  return (
36    <Text>
37      <Text color={color}>{fill}</Text>
38      <Text dimColor>{rest}</Text>
39    </Text>
40  )
41}
42
43// One instrument row. `below` is what the other mods already drew in the band.
44export const row = (ui: Ui, group: Group, label: string, body: unknown, below?: unknown) => {
45  const { Box, Text } = ui
46
47  return (
48    <Box flexDirection="column">
49      {below as RenderChildren}
50      <Box>
51        <Text color={HUE[group]}>
52          ▍ {label.toUpperCase().slice(0, LABEL_WIDTH - 1).padEnd(LABEL_WIDTH)}
53        </Text>
54        {body as RenderChildren}
55      </Box>
56    </Box>
57  )
58}
59
60// Side pane header: a strong title, a summary and a rule.
61export const heading = (ui: Ui, group: Group, title: string, summary: string, columns: number) => {
62  const { Box, Text } = ui
63
64  return (
65    <Box flexDirection="column">
66      <Text>
67        <Text color={HUE[group]}>▍ </Text>
68        <Text bold>{title.toUpperCase()}</Text>
69        <Text dimColor>  {summary}</Text>
70      </Text>
71      <Text dimColor>{'─'.repeat(Math.max(8, Math.min(columns, 64)))}</Text>
72    </Box>
73  )
74}
75

1const en = {
2  label: 'compact',
3  almostFull: 'context almost full',
4  button: 'Compact now',
5  failed: "Couldn't compact right now (turn in progress?).",
6  done: 'Conversation compacted.',
7}
8
9type Strings = typeof en
10
11const pt: Strings = {
12  label: 'compactar',
13  almostFull: 'contexto quase cheio',
14  button: 'Compactar agora',
15  failed: 'Não deu para compactar agora (turno em andamento?).',
16  done: 'Conversa compactada.',
17}
18
19const es: Strings = {
20  label: 'compactar',
21  almostFull: 'contexto casi lleno',
22  button: 'Compactar ahora',
23  failed: 'No se pudo compactar ahora (¿turno en curso?).',
24  done: 'Conversación compactada.',
25}
26
27export const STRINGS = { en, pt, es }
28

1export type Percent = number
2
3declare module 'claude-code' {
4  interface PluginState {
5    'compact-nudge': { percent: Percent }
6  }
7}
8