prompt-highlight

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4type Engine = EngineInterface
5
6const isOnAtom = atom({ plugin: 'prompt-highlight', key: 'isOn' } as const, true)
7
8const SKY = '#87CEEB'
9const INK = '#000000'
10
11// The footer toggle's colours, the same as Clean View's, Prompt Upgrade's and Auto Model's.
12const LINE = '#262B33'
13const MUTED = '#7D8590'
14const TEXT = '#E6EDF3'
15
16// Prompts the person sent themself: typed in the terminal or the desktop app, or from the phone.
17const TYPED = new Set(['composer', 'bridge', 'sdk'])
18
19// Damon's Tools (it registers /damons-tools) shows every plugin's switch in its
20// own dashboard; while it is installed this mod leaves its footer toggle out.
21let dashboardSeen: { at: number; isThere: boolean } | undefined
22async function hasDashboard($: Engine): Promise<boolean> {
23  try {
24    const now = await $.clock.now()
25    if (dashboardSeen && now - dashboardSeen.at < 5000) return dashboardSeen.isThere
26    const isThere = (await $.command.list()).some(c => c.name === 'damons-tools')
27    dashboardSeen = { at: now, isThere }
28    return isThere
29  } catch {
30    return false
31  }
32}
33
34/** Saves the switch where Damon's Tools reads it (`isOn` in the store) and redraws the prompts. */
35async function setOn($: Engine, isOn: boolean) {
36  await $.store.set('isOn', isOn)
37  await update($, isOnAtom, () => isOn)
38}
39
40export const register: Register = on => {
41  on('session.start', async ($, e, next) => {
42    const stored = await $.store.get('isOn')
43    await setOn($, stored !== false)
44    await $.command.register({
45      name: 'prompt-highlight',
46      description: 'Turn Prompt Highlight on or off',
47      argumentHint: 'on | off',
48      immediate: true,
49    })
50    return next(e)
51  })
52
53  on('command.run', { command: 'prompt-highlight' }, async ($, e) => {
54    const arg = e.args.trim().toLowerCase()
55    if (arg !== 'on' && arg !== 'off') {
56      return { text: `Prompt Highlight is ${(await read($, isOnAtom)) ? 'on' : 'off'}. Use /prompt-highlight on or off.` }
57    }
58    await setOn($, arg === 'on')
59    return { text: arg === 'on' ? 'Prompt Highlight is on.' : 'Prompt Highlight is off.' }
60  })
61
62  // Each prompt the person sent, in a sky-blue box with black text under a "You" label.
63  // Notifications and other agents' messages keep the engine's drawing.
64  on('ui.render', { component: 'UserMessage' }, async ($, e, next) => {
65    if (!TYPED.has(e.props.origin.kind) || !(await read($, isOnAtom))) return next(e)
66    const { Box, Text } = $.ui.resolve(e)
67    return (
68      <Box flexDirection="column" backgroundColor={SKY} paddingX={1}>
69        <Text color={INK} bold>
70          You
71        </Text>
72        <Text color={INK}>{e.props.text}</Text>
73      </Box>
74    )
75  })
76
77  // A toggle in the prompt footer beside the other mods' toggles; a click flips it.
78  on('ui.render', { component: 'SessionMode' }, async ($, e, next) => {
79    if (await hasDashboard($)) return next(e)
80    const { Box, Button, Text } = $.ui.resolve(e)
81    const isOn = await read($, isOnAtom)
82    const label = `Prompt Highlight: ${isOn ? 'On' : 'Off'}`
83    const flip = () => setOn($, !isOn)
84    const theirs = await next(e).catch(() => null)
85    return (
86      <Box flexDirection="row" columnGap={1}>
87        {e.surface === 'terminal' ? (
88          <Button key="prompt-highlight-toggle" plain onPress={flip}>
89            <Text backgroundColor={LINE} color={isOn ? TEXT : MUTED}>{` ${label} `}</Text>
90          </Button>
91        ) : (
92          <Button key="prompt-highlight-toggle" label={label} plain onPress={flip} />
93        )}
94        {theirs}
95      </Box>
96    )
97  })
98}
99

1/** Whether prompts are drawn in the sky-blue box. */
2export type IsOn = boolean
3
4declare module 'claude-code' {
5  interface PluginState {
6    'prompt-highlight': { isOn: IsOn }
7  }
8}
9