Cycles
Design · c57

pixel-pawns

archivedcreated 2026-07-26· last activity 2026-09-11

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 slot
  • q-nuxt-layer/assets/svgs/pixel-pawns/ — new art home (old assets/pawns/ tree deleted)
  • app/pages/components/_demos/AgentPawn.vue — states row, scenarios, usage-context example
  • app/data/component-registry.ts — AgentPawn entry

Key Changes

  • Reworked the agent pawn: composes body + decoration per state from assets/svgs/pixel-pawns/ lookup tables (a filename 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 on errored; idle (zzz) and angel (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 to assets/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 PawnAgentAgentPawn (components/pawn/Agent.vuecomponents/agent/Pawn.vue); component joins the agent registry group alongside AgentAvatar, and the now-empty pawn group 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.svg remains 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.

c57 hero
c57 slice
c57 slice
c57 full

Artifacts

  • initial-prompt.md
  • initial-prompt.md

Qpoint Brand Style Guide