Claude Code · reads only
DoneRead the goal and the code around it. Write a short plan to handoff.md: files to touch, risks, and the order of work.
PipelineStepNode
One step of a pipeline of agents: its role, agent, prompt and status. Pick it for the nodes of a pipeline graph or a list of steps; steps of one stage run in parallel.
- PipelineStepNode
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, PipelineStepNode
Stage 1
Stage 2
Codex · edits filesRunningFollow the plan in handoff.md. Change only the files it lists, keep the public API, and add tests for every new branch. Run the test suite before you finish and write what changed to handoff.md. If a step in the plan is wrong, say so in handoff.md instead of guessing.
Gemini · edits filesFailedUpdate the documentation for anything the plan changes.
Stage 3
Claude Code · reads onlyWaitingReview the diff against the plan. List problems by severity.
Dark theme, PipelineStepNode
Stage 1
Claude Code · reads onlyDoneRead the goal and the code around it. Write a short plan to handoff.md: files to touch, risks, and the order of work.
Stage 2
Codex · edits filesRunningFollow the plan in handoff.md. Change only the files it lists, keep the public API, and add tests for every new branch. Run the test suite before you finish and write what changed to handoff.md. If a step in the plan is wrong, say so in handoff.md instead of guessing.
Gemini · edits filesFailedUpdate the documentation for anything the plan changes.
Stage 3
Claude Code · reads onlyWaitingReview the diff against the plan. List problems by severity.
High contrast theme, PipelineStepNode
Stage 1
Claude Code · reads onlyDoneRead the goal and the code around it. Write a short plan to handoff.md: files to touch, risks, and the order of work.
Stage 2
Codex · edits filesRunningFollow the plan in handoff.md. Change only the files it lists, keep the public API, and add tests for every new branch. Run the test suite before you finish and write what changed to handoff.md. If a step in the plan is wrong, say so in handoff.md instead of guessing.
Gemini · edits filesFailedUpdate the documentation for anything the plan changes.
Stage 3
Claude Code · reads onlyWaitingReview the diff against the plan. List problems by severity.
UsageLink to the section Usage
import { PipelineStepNode } from '@skribly/ui/agents'<PipelineStepNode
title="Reviewer"
meta="Claude Code · reads only"
prompt={step.prompt}
status="running"
statusLabel={t('status.running')}
onSelect={() => show(step.id)}
isSelected={shown === step.id}
expandLabel={t('showAll')}
collapseLabel={t('showLess')}
/>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- An article with the role as a heading.
- Each status has its own icon shape and its word, so the frame colour is never the only sign; the running spinner slows under reduced motion.
- With onSelect the title is a toggle button that reports whether the step is shown.
- A long prompt is cut to three lines with a button that reports whether it is expanded.
- On a narrow screen the stages stack.
This demo runs through axe in all three themes on every test run. See what the tests check.