Disegnare nell'interfaccia con un mod

await $.ui.open({ id: 'hello-tabs', title: 'Hello tabs', focus: true })

await $.ui.close({ id: 'hello-tabs' })

// Il valore che significa "usa il colore predefinito del terminale"
const DEFAULT_COLOR = 0x01000000

// Compatta righe di coppie [carattere, colore] nella stringa che un Raster accetta
// Una cella è tre numeri: il punto di codice del carattere, il suo colore, e lo sfondo
function cellsOf(rows) {
  const numbers = rows.flat().flatMap(([char, color]) => [char.codePointAt(0), color, DEFAULT_COLOR])
  return new Uint8Array(Uint32Array.from(numbers).buffer).toBase64()
}

on('ui.render', { component: 'Pane' }, async ($, e, next) => {
  // Disegna solo nel riquadro aperto con l'id 'heat'
  if (e.requestId !== 'heat') return next(e)
  const { Box, Text, Raster } = $.ui.resolve(e)
  // Due righe di tre celle, ognuna un carattere di blocco e il suo colore
  const rows = [
    [['█', 0x2e7d32], ['█', 0xf9a825], ['█', 0xc62828]],
    [['█', 0x2e7d32], ['█', 0x2e7d32], ['█', 0xf9a825]],
  ]
  if (e.surface !== 'terminal') {
    return Text({ children: ['The heat map needs the terminal.'] })
  }
  return Box({
    flexDirection: 'column',
    children: [Raster({ key: 'grid', columns: 3, rows: 2, cells: cellsOf(rows) })],
  })
})

╭──────────────────────────────────────────────────────────╮
│ Note: Type a note and press Enter ⏎ add                ✕ │
│ x buy milk │
│ x call bob │
╰──────────────────────────────────────────────────────────╯

// L'elenco che il riquadro disegna
let notes = []

on('ui.render', { component: 'Pane' }, async ($, e, next) => {
  // Disegna solo nel riquadro aperto con l'id 'notes'
  if (e.requestId !== 'notes') return next(e)
  const { Box, Text, Button, Input } = $.ui.resolve(e)
  const redraw = () => $.ui.invalidate('ui.render')

  return Box({
    flexDirection: 'column',
    children: [
      Input({
        key: 'new-note',
        label: 'Note',
        placeholder: 'Type a note and press Enter',
        // Disegna il campo vuoto ogni volta, che lo cancella dopo un invio
        value: '',
        submitLabel: 'add',
        autoFocus: true,
        // Viene eseguito quando premi Invio nel campo
        onSubmit: async (value) => {
          // Ignora una riga vuota
          if (!value.trim()) return
          notes = [...notes, value.trim()]
          redraw()
          await $.store.set('notes', notes)
        },
      }),
      // Una riga per ogni nota: un pulsante di eliminazione, quindi il testo della nota
      ...notes.map((note, i) =>
        Box({
          flexDirection: 'row',
          columnGap: 1,
          children: [
            Button({
              // Una key propria, così il pulsante di ogni riga può essere distinto
              key: 'delete-' + i,
              label: 'x',
              plain: true,
              onPress: async () => {
                notes = notes.filter((_, j) => j !== i)
                redraw()
                await $.store.set('notes', notes)
              },
            }),
            Text({ children: [note] }),
          ],
        }),
      ),
    ],
  })
})

let count = 0

on('ui.render', { component: 'Pane' }, async ($, e, next) => {
  if (e.requestId !== 'counter') return next(e)
  const { Box, Text, Button } = $.ui.resolve(e)
  return Box({
    flexDirection: 'row',
    columnGap: 2,
    children: [
      Button({
        key: 'more',
        label: 'Add one',
        onPress: () => {
          count += 1
          // I dati sono cambiati, quindi chiedi a Claude Code di disegnare il riquadro di nuovo
          $.ui.invalidate('ui.render')
        },
      }),
      Text({ children: ['Count: ' + count] }),
    ],
  })
})

on('session.start', async ($, e, next) => {
  // Ogni 1000 millisecondi, chiedi a Claude Code di disegnare di nuovo i tuoi siti
  $.clock.every(1000, () => $.ui.invalidate('ui.render'))
  return next(e)
})

import { atom, read, update } from 'claude-code'

// In cima al modulo: nomina il valore e dai il suo default
const count = atom({ plugin: 'hello-tabs', key: 'count' }, 0)

// Nell'hook ui.render: leggi il valore per disegnarlo
const n = await read($, count)

// In un Button: scrivi un nuovo valore dal vecchio
onPress: () => update($, count, (value) => value + 1)

// Copia il conteggio salvato da $.store in $.state, o 0 se nulla è salvato
async function loadCount($) {
  const saved = Number((await $.store.get('count')) ?? 0)
  await update($, count, () => saved)
}

// Viene eseguito prima del tuo primo prompt, e di nuovo dopo un ricaricamento
on('session.start', async ($, e, next) => {
  await loadCount($)
  return next(e)
})

// Viene eseguito di nuovo dopo /clear, /resume, e /branch, che riporta fork
on('classic.SessionStart', { source: ['clear', 'resume', 'fork'] }, async ($, e, next) => {
  await loadCount($)
  return next(e)
})

onPress: async () => {
  // Leggi quello che lo store contiene ora, che un'altra sessione potrebbe aver cambiato
  const saved = Number((await $.store.get('count')) ?? 0)
  // Salva il nuovo conteggio, quindi mostralo
  await $.store.set('count', saved + 1)
  await update($, count, () => saved + 1)
}