Skip to content

Draw each site's server dot before its name in the sites list - #652

Merged
zaerl merged 4 commits into
trunkfrom
sidebar-server-status-dot
Oct 7, 2026
Merged

Draw each site's server dot before its name in the sites list#652
zaerl merged 4 commits into
trunkfrom
sidebar-server-status-dot

Conversation

@zaerl

@zaerl zaerl commented Oct 7, 2026

Copy link
Copy Markdown
Contributor

Why

The prototype draws each site's server dot at the left of its name in the sites list, so which sites are running can be seen without opening each. The app had the dot only in the open site's header: a contributor with three sites had to open each one to learn which server was up. The dot also sat 1.5px above the lowercase letters beside it, in the header as in the list.

What changes

Every entry in the sites list now wears the header's own dot before its name: grey while the server is stopped, green running, amber starting, red for a server that went by itself or could not start, with the reason as the dot's tooltip. The attention dot for a stale or half-updated site (#94) stays, drawn after it.

A server lives in its site's view, open or not, so the view is the one thing that knows. Each SiteRow reports its server's state to the window as it changes and takes the report back when it unmounts; the window keeps the reports by path and hands them to sitesListRows. What a report says, what it does to the reports and what the dot shows are all decided in src/renderer/sites-list.cjs, where the suite can reach them.

For a screen reader the dot's words follow the name, as the attention dot's do, and only when the dot is not the grey every site starts with: said after every name, "Server stopped" would be the thing heard most and needed least. So an entry is named my-site while stopped and my-site (Server running) while running.

Both dots, and the header's, are now centred on the text's x-height with vertical-align: middle, which centres an inline box on the parent font's x-height by definition and so holds on Windows with a different font. A flex item, which the dots were, is centred on the line box instead, 1.5px higher.

Deliberately not in it: a dot for the build watch in the list, and any control on the list's dot. The dot reports; the header and the details act.

How to test this

Platforms: any. The x-height alignment is worth a look on Windows too, where the font differs: the rule is font-agnostic, but only a look confirms it.

The first journey in tests/e2e/journeys/dev-server.spec.js walks the reported path and reads the list's dot at each turn: starting, running, stopped and crashed, with the entry's name. It is red without the change. From the repository root:

npx playwright test --project=journeys tests/e2e/journeys/dev-server.spec.js

What the journey cannot reach is a real server, since journeys stub the handler that starts one, and what the dots look like beside real text:

Starting state: two sites, both set up, neither server running. The Buildkite artifact for the head commit, on macOS or Windows.

  1. Look at the sites list. Expected: every entry has a grey dot at the left of its name, on the same line as the lowercase letters, and a stale site has its amber dot after it.
  2. On the open site, open the server's menu in the page header and choose Start development server. Expected: the entry's dot turns amber while the server starts and green once the site opens in the browser. The header's dot sits on its words' x-height, as the list's does.
  3. Click the other site in the list. Expected: its own dot is still grey, and the first site's dot is still green while you look at the second.
  4. Go back to the first site and choose Stop development server. Expected: its dot is grey again.
  5. Narrow the window until the header's menus show only their dots. Expected: one gap between a dot and its chevron, not two.

What must not have happened: no site's entry has lost its name or project line; a long name still ends in an ellipsis; the attention dot of a stale site is still there, after the server dot; nothing else in the header moved.

Risks and limitations

  • A running stale site shows two dots side by side, a green and an amber. The prototype has no attention dot to reconcile with, so this keeps both rather than folding two meanings into one dot.
  • A crashed server's words are the whole sentence from the details, so that entry's accessible name is long. It says what the red dot means, which "Server stopped" would not.
  • The guide's sidebar screenshots were not retaken.
  • Pre-PR review: 2 [fix here] · 0 [follow-up], both fixed in 6229fb6.

Related

Follow-up to #590 (the sites list) and #595 (the server and the watch in the header).

Design decisions and alternatives considered
  • The view reports up, rather than the main process broadcasting. "Starting" is a renderer state: it covers the wait for the build watch before the server is even asked for. Only the view knows it, so a main-process list of running servers would have drawn the wrong colour for the longest phase.
  • One effect, with a cleanup that takes the report back. Two effects, one to report and one to clean up on unmount, would have lost the entry if the callback's identity ever changed; one effect's cleanup and re-run land in the same commit, so the list sees a single change and no grey dot in between.
  • No words for a stopped server. The prototype announces "Server stopped" before every name. Here the grey dot is the default and says nothing, as the attention dot says nothing when there is nothing to report.
  • vertical-align: middle over a pixel offset. The dot was measured 1.5px high against the ink of the letters, in a screenshot of the running app. A margin-top would have fixed that for this font and this size; vertical-align: middle is the CSS definition of "centred on the x-height", so it follows the font.
Review outcome (required — see AGENTS.md)

2 [fix here] · 0 [follow-up] — both fixed.

  • 🟡 Architecture, [fix here]: the words a view reports of its server, and what a report does to the window's reports, were decided inline in index.jsx, where the suite cannot reach them. Fixed: serverReport and withServerReport in src/renderer/sites-list.cjs, with unit tests.

  • 🔵 Layout, [fix here]: the space between a process's dot and its words was the dot's margin, which stayed when the words gave way to the dot in a short header and doubled the gap before the chevron. Fixed: the margin is the words' own and goes with them.

  • Review: completed — a separate agent context running .github/instructions/code-review.instructions.md; reviewed head aad1b72 / base 0cd70e4 (origin/trunk); npm test 2047 pass, eslint src tests scripts and Stylelint clean (a repo-wide eslint . fails only on stale checkouts under .claude/worktrees, which are not part of the branch); outcome above.

  • Since review: aad1b72 → 6229fb6 checked; the one commit applies the two findings and nothing else. npm test 2049 pass, lint clean, and the dev-server, site-header, auto-start and logs journeys pass on the new head.

  • CodeRabbit: not yet requested.

Implementation notes
  • src/renderer/sites-list.cjs: serverDot (what the row draws; unknown or missing reports are offline), serverReport (what a view reports from serverProcess), withServerReport (the reducer). sitesListRows takes servers by path.
  • src/renderer/index.jsx: serverReports state and the onServerStatus callback in App; the reporting effect in SiteRow.
  • src/renderer/components/sites-sidebar.jsx: draws ProcessStatus before the name and the hidden words after it. ProcessStatus in site-header-actions.jsx gained an optional title.
  • src/renderer/shell.css: the name span is one nowrap line with the ellipsis, the dots inline boxes; the header's dot and words are one inline span inside the button.
  • Journeys: dev-server.spec.js reads the list's dot at each state; logs.spec.js and auto-start.spec.js name a running site's entry with its dot's words, since the accessible name carries them.
  • Measured alignment, in the ink of a window screenshot at 1x: list dot centre 93.5 against the letters' 95.5 before, 95.5 against 95.5 after; header dot 32.5 against 34 before, 33.5 against 34 after.
Screenshots or recording

The list before the alignment fix (dots centred on the line box) and after (dots on the x-height), and the header's menu, are to be attached from the measuring run; gh cannot upload images, so they go in from the web UI.

🤖 Generated with Claude Code

zaerl and others added 4 commits October 7, 2026 14:19
@zaerl @claude
Draw each site's server dot before its name in the sites list
7f48582 
The prototype draws the server's dot at the left of every site name in the
sidebar, so which site is running can be seen without opening each. The app
had the dot only in the open site's header, because a server lives in its
site's view and the list knew nothing of it.

Each site's view now reports its server's state to the window as it changes,
and takes the report back when the view goes; the window hands the reports to
sitesListRows by path, and every row carries a `server` the list draws with
the header's own ProcessStatus: grey until the view has said otherwise, green
running, amber starting, red for a server that went by itself or could not
start. The dot's words are said after the name, as the attention dot's are,
and only when the dot is not the grey every site starts with. The attention
dot (#94) stays, after it.

The journeys that click a running site's entry now name it with its dot's
words, and the dev-server journey reads the list's dot at each turn.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@zaerl @claude
Centre the sites list's dots on the name's x-height
f0d0ff0 
Measured in the app, each dot's ink was centred on the 24px line box, 1.5px
above the centre of the lowercase letters beside it. The name span is no
longer a flex box: it is one nowrap line, cut with an ellipsis as the text
span was, and the dots are inline boxes with `vertical-align: middle`, which
centres a box on the parent's x-height whatever the font. Re-measured, the
dot's centre and the letters' centre now share a pixel.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@zaerl @claude
Centre the header's process dots on their words' x-height
aad1b72 
The same offset as in the sites list: a flex item of the menu's button, the
dot sat 1.5px above the lowercase letters beside it. The dot and the words
are now one inline line inside the button, and the dot an inline box with
`vertical-align: middle`. Re-measured, the two centres are half a pixel
apart. The words still give way to the dot alone when the header is short of
room.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@zaerl @claude
Decide a server report in sites-list.cjs, and keep one gap in a short…
6229fb6 
… header

Two findings of the pre-PR review. The words a view reports of its server,
and what a report does to the window's reports by path, were decided inline
in index.jsx, where the suite cannot reach them; they are serverReport and
withServerReport in sites-list.cjs now, with tests. And the space between a
process's dot and its words was the dot's margin, which stayed when the words
gave way to the dot in a short header and doubled the gap before the chevron;
it is the words' own margin now, and goes with them.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Oct 7, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration
  • Configuration used: Repository: WordPress/contributor-toolkit/.coderabbit.yaml
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: a5c3dd69-96da-428d-b2a7-4a720dc23fc0

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
  • Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@zaerl zaerl self-assigned this Oct 7, 2026
@zaerl
zaerl merged commit 5fbddf8 into trunk Oct 7, 2026
10 checks passed
@zaerl
zaerl deleted the sidebar-server-status-dot branch October 7, 2026 13:00
@zaerl zaerl added this to the v2.0.0 milestone Oct 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@zaerl zaerl

Labels

None yet

Projects

None yet

Milestone

v2.0.0-beta.1

Development

Successfully merging this pull request may close these issues.

1 participant

@zaerl