feat(setup): one page header, quieter rows and plainer statuses

[dizys]

First of four stacked PRs that rework the setup console's UX. This one keeps every page where it is and changes how each one reads: one consistent header, quieter rows, plain-language status, and only failures as notices. The next PR moves things; this one makes them consistent first.

Screenshots

Same sample data before and after (scripts/fixtures/console), light theme; desktop at 1280 px, phone at 390 px. Click an image for full size.

Before	After
Agents: the breadcrumb bar becomes a page header with a guide link; each status says one thing; an update reads 2.1.302 → 2.1.303; the “How sign-in works” table is gone.
Overview, first start: the first-start banner and the “from the last check” notice go; progress is an Activity list; the checklist names the next step, and sign-ins aren’t asked for twice.
Toolchains, with a failed update: plain statuses (Rust’s “stable is out · mise offers it once it has been out a day” is gone), a section named for what it holds, and quieter rows.

Before	After	Before	After
Devices: one menu per device instead of two buttons under each.		Ports: a published port has one Copy link, and its address keeps the row’s width.

What changes

Every page opens the same way. A title, one line on what the page is for with a Learn more link to its guide (pinned to the image's release), and the page's main action. The breadcrumb top bar, the duplicate section labels and the "How sign-in works / How publishing works" tables are gone. The guides already cover them.

One route table. client/routes.js is now the single list of pages. The server-drawn sidebar, the phone's tab bar, the router, the palette's Go to items and the G shortcuts all read it, so adding or renaming a page is a one-line change. (Before, the same list lived in five places.)

Rows line up and stay on one line.

• Every row reserves its ⋯ slot, so actions align down a list even when a row has no menu.
• An update reads 2.1.302 → 2.1.303 beside the name, in place of an arrow icon to hover.
• A published port's one button is Copy link. The QR code, opening the link and stopping it are in its ⋯ menu. On a phone, a published or failed port puts its buttons under the address or error, so neither is cut short.
• Devices and unused links act from one menu (Rename…, Revoke…). On a phone they no longer wrap two buttons under each device.
• Turning T3 Connect off moves into its menu.

Destructive actions are never solid buttons. Clear caches, Stop (port) and Revoke link are quiet. They still confirm.

The sidebar only marks what needs you.

• Warn counts for problems.
• A small spinner while something installs, and a dot while a port is published.
• No more plain counts that read like alerts.

Notices only say what failed. "Device details are from the last check" and "Sign-in state is from the last check" are gone, since they fill in by themselves. First start's progress is a line at the top of each page instead of a banner.

Plain language. Each status says one thing, once:

• Agents: Signed in, Signed in as …, Not signed in, No provider key yet, Key saved for OpenCode Go, Credentials saved, checked when you first use it, Not installed · a 657 MB download, through T3 Code. Before, a status could repeat the method or the version beside it.
• Tools: Up to date, or the update's own detail. A failed check says couldn't check for updates.
• "stable is out · mise offers it once it has been out a day" → "1.27.2 available in 21 hours".
• "Sign-in state not readable" → "Couldn't check its sign-in".
• Source control rows drop the host prefix that the row's name already says.
• Overview's checklist names the next step (Set the public URL, Start the server) until it's done (Device paired, Agents signed in). The first-start line lists names the way a sentence would ("installing Go, Rust, Bun and 2 more"). Needs you leaves sign-ins to the checklist until setup is done, so they aren't asked for twice.
• The palette says Sign in to Grok Build, Retry the Codex update or Retry installing Codex. An update's item says the version it starts from.
• Toolchains' first section is Default toolchains. Its footnotes, like every card's, use the info icon.

Fixes

• Overview could stall at 3 of 4. A server whose only signed-in agent was Muse (its sign-in is only checked on first use) never finished setup, and the step had no button. Saved credentials now count. An agent whose sign-in can't be read offers a way forward. A new test checks that every step that isn't done offers an action.
• "stable available once it's a day old" for Rust. mise reports a channel name where a release would be, and the page treated the word as a newer version than 1.99.1. Channel names are now ignored.
• An anonymous or unmounted home or state folder now needs you. It counts in the sidebar and in T3 Code's Setup badge. Recreating such a container silently loses agents, toolchains and sign-ins.

For reviewers and contributors

• scripts/console-screens.js photographs every page in three scenarios (set up, first start, everything wrong at once) at phone, tablet, desktop and embedded sizes, light and dark. It uses fixed sample data from scripts/fixtures/console, and nothing it presses reaches the server. CONTRIBUTING.md now mentions it.
• The geometry, drafts, rows, storage, auto-update, context and skills audits were updated for the new markup and all pass against scripts/dev-console.mjs.

Test plan

• node --test tests/*.test.mjs: 596 pass (new: readiness can always finish, volume warnings, channel names, the route table, guide links)
• node scripts/harness-ui-audit.js
• scripts/ui-audit.js: no findings at 360, 390, 820, 1100 and 1440 px, and embedded at 390 and 1198
• form-drafts, row, storage, auto-update, context and skills UI audits pass
• CI: lint, versions, and the browser and core images built and smoke-tested on amd64 and arm64

Stack: #42 Foundations → #43 Structure → #44 Overview → #45 Instructions & skills

🤖 Generated with Claude Code