The state diagram, four ways
Metro stepper, ego-graph, path & horizon, and the full machine.
The StateDiagram's four route-centric views on a live run: the metro stepper with the traveled leg and amber current station, the 1-hop ego-graph, the path-and-horizon breadcrumb with live chips, and the full static machine.
Which product behavior does this surface prove?
The first few beats show the capability in the real Kitsoki UI.
The page is generated from the same catalog and deterministic fixtures used by QA.
Key beats
Every run begins here, in the story library — each card is a deterministic story graph kitsoki runs the same way every time. We'll showcase the state diagram on the kitsoki-dev design pipeline.
This story walks a design from intake through searching, brief, drafting, and published. As the run moves between rooms, the state diagram redraws your route live from the trace.
Click New session to create a fresh, independently-traced run of the pipeline.
A “metro stepper” centred on where the run is — derived entirely from the trace.
The bright leg is ground truth from the trace — each stop labelled with the intent that got you there (via go_idea, via discuss …).
Full recorded walkthrough (12 steps)
The amber station is the current room with its declared phase banner; the pills are the live moves available right now.
Each pill highlights its target room across the views and the timeline.
The muted, dashed road ahead is projection from the static graph — declared, not yet travelled.
Came-from → you-are-here → the rooms each live move leads to, with directed elbow connectors.
Provenance on top (room + via-intent), the current room as a hero card, the live exits as chips.
“Full” flips to the entire static graph — every phase and room — and back to your route.
Provenance, live moves, and projection — one feature, four views, all from the trace. Hit '?' anytime to replay this tour.