Mod Drawing Surface

Boxes, borders and text

A terminal-flavoured flexbox: direction, wrap, gap, justify and align, fixed or percentage sizes, padding and margin. Boxes take five border styles in any hex colour. Text can be bold, italic, underlined, struck through, inverse or dim, in any foreground and background colour, and can truncate at the start, middle or end.

Hover needs no hook. A keyed Box declares a hover style, and the surface applies it while the pointer is over it. A scope can light a whole group of elements across different sites at once.

Controls with handlers

Buttons, a Select and an Input call back into the hooks module. Here each handler writes an atom, and every drawing that reads that atom redraws. In the recording the primary button was clicked three times. Then "hello from Ghostty" was typed into the field and submitted, and the line under it echoed the text.

Markdown and Code use Claude Code's own renderers, so the mod's output matches the transcript's styling. Code can number lines from any start line, or read the source as a unified diff.

Raster: a cell grid you repaint

A Raster is a fixed box of cells. Each cell is one character with a 24-bit foreground and a 24-bit background. Using the upper half block ▀ turns each cell into two pixels, so a 72×18 Raster is a 72×36 image. A timer calls $.ui.blit with new cells, and the surface repaints at its next frame without redrawing the tree.

• size1–512 columns × 1–256 rows
• cellsbase64 of little-endian u32 triplets: code point, foreground, background
• colour0x00RRGGBB, or bit 24 alone for the terminal default; 1,024 distinct pairs at once
• glyphOne printable width-1 BMP character: blocks, box drawing and braille all work

const words = new Uint32Array(RW * RH * 3)
// for each cell: [▀, top pixel colour, bottom pixel colour]
words[i] = 0x2580; words[i + 1] = top; words[i + 2] = bottom
const cells = new Uint8Array(words.buffer).toBase64()

$.clock.every(66, () =>
  $.ui.blit({ requestId: 'draw-lab', key: 'plasma', cells: plasma(t += 0.066) }))

Image: real pixels

An Image places a picture over a box of cells, scaled to fill it. The terminal draws it with its graphics protocol, so in Ghostty it shows real pixels. On a terminal without one, the required alt text is drawn dim in its place. The Mandelbrot set here is computed in the hooks module as 360×180 RGBA bytes.

• sources{ png }, { rgba, width, height }, a { file } path, or a POSIX shared-memory name
• limitsUp to 255×255 cells, 2048×2048 pixels, 2 MiB of bytes
• videoKeyed, $.ui.blit swaps the source at frame rate. A shared-memory source lets another process stream frames, and no pixels pass through the mod.

Client: a module with its own loop

A Client hands a region to one of the mod's surface modules. That module runs on the drawing thread with local state, its own frame clock, a pointer listener and a key listener. It draws with the same Box and Text elements, and can post data back to the hooks module. Here it runs Conway's Game of Life at about eight generations a second, with no round trip through the hooks module.

• surfacestate, setState, every, onPointer, onKey, post, columns, rows
• pointerCells plus sub-cell fine position; a drag holds the pointer past the edges
• bounds20,000 nodes, 32 deep, 100,000 characters, one second per call; three setState calls in a row with no input unmount it

const LifeView: ClientModule<null, Life> = (_props, surface) => {
  if (surface.state === undefined) {
    surface.setState(fresh())
    surface.every(120, () => surface.setState(step(surface.state)))
    surface.onPointer(ev => { /* paint cells under a drag */ })
  }
  return <Box flexDirection="column">{rows.map(r => <Text>{r}</Text>)}</Box>
}

Restyling Claude Code itself

The same hooks redraw Claude Code's own interface. draw-lab changes four sites and returns next(e) for everything else:

• SpinnerA ◆ and a rainbow verb, plus the live mode: responding, tool-input, tool-use
• ToolUseEach Bash call as a bordered card coloured by state, showing its description and command
• ToolGroupPasses isExpanded: true to next, so grouped Bash calls unfold into ToolUse rows
• TurnDuration◷ 3.8s · Brewed · drawn by draw-lab
• PromptHintThe /draw page list, added after Claude Code's own hint line with tail

/draw skin toggles an atom, and every one of those sites redraws, including rows already in the transcript.