feat(ui): give the prompt anchor rail its motion

[ARE404]

What

Follow-up to #2161, which deliberately shipped the rail as a static row of dashes so the positioning fix could be reviewed on its own. This is the motion, split out as you asked — judged on its own, and easy to decline in parts.

Three things, in descending order of how much they earn their keep:

1. The highlight travels. The bar marking the prompt being read is now one element anchored to the active tick with CSS anchor positioning — Astryx's own idiom for a sliding indicator, see its Outline. Changing the active prompt moves something the eye can follow instead of swapping two static ticks. This is the one I'd argue carries meaning rather than decoration: in a 90-prompt rail it shows the reader which way through the conversation they just moved, and how far.

The anchor sits on the tick's inner bar, not the tick — HoverCard sets its own anchor-name on the trigger it wraps, inline, and that beats any rule of ours. A pseudo-element cannot be an anchor, so the bar becomes a real element.

2. Hover falloff over three ticks. Reads as the rail leaning toward the pointer, and practically it makes a 3px target easier to aim at without permanently spending more width on it. Sibling selectors cannot express it (each tick is wrapped in its own display: contents element), so the rail tracks the hovered index and hands each tick its distance as a custom property.

3. Rest and arrival. The rail rests tucked toward the window edge and settles inward under the pointer; ticks slide in staggered rather than appearing. The stagger is capped at 20 ticks — a 90-prompt conversation should cascade in a third of a second, not nearly two.

All three are CSS transitions/animations on the existing --duration-* / --ease-* tokens, which is what puts them under the renderer's global prefers-reduced-motion rule rather than needing an opt-out of their own.

Testing, and where it stops

Worth stating plainly, because it surprised me: e2e-fixture renders cannot exercise motion. They carry data-maka-e2e-fixture, and base.css gives that animation: none !important and a 0.01ms transition cap so a fixture's rendered state never depends on the millisecond it settles. I found this writing a test to prove the reduced-motion claim — the durations were already collapsed, with no reduced-motion attribute and prefers-reduced-motion reporting no-preference.

So the new specs assert the end states the motion resolves to, which is what the fixture harness can actually see:

• the highlight lands on the active tick's centreline and right edge (±1px) at three scroll positions, and the active tick actually changes across them — so a highlight that never left the first tick fails;
• it keeps up with the active tick once the rail is past its cap and scrolling itself (the overflowing-rail fixture from fix(ui): pin the prompt anchor rail to the Astryx chat scrollport #2161) — a case the 24-turn fixture never reaches;
• the hover falloff steps down on both sides of the pointer and settles back to a uniform rail on leave.

What that leaves uncovered: that anything animated on the way there, and the tick entrance, which has no end state to check. The entrance was verified by hand in the running app. The spec's header comment now records this boundary so the next person adding to the file doesn't assume more coverage than exists.

The sliding highlight is the piece that fails silently — an unresolved anchor still renders the bar, just parked at a fixed offset — which is why it is asserted in a live window rather than read off the stylesheet.

Checks

build, typecheck, format:check, check-dead-css, check-a11y, check-console clean. 1698 desktop unit tests pass. Desktop e2e: 85 passed, with bot-onboarding.spec.ts flaking under full-suite load only (passes in isolation; it is a QR onboarding flow that never renders the rail). packages/ui has 2 failures in astryx-form-controls-localization — confirmed identical on an untouched main, unrelated to this change.

If you'd rather take less

The three parts are independent. If the falloff or the entrance read as too much for this surface, say which and I'll drop them and keep the travelling highlight — that is the one I think is worth having.

🤖 Generated with Claude Code

[Astro-Han]

Approved. The motion changes stay within the prompt-rail presentation layer, the #2161 geometry and overflowing-rail behavior remain intact, and the end-state coverage is proportionate to the fixture limitations. CI is green.

Non-blocking P3: the tick entrance keeps up to 360ms of animation-delay under prefers-reduced-motion because the global rule collapses animation-duration but not delay. This only causes a brief late appearance for reduced-motion users; it does not affect interaction, data, or performance. Fine to defer.