pet-widget

1import { atom, read, update } from 'claude-code'
2import type { Elements, EngineInterface, Register, RenderElement, RenderSurface, Timer } from 'claude-code'
3
4import type { WidgetsPlace } from 'widgets'
5
6import type { PetMemory, PetMood, PetStatus } from '../types'
7
8type Tags = Pick<Elements[RenderSurface], 'Box' | 'Text'>
9
10const PANE = 'widgets'
11const CARD_COLUMNS = 40
12const TICK_MS = 600
13const FLASH_MS = 6000
14const SLEEPY_MS = 90_000
15const HOT_PERCENT = 80
16const MOODS: readonly string[] = ['sleep', 'idle', 'work', 'happy', 'dizzy', 'hot']
17const CHECKS = /\b(test|tests|pytest|jest|vitest|tsc|lint|build|check)\b/
18const RESTING: PetStatus = { isWorking: false, isHot: false, activeAt: 0, calls: 0, forced: null }
19const CLAWS = [
20  [
21    '..oooo................oooo..',
22    '.oo..oo..............oo..oo.',
23  ],
24  [
25    '..oooo................oooo..',
26    '.oooooo..............oooooo.',
27  ],
28] as const
29const BODY = [
30  '.oooooo...ee....ee...oooooo.',
31  '..dooo....ep....pe....oood..',
32  '...doo....oo....oo....ood...',
33  '....dooolllllllllllloood....',
34  '.....oooooooooooooooooo.....',
35  '.....oooooommmmmmoooooo.....',
36  '.....dooooooooooooooood.....',
37  '......dddddddddddddddd......',
38]
39const LEGS = [
40  [
41    '....oo..oo........oo..oo....',
42    '...oo..oo..........oo..oo...',
43  ],
44  [
45    '.....oo.oo........oo.oo.....',
46    '....oo..oo........oo..oo....',
47  ],
48] as const
49const SAYS: Record<PetMood, string> = {
50  sleep: 'zzz',
51  idle: 'waiting for you',
52  work: 'working…',
53  happy: 'checks passed!',
54  dizzy: 'ouch',
55  hot: 'context is filling up',
56}
57const POLL_TICKS = 5
58const SAY_MS = 12_000
59const HOUR_MS = 60 * 60_000
60const DAY_MS = 24 * HOUR_MS
61const LONG_TURN_MS = 10 * 60_000
62const BIG_TURN_CALLS = 25
63const HOME_FILE = '.home.json'
64const STAY_MS = 30 * 60_000
65const SHELLS = [0xd97757, 0xe8a23a, 0x9775fa]
66const HATS = [
67  { badges: 8, lines: ['c.cc.c', 'cccccc'], palette: { c: 0xffd43b } },
68  { badges: 4, lines: ['.tttt.', 'tbbbbt'], palette: { t: 0x1f2328, b: 0xe5484d } },
69  { badges: 1, lines: ['.kkkk.', 'kkkkkk'], palette: { k: 0x4dabf7 } },
70] as const
71const site = { plugin: 'widgets', key: 'site' } as const
72const widths = { plugin: 'widgets', key: 'widths' } as const
73const isOn = atom({ plugin: 'pet-widget', key: 'isOn' } as const, false)
74const tick = atom({ plugin: 'pet-widget', key: 'tick' } as const, 0)
75const status = atom({ plugin: 'pet-widget', key: 'status' } as const, RESTING)
76const growth = atom({ plugin: 'pet-widget', key: 'growth' } as const, { xp: 0 })
77const visit = atom({ plugin: 'pet-widget', key: 'visit' } as const, { id: '', isAway: false })
78
79let timer: Timer | undefined
80let home = ''
81let memory: PetMemory = { at: 0, isFailing: false, visits: 0 }
82
83const shade = (color: number, factor: number): number =>
84  (Math.round((color >> 16) * factor) << 16) |
85  (Math.round(((color >> 8) & 255) * factor) << 8) |
86  Math.round((color & 255) * factor)
87
88const isMood = (value: string): value is PetMood => MOODS.includes(value)
89
90const isHome = (value: unknown): value is { holder: string; at: number } =>
91  typeof value === 'object' &&
92  value !== null &&
93  typeof (value as { holder?: unknown }).holder === 'string' &&
94  typeof (value as { at?: unknown }).at === 'number'
95
96const claim = async ($: EngineInterface): Promise<void> => {
97  const me = await read($, visit)
98  if (me.id === '') return
99
100  const held = JSON.stringify({ holder: me.id, at: await $.clock.now() })
101  await $.fs.write(`${$.plugin.root}/${HOME_FILE}`, held).catch(() => undefined)
102  await update($, visit, held => ({ id: held?.id ?? me.id, isAway: false }))
103}
104
105const look = async ($: EngineInterface): Promise<void> => {
106  const me = await read($, visit)
107  const now = await $.clock.now()
108  if (me.id === '') return
109
110  let kept: unknown
111  try {
112    kept = JSON.parse(await $.fs.read(`${$.plugin.root}/${HOME_FILE}`))
113  } catch {
114    kept = undefined
115  }
116  if (!isHome(kept) || now - kept.at >= STAY_MS) {
117    await claim($)
118
119    return
120  }
121
122  const isAway = kept.holder !== me.id
123  if (isAway !== me.isAway) await update($, visit, held => ({ id: held?.id ?? me.id, isAway }))
124}
125
126const isMemory = (value: unknown): value is PetMemory =>
127  typeof value === 'object' &&
128  value !== null &&
129  typeof (value as PetMemory).at === 'number' &&
130  typeof (value as PetMemory).isFailing === 'boolean' &&
131  typeof (value as PetMemory).visits === 'number'
132
133const say = async ($: EngineInterface, text: string): Promise<void> => {
134  const until = (await $.clock.now()) + SAY_MS
135  await update($, status, held => ({ ...(held ?? RESTING), said: { text, until } }))
136}
137
138const greetingOf = (kept: PetMemory | undefined, now: number): string => {
139  if (kept === undefined) return 'a new project! I like it here'
140
141  const away = now - kept.at
142  if (away < HOUR_MS) return 'back already?'
143  if (away < DAY_MS) return kept.isFailing ? 'welcome back. the checks are still red' : 'welcome back'
144
145  const days = Math.floor(away / DAY_MS)
146
147  return `${days} ${days === 1 ? 'day' : 'days'} away. ${kept.isFailing ? 'the checks were red when you left' : 'all was green when you left'}`
148}
149
150const remember = async ($: EngineInterface): Promise<void> => {
151  if (home === '') return
152
153  memory = { ...memory, at: await $.clock.now() }
154  await $.store.set(`seen:${home}`, memory)
155}
156
157const pulse = async ($: EngineInterface): Promise<void> => {
158  const count = await update($, tick, held => ((held ?? 0) + 1) % 1_000_000)
159  if (count % POLL_TICKS === 0) await look($)
160}
161
162const enrol = async ($: EngineInterface): Promise<void> => {
163  const now = await $.clock.now()
164  await update($, visit, held =>
165    held === undefined || held.id === '' ? { id: `${now}-${Math.floor(Math.random() * 1_000_000)}`, isAway: false } : held,
166  )
167}
168
169const sync = async ($: EngineInterface): Promise<void> => {
170  const isWanted = await read($, isOn)
171  if (isWanted && timer === undefined) {
172    timer = $.clock.every(TICK_MS, () => {
173      void pulse($)
174    })
175  }
176  if (!isWanted && timer !== undefined) {
177    timer.cancel()
178    timer = undefined
179  }
180}
181
182const levelOf = (xp: number): number => 1 + Math.floor(Math.sqrt(xp / 20))
183
184const badgesOf = async ($: EngineInterface): Promise<number> => {
185  const earned = (await $.state.get({ plugin: 'badges-widget', key: 'earned' } as never)) as { value?: unknown }
186
187  return Array.isArray(earned.value) ? earned.value.length : 0
188}
189
190const moodAt = (held: PetStatus, now: number): PetMood => {
191  if (held.forced !== null && now < held.forced.until) return held.forced.mood
192  if (held.isWorking) return 'work'
193  if (held.isHot) return 'hot'
194
195  return now - held.activeAt > SLEEPY_MS ? 'sleep' : 'idle'
196}
197
198const wide = async ($: EngineInterface): Promise<number> =>
199  (await $.state.get(widths)).value?.['pet-widget'] ?? CARD_COLUMNS
200
201const show = async (
202  $: EngineInterface,
203  surface: RenderSurface,
204  { Box, Text }: Tags,
205  beneath: RenderElement,
206  place: WidgetsPlace,
207  columns: number,
208): Promise<RenderElement> => {
209  if (!(await read($, isOn))) return beneath
210  if ((await $.state.get(site)).value !== place) return beneath
211
212  const held = await read($, status)
213  const beat = await read($, tick)
214  const now = await $.clock.now()
215  const mood = moodAt(held, now)
216  const isStill = mood === 'sleep'
217  const step = mood === 'work' || mood === 'happy' ? beat % 2 : Math.floor(beat / 2) % 2
218  const isBlinking = mood === 'idle' && beat % 7 === 0
219  const { xp } = await read($, growth)
220  const level = levelOf(xp)
221  const form = SHELLS[Math.min(SHELLS.length - 1, Math.floor((level - 1) / 3))] ?? 0xd97757
222  const shell = mood === 'hot' ? 0xe5484d : isStill ? shade(form, 0.7) : form
223  const badges = await badgesOf($)
224  const hat = HATS.find(one => badges >= one.badges)
225
226  if ((await read($, visit)).isAway) {
227    return $.widgets.card({
228      beneath,
229      width: Math.min(await wide($), Math.max(20, columns)),
230      title: `Clawd Lv ${level}`,
231      note: 'away',
232      body: (
233        <Text dimColor wrap="wrap">
234          Clawd is visiting another session. It comes back when you send a prompt here.
235        </Text>
236      ),
237    })
238  }
239  const palette = {
240    o: shell,
241    d: shade(shell, 0.7),
242    l: mood === 'hot' ? 0xff8a80 : isStill ? shell : 0xf0a58c,
243    m: mood === 'happy' ? 0xffffff : 0x5a2e22,
244    e: mood === 'dizzy' && beat % 2 === 0 ? 0xd670d6 : 0xffffff,
245    p: mood === 'happy' ? 0x3fb950 : mood === 'dizzy' && beat % 2 === 1 ? 0xd670d6 : 0x1f2328,
246  }
247  const body =
248    isStill || isBlinking
249      ? BODY.map((line, row) => (row < 2 ? line.replaceAll('e', 'o').replaceAll('p', 'd') : line))
250      : BODY
251  const pose = isStill ? 0 : step
252  const picture = await $.widgets.picture({
253    surface,
254    key: 'pet',
255    columns: 32,
256    rows: 14,
257    marks: [
258      {
259        lines: [...(CLAWS[pose] ?? CLAWS[0]), ...body, ...(LEGS[pose] ?? LEGS[0])],
260        palette,
261        left: 2,
262        top: isStill ? 2 : 1 + step,
263      },
264      ...(hat === undefined
265        ? []
266        : [{ lines: hat.lines, palette: hat.palette, left: 13, top: isStill ? 2 : 1 + step }]),
267    ],
268  })
269
270  const said =
271    held.forced !== null && now < held.forced.until && held.forced.note !== '' ? held.forced.note
272    : held.said !== undefined && now < held.said.until ? held.said.text
273    : SAYS[mood]
274
275  return $.widgets.card({
276    beneath,
277    width: Math.min(await wide($), Math.max(20, columns)),
278    title: `Clawd Lv ${level}`,
279    note: mood,
280    body: (
281      <Box columnGap={2}>
282        {picture}
283        <Box flexDirection="column" justifyContent="center">
284          <Text wrap="wrap">{said}</Text>
285          {held.isWorking && <Text dimColor>{held.calls} tool calls this turn</Text>}
286          <Text dimColor>{xp} XP</Text>
287        </Box>
288      </Box>
289    ),
290  })
291}
292
293export const register: Register = on => {
294  on('session.start', async ($, e, next) => {
295    await $.command.register({
296      name: 'pet-widget',
297      description: 'Toggle Clawd, a pixel pet whose mood follows the session',
298      argumentHint: '[on|off|sleep|idle|work|happy|dizzy|hot]',
299    })
300    if ((await $.store.get('isOn')) === true) await update($, isOn, () => true)
301    const kept = await $.store.get('xp')
302    if (typeof kept === 'number') await update($, growth, () => ({ xp: kept }))
303    const now = await $.clock.now()
304    await update($, status, held => ({ ...(held ?? RESTING), isWorking: false, activeAt: now }))
305    await enrol($)
306    if (await read($, isOn)) await look($)
307    home = e.cwd
308    const seen = await $.store.get(`seen:${e.cwd}`)
309    await say($, greetingOf(isMemory(seen) ? seen : undefined, now))
310    memory = { at: now, isFailing: isMemory(seen) ? seen.isFailing : false, visits: (isMemory(seen) ? seen.visits : 0) + 1 }
311    if (await read($, isOn)) await $.store.set(`seen:${e.cwd}`, memory)
312    await sync($)
313
314    return next(e)
315  })
316
317  on('command.run', { command: 'pet-widget' }, async ($, e) => {
318    const arg = e.args.trim().toLowerCase()
319
320    if (isMood(arg)) {
321      const until = (await $.clock.now()) + FLASH_MS * 2
322      await update($, status, held => ({
323        ...(held ?? RESTING),
324        forced: { mood: arg, until, note: '' },
325      }))
326      await update($, isOn, () => true)
327      await $.store.set('isOn', true)
328      await sync($)
329
330      return { text: `Pet on, previewing ${arg}.` }
331    }
332    if (arg !== '' && arg !== 'on' && arg !== 'off') {
333      return { text: 'Usage: /pet-widget [on|off|sleep|idle|work|happy|dizzy|hot]' }
334    }
335
336    const isShown = await update($, isOn, shown => (arg === '' ? !(shown ?? false) : arg === 'on'))
337    await $.store.set('isOn', isShown)
338    const now = await $.clock.now()
339    await update($, status, held => ({ ...(held ?? RESTING), activeAt: now }))
340    await sync($)
341
342    return { text: isShown ? 'Pet on; /widgets places it.' : 'Pet off.' }
343  })
344
345  on('turn.start', async ($, e, next) => {
346    const now = await $.clock.now()
347    await enrol($)
348    if (await read($, isOn)) await claim($)
349    await update($, status, held => ({
350      ...(held ?? RESTING),
351      isWorking: true,
352      activeAt: now,
353      calls: 0,
354      startedAt: now,
355    }))
356
357    return next(e)
358  })
359
360  on('turn.complete', async ($, e, next) => {
361    if (e.agentId === undefined) {
362      const now = await $.clock.now()
363      const before = await read($, status)
364      await update($, status, held => ({ ...(held ?? RESTING), isWorking: false, activeAt: now }))
365      const hour = new Date(now).getHours()
366      if (before.isWorking && now - (before.startedAt ?? now) >= LONG_TURN_MS) await say($, 'phew, long one. stretch?')
367      else if (before.isWorking && hour < 5) await say($, "it's late. one more?")
368      await remember($)
369    }
370
371    return next(e)
372  })
373
374  on('tool.call', async ($, e, next) => {
375    const ran = await next(e)
376    if (!(await read($, isOn))) return ran
377
378    const now = await $.clock.now()
379    const command = String((e as { command?: unknown }).command ?? '')
380    const forced =
381      ran.isError === true ? { mood: 'dizzy' as const, until: now + FLASH_MS, note: `${e.tool} failed` }
382      : e.tool === 'Bash' && CHECKS.test(command) ? { mood: 'happy' as const, until: now + FLASH_MS, note: '' }
383      : undefined
384    if (ran.isError !== true) {
385      const grown = await update($, growth, held => ({ xp: (held?.xp ?? 0) + (forced?.mood === 'happy' ? 5 : 1) }))
386      await $.store.set('xp', grown.xp)
387      if (levelOf(grown.xp) > levelOf(grown.xp - (forced?.mood === 'happy' ? 5 : 1))) {
388        $.ui.toast(`Clawd reached level ${levelOf(grown.xp)}.`)
389      }
390    }
391    const isCheck = e.tool === 'Bash' && CHECKS.test(command)
392    const before = await read($, status)
393    const fails = ran.isError === true ? (before.fails ?? 0) + 1 : isCheck ? 0 : (before.fails ?? 0)
394    await update($, status, held => ({
395      ...(held ?? RESTING),
396      calls: (held ?? RESTING).calls + 1,
397      activeAt: now,
398      forced: forced ?? (held ?? RESTING).forced,
399      fails,
400    }))
401    if (isCheck) {
402      if (ran.isError !== true && memory.isFailing) await say($, 'green again!')
403      memory = { ...memory, isFailing: ran.isError === true }
404    }
405    if (ran.isError === true && fails === 3) await say($, 'third time... read the error?')
406    if (before.calls + 1 === BIG_TURN_CALLS) await say($, 'big one, this')
407
408    return ran
409  })
410
411  on('session.measure', async ($, e, next) => {
412    const isHot = (e.context.percent ?? 0) >= HOT_PERCENT
413    await update($, status, held => ({ ...(held ?? RESTING), isHot }))
414
415    return next(e)
416  })
417
418  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e, next) =>
419    show($, e.surface, $.ui.resolve(e), await next(e), 'side', e.props.bodyColumns),
420  )
421
422  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) =>
423    e.props.hasSurvey
424      ? next(e)
425      : show($, e.surface, $.ui.resolve(e), await next(e), 'above', e.props.bodyColumns),
426  )
427
428  on('ui.render', { component: 'PromptHint' }, async ($, e, next) =>
429    show($, e.surface, $.ui.resolve(e), await next(e), 'below', e.viewport?.columns ?? 80),
430  )
431}
432

1export type PetMood = 'sleep' | 'idle' | 'work' | 'happy' | 'dizzy' | 'hot'
2
3export type PetStatus = {
4  isWorking: boolean
5  isHot: boolean
6  activeAt: number
7  calls: number
8  forced: { mood: PetMood; until: number; note: string } | null
9  said?: { text: string; until: number }
10  fails?: number
11  startedAt?: number
12}
13
14export type PetGrowth = {
15  xp: number
16}
17
18export type PetMemory = {
19  at: number
20  isFailing: boolean
21  visits: number
22}
23
24export type PetVisit = {
25  id: string
26  isAway: boolean
27}
28
29declare module 'claude-code' {
30  interface PluginState {
31    'pet-widget': { isOn: boolean; tick: number; status: PetStatus; growth: PetGrowth; visit: PetVisit }
32  }
33}
34