quick-buttons

1// L'id del pannello dei bottoni, usato per aprirlo e per riconoscerlo quando si disegna
2const PANE = 'quick-buttons'
3// L'id del pannello di scelta: quali comandi diventano bottoni
4const SETUP = 'quick-buttons-setup'
5// La chiave dello store in cui restano i comandi scelti, fra una sessione e l'altra
6const CHOSEN = 'commands'
7// Quanti bottoni al massimo
8const MAX = 9
9
10// I comandi fra cui scegliere: quelli della sessione che non sono di Claude Code né nostri
11let available = []
12// I comandi scelti, o null finché la scelta non è mai stata fatta
13let chosen = null
14// La scelta in corso nel pannello di scelta, il testo che filtra l'elenco e la pagina mostrata
15let draft = []
16let filter = ''
17let page = 0
18// Quanti comandi stanno in una pagina: dipende dall'altezza del pannello, letta quando si disegna
19let pageSize = 10
20// L'esito dell'ultimo click, mostrato in fondo al pannello
21let status = ''
22
23// Rilegge i comandi della sessione: una skill o una mod può essere arrivata dopo
24async function loadCommands($) {
25  try {
26    const list = await $.command.list()
27    available = list
28      .filter((c) => c.source !== 'builtin' && c.name !== 'azioni')
29      .map((c) => c.name)
30      .sort()
31  } catch {
32    available = []
33  }
34}
35
36// I comandi scelti che la sessione ha davvero: un bottone che non parte non serve
37function shown() {
38  return (chosen ?? []).filter((name) => available.includes(name))
39}
40
41// Il tasto rapido di ogni bottone: la prima lettera libera del nome, altrimenti una cifra
42function hotkeys(names) {
43  const taken = new Set()
44  return names.map((name) => {
45    const free = [...name.toLowerCase(), ...'123456789'].find((k) => /[a-z0-9]/.test(k) && !taken.has(k))
46    taken.add(free)
47    return free
48  })
49}
50
51// Il pannello dei bottoni è una barra stretta a lato, alta quanto i suoi bottoni
52function paneSpec() {
53  return { id: PANE, title: 'Azioni', columns: 18, rows: shown().length + 3 }
54}
55
56// Chiude un pannello che può anche non essere aperto
57async function closePane($, id) {
58  try {
59    await $.ui.close({ id })
60  } catch {}
61}
62
63// I comandi che il filtro lascia passare
64function matching() {
65  const text = filter.trim().toLowerCase()
66  return text ? available.filter((name) => name.toLowerCase().includes(text)) : available
67}
68
69// Apre la scelta partendo dai comandi già scelti
70async function openSetup($, focus) {
71  draft = [...(chosen ?? [])]
72  filter = ''
73  page = 0
74  status = ''
75  await closePane($, PANE)
76  const spec = { id: SETUP, title: 'Scegli i bottoni', columns: 34, rows: 16 }
77  return $.ui.open(focus ? { ...spec, focus: true, closeOnEscape: true } : spec)
78}
79
80// Un comando entra nella scelta o ne esce
81function toggle($, name) {
82  if (draft.includes(name)) draft = draft.filter((n) => n !== name)
83  else if (draft.length < MAX) draft = [...draft, name]
84  $.ui.invalidate('ui.render')
85}
86
87// Il testo scritto nel campo restringe l'elenco, che riparte dalla prima pagina
88function setFilter($, text) {
89  filter = text
90  page = 0
91  $.ui.invalidate('ui.render')
92}
93
94function turnPage($, by) {
95  const last = Math.max(0, Math.ceil(matching().length / pageSize) - 1)
96  page = Math.min(last, Math.max(0, page + by))
97  $.ui.invalidate('ui.render')
98}
99
100// La scelta è fatta: resta nello store e il pannello dei bottoni prende il posto di questo
101async function save($) {
102  chosen = draft
103  status = ''
104  await $.store.set(CHOSEN, chosen)
105  await closePane($, SETUP)
106  await $.ui.open({ ...paneSpec(), focus: true })
107}
108
109// Il click su un bottone: lancia il comando e racconta l'esito in `status`
110async function press($, command) {
111  status = '/' + command + ' in coda'
112  $.ui.invalidate('ui.render')
113  try {
114    // Come se fosse stato digitato: parte appena la sessione è libera
115    await $.command.run({ command, args: '' })
116    status = '/' + command + ' lanciato'
117  } catch (error) {
118    status = '/' + command + ' non partito: ' + (error?.message ?? error)
119  }
120  $.ui.invalidate('ui.render')
121}
122
123export function register(on) {
124  on('session.start', async ($, e, next) => {
125    await loadCommands($)
126    const stored = await $.store.get(CHOSEN)
127    chosen = Array.isArray(stored) ? stored.filter((name) => typeof name === 'string') : null
128    // immediate: il pannello si apre anche mentre Claude lavora
129    await $.command.register({
130      name: 'azioni',
131      description: 'Apri i bottoni rapidi; "/azioni config" per scegliere quali comandi mostrare',
132      immediate: true,
133    })
134    if (chosen === null) {
135      // Prima sessione dopo l'installazione: si chiede quali comandi diventano bottoni.
136      // Da solo il pannello si siede solo su un terminale largo; altrimenti lo dice il toast
137      void openSetup($, false).then((opened) => {
138        if (!opened.isPlaced) $.ui.toast('Scegli i tuoi bottoni rapidi con /azioni')
139      })
140    } else {
141      void $.ui.open(paneSpec())
142    }
143    return next(e)
144  })
145
146  on('command.run', { command: 'azioni' }, async ($, e) => {
147    await loadCommands($)
148    const isSetup = chosen === null || e.args.trim() === 'config'
149    const opened = isSetup ? await openSetup($, true) : await $.ui.open({ ...paneSpec(), focus: true })
150    // Se la superficie non disegna il pannello, dirlo invece di tacere
151    return opened.isPlaced ? {} : { text: 'Pannello non disegnato: ' + opened.reason }
152  })
153
154  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
155    if (e.requestId !== PANE && e.requestId !== SETUP) return next(e)
156    const { Box, Text, Button, Input } = $.ui.resolve(e)
157    const dim = (text) => Text({ dimColor: true, wrap: 'wrap', children: [text] })
158
159    if (e.requestId === SETUP) {
160      if (available.length === 0) {
161        return dim('Nessuna skill o comando personalizzato in questa sessione.')
162      }
163      // Le righe che restano all'elenco, tolte quelle di intestazione, campo e comandi
164      pageSize = Math.max(5, (e.props.scroll?.bodyRows ?? 16) - 6)
165      const width = Math.max(10, (e.props.bodyColumns ?? 34) - 3)
166      const found = matching()
167      const pages = Math.max(1, Math.ceil(found.length / pageSize))
168      const rows = found.slice(page * pageSize, (page + 1) * pageSize).map((name) =>
169        Button({
170          key: 'pick-' + name,
171          label: (draft.includes(name) ? '✓ ' : '· ') + (name.length > width ? name.slice(0, width - 1) + '…' : name),
172          plain: true,
173          onPress: () => toggle($, name),
174        }),
175      )
176      return Box({
177        flexDirection: 'column',
178        children: [
179          dim(draft.length + '/' + MAX + ' scelti' + (draft.length ? ': ' + draft.join(', ') : '')),
180          Input({
181            key: 'filter',
182            label: 'Cerca ',
183            placeholder: 'nome della skill',
184            value: filter,
185            submitLabel: 'filtra',
186            autoFocus: true,
187            onInput: (text) => setFilter($, text),
188            onSubmit: (text) => setFilter($, text),
189          }),
190          ...rows,
191          ...(rows.length === 0 ? [dim('Nessun comando con questo nome.')] : []),
192          Box({
193            flexDirection: 'row',
194            columnGap: 2,
195            children: [
196              ...(pages > 1
197                ? [
198                    Button({ key: 'prev', label: 'Indietro', hotkey: 'p', plain: true, onPress: () => turnPage($, -1) }),
199                    Button({ key: 'next', label: 'Avanti', hotkey: 'n', plain: true, onPress: () => turnPage($, 1) }),
200                  ]
201                : []),
202              Button({ key: 'save', label: 'Salva', hotkey: 's', plain: true, onPress: () => save($) }),
203            ],
204          }),
205          dim('pagina ' + (page + 1) + ' di ' + pages + ' · Invio aggiunge o toglie'),
206        ],
207      })
208    }
209
210    const names = shown()
211    const keys = hotkeys(names)
212    const buttons = names.map((name, i) =>
213      Button({ key: name, label: name, hotkey: keys[i], plain: true, onPress: () => press($, name) }),
214    )
215
216    return Box({
217      flexDirection: 'column',
218      children: [
219        ...buttons,
220        ...(buttons.length === 0 ? [dim('Nessun bottone scelto.')] : []),
221        Button({ key: 'setup', label: 'modifica', plain: true, dimColor: true, onPress: () => void openSetup($, true) }),
222        dim(status),
223      ],
224    })
225  })
226}
227