shadcn.io is not affiliated with official shadcn/ui
Single Line Timeline Block for Ark UI
One run of an import job as fourteen dense log lines, with a Toggle Group that switches the time column between the clock, time since the start and time since the previous step, and the slowest step marked in the log.
Installation
Overview
Read a run line by line, and in the time that suits the question, with this single line timeline for React with Ark UI. It is written for Runlane, a fictional job runner. A hairline frame with a plus mark on each corner holds one dense log of fourteen steps from queued to finished. Each line is a short tick, a time in a fixed-width monospaced column, the stage and, when the step counts rows, the rows it left. A Toggle Group in the header, "First column shows", switches the time column between the clock (09:12:04), the time since the start (+00:41) and the time since the previous step (+3 s). All three are worked out from the same ISO times, so they always agree, and the column is wide enough that no line moves. The step that waited longest for the one before it has a longer tick, heavier type and the word "slowest", and the foot sums the run: how many steps, how long it took and which was slowest. The ticks are the only marks on the line; there is no rail. Lines are cut short from the small breakpoint up and wrap on a phone. It is built from Toggle Group and Guides, with an entrance only. For job logs, deploy logs and any run where the question is where the time went. The run is example data.
FAQ
How do I change the steps?
Edit STEPS at the top of the file. Each has an id, an ISO time at with seconds, a stage and optional rows text. The waits between steps, the slowest step, the total and the three time formats are derived from the times, so nothing is typed twice. Steps that share a second show "+0 s" under the previous-step lens.
How do I add another clock?
Add an entry to MODES with an id, a label and a sentence for the status line, then give timeOf() a branch for it. Keep the result to about eight characters in the monospaced font so the column stays the same width.
How is the slowest step chosen?
By the time between a step and the one before it, in whole seconds, so the first line never wins. The longest wait gets the longer tick, semibold type and the word; if two steps tie, the first one in the log is marked.
What stays in the page, and how do I use a real run?
The chosen clock is local state. Nothing is fetched. For a real run, pass the job's events in the same shape with ISO times in UTC; the helpers use no locale, so the log reads the same on the server and in every browser.
Is it accessible?
The log is an ordered list and each time is a time element with its full ISO value, so the clock lens is always available to assistive technology. The toggle group has a name and its pressed item is a filled foreground tone, not only a colour change. A polite status line, hidden visually and there from load, says which clock is showing after a change.