Session History Account Block for React

Edit LANES (one per device, with its browser and system, city and an icon kind) and SESSIONS: each has a lane, an sid, an ISO start (2026-10-12T07:55), an end (or an empty string while it is open), a how (open, signed-out, expired or revoked), the address and, for a revoked one, the session that revoked it. The chart's days, every bar's position and width, the lengths and the counts are worked out from those and from the typed NOW, so nothing is typed twice. Keep sessions in one lane from overlapping, as a bar would cover the one before.

Colour is never the only signal. An active session is solid and reaches the now line, an ended one is a lighter solid, and a revoked one is hatched with a cut mark and the word Revoked beside it; the legend under the chart shows the three. Every bar's name for a screen reader says when it started and how it stands ("Chrome on macOS, 12 Oct, 07:55, ended"), and its popover says the rest. The filter dims the other bars instead of removing them, so the chart never moves.

Tab reaches each bar in order, from the first lane to the last. Enter or Space opens its popover, Tab reaches the copy button inside it, and Escape closes it and returns focus to the bar. Only one popover is open at a time, and choosing another filter closes it. The copy button copies the whole session id and says so aloud; the popover shows it shortened.

Everything is typed: the chart reads no sessions, makes no request and revokes nothing; the popover only shows facts. To use it for real, build SESSIONS from your session store (start, end, how it ended, the address and its place) and pass the moment of the response as NOW. Sessions longer than the window can start before the first day: clamp their start to it. The addresses here are from the documentation ranges, so use your own, approximate as they are.

Seven days of bars would be about 40 pixels wide each, too small to press, so below the medium breakpoint the chart gives way to a list of the same sessions, newest first: browser and place, the address, when it started and ended with its length, and how it ended, under an outline badge that says Active, Ended or Revoked. The filter above it hides the sessions it doesn't match, and the list keeps its height, so the page doesn't jump.

On a wide screen the bars are real buttons in lane order, each named for its session, and the chart is a figure with a name; the same facts are in each popover. The lane labels are text, the time axis is drawn but not needed to understand a bar's name, and the live line is a polite status present from the start. On a phone the list carries the facts as text. The chart is read start to end in any language: the time axis never flips in a right-to-left page.