margin-widget

1import { atom, read, update } from 'claude-code'
2import type { Elements, EngineInterface, PromptBox, Register, RenderElement, RenderNode, RenderSurface, UiPressArgument } from 'claude-code'
3import type { WidgetsPlace } from 'widgets'
4
5import { fit, plural } from './lib'
6
7type Tags = Pick<Elements[RenderSurface], 'Box' | 'Text'> & Partial<Pick<Elements['terminal'], 'Button' | 'Input'>>
8type Mark = { passage: string; remark: string; isCut: boolean }
9type Marked = { refusal: string; number: number; isCut: boolean }
10type Sent = { refusal: string; count: number }
11
12const PANE = 'widgets'
13const CARD_COLUMNS = 40
14const LONG_COLUMNS = 36
15const MAX_MARKS = 9
16const MAX_ROWS = 4
17const PASSAGE_LETTERS = 600
18const REMARK_LETTERS = 200
19const FIELD = 'margin-widget:field'
20const BUTTONS = 'margin-widget:buttons'
21const USAGE = 'Usage: /margin-widget [on|off|mark [remark]|drop <n>|send|clear]'
22const OFF = 'Margin is off.'
23const EMPTY = 'Select text in a reply with the mouse, then press Mark.'
24const FULLSCREEN = 'Margin needs fullscreen: /tui fullscreen'
25const TERMINAL = 'Margin works in the terminal only.'
26const SENT = 'In the prompt box. Cleared when you submit.'
27const NOTHING = 'Nothing selected.'
28const ONE_REPLY = 'Select inside one reply.'
29const ALREADY = 'Already marked.'
30const FULL = 'Margin is full: send or drop.'
31const NO_MARKS = 'No marks to send.'
32const DIALOG = 'A dialog is open. Marks kept.'
33const REFUSED = 'The prompt box took nothing. Marks kept.'
34const WIDE = /[ᄀ-ᅟ⺀-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦\u{1f300}-\u{1faff}\u{20000}-\u{3fffd}]/u
35const site = { plugin: 'widgets', key: 'site' } as const
36const widths = { plugin: 'widgets', key: 'widths' } as const
37const isOn = atom({ plugin: 'margin-widget', key: 'isOn' } as const, false)
38const marks = atom({ plugin: 'margin-widget', key: 'marks' } as const, [] as Mark[])
39const asking = atom({ plugin: 'margin-widget', key: 'asking' } as const, 0)
40const isSent = atom({ plugin: 'margin-widget', key: 'isSent' } as const, false)
41const said = atom({ plugin: 'margin-widget', key: 'said' } as const, '')
42
43const tidy = (text: string): string => text.replace(/\s+/g, ' ').trim()
44
45const cells = (letter: string): number => (WIDE.test(letter) ? 2 : 1)
46
47const cut = (text: string, room: number): string => {
48  const letters = [...text]
49  if (letters.reduce((sum, letter) => sum + cells(letter), 0) <= room) return text
50
51  let kept = ''
52  let used = 0
53  for (const letter of letters) {
54    if (used + cells(letter) > room - 1) break
55    kept += letter
56    used += cells(letter)
57  }
58
59  return `${kept}…`
60}
61
62const wrapped = (sentence: string, columns: number): string[] =>
63  sentence.split(' ').reduce<string[]>((rows, word) => {
64    const held = rows.at(-1)
65
66    return held !== undefined && held.length + 1 + word.length <= columns ? [...rows.slice(0, -1), `${held} ${word}`] : [...rows, word]
67  }, [])
68
69const quoted = (held: readonly Mark[]): string =>
70  `${held
71    .map(({ passage, remark }) =>
72      [...passage.split('\n').map(line => (line.trim() === '' ? '>' : `> ${line}`)), ...(remark === '' ? [] : [remark])].join('\n'),
73    )
74    .join('\n\n')}\n`
75
76const seat = (node: RenderNode, seats: Readonly<Record<string, RenderElement>>): RenderNode => {
77  if (typeof node !== 'object') return node
78  const { props, children } = node as { props?: { key?: unknown }; children?: RenderNode[] }
79  const seated = typeof props?.key === 'string' ? seats[props.key] : undefined
80  if (seated !== undefined) return seated
81
82  return children === undefined ? node : ({ ...node, children: children.map(child => seat(child, seats)) } as RenderElement)
83}
84
85const wipe = async ($: EngineInterface): Promise<void> => {
86  await update($, marks, () => [])
87  await update($, asking, () => 0)
88  await update($, isSent, () => false)
89  await update($, said, () => '')
90}
91
92const selected = async ($: EngineInterface): Promise<{ text: string; requestId?: string } | undefined> => {
93  try {
94    const selection = await $.ui.selection()
95
96    return typeof selection?.text === 'string' && selection.text.trim() !== '' ? selection : undefined
97  } catch {
98    return undefined
99  }
100}
101
102const marking = async ($: EngineInterface, remark: string): Promise<Marked> => {
103  const refused = (refusal: string): Marked => ({ refusal, number: 0, isCut: false })
104  const selection = await selected($)
105  if (selection === undefined) return refused(NOTHING)
106  if (selection.requestId === undefined) return refused(ONE_REPLY)
107
108  const letters = [...selection.text.replaceAll('\r', '').trim()]
109  const isCut = letters.length > PASSAGE_LETTERS
110  const passage = isCut ? `${letters.slice(0, PASSAGE_LETTERS).join('')}…` : letters.join('')
111  const held = await read($, marks)
112  if (held.some(mark => mark.passage === passage)) return refused(ALREADY)
113  if (held.length >= MAX_MARKS) return refused(FULL)
114
115  const number = (await update($, marks, before => [...(before ?? []), { passage, remark, isCut }])).length
116  await update($, asking, () => (remark === '' ? number : 0))
117  await update($, isSent, () => false)
118  await update($, said, () => '')
119
120  return { refusal: '', number, isCut }
121}
122
123const drafted = async ($: EngineInterface): Promise<string> => {
124  try {
125    const box: PromptBox | undefined = await $.prompt.read()
126
127    return typeof box?.text === 'string' ? box.text : ''
128  } catch {
129    return ''
130  }
131}
132
133const sending = async ($: EngineInterface): Promise<Sent> => {
134  const held = await read($, marks)
135  if (held.length === 0) return { refusal: NO_MARKS, count: 0 }
136
137  const lead = (await drafted($)).trim() === '' ? '' : '\n\n'
138  try {
139    const filled = await $.prompt.fill({ text: `${lead}${quoted(held)}`, mode: 'append' })
140    if (filled?.isFilled !== true) return { refusal: filled?.refusal === 'dialog' ? DIALOG : REFUSED, count: held.length }
141  } catch {
142    return { refusal: REFUSED, count: held.length }
143  }
144  await update($, isSent, () => true)
145  await update($, said, () => '')
146
147  return { refusal: '', count: held.length }
148}
149
150const pressMark = async ($: EngineInterface, press: UiPressArgument): Promise<void> => {
151  const { refusal } = await marking($, '')
152  if (refusal !== '') {
153    await update($, said, () => refusal)
154
155    return
156  }
157  if (press.component !== 'Pane' && press.component !== 'AbovePrompt') return
158
159  try {
160    await $.ui.focus({ requestId: press.requestId, key: 'remark' })
161  } catch {
162    return
163  }
164}
165
166const pressSend = async ($: EngineInterface): Promise<void> => {
167  const { refusal } = await sending($)
168  if (refusal !== '') await update($, said, () => refusal)
169}
170
171const remarked = async ($: EngineInterface, value: string): Promise<void> => {
172  const number = await read($, asking)
173  if (number === 0) return
174
175  const remark = [...tidy(value)].slice(0, REMARK_LETTERS).join('')
176  await update($, marks, held => (held ?? []).map((mark, at) => (at === number - 1 ? { ...mark, remark } : mark)))
177  await update($, asking, () => 0)
178}
179
180const show = async (
181  $: EngineInterface,
182  { Box, Text, Button, Input }: Tags,
183  beneath: RenderElement,
184  place: WidgetsPlace,
185  columns: number,
186  surface: RenderSurface,
187  isFullscreen: boolean,
188): Promise<RenderElement> => {
189  if (!(await read($, isOn))) return beneath
190  if ((await $.state.get(site)).value !== place) return beneath
191
192  const width = fit((await $.state.get(widths)).value?.['margin-widget'] ?? CARD_COLUMNS, columns)
193  const inner = width - 4
194  const sentences = (sentence: string): RenderElement[] => wrapped(sentence, inner).map(row => <Text dimColor wrap="truncate-end">{row}</Text>)
195
196  if (surface !== 'terminal' || Button === undefined || Input === undefined || !isFullscreen) {
197    return $.widgets.card({
198      beneath,
199      width,
200      title: 'Margin',
201      body: <Box flexDirection="column">{sentences(surface === 'terminal' ? FULLSCREEN : TERMINAL)}</Box>,
202    })
203  }
204
205  const held = await read($, marks)
206  const waiting = await read($, asking)
207  const sent = await read($, isSent)
208  const refusal = await read($, said)
209  const earlier = Math.max(0, held.length - MAX_ROWS)
210
211  const card = await $.widgets.card({
212    beneath,
213    width,
214    title: 'Margin',
215    note: held.length === 0 ? '' : sent ? 'sent' : inner >= LONG_COLUMNS ? plural(held.length, 'mark') : `${held.length}`,
216    body: (
217      <Box flexDirection="column">
218        {held.length === 0 && sentences(EMPTY)}
219        {earlier > 0 && (
220          <Text key="earlier" dimColor wrap="truncate-end">
221            {`${earlier} earlier`}
222          </Text>
223        )}
224        {held.slice(earlier).flatMap(({ passage, remark }, at) => [
225          <Text key={`mark-${earlier + at + 1}`} wrap="truncate-end">
226            <Text dimColor>{earlier + at + 1}</Text> {cut(tidy(passage), inner - 2)}
227          </Text>,
228          ...(remark === ''
229            ? []
230            : [
231                <Text key={`remark-${earlier + at + 1}`} wrap="truncate-end">
232                  {`  ${cut(remark, inner - 2)}`}
233                </Text>,
234              ]),
235        ])}
236        {waiting !== 0 && <Box key={FIELD} />}
237        {sent && sentences(SENT)}
238        {refusal !== '' &&
239          wrapped(refusal, inner).map(row => (
240            <Text color="yellow" wrap="truncate-end">
241              {row}
242            </Text>
243          ))}
244        <Box key={BUTTONS} />
245      </Box>
246    ),
247  })
248
249  return seat(card, {
250    [FIELD]: (
251      <Input key="remark" placeholder={`remark on ${waiting}`} value="" submitLabel="save" autoFocus onSubmit={value => remarked($, value)} />
252    ),
253    [BUTTONS]: (
254      <Box flexDirection="row" gap={2}>
255        <Button key="mark" label="Mark" variant="primary" onPress={press => pressMark($, press)} />
256        {held.length > 0 && <Button key="send" label="Send" onPress={() => pressSend($)} />}
257      </Box>
258    ),
259  }) as RenderElement
260}
261
262export const register: Register = on => {
263  on('session.start', async ($, e, next) => {
264    await $.command.register({
265      name: 'margin-widget',
266      description: "Toggle the Margin card, or mark, drop, send and clear passages of Claude's reply",
267      argumentHint: '[on|off|mark [remark]|drop <n>|send|clear]',
268    })
269    if ((await $.store.get('isOn')) === true) await update($, isOn, () => true)
270
271    return next(e)
272  })
273
274  on('command.run', { command: 'margin-widget' }, async ($, e) => {
275    const typed = e.args.trim()
276    const [word = ''] = typed.split(/\s+/)
277    const verb = word.toLowerCase()
278    const rest = typed.slice(word.length).trim()
279
280    if (verb === 'mark' || verb === 'drop' || verb === 'send' || verb === 'clear') {
281      if ((verb === 'drop' && !/^\d+$/.test(rest)) || ((verb === 'send' || verb === 'clear') && rest !== '')) return { text: USAGE }
282      if (!(await read($, isOn))) return { text: OFF }
283
284      if (verb === 'mark') {
285        if (e.presentation?.isFullscreen !== true) return { text: FULLSCREEN }
286
287        const { refusal, number, isCut } = await marking($, [...tidy(rest)].slice(0, REMARK_LETTERS).join(''))
288        if (refusal !== '') return { text: refusal }
289
290        return { text: isCut ? `Marked ${number}, cut to ${PASSAGE_LETTERS} characters.` : `Marked ${number}.` }
291      }
292      if (verb === 'drop') {
293        const number = Number(rest)
294        if (number < 1 || number > (await read($, marks)).length) return { text: `No mark ${number}.` }
295
296        await update($, marks, held => (held ?? []).filter((_mark, at) => at !== number - 1))
297        await update($, asking, () => 0)
298        await update($, isSent, () => false)
299        await update($, said, () => '')
300
301        return { text: `Dropped ${number}.` }
302      }
303      if (verb === 'send') {
304        const { refusal, count } = await sending($)
305
306        return { text: refusal === '' ? `In the prompt box: ${plural(count, 'mark')}. Read it, then submit.` : refusal }
307      }
308      await wipe($)
309
310      return { text: 'Margin cleared.' }
311    }
312
313    const arg = typed.toLowerCase()
314    if (arg !== '' && arg !== 'on' && arg !== 'off') return { text: USAGE }
315
316    const isShown = await update($, isOn, shown => (arg === '' ? !(shown ?? false) : arg === 'on'))
317    await $.store.set('isOn', isShown)
318    if (!isShown) await wipe($)
319
320    return { text: isShown ? 'Margin on; /widgets places it.' : 'Margin off.' }
321  })
322
323  on('prompt.submit', async ($, e, next) => {
324    const isOwn = e.origin.kind === 'composer' || e.origin.kind === 'bridge' || e.origin.kind === 'sdk'
325    if (isOwn && (await read($, isOn)) && (await read($, isSent))) await wipe($)
326
327    return next(e)
328  })
329
330  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e, next) =>
331    show($, $.ui.resolve(e), await next(e), 'side', e.props.bodyColumns, e.surface, e.viewport?.isFullscreen === true),
332  )
333
334  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) =>
335    e.props.hasSurvey ? next(e) : show($, $.ui.resolve(e), await next(e), 'above', e.props.bodyColumns, e.surface, e.viewport?.isFullscreen === true),
336  )
337
338  on('ui.render', { component: 'PromptHint' }, async ($, e, next) =>
339    show($, $.ui.resolve(e), await next(e), 'below', e.viewport?.columns ?? 80, e.surface, e.viewport?.isFullscreen === true),
340  )
341}
342

1const MIN_CARD = 20
2const BARS = '▁▂▃▄▅▆▇█'
3
4export const fit = (wanted: number, columns: number): number => Math.min(wanted, Math.max(MIN_CARD, columns))
5
6export const plural = (count: number, word: string): string => `${count} ${word}${count === 1 ? '' : 's'}`
7
8export const span = (ms: number): string => {
9  const seconds = Math.max(0, Math.round(ms / 1000))
10  if (seconds < 60) return `${seconds}s`
11  const minutes = Math.floor(seconds / 60)
12  if (minutes < 60) return `${minutes}m ${String(seconds % 60).padStart(2, '0')}s`
13  const hours = Math.floor(minutes / 60)
14  if (hours < 24) return `${hours}h ${String(minutes % 60).padStart(2, '0')}m`
15
16  return `${Math.floor(hours / 24)}d ${hours % 24}h`
17}
18
19export const spark = (values: readonly number[], width: number): string => {
20  const shown = width > 0 ? values.slice(-width) : []
21  const top = Math.max(...shown, 0)
22
23  return shown
24    .map(value => (top <= 0 ? BARS[0] : BARS[Math.min(BARS.length - 1, Math.round((Math.max(0, value) / top) * (BARS.length - 1)))]))
25    .join('')
26}
27
28export const hash = (text: string): number => {
29  let held = 2166136261
30  for (const letter of text) held = Math.imul(held ^ (letter.codePointAt(0) ?? 0), 16777619)
31
32  return held >>> 0
33}
34
35export const shade = (color: number, factor: number): number =>
36  (Math.round((color >> 16) * factor) << 16) |
37  (Math.round(((color >> 8) & 255) * factor) << 8) |
38  Math.round((color & 255) * factor)
39
40export const folder = (path: string): string => {
41  const flat = path.replaceAll('\\', '/').replace(/\/+$/, '')
42
43  return /^[a-z]:/i.test(flat) ? flat.toLowerCase() : flat
44}
45

1export type MarginSwitch = boolean
2
3declare module 'claude-code' {
4  interface PluginState {
5    'margin-widget': {
6      isOn: MarginSwitch
7      marks: { passage: string; remark: string; isCut: boolean }[]
8      asking: number
9      isSent: boolean
10      said: string
11    }
12  }
13}
14