モッドでインターフェースに描画する

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

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

// 「ターミナルのデフォルト色を使用」を意味する値
const DEFAULT_COLOR = 0x01000000

// [文字、色] ペアの行を Raster が取る 1 つの文字列にパック
// 1 つのセルは 3 つの数字です。文字のコードポイント、その色、背景色
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) => {
  // id が 'heat' のペインでのみ描画
  if (e.requestId !== 'heat') return next(e)
  const { Box, Text, Raster } = $.ui.resolve(e)
  // 3 つのセルの 2 行。各セルはブロック文字とその色
  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 │
╰──────────────────────────────────────────────────────────╯

// ペインが描画するリスト
let notes = []

on('ui.render', { component: 'Pane' }, async ($, e, next) => {
  // 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',
        // 毎回フィールドを空で描画します。これは送信後にクリアします
        value: '',
        submitLabel: 'add',
        autoFocus: true,
        // フィールドで Enter を押すときに実行
        onSubmit: async (value) => {
          // 空の行を無視
          if (!value.trim()) return
          notes = [...notes, value.trim()]
          redraw()
          await $.store.set('notes', notes)
        },
      }),
      // 各ノートに対して 1 行。削除ボタン、その後ノートのテキスト
      ...notes.map((note, i) =>
        Box({
          flexDirection: 'row',
          columnGap: 1,
          children: [
            Button({
              // 独自のキー。各行のボタンを区別できるように
              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
          // データが変更されたため、Claude Code にペインを再度描画するよう要求
          $.ui.invalidate('ui.render')
        },
      }),
      Text({ children: ['Count: ' + count] }),
    ],
  })
})

on('session.start', async ($, e, next) => {
  // 1000 ミリ秒ごとに、Claude Code にサイトを再度描画するよう要求
  $.clock.every(1000, () => $.ui.invalidate('ui.render'))
  return next(e)
})

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

// モジュールの最上部：値に名前を付け、デフォルトを指定します
const count = atom({ plugin: 'hello-tabs', key: 'count' }, 0)

// ui.render フック内：値を読み取って描画します
const n = await read($, count)

// ボタン内：古い値から新しい値を書き込みます
onPress: () => update($, count, (value) => value + 1)

// 保存されたカウントを $.store から $.state にコピーするか、何も保存されていない場合は 0
async function loadCount($) {
  const saved = Number((await $.store.get('count')) ?? 0)
  await update($, count, () => saved)
}

// 最初のプロンプトの前に実行され、リロード後に再度実行されます
on('session.start', async ($, e, next) => {
  await loadCount($)
  return next(e)
})

// /clear、/resume、/branch の後に再度実行されます。fork を報告します
on('classic.SessionStart', { source: ['clear', 'resume', 'fork'] }, async ($, e, next) => {
  await loadCount($)
  return next(e)
})

onPress: async () => {
  // ストアが現在保持しているものを読み取ります。別のセッションが変更した可能性があります
  const saved = Number((await $.store.get('count')) ?? 0)
  // 新しいカウントを保存し、それを表示します
  await $.store.set('count', saved + 1)
  await update($, count, () => saved + 1)
}