pixel-pawns
Build the agent pawn state system from the first real Illustrator pawn art
Why
c47 produced the pixel-pawns design brief, and PawnAgent landed in the layer as a first-of-family scaffold with a single placeholder SVG. The first real art exports now exist (q-nuxt-layer/assets/svgs/pixel-pawns/), and consumers need a pawn that communicates agent status at a glance — working, idle, errored, needs-input — as shown in the reference screenshot (inbox/Screenshot 2026-07-26 at 12.10.41 PM.png).
Objective
The agent pawn renders all five states (working, idle, errored, needs-input, angel) by composing a base body (awake or sleeping) with decoration SVGs floated above the head. States are developed and visually tuned on the design site's component page. (Originally scoped static-only; the working state's binary decoration was later rebuilt as an animated component within this cycle.)
Scope
q-nuxt-layer/components/agent/Pawn.vue— state → body/decoration lookup, decoration overlays, above-head slotq-nuxt-layer/assets/svgs/pixel-pawns/— new art home (oldassets/pawns/tree deleted)app/pages/components/_demos/AgentPawn.vue— states row, scenarios, usage-context exampleapp/data/component-registry.ts— AgentPawn entry
Key Changes
- Reworked the agent pawn: composes body + decoration per state from
assets/svgs/pixel-pawns/lookup tables (afilename suffix = art iteration marker); unknown states warn and fall back to the base body - Decorations: binary block above-left while
working, red alert burst centered above onerrored;idle(zzz) andangel(halo) registered but art pending (dev warning until exports land) - Added default slot anchored above the head for consumer content (needs-input speech bubble)
- Deleted old placeholder
assets/pawns/agent/angel.svg; moved provider logos toassets/svgs/pixel-pawns/providers/ - Demo page: all-states row, working+provider, needs-input bubble, unknown-state, and inventory-row usage context
- Registry: updated description, state prop docs, slot entry
- Renamed
PawnAgent→AgentPawn(components/pawn/Agent.vue→components/agent/Pawn.vue); component joins theagentregistry group alongside AgentAvatar, and the now-emptypawngroup was removed AgentBinary(components/agent/Binary.vue) — the working decoration rebuilt as a live component from binarya.svg's two glyph paths: digits change by swapping a 0 and a 1 within a row (row widths stay constant), purple highlight runs re-roll independently; all timing prop-driven (flipMs/highlightMs/…) with demo sliders for manual dial-in. AgentPawn's working state now renders it instead of the static img;binarya.svgremains as the art source of record
Outcome
The state system shipped: AgentPawn (renamed from PawnAgent mid-cycle into the agent namespace) composes body + decoration per state, with the working state upgraded from static art to the animated AgentBinary component (digit swaps + roaming highlight runs, all timing prop-driven for manual dial-in). The lookup-table pattern means new art iterations and the pending decorations drop in by filename.
Carries forward: zzza.svg (idle) and haloa.svg (angel) Illustrator exports still pending — those states render bare with a dev warning. Animation timing defaults await Mark's dial-in on the AgentBinary demo sliders. Layer release (0.6.0) pending to propagate beyond local dev.
Learnings: decoration placement and pixel-exact sizing in layer components must use inline styles, not arbitrary-value Tailwind classes — the consumer's Tailwind scan doesn't reliably cover layer files (bit during c58, fixed here too).
Visual record
4 captures — heroes, page slices, and full-page renders. Click to view.




Artifacts
- initial-prompt.md
- initial-prompt.md