No Activity Log Empty State Block for React

The ticks, the four sample lines and the recording state stay in the page, and a reload or Start over takes them back. Every line is labelled Sample line and dated on the page's fixed Friday, 9 October 2026; nothing is recorded or sent. To make it real, start recording the ticked kinds through your backend where the code says so, and render the slots from the events it returns, newest first.

The timeline always has four slots, one per kind, so the panel never changes height when a line appears: a slot shows a dashed node and a ghost until its kind is ticked, then a solid node and the line. The slots are in the order of their times, newest first (the export at 09:41 on top, the sign-in at 08:42 at the foot), whatever order you tick them in.

It marks the feed as recording in this demo: the chip over the timeline changes from Not recording to Recording and the button goes quiet and reads Recording. With nothing ticked it says "Tick an event first." and moves focus to the first card; once recording it says it already is. Start over turns everything off again and puts focus back on the button.

Each card is a real checkbox named by its kind and described by its hint, reached with Tab and toggled with Space. The feed is a real list named by its heading, an empty slot reads as "Edits: not recorded", a filled one reads its line and its time, and a polite status line in the foot says what changed. The nodes and ghost lines are hidden from assistive technology.

The list comes first and the timeline sits under it, each slot keeping its height so a long sample line wraps inside it, and the foot with Start recording and Start over is pinned to the bottom of the screen while the panel is in view.

Yes. The two halves swap sides, the timeline's spine and nodes sit at the start of each slot in either direction, and each line, its label and its time are kept together so punctuation and digits do not jump to the wrong end.