gpu-crab

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { GpuModel, GpuRun, LanTally } from '../types'
5import { addToTally, clock, gb, gpuShare, isSpilling, line, parsePs, parseTrailer, subjectOf, tallyText, today, toolShort } from './logic'
6import { crab } from './shared/crab'
7import { FONT, fit, meter, svg, widthFor, xml } from './shared/draw'
8
9const run = atom({ plugin: 'gpu-crab', key: 'run' } as const, null)
10const reading = atom({ plugin: 'gpu-crab', key: 'reading' } as const, { models: [], at: 0 })
11const tally = atom({ plugin: 'gpu-crab', key: 'tally' } as const, { day: '', calls: 0, chars: 0 })
12const now = atom({ plugin: 'gpu-crab', key: 'now' } as const, 0)
13
14const STORE_TALLY = 'gpu-crab.tally'
15// How long the band stays after a call ends.
16const LINGER_MS = 20_000
17
18let ollamaUrl = 'http://localhost:11434'
19let vramGb = 8
20let prefix = 'mcp__local-llm__'
21let poller: { cancel: () => void } | null = null
22
23/** Rejects after `ms` (the host's fetch has no timeout of its own). */
24function within<T>($: EngineInterface, p: Promise<T>, ms: number): Promise<T> {
25  return new Promise<T>((resolve, reject) => {
26    const t = $.clock.after(ms, () => reject(new Error(`no answer in ${ms / 1000}s`)))
27    p.then(
28      v => (t.cancel(), resolve(v)),
29      err => (t.cancel(), reject(err)),
30    )
31  })
32}
33
34async function poll($: EngineInterface): Promise<GpuModel[]> {
35  const at = await $.clock.now()
36  try {
37    const r = await within($, $.http.fetch(`${ollamaUrl}/api/ps`), 3000)
38    const models = r.ok ? parsePs(r.text) : null
39    await update($, reading, () => (models ? { models, at } : { models: [], at, error: `Ollama answered ${r.status}` }))
40    await update($, now, () => at)
41    return models ?? []
42  } catch (err) {
43    await update($, reading, v => ({ ...v, at, error: `can't reach ${ollamaUrl} (${(err instanceof Error ? err.message : String(err)).slice(0, 80)})` }))
44    await update($, now, () => at)
45    return []
46  }
47}
48
49async function addChars($: EngineInterface, chars: number): Promise<LanTally> {
50  const at = await $.clock.now()
51  const stored = ((await $.store.get(STORE_TALLY)) as LanTally | undefined) ?? { day: '', calls: 0, chars: 0 }
52  const next = addToTally(stored, today(at), chars)
53  await $.store.set(STORE_TALLY, next)
54  await update($, tally, () => next)
55  return next
56}
57
58async function sizeOf($: EngineInterface, path: unknown): Promise<number> {
59  if (typeof path !== 'string' || !path) return 0
60  try {
61    const s = await $.fs.stat(path)
62    return s && 'size' in s && typeof s.size === 'number' ? Math.min(s.size, 24_000) : 0
63  } catch {
64    return 0
65  }
66}
67
68// ---------------------------------------------------------------------------
69// Drawing
70
71const BELT_CSS = `<style>.belt{stroke:#7a7a76;stroke-width:2;stroke-dasharray:4 4;animation:belt .4s linear infinite}
72@keyframes belt{to{stroke-dashoffset:8}}.frame{fill:none;stroke:#9a9a96;stroke-width:1.5}.spill .frame{stroke:#b07012}
73.done .belt{animation:none}</style>`
74
75function bandSvg(W: number, r: GpuRun, models: GpuModel[], at: number): string {
76  const m = models[0]
77  const spill = m ? isSpilling(m) : false
78  const done = !!r.endedAt
79  const x = 66
80  const title = `${toolShort(r.tool)}${r.subject ? ` · ${r.subject}` : ''}`
81  const right = done ? `done in ${clock((r.endedAt ?? at) - r.startedAt)}${r.parts ? ` · ${r.parts} parts` : ''}${r.isError ? ' · failed' : ''}` : clock(at - r.startedAt)
82  const vramPct = m ? (m.sizeVram / (vramGb * 1024 ** 3)) * 100 : 0
83  return svg(
84    W,
85    48,
86    `<g class="${spill ? 'spill' : ''} ${done ? 'done' : ''}">
87<rect class="frame" x="2" y="38" width="52" height="6" rx="3"/><line class="belt" x1="6" y1="41" x2="50" y2="41"/>
88${crab(10, 4, 'light', done ? (r.isError ? 'idle' : 'done') : 'working', 1.1)}</g>
89<text class="t" x="${x}" y="15" font-family="${FONT}" font-size="12" font-weight="600">${xml(fit(title, 12, W - x - right.length * 6.4 - 10))}</text>
90<text class="s" x="${W}" y="15" text-anchor="end" font-family="${FONT}" font-size="11" font-variant-numeric="tabular-nums">${xml(right)}</text>
91${
92  m
93    ? `${meter(x, 23, 90, 8, vramPct, 90, 99)}<text class="${spill ? 'warn' : 's'}" x="${x + 98}" y="31" font-family="${FONT}" font-size="11">${xml(
94        `${m.name} · ${gb(m.sizeVram)}/${vramGb} GB · ${gpuShare(m)}% GPU${spill ? ' · spilling to CPU' : ''}`,
95      )}</text>`
96    : `<text class="s" x="${x}" y="31" font-family="${FONT}" font-size="11">no model loaded yet</text>`
97}`,
98    BELT_CSS,
99  )
100}
101
102export const register: Register = (on, options) => {
103  ollamaUrl = String(options.ollamaUrl ?? ollamaUrl).replace(/\/+$/, '')
104  vramGb = Number(options.vramGb ?? 8) || 8
105  prefix = String(options.toolPrefix ?? prefix)
106
107  on('session.start', async ($, e, next) => {
108    const started = await next(e)
109    await $.command.register({ name: 'gpu', description: "What's loaded on the Ollama GPU now, and today's kept-on-the-LAN tally" })
110    const stored = (await $.store.get(STORE_TALLY)) as LanTally | undefined
111    if (stored) await update($, tally, () => stored)
112    return started
113  })
114
115  on('tool.call', async ($, e, next) => {
116    const tool = String(e.tool)
117    if (!tool.startsWith(prefix)) return next(e)
118    const args = e as unknown as Record<string, unknown>
119    const startedAt = await $.clock.now()
120    const mine: GpuRun = { tool, subject: subjectOf(tool, args), startedAt }
121    await update($, run, () => mine)
122    poller?.cancel()
123    poller = $.clock.every(1500, () => void poll($))
124    void poll($)
125    const r = await next(e)
126    poller?.cancel()
127    poller = null
128    const text = typeof r.text === 'string' ? r.text : typeof r.result === 'string' ? r.result : ''
129    const trailer = parseTrailer(text)
130    const endedAt = await $.clock.now()
131    await update($, run, v => (v && v.startedAt === startedAt ? { ...v, endedAt, ...trailer, isError: r.isError === true || r.deny !== undefined } : v))
132    if (r.deny === undefined && !r.isError) await addChars($, trailer.chars ?? (await sizeOf($, args.path)))
133    $.clock.after(LINGER_MS, () => void update($, run, v => (v && v.startedAt === startedAt ? null : v)))
134    return r
135  }).catch(($, e, next) => next(e))
136
137  on('command.run', { command: 'gpu' }, async $ => {
138    const models = await poll($)
139    const v = await read($, reading)
140    const t = (await $.store.get(STORE_TALLY)) as LanTally | undefined
141    const lines = [
142      v.error ? `Ollama: ${v.error}` : models.length ? 'Loaded on the GPU:' : `Ollama at ${ollamaUrl}: no model loaded.`,
143      ...models.map(
144        m => `  ${m.name}${m.parameterSize ? ` (${m.parameterSize}${m.quantization ? ` ${m.quantization}` : ''})` : ''}: ${gb(m.size)} GB, ${gb(m.sizeVram)} on the GPU (${gpuShare(m)}%)${isSpilling(m) ? ', spilling to CPU' : ''}${m.contextLength ? `, context ${m.contextLength}` : ''}`,
145      ),
146      t && t.day === today(await $.clock.now()) ? tallyText(t) : 'Nothing read by local models today.',
147    ]
148    return { text: lines.join('\n') }
149  })
150
151  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
152    const r = await read($, run)
153    if (!r || e.props.hasSurvey) return next(e)
154    const ui = $.ui.resolve(e)
155    const { Box, Text } = ui
156    const v = await read($, reading)
157    const at = Math.max(await read($, now), r.startedAt)
158    if (e.surface === 'desktop' && 'Svg' in ui) {
159      const { Svg } = ui
160      const W = widthFor(e.props.bodyColumns)
161      return (
162        <Box flexDirection="column">
163          <Svg key="gpu" source={bandSvg(W, r, v.models, at)} alt={line(r, v.models, vramGb, at)} width={W} height={48} />
164          {r.endedAt ? <Text dimColor>{tallyText(await read($, tally))}</Text> : null}
165        </Box>
166      )
167    }
168    const m = v.models[0]
169    return (
170      <Box flexDirection="column">
171        <Text color={m && isSpilling(m) ? 'yellow' : undefined} wrap="truncate-end">
172          {r.endedAt ? (r.isError ? '▣ ' : '▣\\o/ ') : '▣≈ '}
173          {line(r, v.models, vramGb, at)}
174        </Text>
175        {v.error ? <Text dimColor>{v.error}</Text> : r.endedAt ? <Text dimColor>{tallyText(await read($, tally))}</Text> : null}
176      </Box>
177    )
178  })
179}
180

1// Pure logic for gpu-crab.
2
3import type { GpuModel, GpuRun, LanTally } from '../types'
4
5/** Ollama's /api/ps answer into models. */
6export function parsePs(text: string): GpuModel[] | null {
7  try {
8    const v = JSON.parse(text) as { models?: { name?: string; model?: string; size?: number; size_vram?: number; context_length?: number; details?: { parameter_size?: string; quantization_level?: string } }[] }
9    if (!v || !Array.isArray(v.models)) return null
10    return v.models.map(m => ({
11      name: m.name ?? m.model ?? '?',
12      size: Number(m.size ?? 0),
13      sizeVram: Number(m.size_vram ?? 0),
14      ...(m.context_length ? { contextLength: m.context_length } : {}),
15      ...(m.details?.parameter_size ? { parameterSize: m.details.parameter_size } : {}),
16      ...(m.details?.quantization_level ? { quantization: m.details.quantization_level } : {}),
17    }))
18  } catch {
19    return null
20  }
21}
22
23export const gpuShare = (m: GpuModel): number => (m.size > 0 ? Math.round((m.sizeVram / m.size) * 1000) / 10 : 0)
24export const gb = (bytes: number): string => (bytes / 1024 ** 3).toFixed(1)
25export const isSpilling = (m: GpuModel): boolean => m.size > 0 && m.sizeVram < m.size
26
27/** What a local-llm call reads, from its arguments. */
28export function subjectOf(tool: string, args: Record<string, unknown>): string {
29  const base = (p: unknown) => (typeof p === 'string' && p ? p.split('/').filter(Boolean).pop() ?? p : '')
30  const short = tool.replace(/^mcp__[^_]+(?:_[^_]+)*__/, '')
31  if (short === 'local_summarize') return `${base(args.path)}${args.mode && args.mode !== 'auto' ? ` (${args.mode})` : ''}`
32  if (short === 'semantic_search') return `"${String(args.query ?? '').slice(0, 40)}" in ${base(args.root)}`
33  if (short === 'local_ask') return args.path ? base(args.path) : String(args.prompt ?? '').slice(0, 40)
34  return short
35}
36
37export const toolShort = (tool: string): string => tool.split('__').pop() ?? tool
38
39/** The trailer local_summarize writes: "(syslog.txt: 412,345 characters in 17 parts, model qwen3:8b)". */
40export function parseTrailer(text: string): { chars?: number; parts?: number } {
41  const m = text.match(/:\s*([\d,]+) characters(?: in (\d+) parts?)?/)
42  if (!m || !m[1]) return {}
43  return { chars: Number(m[1].replace(/,/g, '')), ...(m[2] ? { parts: Number(m[2]) } : {}) }
44}
45
46export const today = (ms: number): string => {
47  const d = new Date(ms)
48  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
49}
50
51export function addToTally(t: LanTally, day: string, chars: number): LanTally {
52  return t.day === day ? { day, calls: t.calls + 1, chars: t.chars + chars } : { day, calls: 1, chars }
53}
54
55/** "1.2 MB ≈ 310k tokens". Tokens are estimated at four characters each. */
56export function tallyText(t: LanTally): string {
57  if (!t.calls) return 'Nothing read by local models today.'
58  const mb = t.chars >= 1e6 ? `${(t.chars / 1e6).toFixed(1)} MB` : `${Math.round(t.chars / 1000)} KB`
59  const tok = Math.round(t.chars / 4)
60  return `local models read ${mb} today in ${t.calls} call${t.calls === 1 ? '' : 's'} ≈ ${tok >= 1000 ? `${Math.round(tok / 1000)}k` : tok} tokens kept on the LAN`
61}
62
63export const clock = (ms: number): string => {
64  const s = Math.max(0, Math.round(ms / 1000))
65  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`
66}
67
68/** One line for the band or the terminal. */
69export function line(run: GpuRun, models: GpuModel[], vramGb: number, now: number): string {
70  const m = models[0]
71  const parts = [toolShort(run.tool) + (run.subject ? ` · ${run.subject}` : '')]
72  if (m) parts.push(`${m.name} · ${gb(m.sizeVram)}/${vramGb} GB VRAM · ${gpuShare(m)}% GPU${isSpilling(m) ? ' (spilling to CPU)' : ''}`)
73  else parts.push('no model loaded yet')
74  parts.push(run.endedAt ? `done in ${clock(run.endedAt - run.startedAt)}${run.parts ? `, ${run.parts} parts` : ''}` : clock(now - run.startedAt))
75  return parts.join(' · ')
76}
77

1// The crew's crabs: pixel art, costumes and motion copied from savvy-progress
2// (https://github.com/JohnnyVizz/claude-kit/tree/main/plugins/savvy-progress,
3// MIT License, Copyright (c) 2026 johnnyvizz; see THIRD_PARTY_NOTICES.md),
4// which credits the pixel crab to DockCrab (Clawdy).
5//
6// Changed here: a pose per session status (closed eyes and tucked legs to rest,
7// happy eyes, both claws up and a hop to celebrate), and costumes named for
8// what they wear instead of savvy-flow's tiers.
9
10/** A crab's pose, by what its owner is doing. */
11export type CrewStatus = 'working' | 'idle' | 'done' | 'proposed' | 'dismissed'
12
13// Pixel Clawd from DockCrab (Clawdy): a 24×18 crab on a 30×28 grid, one costume per tier.
14// The body keeps the brand clay; the tier's color lives in the costume's accent.
15const CLAY = '#D97757'
16const INK = '#1F1E1D'
17
18export const COSTUME_COLOR: Record<string, string> = {
19  fable: '#7F77DD',
20  heavy: '#D85A30',
21  careful: '#BA7517',
22  medium: '#378ADD',
23  light: '#1D9E75',
24  explore: '#55514C',
25  other: '#888780',
26}
27
28/** What a `faces` rule or `/crew face` may name, to the costume it draws. */
29export const COSTUME_NAMES: Record<string, string> = {
30  astronaut: 'fable',
31  detective: 'heavy',
32  engineer: 'careful',
33  chef: 'medium',
34  racer: 'light',
35  pirate: 'explore',
36  plain: 'other',
37  // savvy-flow's own tier names work too.
38  fable: 'fable',
39  heavy: 'heavy',
40  careful: 'careful',
41  medium: 'medium',
42  light: 'light',
43  explore: 'explore',
44  other: 'other',
45}
46
47export const WEARS: Record<string, string> = {
48  fable: 'astronaut',
49  heavy: 'detective',
50  careful: 'engineer',
51  medium: 'chef',
52  light: 'racer',
53  explore: 'pirate',
54  other: 'plain',
55}
56
57/** Sessions with no rule take these in turn, in the order they joined. */
58export const ROTATION = ['fable', 'heavy', 'careful', 'medium', 'light', 'explore'] as const
59
60export const costumeKey = (name: string): string | undefined => COSTUME_NAMES[name.trim().toLowerCase()]
61
62// `cls` puts a pixel in a named group: `bd` (the default) is the body and its
63// costume, `la`/`lb` the leg pairs, anything else a prop with its own motion.
64type Fill = (x: number, y: number, w: number, h: number, c: string, cls?: string) => void
65
66type Pose = { eyes: 'open' | 'closed' | 'happy'; isCheering: boolean }
67
68const stamp = (f: Fill, x: number, y: number, rows: string[], map: Record<string, string>, cls?: string): void =>
69  rows.forEach((row, dy) => [...row].forEach((ch, dx) => map[ch] && f(x + dx, y + dy, 1, 1, map[ch] ?? '', cls)))
70
71const eyes = (f: Fill, pose: Pose): void => {
72  if (pose.eyes === 'closed') {
73    f(9, 13, 2, 1, INK)
74    f(19, 13, 2, 1, INK)
75  } else if (pose.eyes === 'happy') {
76    f(9, 13, 1, 1, INK); f(10, 12, 1, 1, INK)
77    f(19, 12, 1, 1, INK); f(20, 13, 1, 1, INK)
78  } else {
79    f(9, 12, 2, 2, INK)
80    f(19, 12, 2, 2, INK)
81  }
82}
83
84// `armCls` lets a raised claw travel with the prop it holds. A cheering crab
85// raises the back claw too, in `ar`, which waves.
86const crabBody = (f: Fill, pose: Pose, armFront = 0, armCls?: string): void => {
87  f(7, 10, 16, 12, CLAY)
88  if (pose.isCheering) f(3, 10, 4, 4, CLAY, 'ar')
89  else f(3, 14, 4, 4, CLAY)
90  f(23, 14 + (pose.isCheering && !armCls ? -4 : armFront), 4, 4, CLAY, armCls ?? (pose.isCheering ? 'ar' : undefined))
91  eyes(f, pose)
92  f(7, 22, 2, 4, CLAY, 'la')
93  f(17, 22, 2, 4, CLAY, 'la')
94  f(11, 22, 2, 4, CLAY, 'lb')
95  f(21, 22, 2, 4, CLAY, 'lb')
96}
97
98// Pure CSS, run by the compositor: no redraws. Periods divide one second, so the
99// once-a-second redraw of a running row restarts them in phase. Every crab walks;
100// each costume adds its prop's own motion on top.
101export const CRAB_CSS = `<style>
102.run .la{animation:st .5s steps(1) infinite}.run .lb{animation:st .5s steps(1) infinite -.25s}
103.run .bd{animation:bob .5s steps(1) infinite -.125s}
104.run g{transform-box:fill-box}
105@keyframes st{50%{transform:translateY(-1px)}}@keyframes bob{50%{transform:translateY(1px)}}
106.c-fable.run{animation:float 1s ease-in-out infinite}
107.c-fable.run .la,.c-fable.run .lb,.c-fable.run .bd{animation:none}
108.c-fable.run .ant{animation:blink 1s steps(1) infinite}
109.c-fable.run .star{animation:blink .5s steps(1) infinite -.25s}
110@keyframes float{50%{transform:translateY(-2px)}}@keyframes blink{50%{opacity:.15}}
111.c-heavy.run .it{animation:scan 1s steps(1) infinite}
112.c-heavy.run .gl{animation:blink 1s steps(1) infinite -.5s}
113@keyframes scan{25%{transform:translate(-1px,1px)}50%{transform:translate(-2px,2px)}75%{transform:translate(-1px,1px)}}
114.c-careful.run .it{transform-origin:100% 100%;animation:twist .5s ease-in-out infinite}
115@keyframes twist{50%{transform:rotate(-35deg)}}
116.c-medium.run .pan{transform-origin:0 50%;animation:tilt 1s ease-in-out infinite}
117.c-medium.run .egg{animation:flip 1s ease-in-out infinite}
118@keyframes tilt{20%,40%{transform:rotate(-12deg)}}@keyframes flip{30%{transform:translateY(-5px) scaleY(-1)}60%{transform:translateY(0)}}
119.c-light.run .la{animation-duration:.25s}.c-light.run .lb{animation-duration:.25s;animation-delay:-.125s}
120.c-light.run .flag{transform-origin:0 50%;animation:wave .25s steps(1) infinite}
121@keyframes wave{50%{transform:skewY(-12deg) scaleX(.85)}}
122.c-explore.run .it{transform-origin:50% 100%;animation:fence .5s ease-in-out infinite}
123@keyframes fence{50%{transform:rotate(25deg)}}
124.rest g{transform-box:fill-box}
125.rest .bd{transform:translateY(2px)}.rest .la,.rest .lb{transform-origin:50% 100%;transform:scaleY(.5)}
126.rest{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 4s ease-in-out infinite}
127@keyframes breathe{50%{transform:scaleY(.96)}}
128.cheer{animation:hop .6s ease-in-out infinite}.cheer g{transform-box:fill-box}
129.cheer .ar{animation:clap .3s steps(1) infinite}
130@keyframes hop{50%{transform:translateY(-3px)}}@keyframes clap{50%{transform:translateY(-1px)}}
131.z{opacity:0;animation:zz 3s linear infinite}.z2{animation-delay:1s}.z3{animation-delay:2s}
132@keyframes zz{0%{opacity:0;transform:translate(0,0)}25%{opacity:.9}100%{opacity:0;transform:translate(-5px,-12px)}}
133.cf{transform-box:fill-box;transform-origin:center;animation:fall 1.8s linear infinite}
134.cf1{animation-delay:-.4s}.cf2{animation-delay:-.9s}.cf3{animation-delay:-1.3s}
135@keyframes fall{0%{transform:translateY(-4px) rotate(0);opacity:1}100%{transform:translateY(28px) rotate(300deg);opacity:0}}
136.q{animation:blink 1.6s steps(1) infinite}
137@media (prefers-reduced-motion: reduce){.run,.run g,.rest,.cheer,.cheer g,.z,.cf,.q{animation:none!important}.z{opacity:.7}}
138</style>`
139
140const COSTUMES: Record<string, (f: Fill, t: string, pose: Pose) => void> = {
141  // Fable: astronaut in a glass dome; floats instead of walking, the antenna and the star blink.
142  fable: (f, t, pose) => {
143    crabBody(f, pose)
144    f(6, 7, 18, 1, '#E6E8EE'); f(5, 8, 1, 14, '#E6E8EE'); f(24, 8, 1, 14, '#E6E8EE'); f(6, 22, 18, 1, '#C9CCD2')
145    f(6, 8, 18, 14, 'rgba(169,214,245,.32)'); f(8, 9, 2, 1, '#fff'); f(8, 10, 1, 2, '#fff')
146    f(14, 4, 2, 3, '#C9CCD2'); f(14, 2, 2, 2, t, 'ant'); f(13, 18, 4, 2, t)
147    f(27, 3, 1, 3, '#F5C542', 'star'); f(26, 4, 3, 1, '#F5C542', 'star')
148  },
149  // Heavy: detective with a deerstalker; the magnifier sweeps and glints.
150  heavy: (f, t, pose) => {
151    crabBody(f, pose, -4, 'it')
152    stamp(f, 6, 3, ['......bbbbbb......', '....bbcbbcbbbb....', '...bbbbbbbbbbbb...', '..bcbbcbbcbbcbbb..', '.bbbbbbbbbbbbbbbb.', 'dddddddddddddddddd'], { b: '#7A4A26', c: '#A0703F', d: '#5A3519' })
153    f(6, 9, 18, 1, t)
154    stamp(f, 23, 1, ['.kkk.', 'k...k', 'k...k', 'k...k', '.kkk.'], { k: '#3A3A3C' }, 'it')
155    f(24, 2, 3, 3, 'rgba(169,214,245,.7)', 'it'); f(25, 6, 1, 4, '#7A4A26', 'it'); f(24, 2, 1, 1, '#fff', 'gl')
156  },
157  // Careful: engineer in a hard hat; the wrench turns a bolt.
158  careful: (f, t, pose) => {
159    crabBody(f, pose)
160    stamp(f, 6, 4, ['.....yyyyyyyy.....', '...yyyyyhhyyyyy...', '..yyyyyyhhyyyyyy..', '..yyyyyyhhyyyyyy..', '.yyyyyyyhhyyyyyyy.', 'dddddddddddddddddd'], { y: '#F5C542', h: '#FBE08A', d: '#C99A1E' })
161    f(13, 5, 4, 2, t)
162    stamp(f, 0, 10, ['.s.s', 'sss.', '.s..', '.s..'], { s: '#8E929A' }, 'it')
163  },
164  // Medium: chef, the toque traced from DockCrab's Sprites.chefHat; tosses the omelette.
165  medium: (f, t, pose) => {
166    crabBody(f, pose, -4, 'pan')
167    stamp(f, 6, 0, ['........lll.......', '.......lllll......', '.wwwwgwwwwwwgwwwww', 'wwwwwwwwwwwwwwwwww', 'wwwwwwwwwwwwwwwwww', 'wwwwwgwwwwwggwwwww', '.wwwwgwwwwwggwwwww', '.dddbbbbbbbbbbbbb.', '.dddbbbbbbbbbbbbb.', '.dddbbbbbbbbbbbbb.'], { w: '#F4F3EE', l: '#F7F6F2', g: '#D2D1C8', b: t, d: '#B45F43' })
168    f(22, 8, 7, 2, '#4A4A48', 'pan'); f(26, 10, 1, 1, '#4A4A48', 'pan'); f(24, 7, 3, 1, '#F5B731', 'egg')
169  },
170  // Light: racer in a helmet; runs at double pace, the checkered flag flutters.
171  light: (f, t, pose) => {
172    crabBody(f, pose, -4)
173    stamp(f, 6, 5, ['....rrrrrrrrrr....', '..rrrrrrwwrrrrrr..', '.rrrrrrrwwrrrrrrr.', '.rrrrrrrwwrrrrrrr.', '.rrrrrrrwwrrrrrrr.', '.kkkkkkkkkkkkkkkkr'], { r: t, w: '#F8F6F1', k: INK })
174    f(25, 1, 1, 9, '#8E929A')
175    stamp(f, 26, 1, ['wkwk', 'kwkw', 'wkwk'], { w: '#F8F6F1', k: INK }, 'flag')
176  },
177  // Explore: pirate scouting the code; the cutlass fences.
178  explore: (f, _t, pose) => {
179    crabBody(f, pose)
180    stamp(f, 5, 3, ['.kk..............kk.', '.kkk....kkkk....kkk.', '..kkkkkkkwwkkkkkkk..', '..kkkkkkkkkkkkkkkk..', '.gggggggggggggggggg.'], { k: '#55514C', w: '#F8F6F1', g: '#F5C542' })
181    f(7, 11, 11, 1, INK); f(18, 11, 4, 3, INK)
182    f(27, 6, 1, 9, '#C9CCD2', 'it'); f(26, 15, 3, 1, '#7A4A26', 'it')
183  },
184  other: (f, _t, pose) => crabBody(f, pose),
185}
186
187const MOTION: Record<CrewStatus, string> = {
188  working: ' run',
189  idle: ' rest',
190  done: ' cheer',
191  proposed: '',
192  dismissed: '',
193}
194
195// What floats around the crab, in its own 30×28 grid: top left, the one corner no costume's prop takes.
196const EXTRAS: Partial<Record<CrewStatus, string>> = {
197  idle:
198    `<text class="z" x="0" y="8" font-family="sans-serif" font-size="6" font-weight="700" fill="#9a9a96">z</text>` +
199    `<text class="z z2" x="0" y="8" font-family="sans-serif" font-size="7" font-weight="700" fill="#9a9a96">z</text>` +
200    `<text class="z z3" x="0" y="8" font-family="sans-serif" font-size="9" font-weight="700" fill="#9a9a96">Z</text>`,
201  done: ['#D85A30', '#378ADD', '#F5C542', '#7F77DD'].map((c, i) => `<rect class="cf cf${i}" x="${2 + i * 8}" y="0" width="2" height="3" fill="${c}"/>`).join(''),
202  proposed: `<text class="q" x="0" y="9" font-family="sans-serif" font-size="9" font-weight="700" fill="#BA7517">?</text>`,
203}
204
205export const CRAB_SCALE = 1.1
206
207/**
208 * One crab at (x, y) in `costume`, posed for `status`. Body and props nest
209 * inside `bd` so a prop rides the bob and adds its own motion; legs stay
210 * outside it and step on their own.
211 */
212export function crab(x: number, y: number, costume: string, status: CrewStatus, scale = CRAB_SCALE): string {
213  const pose: Pose = {
214    eyes: status === 'idle' ? 'closed' : status === 'done' ? 'happy' : 'open',
215    isCheering: status === 'done',
216  }
217  const groups = new Map<string, string[]>([['bd', []]])
218  const f: Fill = (cx, cy, w, h, c, cls = 'bd') => {
219    if (!groups.has(cls)) groups.set(cls, [])
220    groups.get(cls)?.push(`<rect x="${cx}" y="${cy}" width="${w}" height="${h}" fill="${c}"/>`)
221  }
222  const draw = COSTUMES[costume] ?? COSTUMES.other
223  draw?.(f, COSTUME_COLOR[costume] ?? '#888780', pose)
224  const group = (cls: string) => `<g class="${cls}">${(groups.get(cls) ?? []).join('')}</g>`
225  const props = [...groups.keys()].filter(k => k !== 'bd' && k !== 'la' && k !== 'lb')
226  const body = `<g class="bd">${(groups.get('bd') ?? []).join('')}${props.map(group).join('')}</g>`
227  const dim = status === 'proposed' ? ' opacity="0.45"' : status === 'dismissed' ? ' opacity="0.3"' : ''
228  return `<g transform="translate(${x},${y}) scale(${scale})" shape-rendering="crispEdges"><g${dim}><g class="c-${costume}${MOTION[status]}">${body}${group('la')}${group('lb')}</g></g>${EXTRAS[status] ?? ''}</g>`
229}
230

1// Shared drawing helpers for the crab-workshop mods (copied into each mod's
2// hooks/shared/ by scripts/sync-shared.sh; edit the copy in /shared).
3
4import { CRAB_CSS } from './crab'
5
6export const FONT = "-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif"
7export const MONO = "ui-monospace,'SF Mono',Menlo,monospace"
8
9export const xml = (s: string): string =>
10  s.replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c] ?? c)
11
12/** Cuts `s` to what fits `maxW` pixels at `size`, with an ellipsis. */
13export const fit = (s: string, size: number, maxW: number): string => {
14  const max = Math.max(4, Math.floor(maxW / (size * 0.56)))
15  return s.length > max ? s.slice(0, max - 1) + '…' : s
16}
17
18// Text and line colours for both themes; `.ok`, `.warn`, `.bad` are state colours.
19export const THEME_CSS = `<style>
20.t{fill:#1f1f1f}.s{fill:#6b6b68}.ln{stroke:#e4e4e1}.ok{fill:#2f8a57}.warn{fill:#b07012}.bad{fill:#c2412d}
21.trk{fill:#ececea}.bar{fill:#378ADD}
22@media (prefers-color-scheme: dark){.t{fill:#ececec}.s{fill:#a8a8a4}.ln{stroke:#333331}.ok{fill:#6fcf97}.warn{fill:#f0c46a}.bad{fill:#f28b75}.trk{fill:#2b2b29}.bar{fill:#6aaef0}}
23@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
24</style>`
25
26/** An SVG document with the theme and crab styles, `extraCss` (a <style> block) after them. */
27export const svg = (W: number, H: number, body: string, extraCss = ''): string =>
28  `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">${THEME_CSS}${CRAB_CSS}${extraCss}${body}</svg>`
29
30/** Width in CSS pixels for a pane or band `bodyColumns` wide. */
31export const widthFor = (bodyColumns: number | undefined, min = 240, max = 900): number =>
32  Math.max(min, Math.min(max, (bodyColumns || 40) * 8 - 8))
33
34/** A horizontal meter: track plus a bar `pct` full, coloured by thresholds. */
35export const meter = (x: number, y: number, w: number, h: number, pct: number, warnAt = 80, badAt = 95): string => {
36  const p = Math.max(0, Math.min(100, pct))
37  const cls = p >= badAt ? 'bad' : p >= warnAt ? 'warn' : 'bar'
38  return `<rect class="trk" x="${x}" y="${y}" width="${w}" height="${h}" rx="${h / 2}"/><rect class="${cls}" x="${x}" y="${y}" width="${Math.max(h, (w * p) / 100)}" height="${h}" rx="${h / 2}"/>`
39}
40
41/** "3m", "2h 5m", "4d" from milliseconds. */
42export const ago = (ms: number): string => {
43  const m = Math.round(ms / 60_000)
44  if (m < 1) return 'now'
45  if (m < 60) return `${m}m`
46  const h = Math.floor(m / 60)
47  if (h < 48) return m % 60 && h < 10 ? `${h}h ${m % 60}m` : `${h}h`
48  return `${Math.floor(h / 24)}d`
49}
50

1export type GpuModel = {
2  name: string
3  /** Bytes in memory, all of it. */
4  size: number
5  /** Bytes of it on the GPU. */
6  sizeVram: number
7  contextLength?: number
8  parameterSize?: string
9  quantization?: string
10}
11
12export type GpuRun = {
13  /** The local-llm tool (local_summarize, local_ask, semantic_search). */
14  tool: string
15  /** A short description of what it reads. */
16  subject: string
17  startedAt: number
18  endedAt?: number
19  /** From the result: characters read and parts summarised. */
20  chars?: number
21  parts?: number
22  isError?: boolean
23}
24
25export type GpuReading = {
26  models: GpuModel[]
27  at: number
28  error?: string
29}
30
31export type LanTally = {
32  /** Local date, YYYY-MM-DD. */
33  day: string
34  calls: number
35  chars: number
36}
37
38declare module 'claude-code' {
39  interface PluginState {
40    'gpu-crab': {
41      run: GpuRun | null
42      reading: GpuReading
43      tally: LanTally
44      now: number
45    }
46  }
47}
48