pixel

1import type { Register } from 'claude-code'
2
3const TOOL = 'mcp__pixel__pixel'
4
5// A pixel file: { w, h, pixels: ["rrggbb", ...] } row-major, h even
6type Pic = { w: number; h: number; pixels: string[] }
7type Shown = { title: string; path: string }
8
9const toBase64 = (words: Uint32Array) =>
10  (new Uint8Array(words.buffer) as unknown as { toBase64: () => string }).toBase64()
11
12// Two image rows per terminal row: upper half block, fg = top pixel, bg = bottom pixel
13const cellsOf = (p: Pic) => {
14  const rows = Math.ceil(p.h / 2)
15  const words = new Uint32Array(p.w * rows * 3)
16  const at = (x: number, y: number) => (y < p.h ? parseInt(p.pixels[y * p.w + x] ?? '000000', 16) : 0x01000000)
17  for (let r = 0; r < rows; r++) {
18    for (let x = 0; x < p.w; x++) {
19      const i = (r * p.w + x) * 3
20      words[i] = 0x2580
21      words[i + 1] = at(x, r * 2)
22      words[i + 2] = at(x, r * 2 + 1)
23    }
24  }
25  return { cols: p.w, rows, cells: toBase64(words) }
26}
27
28const parseShown = (out: unknown): Shown | null => {
29  const text = typeof out === 'string' ? out
30    : Array.isArray(out) ? out.map(b => (b && typeof b === 'object' && 'text' in b ? String((b as { text: unknown }).text) : '')).join('')
31    : ''
32  try {
33    const s = JSON.parse(text) as Shown
34    return typeof s.path === 'string' ? s : null
35  } catch {
36    return null
37  }
38}
39
40export const register: Register = on => {
41  on('session.start', async ($, e, next) => {
42    await $.tool.register({
43      name: 'pixel',
44      description:
45        'Draw a pixel-art image inline in the chat from a pixel file: JSON {w, h, pixels: ["rrggbb", ...]} row-major. ' +
46        'Make the file first (e.g. with Python Pillow: resize to <= 100 px wide, quantize), then call this with its absolute path.',
47      inputSchema: {
48        type: 'object',
49        properties: { path: { type: 'string' }, title: { type: 'string' } },
50        required: ['path'],
51      },
52    })
53    return next(e)
54  })
55
56  on('tool.call', { tool: TOOL }, async ($, e) => {
57    const input = e as unknown as Partial<Shown>
58    const path = String(input.path ?? '')
59    const text = await $.fs.read(path).catch(() => '')
60    try {
61      const p = JSON.parse(text) as Pic
62      if (!(p.w > 0 && p.h > 0 && Array.isArray(p.pixels) && p.pixels.length >= p.w * p.h)) throw new Error('shape')
63      if (p.w > 200) return { deny: 'pixel: keep images at most 200 pixels wide.' }
64    } catch {
65      return { deny: `pixel: ${path} is not a pixel file ({w, h, pixels}).` }
66    }
67    return { result: JSON.stringify({ title: String(input.title ?? ''), path }) }
68  })
69
70  on('ui.render', { component: 'ToolResult' }, async ($, e, next) => {
71    if (e.props.tool !== TOOL || e.props.isErrored || e.surface !== 'terminal') return next(e)
72    const s = parseShown(e.props.output)
73    if (!s) return next(e)
74    const text = await $.fs.read(s.path).catch(() => '')
75    let pic: Pic
76    try {
77      pic = JSON.parse(text) as Pic
78    } catch {
79      return next(e)
80    }
81    const { Box, Text, Raster } = $.ui.resolve(e)
82    const g = cellsOf(pic)
83    return (
84      <Box flexDirection="column">
85        {s.title ? <Text bold>{s.title}</Text> : null}
86        <Raster key={`px-${e.props.tool_use_id}`} columns={g.cols} rows={g.rows} cells={g.cells} />
87      </Box>
88    )
89  })
90}
91