Parked sketch — timeline hover-scrub for /transfer-windows/ (2026-06-04)

DARE.CO.UK · PARKED SKETCH · 2026-06-06

Mirrored from ~/.claude/.../memory/parked_sketch_timeline_hover_scrub_2026-06-04.md. This is a design sketch parked for future build — read for context, not as a current deliverable.

Hovering anywhere on the three-row timeline shows a ghost-tick + alternate-zone time pills at the cursor position; parked because the live now-tick’s pill positioning is currently fragile and adding a second pair on top would compound the mess — needs a clean architecture pass first

At https://status.gf.cx/transfer-windows/ — Dan asked for “show the rollover time on mouse-over of the line” as the next interaction layer; immediately self-flagged: “this is getting messy with alignments”. Right call. Parking with the design constraints captured.

What the feature would do

Hover anywhere on the three-row timeline → a faint vertical “hover-tick” follows the cursor → two pills appear (Asia time top, NYC time bottom, matching the live now-tick’s pill grammar) → both show the time-of-day at the cursor’s UTC position. Read as a scrubbable inspector — “if the rclone job lands at UTC 18:00, what is that NYC / Asia?”

The reader can now answer planning questions without doing the zone-math: hover over the column they’re considering, read the local times for each row off the pills.

Why parked, not built

The live now-tick’s pill stack is currently fragile: - .now-label (top) at top: -32px relative to .now - .now-label.bottom at bottom: 28px relative to .now - .now { top: 0; bottom: 90px } clips the line

The pills are CHILDREN of .now. Moving .now moves the pills. Clipping the line affects pill position. Multiple turns this session were spent un-tangling that arithmetic (line-stub-below-pill, pill-overlapping-legend, pill-overlapping-axis). Adding a second pair of pills on a hover-tick that shares the same .now-style nesting would double the surface area where things can drift.

Architecture for the clean rebuild

Build the hover layer with pills outside any line element:

• <div class="bands-overlay"> already exists as a positioning context; put both the hover-tick AND its pills directly inside it, as siblings. Pills positioned absolutely relative to bands-overlay, not relative to the tick. Tick position and pill position are then independent.
• Hover tick is a thin grey 2px vertical bar with pointer-events: none so it never intercepts hover events.
• Pills: same black pill / cream text styling as the live now-tick but with reduced opacity (~0.85) so the live now-tick is visually dominant. Or use a different accent colour for the hover-tick text (sage instead of zone-orange) to signal “this is exploratory, not live.”
• Mouseenter on .timeline → show hover layer, init position
• Mousemove on .timeline → update tick left + recompute pill text from the cursor’s UTC fraction
• Mouseleave on .timeline → hide hover layer

While doing this, also refactor the live now-tick to use the same pattern: pills as bands-overlay-level siblings, line as a self-contained .now element with no children. The arithmetic becomes trivial: - Line clip = where you want the line to end - Pill position = where you want the pill (no dependency on line) - A JS line-position writer just sets .now { left } and .now-pill-top / .now-pill-bottom { left } to the same %

Touch points when picked up

Cost vs payoff

~30–45 mins in a fresh session with clean cache. Payoff is twofold: the hover-scrub adds a real planning feature, AND the now-tick stack stops being a tinderbox for future tweaks.

Stop rules

• Don’t try to add the hover layer ON TOP of the current .now-as-pill- container structure. The mess will compound.
• Don’t ship the hover-tick without simultaneously refactoring the live now-tick — two competing architectures in the same surface is worse than either alone.
• Don’t bother on mobile (@media (hover: none)) — touch can’t scrub.

Cross-references

• feedback_iteration_loop_screenshot_red_box_2026-06-04 — the same surface that taught us screenshot+red-box loops compound; tinkering past the diminishing-return point breaks the principle
• project_apac_transfer_window_policy_2026-06-04 — the underlying policy this timeline visualises; scrub-anywhere supports “when-should-I-schedule-X?” reasoning the policy doesn’t answer for arbitrary moments