Menggambar di antarmuka dengan mod

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

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

// Nilai yang berarti "gunakan warna default terminal"
const DEFAULT_COLOR = 0x01000000

// Kemasan baris pasangan [karakter, warna] ke dalam satu string yang diambil Raster
// Satu sel adalah tiga angka: titik kode karakter, warnanya, dan warna latar belakangnya
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) => {
  // Gambar hanya di panel yang dibuka dengan id 'heat'
  if (e.requestId !== 'heat') return next(e)
  const { Box, Text, Raster } = $.ui.resolve(e)
  // Dua baris tiga sel, masing-masing karakter blok dan warnanya
  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 │
╰──────────────────────────────────────────────────────────╯

// Daftar yang digambar panel
let notes = []

on('ui.render', { component: 'Pane' }, async ($, e, next) => {
  // Gambar hanya di panel yang dibuka dengan 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',
        // Gambar bidang kosong setiap kali, yang menghapusnya setelah submit
        value: '',
        submitLabel: 'add',
        autoFocus: true,
        // Berjalan saat Anda menekan Enter di bidang
        onSubmit: async (value) => {
          // Abaikan baris kosong
          if (!value.trim()) return
          notes = [...notes, value.trim()]
          redraw()
          await $.store.set('notes', notes)
        },
      }),
      // Satu baris untuk setiap catatan: tombol hapus, kemudian teks catatan
      ...notes.map((note, i) =>
        Box({
          flexDirection: 'row',
          columnGap: 1,
          children: [
            Button({
              // Kunci miliknya sendiri, jadi setiap tombol baris dapat dibedakan
              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
          // Data berubah, jadi minta Claude Code menggambar panel lagi
          $.ui.invalidate('ui.render')
        },
      }),
      Text({ children: ['Count: ' + count] }),
    ],
  })
})

on('session.start', async ($, e, next) => {
  // Setiap 1000 milidetik, minta Claude Code menggambar situs Anda lagi
  $.clock.every(1000, () => $.ui.invalidate('ui.render'))
  return next(e)
})

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

// Di atas modul: beri nama nilai dan berikan defaultnya
const count = atom({ plugin: 'hello-tabs', key: 'count' }, 0)

// Dalam hook ui.render: baca nilai untuk menggambarnya
const n = await read($, count)

// Dalam Tombol: tulis nilai baru dari yang lama
onPress: () => update($, count, (value) => value + 1)

// Salin hitungan yang disimpan dari $.store ke dalam $.state, atau 0 jika tidak ada yang disimpan
async function loadCount($) {
  const saved = Number((await $.store.get('count')) ?? 0)
  await update($, count, () => saved)
}

// Berjalan sebelum prompt pertama Anda, dan lagi setelah reload
on('session.start', async ($, e, next) => {
  await loadCount($)
  return next(e)
})

// Berjalan lagi setelah /clear, /resume, dan /branch, yang melaporkan fork
on('classic.SessionStart', { source: ['clear', 'resume', 'fork'] }, async ($, e, next) => {
  await loadCount($)
  return next(e)
})

onPress: async () => {
  // Baca apa yang disimpan sekarang, yang sesi lain mungkin telah ubah
  const saved = Number((await $.store.get('count')) ?? 0)
  // Simpan hitungan baru, kemudian tampilkan
  await $.store.set('count', saved + 1)
  await update($, count, () => saved + 1)
}