#162: Catwalk: Animated canvas demo of orchestrated dev workflow - #188
Merged
Conversation
…kflow HTML5 Canvas animation that visualizes a multi-phase orchestrated development workflow. An orchestrator agent walks a catwalk between stations (architecture, planning, coding, review, simplification, holistic review, outputs), dispatching and collecting artifacts while specialized agents work in parallel. Key features: - Data-driven scenario engine with 4 mode presets (vibe, lite, default, strict) controlling which stations are active and review depth; - Promise-based animation system (lerp, tween, chute travel, materialization) composed with async/await; - Full review-fix shuttle cycle with parallel dispatch and selective re-review across multiple rounds; - Mutable scene state model driving all rendering — animate by mutating state alone; - Reviewer verdict icons with per-round severity display showing progressive convergence; - Content-driven platform width computed from station/agent count with asymmetric extents for artifact overhang; - Playback controls (pause, speed, restart) with URL-persisted state; - Compact layout mode that hides absent stations and redistributes space - Mobile orchestrator platform with golden rail for transient artifacts; - Station input stacks showing versioned data flow with divider lines; - Completion celebration sequence with gate opening and agent pulsing. Three-file ES module structure: - scenarios.js: constants, station definitions, 4 mode configurations; - engine.js: animation choreography and phase sequencing; - index.html: rendering, controls, and canvas setup.
williamthorsen
marked this pull request as ready for review
March 5, 2026 10:41
williamthorsen
changed the title
williamthorsen
changed the title
williamthorsen
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #162
What
Adds a self-contained HTML5 Canvas animation that visualizes the full multi-phase orchestrated development workflow. An orchestrator agent walks a catwalk between stations (architecture, planning, coding, review, simplification, holistic review, outputs), dispatching and collecting artifacts while specialized agents work in parallel. Four scenario presets (vibe, lite, default, strict) control which stations are active and how deep reviews go.
Why
Provides a tangible, interactive demonstration of the CodeAssembly orchestration pipeline — making the abstract agent choreography visually concrete for stakeholders and developers exploring the system.
Details
Features
Refactoring