Making the graph readable

The user found the friction graph confusing. Nodes positioned by grid-with-jitter don't communicate structure. The whole point of the graph is to reveal dependency chains and cycle locks — random positioning defeats that.

ELK's layered layout algorithm replaced the grid. Configuration: RIGHT direction (left-to-right flow), ORTHOGONAL edge routing, LAYER_SWEEP crossing minimization, 120px between layers, 60px between nodes. The computeElkLayout() function (102 lines) takes React Flow nodes and edges, delegates to elkjs, and returns positioned nodes.

Edges got typed semantics. dependency edges render as green solid lines. failure_cascade edges render as red dashed lines with CSS animation. Labels on each edge show the relationship type.

The user's reaction after seeing it running: "I like this better, this helps. Let's definitely lean into this." Then caught inconsistencies in the edge coloring — some labels were gray when they should have been red, some edges animated when they shouldn't have been. The kind of detail feedback that only comes from staring at your own friction graph.

Test script at scripts/test-elk-layout.ts (181 lines) verifies layout computation produces valid positions with correct left-to-right ordering.