diff --git a/IMPROVEMENT_PLAN.md b/IMPROVEMENT_PLAN.md
index 2e91ad7..a03f78c 100644
--- a/IMPROVEMENT_PLAN.md
+++ b/IMPROVEMENT_PLAN.md
@@ -833,6 +833,15 @@ The phase is iterative: every iteration is its own branch, tests (TDD, e2e for s
 5. ✅ **v0.9 — appearance** (branch `phase-10-v09`): UI settings on the server (`/api/v1/settings`), the accent color, density, fonts, the environment frame, a theme editor with import and export, `prefers-contrast`, Stylelint on colors, the component showcase, visual snapshots of themes. — *The interface language is kept in the settings too. Stylelint pulls in `braces` with an open advisory and no fixed version (a dev dependency only): to be kept in mind for `npm audit` in v1.0.*
 6. ✅ **v1.0 — readiness** (the criteria below; branch `phase-10-v10`): integrations and instructions (Laravel, Symfony, WordPress, Bitrix), freezing format v2 and API v1, CI — CodeQL, `govulncheck`, `npm audit`, attestations, SBOM, fuzz, `paths` filters; release notes, issue/PR templates, publishing `client-php` 2.0.0 and the releases. — *The freeze: `spec/frozen/v1.0`, `make spec-compat` (oasdiff) and a test of v2 logs. Left to the owner: publishing `client-php` 2.0.0 (a repository for the split, a deploy key, Packagist), publishing the draft releases, protecting `main`, turning on private vulnerability reporting (`SECURITY.md` and the issue templates link to it). What is postponed is in `ROADMAP.md`.*
 
+### 8.2o After 1.0
+
+Work after the 1.0 release, each part on its own branch and through a pull request (the user merges).
+
+1. ✅ **v1.0.1 — hotfix**: the library of a release reported `2.0.0-dev`; `scripts/release-check.sh` refuses a stable tag with a pre-release library.
+2. ✅ **CI and builds**: the fatal error test of the library is skipped where PHP itself exits with 1 on running out of memory (setup-php builds of PHP 7.4–8.1 from October 2026); `make desktop-deps` checks the C compiler, GTK and WebKitGTK and prints how to install them on the system (apt, dnf, pacman, zypper, apk; GTK3 where WebKitGTK 6.0 is missing).
+3. ✅ **Documents in two languages**: every document is a pair `X.md` (English) / `X.ru.md` (Russian) with a language switcher; this plan is translated, `IMPROVEMENT_PLAN.ru.md` is the Russian original; the repository has an English description, topics and badges.
+4. ✅ **UI redesign** (branch `feat/ui-redesign`): a sidebar with the projects, servers and tools that folds to a rail of icons; two columns below 1360px, one below 900px; Lucide icons; shared controls (`ui/src/styles/controls.css`) and new theme tokens with checked contrast; help in the app (`ui/src/lib/help.ts`: how it works, the library, projects, servers, pushing logs, reading requests, keys) linked from the dialogs and empty states; first steps in an empty viewer; CLI runs named by their script (`argv` in the feed API, compatible with 1.0). — *Found along the way: the port field of a new server and the fields of a new project ran out of the dialog (an e2e test now checks every field at 1440, 900 and 420px); a tall dialog did not fit the window.*
+
 ### 8.3 Dependencies and timing
 
 ```
diff --git a/IMPROVEMENT_PLAN.ru.md b/IMPROVEMENT_PLAN.ru.md
index c3ea9ca..9222ed8 100644
--- a/IMPROVEMENT_PLAN.ru.md
+++ b/IMPROVEMENT_PLAN.ru.md
@@ -833,6 +833,15 @@ Server (local | ssh | http)   — тип подключения, парамет
 5. ✅ **v0.9 — оформление** (ветка `phase-10-v09`): настройки UI на сервере (`/api/v1/settings`), акцентный цвет, плотность, шрифты, рамка окружения, редактор тем с импортом и экспортом, `prefers-contrast`, Stylelint на цвета, витрина компонентов, визуальные снапшоты тем. — *Язык интерфейса тоже хранится в настройках. Stylelint тянет `braces` с открытым advisory без исправленной версии (только dev-зависимость): учесть при `npm audit` в v1.0.*
 6. ✅ **v1.0 — готовность** (критерии ниже; ветка `phase-10-v10`): интеграции и инструкции (Laravel, Symfony, WordPress, Bitrix), заморозка формата v2 и API v1, CI — CodeQL, `govulncheck`, `npm audit`, attestations, SBOM, fuzz, фильтры `paths`; release notes, шаблоны issue/PR, публикация `client-php` 2.0.0 и релизов. — *Заморозка: `spec/frozen/v1.0`, `make spec-compat` (oasdiff) и тест логов v2. Осталось владельцу: публикация `client-php` 2.0.0 (репозиторий для split, deploy key, Packagist), публикация черновиков релизов, защита `main`, включить private vulnerability reporting (на него ссылаются `SECURITY.md` и шаблоны issue). Отложенное — в `ROADMAP.md`.*
 
+### 8.2o После 1.0
+
+Работа после релиза 1.0: каждая часть — своя ветка и pull request (сливает пользователь).
+
+1. ✅ **v1.0.1 — исправление**: библиотека в релизе называла себя `2.0.0-dev`; `scripts/release-check.sh` не даёт выпустить стабильный тег с предварительной версией библиотеки.
+2. ✅ **CI и сборка**: тест фатальной ошибки библиотеки пропускается там, где сам PHP при нехватке памяти выходит с кодом 1 (сборки setup-php для PHP 7.4–8.1 октября 2026); `make desktop-deps` проверяет компилятор C, GTK и WebKitGTK и подсказывает, как их поставить в этой системе (apt, dnf, pacman, zypper, apk; GTK3, где нет WebKitGTK 6.0).
+3. ✅ **Документы на двух языках**: каждый документ — пара `X.md` (английский) / `X.ru.md` (русский) с переключателем языка; план переведён, `IMPROVEMENT_PLAN.ru.md` — русский оригинал; у репозитория английское описание, топики и бейджи.
+4. ✅ **Редизайн интерфейса** (ветка `feat/ui-redesign`): боковая панель с проектами, серверами и инструментами, сворачивается в полоску иконок; две колонки уже 1360px, одна — уже 900px; иконки Lucide; общие элементы управления (`ui/src/styles/controls.css`) и новые токены темы с проверкой контраста; справка в приложении (`ui/src/lib/help.ts`: как это работает, библиотека, проекты, серверы, отправка логов, чтение запросов, клавиши) со ссылками из диалогов и пустых состояний; первые шаги в пустом просмотрщике; CLI-запросы называются по скрипту (`argv` в API ленты, совместимо с 1.0). — *Найдено по ходу: поле порта нового сервера и поля нового проекта вылезали за диалог (теперь e2e проверяет каждое поле на 1440, 900 и 420px); высокий диалог не помещался в окно.*
+
 ### 8.3 Зависимости и сроки
 
 ```
diff --git a/README.md b/README.md
index 5b240a5..6f7dfaa 100644
--- a/README.md
+++ b/README.md
@@ -88,7 +88,9 @@ The one-liners work from the first published release that carries these files (v
 
    Other flags: `--addr` (default `127.0.0.1:8820`; another address needs a token), `--token` (better `$WAPP_DEBUGGER_TOKEN`, out of the process list), `--db` (the database, by default in the user config directory; `secrets.json` with tokens of HTTP servers lives next to it), `--scan-interval` (fallback rescan of local directories, 5 s). `wapp-debugger serve --help` lists them all.
 
-The UI speaks English and Russian and has light, dark and high-contrast themes (switches in the header; "System" follows the color scheme and the contrast setting of the OS). **Appearance** in the header sets an accent color over any theme, the density of lists, the font size, the font of code (one installed on your computer) and a frame around the window in the color of stage and prod. The **theme editor** there makes themes of your own: colors over a built-in theme with a live preview and a contrast check, shared as `.theme.json` files (Export, Import). The viewer keeps these settings, so every browser and the desktop app look the same. Search looks for words in messages and their context or for a part of the URL.
+The window has a sidebar with the projects and servers (it folds to a rail of icons) and three panes: the feed, the request and the message. **Help** (?) at the bottom of the sidebar explains how the viewer works and how to connect the library, add a project or a server and push logs; with no projects yet the feed shows the first steps.
+
+The UI speaks English and Russian and has light, dark and high-contrast themes (switches at the bottom of the sidebar; "System" follows the color scheme and the contrast setting of the OS). **Appearance** next to them sets an accent color over any theme, the density of lists, the font size, the font of code (one installed on your computer) and a frame around the window in the color of stage and prod. The **theme editor** there makes themes of your own: colors over a built-in theme with a live preview and a contrast check, shared as `.theme.json` files (Export, Import). The viewer keeps these settings, so every browser and the desktop app look the same. Search looks for words in messages and their context or for a part of the URL.
 
 ## Projects on other servers
 
@@ -150,13 +152,13 @@ The same viewer in a window, without a network port. Installers are attached to
 - Windows: SmartScreen → **More info** → **Run anyway**;
 - Linux: `sudo apt install ./wapp-debugger-desktop_*.deb`, or `chmod +x` the AppImage.
 
-What the desktop adds to the browser version (**Settings** in the header):
+What the desktop adds to the browser version (**Settings** at the bottom of the sidebar):
 
 - an icon in the tray (the menu bar on macOS) with the number of new requests with errors and a menu of the last ones; closing the window keeps the app there;
 - system notifications about new requests with errors — or warnings too — in all or chosen projects; a burst comes as one notice; a click opens the request;
 - links `wapp-debugger://open?project=3&request=42&message=1001` open the request in the app (from a chat, a ticket, a script); the installers register the scheme, a second start hands the link to the running window;
 - start at login; the window comes back where it was;
-- a notice in the header when a newer version is out (GitHub Releases once a day; can be switched off).
+- a notice at the top of the sidebar when a newer version is out (GitHub Releases once a day; can be switched off).
 
 From source: `make desktop-build` (needs a C compiler and, on Linux, GTK4 + WebKitGTK 6.0; `make desktop-deps` checks them and prints how to install what is missing on your system), then `dist/wapp-debugger-desktop [--logs-dir …]`; `--logs-dir` is optional here too. `make desktop-package` builds the installers of the current system; more in [desktop/README.md](desktop/README.md).
 
diff --git a/README.ru.md b/README.ru.md
index 1718ba4..29a7c5b 100644
--- a/README.ru.md
+++ b/README.ru.md
@@ -87,7 +87,9 @@ wapp-debugger serve --logs-dir /var/www/app/tmp/logs   # откройте http:/
 
    Другие флаги: `--addr` (по умолчанию `127.0.0.1:8820`; другой адрес требует токен), `--token` (лучше `$WAPP_DEBUGGER_TOKEN`, чтобы токена не было в списке процессов), `--db` (база, по умолчанию в папке конфигов пользователя; рядом с ней — `secrets.json` с токенами HTTP-серверов), `--scan-interval` (резервное пересканирование локальных папок, 5 с). Полный список — `wapp-debugger serve --help`.
 
-Интерфейс на английском и русском, темы — светлая, тёмная и высококонтрастная (переключатели в шапке; «Системная» следует цветовой схеме и настройке контраста ОС). **Оформление** в шапке задаёт акцентный цвет поверх любой темы, плотность списков, размер шрифта, шрифт кода (установленный на компьютере) и рамку окна цвета окружения на stage и prod. Там же **редактор тем**: свои цвета поверх встроенной темы с живым предпросмотром и проверкой контраста, обмен темами файлами `.theme.json` («Экспорт», «Импорт»). Настройки хранит просмотрщик, поэтому во всех браузерах и в десктоп-версии они одинаковые. Поиск ищет слова в сообщениях и их контексте или часть URL.
+Слева — панель проектов и серверов (сворачивается в полоску иконок), справа — три панели: лента, запрос и сообщение. **Справка** (?) внизу панели объясняет, как устроен просмотрщик и как подключить библиотеку, добавить проект или сервер и отправлять логи; пока проектов нет, лента показывает первые шаги.
+
+Интерфейс на английском и русском, темы — светлая, тёмная и высококонтрастная (переключатели внизу боковой панели; «Системная» следует цветовой схеме и настройке контраста ОС). **Оформление** рядом с ними задаёт акцентный цвет поверх любой темы, плотность списков, размер шрифта, шрифт кода (установленный на компьютере) и рамку окна цвета окружения на stage и prod. Там же **редактор тем**: свои цвета поверх встроенной темы с живым предпросмотром и проверкой контраста, обмен темами файлами `.theme.json` («Экспорт», «Импорт»). Настройки хранит просмотрщик, поэтому во всех браузерах и в десктоп-версии они одинаковые. Поиск ищет слова в сообщениях и их контексте или часть URL.
 
 ## Проекты на других серверах
 
@@ -149,13 +151,13 @@ wapp-debugger serve --logs-dir /var/www/app/tmp/logs   # откройте http:/
 - Windows: SmartScreen → **Подробнее** → **Выполнить в любом случае**;
 - Linux: `sudo apt install ./wapp-debugger-desktop_*.deb` или `chmod +x` для AppImage.
 
-Что десктоп добавляет к браузерной версии (**«Настройки»** в шапке):
+Что десктоп добавляет к браузерной версии (**«Настройки»** внизу боковой панели):
 
 - значок в трее (в строке меню на macOS) с числом новых запросов с ошибками и меню последних; закрытое окно оставляет приложение там;
 - системные уведомления о новых запросах с ошибками — или и с предупреждениями — во всех или выбранных проектах; всплеск приходит одним уведомлением; клик открывает запрос;
 - ссылки `wapp-debugger://open?project=3&request=42&message=1001` открывают запрос в приложении (из чата, задачи, скрипта); установщики регистрируют схему, повторный запуск передаёт ссылку уже открытому окну;
 - запуск при входе в систему; окно открывается там, где было;
-- сообщение в шапке о новой версии (GitHub Releases раз в сутки; отключается).
+- сообщение вверху боковой панели о новой версии (GitHub Releases раз в сутки; отключается).
 
 Из исходников: `make desktop-build` (нужен компилятор C, а в Linux ещё GTK4 + WebKitGTK 6.0; `make desktop-deps` проверяет их и подсказывает, как поставить недостающее в вашей системе), затем `dist/wapp-debugger-desktop [--logs-dir …]`; `--logs-dir` и здесь необязателен. `make desktop-package` собирает установщики текущей системы; подробнее — в [desktop/README.ru.md](desktop/README.ru.md).
 
diff --git a/ROADMAP.md b/ROADMAP.md
index 5e56ebc..e40b94f 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -23,11 +23,11 @@ What 1.0 has and what comes after it. The detailed working plan is
 
 **Viewer**
 
-- Panels that resize and collapse; servers in the tree of projects; a narrow layout.
+- Panels that resize (the sidebar already folds and the layout narrows; servers group their projects).
 - A page of project settings with path mapping (server or container ↔ local copy) and its check.
 - A status line: the live stream, each server, files not imported yet, disk space.
-- Onboarding for an empty viewer; a raw JSON tab of a message; an overview and an errors tab of a
-  request; saved filters and a date range.
+- A raw JSON tab of a message; an overview and an errors tab of a request; saved filters and a
+  date range. (First steps for an empty viewer and help in the app are done.)
 
 **Sources**
 
diff --git a/ROADMAP.ru.md b/ROADMAP.ru.md
index 1a314ce..bac991c 100644
--- a/ROADMAP.ru.md
+++ b/ROADMAP.ru.md
@@ -23,11 +23,11 @@
 
 **Просмотрщик**
 
-- Панели, которые меняют размер и сворачиваются; серверы в дереве проектов; узкая раскладка.
+- Панели, которые меняют размер (боковая панель уже сворачивается, узкая раскладка есть; проекты сгруппированы по серверам).
 - Страница настроек проекта с маппингом путей (сервер или контейнер ↔ локальная копия) и его проверкой.
 - Строка состояния: live-поток, каждый сервер, ещё не импортированные файлы, место на диске.
-- Онбординг для пустого просмотрщика; вкладка сырого JSON у сообщения; вкладки обзора и ошибок у
-  запроса; сохранённые фильтры и диапазон дат.
+- Вкладка сырого JSON у сообщения; вкладки обзора и ошибок у запроса; сохранённые фильтры и
+  диапазон дат. (Первые шаги в пустом просмотрщике и справка в приложении сделаны.)
 
 **Источники**
 
diff --git a/docs/screenshot.png b/docs/screenshot.png
index 7fca31c..24e26c5 100644
Binary files a/docs/screenshot.png and b/docs/screenshot.png differ
diff --git a/server/internal/api/details.go b/server/internal/api/details.go
index 5d3d8a7..6867e45 100644
--- a/server/internal/api/details.go
+++ b/server/internal/api/details.go
@@ -40,10 +40,7 @@ func (s *server) GetRequest(ctx context.Context, request GetRequestRequestObject
 		Lang: &lang, Ip: optional(detail.IP), ServerIp: optional(detail.ServerIP), ServerName: optional(detail.ServerName),
 		Hostname: optional(detail.Hostname), Pid: detail.PID, ProcessUser: optional(detail.ProcessUser), AppUser: optional(detail.AppUser),
 		SessionId: optional(detail.SessionID), LibraryVersion: optional(detail.LibraryVersion), PhpVersion: optional(detail.PHPVersion),
-		EndedAt: detail.EndedAt, MemoryPeakBytes: detail.MemoryPeakBytes, Children: &children,
-	}
-	if detail.Argv != nil {
-		response.Argv = &detail.Argv
+		EndedAt: detail.EndedAt, MemoryPeakBytes: detail.MemoryPeakBytes, Children: &children, Argv: base.Argv,
 	}
 	return response, nil
 }
diff --git a/server/internal/api/openapi.gen.go b/server/internal/api/openapi.gen.go
index 9d3058a..b3f54f1 100644
--- a/server/internal/api/openapi.gen.go
+++ b/server/internal/api/openapi.gen.go
@@ -702,9 +702,11 @@ type ProjectPatch struct {
 //
 // Example: {"duration_ms":40.2,"error_count":0,"exit_code":null,"finished":true,"format_version":2,"id":42,"is_ajax":false,"message_count":6,"method":"GET","parent_request_key":null,"pinned":false,"project_id":1,"received_at":1792400000310,"request_key":"01JAZ7Q5X0K4M8T2V6N9P3R5S7","sapi":"web","server_id":1,"started_at":1792400000000,"status_code":200,"url":"https://shop.example.test/catalog/item?id=42","warning_count":2}
 type Request struct {
-	DurationMs *float64 `json:"duration_ms,omitempty"`
-	ErrorCount int      `json:"error_count"`
-	ExitCode   *int     `json:"exit_code,omitempty"`
+	// Argv The command line of a CLI run; absent for a web request
+	Argv       *[]string `json:"argv,omitempty"`
+	DurationMs *float64  `json:"duration_ms,omitempty"`
+	ErrorCount int       `json:"error_count"`
+	ExitCode   *int      `json:"exit_code,omitempty"`
 
 	// Finished false means the request is still running or the process was killed
 	Finished      bool                 `json:"finished"`
@@ -738,8 +740,10 @@ type RequestFormatVersion int
 
 // RequestDetail defines model for RequestDetail.
 type RequestDetail struct {
-	AppUser *string   `json:"app_user,omitempty"`
-	Argv    *[]string `json:"argv,omitempty"`
+	AppUser *string `json:"app_user,omitempty"`
+
+	// Argv The command line of a CLI run; absent for a web request
+	Argv *[]string `json:"argv,omitempty"`
 
 	// Children Child requests (AJAX, subprocesses) by parent_request_key
 	Children   *[]Request `json:"children,omitempty"`
@@ -5311,129 +5315,130 @@ var swaggerSpec = []string{
 	"myERcmM5fc969cYE5M4qR9VJ7+jYWU8JnzMFkp88UDU0xozxW40pozKrwn+G9oY2rBANjs15fKL/K4f4",
 	"V/xQUoNLQbGjP9W/qIyn0SB69fJay0wsCFNDZ+hOydLNWlDG9JwVXZXO7b6Ge0LovT0JKtfPk36vspph",
 	"sKjX/9v5P7/5/0//0fvx5Kdvr4///vTnZ5dP3p5eaZ1Z4oJGg2hBRrWTQc8AEY/WBD2t7BnVy8LoWP9i",
-	"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",
+	"fGOZUoUcdMEZdmSBfqSIVN0EK5zzSVfrvf9B0+9OjisfpgPOcTs8Kib3YZUl4bOZ1k5yyiA8gdHzNxdI",
+	"zNkZwiNJmBGJGC3IyNGEr3W3qX2D4bcvb5nd6iY3jkeCK7nae70i0CasgHhsYM9kBVj+kEgqmucaZBCC",
+	"5MIdKAmREi2wRFOam2O7rdg1OaA06vrx8W1QDd1aX3UMFHL8NbhpExQdq20hGBlXJBStwqrKxNHvpDZC",
+	"7MEyGIkKcPU2ThbL8s11/EgKhUZLVApbZGhf6gXNWUoEsp+GkFUPi20TufJly5Zf1DZaX/398QBVjjx0",
+	"8O7NxYvDM3TfH2izwthZqzyqRj6tP1mu9DuP0KV9AbftB5XY24YvbSRqI94bgnA9XYd0+lr6YTNtzyGm",
+	"xbYWvBXT1WDiiZUm59WlWXP9dQIqqfp29Um+q+vVKQBt1ysuiqFm1u3crxnNU0FYIGVGP6mSNg7O/3b+",
+	"jxjJ+cjKRyIPNT8G2DzeziVX7aB11BCWribKzTSXcamc7rYRArTYTm3EbNKI8URx9KsMuupsuN4/HDZO",
+	"MCMzLpbDguBpFel4xOaLrNhp3oKm23Gyxfv2tOWYsNjl7a3xJonUexzSdDuvbcC/bClwH/7lNcT8VfzL",
+	"b30bpM7Ir/kC5dwG9a0jz2SjlczdMKUpgxBfihWG/NoDSEEpnUjOf6T4PMlIeji4YTzXB7DKMEMpXsrY",
+	"uM0ygvQDqdCILDlL0Qw/GNrWM1p5ql8WWpOY8XuSInJPxBL1e2hG2VwReYQu2A0zjhJrhJqBTY6vIEWO",
+	"EyLRiKsMQWq9PEMaxgiU3xmVkNAALmGrBDJuXjy6YVHLy42XshmO3Mwa5b6CPLvLWCFb78oqAE70GEsl",
+	"yWlQ9piEdni/MvlsQtTgI8hGeB9PSMeMZBg6SkmR86WNydmkcPg258l0yMdjSRTo/p3+cU8LREVYsoRf",
+	"nnxrNANYt8kPb3iAG9YT8XNqyuQZzcrHcWTC6ZGUfh6+y68hAlDqkiDznC8gzCl4XtqJ5teU5ESvyP4o",
+	"CE6HnOXLMg/VdyTW1vcp7MLYqIQB5J+bd1tg3OpL9/6j/Of1PKW1zhPv1V0sE5fosHkvP1ITQ1rjsq4h",
+	"cvOIl94H+/ECW4UbNlUHn3P1NgiuhtLdXLkWwy6X02NNPi1JVCpSSND8XLGRmS6K4S1Dtl5kr1obSgmj",
+	"JB2g7j0W3cViYZJx1Kzo5hzSAVzxUeXa9iYuXLAo0p9FtUkuX1+ib45Ojp48QQdJTg+9gh9QgdzK4ogX",
+	"xiNoV3rbYiMte7SGOBxTNiGiEJSpVakmjCzQ1dVrpL+JQeJPyRJ5HyLFTZhKzJyr691FyH4qZ61ibjVX",
+	"yrKw2Z1YwRwHUmYdkh6fnvafxYgkqcQdmeHjDqNSFcenT2Ok3xAS//d//e/DGEle2ceaerEgkOhtkyoJ",
+	"EnSSKVuGYhZqdJ3QYvk0bPZb0mgr6SSZIniogcCFPoYPLNnEADy9p7iR14k8qoajWnLE2eG2mrtHzFeK",
+	"FBvzn/k0cjvYwBswXEsVWxN6DmfsGu6NUQkIOVZFbDIZY6RyGbuM2jMISVepjoY74vJfw4WgSh/Y5RdD",
+	"M/gZMuS/NQYr7mi7bMeY5iRF7hVAKKTclunxGkkpJ9IE7jDNTQoxyJM1Do/tkpmBJPWUMJ6s+Q8NbdkP",
+	"DN1q5ZDk441Raitf+XQd1suTdYcaseqgRNJWwJSVQpIkgih5pHkUigqABw60TGEI5xRLUwz0P7tHUmZd",
+	"g8zDGBVcqBiYOEa/zmfFUH8nz1CmVAHjaE14OBe5g4VXq1exusvTPnBuYDPAoNsFd2PGF/blErOHR1Go",
+	"Msxl8AalWfBBtejdstn0xmuZDU9PT5+cxhsS8pwRuEWooqXctFMSNNntouq0VNKQzTPGwida+EZjYUQy",
+	"ylJ0wMgEK3pPDsFSyAhOG1nx8EVY1YIknWBis6cVh3zkAa9W5R+XrmRsnfBtVmy2onzw62qOe3w0eVf9",
+	"9/EK6eP1zA2hus/VOiEnZLsvr+HVFTIRNrgaRz82EopdrYExibREWWP6PT5G+/UQ/EdG1wqcXNbX0vC5",
+	"1u3Qlo45N6d4LW3KhjD4eBw8wetGbEij8CzagA49oqnW7ZYoyTCbrFQ9VxWAVYM3lhI3Nruaiq8d9Otr",
+	"gxPVLEMO4HgcmlQrOJf9U9RQ5RGC2A+fK0lTk45WeqagVENr1jdML1grami0rPRxvQGAMiP6DBBEzQUj",
+	"qfH8eMT35LhJfXGkNT/yi+8w2Lrctr7hdxelmmIsGShSp8z6ukaCL/RaoTCdWRqB8l6tYxyhK8UFSd22",
+	"zNl0dsNAJuhnULIi7VZRgpOMgOZmynuEVKjAlKkjdI4kvod3i/koh7AGwrJc29CasAY4fsUw1FcPE57r",
+	"Q89E5hMo8B9CpbYtwEgJk1QtQf2ejbkAtdkY1sOxqX4ydqKrpTUjzTjjwzHXIsT8oEzXgMiU02rTmsLz",
+	"oaT/ItGgf9KOkdcW2FKv4antHMCWprrc+gi9ImD7ltEAzBra7rody9wbUNrSl+w3TzDOxQvz2XEvEJV3",
+	"UG9lBfMFygiYnnwMgVK/kBYM1cR4OipkhQ4VD30Bw0U/QFjwufX32uLqsg4zr7qreKeF+ynJuCTM2SGx",
+	"NTg0QWtmgFq6XYqxAaVjrsWTQaplrXCJ9eaITEWZrZwCzlRnjGc0hzy0hKdmyfdYUD2mjI000+9py1wq",
+	"nGsLD1aeLy312QYVtm5cKgzqpteaAfJK1tDgh/POP03TBxT/Zdi5/WuQCpVrw9HEXtlFA96ItR5sKHZg",
+	"sv9oatL+9Ba5STKpUfSZW7qDeSHImAjZAbx3gJ4dKt0D29Cito0D6H3x7xSL6b/NiP+utb/4t11Vo8HF",
+	"YXC3dWnh2TX9b32j5nijj9DJgJp0qRiuMZNPLj7TlNTalAbBcxOqPC4F0VI+0DuiVty5shSzUfGOVYYE",
+	"ycHWQYq3y5hNjS+D05WqcJGnkGroijYbDgUwXxxHmwMHUpIog//KcFlacKxrOPxZ6aBwFZlcIAfN8FA7",
+	"2bytagHAju1q423VDR3ElBIEz17ek5B0uMTLnBtzEjN0dfVSn/T6BNb7g3/aeBT0gjBCoHwL8kAarWls",
+	"UsSTOCJmRpeMIIdQld2qCQ1FMD4nFtFKygg6BUgYHG5p1l+OumUqjNU4UIKFWLpfz1B9c/CUEukn0GiZ",
+	"Aos6u2E2cGwyU8qXywwQ+67bzllL3/E+MQ/OkCByyRKkSG6xk+SUGJezIIBaUN1URtnEqkv2fGns1UOM",
+	"na1KJKlwV9sB/F1fIYyiVxQ8oEWVCrplhPoRNZo7phV5ivJ6WrPvtUrWgJJCjPf3KrWhlfYSyl6jSeb8",
+	"OZjJBRFVSxaZ6TPL6dqlJxEU6bYi7iG5tKHs43CNPp/ZJnAlI0d4lPSPn5wEOyK57lvly8e946edfq/T",
+	"f3bdPxn0eoNe75+hL22JAU5TEQIAsS0kbEISSOpiDso/BAUghY5JdAC7Qp2OGa+jxzu0iorXBcKYq9Uq",
+	"e0fw/8G33x73t8m69/Mly0Hue0f9o95Gh3KVtGWBa8EWA/JvQ32cJEnmgqrlVVLq4COCBRFDPA/VF1xX",
+	"luj788vL4YuX37979erl2+H1Lz++/Bn8yJ0OmKuHR+hnrhAjRMsogJDnO3RQ5QzlnBcjnExvmPNRY1Nb",
+	"BApXyOL7ySYtcIEWAjI39OsDdNLrG+/x3fv37zvnc5URpmiCFRmg72FXd0YaGc1LK83wawVYcB0BcfIp",
+	"JStgcEUUOnitVKGN3xhd4Rm5oop8d6UETdSh2SvWHFQ427MgTAMB1vYfsNrvjAoJ/zZa5N2Zr5PfML16",
+	"JAlLq2iZMYi1ihwjypJ8njqviT4eJZy50JNEEJQRnBKhBT6zzVMksSkd1MSA9BaraOUCF0VZu2I8DhVc",
+	"cEF/JEvTNQ+6LwRrqCxuzy8v0MEr7hzLEJox6Ds0R/zVPckViJi5hFjgWQ3H8J2sPAHnlxcaGoLPJyaK",
+	"8B7TXCIsJVEowyzNbYsWQzuMqAUXU4hYHN2wG/Z2nhM5uGEdq1WAwu16YII6YXJ27iTDUzJMsCR3Z/p1",
+	"Rd2jGc1zKknCNTYkZYmRGaTgSXaG7qqUyDsY/U7JO723mi7p+9ljdOclQN61vOowva0J1fPb2lZksiAl",
+	"OnA1rYcxulvVFdFswqVz63U5fRGsXVigbfBZ4AllMMIAFVhKdOclVN0hLNGd/fcZutMy7M5LGCcsPdIz",
+	"NdjXHBSOu02cqQI2QCNFBye9J4irjIgFlSRGeIK1NYhe/HyFBBlRqBY7PLthCIG/Sbrw0JgLQicM3f0i",
+	"6ISyOzQhCunBDp5fvf3h8Kzc94inWnkB90Yf/US/N2/2nxhecJW9mvw7pe+xouTIE8lRX4tyE6wkzJRF",
+	"PDnqHT0x5loG4rOLC9q973crl/GEqBWCFAKHvr8PsOSi0jaTDDxzevOKsLOqKU2CGTB1hgUxND0lBeSm",
+	"TSi0btSHP6D0Io0G0Uvo7vjcpW3Umm0e93prGm0u8SyvN9hsnkKthoXXdpHGAWMreMOqTrkQrzVnHMn5",
+	"bIbFEoRtBZjCNSeDItT/PP/pDcwSN4ObUdn3xKoiMoJkCx4uCHJRW4lmWCWZ8SVqSnWJfQnOwb6XCmv+",
+	"N85DeD3JKCOHMcIll7tPOeQIOu37DC0yrBB5AMajEskpLQqSxohx0JL1b8YRnepjzWb7HaFzg2xD9GyJ",
+	"ZlQqPCXoADNkG5DeMMhgwHb3CM9sMuPsUI8qiF4XHME8J5rheodH6Lm1NWrEp89q/SG1zSarE6NOSxez",
+	"Bi0Bp33P0+XnklG9heynnei03Qi2rgDr3cmhCjvdg/BYYKogOdJ4ix1Y1lYJtcLHlmZLi6c1tZmt6zIS",
+	"dhncLtQfe4ePDQmuWpAmw/rSTAoQ0LDX5uyRXoXm0gOQqpYY15AXUGRbEgjKchbYdmXbgxw6T1MvPtSQ",
+	"R1BdVsojAyfvSC8TUzJ8T2wdeVtAfYrLs8NqQl3fTrSnSJ0TXxHVbHX6mTyzzhxtThWAe/VsD5LfGZzj",
+	"pgmgpdiJMw0MBA9rMLWLAKk/D8DtHTgOQqDbRpTtAWr7FXSfizSsVTG5R9RpOje4WYlDUGWWkCa0RFhB",
+	"c84wDj3GcK6h7seqcfunddzxU9lAxu96v6J2qHqlW/WN/3T7BZFT7ysVQI3Xl+czcfJKqwalBQAKRbBr",
+	"n4cDV/+wBQ66VQOmsLprW3ZCu2nphbL5JLYqbvmbcSYaU9H0X5TQ+LN6wwrevzg35g078BUyfXRdXb0+",
+	"NPkDxl1VxsZ9136M5HIGDRGQIJLn9yQ9q6S6lS822n7DoK3JjKfEyHHGzYUIZAHi6PAIzA/oxe4WbgeV",
+	"teC8nvhMGyDwrrNLvj+7YSf9U/gNikfIQ1D3qmjaBEM+h7LjJpYuWEoe3L5Lijgr9WtqU42hpqQZhCiz",
+	"HkOXOrjwRMUW6+sXA705iUQjos0+QCseKyIsftiqyyhM4HXFXRLHtaskNtwk8SWFQD2qtcKcMqGWzxcD",
+	"BpAuXxVmNrTqBalL9GI/woRtNJuPofppe4HhGGqlnH5DpXKNp9v0XIfFL5qdfcULGL/0OIeowC923eVO",
+	"itu9mh+71cu59lSb1Ggz2DYacQngfdCQVCUOPPSXP/nWdh3Vxs66LG2dL6Fw1doCbaVt9fc99xoE7NUi",
+	"Kf0OYSwEmLD7sSoE/2QEosuga+THgAtCljYMVhjO0jOv0rGWM9ese2z7oF7AVBXydzu4qvt1Apx50t6A",
+	"mW0fkDag8Jw8pSJigLOKBVYppV8EAr2vSMN7U0fXUi84VU2qbsh62xcUv5gAMonGX9nc20IAuaj55yPR",
+	"IOJzpVDXud3Xuzn8a2P+oJxTX2TI0jYPPhvw7+31FfU+k/4VD5s4a65WZUWnhEFY5hDRWlUTtH70U5u/",
+	"M52DwF1tk6G/0+TdFvxX+8bfl/DStFD3NX00G+jmZ7JAck+0cz0XrJVpD2mo462IZyM7m46ZoAGviLjc",
+	"H9tgNcQxzMVjMcJVrx9rn1jT+xDN5tAkAaIwJo5haaBqGwQx2BsG+WkxkuS30mqd4ELGNnYO2XOY2VQy",
+	"PkbGDED3x2dVGBKd9HomK74Kzkh8D6nf5+jy9aUJzRrnBUZvsMD3JIfVmzo6NqHsoXoJHSieQ1RJG05V",
+	"CuAhGhHjD+EMMvRNxFKbLb6Ba2JcetFMiWVllB2hqpndIuOS+Blgqt609YZZj73ei1bSyramEHEdmBxv",
+	"SABCBafM3ABEFTqw3njD7IdnVVheZVSknQILtdRgzwma0FrcvlrN6iDS27JB1qMFQvxxRfQRABmXuf4O",
+	"VDOcWuPW24FG0wrzkbU8F14C8ulpOylnawn10GFpW1B85bDYyriUke5l4k5FTKmxucvEgjIUFCrB2SmT",
+	"rlVj47X2d+vcLvpTZXW5ZnZ7s7jckGAEWJnlhEiZgwP+EhAIYy0w4lJIcGGkw9Zek4ZsNclnXhTTWW8h",
+	"U+sC3r62Qcsva25prjNRY8ahnw4RaMHFdC/xBMULpPBUy2I/N29ctSRcq+wEj6FqwTkxN0aVhVWvlSre",
+	"C6qIMP7Ov125DFfXtwdP9F/QBxtWYvPGXRLhDTu4C+QL3sWo1RX7CF2oqvi5Sq6k0srjQbsxEWQWXL0+",
+	"7xyfPg3JVuNl+WLY/xxxU1Lu2uqyVq3B1oHfEquxiSh9PvH9hKfENtzw+p7XWwScuWZONk+EFxKI31TK",
+	"PUaJgrYka9wz2+rq5vvtVfXnOcHCYv+NaY3yB6EcmxNTNXHfoQNi/dtt6Kgq23Cdt8y3n09PRjQ3rhBb",
+	"4VFjLh8H3G+UbXQ6eXRVHiurYnLvrX5ckZ3pdVJWBth77VDCZyPKNAgIMVUbeV76f9sk9IZKp9cFyCek",
+	"YtV7U+5yP/XHvXr8VwxXb320nUlXK+heuU7TW3PLMBH0MG2ruxARWXEVaWjSDMth+UJL7fTqnVsiZ57n",
+	"HQgYS4JFkpnYpQsHuzoS/UKMinyuKefd2zdIzkdlzXBoPb+tvyy+lZ1U5tpC1oAwhlKMZqv2C+m6uxPC",
+	"yllNEHLNhHOmaP65E5pgM3Qnjk2ZurlZOTShbWK8ExjPkSsI4ikxAWyjtMIdSOjg9OHhcBVAyzqcSlJ7",
+	"NZf9zuntwYde59ntx+NP/354CJUhttfjBAZcY0ywVO6+zZV0M6Ns6Pfc3hBcdm1EVvGi1+B2B56obkW0",
+	"CoGzDvQJDDtQeNUGzJMdcLafu4JDS3G3pFWL2f5G4RUSybT0LVe6YuKyJ/V6oG/QOZ6bxp9bvPmGzqj6",
+	"sk5gv2tqyAtviaUEzD7iU9YiJZBRTBbwBxVSbbQy3a/dj5Wx/en30DuNVvRYd5D97neIDVptDtfqLKiS",
+	"pU4XRsHq4OAXAcHeqXt1xppXR7mXEKGDa3nXrFM4DldBdkXU8CcspvsC7uPiDzs0HApfNnDO7DXs+rE1",
+	"TKSpSa93ReitvTkg0NomYA99vfBHSTJhc17sjaIuoR+Ooyhu7mtAkmsFCroIjkyW2+PEZtcEMtbmQEIa",
+	"V83XtID7zSGj0Bb5NGIasZ9lJ+PyIWFVWWUVPHAN+f3gQJU8idF935YPmbjDHCqG7o+R4vwMoiZUIqMq",
+	"QVURWRzdsFCr+0NbxaWZRJHqIeTmCWKDOtpcZNaE5QsW8lWZwqSvLvW29r23cWh8vFEc2RJL/eFzM0vn",
+	"BZUFlzTcaRwrhZNMm4RngAStA31340isY68Uq24KMHWhcI9YfhNFTZZcpzt+2kOc0NNmoeAq7OlW3FQM",
+	"UmXjiCaypP8muSRQjPpIfnI0vzZx8Cf30meQTliDVRmRBIFqDK2BHoocrvWwAns7PXqrbL/yfulWjY5a",
+	"QnWiBnu0ynKxNx3vlHHu7lP+uB/LJOwa8LODPe/AY/0A/zcZAf7VvGuMgJLC92cElP4YykCeQ8/jjQzo",
+	"ypDWcZotxYx+x7RY27x/f1mxrrzU1UOUfXONj2NPubKyhNy6utRQDOfKJTZ/iZwXv+HpV86TdYhchZE9",
+	"Z8lWXR3Xld3ZH7sfS//x75MhWyJ9twPNovN3zI/1whbaBC7T9Ffny/p8sMoi/gLg6H01Qt6bHbyGhDck",
+	"yu4Hfl9K/PwuWbIbxc8XyJF9tAzqJu5ajBUnBdwM8MdnEnO7RwDm5pYGQeQ8V+gAu3b/sG2IQOaSo+Ne",
+	"z5zSfGpz0faAHDOz3wXdv8BkZ0SlVCbc3i4UTjp5j/Opsf8n9J6w8soJSmwVue02AQWMdlExwgrNOKSu",
+	"PQxTUqjMWiUo5QvTJfm01+vdMH80yhDO87OqwrG81hyaUZI0RkcTqmLEeEqGM57OcxvEuycs5eawsgX4",
+	"R+gSq8ys8IaNoVDMxa7N5VSmeNIIei367QX50PIUL2sOj7IoUmVkBk2iXI4lnPkD4894d6H/lH4bVM5c",
+	"+5fEryI6Qk6Jqxdsoka9JmdVwB2z9Ib5nZG00WLa0fQOQ16KFxazq8vUvoY03cGBWJJKrejxxKt5/HbT",
+	"HQaCc5M9UDYi+xC5+3OiOOpmfEa69lasW68RxIam5fV+vTPK7F/9DUq9Wc7tV/BVfo6F4giFpCtL+OJI",
+	"iTlLwlmX1xnx7qGBe9ggn6ggtoEwzqdniGEh+KIsJ5ab+5W7i/Kqqbcxj37wWX0f5tAPtNY3g1VK42gZ",
+	"6G2ODlo36h8+RjBnXKqOvXk2LJiT6hC1jQ9N6nV1n5LpVmqb7lTXptR//nU+K8wzq/kv8NJ2PTO67w2z",
+	"R4w0mdcmx0fMpU1BnJKlTQKsBdbMTcyFIJJAbnZGpb84uGUJw8dygTWx3LARUQtik3fNUeqSF+21UOZu",
+	"FpsPDkvQkv7aLmLCSZnWaJb+F4n0FmGj5iYVMHLOoFUd9JP/i3T3xvgv6Rn8JlZH6LzsdaRnKp/bNSDI",
+	"3j046T0LiuJr/dZrLtWPcJfqH1sMN27yqlo6Xr0+Pz59OmDX2WjydPqPd8Xf3r/Kv3nZv3j1y3NZvOWz",
+	"64f0+fnbN/f0x8XTl6dX//ltvSe0/b7qcP3X7u1fv/v//ryxSaS/oscJ01Dyr8Uc3CNkCw2ABPahpMHg",
+	"QIeuM1rZOfh1aXKW1RLmnjFzY46tt6g2vFF0bO638zUa7XylDjvasPQuX3hEB50v3Drn9+qZ8/Wb5Xho",
+	"sIVI9qoACe0KAx2P1zfKsTGqVaHIlzjJqpbaA3RH0zuT6znjjCvOaGKjgDG6g3fuXDd+96fppcnHyGv1",
+	"Hd+wuxQrDC97vyMs0d+ufvlZS/6MYKFGBCuU8BlcdgD9G5hyV9ueItto8+iGnQNbYySIPTX9btOmN+ob",
+	"LFUHZulcvIAjzibhm+XOqJTm2lym5A0zp+rSGDdwpo7m47FW1/z6L6o01CVMDJ2uTX/ywGHkbXJVrquJ",
+	"ElZxjtqCdwuzQFjKbKVsfeFMmoNSU4C0PvsWzhcYGkkKek9WJfQ9Ov12s89AkQfVhbV0KpLckgm9FvIB",
+	"PjSEZQfdhycAbgFyZYlGT+hc6TkMdmt6p5m1xnGGM+Xa6H/p0fBqLS3aXHZLp2MG6lQqW6MFMljA5qWh",
+	"eYmPx1CAwBBheJTrc08ik3nVqGLEchpyO78i6p1d/n5ry3a+uG4uhKOc9kUrsLfwXU+5Xnz4OwYu5+BX",
+	"9qaIcGzOZHPmxOTdrleq3NqqHbh5t61ZyTHkjsnFXlzGrj4cylaIQLaFLZDeXKGDV1S9no/QW7M9GRvC",
+	"KP1MnCUEYZTi5eHGk8ZrWL5KZfp72Zf8i53YbooAdL+f0zx1EHg8bG2jdC3XtdyrYP136oPYh5e5oOn2",
+	"U/P7eov1D7da0Nc6jsNPMIsLy35o99tOcI7qXYvh7ciSdWQv1uwffwMt6PuDb7897oHdYxdYXqNsF6qX",
+	"USugkP5PnhOg/M3LYa0+dRLZG8zpSref/k8AAAD//w==",
 }
 
 // decodeSpec returns the embedded OpenAPI spec as raw JSON bytes,
diff --git a/server/internal/api/server.go b/server/internal/api/server.go
index 7a038ee..8ce92cf 100644
--- a/server/internal/api/server.go
+++ b/server/internal/api/server.go
@@ -190,9 +190,17 @@ func RequestDTO(r store.RequestRow) Request {
 		ReceivedAt:       r.ReceivedAt,
 		Pinned:           r.Pinned,
 		Note:             optional(r.Note),
+		Argv:             argvOf(r.Argv),
 	}
 }
 
+func argvOf(argv []string) *[]string {
+	if argv == nil {
+		return nil
+	}
+	return &argv
+}
+
 func optional(value string) *string {
 	if value == "" {
 		return nil
diff --git a/server/internal/api/server_test.go b/server/internal/api/server_test.go
index bfee55e..6e20527 100644
--- a/server/internal/api/server_test.go
+++ b/server/internal/api/server_test.go
@@ -110,6 +110,34 @@ func TestListRequestsPaginatesNewestFirst(t *testing.T) {
 	}
 }
 
+// A CLI run in the feed carries its command line, so the feed can name it
+func TestListRequestsCarriesTheCommandLineOfCLIRuns(t *testing.T) {
+	e := newTestEnv(t)
+	_, body := get(t, e.server.URL+"/api/v1/requests?sapi=cli&limit=50")
+	var page struct {
+		Items []struct {
+			RequestKey string    `json:"request_key"`
+			Argv       *[]string `json:"argv"`
+		} `json:"items"`
+	}
+	if err := json.Unmarshal([]byte(body), &page); err != nil {
+		t.Fatal(err)
+	}
+	found := false
+	for _, item := range page.Items {
+		if item.Argv != nil && strings.Join(*item.Argv, " ") == "bin/console queue:work --queue=emails" {
+			found = true
+		}
+	}
+	if !found {
+		t.Fatalf("no argv of the CLI fixture in the feed: %s", body)
+	}
+	_, web := get(t, e.server.URL+"/api/v1/requests?sapi=web&limit=50")
+	if strings.Contains(web, `"argv"`) {
+		t.Fatalf("a web request has no argv: %s", web)
+	}
+}
+
 func assertProblem(t *testing.T, response *http.Response, body string, status int) {
 	t.Helper()
 	var problem Problem
diff --git a/server/internal/store/details.go b/server/internal/store/details.go
index ddeb844..96b7fe1 100644
--- a/server/internal/store/details.go
+++ b/server/internal/store/details.go
@@ -16,7 +16,6 @@ import (
 type RequestDetail struct {
 	RequestRow
 	Lang            string
-	Argv            []string
 	IP              string
 	ServerIP        string
 	ServerName      string
@@ -39,20 +38,15 @@ func (s *Store) GetRequestDetail(ctx context.Context, id int64) (RequestDetail,
 		return RequestDetail{}, found, err
 	}
 	detail := RequestDetail{RequestRow: row}
-	var argv, ip, serverIP, serverName, hostname, processUser, appUser, sessionID, libraryVersion, phpVersion sql.NullString
+	var ip, serverIP, serverName, hostname, processUser, appUser, sessionID, libraryVersion, phpVersion sql.NullString
 	err = s.db.QueryRowContext(ctx, `
-		SELECT lang, argv, ip, server_ip, server_name, hostname, pid, process_user, app_user, session_id,
+		SELECT lang, ip, server_ip, server_name, hostname, pid, process_user, app_user, session_id,
 			library_version, php_version, ended_at, memory_peak_bytes
-		FROM requests WHERE id = ?`, id).Scan(&detail.Lang, &argv, &ip, &serverIP, &serverName, &hostname, &detail.PID,
+		FROM requests WHERE id = ?`, id).Scan(&detail.Lang, &ip, &serverIP, &serverName, &hostname, &detail.PID,
 		&processUser, &appUser, &sessionID, &libraryVersion, &phpVersion, &detail.EndedAt, &detail.MemoryPeakBytes)
 	if err != nil {
 		return RequestDetail{}, false, err
 	}
-	if argv.Valid {
-		if err := json.Unmarshal([]byte(argv.String), &detail.Argv); err != nil {
-			return RequestDetail{}, false, err
-		}
-	}
 	detail.IP, detail.ServerIP, detail.ServerName, detail.Hostname = ip.String, serverIP.String, serverName.String, hostname.String
 	detail.ProcessUser, detail.AppUser, detail.SessionID = processUser.String, appUser.String, sessionID.String
 	detail.LibraryVersion, detail.PHPVersion = libraryVersion.String, phpVersion.String
diff --git a/server/internal/store/details_test.go b/server/internal/store/details_test.go
index ad451c7..4658530 100644
--- a/server/internal/store/details_test.go
+++ b/server/internal/store/details_test.go
@@ -161,3 +161,30 @@ func TestProjectLinksOnAnSSHServerCarryTheHost(t *testing.T) {
 		t.Fatalf("local project has a remote host: %+v", links)
 	}
 }
+
+// The feed names a CLI run by its command line: the row carries argv, a web request has none
+func TestRequestRowsCarryTheCommandLine(t *testing.T) {
+	s := newTestStore(t)
+	ctx := context.Background()
+	project, _ := s.EnsureLocalProject(ctx, "shop", "/r", "/r/logs")
+	ids := importV2(t, s, project.ProjectID, "web-request.jsonl", "cli-exception.jsonl")
+
+	page, err := s.ListRequests(ctx, RequestFilter{ProjectID: project.ProjectID, Limit: 10})
+	if err != nil {
+		t.Fatal(err)
+	}
+	argv := map[int64][]string{}
+	for _, row := range page.Items {
+		argv[row.ID] = row.Argv
+	}
+	if got := strings.Join(argv[ids["cli-exception.jsonl"]], " "); got != "bin/console queue:work --queue=emails" {
+		t.Fatalf("cli argv = %q", got)
+	}
+	if argv[ids["web-request.jsonl"]] != nil {
+		t.Fatalf("web argv = %q", argv[ids["web-request.jsonl"]])
+	}
+	row, _, _ := s.GetRequest(ctx, ids["cli-exception.jsonl"])
+	if len(row.Argv) != 3 {
+		t.Fatalf("GetRequest argv = %q", row.Argv)
+	}
+}
diff --git a/server/internal/store/requests.go b/server/internal/store/requests.go
index fc64c60..4aaaedc 100644
--- a/server/internal/store/requests.go
+++ b/server/internal/store/requests.go
@@ -321,6 +321,8 @@ type RequestRow struct {
 	ReceivedAt    int64
 	Pinned        bool
 	Note          string
+	// Argv is the command line of a CLI run; nil for a web request.
+	Argv []string
 }
 
 // RequestFilter holds feed parameters; zero values do not filter.
@@ -448,7 +450,7 @@ func (s *Store) ListRequests(ctx context.Context, filter RequestFilter) (Request
 const selectRequestRows = `
 		SELECT r.id, r.project_id, p.server_id, r.request_key, COALESCE(r.parent_request_key, ''), COALESCE(f.format_version, 2),
 			r.sapi, COALESCE(r.method, ''), COALESCE(r.url, ''), r.is_ajax, r.status_code, r.exit_code, r.started_at, r.duration_ms,
-			r.finished, r.message_count, r.error_count, r.warning_count, r.received_at, r.pinned, COALESCE(r.note, '')
+			r.finished, r.message_count, r.error_count, r.warning_count, r.received_at, r.pinned, COALESCE(r.note, ''), r.argv
 		FROM requests r
 		JOIN projects p ON p.id = r.project_id
 		LEFT JOIN log_files f ON f.id = r.log_file_id`
@@ -459,9 +461,13 @@ type rowScanner interface {
 
 func scanRequestRow(row rowScanner) (RequestRow, error) {
 	var r RequestRow
+	var argv sql.NullString
 	err := row.Scan(&r.ID, &r.ProjectID, &r.ServerID, &r.Key, &r.ParentKey, &r.FormatVersion, &r.Sapi, &r.Method, &r.URL,
 		&r.IsAjax, &r.StatusCode, &r.ExitCode, &r.StartedAt, &r.DurationMs, &r.Finished, &r.MessageCount, &r.ErrorCount,
-		&r.WarningCount, &r.ReceivedAt, &r.Pinned, &r.Note)
+		&r.WarningCount, &r.ReceivedAt, &r.Pinned, &r.Note, &argv)
+	if err == nil && argv.Valid {
+		err = json.Unmarshal([]byte(argv.String), &r.Argv)
+	}
 	return r, err
 }
 
diff --git a/spec/openapi.yaml b/spec/openapi.yaml
index a64002c..25a3daf 100644
--- a/spec/openapi.yaml
+++ b/spec/openapi.yaml
@@ -1105,6 +1105,11 @@ components:
         sapi: { $ref: '#/components/schemas/Sapi' }
         method: { type: string, nullable: true }
         url: { type: string, nullable: true }
+        argv:
+          type: array
+          nullable: true
+          description: The command line of a CLI run; absent for a web request
+          items: { type: string }
         is_ajax: { type: boolean }
         status_code: { type: integer, nullable: true }
         exit_code: { type: integer, nullable: true }
@@ -1145,10 +1150,6 @@ components:
         - type: object
           properties:
             lang: { type: string, enum: [php, js] }
-            argv:
-              type: array
-              nullable: true
-              items: { type: string }
             ip: { type: string, nullable: true }
             server_ip: { type: string, nullable: true }
             server_name: { type: string, nullable: true }
diff --git a/ui/e2e/__screenshots__/appearance.png b/ui/e2e/__screenshots__/appearance.png
index 552c828..d8b2a59 100644
Binary files a/ui/e2e/__screenshots__/appearance.png and b/ui/e2e/__screenshots__/appearance.png differ
diff --git a/ui/e2e/__screenshots__/help-library.png b/ui/e2e/__screenshots__/help-library.png
new file mode 100644
index 0000000..2f59d6e
Binary files /dev/null and b/ui/e2e/__screenshots__/help-library.png differ
diff --git a/ui/e2e/__screenshots__/help-overview.png b/ui/e2e/__screenshots__/help-overview.png
new file mode 100644
index 0000000..567ba4a
Binary files /dev/null and b/ui/e2e/__screenshots__/help-overview.png differ
diff --git a/ui/e2e/__screenshots__/showcase.png b/ui/e2e/__screenshots__/showcase.png
index 0bd391d..c6bb113 100644
Binary files a/ui/e2e/__screenshots__/showcase.png and b/ui/e2e/__screenshots__/showcase.png differ
diff --git a/ui/e2e/__screenshots__/theme-editor.png b/ui/e2e/__screenshots__/theme-editor.png
index 04967d7..3224507 100644
Binary files a/ui/e2e/__screenshots__/theme-editor.png and b/ui/e2e/__screenshots__/theme-editor.png differ
diff --git a/ui/e2e/__screenshots__/viewer-dark.png b/ui/e2e/__screenshots__/viewer-dark.png
index b679c47..d4057d1 100644
Binary files a/ui/e2e/__screenshots__/viewer-dark.png and b/ui/e2e/__screenshots__/viewer-dark.png differ
diff --git a/ui/e2e/__screenshots__/viewer-high-contrast.png b/ui/e2e/__screenshots__/viewer-high-contrast.png
index a9b10d5..796b16e 100644
Binary files a/ui/e2e/__screenshots__/viewer-high-contrast.png and b/ui/e2e/__screenshots__/viewer-high-contrast.png differ
diff --git a/ui/e2e/__screenshots__/viewer-light.png b/ui/e2e/__screenshots__/viewer-light.png
index 88211fc..cce5d05 100644
Binary files a/ui/e2e/__screenshots__/viewer-light.png and b/ui/e2e/__screenshots__/viewer-light.png differ
diff --git a/ui/e2e/__screenshots__/viewer-narrow.png b/ui/e2e/__screenshots__/viewer-narrow.png
new file mode 100644
index 0000000..dded519
Binary files /dev/null and b/ui/e2e/__screenshots__/viewer-narrow.png differ
diff --git a/ui/e2e/viewer.spec.ts b/ui/e2e/viewer.spec.ts
index 1029b1f..b1e3487 100644
--- a/ui/e2e/viewer.spec.ts
+++ b/ui/e2e/viewer.spec.ts
@@ -217,10 +217,47 @@ test('a Laravel log comes in as a request of its own', async ({ page }) => {
     .setInputFiles(
       fileURLToPath(new URL('../../spec/fixtures/thirdparty/laravel.log', import.meta.url)),
     );
-  await expect(page.getByRole('heading', { level: 2, name: 'CLI' })).toBeVisible();
-  await expect(page.getByText('laravel.log', { exact: true })).toBeVisible();
+  // The request is named after the file it came from
+  await expect(page.getByRole('heading', { level: 2, name: 'laravel.log' })).toBeVisible();
   const messages = page.getByRole('list', { name: 'Messages' });
   await expect(messages).toContainText('User logged in');
   await expect(messages).toContainText('SQLSTATE[42S02]: Base table or view not found');
   await page.screenshot({ path: test.info().outputPath('laravel.png') });
 });
+
+// Every field of a form stays inside its dialog, whatever the width of the window
+async function expectFieldsInside(page: Page, name: string) {
+  const dialog = page.getByRole('dialog', { name });
+  const box = await dialog.boundingBox();
+  if (!box) {
+    throw new Error(`no box of the dialog ${name}`);
+  }
+  for (const field of await dialog
+    .locator('input:visible, textarea:visible, select:visible')
+    .all()) {
+    const html = await field.evaluate((element) => element.outerHTML);
+    const inner = await field.boundingBox();
+    if (!inner) {
+      throw new Error(`no box of ${html}`);
+    }
+    expect(inner.x, html).toBeGreaterThanOrEqual(box.x);
+    expect(inner.x + inner.width, html).toBeLessThanOrEqual(box.x + box.width);
+  }
+}
+
+for (const width of [1440, 900, 420]) {
+  test(`the fields of the server and project dialogs fit at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 900 });
+    await page.goto('/');
+    await page.getByRole('button', { name: 'Servers' }).first().click();
+    await page.getByRole('button', { name: 'Add server' }).click();
+    await expectFieldsInside(page, 'New server');
+    await page.getByRole('radio', { name: 'HTTP' }).click();
+    await expectFieldsInside(page, 'New server');
+    await page.keyboard.press('Escape');
+    await page.keyboard.press('Escape');
+
+    await page.getByRole('button', { name: 'Add project' }).first().click();
+    await expectFieldsInside(page, 'New project');
+  });
+}
diff --git a/ui/e2e/visual.spec.ts b/ui/e2e/visual.spec.ts
index 482cae3..59ee2f1 100644
--- a/ui/e2e/visual.spec.ts
+++ b/ui/e2e/visual.spec.ts
@@ -38,3 +38,26 @@ test('the theme editor', async ({ page, request }) => {
   await page.getByRole('button', { name: 'Theme editor…' }).click();
   await expect(page).toHaveScreenshot('theme-editor.png', { mask: mask(page) });
 });
+
+test('the help', async ({ page, request }) => {
+  await resetSettings(request, { theme: 'light' });
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Help' }).click();
+  const help = page.getByRole('dialog', { name: 'Help' });
+  await expect(help).toHaveScreenshot('help-overview.png');
+  await help.getByRole('button', { name: /Connect the library/ }).click();
+  await expect(help).toHaveScreenshot('help-library.png');
+});
+
+test('the viewer in a narrower window', async ({ page, request }) => {
+  await resetSettings(request, { theme: 'light' });
+  await page.setViewportSize({ width: 1100, height: 800 });
+  await page.goto('/');
+  await page
+    .getByRole('region', { name: 'Requests' })
+    .getByRole('button', { name: /\/catalog\/item\?id=42/ })
+    .click();
+  await page.getByRole('button', { name: /Loading the item/ }).click();
+  await expect(page.getByRole('region', { name: 'Message' })).toContainText('item_id');
+  await expect(page).toHaveScreenshot('viewer-narrow.png', { mask: mask(page) });
+});
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 292a4a1..d784863 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -8,6 +8,7 @@
       "name": "wapp-debugger-ui",
       "version": "0.0.0",
       "dependencies": {
+        "@lucide/svelte": "1.56.0",
         "highlight.js": "11.12.0"
       },
       "devDependencies": {
@@ -590,7 +591,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -601,7 +601,6 @@
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
       "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -612,7 +611,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -622,14 +620,12 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
       "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -660,6 +656,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@lucide/svelte": {
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-1.56.0.tgz",
+      "integrity": "sha512-YzbcmneHmPog3wAdXSl7oORgJhFc6klu8rRLMmm5uXwPQ8B0740c7dcNd3oJ72nCPvlbCW1XEmsWa4I0SDIogw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "svelte": "^5"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1003,7 +1008,6 @@
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.13.tgz",
       "integrity": "sha512-wgKggnhZVL9Bfx1OaKKTrYY9BFRk6C8UAkQNUcIv1+llzYrIqy+RZm5HPKzn0NpEBvTVhTqB4kQyllZywsRBRQ==",
-      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "acorn": "^8.9.0"
@@ -1178,7 +1182,6 @@
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
       "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/json-schema": {
@@ -1348,7 +1351,7 @@
       "version": "8.71.2",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.71.2.tgz",
       "integrity": "sha512-y5Ukl3oVp7e/VGxqIoEXoeb/Roj71PAJ4WG/N/RGj+eeDvKRLM15kGr9MijLbN0i03S52zxu31Z98E5gWChJKw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1470,7 +1473,6 @@
       "version": "8.19.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.19.0.tgz",
       "integrity": "sha512-oJlA3XiRm7Cyk6qFD2Jn8ak9B7jSy0qy00ADO3+8dpT0LSjFihQYv4C02LFCSYJV3Q37xYwwRy5m+IpIiUzqWw==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -1570,7 +1572,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
       "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">= 0.4"
@@ -1676,7 +1677,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -1875,7 +1875,6 @@
       "version": "5.9.4",
       "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.9.4.tgz",
       "integrity": "sha512-sPAT4pztbu6586/hrhOnMKS17IJrvg12mXiSPSS3W5qDeN2RGgvZ0diZCm31dBbnevfVmujNO3IM2wrS4Y2Rhg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/dom-accessibility-api": {
@@ -2159,7 +2158,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
       "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/espree": {
@@ -2197,7 +2195,6 @@
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/esrap/-/esrap-2.4.0.tgz",
       "integrity": "sha512-CQPcneEHw/czj32uwQC52nYnax8H4SXt25FCM+LIwGZ49cMIxpOj3bP8wmzcI+Z0HIy5KkClaPhRLfCySzwHPA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
@@ -2803,7 +2800,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
       "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "^1.0.6"
@@ -3231,7 +3227,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
       "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/locate-path": {
@@ -4313,7 +4308,6 @@
       "version": "5.57.2",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.57.2.tgz",
       "integrity": "sha512-1YiPCAXT0Ct6g1vOMmSLa0Nsc3QRMvtDF32ihgglGVrugIuIK38RyDiFNXVDhtQ81TJjSO57NdMw6DyYLqSGDQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/remapping": "^2.3.5",
@@ -4444,7 +4438,6 @@
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.1.tgz",
       "integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==",
-      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">= 0.4"
@@ -4454,7 +4447,6 @@
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
       "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -5096,7 +5088,6 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.5.tgz",
       "integrity": "sha512-msJxIvYDYcoNL+PJsu+7qmpDWsYmAxTY+2TNYXXF0hzBzBk0BMecOqDOG/EckUoKCuKwObfbugIl8QpqHDXeFA==",
-      "dev": true,
       "license": "MIT"
     }
   }
diff --git a/ui/package.json b/ui/package.json
index 87da836..06cd0c7 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -35,6 +35,7 @@
     "vitest": "^5.0.5"
   },
   "dependencies": {
+    "@lucide/svelte": "1.56.0",
     "highlight.js": "11.12.0"
   }
 }
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index 4cf2282..9111002 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -9,12 +9,26 @@
   import RequestTabs from './components/RequestTabs.svelte';
   import RequestList from './components/RequestList.svelte';
   import CommandPalette, { type PaletteCommand } from './components/CommandPalette.svelte';
+  import HelpDialog from './components/HelpDialog.svelte';
   import SettingsDialog from './components/SettingsDialog.svelte';
   import ShortcutsDialog from './components/ShortcutsDialog.svelte';
   import Showcase from './components/Showcase.svelte';
   import ThemeEditor from './components/ThemeEditor.svelte';
   import Toaster from './components/Toaster.svelte';
-  import { emitCommand } from './lib/commands';
+  import { emitCommand, onCommand } from './lib/commands';
+  import type { HelpTopic } from './lib/help';
+  import {
+    Bug,
+    Command,
+    Help,
+    List,
+    MessageSquare,
+    Palette,
+    PanelLeftClose,
+    PanelLeftOpen,
+    Settings,
+    Sparkles,
+  } from './lib/icons';
   import { themePreferences } from './lib/theme';
   import ThemeSwitch from './components/ThemeSwitch.svelte';
   import { createHttpTransport, type Transport, type UpdateInfo } from './lib/api/client';
@@ -88,7 +102,44 @@
   });
 
   let paletteOpen = $state(false);
-  let helpOpen = $state(false);
+  let shortcutsOpen = $state(false);
+  let guideOpen = $state(false);
+  let guideTopic = $state<HelpTopic>('overview');
+
+  function openGuide(topic: HelpTopic = 'overview') {
+    guideTopic = topic;
+    guideOpen = true;
+  }
+
+  $effect(() =>
+    onCommand((command) => {
+      if (command.type === 'help') {
+        openGuide(command.topic);
+      }
+    }),
+  );
+
+  // The sidebar folds to a rail of icons; the choice stays in this browser, a narrow window starts
+  // folded
+  const sidebarKey = 'wapp-debugger.sidebar';
+  function storedSidebar(): boolean | undefined {
+    try {
+      const value = localStorage.getItem(sidebarKey);
+      return value === null ? undefined : value === 'collapsed';
+    } catch {
+      return undefined;
+    }
+  }
+  let collapsed = $state(storedSidebar() ?? window.innerWidth < 900);
+
+  function toggleSidebar() {
+    collapsed = !collapsed;
+    try {
+      localStorage.setItem(sidebarKey, collapsed ? 'collapsed' : 'expanded');
+    } catch {
+      // Private windows may refuse storage: the sidebar still folds for now
+    }
+  }
   let commands = $state<PaletteCommand[]>([]);
 
   // Commands of the palette: projects and servers as they are now, then the actions
@@ -162,7 +213,8 @@
       ...(desktop
         ? [{ id: 'settings', label: i18n.t('settings.title'), run: () => (settingsOpen = true) }]
         : []),
-      { id: 'help', label: i18n.t('keys.title'), hint: '?', run: () => (helpOpen = true) },
+      { id: 'guide', label: i18n.t('help.title'), run: () => openGuide() },
+      { id: 'help', label: i18n.t('keys.title'), hint: '?', run: () => (shortcutsOpen = true) },
     ];
     paletteOpen = true;
   }
@@ -259,7 +311,7 @@
         emitCommand({ type: 'focus-filter' });
         break;
       case '?':
-        helpOpen = true;
+        shortcutsOpen = true;
         break;
       default:
         return;
@@ -299,43 +351,47 @@
   <Showcase />
 {:else}
   <div class="app" data-env-frame={envFrame}>
-    <header class="header">
-      <h1 class="title">{i18n.t('app.title')}</h1>
-      {#if version}
-        <span class="version">{version}</span>
-      {/if}
+    <aside class="sidebar" aria-label={i18n.t('sidebar.label')} data-collapsed={collapsed}>
+      <div class="brand">
+        <span class="logo" aria-hidden="true"><Bug size={16} /></span>
+        <div class="brand-text" class:visually-hidden={collapsed}>
+          <h1 class="title">{i18n.t('app.title')}</h1>
+          {#if version}
+            <span class="version">{version}</span>
+          {/if}
+        </div>
+        <button
+          type="button"
+          class="icon-btn fold"
+          aria-label={i18n.t(collapsed ? 'sidebar.expand' : 'sidebar.collapse')}
+          title={i18n.t(collapsed ? 'sidebar.expand' : 'sidebar.collapse')}
+          onclick={toggleSidebar}
+        >
+          {#if collapsed}<PanelLeftOpen size={16} />{:else}<PanelLeftClose size={16} />{/if}
+        </button>
+      </div>
       {#if update?.url}
         {@const url = update.url}
+        {@const label = i18n.t('update.available', { version: update.latest ?? '' })}
         <a
           class="update"
           href={url}
           target="_blank"
           rel="noopener noreferrer"
+          title={label}
           onclick={(event) => {
             // Inside the desktop window the system browser opens it
             if (isDesktop()) {
               event.preventDefault();
               void openInBrowser(url);
             }
-          }}>{i18n.t('update.available', { version: update.latest ?? '' })}</a
-        >
-      {/if}
-      <span class="spacer"></span>
-      <LanguageSwitch onchange={chooseLocale} />
-      <ThemeSwitch {transport} {store} />
-      <button type="button" class="settings" onclick={() => (appearanceOpen = true)}
-        >{i18n.t('appearance.open')}</button
-      >
-      {#if desktop}
-        <button type="button" class="settings" onclick={() => (settingsOpen = true)}
-          >{i18n.t('settings.title')}</button
+          }}><Sparkles size={14} /><span class:visually-hidden={collapsed}>{label}</span></a
         >
       {/if}
-    </header>
-    <main class="panes">
-      <div class="pane feed">
+      <div class="nav">
         <ProjectsPanel
           {transport}
+          {collapsed}
           selectedId={route.projectId}
           selectedServerId={route.serverId}
           onopenrequest={(projectId, requestId) => navigate({ projectId, requestId })}
@@ -343,6 +399,50 @@
           onselectserver={(id) => navigate({ serverId: id })}
           onenvironment={(value) => (environment = value)}
         />
+      </div>
+      <div class="footer">
+        <div class="tools">
+          <button
+            type="button"
+            class="icon-btn"
+            aria-label={i18n.t('help.open')}
+            title={i18n.t('help.open')}
+            onclick={() => openGuide()}><Help size={16} /></button
+          >
+          <button
+            type="button"
+            class="icon-btn"
+            aria-label={i18n.t('palette.title')}
+            title={`${i18n.t('palette.title')} (Ctrl+K)`}
+            onclick={() => void openPalette()}><Command size={16} /></button
+          >
+          <button
+            type="button"
+            class="icon-btn"
+            aria-label={i18n.t('appearance.open')}
+            title={i18n.t('appearance.open')}
+            onclick={() => (appearanceOpen = true)}><Palette size={16} /></button
+          >
+          {#if desktop}
+            <button
+              type="button"
+              class="icon-btn"
+              aria-label={i18n.t('settings.title')}
+              title={i18n.t('settings.title')}
+              onclick={() => (settingsOpen = true)}><Settings size={16} /></button
+            >
+          {/if}
+        </div>
+        {#if !collapsed}
+          <div class="switches">
+            <ThemeSwitch {transport} {store} compact />
+            <LanguageSwitch onchange={chooseLocale} compact />
+          </div>
+        {/if}
+      </div>
+    </aside>
+    <main class="panes">
+      <div class="pane feed">
         <RequestList
           {transport}
           projectId={route.projectId}
@@ -367,35 +467,43 @@
             onclose={() => navigate({ ...scope, requestId })}
           />
         </div>
-      {:else}
+      {:else if route.requestId !== undefined}
+        {@const requestId = route.requestId}
         <div class="pane">
-          {#if route.requestId !== undefined}
-            {@const requestId = route.requestId}
-            <RequestTabs
-              {transport}
-              currentId={requestId}
-              onselect={(id) => navigate({ ...scope, requestId: id })}
-              oncompare={(id) => navigate({ ...scope, requestId, compareId: id })}
-            />
-            <RequestDetail
-              {transport}
-              requestId={route.requestId}
-              selectedMessageId={route.messageId}
-              onselectmessage={(id) =>
-                navigate({ ...scope, requestId: route.requestId, messageId: id })}
-              onselectrequest={(id) => navigate({ ...scope, requestId: id })}
-            />
-          {:else}
-            <p class="hint">{i18n.t('detail.empty')}</p>
-          {/if}
+          <RequestTabs
+            {transport}
+            currentId={requestId}
+            onselect={(id) => navigate({ ...scope, requestId: id })}
+            oncompare={(id) => navigate({ ...scope, requestId, compareId: id })}
+          />
+          <RequestDetail
+            {transport}
+            requestId={route.requestId}
+            selectedMessageId={route.messageId}
+            onselectmessage={(id) =>
+              navigate({ ...scope, requestId: route.requestId, messageId: id })}
+            onselectrequest={(id) => navigate({ ...scope, requestId: id })}
+          />
         </div>
         <div class="pane">
           {#if route.messageId !== undefined}
             <MessageDetail {transport} messageId={route.messageId} />
-          {:else if route.requestId !== undefined}
-            <p class="hint">{i18n.t('message.empty')}</p>
+          {:else}
+            <div class="empty">
+              <span class="empty-icon"><MessageSquare size={22} /></span>
+              <p class="empty-title">{i18n.t('message.empty')}</p>
+              <p class="empty-text">{i18n.t('message.emptyText')}</p>
+            </div>
           {/if}
         </div>
+      {:else}
+        <div class="pane wide">
+          <div class="empty">
+            <span class="empty-icon"><List size={22} /></span>
+            <p class="empty-title">{i18n.t('detail.emptyTitle')}</p>
+            <p class="empty-text">{i18n.t('detail.emptyText')}</p>
+          </div>
+        </div>
       {/if}
     </main>
   </div>
@@ -408,7 +516,16 @@
   onfilter={(text) => emitCommand({ type: 'filter', text })}
   onclose={() => (paletteOpen = false)}
 />
-<ShortcutsDialog open={helpOpen} onclose={() => (helpOpen = false)} />
+<ShortcutsDialog open={shortcutsOpen} onclose={() => (shortcutsOpen = false)} />
+<HelpDialog
+  open={guideOpen}
+  topic={guideTopic}
+  onclose={() => (guideOpen = false)}
+  onshortcuts={() => {
+    guideOpen = false;
+    shortcutsOpen = true;
+  }}
+/>
 <AppearanceDialog
   open={appearanceOpen}
   {transport}
@@ -427,33 +544,9 @@
 {/if}
 
 <style>
-  .settings {
-    padding: 2px var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: var(--surface);
-    color: var(--text);
-    font: inherit;
-    font-size: var(--font-size-small);
-    cursor: pointer;
-  }
-
-  .update {
-    padding: 0 var(--space-2);
-    border-radius: var(--radius);
-    background: var(--level-warning-soft);
-    color: var(--level-warning);
-    font-size: var(--font-size-small);
-  }
-
-  .settings:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
-  }
-
   .app {
     display: grid;
-    grid-template-rows: auto 1fr;
+    grid-template-columns: auto minmax(0, 1fr);
     height: 100vh;
   }
 
@@ -475,34 +568,126 @@
     --env-frame: var(--env-prod);
   }
 
-  .header {
+  .sidebar {
     display: flex;
+    flex-direction: column;
     gap: var(--space-3);
+    width: var(--sidebar-width);
+    min-height: 0;
+    padding: var(--space-3) 0;
+    border-right: 1px solid var(--border);
+    background: var(--bg);
+  }
+
+  .sidebar[data-collapsed='true'] {
+    width: var(--sidebar-rail);
     align-items: center;
-    padding: var(--space-3) var(--space-4);
-    border-bottom: 1px solid var(--border);
-    background: var(--surface);
+  }
+
+  .brand {
+    display: flex;
+    gap: var(--space-3);
+    align-items: center;
+    padding: 0 var(--space-3) 0 var(--space-4);
+  }
+
+  [data-collapsed='true'] .brand {
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: 0;
+  }
+
+  .logo {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius);
+    background: var(--accent);
+    color: var(--accent-contrast);
+  }
+
+  .brand-text {
+    display: grid;
+    flex: 1;
+    min-width: 0;
   }
 
   .title {
     margin: 0;
-    font-size: 15px;
-    font-weight: 600;
+    font-size: 14px;
+    font-weight: 700;
   }
 
   .version {
+    overflow: hidden;
     color: var(--text-muted);
     font-family: var(--font-mono);
+    font-size: 11px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .update {
+    display: flex;
+    gap: var(--space-2);
+    align-items: center;
+    margin: 0 var(--space-3);
+    padding: var(--space-1) var(--space-3);
+    border-radius: var(--radius);
+    background: var(--level-warning-soft);
+    color: var(--level-warning);
     font-size: var(--font-size-small);
+    text-decoration: none;
   }
 
-  .spacer {
+  [data-collapsed='true'] .update {
+    margin: 0;
+    padding: var(--space-2);
+  }
+
+  .nav {
     flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  [data-collapsed='true'] .nav {
+    width: 100%;
+  }
+
+  .footer {
+    display: grid;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-3) 0;
+    border-top: 1px solid var(--border);
+  }
+
+  [data-collapsed='true'] .footer {
+    padding: var(--space-3) 0 0;
+  }
+
+  .tools {
+    display: flex;
+    gap: var(--space-1);
+  }
+
+  [data-collapsed='true'] .tools {
+    flex-direction: column;
+  }
+
+  .switches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    justify-content: space-between;
   }
 
   .panes {
     display: grid;
-    grid-template-columns: minmax(320px, 1.1fr) minmax(320px, 1fr) minmax(320px, 1fr);
+    grid-template-columns: minmax(340px, 1.15fr) minmax(320px, 1fr) minmax(320px, 1fr);
+    min-width: 0;
     min-height: 0;
     background: var(--surface);
   }
@@ -517,28 +702,55 @@
     border-right: 0;
   }
 
-  /* The comparison takes the places of the request and the message */
+  /* The comparison or the empty state take the places of the request and the message */
   .pane.wide {
     grid-column: span 2;
   }
 
-  .hint {
-    padding: var(--space-6) var(--space-4);
-    color: var(--text-muted);
+  .feed {
+    display: flex;
+    flex-direction: column;
   }
 
-  @media (max-width: 1100px) {
+  /* Narrower: the feed on the left, the request over its message on the right */
+  @media (max-width: 1360px) {
     .panes {
-      grid-template-columns: 1fr;
-      grid-auto-rows: minmax(240px, auto);
+      grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
+      grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);
+    }
+
+    .feed {
+      grid-row: span 2;
     }
 
     .pane.wide {
+      grid-row: span 2;
       grid-column: auto;
     }
 
-    .pane {
+    .pane:not(.feed) {
       border-right: 0;
+    }
+
+    .pane:not(.feed, .wide):nth-child(2) {
+      border-bottom: 1px solid var(--border);
+    }
+  }
+
+  @media (max-width: 900px) {
+    .panes {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: none;
+      grid-auto-rows: minmax(280px, auto);
+      overflow: auto;
+    }
+
+    .feed,
+    .pane.wide {
+      grid-row: auto;
+    }
+
+    .pane {
       border-bottom: 1px solid var(--border);
     }
   }
diff --git a/ui/src/App.test.ts b/ui/src/App.test.ts
index 907a92d..d58bda4 100644
--- a/ui/src/App.test.ts
+++ b/ui/src/App.test.ts
@@ -35,6 +35,7 @@ describe('App', () => {
   beforeEach(() => {
     i18n.set('en');
     window.location.hash = '';
+    localStorage.removeItem('wapp-debugger.sidebar');
   });
 
   it('shows the product name, the switches and an empty feed', async () => {
@@ -43,10 +44,56 @@ describe('App', () => {
     expect(screen.getByRole('heading', { name: 'wapp-debugger', level: 1 })).toBeInTheDocument();
     expect(screen.getByRole('radiogroup', { name: 'Theme' })).toBeInTheDocument();
     expect(screen.getByRole('radiogroup', { name: 'Language' })).toBeInTheDocument();
-    expect(await screen.findByText('No requests yet')).toBeInTheDocument();
+    // With no projects yet the feed says how to start
+    expect(await screen.findByRole('heading', { name: 'Start debugging' })).toBeInTheDocument();
     expect(await screen.findByText('v0.0.0-test')).toBeInTheDocument();
   });
 
+  it('opens the help from the sidebar and from the first steps', async () => {
+    const { transport } = fakeTransport();
+    render(App, { transport });
+    await fireEvent.click(screen.getByRole('button', { name: 'Help' }));
+    const help = screen.getByRole('dialog', { name: 'Help' });
+    expect(within(help).getByRole('heading', { name: 'How it works' })).toBeInTheDocument();
+    await fireEvent.click(within(help).getByRole('button', { name: 'Close' }));
+
+    const start = await screen.findByRole('region', { name: 'Start debugging' });
+    await fireEvent.click(within(start).getByRole('button', { name: /Connect the library/ }));
+    expect(
+      within(screen.getByRole('dialog', { name: 'Help' })).getByRole('heading', {
+        name: 'Connect the library',
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('adds the first project from the first steps', async () => {
+    const { transport } = fakeTransport();
+    render(App, { transport });
+    const start = await screen.findByRole('region', { name: 'Start debugging' });
+    await fireEvent.click(within(start).getByRole('button', { name: 'Add project' }));
+    expect(screen.getByRole('dialog', { name: 'New project' })).toBeInTheDocument();
+  });
+
+  it('collapses the sidebar to a rail and remembers it', async () => {
+    const { transport } = fakeTransport();
+    const { unmount } = render(App, { transport, store: freshStore() });
+    await fireEvent.click(screen.getByRole('button', { name: 'Collapse the sidebar' }));
+    expect(screen.getByRole('button', { name: 'Expand the sidebar' })).toBeInTheDocument();
+    expect(screen.getByRole('complementary')).toHaveAttribute('data-collapsed', 'true');
+    unmount();
+    render(App, { transport });
+    expect(screen.getByRole('button', { name: 'Expand the sidebar' })).toBeInTheDocument();
+    await fireEvent.click(screen.getByRole('button', { name: 'Expand the sidebar' }));
+    expect(screen.getByRole('complementary')).toHaveAttribute('data-collapsed', 'false');
+  });
+
+  it('opens the commands from the sidebar', async () => {
+    const { transport } = fakeTransport();
+    render(App, { transport });
+    await fireEvent.click(screen.getByRole('button', { name: 'Commands' }));
+    expect(await screen.findByRole('dialog', { name: 'Commands' })).toBeInTheDocument();
+  });
+
   it('offers the settings of the desktop app only in the desktop app', async () => {
     const { transport } = fakeTransport();
     render(App, { transport });
diff --git a/ui/src/components/AppearanceDialog.svelte b/ui/src/components/AppearanceDialog.svelte
index d62a785..50129a7 100644
--- a/ui/src/components/AppearanceDialog.svelte
+++ b/ui/src/components/AppearanceDialog.svelte
@@ -10,6 +10,7 @@
   import { themePreferences } from '../lib/theme';
   import { builtInTokens } from '../lib/themeTokens';
   import ColorField from './ColorField.svelte';
+  import { Palette } from '../lib/icons';
   import Dialog from './Dialog.svelte';
   import SegmentedControl from './SegmentedControl.svelte';
   import Select from './Select.svelte';
@@ -76,7 +77,7 @@
   }
 </script>
 
-<Dialog {open} title={i18n.t('appearance.title')} {onclose}>
+<Dialog icon={Palette} {open} title={i18n.t('appearance.title')} {onclose}>
   <div class="settings">
     <div class="field">
       <span class="label" aria-hidden="true">{i18n.t('appearance.theme')}</span>
diff --git a/ui/src/components/CommandPalette.svelte b/ui/src/components/CommandPalette.svelte
index 5f7ff33..77273b3 100644
--- a/ui/src/components/CommandPalette.svelte
+++ b/ui/src/components/CommandPalette.svelte
@@ -2,6 +2,7 @@
   // Ctrl+K: type to find a command, arrows to choose, Enter to run. Typed text that is no command
   // can still filter the feed.
   import { i18n } from '../lib/i18n/locale.svelte';
+  import { Command } from '../lib/icons';
   import Dialog from './Dialog.svelte';
 
   export interface PaletteCommand {
@@ -67,7 +68,7 @@
   }
 </script>
 
-<Dialog {open} title={i18n.t('palette.title')} {onclose}>
+<Dialog {open} title={i18n.t('palette.title')} icon={Command} {onclose}>
   <input
     class="input"
     type="text"
diff --git a/ui/src/components/ConfigDialog.svelte b/ui/src/components/ConfigDialog.svelte
index cfa5a09..464dd32 100644
--- a/ui/src/components/ConfigDialog.svelte
+++ b/ui/src/components/ConfigDialog.svelte
@@ -84,8 +84,7 @@
         <span>{i18n.t('config.exportLabel')}</span>
         <textarea readonly rows="14" value={exported}></textarea>
       </label>
-      <a class="action" href={download} download="wapp-debugger.yaml">{i18n.t('config.download')}</a
-      >
+      <a class="btn" href={download} download="wapp-debugger.yaml">{i18n.t('config.download')}</a>
     {:else}
       <p class="note">{i18n.t('config.importHint')}</p>
       <label class="field">
@@ -93,13 +92,13 @@
         <textarea rows="12" bind:value={pasted} spellcheck="false"></textarea>
       </label>
       <div class="row">
-        <label class="action file">
+        <label class="btn file">
           {i18n.t('config.chooseFile')}
           <input type="file" accept=".yaml,.yml,application/yaml,text/yaml" onchange={chooseFile} />
         </label>
         <button
           type="button"
-          class="action primary"
+          class="btn btn-primary"
           disabled={pasted.trim() === '' || importing}
           onclick={importConfig}>{i18n.t('config.import')}</button
         >
@@ -186,28 +185,6 @@
     justify-content: space-between;
   }
 
-  .action {
-    justify-self: start;
-    padding: 2px var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: var(--surface);
-    color: var(--text);
-    font: inherit;
-    font-size: var(--font-size-small);
-    text-decoration: none;
-    cursor: pointer;
-  }
-
-  .action:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .primary {
-    border-color: var(--accent);
-  }
-
   .file input {
     position: absolute;
     width: 1px;
@@ -216,7 +193,6 @@
   }
 
   .file:focus-within,
-  .action:focus-visible,
   textarea:focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: 1px;
diff --git a/ui/src/components/ConfirmDialog.svelte b/ui/src/components/ConfirmDialog.svelte
index 2e167f3..dd65a79 100644
--- a/ui/src/components/ConfirmDialog.svelte
+++ b/ui/src/components/ConfirmDialog.svelte
@@ -40,14 +40,15 @@
   {#if confirmText !== undefined}
     <label class="field">
       <span>{i18n.t('dialog.typeToConfirm', { text: confirmText })}</span>
-      <input bind:value={typed} autocomplete="off" spellcheck="false" />
+      <input class="input mono" bind:value={typed} autocomplete="off" spellcheck="false" />
     </label>
   {/if}
   {#snippet footer()}
-    <button type="button" class="button" onclick={oncancel}>{i18n.t('dialog.cancel')}</button>
+    <button type="button" class="btn btn-large" onclick={oncancel}>{i18n.t('dialog.cancel')}</button
+    >
     <button
       type="button"
-      class="button primary"
+      class="btn btn-large btn-primary"
       class:danger
       disabled={!allowed}
       onclick={() => allowed && onconfirm()}>{confirmLabel}</button
@@ -68,48 +69,8 @@
     font-size: var(--font-size-small);
   }
 
-  input {
-    padding: var(--space-2) var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface-sunken);
-    color: var(--text);
-    font: inherit;
-    font-family: var(--font-mono);
-    font-size: var(--font-size);
-  }
-
-  input:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 0;
-  }
-
-  .button:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .button {
-    padding: var(--space-2) var(--space-4);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface);
-    color: var(--text);
-    font: inherit;
-    cursor: pointer;
-  }
-
-  .primary {
-    border-color: var(--accent);
-  }
-
   .danger {
     border-color: var(--level-error);
     color: var(--level-error);
   }
-
-  .button:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
-  }
 </style>
diff --git a/ui/src/components/Dialog.svelte b/ui/src/components/Dialog.svelte
index 54fae7e..fef7341 100644
--- a/ui/src/components/Dialog.svelte
+++ b/ui/src/components/Dialog.svelte
@@ -6,14 +6,16 @@
 <script lang="ts">
   // Modal dialog instead of native ones: labelled, traps Tab, closes on Escape, returns the focus.
   // Escape and Tab work wherever the focus is: a button that disappears takes the focus to <body>.
-  import type { Snippet } from 'svelte';
+  import type { Component, Snippet } from 'svelte';
   import { i18n } from '../lib/i18n/locale.svelte';
+  import { X } from '../lib/icons';
 
   let {
     open,
     title,
     role = 'dialog',
     wide = false,
+    icon,
     onclose,
     children,
     footer,
@@ -23,6 +25,8 @@
     role?: 'dialog' | 'alertdialog';
     /** Room for an editor next to its preview. */
     wide?: boolean;
+    /** An icon before the title. */
+    icon?: Component<{ size?: number }>;
     onclose: () => void;
     children: Snippet;
     footer?: Snippet;
@@ -45,7 +49,16 @@
     }
     stack.push(me);
     const previous = document.activeElement as HTMLElement | null;
-    queueMicrotask(() => (focusable()[1] ?? focusable()[0])?.focus());
+    // The first field of a form, else the first control after the close button
+    queueMicrotask(() =>
+      (
+        panel?.querySelector<HTMLElement>(
+          '.body :is(input, textarea, select):not([disabled], [type="file"])',
+        ) ??
+        focusable()[1] ??
+        focusable()[0]
+      )?.focus(),
+    );
     window.addEventListener('keydown', onKeydown);
     return () => {
       window.removeEventListener('keydown', onKeydown);
@@ -101,9 +114,17 @@
       tabindex="-1"
     >
       <header class="header">
+        {#if icon}
+          {@const Icon = icon}
+          <span class="title-icon"><Icon size={16} /></span>
+        {/if}
         <h2 id={titleId} class="title">{title}</h2>
-        <button type="button" class="close" aria-label={i18n.t('dialog.close')} onclick={onclose}
-          >×</button
+        <button
+          type="button"
+          class="icon-btn close"
+          aria-label={i18n.t('dialog.close')}
+          title={i18n.t('dialog.close')}
+          onclick={onclose}><X size={16} /></button
         >
       </header>
       <div class="body">{@render children()}</div>
@@ -126,14 +147,16 @@
   }
 
   .panel {
+    display: flex;
+    flex-direction: column;
     width: min(560px, 100%);
-    max-height: 100%;
-    overflow: auto;
+    /* The window, not the grid area: a percentage of an auto row would not hold the panel */
+    max-height: calc(100dvh - 2 * var(--space-6));
     border: 1px solid var(--border);
-    border-radius: var(--radius);
+    border-radius: var(--radius-large);
     background: var(--surface);
     color: var(--text);
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow-large);
   }
 
   .panel.wide {
@@ -142,39 +165,58 @@
 
   .header {
     display: flex;
+    flex: none;
+    gap: var(--space-3);
     align-items: center;
-    justify-content: space-between;
-    padding: var(--space-3) var(--space-4);
+    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
     border-bottom: 1px solid var(--border);
   }
 
+  .title-icon {
+    display: grid;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius);
+    background: var(--accent-soft);
+    color: var(--accent);
+  }
+
   .title {
+    flex: 1;
     margin: 0;
     font-size: 15px;
-  }
-
-  .close {
-    padding: 0 var(--space-2);
-    border: 0;
-    background: none;
-    color: var(--text-muted);
-    font-size: 18px;
-    cursor: pointer;
+    font-weight: 600;
   }
 
   .body {
-    padding: var(--space-4);
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--space-5);
   }
 
   .footer {
     display: flex;
+    flex: none;
+    flex-wrap: wrap;
     gap: var(--space-3);
     justify-content: flex-end;
-    padding: var(--space-3) var(--space-4);
+    padding: var(--space-3) var(--space-5);
     border-top: 1px solid var(--border);
   }
 
-  .close:focus-visible {
-    outline: 2px solid var(--accent);
+  @media (max-width: 600px) {
+    .backdrop {
+      padding: var(--space-3);
+    }
+
+    .panel {
+      max-height: calc(100dvh - 2 * var(--space-3));
+    }
+
+    .body {
+      padding: var(--space-4);
+    }
   }
 </style>
diff --git a/ui/src/components/Dialog.test.ts b/ui/src/components/Dialog.test.ts
index 15f0bbe..32824f1 100644
--- a/ui/src/components/Dialog.test.ts
+++ b/ui/src/components/Dialog.test.ts
@@ -21,6 +21,15 @@ describe('Dialog', () => {
     expect(dialog.contains(document.activeElement)).toBe(true);
   });
 
+  it('puts the focus into the first field of a form, past buttons before it', async () => {
+    const form = createRawSnippet(() => ({
+      render: () => '<div><button type="button">Help</button><input aria-label="Host" /></div>',
+    }));
+    render(Dialog, { open: true, title: 'Server', onclose: vi.fn(), children: form });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(document.activeElement).toBe(screen.getByLabelText('Host'));
+  });
+
   it('closes on Escape and on the close button', async () => {
     const onclose = vi.fn();
     render(Dialog, { open: true, title: 'Project', onclose, children: content });
diff --git a/ui/src/components/DiscoverProjects.svelte b/ui/src/components/DiscoverProjects.svelte
index bd4af86..97cca78 100644
--- a/ui/src/components/DiscoverProjects.svelte
+++ b/ui/src/components/DiscoverProjects.svelte
@@ -73,9 +73,14 @@
 <form class="search" onsubmit={search}>
   <label class="field">
     <span>{i18n.t('discover.roots')}</span>
-    <input bind:value={roots} placeholder="/var/www, /home/deploy" autocomplete="off" />
+    <input
+      class="input mono"
+      bind:value={roots}
+      placeholder="/var/www, /home/deploy"
+      autocomplete="off"
+    />
   </label>
-  <button type="submit" class="action" disabled={rootList.length === 0 || searching}
+  <button type="submit" class="btn" disabled={rootList.length === 0 || searching}
     >{i18n.t('discover.search')}</button
   >
 </form>
@@ -101,7 +106,7 @@
             {:else}
               <button
                 type="button"
-                class="action primary"
+                class="btn btn-primary"
                 disabled={adding !== undefined}
                 onclick={() => add(project)}>{i18n.t('discover.add')}</button
               >
@@ -136,22 +141,6 @@
     font-size: var(--font-size-small);
   }
 
-  input {
-    padding: var(--space-1) var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface-sunken);
-    color: var(--text);
-    font: inherit;
-    font-family: var(--font-mono);
-  }
-
-  input:focus-visible,
-  .action:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
-  }
-
   .note,
   .path,
   .state {
@@ -199,27 +188,7 @@
     font-size: var(--font-size-small);
   }
 
-  .line .action {
+  .line .btn {
     margin-left: auto;
   }
-
-  .action {
-    padding: 2px var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: var(--surface);
-    color: var(--text);
-    font: inherit;
-    font-size: var(--font-size-small);
-    cursor: pointer;
-  }
-
-  .action:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .primary {
-    border-color: var(--accent);
-  }
 </style>
diff --git a/ui/src/components/FilterLine.svelte b/ui/src/components/FilterLine.svelte
index 9407d61..c636c08 100644
--- a/ui/src/components/FilterLine.svelte
+++ b/ui/src/components/FilterLine.svelte
@@ -2,6 +2,7 @@
   // The filter line of the feed: free text and conditions (level:error status:5xx …), with
   // completions as a combobox (WAI-ARIA): arrows choose, Enter or Tab take one, Escape closes.
   import { onCommand } from '../lib/commands';
+  import { Search } from '../lib/icons';
   import { suggestions as complete } from '../lib/feedQuery';
 
   let {
@@ -71,6 +72,7 @@
 </script>
 
 <div class="line">
+  <span class="search-icon" aria-hidden="true"><Search size={14} /></span>
   <input
     bind:this={input}
     class="search"
@@ -112,10 +114,20 @@
     position: relative;
   }
 
+  .search-icon {
+    position: absolute;
+    top: 50%;
+    left: var(--space-3);
+    display: flex;
+    color: var(--text-muted);
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
   .search {
     box-sizing: border-box;
     width: 100%;
-    padding: var(--space-2) var(--space-3);
+    padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 20px);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     background: var(--surface-sunken);
diff --git a/ui/src/components/GettingStarted.svelte b/ui/src/components/GettingStarted.svelte
new file mode 100644
index 0000000..8beba71
--- /dev/null
+++ b/ui/src/components/GettingStarted.svelte
@@ -0,0 +1,148 @@
+<script lang="ts">
+  // The first steps, while there are no projects: what to do and where the help is.
+  import { emitCommand } from '../lib/commands';
+  import { i18n } from '../lib/i18n/locale.svelte';
+  import { Bug, FolderSearch, Lightbulb, Plus, Rocket } from '../lib/icons';
+</script>
+
+<section class="start" aria-labelledby="start-title">
+  <div class="logo" aria-hidden="true"><Bug size={24} /></div>
+  <h2 id="start-title" class="title">{i18n.t('start.title')}</h2>
+  <p class="text">{i18n.t('start.text')}</p>
+
+  <ol class="steps">
+    <li class="step">
+      <span class="number">1</span>
+      <div class="body">
+        <h3 class="step-title">{i18n.t('start.library')}</h3>
+        <p class="step-text">{i18n.t('start.libraryText')}</p>
+        <button
+          type="button"
+          class="btn"
+          onclick={() => emitCommand({ type: 'help', topic: 'library' })}
+          ><Rocket size={14} />{i18n.t('start.library')}</button
+        >
+      </div>
+    </li>
+    <li class="step">
+      <span class="number">2</span>
+      <div class="body">
+        <h3 class="step-title">{i18n.t('start.project')}</h3>
+        <p class="step-text">{i18n.t('start.projectText')}</p>
+        <div class="buttons">
+          <button
+            type="button"
+            class="btn btn-primary"
+            onclick={() => emitCommand({ type: 'add-project' })}
+            ><Plus size={14} />{i18n.t('projects.add')}</button
+          >
+          <button type="button" class="btn" onclick={() => emitCommand({ type: 'open-servers' })}
+            ><FolderSearch size={14} />{i18n.t('start.find')}</button
+          >
+        </div>
+      </div>
+    </li>
+    <li class="step">
+      <span class="number">3</span>
+      <div class="body">
+        <h3 class="step-title">{i18n.t('start.open')}</h3>
+        <p class="step-text">{i18n.t('start.openText')}</p>
+      </div>
+    </li>
+  </ol>
+
+  <button
+    type="button"
+    class="btn btn-ghost"
+    onclick={() => emitCommand({ type: 'help', topic: 'overview' })}
+    ><Lightbulb size={14} />{i18n.t('start.how')}</button
+  >
+</section>
+
+<style>
+  .start {
+    display: grid;
+    justify-items: center;
+    gap: var(--space-3);
+    max-width: 460px;
+    margin: var(--space-6) auto;
+    padding: 0 var(--space-5);
+    text-align: center;
+  }
+
+  .logo {
+    display: grid;
+    place-items: center;
+    width: 48px;
+    height: 48px;
+    border-radius: var(--radius-large);
+    background: var(--accent);
+    color: var(--accent-contrast);
+  }
+
+  .title {
+    margin: 0;
+    font-size: 18px;
+  }
+
+  .text {
+    margin: 0;
+    color: var(--text-muted);
+  }
+
+  .steps {
+    display: grid;
+    gap: var(--space-3);
+    width: 100%;
+    margin: var(--space-3) 0;
+    padding: 0;
+    list-style: none;
+    text-align: left;
+  }
+
+  .step {
+    display: flex;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-large);
+    background: var(--surface);
+  }
+
+  .number {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: var(--accent-soft);
+    color: var(--text);
+    font-size: var(--font-size-small);
+    font-weight: 600;
+  }
+
+  .body {
+    display: grid;
+    justify-items: start;
+    gap: var(--space-2);
+    min-width: 0;
+  }
+
+  .step-title {
+    margin: 0;
+    font-size: var(--font-size);
+  }
+
+  .step-text {
+    margin: 0;
+    color: var(--text-muted);
+    font-size: var(--font-size-small);
+  }
+
+  .buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+  }
+</style>
diff --git a/ui/src/components/HelpDialog.svelte b/ui/src/components/HelpDialog.svelte
new file mode 100644
index 0000000..5267233
--- /dev/null
+++ b/ui/src/components/HelpDialog.svelte
@@ -0,0 +1,333 @@
+<script lang="ts">
+  import type { Component } from 'svelte';
+  import { help, helpSpans, type HelpTopic } from '../lib/help';
+  import {
+    BookOpen,
+    Check,
+    Copy,
+    Help,
+    Keyboard,
+    Lightbulb,
+    ListChecks,
+    Radio,
+    Rocket,
+    Search,
+    Server,
+  } from '../lib/icons';
+  import { i18n } from '../lib/i18n/locale.svelte';
+  import Dialog from './Dialog.svelte';
+
+  let {
+    open,
+    topic = 'overview',
+    onclose,
+    onshortcuts = () => {},
+  }: {
+    open: boolean;
+    /** The topic to open on. */
+    topic?: HelpTopic;
+    onclose: () => void;
+    /** The full list of keyboard shortcuts. */
+    onshortcuts?: () => void;
+  } = $props();
+
+  const icons: Record<HelpTopic, Component<{ size?: number }>> = {
+    overview: Lightbulb,
+    library: Rocket,
+    projects: ListChecks,
+    servers: Server,
+    push: Radio,
+    reading: Search,
+    shortcuts: Keyboard,
+  };
+
+  let current = $state<HelpTopic>('overview');
+  let copied = $state<number | undefined>(undefined);
+
+  $effect(() => {
+    if (open) {
+      current = topic;
+      copied = undefined;
+    }
+  });
+
+  const sections = $derived(help[i18n.locale]);
+  // Every locale has every topic (help.test.ts)
+  const section = $derived(
+    sections.find((item) => item.id === current) ?? (sections[0] as (typeof sections)[number]),
+  );
+
+  async function copy(text: string, index: number) {
+    await navigator.clipboard.writeText(text);
+    copied = index;
+    setTimeout(() => (copied = copied === index ? undefined : copied), 2000);
+  }
+</script>
+
+{#snippet rich(text: string)}
+  {#each helpSpans(text) as span, index (index)}
+    {#if span.kind === 'code'}<code>{span.text}</code>{:else if span.kind === 'strong'}<strong
+        >{span.text}</strong
+      >{:else}{span.text}{/if}
+  {/each}
+{/snippet}
+
+<Dialog {open} title={i18n.t('help.title')} icon={Help} wide {onclose}>
+  <div class="help">
+    <nav class="topics" aria-label={i18n.t('help.topics')}>
+      {#each sections as item (item.id)}
+        {@const Icon = icons[item.id]}
+        <button
+          type="button"
+          class="topic"
+          aria-current={item.id === current ? 'true' : undefined}
+          onclick={() => {
+            current = item.id;
+            copied = undefined;
+          }}
+        >
+          <Icon size={16} />
+          <span class="topic-text">
+            <span class="topic-title">{item.title}</span>
+            <span class="topic-summary">{item.summary}</span>
+          </span>
+        </button>
+      {/each}
+    </nav>
+
+    <article class="content">
+      <h3 class="heading">{section.title}</h3>
+      {#each section.blocks as block, index (index)}
+        {#if block.kind === 'text'}
+          <p>{@render rich(block.text)}</p>
+        {:else if block.kind === 'tip'}
+          <p class="tip"><Lightbulb size={16} /><span>{@render rich(block.text)}</span></p>
+        {:else if block.kind === 'steps'}
+          <ol class="steps">
+            {#each block.items as item, step (step)}
+              <li><span class="step">{step + 1}</span><span>{@render rich(item)}</span></li>
+            {/each}
+          </ol>
+        {:else if block.kind === 'list'}
+          <ul class="list">
+            {#each block.items as item, at (at)}
+              <li>{@render rich(item)}</li>
+            {/each}
+          </ul>
+        {:else}
+          <div class="code">
+            <pre><code>{block.text}</code></pre>
+            <button
+              type="button"
+              class="icon-btn copy"
+              aria-label={i18n.t(copied === index ? 'help.copied' : 'help.copy')}
+              title={i18n.t(copied === index ? 'help.copied' : 'help.copy')}
+              onclick={() => void copy(block.text, index)}
+            >
+              {#if copied === index}<Check size={14} />{:else}<Copy size={14} />{/if}
+            </button>
+          </div>
+        {/if}
+      {/each}
+      {#if section.id === 'shortcuts'}
+        <button type="button" class="btn" onclick={onshortcuts}>
+          <Keyboard size={14} />{i18n.t('help.allShortcuts')}
+        </button>
+      {/if}
+      {#if section.id === 'library'}
+        <p class="more">
+          <BookOpen size={14} />
+          <a
+            href="https://github.com/hightemp/wapp_php_debugger#readme"
+            target="_blank"
+            rel="noopener noreferrer">README</a
+          >
+        </p>
+      {/if}
+    </article>
+  </div>
+</Dialog>
+
+<style>
+  .help {
+    display: grid;
+    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
+    gap: var(--space-5);
+    min-height: min(560px, 70vh);
+  }
+
+  .topics {
+    display: grid;
+    align-content: start;
+    gap: var(--space-1);
+    padding-right: var(--space-4);
+    border-right: 1px solid var(--border);
+  }
+
+  .topic {
+    display: flex;
+    gap: var(--space-3);
+    align-items: flex-start;
+    padding: var(--space-2) var(--space-3);
+    border: 0;
+    border-radius: var(--radius);
+    background: none;
+    color: var(--text-muted);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .topic :global(.lucide-icon) {
+    margin-top: 2px;
+  }
+
+  .topic:hover {
+    background: var(--surface-hover);
+    color: var(--text);
+  }
+
+  .topic[aria-current='true'] {
+    background: var(--accent-soft);
+    color: var(--text);
+  }
+
+  .topic:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: -2px;
+  }
+
+  .topic-text {
+    display: grid;
+  }
+
+  .topic-title {
+    color: var(--text);
+    font-weight: 600;
+  }
+
+  .topic-summary {
+    font-size: var(--font-size-small);
+  }
+
+  .content {
+    min-width: 0;
+    line-height: 1.55;
+  }
+
+  .heading {
+    margin: 0 0 var(--space-4);
+    font-size: 18px;
+  }
+
+  p {
+    margin: 0 0 var(--space-4);
+  }
+
+  code {
+    padding: 0 var(--space-1);
+    border-radius: 4px;
+    background: var(--surface-sunken);
+    font-family: var(--font-mono);
+    font-size: 0.92em;
+  }
+
+  .tip {
+    display: flex;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius);
+    background: var(--accent-soft);
+  }
+
+  .tip :global(.lucide-icon) {
+    margin-top: 3px;
+    color: var(--accent);
+  }
+
+  .steps {
+    display: grid;
+    gap: var(--space-3);
+    margin: 0 0 var(--space-4);
+    padding: 0;
+    list-style: none;
+  }
+
+  .steps li {
+    display: flex;
+    gap: var(--space-3);
+  }
+
+  .step {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: var(--accent);
+    color: var(--accent-contrast);
+    font-size: var(--font-size-small);
+    font-weight: 600;
+  }
+
+  .list {
+    display: grid;
+    gap: var(--space-2);
+    margin: 0 0 var(--space-4);
+    padding-left: var(--space-5);
+  }
+
+  .code {
+    position: relative;
+    margin: 0 0 var(--space-4);
+  }
+
+  pre {
+    margin: 0;
+    padding: var(--space-3) var(--space-8) var(--space-3) var(--space-4);
+    overflow: auto;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--surface-sunken);
+  }
+
+  pre code {
+    padding: 0;
+    background: none;
+    white-space: pre;
+  }
+
+  .copy {
+    position: absolute;
+    top: var(--space-2);
+    right: var(--space-2);
+  }
+
+  .more {
+    display: flex;
+    gap: var(--space-2);
+    align-items: center;
+  }
+
+  a {
+    color: var(--accent);
+  }
+
+  @media (max-width: 760px) {
+    .help {
+      grid-template-columns: 1fr;
+    }
+
+    .topics {
+      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+      padding: 0 0 var(--space-4);
+      border-right: 0;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .topic-summary {
+      display: none;
+    }
+  }
+</style>
diff --git a/ui/src/components/HelpDialog.test.ts b/ui/src/components/HelpDialog.test.ts
new file mode 100644
index 0000000..8ce5e15
--- /dev/null
+++ b/ui/src/components/HelpDialog.test.ts
@@ -0,0 +1,55 @@
+import { fireEvent, render, screen, within } from '@testing-library/svelte';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { i18n } from '../lib/i18n/locale.svelte';
+import HelpDialog from './HelpDialog.svelte';
+
+describe('HelpDialog', () => {
+  beforeEach(() => i18n.set('en'));
+
+  it('opens on how it works and goes through the topics', async () => {
+    render(HelpDialog, { open: true, onclose: vi.fn() });
+    const dialog = screen.getByRole('dialog', { name: 'Help' });
+    const topics = within(dialog).getByRole('navigation', { name: 'Help topics' });
+    expect(within(topics).getByRole('button', { name: /How it works/ })).toHaveAttribute(
+      'aria-current',
+      'true',
+    );
+    expect(within(dialog).getByRole('heading', { name: 'How it works' })).toBeInTheDocument();
+
+    await fireEvent.click(within(topics).getByRole('button', { name: /Servers: SSH and HTTP/ }));
+    expect(
+      within(dialog).getByRole('heading', { name: 'Servers: SSH and HTTP' }),
+    ).toBeInTheDocument();
+    // Marked parts of a text become code and strong text, not markup characters
+    expect(within(dialog).getByText('~/.ssh/config').tagName).toBe('CODE');
+    expect(dialog.textContent).not.toContain('**');
+  });
+
+  it('opens on the topic it is asked for', () => {
+    render(HelpDialog, { open: true, topic: 'library', onclose: vi.fn() });
+    expect(screen.getByRole('heading', { name: 'Connect the library' })).toBeInTheDocument();
+  });
+
+  it('copies a code sample', async () => {
+    const writeText = vi.fn(async () => {});
+    Object.assign(navigator, { clipboard: { writeText } });
+    render(HelpDialog, { open: true, topic: 'library', onclose: vi.fn() });
+    await fireEvent.click(screen.getAllByRole('button', { name: 'Copy' })[0] as HTMLElement);
+    expect(writeText).toHaveBeenCalledWith(expect.stringContaining('wapp-debugger.php'));
+    expect(await screen.findByRole('button', { name: 'Copied' })).toBeInTheDocument();
+  });
+
+  it('speaks Russian', () => {
+    i18n.set('ru');
+    render(HelpDialog, { open: true, onclose: vi.fn() });
+    expect(screen.getByRole('dialog', { name: 'Справка' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Как это работает' })).toBeInTheDocument();
+  });
+
+  it('opens the list of shortcuts', async () => {
+    const onshortcuts = vi.fn();
+    render(HelpDialog, { open: true, topic: 'shortcuts', onclose: vi.fn(), onshortcuts });
+    await fireEvent.click(screen.getByRole('button', { name: 'All shortcuts' }));
+    expect(onshortcuts).toHaveBeenCalled();
+  });
+});
diff --git a/ui/src/components/IngestToken.svelte b/ui/src/components/IngestToken.svelte
index 36c599c..acc1af7 100644
--- a/ui/src/components/IngestToken.svelte
+++ b/ui/src/components/IngestToken.svelte
@@ -65,11 +65,11 @@
     <p class="hint warning">{i18n.t('ingest.receiverOff')}</p>
   {/if}
   <div class="buttons">
-    <button type="button" class="action" disabled={busy} onclick={() => void make()}
+    <button type="button" class="btn" disabled={busy} onclick={() => void make()}
       >{i18n.t(enabled ? 'ingest.renew' : 'ingest.make')}</button
     >
     {#if enabled}
-      <button type="button" class="action" disabled={busy} onclick={() => void stop()}
+      <button type="button" class="btn" disabled={busy} onclick={() => void stop()}
         >{i18n.t('ingest.stop')}</button
       >
     {/if}
@@ -115,18 +115,6 @@
     gap: var(--space-2);
   }
 
-  .action {
-    padding: 2px var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: var(--surface);
-    color: var(--text);
-    font: inherit;
-    font-size: var(--font-size-small);
-    cursor: pointer;
-  }
-
-  .action:focus-visible,
   textarea:focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: 1px;
diff --git a/ui/src/components/LanguageSwitch.svelte b/ui/src/components/LanguageSwitch.svelte
index 13361fc..e862de5 100644
--- a/ui/src/components/LanguageSwitch.svelte
+++ b/ui/src/components/LanguageSwitch.svelte
@@ -4,13 +4,25 @@
   import SegmentedControl from './SegmentedControl.svelte';
 
   // The App saves the choice with the settings on the viewer
-  let { onchange = (locale: Locale) => i18n.set(locale) }: { onchange?: (locale: Locale) => void } =
-    $props();
+  let {
+    onchange = (locale: Locale) => i18n.set(locale),
+    compact = false,
+  }: { onchange?: (locale: Locale) => void; compact?: boolean } = $props();
 
   // Language names are shown in their own language
   const options = $derived(
-    locales.map((locale) => ({ value: locale, label: i18n.t(`language.${locale}`) })),
+    locales.map((locale) => ({
+      value: locale,
+      label: i18n.t(`language.${locale}`),
+      short: locale.toUpperCase(),
+    })),
   );
 </script>
 
-<SegmentedControl label={i18n.t('language.label')} {options} value={i18n.locale} {onchange} />
+<SegmentedControl
+  label={i18n.t('language.label')}
+  {options}
+  value={i18n.locale}
+  {compact}
+  {onchange}
+/>
diff --git a/ui/src/components/MessageDetail.svelte b/ui/src/components/MessageDetail.svelte
index 9963f8c..231f98f 100644
--- a/ui/src/components/MessageDetail.svelte
+++ b/ui/src/components/MessageDetail.svelte
@@ -3,6 +3,19 @@
   import type { MessageDetail } from '../lib/api/types';
   import { formatDuration, formatTime } from '../lib/format';
   import { i18n } from '../lib/i18n/locale.svelte';
+  import {
+    Braces,
+    Bug,
+    CalendarClock,
+    CircleX,
+    Clock,
+    Code,
+    FileCode,
+    Info,
+    Layers,
+    MessageSquare,
+    TriangleAlert,
+  } from '../lib/icons';
   import CodePreview from './CodePreview.svelte';
   import JsonTree from './JsonTree.svelte';
 
@@ -10,6 +23,14 @@
 
   let { transport, messageId }: { transport: Transport; messageId: number } = $props();
 
+  const levelIcons = {
+    error: CircleX,
+    warning: TriangleAlert,
+    info: Info,
+    message: MessageSquare,
+    debug: Bug,
+  } as const;
+
   let message = $state<MessageDetail | null>(null);
   let status = $state<'loading' | 'ready' | 'not-found' | 'error'>('loading');
   let errorMessage = $state('');
@@ -62,17 +83,21 @@
   {:else if !message}
     <p class="state">{i18n.t('detail.loading')}</p>
   {:else}
+    {@const LevelIcon = levelIcons[message.level]}
     <header class="header" data-level={message.level}>
-      <span class="level">{i18n.t(`levelName.${message.level}`)}</span>
-      <span class="time">{formatTime(message.ts)}</span>
+      <span class="level"><LevelIcon size={13} />{i18n.t(`levelName.${message.level}`)}</span>
+      <span class="time"><CalendarClock size={12} />{formatTime(message.ts)}</span>
       {#if message.type === 'timer'}
-        <span class="time">{formatDuration(message.duration_ms, i18n.locale)}</span>
+        <span class="time"
+          ><Clock size={12} />{formatDuration(message.duration_ms, i18n.locale)}</span
+        >
       {/if}
       {#each message.tags as tag (tag)}<span class="tag">#{tag}</span>{/each}
     </header>
 
     {#if message.exception_class}
       <p class="exception">
+        <CircleX size={14} />
         <span>{message.exception_class}</span>
         {#if message.code}<span class="code">{i18n.t('message.code', { code: message.code })}</span
           >{/if}
@@ -82,6 +107,7 @@
 
     {#if message.source?.file}
       <p class="source">
+        <FileCode size={13} />
         {#if message.source.editor_url}
           <a href={message.source.editor_url}>{location(message.source)}</a>
         {:else}
@@ -89,9 +115,9 @@
         {/if}
         <button
           type="button"
-          class="code-toggle"
+          class="chip code-toggle"
           aria-expanded={showCode}
-          onclick={() => (showCode = !showCode)}>{i18n.t('code.show')}</button
+          onclick={() => (showCode = !showCode)}><Code size={12} />{i18n.t('code.show')}</button
         >
       </p>
       {#if showCode}
@@ -99,7 +125,7 @@
       {/if}
     {/if}
 
-    <h3 class="subtitle">{i18n.t('message.context')}</h3>
+    <h3 class="subtitle"><Braces size={13} />{i18n.t('message.context')}</h3>
     {#if message.context}
       <div class="block"><JsonTree value={message.context} searchable /></div>
     {:else}
@@ -119,7 +145,7 @@
     {/if}
 
     {#if message.trace && message.trace.length > 0}
-      <h3 class="subtitle">{i18n.t('message.trace')}</h3>
+      <h3 class="subtitle"><Layers size={13} />{i18n.t('message.trace')}</h3>
       <ol class="frames">
         {#each message.trace as frame, index (index)}
           <li>
@@ -132,7 +158,7 @@
             {#if frame.file}
               <button
                 type="button"
-                class="code-toggle"
+                class="chip code-toggle"
                 aria-label={i18n.t('code.frame')}
                 aria-expanded={openFrames.includes(index)}
                 onclick={() => toggleFrame(index)}>{i18n.t('code.short')}</button
@@ -149,59 +175,56 @@
 </section>
 
 <style>
-  .code-toggle {
-    margin-left: var(--space-2);
-    padding: 0 var(--space-2);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: var(--surface);
-    color: var(--text-muted);
-    font: inherit;
-    font-size: var(--font-size-small);
-    cursor: pointer;
-  }
-
-  .code-toggle[aria-expanded='true'] {
-    border-color: var(--accent);
-    color: var(--text);
-  }
-
-  .code-toggle:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
-  }
-
   .message {
-    padding: var(--space-3) var(--space-4);
+    padding: var(--space-4);
     overflow: auto;
   }
 
   .header {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--space-3);
-    align-items: baseline;
+    gap: var(--space-2) var(--space-4);
+    align-items: center;
     font-size: var(--font-size-small);
   }
 
   .level {
+    display: inline-flex;
+    gap: var(--space-1);
+    align-items: center;
+    padding: 1px var(--space-2);
+    border-radius: var(--radius);
+    background: var(--surface-sunken);
     color: var(--level-message);
     font-family: var(--font-mono);
     font-weight: 600;
   }
 
   [data-level='error'] .level {
+    background: var(--level-error-soft);
     color: var(--level-error);
   }
 
   [data-level='warning'] .level {
+    background: var(--level-warning-soft);
     color: var(--level-warning);
   }
 
   [data-level='info'] .level {
+    background: var(--level-info-soft);
     color: var(--level-info);
   }
 
+  [data-level='debug'] .level {
+    color: var(--level-debug);
+  }
+
+  .time {
+    display: inline-flex;
+    gap: var(--space-1);
+    align-items: center;
+  }
+
   .time,
   .tag,
   .muted {
@@ -210,8 +233,10 @@
 
   .exception {
     display: flex;
-    gap: var(--space-3);
-    margin: var(--space-3) 0 0;
+    gap: var(--space-2);
+    align-items: center;
+    margin: var(--space-4) 0 0;
+    color: var(--level-error);
     font-family: var(--font-mono);
     font-weight: 600;
   }
@@ -223,26 +248,49 @@
 
   .text {
     margin: var(--space-3) 0;
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius);
+    background: var(--surface-sunken);
     overflow-wrap: anywhere;
     font-family: var(--font-mono);
     white-space: pre-wrap;
   }
 
   .source {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    align-items: center;
     margin: 0 0 var(--space-3);
+    color: var(--text-muted);
     font-family: var(--font-mono);
     font-size: var(--font-size-small);
   }
 
+  .code-toggle {
+    margin-left: var(--space-1);
+  }
+
+  .code-toggle[aria-expanded='true'] {
+    border-color: var(--accent);
+    background: var(--accent-soft);
+    color: var(--text);
+  }
+
   a {
     color: var(--accent);
   }
 
   .subtitle {
-    margin: var(--space-4) 0 var(--space-2);
+    display: flex;
+    gap: var(--space-2);
+    align-items: center;
+    margin: var(--space-5) 0 var(--space-2);
     color: var(--text-muted);
-    font-size: var(--font-size-small);
+    font-size: 11px;
     font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
   }
 
   .block {
@@ -262,8 +310,14 @@
   .frames li {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--space-3);
+    gap: var(--space-1) var(--space-3);
+    align-items: center;
     padding: var(--space-1) 0;
+    border-bottom: 1px dashed var(--border);
+  }
+
+  .frames li:last-child {
+    border-bottom: 0;
   }
 
   .state {
diff --git a/ui/src/components/ProjectDialog.svelte b/ui/src/components/ProjectDialog.svelte
index 110a723..6ea5fa8 100644
--- a/ui/src/components/ProjectDialog.svelte
+++ b/ui/src/components/ProjectDialog.svelte
@@ -2,6 +2,8 @@
   import { ApiError, type Transport } from '../lib/api/client';
   import type { Project, Server } from '../lib/api/types';
   import { i18n } from '../lib/i18n/locale.svelte';
+  import { emitCommand } from '../lib/commands';
+  import { Folder, Help } from '../lib/icons';
   import Dialog from './Dialog.svelte';
   import IngestToken from './IngestToken.svelte';
   import SegmentedControl from './SegmentedControl.svelte';
@@ -138,8 +140,21 @@
   }
 </script>
 
-<Dialog {open} title={i18n.t(project ? 'project.editTitle' : 'project.newTitle')} {onclose}>
+<Dialog
+  {open}
+  title={i18n.t(project ? 'project.editTitle' : 'project.newTitle')}
+  icon={Folder}
+  {onclose}
+>
   <form id="project-form" class="form" onsubmit={submit}>
+    {#if !project}
+      <button
+        type="button"
+        class="btn btn-ghost help"
+        onclick={() => emitCommand({ type: 'help', topic: 'projects' })}
+        ><Help size={14} />{i18n.t('project.help')}</button
+      >
+    {/if}
     {#if !project && servers.length > 1 && serverId !== undefined}
       <div class="field">
         <span>{i18n.t('project.server')}</span>
@@ -157,36 +172,53 @@
     {/if}
     <label class="field">
       <span>{i18n.t('project.name')}</span>
-      <input bind:value={name} autocomplete="off" />
+      <input class="input mono" bind:value={name} autocomplete="off" />
     </label>
     <label class="field">
       <span>{i18n.t('project.rootPath')}</span>
-      <input bind:value={rootPath} placeholder="/var/www/app" autocomplete="off" />
+      <input
+        class="input mono"
+        bind:value={rootPath}
+        placeholder="/var/www/app"
+        autocomplete="off"
+      />
     </label>
     {#if !viaLibrary}
       <label class="field">
         <span>{i18n.t('project.logsDir')}</span>
-        <input bind:value={logsDir} placeholder="/var/www/app/tmp/logs" autocomplete="off" />
+        <input
+          class="input mono"
+          bind:value={logsDir}
+          placeholder="/var/www/app/tmp/logs"
+          autocomplete="off"
+        />
       </label>
     {/if}
     <label class="field">
       <span>{i18n.t('project.localPath')}</span>
-      <input bind:value={localPath} placeholder={i18n.t('project.optional')} autocomplete="off" />
+      <input
+        class="input mono"
+        bind:value={localPath}
+        placeholder={i18n.t('project.optional')}
+        autocomplete="off"
+      />
     </label>
     {#if !viaLibrary}
       <label class="field">
         <span>{i18n.t('project.configPath')}</span>
         <input
+          class="input mono"
           bind:value={configPath}
           placeholder={i18n.t('project.optional')}
           autocomplete="off"
         />
       </label>
     {/if}
-    <div class="row">
+    <div class="form-row">
       <label class="field">
         <span>{i18n.t('project.keepDays')}</span>
         <input
+          class="input mono"
           bind:value={keepDays}
           inputmode="numeric"
           placeholder={i18n.t('project.noLimit')}
@@ -197,6 +229,7 @@
       <label class="field">
         <span>{i18n.t('project.keepMegabytes')}</span>
         <input
+          class="input mono"
           bind:value={keepMegabytes}
           inputmode="numeric"
           placeholder={i18n.t('project.noLimit')}
@@ -223,84 +256,21 @@
     {/if}
   </form>
   {#snippet footer()}
-    <button type="button" class="button" onclick={onclose}>{i18n.t('dialog.cancel')}</button>
-    <button type="submit" form="project-form" class="button primary" disabled={!complete || saving}>
+    <button type="button" class="btn btn-large" onclick={onclose}>{i18n.t('dialog.cancel')}</button>
+    <button
+      type="submit"
+      form="project-form"
+      class="btn btn-large btn-primary"
+      disabled={!complete || saving}
+    >
       {i18n.t('project.save')}
     </button>
   {/snippet}
 </Dialog>
 
 <style>
-  .form {
-    display: grid;
-    gap: var(--space-3);
-  }
-
-  .field {
-    display: grid;
-    gap: var(--space-1);
-    font-size: var(--font-size-small);
-    color: var(--text-muted);
-  }
-
-  input {
-    padding: var(--space-2) var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface-sunken);
-    color: var(--text);
-    font: inherit;
-    font-family: var(--font-mono);
-    font-size: var(--font-size);
-  }
-
-  input:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 0;
-  }
-
-  .row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: var(--space-3);
-  }
-
-  .hint {
-    margin: 0;
-    color: var(--text-muted);
-    font-size: var(--font-size-small);
-  }
-
-  input[aria-invalid='true'] {
-    border-color: var(--level-error);
-  }
-
-  .failure {
-    margin: 0;
-    color: var(--level-error);
-  }
-
-  .button {
-    padding: var(--space-2) var(--space-4);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface);
-    color: var(--text);
-    font: inherit;
-    cursor: pointer;
-  }
-
-  .button:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .primary {
-    border-color: var(--accent);
-  }
-
-  .button:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
+  .help {
+    justify-self: start;
+    padding-left: 0;
   }
 </style>
diff --git a/ui/src/components/ProjectsPanel.svelte b/ui/src/components/ProjectsPanel.svelte
index 247657d..58e5815 100644
--- a/ui/src/components/ProjectsPanel.svelte
+++ b/ui/src/components/ProjectsPanel.svelte
@@ -10,6 +10,17 @@
   import ProjectDialog, { type ProjectFields } from './ProjectDialog.svelte';
   import ServersDialog from './ServersDialog.svelte';
   import Switch from './Switch.svelte';
+  import {
+    Eraser,
+    Folder,
+    HardDrive,
+    Layers,
+    Plus,
+    Server as ServerIcon,
+    Settings,
+    Trash,
+    Upload,
+  } from '../lib/icons';
 
   let {
     transport,
@@ -19,6 +30,7 @@
     onselectserver = () => {},
     onopenrequest = () => {},
     onenvironment = () => {},
+    collapsed = false,
   }: {
     transport: Transport;
     selectedId?: number;
@@ -30,6 +42,8 @@
     onopenrequest?: (projectId: number, requestId: number) => void;
     /** The environment of the chosen project or server feed; none for all projects. */
     onenvironment?: (environment: Environment | undefined) => void;
+    /** A narrow rail: icons and initials, the names as tooltips; no project actions. */
+    collapsed?: boolean;
   } = $props();
 
   let projects = $state<Project[]>([]);
@@ -194,14 +208,22 @@
   }
 </script>
 
-<nav class="projects" aria-label={i18n.t('projects.label')} bind:this={panel}>
+<nav class="projects" class:collapsed aria-label={i18n.t('projects.label')} bind:this={panel}>
   <div class="head">
-    <h2 class="title">{i18n.t('projects.label')}</h2>
-    <button type="button" class="add" onclick={() => (serversOpen = true)}
-      >{i18n.t('servers.open')}</button
+    <h2 class="title" class:visually-hidden={collapsed}>{i18n.t('projects.label')}</h2>
+    <button
+      type="button"
+      class="icon-btn"
+      aria-label={i18n.t('servers.open')}
+      title={i18n.t('servers.open')}
+      onclick={() => (serversOpen = true)}><ServerIcon size={16} /></button
     >
-    <button type="button" class="add" onclick={() => (dialog = 'create')}
-      >{i18n.t('projects.add')}</button
+    <button
+      type="button"
+      class="icon-btn"
+      aria-label={i18n.t('projects.add')}
+      title={i18n.t('projects.add')}
+      onclick={() => (dialog = 'create')}><Plus size={16} /></button
     >
   </div>
 
@@ -210,12 +232,14 @@
       <button
         type="button"
         class="item"
+        title={collapsed ? i18n.t('projects.all') : undefined}
         aria-current={selectedId === undefined && selectedServerId === undefined
           ? 'true'
           : undefined}
         onclick={() => onselect(undefined)}
       >
-        {i18n.t('projects.all')}
+        <span class="mark" aria-hidden="true"><Layers size={16} /></span>
+        <span class="name" class:visually-hidden={collapsed}>{i18n.t('projects.all')}</span>
       </button>
     </li>
     {#each ungrouped as project (project.id)}
@@ -225,20 +249,27 @@
       {#each groups as { server, projects: serverProjects } (server.id)}
         <li class="group-item">
           <div class="group" role="group" aria-label={server.name}>
-            <div class="server">
+            <div class="server" class:visually-hidden={collapsed}>
               <button
                 type="button"
                 class="server-name"
                 aria-current={server.id === selectedServerId ? 'true' : undefined}
-                onclick={() => onselectserver(server.id)}>{server.name}</button
+                onclick={() => onselectserver(server.id)}
               >
+                {#if server.kind === 'local'}<HardDrive size={14} />{:else}<ServerIcon
+                    size={14}
+                  />{/if}
+                <span>{server.name}</span>
+              </button>
               {#if server.environment !== 'local'}
                 <span class="environment" data-environment={server.environment}
                   >{server.environment}</span
                 >
               {/if}
               <span class="state" data-state={server.connection.state}
-                >{i18n.t(`connection.${server.connection.state}`)}</span
+                ><span class="dot" aria-hidden="true"></span>{i18n.t(
+                  `connection.${server.connection.state}`,
+                )}</span
               >
               {#if clockSkew(server.connection.clock_offset_ms)}
                 <span class="clock" title={i18n.t('servers.clockHint')}
@@ -250,7 +281,7 @@
             </div>
             <ul class="list nested">
               {#each serverProjects as project (project.id)}
-                <li>{@render projectButton(project)}</li>
+                <li>{@render projectButton(project, server.environment)}</li>
               {/each}
             </ul>
           </div>
@@ -259,19 +290,22 @@
     {/if}
   </ul>
 
-  {#if selected && selectedServer && selectedServer.environment !== 'local'}
-    <div
-      class="banner"
-      role="status"
-      aria-label={i18n.t('projects.environment')}
-      data-environment={selectedServer.environment}
-    >
-      {selectedServer.environment} · {selectedServer.name}
-    </div>
-  {/if}
-
-  {#if selected}
-    <div class="actions">
+  {#if selected && !collapsed}
+    <section class="card" aria-labelledby="project-card-title">
+      <div class="card-head">
+        <Folder size={16} />
+        <h3 id="project-card-title" class="card-title">{selected.name}</h3>
+      </div>
+      {#if selectedServer && selectedServer.environment !== 'local'}
+        <div
+          class="banner"
+          role="status"
+          aria-label={i18n.t('projects.environment')}
+          data-environment={selectedServer.environment}
+        >
+          {selectedServer.environment} · {selectedServer.name}
+        </div>
+      {/if}
       <label class="debugger">
         <span>{i18n.t('projects.debugger')}</span>
         <Switch
@@ -280,37 +314,55 @@
           onchange={toggleDebugger}
         />
       </label>
-      <button type="button" class="action" onclick={() => (dialog = 'edit')}
-        >{i18n.t('projects.settings')}</button
-      >
-      <label class="action">
-        {i18n.t('transfer.import')}
-        <input
-          class="file"
-          type="file"
-          accept=".jsonl,.ndjson,.log,.txt,application/x-ndjson,text/plain"
-          aria-label={i18n.t('transfer.import')}
-          onchange={importRequest}
-        />
-      </label>
-      <button type="button" class="action" onclick={() => (confirm = 'clear')}
-        >{i18n.t('projects.clear')}</button
-      >
-      <button type="button" class="action danger" onclick={() => (confirm = 'remove')}>
-        {i18n.t('projects.remove')}
-      </button>
-    </div>
+      <div class="actions">
+        <button
+          type="button"
+          class="icon-btn"
+          aria-label={i18n.t('projects.settings')}
+          title={i18n.t('projects.settings')}
+          onclick={() => (dialog = 'edit')}><Settings size={16} /></button
+        >
+        <label class="icon-btn file-button" title={i18n.t('transfer.import')}>
+          <Upload size={16} />
+          <input
+            class="file"
+            type="file"
+            accept=".jsonl,.ndjson,.log,.txt,application/x-ndjson,text/plain"
+            aria-label={i18n.t('transfer.import')}
+            onchange={importRequest}
+          />
+        </label>
+        <button
+          type="button"
+          class="icon-btn"
+          aria-label={i18n.t('projects.clear')}
+          title={i18n.t('projects.clear')}
+          onclick={() => (confirm = 'clear')}><Eraser size={16} /></button
+        >
+        <button
+          type="button"
+          class="icon-btn danger"
+          aria-label={i18n.t('projects.remove')}
+          title={i18n.t('projects.remove')}
+          onclick={() => (confirm = 'remove')}><Trash size={16} /></button
+        >
+      </div>
+    </section>
   {/if}
 </nav>
 
-{#snippet projectButton(project: Project)}
+{#snippet projectButton(project: Project, environment?: Environment)}
   <button
     type="button"
     class="item"
+    title={collapsed ? project.name : undefined}
     aria-current={project.id === selectedId ? 'true' : undefined}
     onclick={() => onselect(project.id)}
   >
-    {project.name}
+    <span class="mark initial" aria-hidden="true" data-environment={environment}
+      >{project.name.slice(0, 1).toUpperCase()}</span
+    >
+    <span class="name" class:visually-hidden={collapsed}>{project.name}</span>
   </button>
 {/snippet}
 
@@ -363,99 +415,145 @@
 />
 
 <style>
-  /* The file input stays reachable from the keyboard inside its label, out of sight */
-  .file {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    opacity: 0;
-  }
-
-  label.action {
-    position: relative;
-    cursor: pointer;
-  }
-
-  label.action:focus-within {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
-  }
-
-  .clock {
-    color: var(--level-warning);
-    font-size: var(--font-size-small);
-  }
-
   .projects {
-    border-bottom: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-height: 0;
   }
 
   .head {
     display: flex;
+    gap: var(--space-1);
     align-items: center;
-    justify-content: space-between;
-    padding: var(--space-2) var(--space-4);
+    padding: 0 var(--space-3) 0 var(--space-4);
+  }
+
+  .collapsed .head {
+    flex-direction: column;
+    padding: 0;
   }
 
   .title {
+    flex: 1;
     margin: 0;
     color: var(--text-muted);
-    font-size: var(--font-size-small);
+    font-size: 11px;
     font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
   }
 
   .list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-2);
+    display: grid;
+    gap: 1px;
     margin: 0;
-    padding: 0 var(--space-4) var(--space-2);
+    padding: 0 var(--space-2);
     list-style: none;
   }
 
-  .item,
-  .add,
-  .action {
-    padding: 2px var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: var(--surface);
+  .list.nested {
+    padding: 0;
+  }
+
+  .item {
+    display: flex;
+    gap: var(--space-3);
+    align-items: center;
+    width: 100%;
+    min-height: 32px;
+    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
+    border: 0;
+    border-radius: var(--radius);
+    background: none;
     color: var(--text);
     font: inherit;
-    font-size: var(--font-size-small);
+    text-align: left;
     cursor: pointer;
   }
 
+  .collapsed .item {
+    justify-content: center;
+    padding: var(--space-1);
+  }
+
+  .item:hover {
+    background: var(--surface-hover);
+  }
+
   .item[aria-current='true'] {
-    border-color: var(--accent);
-    box-shadow: inset 0 0 0 1px var(--accent);
+    background: var(--accent-soft);
+    box-shadow: inset 3px 0 0 var(--accent);
+  }
+
+  .item:focus-visible,
+  .server-name:focus-visible,
+  .file-button:focus-within {
+    outline: 2px solid var(--accent);
+    outline-offset: -2px;
+  }
+
+  .mark {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--radius);
+    color: var(--text-muted);
+  }
+
+  .initial {
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text);
+    font-size: var(--font-size-small);
+    font-weight: 600;
   }
 
-  .add {
-    color: var(--accent);
+  .initial[data-environment='dev'] {
+    border-color: var(--env-dev);
+  }
+
+  .initial[data-environment='stage'] {
+    border-color: var(--env-stage);
+  }
+
+  .initial[data-environment='prod'] {
+    border-color: var(--env-prod);
+  }
+
+  .name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .group-item {
-    flex-basis: 100%;
+    margin-top: var(--space-3);
   }
 
   .group {
     display: grid;
-    gap: var(--space-2);
+    gap: var(--space-1);
   }
 
   .server {
     display: flex;
-    gap: var(--space-3);
-    align-items: baseline;
+    flex-wrap: wrap;
+    gap: var(--space-1) var(--space-3);
+    align-items: center;
+    padding: 0 var(--space-2);
     color: var(--text-muted);
     font-size: var(--font-size-small);
   }
 
   .server-name {
+    display: inline-flex;
+    gap: var(--space-2);
+    align-items: center;
     padding: 0;
     border: 0;
-    border-bottom: 1px dashed transparent;
     background: none;
     color: var(--text);
     font: inherit;
@@ -463,14 +561,9 @@
     cursor: pointer;
   }
 
-  .server-name:hover,
-  .server-name[aria-current='true'] {
-    border-bottom-color: currentcolor;
-  }
-
-  .server-name:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
+  .server-name:hover span,
+  .server-name[aria-current='true'] span {
+    text-decoration: underline;
   }
 
   .environment,
@@ -490,6 +583,19 @@
     color: var(--env-prod);
   }
 
+  .state {
+    display: inline-flex;
+    gap: var(--space-1);
+    align-items: center;
+  }
+
+  .dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: currentcolor;
+  }
+
   .state[data-state='online'] {
     color: var(--level-info);
   }
@@ -498,44 +604,70 @@
     color: var(--level-error);
   }
 
-  .list.nested {
-    padding: 0;
+  .clock {
+    color: var(--level-warning);
+  }
+
+  .card {
+    display: grid;
+    gap: var(--space-3);
+    margin: var(--space-2) var(--space-3) 0;
+    padding: var(--space-3);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-large);
+    background: var(--surface);
+  }
+
+  .card-head {
+    display: flex;
+    gap: var(--space-2);
+    align-items: center;
+    min-width: 0;
+    color: var(--text-muted);
+  }
+
+  .card-title {
+    overflow: hidden;
+    margin: 0;
+    color: var(--text);
+    font-size: var(--font-size);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .banner {
-    margin: 0 var(--space-4) var(--space-2);
     padding: var(--space-1) var(--space-3);
     border-left: 4px solid currentcolor;
+    border-radius: 0 var(--radius) var(--radius) 0;
     background: var(--surface-sunken);
     font-size: var(--font-size-small);
     font-weight: 600;
   }
 
-  .actions {
+  .debugger {
     display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-2);
     align-items: center;
-    padding: 0 var(--space-4) var(--space-3);
+    justify-content: space-between;
+    color: var(--text);
+    font-size: var(--font-size-small);
   }
 
-  .debugger {
-    display: inline-flex;
-    gap: var(--space-2);
-    align-items: center;
-    margin-right: var(--space-2);
-    color: var(--text-muted);
-    font-size: var(--font-size-small);
+  .actions {
+    display: flex;
+    gap: var(--space-1);
+    padding-top: var(--space-2);
+    border-top: 1px solid var(--border);
   }
 
-  .danger {
-    color: var(--level-error);
+  /* The file input stays reachable from the keyboard inside its label, out of sight */
+  .file-button {
+    position: relative;
   }
 
-  .item:focus-visible,
-  .add:focus-visible,
-  .action:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
+  .file {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
   }
 </style>
diff --git a/ui/src/components/ProjectsPanel.test.ts b/ui/src/components/ProjectsPanel.test.ts
index 5294186..8289870 100644
--- a/ui/src/components/ProjectsPanel.test.ts
+++ b/ui/src/components/ProjectsPanel.test.ts
@@ -140,6 +140,25 @@ describe('ProjectsPanel', () => {
     expect(screen.queryByRole('button', { name: 'shop' })).not.toBeInTheDocument();
   });
 
+  it('keeps the names of projects and its buttons when collapsed to a rail', async () => {
+    const fake = fakeTransport({
+      listProjects: vi.fn(async () => ({ items: [sampleProject(1, { name: 'shop' })] })),
+    });
+    render(ProjectsPanel, {
+      transport: fake.transport,
+      selectedId: 1,
+      collapsed: true,
+      onselect: vi.fn(),
+    });
+    const shop = await screen.findByRole('button', { name: 'shop' });
+    expect(shop).toHaveAttribute('title', 'shop');
+    expect(screen.getByRole('button', { name: 'All projects' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Add project' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Servers' })).toBeInTheDocument();
+    // The actions of the project need the room of the full panel
+    expect(screen.queryByRole('switch', { name: 'Debugger' })).not.toBeInTheDocument();
+  });
+
   it('opens the servers', async () => {
     setup();
     await fireEvent.click(await screen.findByRole('button', { name: 'Servers' }));
diff --git a/ui/src/components/RequestDetail.svelte b/ui/src/components/RequestDetail.svelte
index a4bdec3..3ab7489 100644
--- a/ui/src/components/RequestDetail.svelte
+++ b/ui/src/components/RequestDetail.svelte
@@ -1,9 +1,30 @@
 <script lang="ts">
   import { ApiError, type Transport } from '../lib/api/client';
   import type { Level, Message, RequestDetail } from '../lib/api/types';
-  import { formatDuration, formatTime, requestTitle } from '../lib/format';
+  import { formatDuration, formatTime, outcomeKind, requestTitle } from '../lib/format';
   import { i18n } from '../lib/i18n/locale.svelte';
   import { loadAllMessages } from '../lib/messages';
+  import {
+    Braces,
+    Bug,
+    CalendarClock,
+    ChartGantt,
+    CircleX,
+    Clock,
+    Cpu,
+    Database,
+    Download,
+    HardDrive,
+    Info,
+    List,
+    MessageSquare,
+    Pin,
+    Search,
+    StickyNote,
+    Terminal,
+    TriangleAlert,
+    User,
+  } from '../lib/icons';
   import RequestGlobals from './RequestGlobals.svelte';
   import RequestReplay from './RequestReplay.svelte';
   import RequestSql from './RequestSql.svelte';
@@ -26,6 +47,13 @@
   } = $props();
 
   const levels: Level[] = ['error', 'warning', 'info', 'message', 'debug'];
+  const levelIcons = {
+    error: CircleX,
+    warning: TriangleAlert,
+    info: Info,
+    message: MessageSquare,
+    debug: Bug,
+  } as const;
   let loadGeneration = 0;
 
   let request = $state<RequestDetail | null>(null);
@@ -174,16 +202,20 @@
     <p class="state">{i18n.t('detail.loading')}</p>
   {:else}
     <header class="header">
-      <h2 id="request-title" class="title">{requestTitle(request)}</h2>
+      <div class="headline">
+        <span class="outcome" data-kind={outcomeKind(request)}>
+          {#if request.sapi === 'cli'}<Terminal size={12} />{/if}{outcome(request)}
+        </span>
+        <h2 id="request-title" class="title">{requestTitle(request)}</h2>
+      </div>
       <p class="meta">
-        <span>{outcome(request)}</span>
-        <span>{formatDuration(request.duration_ms, i18n.locale)}</span>
-        <span>{formatTime(request.started_at)}</span>
+        <span><Clock size={12} />{formatDuration(request.duration_ms, i18n.locale)}</span>
+        <span><CalendarClock size={12} />{formatTime(request.started_at)}</span>
         {#if request.php_version}<span
-            >{i18n.t('detail.php', { version: request.php_version })}</span
+            ><Cpu size={12} />{i18n.t('detail.php', { version: request.php_version })}</span
           >{/if}
-        {#if request.hostname}<span>{request.hostname}</span>{/if}
-        {#if request.app_user}<span>{request.app_user}</span>{/if}
+        {#if request.hostname}<span><HardDrive size={12} />{request.hostname}</span>{/if}
+        {#if request.app_user}<span><User size={12} />{request.app_user}</span>{/if}
       </p>
       {#if request.argv && request.argv.length > 0}
         <p class="argv">{request.argv.join(' ')}</p>
@@ -191,18 +223,20 @@
       <div class="marks">
         <button
           type="button"
-          class="mark"
+          class="btn"
           aria-pressed={request.pinned}
-          onclick={() => request && mark({ pinned: !request.pinned })}>{i18n.t('marks.pin')}</button
+          onclick={() => request && mark({ pinned: !request.pinned })}
+          ><Pin size={14} />{i18n.t('marks.pin')}</button
         >
         <button
           type="button"
-          class="mark"
+          class="btn"
           aria-expanded={editingNote}
-          onclick={() => (editingNote = !editingNote)}>{i18n.t('marks.note')}</button
+          onclick={() => (editingNote = !editingNote)}
+          ><StickyNote size={14} />{i18n.t('marks.note')}</button
         >
-        <a class="mark" href={`/api/v1/requests/${request.id}/export`} download
-          >{i18n.t('transfer.export')}</a
+        <a class="btn" href={`/api/v1/requests/${request.id}/export`} download
+          ><Download size={14} />{i18n.t('transfer.export')}</a
         >
         <RequestReplay {transport} {request} {messages} />
       </div>
@@ -243,10 +277,10 @@
       label={i18n.t('views.label')}
       idPrefix="request"
       tabs={[
-        { id: 'messages', label: i18n.t('views.messages') },
-        { id: 'timeline', label: i18n.t('views.timeline') },
-        { id: 'sql', label: i18n.t('views.sql'), count: sqlCount },
-        { id: 'globals', label: i18n.t('views.globals') },
+        { id: 'messages', label: i18n.t('views.messages'), icon: List },
+        { id: 'timeline', label: i18n.t('views.timeline'), icon: ChartGantt },
+        { id: 'sql', label: i18n.t('views.sql'), count: sqlCount, icon: Database },
+        { id: 'globals', label: i18n.t('views.globals'), icon: Braces },
       ]}
       value={view}
       onchange={(next: View) => (view = next)}
@@ -276,15 +310,19 @@
     {:else}
       <div role="tabpanel" id="panel-request-messages" aria-labelledby="tab-request-messages">
         <div class="filters" role="group" aria-label={i18n.t('detail.filterLabel')}>
-          <input
-            class="search"
-            type="search"
-            aria-label={i18n.t('detail.search')}
-            placeholder={i18n.t('detail.search')}
-            value={searchInput}
-            oninput={(event) => onSearchInput(event.currentTarget.value)}
-          />
+          <span class="search-box">
+            <Search size={13} />
+            <input
+              class="search"
+              type="search"
+              aria-label={i18n.t('detail.search')}
+              placeholder={i18n.t('detail.search')}
+              value={searchInput}
+              oninput={(event) => onSearchInput(event.currentTarget.value)}
+            />
+          </span>
           {#each levels as level (level)}
+            {@const Icon = levelIcons[level]}
             <button
               type="button"
               class="chip"
@@ -292,7 +330,7 @@
               aria-pressed={activeLevels.includes(level)}
               onclick={() => toggleLevel(level)}
             >
-              {i18n.t(`level.${level}`)}
+              <Icon size={12} />{i18n.t(`level.${level}`)}
             </button>
           {/each}
         </div>
@@ -306,6 +344,7 @@
             label={i18n.t('detail.messages')}
           >
             {#snippet row(message: Message, index: number)}
+              {@const Icon = levelIcons[message.level]}
               <li
                 class="message"
                 data-message-id={message.id}
@@ -320,7 +359,8 @@
                   class="message-button"
                   onclick={() => onselectmessage(message.id)}
                 >
-                  <span class="level">{i18n.t(`levelName.${message.level}`)}</span>
+                  <span class="level"><Icon size={12} />{i18n.t(`levelName.${message.level}`)}</span
+                  >
                   <span class="text">{message.message}</span>
                   <span class="where">{location(message)}</span>
                   {#if message.duration_ms !== undefined && message.duration_ms !== null}
@@ -337,33 +377,91 @@
 </section>
 
 <style>
-  .marks {
+  .detail {
     display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .header {
+    display: grid;
     gap: var(--space-2);
-    margin-top: var(--space-2);
+    padding: var(--space-4);
+    border-bottom: 1px solid var(--border);
   }
 
-  .mark {
-    padding: 0 var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: var(--surface);
+  .headline {
+    display: flex;
+    gap: var(--space-3);
+    align-items: baseline;
+    min-width: 0;
+  }
+
+  .outcome {
+    display: inline-flex;
+    flex: none;
+    gap: 3px;
+    align-items: center;
+    padding: 0 var(--space-2);
+    border-radius: var(--radius);
+    background: var(--level-info-soft);
+    color: var(--level-info);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-small);
+    font-weight: 600;
+  }
+
+  .outcome[data-kind='warn'] {
+    background: var(--level-warning-soft);
+    color: var(--level-warning);
+  }
+
+  .outcome[data-kind='bad'] {
+    background: var(--level-error-soft);
+    color: var(--level-error);
+  }
+
+  .title {
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+    font-family: var(--font-mono);
+    font-size: 15px;
+    font-weight: 600;
+  }
+
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1) var(--space-4);
+    margin: 0;
     color: var(--text-muted);
-    font: inherit;
     font-size: var(--font-size-small);
-    cursor: pointer;
   }
 
-  a.mark {
-    text-decoration: none;
+  .meta span {
+    display: inline-flex;
+    gap: var(--space-1);
+    align-items: center;
   }
 
-  .mark[aria-pressed='true'] {
-    border-color: var(--accent);
-    color: var(--text);
+  .argv {
+    margin: 0;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius);
+    background: var(--surface-sunken);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-small);
+    overflow-wrap: anywhere;
+  }
+
+  .marks {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    align-items: center;
   }
 
-  .mark:focus-visible,
   .note-editor:focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: 1px;
@@ -371,13 +469,15 @@
 
   .note,
   .note-editor {
-    margin: var(--space-2) 0 0;
+    margin: 0;
     font-size: var(--font-size-small);
   }
 
   .note {
-    padding: var(--space-1) var(--space-2);
+    padding: var(--space-2) var(--space-3);
     border-left: 3px solid var(--accent);
+    border-radius: 0 var(--radius) var(--radius) 0;
+    background: var(--accent-soft);
     color: var(--text);
     white-space: pre-wrap;
   }
@@ -394,50 +494,18 @@
     resize: vertical;
   }
 
-  .detail {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-
-  .header {
-    padding: var(--space-3) var(--space-4);
-    border-bottom: 1px solid var(--border);
-  }
-
-  .title {
-    margin: 0;
-    overflow-wrap: anywhere;
-    font-family: var(--font-mono);
-    font-size: 14px;
-    font-weight: 600;
-  }
-
-  .meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-3);
-    margin: var(--space-2) 0 0;
-    color: var(--text-muted);
-    font-size: var(--font-size-small);
-  }
-
-  .argv {
-    margin: var(--space-2) 0 0;
-    font-family: var(--font-mono);
-    font-size: var(--font-size-small);
-  }
-
   .children {
-    padding: var(--space-2) var(--space-4);
+    padding: var(--space-3) var(--space-4);
     border-bottom: 1px solid var(--border);
   }
 
   .subtitle {
     margin: 0 0 var(--space-2);
     color: var(--text-muted);
-    font-size: var(--font-size-small);
+    font-size: 11px;
     font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
   }
 
   .plain {
@@ -460,13 +528,28 @@
     display: flex;
     flex-wrap: wrap;
     gap: var(--space-2);
-    padding: var(--space-2) var(--space-4);
+    align-items: center;
+    padding: var(--space-3) var(--space-4);
     border-bottom: 1px solid var(--border);
   }
 
-  .search {
+  .search-box {
+    position: relative;
+    display: flex;
     flex: 1 1 16ch;
-    padding: 2px var(--space-3);
+    align-items: center;
+    color: var(--text-muted);
+  }
+
+  .search-box :global(.lucide-icon) {
+    position: absolute;
+    left: var(--space-3);
+    pointer-events: none;
+  }
+
+  .search {
+    width: 100%;
+    padding: 3px var(--space-3) 3px calc(var(--space-3) + 18px);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     background: var(--surface-sunken);
@@ -480,20 +563,20 @@
     outline-offset: 0;
   }
 
-  .chip {
-    padding: 2px var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: var(--surface);
-    color: var(--text-muted);
-    font: inherit;
-    font-size: var(--font-size-small);
-    cursor: pointer;
+  .chip[data-level='error'] :global(.lucide-icon) {
+    color: var(--level-error);
   }
 
-  .chip[aria-pressed='true'] {
-    border-color: var(--accent);
-    color: var(--text);
+  .chip[data-level='warning'] :global(.lucide-icon) {
+    color: var(--level-warning);
+  }
+
+  .chip[data-level='info'] :global(.lucide-icon) {
+    color: var(--level-info);
+  }
+
+  .chip[data-level='debug'] :global(.lucide-icon) {
+    color: var(--level-debug);
   }
 
   .message {
@@ -501,20 +584,22 @@
   }
 
   .message[aria-current='true'] {
-    background: var(--surface-hover);
+    background: var(--accent-soft);
+    box-shadow: inset 3px 0 0 var(--accent);
   }
 
   .message-button {
     display: grid;
-    grid-template-columns: 8ch 1fr auto auto;
+    grid-template-columns: 11ch minmax(0, 1fr) auto auto;
     gap: var(--space-3);
+    align-items: center;
     width: 100%;
-    padding: var(--row-padding-y) var(--space-4);
-    line-height: var(--row-line-height);
+    padding: calc(var(--row-padding-y) + 1px) var(--space-4);
     border: 0;
     background: none;
     color: var(--text);
     font: inherit;
+    line-height: var(--row-line-height);
     text-align: left;
     cursor: pointer;
   }
@@ -524,13 +609,15 @@
   }
 
   .message-button:focus-visible,
-  .chip:focus-visible,
   .link:focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: -2px;
   }
 
   .level {
+    display: inline-flex;
+    gap: var(--space-1);
+    align-items: center;
     color: var(--level-message);
     font-family: var(--font-mono);
     font-size: var(--font-size-small);
@@ -548,6 +635,10 @@
     color: var(--level-info);
   }
 
+  [data-level='debug'] .level {
+    color: var(--level-debug);
+  }
+
   .text {
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/ui/src/components/RequestList.svelte b/ui/src/components/RequestList.svelte
index 2d3ec92..4e6b949 100644
--- a/ui/src/components/RequestList.svelte
+++ b/ui/src/components/RequestList.svelte
@@ -1,13 +1,28 @@
 <script lang="ts">
   import type { Transport } from '../lib/api/client';
   import type { Project, Request, Server } from '../lib/api/types';
-  import { formatDuration, formatTime, requestTitle } from '../lib/format';
+  import { formatDuration, formatTime, outcomeKind, requestTitle } from '../lib/format';
   import { i18n } from '../lib/i18n/locale.svelte';
   import { applyStreamEvent } from '../lib/requests';
   import { onCommand } from '../lib/commands';
   import { toasts } from '../lib/toasts.svelte';
   import { parseFeedQuery } from '../lib/feedQuery';
+  import { emitCommand } from '../lib/commands';
+  import {
+    CircleX,
+    Clock,
+    Globe,
+    Inbox,
+    Layers,
+    MessageSquare,
+    Pause,
+    Pin,
+    Play,
+    Terminal,
+    TriangleAlert,
+  } from '../lib/icons';
   import FilterLine from './FilterLine.svelte';
+  import GettingStarted from './GettingStarted.svelte';
   import SegmentedControl from './SegmentedControl.svelte';
   import Switch from './Switch.svelte';
   import VirtualList from './VirtualList.svelte';
@@ -42,6 +57,9 @@
   let projects = $state<Project[]>([]);
   let environment = $state<EnvironmentFilter>('all');
 
+  // Until the names are known, an empty feed is not taken for one with no projects
+  let namesLoaded = $state(false);
+
   async function loadNames() {
     const [serverList, projectList] = await Promise.all([
       transport.listServers(),
@@ -49,6 +67,7 @@
     ]);
     servers = serverList.items;
     projects = projectList.items;
+    namesLoaded = true;
   }
 
   $effect(() => {
@@ -269,16 +288,6 @@
     }
     return request.status_code ? String(request.status_code) : '—';
   }
-
-  function outcomeKind(request: Request): string {
-    if (!request.finished || request.error_count > 0 || (request.status_code ?? 0) >= 500) {
-      return 'bad';
-    }
-    if (request.warning_count > 0 || (request.status_code ?? 0) >= 400) {
-      return 'warn';
-    }
-    return 'ok';
-  }
 </script>
 
 <section class="feed" aria-labelledby="feed-title">
@@ -299,9 +308,9 @@
       <SegmentedControl
         label={i18n.t('feed.sapi')}
         options={[
-          { value: 'all', label: i18n.t('feed.sapiAll') },
-          { value: 'web', label: i18n.t('feed.sapiWeb') },
-          { value: 'cli', label: i18n.t('feed.sapiCli') },
+          { value: 'all', label: i18n.t('feed.sapiAll'), icon: Layers },
+          { value: 'web', label: i18n.t('feed.sapiWeb'), icon: Globe },
+          { value: 'cli', label: i18n.t('feed.sapiCli'), icon: Terminal },
         ]}
         value={sapi}
         onchange={(value: Sapi) => (sapi = value)}
@@ -325,9 +334,10 @@
           onchange={(value: EnvironmentFilter) => (environment = value)}
         />
       {/if}
-      <button type="button" class="pause" aria-pressed={paused} onclick={togglePause}
-        >{i18n.t('feed.pause')}</button
-      >
+      <button type="button" class="btn pause" aria-pressed={paused} onclick={togglePause}>
+        {#if paused}<Play size={14} />{:else}<Pause size={14} />{/if}
+        {i18n.t('feed.pause')}
+      </button>
     </div>
     {#if paused && waiting > 0}
       <button type="button" class="waiting" onclick={togglePause}
@@ -339,16 +349,26 @@
   {#if status === 'loading' && items.length === 0}
     <p class="state">{i18n.t('feed.loading')}</p>
   {:else if status === 'error'}
-    <div class="state error" role="alert">
-      <p>{i18n.t('feed.error', { message: errorMessage })}</p>
-      <button type="button" class="action" onclick={load}>{i18n.t('feed.retry')}</button>
+    <div class="empty" role="alert">
+      <span class="empty-icon error"><CircleX size={22} /></span>
+      <p class="empty-text error">{i18n.t('feed.error', { message: errorMessage })}</p>
+      <button type="button" class="btn" onclick={load}>{i18n.t('feed.retry')}</button>
     </div>
   {:else if items.length === 0 && filtered}
     <p class="state">{i18n.t('feed.noMatches')}</p>
+  {:else if items.length === 0 && namesLoaded && projects.length === 0}
+    <GettingStarted />
   {:else if items.length === 0}
-    <div class="state">
-      <p class="state-title">{i18n.t('feed.emptyTitle')}</p>
-      <p class="hint">{i18n.t('feed.emptyHint')}</p>
+    <div class="empty">
+      <span class="empty-icon"><Inbox size={22} /></span>
+      <p class="empty-title">{i18n.t('feed.emptyTitle')}</p>
+      <p class="empty-text">{i18n.t('feed.emptyHint')}</p>
+      <button
+        type="button"
+        class="btn btn-ghost"
+        onclick={() => emitCommand({ type: 'help', topic: 'library' })}
+        >{i18n.t('feed.emptyHelp')}</button
+      >
     </div>
   {:else}
     <VirtualList {items} key={(request) => request.id} label={i18n.t('feed.title')}>
@@ -366,13 +386,20 @@
             data-kind={outcomeKind(request)}
             onclick={() => onselect(request.id)}
           >
-            <span class="outcome">{outcome(request)}</span>
-            <span class="title" title={request.url ?? request.request_key}
+            <span class="outcome">
+              {#if request.sapi === 'cli'}<Terminal size={12} />{/if}{outcome(request)}
+            </span>
+            <span
+              class="title"
+              title={request.url ?? request.argv?.join(' ') ?? request.request_key}
               >{requestTitle(request)}</span
             >
+            <time class="time" datetime={new Date(request.started_at).toISOString()}
+              >{formatTime(request.started_at)}</time
+            >
             <span class="meta">
               {#if request.pinned}
-                <span class="badge pinned">{i18n.t('marks.pinned')}</span>
+                <span class="badge badge-accent"><Pin size={11} />{i18n.t('marks.pinned')}</span>
               {/if}
               {#if request.note}
                 <span class="row-note" title={request.note}>{request.note}</span>
@@ -381,21 +408,26 @@
                 <span class="origin">{origin(request)}</span>
               {/if}
               {#if request.error_count > 0}
-                <span class="badge error"
-                  >{i18n.t('request.errors', { count: request.error_count })}</span
+                <span class="badge badge-error"
+                  ><CircleX size={11} />{i18n.t('request.errors', {
+                    count: request.error_count,
+                  })}</span
                 >
               {/if}
               {#if request.warning_count > 0}
-                <span class="badge warning"
-                  >{i18n.t('request.warnings', { count: request.warning_count })}</span
+                <span class="badge badge-warning"
+                  ><TriangleAlert size={11} />{i18n.t('request.warnings', {
+                    count: request.warning_count,
+                  })}</span
                 >
               {/if}
-              <span class="count"
-                >{i18n.t('request.messages', { count: request.message_count })}</span
+              <span class="stat"
+                ><MessageSquare size={12} />{i18n.t('request.messages', {
+                  count: request.message_count,
+                })}</span
               >
-              <span class="duration">{formatDuration(request.duration_ms, i18n.locale)}</span>
-              <time datetime={new Date(request.started_at).toISOString()}
-                >{formatTime(request.started_at)}</time
+              <span class="stat"
+                ><Clock size={12} />{formatDuration(request.duration_ms, i18n.locale)}</span
               >
             </span>
           </button>
@@ -403,7 +435,7 @@
       {/snippet}
     </VirtualList>
     {#if nextCursor}
-      <button type="button" class="action more" onclick={loadMore} disabled={loadingMore}>
+      <button type="button" class="btn more" onclick={loadMore} disabled={loadingMore}>
         {i18n.t('feed.loadMore')}
       </button>
     {/if}
@@ -411,115 +443,92 @@
 </section>
 
 <style>
-  .pause {
-    margin-left: auto;
-    padding: 2px var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: var(--surface);
+  .feed {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .toolbar {
+    display: grid;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2) var(--space-3);
+    align-items: center;
+  }
+
+  .errors-only {
+    display: inline-flex;
+    gap: var(--space-2);
+    align-items: center;
     color: var(--text-muted);
-    font: inherit;
     font-size: var(--font-size-small);
-    cursor: pointer;
+  }
+
+  .pause {
+    margin-left: auto;
   }
 
   .pause[aria-pressed='true'] {
     border-color: var(--level-warning);
+    background: var(--level-warning-soft);
     color: var(--level-warning);
   }
 
   .waiting {
     width: 100%;
-    margin-top: var(--space-2);
     padding: var(--space-1);
     border: 1px dashed var(--accent);
     border-radius: var(--radius);
-    background: none;
-    color: var(--accent);
+    background: var(--accent-soft);
+    color: var(--text);
     font: inherit;
     font-size: var(--font-size-small);
     cursor: pointer;
   }
 
-  .pause:focus-visible,
   .waiting:focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: 1px;
   }
 
-  .badge.pinned {
-    background: var(--surface-sunken);
-    color: var(--accent);
-  }
-
-  .row-note {
-    max-width: 16ch;
-    overflow: hidden;
-    color: var(--text);
-    font-style: italic;
-    text-overflow: ellipsis;
-  }
-
   .invalid {
-    margin: var(--space-1) 0 0;
+    margin: 0;
     color: var(--level-warning);
     font-size: var(--font-size-small);
   }
 
-  .origin {
-    color: var(--text-muted);
-    font-family: var(--font-mono);
-  }
-
-  .feed {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-
-  .toolbar {
-    display: grid;
-    gap: var(--space-2);
-    padding: var(--space-2) var(--space-4);
-    border-bottom: 1px solid var(--border);
-  }
-
-  .filters {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-3);
-    align-items: center;
-  }
-
-  .errors-only {
-    display: inline-flex;
-    gap: var(--space-2);
-    align-items: center;
-    color: var(--text-muted);
-    font-size: var(--font-size-small);
-  }
-
   .item[aria-current='true'] .row {
-    background: var(--surface-hover);
+    background: var(--accent-soft);
     box-shadow: inset 3px 0 0 var(--accent);
   }
 
   .row {
+    display: grid;
+    grid-template-columns: minmax(10ch, max-content) minmax(0, 1fr) auto;
+    gap: 2px var(--space-3);
+    align-items: center;
     width: 100%;
+    padding: calc(var(--row-padding-y) + 2px) var(--space-4);
     border: 0;
     border-bottom: 1px solid var(--border);
     background: none;
     color: var(--text);
     font: inherit;
-    text-align: left;
-    cursor: pointer;
-    display: grid;
-    grid-template-columns: 11ch 1fr;
-    gap: var(--space-1) var(--space-3);
-    align-items: center;
-    padding: var(--row-padding-y) var(--space-4);
     line-height: var(--row-line-height);
+    text-align: left;
     font-variant-numeric: tabular-nums;
+    cursor: pointer;
+  }
+
+  .row:hover {
+    background: var(--surface-hover);
   }
 
   .row:focus-visible {
@@ -527,22 +536,28 @@
     outline-offset: -2px;
   }
 
-  .row:hover {
-    background: var(--surface-hover);
-  }
-
   .outcome {
-    white-space: nowrap;
+    display: inline-flex;
+    gap: 3px;
+    align-items: center;
+    justify-self: start;
+    padding: 0 var(--space-2);
+    border-radius: var(--radius);
+    background: var(--level-info-soft);
+    color: var(--level-info);
     font-family: var(--font-mono);
     font-size: var(--font-size-small);
-    color: var(--level-info);
+    font-weight: 600;
+    white-space: nowrap;
   }
 
   .row[data-kind='warn'] .outcome {
+    background: var(--level-warning-soft);
     color: var(--level-warning);
   }
 
   .row[data-kind='bad'] .outcome {
+    background: var(--level-error-soft);
     color: var(--level-error);
   }
 
@@ -553,30 +568,39 @@
     white-space: nowrap;
   }
 
+  .time {
+    color: var(--text-muted);
+    font-size: var(--font-size-small);
+  }
+
   .meta {
-    grid-column: 2;
-    overflow: hidden;
     display: flex;
+    grid-column: 2 / 4;
     gap: var(--space-3);
     align-items: center;
+    overflow: hidden;
     color: var(--text-muted);
     font-size: var(--font-size-small);
     white-space: nowrap;
   }
 
-  .badge {
-    padding: 0 var(--space-2);
-    border-radius: var(--radius);
+  .stat {
+    display: inline-flex;
+    gap: 3px;
+    align-items: center;
   }
 
-  .badge.error {
-    background: var(--level-error-soft);
-    color: var(--level-error);
+  .row-note {
+    max-width: 16ch;
+    overflow: hidden;
+    color: var(--text);
+    font-style: italic;
+    text-overflow: ellipsis;
   }
 
-  .badge.warning {
-    background: var(--level-warning-soft);
-    color: var(--level-warning);
+  .origin {
+    color: var(--text-muted);
+    font-family: var(--font-mono);
   }
 
   .state {
@@ -584,39 +608,10 @@
     color: var(--text-muted);
   }
 
-  .state-title {
-    margin: 0 0 var(--space-2);
-    color: var(--text);
-    font-weight: 600;
-  }
-
-  .hint {
-    margin: 0;
-  }
-
   .error {
     color: var(--level-error);
   }
 
-  .action {
-    padding: var(--space-1) var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface);
-    color: var(--text);
-    font: inherit;
-    cursor: pointer;
-  }
-
-  .action:hover {
-    background: var(--surface-hover);
-  }
-
-  .action:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
-  }
-
   .more {
     align-self: center;
     margin: var(--space-4);
diff --git a/ui/src/components/RequestList.test.ts b/ui/src/components/RequestList.test.ts
index 67b558b..7831a12 100644
--- a/ui/src/components/RequestList.test.ts
+++ b/ui/src/components/RequestList.test.ts
@@ -40,10 +40,24 @@ describe('RequestList', () => {
     expect(rows[1]).toHaveTextContent('CLI');
   });
 
-  it('shows an empty state with a hint', async () => {
+  it('shows an empty state with a hint and the help', async () => {
     const { transport } = feed([{ items: [], next_cursor: null }]);
+    transport.listProjects = vi.fn(async () => ({ items: [sampleProject(1)] }));
+    const { onCommand } = await import('../lib/commands');
+    const commands: unknown[] = [];
+    const stop = onCommand((command) => commands.push(command));
     render(RequestList, { transport });
     expect(await screen.findByText('No requests yet')).toBeInTheDocument();
+    await fireEvent.click(screen.getByRole('button', { name: 'Nothing comes?' }));
+    expect(commands).toContainEqual({ type: 'help', topic: 'library' });
+    stop();
+  });
+
+  it('shows the first steps while there are no projects', async () => {
+    const { transport } = feed([{ items: [], next_cursor: null }]);
+    render(RequestList, { transport });
+    expect(await screen.findByRole('region', { name: 'Start debugging' })).toBeInTheDocument();
+    expect(screen.queryByText('No requests yet')).not.toBeInTheDocument();
   });
 
   it('shows an error and retries', async () => {
@@ -163,7 +177,7 @@ describe('RequestList', () => {
   it('unsubscribes from the stream when removed', async () => {
     const { transport, unsubscribe } = feed([{ items: [], next_cursor: null }]);
     const { unmount } = render(RequestList, { transport });
-    await screen.findByText('No requests yet');
+    await screen.findByRole('region', { name: 'Start debugging' });
     unmount();
     expect(unsubscribe).toHaveBeenCalled();
   });
diff --git a/ui/src/components/RequestReplay.svelte b/ui/src/components/RequestReplay.svelte
index 1490be5..962fc3f 100644
--- a/ui/src/components/RequestReplay.svelte
+++ b/ui/src/components/RequestReplay.svelte
@@ -4,6 +4,7 @@
   import type { Message, Request } from '../lib/api/types';
   import { isDesktop, openInBrowser } from '../lib/api/wails-stream';
   import { i18n } from '../lib/i18n/locale.svelte';
+  import { Copy, ExternalLink } from '../lib/icons';
   import { asCurl, withXdebug, type LoggedGlobals } from '../lib/replay';
   import { toasts } from '../lib/toasts.svelte';
   import Switch from './Switch.svelte';
@@ -54,12 +55,12 @@
 
 {#if url}
   <span class="replay">
-    <button type="button" class="action" onclick={() => void copyCurl()}
-      >{i18n.t('replay.curl')}</button
+    <button type="button" class="btn" onclick={() => void copyCurl()}
+      ><Copy size={14} />{i18n.t('replay.curl')}</button
     >
     {#if reopenable}
       <a
-        class="action"
+        class="btn"
         href={url}
         target="_blank"
         rel="noopener noreferrer"
@@ -69,7 +70,7 @@
             event.preventDefault();
             void openInBrowser(url);
           }
-        }}>{i18n.t('replay.open')}</a
+        }}><ExternalLink size={14} />{i18n.t('replay.open')}</a
       >
     {/if}
     <span class="xdebug">
@@ -91,27 +92,6 @@
     align-items: center;
   }
 
-  .action {
-    padding: 0 var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: var(--surface);
-    color: var(--text-muted);
-    font: inherit;
-    font-size: var(--font-size-small);
-    text-decoration: none;
-    cursor: pointer;
-  }
-
-  .action:hover {
-    color: var(--text);
-  }
-
-  .action:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
-  }
-
   .xdebug {
     display: inline-flex;
     gap: var(--space-1);
diff --git a/ui/src/components/RequestTabs.svelte b/ui/src/components/RequestTabs.svelte
index 422906e..73c26c4 100644
--- a/ui/src/components/RequestTabs.svelte
+++ b/ui/src/components/RequestTabs.svelte
@@ -2,6 +2,7 @@
   import type { Transport } from '../lib/api/client';
   import { requestTitle } from '../lib/format';
   import { i18n } from '../lib/i18n/locale.svelte';
+  import { GitCompareArrows, X } from '../lib/icons';
   import { openTabs } from '../lib/tabs.svelte';
 
   let {
@@ -55,14 +56,14 @@
             class="icon"
             aria-label={i18n.t('tabs.compare', { title: title(tab) })}
             title={i18n.t('tabs.compare', { title: title(tab) })}
-            onclick={() => oncompare(tab.id)}>⇄</button
+            onclick={() => oncompare(tab.id)}><GitCompareArrows size={13} /></button
           >
         {/if}
         <button
           type="button"
           class="icon"
           aria-label={i18n.t('tabs.close', { title: title(tab) })}
-          onclick={() => close(tab.id)}>×</button
+          onclick={() => close(tab.id)}><X size={13} /></button
         >
       </span>
     {/each}
@@ -92,6 +93,7 @@
 
   .tab[data-current='true'] {
     background: var(--surface);
+    box-shadow: inset 0 2px 0 var(--accent);
   }
 
   .open {
@@ -108,6 +110,7 @@
   }
 
   .icon {
+    display: flex;
     padding: 0 var(--space-1);
     border: 0;
     background: none;
diff --git a/ui/src/components/SegmentedControl.svelte b/ui/src/components/SegmentedControl.svelte
index eaf3195..0d2877b 100644
--- a/ui/src/components/SegmentedControl.svelte
+++ b/ui/src/components/SegmentedControl.svelte
@@ -1,14 +1,25 @@
 <script lang="ts" generics="T extends string">
   // A radio group of buttons with arrow-key navigation: replaces native <select> and radios.
+  import type { Component } from 'svelte';
+
   let {
     label,
     options,
     value,
+    compact = false,
     onchange,
   }: {
     label: string;
-    options: readonly { value: T; label: string }[];
+    options: readonly {
+      value: T;
+      label: string;
+      icon?: Component<{ size?: number }>;
+      /** Shown instead of the label when compact. */
+      short?: string;
+    }[];
     value: T;
+    /** Only the icon or the short label shows; the label is the name and the tooltip. */
+    compact?: boolean;
     onchange: (value: T) => void;
   } = $props();
 
@@ -29,7 +40,7 @@
   }
 </script>
 
-<div class="segmented" role="radiogroup" aria-label={label}>
+<div class="segmented" class:compact role="radiogroup" aria-label={label}>
   {#each options as option, index (option.value)}
     <button
       bind:this={buttons[index]}
@@ -39,8 +50,14 @@
       tabindex={value === option.value ? 0 : -1}
       onclick={() => onchange(option.value)}
       onkeydown={(event) => onKeydown(event, index)}
+      aria-label={compact ? option.label : undefined}
+      title={compact ? option.label : undefined}
     >
-      {option.label}
+      {#if option.icon}
+        {@const Icon = option.icon}
+        <Icon size={14} />
+      {/if}
+      {#if !compact}{option.label}{:else if !option.icon}{option.short ?? option.label}{/if}
     </button>
   {/each}
 </div>
@@ -56,6 +73,11 @@
   }
 
   button {
+    display: inline-flex;
+    gap: var(--space-2);
+    align-items: center;
+    justify-content: center;
+    min-width: 26px;
     padding: 4px 10px;
     border: 0;
     border-radius: calc(var(--radius) - 2px);
@@ -66,6 +88,10 @@
     cursor: pointer;
   }
 
+  .compact button {
+    padding: 4px 6px;
+  }
+
   button:hover {
     color: var(--text);
   }
diff --git a/ui/src/components/SegmentedControl.test.ts b/ui/src/components/SegmentedControl.test.ts
new file mode 100644
index 0000000..eca38ad
--- /dev/null
+++ b/ui/src/components/SegmentedControl.test.ts
@@ -0,0 +1,39 @@
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import { Moon, Sun } from '../lib/icons';
+import SegmentedControl from './SegmentedControl.svelte';
+
+describe('SegmentedControl', () => {
+  it('keeps the names of options that show only an icon or a short label', async () => {
+    const onchange = vi.fn();
+    render(SegmentedControl, {
+      label: 'Theme',
+      compact: true,
+      options: [
+        { value: 'light', label: 'Light', icon: Sun },
+        { value: 'dark', label: 'Dark', icon: Moon },
+        { value: 'en', label: 'English', short: 'EN' },
+      ],
+      value: 'light',
+      onchange,
+    });
+    const dark = screen.getByRole('radio', { name: 'Dark' });
+    expect(dark).toHaveAttribute('title', 'Dark');
+    expect(dark.textContent?.trim()).toBe('');
+    expect(screen.getByRole('radio', { name: 'English' }).textContent?.trim()).toBe('EN');
+    await fireEvent.click(dark);
+    expect(onchange).toHaveBeenCalledWith('dark');
+  });
+
+  it('shows the label next to the icon when not compact', () => {
+    render(SegmentedControl, {
+      label: 'Kind',
+      options: [{ value: 'cli', label: 'CLI', icon: Sun }],
+      value: 'cli',
+      onchange: vi.fn(),
+    });
+    const option = screen.getByRole('radio', { name: 'CLI' });
+    expect(option.textContent?.trim()).toBe('CLI');
+    expect(option.querySelector('svg')).not.toBeNull();
+  });
+});
diff --git a/ui/src/components/ServerDialog.svelte b/ui/src/components/ServerDialog.svelte
index 2116c5c..0dfc4e8 100644
--- a/ui/src/components/ServerDialog.svelte
+++ b/ui/src/components/ServerDialog.svelte
@@ -2,6 +2,8 @@
   import { ApiError } from '../lib/api/client';
   import type { ServerInput } from '../lib/api/types';
   import { i18n } from '../lib/i18n/locale.svelte';
+  import { emitCommand } from '../lib/commands';
+  import { Globe, Help, KeyRound, Server } from '../lib/icons';
   import Dialog from './Dialog.svelte';
   import SegmentedControl from './SegmentedControl.svelte';
   import Switch from './Switch.svelte';
@@ -102,15 +104,21 @@
   }
 </script>
 
-<Dialog {open} title={i18n.t('server.newTitle')} {onclose}>
+<Dialog {open} title={i18n.t('server.newTitle')} icon={Server} {onclose}>
   <form id="server-form" class="form" onsubmit={submit}>
+    <button
+      type="button"
+      class="btn btn-ghost help"
+      onclick={() => emitCommand({ type: 'help', topic: 'servers' })}
+      ><Help size={14} />{i18n.t('server.help')}</button
+    >
     <div class="field">
       <span>{i18n.t('server.kind')}</span>
       <SegmentedControl
         label={i18n.t('server.kind')}
         options={[
-          { value: 'ssh', label: 'SSH' },
-          { value: 'http', label: 'HTTP' },
+          { value: 'ssh', label: 'SSH', icon: KeyRound },
+          { value: 'http', label: 'HTTP', icon: Globe },
         ]}
         value={kind}
         onchange={(value: Kind) => (kind = value)}
@@ -118,21 +126,22 @@
     </div>
     <label class="field">
       <span>{i18n.t('server.name')}</span>
-      <input bind:value={name} placeholder="stage" autocomplete="off" />
+      <input class="input mono" bind:value={name} placeholder="stage" autocomplete="off" />
     </label>
     {#if kind === 'ssh'}
       <label class="field">
         <span>{i18n.t('server.host')}</span>
-        <input bind:value={host} placeholder="stage-web" autocomplete="off" />
+        <input class="input mono" bind:value={host} placeholder="stage-web" autocomplete="off" />
       </label>
-      <div class="row">
+      <div class="form-row port-row">
         <label class="field">
           <span>{i18n.t('server.user')}</span>
-          <input bind:value={user} placeholder="deploy" autocomplete="off" />
+          <input class="input mono" bind:value={user} placeholder="deploy" autocomplete="off" />
         </label>
         <label class="field port">
           <span>{i18n.t('server.port')}</span>
           <input
+            class="input mono"
             bind:value={port}
             placeholder="22"
             inputmode="numeric"
@@ -143,13 +152,19 @@
       </div>
       <label class="field">
         <span>{i18n.t('server.jumpHosts')}</span>
-        <input bind:value={jumpHosts} placeholder={i18n.t('server.jumpHint')} autocomplete="off" />
+        <input
+          class="input mono"
+          bind:value={jumpHosts}
+          placeholder={i18n.t('server.jumpHint')}
+          autocomplete="off"
+        />
       </label>
     {:else}
       <p class="hint">{i18n.t('server.httpHint')}</p>
       <label class="field">
         <span>{i18n.t('server.baseUrl')}</span>
         <input
+          class="input mono"
           bind:value={baseUrl}
           placeholder="https://shop.example.test"
           autocomplete="off"
@@ -162,6 +177,7 @@
       <label class="field">
         <span>{i18n.t('server.token')}</span>
         <input
+          class="input mono"
           type="password"
           bind:value={token}
           placeholder={i18n.t('server.tokenHint')}
@@ -197,50 +213,26 @@
     {/if}
   </form>
   {#snippet footer()}
-    <button type="button" class="button" onclick={onclose}>{i18n.t('dialog.cancel')}</button>
-    <button type="submit" form="server-form" class="button primary" disabled={!complete || saving}>
+    <button type="button" class="btn btn-large" onclick={onclose}>{i18n.t('dialog.cancel')}</button>
+    <button
+      type="submit"
+      form="server-form"
+      class="btn btn-large btn-primary"
+      disabled={!complete || saving}
+    >
       {i18n.t('project.save')}
     </button>
   {/snippet}
 </Dialog>
 
 <style>
-  .form {
-    display: grid;
-    gap: var(--space-3);
-  }
-
-  .row {
-    display: grid;
-    grid-template-columns: 1fr 8ch;
-    gap: var(--space-3);
-  }
-
-  .field {
-    display: grid;
-    gap: var(--space-1);
-    color: var(--text-muted);
-    font-size: var(--font-size-small);
-  }
-
-  input {
-    padding: var(--space-2) var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface-sunken);
-    color: var(--text);
-    font: inherit;
-    font-family: var(--font-mono);
-    font-size: var(--font-size);
+  .port-row {
+    grid-template-columns: minmax(0, 1fr) 10ch;
   }
 
-  input[aria-invalid='true'] {
-    border-color: var(--level-error);
-  }
-
-  input:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 0;
+  .help {
+    justify-self: start;
+    padding-left: 0;
   }
 
   .switch-field {
@@ -251,44 +243,9 @@
     font-size: var(--font-size-small);
   }
 
-  .hint {
-    margin: 0;
-    color: var(--text-muted);
-    font-size: var(--font-size-small);
-  }
-
   .warning {
     margin: 0;
     color: var(--level-warning);
     font-size: var(--font-size-small);
   }
-
-  .failure {
-    margin: 0;
-    color: var(--level-error);
-  }
-
-  .button {
-    padding: var(--space-2) var(--space-4);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface);
-    color: var(--text);
-    font: inherit;
-    cursor: pointer;
-  }
-
-  .button:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .primary {
-    border-color: var(--accent);
-  }
-
-  .button:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
-  }
 </style>
diff --git a/ui/src/components/ServersDialog.svelte b/ui/src/components/ServersDialog.svelte
index f765f3d..0f8807d 100644
--- a/ui/src/components/ServersDialog.svelte
+++ b/ui/src/components/ServersDialog.svelte
@@ -1,5 +1,16 @@
 <script lang="ts">
   import type { Transport } from '../lib/api/client';
+  import {
+    ArrowLeftRight,
+    FolderSearch,
+    Globe,
+    HardDrive,
+    KeyRound,
+    Plus,
+    RefreshCw,
+    Server as ServerIcon,
+    Trash,
+  } from '../lib/icons';
   import type { Server, ServerCheck, ServerCheckStep, ServerInput } from '../lib/api/types';
   import { clockSkew } from '../lib/format';
   import { i18n } from '../lib/i18n/locale.svelte';
@@ -185,17 +196,26 @@
   }
 </script>
 
-<Dialog {open} title={i18n.t('servers.title')} {onclose}>
+<Dialog {open} title={i18n.t('servers.title')} icon={ServerIcon} {onclose}>
   <ul class="servers">
     {#each servers as server (server.id)}
       {@const state = checks[server.id]}
       <li class="server" aria-label={server.name}>
         <div class="head">
+          <span class="kind" aria-hidden="true">
+            {#if server.kind === 'local'}<HardDrive
+                size={16}
+              />{:else if server.kind === 'ssh'}<KeyRound size={16} />{:else}<Globe
+                size={16}
+              />{/if}
+          </span>
           <span class="name">{server.name}</span>
           <span class="badge">{server.kind} · {server.environment}</span>
           <span class="address">{address(server)}</span>
           <span class="state" data-state={server.connection.state}
-            >{i18n.t(`connection.${server.connection.state}`)}</span
+            ><span class="dot" aria-hidden="true"></span>{i18n.t(
+              `connection.${server.connection.state}`,
+            )}</span
           >
           {#if clockSkew(server.connection.clock_offset_ms)}
             <span class="clock" title={i18n.t('servers.clockHint')}
@@ -207,26 +227,27 @@
           {#if server.kind !== 'http'}
             <button
               type="button"
-              class="action"
+              class="btn"
               aria-expanded={searching[server.id] ?? false}
               onclick={() => (searching[server.id] = !searching[server.id])}
-              >{i18n.t('discover.open')}</button
+              ><FolderSearch size={14} />{i18n.t('discover.open')}</button
             >
           {/if}
           {#if server.kind === 'http'}
             <button
               type="button"
-              class="action"
+              class="btn"
               aria-expanded={tokenFor === server.id}
-              onclick={() => toggleToken(server)}>{i18n.t('servers.token')}</button
+              onclick={() => toggleToken(server)}
+              ><KeyRound size={14} />{i18n.t('servers.token')}</button
             >
           {/if}
           {#if server.kind !== 'local'}
-            <button type="button" class="action" onclick={() => check(server)}
-              >{i18n.t('servers.check')}</button
+            <button type="button" class="btn" onclick={() => check(server)}
+              ><RefreshCw size={14} />{i18n.t('servers.check')}</button
             >
-            <button type="button" class="action danger" onclick={() => (removing = server)}>
-              {i18n.t('servers.remove')}
+            <button type="button" class="btn btn-danger" onclick={() => (removing = server)}>
+              <Trash size={14} />{i18n.t('servers.remove')}
             </button>
           {/if}
         </div>
@@ -241,13 +262,14 @@
             <label class="token-field">
               <span>{i18n.t('server.token')}</span>
               <input
+                class="input mono"
                 type="password"
                 autocomplete="off"
                 placeholder={i18n.t('server.tokenHint')}
                 bind:value={token}
               />
             </label>
-            <button type="submit" class="action primary" disabled={token.length < minTokenLength}
+            <button type="submit" class="btn btn-primary" disabled={token.length < minTokenLength}
               >{i18n.t('project.save')}</button
             >
           </form>
@@ -286,7 +308,7 @@
               <p class="note">{i18n.t('servers.keyHint', { file: key.file })}</p>
               <button
                 type="button"
-                class="action primary"
+                class="btn btn-primary"
                 onclick={() => trust(server, fingerprint)}
               >
                 {i18n.t('servers.trust')}
@@ -298,11 +320,11 @@
     {/each}
   </ul>
   {#snippet footer()}
-    <button type="button" class="action" onclick={() => (configOpen = true)}
-      >{i18n.t('config.open')}</button
+    <button type="button" class="btn" onclick={() => (configOpen = true)}
+      ><ArrowLeftRight size={14} />{i18n.t('config.open')}</button
     >
-    <button type="button" class="action primary" onclick={() => (adding = true)}
-      >{i18n.t('servers.add')}</button
+    <button type="button" class="btn btn-primary" onclick={() => (adding = true)}
+      ><Plus size={14} />{i18n.t('servers.add')}</button
     >
   {/snippet}
 </Dialog>
@@ -342,9 +364,27 @@
   }
 
   .server {
-    padding: var(--space-3);
+    padding: var(--space-3) var(--space-4);
     border: 1px solid var(--border);
+    border-radius: var(--radius-large);
+    background: var(--surface);
+  }
+
+  .kind {
+    display: grid;
+    place-items: center;
+    width: 28px;
+    height: 28px;
     border-radius: var(--radius);
+    background: var(--surface-sunken);
+    color: var(--text-muted);
+  }
+
+  .dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: currentcolor;
   }
 
   .head {
@@ -372,6 +412,9 @@
   }
 
   .state {
+    display: inline-flex;
+    gap: var(--space-1);
+    align-items: center;
     margin-left: auto;
     font-size: var(--font-size-small);
   }
@@ -458,33 +501,4 @@
     color: var(--text);
     font: inherit;
   }
-
-  .action:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .action {
-    padding: 2px var(--space-3);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: var(--surface);
-    color: var(--text);
-    font: inherit;
-    font-size: var(--font-size-small);
-    cursor: pointer;
-  }
-
-  .primary {
-    border-color: var(--accent);
-  }
-
-  .danger {
-    color: var(--level-error);
-  }
-
-  .action:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
-  }
 </style>
diff --git a/ui/src/components/SettingsDialog.svelte b/ui/src/components/SettingsDialog.svelte
index 51d9577..eb827f1 100644
--- a/ui/src/components/SettingsDialog.svelte
+++ b/ui/src/components/SettingsDialog.svelte
@@ -3,6 +3,7 @@
   import type { Transport } from '../lib/api/client';
   import type { DesktopSettings, Project } from '../lib/api/types';
   import { i18n } from '../lib/i18n/locale.svelte';
+  import { Settings } from '../lib/icons';
   import Dialog from './Dialog.svelte';
   import SegmentedControl from './SegmentedControl.svelte';
   import Switch from './Switch.svelte';
@@ -53,7 +54,7 @@
   }
 </script>
 
-<Dialog {open} title={i18n.t('settings.title')} {onclose}>
+<Dialog icon={Settings} {open} title={i18n.t('settings.title')} {onclose}>
   {#if settings}
     {@const current = settings}
     <div class="settings">
diff --git a/ui/src/components/ShortcutsDialog.svelte b/ui/src/components/ShortcutsDialog.svelte
index 4c7fc1f..739c04f 100644
--- a/ui/src/components/ShortcutsDialog.svelte
+++ b/ui/src/components/ShortcutsDialog.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { i18n } from '../lib/i18n/locale.svelte';
   import type { MessageKey } from '../lib/i18n/messages';
+  import { Keyboard } from '../lib/icons';
   import Dialog from './Dialog.svelte';
 
   let { open, onclose }: { open: boolean; onclose: () => void } = $props();
@@ -16,7 +17,7 @@
   ];
 </script>
 
-<Dialog {open} title={i18n.t('keys.title')} {onclose}>
+<Dialog icon={Keyboard} {open} title={i18n.t('keys.title')} {onclose}>
   <dl class="keys">
     {#each shortcuts as [keys, what] (keys)}
       <dt><kbd>{keys}</kbd></dt>
diff --git a/ui/src/components/Showcase.svelte b/ui/src/components/Showcase.svelte
index 4072834..e63ce2d 100644
--- a/ui/src/components/Showcase.svelte
+++ b/ui/src/components/Showcase.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   // The component showcase (#/dev/components): every component in every built-in theme side by side,
   // to check a change of tokens or of a component at a glance. The e2e snapshots take it too.
+  import { Download, Eraser, Pin, Plus, Settings } from '../lib/icons';
   import { i18n } from '../lib/i18n/locale.svelte';
   import { themeBases, type ThemeBase } from '../lib/themeTokens';
   import ColorField from './ColorField.svelte';
@@ -62,6 +63,26 @@
           value={density[theme] ?? 'comfortable'}
           onchange={(value) => (density[theme] = value)}
         />
+        <div class="row">
+          <button type="button" class="btn btn-primary"><Plus size={14} />Add project</button>
+          <button type="button" class="btn"><Download size={14} />Export</button>
+          <button type="button" class="btn" aria-pressed="true"><Pin size={14} />Pin</button>
+          <button type="button" class="btn btn-ghost">Help</button>
+          <button type="button" class="icon-btn" aria-label="Settings" title="Settings"
+            ><Settings size={16} /></button
+          >
+          <button type="button" class="icon-btn danger" aria-label="Clear logs" title="Clear logs"
+            ><Eraser size={16} /></button
+          >
+        </div>
+        <div class="row">
+          <span class="badge badge-error">1 error</span>
+          <span class="badge badge-warning">2 warnings</span>
+          <span class="badge badge-info">200</span>
+          <span class="badge badge-accent">pinned</span>
+          <button type="button" class="chip" aria-pressed="true">Errors</button>
+          <button type="button" class="chip">Debug</button>
+        </div>
         <div class="row">
           <Switch
             label="On"
diff --git a/ui/src/components/Showcase.test.ts b/ui/src/components/Showcase.test.ts
index 27d21c1..619b0ff 100644
--- a/ui/src/components/Showcase.test.ts
+++ b/ui/src/components/Showcase.test.ts
@@ -22,6 +22,10 @@ describe('Showcase', () => {
       expect(within(column).getByRole('combobox', { name: 'Server' })).toBeInTheDocument();
       expect(within(column).getByRole('tablist', { name: 'Request' })).toBeInTheDocument();
       expect(within(column).getByRole('textbox', { name: 'Color of accent' })).toBeInTheDocument();
+      // The shared controls: buttons, an icon button with its name, badges
+      expect(within(column).getByRole('button', { name: 'Add project' })).toBeInTheDocument();
+      expect(within(column).getByRole('button', { name: 'Clear logs' })).toBeInTheDocument();
+      expect(within(column).getByText('1 error')).toHaveClass('badge-error');
       // The variables tree and the preview of the viewer
       expect(within(column).getAllByText('"Blue mug"')).toHaveLength(2);
     }
diff --git a/ui/src/components/Tabs.svelte b/ui/src/components/Tabs.svelte
index 1cc5f2d..6da8b46 100644
--- a/ui/src/components/Tabs.svelte
+++ b/ui/src/components/Tabs.svelte
@@ -1,5 +1,7 @@
 <script lang="ts" generics="T extends string">
   // Tabs (WAI-ARIA): arrows move between tabs, the panel is labelled by its tab — panelId(id).
+  import type { Component } from 'svelte';
+
   let {
     label,
     tabs,
@@ -8,7 +10,7 @@
     onchange,
   }: {
     label: string;
-    tabs: readonly { id: T; label: string; count?: number }[];
+    tabs: readonly { id: T; label: string; count?: number; icon?: Component<{ size?: number }> }[];
     value: T;
     /** Tabs are tab-<prefix>-<id>, their panels panel-<prefix>-<id> */
     idPrefix: string;
@@ -54,6 +56,10 @@
       tabindex={tab.id === value ? 0 : -1}
       onclick={() => onchange(tab.id)}
     >
+      {#if tab.icon}
+        {@const Icon = tab.icon}
+        <Icon size={14} />
+      {/if}
       {#if tab.count !== undefined}{`${tab.label} `}<span class="count">{tab.count}</span
         >{:else}{tab.label}{/if}
     </button>
@@ -69,7 +75,10 @@
   }
 
   button {
-    padding: var(--space-2) var(--space-3);
+    display: inline-flex;
+    gap: var(--space-2);
+    align-items: center;
+    padding: var(--space-3) var(--space-3) var(--space-2);
     border: 0;
     border-bottom: 2px solid transparent;
     background: none;
diff --git a/ui/src/components/ThemeEditor.svelte b/ui/src/components/ThemeEditor.svelte
index c9a7388..ae41be7 100644
--- a/ui/src/components/ThemeEditor.svelte
+++ b/ui/src/components/ThemeEditor.svelte
@@ -188,7 +188,7 @@
         </div>
         <label class="name">
           <span>{i18n.t('themeEditor.name')}</span>
-          <input type="text" maxlength="60" bind:value={draft.name} />
+          <input class="input mono" type="text" maxlength="60" bind:value={draft.name} />
         </label>
         <div class="name">
           <span aria-hidden="true">{i18n.t('themeEditor.base')}</span>
@@ -253,7 +253,7 @@
   </div>
 
   {#snippet footer()}
-    <label class="button file-button">
+    <label class="btn btn-large file-button">
       {i18n.t('themeEditor.import')}
       <input
         class="file"
@@ -263,18 +263,23 @@
         onchange={upload}
       />
     </label>
-    <button type="button" class="button" onclick={download}>{i18n.t('themeEditor.export')}</button>
+    <button type="button" class="btn btn-large" onclick={download}
+      >{i18n.t('themeEditor.export')}</button
+    >
     <span class="spacer"></span>
     {#if draft.id}
-      <button type="button" class="button danger" onclick={() => (deleting = true)}
+      <button type="button" class="btn btn-large btn-danger" onclick={() => (deleting = true)}
         >{i18n.t('themeEditor.delete')}</button
       >
     {/if}
-    <button type="button" class="button" onclick={() => (draft.tokens = {})}
+    <button type="button" class="btn btn-large" onclick={() => (draft.tokens = {})}
       >{i18n.t('themeEditor.reset')}</button
     >
-    <button type="button" class="button primary" disabled={saving} onclick={() => void save()}
-      >{i18n.t('themeEditor.save')}</button
+    <button
+      type="button"
+      class="btn btn-large btn-primary"
+      disabled={saving}
+      onclick={() => void save()}>{i18n.t('themeEditor.save')}</button
     >
   {/snippet}
 </Dialog>
@@ -392,29 +397,6 @@
     flex: 1;
   }
 
-  .button {
-    padding: var(--space-2) var(--space-4);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface);
-    color: var(--text);
-    font: inherit;
-    cursor: pointer;
-  }
-
-  .button:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .primary {
-    border-color: var(--accent);
-  }
-
-  .danger {
-    color: var(--level-error);
-  }
-
   /* The file input stays reachable from the keyboard inside its label, out of sight */
   .file-button {
     position: relative;
@@ -428,7 +410,6 @@
   }
 
   .file-button:focus-within,
-  .button:focus-visible,
   .reset:focus-visible,
   .name input:focus-visible {
     outline: 2px solid var(--accent);
diff --git a/ui/src/components/ThemeSwitch.svelte b/ui/src/components/ThemeSwitch.svelte
index 143c494..419a05f 100644
--- a/ui/src/components/ThemeSwitch.svelte
+++ b/ui/src/components/ThemeSwitch.svelte
@@ -4,15 +4,22 @@
   import { i18n } from '../lib/i18n/locale.svelte';
   import { appearance, saveSettings, type AppearanceStore } from '../lib/settings.svelte';
   import { themePreferences, type ThemePreference } from '../lib/theme';
+  import { Contrast, Monitor, Moon, Sun } from '../lib/icons';
   import SegmentedControl from './SegmentedControl.svelte';
 
-  let { transport, store = appearance }: { transport: Transport; store?: AppearanceStore } =
-    $props();
+  let {
+    transport,
+    store = appearance,
+    compact = false,
+  }: { transport: Transport; store?: AppearanceStore; compact?: boolean } = $props();
+
+  const icons = { light: Sun, dark: Moon, system: Monitor, 'high-contrast': Contrast } as const;
 
   const options = $derived(
     themePreferences.map((preference) => ({
       value: preference,
       label: i18n.t(`theme.${preference}`),
+      icon: icons[preference],
     })),
   );
 
@@ -33,6 +40,7 @@
 <SegmentedControl
   label={i18n.t('theme.label')}
   {options}
+  {compact}
   value={store.settings.theme as ThemePreference}
   onchange={choose}
 />
diff --git a/ui/src/components/Toaster.svelte b/ui/src/components/Toaster.svelte
index bee1230..6e9b1aa 100644
--- a/ui/src/components/Toaster.svelte
+++ b/ui/src/components/Toaster.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
   import { i18n } from '../lib/i18n/locale.svelte';
+  import { CircleX, Info, X } from '../lib/icons';
   import { toasts } from '../lib/toasts.svelte';
 </script>
 
 <section class="toasts" aria-label={i18n.t('toasts.label')} aria-live="polite">
   {#each toasts.items as toast (toast.id)}
     <div class="toast" data-kind={toast.kind}>
+      <span class="toast-icon" aria-hidden="true"
+        >{#if toast.kind === 'error'}<CircleX size={16} />{:else}<Info size={16} />{/if}</span
+      >
       <span class="text">{toast.text}</span>
       {#if toast.link}
         <a href={toast.link.href} onclick={() => toasts.close(toast.id)}>{toast.link.label}</a>
@@ -14,7 +18,7 @@
         type="button"
         class="close"
         aria-label={i18n.t('toasts.close')}
-        onclick={() => toasts.close(toast.id)}>×</button
+        onclick={() => toasts.close(toast.id)}><X size={14} /></button
       >
     </div>
   {/each}
@@ -34,13 +38,13 @@
   .toast {
     display: flex;
     gap: var(--space-3);
-    align-items: baseline;
-    padding: var(--space-2) var(--space-3);
+    align-items: center;
+    padding: var(--space-3) var(--space-4);
     border: 1px solid var(--border);
     border-left: 4px solid var(--accent);
-    border-radius: var(--radius);
+    border-radius: var(--radius-large);
     background: var(--surface);
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow-large);
     font-size: var(--font-size-small);
   }
 
@@ -48,6 +52,15 @@
     border-left-color: var(--level-error);
   }
 
+  .toast-icon {
+    display: flex;
+    color: var(--accent);
+  }
+
+  [data-kind='error'] .toast-icon {
+    color: var(--level-error);
+  }
+
   .text {
     flex: 1;
     overflow-wrap: anywhere;
@@ -58,6 +71,7 @@
   }
 
   .close {
+    display: flex;
     padding: 0;
     border: 0;
     background: none;
diff --git a/ui/src/lib/api/schema.gen.d.ts b/ui/src/lib/api/schema.gen.d.ts
index b507c15..a61b1a6 100644
--- a/ui/src/lib/api/schema.gen.d.ts
+++ b/ui/src/lib/api/schema.gen.d.ts
@@ -785,6 +785,8 @@ export interface components {
             sapi: components["schemas"]["Sapi"];
             method?: string | null;
             url?: string | null;
+            /** @description The command line of a CLI run; absent for a web request */
+            argv?: string[] | null;
             is_ajax: boolean;
             status_code?: number | null;
             exit_code?: number | null;
@@ -807,7 +809,6 @@ export interface components {
         RequestDetail: components["schemas"]["Request"] & {
             /** @enum {string} */
             lang?: "php" | "js";
-            argv?: string[] | null;
             ip?: string | null;
             server_ip?: string | null;
             server_name?: string | null;
diff --git a/ui/src/lib/commands.ts b/ui/src/lib/commands.ts
index c3de454..c0f1f6f 100644
--- a/ui/src/lib/commands.ts
+++ b/ui/src/lib/commands.ts
@@ -1,3 +1,5 @@
+import type { HelpTopic } from './help';
+
 // Commands from the keyboard and the palette to the parts of the UI that carry them out.
 export type Command =
   | { type: 'filter'; text: string }
@@ -6,7 +8,9 @@ export type Command =
   | { type: 'open-servers' }
   | { type: 'add-project' }
   /** A built-in theme or custom:<id>. */
-  | { type: 'theme'; theme: string };
+  | { type: 'theme'; theme: string }
+  /** The help, on a topic of lib/help.ts. */
+  | { type: 'help'; topic?: HelpTopic };
 
 const listeners = new Set<(command: Command) => void>();
 
diff --git a/ui/src/lib/contrast.test.ts b/ui/src/lib/contrast.test.ts
index 0395218..e83fd94 100644
--- a/ui/src/lib/contrast.test.ts
+++ b/ui/src/lib/contrast.test.ts
@@ -18,6 +18,7 @@ describe('contrast', () => {
     expect(problems.map((p) => `${p.foreground}/${p.background}`)).toEqual([
       'text/bg',
       'text/surface',
+      'text/accent-soft',
     ]);
     expect(problems[0]?.minimum).toBe(4.5);
     expect(problems[0]?.ratio).toBeLessThan(4.5);
diff --git a/ui/src/lib/contrast.ts b/ui/src/lib/contrast.ts
index 890f91c..d0de544 100644
--- a/ui/src/lib/contrast.ts
+++ b/ui/src/lib/contrast.ts
@@ -32,6 +32,10 @@ export const contrastPairs: readonly [string, string, number][] = [
   ['env-stage', 'surface', 4.5],
   ['env-prod', 'surface', 4.5],
   ['accent', 'surface', 3],
+  ['accent', 'accent-soft', 3],
+  ['text', 'accent-soft', 4.5],
+  ['accent-contrast', 'accent', 4.5],
+  ['level-info', 'level-info-soft', 4.5],
   ['border', 'surface', 1.2],
 ];
 
diff --git a/ui/src/lib/format.test.ts b/ui/src/lib/format.test.ts
index 4cb483e..76b8713 100644
--- a/ui/src/lib/format.test.ts
+++ b/ui/src/lib/format.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { clockSkew, formatDuration, formatTime, requestTitle } from './format';
+import { clockSkew, formatDuration, formatTime, outcomeKind, requestTitle } from './format';
 
 describe('formatDuration', () => {
   it('uses ms below a second and s above', () => {
@@ -23,6 +23,19 @@ describe('formatTime', () => {
 });
 
 describe('requestTitle', () => {
+  it('names a CLI run by its script and arguments', () => {
+    expect(
+      requestTitle({
+        sapi: 'cli',
+        argv: ['/var/www/app/bin/console', 'queue:work', '--queue=emails'],
+      }),
+    ).toBe('console queue:work --queue=emails');
+    expect(requestTitle({ sapi: 'cli', argv: ['import.php'] })).toBe('import.php');
+    // Logs of library v1 and runs without argv stay CLI
+    expect(requestTitle({ sapi: 'cli', argv: null })).toBe('CLI');
+    expect(requestTitle({ sapi: 'cli' })).toBe('CLI');
+  });
+
   it('shows method and path for web requests', () => {
     expect(
       requestTitle({ sapi: 'web', method: 'GET', url: 'https://shop.test/catalog?id=1' }),
@@ -63,3 +76,24 @@ describe('clockSkew', () => {
     expect(clockSkew(-2600)).toBe('−3');
   });
 });
+
+describe('outcomeKind', () => {
+  const base = { finished: true, error_count: 0, warning_count: 0, status_code: 200 };
+
+  it('is bad for errors, server errors and unfinished requests', () => {
+    expect(outcomeKind({ ...base, error_count: 1 })).toBe('bad');
+    expect(outcomeKind({ ...base, status_code: 502 })).toBe('bad');
+    expect(outcomeKind({ ...base, finished: false })).toBe('bad');
+    expect(outcomeKind({ ...base, status_code: null, exit_code: 255 })).toBe('bad');
+  });
+
+  it('is a warning for warnings and client errors', () => {
+    expect(outcomeKind({ ...base, warning_count: 2 })).toBe('warn');
+    expect(outcomeKind({ ...base, status_code: 404 })).toBe('warn');
+  });
+
+  it('is ok otherwise', () => {
+    expect(outcomeKind(base)).toBe('ok');
+    expect(outcomeKind({ ...base, status_code: null, exit_code: 0 })).toBe('ok');
+  });
+});
diff --git a/ui/src/lib/format.ts b/ui/src/lib/format.ts
index 8309747..ba2f6a4 100644
--- a/ui/src/lib/format.ts
+++ b/ui/src/lib/format.ts
@@ -21,10 +21,14 @@ export function formatTime(ts: number): string {
   return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}.${pad(date.getMilliseconds(), 3)}`;
 }
 
-/** Feed row title: method and path for a web request, CLI for a console run. */
-export function requestTitle(request: Pick<Request, 'sapi' | 'method' | 'url'>): string {
+/** Feed row title: method and path for a web request, the script and its arguments for a console run. */
+export function requestTitle(
+  request: Pick<Request, 'sapi'> & Partial<Pick<Request, 'method' | 'url' | 'argv'>>,
+): string {
   if (request.sapi === 'cli') {
-    return 'CLI';
+    const [script, ...args] = request.argv ?? [];
+    // Logs of library v1 carry no command line
+    return script ? [script.split(/[\\/]/).pop() ?? script, ...args].join(' ') : 'CLI';
   }
   const url = request.url ?? '';
   let path = url;
@@ -37,6 +41,26 @@ export function requestTitle(request: Pick<Request, 'sapi' | 'method' | 'url'>):
   return request.method ? `${request.method} ${decodeReadable(path)}` : decodeReadable(path);
 }
 
+export type OutcomeKind = 'ok' | 'warn' | 'bad';
+
+/** How a request ended, for its color: errors, 5xx, a failed exit or no end are bad; warnings and 4xx warn. */
+export function outcomeKind(
+  request: Pick<Request, 'finished' | 'error_count' | 'warning_count' | 'status_code'> & {
+    exit_code?: number | null;
+  },
+): OutcomeKind {
+  const status = request.status_code ?? 0;
+  const failedExit =
+    request.exit_code !== null && request.exit_code !== undefined && request.exit_code !== 0;
+  if (!request.finished || request.error_count > 0 || status >= 500 || failedExit) {
+    return 'bad';
+  }
+  if (request.warning_count > 0 || status >= 400) {
+    return 'warn';
+  }
+  return 'ok';
+}
+
 /**
  * Decodes %XX for reading. Each run of escape sequences is decoded separately:
  * library v1 truncates URLs to 300 bytes and may cut a character in half, leaving only that tail encoded.
diff --git a/ui/src/lib/help.test.ts b/ui/src/lib/help.test.ts
new file mode 100644
index 0000000..0437461
--- /dev/null
+++ b/ui/src/lib/help.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+import { help, helpSpans, helpTopics } from './help';
+import { locales } from './i18n/messages';
+
+describe('help', () => {
+  it('has every topic in every locale, in the same order and shape', () => {
+    const shape = (locale: (typeof locales)[number]) =>
+      help[locale].map((section) => [
+        section.id,
+        section.blocks.map((block) =>
+          'items' in block ? `${block.kind}:${block.items.length}` : block.kind,
+        ),
+      ]);
+    for (const locale of locales) {
+      expect(help[locale].map((section) => section.id)).toEqual([...helpTopics]);
+      expect(shape(locale), locale).toEqual(shape('en'));
+    }
+  });
+
+  it('keeps code samples the same in every locale', () => {
+    const code = (locale: (typeof locales)[number]) =>
+      help[locale].flatMap((section) =>
+        section.blocks.filter((block) => block.kind === 'code').map((block) => block.text),
+      );
+    expect(code('ru')).toEqual(code('en'));
+  });
+
+  it('splits code and strong parts out of a text', () => {
+    expect(helpSpans('Set `enabled` in **Settings** now')).toEqual([
+      { kind: 'text', text: 'Set ' },
+      { kind: 'code', text: 'enabled' },
+      { kind: 'text', text: ' in ' },
+      { kind: 'strong', text: 'Settings' },
+      { kind: 'text', text: ' now' },
+    ]);
+    expect(helpSpans('plain')).toEqual([{ kind: 'text', text: 'plain' }]);
+  });
+});
diff --git a/ui/src/lib/help.ts b/ui/src/lib/help.ts
new file mode 100644
index 0000000..48fa05b
--- /dev/null
+++ b/ui/src/lib/help.ts
@@ -0,0 +1,428 @@
+// The help of the viewer: how it works and how to add things. Longer texts than the UI dictionaries,
+// so they live here, one list of topics per locale with the same topics and the same shape.
+// `code` in a text is shown as code; nothing else is markup.
+
+import type { Locale } from './i18n/messages';
+
+export const helpTopics = [
+  'overview',
+  'library',
+  'projects',
+  'servers',
+  'push',
+  'reading',
+  'shortcuts',
+] as const;
+export type HelpTopic = (typeof helpTopics)[number];
+
+export type HelpBlock =
+  | { kind: 'text'; text: string }
+  | { kind: 'steps'; items: string[] }
+  | { kind: 'list'; items: string[] }
+  | { kind: 'code'; text: string }
+  | { kind: 'tip'; text: string };
+
+export interface HelpSection {
+  id: HelpTopic;
+  title: string;
+  /** One line under the title in the list of topics. */
+  summary: string;
+  blocks: HelpBlock[];
+}
+
+const installViewer =
+  'curl -fsSL https://github.com/hightemp/wapp_php_debugger/releases/latest/download/install.sh | sh';
+const installLibrary =
+  'curl -fsSLO https://github.com/hightemp/wapp_php_debugger/releases/latest/download/wapp-debugger.php';
+const boot = `require __DIR__ . '/wapp-debugger.php';
+WappDebugger\\Debugger::boot(__DIR__ . '/dws_debugger.json');`;
+const config = `{
+    "enabled": true,
+    "logs_dir": "tmp/logs"
+}`;
+const logging = `__d(DWS_INFO, 'Order created', ['order' => $order]);
+$total = __log($price) * $quantity;   // a value right inside an expression
+__start('db'); /* … */ __stop('db');  // a timer`;
+const push = `"push_url": "http://viewer.lan:8821/ingest/v2",
+"push_token": "…"`;
+
+const en: HelpSection[] = [
+  {
+    id: 'overview',
+    title: 'How it works',
+    summary: 'The library writes, the viewer reads and shows',
+    blocks: [
+      {
+        kind: 'text',
+        text: 'wapp-debugger has two parts. The PHP library in your project writes every request (its messages, timers, errors, SQL and the outcome) into a log file of its own, one JSONL file per request. The viewer reads these files, keeps them in its database and shows new requests the moment they happen.',
+      },
+      {
+        kind: 'steps',
+        items: [
+          'Connect the library to the project: two lines at the start of the request and `dws_debugger.json` next to it.',
+          'Add the project here: its logs directory on this computer or on a server.',
+          'Open a page or run a script: the request appears in the feed with everything it logged.',
+        ],
+      },
+      {
+        kind: 'text',
+        text: 'The logs reach the viewer in one of three ways: from a directory on this computer, over SSH from another server (nothing to install there), or over HTTP from the library itself when there is no SSH. When the viewer cannot reach the application at all (containers, pods), the library or an agent pushes the logs to the viewer.',
+      },
+      {
+        kind: 'tip',
+        text: 'The panel on the left holds the projects and servers; the feed shows requests of the chosen project, a server or all of them; a request opens its messages, and a message its context and stack.',
+      },
+    ],
+  },
+  {
+    id: 'library',
+    title: 'Connect the library',
+    summary: 'PHP 7.4+, one file, no dependencies',
+    blocks: [
+      { kind: 'text', text: 'Put the library into the root of your project:' },
+      { kind: 'code', text: installLibrary },
+      {
+        kind: 'text',
+        text: 'Then, as early as possible in the request (the front controller, the CLI entry point):',
+      },
+      { kind: 'code', text: boot },
+      {
+        kind: 'text',
+        text: 'and `dws_debugger.json` in the project root. The logs directory must be writable by PHP:',
+      },
+      { kind: 'code', text: config },
+      {
+        kind: 'text',
+        text: 'Errors, exceptions and fatal errors are logged by themselves. From the code:',
+      },
+      { kind: 'code', text: logging },
+      {
+        kind: 'tip',
+        text: 'Laravel, Symfony, WordPress and 1C-Bitrix have ready integrations in `client-php/integrations`. The viewer reads logs of library v1 too.',
+      },
+      { kind: 'text', text: 'The viewer itself (Linux, macOS):' },
+      { kind: 'code', text: installViewer },
+    ],
+  },
+  {
+    id: 'projects',
+    title: 'Add a project',
+    summary: 'A logs directory on this computer or a server',
+    blocks: [
+      {
+        kind: 'text',
+        text: 'A project is one application: its root and the directory its library writes logs to.',
+      },
+      {
+        kind: 'steps',
+        items: [
+          '**Add project** (+ in the projects panel).',
+          'Choose the server: this computer, or one added under **Servers**.',
+          'Give the name, the project root and the logs directory (`logs_dir` of `dws_debugger.json`, relative to the root or absolute).',
+          'Save: the viewer imports what is already there and follows new files.',
+        ],
+      },
+      {
+        kind: 'text',
+        text: 'Or let the viewer find projects: **Servers → Find projects** walks the given directories for `dws_debugger.json` and adds a project in one click.',
+      },
+      {
+        kind: 'list',
+        items: [
+          'The **Debugger** switch of a project turns logging on and off: it flips `enabled` in `dws_debugger.json`.',
+          '**Import a request** takes an exported request, a log file of the library, a PHP error log, a Laravel log or an nginx error log.',
+          'Project settings keep the retention (days, megabytes) and make a push token.',
+        ],
+      },
+    ],
+  },
+  {
+    id: 'servers',
+    title: 'Servers: SSH and HTTP',
+    summary: 'Projects on stage and prod',
+    blocks: [
+      {
+        kind: 'text',
+        text: '**Servers → Add server**, then add a project to that server. **Check** on a server shows each step: the connection, the logs directories, the config and the PHP version.',
+      },
+      {
+        kind: 'list',
+        items: [
+          '**SSH** is the main way: nothing to open or install on the server. The host is a name or an alias from `~/.ssh/config` (user, port, keys and ProxyJump come from there); keys come from the config or ssh-agent. A new host shows its fingerprint to confirm.',
+          '**HTTP** is for servers without SSH (shared hosting): set `http_token` (32+ characters) in `dws_debugger.json` of the project and add a server with the address of the application and that token. Use `https://`.',
+          'The **environment** (dev, stage, prod) colors the server; with the frame setting on, stage and prod frame the window. Clearing logs and removing a project there ask for its name.',
+          '**Read-only** servers allow neither deleting logs nor switching the debugger.',
+        ],
+      },
+      {
+        kind: 'tip',
+        text: '**Export / import** gives servers and projects as YAML without secrets, to keep in git or hand to a colleague.',
+      },
+    ],
+  },
+  {
+    id: 'push',
+    title: 'Push logs to the viewer',
+    summary: 'For containers and servers out of reach',
+    blocks: [
+      {
+        kind: 'text',
+        text: 'When the viewer cannot reach the application, the logs come to the viewer.',
+      },
+      {
+        kind: 'steps',
+        items: [
+          'Start the viewer with a receiver: `wapp-debugger serve --ingest-addr 0.0.0.0:8821`.',
+          'In the project settings, **Make a push token**: it is shown once with the keys for `dws_debugger.json`.',
+          'With these keys the library sends its events instead of writing files.',
+        ],
+      },
+      { kind: 'code', text: push },
+      {
+        kind: 'text',
+        text: 'Or leave the library writing files and run `wapp-debugger agent --logs-dir … --push …` next to them: it sends new lines as they are written.',
+      },
+      {
+        kind: 'tip',
+        text: 'With pushing on, `jsTag()` of the library adds JavaScript errors of the page to its PHP request.',
+      },
+    ],
+  },
+  {
+    id: 'reading',
+    title: 'Reading requests',
+    summary: 'Filters, views, comparison',
+    blocks: [
+      {
+        kind: 'list',
+        items: [
+          'The filter line takes words and conditions: `level:error`, `tag:sql`, `status:5xx`, `duration>500`, `method:POST`, `pinned:yes`.',
+          'A request has views: **Messages** (with level chips and a search), **Timeline** of timers and SQL, **SQL** with slow and repeated queries, **Superglobals**.',
+          'A message shows its context as a tree, the code around its line and the stack; links open the file in your IDE.',
+          '**Pin** and **Note** mark a request; **Export** saves it as a file to import elsewhere; **Copy as curl** and **Open again** repeat it.',
+          'Open requests become tabs; ⇄ on a tab compares it with the current one.',
+          '**Pause** holds the feed still; what comes in meanwhile is counted.',
+        ],
+      },
+    ],
+  },
+  {
+    id: 'shortcuts',
+    title: 'Keyboard',
+    summary: 'Move without the mouse',
+    blocks: [
+      {
+        kind: 'list',
+        items: [
+          '`j` / `k`: the next or previous request; `J` / `K`: the next or previous message.',
+          '`Esc` closes the message, then the request.',
+          '`/` goes to the filter line, `g` `p` to the projects.',
+          '`Ctrl+K` (`⌘K` on macOS) opens the commands: projects, servers, filters, themes.',
+          '`?` lists the shortcuts.',
+        ],
+      },
+    ],
+  },
+];
+
+const ru: HelpSection[] = [
+  {
+    id: 'overview',
+    title: 'Как это работает',
+    summary: 'Библиотека пишет, просмотрщик читает и показывает',
+    blocks: [
+      {
+        kind: 'text',
+        text: 'wapp-debugger состоит из двух частей. PHP-библиотека в вашем проекте записывает каждый запрос (сообщения, таймеры, ошибки, SQL и итог) в свой лог-файл: один JSONL-файл на запрос. Просмотрщик читает эти файлы, хранит их в своей базе и показывает новые запросы в тот же момент.',
+      },
+      {
+        kind: 'steps',
+        items: [
+          'Подключите библиотеку к проекту: две строки в начале запроса и `dws_debugger.json` рядом.',
+          'Добавьте проект здесь: его каталог логов на этом компьютере или на сервере.',
+          'Откройте страницу или запустите скрипт: запрос появится в ленте со всем, что он записал.',
+        ],
+      },
+      {
+        kind: 'text',
+        text: 'Логи попадают в просмотрщик одним из трёх путей: из каталога на этом компьютере, по SSH с другого сервера (там ничего ставить не нужно) или по HTTP от самой библиотеки, когда SSH нет. Если просмотрщик вообще не может достучаться до приложения (контейнеры, поды), библиотека или агент сами отправляют логи в просмотрщик.',
+      },
+      {
+        kind: 'tip',
+        text: 'Слева — проекты и серверы; лента показывает запросы выбранного проекта, сервера или всех сразу; запрос открывает свои сообщения, сообщение — контекст и стек.',
+      },
+    ],
+  },
+  {
+    id: 'library',
+    title: 'Подключить библиотеку',
+    summary: 'PHP 7.4+, один файл, без зависимостей',
+    blocks: [
+      { kind: 'text', text: 'Положите библиотеку в корень проекта:' },
+      { kind: 'code', text: installLibrary },
+      {
+        kind: 'text',
+        text: 'Затем как можно раньше в запросе (фронт-контроллер, точка входа CLI):',
+      },
+      { kind: 'code', text: boot },
+      {
+        kind: 'text',
+        text: 'и `dws_debugger.json` в корне проекта. Каталог логов должен быть доступен PHP на запись:',
+      },
+      { kind: 'code', text: config },
+      { kind: 'text', text: 'Ошибки, исключения и фатальные ошибки пишутся сами. Из кода:' },
+      { kind: 'code', text: logging },
+      {
+        kind: 'tip',
+        text: 'Для Laravel, Symfony, WordPress и 1С-Битрикс есть готовые интеграции в `client-php/integrations`. Логи библиотеки v1 просмотрщик тоже читает.',
+      },
+      { kind: 'text', text: 'Сам просмотрщик (Linux, macOS):' },
+      { kind: 'code', text: installViewer },
+    ],
+  },
+  {
+    id: 'projects',
+    title: 'Добавить проект',
+    summary: 'Каталог логов на этом компьютере или на сервере',
+    blocks: [
+      {
+        kind: 'text',
+        text: 'Проект — это одно приложение: его корень и каталог, куда библиотека пишет логи.',
+      },
+      {
+        kind: 'steps',
+        items: [
+          '**Добавить проект** (+ в панели проектов).',
+          'Выберите сервер: этот компьютер или добавленный в **Серверах**.',
+          'Укажите название, корень проекта и каталог логов (`logs_dir` из `dws_debugger.json`, от корня или абсолютный).',
+          'Сохраните: просмотрщик загрузит то, что уже есть, и будет следить за новыми файлами.',
+        ],
+      },
+      {
+        kind: 'text',
+        text: 'Или пусть просмотрщик найдёт проекты сам: **Серверы → Найти проекты** ищет `dws_debugger.json` в указанных каталогах и добавляет проект одним щелчком.',
+      },
+      {
+        kind: 'list',
+        items: [
+          'Переключатель **Отладчик** включает и выключает запись: он меняет `enabled` в `dws_debugger.json`.',
+          '**Импорт запроса** принимает экспортированный запрос, лог-файл библиотеки, лог ошибок PHP, лог Laravel или лог ошибок nginx.',
+          'В настройках проекта — срок хранения (дни, мегабайты) и токен для отправки логов.',
+        ],
+      },
+    ],
+  },
+  {
+    id: 'servers',
+    title: 'Серверы: SSH и HTTP',
+    summary: 'Проекты на stage и prod',
+    blocks: [
+      {
+        kind: 'text',
+        text: '**Серверы → Добавить сервер**, затем добавьте проект на этот сервер. **Проверить** у сервера показывает каждый шаг: подключение, каталоги логов, конфиг и версию PHP.',
+      },
+      {
+        kind: 'list',
+        items: [
+          '**SSH** — основной способ: на сервере ничего не нужно открывать и ставить. Хост — имя или алиас из `~/.ssh/config` (пользователь, порт, ключи и ProxyJump берутся оттуда); ключи — из конфига или ssh-agent. Новый хост покажет отпечаток ключа для подтверждения.',
+          '**HTTP** — для серверов без SSH (виртуальный хостинг): задайте `http_token` (от 32 символов) в `dws_debugger.json` проекта и добавьте сервер с адресом приложения и этим токеном. Используйте `https://`.',
+          '**Окружение** (dev, stage, prod) окрашивает сервер; с включённой рамкой stage и prod обводят окно. Очистка логов и удаление проекта там спрашивают его название.',
+          'Сервер **только для чтения** не даёт удалять логи и переключать отладчик.',
+        ],
+      },
+      {
+        kind: 'tip',
+        text: '**Экспорт / импорт** отдаёт серверы и проекты в YAML без секретов: хранить в git или передать коллеге.',
+      },
+    ],
+  },
+  {
+    id: 'push',
+    title: 'Отправка логов в просмотрщик',
+    summary: 'Для контейнеров и недоступных серверов',
+    blocks: [
+      {
+        kind: 'text',
+        text: 'Когда просмотрщик не может достучаться до приложения, логи приходят к нему сами.',
+      },
+      {
+        kind: 'steps',
+        items: [
+          'Запустите просмотрщик с приёмником: `wapp-debugger serve --ingest-addr 0.0.0.0:8821`.',
+          'В настройках проекта — **Создать токен**: он показывается один раз вместе с ключами для `dws_debugger.json`.',
+          'С этими ключами библиотека отправляет события вместо записи файлов.',
+        ],
+      },
+      { kind: 'code', text: push },
+      {
+        kind: 'text',
+        text: 'Или оставьте библиотеке запись файлов и запустите рядом `wapp-debugger agent --logs-dir … --push …`: он отправляет новые строки по мере записи.',
+      },
+      {
+        kind: 'tip',
+        text: 'При включённой отправке `jsTag()` библиотеки добавляет JavaScript-ошибки страницы к её PHP-запросу.',
+      },
+    ],
+  },
+  {
+    id: 'reading',
+    title: 'Как читать запросы',
+    summary: 'Фильтры, виды, сравнение',
+    blocks: [
+      {
+        kind: 'list',
+        items: [
+          'Строка фильтра принимает слова и условия: `level:error`, `tag:sql`, `status:5xx`, `duration>500`, `method:POST`, `pinned:yes`.',
+          'У запроса есть виды: **Сообщения** (с фильтром по уровням и поиском), **Шкала времени** таймеров и SQL, **SQL** с медленными и повторными запросами, **Суперглобальные**.',
+          'Сообщение показывает контекст деревом, код вокруг строки и стек; ссылки открывают файл в IDE.',
+          '**Закрепить** и **Заметка** помечают запрос; **Экспорт** сохраняет его в файл для импорта в другом месте; **Копировать как curl** и **Открыть снова** повторяют его.',
+          'Открытые запросы становятся вкладками; ⇄ на вкладке сравнивает её с текущей.',
+          '**Пауза** останавливает ленту; что пришло за это время, считается.',
+        ],
+      },
+    ],
+  },
+  {
+    id: 'shortcuts',
+    title: 'Клавиатура',
+    summary: 'Без мыши',
+    blocks: [
+      {
+        kind: 'list',
+        items: [
+          '`j` / `k`: следующий или предыдущий запрос; `J` / `K`: следующее или предыдущее сообщение.',
+          '`Esc` закрывает сообщение, затем запрос.',
+          '`/` — к строке фильтра, `g` `p` — к проектам.',
+          '`Ctrl+K` (`⌘K` в macOS) открывает команды: проекты, серверы, фильтры, темы.',
+          '`?` — список сочетаний клавиш.',
+        ],
+      },
+    ],
+  },
+];
+
+export const help: Record<Locale, HelpSection[]> = { en, ru };
+
+export type HelpSpan = { kind: 'text' | 'code' | 'strong'; text: string };
+
+/** A text of the help split into plain text, `code` and **strong** parts. */
+export function helpSpans(text: string): HelpSpan[] {
+  const spans: HelpSpan[] = [];
+  const pattern = /`([^`]+)`|\*\*([^*]+)\*\*/g;
+  let last = 0;
+  for (const match of text.matchAll(pattern)) {
+    if (match.index > last) {
+      spans.push({ kind: 'text', text: text.slice(last, match.index) });
+    }
+    spans.push(
+      match[1] !== undefined
+        ? { kind: 'code', text: match[1] }
+        : { kind: 'strong', text: match[2] ?? '' },
+    );
+    last = match.index + match[0].length;
+  }
+  if (last < text.length) {
+    spans.push({ kind: 'text', text: text.slice(last) });
+  }
+  return spans;
+}
diff --git a/ui/src/lib/i18n/locale.svelte.ts b/ui/src/lib/i18n/locale.svelte.ts
index a21c257..d9d42d0 100644
--- a/ui/src/lib/i18n/locale.svelte.ts
+++ b/ui/src/lib/i18n/locale.svelte.ts
@@ -18,9 +18,11 @@ function storedLocale(): string | null {
   }
 }
 
-let current = $state<Locale>(
-  detectLocale(storedLocale(), typeof navigator === 'undefined' ? [] : navigator.languages),
+const initial = detectLocale(
+  storedLocale(),
+  typeof navigator === 'undefined' ? [] : navigator.languages,
 );
+let current = $state<Locale>(initial);
 
 function applyDocumentLanguage(locale: Locale) {
   if (typeof document !== 'undefined') {
@@ -28,7 +30,7 @@ function applyDocumentLanguage(locale: Locale) {
   }
 }
 
-applyDocumentLanguage(current);
+applyDocumentLanguage(initial);
 
 export const i18n = {
   get locale(): Locale {
diff --git a/ui/src/lib/i18n/messages.ts b/ui/src/lib/i18n/messages.ts
index d7a2d88..98ecbb6 100644
--- a/ui/src/lib/i18n/messages.ts
+++ b/ui/src/lib/i18n/messages.ts
@@ -369,6 +369,32 @@ const en = {
   'duration.belowMs': '<1 ms',
   'duration.ms': '{value} ms',
   'duration.s': '{value} s',
+  'help.title': 'Help',
+  'help.open': 'Help',
+  'help.topics': 'Help topics',
+  'help.copy': 'Copy',
+  'help.copied': 'Copied',
+  'help.allShortcuts': 'All shortcuts',
+  'start.title': 'Start debugging',
+  'start.text': 'Three steps, and the requests of your project appear here as they happen.',
+  'start.library': 'Connect the library',
+  'start.libraryText': 'Two lines at the start of the request and dws_debugger.json next to them.',
+  'start.project': 'Add the project',
+  'start.projectText': 'Its logs directory on this computer, or on a server over SSH or HTTP.',
+  'start.find': 'Find projects',
+  'start.open': 'Open a page',
+  'start.openText': 'Or run a script: the request comes in live with its messages, errors and SQL.',
+  'start.how': 'How it works',
+  'sidebar.collapse': 'Collapse the sidebar',
+  'sidebar.expand': 'Expand the sidebar',
+  'sidebar.label': 'Sidebar',
+  'feed.emptyHelp': 'Nothing comes?',
+  'detail.emptyTitle': 'Choose a request',
+  'detail.emptyText':
+    'Its messages, timeline, SQL and superglobals open here. j and k move through the feed.',
+  'message.emptyText': 'Its context, the code around its line and the stack open here.',
+  'project.help': 'How does a project work?',
+  'server.help': 'SSH or HTTP?',
 } satisfies Record<string, Entry>;
 
 export type MessageKey = keyof typeof en;
@@ -767,6 +793,32 @@ const ru: Record<MessageKey, Entry> = {
   'duration.belowMs': '<1 мс',
   'duration.ms': '{value} мс',
   'duration.s': '{value} с',
+  'help.title': 'Справка',
+  'help.open': 'Справка',
+  'help.topics': 'Разделы справки',
+  'help.copy': 'Копировать',
+  'help.copied': 'Скопировано',
+  'help.allShortcuts': 'Все сочетания клавиш',
+  'start.title': 'Начать отладку',
+  'start.text': 'Три шага, и запросы вашего проекта появятся здесь сами, в момент выполнения.',
+  'start.library': 'Подключите библиотеку',
+  'start.libraryText': 'Две строки в начале запроса и dws_debugger.json рядом.',
+  'start.project': 'Добавьте проект',
+  'start.projectText': 'Его каталог логов на этом компьютере или на сервере по SSH или HTTP.',
+  'start.find': 'Найти проекты',
+  'start.open': 'Откройте страницу',
+  'start.openText': 'Или запустите скрипт: запрос придёт сразу, с сообщениями, ошибками и SQL.',
+  'start.how': 'Как это работает',
+  'sidebar.collapse': 'Свернуть панель',
+  'sidebar.expand': 'Развернуть панель',
+  'sidebar.label': 'Боковая панель',
+  'feed.emptyHelp': 'Ничего не приходит?',
+  'detail.emptyTitle': 'Выберите запрос',
+  'detail.emptyText':
+    'Здесь откроются его сообщения, шкала времени, SQL и суперглобальные. j и k листают ленту.',
+  'message.emptyText': 'Здесь откроются его контекст, код вокруг строки и стек.',
+  'project.help': 'Как устроен проект?',
+  'server.help': 'SSH или HTTP?',
 };
 
 export const messages: Record<Locale, Record<MessageKey, Entry>> = { en, ru };
diff --git a/ui/src/lib/icons.ts b/ui/src/lib/icons.ts
new file mode 100644
index 0000000..8499fff
--- /dev/null
+++ b/ui/src/lib/icons.ts
@@ -0,0 +1,67 @@
+// The icons of the UI (Lucide, ISC license): one place to see what is used, each one imported on its own
+// so the build carries only these.
+export { default as Bug } from '@lucide/svelte/icons/bug';
+export { default as Folder } from '@lucide/svelte/icons/folder';
+export { default as FolderOpen } from '@lucide/svelte/icons/folder-open';
+export { default as Server } from '@lucide/svelte/icons/server';
+export { default as Help } from '@lucide/svelte/icons/circle-question-mark';
+export { default as Settings } from '@lucide/svelte/icons/settings';
+export { default as Palette } from '@lucide/svelte/icons/palette';
+export { default as Sun } from '@lucide/svelte/icons/sun';
+export { default as Moon } from '@lucide/svelte/icons/moon';
+export { default as Monitor } from '@lucide/svelte/icons/monitor';
+export { default as Contrast } from '@lucide/svelte/icons/contrast';
+export { default as Search } from '@lucide/svelte/icons/search';
+export { default as Terminal } from '@lucide/svelte/icons/terminal';
+export { default as Globe } from '@lucide/svelte/icons/globe';
+export { default as Pause } from '@lucide/svelte/icons/pause';
+export { default as Play } from '@lucide/svelte/icons/play';
+export { default as Plus } from '@lucide/svelte/icons/plus';
+export { default as Trash } from '@lucide/svelte/icons/trash';
+export { default as Eraser } from '@lucide/svelte/icons/eraser';
+export { default as Upload } from '@lucide/svelte/icons/upload';
+export { default as Download } from '@lucide/svelte/icons/download';
+export { default as Pin } from '@lucide/svelte/icons/pin';
+export { default as StickyNote } from '@lucide/svelte/icons/sticky-note';
+export { default as X } from '@lucide/svelte/icons/x';
+export { default as PanelLeftClose } from '@lucide/svelte/icons/panel-left-close';
+export { default as PanelLeftOpen } from '@lucide/svelte/icons/panel-left-open';
+export { default as Command } from '@lucide/svelte/icons/command';
+export { default as Clock } from '@lucide/svelte/icons/clock';
+export { default as MessageSquare } from '@lucide/svelte/icons/message-square';
+export { default as CircleX } from '@lucide/svelte/icons/circle-x';
+export { default as TriangleAlert } from '@lucide/svelte/icons/triangle-alert';
+export { default as Info } from '@lucide/svelte/icons/info';
+export { default as Code } from '@lucide/svelte/icons/code';
+export { default as List } from '@lucide/svelte/icons/list';
+export { default as ChartGantt } from '@lucide/svelte/icons/chart-gantt';
+export { default as Database } from '@lucide/svelte/icons/database';
+export { default as Braces } from '@lucide/svelte/icons/braces';
+export { default as ArrowLeftRight } from '@lucide/svelte/icons/arrow-left-right';
+export { default as RefreshCw } from '@lucide/svelte/icons/refresh-cw';
+export { default as FolderSearch } from '@lucide/svelte/icons/folder-search';
+export { default as Laptop } from '@lucide/svelte/icons/laptop';
+export { default as BookOpen } from '@lucide/svelte/icons/book-open';
+export { default as Rocket } from '@lucide/svelte/icons/rocket';
+export { default as Keyboard } from '@lucide/svelte/icons/keyboard';
+export { default as ExternalLink } from '@lucide/svelte/icons/external-link';
+export { default as Copy } from '@lucide/svelte/icons/copy';
+export { default as Check } from '@lucide/svelte/icons/check';
+export { default as Power } from '@lucide/svelte/icons/power';
+export { default as Layers } from '@lucide/svelte/icons/layers';
+export { default as User } from '@lucide/svelte/icons/user';
+export { default as CalendarClock } from '@lucide/svelte/icons/calendar-clock';
+export { default as Cpu } from '@lucide/svelte/icons/cpu';
+export { default as RadioTower } from '@lucide/svelte/icons/radio-tower';
+export { default as Shield } from '@lucide/svelte/icons/shield';
+export { default as KeyRound } from '@lucide/svelte/icons/key-round';
+export { default as HardDrive } from '@lucide/svelte/icons/hard-drive';
+export { default as Inbox } from '@lucide/svelte/icons/inbox';
+export { default as ArrowRight } from '@lucide/svelte/icons/arrow-right';
+export { default as Lightbulb } from '@lucide/svelte/icons/lightbulb';
+export { default as Funnel } from '@lucide/svelte/icons/funnel';
+export { default as GitCompareArrows } from '@lucide/svelte/icons/git-compare-arrows';
+export { default as ListChecks } from '@lucide/svelte/icons/list-checks';
+export { default as Radio } from '@lucide/svelte/icons/radio';
+export { default as Sparkles } from '@lucide/svelte/icons/sparkles';
+export { default as FileCode } from '@lucide/svelte/icons/file-code';
diff --git a/ui/src/lib/settings.svelte.ts b/ui/src/lib/settings.svelte.ts
index 74a90e6..9928ac8 100644
--- a/ui/src/lib/settings.svelte.ts
+++ b/ui/src/lib/settings.svelte.ts
@@ -23,9 +23,10 @@ interface Options {
 }
 
 export function createAppearanceStore(options: Options) {
-  let current = $state<Settings>(loadCachedSettings(options.storage));
+  const cached = loadCachedSettings(options.storage);
+  let current = $state<Settings>(cached);
   // What the viewer has: a refused save goes back to it
-  let confirmed = current;
+  let confirmed = cached;
   let pending = 0;
 
   function show(settings: Settings) {
diff --git a/ui/src/main.ts b/ui/src/main.ts
index aa6708a..ad0bb92 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -1,6 +1,7 @@
 import { mount } from 'svelte';
 import App from './App.svelte';
 import './styles/theme.css';
+import './styles/controls.css';
 
 const target = document.getElementById('app');
 if (!target) {
diff --git a/ui/src/styles/controls.css b/ui/src/styles/controls.css
new file mode 100644
index 0000000..195af4d
--- /dev/null
+++ b/ui/src/styles/controls.css
@@ -0,0 +1,270 @@
+/* Shared controls: buttons, fields, chips and badges look the same in every pane and dialog.
+   Components add only what is their own; colors come from theme.css tokens. */
+
+.btn {
+  display: inline-flex;
+  flex: none;
+  gap: var(--space-2);
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: var(--space-1) var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  font-size: var(--font-size-small);
+  line-height: 1.2;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.btn:hover:not(:disabled) {
+  background: var(--surface-hover);
+}
+
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.btn:focus-visible,
+.icon-btn:focus-visible,
+.chip:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.btn-primary {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--accent);
+  filter: brightness(1.08);
+}
+
+.btn-ghost {
+  border-color: transparent;
+  background: none;
+  color: var(--text-muted);
+}
+
+.btn-ghost:hover:not(:disabled) {
+  color: var(--text);
+}
+
+.btn-danger {
+  color: var(--level-error);
+}
+
+.btn-large {
+  min-height: 34px;
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--font-size);
+}
+
+.btn[aria-pressed='true'] {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--text);
+}
+
+/* A square button with only an icon: its name is in aria-label and its title */
+.icon-btn {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  background: none;
+  color: var(--text-muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+.icon-btn:hover:not(:disabled) {
+  background: var(--surface-hover);
+  color: var(--text);
+}
+
+.icon-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.icon-btn[aria-pressed='true'],
+.icon-btn[aria-expanded='true'] {
+  background: var(--accent-soft);
+  color: var(--text);
+}
+
+.icon-btn.danger:hover:not(:disabled) {
+  color: var(--level-error);
+}
+
+.form {
+  display: grid;
+  gap: var(--space-4);
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--space-3);
+}
+
+.field {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+  color: var(--text-muted);
+  font-size: var(--font-size-small);
+}
+
+.input {
+  width: 100%;
+  min-width: 0;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-sunken);
+  color: var(--text);
+  font: inherit;
+  font-size: var(--font-size);
+}
+
+.input.mono {
+  font-family: var(--font-mono);
+}
+
+.input:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 0;
+  border-color: var(--accent);
+}
+
+.input[aria-invalid='true'] {
+  border-color: var(--level-error);
+}
+
+.hint {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: var(--font-size-small);
+}
+
+.failure {
+  margin: 0;
+  color: var(--level-error);
+}
+
+.chip {
+  display: inline-flex;
+  gap: var(--space-1);
+  align-items: center;
+  padding: 1px var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--text-muted);
+  font: inherit;
+  font-size: var(--font-size-small);
+  cursor: pointer;
+}
+
+.chip[aria-pressed='true'] {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--text);
+}
+
+.badge {
+  display: inline-flex;
+  gap: var(--space-1);
+  align-items: center;
+  padding: 0 var(--space-2);
+  border-radius: var(--radius);
+  font-size: var(--font-size-small);
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+.badge-error {
+  background: var(--level-error-soft);
+  color: var(--level-error);
+}
+
+.badge-warning {
+  background: var(--level-warning-soft);
+  color: var(--level-warning);
+}
+
+.badge-info {
+  background: var(--level-info-soft);
+  color: var(--level-info);
+}
+
+.badge-accent {
+  background: var(--accent-soft);
+  color: var(--text);
+}
+
+.badge-muted {
+  background: var(--surface-sunken);
+  color: var(--text-muted);
+}
+
+/* An empty pane: an icon, what is going on and what to do */
+.empty {
+  display: grid;
+  justify-items: center;
+  gap: var(--space-3);
+  max-width: 44ch;
+  margin: var(--space-8) auto;
+  padding: 0 var(--space-5);
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.empty-icon {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--surface-sunken);
+  color: var(--text-muted);
+}
+
+.empty-title {
+  margin: 0;
+  color: var(--text);
+  font-size: var(--font-size);
+  font-weight: 600;
+}
+
+.empty-text {
+  margin: 0;
+  font-size: var(--font-size-small);
+}
+
+.empty-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  justify-content: center;
+}
+
+/* Icons sit on the text line */
+.lucide-icon {
+  flex: none;
+}
diff --git a/ui/src/styles/theme.css b/ui/src/styles/theme.css
index f944b9d..92a0b99 100644
--- a/ui/src/styles/theme.css
+++ b/ui/src/styles/theme.css
@@ -12,8 +12,13 @@
   --space-2: 4px;
   --space-3: 8px;
   --space-4: 12px;
+  --space-5: 16px;
   --space-6: 24px;
+  --space-8: 32px;
   --radius: 6px;
+  --radius-large: 10px;
+  --sidebar-width: 248px;
+  --sidebar-rail: 52px;
   --row-padding-y: var(--space-2);
   --row-line-height: 1.45;
   color-scheme: light dark;
@@ -35,6 +40,8 @@
   --text: #1b1f24;
   --text-muted: #555e6a;
   --accent: #2f6fed;
+  --accent-soft: #e6eefd;
+  --accent-contrast: #ffffff;
   --level-error: #c62828;
   --level-warning: #8f5400;
   --level-info: #1d6b40;
@@ -42,6 +49,7 @@
   --level-debug: #6650c8;
   --level-error-soft: #fde8e8;
   --level-warning-soft: #fdf1dc;
+  --level-info-soft: #e3f3e9;
   --syntax-string: #1d6b40;
   --syntax-number: #1f5fbf;
   --syntax-keyword: #8a3ab9;
@@ -50,6 +58,7 @@
   --env-stage: #8f5400;
   --env-prod: #c62828;
   --shadow-small: 0 1px 2px rgb(0 0 0 / 12%);
+  --shadow-large: 0 12px 32px rgb(0 0 0 / 18%);
   --backdrop: rgb(0 0 0 / 45%);
 }
 
@@ -63,6 +72,8 @@
   --text: #e6e9ee;
   --text-muted: #9ea8b6;
   --accent: #6ea0ff;
+  --accent-soft: #1a2740;
+  --accent-contrast: #0b0d10;
   --level-error: #ff7b72;
   --level-warning: #e3b341;
   --level-info: #56d364;
@@ -70,6 +81,7 @@
   --level-debug: #b4a7ff;
   --level-error-soft: #3a1d1f;
   --level-warning-soft: #33290f;
+  --level-info-soft: #13291b;
   --syntax-string: #7ee787;
   --syntax-number: #79c0ff;
   --syntax-keyword: #d2a8ff;
@@ -78,6 +90,7 @@
   --env-stage: #e3b341;
   --env-prod: #ff7b72;
   --shadow-small: 0 1px 2px rgb(0 0 0 / 50%);
+  --shadow-large: 0 12px 32px rgb(0 0 0 / 60%);
   --backdrop: rgb(0 0 0 / 60%);
 }
 
@@ -91,6 +104,8 @@
   --text: #ffffff;
   --text-muted: #e0e0e0;
   --accent: #ffff00;
+  --accent-soft: #2e2e00;
+  --accent-contrast: #000000;
   --level-error: #ff6b6b;
   --level-warning: #ffd23f;
   --level-info: #6bff8b;
@@ -98,6 +113,7 @@
   --level-debug: #c9b8ff;
   --level-error-soft: #2a0000;
   --level-warning-soft: #2a2200;
+  --level-info-soft: #002a0c;
   --syntax-string: #6bff8b;
   --syntax-number: #8fd3ff;
   --syntax-keyword: #ffb3ff;
@@ -106,6 +122,7 @@
   --env-stage: #ffd23f;
   --env-prod: #ff6b6b;
   --shadow-small: 0 0 0 1px #ffffff;
+  --shadow-large: 0 0 0 2px #ffffff;
   --backdrop: rgb(0 0 0 / 80%);
 }