Create pixel art for catwalk visualization

[williamthorsen]

Description

Replace the catwalk visualization's geometric primitives (colored circles, rectangles, text overlays) with pixel art sprites, transforming the scene from placeholder graphics into a sci-fi factory aesthetic with a midnight blue background.

The catwalk currently renders agents as solid-color Excalibur Circle/Rectangle graphics. This epic introduces AI-generated 32×32 pixel art sprite sheets and a sprite loading pipeline, while keeping the existing actor interfaces and animation state machine from #183.

Key design decisions:

• 2 sprite sheets total: one shared subagent sheet (neutral metallic, role color applied as accent bar) + one unique orchestrator sheet (distinct silhouette)
• Midnight blue background (~#1a1a2e) replacing near-black, with blue-gray structural elements
• Reuses existing sprite-definitions.ts frame layout (4×3 grid, 32×32 frames) — animation timings and strategies work unchanged
• AI-generated assets only (PixelLab or similar)

Supersedes #12 (which targeted the FactoryScene SVG-to-PNG swap; FactoryScene is being discarded).

Tasks

• Generate AI pixel art sprite sheets: subagent (neutral metallic, 128×96 PNG) and orchestrator (distinct silhouette, 128×96 PNG)
• Create catwalk/sprites/sprite-sheet-urls.ts — Vite static asset imports for the 2 PNGs
• Create catwalk/sprites/catwalk-sprite-loader.ts — loads PNGs, creates cached SpriteSheet and Animation objects per state
• Update StationAgentActor — replace Circle + Text with sprite Animation + colored Rectangle accent bar
• Update OrchestratorActor — replace Rectangle + Text with sprite Animation
• Update CatwalkScene — call sprite loader during init; update background to midnight blue
• Update dimensions.ts — align sizing constants with 32×32 sprites
• Verify all existing tests pass (typecheck, lint, test)

Acceptance criteria

Must have

• 2 PNG sprite sheets in catwalk/sprites/assets/ (subagent + orchestrator), 128×96, 4×3 grid of 32×32 frames, transparent backgrounds
• catwalk-sprite-loader.ts loads PNGs via Vite static imports, creates cached Animation objects per state
• StationAgentActor renders sprite + colored accent bar instead of Circle + Text
• OrchestratorActor renders sprite instead of Rectangle + Text
• Background color updated from #111111 to midnight blue (~#1a1a2e)
• Animation states (idle, working, celebrating, concerned, resting) render correctly
• All existing tests pass (typecheck, lint, test)

Should have

• Subagent accent color uses existing ROLE_TYPE_COLORS per role type
• Sprites use neutral metallic palette that reads well against midnight blue
• Orchestrator has visually distinct silhouette from subagents

Nice to have

• Subtle background texture (faint grid or panel lines)
• Soft glow effect behind working machines
• Art style guide doc for future sprite iterations

Out of scope

• Layout compression for multi-catwalk stacking (separate issue)
• Pixel art for artifacts, chutes, gates (follow-up)
• FactoryScene changes (being discarded)

Relationship to other issues

• Builds on Add animated state transitions to catwalk actors #183 (animated state transitions) — the updateConfig() methods from Add animated state transitions to catwalk actors #183 are the hooks that trigger sprite animation switches. Can proceed in parallel.
• Supersedes Replace SVG agent sprites with PixelLab pixel art #12 — Replace SVG agent sprites with PixelLab pixel art #12 targeted FactoryScene which is being discarded.

[williamthorsen]

Implementation notes (from planning session, 2026-03-07)

These notes capture initial exploration and a proposed approach.
The implementer should verify assumptions and adapt as needed.

Design decisions

• 2 sprite sheets: One shared subagent (neutral metallic, accent color applied programmatically) + one unique orchestrator (distinct silhouette). Keeps AI generation work minimal.
• Midnight blue background (#1a1a2e): Visible factory floor, not a void. Structural elements in blue-gray (#2a2a4a).
• Reuses sprite-definitions.ts: Same 4×3 grid, 32×32 frames, same animation timings and strategies. The frame layout is a shared contract between code and art.
• AI-generated assets only: PixelLab or similar. No hand-drawn art.

Architecture

New files:

• catwalk/sprites/catwalk-sprite-loader.ts — loads 2 PNGs, creates cached Animation objects
• catwalk/sprites/sprite-sheet-urls.ts — Vite static asset imports
• catwalk/sprites/assets/subagent.png and orchestrator.png

Modified files:

• StationAgentActor.ts — sprite + accent bar instead of Circle + Text
• OrchestratorActor.ts — sprite instead of Rectangle + Text
• CatwalkScene.ts — sprite loading + midnight blue background
• dimensions.ts — align constants with 32×32

Unchanged: sprite-definitions.ts, differ, mappers, layout, ArtifactActor, ChuteActor, GateActor

Contrast hierarchy (brightest → dimmest)

1. Working machine + glow
2. Orchestrator
3. Idle machines
4. Artifacts
5. Rail / chutes / gates
6. Background

---

Plan artifact: ~/repos/vaults/code-artifacts/projects/codeassembly/tickets/222/20260307-1900Z_catwalk-pixel-art_plan.md