# Pipeline

The stages of a build and a deploy as stations along a groove, like the program track of a machine. Each station is a socket with a lamp in it (green for a stage that passed, red for one that failed, amber and breathing for the one running, an empty socket for one that is waiting or was skipped) and under it the stage’s name, its state in words, how long it took and a Log key. Ink runs along the groove as far as the run has got. Wide, the stages stand in a row; narrow, they stand in a column with the groove down the side.

Kit part · With the Kit · https://tactileui.dev/parts/pipeline

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The onboarding’s groove: a recess with a line of ink drawn along it, now a row on a wide container and a column on a narrow one, chosen by the container’s own width rather than the page’s. The stations are the kit’s lamps in sockets; the Log key is the kit’s small key. The script moves a stage on and holds the breathing still when the pipeline leaves the screen, the same way the spinner does.

## Variants

- Partway · one stage running
- Everything passed
- A failure · the rest skipped
- Nothing started
- Narrow · a column with the groove down the side
- Long stage names wrap

## States

- Queued
- Running
- Passed
- Failed
- Skipped

## Props and options

| Name | Kind | Description |
| - | - | - |
| pipelineHTML() · pipelineStageHTML() · pipelineTime() · pipelineIso() · pipelineSays() · pipelineStateText() | function | The markup, a duration in words and for a time element, the sentence said for a change, and the word for a state. |

## Usage notes

Press Run the pipeline: each stage lights amber and breathes while it runs, then goes green or red with the time it took, and the status line says so. Press a Log key and the terminal under it prints that stage’s output. Scroll the page so the pipeline is off screen: the breathing holds still.

## Accessibility

- It is an ordered list with a name, and every stage’s state is a word on the page (Queued, Running, Passed, Failed, Skipped) as well as a lamp, so reading it is the same as seeing it.
- A stage that has not run has a dash that is hidden from a screen reader instead of a time it does not have.
- A change is said once, politely, as a sentence. The lamps are hidden from a screen reader because the words beside them say the same thing.
- The breathing is a slow change in the lamp’s own opacity and nothing else moves. It is held still when the pipeline is off screen, and under reduced motion there is no breathing at all: the amber lamp is simply lit, with the word Running beside it.
- A Log key with nothing to show is aria-disabled but keeps its place in the tab order, and says so when it is reached.

## Related parts

- [Onboarding](https://tactileui.dev/parts/onboarding): Setting something up: stations along a groove (done ones with their lamp lit, the current one a raised cap) and a checklist of check keys with a progress slot.
- [Status](https://tactileui.dev/parts/status): A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.
- [Tool call](https://tactileui.dev/parts/tool-call): A job ticket for each tool an agent runs: the tool’s name printed as a legend, a lamp on the stub, the state in words and the time on a small LCD. Its input and output sit on display glass behind a hinge, and when the tool needs your say, Deny and Approve stand at its foot.
- [Terminal](https://tactileui.dev/parts/terminal): A command prompt on dark glass. It is a display, not a shell: it prints what the page gives it, line by line, and keeps a scrollback to read back through. A bar along the top names it and carries one lamp, white while it waits and amber while lines are still arriving. Each line has a mark in its margin that says what it is (a command, a success, a warning or a failure), so a kind is never only a colour, and at the foot a block cursor waits at a prompt that does nothing. Under reduced motion every line arrives whole.