使用 mod 在介面中繪製

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

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

// 表示「使用終端的預設顏色」的值
const DEFAULT_COLOR = 0x01000000

// 將 [character, color] 對的列打包到 Raster 採用的一個字串中
// 一個儲存格是三個數字：字元的程式碼點、其顏色和其背景
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)
  // 三個儲存格的兩列，每個都是一個區塊字元及其顏色
  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)
        },
      }),
      // 每個筆記一列：刪除按鈕，然後是筆記的文字
      ...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)
}