diff --git a/crates/observer-app/src/supervision/setup.rs b/crates/observer-app/src/supervision/setup.rs
index 2a6ccfa8..b072be84 100644
--- a/crates/observer-app/src/supervision/setup.rs
+++ b/crates/observer-app/src/supervision/setup.rs
@@ -10,13 +10,14 @@ use observer_domain::convars::CfgConvars;
 use observer_domain::error::{ApiError, ErrorCode};
 use observer_domain::launch::{LaunchChange, OneSync, StoredLaunch};
 use observer_domain::server_data::{
-    CfgCheck, CfgFinding, CfgReport, Discovery, EndpointProtocol, FindingKind, FolderCheck, FolderListing,
-    FolderQuery, FolderReport, LicenceState, Place, PlaceKind, Severity,
+    CfgCheck, CfgFinding, CfgReport, CfgText, CfgTextQuery, Discovery, EndpointProtocol, FileListing,
+    FilesQuery, FindingKind, FolderCheck, FolderListing, FolderQuery, FolderReport, LicenceState, Place,
+    PlaceKind, Severity,
 };
 use observer_fxserver::cfg::Context;
 use observer_fxserver::folders::{self, Search};
 use observer_fxserver::layout::{Flavour, Layout};
-use observer_fxserver::server_data;
+use observer_fxserver::{server_data, server_files};
 
 use super::{Supervision, read_launch};
 use crate::servers::follow_rules;
@@ -48,6 +49,26 @@ impl Supervision {
         blocking(move || folders::list(&query, &observer)).await
     }
 
+    /// The entries of one folder of a server folder, for the setup's file browser. It changes
+    /// nothing.
+    pub async fn list_files(&self, query: FilesQuery) -> Result<FileListing, Error> {
+        let _turn = self
+            .inner
+            .folder_reads
+            .acquire()
+            .await
+            .map_err(io::Error::other)?;
+        let observer = self.inner.data_dir.clone();
+        blocking(move || server_files::list(&query.data_path, &query.path, &observer)).await
+    }
+
+    /// A cfg of a server folder with its secrets left out, for the setup to show. It changes
+    /// nothing.
+    pub async fn cfg_text(&self, query: CfgTextQuery) -> Result<CfgText, Error> {
+        let observer = self.inner.data_dir.clone();
+        blocking(move || server_files::cfg_text(&query.data_path, &query.cfg_file, &observer)).await
+    }
+
     /// Searches the home folder and the local drives for servers, and names the places the owner
     /// may browse from. It changes nothing.
     pub async fn discover(&self) -> Result<Discovery, Error> {
diff --git a/crates/observer-domain/src/server_data.rs b/crates/observer-domain/src/server_data.rs
index 81c746f6..60560596 100644
--- a/crates/observer-domain/src/server_data.rs
+++ b/crates/observer-domain/src/server_data.rs
@@ -234,6 +234,95 @@ pub enum CfgFileProblem {
     TooLarge,
 }
 
+/// `POST /api/servers/default/setup/files`: the entries of one folder of a server folder, for the
+/// setup's file browser.
+#[derive(Debug, Clone, PartialEq, Eq, Deserialize, TS)]
+#[serde(rename_all = "camelCase", deny_unknown_fields)]
+#[ts(export)]
+pub struct FilesQuery {
+    pub data_path: String,
+    /// Relative to the data folder with `/`; empty for the data folder itself.
+    #[serde(default)]
+    pub path: String,
+}
+
+/// One folder of a server folder, as the setup's file browser shows it.
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+pub struct FileListing {
+    /// The folder listed, as asked.
+    pub path: String,
+    /// The data folder's problem, or why this folder cannot be listed: `invalidPath`, `missing`,
+    /// `notAFolder`, `unreadable` (a link, or a folder Observer never opens) or `insideObserver`.
+    pub problem: Option<FolderProblem>,
+    /// Folders first, then files, by name, case aside.
+    pub entries: Vec<FileEntry>,
+    /// More entries than the 500 listed.
+    pub truncated: bool,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+pub struct FileEntry {
+    pub name: String,
+    /// Relative to the data folder with `/`.
+    pub path: String,
+    pub kind: FileEntryKind,
+    /// A link or a junction, which the browser never follows.
+    pub link: bool,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+pub enum FileEntryKind {
+    Folder,
+    /// A `.cfg` file, which the setup reads.
+    Cfg,
+    /// Any other file: listed, never read.
+    File,
+    /// What holds secrets or belongs to FXServer or Observer: `cache`, txAdmin's data, `.env`
+    /// and key files, Observer's own folder. Listed so the owner sees it is there, never opened.
+    Withheld,
+}
+
+/// `POST /api/servers/default/setup/cfg/text`.
+#[derive(Debug, Clone, PartialEq, Eq, Deserialize, TS)]
+#[serde(rename_all = "camelCase", deny_unknown_fields)]
+#[ts(export)]
+pub struct CfgTextQuery {
+    pub data_path: String,
+    /// Relative to the data folder.
+    pub cfg_file: String,
+}
+
+/// A cfg as the setup shows it, with its secrets left out.
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+pub struct CfgText {
+    /// The data folder's own problem: with one, the cfg is not read.
+    pub folder: Option<FolderProblem>,
+    pub problem: Option<CfgFileProblem>,
+    /// Why the path rules refuse it, with `invalidPath`.
+    pub path_problem: Option<LaunchProblem>,
+    /// Each line, cut where a secret was: the secret itself never leaves Observer.
+    pub lines: Vec<Vec<CfgSpan>>,
+    /// The file has more lines than the 2,000 shown.
+    pub truncated: bool,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+pub struct CfgSpan {
+    /// Empty for a secret.
+    pub text: String,
+    pub secret: bool,
+}
+
 #[derive(Debug, Clone, PartialEq, Eq, Serialize, TS)]
 #[ts(export)]
 pub struct CfgFile {
diff --git a/crates/observer-fxserver/src/lib.rs b/crates/observer-fxserver/src/lib.rs
index c7b31c1d..f7dd7851 100644
--- a/crates/observer-fxserver/src/lib.rs
+++ b/crates/observer-fxserver/src/lib.rs
@@ -16,6 +16,7 @@ pub mod players;
 pub mod pre_launch;
 pub mod recovery;
 pub mod server_data;
+pub mod server_files;
 pub mod stdin;
 pub mod supervisor;
 pub mod trace;
diff --git a/crates/observer-fxserver/src/server_files.rs b/crates/observer-fxserver/src/server_files.rs
new file mode 100644
index 00000000..7bc69a40
--- /dev/null
+++ b/crates/observer-fxserver/src/server_files.rs
@@ -0,0 +1,459 @@
+//! The setup's view into a server folder: the entries of one of its folders, and a cfg's text with
+//! its secrets left out. Both only read, never go up out of the folder, and never list through a
+//! link; what holds secrets or belongs to FXServer or Observer is named and never opened.
+
+use std::fs;
+use std::io;
+use std::ops::Range;
+use std::path::{Path, PathBuf};
+
+use observer_domain::files::refused_by_name;
+use observer_domain::launch::{self, Platform};
+use observer_domain::server_data::{
+    CfgFileProblem, CfgSpan, CfgText, FileEntry, FileEntryKind, FileListing, FolderProblem,
+};
+
+use crate::cfg::{self, ReadError};
+use crate::changes::mask;
+
+const MAX_ENTRIES: usize = 500;
+const MAX_LINES: usize = 2000;
+
+/// The entries of `relative`, a folder of the server folder `data_path`, folders first.
+pub fn list(data_path: &str, relative: &str, observer: &Path) -> FileListing {
+    let mut listing = FileListing {
+        path: relative.to_owned(),
+        problem: None,
+        entries: Vec::new(),
+        truncated: false,
+    };
+    let observer = fs::canonicalize(observer).ok();
+    let folder = match data_folder(data_path, observer.as_deref()).and_then(|data| {
+        let parts = components(relative).ok_or(FolderProblem::InvalidPath)?;
+        let folder = descend(&data, &parts)?;
+        Ok((folder, parts))
+    }) {
+        Ok(found) => found,
+        Err(problem) => {
+            listing.problem = Some(problem);
+            return listing;
+        }
+    };
+    let (folder, parts) = folder;
+    let Ok(read) = fs::read_dir(&folder) else {
+        listing.problem = Some(FolderProblem::Unreadable);
+        return listing;
+    };
+    for entry in read.flatten() {
+        if listing.entries.len() == MAX_ENTRIES {
+            listing.truncated = true;
+            break;
+        }
+        let Some(name) = entry.file_name().to_str().map(str::to_owned) else {
+            continue;
+        };
+        let Ok(kind) = entry.file_type() else {
+            continue;
+        };
+        let link = kind.is_symlink();
+        let mut path = parts.clone();
+        path.push(name.clone());
+        let is_folder = if link {
+            fs::metadata(entry.path()).is_ok_and(|metadata| metadata.is_dir())
+        } else {
+            kind.is_dir()
+        };
+        let own = observer.as_deref().is_some_and(|observer| {
+            fs::canonicalize(entry.path()).is_ok_and(|real| real.starts_with(observer))
+        });
+        let kind = if withheld(&path) || own {
+            FileEntryKind::Withheld
+        } else if is_folder {
+            FileEntryKind::Folder
+        } else if is_cfg(&name) {
+            FileEntryKind::Cfg
+        } else {
+            FileEntryKind::File
+        };
+        listing.entries.push(FileEntry {
+            name,
+            path: path.join("/"),
+            kind,
+            link,
+        });
+    }
+    listing.entries.sort_by_cached_key(|entry| {
+        let folder = entry.kind == FileEntryKind::Folder
+            || (entry.kind == FileEntryKind::Withheld && folder.join(&entry.name).is_dir());
+        (!folder, entry.name.to_lowercase())
+    });
+    listing
+}
+
+/// The cfg `cfg_file` of the server folder `data_path`, line by line, its secrets left out.
+pub fn cfg_text(data_path: &str, cfg_file: &str, observer: &Path) -> CfgText {
+    let mut shown = CfgText {
+        folder: None,
+        problem: None,
+        path_problem: None,
+        lines: Vec::new(),
+        truncated: false,
+    };
+    let observer = fs::canonicalize(observer).ok();
+    let data = match data_folder(data_path, observer.as_deref()) {
+        Ok(data) => data,
+        Err(problem) => {
+            shown.folder = Some(problem);
+            return shown;
+        }
+    };
+    shown.path_problem = launch::cfg_problem(cfg_file, Platform::host());
+    if shown.path_problem.is_some() {
+        shown.problem = Some(CfgFileProblem::InvalidPath);
+        return shown;
+    }
+    let parts: Vec<String> = cfg_file.split(['/', '\\']).map(str::to_owned).collect();
+    if withheld(&parts) {
+        shown.problem = Some(CfgFileProblem::Unreadable);
+        return shown;
+    }
+    let text = match cfg::read(&data.join(cfg_file)) {
+        Ok(text) => text,
+        Err(error) => {
+            shown.problem = Some(match error {
+                ReadError::Io(error) if error.kind() == io::ErrorKind::NotFound => CfgFileProblem::Missing,
+                ReadError::Io(_) => CfgFileProblem::Unreadable,
+                ReadError::NotAFile => CfgFileProblem::NotAFile,
+                ReadError::TooLarge => CfgFileProblem::TooLarge,
+            });
+            return shown;
+        }
+    };
+    let secrets = merged(mask::secrets(&text, cfg_file, true));
+    let mut start = 0;
+    for (number, line) in text.split('\n').enumerate() {
+        if number == MAX_LINES {
+            shown.truncated = true;
+            break;
+        }
+        let end = start + line.len();
+        let content = line.strip_suffix('\r').map_or(end, |kept| start + kept.len());
+        shown.lines.push(spans(&text, start..content, &secrets));
+        start = end + 1;
+    }
+    // A file that ends with a line break has no line after it.
+    if !shown.truncated && text.ends_with('\n') {
+        shown.lines.pop();
+    }
+    shown
+}
+
+/// The server folder, once the path rules accept it and it is a folder outside Observer's own.
+fn data_folder(data_path: &str, observer: Option<&Path>) -> Result<PathBuf, FolderProblem> {
+    if launch::folder_problem(data_path, Platform::host()).is_some() {
+        return Err(FolderProblem::InvalidPath);
+    }
+    let data = PathBuf::from(data_path);
+    let metadata = fs::metadata(&data).map_err(|error| match error.kind() {
+        io::ErrorKind::NotFound => FolderProblem::Missing,
+        _ => FolderProblem::Unreadable,
+    })?;
+    if !metadata.is_dir() {
+        return Err(FolderProblem::NotAFolder);
+    }
+    let real = fs::canonicalize(&data).map_err(|_| FolderProblem::Unreadable)?;
+    if observer.is_some_and(|observer| real.starts_with(observer)) {
+        return Err(FolderProblem::InsideObserver);
+    }
+    Ok(data)
+}
+
+/// The names of a path written with `/`, none of them empty, `.`, `..` or holding what a path
+/// could reach elsewhere with. The empty path is the folder itself.
+fn components(relative: &str) -> Option<Vec<String>> {
+    if relative.is_empty() {
+        return Some(Vec::new());
+    }
+    relative
+        .split('/')
+        .map(|part| {
+            let refused = part.is_empty()
+                || part == "."
+                || part == ".."
+                || part.contains(['\\', ':', '\0'])
+                || part.chars().all(|c| c == '.' || c == ' ');
+            (!refused).then(|| part.to_owned())
+        })
+        .collect()
+}
+
+/// Walks down `parts` from `data`, refusing a link, a file, and a folder Observer never opens.
+fn descend(data: &Path, parts: &[String]) -> Result<PathBuf, FolderProblem> {
+    let mut folder = data.to_path_buf();
+    for (depth, part) in parts.iter().enumerate() {
+        folder.push(part);
+        if withheld(&parts[..=depth]) {
+            return Err(FolderProblem::Unreadable);
+        }
+        let metadata = fs::symlink_metadata(&folder).map_err(|error| match error.kind() {
+            io::ErrorKind::NotFound => FolderProblem::Missing,
+            _ => FolderProblem::Unreadable,
+        })?;
+        if metadata.file_type().is_symlink() {
+            return Err(FolderProblem::Unreadable);
+        }
+        if !metadata.is_dir() {
+            return Err(FolderProblem::NotAFolder);
+        }
+    }
+    Ok(folder)
+}
+
+/// What the setup names and never opens: names that hold secrets anywhere, as file access and file
+/// changes refuse them, and FXServer's `cache` at the root.
+fn withheld(path: &[String]) -> bool {
+    refused_by_name(path)
+        || path
+            .first()
+            .is_some_and(|first| first.eq_ignore_ascii_case("cache"))
+}
+
+fn is_cfg(name: &str) -> bool {
+    name.len() > 4
+        && name
+            .get(name.len() - 4..)
+            .is_some_and(|end| end.eq_ignore_ascii_case(".cfg"))
+}
+
+/// The secrets in order, those that touch or overlap made one.
+fn merged(mut secrets: Vec<Range<usize>>) -> Vec<Range<usize>> {
+    secrets.sort_by_key(|secret| secret.start);
+    let mut out: Vec<Range<usize>> = Vec::with_capacity(secrets.len());
+    for secret in secrets {
+        match out.last_mut() {
+            Some(last) if secret.start <= last.end => last.end = last.end.max(secret.end),
+            _ => out.push(secret),
+        }
+    }
+    out
+}
+
+/// The line `line` of `text`, cut at each secret: text between them, and an empty span where each
+/// one was.
+fn spans(text: &str, line: Range<usize>, secrets: &[Range<usize>]) -> Vec<CfgSpan> {
+    let mut out = Vec::new();
+    let mut at = line.start;
+    for secret in secrets
+        .iter()
+        .filter(|secret| secret.start < line.end && secret.end > line.start)
+    {
+        let from = secret.start.max(line.start);
+        if from > at {
+            out.push(CfgSpan {
+                text: text[at..from].to_owned(),
+                secret: false,
+            });
+        }
+        out.push(CfgSpan {
+            text: String::new(),
+            secret: true,
+        });
+        at = secret.end.min(line.end);
+    }
+    if at < line.end || out.is_empty() {
+        out.push(CfgSpan {
+            text: text[at..line.end].to_owned(),
+            secret: false,
+        });
+    }
+    out
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// A server folder in a temporary directory, and an Observer data folder beside it.
+    fn server() -> (tempfile::TempDir, PathBuf, PathBuf) {
+        let root = tempfile::tempdir().unwrap();
+        let data = root.path().join("server-data");
+        let observer = root.path().join("observer-data");
+        fs::create_dir_all(data.join("resources/[local]/hello")).unwrap();
+        fs::create_dir_all(data.join("configs")).unwrap();
+        fs::create_dir_all(data.join("cache/files")).unwrap();
+        fs::create_dir_all(data.join("txData/default")).unwrap();
+        fs::create_dir_all(&observer).unwrap();
+        fs::write(data.join("server.cfg"), "sv_hostname \"Lab\"\n").unwrap();
+        fs::write(
+            data.join("configs/perms.cfg"),
+            "add_ace group.admin command allow\n",
+        )
+        .unwrap();
+        fs::write(data.join(".env"), "TOKEN=1\n").unwrap();
+        fs::write(data.join("README.md"), "hello\n").unwrap();
+        (root, data, observer)
+    }
+
+    fn names(listing: &FileListing) -> Vec<(&str, FileEntryKind)> {
+        listing
+            .entries
+            .iter()
+            .map(|entry| (entry.name.as_str(), entry.kind))
+            .collect()
+    }
+
+    #[test]
+    fn a_folder_lists_its_folders_first_and_names_what_it_never_opens() {
+        let (_root, data, observer) = server();
+
+        let listing = list(data.to_str().unwrap(), "", &observer);
+
+        assert_eq!(listing.problem, None);
+        assert_eq!(
+            names(&listing),
+            [
+                ("cache", FileEntryKind::Withheld),
+                ("configs", FileEntryKind::Folder),
+                ("resources", FileEntryKind::Folder),
+                ("txData", FileEntryKind::Withheld),
+                (".env", FileEntryKind::Withheld),
+                ("README.md", FileEntryKind::File),
+                ("server.cfg", FileEntryKind::Cfg),
+            ]
+        );
+    }
+
+    #[test]
+    fn a_subfolder_lists_its_entries_by_their_path_from_the_server_folder() {
+        let (_root, data, observer) = server();
+
+        let listing = list(data.to_str().unwrap(), "configs", &observer);
+
+        assert_eq!(listing.entries.len(), 1);
+        assert_eq!(listing.entries[0].path, "configs/perms.cfg");
+        assert_eq!(listing.entries[0].kind, FileEntryKind::Cfg);
+    }
+
+    #[test]
+    fn a_path_that_climbs_out_or_into_a_withheld_folder_is_refused() {
+        let (_root, data, observer) = server();
+        let data = data.to_str().unwrap();
+
+        for path in [
+            "..",
+            "configs/..",
+            "/configs",
+            "configs//x",
+            "C:\\Windows",
+            "a\\..\\b",
+        ] {
+            assert_eq!(
+                list(data, path, &observer).problem,
+                Some(FolderProblem::InvalidPath),
+                "{path}"
+            );
+        }
+        assert_eq!(
+            list(data, "cache", &observer).problem,
+            Some(FolderProblem::Unreadable)
+        );
+        assert_eq!(
+            list(data, "txData/default", &observer).problem,
+            Some(FolderProblem::Unreadable)
+        );
+        assert_eq!(
+            list(data, "server.cfg", &observer).problem,
+            Some(FolderProblem::NotAFolder)
+        );
+        assert_eq!(
+            list(data, "missing", &observer).problem,
+            Some(FolderProblem::Missing)
+        );
+    }
+
+    #[test]
+    fn observers_own_folder_is_neither_listed_into_nor_a_server_folder() {
+        let (_root, data, observer) = server();
+        let inside = observer.join("server");
+        fs::create_dir_all(&inside).unwrap();
+
+        let listing = list(inside.to_str().unwrap(), "", &observer);
+
+        assert_eq!(listing.problem, Some(FolderProblem::InsideObserver));
+        assert_eq!(
+            list(data.to_str().unwrap(), "", &data).problem,
+            Some(FolderProblem::InsideObserver)
+        );
+    }
+
+    #[test]
+    fn a_cfg_comes_line_by_line_with_its_secrets_left_out() {
+        let (_root, data, observer) = server();
+        fs::write(
+            data.join("server.cfg"),
+            "sv_hostname \"Lab\"\r\nsv_licenseKey \"cfxk_abcdefghijklmnopqrstu_12345\"\nset mysql_connection_string \"mysql://root:hunter2@localhost/db\"\n",
+        )
+        .unwrap();
+
+        let shown = cfg_text(data.to_str().unwrap(), "server.cfg", &observer);
+
+        assert_eq!(shown.problem, None);
+        assert_eq!(shown.lines.len(), 3);
+        assert_eq!(
+            shown.lines[0],
+            [CfgSpan {
+                text: "sv_hostname \"Lab\"".into(),
+                secret: false
+            }]
+        );
+        let joined: String = shown
+            .lines
+            .iter()
+            .flatten()
+            .map(|span| span.text.as_str())
+            .collect();
+        assert!(!joined.contains("cfxk_"), "{joined}");
+        assert!(!joined.contains("hunter2"), "{joined}");
+        assert!(shown.lines[1].iter().any(|span| span.secret));
+        assert!(shown.lines[2].iter().any(|span| span.secret));
+    }
+
+    #[test]
+    fn a_cfg_the_rules_refuse_or_that_is_withheld_is_not_read() {
+        let (_root, data, observer) = server();
+        let data = data.to_str().unwrap();
+        fs::write(Path::new(data).join("cache/files/x.cfg"), "sv_licenseKey x\n").unwrap();
+
+        assert_eq!(
+            cfg_text(data, "../server.cfg", &observer).problem,
+            Some(CfgFileProblem::InvalidPath)
+        );
+        assert_eq!(
+            cfg_text(data, "cache/files/x.cfg", &observer).problem,
+            Some(CfgFileProblem::Unreadable)
+        );
+        assert_eq!(
+            cfg_text(data, "missing.cfg", &observer).problem,
+            Some(CfgFileProblem::Missing)
+        );
+        assert_eq!(
+            cfg_text(data, "configs", &observer).problem,
+            Some(CfgFileProblem::NotAFile)
+        );
+    }
+
+    #[test]
+    fn spans_cut_a_line_at_each_secret_and_keep_what_is_around() {
+        let text = "set a \"x\" b \"y\"";
+        let secrets = merged(vec![12..15, 6..9]);
+
+        let out = spans(text, 0..text.len(), &secrets);
+
+        assert_eq!(
+            out.iter()
+                .map(|span| (span.text.as_str(), span.secret))
+                .collect::<Vec<_>>(),
+            [("set a ", false), ("", true), (" b ", false), ("", true)]
+        );
+    }
+}
diff --git a/crates/observer-platform/src/windows/sockets.rs b/crates/observer-platform/src/windows/sockets.rs
index def946a1..00c48c7c 100644
--- a/crates/observer-platform/src/windows/sockets.rs
+++ b/crates/observer-platform/src/windows/sockets.rs
@@ -128,7 +128,8 @@ fn udp_socket(pid: u32, local: SocketAddr) -> Socket {
 
 fn tcp_state(state: i32) -> SocketState {
     match state {
-        MIB_TCP_STATE_LISTEN => SocketState::Listen,
+        // Windows 11 build 26300 lists every listener in state 0, which MIB_TCP_STATE leaves undefined.
+        0 | MIB_TCP_STATE_LISTEN => SocketState::Listen,
         MIB_TCP_STATE_ESTAB => SocketState::Established,
         _ => SocketState::Other,
     }
@@ -202,6 +203,8 @@ fn v6_address(address: [u8; 16], raw_port: u32, scope: u32) -> SocketAddr {
 mod tests {
     use std::net::{TcpListener, TcpStream, UdpSocket};
 
+    use windows_sys::Win32::NetworkManagement::IpHelper::MIB_TCP_STATE_TIME_WAIT;
+
     use super::*;
 
     #[test]
@@ -233,6 +236,14 @@ mod tests {
         assert_eq!(super::sockets(&[]).unwrap(), Vec::new());
     }
 
+    #[test]
+    fn a_listener_in_the_undefined_state_0_is_still_listening() {
+        assert_eq!(tcp_state(0), SocketState::Listen);
+        assert_eq!(tcp_state(MIB_TCP_STATE_LISTEN), SocketState::Listen);
+        assert_eq!(tcp_state(MIB_TCP_STATE_ESTAB), SocketState::Established);
+        assert_eq!(tcp_state(MIB_TCP_STATE_TIME_WAIT), SocketState::Other);
+    }
+
     #[test]
     fn ports_are_read_from_network_order() {
         assert_eq!(port(u32::from_ne_bytes([0x75, 0x30, 0, 0])), 30000);
diff --git a/crates/observer-web/src/api.rs b/crates/observer-web/src/api.rs
index 294317fc..047ec8af 100644
--- a/crates/observer-web/src/api.rs
+++ b/crates/observer-web/src/api.rs
@@ -177,6 +177,8 @@ pub(crate) fn routes() -> Vec<Route> {
         route(M::POST,   "/servers/default/setup/folder", read_launch, servers::check_folder),
         route(M::POST,   "/servers/default/setup/cfg",    read_launch, servers::check_cfg),
         route(M::POST,   "/servers/default/setup/folders",  read_launch, servers::list_folders),
+        route(M::POST,   "/servers/default/setup/files",    read_launch, servers::list_files),
+        route(M::POST,   "/servers/default/setup/cfg/text", read_launch, servers::cfg_text),
         route(M::POST,   "/servers/default/setup/discover", read_launch, servers::discover),
         route(M::PUT,    "/servers/default/setup",        edit_launch, servers::save_setup),
         route(M::POST,   "/servers/default/start",      control,      servers::start),
diff --git a/crates/observer-web/src/api/servers.rs b/crates/observer-web/src/api/servers.rs
index 578284c2..7674f2d4 100644
--- a/crates/observer-web/src/api/servers.rs
+++ b/crates/observer-web/src/api/servers.rs
@@ -8,7 +8,8 @@ use observer_domain::convars::{CATALOG_JSON, CfgConvars};
 use observer_domain::launch::{LaunchChange, StoredLaunch};
 use observer_domain::server::{CommandAck, ConsoleCommand, LogFile};
 use observer_domain::server_data::{
-    CfgCheck, CfgReport, Discovery, FolderCheck, FolderListing, FolderQuery, FolderReport,
+    CfgCheck, CfgReport, CfgText, CfgTextQuery, Discovery, FileListing, FilesQuery, FolderCheck,
+    FolderListing, FolderQuery, FolderReport,
 };
 use tokio_util::io::ReaderStream;
 
@@ -71,6 +72,20 @@ pub(crate) async fn list_folders(
     Ok(Json(state.supervision.list_folders(query).await?))
 }
 
+pub(crate) async fn list_files(
+    State(state): State<AppState>,
+    JsonBody(query): JsonBody<FilesQuery>,
+) -> Result<Json<FileListing>, Failure> {
+    Ok(Json(state.supervision.list_files(query).await?))
+}
+
+pub(crate) async fn cfg_text(
+    State(state): State<AppState>,
+    JsonBody(query): JsonBody<CfgTextQuery>,
+) -> Result<Json<CfgText>, Failure> {
+    Ok(Json(state.supervision.cfg_text(query).await?))
+}
+
 /// The search takes a few seconds: the panel asks for it once and when the owner asks again.
 pub(crate) async fn discover(State(state): State<AppState>) -> Result<Json<Discovery>, Failure> {
     Ok(Json(state.supervision.discover().await?))
diff --git a/crates/observer-web/src/tests/setup.rs b/crates/observer-web/src/tests/setup.rs
index 874ddff8..bd1ebf2f 100644
--- a/crates/observer-web/src/tests/setup.rs
+++ b/crates/observer-web/src/tests/setup.rs
@@ -16,6 +16,8 @@ const FOLDER: &str = "/api/servers/default/setup/folder";
 const CFG: &str = "/api/servers/default/setup/cfg";
 const FOLDERS: &str = "/api/servers/default/setup/folders";
 const DISCOVER: &str = "/api/servers/default/setup/discover";
+const FILES: &str = "/api/servers/default/setup/files";
+const CFG_TEXT: &str = "/api/servers/default/setup/cfg/text";
 const SETUP: &str = "/api/servers/default/setup";
 /// A test fixture, not a real key.
 const KEY: &str = "sv_licenseKey cfxk_ObserverLabFixture_k3y";
@@ -180,6 +182,69 @@ async fn a_folders_folders_are_listed_with_what_each_is() {
     assert_eq!(unknown.code(), "invalid_request");
 }
 
+#[tokio::test]
+async fn a_server_folders_files_are_listed_and_a_cfg_shown_without_its_secrets() {
+    let server = Server::new().await;
+    let owner = server.owner().await;
+    let live = server.server_folder("live", &endpoints(&free_address()));
+    fs::write(
+        std::path::Path::new(&live).join(".env"),
+        "TOKEN=1
+",
+    )
+    .unwrap();
+
+    let listed = server
+        .call(
+            Method::POST,
+            FILES,
+            Some(&owner),
+            Some(json!({ "dataPath": live, "path": "" })),
+        )
+        .await;
+    let climbing = server
+        .call(
+            Method::POST,
+            FILES,
+            Some(&owner),
+            Some(json!({ "dataPath": live, "path": ".." })),
+        )
+        .await;
+    let shown = server
+        .call(
+            Method::POST,
+            CFG_TEXT,
+            Some(&owner),
+            Some(json!({ "dataPath": live, "cfgFile": "server.cfg" })),
+        )
+        .await;
+
+    assert_eq!(listed.status, StatusCode::OK, "{}", listed.text);
+    let kinds: Vec<_> = listed.json()["entries"]
+        .as_array()
+        .unwrap()
+        .iter()
+        .map(|entry| {
+            (
+                entry["name"].as_str().unwrap().to_owned(),
+                entry["kind"].as_str().unwrap().to_owned(),
+            )
+        })
+        .collect();
+    assert_eq!(
+        kinds,
+        [
+            ("resources".to_owned(), "folder".to_owned()),
+            (".env".to_owned(), "withheld".to_owned()),
+            ("server.cfg".to_owned(), "cfg".to_owned()),
+        ]
+    );
+    assert_eq!(climbing.json()["problem"], "invalidPath");
+    assert_eq!(shown.status, StatusCode::OK, "{}", shown.text);
+    assert!(!shown.text.contains("cfxk_"), "{}", shown.text);
+    assert_eq!(shown.json()["lines"].as_array().unwrap().len(), 3);
+}
+
 #[tokio::test]
 async fn a_cfg_is_reported_with_its_files_facts_and_findings() {
     let server = Server::new().await;
@@ -344,6 +409,12 @@ async fn only_the_owner_checks_and_saves_and_the_save_takes_the_password_again()
         (Method::POST, FOLDER, folder.clone()),
         (Method::POST, CFG, cfg),
         (Method::POST, FOLDERS, json!({ "path": live, "prefix": "" })),
+        (Method::POST, FILES, json!({ "dataPath": live, "path": "" })),
+        (
+            Method::POST,
+            CFG_TEXT,
+            json!({ "dataPath": live, "cfgFile": "server.cfg" }),
+        ),
         (Method::POST, DISCOVER, json!({})),
         (Method::PUT, SETUP, change(&live, None)),
     ] {
@@ -385,6 +456,8 @@ async fn only_the_owner_checks_and_saves_and_the_save_takes_the_password_again()
         [
             format!("PUT {SETUP}"),
             format!("POST {DISCOVER}"),
+            format!("POST {CFG_TEXT}"),
+            format!("POST {FILES}"),
             format!("POST {FOLDERS}"),
             format!("POST {CFG}"),
             format!("POST {FOLDER}")
@@ -410,6 +483,8 @@ fn the_route_table_declares_the_setup_routes_owner_only() {
             (Method::POST, "/servers/default/setup/folder", Gate::Owner),
             (Method::POST, "/servers/default/setup/cfg", Gate::Owner),
             (Method::POST, "/servers/default/setup/folders", Gate::Owner),
+            (Method::POST, "/servers/default/setup/files", Gate::Owner),
+            (Method::POST, "/servers/default/setup/cfg/text", Gate::Owner),
             (Method::POST, "/servers/default/setup/discover", Gate::Owner),
             (Method::PUT, "/servers/default/setup", Gate::ReauthenticatedOwner),
         ]
diff --git a/web/e2e/flows.spec.ts b/web/e2e/flows.spec.ts
index 6b41a0f1..2bd1468b 100644
--- a/web/e2e/flows.spec.ts
+++ b/web/e2e/flows.spec.ts
@@ -72,14 +72,11 @@ test.describe.serial('Observer in a browser', () => {
         await page.getByLabel(en.setup.password, { exact: true }).fill(PASSWORD);
         await page.getByLabel(en.setup.confirm).fill(PASSWORD);
         await page.getByRole('button', { name: en.setup.submit }).click();
-        await expect(page.getByRole('heading', { level: 1 })).toContainText(setup.title);
+        await expect(page.getByRole('heading', { level: 1 })).toContainText(setup.headings.folder);
 
-        // The search of the host comes first; a server it finds closes the field for another path.
+        // The search of the host comes first; the field for another path stays beside what it finds.
         await expect(page.getByText(/^Observer looked in the usual places/)).toBeVisible({ timeout: 30_000 });
         const folder = page.getByRole('combobox', { name: setup.folder.label });
-        if (!(await folder.isVisible())) {
-            await page.getByText(setup.folder.elsewhere, { exact: true }).click();
-        }
         await folder.fill(env('E2E_SERVER_DATA'));
         await folder.press('Enter');
         await expect(page.getByText(setup.folder.accepted)).toBeVisible();
@@ -96,13 +93,13 @@ test.describe.serial('Observer in a browser', () => {
             dialog.getByRole('radio', { name: new RegExp(en.artifacts.use.nextStart) }),
         ).toBeChecked();
         await dialog.getByRole('button', { name: en.artifacts.use.confirm, exact: true }).click();
-        await expect(page.getByText(setup.build.selected(build))).toBeVisible();
+        await expect(page.getByText(en.artifacts.use.done.nextStart(build))).toBeVisible();
         await page.getByRole('button', { name: setup.continue }).click();
 
         await page.getByRole('button', { name: setup.start.saveAndStart }).click();
         // A sign-in a moment ago may stand for the password; otherwise the panel asks for it.
         const reauth = page.locator('dialog[open]').filter({ hasText: en.reauth.title });
-        const starting = page.getByText(setup.start.starting);
+        const starting = page.getByRole('region', { name: setup.launch.checked });
         await expect(starting.or(reauth)).toBeVisible();
         if (await reauth.isVisible()) {
             await reauth.getByLabel(en.reauth.password, { exact: true }).fill(PASSWORD);
@@ -111,6 +108,7 @@ test.describe.serial('Observer in a browser', () => {
         await expect(starting).toBeVisible();
         // Ready once the fake's bridge has reported in.
         await expect(page.getByText(setup.launch.ready)).toBeVisible();
+        await page.getByRole('link', { name: setup.launch.overview }).click();
         await expect(status()).toContainText(en.server_state.states.online);
     });
 
diff --git a/web/src/api/generated/CfgSpan.ts b/web/src/api/generated/CfgSpan.ts
new file mode 100644
index 00000000..18addc71
--- /dev/null
+++ b/web/src/api/generated/CfgSpan.ts
@@ -0,0 +1,7 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type CfgSpan = { 
+/**
+ * Empty for a secret.
+ */
+text: string, secret: boolean, };
diff --git a/web/src/api/generated/CfgText.ts b/web/src/api/generated/CfgText.ts
new file mode 100644
index 00000000..d9c672b1
--- /dev/null
+++ b/web/src/api/generated/CfgText.ts
@@ -0,0 +1,26 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { CfgFileProblem } from "./CfgFileProblem";
+import type { CfgSpan } from "./CfgSpan";
+import type { FolderProblem } from "./FolderProblem";
+import type { LaunchProblem } from "./LaunchProblem";
+
+/**
+ * A cfg as the setup shows it, with its secrets left out.
+ */
+export type CfgText = { 
+/**
+ * The data folder's own problem: with one, the cfg is not read.
+ */
+folder: FolderProblem | null, problem: CfgFileProblem | null, 
+/**
+ * Why the path rules refuse it, with `invalidPath`.
+ */
+pathProblem: LaunchProblem | null, 
+/**
+ * Each line, cut where a secret was: the secret itself never leaves Observer.
+ */
+lines: Array<Array<CfgSpan>>, 
+/**
+ * The file has more lines than the 2,000 shown.
+ */
+truncated: boolean, };
diff --git a/web/src/api/generated/CfgTextQuery.ts b/web/src/api/generated/CfgTextQuery.ts
new file mode 100644
index 00000000..a552546e
--- /dev/null
+++ b/web/src/api/generated/CfgTextQuery.ts
@@ -0,0 +1,10 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+/**
+ * `POST /api/servers/default/setup/cfg/text`.
+ */
+export type CfgTextQuery = { dataPath: string, 
+/**
+ * Relative to the data folder.
+ */
+cfgFile: string, };
diff --git a/web/src/api/generated/FileEntry.ts b/web/src/api/generated/FileEntry.ts
new file mode 100644
index 00000000..40dff4b5
--- /dev/null
+++ b/web/src/api/generated/FileEntry.ts
@@ -0,0 +1,12 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { FileEntryKind } from "./FileEntryKind";
+
+export type FileEntry = { name: string, 
+/**
+ * Relative to the data folder with `/`.
+ */
+path: string, kind: FileEntryKind, 
+/**
+ * A link or a junction, which the browser never follows.
+ */
+link: boolean, };
diff --git a/web/src/api/generated/FileEntryKind.ts b/web/src/api/generated/FileEntryKind.ts
new file mode 100644
index 00000000..3c9fa04e
--- /dev/null
+++ b/web/src/api/generated/FileEntryKind.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type FileEntryKind = "folder" | "cfg" | "file" | "withheld";
diff --git a/web/src/api/generated/FileListing.ts b/web/src/api/generated/FileListing.ts
new file mode 100644
index 00000000..a83feed3
--- /dev/null
+++ b/web/src/api/generated/FileListing.ts
@@ -0,0 +1,25 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { FileEntry } from "./FileEntry";
+import type { FolderProblem } from "./FolderProblem";
+
+/**
+ * One folder of a server folder, as the setup's file browser shows it.
+ */
+export type FileListing = { 
+/**
+ * The folder listed, as asked.
+ */
+path: string, 
+/**
+ * The data folder's problem, or why this folder cannot be listed: `invalidPath`, `missing`,
+ * `notAFolder`, `unreadable` (a link, or a folder Observer never opens) or `insideObserver`.
+ */
+problem: FolderProblem | null, 
+/**
+ * Folders first, then files, by name, case aside.
+ */
+entries: Array<FileEntry>, 
+/**
+ * More entries than the 500 listed.
+ */
+truncated: boolean, };
diff --git a/web/src/api/generated/FilesQuery.ts b/web/src/api/generated/FilesQuery.ts
new file mode 100644
index 00000000..7e2459e6
--- /dev/null
+++ b/web/src/api/generated/FilesQuery.ts
@@ -0,0 +1,11 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+/**
+ * `POST /api/servers/default/setup/files`: the entries of one folder of a server folder, for the
+ * setup's file browser.
+ */
+export type FilesQuery = { dataPath: string, 
+/**
+ * Relative to the data folder with `/`; empty for the data folder itself.
+ */
+path: string, };
diff --git a/web/src/api/serverSetup.ts b/web/src/api/serverSetup.ts
index 70601d4f..5a7ed6ef 100644
--- a/web/src/api/serverSetup.ts
+++ b/web/src/api/serverSetup.ts
@@ -3,7 +3,11 @@ import { queryOptions } from '@tanstack/react-query';
 import { send } from './client';
 import type { CfgCheck } from './generated/CfgCheck';
 import type { CfgReport } from './generated/CfgReport';
+import type { CfgText } from './generated/CfgText';
+import type { CfgTextQuery } from './generated/CfgTextQuery';
 import type { Discovery } from './generated/Discovery';
+import type { FileListing } from './generated/FileListing';
+import type { FilesQuery } from './generated/FilesQuery';
 import type { FolderCheck } from './generated/FolderCheck';
 import type { FolderListing } from './generated/FolderListing';
 import type { FolderQuery } from './generated/FolderQuery';
@@ -32,6 +36,22 @@ export const folderQuery = (query: FolderQuery) =>
         staleTime: 10_000,
     });
 
+/** One folder of the server folder, for the setup's file browser. */
+export const filesQuery = (query: FilesQuery) =>
+    queryOptions({
+        queryKey: ['servers', 'default', 'setup', 'files', query.dataPath, query.path],
+        queryFn: () => send<FileListing>('POST', `${PATH}/files`, query),
+        staleTime: 10_000,
+    });
+
+/** A cfg as the setup shows it, its secrets left out by Observer. */
+export const cfgTextQuery = (query: CfgTextQuery) =>
+    queryOptions({
+        queryKey: ['servers', 'default', 'setup', 'cfg-text', query.dataPath, query.cfgFile],
+        queryFn: () => send<CfgText>('POST', `${PATH}/cfg/text`, query),
+        staleTime: 5_000,
+    });
+
 export const folderCheckQuery = (dataPath: string) =>
     queryOptions({
         queryKey: ['servers', 'default', 'setup', 'folder', dataPath],
diff --git a/web/src/artifacts/support.ts b/web/src/artifacts/support.ts
new file mode 100644
index 00000000..163c928c
--- /dev/null
+++ b/web/src/artifacts/support.ts
@@ -0,0 +1,11 @@
+import type { SupportLevel } from '../api/generated/SupportLevel';
+
+/** The tone of a build's support chip: green while supported, then warning, then danger. */
+export const supportTone = (support: SupportLevel) =>
+    support === 'endOfLife'
+        ? 'danger'
+        : support === 'endOfSupport'
+          ? 'warning'
+          : support === 'supported'
+            ? 'success'
+            : 'neutral';
diff --git a/web/src/changes/ResourceView.tsx b/web/src/changes/ResourceView.tsx
index 888be097..8baf70e6 100644
--- a/web/src/changes/ResourceView.tsx
+++ b/web/src/changes/ResourceView.tsx
@@ -367,7 +367,7 @@ function FileRow({
                 onClick={() => onPick(file.path)}
                 className={cn(
                     'group flex min-w-0 flex-1 flex-col gap-1 px-5 py-1.5 text-left hover:bg-hover max-md:px-4',
-                    current && 'bg-accent-soft shadow-[inset_2px_0_0_var(--accent)]',
+                    current && 'bg-accent-soft',
                 )}
             >
                 {label}
diff --git a/web/src/changes/ResourcesCard.tsx b/web/src/changes/ResourcesCard.tsx
index cca09688..473dca07 100644
--- a/web/src/changes/ResourcesCard.tsx
+++ b/web/src/changes/ResourcesCard.tsx
@@ -162,13 +162,7 @@ function ResourceRow({ comparison, resource }: { comparison: Comparison; resourc
     const sub = cn(table.sub, warning && 'text-ink-2');
     return (
         <tr className={warning ? 'bg-warning-soft [&:last-child>td]:border-b-0' : table.row}>
-            <td
-                className={cn(
-                    table.td,
-                    'min-w-56 align-top',
-                    warning && 'shadow-[inset_2px_0_0_var(--warning-fill)]',
-                )}
-            >
+            <td className={cn(table.td, 'min-w-56 align-top')}>
                 <Link
                     to="/changes/resource"
                     search={{
diff --git a/web/src/changes/StartsCard.tsx b/web/src/changes/StartsCard.tsx
index 56339d6b..4dda56db 100644
--- a/web/src/changes/StartsCard.tsx
+++ b/web/src/changes/StartsCard.tsx
@@ -73,7 +73,7 @@ export function StartsCard({
                                 onClick={() => onPick(start)}
                                 className={cn(
                                     'group min-w-0 rounded-sm px-2 py-1.25 text-left hover:bg-hover',
-                                    picked && 'bg-accent-soft shadow-[inset_2px_0_0_var(--accent)]',
+                                    picked && 'bg-accent-soft',
                                 )}
                             >
                                 <span className="sr-only">{words.compare(time)}</span>
diff --git a/web/src/charts/ActivityChart.test.ts b/web/src/charts/ActivityChart.test.ts
new file mode 100644
index 00000000..c15db1fc
--- /dev/null
+++ b/web/src/charts/ActivityChart.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+
+import { atLeastAnHour } from './ActivityChart';
+
+describe('the activity scale', () => {
+    it('should span an hour at least, so that minutes read on distinct marks', () => {
+        expect(atLeastAnHour({ priceRange: { minValue: 0, maxValue: 0.03 } }).priceRange).toEqual({
+            minValue: 0,
+            maxValue: 1,
+        });
+        expect(atLeastAnHour(null).priceRange).toEqual({ minValue: 0, maxValue: 1 });
+    });
+
+    it('should keep a longer day as it is', () => {
+        expect(atLeastAnHour({ priceRange: { minValue: 0, maxValue: 3.5 } }).priceRange).toEqual({
+            minValue: 0,
+            maxValue: 3.5,
+        });
+    });
+});
diff --git a/web/src/charts/ActivityChart.tsx b/web/src/charts/ActivityChart.tsx
index 2d748f5a..25e2e99a 100644
--- a/web/src/charts/ActivityChart.tsx
+++ b/web/src/charts/ActivityChart.tsx
@@ -1,6 +1,7 @@
 import {
     HistogramSeries,
     createChart,
+    type AutoscaleInfo,
     type ChartOptions,
     type DeepPartial,
     type IChartApi,
@@ -10,23 +11,32 @@ import {
 } from 'lightweight-charts';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
-import { FIGURE, formatNumber } from '../i18n/format';
-import type { Messages } from '../i18n/en';
+import { formatPlayTime } from '../i18n/format';
 import { useI18n } from '../i18n/I18nProvider';
 import { dayChartOptions } from './days';
 import { tokenColor } from './theme';
 
 const HOUR = 3_600_000;
 
-/** The scale reads in hours: `1.5h`; a bar's own time, in the tooltip, to the minute. */
-const activityOptions = (host: Element, locale: string, t: Messages): DeepPartial<ChartOptions> => {
+/**
+ * The scale spans an hour at least, so that a few minutes played still read on distinct marks
+ * (`12 min`, `24 min`…) rather than on several `0h`.
+ */
+export const atLeastAnHour = (info: AutoscaleInfo | null): AutoscaleInfo => ({
+    ...info,
+    priceRange: { minValue: 0, maxValue: Math.max(1, info?.priceRange?.maxValue ?? 0) },
+});
+
+/** The scale's marks, in the words play time is written in everywhere else: `24 min`, `1h 30m`. */
+const activityOptions = (host: Element, locale: string): DeepPartial<ChartOptions> => {
     const base = dayChartOptions(host, locale);
     return {
         ...base,
+        // The library sizes the scale on its first and last marks only (`0h`, `1h`): `48 min` needs more.
+        leftPriceScale: { ...base.leftPriceScale, minimumWidth: 56 },
         localization: {
             ...base.localization,
-            priceFormatter: (hours: number) =>
-                t.players.profile.activity.hours(formatNumber(locale, hours, FIGURE)),
+            priceFormatter: (hours: number) => formatPlayTime(locale, hours * HOUR),
         },
     };
 };
@@ -51,18 +61,16 @@ export function ActivityChart({ days, today }: { days: { day: string; playMs: nu
         if (element === null) {
             return;
         }
-        const api = createChart(
-            element,
-            activityOptions(element, localeRef.current.locale, localeRef.current.t),
-        );
+        const api = createChart(element, activityOptions(element, localeRef.current.locale));
         bars.current = api.addSeries(HistogramSeries, {
             priceScaleId: 'left',
             priceLineVisible: false,
             lastValueVisible: false,
+            autoscaleInfoProvider: atLeastAnHour,
         });
         chart.current = api;
         const paint = () => {
-            api.applyOptions(activityOptions(element, localeRef.current.locale, localeRef.current.t));
+            api.applyOptions(activityOptions(element, localeRef.current.locale));
             bars.current?.applyOptions({ color: tokenColor(element, '--chart-muted') });
         };
         paint();
@@ -90,7 +98,7 @@ export function ActivityChart({ days, today }: { days: { day: string; playMs: nu
         localeRef.current = { locale, t };
         const element = host.current;
         if (element !== null) {
-            chart.current?.applyOptions(activityOptions(element, locale, t));
+            chart.current?.applyOptions(activityOptions(element, locale));
         }
     }, [locale, t]);
 
diff --git a/web/src/components/Chip.tsx b/web/src/components/Chip.tsx
index 9d624aaf..3403412a 100644
--- a/web/src/components/Chip.tsx
+++ b/web/src/components/Chip.tsx
@@ -10,6 +10,7 @@ export const chipVariants = cva(
         variants: {
             tone: {
                 neutral: 'border-line bg-surface-2 text-ink-2',
+                accent: 'border-transparent bg-accent-soft text-accent-ink',
                 success: 'border-transparent bg-success-soft text-success',
                 warning: 'border-transparent bg-warning-soft text-warning',
                 danger: 'border-transparent bg-danger-soft text-danger-ink',
diff --git a/web/src/drops/BreakdownCard.tsx b/web/src/drops/BreakdownCard.tsx
index b769bbdf..83979ff9 100644
--- a/web/src/drops/BreakdownCard.tsx
+++ b/web/src/drops/BreakdownCard.tsx
@@ -13,13 +13,10 @@ import { chartOf } from './search';
 import { CategoryWord, formatRate, formatShare, ShareBar, trendWindows, VerdictChip } from './words';
 
 /**
- * The selected row (DESIGN §8.8): the accent's soft fill, its 2 px bar against the first cell, and
- * the secondary text in ink-2, which ink-3 would not be readable on.
+ * The selected row or phone line (DESIGN §8.8): the accent's soft fill, and the secondary text in
+ * ink-2, which ink-3 would not be readable on.
  */
-const SELECTED_ROW =
-    'bg-accent-soft [&_.text-ink-3]:text-ink-2 [&>td:first-child]:shadow-[inset_2px_0_0_var(--accent)]';
-/** The same on a phone's line, the bar against the line itself. */
-const SELECTED_ITEM = 'bg-accent-soft shadow-[inset_2px_0_0_var(--accent)] [&_.text-ink-3]:text-ink-2';
+const SELECTED = 'bg-accent-soft [&_.text-ink-3]:text-ink-2';
 
 /** Unexpected categories first, then the expected ones, each ranked by its drops. */
 const groups = (categories: readonly CategoryShare[]) =>
@@ -181,9 +178,7 @@ function Ranking({
                             {group.rows.map((row, index) => (
                                 <tr
                                     key={row.category}
-                                    className={
-                                        selected === row.category ? SELECTED_ROW : 'hover:bg-surface-2'
-                                    }
+                                    className={selected === row.category ? SELECTED : 'hover:bg-surface-2'}
                                 >
                                     <td className={cn(table.td, 'align-top')}>
                                         <div className="flex flex-col gap-0.5">
@@ -236,7 +231,7 @@ function Ranking({
                                     key={row.category}
                                     className={cn(
                                         'flex flex-col gap-1.5 border-b border-line px-4 py-2.5',
-                                        selected === row.category && SELECTED_ITEM,
+                                        selected === row.category && SELECTED,
                                     )}
                                 >
                                     <div className="flex items-center justify-between gap-3">
diff --git a/web/src/i18n/I18nProvider.tsx b/web/src/i18n/I18nProvider.tsx
index 5e65ee44..f38d3b1c 100644
--- a/web/src/i18n/I18nProvider.tsx
+++ b/web/src/i18n/I18nProvider.tsx
@@ -1,6 +1,6 @@
-import { createContext, use, useEffect, useMemo, useState, type ReactNode } from 'react';
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
 
-import type { Messages } from './en';
+import { I18nContext, type I18n } from './context';
 import {
     formatBitRate,
     formatBytes,
@@ -14,31 +14,9 @@ import {
 } from './format';
 import { DEFAULT_LOCALE, LOCALES, isLocale, type Locale } from './locales';
 
-const STORAGE_KEY = 'observer.locale';
-
-type I18n = {
-    locale: Locale;
-    t: Messages;
-    setLocale: (locale: Locale) => void;
-    format: {
-        number: (value: number, options?: Intl.NumberFormatOptions) => string;
-        /** Memory and disk, in multiples of 1024; a `signed` growth reads `+180 MB`. */
-        bytes: (bytes: number, options?: { signed?: boolean }) => string;
-        /** Bytes per second, as bits per second in multiples of 1000. */
-        bitRate: (bytesPerSecond: number) => string;
-        /** `182.0` reads `182%`. */
-        percent: (percent: number) => string;
-        milliseconds: (ms: number) => string;
-        dateTime: (date: Date, options?: Intl.DateTimeFormatOptions) => string;
-        duration: (seconds: number) => string;
-        /** Play time, in hours past the first: `2h 14m`, `312h`; a `signed` difference `+2h 14m`. */
-        playTime: (ms: number, options?: { signed?: boolean }) => string;
-        /** An API timestamp (RFC 3339) as tables show it, in local time. */
-        timestamp: (rfc3339: string, options?: { seconds?: boolean }) => string;
-    };
-};
+export { useI18n } from './context';
 
-const I18nContext = createContext<I18n | null>(null);
+const STORAGE_KEY = 'observer.locale';
 
 const savedLocale = (): Locale => {
     try {
@@ -85,11 +63,3 @@ export function I18nProvider({ children }: { children: ReactNode }) {
 
     return <I18nContext value={value}>{children}</I18nContext>;
 }
-
-export const useI18n = () => {
-    const i18n = use(I18nContext);
-    if (i18n === null) {
-        throw new Error('useI18n must be used inside <I18nProvider>');
-    }
-    return i18n;
-};
diff --git a/web/src/i18n/context.ts b/web/src/i18n/context.ts
new file mode 100644
index 00000000..89b4fa5e
--- /dev/null
+++ b/web/src/i18n/context.ts
@@ -0,0 +1,38 @@
+import { createContext, use } from 'react';
+
+import type { Messages } from './en';
+import type { Locale } from './locales';
+
+export type I18n = {
+    locale: Locale;
+    t: Messages;
+    setLocale: (locale: Locale) => void;
+    format: {
+        number: (value: number, options?: Intl.NumberFormatOptions) => string;
+        /** Memory and disk, in multiples of 1024; a `signed` growth reads `+180 MB`. */
+        bytes: (bytes: number, options?: { signed?: boolean }) => string;
+        /** Bytes per second, as bits per second in multiples of 1000. */
+        bitRate: (bytesPerSecond: number) => string;
+        /** `182.0` reads `182%`. */
+        percent: (percent: number) => string;
+        milliseconds: (ms: number) => string;
+        dateTime: (date: Date, options?: Intl.DateTimeFormatOptions) => string;
+        duration: (seconds: number) => string;
+        /** Play time, in hours past the first: `2h 14m`, `312h`; a `signed` difference `+2h 14m`. */
+        playTime: (ms: number, options?: { signed?: boolean }) => string;
+        /** An API timestamp (RFC 3339) as tables show it, in local time. */
+        timestamp: (rfc3339: string, options?: { seconds?: boolean }) => string;
+    };
+};
+
+// Apart from the catalog and the provider: a hot reload of either during development would make
+// a second context, which the provider already on the page does not fill.
+export const I18nContext = createContext<I18n | null>(null);
+
+export const useI18n = () => {
+    const i18n = use(I18nContext);
+    if (i18n === null) {
+        throw new Error('useI18n must be used inside <I18nProvider>');
+    }
+    return i18n;
+};
diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts
index 101dd571..97ecb259 100644
--- a/web/src/i18n/en.ts
+++ b/web/src/i18n/en.ts
@@ -913,7 +913,7 @@ export const en = {
             kept: (build: string) => `FXServer runs build ${build} already: it starts next again.`,
             done: {
                 now: (build: string) => `FXServer is restarting on build ${build}.`,
-                nextStart: (build: string) => `Build ${build} starts at the next start.`,
+                nextStart: (build: string) => `Build ${build} runs from the next start of FXServer.`,
                 scheduledRestart: (build: string) =>
                     `Build ${build} is applied at the next scheduled restart.`,
             } satisfies Record<ApplyMode, (build: string) => string>,
@@ -1434,7 +1434,8 @@ export const en = {
         countsFromStart: 'Counts from the next start of FXServer.',
         emptyTitle: 'No scheduled restart',
         emptyBody:
-            'Add a fixed time or an interval below. Your resources hear of each restart before it comes.',
+            'Choose fixed times or an interval in the restart settings. Your resources hear of each restart before it comes.',
+        setUp: 'Set up restarts',
         actions: 'Restart actions',
         skip: 'Skip',
         restore: 'Restore',
@@ -1686,6 +1687,7 @@ export const en = {
             protocols: { tcp: 'TCP', udp: 'UDP' },
             none: 'No connection in the last 24 hours.',
             noListener: 'Nothing listens while FXServer is stopped.',
+            noListenerSeen: "No socket of FXServer's tree listens right now.",
             footer: 'Connections shorter than 2 s may not show. Windows lists UDP sockets without their remote end.',
         },
         exceptions: {
@@ -1847,7 +1849,6 @@ export const en = {
                 today: (time: string) => `Today, so far: ${time}.`,
                 tooltip: (time: string) => `${time} played`,
                 todaySoFar: 'today, so far',
-                hours: (hours: string) => `${hours}h`,
             },
             names: {
                 title: 'Names',
@@ -3760,7 +3761,6 @@ export const en = {
     },
     serverSetup: {
         title: 'Server setup',
-        gloss: 'Point Observer at your server.',
         steps: 'Setup steps',
         stepNames: {
             folder: 'Server folder',
@@ -3776,6 +3776,17 @@ export const en = {
         } satisfies Record<SetupStep, string>,
         stepOf: (step: number, total: number, name: string) =>
             `Step ${formatNumber('en', step)} of ${formatNumber('en', total)} · ${name}`,
+        stepCount: (step: string, total: string) => `Step ${step} of ${total}`,
+        headings: {
+            folder: 'Which server should Observer run?',
+            cfg: 'Choose the config file',
+            build: 'Pick the FXServer build',
+            start: 'Review and start',
+        } satisfies Record<SetupStep, string>,
+        later: 'Set up later',
+        leave: 'Back to the panel',
+        promise:
+            'Observer runs your server where it is. It copies nothing into the folder and never changes your cfg.',
         said: { passed: 'done', failed: 'failed' },
         back: 'Back',
         continue: 'Continue',
@@ -3783,7 +3794,6 @@ export const en = {
             'The launch settings were changed in another session since the setup opened. Start again from them, then make your changes again.',
         startAgain: 'Start again from the saved settings',
         folder: {
-            question: 'Which server should Observer run?',
             searching:
                 'Observer is looking in the usual places on this machine: your home folder and the root of each drive.',
             found: (servers: number) =>
@@ -3793,7 +3803,7 @@ export const en = {
             searchStopped:
                 'The search stopped before it looked everywhere: if yours is missing, browse to it or type its path.',
             searchFailed: (reason: string) => `Observer could not search this machine. ${reason}`,
-            lead: 'FXServer runs from the folder in place: Observer copies nothing into it, and writes there only what people upload over SFTP and the fixes of the server tools you run or turn on.',
+            foundHere: 'Found on this machine',
             servers: 'Servers found',
             selected: 'Selected',
             resourceCount: (resources: number, truncated: boolean) =>
@@ -3803,8 +3813,10 @@ export const en = {
                 on: 'OneSync on',
                 legacy: 'OneSync legacy',
             } satisfies Record<OneSync, string>,
-            usedByTxAdmin: 'used by txAdmin',
-            portInUse: (port: number) => `port ${formatNumber('en', port, { useGrouping: false })} in use`,
+            usedByTxAdmin: 'In a txAdmin profile',
+            port: (port: number) => `Port ${formatNumber('en', port, { useGrouping: false })}`,
+            portInUse: (port: number, program: string | null) =>
+                `Port ${formatNumber('en', port, { useGrouping: false })} ${program === null ? 'in use' : `taken by ${program}`}`,
             portTaken: (
                 port: number,
                 holder: { program: string | null; fxServer: boolean },
@@ -3815,7 +3827,7 @@ export const en = {
                         ? `FXServer already listens on port ${formatNumber('en', port, { useGrouping: false })}, and txAdmin is set up for this server. Stop it in txAdmin before the first start here, or both will fight for the port.`
                         : `Another FXServer already listens on port ${formatNumber('en', port, { useGrouping: false })}. Stop it before the first start here, or both will fight for the port.`
                     : `${holder.program ?? 'Another program'} already listens on port ${formatNumber('en', port, { useGrouping: false })}: FXServer cannot start on it until that program lets it go.`,
-            elsewhere: 'Somewhere else',
+            elsewhere: 'Or a folder elsewhere',
             label: 'Server data folder',
             placeholder: 'Start typing a path',
             hint: 'The folder that holds your resources folder and your server.cfg. Observer lists the folders on this machine as you type.',
@@ -3866,7 +3878,6 @@ export const en = {
                 selection: 'Selected folder',
                 selected: 'Selected',
                 checking: 'Checking the folder',
-                isServer: 'This is a server folder',
                 resources: 'Resources',
                 inCategories: (categories: number) =>
                     `in ${count(categories, { one: 'category', other: 'categories' })}`,
@@ -3886,18 +3897,44 @@ export const en = {
             } satisfies Record<FolderProblem, string>,
             suggestion: 'A folder nearby holds a server:',
             useSuggestion: 'Use this folder',
-            accepted: 'FXServer can run from this folder.',
-            resources: (resources: number, categories: number, truncated: boolean) =>
-                `${truncated ? 'At least ' : ''}${count(resources, { one: 'resource', other: 'resources' })} in ${count(categories, { one: 'category', other: 'categories' })}${truncated ? ': the count stopped at 250 categories or 5,000 files and folders' : ''}.`,
+            accepted: 'FXServer can run from this folder',
+            countStopped:
+                'Observer stopped counting at 250 categories or 5,000 files and folders: the folder holds more.',
+            withoutManifestCount: 'Without a manifest',
+            skipped: 'FXServer does not start them',
             withoutManifest: (names: string[]) =>
                 `Without fxmanifest.lua or __resource.lua, FXServer does not start ${list(names)}.`,
             cfgFiles: 'Config files found',
             noCfgFile: 'No cfg was found at the root or one folder down: name yours in the next step.',
         },
         cfg: {
-            lead: 'The cfg FXServer runs, and the files it runs in turn. Observer only reads them: fix what it finds in your files, then check again.',
-            found: 'Found in the folder',
-            detected: 'detected',
+            lead: 'FXServer starts from one cfg, which runs the others. Open a file to see what it sets: Observer only reads it, and fixes are made in your files.',
+            browser: {
+                label: 'Files of the server folder',
+                tree: 'Folders and files',
+                side: 'What the chosen cfg runs and sets',
+                filter: 'Filter files',
+                onlyCfg: 'Only config files',
+                empty: 'This folder is empty.',
+                noMatch: 'No file matches.',
+                truncated: 'Only the first 500 entries are listed.',
+                cannotOpen: 'Observer does not open this folder.',
+                neverRead: 'never read',
+                withheld: 'It holds secrets or belongs to FXServer or Observer: Observer never opens it.',
+                link: 'A link, which Observer does not follow',
+                runs: 'Runs',
+                pick: 'Open a config file in the tree.',
+                lines: (lines: number) => count(lines, { one: 'line', other: 'lines' }),
+                hidden: 'Secrets hidden',
+                secret: 'a secret, hidden by Observer',
+                text: (file: string) => `${file}, as Observer reads it`,
+                longFile: 'Only the first 2,000 lines are shown.',
+                runBy: (file: string) =>
+                    `${file} runs this file. FXServer starts from the first file of the chain.`,
+                openMain: (file: string) => `Open ${file}`,
+                chain: 'Runs, in order',
+                typeInstead: 'Type the path instead',
+            },
             label: 'Config file',
             hint: 'Relative to the server folder, such as server.cfg or configs/live.cfg.',
             checkAgain: 'Check again',
@@ -3959,23 +3996,36 @@ export const en = {
         },
         build: {
             lead: 'The FXServer build Observer starts. Install the one Cfx.re recommends, or import a folder of FXServer you already have.',
-            selected: (build: string) => `FXServer starts build ${build}.`,
+            selectedBuild: 'Selected build',
+            selected: 'Selected',
+            startsFromIt: 'FXServer starts from this build.',
+            recommendedBuild: 'Recommended build',
+            recommendedFor: (platform: string) => `The build Cfx.re recommends for ${platform} servers.`,
             none: 'No build is selected yet.',
             unknown: 'The builds are not known while the live link is down.',
-            install: 'Install the recommended build',
+            install: 'Install',
             catalogLoading: 'Reading the builds Cfx.re lists.',
             catalogFailed:
                 'The builds Cfx.re lists could not be read: import a folder instead, or try again later.',
             noRecommended: 'Cfx.re recommends no build for this system right now: import a folder instead.',
             recommendedInstalled: (build: string) =>
                 `The build Cfx.re recommends, ${build}, is installed already: use it below.`,
-            importFolder: 'Import a folder',
             installed: 'Installed builds',
             use: (build: string) => `Use build ${build}`,
+            otherWays: 'Other ways',
+            change: 'Change the build',
+            importTitle: 'Import a build you have',
+            importDetail: "A folder of FXServer, copied into Observer's own.",
+            choose: 'Choose…',
+            anotherTitle: 'Another build',
+            anotherDetail: 'Every build Cfx.re lists, on the FXServer builds page.',
+            latestIs: (build: string) => `The latest is ${build}, newer than the recommended one.`,
+            seeAll: 'See all',
+            goesOn: 'The install goes on if you leave this page.',
             skip: 'Skip for now',
-            openArtifacts: 'Open the Artifacts page',
         },
         start: {
+            how: 'How FXServer starts',
             lead: 'How FXServer starts, then what it starts from.',
             summary: 'Summary',
             folder: 'Server folder',
@@ -3999,7 +4049,6 @@ export const en = {
             saved: 'Saved. FXServer uses these settings from its next start, a restart after a crash included.',
             withoutBuild:
                 'No build is selected, so FXServer cannot start yet: save now, then start it once a build is selected.',
-            starting: 'Saved. FXServer is starting: its first launch is followed below.',
             startFailed: (reason: string) => `Saved, but FXServer did not start. ${reason}`,
             argumentsRefused:
                 'This host refuses the extra arguments saved with the launch settings, which the setup keeps as they are. Fix them in Settings, under Launch, then save here again.',
@@ -4018,6 +4067,21 @@ export const en = {
             unknown: 'The state of FXServer is not known while the live link is down.',
             console: "The console shows FXServer's output, and what Observer found in the cfg as it started.",
             openConsole: 'Open the console',
+            starting: 'Starting FXServer',
+            online: (name: string | null) => `${name ?? 'Your server'} is online`,
+            failed: 'FXServer did not start',
+            following: 'Observer follows its first launch: each step ticks as it passes.',
+            checked: 'What Observer checks',
+            consoleTitle: 'Console',
+            next: 'What most owners do next',
+            nextRestarts: 'Schedule restarts',
+            nextRestartsAbout: 'Fixed times or an interval, announced to your resources first.',
+            nextStaff: 'Add your staff',
+            nextStaffAbout: 'An account each, with only the permissions they need.',
+            nextBackups: 'Back up the database',
+            nextBackupsAbout: 'Before each restart, to a folder, SFTP or S3.',
+            backToSettings: 'Back to the launch settings',
+            overview: 'Go to the Overview',
         },
     },
     files: {
diff --git a/web/src/i18n/errors.test.ts b/web/src/i18n/errors.test.ts
index 36cd1a9a..9b4e13d1 100644
--- a/web/src/i18n/errors.test.ts
+++ b/web/src/i18n/errors.test.ts
@@ -43,7 +43,7 @@ describe('errorMessage', () => {
     });
 
     it('should fall back to a generic message for a code it does not know', () => {
-        expect(errorMessage(en, new ApiError(502, 'http_502'))).toBe(en.failure.unknown);
+        expect(errorMessage(en, new ApiError(500, 'http_500'))).toBe(en.failure.unknown);
         expect(errorMessage(en, new ApiError(418, 'toString'))).toBe(en.failure.unknown);
         expect(errorMessage(en, new Error('boom'))).toBe(en.failure.unknown);
     });
@@ -51,6 +51,13 @@ describe('errorMessage', () => {
     it('should say Observer cannot be reached when the request got no answer', () => {
         expect(errorMessage(en, new TypeError('Failed to fetch'))).toBe(en.failure.network);
     });
+
+    it('should say Observer cannot be reached when a proxy in front of it answers in its place', () => {
+        for (const status of [502, 503, 504]) {
+            expect(errorMessage(en, new ApiError(status, `http_${status}`))).toBe(en.failure.network);
+        }
+        expect(errorMessage(en, new ApiError(503, 'busy'))).not.toBe(en.failure.network);
+    });
 });
 
 describe('problemMessage', () => {
diff --git a/web/src/i18n/errors.ts b/web/src/i18n/errors.ts
index 6e297b7e..57145eb2 100644
--- a/web/src/i18n/errors.ts
+++ b/web/src/i18n/errors.ts
@@ -13,10 +13,16 @@ const word = (t: Messages, code: string, params: Record<string, unknown>) => {
     return null;
 };
 
+// Observer never answers these without a code: a proxy in front of it answers them in its place.
+const PROXY_ANSWERS = new Set(['http_502', 'http_503', 'http_504']);
+
 /** What to tell the user about a failed request: the API's code in their language, or a fallback. */
 export const errorMessage = (t: Messages, error: unknown) => {
     if (error instanceof ApiError) {
-        return word(t, error.code, error.params) ?? t.failure.unknown;
+        return (
+            word(t, error.code, error.params) ??
+            (PROXY_ANSWERS.has(error.code) ? t.failure.network : t.failure.unknown)
+        );
     }
     // fetch rejects with a TypeError when the request never got an answer.
     if (error instanceof TypeError) {
diff --git a/web/src/pages/ArtifactsPage.tsx b/web/src/pages/ArtifactsPage.tsx
index cd74a065..094f6b78 100644
--- a/web/src/pages/ArtifactsPage.tsx
+++ b/web/src/pages/ArtifactsPage.tsx
@@ -46,6 +46,7 @@ import { Permission } from '../api/generated/Permission';
 import type { PolicyDay } from '../api/generated/PolicyDay';
 import { launchProblem, launchQuery } from '../api/launch';
 import { useArtifacts } from '../artifacts/context';
+import { supportTone } from '../artifacts/support';
 import { allows, useMe } from '../auth/me';
 import { Button } from '../components/Button';
 import { Card } from '../components/Card';
@@ -1107,17 +1108,7 @@ function AvailableCard({
                                                 : day(entry.publishedAt)}
                                         </td>
                                         <td className={table.td}>
-                                            <Chip
-                                                tone={
-                                                    entry.support === 'endOfLife'
-                                                        ? 'danger'
-                                                        : entry.support === 'endOfSupport'
-                                                          ? 'warning'
-                                                          : entry.support === 'supported'
-                                                            ? 'success'
-                                                            : 'neutral'
-                                                }
-                                            >
+                                            <Chip tone={supportTone(entry.support)}>
                                                 {words.supports[entry.support]}
                                             </Chip>
                                             <div className={table.sub}>
diff --git a/web/src/pages/AuditPage.tsx b/web/src/pages/AuditPage.tsx
index 8905568f..47121445 100644
--- a/web/src/pages/AuditPage.tsx
+++ b/web/src/pages/AuditPage.tsx
@@ -239,15 +239,9 @@ export function AuditPage() {
                                         <th scope="col" className={table.th}>
                                             {t.audit.action}
                                         </th>
-                                        <th scope="col" className={table.th}>
-                                            {t.audit.target}
-                                        </th>
                                         <th scope="col" className={table.th}>
                                             {t.audit.outcome}
                                         </th>
-                                        <th scope="col" className={table.th}>
-                                            {t.audit.address}
-                                        </th>
                                         <th scope="col" className={table.th}>
                                             {t.audit.details}
                                         </th>
@@ -295,18 +289,29 @@ function EntryRow({ entry }: { entry: AuditEntry }) {
                 {entry.actorKind !== 'user' && entry.actorName !== null && (
                     <div className={table.sub}>{t.audit.actors[entry.actorKind]}</div>
                 )}
+                {entry.ip !== null && (
+                    <div className={cn(table.sub, 'font-mono')}>
+                        <span className="sr-only">{t.audit.address}: </span>
+                        {entry.ip}
+                    </div>
+                )}
             </td>
-            <td className={cn(table.td, 'whitespace-nowrap')}>{t.audit.actions[entry.action]}</td>
-            <td className={cn(table.td, table.mono)}>
-                {entry.target ??
-                    (entry.action === 'login_failed' && (
-                        <span className="font-sans text-ink-3">{t.audit.unknownUsername}</span>
-                    ))}
+            <td className={table.td}>
+                <span className="whitespace-nowrap">{t.audit.actions[entry.action]}</span>
+                {(entry.target !== null || entry.action === 'login_failed') && (
+                    <div className={table.sub}>
+                        <span className="sr-only">{t.audit.target}: </span>
+                        {entry.target === null ? (
+                            t.audit.unknownUsername
+                        ) : (
+                            <span className="font-mono">{entry.target}</span>
+                        )}
+                    </div>
+                )}
             </td>
             <td className={table.td}>
                 <Chip tone={OUTCOME_TONE[entry.outcome]}>{t.audit.outcomes[entry.outcome]}</Chip>
             </td>
-            <td className={cn(table.td, table.mono)}>{entry.ip ?? ''}</td>
             <td className={cn(table.td, 'min-w-60 font-mono text-meta text-ink-3 [overflow-wrap:anywhere]')}>
                 {auditDetails(t, format, entry.details, entry.action)}
             </td>
diff --git a/web/src/pages/ConsolePage.test.tsx b/web/src/pages/ConsolePage.test.tsx
index 2528d873..9ef9e4c7 100644
--- a/web/src/pages/ConsolePage.test.tsx
+++ b/web/src/pages/ConsolePage.test.tsx
@@ -60,7 +60,11 @@ const screenIs = (phone: boolean) =>
  * The console of an operator who reads it, holding `count` lines. `meanwhile` is what the reader
  * does before the first lines come.
  */
-const consoleWith = async (count: number, meanwhile: (view: RenderResult) => void = () => {}) => {
+const consoleWith = async (
+    count: number,
+    meanwhile: (view: RenderResult) => void = () => {},
+    permissions = '9',
+) => {
     let socket: SocketEvents | undefined;
     const live = new Realtime({
         ticket: async () => 'ticket',
@@ -78,7 +82,7 @@ const consoleWith = async (count: number, meanwhile: (view: RenderResult) => voi
                         id: 2,
                         username: 'kenji',
                         isOwner: false,
-                        permissions: '9',
+                        permissions,
                         mustChangePassword: false,
                     }}
                 >
@@ -209,3 +213,70 @@ describe('ConsolePage', () => {
         live.stop();
     });
 });
+
+const typeAndSend = (field: HTMLElement, command: string) => {
+    fireEvent.change(field, { target: { value: command } });
+    fireEvent.submit(field.closest('form') as HTMLFormElement);
+};
+
+describe('ConsolePage command line', () => {
+    /** The console commands Observer was sent, each answered when the test says. */
+    const sent: { command: string; answer: (delivery: string) => void }[] = [];
+
+    beforeEach(() => {
+        vi.stubGlobal('ResizeObserver', TestResizeObserver);
+        screenIs(false);
+        Element.prototype.scrollIntoView = () => {};
+        vi.stubGlobal('fetch', async (url: string, init?: RequestInit) => {
+            if (url.endsWith('/console') && init?.method === 'POST') {
+                const body = JSON.parse(String(init.body)) as { line: string };
+                const delivery = await new Promise<string>((answer) =>
+                    sent.push({ command: body.line, answer }),
+                );
+                return Response.json({ delivery, masked: false });
+            }
+            return Response.json({ code: 'not_found' }, { status: 404 });
+        });
+    });
+
+    afterEach(() => {
+        cleanup();
+        vi.unstubAllGlobals();
+        observed.clear();
+        sent.length = 0;
+        localStorage.clear();
+    });
+
+    it('should keep what is typed while a command is on its way, and send both in order', async () => {
+        const { getByRole, live } = await consoleWith(0, () => {}, '7');
+        const field = getByRole('textbox', { name: en.console.commandLabel });
+
+        typeAndSend(field, 'status');
+        expect(field).toHaveProperty('value', '');
+        typeAndSend(field, 'players');
+        fireEvent.change(field, { target: { value: 'restart hello' } });
+        await settle();
+        sent[0]?.answer('written');
+        await settle();
+        sent[1]?.answer('written');
+        await settle();
+
+        expect(sent.map(({ command }) => command)).toEqual(['status', 'players']);
+        expect(field).toHaveProperty('value', 'restart hello');
+        live.stop();
+    });
+
+    it('should give a refused command back to the field when nothing else was typed', async () => {
+        const { getByRole, live } = await consoleWith(0, () => {}, '7');
+        const field = getByRole('textbox', { name: en.console.commandLabel });
+
+        typeAndSend(field, 'status');
+        await settle();
+        sent[0]?.answer('busy');
+        await settle();
+
+        expect(field).toHaveProperty('value', 'status');
+        expect(getByRole('alert').textContent).toBe(en.console.busy);
+        live.stop();
+    });
+});
diff --git a/web/src/pages/ConsolePage.tsx b/web/src/pages/ConsolePage.tsx
index b2d7cac4..ed44fa5d 100644
--- a/web/src/pages/ConsolePage.tsx
+++ b/web/src/pages/ConsolePage.tsx
@@ -407,37 +407,48 @@ function CommandLine({ onSent }: { onSent: (command: string, masked: boolean) =>
     const [command, setCommand] = useState('');
     const [history, setHistory] = useState(() => readHistory(me.username));
     const [position, setPosition] = useState<Position>(START);
-    const [sending, setSending] = useState(false);
+    const [sending, setSending] = useState(0);
     const [feedback, setFeedback] = useState<Feedback | null>(null);
+    // Commands typed while one is on its way go out after it, in the order they were typed.
+    const queue = useRef<Promise<void>>(Promise.resolve());
 
     if (!allows(me, Permission.ConsoleWrite)) {
         return <p className="cmd-note">{t.console.readOnly}</p>;
     }
     const { open, note } = commandLine(t, status);
 
-    const submit = async (event: FormEvent) => {
-        event.preventDefault();
-        const line = command.trim();
-        if (line === '' || sending) {
-            return;
-        }
-        setSending(true);
+    const send = async (line: string) => {
+        // A refused line comes back to the field, unless something else was typed there since.
+        const giveBack = () => setCommand((typed) => (typed === '' ? line : typed));
         try {
             const { delivery, masked } = await sendCommand(line);
             if (delivery === 'busy') {
                 setFeedback({ tone: 'danger', text: t.console.busy });
+                giveBack();
                 return;
             }
-            setHistory(remember(me.username, history, line, masked));
-            setPosition(START);
-            setCommand('');
+            setHistory((current) => remember(me.username, current, line, masked));
             setFeedback(delivery === 'pending' ? { tone: 'warning', text: t.console.pending } : null);
             onSent(line, masked);
         } catch (error) {
             setFeedback({ tone: 'danger', text: errorMessage(t, error) });
+            giveBack();
         } finally {
-            setSending(false);
+            setSending((count) => count - 1);
+        }
+    };
+
+    const submit = (event: FormEvent) => {
+        event.preventDefault();
+        const line = command.trim();
+        if (line === '') {
+            return;
         }
+        setCommand('');
+        setPosition(START);
+        setFeedback(null);
+        setSending((count) => count + 1);
+        queue.current = queue.current.then(() => send(line));
     };
 
     const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
@@ -454,7 +465,7 @@ function CommandLine({ onSent }: { onSent: (command: string, masked: boolean) =>
 
     return (
         <>
-            <form className="cmd" onSubmit={(event) => void submit(event)}>
+            <form className="cmd" onSubmit={submit}>
                 <label className="cmd-field">
                     <span className="cmd-prompt" aria-hidden="true">
                         &gt;
@@ -469,7 +480,7 @@ function CommandLine({ onSent }: { onSent: (command: string, masked: boolean) =>
                         spellCheck={false}
                         disabled={!open}
                         placeholder={note ?? undefined}
-                        aria-busy={sending || undefined}
+                        aria-busy={sending > 0 || undefined}
                         value={command}
                         onChange={(event) => {
                             setCommand(event.target.value);
diff --git a/web/src/pages/DiagnosticsPage.tsx b/web/src/pages/DiagnosticsPage.tsx
index a695aa34..8e41af46 100644
--- a/web/src/pages/DiagnosticsPage.tsx
+++ b/web/src/pages/DiagnosticsPage.tsx
@@ -40,6 +40,8 @@ import { useI18n } from '../i18n/I18nProvider';
 import { useLinkState, useTopic } from '../live/context';
 import { cn } from '../lib/cn';
 import { useNow } from '../lib/useNow';
+import { useServerStatus } from '../server/context';
+import { isRunning } from '../server/state';
 
 const DAY = 24 * 60 * 60 * 1000;
 /**
@@ -700,14 +702,7 @@ function ProcessRow({ process }: { process: TreeProcess }) {
     }, [line, whole]);
     return (
         <tr className={alert ? 'bg-warning-soft [&:last-child>td]:border-b-0' : table.row}>
-            <td
-                className={cn(
-                    table.td,
-                    table.mono,
-                    'align-top',
-                    alert && 'shadow-[inset_2px_0_0_var(--warning-fill)]',
-                )}
-            >
+            <td className={cn(table.td, table.mono, 'align-top')}>
                 <time dateTime={process.lastStartedAt}>
                     {format.timestamp(process.lastStartedAt, { seconds: false })}
                 </time>
@@ -781,7 +776,9 @@ function ConnectionsCard({
 }) {
     const { t, format } = useI18n();
     const now = useNow(60_000);
+    const { status } = useServerStatus();
     const words = t.diagnostics.connections;
+    const running = status !== null && isRunning(status.state);
     return (
         <Card
             id="diagnostics-connections"
@@ -871,7 +868,9 @@ function ConnectionsCard({
                 {words.listening}
             </h3>
             {listeners.length === 0 ? (
-                <p className="px-5 pb-4 text-ui text-ink-3 max-md:px-4">{words.noListener}</p>
+                <p className="px-5 pb-4 text-ui text-ink-3 max-md:px-4">
+                    {running ? words.noListenerSeen : words.noListener}
+                </p>
             ) : (
                 <div className={cn(table.scroll, 'rounded-none border-t border-line')}>
                     <table className={table.table}>
diff --git a/web/src/pages/PlayerPage.tsx b/web/src/pages/PlayerPage.tsx
index 2f3adc5a..10235a03 100644
--- a/web/src/pages/PlayerPage.tsx
+++ b/web/src/pages/PlayerPage.tsx
@@ -166,7 +166,7 @@ function Profile({ profile }: { profile: PlayerProfile }) {
             </section>
             <Tiles profile={profile} />
             <ActivityCard profile={profile} />
-            <div className="grid grid-cols-1 gap-5 max-md:gap-4 2xl:grid-cols-2">
+            <div className="grid grid-cols-1 gap-5 max-md:gap-4">
                 <NamesCard profile={profile} />
                 {profile.labels.length > 0 && <LabelsCard profile={profile} />}
                 <DropsCard profile={profile} />
diff --git a/web/src/pages/SchedulePage.tsx b/web/src/pages/SchedulePage.tsx
index d82d867a..6228b24e 100644
--- a/web/src/pages/SchedulePage.tsx
+++ b/web/src/pages/SchedulePage.tsx
@@ -1,4 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
 import {
     CalendarClock,
     CalendarX2,
@@ -261,13 +262,22 @@ function NextRestart({
                     <CalendarX2 size={20} strokeWidth={1.5} aria-hidden="true" />
                 </span>
                 <p className="text-[16px] font-semibold text-ink">{t.schedule.emptyTitle}</p>
-                <p className="max-w-empty text-body text-ink-3">
-                    {schedule.settings.enabled &&
-                    schedule.settings.mode === 'interval' &&
-                    !(server !== null && isRunning(server.state))
-                        ? t.schedule.countsFromStart
-                        : t.schedule.emptyBody}
-                </p>
+                {schedule.settings.enabled &&
+                schedule.settings.mode === 'interval' &&
+                !(server !== null && isRunning(server.state)) ? (
+                    <p className="max-w-empty text-body text-ink-3">{t.schedule.countsFromStart}</p>
+                ) : (
+                    <>
+                        <p className="max-w-empty text-body text-ink-3">{t.schedule.emptyBody}</p>
+                        <Link
+                            to="/settings/$category"
+                            params={{ category: 'restarts' }}
+                            className={buttonVariants({ tone: 'secondary' })}
+                        >
+                            {t.schedule.setUp}
+                        </Link>
+                    </>
+                )}
             </div>
         );
     } else {
diff --git a/web/src/pages/ServerSetupPage.test.tsx b/web/src/pages/ServerSetupPage.test.tsx
index 3604587e..67f0cf20 100644
--- a/web/src/pages/ServerSetupPage.test.tsx
+++ b/web/src/pages/ServerSetupPage.test.tsx
@@ -296,7 +296,7 @@ describe('ServerSetupPage', () => {
         expect(api.of(CFG_ROUTE)).toEqual([
             { dataPath: DATA_PATH, cfgFile: 'configs/live.cfg', onesync: 'on' },
         ]);
-        expect(document.activeElement).toBe(getByRole('heading', { name: words.stepNames.cfg }));
+        expect(document.activeElement).toBe(getByRole('heading', { name: words.headings.cfg }));
         const steps = within(getByRole('list', { name: words.steps })).getAllByRole('listitem');
         expect(steps[1]?.getAttribute('aria-current')).toBe('step');
         expect(steps[0]?.textContent).toContain(words.said.passed);
@@ -324,9 +324,8 @@ describe('ServerSetupPage', () => {
 
         await typeFolder(DATA_PATH);
 
-        getByText(
-            'At least 1,800 resources in 250 categories: the count stopped at 250 categories or 5,000 files and folders.',
-        );
+        getByText('1,800+');
+        getByText(words.folder.countStopped);
     });
 
     it('should say why a folder is refused, stay on it at Continue, and offer the one nearby that fits', async () => {
@@ -353,7 +352,7 @@ describe('ServerSetupPage', () => {
 
         await press(words.continue);
         expect(api.of(CFG_ROUTE)).toEqual([]);
-        getByRole('heading', { name: words.folder.question });
+        getByRole('heading', { name: words.headings.folder });
 
         await press(words.folder.useSuggestion);
         expect(field().value).toBe(DATA_PATH);
@@ -567,7 +566,7 @@ describe('ServerSetupPage', () => {
         await press(words.continue);
         await press(words.continue);
         await press(words.start.saveAndStart);
-        await waitFor(() => getByText(words.start.starting));
+        await waitFor(() => getByRole('heading', { name: words.launch.starting }));
 
         expect(api.sent.map((each) => each.route).slice(-2)).toEqual([
             SAVE_ROUTE,
@@ -591,6 +590,8 @@ describe('ServerSetupPage', () => {
         });
         expect(launch().every((step) => step.textContent?.includes(words.said.passed))).toBe(true);
         getByText(words.launch.ready);
+        getByRole('heading', { name: words.launch.online(STOPPED.name) });
+        getByRole('link', { name: words.launch.overview });
     });
 
     it('should name the step that failed, and keep it once FXServer is restarted after the crash', async () => {
@@ -605,7 +606,7 @@ describe('ServerSetupPage', () => {
         await press(words.continue);
         await press(words.continue);
         await press(words.start.saveAndStart);
-        await waitFor(() => getByText(words.start.starting));
+        await waitFor(() => getByRole('heading', { name: words.launch.starting }));
 
         const run = { ...STOPPED, generation: 1, since: '2026-10-30T14:00:05Z' };
         say({
@@ -636,7 +637,7 @@ describe('ServerSetupPage', () => {
         await press(words.continue);
         await press(words.continue);
         await press(words.start.saveAndStart);
-        await waitFor(() => getByText(words.start.starting));
+        await waitFor(() => getByRole('heading', { name: words.launch.starting }));
 
         const run = { ...STOPPED, generation: 1, since: '2026-10-30T14:00:05Z' };
         say({
@@ -715,12 +716,12 @@ describe('ServerSetupPage', () => {
         await press(words.start.saveAndStart);
 
         await waitFor(() => getByText(en.errors.setup_blocked({ findings: ['noEndpoint'] })));
-        expect(document.activeElement).toBe(getByRole('heading', { name: words.stepNames.cfg }));
+        expect(document.activeElement).toBe(getByRole('heading', { name: words.headings.cfg }));
         expect(api.of(CFG_ROUTE)).toHaveLength(2);
         expect(api.of('POST /servers/default/start')).toEqual([]);
     });
 
-    it('should send the owner to the Server page when the saved extra arguments are refused', async () => {
+    it('should send the owner to the launch settings when the saved extra arguments are refused', async () => {
         serve({
             [FOLDER_ROUTE]: json(FOLDER),
             [CFG_ROUTE]: json(CFG),
@@ -741,7 +742,9 @@ describe('ServerSetupPage', () => {
         await press(words.start.saveAndStart);
 
         await waitFor(() => getByText(words.start.argumentsRefused));
-        expect(getByRole('link', { name: words.start.openServer }).getAttribute('href')).toBe('/server');
+        expect(getByRole('link', { name: words.start.openServer }).getAttribute('href')).toBe(
+            '/settings/launch',
+        );
     });
 
     it('should start again from the settings saved elsewhere when its version is stale', async () => {
@@ -760,10 +763,10 @@ describe('ServerSetupPage', () => {
 
         await waitFor(() => getByText(words.changedElsewhere));
         await press(words.startAgain);
-        expect(document.activeElement).toBe(getByRole('heading', { name: words.folder.question }));
+        expect(document.activeElement).toBe(getByRole('heading', { name: words.headings.folder }));
     });
 
-    it('should offer the servers found, the first one picked, and go on with it once its check passes', async () => {
+    it('should offer the servers found, the first one picked, check each one picked, and go on with the last', async () => {
         const api = serve({
             [DISCOVER_ROUTE]: json({ places: PLACES, servers: [LIVE, LAB], truncated: false }),
             [FOLDER_ROUTE]: json(FOLDER),
@@ -778,6 +781,8 @@ describe('ServerSetupPage', () => {
         within(live).getByText(words.folder.usedByTxAdmin);
         within(live).getByText(words.folder.onesync.on);
         getByText(words.folder.portTaken(30120, { program: 'FXServer.exe', fxServer: true }, true));
+        within(live).getByText(words.folder.portInUse(30120, 'FXServer.exe'));
+        await waitFor(() => getByText(words.folder.accepted));
 
         fireEvent.click(found.getByRole('button', { name: /lab-server/ }));
         await settle();
@@ -786,9 +791,13 @@ describe('ServerSetupPage', () => {
         await settle();
         await press(words.folder.continueWith('server-data'));
 
-        expect(api.of(FOLDER_ROUTE)).toEqual([{ dataPath: DATA_PATH }]);
+        expect(api.of(FOLDER_ROUTE)).toEqual([
+            { dataPath: DATA_PATH },
+            { dataPath: LAB.path },
+            { dataPath: DATA_PATH },
+        ]);
         expect(api.of(CFG_ROUTE)).toEqual([{ dataPath: DATA_PATH, cfgFile: 'server.cfg', onesync: 'on' }]);
-        expect(document.activeElement).toBe(getByRole('heading', { name: words.stepNames.cfg }));
+        expect(document.activeElement).toBe(getByRole('heading', { name: words.headings.cfg }));
     });
 
     it('should browse to a folder, show what its check finds, and go on with it', async () => {
@@ -806,7 +815,7 @@ describe('ServerSetupPage', () => {
         );
         fireEvent.click(folders.getByRole('button', { name: /^server-data/ }));
 
-        await waitFor(() => getByText(words.folder.browser.isServer));
+        await waitFor(() => getByText(words.folder.accepted));
         expect(api.of(FOLDERS_ROUTE)).toEqual([{ path: 'D:\\FXServer\\', prefix: '' }]);
         await press(words.folder.browser.use);
 
diff --git a/web/src/pages/ServerSetupPage.tsx b/web/src/pages/ServerSetupPage.tsx
index e7b1cbe7..1b622575 100644
--- a/web/src/pages/ServerSetupPage.tsx
+++ b/web/src/pages/ServerSetupPage.tsx
@@ -19,15 +19,15 @@ import { Button } from '../components/Button';
 import { Notice } from '../components/Notice';
 import { errorMessage } from '../i18n/errors';
 import { useI18n } from '../i18n/I18nProvider';
+import { useArtifacts } from '../artifacts/context';
 import { useServerStatus } from '../server/context';
 import { BuildStep } from '../setup/BuildStep';
 import { CfgStep } from '../setup/CfgStep';
 import { FirstLaunch } from '../setup/FirstLaunch';
 import { FolderStep } from '../setup/FolderStep';
-import { SetupStage } from '../setup/SetupStage';
+import { SetupLayout } from '../setup/SetupLayout';
 import { StartStep, type AfterSave } from '../setup/StartStep';
 import {
-    SETUP_STEPS,
     cfgAfterFolder,
     cfgCheckOf,
     folderPasses,
@@ -35,7 +35,6 @@ import {
     type Checked,
     type SetupStep,
 } from '../setup/state';
-import { StepRail } from '../setup/StepRail';
 
 /** The settings the setup keeps as saved, and does not show. */
 const ARGUMENT_FIELDS = new Set<LaunchField>(['extraArguments', 'argumentName', 'argumentValue']);
@@ -52,28 +51,27 @@ export function ServerSetupPage() {
     const { t } = useI18n();
     const launch = useQuery(launchQuery);
 
+    if (launch.data !== undefined) {
+        return <Setup saved={launch.data} />;
+    }
     return (
-        <SetupStage>
-            <div className="page-head">
-                <h1 className="page-title">
-                    {t.serverSetup.title} <span className="gloss">{t.serverSetup.gloss}</span>
-                </h1>
+        <SetupLayout current="folder" chosen={{}} saved={false}>
+            <div className="flex flex-col gap-3 px-12 pt-10 max-md:px-4 max-md:pt-6">
+                {launch.isPending && (
+                    <div className="flex max-w-200 flex-col gap-3" aria-busy="true">
+                        <span className="sr-only">{t.common.loading}</span>
+                        <span className="skeleton h-8 w-2/3" />
+                        <span className="skeleton w-1/2" />
+                        <span className="skeleton h-40 w-full rounded-card" />
+                    </div>
+                )}
+                {launch.isError && (
+                    <Notice tone="danger">
+                        {t.server.loadFailed} {errorMessage(t, launch.error)}
+                    </Notice>
+                )}
             </div>
-            {launch.isPending && (
-                <div className="card flex flex-col gap-3 p-5">
-                    <span className="sr-only">{t.common.loading}</span>
-                    <span className="skeleton w-3/4" />
-                    <span className="skeleton w-2/3" />
-                    <span className="skeleton w-1/2" />
-                </div>
-            )}
-            {launch.isError && (
-                <Notice tone="danger">
-                    {t.server.loadFailed} {errorMessage(t, launch.error)}
-                </Notice>
-            )}
-            {launch.data !== undefined && <Setup saved={launch.data} />}
-        </SetupStage>
+        </SetupLayout>
     );
 }
 
@@ -81,6 +79,7 @@ function Setup({ saved }: { saved: StoredLaunch | null }) {
     const { t } = useI18n();
     const queryClient = useQueryClient();
     const { status } = useServerStatus();
+    const { status: builds } = useArtifacts();
     // What the setup started from: the settings as stored then, and the version its save names.
     const [shown, setShown] = useState(saved);
     const [draft, setDraft] = useState<LaunchSettings>(saved?.settings ?? DEFAULT_LAUNCH);
@@ -119,9 +118,17 @@ function Setup({ saved }: { saved: StoredLaunch | null }) {
     }, []);
 
     // With `goOn`, a folder that passes takes the setup to its cfg: Continue on a folder not checked.
+    // As for the cfg, only the last check sent counts: a server picked after another overtakes it.
+    const lastFolderCheck = useRef<FolderCheck | null>(null);
     const folderCheck = useMutation({
         mutationFn: ({ request }: { request: FolderCheck; goOn: boolean }) => checkFolder(request),
+        onMutate: ({ request }) => {
+            lastFolderCheck.current = request;
+        },
         onSuccess: (report, { request, goOn }) => {
+            if (request !== lastFolderCheck.current) {
+                return;
+            }
             setFolder({ request, report });
             if (report.problem !== null) {
                 return;
@@ -136,7 +143,11 @@ function Setup({ saved }: { saved: StoredLaunch | null }) {
                 enterCfg({ ...draft, cfgFile });
             }
         },
-        onError: (error) => setOutcome({ tone: 'danger', message: errorMessage(t, error) }),
+        onError: (error, { request }) => {
+            if (request === lastFolderCheck.current) {
+                setOutcome({ tone: 'danger', message: errorMessage(t, error) });
+            }
+        },
     });
     const checkThisFolder = (dataPath: string, goOn: boolean) =>
         folderCheck.mutate({ request: { dataPath: dataPath.trim() }, goOn });
@@ -216,7 +227,6 @@ function Setup({ saved }: { saved: StoredLaunch | null }) {
                     setLaunched({ before });
                 }
             } else {
-                setOutcome({ tone: 'success', message: t.serverSetup.start.starting });
                 setLaunched({ before });
             }
         },
@@ -260,92 +270,92 @@ function Setup({ saved }: { saved: StoredLaunch | null }) {
         go('folder');
     };
 
-    const index = SETUP_STEPS.indexOf(step);
     const folderReport =
         folder !== null && folder.request.dataPath === draft.dataPath.trim() ? folder.report : null;
+    const chosen = {
+        folder: draft.dataPath.trim(),
+        cfg: draft.cfgFile.trim(),
+        build: builds?.selected == null ? t.serverSetup.start.noBuild : String(builds.selected),
+    };
+    const banner = outcome !== null && (
+        <Notice tone={outcome.tone}>
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+                <span className="min-w-0 flex-1">{outcome.message}</span>
+                {outcome.startAgain && (
+                    <Button size="sm" className="max-md:w-full" onClick={startAgain}>
+                        {t.serverSetup.startAgain}
+                    </Button>
+                )}
+                {outcome.toServer && (
+                    <Link
+                        to="/settings/$category"
+                        params={{ category: 'launch' }}
+                        className="inline-flex items-center gap-1.5 font-medium text-ink underline-offset-2 hover:underline max-md:min-h-11"
+                    >
+                        {t.serverSetup.start.openServer}
+                        <ArrowRight size={14} strokeWidth={1.5} aria-hidden="true" />
+                    </Link>
+                )}
+            </div>
+        </Notice>
+    );
 
     return (
-        <div className="max-w-300 @container">
-            <div className="flex flex-col gap-5 @min-[50rem]:flex-row @min-[50rem]:items-start @min-[50rem]:gap-7">
-                <div className="@min-[50rem]:sticky @min-[50rem]:top-6 @min-[50rem]:w-55 @min-[50rem]:flex-none">
-                    <StepRail current={index} />
-                </div>
-                <div className="flex min-w-0 flex-1 flex-col gap-5 max-md:gap-4">
-                    {outcome !== null && (
-                        <Notice tone={outcome.tone}>
-                            <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
-                                <span className="min-w-0 flex-1">{outcome.message}</span>
-                                {outcome.startAgain && (
-                                    <Button size="sm" className="max-md:w-full" onClick={startAgain}>
-                                        {t.serverSetup.startAgain}
-                                    </Button>
-                                )}
-                                {outcome.toServer && (
-                                    <Link
-                                        to="/server"
-                                        className="inline-flex items-center gap-1.5 font-medium text-ink underline-offset-2 hover:underline max-md:min-h-11"
-                                    >
-                                        {t.serverSetup.start.openServer}
-                                        <ArrowRight size={14} strokeWidth={1.5} aria-hidden="true" />
-                                    </Link>
-                                )}
-                            </div>
-                        </Notice>
-                    )}
-                    {step === 'folder' && (
-                        <FolderStep
-                            titleRef={title}
-                            draft={draft}
-                            checked={folder}
-                            checking={folderCheck.isPending}
-                            onPath={onPath}
-                            onCheck={checkThisFolder}
-                            onContinue={continueFromFolder}
-                        />
-                    )}
-                    {step === 'cfg' && (
-                        <CfgStep
-                            titleRef={title}
-                            draft={draft}
-                            folder={folderReport}
-                            checked={cfg}
-                            checking={cfgCheck.isPending}
-                            onCfg={(cfgFile) => edit({ cfgFile })}
-                            onCheck={(cfgFile) => cfgCheck.mutate({ ...cfgCheckOf(draft), cfgFile })}
-                            onBack={() => go('folder')}
-                            onContinue={() => go('build')}
-                        />
-                    )}
-                    {step === 'build' && (
-                        <BuildStep
-                            titleRef={title}
-                            onBack={() => enterCfg()}
-                            onContinue={() => go('start')}
-                        />
-                    )}
-                    {step === 'start' && (
-                        <>
-                            <StartStep
-                                titleRef={title}
-                                draft={draft}
-                                report={cfg?.report ?? null}
-                                saving={save.isPending ? save.variables.after : undefined}
-                                onChange={(change) => {
-                                    if (change.onesync !== undefined) {
-                                        setOnesyncPicked(true);
-                                        // The summary counts what the cfg allows with it, players included.
-                                        cfgCheck.mutate(cfgCheckOf({ ...draft, onesync: change.onesync }));
-                                    }
-                                    edit(change);
-                                }}
-                                onSave={(after) => save.mutate({ after, before: status })}
-                                onBack={() => go('build')}
-                            />
-                            {launched !== null && <FirstLaunch before={launched.before} />}
-                        </>
-                    )}
-                </div>
-            </div>
-        </div>
+        <SetupLayout current={launched === null ? step : 'launch'} chosen={chosen} saved={shown !== null}>
+            {launched !== null && <FirstLaunch before={launched.before} onBack={() => setLaunched(null)} />}
+            {launched === null && step === 'folder' && (
+                <FolderStep
+                    titleRef={title}
+                    banner={banner}
+                    draft={draft}
+                    checked={folder}
+                    checking={folderCheck.isPending}
+                    onPath={onPath}
+                    onCheck={checkThisFolder}
+                    onContinue={continueFromFolder}
+                />
+            )}
+            {launched === null && step === 'cfg' && (
+                <CfgStep
+                    titleRef={title}
+                    banner={banner}
+                    draft={draft}
+                    folder={folderReport}
+                    checked={cfg}
+                    checking={cfgCheck.isPending}
+                    onCfg={(cfgFile) => edit({ cfgFile })}
+                    onCheck={(cfgFile) => cfgCheck.mutate({ ...cfgCheckOf(draft), cfgFile })}
+                    onBack={() => go('folder')}
+                    onContinue={() => go('build')}
+                />
+            )}
+            {launched === null && step === 'build' && (
+                <BuildStep
+                    titleRef={title}
+                    banner={banner}
+                    onBack={() => enterCfg()}
+                    onContinue={() => go('start')}
+                />
+            )}
+            {launched === null && step === 'start' && (
+                <StartStep
+                    titleRef={title}
+                    banner={banner}
+                    draft={draft}
+                    report={cfg?.report ?? null}
+                    saving={save.isPending ? save.variables.after : undefined}
+                    onChange={(change) => {
+                        if (change.onesync !== undefined) {
+                            setOnesyncPicked(true);
+                            // The summary counts what the cfg allows with it, players included.
+                            cfgCheck.mutate(cfgCheckOf({ ...draft, onesync: change.onesync }));
+                        }
+                        edit(change);
+                    }}
+                    onSave={(after) => save.mutate({ after, before: status })}
+                    onBack={() => go('build')}
+                />
+            )}
+        </SetupLayout>
     );
 }
diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx
index 2a621397..59062b2a 100644
--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -175,7 +175,7 @@ function CategoryLink({ id, onNavigate }: { id: CategoryId; onNavigate: () => vo
         <Link
             to="/settings/$category"
             params={{ category: id }}
-            className="relative flex min-h-8.5 items-center rounded-[9px] px-3 text-nav font-medium text-ink-2 transition-colors hover:bg-hover hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent aria-[current=page]:bg-active aria-[current=page]:text-ink aria-[current=page]:before:absolute aria-[current=page]:before:top-1/2 aria-[current=page]:before:-left-2 aria-[current=page]:before:-mt-[9px] aria-[current=page]:before:h-4.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-accent max-md:min-h-11 max-md:aria-[current=page]:before:hidden"
+            className="flex min-h-8.5 items-center rounded-[9px] px-3 text-nav font-medium text-ink-2 transition-colors hover:bg-hover hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent aria-[current=page]:bg-active aria-[current=page]:text-ink max-md:min-h-11"
             onClick={onNavigate}
         >
             {t.settings.categories[id].name}
diff --git a/web/src/players/words.tsx b/web/src/players/words.tsx
index 10c7bd83..f27b2f01 100644
--- a/web/src/players/words.tsx
+++ b/web/src/players/words.tsx
@@ -58,6 +58,9 @@ export function LabelChip({ label }: { label: PlayerLabel }) {
     );
 }
 
+/** The name the panel calls a player by: the label's, when the server's resources gave one. */
+export const nameOf = (name: string | null, label: PlayerLabel | null) => label?.name ?? name;
+
 /**
  * A player as the panel names them, opening their profile when it is written: by the label's name
  * when the server's resources gave one, with its chip and the FiveM name under it; by the FiveM name
diff --git a/web/src/router.test.tsx b/web/src/router.test.tsx
index 4e9f800c..55da8898 100644
--- a/web/src/router.test.tsx
+++ b/web/src/router.test.tsx
@@ -28,6 +28,22 @@ vi.mock('./shell/AppShell', async () => {
         },
     };
 });
+vi.mock('./shell/FocusShell', async () => {
+    const { Outlet } = await import('@tanstack/react-router');
+    const { useQuery } = await import('@tanstack/react-query');
+    const { MeContext } = await import('./auth/me');
+    const auth = await import('./api/auth');
+    return {
+        FocusShell: () => {
+            const { data: me } = useQuery(auth.meQuery);
+            return me ? (
+                <MeContext value={me}>
+                    <Outlet />
+                </MeContext>
+            ) : null;
+        },
+    };
+});
 vi.mock('./pages/OverviewPage', () => ({ OverviewPage: () => <h1>Overview</h1> }));
 vi.mock('./pages/ServerSetupPage', () => ({ ServerSetupPage: () => <h1>Server setup</h1> }));
 vi.mock('./pages/SettingsPage', async () => {
@@ -86,6 +102,13 @@ describe('the panel router', () => {
         localStorage.clear();
     });
 
+    it('should send another account from the server setup to where it lands', async () => {
+        const { findByRole, router } = panel('/server/setup', [[meQuery.queryKey, VIEWER]]);
+
+        await findByRole('heading', { name: 'Overview' });
+        expect(router.state.location.pathname).toBe('/');
+    });
+
     it('should send the owner from the Overview to the server setup while nothing is saved', async () => {
         const { findByRole, router } = panel('/', [
             [meQuery.queryKey, OWNER],
diff --git a/web/src/router.tsx b/web/src/router.tsx
index 664a2a98..2adc4a1a 100644
--- a/web/src/router.tsx
+++ b/web/src/router.tsx
@@ -25,6 +25,7 @@ import { RouteError } from './pages/RouteError';
 import { SetupPage } from './pages/SetupPage';
 import { firstCategory, isCategory, type CategoryId } from './settings/catalog';
 import { AppShell } from './shell/AppShell';
+import { FocusShell } from './shell/FocusShell';
 
 // Pages beyond the Overview load when someone opens them: the statistics and their charts, the
 // console's virtual list and colour parser, the restart schedule, the diagnostics, the players and
@@ -134,23 +135,34 @@ const passwordRoute = createRoute({
     component: PasswordChangePage,
 });
 
+/** The account a signed-in screen opens for, or where a visitor without one belongs. */
+const signedIn = async ({ context: { queryClient } }: { context: RouterContext }) => {
+    const me = await queryClient.ensureQueryData(meQuery);
+    if (me === null) {
+        throw await signedOut(queryClient);
+    }
+    // The API refuses everything else until then; the panel goes straight to the form.
+    if (me.mustChangePassword) {
+        throw redirect({ to: '/password' });
+    }
+    return { me };
+};
+
 const panelRoute = createRoute({
     getParentRoute: () => rootRoute,
     id: 'panel',
-    beforeLoad: async ({ context: { queryClient } }) => {
-        const me = await queryClient.ensureQueryData(meQuery);
-        if (me === null) {
-            throw await signedOut(queryClient);
-        }
-        // The API refuses everything else until then; the panel goes straight to the form.
-        if (me.mustChangePassword) {
-            throw redirect({ to: '/password' });
-        }
-        return { me };
-    },
+    beforeLoad: signedIn,
     component: AppShell,
 });
 
+/** Flows on the whole screen, without the panel's rail and columns. */
+const focusRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    id: 'focus',
+    beforeLoad: signedIn,
+    component: FocusShell,
+});
+
 const overviewRoute = createRoute({
     getParentRoute: () => panelRoute,
     path: '/',
@@ -292,14 +304,17 @@ const changesResourceRoute = createRoute({
     ),
 });
 
+// Launch settings are the owner's alone; the setup is a flow of its own, without a page to refuse
+// from, so anyone else goes back to where they land.
 const serverSetupRoute = createRoute({
-    getParentRoute: () => panelRoute,
+    getParentRoute: () => focusRoute,
     path: '/server/setup',
-    component: () => (
-        <RequireOwner>
-            <ServerSetupPage />
-        </RequireOwner>
-    ),
+    beforeLoad: ({ context: { me } }) => {
+        if (!me.isOwner) {
+            throw redirect({ to: landing(me) });
+        }
+    },
+    component: ServerSetupPage,
 });
 
 // The tools read the whole server folder and write into it: the owner's, as the server setup is.
@@ -405,7 +420,6 @@ const routeTree = rootRoute.addChildren([
         changesResourceRoute,
         dropsRoute,
         serverRoute,
-        serverSetupRoute,
         toolsRoute,
         backupsRoute,
         usersRoute,
@@ -415,6 +429,7 @@ const routeTree = rootRoute.addChildren([
         accountRoute,
         aboutRoute,
     ]),
+    focusRoute.addChildren([serverSetupRoute]),
 ]);
 
 export const createPanelRouter = (queryClient: QueryClient) =>
diff --git a/web/src/settings/Row.tsx b/web/src/settings/Row.tsx
index 8b671d42..ef7760d9 100644
--- a/web/src/settings/Row.tsx
+++ b/web/src/settings/Row.tsx
@@ -48,7 +48,7 @@ export function SettingRow({
             className={cn(
                 'flex flex-wrap items-start gap-x-6 gap-y-3 border-t border-line px-5 py-4 first:border-t-0 max-md:px-4',
                 // ink-3 falls under 4.5:1 on the accent's tint: the row's grey text, hints included, turns ink-2.
-                found && 'bg-accent-soft shadow-[inset_2px_0_0_var(--accent)] [&_.text-ink-3]:text-ink-2',
+                found && 'bg-accent-soft [&_.text-ink-3]:text-ink-2',
             )}
         >
             <div className="flex min-w-0 flex-[1_1_16rem] flex-col gap-1">
diff --git a/web/src/setup/BuildStep.tsx b/web/src/setup/BuildStep.tsx
index 4169f143..0a4e152f 100644
--- a/web/src/setup/BuildStep.tsx
+++ b/web/src/setup/BuildStep.tsx
@@ -1,36 +1,41 @@
 import { useQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
-import { ArrowRight, Download, FolderInput, Package } from 'lucide-react';
-import { useEffect, useId, useRef, useState, type Ref } from 'react';
+import { Check, Download, FolderInput, Info, Package, type LucideIcon } from 'lucide-react';
+import { useEffect, useRef, useState, type ReactNode, type Ref } from 'react';
 
 import { catalogQuery } from '../api/artifacts';
 import type { CatalogEntry } from '../api/generated/CatalogEntry';
 import { useArtifacts } from '../artifacts/context';
-import { Button } from '../components/Button';
-import { Card } from '../components/Card';
+import { supportTone } from '../artifacts/support';
+import { Button, buttonVariants } from '../components/Button';
+import { Chip } from '../components/Chip';
 import { Notice } from '../components/Notice';
 import { useI18n } from '../i18n/I18nProvider';
+import { cn } from '../lib/cn';
 import { useLinkState } from '../live/context';
 import { ImportDialog, InstallDialog, JobCard, UseDialog, type Outcome } from '../pages/ArtifactsPage';
 import { StepActions } from './StepActions';
+import { StepPage } from './StepPage';
 
 type Open = { kind: 'install'; entry: CatalogEntry } | { kind: 'import' } | { kind: 'use'; build: number };
 
 /**
- * The build FXServer starts, installed or imported here with the Artifacts page's own dialogs and
+ * The build FXServer starts: the one selected, or the one Cfx.re recommends to install, with the
+ * other ways to get one. Installs and imports run with the FXServer builds page's own dialogs and
  * job card. The step may be skipped: the settings save without a build, only FXServer cannot start.
  */
 export function BuildStep({
     titleRef,
+    banner,
     onBack,
     onContinue,
 }: {
     titleRef: Ref<HTMLHeadingElement>;
+    banner?: ReactNode;
     onBack: () => void;
     onContinue: () => void;
 }) {
     const { t } = useI18n();
-    const id = useId();
     const words = t.serverSetup.build;
     const link = useLinkState();
     const { status } = useArtifacts();
@@ -38,7 +43,7 @@ export function BuildStep({
     const [open, setOpen] = useState<Open | null>(null);
     const [outcome, setOutcome] = useState<Outcome | null>(null);
     const notice = useRef<HTMLDivElement>(null);
-    // A job that ended before the step opened is the Artifacts page's to show, not this setup's.
+    // A job that ended before the step opened is the FXServer builds page's to show, not this setup's.
     const [earlierJob] = useState(() =>
         status?.job?.state === 'running' ? null : (status?.job?.id ?? null),
     );
@@ -58,7 +63,9 @@ export function BuildStep({
         setOutcome({ tone: 'success', message, until });
     };
 
-    const recommended = catalog.data?.builds.find((entry) => entry.recommended) ?? null;
+    const builds = catalog.data?.builds ?? [];
+    const recommended = builds.find((entry) => entry.recommended) ?? null;
+    const latest = builds.find((entry) => entry.latest) ?? null;
     const installReason = catalog.isPending
         ? words.catalogLoading
         : catalog.isError
@@ -71,14 +78,33 @@ export function BuildStep({
                 ? t.errors.job_running
                 : null;
     const selected = status?.selected ?? null;
-    const usable = status?.installed.filter((build) => build.health.kind === 'valid') ?? [];
+    const usable =
+        status?.installed.filter((build) => build.health.kind === 'valid' && build.build !== selected) ?? [];
     const job = status?.job ?? null;
+    const shownJob = job !== null && job.id !== earlierJob ? job : null;
 
     return (
         <>
-            <Card id={id} icon={Package} title={t.serverSetup.stepNames.build} titleRef={titleRef}>
-                <div className="flex flex-col gap-5">
-                    <p className="max-w-2xl text-body text-ink-2">{words.lead}</p>
+            <StepPage
+                step="build"
+                titleRef={titleRef}
+                title={t.serverSetup.headings.build}
+                lead={words.lead}
+                banner={banner}
+                actions={
+                    <StepActions onBack={onBack}>
+                        {selected === null && (
+                            <Button tone="ghost" onClick={onContinue}>
+                                {words.skip}
+                            </Button>
+                        )}
+                        <Button tone="ink" disabled={selected === null} onClick={onContinue}>
+                            {t.serverSetup.continue}
+                        </Button>
+                    </StepActions>
+                }
+            >
+                <div className="flex max-w-250 flex-col gap-6">
                     {outcome !== null && (
                         <Notice ref={notice} tabIndex={-1} tone={outcome.tone}>
                             {outcome.message}
@@ -92,92 +118,128 @@ export function BuildStep({
                             {link === 'live' || link === 'connecting' ? t.artifacts.loading : words.unknown}
                         </p>
                     ) : (
-                        <div className="flex flex-col gap-4">
-                            <p className="text-body font-medium text-ink">
-                                {selected === null ? words.none : words.selected(String(selected))}
-                            </p>
-                            {selected === null && (
-                                <>
-                                    <div className="flex flex-col gap-2">
-                                        <div className="flex flex-wrap gap-2 max-md:flex-col max-md:items-stretch">
+                        <>
+                            {selected !== null ? (
+                                <BuildCard
+                                    label={words.selectedBuild}
+                                    build={selected}
+                                    entry={builds.find((entry) => entry.build === selected) ?? null}
+                                    detail={words.startsFromIt}
+                                    chosen
+                                />
+                            ) : recommended !== null ? (
+                                <BuildCard
+                                    label={words.recommendedBuild}
+                                    build={recommended.build}
+                                    entry={recommended}
+                                    detail={words.recommendedFor(
+                                        t.artifacts.available.platforms[status.platform],
+                                    )}
+                                    note={installReason}
+                                    action={
+                                        installReason === null && (
                                             <Button
+                                                tone="ink"
                                                 icon={Download}
-                                                disabled={installReason !== null}
-                                                onClick={() => {
-                                                    if (recommended !== null) {
-                                                        setOpen({ kind: 'install', entry: recommended });
-                                                    }
-                                                }}
+                                                onClick={() =>
+                                                    setOpen({ kind: 'install', entry: recommended })
+                                                }
                                             >
                                                 {words.install}
                                             </Button>
-                                            <Button
-                                                icon={FolderInput}
-                                                onClick={() => setOpen({ kind: 'import' })}
-                                            >
-                                                {words.importFolder}
-                                            </Button>
-                                        </div>
-                                        {installReason !== null && (
-                                            <p className="text-small text-ink-3">{installReason}</p>
-                                        )}
-                                    </div>
-                                    {usable.length > 0 && (
-                                        <div className="flex flex-col gap-1.5">
-                                            <p className="text-ui font-medium text-ink">{words.installed}</p>
-                                            <ul className="flex flex-wrap gap-2 max-md:flex-col max-md:items-stretch">
-                                                {usable.map((build) => (
-                                                    <li key={build.build} className="flex flex-col">
-                                                        <Button
-                                                            size="sm"
-                                                            onClick={() =>
-                                                                setOpen({ kind: 'use', build: build.build })
-                                                            }
-                                                        >
-                                                            {words.use(String(build.build))}
-                                                        </Button>
-                                                    </li>
-                                                ))}
-                                            </ul>
-                                        </div>
-                                    )}
-                                </>
+                                        )
+                                    }
+                                />
+                            ) : (
+                                <section className="card flex items-center gap-3.5 p-5 max-md:p-4">
+                                    <span className="grid size-11 flex-none place-items-center rounded-control bg-surface-2 text-ink-2">
+                                        <Package size={22} strokeWidth={1.5} aria-hidden="true" />
+                                    </span>
+                                    <span className="flex min-w-0 flex-col gap-1">
+                                        <b className="text-card text-ink">{words.none}</b>
+                                        <span className="text-small text-ink-3">{installReason}</span>
+                                    </span>
+                                </section>
+                            )}
+                            {shownJob !== null && (
+                                <JobCard
+                                    job={shownJob}
+                                    startsNext={selected === shownJob.build && status.pending === null}
+                                    onOutcome={setOutcome}
+                                    onUse={(build) => setOpen({ kind: 'use', build })}
+                                    onRetry={(build) => {
+                                        const entry = builds.find((each) => each.build === build);
+                                        if (entry !== undefined) {
+                                            setOpen({ kind: 'install', entry });
+                                        }
+                                    }}
+                                />
+                            )}
+                            {shownJob?.state === 'running' && (
+                                <p className="flex items-center gap-2 text-small text-ink-3">
+                                    <Info
+                                        size={14}
+                                        strokeWidth={1.5}
+                                        className="flex-none"
+                                        aria-hidden="true"
+                                    />
+                                    {words.goesOn}
+                                </p>
+                            )}
+                            {usable.length > 0 && (
+                                <section className="flex flex-col gap-3">
+                                    <h2 className="eyebrow">{words.installed}</h2>
+                                    <ul className="flex flex-wrap gap-2 max-md:flex-col max-md:items-stretch">
+                                        {usable.map((build) => (
+                                            <li key={build.build} className="flex flex-col">
+                                                <Button
+                                                    size="sm"
+                                                    onClick={() =>
+                                                        setOpen({ kind: 'use', build: build.build })
+                                                    }
+                                                >
+                                                    {words.use(String(build.build))}
+                                                </Button>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </section>
                             )}
-                            <Link
-                                to="/artifacts"
-                                className="inline-flex items-center gap-1.5 self-start text-ui font-medium text-ink underline-offset-2 hover:underline max-md:min-h-11"
-                            >
-                                {words.openArtifacts}
-                                <ArrowRight size={14} strokeWidth={1.5} aria-hidden="true" />
-                            </Link>
-                        </div>
+                            <section className="flex flex-col gap-3">
+                                <h2 className="eyebrow">
+                                    {selected === null ? words.otherWays : words.change}
+                                </h2>
+                                <div className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,18rem),1fr))] gap-3">
+                                    <Way
+                                        icon={FolderInput}
+                                        title={words.importTitle}
+                                        detail={words.importDetail}
+                                    >
+                                        <Button size="sm" onClick={() => setOpen({ kind: 'import' })}>
+                                            {words.choose}
+                                        </Button>
+                                    </Way>
+                                    <Way
+                                        icon={Package}
+                                        title={words.anotherTitle}
+                                        detail={
+                                            latest !== null &&
+                                            recommended !== null &&
+                                            latest.build > recommended.build
+                                                ? words.latestIs(String(latest.build))
+                                                : words.anotherDetail
+                                        }
+                                    >
+                                        <Link to="/artifacts" className={buttonVariants({ size: 'sm' })}>
+                                            {words.seeAll}
+                                        </Link>
+                                    </Way>
+                                </div>
+                            </section>
+                        </>
                     )}
-                    <StepActions onBack={onBack}>
-                        {selected === null && (
-                            <Button tone="ghost" onClick={onContinue}>
-                                {words.skip}
-                            </Button>
-                        )}
-                        <Button tone="ink" disabled={selected === null} onClick={onContinue}>
-                            {t.serverSetup.continue}
-                        </Button>
-                    </StepActions>
                 </div>
-            </Card>
-            {job !== null && job.id !== earlierJob && (
-                <JobCard
-                    job={job}
-                    startsNext={selected === job.build && status?.pending === null}
-                    onOutcome={setOutcome}
-                    onUse={(build) => setOpen({ kind: 'use', build })}
-                    onRetry={(build) => {
-                        const entry = catalog.data?.builds.find((each) => each.build === build);
-                        if (entry !== undefined) {
-                            setOpen({ kind: 'install', entry });
-                        }
-                    }}
-                />
-            )}
+            </StepPage>
             {status !== null && open?.kind === 'install' && (
                 <InstallDialog entry={open.entry} status={status} onClose={close} onDone={done} />
             )}
@@ -194,3 +256,83 @@ export function BuildStep({
         </>
     );
 }
+
+/** A build with what the catalog says of it: the one selected, or the one Cfx.re recommends. */
+function BuildCard({
+    label,
+    build,
+    entry,
+    detail,
+    chosen = false,
+    note,
+    action,
+}: {
+    label: string;
+    build: number;
+    entry: CatalogEntry | null;
+    detail: string;
+    chosen?: boolean;
+    note?: string | null;
+    action?: ReactNode;
+}) {
+    const { t } = useI18n();
+    const words = t.serverSetup.build;
+    const available = t.artifacts.available;
+    return (
+        <section aria-label={label} className="card flex flex-col gap-3 p-5 max-md:p-4">
+            <div className="flex flex-wrap items-center gap-3.5">
+                <span
+                    className={cn(
+                        'grid size-11 flex-none place-items-center rounded-control',
+                        chosen ? 'bg-success-soft text-success' : 'bg-accent-soft text-accent-ink',
+                    )}
+                >
+                    <Package size={22} strokeWidth={1.5} aria-hidden="true" />
+                </span>
+                <span className="flex min-w-48 flex-1 flex-col gap-1">
+                    <span className="flex flex-wrap items-center gap-2">
+                        <span className="font-mono text-figure-sm text-ink">{build}</span>
+                        {chosen && (
+                            <Chip tone="success" icon={Check}>
+                                {words.selected}
+                            </Chip>
+                        )}
+                        {entry?.recommended === true && <Chip tone="accent">{available.recommended}</Chip>}
+                        {entry !== null && entry.support !== 'unknown' && (
+                            <Chip tone={supportTone(entry.support)}>{available.supports[entry.support]}</Chip>
+                        )}
+                    </span>
+                    <span className="text-small text-ink-3">{detail}</span>
+                </span>
+                {action}
+            </div>
+            {note && <p className="text-small text-ink-3">{note}</p>}
+        </section>
+    );
+}
+
+/** Another way to get a build, with the button that takes it. */
+function Way({
+    icon: Icon,
+    title,
+    detail,
+    children,
+}: {
+    icon: LucideIcon;
+    title: string;
+    detail: string;
+    children: ReactNode;
+}) {
+    return (
+        <div className="card flex items-center gap-3.5 p-4">
+            <span className="grid size-9 flex-none place-items-center rounded-control bg-surface-2 text-ink-2">
+                <Icon size={18} strokeWidth={1.5} aria-hidden="true" />
+            </span>
+            <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+                <b className="text-ui font-semibold text-ink">{title}</b>
+                <span className="text-small text-ink-3">{detail}</span>
+            </span>
+            <span className="flex-none">{children}</span>
+        </div>
+    );
+}
diff --git a/web/src/setup/CfgBrowser.tsx b/web/src/setup/CfgBrowser.tsx
new file mode 100644
index 00000000..978ceca1
--- /dev/null
+++ b/web/src/setup/CfgBrowser.tsx
@@ -0,0 +1,364 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+    ChevronDown,
+    ChevronRight,
+    EyeOff,
+    File,
+    FileCog,
+    Folder,
+    FolderOpen,
+    Info,
+    Link2,
+    Lock,
+    OctagonX,
+    TriangleAlert,
+} from 'lucide-react';
+import { useEffect, useRef } from 'react';
+
+import type { CfgFinding } from '../api/generated/CfgFinding';
+import type { FileEntry } from '../api/generated/FileEntry';
+import type { Severity } from '../api/generated/Severity';
+import { cfgTextQuery, filesQuery } from '../api/serverSetup';
+import { errorMessage } from '../i18n/errors';
+import { useI18n } from '../i18n/I18nProvider';
+import { cn } from '../lib/cn';
+import { keyedTokens, type TokenKind } from './cfgSyntax';
+
+/** The folders that hold the cfg files a folder check found, the root among them, for the tree to open on. */
+export const foldersOf = (files: readonly string[]) => {
+    const folders = new Set<string>(['']);
+    for (const file of files) {
+        const parts = file.split('/').slice(0, -1);
+        parts.forEach((_, index) => folders.add(parts.slice(0, index + 1).join('/')));
+    }
+    return folders;
+};
+
+type TreeProps = {
+    dataPath: string;
+    /** The cfg FXServer runs. */
+    chosen: string;
+    /** The file the preview shows. */
+    previewed: string;
+    expanded: ReadonlySet<string>;
+    onlyCfg: boolean;
+    filter: string;
+    onToggle: (folder: string) => void;
+    onOpen: (cfg: string) => void;
+};
+
+/** The server folder as a tree, each folder read when it opens; only its cfg files can be opened. */
+export function FileTree(props: TreeProps) {
+    const { t } = useI18n();
+    return (
+        <ul aria-label={t.serverSetup.cfg.browser.tree} className="flex flex-col gap-px">
+            <FolderEntries {...props} path="" depth={0} />
+        </ul>
+    );
+}
+
+function FolderEntries({ path, depth, ...props }: TreeProps & { path: string; depth: number }) {
+    const { t } = useI18n();
+    const words = t.serverSetup.cfg.browser;
+    const listing = useQuery(filesQuery({ dataPath: props.dataPath, path }));
+    const indent = { paddingInlineStart: `${8 + depth * 16}px` };
+    if (listing.isPending) {
+        return (
+            <li style={indent} className="py-1.5" aria-busy="true">
+                <span className="sr-only">{t.common.loading}</span>
+                <span className="skeleton block h-4 w-3/4" />
+            </li>
+        );
+    }
+    if (listing.isError) {
+        return (
+            <li style={indent} className="py-1.5 text-small text-danger-ink">
+                {errorMessage(t, listing.error)}
+            </li>
+        );
+    }
+    if (listing.data.problem !== null) {
+        return (
+            <li style={indent} className="py-1.5 text-small text-ink-3">
+                {words.cannotOpen}
+            </li>
+        );
+    }
+    const needle = props.filter.trim().toLowerCase();
+    const entries = listing.data.entries.filter(
+        (entry) =>
+            entry.kind === 'folder' ||
+            entry.kind === 'withheld' ||
+            ((entry.kind === 'cfg' || !props.onlyCfg) && entry.name.toLowerCase().includes(needle)),
+    );
+    if (entries.length === 0) {
+        return (
+            <li style={indent} className="py-1.5 text-small text-ink-3">
+                {needle === '' ? words.empty : words.noMatch}
+            </li>
+        );
+    }
+    return (
+        <>
+            {entries.map((entry) => (
+                <EntryRow key={entry.path} entry={entry} depth={depth} {...props} />
+            ))}
+            {listing.data.truncated && (
+                <li style={indent} className="py-1.5 text-small text-ink-3">
+                    {words.truncated}
+                </li>
+            )}
+        </>
+    );
+}
+
+const ROW =
+    'flex h-8 w-full min-w-0 items-center gap-1.5 rounded-sm pr-2 text-left text-ui max-md:h-11 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent';
+
+function EntryRow({ entry, depth, ...props }: TreeProps & { entry: FileEntry; depth: number }) {
+    const { t } = useI18n();
+    const words = t.serverSetup.cfg.browser;
+    const indent = { paddingInlineStart: `${8 + depth * 16}px` };
+    const spacer = <span className="w-3 flex-none" aria-hidden="true" />;
+
+    if (entry.kind === 'folder' && !entry.link) {
+        const open = props.expanded.has(entry.path);
+        const Chevron = open ? ChevronDown : ChevronRight;
+        const Icon = open ? FolderOpen : Folder;
+        return (
+            <li>
+                <button
+                    type="button"
+                    aria-expanded={open}
+                    style={indent}
+                    className={cn(ROW, 'hover:bg-hover')}
+                    onClick={() => props.onToggle(entry.path)}
+                >
+                    <Chevron size={12} strokeWidth={2} className="flex-none text-ink-3" aria-hidden="true" />
+                    <Icon
+                        size={15}
+                        strokeWidth={1.75}
+                        className={cn('flex-none', open ? 'text-ink-2' : 'text-ink-3')}
+                        aria-hidden="true"
+                    />
+                    <span className="truncate text-ink">{entry.name}</span>
+                </button>
+                {open && (
+                    <ul className="flex flex-col gap-px">
+                        <FolderEntries {...props} path={entry.path} depth={depth + 1} />
+                    </ul>
+                )}
+            </li>
+        );
+    }
+
+    if (entry.kind === 'cfg') {
+        const previewed = entry.path === props.previewed;
+        const chosen = entry.path === props.chosen;
+        return (
+            <li>
+                <button
+                    type="button"
+                    aria-current={previewed ? 'true' : undefined}
+                    style={indent}
+                    className={cn(ROW, previewed ? 'bg-accent-soft' : 'hover:bg-hover')}
+                    onClick={() => props.onOpen(entry.path)}
+                >
+                    {spacer}
+                    <FileCog
+                        size={15}
+                        strokeWidth={1.75}
+                        className="flex-none text-accent-ink"
+                        aria-hidden="true"
+                    />
+                    <span
+                        className={cn('truncate font-mono text-small text-ink', previewed && 'font-semibold')}
+                    >
+                        {entry.name}
+                    </span>
+                    {entry.link && (
+                        <Link2
+                            size={12}
+                            strokeWidth={2}
+                            className="flex-none text-ink-3"
+                            aria-label={words.link}
+                        />
+                    )}
+                    {chosen && (
+                        <span className="ml-auto flex-none rounded-pill bg-success-soft px-1.75 py-px text-tag font-semibold text-success">
+                            {words.runs}
+                        </span>
+                    )}
+                </button>
+            </li>
+        );
+    }
+
+    const withheld = entry.kind === 'withheld';
+    const Icon = withheld ? Lock : entry.kind === 'folder' ? Folder : File;
+    return (
+        <li
+            style={indent}
+            className={cn(ROW, 'cursor-default text-ink-3')}
+            title={withheld ? words.withheld : entry.link ? words.link : undefined}
+        >
+            {spacer}
+            <Icon size={15} strokeWidth={1.75} className="flex-none" aria-hidden="true" />
+            <span className="truncate">{entry.name}</span>
+            {entry.link && <Link2 size={12} strokeWidth={2} className="flex-none" aria-hidden="true" />}
+            {withheld && (
+                <span className="ml-auto flex-none text-micro whitespace-nowrap">{words.neverRead}</span>
+            )}
+        </li>
+    );
+}
+
+const TOKEN_CLASS = {
+    command: 'text-accent-ink',
+    string: 'text-[color:var(--term-green)]',
+    number: 'text-warning',
+    comment: 'text-ink-3',
+    plain: 'text-[color:var(--term-fg)]',
+    secret: '',
+} satisfies Record<TokenKind, string>;
+
+const MARK = {
+    blocking: { icon: OctagonX, ink: 'text-danger-ink', row: 'bg-danger-soft' },
+    warning: { icon: TriangleAlert, ink: 'text-warning', row: 'bg-warning-soft' },
+    note: { icon: Info, ink: 'text-accent-ink', row: 'bg-accent-soft' },
+} as const satisfies Record<Severity, unknown>;
+
+const RANK = { blocking: 0, warning: 1, note: 2 } satisfies Record<Severity, number>;
+
+/**
+ * A cfg's text as Observer reads it, its secrets left out: the lines numbered and coloured, those
+ * a finding names marked with its severity. `focus` scrolls a line into view.
+ */
+export function CfgPreview({
+    dataPath,
+    path,
+    findings,
+    focus,
+}: {
+    dataPath: string;
+    path: string;
+    findings: readonly CfgFinding[];
+    focus: number | null;
+}) {
+    const { t, format } = useI18n();
+    const words = t.serverSetup.cfg.browser;
+    const text = useQuery(cfgTextQuery({ dataPath, cfgFile: path }));
+    const body = useRef<HTMLOListElement>(null);
+    const marks = new Map<number, Severity>();
+    for (const finding of findings) {
+        if (finding.file === path && finding.line !== null) {
+            const held = marks.get(finding.line);
+            if (held === undefined || RANK[finding.severity] < RANK[held]) {
+                marks.set(finding.line, finding.severity);
+            }
+        }
+    }
+    const lines = text.data?.lines ?? [];
+    const hidden = lines.some((line) => line.some((span) => span.secret));
+
+    useEffect(() => {
+        if (focus !== null && lines.length > 0) {
+            body.current?.querySelector(`[data-line="${focus}"]`)?.scrollIntoView({ block: 'center' });
+        }
+    }, [focus, lines.length]);
+
+    return (
+        <div className="flex min-h-0 flex-1 flex-col">
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-line px-4 py-3">
+                <span className="min-w-0 font-mono text-ui font-medium text-ink [overflow-wrap:anywhere]">
+                    {path}
+                </span>
+                {text.data?.problem === null && (
+                    <span className="text-meta text-ink-3">{words.lines(lines.length)}</span>
+                )}
+                {hidden && (
+                    <span className="ml-auto inline-flex items-center gap-1.5 text-meta text-ink-3">
+                        <EyeOff size={13} strokeWidth={1.75} aria-hidden="true" />
+                        {words.hidden}
+                    </span>
+                )}
+            </div>
+            {text.isPending && (
+                <div className="flex flex-col gap-2 p-4" aria-busy="true">
+                    <span className="sr-only">{t.common.loading}</span>
+                    <span className="skeleton w-2/3" />
+                    <span className="skeleton w-1/2" />
+                    <span className="skeleton w-3/5" />
+                </div>
+            )}
+            {text.isError && <p className="p-4 text-small text-danger-ink">{errorMessage(t, text.error)}</p>}
+            {text.data !== undefined && (text.data.folder !== null || text.data.problem !== null) && (
+                <p className="p-4 text-small text-ink-3">
+                    {text.data.problem !== null
+                        ? t.serverSetup.cfg.problems[text.data.problem]
+                        : words.cannotOpen}
+                </p>
+            )}
+            {text.data?.problem === null && text.data.folder === null && (
+                <ol
+                    ref={body}
+                    aria-label={words.text(path)}
+                    className="max-h-140 min-h-0 flex-1 overflow-auto bg-bg py-2.5 font-mono text-small leading-[22px] max-md:max-h-100"
+                >
+                    {lines.map((spans, index) => {
+                        const number = index + 1;
+                        const mark = marks.get(number);
+                        const Mark = mark === undefined ? null : MARK[mark].icon;
+                        return (
+                            <li
+                                key={number}
+                                data-line={number}
+                                className={cn(
+                                    'flex min-h-[22px] items-start',
+                                    mark !== undefined && MARK[mark].row,
+                                )}
+                            >
+                                <span
+                                    className="w-11 flex-none pr-2.5 text-right text-ink-3 select-none"
+                                    aria-hidden="true"
+                                >
+                                    {format.number(number, { useGrouping: false })}
+                                </span>
+                                <span className="flex h-[22px] w-4 flex-none items-center">
+                                    {Mark !== null && mark !== undefined && (
+                                        <Mark
+                                            size={12}
+                                            strokeWidth={2.25}
+                                            className={MARK[mark].ink}
+                                            aria-label={t.serverSetup.cfg.severities[mark]}
+                                        />
+                                    )}
+                                </span>
+                                <span className="pr-4 whitespace-pre-wrap [overflow-wrap:anywhere]">
+                                    {keyedTokens(spans).map(({ token, key }) =>
+                                        token.kind === 'secret' ? (
+                                            <span
+                                                key={key}
+                                                className="mx-px rounded-xs bg-surface-3 px-1.5 text-ink-3"
+                                                title={words.secret}
+                                            >
+                                                ••••••••<span className="sr-only">{words.secret}</span>
+                                            </span>
+                                        ) : (
+                                            <span key={key} className={TOKEN_CLASS[token.kind]}>
+                                                {token.text}
+                                            </span>
+                                        ),
+                                    )}
+                                </span>
+                            </li>
+                        );
+                    })}
+                </ol>
+            )}
+            {text.data?.truncated === true && (
+                <p className="border-t border-line px-4 py-2 text-meta text-ink-3">{words.longFile}</p>
+            )}
+        </div>
+    );
+}
diff --git a/web/src/setup/CfgStep.tsx b/web/src/setup/CfgStep.tsx
index 47defcae..3be6db2e 100644
--- a/web/src/setup/CfgStep.tsx
+++ b/web/src/setup/CfgStep.tsx
@@ -1,5 +1,5 @@
-import { CircleCheck, FileCog, Info, OctagonX, RefreshCw, TriangleAlert } from 'lucide-react';
-import { useId, type Ref } from 'react';
+import { CircleCheck, HardDrive, Info, OctagonX, RefreshCw, Search, TriangleAlert } from 'lucide-react';
+import { useState, type ReactNode, type Ref } from 'react';
 
 import type { CfgCheck } from '../api/generated/CfgCheck';
 import type { CfgFacts } from '../api/generated/CfgFacts';
@@ -9,15 +9,17 @@ import type { FolderReport } from '../api/generated/FolderReport';
 import type { LaunchSettings } from '../api/generated/LaunchSettings';
 import type { Severity } from '../api/generated/Severity';
 import { Button } from '../components/Button';
-import { Card } from '../components/Card';
 import { Chip } from '../components/Chip';
 import { Notice } from '../components/Notice';
 import { PathField } from '../components/PathField';
+import { Switch } from '../components/Switch';
 import { useI18n } from '../i18n/I18nProvider';
 import { cn } from '../lib/cn';
+import { CfgPreview, FileTree, foldersOf } from './CfgBrowser';
 import { Fact } from './Fact';
 import { cfgPasses, groupFindings, type Checked } from './state';
 import { StepActions } from './StepActions';
+import { StepPage } from './StepPage';
 
 const SEVERITY = {
     blocking: { tone: 'danger', icon: OctagonX },
@@ -31,6 +33,7 @@ const SEVERITY = {
  */
 export function CfgStep({
     titleRef,
+    banner,
     draft,
     folder,
     checked,
@@ -41,6 +44,7 @@ export function CfgStep({
     onContinue,
 }: {
     titleRef: Ref<HTMLHeadingElement>;
+    banner?: ReactNode;
     draft: LaunchSettings;
     /** The accepted folder's report, which lists the cfg files found in it. */
     folder: FolderReport | null;
@@ -52,7 +56,6 @@ export function CfgStep({
     onContinue: () => void;
 }) {
     const { t } = useI18n();
-    const id = useId();
     const words = t.serverSetup.cfg;
     const current =
         checked !== null &&
@@ -80,45 +83,175 @@ export function CfgStep({
             ? words.blocked
             : null;
 
+    const browser = words.browser;
+    const dataPath = draft.dataPath.trim();
+    const chosen = draft.cfgFile.trim();
+    const [previewed, setPreviewed] = useState(chosen);
+    const [focus, setFocus] = useState<number | null>(null);
+    const [onlyCfg, setOnlyCfg] = useState(true);
+    const [filter, setFilter] = useState('');
+    // The tree opens on the folders that hold the cfg files the folder check found.
+    const [expanded, setExpanded] = useState(() => foldersOf([...(folder?.cfgFiles ?? []), chosen]));
+    const toggle = (path: string) =>
+        setExpanded((open) => {
+            const next = new Set(open);
+            if (!next.delete(path)) {
+                next.add(path);
+            }
+            return next;
+        });
+    // A file the chosen cfg runs is only shown: FXServer starts from the first file of the chain.
+    const runByChosen = (path: string) =>
+        path !== chosen &&
+        (report?.files.some((file) => file.path === path && file.state === 'read') ?? false);
+    const open = (path: string) => {
+        setPreviewed(path);
+        setFocus(null);
+        if (!runByChosen(path)) {
+            onCfg(path);
+            check(path);
+        }
+    };
+    const runBy = previewed !== '' && runByChosen(previewed);
+
     return (
-        <Card id={id} icon={FileCog} title={t.serverSetup.stepNames.cfg} titleRef={titleRef}>
-            <div className="flex flex-col gap-5">
+        <StepPage
+            step="cfg"
+            titleRef={titleRef}
+            title={t.serverSetup.headings.cfg}
+            lead={words.lead}
+            banner={banner}
+            actions={
+                <StepActions onBack={onBack} note={note}>
+                    <Button icon={RefreshCw} pending={checking} onClick={() => check(draft.cfgFile)}>
+                        {words.checkAgain}
+                    </Button>
+                    <Button tone="ink" disabled={!passes || checking} onClick={onContinue}>
+                        {t.serverSetup.continue}
+                    </Button>
+                </StepActions>
+            }
+        >
+            <section aria-label={browser.label} className="card flex flex-col overflow-hidden">
+                <div className="flex flex-wrap items-center gap-2.5 border-b border-line px-3.5 py-3">
+                    <span className="flex min-w-0 items-center gap-1.5 font-mono text-small text-ink-3">
+                        <HardDrive size={14} strokeWidth={1.75} className="flex-none" aria-hidden="true" />
+                        <span className="truncate" title={dataPath}>
+                            {dataPath}
+                        </span>
+                    </span>
+                    <span className="flex-1" />
+                    <label className="flex h-8 w-56 items-center gap-2 rounded-sm border border-line-strong bg-bg-subtle px-2.5 max-md:w-full">
+                        <Search
+                            size={14}
+                            strokeWidth={1.75}
+                            className="flex-none text-ink-3"
+                            aria-hidden="true"
+                        />
+                        <span className="sr-only">{browser.filter}</span>
+                        <input
+                            type="search"
+                            placeholder={browser.filter}
+                            className="min-w-0 flex-1 bg-transparent text-ui text-ink outline-none placeholder:text-ink-3"
+                            value={filter}
+                            onChange={(event) => setFilter(event.target.value)}
+                        />
+                    </label>
+                    <label className="flex h-8 cursor-pointer items-center gap-2 text-ui text-ink-2">
+                        <Switch checked={onlyCfg} onChange={(event) => setOnlyCfg(event.target.checked)} />
+                        {browser.onlyCfg}
+                    </label>
+                </div>
+                <div className="flex min-h-130 flex-wrap items-stretch">
+                    <nav
+                        aria-label={browser.tree}
+                        className="max-h-160 min-w-0 flex-[1_1_220px] overflow-auto border-r border-line bg-bg-subtle p-2 max-md:max-h-80 max-md:border-r-0 max-md:border-b lg:max-w-75"
+                    >
+                        <FileTree
+                            dataPath={dataPath}
+                            chosen={chosen}
+                            previewed={previewed}
+                            expanded={expanded}
+                            onlyCfg={onlyCfg}
+                            filter={filter}
+                            onToggle={toggle}
+                            onOpen={open}
+                        />
+                    </nav>
+                    <div className="flex min-w-0 flex-[999_1_380px] flex-col">
+                        {previewed === '' ? (
+                            <p className="m-auto p-10 text-center text-body text-ink-3">{browser.pick}</p>
+                        ) : (
+                            <CfgPreview
+                                dataPath={dataPath}
+                                path={previewed}
+                                findings={report?.findings ?? []}
+                                focus={focus}
+                            />
+                        )}
+                    </div>
+                    <aside
+                        aria-label={browser.side}
+                        className={cn(
+                            'flex min-w-0 flex-[1_1_260px] flex-col gap-5 border-l border-line p-4 max-md:border-t max-md:border-l-0 lg:max-w-80',
+                            checking && 'opacity-50',
+                        )}
+                        aria-busy={checking || undefined}
+                    >
+                        {runBy && (
+                            <Notice tone="neutral" live={false}>
+                                <span className="flex flex-col items-start gap-2">
+                                    {browser.runBy(chosen)}
+                                    <Button size="sm" onClick={() => setPreviewed(chosen)}>
+                                        {browser.openMain(chosen)}
+                                    </Button>
+                                </span>
+                            </Notice>
+                        )}
+                        {report === null && checking && (
+                            <div className="flex flex-col gap-2.5" aria-busy="true">
+                                <span className="sr-only">{words.checking}</span>
+                                <span className="skeleton w-1/2" />
+                                <span className="skeleton w-2/3" />
+                                <span className="skeleton w-1/3" />
+                            </div>
+                        )}
+                        {report?.folder != null && (
+                            <Notice tone="danger">
+                                {words.folderRefused} {t.serverSetup.folder.problems[report.folder]}
+                            </Notice>
+                        )}
+                        {report !== null && report.folder === null && error !== undefined && (
+                            <Notice tone="danger">{error}</Notice>
+                        )}
+                        {report !== null && report.problem === null && report.folder === null && (
+                            <SidePanel
+                                report={report}
+                                onFile={(file) => {
+                                    setPreviewed(file);
+                                    setFocus(null);
+                                }}
+                                onFinding={(finding) => {
+                                    setPreviewed(finding.file);
+                                    setFocus(finding.line);
+                                }}
+                            />
+                        )}
+                    </aside>
+                </div>
+            </section>
+            <details className="group self-start">
+                <summary className="cursor-pointer list-none text-small font-medium text-ink-2 underline-offset-2 hover:underline [&::-webkit-details-marker]:hidden">
+                    {browser.typeInstead}
+                </summary>
                 <form
-                    className="flex max-w-2xl flex-col gap-4"
+                    className="mt-3 flex max-w-2xl flex-col gap-3"
                     noValidate
                     onSubmit={(event) => {
                         event.preventDefault();
-                        check(draft.cfgFile);
+                        open(draft.cfgFile.trim());
                     }}
                 >
-                    <p className="text-body text-ink-2">{words.lead}</p>
-                    {folder !== null && folder.cfgFiles.length > 0 && (
-                        <fieldset className="flex min-w-0 flex-col gap-0.5">
-                            <legend className="mb-1.5 text-ui font-medium text-ink">{words.found}</legend>
-                            {folder.cfgFiles.map((file) => (
-                                <label
-                                    key={file}
-                                    className="-mx-2 flex cursor-pointer items-center gap-2.5 rounded-sm px-2 py-1.5 hover:bg-hover max-md:min-h-11"
-                                >
-                                    <input
-                                        type="radio"
-                                        name="cfg"
-                                        value={file}
-                                        className="flex-none accent-[var(--btn-bg)]"
-                                        checked={draft.cfgFile.trim() === file}
-                                        onChange={() => {
-                                            onCfg(file);
-                                            check(file);
-                                        }}
-                                    />
-                                    <span className="min-w-0 font-mono text-ui text-ink [overflow-wrap:anywhere]">
-                                        {file}
-                                    </span>
-                                    {file === folder.detectedCfg && <Chip>{words.detected}</Chip>}
-                                </label>
-                            ))}
-                        </fieldset>
-                    )}
                     <PathField
                         label={words.label}
                         hint={words.hint}
@@ -127,41 +260,21 @@ export function CfgStep({
                         onChange={onCfg}
                     />
                 </form>
-                {report !== null && (
-                    <div
-                        className={cn('flex flex-col gap-5', checking && 'opacity-50')}
-                        aria-busy={checking || undefined}
-                    >
-                        {report.folder !== null && (
-                            <Notice tone="danger">
-                                {words.folderRefused} {t.serverSetup.folder.problems[report.folder]}
-                            </Notice>
-                        )}
-                        {report.problem === null && report.folder === null && <Report report={report} />}
-                    </div>
-                )}
-                {report === null && checking && (
-                    <div className="flex flex-col gap-3" aria-busy="true">
-                        <span className="sr-only">{words.checking}</span>
-                        <span className="skeleton w-1/2" />
-                        <span className="skeleton w-2/3" />
-                        <span className="skeleton w-1/3" />
-                    </div>
-                )}
-                <StepActions onBack={onBack} note={note}>
-                    <Button icon={RefreshCw} pending={checking} onClick={() => check(draft.cfgFile)}>
-                        {words.checkAgain}
-                    </Button>
-                    <Button tone="ink" disabled={!passes || checking} onClick={onContinue}>
-                        {t.serverSetup.continue}
-                    </Button>
-                </StepActions>
-            </div>
-        </Card>
+            </details>
+        </StepPage>
     );
 }
 
-function Report({ report }: { report: CfgReport }) {
+/** What the chosen cfg runs, sets and gets wrong, beside the tree; each file and finding opens in the preview. */
+function SidePanel({
+    report,
+    onFile,
+    onFinding,
+}: {
+    report: CfgReport;
+    onFile: (file: string) => void;
+    onFinding: (finding: CfgFinding) => void;
+}) {
     const { t } = useI18n();
     const words = t.serverSetup.cfg;
     // A file exec'd again each time is said once: run again.
@@ -172,53 +285,77 @@ function Report({ report }: { report: CfgReport }) {
     );
     return (
         <>
-            <div className="grid gap-5 lg:grid-cols-2">
-                {report.facts !== null && (
-                    <section className="flex min-w-0 flex-col gap-1.5">
-                        <h3 className="text-ui font-medium text-ink">{words.facts}</h3>
-                        <dl className="flex flex-col">
-                            <FactRows facts={report.facts} />
-                            <Fact label={words.onesync}>
-                                {report.facts.onesync === null
-                                    ? words.notSet
-                                    : t.server.onesyncModes[report.facts.onesync]}
-                            </Fact>
-                        </dl>
-                    </section>
-                )}
-                <section className="flex min-w-0 flex-col gap-1.5">
-                    <h3 className="text-ui font-medium text-ink">{words.files}</h3>
-                    <ul className="flex flex-col">
-                        {files.map((file) => (
-                            <li
-                                key={`${file.state}:${file.path}`}
-                                className="flex flex-wrap items-baseline justify-between gap-x-4 border-b border-line py-1.5 last:border-b-0"
-                            >
-                                <span className="min-w-0 font-mono text-small text-ink [overflow-wrap:anywhere]">
-                                    {file.path}
+            <section className="flex flex-col gap-2">
+                <h2 className="font-mono text-eyebrow tracking-[0.08em] text-ink-3 uppercase">
+                    {words.browser.chain}
+                </h2>
+                <ol className="flex flex-col gap-1">
+                    {files.map((file) => (
+                        <li key={`${file.state}:${file.path}`}>
+                            {file.state === 'read' ? (
+                                <button
+                                    type="button"
+                                    className="flex w-full items-center gap-2 rounded-xs py-0.5 text-left font-mono text-small text-ink-2 hover:text-ink"
+                                    onClick={() => onFile(file.path)}
+                                >
+                                    <CircleCheck
+                                        size={13}
+                                        strokeWidth={2}
+                                        className="flex-none text-success"
+                                        aria-hidden="true"
+                                    />
+                                    <span className="min-w-0 [overflow-wrap:anywhere]">{file.path}</span>
+                                </button>
+                            ) : (
+                                <span className="flex items-center gap-2 py-0.5 font-mono text-small text-ink-3">
+                                    <Info
+                                        size={13}
+                                        strokeWidth={2}
+                                        className="flex-none"
+                                        aria-hidden="true"
+                                    />
+                                    <span className="min-w-0 [overflow-wrap:anywhere]">
+                                        {file.path} · {words.fileStates[file.state]}
+                                    </span>
                                 </span>
-                                <span className="text-small text-ink-3">{words.fileStates[file.state]}</span>
-                            </li>
-                        ))}
-                    </ul>
+                            )}
+                        </li>
+                    ))}
+                </ol>
+            </section>
+            {report.facts !== null && (
+                <section className="flex flex-col gap-1">
+                    <h2 className="font-mono text-eyebrow tracking-[0.08em] text-ink-3 uppercase">
+                        {words.facts}
+                    </h2>
+                    <dl className="flex flex-col">
+                        <FactRows facts={report.facts} compact />
+                        <Fact compact label={words.onesync}>
+                            {report.facts.onesync === null
+                                ? words.notSet
+                                : t.server.onesyncModes[report.facts.onesync]}
+                        </Fact>
+                    </dl>
                 </section>
-            </div>
-            <Findings findings={report.findings} />
+            )}
+            <Findings findings={report.findings} onOpen={onFinding} />
         </>
     );
 }
 
 /** What the cfg sets, but its OneSync, which the start step's summary repeats. */
-export function FactRows({ facts }: { facts: CfgFacts }) {
+export function FactRows({ facts, compact = false }: { facts: CfgFacts; compact?: boolean }) {
     const { t, format } = useI18n();
     const words = t.serverSetup.cfg;
     return (
         <>
-            <Fact label={words.game}>
+            <Fact compact={compact} label={words.game}>
                 {facts.game === null ? words.defaultGame : words.games[facts.game]}
             </Fact>
-            <Fact label={words.hostname}>{facts.hostname ?? words.notSet}</Fact>
-            <Fact label={words.endpoints}>
+            <Fact compact={compact} label={words.hostname}>
+                {facts.hostname ?? words.notSet}
+            </Fact>
+            <Fact compact={compact} label={words.endpoints}>
                 {facts.endpoints.length === 0 ? (
                     words.none
                 ) : (
@@ -231,10 +368,12 @@ export function FactRows({ facts }: { facts: CfgFacts }) {
                     </span>
                 )}
             </Fact>
-            <Fact label={words.slots}>
+            <Fact compact={compact} label={words.slots}>
                 {facts.maxClients === null ? words.notSet : format.number(facts.maxClients)}
             </Fact>
-            <Fact label={words.licence}>{words.licences[facts.licence]}</Fact>
+            <Fact compact={compact} label={words.licence}>
+                {words.licences[facts.licence]}
+            </Fact>
         </>
     );
 }
@@ -251,7 +390,7 @@ const keyed = (findings: CfgFinding[]) => {
 };
 
 /** The findings grouped blocking, warning, note: each its severity, its sentence and where it is written. */
-function Findings({ findings }: { findings: CfgFinding[] }) {
+function Findings({ findings, onOpen }: { findings: CfgFinding[]; onOpen: (finding: CfgFinding) => void }) {
     const { t, format } = useI18n();
     const words = t.serverSetup.cfg;
     const groups = groupFindings(findings);
@@ -267,24 +406,30 @@ function Findings({ findings }: { findings: CfgFinding[] }) {
         <div className="flex flex-col gap-4">
             {groups.map(({ severity, findings: group }) => (
                 <section key={severity} className="flex flex-col gap-1.5">
-                    <h3 className="text-ui font-medium text-ink">{words.groups[severity](group.length)}</h3>
-                    <ul className="flex flex-col">
+                    <h3 className="font-mono text-eyebrow tracking-[0.08em] text-ink-3 uppercase">
+                        {words.groups[severity](group.length)}
+                    </h3>
+                    <ul className="flex flex-col gap-2">
                         {keyed(group).map(({ finding, key }) => (
                             <li
                                 key={key}
-                                className="flex flex-wrap items-baseline gap-x-3 gap-y-1 border-b border-line py-2 last:border-b-0"
+                                className="flex flex-col items-start gap-1.5 rounded-box border border-line bg-bg-subtle p-3"
                             >
                                 <Chip tone={SEVERITY[severity].tone} icon={SEVERITY[severity].icon}>
                                     {words.severities[severity]}
                                 </Chip>
-                                <span className="min-w-60 flex-1 text-body text-ink max-md:min-w-0 max-md:basis-full">
+                                <span className="text-small text-ink">
                                     {words.kinds[finding.kind](finding.params)}
                                 </span>
-                                <span className="font-mono text-small text-ink-3 [overflow-wrap:anywhere]">
+                                <button
+                                    type="button"
+                                    className="font-mono text-meta text-ink-3 underline-offset-2 [overflow-wrap:anywhere] hover:text-ink-2 hover:underline"
+                                    onClick={() => onOpen(finding)}
+                                >
                                     {finding.line === null
                                         ? finding.file
                                         : `${finding.file}:${format.number(finding.line, { useGrouping: false })}`}
-                                </span>
+                                </button>
                             </li>
                         ))}
                     </ul>
diff --git a/web/src/setup/Fact.tsx b/web/src/setup/Fact.tsx
index 1dc0b7fa..9c8d76aa 100644
--- a/web/src/setup/Fact.tsx
+++ b/web/src/setup/Fact.tsx
@@ -1,10 +1,28 @@
 import type { ReactNode } from 'react';
 
-/** A line of a `<dl>`: what it is, then its value, which wraps anywhere when it is a long path. */
-export function Fact({ label, children }: { label: string; children: ReactNode }) {
+import { cn } from '../lib/cn';
+
+/**
+ * A line of a `<dl>`: what it is, then its value, which wraps anywhere when it is a long path.
+ * `compact` puts the value under its label, for a narrow column.
+ */
+export function Fact({
+    label,
+    compact = false,
+    children,
+}: {
+    label: string;
+    compact?: boolean;
+    children: ReactNode;
+}) {
     return (
-        <div className="flex flex-wrap items-baseline gap-x-4 gap-y-0.5 border-b border-line py-1.5 last:border-b-0">
-            <dt className="w-32 flex-none text-ui text-ink-3">{label}</dt>
+        <div
+            className={cn(
+                'flex border-b border-line py-1.5 last:border-b-0',
+                compact ? 'flex-col gap-0.5' : 'flex-wrap items-baseline gap-x-4 gap-y-0.5',
+            )}
+        >
+            <dt className={cn('text-ui text-ink-3', !compact && 'w-32 flex-none')}>{label}</dt>
             <dd className="min-w-0 flex-1 text-body text-ink [overflow-wrap:anywhere]">{children}</dd>
         </div>
     );
diff --git a/web/src/setup/FirstLaunch.tsx b/web/src/setup/FirstLaunch.tsx
index d9ea667a..476d1bb4 100644
--- a/web/src/setup/FirstLaunch.tsx
+++ b/web/src/setup/FirstLaunch.tsx
@@ -1,12 +1,12 @@
 import { useQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
-import { ArrowRight, Rocket } from 'lucide-react';
-import { useId, useState } from 'react';
+import { ArrowLeft, ArrowRight, Check, LoaderCircle, OctagonX, SquareTerminal } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
 
 import type { LaunchSettings } from '../api/generated/LaunchSettings';
 import type { ServerStatus } from '../api/generated/ServerStatus';
 import { launchQuery } from '../api/launch';
-import { Card } from '../components/Card';
+import { Button, buttonVariants } from '../components/Button';
 import { Steps } from '../components/Steps';
 import { useI18n } from '../i18n/I18nProvider';
 import { cn } from '../lib/cn';
@@ -16,15 +16,17 @@ import { STATE_INK, STATE_LED, causeText } from '../server/state';
 import { LAUNCH_STEPS, checklist } from './state';
 
 /**
- * The launch the setup asked for, followed on `server.status` from the status before it. Once it
- * is ready or failed it stays as it ended: a restart after a crash is another launch.
+ * The launch the setup asked for, on a page of its own, followed on `server.status` from the
+ * status before it: each step ticks as it passes, and the page ends on the server online, or on
+ * what stopped it. Once it is ready or failed it stays as it ended: a restart after a crash is
+ * another launch.
  */
-export function FirstLaunch({ before }: { before: ServerStatus | null }) {
+export function FirstLaunch({ before, onBack }: { before: ServerStatus | null; onBack: () => void }) {
     const { t } = useI18n();
-    const id = useId();
     const words = t.serverSetup.launch;
     const { status: live } = useServerStatus();
     const launch = useQuery(launchQuery);
+    const title = useRef<HTMLHeadingElement>(null);
     // The settings are kept with the end too: a delay raised since is not the one that ran out.
     const [ended, setEnded] = useState<{ status: ServerStatus; settings: LaunchSettings | null } | null>(
         null,
@@ -35,6 +37,8 @@ export function FirstLaunch({ before }: { before: ServerStatus | null }) {
     if (ended === null && live !== null && list !== null && !list.waiting) {
         setEnded({ status: live, settings });
     }
+    const ready = list?.passed === LAUNCH_STEPS.length;
+    const failed = list?.failed != null;
     const current =
         list === null
             ? -1
@@ -43,49 +47,158 @@ export function FirstLaunch({ before }: { before: ServerStatus | null }) {
               : list.waiting
                 ? list.passed
                 : -1;
-    const cause =
-        status === null ? null : list?.passed === LAUNCH_STEPS.length ? words.ready : causeText(t, status);
+    const cause = status === null ? null : ready ? words.ready : causeText(t, status);
+    const name = status?.name ?? null;
+
+    // The keyboard comes with the page: the button that asked for the launch is gone.
+    useEffect(() => title.current?.focus(), []);
 
     return (
-        <Card id={id} icon={Rocket} title={words.title}>
-            <div className="flex flex-col gap-4">
-                <Steps
-                    label={words.title}
-                    steps={LAUNCH_STEPS.map((step, index) => ({
-                        key: step,
-                        label: words.steps[step],
-                        passed: list !== null && index < list.passed,
-                        failed: list?.failed === step,
-                    }))}
-                    current={current}
-                    busy={list?.waiting ?? false}
-                    said={t.serverSetup.said}
-                />
-                <output className="flex flex-wrap items-center gap-x-2.5 gap-y-1 text-body">
-                    {status === null ? (
-                        <span className="text-ink-3">{words.unknown}</span>
+        <div className="flex flex-1 justify-center px-8 pt-14 pb-16 max-md:px-4 max-md:pt-8 max-md:pb-10">
+            <div className="flex w-full max-w-220 flex-col gap-7">
+                <div className="flex flex-col items-center gap-4 text-center">
+                    <span
+                        className={cn(
+                            'grid size-16 place-items-center rounded-full',
+                            ready
+                                ? 'bg-success-soft text-success'
+                                : failed
+                                  ? 'bg-danger-soft text-danger-ink'
+                                  : 'bg-accent-soft text-accent-ink',
+                        )}
+                        aria-hidden="true"
+                    >
+                        {ready ? (
+                            <Check size={30} strokeWidth={2.5} />
+                        ) : failed ? (
+                            <OctagonX size={28} strokeWidth={2} />
+                        ) : (
+                            <LoaderCircle
+                                size={28}
+                                strokeWidth={2}
+                                className="animate-spin motion-reduce:animate-none"
+                            />
+                        )}
+                    </span>
+                    <h1
+                        ref={title}
+                        tabIndex={-1}
+                        className="text-[32px] leading-tight font-semibold tracking-[-0.02em] text-balance outline-none max-md:text-[26px]"
+                    >
+                        {ready ? words.online(name) : failed ? words.failed : words.starting}
+                    </h1>
+                    <output className="max-w-140 text-[15px] leading-relaxed text-ink-2">
+                        {status === null ? words.unknown : (cause ?? words.following)}
+                    </output>
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                    <section aria-label={words.checked} className="card flex flex-col gap-4 p-5 max-md:p-4">
+                        <h2 className="text-ui font-medium text-ink">{words.checked}</h2>
+                        <Steps
+                            label={words.title}
+                            steps={LAUNCH_STEPS.map((step, index) => ({
+                                key: step,
+                                label: words.steps[step],
+                                passed: list !== null && index < list.passed,
+                                failed: list?.failed === step,
+                            }))}
+                            current={current}
+                            busy={list?.waiting ?? false}
+                            said={t.serverSetup.said}
+                        />
+                        {status !== null && (
+                            <p className="flex flex-wrap items-center gap-x-2.5 gap-y-1 text-small">
+                                <span className={cn('led', STATE_LED[status.state])} aria-hidden="true" />
+                                <span className={cn('font-semibold', STATE_INK[status.state])}>
+                                    {t.server_state.states[status.state]}
+                                </span>
+                            </p>
+                        )}
+                        {status !== null && <HangAdvice status={status} settings={settings} />}
+                    </section>
+                    <section
+                        aria-label={words.consoleTitle}
+                        className="card flex flex-col gap-3 p-5 max-md:p-4"
+                    >
+                        <h2 className="flex items-center gap-2 text-ui font-medium text-ink">
+                            <SquareTerminal
+                                size={15}
+                                strokeWidth={1.75}
+                                className="text-ink-3"
+                                aria-hidden="true"
+                            />
+                            {words.consoleTitle}
+                        </h2>
+                        <p className="text-small text-ink-2">{words.console}</p>
+                        <Link
+                            to="/console"
+                            className="inline-flex items-center gap-1.5 self-start text-ui font-medium text-ink underline-offset-2 hover:underline max-md:min-h-11"
+                        >
+                            {words.openConsole}
+                            <ArrowRight size={14} strokeWidth={1.5} aria-hidden="true" />
+                        </Link>
+                    </section>
+                </div>
+
+                {ready && (
+                    <section className="flex flex-col gap-3">
+                        <h2 className="font-mono text-eyebrow tracking-[0.08em] text-ink-3 uppercase">
+                            {words.next}
+                        </h2>
+                        <ul className="grid grid-cols-1 gap-3 md:grid-cols-3">
+                            <li className="flex">
+                                <Link
+                                    to="/settings/$category"
+                                    params={{ category: 'restarts' }}
+                                    className="card flex flex-1 flex-col gap-1.5 p-4 transition-colors hover:bg-hover"
+                                >
+                                    <span className="text-body font-semibold text-ink">
+                                        {words.nextRestarts}
+                                    </span>
+                                    <span className="text-small text-ink-3">{words.nextRestartsAbout}</span>
+                                </Link>
+                            </li>
+                            <li className="flex">
+                                <Link
+                                    to="/settings/$category"
+                                    params={{ category: 'users' }}
+                                    className="card flex flex-1 flex-col gap-1.5 p-4 transition-colors hover:bg-hover"
+                                >
+                                    <span className="text-body font-semibold text-ink">
+                                        {words.nextStaff}
+                                    </span>
+                                    <span className="text-small text-ink-3">{words.nextStaffAbout}</span>
+                                </Link>
+                            </li>
+                            <li className="flex">
+                                <Link
+                                    to="/backups"
+                                    className="card flex flex-1 flex-col gap-1.5 p-4 transition-colors hover:bg-hover"
+                                >
+                                    <span className="text-body font-semibold text-ink">
+                                        {words.nextBackups}
+                                    </span>
+                                    <span className="text-small text-ink-3">{words.nextBackupsAbout}</span>
+                                </Link>
+                            </li>
+                        </ul>
+                    </section>
+                )}
+
+                <div className="flex flex-wrap justify-center gap-2.5 max-md:flex-col max-md:items-stretch">
+                    {failed ? (
+                        <Button tone="ink" icon={ArrowLeft} onClick={onBack}>
+                            {words.backToSettings}
+                        </Button>
                     ) : (
-                        <>
-                            <span className={cn('led', STATE_LED[status.state])} aria-hidden="true" />
-                            <span className={cn('font-semibold', STATE_INK[status.state])}>
-                                {t.server_state.states[status.state]}.
-                            </span>
-                            {cause !== null && <span className="text-ink-3">{cause}</span>}
-                        </>
+                        <Link to="/" className={cn(buttonVariants({ tone: ready ? 'ink' : 'secondary' }))}>
+                            {words.overview}
+                            <ArrowRight size={16} strokeWidth={2} aria-hidden="true" />
+                        </Link>
                     )}
-                </output>
-                {status !== null && <HangAdvice status={status} settings={settings} />}
-                <div className="flex flex-col items-start gap-2 text-small text-ink-2">
-                    <p>{words.console}</p>
-                    <Link
-                        to="/console"
-                        className="inline-flex items-center gap-1.5 font-medium text-ink underline-offset-2 hover:underline max-md:min-h-11"
-                    >
-                        {words.openConsole}
-                        <ArrowRight size={14} strokeWidth={1.5} aria-hidden="true" />
-                    </Link>
                 </div>
             </div>
-        </Card>
+        </div>
     );
 }
diff --git a/web/src/setup/FolderBrowser.tsx b/web/src/setup/FolderBrowser.tsx
index 93ae0fd5..8e3c96ab 100644
--- a/web/src/setup/FolderBrowser.tsx
+++ b/web/src/setup/FolderBrowser.tsx
@@ -1,21 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
-import {
-    ChevronRight,
-    ChevronUp,
-    CircleCheck,
-    CircleX,
-    Folder,
-    HardDrive,
-    House,
-    LoaderCircle,
-    Lock,
-    Search,
-    TriangleAlert,
-} from 'lucide-react';
+import { ChevronRight, ChevronUp, Folder, HardDrive, House, LoaderCircle, Lock, Search } from 'lucide-react';
 import { useId, useState } from 'react';
 
 import type { FolderEntry } from '../api/generated/FolderEntry';
-import type { FolderReport } from '../api/generated/FolderReport';
 import type { FoundServer } from '../api/generated/FoundServer';
 import type { Place } from '../api/generated/Place';
 import { folderCheckQuery, folderQuery } from '../api/serverSetup';
@@ -26,6 +13,7 @@ import { Notice } from '../components/Notice';
 import { errorMessage } from '../i18n/errors';
 import { useI18n } from '../i18n/I18nProvider';
 import { cn } from '../lib/cn';
+import { FolderVerdict } from './FolderVerdict';
 import { crumbs, folderName, intoFolder } from './paths';
 
 /** Where a path is listed and checked from: without its last separator, but for a root's. */
@@ -278,12 +266,7 @@ function Row({
     const readable = entry.kind !== 'unreadable';
     const Icon = readable ? Folder : Lock;
     return (
-        <li
-            className={cn(
-                'flex items-center gap-1 rounded-sm pr-1',
-                selected && 'bg-accent-soft shadow-[inset_2px_0_0_var(--accent)]',
-            )}
-        >
+        <li className={cn('flex items-center gap-1 rounded-sm pr-1', selected && 'bg-accent-soft')}>
             <button
                 type="button"
                 aria-pressed={selected}
@@ -373,7 +356,15 @@ function Preview({
                     </p>
                 )}
                 {check.isError && <Notice tone="danger">{errorMessage(t, check.error)}</Notice>}
-                {report !== undefined && <Verdict report={report} onGo={onGo} />}
+                {report !== undefined && (
+                    <FolderVerdict
+                        report={report}
+                        suggestionLabel={words.browser.showSuggestion}
+                        onSuggestion={(suggestion) =>
+                            onGo(crumbs(suggestion).at(-2)?.path ?? suggestion, suggestion)
+                        }
+                    />
+                )}
             </div>
             <Button
                 tone="ink"
@@ -387,104 +378,3 @@ function Preview({
         </aside>
     );
 }
-
-function Verdict({
-    report,
-    onGo,
-}: {
-    report: FolderReport;
-    onGo: (path: string, select?: string | null) => void;
-}) {
-    const { t, format } = useI18n();
-    const words = t.serverSetup.folder;
-    const resources = report.resources;
-    if (report.problem !== null || resources === null) {
-        const problem = report.problem ?? 'noResources';
-        const suggestion = report.suggestion;
-        return (
-            <>
-                <p className="flex items-start gap-2 text-body text-ink-2">
-                    <CircleX
-                        size={16}
-                        strokeWidth={1.5}
-                        className="mt-0.5 flex-none text-ink-3"
-                        aria-hidden="true"
-                    />
-                    {problem === 'invalidPath' && report.pathProblem !== null
-                        ? t.server.problems[report.pathProblem]
-                        : words.problems[problem]}
-                </p>
-                {suggestion !== null && (
-                    <div className="flex flex-col items-start gap-2">
-                        <p className="text-small text-ink-2">
-                            {words.suggestion}{' '}
-                            <span className="font-mono text-ink [overflow-wrap:anywhere]">{suggestion}</span>
-                        </p>
-                        <Button
-                            size="sm"
-                            onClick={() => onGo(crumbs(suggestion).at(-2)?.path ?? suggestion, suggestion)}
-                        >
-                            {words.browser.showSuggestion}
-                        </Button>
-                    </div>
-                )}
-            </>
-        );
-    }
-    const detected = report.detectedCfg;
-    return (
-        <>
-            <p className="flex items-center gap-2 text-body font-medium text-success">
-                <CircleCheck size={16} strokeWidth={1.5} className="flex-none" aria-hidden="true" />
-                {words.browser.isServer}
-            </p>
-            <dl className="grid grid-cols-2 gap-3">
-                <div className="rounded-box border border-line bg-surface p-3">
-                    <dt className="eyebrow">{words.browser.resources}</dt>
-                    <dd className="text-figure-sm text-ink tabular-nums">
-                        {format.number(resources.resources)}
-                    </dd>
-                    <dd className="text-small text-ink-3">
-                        {words.browser.inCategories(resources.categories)}
-                    </dd>
-                </div>
-                <div className="rounded-box border border-line bg-surface p-3">
-                    <dt className="eyebrow">{words.browser.cfgCount}</dt>
-                    <dd className="text-figure-sm text-ink tabular-nums">
-                        {format.number(report.cfgFiles.length)}
-                    </dd>
-                    {detected !== null && (
-                        <dd className="text-small text-ink-3 [overflow-wrap:anywhere]">
-                            {words.browser.cfgFirst(detected)}
-                        </dd>
-                    )}
-                </div>
-            </dl>
-            {report.cfgFiles.length > 0 && (
-                <ul className="flex flex-wrap gap-1.5" aria-label={words.cfgFiles}>
-                    {report.cfgFiles.map((file) => (
-                        <li
-                            key={file}
-                            className="rounded-xs border border-line bg-surface-2 px-1.5 py-0.5 font-mono text-small text-ink-2 [overflow-wrap:anywhere]"
-                        >
-                            {file}
-                        </li>
-                    ))}
-                </ul>
-            )}
-            {resources.withoutManifest.length > 0 && (
-                <p className="flex items-start gap-2 text-small text-warning">
-                    <TriangleAlert
-                        size={14}
-                        strokeWidth={1.5}
-                        className="mt-0.5 flex-none"
-                        aria-hidden="true"
-                    />
-                    <span className="[overflow-wrap:anywhere]">
-                        {words.withoutManifest(resources.withoutManifest)}
-                    </span>
-                </p>
-            )}
-        </>
-    );
-}
diff --git a/web/src/setup/FolderField.tsx b/web/src/setup/FolderField.tsx
index 3fc9872c..82b150ef 100644
--- a/web/src/setup/FolderField.tsx
+++ b/web/src/setup/FolderField.tsx
@@ -250,7 +250,7 @@ function Option({
             className={cn(
                 'flex flex-wrap items-center gap-x-2.5 gap-y-0.5 rounded-sm px-2.5 py-2 max-md:min-h-11',
                 enabled ? 'cursor-pointer' : 'cursor-not-allowed text-ink-3',
-                active && 'bg-accent-soft shadow-[inset_2px_0_0_var(--accent)]',
+                active && 'bg-accent-soft',
             )}
             // The field keeps the keyboard: a press on an option must not blur it first.
             onMouseDown={(event) => event.preventDefault()}
diff --git a/web/src/setup/FolderStep.tsx b/web/src/setup/FolderStep.tsx
index c847db94..8a056243 100644
--- a/web/src/setup/FolderStep.tsx
+++ b/web/src/setup/FolderStep.tsx
@@ -1,16 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
-import {
-    ArrowLeft,
-    Check,
-    ChevronDown,
-    CircleCheck,
-    FolderOpen,
-    FolderSearch,
-    RotateCw,
-    Server,
-    TriangleAlert,
-} from 'lucide-react';
-import { useEffect, useId, useRef, useState, type Ref } from 'react';
+import { ArrowLeft, Check, FolderOpen, LoaderCircle, RotateCw, Server, TriangleAlert } from 'lucide-react';
+import { useEffect, useRef, useState, type ReactNode, type Ref } from 'react';
 
 import type { FolderCheck } from '../api/generated/FolderCheck';
 import type { FolderReport } from '../api/generated/FolderReport';
@@ -25,16 +15,21 @@ import { useI18n } from '../i18n/I18nProvider';
 import { cn } from '../lib/cn';
 import { FolderBrowser } from './FolderBrowser';
 import { FolderField } from './FolderField';
+import { FolderVerdict } from './FolderVerdict';
 import { crumbs, folderName } from './paths';
 import type { Checked } from './state';
 import { StepActions } from './StepActions';
+import { StepPage } from './StepPage';
 
 /**
  * The server folder: one of those Observer found on the host, a path typed with the host's folders
- * offered as it goes, or a folder picked in the browser. Continue checks it first when it was not.
+ * offered as it goes, or a folder picked in the browser. A server found is checked once picked and
+ * the folder the step opens on at once, for the verdict to show before Continue; a path typed is
+ * checked once chosen, and Continue checks the folder first when it was not.
  */
 export function FolderStep({
     titleRef,
+    banner,
     draft,
     checked,
     checking,
@@ -43,6 +38,7 @@ export function FolderStep({
     onContinue,
 }: {
     titleRef: Ref<HTMLHeadingElement>;
+    banner?: ReactNode;
     draft: LaunchSettings;
     checked: Checked<FolderCheck, FolderReport> | null;
     checking: boolean;
@@ -53,13 +49,11 @@ export function FolderStep({
 }) {
     const { t } = useI18n();
     const words = t.serverSetup.folder;
-    const headingId = useId();
     const discovery = useQuery(discoveryQuery);
     const servers = discovery.data?.servers ?? [];
     const path = draft.dataPath.trim();
     const picked = servers.find((server) => server.path === path) ?? null;
     const [browsing, setBrowsing] = useState(false);
-    const [elsewhere, setElsewhere] = useState<boolean | null>(null);
     const report = checked !== null && checked.request.dataPath === path ? checked.report : null;
 
     // With no folder yet, the first server found is offered as the one to run.
@@ -72,11 +66,16 @@ export function FolderStep({
         }
     }, [discovery.data, draft.dataPath, onPath]);
 
-    // Open until the owner closes it: when nothing was found, or the folder is none of those found.
-    const open =
-        elsewhere ??
-        (discovery.isError ||
-            (discovery.isSuccess && (servers.length === 0 || (path !== '' && picked === null))));
+    const [openedOn] = useState(path);
+    const toCheck = picked?.path ?? (path !== '' && path === openedOn ? path : null);
+    const checkedLast = useRef<string | null>(null);
+    useEffect(() => {
+        if (toCheck !== null && report === null && checkedLast.current !== toCheck) {
+            checkedLast.current = toCheck;
+            onCheck(toCheck, false);
+        }
+    }, [toCheck, report, onCheck, checkedLast]);
+
     const problem = report?.problem ?? null;
     const refusal =
         problem === null
@@ -84,6 +83,8 @@ export function FolderStep({
             : problem === 'invalidPath' && report?.pathProblem != null
               ? t.server.problems[report.pathProblem]
               : words.problems[problem];
+    // A path typed has its refusal under the field: the verdict then has only a folder nearby to offer.
+    const verdict = report !== null && (problem === null || picked !== null || report.suggestion !== null);
     const lead = discovery.isPending
         ? words.searching
         : discovery.isSuccess
@@ -98,34 +99,39 @@ export function FolderStep({
               '/');
 
     return (
-        <section aria-labelledby={headingId} className="flex flex-col gap-4.5">
-            <div className="flex flex-wrap items-start justify-between gap-3">
-                <div className="flex min-w-0 flex-[1_1_320px] flex-col gap-1.5">
-                    <h2
-                        id={headingId}
-                        ref={titleRef}
-                        tabIndex={-1}
-                        className="text-state text-ink outline-none"
-                    >
-                        {words.question}
-                    </h2>
-                    <output className="text-body text-ink-2">{lead}</output>
-                </div>
-                {browsing && (
-                    <Button
-                        size="sm"
-                        tone="ghost"
-                        icon={ArrowLeft}
-                        onClick={() => {
-                            setBrowsing(false);
-                            setElsewhere(true);
-                        }}
-                    >
-                        {words.browser.typeInstead}
-                    </Button>
-                )}
-            </div>
-
+        <StepPage
+            step="folder"
+            titleRef={titleRef}
+            title={t.serverSetup.headings.folder}
+            lead={<output>{lead}</output>}
+            banner={banner}
+            actions={
+                browsing ? (
+                    // The browser's own button takes the folder it shows.
+                    <StepActions>
+                        <Button tone="ghost" icon={ArrowLeft} onClick={() => setBrowsing(false)}>
+                            {words.browser.typeInstead}
+                        </Button>
+                    </StepActions>
+                ) : (
+                    <StepActions>
+                        <Button
+                            tone="ghost"
+                            icon={RotateCw}
+                            pending={discovery.isFetching}
+                            onClick={() => void discovery.refetch()}
+                        >
+                            {words.rescan}
+                        </Button>
+                        <Button tone="ink" disabled={path === ''} pending={checking} onClick={onContinue}>
+                            {picked === null
+                                ? t.serverSetup.continue
+                                : words.continueWith(folderName(picked.path))}
+                        </Button>
+                    </StepActions>
+                )
+            }
+        >
             {browsing ? (
                 <FolderBrowser
                     start={start}
@@ -140,9 +146,9 @@ export function FolderStep({
                     }}
                 />
             ) : (
-                <>
+                <div className="flex max-w-250 flex-col gap-7 max-md:gap-5">
                     {discovery.isPending && (
-                        <div className="grid grid-cols-[repeat(auto-fill,minmax(min(100%,18rem),1fr))] gap-3">
+                        <div className="grid gap-3 md:grid-cols-2">
                             {[0, 1].map((index) => (
                                 <div key={index} className="card flex flex-col gap-3 p-4.5">
                                     <span className="skeleton w-1/3" />
@@ -156,93 +162,70 @@ export function FolderStep({
                         <Notice tone="danger">{words.searchFailed(errorMessage(t, discovery.error))}</Notice>
                     )}
                     {servers.length > 0 && (
-                        <ul
-                            aria-label={words.servers}
-                            className="grid grid-cols-[repeat(auto-fill,minmax(min(100%,18rem),1fr))] gap-3"
-                        >
-                            {servers.map((server) => (
-                                <li key={server.path} className="flex">
-                                    <ServerCard
-                                        server={server}
-                                        selected={server === picked}
-                                        onPick={() => onPath(server.path)}
-                                    />
-                                </li>
-                            ))}
-                        </ul>
+                        <section className="flex flex-col gap-3">
+                            <h2 className="eyebrow">{words.foundHere}</h2>
+                            <ul aria-label={words.servers} className="grid gap-3 md:grid-cols-2">
+                                {servers.map((server) => (
+                                    <li key={server.path} className="flex">
+                                        <ServerCard
+                                            server={server}
+                                            selected={server === picked}
+                                            onPick={() => onPath(server.path)}
+                                        />
+                                    </li>
+                                ))}
+                            </ul>
+                        </section>
                     )}
                     {picked?.portHolder != null && picked.port !== null && (
                         <Notice tone="warning" live={false}>
                             {words.portTaken(picked.port, picked.portHolder, picked.txAdmin)}
                         </Notice>
                     )}
-                    {picked !== null && refusal !== undefined && <Notice tone="danger">{refusal}</Notice>}
-
-                    <details
-                        className="card group"
-                        open={open}
-                        onToggle={(event) => setElsewhere(event.currentTarget.open)}
-                    >
-                        <summary className="flex cursor-pointer list-none items-center gap-2.5 rounded-card px-4.5 py-3.5 text-body font-medium text-ink max-md:min-h-11 [&::-webkit-details-marker]:hidden">
-                            <FolderSearch
-                                size={14}
-                                strokeWidth={1.5}
-                                className="text-ink-3"
-                                aria-hidden="true"
-                            />
-                            {words.elsewhere}
-                            <ChevronDown
-                                size={14}
-                                strokeWidth={1.5}
-                                className="ml-auto text-ink-3 transition-transform group-open:rotate-180 motion-reduce:transition-none"
-                                aria-hidden="true"
-                            />
-                        </summary>
-                        <div className="flex flex-col gap-4 px-4.5 pb-4.5">
-                            <FolderField
-                                value={draft.dataPath}
-                                error={picked === null ? refusal : undefined}
-                                onChange={onPath}
-                                onChoose={(folder) => onCheck(folder, false)}
-                                beside={
-                                    <Button icon={FolderOpen} onClick={() => setBrowsing(true)}>
-                                        {words.browse}
-                                    </Button>
-                                }
-                            />
-                            {picked === null && report !== null && (
-                                <Outcome
-                                    report={report}
-                                    onUse={(folder) => {
-                                        onPath(folder);
-                                        onCheck(folder, false);
-                                    }}
-                                />
-                            )}
-                        </div>
-                    </details>
-                </>
-            )}
-
-            {/* The browser's own button takes the folder it shows. */}
-            {!browsing && (
-                <StepActions note={words.lead}>
-                    <Button
-                        tone="ghost"
-                        icon={RotateCw}
-                        pending={discovery.isFetching}
-                        onClick={() => void discovery.refetch()}
-                    >
-                        {words.rescan}
-                    </Button>
-                    <Button tone="ink" disabled={path === ''} pending={checking} onClick={onContinue}>
-                        {picked === null
-                            ? t.serverSetup.continue
-                            : words.continueWith(folderName(picked.path))}
-                    </Button>
-                </StepActions>
+                    <section className="flex flex-col gap-3">
+                        {servers.length > 0 && <h2 className="eyebrow">{words.elsewhere}</h2>}
+                        <FolderField
+                            value={draft.dataPath}
+                            error={picked === null ? refusal : undefined}
+                            onChange={onPath}
+                            onChoose={(folder) => onCheck(folder, false)}
+                            beside={
+                                <Button icon={FolderOpen} onClick={() => setBrowsing(true)}>
+                                    {words.browse}
+                                </Button>
+                            }
+                        />
+                    </section>
+                    <div aria-live="polite" className="empty:hidden">
+                        {path !== '' && (verdict || (checking && report === null)) && (
+                            <div className="card flex flex-col gap-4 p-5 max-md:p-4">
+                                {report === null ? (
+                                    <span className="flex items-center gap-2 text-small text-ink-3">
+                                        <LoaderCircle
+                                            size={14}
+                                            strokeWidth={1.5}
+                                            className="animate-spin"
+                                            aria-hidden="true"
+                                        />
+                                        {words.browser.checking}
+                                    </span>
+                                ) : (
+                                    <FolderVerdict
+                                        report={report}
+                                        problemShown={picked === null}
+                                        suggestionLabel={words.useSuggestion}
+                                        onSuggestion={(folder) => {
+                                            onPath(folder);
+                                            onCheck(folder, false);
+                                        }}
+                                    />
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </div>
             )}
-        </section>
+        </StepPage>
     );
 }
 
@@ -263,105 +246,47 @@ function ServerCard({
             type="button"
             aria-pressed={selected}
             className={cn(
-                'card flex w-full flex-col gap-3 p-4.5 text-left transition-[border-color,box-shadow] hover:border-line-strong motion-reduce:transition-none',
+                'card flex w-full flex-col gap-3.5 p-4.5 text-left transition-[border-color,box-shadow] hover:border-line-strong motion-reduce:transition-none',
                 selected && 'border-accent ring-3 ring-focus-ring hover:border-accent',
             )}
             onClick={onPick}
         >
-            <span className="flex w-full items-center gap-2.5">
-                <span className="grid size-7 flex-none place-items-center rounded-sm bg-surface-2 text-ink-2">
-                    <Server size={14} strokeWidth={1.5} aria-hidden="true" />
+            <span className="flex w-full items-center gap-3">
+                <span
+                    className={cn(
+                        'grid size-9 flex-none place-items-center rounded-control',
+                        selected ? 'bg-accent-soft text-accent-ink' : 'bg-surface-2 text-ink-2',
+                    )}
+                >
+                    <Server size={18} strokeWidth={1.5} aria-hidden="true" />
+                </span>
+                <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+                    <b className="truncate text-card text-ink">{folderName(server.path)}</b>
+                    <span className="font-mono text-meta text-ink-3 [overflow-wrap:anywhere]">
+                        {server.path}
+                    </span>
                 </span>
-                <b className="min-w-0 truncate text-card text-ink">{folderName(server.path)}</b>
                 {selected && (
-                    <span className="ml-auto inline-flex flex-none items-center gap-1.5 text-small text-accent-ink">
-                        <Check size={14} strokeWidth={1.75} aria-hidden="true" />
+                    <span className="inline-flex h-6 flex-none items-center gap-1.5 self-start rounded-pill bg-accent px-2.5 text-meta font-semibold text-on-accent">
+                        <Check size={12} strokeWidth={3} aria-hidden="true" />
                         {words.selected}
                     </span>
                 )}
             </span>
-            <span className="font-mono text-meta text-ink-3 [overflow-wrap:anywhere]">{server.path}</span>
             <span className="flex flex-wrap gap-1.5">
                 <Chip>{words.resourceCount(server.resources, server.resourcesTruncated)}</Chip>
                 {server.cfg !== null && <Chip className="font-mono">{server.cfg}</Chip>}
+                {server.port !== null &&
+                    (server.portHolder === null ? (
+                        <Chip>{words.port(server.port)}</Chip>
+                    ) : (
+                        <Chip tone="warning" icon={TriangleAlert}>
+                            {words.portInUse(server.port, server.portHolder.program)}
+                        </Chip>
+                    ))}
                 {server.onesync !== null && <Chip>{words.onesync[server.onesync]}</Chip>}
-                {server.txAdmin && <Chip>{words.usedByTxAdmin}</Chip>}
-                {server.portHolder !== null && server.port !== null && (
-                    <Chip tone="warning" icon={TriangleAlert}>
-                        {words.portInUse(server.port)}
-                    </Chip>
-                )}
+                {server.txAdmin && <Chip tone="accent">{words.usedByTxAdmin}</Chip>}
             </span>
         </button>
     );
 }
-
-/** What the folder check said of a path typed: why it is refused and a folder nearby, or what it holds. */
-function Outcome({ report, onUse }: { report: FolderReport; onUse: (path: string) => void }) {
-    const { t } = useI18n();
-    const words = t.serverSetup.folder;
-    const resources = report.resources;
-    const suggestion = report.suggestion;
-    if (suggestion !== null) {
-        return (
-            <div className="flex flex-col items-start gap-2">
-                <p className="text-small text-ink-2">
-                    {words.suggestion}{' '}
-                    <span className="font-mono text-ink [overflow-wrap:anywhere]">{suggestion}</span>
-                </p>
-                <Button
-                    size="sm"
-                    icon={FolderSearch}
-                    className="max-md:w-full"
-                    onClick={() => onUse(suggestion)}
-                >
-                    {words.useSuggestion}
-                </Button>
-            </div>
-        );
-    }
-    if (report.problem !== null || resources === null) {
-        return null;
-    }
-    return (
-        <output className="flex flex-col gap-3">
-            <p className="flex items-center gap-2 text-body font-medium text-success">
-                <CircleCheck size={16} strokeWidth={1.5} className="flex-none" aria-hidden="true" />
-                {words.accepted}
-            </p>
-            <p className="text-body text-ink-2">
-                {words.resources(resources.resources, resources.categories, resources.truncated)}
-            </p>
-            {resources.withoutManifest.length > 0 && (
-                <p className="flex items-start gap-2 text-small text-warning">
-                    <TriangleAlert
-                        size={14}
-                        strokeWidth={1.5}
-                        className="mt-0.5 flex-none"
-                        aria-hidden="true"
-                    />
-                    <span className="[overflow-wrap:anywhere]">
-                        {words.withoutManifest(resources.withoutManifest)}
-                    </span>
-                </p>
-            )}
-            {report.cfgFiles.length === 0 ? (
-                <p className="text-small text-ink-3">{words.noCfgFile}</p>
-            ) : (
-                <div className="flex flex-col gap-1.5">
-                    <p className="text-ui font-medium text-ink">{words.cfgFiles}</p>
-                    <ul className="flex flex-wrap gap-1.5">
-                        {report.cfgFiles.map((file) => (
-                            <li
-                                key={file}
-                                className="rounded-xs border border-line bg-surface-2 px-1.5 py-0.5 font-mono text-small text-ink-2 [overflow-wrap:anywhere]"
-                            >
-                                {file}
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-            )}
-        </output>
-    );
-}
diff --git a/web/src/setup/FolderVerdict.tsx b/web/src/setup/FolderVerdict.tsx
new file mode 100644
index 00000000..bf70980c
--- /dev/null
+++ b/web/src/setup/FolderVerdict.tsx
@@ -0,0 +1,129 @@
+import { Check, CircleX, FolderSearch, TriangleAlert } from 'lucide-react';
+
+import type { FolderReport } from '../api/generated/FolderReport';
+import { Button } from '../components/Button';
+import { useI18n } from '../i18n/I18nProvider';
+
+/**
+ * What the folder check found: what FXServer will run from the folder, or why it cannot and a
+ * folder nearby that can. `problemShown`: something beside it says why already.
+ */
+export function FolderVerdict({
+    report,
+    problemShown = false,
+    suggestionLabel,
+    onSuggestion,
+}: {
+    report: FolderReport;
+    problemShown?: boolean;
+    suggestionLabel: string;
+    onSuggestion: (path: string) => void;
+}) {
+    const { t, format } = useI18n();
+    const words = t.serverSetup.folder;
+    const resources = report.resources;
+    if (report.problem !== null || resources === null) {
+        const problem = report.problem ?? 'noResources';
+        const suggestion = report.suggestion;
+        return (
+            <>
+                {!problemShown && (
+                    <p className="flex items-start gap-2 text-body text-ink-2">
+                        <CircleX
+                            size={16}
+                            strokeWidth={1.5}
+                            className="mt-0.5 flex-none text-ink-3"
+                            aria-hidden="true"
+                        />
+                        {problem === 'invalidPath' && report.pathProblem !== null
+                            ? t.server.problems[report.pathProblem]
+                            : words.problems[problem]}
+                    </p>
+                )}
+                {suggestion !== null && (
+                    <div className="flex flex-col items-start gap-2">
+                        <p className="text-small text-ink-2">
+                            {words.suggestion}{' '}
+                            <span className="font-mono text-ink [overflow-wrap:anywhere]">{suggestion}</span>
+                        </p>
+                        <Button
+                            size="sm"
+                            icon={FolderSearch}
+                            className="max-md:w-full"
+                            onClick={() => onSuggestion(suggestion)}
+                        >
+                            {suggestionLabel}
+                        </Button>
+                    </div>
+                )}
+            </>
+        );
+    }
+    const detected = report.detectedCfg;
+    const skipped = resources.withoutManifest;
+    return (
+        <>
+            <p className="flex items-center gap-2.5 text-card font-semibold text-ink">
+                <span className="grid size-6.5 flex-none place-items-center rounded-full bg-success-soft text-success">
+                    <Check size={14} strokeWidth={2.5} aria-hidden="true" />
+                </span>
+                {words.accepted}
+            </p>
+            <div className="@container">
+                <dl className="grid grid-cols-2 gap-3 @xl:grid-cols-3">
+                    <Figure
+                        label={words.browser.resources}
+                        value={`${format.number(resources.resources)}${resources.truncated ? '+' : ''}`}
+                        detail={words.browser.inCategories(resources.categories)}
+                    />
+                    <Figure
+                        label={words.browser.cfgCount}
+                        value={format.number(report.cfgFiles.length)}
+                        detail={detected === null ? words.noCfgFile : words.browser.cfgFirst(detected)}
+                    />
+                    {skipped.length > 0 && (
+                        <Figure
+                            label={words.withoutManifestCount}
+                            value={format.number(skipped.length)}
+                            detail={words.skipped}
+                        />
+                    )}
+                </dl>
+            </div>
+            {resources.truncated && <p className="text-small text-ink-3">{words.countStopped}</p>}
+            {skipped.length > 0 && (
+                <p className="flex items-start gap-2 text-small text-warning">
+                    <TriangleAlert
+                        size={14}
+                        strokeWidth={1.5}
+                        className="mt-0.5 flex-none"
+                        aria-hidden="true"
+                    />
+                    <span className="[overflow-wrap:anywhere]">{words.withoutManifest(skipped)}</span>
+                </p>
+            )}
+            {report.cfgFiles.length > 0 && (
+                <ul className="flex flex-wrap gap-1.5" aria-label={words.cfgFiles}>
+                    {report.cfgFiles.map((file) => (
+                        <li
+                            key={file}
+                            className="rounded-xs border border-line bg-surface-2 px-1.5 py-0.5 font-mono text-small text-ink-2 [overflow-wrap:anywhere]"
+                        >
+                            {file}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </>
+    );
+}
+
+function Figure({ label, value, detail }: { label: string; value: string; detail: string }) {
+    return (
+        <div className="flex flex-col gap-1 rounded-box border border-line p-3">
+            <dt className="eyebrow">{label}</dt>
+            <dd className="text-figure-sm text-ink tabular-nums">{value}</dd>
+            <dd className="text-small text-ink-3 [overflow-wrap:anywhere]">{detail}</dd>
+        </div>
+    );
+}
diff --git a/web/src/setup/SetupLayout.tsx b/web/src/setup/SetupLayout.tsx
new file mode 100644
index 00000000..4edb5899
--- /dev/null
+++ b/web/src/setup/SetupLayout.tsx
@@ -0,0 +1,85 @@
+import { Link } from '@tanstack/react-router';
+import { ShieldCheck } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+import { buttonVariants } from '../components/Button';
+import { PlainHttpNotice } from '../components/PlainHttpNotice';
+import { useI18n } from '../i18n/I18nProvider';
+import { Logo } from '../shell/Logo';
+import { SETUP_STEPS, type SetupStep } from './state';
+import { StepRail } from './StepRail';
+
+/**
+ * The setup on the whole screen: its head with the step and the way out, the steps down the side
+ * with what each one chose, and the step itself. Narrower, the side gives way to the step's own
+ * progress line.
+ */
+export function SetupLayout({
+    current,
+    chosen,
+    saved,
+    children,
+}: {
+    /** The step shown, or the first launch once the settings are saved. */
+    current: SetupStep | 'launch';
+    /** What each passed step chose, as the side recalls it. */
+    chosen: Partial<Record<SetupStep, string>>;
+    /** Whether launch settings were saved before: leaving goes back to the panel, else to them. */
+    saved: boolean;
+    children: ReactNode;
+}) {
+    const { t, format } = useI18n();
+    const words = t.serverSetup;
+    const index = current === 'launch' ? SETUP_STEPS.length : SETUP_STEPS.indexOf(current);
+    return (
+        <div className="flex min-h-dvh flex-col bg-bg text-ink">
+            <a className="skip" href="#content">
+                {t.app.skipToContent}
+            </a>
+            <header className="sticky top-0 z-(--z-rail) flex h-16 flex-none items-center gap-3.5 border-b border-line bg-bg px-7 max-md:px-4">
+                <Logo />
+                <span className="h-5 w-px bg-line-strong max-md:hidden" aria-hidden="true" />
+                <span className="text-ui text-ink-2 max-md:hidden">{words.title}</span>
+                <span className="flex-1" />
+                <span className="font-mono text-meta tracking-[0.04em] text-ink-3 uppercase max-lg:hidden">
+                    {current === 'launch'
+                        ? words.launch.title
+                        : words.stepCount(format.number(index + 1), format.number(SETUP_STEPS.length))}
+                </span>
+                {saved ? (
+                    <Link to="/" className={buttonVariants({ tone: 'secondary', size: 'sm' })}>
+                        {words.leave}
+                    </Link>
+                ) : (
+                    <Link
+                        to="/settings/$category"
+                        params={{ category: 'launch' }}
+                        className={buttonVariants({ tone: 'secondary', size: 'sm' })}
+                    >
+                        {words.later}
+                    </Link>
+                )}
+            </header>
+            <div className="flex flex-1 items-stretch">
+                <aside className="flex w-75 flex-none flex-col gap-6 border-r border-line px-5 py-8 max-lg:hidden">
+                    <StepRail current={index} chosen={chosen} />
+                    <p className="mt-auto flex gap-2.5 rounded-box border border-line bg-bg-subtle p-3.5 text-small text-ink-3">
+                        <ShieldCheck
+                            size={16}
+                            strokeWidth={1.75}
+                            className="mt-0.5 flex-none text-success"
+                            aria-hidden="true"
+                        />
+                        {words.promise}
+                    </p>
+                </aside>
+                <main id="content" tabIndex={-1} className="flex min-w-0 flex-1 flex-col outline-none">
+                    <div className="px-12 pt-6 empty:hidden max-md:px-4">
+                        <PlainHttpNotice />
+                    </div>
+                    {children}
+                </main>
+            </div>
+        </div>
+    );
+}
diff --git a/web/src/setup/SetupStage.tsx b/web/src/setup/SetupStage.tsx
deleted file mode 100644
index 43f97c5a..00000000
--- a/web/src/setup/SetupStage.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useEffect, useRef, type ReactNode } from 'react';
-
-import { ditherField } from '../signin/dither';
-
-/**
- * The sign-in's dotted grid and dither iris behind the server setup, out to the edges of the page
- * and in both themes. The iris moves as the sign-in's does, and stands still under reduced motion.
- */
-export function SetupStage({ children }: { children: ReactNode }) {
-    const field = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        const host = field.current;
-        return host === null ? undefined : ditherField(host);
-    }, []);
-
-    return (
-        <div className="setup-stage">
-            <div className="setup-backdrop" aria-hidden="true">
-                <div className="setup-iris">
-                    <div className="signin-dither" ref={field}>
-                        <div className="signin-dither-still" />
-                    </div>
-                </div>
-                <div className="setup-veil" />
-            </div>
-            {children}
-        </div>
-    );
-}
diff --git a/web/src/setup/StartStep.tsx b/web/src/setup/StartStep.tsx
index acae8faf..1404034e 100644
--- a/web/src/setup/StartStep.tsx
+++ b/web/src/setup/StartStep.tsx
@@ -1,11 +1,10 @@
-import { Play, Power, RotateCw } from 'lucide-react';
-import { useId, useState, type Ref } from 'react';
+import { Play, RotateCw } from 'lucide-react';
+import { useState, type ReactNode, type Ref } from 'react';
 
 import type { CfgReport } from '../api/generated/CfgReport';
 import type { LaunchSettings } from '../api/generated/LaunchSettings';
 import { useArtifacts } from '../artifacts/context';
 import { Button } from '../components/Button';
-import { Card } from '../components/Card';
 import { CheckRow } from '../components/CheckRow';
 import { Dialog } from '../components/Dialog';
 import { OneSyncChoice } from '../components/OneSyncChoice';
@@ -15,6 +14,7 @@ import { FactRows } from './CfgStep';
 import { Fact } from './Fact';
 import { startAction } from './state';
 import { StepActions } from './StepActions';
+import { StepPage } from './StepPage';
 
 /** What follows the save: a start, a restart, or nothing. */
 export type AfterSave = 'start' | 'restart' | null;
@@ -25,6 +25,7 @@ export type AfterSave = 'start' | 'restart' | null;
  */
 export function StartStep({
     titleRef,
+    banner,
     draft,
     report,
     saving,
@@ -33,6 +34,7 @@ export function StartStep({
     onBack,
 }: {
     titleRef: Ref<HTMLHeadingElement>;
+    banner?: ReactNode;
     draft: LaunchSettings;
     /** The cfg's last report, for the summary. */
     report: CfgReport | null;
@@ -43,7 +45,6 @@ export function StartStep({
     onBack: () => void;
 }) {
     const { t } = useI18n();
-    const id = useId();
     const words = t.serverSetup.start;
     const { status: builds } = useArtifacts();
     const { status } = useServerStatus();
@@ -55,10 +56,43 @@ export function StartStep({
     const selected = builds?.selected ?? null;
 
     return (
-        <Card id={id} icon={Power} title={t.serverSetup.stepNames.start} titleRef={titleRef}>
-            <div className="flex flex-col gap-5">
-                <p className="max-w-2xl text-body text-ink-2">{words.lead}</p>
-                <div className="flex max-w-2xl flex-col gap-5">
+        <StepPage
+            step="start"
+            titleRef={titleRef}
+            title={t.serverSetup.headings.start}
+            lead={words.lead}
+            banner={banner}
+            actions={
+                <StepActions onBack={onBack} note={action === null ? words.withoutBuild : null}>
+                    {action === null ? (
+                        <Button tone="ink" pending={saving !== undefined} onClick={() => onSave(null)}>
+                            {words.saveOnly}
+                        </Button>
+                    ) : (
+                        <>
+                            <Button
+                                pending={saving === null}
+                                disabled={saving !== undefined}
+                                onClick={() => onSave(null)}
+                            >
+                                {words.saveOnly}
+                            </Button>
+                            <Button
+                                tone="ink"
+                                icon={action === 'restart' ? RotateCw : Play}
+                                pending={saving === action}
+                                disabled={saving !== undefined}
+                                onClick={() => (action === 'restart' ? setConfirming(true) : onSave('start'))}
+                            >
+                                {action === 'restart' ? words.saveAndRestart : words.saveAndStart}
+                            </Button>
+                        </>
+                    )}
+                </StepActions>
+            }
+        >
+            <div className="grid max-w-250 grid-cols-1 gap-4 xl:grid-cols-2">
+                <section aria-label={words.how} className="card flex flex-col gap-5 p-5 max-md:p-4">
                     <OneSyncChoice value={draft.onesync} onChange={(onesync) => onChange({ onesync })} />
                     <div className="-mx-2 flex flex-col gap-1">
                         <CheckRow
@@ -74,9 +108,9 @@ export function StartStep({
                             onChange={(txadminEvents) => onChange({ txadminEvents })}
                         />
                     </div>
-                </div>
-                <section className="flex max-w-2xl flex-col gap-1.5">
-                    <h3 className="text-ui font-medium text-ink">{words.summary}</h3>
+                </section>
+                <section className="card flex flex-col gap-1.5 p-5 max-md:p-4">
+                    <h2 className="text-ui font-medium text-ink">{words.summary}</h2>
                     <dl className="flex flex-col">
                         <Fact label={words.folder}>
                             <span className="font-mono text-ui">{draft.dataPath.trim()}</span>
@@ -97,32 +131,6 @@ export function StartStep({
                         </Fact>
                     </dl>
                 </section>
-                <StepActions onBack={onBack} note={action === null ? words.withoutBuild : null}>
-                    {action === null ? (
-                        <Button tone="ink" pending={saving !== undefined} onClick={() => onSave(null)}>
-                            {words.saveOnly}
-                        </Button>
-                    ) : (
-                        <>
-                            <Button
-                                pending={saving === null}
-                                disabled={saving !== undefined}
-                                onClick={() => onSave(null)}
-                            >
-                                {words.saveOnly}
-                            </Button>
-                            <Button
-                                tone="ink"
-                                icon={action === 'restart' ? RotateCw : Play}
-                                pending={saving === action}
-                                disabled={saving !== undefined}
-                                onClick={() => (action === 'restart' ? setConfirming(true) : onSave('start'))}
-                            >
-                                {action === 'restart' ? words.saveAndRestart : words.saveAndStart}
-                            </Button>
-                        </>
-                    )}
-                </StepActions>
             </div>
             {confirming && (
                 <Dialog
@@ -151,6 +159,6 @@ export function StartStep({
                     <p>{t.controls.noticeFirst}</p>
                 </Dialog>
             )}
-        </Card>
+        </StepPage>
     );
 }
diff --git a/web/src/setup/StepActions.tsx b/web/src/setup/StepActions.tsx
index 75b4f789..8741fae9 100644
--- a/web/src/setup/StepActions.tsx
+++ b/web/src/setup/StepActions.tsx
@@ -5,8 +5,9 @@ import { Button } from '../components/Button';
 import { useI18n } from '../i18n/I18nProvider';
 
 /**
- * A step's buttons under its content: Back on the left, the step's own on the right, and above
- * them why the step cannot go on yet. Phones stack them across the whole width.
+ * A step's buttons in the bar at the foot of the screen: Back on the left, the step's own on the
+ * right, and beside them why the step cannot go on yet. On a phone the step's buttons share the
+ * width, and the note goes above them.
  */
 export function StepActions({
     onBack,
@@ -19,14 +20,18 @@ export function StepActions({
 }) {
     const { t } = useI18n();
     return (
-        <div className="flex flex-col gap-3">
-            {note && <p className="text-small text-ink-3">{note}</p>}
-            <div className="flex flex-wrap items-center justify-end gap-2 max-md:flex-col max-md:items-stretch">
-                {onBack !== undefined && (
-                    <Button tone="ghost" icon={ArrowLeft} className="mr-auto max-md:mr-0" onClick={onBack}>
-                        {t.serverSetup.back}
-                    </Button>
-                )}
+        <div className="flex flex-wrap items-center gap-2.5">
+            {onBack !== undefined && (
+                <Button tone="ghost" icon={ArrowLeft} onClick={onBack}>
+                    {t.serverSetup.back}
+                </Button>
+            )}
+            {note && (
+                <p className="order-first basis-full text-small text-ink-3 md:order-none md:ml-auto md:basis-auto">
+                    {note}
+                </p>
+            )}
+            <div className="ml-auto flex flex-wrap items-center justify-end gap-2.5 max-md:flex-1 max-md:*:flex-1">
                 {children}
             </div>
         </div>
diff --git a/web/src/setup/StepPage.tsx b/web/src/setup/StepPage.tsx
new file mode 100644
index 00000000..5fc637dc
--- /dev/null
+++ b/web/src/setup/StepPage.tsx
@@ -0,0 +1,80 @@
+import type { ReactNode, Ref } from 'react';
+
+import { useI18n } from '../i18n/I18nProvider';
+import { cn } from '../lib/cn';
+import { SETUP_STEPS, type SetupStep } from './state';
+
+/**
+ * One step of the setup: its question as the page's title, what it is about, its content, and its
+ * buttons in a bar that stays at the foot of the screen.
+ */
+export function StepPage({
+    step,
+    titleRef,
+    title,
+    lead,
+    banner,
+    actions,
+    children,
+}: {
+    step: SetupStep;
+    /** The keyboard comes to the title when the step changes. */
+    titleRef: Ref<HTMLHeadingElement>;
+    title: string;
+    lead?: ReactNode;
+    /** What came of the last action, above the step. */
+    banner?: ReactNode;
+    actions: ReactNode;
+    children: ReactNode;
+}) {
+    const index = SETUP_STEPS.indexOf(step);
+    return (
+        <>
+            <div className="flex flex-1 flex-col gap-7 px-12 pt-10 pb-10 max-md:gap-5 max-md:px-4 max-md:pt-6">
+                <Progress current={index} />
+                <div className="flex max-w-200 flex-col gap-2.5">
+                    <h1
+                        ref={titleRef}
+                        tabIndex={-1}
+                        className="text-[30px] leading-tight font-semibold tracking-[-0.02em] text-balance outline-none max-md:text-[24px]"
+                    >
+                        {title}
+                    </h1>
+                    {lead !== undefined && (
+                        <p className="max-w-170 text-[15px] leading-relaxed text-ink-2">{lead}</p>
+                    )}
+                </div>
+                {banner}
+                {children}
+            </div>
+            <div className="sticky bottom-0 z-(--z-dock) flex-none border-t border-line bg-bg px-12 py-4 max-md:px-4 max-md:py-3">
+                {actions}
+            </div>
+        </>
+    );
+}
+
+/** Where the side is hidden: the steps as a bar, the passed ones filled. */
+function Progress({ current }: { current: number }) {
+    const { t } = useI18n();
+    const words = t.serverSetup;
+    const step = SETUP_STEPS[current] ?? 'folder';
+    return (
+        <div className="flex flex-col gap-2 lg:hidden">
+            <p className="text-ui font-medium text-ink-2">
+                {words.stepOf(current + 1, SETUP_STEPS.length, words.stepNames[step])}
+            </p>
+            <div className="grid grid-cols-4 gap-1" aria-hidden="true">
+                {SETUP_STEPS.map((key, index) => (
+                    <span
+                        key={key}
+                        className={cn(
+                            'h-1 rounded-pill',
+                            index < current ? 'bg-success' : index === current ? 'bg-accent' : 'bg-surface-3',
+                        )}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}
diff --git a/web/src/setup/StepRail.tsx b/web/src/setup/StepRail.tsx
index 9f5a2b5c..1c4c8d42 100644
--- a/web/src/setup/StepRail.tsx
+++ b/web/src/setup/StepRail.tsx
@@ -2,66 +2,62 @@ import { Check } from 'lucide-react';
 
 import { useI18n } from '../i18n/I18nProvider';
 import { cn } from '../lib/cn';
-import { SETUP_STEPS } from './state';
+import { SETUP_STEPS, type SetupStep } from './state';
 
 /**
- * The setup's steps down the side, each with its number and what it does, the passed ones ticked.
- * Where the setup is too narrow for it, one line says which step this is.
+ * The setup's steps down the side: the current one raised, the passed ones ticked with what they
+ * chose, the others with what they are for.
  */
-export function StepRail({ current }: { current: number }) {
+export function StepRail({
+    current,
+    chosen,
+}: {
+    current: number;
+    chosen: Partial<Record<SetupStep, string>>;
+}) {
     const { t, format } = useI18n();
     const words = t.serverSetup;
-    const step = SETUP_STEPS[current] ?? 'folder';
     return (
-        <>
-            <ol aria-label={words.steps} className="flex flex-col @max-[50rem]:hidden">
-                {SETUP_STEPS.map((key, index) => {
-                    const passed = index < current;
-                    const here = index === current;
-                    return (
-                        <li
-                            key={key}
-                            aria-current={here ? 'step' : undefined}
-                            className="relative flex items-start gap-3 pb-5.5 last:pb-0"
-                        >
-                            {index < SETUP_STEPS.length - 1 && (
-                                <span
-                                    className="absolute top-7.5 bottom-1.5 left-3 w-px bg-line-strong"
-                                    aria-hidden="true"
-                                />
+        <ol aria-label={words.steps} className="flex flex-col gap-1">
+            {SETUP_STEPS.map((key, index) => {
+                const passed = index < current;
+                const here = index === current;
+                const value = chosen[key];
+                return (
+                    <li
+                        key={key}
+                        aria-current={here ? 'step' : undefined}
+                        className={cn('flex items-start gap-3 rounded-box p-3', here && 'bg-surface-2')}
+                    >
+                        <span
+                            className={cn(
+                                'grid size-6.5 flex-none place-items-center rounded-full font-mono text-caption font-semibold tabular-nums',
+                                here
+                                    ? 'bg-btn text-btn-ink'
+                                    : passed
+                                      ? 'bg-success-soft text-success'
+                                      : 'border border-line-strong text-ink-3',
                             )}
-                            <span
-                                className={cn(
-                                    'grid size-6 flex-none place-items-center rounded-full border font-mono text-caption font-semibold tabular-nums',
-                                    here
-                                        ? 'border-transparent bg-btn text-btn-ink'
-                                        : passed
-                                          ? 'border-transparent bg-success-soft text-success'
-                                          : 'border-line-strong bg-surface text-ink-3',
-                                )}
-                                aria-hidden="true"
-                            >
-                                {passed ? <Check size={12} strokeWidth={2.5} /> : format.number(index + 1)}
+                            aria-hidden="true"
+                        >
+                            {passed ? <Check size={13} strokeWidth={3} /> : format.number(index + 1)}
+                        </span>
+                        <span className="flex min-w-0 flex-col gap-0.5">
+                            <span className={cn('text-body', here ? 'font-semibold text-ink' : 'text-ink-2')}>
+                                {words.stepNames[key]}
+                                {passed && <span className="sr-only"> {words.said.passed}</span>}
                             </span>
-                            <span className="flex min-w-0 flex-col">
-                                <span
-                                    className={cn(
-                                        'text-body',
-                                        here ? 'font-semibold text-ink' : 'text-ink-2',
-                                    )}
-                                >
-                                    {words.stepNames[key]}
-                                    {passed && <span className="sr-only"> {words.said.passed}</span>}
+                            {passed && value !== undefined ? (
+                                <span className="truncate font-mono text-caption text-ink-3" title={value}>
+                                    {value}
                                 </span>
+                            ) : (
                                 <span className="text-small text-ink-3">{words.stepHints[key]}</span>
-                            </span>
-                        </li>
-                    );
-                })}
-            </ol>
-            <p className="text-ui font-medium text-ink @min-[50rem]:hidden">
-                {words.stepOf(current + 1, SETUP_STEPS.length, words.stepNames[step])}
-            </p>
-        </>
+                            )}
+                        </span>
+                    </li>
+                );
+            })}
+        </ol>
     );
 }
diff --git a/web/src/setup/cfgSyntax.test.ts b/web/src/setup/cfgSyntax.test.ts
new file mode 100644
index 00000000..8a22ff5e
--- /dev/null
+++ b/web/src/setup/cfgSyntax.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+
+import { lineTokens } from './cfgSyntax';
+
+const plain = (text: string) => [{ text, secret: false }];
+
+describe('the cfg preview colours', () => {
+    it('should mark the command, its strings and numbers', () => {
+        expect(lineTokens(plain('sv_maxclients 64'))).toEqual([
+            { text: 'sv_maxclients', kind: 'command' },
+            { text: ' ', kind: 'plain' },
+            { text: '64', kind: 'number' },
+        ]);
+        expect(lineTokens(plain('endpoint_add_tcp "0.0.0.0:30120"'))).toEqual([
+            { text: 'endpoint_add_tcp', kind: 'command' },
+            { text: ' ', kind: 'plain' },
+            { text: '"0.0.0.0:30120"', kind: 'string' },
+        ]);
+    });
+
+    it('should leave a comment as one, to the end of the line', () => {
+        expect(lineTokens(plain('# Lab server, main config'))).toEqual([
+            { text: '# Lab server, main config', kind: 'comment' },
+        ]);
+        expect(lineTokens(plain('ensure chat // the chat'))).toEqual([
+            { text: 'ensure', kind: 'command' },
+            { text: ' chat ', kind: 'plain' },
+            { text: '// the chat', kind: 'comment' },
+        ]);
+    });
+
+    it('should keep an empty token where Observer left a secret out', () => {
+        expect(
+            lineTokens([
+                { text: 'sv_licenseKey ', secret: false },
+                { text: '', secret: true },
+            ]),
+        ).toEqual([
+            { text: 'sv_licenseKey', kind: 'command' },
+            { text: ' ', kind: 'plain' },
+            { text: '', kind: 'secret' },
+        ]);
+    });
+
+    it('should read a number that starts a line as its command', () => {
+        expect(lineTokens(plain('3095'))).toEqual([{ text: '3095', kind: 'command' }]);
+    });
+});
diff --git a/web/src/setup/cfgSyntax.ts b/web/src/setup/cfgSyntax.ts
new file mode 100644
index 00000000..5ca4e249
--- /dev/null
+++ b/web/src/setup/cfgSyntax.ts
@@ -0,0 +1,63 @@
+import type { CfgSpan } from '../api/generated/CfgSpan';
+
+export type TokenKind = 'command' | 'string' | 'number' | 'comment' | 'plain' | 'secret';
+export type Token = { text: string; kind: TokenKind };
+
+// Spaces, a comment to the end of the line, a quoted string (perhaps left open), a number, a word.
+const PIECE = /(\s+)|(#.*|\/\/.*)|("(?:[^"\\]|\\.)*"?)|(-?\d+(?:\.\d+)?(?![^\s"]))|([^\s"]+)/gu;
+
+/**
+ * A line of a cfg as the preview colours it: the command it starts with, quoted strings, numbers
+ * and comments, and an empty token where Observer left a secret out.
+ */
+export const lineTokens = (spans: readonly CfgSpan[]): Token[] => {
+    const tokens: Token[] = [];
+    const push = (text: string, kind: TokenKind) => {
+        const last = tokens.at(-1);
+        if (last !== undefined && last.kind === kind && kind !== 'secret') {
+            last.text += text;
+        } else {
+            tokens.push({ text, kind });
+        }
+    };
+    let commanded = false;
+    let comment = false;
+    for (const span of spans) {
+        if (span.secret) {
+            push('', 'secret');
+            commanded = true;
+            continue;
+        }
+        if (comment) {
+            push(span.text, 'comment');
+            continue;
+        }
+        for (const [, space, note, quoted, number, word] of span.text.matchAll(PIECE)) {
+            if (space !== undefined) {
+                push(space, 'plain');
+            } else if (note !== undefined) {
+                push(note, 'comment');
+                comment = true;
+            } else if (quoted !== undefined) {
+                push(quoted, 'string');
+                commanded = true;
+            } else if (number !== undefined && commanded) {
+                push(number, 'number');
+            } else if (word !== undefined || number !== undefined) {
+                push(word ?? number ?? '', commanded ? 'plain' : 'command');
+                commanded = true;
+            }
+        }
+    }
+    return tokens;
+};
+
+/** The tokens of a line, each keyed by where it starts in it: a secret counts one place. */
+export const keyedTokens = (spans: readonly CfgSpan[]) => {
+    let at = 0;
+    return lineTokens(spans).map((token) => {
+        const key = at;
+        at += token.kind === 'secret' ? 1 : token.text.length;
+        return { token, key };
+    });
+};
diff --git a/web/src/shell/AppShell.tsx b/web/src/shell/AppShell.tsx
index 6f580a6f..c5071957 100644
--- a/web/src/shell/AppShell.tsx
+++ b/web/src/shell/AppShell.tsx
@@ -27,21 +27,19 @@ import { Suspense, useCallback, useEffect, useState } from 'react';
 import { meQuery } from '../api/auth';
 import { Permission } from '../api/generated/Permission';
 import type { Me } from '../api/generated/Me';
-import { allows, MeContext } from '../auth/me';
+import { allows } from '../auth/me';
 import { buttonVariants } from '../components/Button';
 import { Chip } from '../components/Chip';
 import { PlainHttpNotice } from '../components/PlainHttpNotice';
-import { AlertsProvider, useAlerts } from '../diagnostics/alerts';
+import { useAlerts } from '../diagnostics/alerts';
 import { useI18n } from '../i18n/I18nProvider';
-import { useRealtime } from '../live/context';
 import { cn } from '../lib/cn';
 import { PHONE, useMedia } from '../lib/useMedia';
-import { ArtifactsProvider } from '../artifacts/context';
-import { ScheduleProvider } from '../schedule/context';
-import { ServerStatusProvider, useServerStatus } from '../server/context';
+import { useServerStatus } from '../server/context';
 import { Logo } from './Logo';
 import { OnlineButton, OnlineColumn } from './OnlineColumn';
 import { ServerControls } from './ServerControls';
+import { SignedIn } from './SignedIn';
 import { StatusBar } from './StatusBar';
 import { UpdateSignal } from '../updates/UpdateSignal';
 import { UserMenu } from './UserMenu';
@@ -88,13 +86,6 @@ export function AppShell() {
     const openPlayers = useCallback(() => setPlayersOpen(true), []);
     const closePlayers = useCallback(() => setPlayersOpen(false), []);
     const phone = useMedia(PHONE);
-    const live = useRealtime();
-
-    // The socket lives as long as the signed-in shell: signing out unmounts it, and closes it.
-    useEffect(() => {
-        live.start();
-        return () => live.stop();
-    }, [live]);
 
     useEffect(() => {
         if (!menuOpen && !playersOpen) {
@@ -169,105 +160,89 @@ export function AppShell() {
     ];
 
     return (
-        <MeContext value={me}>
-            <ServerStatusProvider>
-                <ScheduleProvider>
-                    <ArtifactsProvider>
-                        <AlertsProvider>
-                            <div className="app">
-                                <a className="skip" href="#content">
-                                    {t.app.skipToContent}
-                                </a>
+        <SignedIn>
+            <div className="app">
+                <a className="skip" href="#content">
+                    {t.app.skipToContent}
+                </a>
 
-                                <aside
-                                    id="rail"
-                                    className={menuOpen ? 'rail-wrap is-open' : 'rail-wrap'}
-                                    aria-label={t.nav.label}
-                                >
-                                    <div className="rail">
-                                        <div className="rail-head">
-                                            <Logo />
-                                            <button
-                                                type="button"
-                                                className={cn(
-                                                    buttonVariants({ tone: 'ghost', size: 'icon' }),
-                                                    'ml-auto xl:hidden',
-                                                )}
-                                                aria-label={t.nav.close}
-                                                onClick={closeMenu}
-                                            >
-                                                <X size={16} strokeWidth={1.5} aria-hidden="true" />
-                                            </button>
-                                        </div>
-                                        <ServerTile />
-                                        <nav className="nav" aria-label={t.nav.sections}>
-                                            <NavEntries me={me} entries={main} onNavigate={closeMenu} />
-                                            <NavEntries
-                                                me={me}
-                                                entries={operations}
-                                                group={t.nav.operations}
-                                                onNavigate={closeMenu}
-                                            />
-                                            <NavEntries
-                                                me={me}
-                                                entries={maintenance}
-                                                group={t.nav.maintenance}
-                                                onNavigate={closeMenu}
-                                            />
-                                        </nav>
-                                        <div className="rail-foot">
-                                            {me.isOwner && <UpdateSignal onNavigate={closeMenu} />}
-                                            <NavEntries me={me} entries={settings} onNavigate={closeMenu} />
-                                            <UserMenu me={me} onNavigate={closeMenu} />
-                                        </div>
-                                    </div>
-                                </aside>
-                                {menuOpen && <div className="scrim" aria-hidden="true" onClick={closeMenu} />}
+                <aside
+                    id="rail"
+                    className={menuOpen ? 'rail-wrap is-open' : 'rail-wrap'}
+                    aria-label={t.nav.label}
+                >
+                    <div className="rail">
+                        <div className="rail-head">
+                            <Logo />
+                            <button
+                                type="button"
+                                className={cn(
+                                    buttonVariants({ tone: 'ghost', size: 'icon' }),
+                                    'ml-auto xl:hidden',
+                                )}
+                                aria-label={t.nav.close}
+                                onClick={closeMenu}
+                            >
+                                <X size={16} strokeWidth={1.5} aria-hidden="true" />
+                            </button>
+                        </div>
+                        <ServerTile />
+                        <nav className="nav" aria-label={t.nav.sections}>
+                            <NavEntries me={me} entries={main} onNavigate={closeMenu} />
+                            <NavEntries
+                                me={me}
+                                entries={operations}
+                                group={t.nav.operations}
+                                onNavigate={closeMenu}
+                            />
+                            <NavEntries
+                                me={me}
+                                entries={maintenance}
+                                group={t.nav.maintenance}
+                                onNavigate={closeMenu}
+                            />
+                        </nav>
+                        <div className="rail-foot">
+                            {me.isOwner && <UpdateSignal onNavigate={closeMenu} />}
+                            <NavEntries me={me} entries={settings} onNavigate={closeMenu} />
+                            <UserMenu me={me} onNavigate={closeMenu} />
+                        </div>
+                    </div>
+                </aside>
+                {menuOpen && <div className="scrim" aria-hidden="true" onClick={closeMenu} />}
 
-                                <div className="main" inert={menuOpen || playersOpen}>
-                                    <div className="mobilebar">
-                                        <button
-                                            type="button"
-                                            className={buttonVariants({ tone: 'ghost', size: 'icon' })}
-                                            aria-label={t.nav.open}
-                                            aria-controls="rail"
-                                            aria-expanded={menuOpen}
-                                            onClick={() => setMenuOpen(true)}
-                                        >
-                                            <MenuIcon size={18} strokeWidth={1.5} aria-hidden="true" />
-                                        </button>
-                                        <Logo />
-                                        {players && phone && (
-                                            <OnlineButton open={playersOpen} onOpen={openPlayers} />
-                                        )}
-                                    </div>
-                                    <header className="topbar" aria-label={t.status.label}>
-                                        <div className="status-card">
-                                            <StatusBar />
-                                            <ServerControls />
-                                        </div>
-                                    </header>
-                                    <main className="content" id="content" tabIndex={-1}>
-                                        <PlainHttpNotice />
-                                        <Suspense fallback={<PageLoading />}>
-                                            <Outlet />
-                                        </Suspense>
-                                    </main>
-                                </div>
+                <div className="main" inert={menuOpen || playersOpen}>
+                    <div className="mobilebar">
+                        <button
+                            type="button"
+                            className={buttonVariants({ tone: 'ghost', size: 'icon' })}
+                            aria-label={t.nav.open}
+                            aria-controls="rail"
+                            aria-expanded={menuOpen}
+                            onClick={() => setMenuOpen(true)}
+                        >
+                            <MenuIcon size={18} strokeWidth={1.5} aria-hidden="true" />
+                        </button>
+                        <Logo />
+                        {players && phone && <OnlineButton open={playersOpen} onOpen={openPlayers} />}
+                    </div>
+                    <header className="topbar" aria-label={t.status.label}>
+                        <div className="status-card">
+                            <StatusBar />
+                            <ServerControls />
+                        </div>
+                    </header>
+                    <main className="content" id="content" tabIndex={-1}>
+                        <PlainHttpNotice />
+                        <Suspense fallback={<PageLoading />}>
+                            <Outlet />
+                        </Suspense>
+                    </main>
+                </div>
 
-                                {players && (
-                                    <OnlineColumn
-                                        open={playersOpen}
-                                        onOpen={openPlayers}
-                                        onClose={closePlayers}
-                                    />
-                                )}
-                            </div>
-                        </AlertsProvider>
-                    </ArtifactsProvider>
-                </ScheduleProvider>
-            </ServerStatusProvider>
-        </MeContext>
+                {players && <OnlineColumn open={playersOpen} onOpen={openPlayers} onClose={closePlayers} />}
+            </div>
+        </SignedIn>
     );
 }
 
diff --git a/web/src/shell/FocusShell.tsx b/web/src/shell/FocusShell.tsx
new file mode 100644
index 00000000..37d46f15
--- /dev/null
+++ b/web/src/shell/FocusShell.tsx
@@ -0,0 +1,23 @@
+import { Outlet } from '@tanstack/react-router';
+import { Suspense } from 'react';
+
+import { useI18n } from '../i18n/I18nProvider';
+import { SignedIn } from './SignedIn';
+
+/** A signed-in flow on the whole screen, without the rail or the players: the server setup. */
+export function FocusShell() {
+    const { t } = useI18n();
+    return (
+        <SignedIn>
+            <Suspense
+                fallback={
+                    <div className="grid min-h-dvh place-items-center bg-bg" aria-busy="true">
+                        <span className="sr-only">{t.common.loading}</span>
+                    </div>
+                }
+            >
+                <Outlet />
+            </Suspense>
+        </SignedIn>
+    );
+}
diff --git a/web/src/shell/OnlineColumn.test.tsx b/web/src/shell/OnlineColumn.test.tsx
index 437c1f3f..ca72af6e 100644
--- a/web/src/shell/OnlineColumn.test.tsx
+++ b/web/src/shell/OnlineColumn.test.tsx
@@ -186,6 +186,41 @@ describe('the players column', () => {
         expect(names(list())).toEqual(['Bastos', 'Ruby Vex', en.players.now.confirming]);
     });
 
+    it('should name a labelled player by their label, found by its name, its whole ID or the FiveM name', () => {
+        PLAYERS.push(
+            player({
+                netId: 8,
+                player: 11,
+                name: 'Ada',
+                label: { name: 'Mara Quinn', id: 'CHAR-1234', resource: 'identity' },
+            }),
+        );
+        try {
+            const { getByRole } = column();
+            const search = getByRole('searchbox', { name: en.online.search });
+            const list = () => getByRole('complementary', { name: en.online.label });
+
+            const sorted = names(list());
+            const mara = getByRole('link', {
+                name: en.online.row('Mara Quinn', 8, '1 min', en.online.pingUnknown),
+            });
+            fireEvent.change(search, { target: { value: 'quinn' } });
+            const byLabel = names(list());
+            fireEvent.change(search, { target: { value: 'char-1234' } });
+            const byId = names(list());
+            fireEvent.change(search, { target: { value: 'ada' } });
+            const byFiveM = names(list());
+
+            expect(sorted).toEqual(['Bastos', 'Mara Quinn', 'Ruby Vex', en.players.now.confirming]);
+            expect(mara.querySelector('[title]')?.getAttribute('title')).toBe(en.players.label.fivem('Ada'));
+            expect(byLabel).toEqual(['Mara Quinn']);
+            expect(byId).toEqual(['Mara Quinn']);
+            expect(byFiveM).toEqual(['Mara Quinn']);
+        } finally {
+            PLAYERS.pop();
+        }
+    });
+
     it('should say who joined last, and how long ago', () => {
         const { getByText } = column();
 
diff --git a/web/src/shell/OnlineColumn.tsx b/web/src/shell/OnlineColumn.tsx
index 72725288..b1a6a7bd 100644
--- a/web/src/shell/OnlineColumn.tsx
+++ b/web/src/shell/OnlineColumn.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
-import { PanelRightClose, PanelRightOpen, Search, TriangleAlert, Users, X } from 'lucide-react';
+import { PanelRightClose, PanelRightOpen, Search, Tag, TriangleAlert, Users, X } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 
 import { Permission } from '../api/generated/Permission';
@@ -18,6 +18,7 @@ import { useI18n } from '../i18n/I18nProvider';
 import { cn } from '../lib/cn';
 import { PHONE, useMedia } from '../lib/useMedia';
 import { secondsSince, useNow } from '../lib/useNow';
+import { nameOf } from '../players/words';
 import { useServerStatus } from '../server/context';
 
 /** Where the column's folding is kept, per browser. */
@@ -55,8 +56,8 @@ const saveFolded = (folded: boolean) => {
 const hex = (licence: string) => licence.replace(/^license:/, '');
 
 /**
- * A search matches a name in part, a server ID whole, or the start of a licence, with or without
- * its prefix, as the lists show its first digits.
+ * A search matches a name or a label's name in part, a server ID or a label's ID whole, or the start
+ * of a licence, with or without its prefix, as the lists show its first digits.
  */
 export const matches = (player: OnlinePlayer, search: string) => {
     const text = search.trim().toLowerCase();
@@ -66,6 +67,8 @@ export const matches = (player: OnlinePlayer, search: string) => {
     return (
         String(player.netId) === text ||
         (player.name ?? '').toLowerCase().includes(text) ||
+        (player.label?.name ?? '').toLowerCase().includes(text) ||
+        player.label?.id?.toLowerCase() === text ||
         (player.license !== null && hex(player.license).startsWith(hex(text)))
     );
 };
@@ -78,11 +81,13 @@ export const sortPlayers = (players: readonly OnlinePlayer[], sort: Sort, locale
     const collator = new Intl.Collator(locale, { sensitivity: 'base', numeric: true });
     return players.toSorted((a, b) => {
         switch (sort) {
-            case 'name':
-                if (a.name === null || b.name === null) {
-                    return Number(a.name === null) - Number(b.name === null) || a.netId - b.netId;
+            case 'name': {
+                const [first, second] = [nameOf(a.name, a.label), nameOf(b.name, b.label)];
+                if (first === null || second === null) {
+                    return Number(first === null) - Number(second === null) || a.netId - b.netId;
                 }
-                return collator.compare(a.name, b.name) || a.netId - b.netId;
+                return collator.compare(first, second) || a.netId - b.netId;
+            }
             case 'id':
                 return a.netId - b.netId;
             case 'time':
@@ -403,10 +408,12 @@ function PlayerRow({ player }: { player: OnlinePlayer }) {
     const { t, format } = useI18n();
     const words = t.online;
     const confirmed = player.confirmation === 'confirmed';
+    const shown = nameOf(player.name, player.label);
+    const labelled = confirmed && (player.label?.name ?? null) !== null;
     const name = confirmed
-        ? player.name === null || player.name === ''
+        ? shown === null || shown === ''
             ? t.players.noName
-            : player.name
+            : shown
         : player.confirmation === 'confirming'
           ? t.players.now.confirming
           : t.players.now.unconfirmed;
@@ -419,9 +426,13 @@ function PlayerRow({ player }: { player: OnlinePlayer }) {
             <span
                 className={cn(
                     'min-w-0 flex-1 truncate text-ui',
-                    confirmed && player.name ? 'text-ink-2' : 'text-ink-3',
+                    confirmed && shown ? 'text-ink-2' : 'text-ink-3',
                 )}
+                title={labelled ? t.players.label.fivem(player.name || t.players.noName) : undefined}
             >
+                {labelled && (
+                    <Tag size={11} strokeWidth={2} className="mr-1 inline text-ink-3" aria-hidden="true" />
+                )}
                 {name}
             </span>
             <span className="shrink-0 font-mono text-caption text-ink-3">{time}</span>
@@ -470,7 +481,8 @@ function LastJoin({ players }: { players: readonly OnlinePlayer[] }) {
     if (last === null) {
         return null;
     }
-    const name = last.confirmation === 'confirmed' && last.name ? last.name : t.online.someone(last.netId);
+    const shown = nameOf(last.name, last.label);
+    const name = last.confirmation === 'confirmed' && shown ? shown : t.online.someone(last.netId);
     return (
         <p className="mt-auto flex items-center gap-2 border-t border-line bg-bg-subtle px-4 py-2.5 text-small text-ink-3">
             <span className="led led-ok" aria-hidden="true" />
diff --git a/web/src/shell/SignedIn.tsx b/web/src/shell/SignedIn.tsx
new file mode 100644
index 00000000..d8dde893
--- /dev/null
+++ b/web/src/shell/SignedIn.tsx
@@ -0,0 +1,41 @@
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, type ReactNode } from 'react';
+
+import { meQuery } from '../api/auth';
+import { MeContext } from '../auth/me';
+import { AlertsProvider } from '../diagnostics/alerts';
+import { useRealtime } from '../live/context';
+import { ArtifactsProvider } from '../artifacts/context';
+import { ScheduleProvider } from '../schedule/context';
+import { ServerStatusProvider } from '../server/context';
+
+/**
+ * What every signed-in screen stands on, the panel's shell or a full-screen flow: the account, the
+ * live socket, and FXServer's state, schedule, builds and alerts as they change.
+ */
+export function SignedIn({ children }: { children: ReactNode }) {
+    const { data: me } = useQuery(meQuery);
+    const live = useRealtime();
+
+    // The socket lives as long as a signed-in screen: signing out unmounts it, and closes it.
+    useEffect(() => {
+        live.start();
+        return () => live.stop();
+    }, [live]);
+
+    // Signed out: the route guard is already on its way to the sign-in page.
+    if (!me) {
+        return null;
+    }
+    return (
+        <MeContext value={me}>
+            <ServerStatusProvider>
+                <ScheduleProvider>
+                    <ArtifactsProvider>
+                        <AlertsProvider>{children}</AlertsProvider>
+                    </ArtifactsProvider>
+                </ScheduleProvider>
+            </ServerStatusProvider>
+        </MeContext>
+    );
+}
diff --git a/web/src/shell/StatusBar.tsx b/web/src/shell/StatusBar.tsx
index 089a2811..a5278d5f 100644
--- a/web/src/shell/StatusBar.tsx
+++ b/web/src/shell/StatusBar.tsx
@@ -30,9 +30,11 @@ export function StatusBar() {
     const { status: builds } = useArtifacts();
     const now = useNow();
     const complement =
-        builds === null || builds.running === null
+        builds === null
             ? null
-            : builds.probation !== null && builds.probation.build === builds.running
+            : builds.running !== null &&
+                builds.probation !== null &&
+                builds.probation.build === builds.running
               ? t.status.probation
               : builds.selected !== null && builds.selected !== builds.running
                 ? t.status.nextBuild(String(builds.selected))
@@ -70,9 +72,13 @@ export function StatusBar() {
             <div className="status-cell">
                 <dt>{t.status.build}</dt>
                 <dd>
-                    <span className="font-mono text-[12.5px]">
-                        {status?.build == null ? unknown : String(status.build)}
-                    </span>
+                    {status === null ? (
+                        unknown
+                    ) : status.build === null ? (
+                        <span className="font-normal text-ink-3">{t.status.none}</span>
+                    ) : (
+                        <span className="font-mono text-[12.5px]">{String(status.build)}</span>
+                    )}
                     {complement !== null && <span className="font-normal text-ink-3"> · {complement}</span>}
                 </dd>
             </div>
diff --git a/web/src/styles/shell.css b/web/src/styles/shell.css
index d2efccc1..ce8d70e2 100644
--- a/web/src/styles/shell.css
+++ b/web/src/styles/shell.css
@@ -174,18 +174,6 @@
     .nav-item[aria-current='page'] > svg {
         color: var(--accent);
     }
-    /* A notch of accent against the rail's edge: what the eye finds first in a column of grey entries. */
-    .nav-item[aria-current='page']::before {
-        content: '';
-        position: absolute;
-        left: calc(-1 * var(--rail-pad));
-        top: 50%;
-        width: 3px;
-        height: 18px;
-        margin-top: -9px;
-        border-radius: 0 3px 3px 0;
-        background: var(--accent);
-    }
 
     .nav-group {
         display: flex;
diff --git a/web/src/styles/signin.css b/web/src/styles/signin.css
index a90b2ccd..3c568922 100644
--- a/web/src/styles/signin.css
+++ b/web/src/styles/signin.css
@@ -875,92 +875,3 @@
         }
     }
 }
-
-/*
- * The server setup's stage: the sign-in's dotted grid and dither iris behind its page, which
- * follows the theme. The backdrop reaches past the content's padding to the edges of the page and
- * clips the iris there; the veil keeps the text beside the cards readable over it.
- */
-@layer components {
-    .setup-stage {
-        position: relative;
-        isolation: isolate;
-        display: flex;
-        flex: 1 0 auto;
-        flex-direction: column;
-        gap: 20px;
-    }
-    .setup-backdrop {
-        position: absolute;
-        z-index: -1;
-        inset: -24px -32px -56px;
-        overflow: hidden;
-        pointer-events: none;
-        background-color: var(--bg-subtle);
-        background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.5px);
-        background-size: 16px 16px;
-    }
-    .setup-iris {
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        height: 760px;
-        opacity: 0.85;
-    }
-    .setup-iris .signin-dither-still {
-        width: 1100px;
-    }
-    :root[data-theme='light'] .setup-iris {
-        opacity: 0.5;
-    }
-    /* Darker where text sits on the iris: the steps down the left, the headings across the top. */
-    .setup-veil {
-        position: absolute;
-        inset: 0;
-        background:
-            linear-gradient(
-                to bottom,
-                color-mix(in srgb, var(--bg-subtle) 55%, transparent) 0,
-                transparent 220px
-            ),
-            linear-gradient(
-                to right,
-                color-mix(in srgb, var(--bg-subtle) 70%, transparent) 0,
-                color-mix(in srgb, var(--bg-subtle) 70%, transparent) 22%,
-                transparent 36%
-            ),
-            radial-gradient(
-                ellipse 60% 45% at 50% 32%,
-                color-mix(in srgb, var(--bg-subtle) 60%, transparent),
-                transparent 70%
-            ),
-            linear-gradient(to bottom, transparent 320px, var(--bg-subtle) 760px);
-    }
-    @media (max-width: 1024px) {
-        .setup-backdrop {
-            inset: -20px -24px -48px;
-        }
-    }
-    @media (max-width: 760px) {
-        .setup-backdrop {
-            inset: -16px -16px -40px;
-        }
-        /* On a phone the headings sit over the iris's core: it fades to a texture behind them. */
-        .setup-iris {
-            height: 560px;
-            opacity: 0.4;
-        }
-        :root[data-theme='light'] .setup-iris {
-            opacity: 0.25;
-        }
-        .setup-veil {
-            background: linear-gradient(
-                to bottom,
-                color-mix(in srgb, var(--bg-subtle) 65%, transparent) 0,
-                color-mix(in srgb, var(--bg-subtle) 40%, transparent) 260px,
-                var(--bg-subtle) 560px
-            );
-        }
-    }
-}
diff --git a/xtask/src/main.rs b/xtask/src/main.rs
index fc0fd635..b1c52444 100644
--- a/xtask/src/main.rs
+++ b/xtask/src/main.rs
@@ -261,12 +261,24 @@ fn cargo() -> Command {
 }
 
 fn npm() -> Command {
-    // npm is a batch script on Windows, which Command does not resolve without its extension.
-    Command::new(if cfg!(windows) { "npm.cmd" } else { "npm" })
+    Command::new(node_tool("npm"))
 }
 
 fn npx() -> Command {
-    Command::new(if cfg!(windows) { "npx.cmd" } else { "npx" })
+    Command::new(node_tool("npx"))
+}
+
+/// npm's own installer puts batch scripts on Windows, which Command does not find without their
+/// extension; some Node managers put executables instead, which it finds by their bare name.
+fn node_tool(name: &str) -> String {
+    let script = format!("{name}.cmd");
+    let on_path = std::env::var_os("PATH")
+        .is_some_and(|path| std::env::split_paths(&path).any(|folder| folder.join(&script).is_file()));
+    if cfg!(windows) && on_path {
+        script
+    } else {
+        name.to_owned()
+    }
 }
 
 fn root() -> PathBuf {