prompt-enhancer

1import type { EngineInterface, Register } from 'claude-code'
2import { protect, restore } from './protect'
3import { SPRITE_H, SPRITE_W, crabSvg } from './sprite'
4
5const MODEL = 'sonnet'
6const KEEP = 'KEEP'
7const ENABLED_KEY = 'enabled'
8
9// Per-file and total caps on the instruction files sent to the enhancer.
10const MAX_FILE_CHARS = 8000
11const MAX_MEMORY_CHARS = 24000
12
13const SYSTEM = `You improve prompts a developer typed into Claude Code, a coding agent working in their project.
14
15Rewrite the prompt into a clearer, more specific, actionable instruction to that agent:
16- Preserve the user's intent and scope exactly. Do not add goals, features, files, libraries, constraints or acceptance criteria the user did not ask for and the project context does not establish.
17- Use the project context (instruction files, skills, tools, recent conversation) only to resolve what the user meant and to follow the project's stated conventions. Mention a skill or tool only when it plainly fits the request.
18- Where something is genuinely ambiguous, say what the agent should check or ask, rather than guessing.
19- Keep it concise: a short paragraph or a few bullet points. Write it as the user, addressed to the agent.
20- Markers like ⟦T1⟧ stand for images, pasted text, links and @-mentions the user attached. Keep every marker exactly as written, each one once, where it belongs in the rewrite. Never invent a marker.
21
22If the prompt is already clear and specific, or is a conversational reply (a yes/no, "continue", a choice between options already offered), output exactly ${KEEP}.
23
24Output only the rewritten prompt or ${KEEP}: no preamble, no quotes, no explanation.`
25
26export const register: Register = on => {
27  on('session.start', async ($, e, next) => {
28    await $.command.register({
29      name: 'enhance',
30      description: 'Show or hide the Enhance prompt button above the prompt',
31      argumentHint: '[on|off]',
32    })
33
34    return next(e)
35  })
36
37  on('command.run', { command: 'enhance' }, async ($, e) => {
38    const arg = e.args.trim().toLowerCase()
39    const isEnabled =
40      arg === 'on' ? true : arg === 'off' ? false : !(await isOn($))
41    await $.store.set(ENABLED_KEY, isEnabled)
42
43    return { text: `Enhance prompt button is ${isEnabled ? 'on' : 'off'}.` }
44  })
45
46  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
47    if (e.props.hasSurvey || !(await isOn($))) return next(e)
48
49    const others = await next(e)
50    const onPress = () => void enhanceDraft($)
51
52    // The terminal draws the crab in a Client region (crab.ts): animated on its
53    // own clock, clicked without a Button's inverse highlight, posting back
54    // through `ui.message`. The caption beside it carries the `e` hotkey.
55    if (e.surface === 'terminal') {
56      const { Box, Button, Client } = $.ui.resolve(e)
57      const columns = Math.max(SPRITE_W + 2, Math.min(CRAB_MAX_COLUMNS, e.props.bodyColumns - 26))
58
59      return Box({
60        flexDirection: 'column',
61        children: [
62          Box({
63            alignItems: 'center',
64            gap: 1,
65            children: [
66              Client({
67                key: CRAB,
68                module: './crab.ts',
69                props: { busy: isBusy, columns, rows: CRAB_ROWS },
70                width: columns,
71                height: CRAB_ROWS,
72              }),
73              Button({
74                key: 'enhance',
75                plain: true,
76                hotkey: 'e',
77                dimColor: true,
78                label: isBusy ? 'reading your prompt…' : TOOLTIP,
79                onPress,
80              }),
81            ],
82          }),
83          ...(others ? [others] : []),
84        ],
85      })
86    }
87
88    // Desktop, the editor and mobile draw the same crab as an animated SVG
89    // beside the button; the SVG takes no press, so the button is clicked.
90    const { Box, Button, Svg } = $.ui.resolve(e)
91    const svg = isBusy ? BUSY_SVG : IDLE_SVG
92
93    return Box({
94      flexDirection: 'column',
95      children: [
96        Box({
97          key: 'enhance-scope',
98          alignItems: 'center',
99          gap: 1,
100          children: [
101            Svg({ source: svg.source, alt: TOOLTIP, width: svg.width, height: svg.height, isInteractive: true }),
102            Button({
103              key: 'enhance',
104              variant: 'primary',
105              hotkey: 'e',
106              label: isBusy ? 'Reading your prompt…' : TOOLTIP,
107              hover: { bold: true },
108              onPress,
109            }),
110          ],
111        }),
112        ...(others ? [others] : []),
113      ],
114    })
115  })
116
117  // A click on the terminal crab: the Client posts, and it enhances as the
118  // button does. The data came from code, so only the one known shape counts.
119  on('ui.message', async ($, e, next) => {
120    const data = e.data as { action?: unknown } | null
121    if (e.element === CRAB && typeof data === 'object' && data?.action === 'enhance') {
122      void enhanceDraft($)
123    }
124
125    return next(e)
126  })
127}
128
129const TOOLTIP = 'Enhance my prompt'
130const CRAB = 'crab'
131const CRAB_ROWS = 6
132const CRAB_MAX_COLUMNS = 56
133const SVG_SCALE = 3
134const svgOf = (busy: boolean) => ({
135  source: crabSvg(TOOLTIP, busy, SVG_SCALE),
136  width: (SPRITE_W + (busy ? 0 : 20)) * SVG_SCALE,
137  height: SPRITE_H * SVG_SCALE,
138})
139const IDLE_SVG = svgOf(false)
140const BUSY_SVG = svgOf(true)
141
142// True while an enhancement runs, so the button can say so and not run twice.
143let isBusy = false
144
145// Enhances what is in the prompt box and puts the result back; never sends.
146// The flag is claimed before the first await, so a quick second press (a
147// double click) is ignored rather than starting a second request.
148async function enhanceDraft($: EngineInterface): Promise<void> {
149  if (isBusy) return
150  isBusy = true
151  $.ui.invalidate('ui.render')
152  try {
153    await enhanceDraftOnce($)
154  } finally {
155    isBusy = false
156    $.ui.invalidate('ui.render')
157  }
158}
159
160async function enhanceDraftOnce($: EngineInterface): Promise<void> {
161  const before = await $.prompt.read()
162  const text = before.text.trim()
163  if (text === '') {
164    $.ui.toast('Type a prompt first, then press Enhance prompt.')
165
166    return
167  }
168
169  // Attachments, links and mentions ride through the model as markers, so the
170  // rewrite cannot alter or detach them.
171  const guarded = protect(text)
172  let enhanced: string | undefined
173  try {
174    enhanced = await enhance($, guarded.text)
175  } catch {
176    // A request the engine refuses to send rejects; treat it as no rewrite.
177    enhanced = undefined
178  }
179
180  if (enhanced === undefined) {
181    $.ui.toast('Could not enhance this prompt; it was left as typed.')
182
183    return
184  }
185  const restored = enhanced === KEEP ? undefined : restore(enhanced, guarded.tokens)
186  if (restored === undefined || restored.text === text) {
187    $.ui.toast('This prompt is already clear; it was left as typed.')
188
189    return
190  }
191  // Keep anything typed while the model ran: replace only the text we read.
192  if ((await $.prompt.read()).text !== before.text) {
193    $.ui.toast('The prompt changed while enhancing; it was left as you typed it.')
194
195    return
196  }
197  const filled = await $.prompt.fill({ text: restored.text, mode: 'replace' })
198  if (!filled.isFilled) {
199    $.ui.toast('Could not put the enhanced prompt in the box.')
200  } else if (restored.readded > 0) {
201    $.ui.toast(`Enhanced. ${restored.readded} attachment(s) or link(s) the rewrite left out were added back at the end.`)
202  }
203}
204
205async function isOn($: EngineInterface): Promise<boolean> {
206  return (await $.store.get(ENABLED_KEY)) !== false
207}
208
209async function enhance(
210  $: EngineInterface,
211  text: string,
212  signal?: AbortSignal,
213): Promise<string | undefined> {
214  const context = await gatherContext($)
215  const reply = await $.model.complete(
216    {
217      model: MODEL,
218      system: SYSTEM,
219      prompt: `${context}\n\n<prompt>\n${text}\n</prompt>`,
220      maxTokens: 2000,
221      effort: 'low',
222      timeoutMs: 45000,
223    },
224    { signal },
225  )
226
227  if (!reply.isAnswered) return undefined
228  const out = reply.text.trim()
229
230  return out === '' ? undefined : out
231}
232
233async function gatherContext($: EngineInterface): Promise<string> {
234  const parts: string[] = [`<cwd>${await $.session.cwd()}</cwd>`]
235
236  const usage = await $.session.usage({ breakdown: 'summary' }).catch(() => undefined)
237  const breakdown = usage?.context.breakdown
238
239  let budget = MAX_MEMORY_CHARS
240  for (const file of breakdown?.memoryFiles ?? []) {
241    if (budget <= 0) break
242    const body = await $.fs.read(file.path).catch(() => '')
243    if (body.trim() === '') continue
244    const clipped = body.slice(0, Math.min(MAX_FILE_CHARS, budget))
245    budget -= clipped.length
246    parts.push(`<instructions path="${file.path}">\n${clipped}\n</instructions>`)
247  }
248
249  const skills = breakdown?.skills?.skillFrontmatter.map(s => s.name) ?? []
250  if (skills.length > 0) parts.push(`<skills>${skills.join(', ')}</skills>`)
251
252  const tools = await $.tool.list().catch(() => [])
253  if (tools.length > 0) {
254    // Built-in tools with a line each; MCP tools by name only, as there can be hundreds.
255    const lines = tools
256      .filter(t => !t.mcp)
257      .map(t => `- ${t.name}: ${firstSentence(t.description)}`)
258    const mcp = tools.filter(t => t.mcp).map(t => t.name)
259    if (mcp.length > 0) lines.push(`- MCP tools: ${mcp.slice(0, 200).join(', ')}`)
260    parts.push(`<tools>\n${lines.join('\n')}\n</tools>`)
261  }
262
263  const messages = await $.session.messages().catch(() => [])
264  if (Array.isArray(messages) && messages.length > 0) {
265    const recent = messages
266      .slice(-6)
267      .filter(m => m.text.trim() !== '')
268      .map(m => `${m.role}: ${m.text.slice(0, 800)}`)
269    if (recent.length > 0) {
270      parts.push(`<recent_conversation>\n${recent.join('\n\n')}\n</recent_conversation>`)
271    }
272  }
273
274  return parts.join('\n\n')
275}
276
277function firstSentence(text: string): string {
278  const line = text.split('\n')[0] ?? ''
279  const end = line.search(/\.\s/)
280
281  return (end === -1 ? line : line.slice(0, end + 1)).slice(0, 160)
282}
283

1// Keeps what the person attached to a prompt (pasted images and text, which
2// the prompt box holds as `[Image #1]`-style tokens tied to the attachment,
3// links, @-mentions) exactly as typed through a rewrite: each is swapped for a
4// numbered marker before the model sees the prompt and put back after.
5
6// `[Image #1]`, `[Pasted text #2 +40 lines]` and the like; links; @mentions.
7const TOKEN = /\[[^[\]\n]*#\d+[^[\]\n]*\]|\b(?:https?|file|ftp):\/\/[^\s<>"'`)\]]+|(?<=^|\s)@[^\s]+/g
8const MARKER = /⟦T(\d+)⟧/g
9
10export type Protected = { text: string; tokens: string[] }
11
12/** The prompt with each attachment, link and mention swapped for ⟦T1⟧, ⟦T2⟧…. */
13export function protect(text: string): Protected {
14  const tokens: string[] = []
15  const swapped = text.replace(TOKEN, token => {
16    tokens.push(token)
17
18    return `⟦T${tokens.length}⟧`
19  })
20
21  return { text: swapped, tokens }
22}
23
24export type Restored = { text: string; readded: number }
25
26/**
27 * The rewrite with every marker put back as its original, once each. A marker
28 * the model invented is dropped; one it lost is added back on a last line, so
29 * nothing the person attached goes missing.
30 */
31export function restore(rewrite: string, tokens: string[]): Restored {
32  const seen = new Set<number>()
33  let text = rewrite.replace(MARKER, (_, n: string) => {
34    const i = Number(n) - 1
35    const token = tokens[i]
36    if (token === undefined || seen.has(i)) return ''
37    seen.add(i)
38
39    return token
40  })
41  const missing = tokens.filter((_, i) => !seen.has(i))
42  if (missing.length > 0) text = `${text.trimEnd()}\n\n${missing.join(' ')}`
43
44  return { text: text.replace(/[ \t]+\n/g, '\n').trim(), readded: missing.length }
45}
46

1// The librarian Clawd: Claude Code's classic 8-bit crab (square body, small
2// eyes, arms out, four legs) in a little librarian's cap, carrying a book,
3// drawn pose by pose so it can walk, blink, wave and read. The terminal draws
4// its pixels as half-block cells (crab.ts), every other surface as an animated
5// SVG (crabSvg); both come from drawCrab.
6
7export const SPRITE_W = 16
8export const SPRITE_H = 10
9
10const C = {
11  body: '#D97757',
12  shade: '#B9583B',
13  eye: '#1A1412',
14  cap: '#7A3B5E',
15  band: '#5A2A45',
16  gold: '#E8C15A',
17  cover: '#3E6AA8',
18  spine: '#294B7E',
19  page: '#F5EEDC',
20  ink: '#B7AA90',
21} as const
22
23/** Rows of pixels, `undefined` clear. */
24export type Pixels = (string | undefined)[][]
25
26export type Pose = {
27  /** Which pair of legs is lifted mid-step; absent, all four stand. */
28  legs?: 0 | 1
29  blink?: boolean
30  /** Where the eyes look, left to right. */
31  look?: -1 | 0 | 1
32  /** The free claw raised in a hello. */
33  wave?: boolean
34  /** The book held open in front, read; `page` is a page mid-turn. */
35  reading?: boolean
36  page?: 0 | 1 | 2
37}
38
39export function blank(width: number, height: number): Pixels {
40  return Array.from({ length: height }, () => Array<string | undefined>(width).fill(undefined))
41}
42
43export function drawCrab(pose: Pose = {}): Pixels {
44  const px = blank(SPRITE_W, SPRITE_H)
45  const rect = (x: number, y: number, w: number, h: number, c: string | undefined) => {
46    for (let j = y; j < y + h; j++) {
47      const row = px[j]
48      if (!row) continue
49      for (let i = x; i < x + w; i++) if (i >= 0 && i < SPRITE_W) row[i] = c
50    }
51  }
52  const dot = (x: number, y: number, c: string | undefined) => rect(x, y, 1, 1, c)
53  const X = 1 // the body's left edge, leaving room for a raised claw
54  const Y = 2 // the body's top row, under the cap
55
56  // Four legs; mid-step, every other one is a pixel shorter.
57  ;[X + 2, X + 4, X + 7, X + 9].forEach((x, i) => {
58    rect(x, Y + 6, 1, pose.legs !== undefined && i % 2 === pose.legs ? 1 : 2, C.body)
59  })
60
61  // The square body, arms straight out, a shade along the bottom.
62  rect(X + 2, Y, 8, 6, C.body)
63  rect(X, Y + 3, 12, 2, C.body)
64  rect(X + 2, Y + 5, 8, 1, C.shade)
65  dot(X + 9, Y + 5, C.shade)
66
67  // A hello: the left arm up instead of out.
68  if (pose.wave) {
69    rect(X, Y + 3, 2, 2, undefined)
70    rect(X, Y, 2, 3, C.body)
71  }
72
73  // Small eyes, one pixel wide.
74  const look = pose.look ?? 0
75  for (const ex of [X + 3, X + 8]) {
76    if (pose.blink) dot(ex + look, Y + 2, C.eye)
77    else rect(ex + look, Y + 1, 1, 2, C.eye)
78  }
79
80  // The librarian's cap with a gold button.
81  rect(X + 3, Y - 2, 6, 1, C.cap)
82  rect(X + 2, Y - 1, 8, 1, C.band)
83  dot(X + 5, Y - 2, C.gold)
84
85  if (pose.reading) {
86    // The book open in front, held by both claws, a page turning.
87    rect(X + 2, Y + 3, 4, 2, C.page)
88    rect(X + 6, Y + 3, 4, 2, C.page)
89    rect(X + 1, Y + 5, 10, 1, C.cover)
90    rect(X + 3, Y + 3, 2, 1, C.ink)
91    rect(X + 7, Y + 3, 2, 1, C.ink)
92    if (pose.page === 1) rect(X + 6, Y + 4, 3, 1, C.ink)
93    if (pose.page === 2) rect(X + 3, Y + 4, 3, 1, C.ink)
94  } else {
95    // The book carried in the right claw: cover, spine, gold label, pages.
96    rect(X + 12, Y + 1, 3, 4, C.cover)
97    rect(X + 12, Y + 1, 1, 4, C.spine)
98    dot(X + 13, Y + 2, C.gold)
99    rect(X + 13, Y + 5, 2, 1, C.page)
100  }
101
102  return px
103}
104
105/** One terminal cell: a glyph, its color and the color behind it. */
106export type Cell = { ch: string; fg?: string; bg?: string; bold?: boolean }
107
108/**
109 * Pixels as half-block cells, two pixel rows to a text row: `▀` paints the
110 * top pixel over the bottom one as the background, `▄` the bottom alone.
111 */
112export function halfBlocks(px: Pixels): Cell[][] {
113  const width = Math.max(0, ...px.map(row => row.length))
114  const rows: Cell[][] = []
115  for (let y = 0; y < px.length; y += 2) {
116    const cells: Cell[] = []
117    for (let x = 0; x < width; x++) {
118      const top = px[y]?.[x]
119      const bottom = px[y + 1]?.[x]
120      if (top === undefined && bottom === undefined) cells.push({ ch: ' ' })
121      else if (top === undefined) cells.push({ ch: '▄', fg: bottom })
122      else if (bottom === undefined) cells.push({ ch: '▀', fg: top })
123      else if (top === bottom) cells.push({ ch: '█', fg: top })
124      else cells.push({ ch: '▀', fg: top, bg: bottom })
125    }
126    rows.push(cells)
127  }
128
129  return rows
130}
131
132/** Copies `sprite` onto `canvas` at (x, y), its clear pixels left alone. */
133export function stamp(canvas: Pixels, sprite: Pixels, x: number, y: number): void {
134  sprite.forEach((row, j) =>
135    row.forEach((c, i) => {
136      const target = canvas[y + j]
137      if (c !== undefined && target && x + i >= 0 && x + i < target.length) target[x + i] = c
138    }),
139  )
140}
141
142// Pixels as SVG rects, each horizontal run of one color one rect.
143function rects(px: Pixels): string {
144  const out: string[] = []
145  px.forEach((row, y) => {
146    let x = 0
147    while (x < row.length) {
148      const c = row[x]
149      let end = x + 1
150      while (end < row.length && row[end] === c) end++
151      if (c !== undefined) out.push(`<rect x="${x}" y="${y}" width="${end - x}" height="1" fill="${c}"/>`)
152      x = end
153    }
154  })
155
156  return out.join('')
157}
158
159// A flip-book of `frames`, each shown for `ms` in turn, as CSS keyframes.
160function flipBook(frames: Pixels[], ms: number, name: string): { css: string; svg: string } {
161  const n = frames.length
162  const pct = (k: number) => `${((100 * k) / n).toFixed(3)}%`
163  const css = frames
164    .map(
165      (_, k) =>
166        `@keyframes ${name}${k}{0%{opacity:${k === 0 ? 1 : 0}}${pct(k)}{opacity:1}${pct(k + 1)}{opacity:0}}` +
167        `.${name}${k}{opacity:0;animation:${name}${k} ${n * ms}ms steps(1,end) infinite}`,
168    )
169    .join('')
170  const svg = frames.map((f, k) => `<g class="f ${name}${k}">${rects(f)}</g>`).join('')
171
172  return { css, svg }
173}
174
175/**
176 * The crab as an animated SVG: strolling back and forth, stepping and
177 * blinking while idle and stopping to wave while hovered; reading its book,
178 * eyes moving and pages turning, while `busy`.
179 */
180export function crabSvg(title: string, busy: boolean, scale = 3): string {
181  const walk = busy ? 0 : 20
182  const width = SPRITE_W + walk
183  const step = (legs: 0 | 1, blink = false) => drawCrab({ legs, blink })
184  const book = busy
185    ? flipBook(
186        [
187          drawCrab({ reading: true, look: -1 }),
188          drawCrab({ reading: true, look: 0 }),
189          drawCrab({ reading: true, look: 1, page: 1 }),
190          drawCrab({ reading: true, look: 1, page: 2 }),
191          drawCrab({ reading: true, look: 0, blink: true }),
192        ],
193        320,
194        'r',
195      )
196    : flipBook([step(0), step(1), step(0), step(1), step(0), step(1), step(0, true), step(1)], 180, 'w')
197  const hello = busy ? '' : `<g class="hi">${rects(drawCrab({ wave: true, look: -1 }))}</g>`
198  const css = [
199    book.css,
200    busy ? '' : `.walk{animation:walk 7s ease-in-out infinite alternate}@keyframes walk{to{transform:translateX(${walk}px)}}`,
201    '.hi{opacity:0}',
202    'svg:hover .walk,svg:hover .f{animation-play-state:paused}',
203    busy ? '' : 'svg:hover .frames{opacity:0}svg:hover .hi{opacity:1}',
204  ].join('')
205
206  return [
207    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${SPRITE_H}"`,
208    ` width="${width * scale}" height="${SPRITE_H * scale}" shape-rendering="crispEdges">`,
209    `<title>${title}</title><style>${css}</style>`,
210    `<g class="walk"><g class="frames">${book.svg}</g>${hello}</g></svg>`,
211  ].join('')
212}
213

1// The terminal's librarian crab: a Client surface module, so it animates on
2// the frame clock and takes clicks without being a Button (a Button inverts
3// under the pointer). It strolls while waiting, stops to wave when hovered,
4// and reads its book while `busy`. A click on it posts `{ action: 'enhance' }`.
5import type { ClientModule, ClientSurface } from 'claude-code'
6import { SPRITE_H, SPRITE_W, blank, drawCrab, halfBlocks, stamp } from './sprite'
7import type { Cell, Pixels, Pose } from './sprite'
8
9export type CrabProps = { busy: boolean; columns: number; rows: number }
10type CrabState = { t: number; x: number; dir: 1 | -1; rest: number; hover: boolean; down: boolean }
11
12const TICK_MS = 110
13const BUBBLE = '‹ Enhance my prompt!'
14const INITIAL: CrabState = { t: 0, x: 0, dir: 1, rest: 0, hover: false, down: false }
15
16// The latest props per instance, for the clock's callback (it outlives a call).
17const latest = new WeakMap<object, CrabProps>()
18
19const Crab: ClientModule<CrabProps, CrabState> = (props, surface) => {
20  latest.set(surface, props)
21  if (surface.state === undefined) start(surface)
22  const s = surface.state ?? INITIAL
23  const { Box, Text } = surface.elements
24  const width = Math.max(SPRITE_W, surface.columns || props.columns)
25  const rows = Math.max(Math.ceil(SPRITE_H / 2), surface.rows || props.rows)
26
27  const canvas = blank(width, rows * 2)
28  const x = Math.min(s.x, width - SPRITE_W)
29  const sprite = drawCrab(poseOf(s, props.busy))
30  stamp(canvas, !props.busy && !s.hover && s.dir < 0 ? mirror(sprite) : sprite, x, rows * 2 - SPRITE_H)
31  const cells = halfBlocks(canvas)
32
33  if (props.busy) {
34    // Sparkles over the head while it reads.
35    const twinkle = (s.t >> 2) % 2 === 0
36    write(cells, 0, x + (twinkle ? 2 : 12), twinkle ? '+' : '·', '#E8C15A')
37    write(cells, 0, x + (twinkle ? 13 : 4), twinkle ? '·' : '+', '#E8C15A')
38  } else if (s.hover) {
39    // The tooltip, as a speech bubble beside the crab.
40    const right = x + SPRITE_W + 1
41    const at = right + BUBBLE.length <= width ? right : Math.max(0, x - BUBBLE.length - 1)
42    const text = right + BUBBLE.length <= width ? BUBBLE : `${BUBBLE.slice(2)} ›`
43    write(cells, Math.max(0, rows - 4), at, text, '#EB9A7E', true)
44  }
45
46  return Box({
47    flexDirection: 'column',
48    children: cells.map(row => Text({ children: runs(row).map(run => draw(Text, run)) })),
49  })
50}
51
52export default Crab
53
54function start(surface: ClientSurface<CrabState>): void {
55  surface.setState(INITIAL)
56  surface.every(TICK_MS, () => {
57    const s = surface.state
58    const props = latest.get(surface)
59    if (s && props) surface.setState(tick(s, props, surface.columns || props.columns))
60  })
61  surface.onPointer(e => {
62    const s = surface.state ?? INITIAL
63    const props = latest.get(surface)
64    const width = surface.columns || props?.columns || SPRITE_W
65    const left = Math.min(s.x, width - SPRITE_W)
66    const isOver = e.x >= left && e.x < left + SPRITE_W && e.y >= 0
67    if (e.type === 'down') {
68      if (e.button === 'left' && isOver) surface.setState({ ...s, down: true, hover: true })
69    } else if (e.type === 'up') {
70      if (s.down) {
71        surface.setState({ ...s, down: false })
72        if (isOver) surface.post({ action: 'enhance' })
73      }
74    } else if (e.type === 'leave') {
75      if (s.hover || s.down) surface.setState({ ...s, hover: false, down: false })
76    } else if (isOver !== s.hover) {
77      surface.setState({ ...s, hover: isOver })
78    }
79  })
80  surface.onKey(e => {
81    if (e.key === 'return' || e.key === ' ') surface.post({ action: 'enhance' })
82  })
83}
84
85// One step of the clock: stroll a column every other tick, pausing to look
86// around at each end and now and then on the way; stand still while hovered
87// or reading.
88function tick(s: CrabState, props: CrabProps, width: number): CrabState {
89  const t = s.t + 1
90  if (props.busy || s.hover) return { ...s, t }
91  if (s.rest > 0) return { ...s, t, rest: s.rest - 1 }
92  if (t % 2 === 1) return { ...s, t }
93  const maxX = Math.max(0, width - SPRITE_W)
94  const x = Math.min(maxX, Math.max(0, s.x + s.dir))
95  if (x === 0 || x === maxX) return { ...s, t, x, dir: x === 0 ? 1 : -1, rest: 14 }
96
97  return { ...s, t, x, rest: t % 90 === 0 ? 12 : 0 }
98}
99
100function poseOf(s: CrabState, busy: boolean): Pose {
101  const blink = s.t % 32 === 0
102  if (busy) {
103    const look = ([-1, 0, 1, 0] as const)[(s.t >> 2) % 4]
104    const page = ((s.t >> 3) % 3) as 0 | 1 | 2
105
106    return { reading: true, look, page, blink }
107  }
108  if (s.hover) return { wave: (s.t >> 2) % 2 === 0, look: -1, blink }
109  if (s.rest > 0) return { look: ([-1, 0, 1, 0] as const)[(s.t >> 3) % 4], blink }
110
111  return { legs: ((s.t >> 1) % 2) as 0 | 1, look: 1, blink }
112}
113
114function mirror(px: Pixels): Pixels {
115  return px.map(row => [...row].reverse())
116}
117
118function write(cells: Cell[][], row: number, col: number, text: string, color: string, bold = false): void {
119  const line = cells[row]
120  if (!line) return
121  ;[...text].forEach((ch, i) => {
122    if (col + i >= 0 && col + i < line.length) line[col + i] = { ch, fg: color, bold }
123  })
124}
125
126// Adjacent cells drawn alike, merged into one run.
127function runs(row: Cell[]): Cell[] {
128  const out: Cell[] = []
129  for (const cell of row) {
130    const last = out[out.length - 1]
131    if (last && last.fg === cell.fg && last.bg === cell.bg && !!last.bold === !!cell.bold) last.ch += cell.ch
132    else out.push({ ...cell })
133  }
134
135  return out
136}
137
138function draw(Text: ClientSurface['elements']['Text'], run: Cell) {
139  if (run.fg === undefined && run.bg === undefined) return run.ch
140
141  return Text({
142    ...(run.fg === undefined ? {} : { color: run.fg }),
143    ...(run.bg === undefined ? {} : { backgroundColor: run.bg }),
144    ...(run.bold ? { bold: true } : {}),
145    children: [run.ch],
146  })
147}
148