codex-corner

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { Bout, Ring, Round } from '../types'
5import { addRound, card, currentBout, dirOf, readReview, reviewKind, tally } from './bout'
6import { crab } from './shared/crab'
7import { FONT, fit, svg, widthFor, xml } from './shared/draw'
8
9const ring = atom({ plugin: 'codex-corner', key: 'ring' } as const, null)
10const bout = atom({ plugin: 'codex-corner', key: 'bout' } as const, null)
11const now = atom({ plugin: 'codex-corner', key: 'now' } as const, 0)
12
13const STORE = 'codex-corner.bouts'
14// How long the ring stays above the prompt after a round lands.
15const SHOW_MS = 90_000
16
17async function keyFor($: EngineInterface, dir: string | undefined): Promise<string> {
18  const git = async (args: string[]) => {
19    try {
20      const r = await $.process.run(['git', ...args], { ...(dir ? { cwd: dir } : {}), timeoutMs: 5000 })
21      return r.exitCode === 0 ? r.stdout.trim() : ''
22    } catch {
23      return ''
24    }
25  }
26  const top = await git(['rev-parse', '--show-toplevel'])
27  const branch = await git(['rev-parse', '--abbrev-ref', 'HEAD'])
28  return `${top.split('/').pop() || 'here'}@${branch || '?'}`
29}
30
31async function loadBout($: EngineInterface, key: string): Promise<Bout> {
32  const all = ((await $.store.get(STORE)) as Record<string, Bout> | undefined) ?? {}
33  return all[key] ?? { key, rounds: [] }
34}
35
36async function saveBout($: EngineInterface, b: Bout): Promise<void> {
37  const all = ((await $.store.get(STORE)) as Record<string, Bout> | undefined) ?? {}
38  all[b.key] = b
39  // The 60 most recently fought bouts.
40  const keep = Object.values(all)
41    .sort((x, y) => (y.rounds.at(-1)?.endedAt ?? 0) - (x.rounds.at(-1)?.endedAt ?? 0))
42    .slice(0, 60)
43  await $.store.set(STORE, Object.fromEntries(keep.map(k => [k.key, k])))
44}
45
46// ---------------------------------------------------------------------------
47// Drawing: the ring, the crab in the red corner, the Codex bot in the blue.
48
49const RING_CSS = `<style>.rope{stroke:#c2412d;stroke-width:2}.rope2{stroke:#f4f1ea;stroke-width:2}.post{fill:#6b6b68}
50.bot .arm{animation:jab .6s steps(2) infinite;transform-box:fill-box}@keyframes jab{50%{transform:translateX(-4px)}}
51.ko{transform-box:fill-box;transform-origin:50% 100%;transform:rotate(90deg) translate(6px,-4px)}
52.stars{animation:spin 1.2s linear infinite;transform-box:fill-box;transform-origin:50% 50%}@keyframes spin{to{transform:rotate(360deg)}}
53@media (prefers-color-scheme: dark){.rope2{stroke:#3a3a38}}</style>`
54
55function bot(x: number, y: number, isKo: boolean): string {
56  const eyes = isKo
57    ? `<path d="M6 7 l3 3 m0 -3 l-3 3 M13 7 l3 3 m0 -3 l-3 3" stroke="#1f1f1f" stroke-width="1.2"/>`
58    : `<rect x="6" y="7" width="3" height="3" fill="#7fe3ff"/><rect x="13" y="7" width="3" height="3" fill="#7fe3ff"/>`
59  return `<g transform="translate(${x},${y})" shape-rendering="crispEdges"><g class="${isKo ? 'ko' : 'bot'}">
60<rect x="10" y="0" width="2" height="3" fill="#9a9a96"/><rect x="3" y="3" width="16" height="11" fill="#5b6b7a"/>${eyes}
61<rect x="5" y="15" width="12" height="11" fill="#46525e"/><g class="arm"><rect x="-3" y="16" width="6" height="5" fill="#2f6fd6"/></g>
62<rect x="19" y="17" width="5" height="5" fill="#2f6fd6"/><rect x="6" y="26" width="3" height="5" fill="#46525e"/><rect x="13" y="26" width="3" height="5" fill="#46525e"/></g>
63${isKo ? `<g class="stars"><text x="8" y="-2" font-size="9">✦</text><text x="16" y="2" font-size="7">✦</text></g>` : ''}</g>`
64}
65
66function ringSvg(W: number, b: Bout | null, r: Ring, at: number): string {
67  const rounds = b ? currentBout(b.rounds) : []
68  const last = rounds.at(-1)
69  const isRunning = r.runningSince !== undefined
70  const isKo = !isRunning && last?.verdict === 'approve'
71  const roundNo = isRunning ? rounds.length + (last?.verdict === 'approve' ? 0 : 1) : rounds.length
72  const title = isRunning ? `Round ${Math.max(1, roundNo)}: Codex is reviewing… ${Math.round((at - (r.runningSince ?? at)) / 1000)}s` : isKo ? `KO in round ${rounds.length}! Codex approves` : last ? `Round ${rounds.length}: ${tally(last)}` : 'Codex corner'
73  const sub = isRunning ? r.key : last?.titles[0] ? `${r.key} · e.g. ${last.titles[0]}` : r.key
74  const x = 112
75  return svg(
76    W,
77    52,
78    `<line class="post" x1="2" y1="8" x2="2" y2="48" stroke="#6b6b68" stroke-width="3"/><line class="post" x1="100" y1="8" x2="100" y2="48" stroke="#6b6b68" stroke-width="3"/>
79<line class="rope" x1="2" y1="14" x2="100" y2="14"/><line class="rope2" x1="2" y1="24" x2="100" y2="24"/><line class="rope" x1="2" y1="34" x2="100" y2="34"/>
80${crab(10, 16, 'heavy', isKo ? 'done' : isRunning ? 'working' : last?.verdict === 'needs-attention' ? 'working' : 'idle', 1)}${bot(64, isKo ? 22 : 14, isKo)}
81<text class="t" x="${x}" y="22" font-family="${FONT}" font-size="13" font-weight="700">${xml(fit(title, 13, W - x))}</text>
82<text class="s" x="${x}" y="40" font-family="${FONT}" font-size="11">${xml(fit(sub, 11, W - x))}</text>`,
83    RING_CSS,
84  )
85}
86
87export const register: Register = on => {
88  on('session.start', async ($, e, next) => {
89    const started = await next(e)
90    await $.command.register({ name: 'codex-card', description: 'The Codex review rounds for this repo and branch (codex-corner)' })
91    $.clock.every(1000, () => {
92      void (async () => {
93        const r = await read($, ring)
94        if (r?.runningSince !== undefined) await update($, now, () => Date.now())
95      })()
96    })
97    return started
98  })
99
100  on('tool.call', { tool: 'Bash' }, async ($, e, next) => {
101    const command = String(e.command ?? '')
102    const kind = reviewKind(command)
103    if (!kind) return next(e)
104    const key = await keyFor($, dirOf(command))
105    const startedAt = await $.clock.now()
106    const b0 = await loadBout($, key)
107    await update($, bout, () => b0)
108    // A background start or a result fetch has no round to wait for.
109    const isWaiting = kind !== 'result' && /--wait\b/.test(command)
110    if (isWaiting) await update($, ring, () => ({ key, runningSince: startedAt }))
111    const r = await next(e)
112    const out = typeof r.text === 'string' ? r.text : JSON.stringify(r.result ?? '')
113    const review = r.deny === undefined ? readReview(out.replace(/\\n/g, '\n')) : null
114    const endedAt = await $.clock.now()
115    if (review) {
116      const round: Round = { ...review, startedAt, endedAt, kind: kind === 'result' ? 'adversarial-review' : kind }
117      const b = addRound(await loadBout($, key), key, round)
118      await saveBout($, b)
119      await update($, bout, () => b)
120      await update($, ring, () => ({ key, landedAt: endedAt }))
121      const n = currentBout(b.rounds).length
122      $.ui.toast(review.verdict === 'approve' ? `🥊 KO in round ${n}: Codex approves ${key}` : `🥊 Round ${n}: ${tally(round)}`)
123      $.clock.after(SHOW_MS, () => void update($, ring, v => (v && v.landedAt === endedAt ? null : v)))
124    } else if (isWaiting) await update($, ring, () => null)
125    return r
126  }).catch(($, e, next) => next(e))
127
128  on('command.run', { command: 'codex-card' }, async $ => {
129    const key = await keyFor($, await $.session.cwd())
130    return { text: card(await loadBout($, key)) }
131  })
132
133  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
134    const r = await read($, ring)
135    if (!r || e.props.hasSurvey) return next(e)
136    const b = await read($, bout)
137    const at = Math.max(await read($, now), r.runningSince ?? 0, r.landedAt ?? 0)
138    const ui = $.ui.resolve(e)
139    const { Text } = ui
140    if (e.surface === 'desktop' && 'Svg' in ui) {
141      const W = widthFor(e.props.bodyColumns)
142      return <ui.Svg key="ring" source={ringSvg(W, b, r, at)} alt={b ? card(b).split('\n')[0] ?? '' : 'Codex is reviewing'} width={W} height={52} />
143    }
144    const rounds = b ? currentBout(b.rounds) : []
145    const last = rounds.at(-1)
146    const line =
147      r.runningSince !== undefined
148        ? `🥊 Codex is reviewing ${r.key}… ${Math.round((at - r.runningSince) / 1000)}s`
149        : last?.verdict === 'approve'
150          ? `🥊 KO in round ${rounds.length}: Codex approves ${r.key}`
151          : `🥊 Round ${rounds.length} on ${r.key}: ${last ? tally(last) : ''}`
152    return <Text color={last?.verdict === 'approve' && r.runningSince === undefined ? 'green' : 'yellow'}>{line}</Text>
153  })
154}
155

1// Pure logic for codex-corner: spotting a review run and reading its verdict.
2
3import type { Bout, Round, Severity } from '../types'
4
5/** The review kind a shell command runs through the Codex companion, or null. */
6export function reviewKind(command: string): Round['kind'] | 'result' | null {
7  const m = command.match(/codex-companion\.mjs["']?\s+(adversarial-review|review|result)\b/)
8  return m ? (m[1] as Round['kind'] | 'result') : null
9}
10
11/** The folder a command runs in, when it starts with cd. */
12export const dirOf = (command: string): string | undefined => command.match(/^\s*cd\s+("[^"]+"|'[^']+'|\S+)\s*&&/)?.[1]?.replace(/^["']|["']$/g, '')
13
14const SEVERITIES: Severity[] = ['critical', 'high', 'medium', 'low']
15
16/** A rendered Codex review (render.mjs in codex plugin 1.0.6) into a round's verdict and findings. */
17export function readReview(text: string): Pick<Round, 'verdict' | 'findings' | 'titles'> | null {
18  const v = text.match(/^Verdict:\s*(approve|needs-attention)\s*$/m)
19  const findings: Record<Severity, number> = { critical: 0, high: 0, medium: 0, low: 0 }
20  const titles: string[] = []
21  for (const m of text.matchAll(/^- \[(critical|high|medium|low)\] (.+?)(?: \(([^)]*)\))?$/gm)) {
22    findings[m[1] as Severity]++
23    if (titles.length < 4 && m[2]) titles.push(m[2])
24  }
25  if (!v && !/^# Codex /m.test(text)) return null
26  return { verdict: v ? (v[1] as Round['verdict']) : 'unknown', findings, titles }
27}
28
29/** The rounds since the last approve before the newest round: the current bout. */
30export function currentBout(rounds: Round[]): Round[] {
31  let start = 0
32  for (let i = 0; i < rounds.length - 1; i++) if (rounds[i]?.verdict === 'approve') start = i + 1
33  return rounds.slice(start)
34}
35
36export const total = (r: Round): number => SEVERITIES.reduce((n, s) => n + r.findings[s], 0)
37
38export const tally = (r: Round): string => {
39  const parts = SEVERITIES.filter(s => r.findings[s]).map(s => `${r.findings[s]} ${s}`)
40  return parts.length ? parts.join(' · ') : 'no findings'
41}
42
43export function card(b: Bout): string {
44  const rounds = currentBout(b.rounds)
45  if (!rounds.length) return `No Codex rounds for ${b.key} yet.`
46  const last = rounds[rounds.length - 1]
47  const head = last?.verdict === 'approve' ? `KO in round ${rounds.length}: Codex approved ${b.key}.` : `${b.key}: round ${rounds.length}, ${last?.verdict === 'needs-attention' ? 'Codex still has findings' : 'verdict unknown'}.`
48  const lines = [head]
49  rounds.forEach((r, i) => {
50    const mins = Math.max(1, Math.round((r.endedAt - r.startedAt) / 60_000))
51    lines.push(`  R${i + 1}  ${r.verdict.padEnd(15)} ${tally(r)}  (${mins} min)${r.titles[0] ? `  e.g. ${r.titles[0]}` : ''}`)
52  })
53  return lines.join('\n')
54}
55
56export function addRound(b: Bout | null, key: string, r: Round): Bout {
57  const rounds = [...(b && b.key === key ? b.rounds : []), r].slice(-30)
58  return { key, rounds }
59}
60

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 Severity = 'critical' | 'high' | 'medium' | 'low'
2
3export type Round = {
4  /** approve, needs-attention, or unknown when the output had no verdict. */
5  verdict: 'approve' | 'needs-attention' | 'unknown'
6  findings: Record<Severity, number>
7  /** The first finding titles, a few. */
8  titles: string[]
9  startedAt: number
10  endedAt: number
11  kind: 'adversarial-review' | 'review'
12}
13
14export type Bout = {
15  /** repo@branch */
16  key: string
17  rounds: Round[]
18}
19
20export type Ring = {
21  /** The bout on screen. */
22  key: string
23  /** A review is running now (since). */
24  runningSince?: number
25  /** When the last round landed; the band shows for a minute after. */
26  landedAt?: number
27}
28
29declare module 'claude-code' {
30  interface PluginState {
31    'codex-corner': {
32      ring: Ring | null
33      bout: Bout | null
34      now: number
35    }
36  }
37}
38