shadcn.io is not affiliated with official shadcn/ui
Pipeline Visualizer Monitoring Block for Ark UI
One CI/CD run as four stages, each a bar against the median of the last 20 runs with a word like +38% slower, a select of runs, and the chosen stage's twelve log lines in a dark terminal with a real Copy log.
Installation
Overview
See which stage of a build is slow, and read its output, with this pipeline viewer for React with Ark UI. It is Stagefold, a CI/CD run viewer, showing one run of a checkout service. A hairline frame with a plus mark on each corner holds a strip of four stages (Lint, Unit tests, Docker build, Deploy), each drawn as this run's duration against the median of the last 20 runs: a thin bar with a tick at the median and a word such as "+38% slower", "On time, 41s" or "Running, 2m 10s so far"; a stage that has not started has a dashed bar. A Native Select in the header picks one of three typed runs (a running one, a finished one, a failed one), and the header sentence is worked out from the run: the slowest stage, or the stage that failed and when. Choosing a stage shows its twelve output lines under the strip in a log region, and Copy log puts those lines on the real clipboard. The log is a terminal, so it stays dark in either theme; the panel around it follows the theme. Guides draw the frame and its bands. For CI dashboards, release rooms and anyone asking why the build got slower.
FAQ
How do I load my own runs?
Edit RUNS: each has a label, a branch, a codes string with one letter per stage (d done, r running, f failed, p pending) and the seconds per stage (the time so far for a running one). STAGES holds each stage's name and its median over the last 20 runs, and LOG_LINES the lines each stage prints. In your app map your CI provider's job timings to the same shape and compute the medians from your history.
How is slower decided?
The percentage is the run's seconds against the median for that stage; a difference under 10% reads as on time (SLOW_OVER). The header names the stage with the biggest rise, or the stage that failed. Change the constant to be stricter or looser.
What stays local, and what is real?
The runs and log lines are typed examples; nothing is built, fetched or deployed. Copy log is real: it writes the visible lines to the clipboard and says how many it copied, or says that copying is not available when the browser refuses.