ottyl/tickets/031-timeline-markers-and-hover.md

031 — Timeline start/end markers, cursor hover, and live drag readout

Summary

LogTimeline (webapp/src/components/LogTimeline.tsx) shows a bar per bucket with only a per-bar title tooltip on native hover, and a drag selection that's silent until handleMouseUp fires onSelectRange. Add always-visible start/end labels, a hover readout that tracks the cursor, and a live-updating readout while dragging.

Scope

• Start/end markers: render the sequence index and timestamp of the first and last visible bucket at the two ends of the timeline (using domainStart/domainEnd, already computed at LogTimeline.tsx:52-53), always visible, not hover-only.
• Cursor hover readout: on onMouseMove (already wired for drag at handleMouseMove, LogTimeline.tsx:65), when not dragging, compute the bucket at or immediately before the cursor via xToMs and show its timestamp/count in a readout near the cursor — replacing reliance on the native per-bar title attribute (LogTimeline.tsx:135).
• Live drag readout: while dragging is true (LogTimeline.tsx:78), show the resolved start/end (xToMs(dragStartX)/xToMs(dragCurrentX)) updating on every handleMouseMove, not just after handleMouseUp resolves the final range — the drag rectangle already updates live (selRect, LogTimeline.tsx:79-84); this adds the numeric readout next to it.

Acceptance criteria

• The timeline always shows the sequence/timestamp of its first and last bucket, without needing to hover.
• Moving the mouse over the timeline (not dragging) shows the timestamp/count of the bucket under (or just before) the cursor, updating as the mouse moves.
• While dragging, the displayed start/end timestamps update continuously as the drag extends, matching the already-live selection rectangle.

Depends on

None — builds on the existing LogTimeline drag/hover plumbing.