diff --git a/.changeset/pipeline-picture.md b/.changeset/pipeline-picture.md
new file mode 100644
index 00000000..60220890
--- /dev/null
+++ b/.changeset/pipeline-picture.md
@@ -0,0 +1,19 @@
+---
+"@openspec-ui/core": minor
+"@openspec-ui/server": minor
+"@openspec-ui/webui": minor
+---
+
+A Pipeline tab: every active change in the order it declares, what is
+running right now and whose run it is, and what can be started alongside
+what.
+
+The placement is derived in core from the readiness report, coordinates
+and all, so the tab and `openspec-ui-cli ready` cannot disagree and
+nothing in the view is measured. A declared blocker is drawn as a
+relation; a collision is not, because a collision is not an order. A
+cycle of blockers is named rather than placed.
+
+The readiness report now carries the blockers each change declares, and
+its shape and wording moved to a browser-safe leaf so both surfaces
+describe a collision in the same words.
diff --git a/docs/adr/0025-the-pipeline-picture-is-derived-and-drawn-by-hand.md b/docs/adr/0025-the-pipeline-picture-is-derived-and-drawn-by-hand.md
new file mode 100644
index 00000000..ae175aca
--- /dev/null
+++ b/docs/adr/0025-the-pipeline-picture-is-derived-and-drawn-by-hand.md
@@ -0,0 +1,165 @@
+# 0025: The Pipeline Picture Is Derived, and Drawn Without a Graph Library
+
+Status: Accepted
+
+Date: 2026-09-11
+
+## Context
+
+ADR-0024 established that whether two changes can run side by side is
+derived from what the repository already contains, never declared: from
+`blocked_by`, from two deltas naming the same capability, and from two
+branches having changed the same file. `change-readiness.ts` produces
+that report, and `openspec-ui-cli ready` prints it.
+
+The owner asked on 2026-09-11 for the same thing as a picture — a graph
+of the changes that are running and the ones that could run alongside
+them, laid out the way a CI service draws a pipeline, in a tab of its
+own — and, after a review of multi-person use, for it to show who is
+implementing each change.
+
+Two questions arise that a list never had to answer. Where does each
+node go? And what is drawn between them?
+
+The tempting answer to the first is a layout library — dagre, elk, or a
+whole diagramming component. The tempting answer to the second is "every
+relation we know about", which would put a line between two changes that
+collide.
+
+## Decision
+
+**The layout is derived from the readiness report, in core.**
+
+A change's column is its depth in the `blocked_by` order: a change with
+no blockers is column 0, and a change's column is one past the deepest
+change it is blocked by. Order within a column is by change name, so the
+picture is stable between reads — a node that moves when nothing changed
+reads as something having happened.
+
+This lives in `packages/core` beside the report it is computed from, not
+in the view. The CLI and the shell then place changes identically,
+because there is one placement. A second implementation in the browser
+would be free to drift, and the drift would be invisible: both pictures
+would look plausible.
+
+**Collisions are not edges.**
+
+`blocked_by` is an order: A before B, and an arrow means exactly that.
+A collision is not an order — two changes that would meet in one spec
+file have no precedence between them, and either may go first. An edge
+between them would assert a sequence the repository does not contain,
+and a reader would believe it, because it would look like every other
+edge in the drawing.
+
+So a collision is shown on the node it affects, as text, naming the
+other change and the reason. The `ready` command already reports them
+this way ("not with beta — both deliver a delta to ci-cli"), and the two
+surfaces should not describe the same fact differently.
+
+**The geometry is derived in core too, so nothing is measured.**
+
+The layout returns coordinates, not just an ordering: each node's
+position and size, and each edge's path, in abstract units. A node is an
+absolutely positioned control at `calc(var(--u) * x)`; the edges are one
+SVG whose `viewBox` is in the same units and whose rendered width is the
+same multiple of `--u`. One unit means one thing in both, so they line
+up without either being asked where the other ended up.
+
+The alternative was to lay nodes out with CSS and measure them —
+`getBoundingClientRect` per node, a `ResizeObserver`, and a re-run of
+the overlay after every layout pass and after fonts settle. That is the
+only part of this view that would have held state derived from a moment
+of rendering, the only part not checkable without a browser, and the
+only part with a failure mode that looks fine: an edge positioned from
+stale geometry is a line pointing at nothing.
+
+Deriving the coordinates instead makes edge placement exactly as
+testable as the ordering it comes from, in the same unit tests, with no
+DOM at all.
+
+`--u` is a `rem`, and not an `em`, for two reasons that both bite. A
+custom property holds a token rather than a computed length, so `1em`
+would resolve against the font size of whichever element used it — a
+card that set its own font size would move. And the shell fixes `body`
+at 14px, so an `em` inside it does not follow the reader's browser font
+setting at all. A `rem` does, which is the thing that was wanted.
+
+The cost is that a node card has a fixed size, and text longer than it
+is truncated with the full text available on the element. That is what
+a pipeline node looks like anyway, and the change name — the part a
+reader scans for — is the part that gets the room.
+
+**Nodes are DOM controls; SVG carries only the edges.**
+
+No graph library is added. The reasons are specific rather than general:
+
+- The layout is already decided by the time the view runs, so what a
+  layout library would contribute is the part this ADR puts in core.
+- A node must be a real focusable element with real text: this shell is
+  held to WCAG AA by a browser suite that runs axe on every screen
+  (ADR-0016's descendants), and a canvas or an SVG-only rendering makes
+  every node something that has to be given an accessible name by hand.
+  A `<button>` in a grid cell already is one.
+- `packages/webui` leaf modules are kept browser-safe and the bundle is
+  checked; adding a dependency for a drawing this size is a cost that
+  arrives on every page load.
+
+The SVG is marked `aria-hidden`: the relation an edge draws is already
+stated in words on the node it points from, so it adds nothing for a
+reader who cannot see it and would only repeat itself.
+
+**Below 720px the picture becomes a list.**
+
+Four columns of cards do not fit a phone, in any implementation. Rather
+than shrink until it is technically present and practically unreadable,
+the same nodes render as headed lanes — "can start now", then what
+follows — each stating in words what it waits on. Nothing is lost: that
+wording is what the edges were an illustration of, and is already what
+the picture offers a screen reader.
+
+## Consequences
+
+The picture cannot disagree with `openspec-ui-cli ready`, because both
+read one report and one layout.
+
+A cycle in `blocked_by` has no depth. It is reported as such rather than
+drawn, because a drawing that silently placed a cycle somewhere would be
+a wrong answer that looks like a right one.
+
+Edge routing is now arithmetic this project owns, which is work a
+library would have done. It is bounded — a path between two rectangles
+whose coordinates are already known — and it is checked by the same unit
+tests as the ordering.
+
+A very wide repository (many independent changes) makes a wide picture.
+It scrolls horizontally in its own container, which the shell already
+does for tables and code blocks.
+
+## Alternatives considered
+
+**A graph library.** Rejected above: it solves the part already solved
+in core, and costs the part that matters (accessible nodes, bundle
+size).
+
+**Drawing collisions as dashed edges.** Rejected: a reader distinguishes
+solid from dashed only if told to, and the thing being distinguished is
+"this is an order" from "this is emphatically not an order". Too much
+meaning on a line style.
+
+**Layout in the view.** Rejected: two implementations of one placement,
+drifting invisibly.
+
+**CSS-only connectors, no SVG at all.** Rejected on a concrete ground: a
+change is placed one past its *deepest* blocker, so an edge can skip a
+column — a change blocked by one thing at depth 0 and another at depth 1
+sits at depth 2 and has an edge spanning two columns. Borders on
+pseudo-elements draw a neighbour-to-neighbour connector well and that
+one wrong.
+
+**Measuring the laid-out nodes.** Rejected above: the only state derived
+from a moment of rendering, the only part needing a browser to check,
+and a failure mode that looks fine.
+
+**A Gantt chart.** Rejected: it would need durations, which do not
+exist. The repository knows order, not time. `MultiChangeTimelineView`
+already shows what is known about time and is not this.
diff --git a/docs/adr/README.md b/docs/adr/README.md
index b7222755..4291a175 100644
--- a/docs/adr/README.md
+++ b/docs/adr/README.md
@@ -31,5 +31,6 @@ Alternatives / Consequences.
 | [0022](0022-changes-run-side-by-side.md) | Changes run side by side, in git worktrees | Accepted |
 | [0023](0023-standalone-shell-visual-direction.md) | The standalone shell commits to an editor-native look | Accepted |
 | [0024](0024-parallel-readiness-is-derived.md) | Parallel readiness is derived, never declared | Accepted |
+| [0025](0025-the-pipeline-picture-is-derived-and-drawn-by-hand.md) | The pipeline picture is derived, and drawn without a graph library | Accepted |
 
 New architecture-impacting changes must add an ADR and reference it from the related OpenSpec change.
diff --git a/docs/images/standalone/harness-checkpoint.png b/docs/images/standalone/harness-checkpoint.png
index 4cd91355..fc7bf3fd 100644
Binary files a/docs/images/standalone/harness-checkpoint.png and b/docs/images/standalone/harness-checkpoint.png differ
diff --git a/docs/images/standalone/harness-settings.png b/docs/images/standalone/harness-settings.png
index cd7ff211..95e1a4fe 100644
Binary files a/docs/images/standalone/harness-settings.png and b/docs/images/standalone/harness-settings.png differ
diff --git a/docs/images/standalone/pipeline.png b/docs/images/standalone/pipeline.png
new file mode 100644
index 00000000..d5b247de
Binary files /dev/null and b/docs/images/standalone/pipeline.png differ
diff --git a/openspec/changes/a-graph-of-what-is-running/.openspec.yaml b/openspec/changes/a-graph-of-what-is-running/.openspec.yaml
new file mode 100644
index 00000000..bc49545b
--- /dev/null
+++ b/openspec/changes/a-graph-of-what-is-running/.openspec.yaml
@@ -0,0 +1,7 @@
+schema: spec-driven
+created: 2026-09-11
+follows:
+  - changes-run-side-by-side
+  - what-can-start-now
+  - a-declared-blocker-blocks
+  - a-lease-says-who
diff --git a/openspec/changes/a-graph-of-what-is-running/design.md b/openspec/changes/a-graph-of-what-is-running/design.md
new file mode 100644
index 00000000..7423a71e
--- /dev/null
+++ b/openspec/changes/a-graph-of-what-is-running/design.md
@@ -0,0 +1,95 @@
+# Design
+
+See `docs/adr/0025-the-pipeline-picture-is-derived-and-drawn-by-hand.md`
+for the decisions this change is built on: the layout is derived in
+core, collisions are not edges, and the drawing is DOM plus an SVG
+overlay rather than a graph library.
+
+## Decision: one report, two surfaces
+
+The tab draws `ChangeReadinessReport` and nothing else. It computes no
+fact of its own — not "is this running", not "can these two go
+together", not "what is this waiting on".
+
+The reason is specific. `openspec-ui-cli ready` and this tab answer the
+same question, and a second derivation would be free to drift from the
+first. The drift would not announce itself: both surfaces would keep
+looking plausible, and the one a person happened to be using would be
+the one they believed.
+
+So the report travels whole — a server endpoint, an extension bridge
+message — and the layout is a pure function of it, in core.
+
+## Decision: depth, not position
+
+A node's column is its depth in the `blocked_by` order: zero where
+nothing blocks it, otherwise one past the deepest thing it is blocked
+by. Within a column, changes are ordered by name.
+
+Ordering by name rather than by state is deliberate. Sorting running
+changes first would move a node whenever a run started or ended, and a
+node that moves reads as a change having been re-planned. The picture
+should change where the repository changed.
+
+## Decision: a cycle is reported, not drawn
+
+`blocked_by` can contain a cycle — A blocked by B blocked by A. It is
+already possible today and nothing rejects it.
+
+A cycle has no depth, so there is no column to put it in. The layout
+returns the cycle as a named list rather than choosing somewhere, and
+the tab says so above the picture. A drawing that quietly placed one
+would be a wrong answer that looks like a right one, and would be
+believed for exactly as long as nobody checked.
+
+## Decision: what a node says
+
+- Its change name, as a control that opens the change.
+- Its state: running, ready, or blocked.
+- Running: where it is running and, where the lease recorded one, the
+  git author of the run. Called "git author" and not "user", per
+  `a-lease-says-who` — it is self-declared and nothing is gated on it.
+- Blocked: what it is waiting on.
+- Ready: what it can start alongside, and for each change it cannot
+  join, that change and the reason. This is the collision, in words,
+  on the node it affects.
+
+## Decision: refreshed while visible, not while hidden
+
+The lease heartbeat is five seconds and staleness is twenty, so a
+picture older than that is misleading about what is running.
+
+The tab polls while it is the active tab and stops when it is not.
+Reading the report walks the changes directory and shells out to git,
+which is not work to be doing behind a tab nobody is looking at. The
+tab's content is not loaded at all until it is first opened, for the
+same reason.
+
+## Non-Goals
+
+Editing the graph. `blocked_by` is stated in a change's own file, and a
+picture that let it be dragged would be a second way to write something
+the repository already has one way to write.
+
+Durations, or anything time-shaped. The repository knows order, not
+time; `MultiChangeTimelineView` covers what is known about time.
+
+Archived changes. The question this answers is where the work is now.
+
+Showing a person as anything but a git author. There is no identity
+model here and this change does not add one.
+
+## Risks / Trade-offs
+
+Edge positions are measured from laid-out nodes, so they must be
+recomputed on resize and after fonts settle. A stale edge is a line
+pointing at nothing, which is worse than no line — so the overlay
+renders from measured geometry on every layout pass rather than caching
+it.
+
+A repository with many independent changes draws wide. It scrolls in
+its own container; the page body does not scroll sideways.
+
+The report is a moment, not a subscription: between two polls a run can
+start and finish. The tab shows when it last read, so a picture is never
+presented as more current than it is.
diff --git a/openspec/changes/a-graph-of-what-is-running/proposal.md b/openspec/changes/a-graph-of-what-is-running/proposal.md
new file mode 100644
index 00000000..2ddc23b0
--- /dev/null
+++ b/openspec/changes/a-graph-of-what-is-running/proposal.md
@@ -0,0 +1,52 @@
+# A graph of what is running
+
+## Why
+
+Changes can run side by side. Which ones may is already decided, and
+already answerable: `blocked_by` states an order, `change-readiness`
+derives collisions, and the workspace lease says what is running right
+now and — since `a-lease-says-who` — whose run it is.
+
+All of that is only readable as a list. `openspec-ui-cli ready` prints
+three headings; the shell shows changes as rows. Neither shows the
+*shape* of the work: that four changes are waiting on one, that two of
+the ready ones cannot start together, that the thing everything is
+queued behind is the one nobody is running.
+
+A list answers "what is the state of this change". A picture answers
+"where is the work" — which is the question somebody asks when they
+open the tool having been away, or when two people are deciding what to
+pick up.
+
+Sequential work is not a separate thing to draw. A chain of changes each
+blocked by the previous is a graph one lane wide; independent changes
+are lanes side by side. One drawing covers both, which is why this is a
+graph and not a Gantt chart or a second list.
+
+## What Changes
+
+- A **Pipeline** tab in the shell: every active change as a node, laid
+  out in columns by how deep it sits in the `blocked_by` order, with
+  edges drawn for declared blockers.
+- Each node carries its state — running, ready, blocked — and a running
+  node names who is implementing it, from the lease's git author.
+- Collisions are **not** drawn as edges. Two changes that would collide
+  are not in an order; drawing a line between them would say they were.
+  They are shown on the node that is affected, as the reason it cannot
+  join something else.
+- `change-readiness` reaches the shell: a server endpoint, an extension
+  bridge message, and a client.
+- Nothing new is computed for the picture. Every fact it draws is one
+  `change-readiness` already derives (ADR 0024), so the tab and
+  `openspec-ui-cli ready` cannot disagree.
+
+## Impact
+
+- `packages/core` — the readiness report gains a layout that is derived
+  from it, so the CLI and the shell place changes identically.
+- `packages/server`, `packages/extension` — one endpoint and one bridge
+  message each, carrying the report that already exists.
+- `packages/webui` — a new tab, a new component, and its stylesheet
+  layer.
+- No new dependency. See the design note on why the drawing is DOM and
+  SVG rather than a graph library.
diff --git a/openspec/changes/a-graph-of-what-is-running/specs/shared-ui/spec.md b/openspec/changes/a-graph-of-what-is-running/specs/shared-ui/spec.md
new file mode 100644
index 00000000..fbfcf1fb
--- /dev/null
+++ b/openspec/changes/a-graph-of-what-is-running/specs/shared-ui/spec.md
@@ -0,0 +1,92 @@
+## ADDED Requirements
+
+### Requirement: The shell shows the order of the work as a picture
+
+The shell SHALL provide a view that lays out every active change as a
+node, positioned by its place in the declared `blocked_by` order, with
+changes that block nothing and are blocked by nothing shown side by
+side.
+
+The view SHALL draw a relation only where the repository states one. A
+declared blocker SHALL be drawn as a relation from the blocker to the
+change it blocks.
+
+The view SHALL be built only from facts already derived for the
+readiness report, so that it and the terminal's report of the same
+question cannot disagree.
+
+#### Scenario: Changes in a declared order
+
+- **WHEN** a change declares that it is blocked by another
+- **THEN** it is placed after that change, and the relation is drawn
+
+#### Scenario: Changes with no relation between them
+
+- **WHEN** two changes declare nothing about each other
+- **THEN** they are placed side by side, and nothing is drawn between
+  them
+
+#### Scenario: A cycle of declared blockers
+
+- **WHEN** the declared blockers form a cycle
+- **THEN** the changes in it are named as a cycle rather than placed,
+  because a cycle has no place in an order
+
+### Requirement: A node says what state its change is in, and who is running it
+
+Each node SHALL state whether its change is running, ready to start, or
+blocked.
+
+A running change SHALL name where it is running and, where the lease
+recorded one, the git author of the run — as attribution, described as
+a git author and never as an established identity.
+
+A blocked change SHALL name what it is waiting on. A change that is
+ready SHALL name what it can be started alongside.
+
+#### Scenario: A change being implemented
+
+- **WHEN** a run holds a change's working directory and its lease
+  recorded a git author
+- **THEN** the node says the change is running and names that author
+
+#### Scenario: A run whose lease recorded no author
+
+- **WHEN** a run holds a change's working directory and no git identity
+  was recorded
+- **THEN** the node says the change is running, and claims nothing about
+  who is running it
+
+### Requirement: A collision is shown on the change it affects, not as a relation
+
+Where two changes cannot be started together, the view SHALL show that
+on the changes affected, naming the other change and the reason.
+
+It SHALL NOT draw a collision as a relation between them. A collision is
+not an order, and a drawn relation would assert one that the repository
+does not contain.
+
+#### Scenario: Two ready changes that would collide
+
+- **WHEN** two changes are both ready and would collide
+- **THEN** each says it cannot be started alongside the other, and why,
+  and nothing is drawn between them
+
+### Requirement: The picture says how current it is
+
+The view SHALL re-read while it is being looked at, and SHALL NOT
+re-read while it is not.
+
+It SHALL show when it last read, so that a picture is never presented as
+more current than it is.
+
+#### Scenario: The view is not being looked at
+
+- **WHEN** another view is active
+- **THEN** the picture is not re-read
+
+#### Scenario: A change starts running while the view is open
+
+- **WHEN** a run takes a change's working directory while the view is
+  active
+- **THEN** the next read shows that change as running
diff --git a/openspec/changes/a-graph-of-what-is-running/tasks.md b/openspec/changes/a-graph-of-what-is-running/tasks.md
new file mode 100644
index 00000000..7a8ad9b6
--- /dev/null
+++ b/openspec/changes/a-graph-of-what-is-running/tasks.md
@@ -0,0 +1,139 @@
+Whether changes can run side by side is decided and answerable, and only
+readable as a list. A list says what state one change is in; it does not
+show that four changes are queued behind one nobody is running.
+
+## 1. Where each change goes
+
+- [x] 1.1 `change-layout.ts` in core: a pure function from
+  `ChangeReadinessReport` to columns of nodes. In core beside the report
+  it is derived from, not in the view — the CLI and the shell then place
+  changes identically, and a second implementation in the browser would
+  be free to drift invisibly.
+- [x] 1.2 A change's column is its depth in the `blocked_by` order: zero
+  where nothing blocks it, otherwise one past the deepest change it is
+  blocked by.
+- [x] 1.3 Within a column, ordered by change name. Not by state: sorting
+  running changes first would move a node whenever a run started, and a
+  node that moves reads as the plan having changed.
+- [x] 1.4 A cycle is returned as a named list rather than placed. A
+  cycle has no depth, and a drawing that quietly put it somewhere would
+  be a wrong answer that looks like a right one.
+- [x] 1.5 Edges are the declared blockers only. Collisions are carried
+  on the node they affect, never as a relation (ADR 0025).
+- [x] 1.6 Coordinates, not only an ordering: each node's position and
+  size and each edge's path, in abstract units. So that nothing in the
+  view is measured — the alternative held the only state derived from a
+  moment of rendering, needed a browser to check, and failed in a way
+  that looks fine (a line pointing at nothing).
+- [x] 1.7 An edge leaves its blocker's right edge and enters the blocked
+  change's left edge, routed so one that skips a column does not run
+  through a node in between.
+
+## 2. Getting the report to the shell
+
+- [x] 2.1 A server endpoint returning `readChangeReadiness` for the
+  workspace, in the shape core already returns.
+- [x] 2.2 ~~The extension answers the same request over its bridge, so
+  both hosts read one report.~~ **Dropped, deliberately.** The VS Code
+  embed shows one tab — `ALLOWED_TABS_VSCODE_EMBED` is `run-a-command`
+  and nothing else — so a bridge operation for this tab would be an
+  operation nothing can call. That is the thing
+  `a-setting-reads-as-a-setting` was about. Should the embed ever show
+  this tab, the operation is added then, against a caller.
+- [x] 2.3 A webui client, browser-safe: it asks, it does not derive.
+  `packages/server/src/static.test.ts` is the gate.
+
+## 3. The tab
+
+- [x] 3.1 A **Pipeline** tab in `ALL_TABS`, and its panel.
+- [x] 3.2 Not loaded until first opened, and re-read only while active.
+  Reading the report walks the changes directory and shells out to git,
+  which is not work to do behind a tab nobody is looking at.
+- [x] 3.3 Nodes as real controls, absolutely positioned at the
+  coordinates core returned — a `<button>` is already focusable and
+  already has an accessible name, which a canvas or an SVG-only drawing
+  would each need given by hand.
+- [x] 3.4 One SVG for the edges, its `viewBox` in the same units and its
+  width the same multiple of `--u`, so it lines up without either half
+  being asked where the other ended up. No measurement, no
+  `ResizeObserver`. Marked `aria-hidden`: what an edge draws is already
+  stated in words on the node it points from.
+- [x] 3.5 `--u` is a `rem`, so the picture follows the reader's browser
+  font setting. Not an `em`: a custom property holds a token, so `1em`
+  would resolve against the font size of whatever element used it, and
+  the shell fixes `body` at 14px so an `em` would not follow that
+  setting at all.
+- [x] 3.6 Each node states its change name as a control that opens the
+  change, and its state.
+- [x] 3.7 A running node names where it is running and, where the lease
+  recorded one, the git author — called a git author, never a user
+  (`a-lease-says-who`). A run whose lease recorded none claims nothing
+  about who is running it.
+- [x] 3.8 A blocked node names what it waits on; a ready node names what
+  it can start alongside, and for each change it cannot join, that
+  change and the reason.
+- [x] 3.9 Text longer than a node card is truncated with the whole of it
+  still on the element. The change name gets the room: it is what a
+  reader scans for.
+- [x] 3.10 A cycle is stated above the picture rather than drawn.
+- [x] 3.11 When it last read, shown. The report is a moment, not a
+  subscription, and must not be presented as more current than it is.
+- [x] 3.12 Scrolls horizontally in its own container. The page body
+  never scrolls sideways — the same rule the shell's tables already
+  follow.
+
+## 4. Appearance
+
+- [x] 4.1 Styled in `shell-ui.ts`'s layer, from the existing tokens
+  only. No colour literal outside `:root` — the guard in
+  `shell-ui.test.ts` enforces it.
+- [x] 4.2 State is not carried by colour alone. A reader who cannot
+  distinguish two hues must still be able to tell a running change from
+  a blocked one.
+- [x] 4.3 Below 720px the picture becomes headed lanes — "can start
+  now", then what follows — each node stating in words what it waits on,
+  and no edges. Four columns of cards do not fit a phone in any
+  implementation, and shrinking until it is technically present and
+  practically unreadable is the worse answer. Nothing is lost: that
+  wording is what the edges illustrate, and is already what the picture
+  offers a screen reader.
+
+## 5. Tests
+
+- [x] 5.1 Core: a chain of blockers lands in successive columns; changes
+  with no relation land side by side.
+- [x] 5.2 Core: within a column, name order, and stable across two calls
+  where only run state differs.
+- [x] 5.3 Core: a cycle is returned as a cycle and placed nowhere.
+- [x] 5.4 Core: collisions never appear as edges.
+- [x] 5.5 Core: an edge that skips a column is routed clear of the nodes
+  between, and the picture's own extent covers every node and path.
+- [x] 5.6 Server: the endpoint returns the report, refuses a workspace
+  outside the configured one, and refuses a body with no workspace.
+- [x] 5.7 webui: a running node names the git author; one without an
+  author claims nothing.
+- [x] 5.8 webui: a ready node names what it cannot join and why, and no
+  edge exists between them.
+- [x] 5.9 webui: not read while the tab is inactive.
+- [x] 5.10 Browser suite: the tab passes axe at WCAG AA, and the
+  screenshot under `docs/images/standalone/` is regenerated. The two
+  harness screenshots regenerated too — the tab strip they show now
+  carries this tab, so leaving them would have documented a screen that
+  had stopped existing.
+
+## 6. Verification
+
+- [x] 6.1 This change validates strictly. `check(validate-change)`
+- [x] 6.2 `npm run verify` unpiped, after the last edit, with everything
+  staged. Run of 2026-09-12: typecheck, lint and test all passed —
+  cli 107, core 1092, extension 327, server 83, webui 389; 1998 in all.
+- [x] 6.3 The whole browser suite, not a selected spec. 16 of 16 passed,
+  including this tab's axe run at WCAG AA and its phone-width check.
+- [x] 6.4 A pending changeset exists. `check(changeset-present)`
+- [ ] 6.5 **Delegated to `claude-cli`**: with two changes actually
+  running in their own working directories, open the tab and check that
+  each names the right author and the right state, and that stopping one
+  is reflected on the next read. Evidence: the leases, and the tab
+  before and after. Unit tests drive the view with a written report;
+  only real runs show that the report a live workspace produces is the
+  one the picture draws.
diff --git a/packages/cli/src/ready-command.test.ts b/packages/cli/src/ready-command.test.ts
index e742c785..c0e81fa4 100644
--- a/packages/cli/src/ready-command.test.ts
+++ b/packages/cli/src/ready-command.test.ts
@@ -12,6 +12,7 @@ const REPORT: ChangeReadinessReport = {
   changes: [
     {
       changeName: "running-one",
+      blockers: [],
       run: {
         state: "running",
         worktreePath: "/repo.worktrees/running-one",
@@ -24,6 +25,7 @@ const REPORT: ChangeReadinessReport = {
     },
     {
       changeName: "alpha",
+      blockers: [],
       run: { state: "ready" },
       capabilities: ["ci-cli"],
       worktreePath: "/repo.worktrees/alpha",
@@ -34,6 +36,7 @@ const REPORT: ChangeReadinessReport = {
     },
     {
       changeName: "gamma",
+      blockers: [],
       run: { state: "ready" },
       capabilities: [],
       canJoin: [],
@@ -42,6 +45,7 @@ const REPORT: ChangeReadinessReport = {
     },
     {
       changeName: "waiting",
+      blockers: ["alpha"],
       run: { state: "blocked", blockedBy: ["alpha"] },
       capabilities: [],
       canJoin: [],
@@ -94,7 +98,14 @@ describe("readyCommand", () => {
       {
         ...io,
         read: () => Promise.resolve({
-          changes: [{ changeName: "waiting", run: { state: "blocked", blockedBy: ["x"] }, capabilities: [], canJoin: [], blockedFrom: [] }],
+          changes: [{
+            changeName: "waiting",
+            blockers: ["x"],
+            run: { state: "blocked", blockedBy: ["x"] },
+            capabilities: [],
+            canJoin: [],
+            blockedFrom: [],
+          }],
         } satisfies ChangeReadinessReport),
       },
     );
diff --git a/packages/core/src/browser.ts b/packages/core/src/browser.ts
index 80b259e6..c2610b8f 100644
--- a/packages/core/src/browser.ts
+++ b/packages/core/src/browser.ts
@@ -175,3 +175,11 @@ export * from "./verified-agent-versions.js";
 // answer before they can show a streamed reply as prose rather than as
 // the slices it arrived in.
 export * from "./acp-streamed-text.js";
+// The readiness report's shape, the words a collision is described in,
+// and where each change goes in the picture. Two leaf modules with only
+// type imports of the Node-side readers that fill the report in — the
+// shell draws what the host read, and places it exactly as the terminal
+// does (ADR 0025). `change-readiness.ts` itself stays Node-only: it
+// walks the changes directory and shells out to git.
+export * from "./change-readiness-facts.js";
+export * from "./change-layout.js";
diff --git a/packages/core/src/change-layout.test.ts b/packages/core/src/change-layout.test.ts
new file mode 100644
index 00000000..43d0542e
--- /dev/null
+++ b/packages/core/src/change-layout.test.ts
@@ -0,0 +1,259 @@
+import { describe, expect, it } from "vitest";
+import {
+  COLUMN_GAP,
+  NODE_HEIGHT,
+  NODE_WIDTH,
+  ROW_GAP,
+  layoutChanges,
+  type ChangeLayoutEdge,
+} from "./change-layout.js";
+import type { ChangeReadiness, ChangeReadinessReport } from "./change-readiness.js";
+
+function change(changeName: string, overrides: Partial<ChangeReadiness> = {}): ChangeReadiness {
+  return {
+    changeName,
+    blockers: [],
+    run: { state: "ready" },
+    capabilities: [],
+    canJoin: [],
+    blockedFrom: [],
+    ...overrides,
+  };
+}
+
+function report(...changes: ChangeReadiness[]): ChangeReadinessReport {
+  return { changes };
+}
+
+function relations(edges: ChangeLayoutEdge[]): string[] {
+  return edges.map((edge) => `${edge.from} -> ${edge.to}`);
+}
+
+describe("layoutChanges", () => {
+  it("puts a chain of blockers in successive columns", () => {
+    const layout = layoutChanges(report(
+      change("first"),
+      change("second", { blockers: ["first"], run: { state: "blocked", blockedBy: ["first"] } }),
+      change("third", { blockers: ["second"], run: { state: "blocked", blockedBy: ["second"] } }),
+    ));
+
+    expect(layout.columns).toEqual([["first"], ["second"], ["third"]]);
+    expect(relations(layout.edges)).toEqual(["first -> second", "second -> third"]);
+  });
+
+  it("puts changes with no relation side by side", () => {
+    const layout = layoutChanges(report(change("alpha"), change("beta"), change("gamma")));
+
+    // Sequential work is a graph one lane wide; this is the other shape,
+    // and it is the same drawing.
+    expect(layout.columns).toEqual([["alpha", "beta", "gamma"]]);
+    expect(layout.edges).toEqual([]);
+  });
+
+  it("places a change one past the deepest thing it waits on", () => {
+    const layout = layoutChanges(report(
+      change("root"),
+      change("middle", { blockers: ["root"] }),
+      // Blocked by one at depth 0 and one at depth 1: it belongs after
+      // both, not after the first one it happens to name.
+      change("last", { blockers: ["root", "middle"] }),
+    ));
+
+    expect(layout.columns).toEqual([["root"], ["middle"], ["last"]]);
+  });
+
+  it("orders a column by name, and not by run state", () => {
+    const first = layoutChanges(report(
+      change("zebra"),
+      change("apple"),
+      change("mango", { run: { state: "running", worktreePath: "/w", holder: holder() } }),
+    ));
+    const second = layoutChanges(report(
+      change("zebra", { run: { state: "running", worktreePath: "/w", holder: holder() } }),
+      change("apple"),
+      change("mango"),
+    ));
+
+    // A node that moved because a run started would read as the plan
+    // having changed. Only the repository moves nodes.
+    expect(first.columns).toEqual([["apple", "mango", "zebra"]]);
+    expect(second.columns).toEqual(first.columns);
+  });
+
+  it("draws no relation to a blocker that is not a change here", () => {
+    // A blocker that has archived is satisfied and is no longer a node,
+    // so there is nothing to point at.
+    const layout = layoutChanges(report(change("alone", { blockers: ["long-since-archived"] })));
+
+    expect(layout.columns).toEqual([["alone"]]);
+    expect(layout.edges).toEqual([]);
+  });
+
+  it("names a cycle rather than placing it", () => {
+    const layout = layoutChanges(report(
+      change("egg", { blockers: ["chicken"] }),
+      change("chicken", { blockers: ["egg"] }),
+      change("bystander"),
+    ));
+
+    expect(layout.cycles).toEqual([["chicken", "egg"]]);
+    expect(layout.unplaced).toEqual(["chicken", "egg"]);
+    expect(layout.columns).toEqual([["bystander"]]);
+  });
+
+  it("treats a change that blocks itself as a cycle of one", () => {
+    const layout = layoutChanges(report(change("ouroboros", { blockers: ["ouroboros"] })));
+
+    expect(layout.cycles).toEqual([["ouroboros"]]);
+    expect(layout.columns).toEqual([]);
+  });
+
+  it("cannot place what waits on a cycle", () => {
+    const layout = layoutChanges(report(
+      change("egg", { blockers: ["chicken"] }),
+      change("chicken", { blockers: ["egg"] }),
+      change("breakfast", { blockers: ["egg"] }),
+    ));
+
+    // There is no column one past nowhere.
+    expect(layout.cycles).toEqual([["chicken", "egg"]]);
+    expect(layout.unplaced).toEqual(["breakfast", "chicken", "egg"]);
+    expect(layout.columns).toEqual([]);
+  });
+
+  it("never turns a collision into a relation", () => {
+    const layout = layoutChanges(report(
+      change("alpha", {
+        blockedFrom: [{ changeName: "beta", collisions: [{ kind: "shared-capability", capability: "ci-cli" }] }],
+      }),
+      change("beta", {
+        blockedFrom: [{ changeName: "alpha", collisions: [{ kind: "shared-capability", capability: "ci-cli" }] }],
+      }),
+    ));
+
+    // Two changes that would meet in one spec file have no precedence
+    // between them; a line would assert one (ADR 0025).
+    expect(layout.edges).toEqual([]);
+    expect(layout.columns).toEqual([["alpha", "beta"]]);
+  });
+
+  it("carries each change through to its node", () => {
+    const running = change("live", { run: { state: "running", worktreePath: "/w", holder: holder("ada@example.com") } });
+    const layout = layoutChanges(report(running));
+
+    expect(layout.nodes).toEqual([
+      { change: running, column: 0, row: 0, x: 0, y: 0, width: NODE_WIDTH, height: NODE_HEIGHT },
+    ]);
+  });
+
+  it("gives every node a place, so nothing has to be measured", () => {
+    const layout = layoutChanges(report(
+      change("root"),
+      change("alpha", { blockers: ["root"] }),
+      change("beta", { blockers: ["root"] }),
+    ));
+
+    const at = (name: string) => layout.nodes.find((node) => node.change.changeName === name);
+    expect(at("root")).toMatchObject({ x: 0, y: 0 });
+    expect(at("alpha")).toMatchObject({ x: NODE_WIDTH + COLUMN_GAP, y: 0 });
+    expect(at("beta")).toMatchObject({ x: NODE_WIDTH + COLUMN_GAP, y: NODE_HEIGHT + ROW_GAP });
+  });
+
+  it("runs an edge between neighbours out of one card and into the next", () => {
+    const layout = layoutChanges(report(change("first"), change("second", { blockers: ["first"] })));
+
+    const [edge] = layout.edges;
+    const middle = NODE_HEIGHT / 2;
+    // Same row, so the turn in the gap collapses and the line is
+    // straight — the corners that are not turns are not reported.
+    expect(edge?.points).toEqual([
+      { x: NODE_WIDTH, y: middle },
+      { x: NODE_WIDTH + COLUMN_GAP, y: middle },
+    ]);
+  });
+
+  it("routes an edge that skips a column clear of what is between", () => {
+    const layout = layoutChanges(report(
+      change("root"),
+      change("middle", { blockers: ["root"] }),
+      // Deepest blocker is `middle` at depth 1, so this sits at depth 2
+      // and root's edge to it spans two columns — straight through where
+      // `middle` is drawn.
+      change("last", { blockers: ["root", "middle"] }),
+    ));
+
+    const detour = layout.edges.find((edge) => edge.from === "root" && edge.to === "last");
+    const rowBottom = NODE_HEIGHT;
+    expect(detour).toBeDefined();
+    // It leaves the row band entirely rather than crossing the card in
+    // the column between.
+    expect(detour?.points.some((point) => point.y > rowBottom)).toBe(true);
+    // And the picture is tall enough to contain the lane it travels in.
+    expect(layout.height).toBeGreaterThanOrEqual(Math.max(...(detour?.points.map((p) => p.y) ?? [0])));
+  });
+
+  it("gives two detours lanes of their own", () => {
+    const layout = layoutChanges(report(
+      change("root"),
+      change("other-root"),
+      change("middle", { blockers: ["root"] }),
+      change("last", { blockers: ["root", "middle"] }),
+      change("also-last", { blockers: ["other-root", "middle"] }),
+    ));
+
+    const lanes = layout.edges
+      .filter((edge) => edge.points.length > 4)
+      .map((edge) => edge.points[2]?.y);
+    // Two sharing one lane would draw as a single line that appears to
+    // fork.
+    expect(new Set(lanes).size).toBe(lanes.length);
+    expect(lanes.length).toBe(2);
+  });
+
+  it("covers every node with the extent it reports", () => {
+    const layout = layoutChanges(report(
+      change("root"),
+      change("alpha", { blockers: ["root"] }),
+      change("beta", { blockers: ["root"] }),
+    ));
+
+    for (const node of layout.nodes) {
+      expect(node.x + node.width).toBeLessThanOrEqual(layout.width);
+      expect(node.y + node.height).toBeLessThanOrEqual(layout.height);
+    }
+  });
+
+  it("draws no edge to something that has no place", () => {
+    const layout = layoutChanges(report(
+      change("egg", { blockers: ["chicken"] }),
+      change("chicken", { blockers: ["egg"] }),
+      change("breakfast", { blockers: ["egg"] }),
+    ));
+
+    // Every change here is in or behind the cycle, so there is nowhere
+    // for a line to start or end. It is reported in words instead.
+    expect(layout.edges).toEqual([]);
+  });
+
+  it("has nothing to lay out for an empty report", () => {
+    expect(layoutChanges(report())).toEqual({
+      columns: [],
+      nodes: [],
+      edges: [],
+      cycles: [],
+      unplaced: [],
+      width: 0,
+      height: 0,
+    });
+  });
+});
+
+function holder(author?: string) {
+  return {
+    hostKind: "cli" as const,
+    hostname: "a-machine",
+    pid: 777,
+    heartbeatAgeMs: 3_000,
+    ...(author !== undefined ? { author } : {}),
+  };
+}
diff --git a/packages/core/src/change-layout.ts b/packages/core/src/change-layout.ts
new file mode 100644
index 00000000..1aec341e
--- /dev/null
+++ b/packages/core/src/change-layout.ts
@@ -0,0 +1,330 @@
+// Where each change goes in the pipeline picture — ADR 0025.
+//
+// A pure function of `ChangeReadinessReport`, and it lives here rather
+// than in the view for one reason: the terminal and the shell must place
+// changes identically. A second implementation in the browser would be
+// free to drift, and the drift would be invisible — both pictures would
+// keep looking plausible, and whichever one a person happened to be
+// using is the one they would believe.
+//
+// Nothing here reads the filesystem, git, or a lease. Every fact it
+// arranges was derived once, by `readChangeReadiness`.
+
+import type { ChangeReadiness, ChangeReadinessReport } from "./change-readiness-facts.js";
+
+/** The picture's units. Abstract, not pixels: the view renders one unit
+ * as one `em`, so the whole drawing scales with the reader's font size
+ * and no part of it is ever measured (ADR 0025).
+ *
+ * A card is wide enough for a change name of this project's usual length
+ * and tall enough for the name plus two lines about it. Longer text is
+ * truncated on the element rather than allowed to resize the card: a
+ * card that grew would move its neighbours, and the coordinates here
+ * would no longer be where anything is. */
+export const NODE_WIDTH = 16;
+export const NODE_HEIGHT = 5;
+/** Room between cards. The horizontal gap is where edges turn, so it is
+ * the wider of the two. */
+export const COLUMN_GAP = 6;
+export const ROW_GAP = 1.5;
+
+export interface ChangeLayoutNode {
+  change: ChangeReadiness;
+  /** Depth in the declared order: zero where nothing active blocks it. */
+  column: number;
+  /** Position within the column, by change name. */
+  row: number;
+  /** Top-left corner, in units. */
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** A declared blocker, from the blocker to the change it blocks.
+ *
+ * Only this. A collision is NOT an edge: two changes that would meet in
+ * one spec file have no precedence between them, and a line would assert
+ * a sequence the repository does not contain (ADR 0025). */
+export interface ChangeLayoutEdge {
+  from: string;
+  to: string;
+  /** The corners of the path, in units, from the blocker's right edge to
+   * the blocked change's left edge. Points rather than an SVG string so
+   * this stays a fact the tests can read; the view joins them. */
+  points: Array<{ x: number; y: number }>;
+}
+
+export interface ChangeLayout {
+  /** Change names by column, each column ordered by name. */
+  columns: string[][];
+  nodes: ChangeLayoutNode[];
+  edges: ChangeLayoutEdge[];
+  /** Groups of changes that declare a cycle of blockers between them,
+   * each group sorted. Empty in a repository whose declarations are an
+   * order, which is all of them until somebody writes a loop. */
+  cycles: string[][];
+  /** Every change with no place in the order: the members of a cycle,
+   * and anything waiting on one. Sorted, and a superset of `cycles`
+   * flattened.
+   *
+   * Named rather than placed. A cycle has no depth, and a picture that
+   * quietly put one somewhere would be a wrong answer that looks like a
+   * right one — believed for exactly as long as nobody checked. */
+  unplaced: string[];
+  /** How much room the whole picture needs, in units — every node and
+   * every path inside it. The view sizes its SVG from this, so an edge
+   * that turns outside the columns is not clipped. */
+  width: number;
+  height: number;
+}
+
+export function layoutChanges(report: ChangeReadinessReport): ChangeLayout {
+  const byName = new Map(report.changes.map((change) => [change.changeName, change]));
+  // Kept to changes that are present: a blocker naming something this
+  // report does not contain is not a node, so it is not a relation.
+  const blockersOf = new Map<string, string[]>(
+    report.changes.map((change) => [
+      change.changeName,
+      change.blockers.filter((blocker) => byName.has(blocker) && blocker !== change.changeName),
+    ]),
+  );
+  const selfBlocked = new Set(
+    report.changes.filter((change) => change.blockers.includes(change.changeName)).map((c) => c.changeName),
+  );
+
+  const cycles = findCycles(blockersOf, selfBlocked);
+  const unplaceable = new Set<string>(cycles.flat());
+  spreadUnplaceable(blockersOf, unplaceable);
+
+  const depths = new Map<string, number>();
+  for (const name of blockersOf.keys()) {
+    if (!unplaceable.has(name)) depths.set(name, depthOf(name, blockersOf, depths, unplaceable));
+  }
+
+  const columns: string[][] = [];
+  for (const [name, depth] of [...depths].sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0))) {
+    while (columns.length <= depth) columns.push([]);
+    (columns[depth] as string[]).push(name);
+  }
+
+  const nodes: ChangeLayoutNode[] = [];
+  const placed = new Map<string, ChangeLayoutNode>();
+  columns.forEach((names, column) => {
+    names.forEach((name, row) => {
+      const node: ChangeLayoutNode = {
+        change: byName.get(name) as ChangeReadiness,
+        column,
+        row,
+        x: column * (NODE_WIDTH + COLUMN_GAP),
+        y: row * (NODE_HEIGHT + ROW_GAP),
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT,
+      };
+      nodes.push(node);
+      placed.set(name, node);
+    });
+  });
+
+  const gridWidth = columns.length === 0
+    ? 0
+    : columns.length * NODE_WIDTH + (columns.length - 1) * COLUMN_GAP;
+  const gridHeight = nodes.reduce((tallest, node) => Math.max(tallest, node.y + node.height), 0);
+
+  const edges: ChangeLayoutEdge[] = [];
+  let detours = 0;
+  let deepestLane = 0;
+  for (const [name, blockers] of [...blockersOf].sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0))) {
+    for (const blocker of [...blockers].sort()) {
+      const from = placed.get(blocker);
+      const to = placed.get(name);
+      // An edge to or from something with no place has nowhere to start
+      // or end. The cycle it belongs to is reported in words instead.
+      if (!from || !to) continue;
+      if (to.column === from.column + 1) {
+        edges.push({ from: blocker, to: name, points: straightAcross(from, to) });
+        continue;
+      }
+      // Skipping a column: the space between the two is occupied, so the
+      // edge leaves the grid, travels in a lane of its own below it, and
+      // comes back up. One lane per detour — two sharing one would draw
+      // as a single line that appears to fork.
+      const laneY = gridHeight + ROW_GAP * (detours + 1);
+      detours += 1;
+      deepestLane = Math.max(deepestLane, laneY);
+      edges.push({ from: blocker, to: name, points: aroundTheOutside(from, to, laneY) });
+    }
+  }
+
+  return {
+    columns,
+    nodes,
+    edges,
+    cycles,
+    unplaced: [...unplaceable].sort(),
+    width: gridWidth,
+    height: Math.max(gridHeight, deepestLane),
+  };
+}
+
+/** Out of the blocker's right edge, one turn in the gap, into the
+ * blocked change's left edge. */
+function straightAcross(from: ChangeLayoutNode, to: ChangeLayoutNode): Array<{ x: number; y: number }> {
+  const startY = from.y + from.height / 2;
+  const endY = to.y + to.height / 2;
+  const turn = from.x + from.width + COLUMN_GAP / 2;
+  return withoutRepeats([
+    { x: from.x + from.width, y: startY },
+    { x: turn, y: startY },
+    { x: turn, y: endY },
+    { x: to.x, y: endY },
+  ]);
+}
+
+/** Down out of the grid, along its own lane, and back up. */
+function aroundTheOutside(
+  from: ChangeLayoutNode,
+  to: ChangeLayoutNode,
+  laneY: number,
+): Array<{ x: number; y: number }> {
+  const startY = from.y + from.height / 2;
+  const endY = to.y + to.height / 2;
+  const leaves = from.x + from.width + COLUMN_GAP / 2;
+  const returns = to.x - COLUMN_GAP / 2;
+  return withoutRepeats([
+    { x: from.x + from.width, y: startY },
+    { x: leaves, y: startY },
+    { x: leaves, y: laneY },
+    { x: returns, y: laneY },
+    { x: returns, y: endY },
+    { x: to.x, y: endY },
+  ]);
+}
+
+/** Keeps only the places the line actually turns.
+ *
+ * A repeated point draws nothing, and a point in the middle of a
+ * straight run is not a corner — reporting either would make `points`
+ * something a reader has to interpret rather than something they can
+ * take at face value. Two changes in the same row are joined by a
+ * straight line of two points, and that is the whole of it. */
+function withoutRepeats(points: Array<{ x: number; y: number }>): Array<{ x: number; y: number }> {
+  const kept: Array<{ x: number; y: number }> = [];
+  for (const point of points) {
+    const previous = kept[kept.length - 1];
+    if (previous && previous.x === point.x && previous.y === point.y) continue;
+    const before = kept[kept.length - 2];
+    if (
+      previous && before
+      && ((before.x === previous.x && previous.x === point.x)
+        || (before.y === previous.y && previous.y === point.y))
+    ) {
+      kept.pop();
+    }
+    kept.push(point);
+  }
+  return kept;
+}
+
+/** Depth: zero where nothing active blocks it, otherwise one past the
+ * deepest thing it is blocked by. Memoised, and only ever called for
+ * names already established to have a finite depth. */
+function depthOf(
+  name: string,
+  blockersOf: Map<string, string[]>,
+  depths: Map<string, number>,
+  unplaceable: Set<string>,
+): number {
+  const known = depths.get(name);
+  if (known !== undefined) return known;
+  let depth = 0;
+  for (const blocker of blockersOf.get(name) ?? []) {
+    if (unplaceable.has(blocker)) continue;
+    depth = Math.max(depth, depthOf(blocker, blockersOf, depths, unplaceable) + 1);
+  }
+  depths.set(name, depth);
+  return depth;
+}
+
+/** Tarjan's strongly connected components, over the "is blocked by"
+ * relation. Any component with more than one member is a cycle; a change
+ * that names itself is one on its own.
+ *
+ * Iterative rather than recursive: a repository's changes are few, but a
+ * stack overflow in a layout function would surface as a blank tab
+ * rather than as an error anybody could act on. */
+function findCycles(blockersOf: Map<string, string[]>, selfBlocked: Set<string>): string[][] {
+  const index = new Map<string, number>();
+  const low = new Map<string, number>();
+  const onStack = new Set<string>();
+  const stack: string[] = [];
+  const cycles: string[][] = [];
+  let counter = 0;
+
+  for (const root of [...blockersOf.keys()].sort()) {
+    if (index.has(root)) continue;
+    // Each frame keeps its own position in its neighbour list, which is
+    // what a recursive version would keep in the call stack.
+    const work: Array<{ name: string; next: number }> = [{ name: root, next: 0 }];
+    index.set(root, counter);
+    low.set(root, counter);
+    counter += 1;
+    stack.push(root);
+    onStack.add(root);
+
+    while (work.length > 0) {
+      const frame = work[work.length - 1] as { name: string; next: number };
+      const neighbours = blockersOf.get(frame.name) ?? [];
+      if (frame.next < neighbours.length) {
+        const neighbour = neighbours[frame.next] as string;
+        frame.next += 1;
+        if (!index.has(neighbour)) {
+          index.set(neighbour, counter);
+          low.set(neighbour, counter);
+          counter += 1;
+          stack.push(neighbour);
+          onStack.add(neighbour);
+          work.push({ name: neighbour, next: 0 });
+        } else if (onStack.has(neighbour)) {
+          low.set(frame.name, Math.min(low.get(frame.name) as number, index.get(neighbour) as number));
+        }
+        continue;
+      }
+
+      work.pop();
+      const parent = work[work.length - 1];
+      if (parent) {
+        low.set(parent.name, Math.min(low.get(parent.name) as number, low.get(frame.name) as number));
+      }
+      if (low.get(frame.name) === index.get(frame.name)) {
+        const component: string[] = [];
+        for (;;) {
+          const popped = stack.pop() as string;
+          onStack.delete(popped);
+          component.push(popped);
+          if (popped === frame.name) break;
+        }
+        if (component.length > 1 || selfBlocked.has(frame.name)) cycles.push(component.sort());
+      }
+    }
+  }
+
+  return cycles.sort((a, b) => ((a[0] as string) < (b[0] as string) ? -1 : 1));
+}
+
+/** Anything waiting on something that cannot be placed cannot be placed
+ * either — there is no column one past nowhere. Repeated until it stops
+ * growing, which is at most once per change. */
+function spreadUnplaceable(blockersOf: Map<string, string[]>, unplaceable: Set<string>): void {
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const [name, blockers] of blockersOf) {
+      if (unplaceable.has(name)) continue;
+      if (blockers.some((blocker) => unplaceable.has(blocker))) {
+        unplaceable.add(name);
+        grew = true;
+      }
+    }
+  }
+}
diff --git a/packages/core/src/change-readiness-facts.ts b/packages/core/src/change-readiness-facts.ts
new file mode 100644
index 00000000..4e552f48
--- /dev/null
+++ b/packages/core/src/change-readiness-facts.ts
@@ -0,0 +1,78 @@
+// The readiness report's shape, and the words it is described in.
+//
+// A leaf module so the browser can have them: `change-readiness.ts`
+// itself reads the filesystem and shells out to git, and the shell needs
+// the types and the wording without either. Only type imports here, so
+// nothing Node-side survives compilation (the same move `change-charts`
+// made, and for the same reason).
+//
+// The wording lives here rather than in each view because two surfaces
+// describing one fact differently is two facts as far as a reader is
+// concerned.
+
+import type { WorkspaceLeaseConflict } from "./workspace-lease.js";
+
+/** Why two changes cannot be started alongside each other.
+ *
+ * Three kinds, reported as themselves rather than merged into a score: a
+ * reader acts differently on "these two edit the same file" than on
+ * "these two touch the same capability", and differently again on "this
+ * one declares it waits for that one". */
+export type ChangeCollision =
+  | { kind: "declared-blocker"; blocker: string }
+  | { kind: "shared-capability"; capability: string }
+  | { kind: "overlapping-files"; files: string[] };
+
+export type ChangeRunState =
+  /** A working directory of this repository is holding the workspace for
+   * this change right now. */
+  | { state: "running"; worktreePath: string; holder: WorkspaceLeaseConflict }
+  /** Something this change declares is not satisfied yet. */
+  | { state: "blocked"; blockedBy: string[] }
+  | { state: "ready" };
+
+export interface ChangeReadiness {
+  changeName: string;
+  run: ChangeRunState;
+  /** The changes this one declares it is blocked by, kept to those that
+   * are still active — a blocker that has archived is satisfied, and is
+   * no longer a change to point at.
+   *
+   * Carried on every change, not only the blocked ones, because it is
+   * the relation the pipeline picture draws (ADR 0025) and a running
+   * change has one too. Equal to `run.blockedBy` where the change is
+   * blocked. */
+  blockers: string[];
+  /** The capabilities this change's delta carries — the spec files it
+   * will merge into at archive. */
+  capabilities: string[];
+  /** Its own working directory, if it has one. Without one it cannot run
+   * beside anything: one directory permits one mutating run. */
+  worktreePath?: string;
+  /** Other ready changes this one can be started alongside. */
+  canJoin: string[];
+  /** Other ready changes it cannot, and what they would meet over. */
+  blockedFrom: Array<{ changeName: string; collisions: ChangeCollision[] }>;
+  /** Present only where the change is ready but has nowhere of its own
+   * to run. The remedy is one command and naming it is most of the
+   * help. */
+  needsWorktree?: string;
+}
+
+export interface ChangeReadinessReport {
+  changes: ChangeReadiness[];
+}
+
+/** One collision in the terms a reader acts on. */
+export function describeCollision(collision: ChangeCollision): string {
+  switch (collision.kind) {
+    case "declared-blocker":
+      return `one declares it is blocked by ${collision.blocker}`;
+    case "shared-capability":
+      return `both deliver a delta for "${collision.capability}", which archives into one spec file`;
+    case "overlapping-files":
+      return collision.files.length === 1
+        ? `both branches have changed ${collision.files[0]}`
+        : `both branches have changed ${collision.files.length} of the same files, including ${collision.files[0]}`;
+  }
+}
diff --git a/packages/core/src/change-readiness.ts b/packages/core/src/change-readiness.ts
index 64dfccee..7c7042c2 100644
--- a/packages/core/src/change-readiness.ts
+++ b/packages/core/src/change-readiness.ts
@@ -16,49 +16,20 @@ import { readChangeGraph, type ChangeGraph } from "./change-graph.js";
 import { listChangeWorktrees, type ChangeWorktree } from "./change-worktrees.js";
 import { createGitWrapper, type GitWrapper } from "./git.js";
 import { discoverOpenSpecWorkspace } from "./workbench.js";
-import { readWorkspaceLeaseHolder, type WorkspaceLeaseConflict } from "./workspace-lease.js";
-
-/** Why two changes cannot be started alongside each other.
- *
- * Three kinds, reported as themselves rather than merged into a score: a
- * reader acts differently on "these two edit the same file" than on
- * "these two touch the same capability", and differently again on "this
- * one declares it waits for that one". */
-export type ChangeCollision =
-  | { kind: "declared-blocker"; blocker: string }
-  | { kind: "shared-capability"; capability: string }
-  | { kind: "overlapping-files"; files: string[] };
-
-export type ChangeRunState =
-  /** A working directory of this repository is holding the workspace for
-   * this change right now. */
-  | { state: "running"; worktreePath: string; holder: WorkspaceLeaseConflict }
-  /** Something this change declares is not satisfied yet. */
-  | { state: "blocked"; blockedBy: string[] }
-  | { state: "ready" };
-
-export interface ChangeReadiness {
-  changeName: string;
-  run: ChangeRunState;
-  /** The capabilities this change's delta carries — the spec files it
-   * will merge into at archive. */
-  capabilities: string[];
-  /** Its own working directory, if it has one. Without one it cannot run
-   * beside anything: one directory permits one mutating run. */
-  worktreePath?: string;
-  /** Other ready changes this one can be started alongside. */
-  canJoin: string[];
-  /** Other ready changes it cannot, and what they would meet over. */
-  blockedFrom: Array<{ changeName: string; collisions: ChangeCollision[] }>;
-  /** Present only where the change is ready but has nowhere of its own
-   * to run. The remedy is one command and naming it is most of the
-   * help. */
-  needsWorktree?: string;
-}
-
-export interface ChangeReadinessReport {
-  changes: ChangeReadiness[];
-}
+import { readWorkspaceLeaseHolder } from "./workspace-lease.js";
+import type { ChangeCollision, ChangeReadiness, ChangeReadinessReport, ChangeRunState } from "./change-readiness-facts.js";
+
+// The report's shape and the words it is described in live in a leaf the
+// browser can also import; this file is the part that reads a repository
+// to fill it in. Re-exported so every existing importer of this module
+// keeps working.
+export {
+  describeCollision,
+  type ChangeCollision,
+  type ChangeReadiness,
+  type ChangeReadinessReport,
+  type ChangeRunState,
+} from "./change-readiness-facts.js";
 
 /** The capabilities a change's spec delta names — the directories under
  * its own `specs/`. Two changes sharing one write to the same
@@ -195,6 +166,7 @@ export async function readChangeReadiness(options: ChangeReadinessOptions): Prom
     changes.push({
       changeName,
       run,
+      blockers: unmet,
       capabilities,
       ...(worktree ? { worktreePath: worktree.path } : {}),
       canJoin: [],
@@ -221,16 +193,3 @@ export async function readChangeReadiness(options: ChangeReadinessOptions): Prom
   return { changes };
 }
 
-/** One collision in the terms a reader acts on. */
-export function describeCollision(collision: ChangeCollision): string {
-  switch (collision.kind) {
-    case "declared-blocker":
-      return `one declares it is blocked by ${collision.blocker}`;
-    case "shared-capability":
-      return `both deliver a delta for "${collision.capability}", which archives into one spec file`;
-    case "overlapping-files":
-      return collision.files.length === 1
-        ? `both branches have changed ${collision.files[0]}`
-        : `both branches have changed ${collision.files.length} of the same files, including ${collision.files[0]}`;
-  }
-}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 1c8406a9..61770b7b 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -59,6 +59,7 @@ export * from "./chain-steps.js";
 export * from "./change-worktrees.js";
 export * from "./repository-audit.js";
 export * from "./change-readiness.js";
+export * from "./change-layout.js";
 export * from "./repo-setup-actions.js";
 
 export { ClaudeCliAdapter } from "./agents/claude.js";
diff --git a/packages/server/e2e/pipeline.spec.ts b/packages/server/e2e/pipeline.spec.ts
new file mode 100644
index 00000000..645a3e32
--- /dev/null
+++ b/packages/server/e2e/pipeline.spec.ts
@@ -0,0 +1,136 @@
+// The Pipeline tab in a real browser: that it draws the order the
+// repository declares, that a card says what it waits on in words, and
+// that the whole screen passes axe at WCAG AA.
+//
+// The unit tests drive the view with a written report. This drives it
+// through the server, against changes on disk, which is the only way to
+// see that the shape core derives survives the trip.
+//
+// Its second product is docs/images/standalone/pipeline.png — generated
+// from the running UI, so it cannot silently disagree with it the way a
+// manually captured screenshot already had once (see
+// harness-screenshots.spec.ts).
+
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { createServer, type OpenSpecUiServer } from "../src/server.js";
+
+const IMAGES_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), "..", "..", "..", "docs", "images", "standalone");
+
+let server: OpenSpecUiServer;
+let workspaceRoot: string;
+let baseUrl: string;
+
+/** Three changes: one nothing waits on, one that waits on it, and one
+ * unrelated. That is both shapes the picture has to draw — a chain and
+ * changes side by side — in the smallest fixture that shows them. */
+async function writeChange(changeName: string, blockedBy?: string): Promise<void> {
+  const changeRoot = path.join(workspaceRoot, "openspec", "changes", changeName);
+  await mkdir(path.join(changeRoot, "specs", changeName), { recursive: true });
+  const meta = blockedBy
+    ? `schema: spec-driven\nblocked_by:\n  - ${blockedBy}\n`
+    : "schema: spec-driven\n";
+  await Promise.all([
+    writeFile(path.join(changeRoot, ".openspec.yaml"), meta, "utf8"),
+    writeFile(path.join(changeRoot, "proposal.md"), "## Why\n\nFixture.\n", "utf8"),
+    writeFile(path.join(changeRoot, "design.md"), "## Context\n\nFixture.\n", "utf8"),
+    writeFile(path.join(changeRoot, "tasks.md"), "## Tasks\n\n- [ ] Fixture\n", "utf8"),
+    writeFile(
+      path.join(changeRoot, "specs", changeName, "spec.md"),
+      "## ADDED Requirements\n\n### Requirement: Fixture\nThe system SHALL load.\n",
+      "utf8",
+    ),
+  ]);
+}
+
+test.beforeAll(async () => {
+  workspaceRoot = await mkdtemp(path.join(os.tmpdir(), "openspec-ui-pipeline-"));
+  await mkdir(path.join(workspaceRoot, "openspec", "specs"), { recursive: true });
+  await writeFile(path.join(workspaceRoot, "openspec", "config.yaml"), "schema: spec-driven\n", "utf8");
+  await writeChange("pipeline-first");
+  await writeChange("pipeline-second", "pipeline-first");
+  await writeChange("pipeline-unrelated");
+
+  server = createServer({ workspaceRoot, host: "127.0.0.1", port: 0 });
+  const address = await server.listen();
+  baseUrl = `http://127.0.0.1:${address.port}`;
+});
+
+test.afterAll(async () => {
+  await server?.close();
+  // Reading the report runs git inside this directory, and on Windows a
+  // process's working directory is locked while it lives — a git that
+  // has answered but not yet been reaped leaves the directory busy.
+  // Tidying is best-effort: the operating system clears its own temp,
+  // and failing a green suite over a leftover directory would be
+  // reporting the wrong thing.
+  if (workspaceRoot) await rm(workspaceRoot, { recursive: true, force: true }).catch(() => undefined);
+});
+
+test("draws the declared order, and passes axe", async ({ page }) => {
+  test.setTimeout(60000);
+  const pageErrors: Error[] = [];
+  page.on("pageerror", (error) => pageErrors.push(error));
+
+  await page.goto(`${baseUrl}/#token=${encodeURIComponent(server.accessToken)}`);
+  await expect(page.getByRole("heading", { name: "OpenSpec UI", level: 1 })).toBeVisible();
+  await page.getByLabel("Workspace root (cwd)").fill(workspaceRoot);
+
+  await page.getByRole("tab", { name: "Pipeline" }).click();
+
+  // Reading the report lists git worktrees and peeks at each lease, so
+  // it is slower than a render; generous, not a behaviour change.
+  const blocked = page.getByTestId("pipeline-node-pipeline-second");
+  await expect(blocked).toBeVisible({ timeout: 15000 });
+  await expect(blocked).toContainText("waiting on pipeline-first");
+  await expect(page.getByTestId("pipeline-node-pipeline-first")).toBeVisible();
+  await expect(page.getByTestId("pipeline-node-pipeline-unrelated")).toBeVisible();
+
+  // The declared relation is drawn; nothing else is.
+  await expect(page.getByTestId("pipeline-edge-pipeline-first-to-pipeline-second")).toBeAttached();
+
+  // A card is a real control, which is what keeps it focusable without
+  // any of that having to be supplied by hand (ADR 0025). Asserted by
+  // focusing it rather than by its accessible name — the name contains
+  // everything the card says, so a change that names another one would
+  // match a locator looking for that other one.
+  const first = page.getByTestId("pipeline-node-pipeline-first");
+  await expect(first).toHaveJSProperty("tagName", "BUTTON");
+  await first.focus();
+  await expect(first).toBeFocused();
+
+  await page.screenshot({ path: path.join(IMAGES_DIR, "pipeline.png"), fullPage: true });
+
+  const accessibility = await new AxeBuilder({ page })
+    .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
+    .analyze();
+  const blockingViolations = accessibility.violations.filter(
+    (violation) => violation.impact === "serious" || violation.impact === "critical",
+  );
+  expect(blockingViolations, JSON.stringify(blockingViolations, null, 2)).toEqual([]);
+  expect(pageErrors).toEqual([]);
+});
+
+test("becomes headed lanes at phone width, with no lines", async ({ page }) => {
+  test.setTimeout(60000);
+  await page.setViewportSize({ width: 400, height: 900 });
+  await page.goto(`${baseUrl}/#token=${encodeURIComponent(server.accessToken)}`);
+  await page.getByLabel("Workspace root (cwd)").fill(workspaceRoot);
+  await page.getByRole("tab", { name: "Pipeline" }).click();
+
+  await expect(page.getByTestId("pipeline-node-pipeline-first")).toBeVisible({ timeout: 15000 });
+  // The cards are still there and still say what they wait on; only the
+  // drawing of it is gone, because four columns do not fit a phone.
+  await expect(page.getByTestId("pipeline-edges")).toBeHidden();
+  await expect(page.getByRole("heading", { name: "Step 1" })).toBeVisible();
+
+  // The page body never scrolls sideways — the picture scrolls in its
+  // own container instead.
+  const overflow = await page.evaluate(() =>
+    document.documentElement.scrollWidth - document.documentElement.clientWidth);
+  expect(overflow).toBeLessThanOrEqual(0);
+});
diff --git a/packages/server/src/rest.ts b/packages/server/src/rest.ts
index b7329801..f6038d48 100644
--- a/packages/server/src/rest.ts
+++ b/packages/server/src/rest.ts
@@ -42,6 +42,7 @@ import {
   buildVerifyQuality,
   addScheduledRun,
   collectHumanOnlyInbox,
+  readChangeReadiness,
   runDelegatedItem,
   customAgentDirectories,
   findCustomAgents,
@@ -1038,11 +1039,13 @@ export async function handleWorkspaceRunStatsRequest(req: IncomingMessage, res:
   }
 }
 
-interface HumanOnlyInboxRequest {
+/** A request whose whole subject is a workspace. Shared by the handlers
+ * that ask something about one and take no other argument. */
+interface WorkspaceRequest {
   cwd: string;
 }
 
-function isHumanOnlyInboxRequest(value: unknown): value is HumanOnlyInboxRequest {
+function isWorkspaceRequest(value: unknown): value is WorkspaceRequest {
   if (typeof value !== "object" || value === null) return false;
   const record = value as Record<string, unknown>;
   return typeof record.cwd === "string" && record.cwd.trim().length > 0;
@@ -1063,7 +1066,7 @@ export async function handleHumanOnlyInboxRequest(req: IncomingMessage, res: Ser
     return;
   }
 
-  if (!isHumanOnlyInboxRequest(parsed)) {
+  if (!isWorkspaceRequest(parsed)) {
     sendJson(res, 400, { error: "body must contain a non-empty cwd" });
     return;
   }
@@ -1076,6 +1079,38 @@ export async function handleHumanOnlyInboxRequest(req: IncomingMessage, res: Ser
   }
 }
 
+/** Every active change, its state, and what it can run alongside.
+ *
+ * The report travels whole and is not summarised here. The shell draws
+ * it and `openspec-ui-cli ready` prints it, and the one thing that must
+ * not happen is the two disagreeing — which is what a second derivation
+ * anywhere on this path would eventually do, invisibly (ADR 0025). */
+export async function handleChangeReadinessRequest(
+  req: IncomingMessage,
+  res: ServerResponse,
+  policy: RestRequestPolicy,
+): Promise<void> {
+  let parsed: unknown;
+  try {
+    parsed = await readJsonBody(req, policy.maxPayloadBytes);
+  } catch (error) {
+    sendBodyError(res, error);
+    return;
+  }
+
+  if (!isWorkspaceRequest(parsed)) {
+    sendJson(res, 400, { error: "body must contain a non-empty cwd" });
+    return;
+  }
+  if (!authorizeCwd(res, policy, parsed.cwd)) return;
+
+  try {
+    sendJson(res, 200, await readChangeReadiness({ workspaceRoot: parsed.cwd }));
+  } catch (error) {
+    sendJson(res, 500, { error: error instanceof Error ? error.message : String(error) });
+  }
+}
+
 interface DelegatedItemRunRequest {
   cwd: string;
   changeName: string;
diff --git a/packages/server/src/server.test.ts b/packages/server/src/server.test.ts
index c872cca2..8d52c9ad 100644
--- a/packages/server/src/server.test.ts
+++ b/packages/server/src/server.test.ts
@@ -1151,6 +1151,53 @@ describe("server — REST /api/status", () => {
     expect(detectAvailableAgentsMock).not.toHaveBeenCalled();
   });
 
+  it("reports change readiness for an authorized cwd", async () => {
+    const cwd = await createTempWorkspace();
+
+    const response = await fetch(`${baseUrl}/api/change-readiness`, {
+      method: "POST",
+      headers: JSON_HEADERS,
+      body: JSON.stringify({ cwd }),
+    });
+    const body = (await response.json()) as { changes: unknown[] };
+
+    expect(response.status).toBe(200);
+    // The report travels whole and is not summarised on the way: the tab
+    // draws it and the terminal prints it, and the one thing that must
+    // not happen is the two disagreeing (ADR 0025).
+    expect(Array.isArray(body.changes)).toBe(true);
+  });
+
+  it("rejects a change-readiness request for a cwd outside the workspace", async () => {
+    await server.close();
+    server = createServer({
+      workspaceRoot: "/workspace/repo",
+      host: "127.0.0.1",
+      port: 0,
+      accessToken: ACCESS_TOKEN,
+    });
+    const address = await server.listen();
+    baseUrl = `http://127.0.0.1:${address.port}`;
+
+    const response = await fetch(`${baseUrl}/api/change-readiness`, {
+      method: "POST",
+      headers: JSON_HEADERS,
+      body: JSON.stringify({ cwd: "/outside/repo" }),
+    });
+
+    expect(response.status).toBe(403);
+  });
+
+  it("rejects a change-readiness request that names no workspace", async () => {
+    const response = await fetch(`${baseUrl}/api/change-readiness`, {
+      method: "POST",
+      headers: JSON_HEADERS,
+      body: JSON.stringify({}),
+    });
+
+    expect(response.status).toBe(400);
+  });
+
   it("deletes an existing project-level template", async () => {
     const cwd = await createTempWorkspace();
     const projectDir = path.join(cwd, "openspec", "templates", "my-template");
diff --git a/packages/server/src/server.ts b/packages/server/src/server.ts
index 5442292b..57d61fc0 100644
--- a/packages/server/src/server.ts
+++ b/packages/server/src/server.ts
@@ -28,6 +28,7 @@ import {
   handleHarnessConfigReadChangeOverrideRequest,
   handleHarnessConfigResolveRequest,
   handleCustomAgentsRequest,
+  handleChangeReadinessRequest,
   handleHumanOnlyInboxRequest,
   handleScheduledRunsRequest,
   handleWorkspaceRunStatsRequest,
@@ -234,6 +235,10 @@ export function createServer(options: ServerOptions): OpenSpecUiServer {
       void handleAgentsDetectRequest(req, res, requestPolicy, options.localLlmBaseUrl);
       return;
     }
+    if (req.method === "POST" && req.url === "/api/change-readiness") {
+      void handleChangeReadinessRequest(req, res, requestPolicy);
+      return;
+    }
     if (req.method === "POST" && req.url === "/api/human-only-inbox") {
       void handleHumanOnlyInboxRequest(req, res, requestPolicy);
       return;
diff --git a/packages/webui/src/change-readiness-client.ts b/packages/webui/src/change-readiness-client.ts
new file mode 100644
index 00000000..0da3d13e
--- /dev/null
+++ b/packages/webui/src/change-readiness-client.ts
@@ -0,0 +1,29 @@
+// What can start now, over HTTP.
+//
+// The report is read by walking the changes directory, listing git
+// worktrees and peeking at each one's lease, so the browser cannot
+// produce it. It asks, and it derives nothing: the placement it draws
+// comes from `layoutChanges` in core, which the terminal uses too, so
+// the tab and `openspec-ui-cli ready` cannot disagree (ADR 0025).
+
+import type { ChangeReadinessReport } from "@openspec-ui/core/browser";
+
+export type { ChangeReadinessReport };
+
+export type ChangeReadinessRequest = (pathname: string, init: RequestInit) => Promise<Response>;
+
+export async function loadChangeReadiness(
+  request: ChangeReadinessRequest,
+  cwd: string,
+): Promise<ChangeReadinessReport> {
+  const response = await request("/api/change-readiness", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ cwd }),
+  });
+  if (!response.ok) {
+    const payload = (await response.json().catch(() => ({}))) as { error?: string };
+    throw new Error(payload.error ?? `${response.status} ${response.statusText}`);
+  }
+  return response.json() as Promise<ChangeReadinessReport>;
+}
diff --git a/packages/webui/src/components/PipelineView.test.tsx b/packages/webui/src/components/PipelineView.test.tsx
new file mode 100644
index 00000000..9bdf89c4
--- /dev/null
+++ b/packages/webui/src/components/PipelineView.test.tsx
@@ -0,0 +1,188 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { ChangeReadiness, ChangeReadinessReport } from "@openspec-ui/core/browser";
+import { PIPELINE_POLL_INTERVAL_MS, PipelineView } from "./PipelineView.js";
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+function change(changeName: string, overrides: Partial<ChangeReadiness> = {}): ChangeReadiness {
+  return {
+    changeName,
+    blockers: [],
+    run: { state: "ready" },
+    capabilities: [],
+    canJoin: [],
+    blockedFrom: [],
+    ...overrides,
+  };
+}
+
+function report(...changes: ChangeReadiness[]): ChangeReadinessReport {
+  return { changes };
+}
+
+function holder(author?: string) {
+  return {
+    hostKind: "cli" as const,
+    hostname: "a-machine",
+    pid: 777,
+    heartbeatAgeMs: 3_000,
+    ...(author !== undefined ? { author } : {}),
+  };
+}
+
+describe("PipelineView", () => {
+  it("names the git author of a run that recorded one", async () => {
+    render(
+      <PipelineView
+        isActive
+        load={async () => report(change("live", {
+          run: { state: "running", worktreePath: "/repo.worktrees/live", holder: holder("ada@example.com") },
+        }))}
+      />,
+    );
+
+    const node = await screen.findByTestId("pipeline-node-live");
+    expect(node).toHaveTextContent("Running");
+    expect(node).toHaveTextContent("/repo.worktrees/live");
+    // "git author", never "user": the value is self-declared and nothing
+    // is gated on it (a-lease-says-who).
+    expect(node).toHaveTextContent("git author ada@example.com");
+    expect(node.textContent).not.toContain("user ada@example.com");
+  });
+
+  it("claims nothing about who is running a change whose lease recorded no author", async () => {
+    render(
+      <PipelineView
+        isActive
+        load={async () => report(change("live", {
+          run: { state: "running", worktreePath: "/repo.worktrees/live", holder: holder() },
+        }))}
+      />,
+    );
+
+    const node = await screen.findByTestId("pipeline-node-live");
+    expect(node).toHaveTextContent("Running");
+    expect(node.textContent).not.toContain("git author");
+  });
+
+  it("says what a ready change cannot join and why, and draws no line to it", async () => {
+    render(
+      <PipelineView
+        isActive
+        load={async () => report(
+          change("alpha", {
+            worktreePath: "/w/alpha",
+            blockedFrom: [{ changeName: "beta", collisions: [{ kind: "shared-capability", capability: "ci-cli" }] }],
+          }),
+          change("beta", {
+            worktreePath: "/w/beta",
+            blockedFrom: [{ changeName: "alpha", collisions: [{ kind: "shared-capability", capability: "ci-cli" }] }],
+          }),
+        )}
+      />,
+    );
+
+    const node = await screen.findByTestId("pipeline-node-alpha");
+    expect(node).toHaveTextContent("not with beta");
+    expect(node).toHaveTextContent("ci-cli");
+    // A collision is not an order, and a line would assert one (ADR 0025).
+    expect(screen.queryByTestId("pipeline-edge-alpha-to-beta")).toBeNull();
+    expect(screen.queryByTestId("pipeline-edge-beta-to-alpha")).toBeNull();
+    expect(screen.queryByTestId("pipeline-edges")).toBeNull();
+  });
+
+  it("draws a line for a declared blocker", async () => {
+    render(
+      <PipelineView
+        isActive
+        load={async () => report(
+          change("first"),
+          change("second", { blockers: ["first"], run: { state: "blocked", blockedBy: ["first"] } }),
+        )}
+      />,
+    );
+
+    expect(await screen.findByTestId("pipeline-edge-first-to-second")).toBeInTheDocument();
+    expect(screen.getByTestId("pipeline-node-second")).toHaveTextContent("waiting on first");
+    // What a line draws is on the card in words, so it is not read twice.
+    expect(screen.getByTestId("pipeline-edges")).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("says a cycle rather than placing it", async () => {
+    render(
+      <PipelineView
+        isActive
+        load={async () => report(
+          change("egg", { blockers: ["chicken"] }),
+          change("chicken", { blockers: ["egg"] }),
+        )}
+      />,
+    );
+
+    const cycles = await screen.findByTestId("pipeline-cycles");
+    expect(cycles).toHaveTextContent("chicken");
+    expect(cycles).toHaveTextContent("egg");
+    expect(screen.queryByTestId("pipeline-node-egg")).toBeNull();
+  });
+
+  it("does not read while the tab is not the one being looked at", async () => {
+    const load = vi.fn(async () => report(change("alpha")));
+
+    const { rerender } = render(<PipelineView isActive={false} load={load} />);
+    // Nothing to do behind a hidden tab: reading walks the changes
+    // directory and lists git worktrees.
+    expect(load).not.toHaveBeenCalled();
+
+    rerender(<PipelineView isActive load={load} />);
+    await waitFor(() => expect(load).toHaveBeenCalledTimes(1));
+  });
+
+  it("re-reads while it is being looked at, and stops when it is not", async () => {
+    vi.useFakeTimers();
+    const load = vi.fn(async () => report(change("alpha")));
+
+    const { rerender } = render(<PipelineView isActive load={load} />);
+    await vi.waitFor(() => expect(load).toHaveBeenCalledTimes(1));
+
+    await vi.advanceTimersByTimeAsync(PIPELINE_POLL_INTERVAL_MS);
+    expect(load).toHaveBeenCalledTimes(2);
+
+    rerender(<PipelineView isActive={false} load={load} />);
+    await vi.advanceTimersByTimeAsync(PIPELINE_POLL_INTERVAL_MS * 3);
+    expect(load).toHaveBeenCalledTimes(2);
+  });
+
+  it("says when it last read, so the picture is not taken for live", async () => {
+    render(<PipelineView isActive load={async () => report(change("alpha"))} />);
+
+    expect(await screen.findByTestId("pipeline-read-at")).toHaveTextContent("Last read");
+  });
+
+  it("says so when it could not read at all", async () => {
+    render(<PipelineView isActive load={async () => { throw new Error("not a git repository"); }} />);
+
+    expect(await screen.findByTestId("pipeline-error")).toHaveTextContent("not a git repository");
+  });
+
+  it("keeps the whole of a long detail on the element the card clips", async () => {
+    const files = ["a.ts", "b.ts", "c.ts"];
+    render(
+      <PipelineView
+        isActive
+        load={async () => report(change("alpha", {
+          worktreePath: "/w/alpha",
+          blockedFrom: [{ changeName: "beta", collisions: [{ kind: "overlapping-files", files }] }],
+        }))}
+      />,
+    );
+
+    // Clipped by a fixed card, present in full in the DOM: a card must
+    // not be able to remove a fact the change is required to state.
+    const node = await screen.findByTestId("pipeline-node-alpha");
+    expect(node).toHaveTextContent("3 of the same files");
+    expect(node).toHaveAttribute("title", expect.stringContaining("not with beta"));
+  });
+});
diff --git a/packages/webui/src/components/PipelineView.tsx b/packages/webui/src/components/PipelineView.tsx
new file mode 100644
index 00000000..8c28ad01
--- /dev/null
+++ b/packages/webui/src/components/PipelineView.tsx
@@ -0,0 +1,239 @@
+// The pipeline picture — ADR 0025.
+//
+// This file draws; it decides nothing. Where each node goes, where each
+// edge turns, and how wide the whole thing is were all worked out by
+// `layoutChanges` in core, from the report the host read. Nothing here
+// is measured: one unit is one `em` for both the cards and the SVG, so
+// the two line up without either being asked where the other ended up.
+//
+// The same DOM is the narrow view. Below 720px the cards stop being
+// positioned and the lanes they are grouped in become headed lists —
+// four columns of cards do not fit a phone in any implementation, and
+// the words on a card are what the edges were an illustration of.
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  describeCollision,
+  layoutChanges,
+  type ChangeLayout,
+  type ChangeLayoutEdge,
+  type ChangeLayoutNode,
+  type ChangeReadinessReport,
+} from "@openspec-ui/core/browser";
+
+/** How often the picture re-reads while it is being looked at.
+ *
+ * The lease heartbeat is five seconds and a lease goes stale at twenty,
+ * so a picture older than that is misleading about what is running.
+ * Halfway between: often enough that a finished run does not linger,
+ * seldom enough that walking the changes directory and listing git
+ * worktrees is not something this does continuously. */
+export const PIPELINE_POLL_INTERVAL_MS = 10_000;
+
+export interface PipelineViewProps {
+  /** Reads the report. Injected so a test never needs a server, and so
+   * this component cannot quietly acquire a second way to get one. */
+  load: () => Promise<ChangeReadinessReport>;
+  /** Whether this is the tab being looked at. Re-reading behind a hidden
+   * tab is work nobody asked for against a picture nobody sees. */
+  isActive: boolean;
+  onOpenChange?: (changeName: string) => void;
+}
+
+export function PipelineView({ load, isActive, onOpenChange }: PipelineViewProps) {
+  const [report, setReport] = useState<ChangeReadinessReport | undefined>(undefined);
+  const [error, setError] = useState<string | undefined>(undefined);
+  const [readAt, setReadAt] = useState<Date | undefined>(undefined);
+  // Survives re-renders and is checked after every await: a reply that
+  // arrives once the tab has been left, or after unmount, must not set
+  // state — and must not be mistaken for a current reading.
+  const alive = useRef(true);
+  useEffect(() => () => { alive.current = false; }, []);
+
+  const read = useCallback(async () => {
+    try {
+      const next = await load();
+      if (!alive.current) return;
+      setReport(next);
+      setReadAt(new Date());
+      setError(undefined);
+    } catch (cause) {
+      if (!alive.current) return;
+      setError(cause instanceof Error ? cause.message : String(cause));
+    }
+  }, [load]);
+
+  useEffect(() => {
+    if (!isActive) return;
+    void read();
+    const timer = setInterval(() => void read(), PIPELINE_POLL_INTERVAL_MS);
+    return () => clearInterval(timer);
+  }, [isActive, read]);
+
+  if (error !== undefined) {
+    return <p className="openspec-shell-error" role="alert" data-testid="pipeline-error">{error}</p>;
+  }
+  if (report === undefined) {
+    return <p className="openspec-shell-note" data-testid="pipeline-loading">Reading what is running…</p>;
+  }
+  if (report.changes.length === 0) {
+    return <p className="openspec-shell-note" data-testid="pipeline-empty">No active changes.</p>;
+  }
+
+  const layout = layoutChanges(report);
+
+  return (
+    <div data-testid="pipeline">
+      {layout.cycles.length > 0 ? <Cycles cycles={layout.cycles} /> : null}
+      <Picture layout={layout} onOpenChange={onOpenChange} />
+      <p className="openspec-shell-note" data-testid="pipeline-read-at">
+        {/* A reading, not a subscription: between two of them a run can
+            start and finish, so this never presents itself as live. */}
+        Last read {readAt ? readAt.toLocaleTimeString() : "never"}.
+      </p>
+    </div>
+  );
+}
+
+/** A cycle has no depth and so no column. Said in words, above the
+ * picture, rather than placed somewhere plausible. */
+function Cycles({ cycles }: { cycles: string[][] }) {
+  return (
+    <div className="openspec-pipeline-cycles" role="alert" data-testid="pipeline-cycles">
+      <p>
+        {cycles.length === 1 ? "These changes declare a cycle" : "These changes declare cycles"}
+        {" "}of blockers, so they have no place in an order. Nothing waiting on them can be placed either.
+      </p>
+      <ul>
+        {cycles.map((cycle) => <li key={cycle.join(",")}>{cycle.join(" → ")} → {cycle[0]}</li>)}
+      </ul>
+    </div>
+  );
+}
+
+function Picture({ layout, onOpenChange }: { layout: ChangeLayout; onOpenChange?: (name: string) => void }) {
+  const byColumn = layout.columns.map((names, column) =>
+    layout.nodes.filter((node) => node.column === column && names.includes(node.change.changeName)));
+
+  return (
+    // Its own scroller, so a wide repository never makes the page body
+    // scroll sideways — the rule the shell's tables already follow.
+    <div className="openspec-pipeline-scroll">
+      <div
+        className="openspec-pipeline-picture"
+        data-testid="pipeline-picture"
+        style={{ "--pipeline-w": layout.width, "--pipeline-h": layout.height } as Record<string, number>}
+      >
+        <Edges edges={layout.edges} width={layout.width} height={layout.height} />
+        {byColumn.map((nodes, column) => (
+          <div className="openspec-pipeline-lane" key={column}>
+            {/* Numbered rather than named: the repository states an
+                order, not stages, and a heading that invented stage names
+                would be inventing something. Each card says what it
+                waits on. */}
+            <h3 className="openspec-pipeline-lane-heading">Step {column + 1}</h3>
+            {nodes.map((node) => <Node key={node.change.changeName} node={node} onOpenChange={onOpenChange} />)}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** The declared blockers, and only those.
+ *
+ * `aria-hidden` because what a line draws is already on the card it
+ * points from, in words. A reader who cannot see it would otherwise be
+ * read the same relation twice. */
+function Edges({ edges, width, height }: { edges: ChangeLayoutEdge[]; width: number; height: number }) {
+  if (edges.length === 0) return null;
+  return (
+    <svg
+      className="openspec-pipeline-edges"
+      aria-hidden="true"
+      focusable="false"
+      data-testid="pipeline-edges"
+      viewBox={`0 0 ${width} ${height}`}
+      preserveAspectRatio="none"
+    >
+      {edges.map((edge) => (
+        <path
+          key={`${edge.from}->${edge.to}`}
+          data-testid={`pipeline-edge-${edge.from}-to-${edge.to}`}
+          d={edge.points.map((point, index) => `${index === 0 ? "M" : "L"}${point.x},${point.y}`).join(" ")}
+          fill="none"
+        />
+      ))}
+    </svg>
+  );
+}
+
+function Node({ node, onOpenChange }: { node: ChangeLayoutNode; onOpenChange?: (name: string) => void }) {
+  const { change } = node;
+  const detail = describeChange(node);
+  return (
+    <button
+      type="button"
+      className="openspec-pipeline-node"
+      data-testid={`pipeline-node-${change.changeName}`}
+      data-state={change.run.state}
+      // The coordinates core returned, in units the stylesheet turns into
+      // `em`. In the narrow view the stylesheet ignores them.
+      style={{ "--x": node.x, "--y": node.y, "--w": node.width, "--h": node.height } as Record<string, number>}
+      // The whole of the text, for a reader whose card clipped it.
+      title={`${change.changeName} — ${detail.join(" ")}`}
+      onClick={() => onOpenChange?.(change.changeName)}
+    >
+      <span className="openspec-pipeline-node-name">{change.changeName}</span>
+      {/* The state as a word, not only as a colour — two hues a reader
+          cannot tell apart must still be two states. */}
+      <span className="openspec-pipeline-node-state">{stateWord(node)}</span>
+      {detail.map((line, index) => (
+        // Clipped by the card, present in full in the DOM: a fixed card
+        // must not be able to remove a fact the change is required to
+        // state.
+        <span className="openspec-pipeline-node-detail" key={index}>{line}</span>
+      ))}
+    </button>
+  );
+}
+
+function stateWord(node: ChangeLayoutNode): string {
+  switch (node.change.run.state) {
+    case "running":
+      return "Running";
+    case "blocked":
+      return "Blocked";
+    case "ready":
+      return "Ready";
+  }
+}
+
+/** What this change has to say for itself, in the order a reader wants
+ * it. Sentences rather than fields: the terminal's `ready` says the same
+ * things the same way, and two surfaces wording one fact differently is
+ * two facts as far as a reader is concerned. */
+function describeChange(node: ChangeLayoutNode): string[] {
+  const { change } = node;
+  const lines: string[] = [];
+
+  if (change.run.state === "running") {
+    lines.push(`in ${change.run.worktreePath}`);
+    // "git author", never "user": self-declared, and nothing is gated on
+    // it (a-lease-says-who). A run that recorded none claims nothing.
+    if (change.run.holder.author) lines.push(`git author ${change.run.holder.author}`);
+  }
+
+  if (change.run.state === "blocked") lines.push(`waiting on ${change.run.blockedBy.join(", ")}`);
+
+  if (change.run.state === "ready") {
+    if (change.needsWorktree) lines.push(`no working directory of its own — ${change.needsWorktree}`);
+    else if (change.canJoin.length > 0) lines.push(`can start alongside ${change.canJoin.join(", ")}`);
+    else if (change.blockedFrom.length === 0) lines.push("nothing else can start alongside it");
+    for (const other of change.blockedFrom) {
+      lines.push(`not with ${other.changeName} — ${other.collisions.map(describeCollision).join("; ")}`);
+    }
+  }
+
+  return lines;
+}
diff --git a/packages/webui/src/host-embed.ts b/packages/webui/src/host-embed.ts
index 55edd961..b2ec134d 100644
--- a/packages/webui/src/host-embed.ts
+++ b/packages/webui/src/host-embed.ts
@@ -20,6 +20,7 @@ export const ALL_TABS: readonly TabDefinition[] = [
   { id: "change-editor", label: "Change Editor" },
   { id: "templates", label: "Templates" },
   { id: "timeline", label: "Timeline" },
+  { id: "pipeline", label: "Pipeline" },
   { id: "harness-settings", label: "Harness Settings" },
 ];
 
diff --git a/packages/webui/src/shell-ui.ts b/packages/webui/src/shell-ui.ts
index 37ca5b7d..59204f48 100644
--- a/packages/webui/src/shell-ui.ts
+++ b/packages/webui/src/shell-ui.ts
@@ -1170,6 +1170,128 @@ export const shellThemeCss = `
     .openspec-extension-app { margin: 10px auto; padding: 10px; }
   }
 
+  /* The pipeline picture. Every position here came from core: the
+     element carries --pipeline-w/h and each card carries --x/--y/--w/--h,
+     all in the layout's abstract units, and this turns a unit into a
+     length. Nothing is measured (ADR 0025).
+
+     A unit is a rem and deliberately not an em. A custom property holds
+     a token, not a computed length, so --u set to 1em would resolve
+     against the font-size of whichever element used it — and the shell
+     fixes body font-size at 14px anyway, so an em would not follow the
+     reader's browser setting at all. A rem does. */
+  .openspec-pipeline-scroll {
+    overflow-x: auto;
+    /* Its own container, so the page body never scrolls sideways — the
+       same rule the shell's tables already follow. */
+    max-width: 100%;
+  }
+
+  .openspec-pipeline-picture {
+    --u: 1rem;
+    position: relative;
+    width: calc(var(--u) * var(--pipeline-w));
+    height: calc(var(--u) * var(--pipeline-h));
+    margin: 12px 0;
+  }
+
+  /* No box of its own: in the wide view a lane exists only to group,
+     and its cards are placed by coordinate. It becomes a real container
+     at phone width, at the bottom of this file. */
+  .openspec-pipeline-lane { display: contents; }
+  .openspec-pipeline-lane-heading { display: none; }
+
+  .openspec-pipeline-edges {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    /* A lane below the grid is inside the reported extent, but a stroke
+       has width and half of it falls outside. */
+    overflow: visible;
+  }
+
+  .openspec-pipeline-edges path {
+    stroke: var(--line-strong);
+    stroke-width: 0.1;
+    stroke-linejoin: round;
+  }
+
+  .openspec-pipeline-node {
+    position: absolute;
+    left: calc(var(--u) * var(--x));
+    top: calc(var(--u) * var(--y));
+    width: calc(var(--u) * var(--w));
+    height: calc(var(--u) * var(--h));
+    /* Sets no font-size of its own, on purpose: --u is a token, and a
+       card that changed its font-size would still be fine with rem but
+       would silently break the moment anybody made the unit an em. */
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1px;
+    /* Fixed size, so text beyond it is clipped rather than allowed to
+       move the card's neighbours away from the coordinates core gave.
+       The text stays in the DOM: a card must not be able to remove a
+       fact the change is required to state. */
+    overflow: hidden;
+    text-align: left;
+    padding: 6px 8px;
+    border: 1px solid var(--line-strong);
+    border-left-width: 4px;
+    border-radius: var(--radius);
+    background: var(--surface);
+    color: var(--ink);
+    cursor: pointer;
+  }
+
+  .openspec-pipeline-node:hover { border-color: var(--primary-soft); }
+
+  /* State is carried by the word inside the card first; these only
+     agree with it. A reader who cannot tell two hues apart has already
+     been told which state this is. */
+  .openspec-pipeline-node[data-state="running"] {
+    background: var(--primary-bg);
+    border-left-color: var(--primary);
+  }
+
+  .openspec-pipeline-node[data-state="blocked"] {
+    background: var(--warn-bg);
+    border-left-color: var(--warn);
+  }
+
+  .openspec-pipeline-node-name {
+    font-weight: 600;
+    /* The part a reader scans for gets the room. */
+    align-self: stretch;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .openspec-pipeline-node-state {
+    font-size: 0.85em;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--muted);
+  }
+
+  .openspec-pipeline-node-detail {
+    font-size: 0.85em;
+    color: var(--muted);
+    align-self: stretch;
+  }
+
+  .openspec-pipeline-cycles {
+    border: 1px solid var(--warn);
+    background: var(--warn-bg);
+    border-radius: var(--radius);
+    padding: 8px 12px;
+    margin: 12px 0;
+  }
+
+  .openspec-pipeline-cycles ul { margin: 4px 0 0; padding-left: 20px; }
+
   /* LAST in this layer on purpose. These selectors have the same
      specificity as the ones they override, and at equal specificity the
      later rule wins — placed earlier, the whole block did nothing.
@@ -1190,6 +1312,41 @@ export const shellThemeCss = `
       width: 100%;
       min-width: 0;
     }
+
+    /* The picture becomes headed lanes. Four columns of cards do not fit
+       a phone in any implementation, and shrinking until it is
+       technically present and practically unreadable is the worse
+       answer. Nothing is lost: each card already states in words what it
+       waits on, which is what the edges illustrate. */
+    .openspec-pipeline-picture {
+      width: auto;
+      height: auto;
+    }
+
+    .openspec-pipeline-edges { display: none; }
+
+    .openspec-pipeline-lane { display: block; margin-bottom: 16px; }
+
+    .openspec-pipeline-lane-heading {
+      display: block;
+      margin: 0 0 6px;
+      font-size: 0.9em;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: var(--muted);
+    }
+
+    .openspec-pipeline-node {
+      position: static;
+      width: 100%;
+      height: auto;
+      /* Nothing is clipped here: there is room to run on, and the card
+         is no longer holding a coordinate for anything else. */
+      overflow: visible;
+      margin-bottom: 8px;
+    }
+
+    .openspec-pipeline-node-name { white-space: normal; }
   }
 `;
 
diff --git a/packages/webui/src/standalone-entry.tsx b/packages/webui/src/standalone-entry.tsx
index 5b823641..f349236f 100644
--- a/packages/webui/src/standalone-entry.tsx
+++ b/packages/webui/src/standalone-entry.tsx
@@ -5,7 +5,7 @@
 // not library code reused in the extension.
 
 import { createRoot } from "react-dom/client";
-import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FetchTransport } from "./transport/fetch-transport.js";
 import { AiPanel } from "./components/AiPanel.js";
 import { describeRunCompletionNotification } from "./notify-run-completion.js";
@@ -14,6 +14,8 @@ import { ChangeTimelineView } from "./components/ChangeTimelineView.js";
 import { ChangesList } from "./components/ChangesList.js";
 import { ArchiveList } from "./components/ArchiveList.js";
 import { ProcessesView, type ProcessesApi } from "./components/ProcessesView.js";
+import { PipelineView } from "./components/PipelineView.js";
+import { loadChangeReadiness } from "./change-readiness-client.js";
 import { Tabs, TabPanel } from "./components/Tabs.js";
 import { buildDefaultChangeDir, shellThemeCss } from "./shell-ui.js";
 import { VSCODE_LOCAL_SERVER_EMBED_SIGNAL, computeVisibleTabs, readEmbedSignal } from "./host-embed.js";
@@ -320,6 +322,17 @@ function StandaloneApp() {
     writeChangeOverride: (changeName, config) => writeHarnessConfigApi(apiFetch, cwd, config, changeName),
   }), [cwd]);
 
+  // Stable across renders so the pipeline's polling effect is not torn
+  // down and restarted on every one of them.
+  const pipelineLoad = useCallback(() => loadChangeReadiness(apiFetch, cwd), [cwd]);
+
+  // `loadChangeEditor` is a hoisted declaration further down and reads
+  // `cwd` itself, so `cwd` is the only thing this has to be rebuilt for.
+  const openChangeInEditor = useCallback((changeName: string) => {
+    setActiveTab("change-editor");
+    void loadChangeEditor(changeName);
+  }, [cwd]);
+
   useEffect(() => {
     let cancelled = false;
     void (async () => {
@@ -1840,6 +1853,27 @@ function StandaloneApp() {
       </TabPanel>
       )}
 
+      {visibleTabIds.has("pipeline") && (
+      <TabPanel id="pipeline" activeTab={activeTab} lazy>
+      <section className="openspec-shell-panel">
+        <h2>Pipeline</h2>
+        <p className="openspec-shell-note">
+          Every active change in the order it declares, what is running right now, and what can be started
+          alongside what. The same report <code>openspec-ui-cli ready</code> prints.
+        </p>
+        {cwd.trim().length > 0
+          ? (
+            <PipelineView
+              load={pipelineLoad}
+              isActive={activeTab === "pipeline"}
+              onOpenChange={openChangeInEditor}
+            />
+          )
+          : <p>Enter workspace root to see the pipeline.</p>}
+      </section>
+      </TabPanel>
+      )}
+
       {visibleTabIds.has("harness-settings") && (
       <TabPanel id="harness-settings" activeTab={activeTab} lazy>
       <section className="openspec-shell-panel">