diff --git a/.agents/plans/2026_08_21-modernize_control_plane_ui_ux/2026_08_21-modernize_control_plane_ui_ux-plan.md b/.agents/plans/2026_08_21-modernize_control_plane_ui_ux/2026_08_21-modernize_control_plane_ui_ux-plan.md
new file mode 100644
index 0000000..5cc50f6
--- /dev/null
+++ b/.agents/plans/2026_08_21-modernize_control_plane_ui_ux/2026_08_21-modernize_control_plane_ui_ux-plan.md
@@ -0,0 +1,290 @@
+---
+name: "Modernize control plane UI and UX"
+description: "Raise the tcpmon-tls control plane to an enterprise-grade product through a design system foundation, trustworthy async states, a fleet overview dashboard, and power-user controls."
+created_at: "2026-08-21T17:31:32Z"
+
+created_by:
+  tool: "Claude Code"
+  model:
+    name: "Claude Opus"
+    version: "5"
+    reasoning_effort: "high"
+---
+
+# Modernize control plane UI and UX
+
+## 🎯 Goal
+
+Raise the tcpmon-tls control plane from a functional tool to an enterprise-grade product. Give it one design system, trustworthy loading and empty states, a fleet-wide health overview, and power-user controls for the daily inspection loop.
+
+## 👀 Context
+
+There is no `AGENTS.md` file and no `docs/` architecture documentation in this repository. The conventions below come from the code itself.
+
+### Web UI files
+
+- [`src/main/resources/web/index.html`](../../../src/main/resources/web/index.html): single page shell. Topbar, sidebar and five empty containers that JavaScript fills. Six `div` overlay modals with `role="dialog"`. Thirteen classic scripts loaded with `defer`.
+- [`src/main/resources/web/styles/app.css`](../../../src/main/resources/web/styles/app.css): the only stylesheet. It holds 19 colour tokens on `:root` (lines 49-72), a dark theme on `:root[data-theme="dark"]` (lines 1524-1542), six media queries, and a `prefers-reduced-motion` block (lines 2406-2424).
+- [`src/main/resources/web/js/state.js`](../../../src/main/resources/web/js/state.js): the global `window.uiState` object with `getState`, `setState` and `patchState`.
+- [`src/main/resources/web/js/utils.js`](../../../src/main/resources/web/js/utils.js): shared helpers. `formatDuration` (line 210) and `buildEmptyState(message, hint, action)` (line 251) already exist.
+- [`src/main/resources/web/js/app.js`](../../../src/main/resources/web/js/app.js): `renderApp`, the SSE connection (line 621), `setStatus` (line 592), the modal focus trap (line 577) and the Escape handler (line 489).
+- [`src/main/resources/web/js/routes.js`](../../../src/main/resources/web/js/routes.js): `renderRouteList` (line 192), `renderRouteHeader` (line 242), `buildRouteHeaderViewModel` (line 282), `calculateAverageDuration` (line 304).
+- [`src/main/resources/web/js/sessions.js`](../../../src/main/resources/web/js/sessions.js): `renderRequestTable` (line 150), `renderRequestTableContent` (line 231), `buildRequestTableElement` (line 332).
+- [`src/main/resources/web/js/details.js`](../../../src/main/resources/web/js/details.js): `loadSessionDetails` (line 1), `renderPayloads` (line 44).
+
+### Backend files
+
+- [`src/main/java/com/cafeina/tcpmon/web/ControlPlaneServer.java`](../../../src/main/java/com/cafeina/tcpmon/web/ControlPlaneServer.java): every REST handler and the static asset handler (`handleAsset`, line 151). Assets under `src/main/resources/web` are served from the classpath. A new `.js` file needs no registration on the Java side, only a `script` tag in `index.html`.
+
+### Test files
+
+- [`src/test/js/web-helpers.test.mjs`](../../../src/test/js/web-helpers.test.mjs): the JavaScript suite. It runs on the Node.js built-in test runner. It carries its own DOM shim (lines 96-281) that supports `querySelector`, `querySelectorAll`, `closest`, `classList.toggle`, `dataset`, `setAttribute` and `addEventListener`. It loads `state.js`, `utils.js`, `routes.js`, `route-modal.js`, `sessions.js`, `details.js` and `actions.js` (lines 308-318). A new JavaScript file under test must be added to that load list.
+- [`src/test/java/com/cafeina/tcpmon/web/ControlPlaneServerTest.java`](../../../src/test/java/com/cafeina/tcpmon/web/ControlPlaneServerTest.java): the endpoint suite. It covers authentication, asset loading, caching headers and content types.
+
+### Conventions
+
+- Verification command: `npm run test:all`. It runs the JavaScript suite and then `mvn test`. There is no lint step, no formatter configuration and no frontend build step.
+- JavaScript files use lowercase names with hyphens. Functions use camelCase. There are no ES modules: every file declares globals and the `defer` order in `index.html` guarantees the load sequence.
+- JaCoCo enforces a minimum of 45 percent line coverage and 25 percent branch coverage.
+- [`CHANGELOG.md`](../../../CHANGELOG.md) uses `## [version] - YYYY-MM-DD` headers with `### Features`, `### UI improvements` and `### Bug fixes` sections. The version lives in `pom.xml` line 8.
+
+### Findings that motivate this plan
+
+- The token set holds colours only. Font sizes are ad-hoc values between 10px and 16px. There is no spacing, radius or elevation scale.
+- Five card component blocks are defined twice: `app.css:731-746` and `app.css:1893-1913`.
+- The focus rings use hardcoded `rgba(15, 108, 189, ...)` values at `app.css:157`, `209` and `252`. They are not overridden for the dark theme.
+- The action buttons use the Unicode glyphs `✎`, `⇧`, `+` and `✕` at `index.html:46-48`. There is no icon set.
+- No skeleton component exists. Only a single `.loading-overlay` class is toggled on `#payloads`.
+- The REST API has no aggregate endpoint, so a user cannot see the health of every route in one screen.
+- The request table has no sorting, no density control and no latency thresholds. Every duration renders in the same alarm colour.
+- The markup has no skip link. The sidebar is an `aside`, not a `nav`. The route search input has no label element.
+
+## 🪜 Phases
+
+### Phase 1: Design system foundation and shared UI states
+
+Give the whole UI one visual language and one set of async-state components. Every later phase consumes these primitives. The user sees the result immediately across every screen.
+
+#### Public contracts
+
+**Application services (JavaScript)**
+
+- `src/main/resources/web/js/icons.js` (new file)
+  - `icon(name, options)`: returns an inline SVG element. Supported names: `edit`, `upload`, `plus`, `close`, `search`, `refresh`, `warning`, `check`, `chevron-down`, `chevron-up`, `command`, `activity`.
+- `src/main/resources/web/js/utils.js`
+  - `buildSkeleton(variant, rowCount)` (new): returns a placeholder element. Variants: `route-list`, `table`, `payload`.
+  - `buildErrorState(message, retryLabel, onRetry)` (new): returns an error block with a retry button.
+  - `buildEmptyState(message, hint, action)` (unchanged): this phase only adds callers.
+
+**CSS tokens (`src/main/resources/web/styles/app.css`)**
+
+- Spacing scale: `--space-1` to `--space-8`.
+- Typography scale: `--text-xs`, `--text-sm`, `--text-base`, `--text-lg`, `--text-xl`, plus `--leading-tight` and `--leading-normal`.
+- Radius scale: `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-pill`.
+- Elevation scale: `--elevation-1`, `--elevation-2`, `--elevation-3`.
+- Focus tokens: `--focus-ring` and `--focus-ring-soft`, redefined under `:root[data-theme="dark"]`.
+- Deleted: the duplicated card block at `app.css:1893-1913`.
+
+**Text copies**
+
+- Skip link: "Skip to main content".
+- Route search label: "Filter routes".
+- First run empty state: "No routes yet" / "Create your first route to start capturing traffic." / action "Add route".
+- Empty request table: "No requests captured yet" / "Traffic sent to this listener appears here."
+- Empty result after a filter: "No requests match your filters" / action "Clear filters".
+- Error state: "Could not load this data." / action "Retry".
+
+**Test suite (`src/test/js/web-helpers.test.mjs`)**
+
+- "icon returns an svg element with the requested name"
+- "icon falls back to a generic glyph for an unknown name"
+- "buildSkeleton renders the requested row count"
+- "buildErrorState renders the message and wires the retry action"
+- "buildEmptyState renders an action button when an action is given"
+
+#### To-do actions
+
+- [x] Add the spacing, typography, radius, elevation and focus tokens to `:root`, and redefine the focus tokens under `:root[data-theme="dark"]`.
+- [x] Replace the ad-hoc `px` font sizes and paddings in `app.css` with the new tokens.
+- [x] Delete the duplicated card block at `app.css:1893-1913` and keep one definition per card component.
+- [x] Replace the hardcoded `rgba(15, 108, 189, ...)` focus colours with `--focus-ring` and `--focus-ring-soft`.
+- [x] ~~Create `src/main/resources/web/js/icons.js`~~ See deviation 1 below.
+- [x] Replace the `✎`, `⇧`, `+` and `✕` glyphs and the six modal close buttons with declarative `data-icon` markup.
+- [x] Add `buildSkeleton` and `buildErrorState` to `utils.js`, together with their CSS.
+- [x] Show a skeleton in `renderRouteList`, `loadRequestsPage` and `loadSessionDetails` while a load is in flight.
+- [x] Add the first run onboarding state. See deviation 2 below.
+- [x] Add the skip link, change the sidebar `aside` to `nav aria-label="Routes"`, and add a label for `#route-search`.
+- [x] Add the five test cases to `web-helpers.test.mjs`.
+- [x] Verify the changes with `npm run test:all`. 30 JavaScript tests and 63 Java tests pass.
+- [x] STOP. Present the changes to the user for review.
+
+#### Phase 1 outcome and deviations
+
+**Deviation 1: no new `icons.js` file.** The exploration reported that the UI had no icon set. That was wrong. `utils.js` already held `ICON_PATHS` with 16 icons, `buildIcon(name)` and `setButtonContent(button, label, iconName, options)`, and `app.js` already called them from `initializeStaticButtonIcons()`. The Unicode glyphs in `index.html` were only fallback content that the boot code replaced.
+
+A new `icons.js` would have duplicated that system. Instead this phase:
+
+- Added seven icons to the existing `ICON_PATHS`: `search`, `warning`, `check`, `chevron-down`, `chevron-up`, `command`, `activity`.
+- Added `hydrateStaticIcons(root)` to `utils.js`, which wires every `[data-icon]` element.
+- Replaced the 13 hardcoded `setButtonContent` calls in `initializeStaticButtonIcons()` with one call to `hydrateStaticIcons(document)`, and moved the icon names into `index.html` as `data-icon` and `data-icon-label` attributes. The rendered result is identical and the button list is no longer duplicated between the markup and the boot code.
+
+**Deviation 2: the request table keeps its own empty copies.** The agreed copies "No requests captured yet" and "No requests match your filters" were going to replace the copies in `renderRequestTable`. The existing copies are more specific: they name the listener address and summarise the active filters. Replacing them would be a regression, so this phase kept them. Only the route list first run copy changed to the agreed "No routes yet" wording, and its button now uses the `plus` icon instead of a literal `+` character.
+
+**Extra change:** `FakeNode.getAttribute` was added to the DOM shim in `web-helpers.test.mjs`, because `hydrateStaticIcons` reads the `aria-label` attribute.
+
+**Not done in this phase:** `CHANGELOG.md` and the `pom.xml` version are untouched. This project records them per release, and Phase 1 is not a release.
+
+### Phase 2: Fleet overview dashboard
+
+Add a cross-route health view. A user sees the health of every route in one screen before they drill into a single route. This phase carries the enterprise impact of the plan.
+
+#### Public contracts
+
+**Application services (Java)**
+
+- `com.cafeina.tcpmon.web.OverviewAggregator` (new class)
+  - `aggregate(int windowMinutes)`: runs the SQL aggregation over the existing session tables. There is no schema change.
+- `com.cafeina.tcpmon.web.ControlPlaneServer`
+  - `handleOverview(HttpExchange exchange)` (new): serves `GET /api/overview?windowMinutes={int}`.
+  - Response shape: `{ generatedAt, windowMinutes, totals: { requests, errors, errorRate, p50Ms, p95Ms }, routes: [ { routeId, listener, target, status, requests, errors, errorRate, p50Ms, p95Ms, sparkline: [int] } ], slowestPaths: [ { method, path, routeId, p95Ms, count } ] }`.
+
+**Application services (JavaScript)**
+
+- `src/main/resources/web/js/overview.js` (new file)
+  - `loadOverview()`: fetches the payload and stores it in the state.
+  - `buildOverviewViewModel(payload)`: maps the payload to render data.
+  - `renderOverview()`: renders the view into `#overview`.
+  - `buildSparkline(points, options)`: returns an inline SVG sparkline.
+- `src/main/resources/web/js/state.js`
+  - New keys: `activeView` (`routes` or `overview`), `overviewData`, `overviewWindowMinutes`, `overviewRefreshInFlight`.
+
+**Text copies**
+
+- View switch: "Overview", "Routes".
+- Metric labels: "Requests", "Error rate", "p50 latency", "p95 latency".
+- Section titles: "Route health", "Slowest paths".
+- Window selector: "Last 15 minutes", "Last hour", "Last 24 hours".
+- Empty state: "No traffic in this window" / "Widen the time window or send a request through a route."
+
+**Test suites**
+
+- `src/test/java/com/cafeina/tcpmon/web/ControlPlaneServerTest.java`
+  - "overview endpoint returns totals and per route rows"
+  - "overview endpoint honours the window parameter"
+  - "overview endpoint rejects an invalid window"
+  - "overview endpoint requires authentication"
+- `src/test/js/web-helpers.test.mjs`
+  - "buildOverviewViewModel computes the error rate per route"
+  - "buildOverviewViewModel marks a route as degraded above the error threshold"
+  - "buildSparkline renders one point per bucket"
+  - "buildOverviewViewModel returns an empty state flag when there is no traffic"
+
+#### To-do actions
+
+- [x] Create `OverviewAggregator`. See deviation 1 below.
+- [x] Add `handleOverview` to `ControlPlaneServer` and register the `/api/overview` path.
+- [x] Add the four `ControlPlaneServerTest` cases.
+- [x] Add the `#overview` container and the view switch to `index.html`.
+- [x] Create `src/main/resources/web/js/overview.js` and add its `script` tag to the `defer` chain.
+- [x] Render the metric row, the route health table and the slowest paths, reusing the Phase 1 skeleton and empty states.
+- [x] Add the time window selector and keep the choice in `localStorage` under the key `tcpmon-overview-window`.
+- [x] Refresh the overview from the existing SSE stream when the overview is the active view.
+- [x] Add `overview.js` to the module load list in `web-helpers.test.mjs` and write the four test cases.
+- [x] Verify the changes with `npm run test:all`. 34 JavaScript tests and 67 Java tests pass.
+- [x] STOP. Present the changes to the user for review.
+
+#### Phase 2 outcome and deviations
+
+**Deviation 1: the SQL lives in `SessionStore`, not in `OverviewAggregator`.** Every other query in this project sits in `SessionStore`, which owns the JDBC connection and guards it with `synchronized`. An aggregator that opened its own connection would break that. The work is split instead:
+
+- `SessionStore.overviewExchanges(Instant since, int limit)` runs one indexed query and returns typed rows.
+- `com.cafeina.tcpmon.session.OverviewExchange` is the new row record.
+- `OverviewAggregator.aggregate(int windowMinutes)` keeps the agreed signature. It calls the store, then delegates to the pure static `summarize(rows, routes, windowMinutes, now)`, which is what the tests exercise.
+
+**Deviation 2: the response reports `clientErrors` as well.** The agreed shape carried only `errors`. This project counts an error as a 5xx response, and the overview keeps that definition so the numbers agree with the route statistics shown elsewhere. A route that answers every call with 404 would then look healthy, so 4xx responses are counted apart as `clientErrors`. The route status still derives from the 5xx rate alone.
+
+**Deviation 3: the response uses records, not maps.** The other endpoints build `LinkedHashMap` payloads. The new endpoint returns `OverviewReport`, `OverviewTotals`, `RouteOverview` and `SlowPath`. Jackson serialises them without extra configuration and the shape is checked at compile time.
+
+**Bug found and fixed during the runtime check:** the routes layout stayed visible under the overview. The `hidden` attribute loses to `.layout { display: grid }`, so `app.css` now states `.layout[hidden] { display: none; }`. A unit test could not have caught this; it needed the real browser.
+
+**Runtime verification:** the app ran against a local target with six requests, one 500 and one 404. The endpoint reported 6 requests, a 16.67 percent error rate, p50 7 ms, p95 410 ms, and ranked `/slow` first. The view switch, the route drill down, and the light and dark themes were all checked in a browser. The console reported no errors.
+
+**Accepted limit:** one report reads at most 20000 exchanges (`OverviewAggregator.MAX_ROWS`). A busier 24 hour window would truncate. That is acceptable for a debugging tool and keeps the report bounded.
+
+**Not done in this phase:** `CHANGELOG.md` and the `pom.xml` version are untouched, as in Phase 1.
+
+### Phase 3: Power-user request table and command palette
+
+Make the daily inspection loop fast for an expert user. Add sorting, a density control, latency thresholds, and keyboard-first navigation.
+
+#### Public contracts
+
+**Application services (JavaScript)**
+
+- `src/main/resources/web/js/sessions.js`
+  - `sortRequestRows(rows, sortKey, sortDirection)` (new).
+  - `buildRequestTableElement(pageItems, activeSession, activeExchangeIndex, showRoute, viewOptions)`: gains the `viewOptions` parameter that carries `density`, `sortKey` and `sortDirection`.
+- `src/main/resources/web/js/utils.js`
+  - `latencyLevel(durationMs)` (new): returns `fast`, `moderate` or `slow` against the thresholds 300 ms and 1000 ms.
+- `src/main/resources/web/js/command-palette.js` (new file)
+  - `openCommandPalette()`, `closeCommandPalette()`, `buildPaletteCommands(state)`, `filterPaletteCommands(commands, query)`.
+- `src/main/resources/web/js/state.js`
+  - New keys: `requestSortKey`, `requestSortDirection`, `tableDensity`, `paletteOpen`.
+
+**Text copies**
+
+- Density switch: "Comfortable", "Compact".
+- Palette placeholder: "Search routes and actions...".
+- Palette empty state: "No matching command".
+- Shortcuts dialog title: "Keyboard shortcuts". Rows: "Open command palette", "Close dialog", "Move between rows", "Reorder route", "Focus route search".
+- Palette commands: "Go to Overview", "Add route", "New request", "Import HAR", "Clear filters", "Toggle theme", "Open route: {routeId}".
+
+**Test suite (`src/test/js/web-helpers.test.mjs`)**
+
+- "sortRequestRows orders by duration in both directions"
+- "sortRequestRows keeps a stable order for equal keys"
+- "latencyLevel classifies a duration against the thresholds"
+- "buildRequestTableElement applies the compact density class"
+- "buildRequestTableElement marks the active sort column"
+- "buildPaletteCommands includes one command per route"
+- "filterPaletteCommands matches on the command label"
+
+#### To-do actions
+
+- [x] Add `latencyLevel` to `utils.js` and colour the duration cell by level. See deviation 1 below.
+- [x] Add `sortRequestRows` and sortable column headers that carry `aria-sort`.
+- [x] Add the density switch and keep the choice in `localStorage` under the key `tcpmon-table-density`.
+- [x] Make the table header sticky inside its scroll container.
+- [x] Create `src/main/resources/web/js/command-palette.js`, add its `script` tag, and bind the `Cmd/Ctrl+K` shortcut.
+- [x] Reuse the existing modal focus trap and Escape handler for the palette.
+- [x] Add the "Keyboard shortcuts" dialog and bind the `?` key to open it.
+- [x] Add `command-palette.js` to the module load list in `web-helpers.test.mjs` and write the seven test cases.
+- [x] Verify the changes with `npm run test:all`. 41 JavaScript tests and 67 Java tests pass.
+- [x] STOP. Present the changes to the user for review.
+
+#### Phase 3 outcome and deviations
+
+**Deviation 1: `latencyLevel` replaced duplicated logic, it did not add new logic.** The threshold rule already existed twice: in `formatDuration` (`utils.js`) and in `buildDurationCell` (`sessions.js`). Both now call the new `latencyLevel(durationMs)` and its companion `latencyClass(durationMs)`. The moderate threshold moved from 200 ms to the agreed 300 ms. The slow threshold stays at 1000 ms.
+
+The earlier note that every duration rendered in the alarm colour came from an old screenshot. The colour coding already worked before this phase.
+
+**Deviation 2: the sort applies to the current page only.** The request list uses server-side cursor pagination, and `sortRequestRows` reorders the rows the browser already holds. A sort by duration therefore ranks the visible page, not the whole result set. Every sortable header carries the title "Sort the requests on this page" so the scope is visible to the user. Server-side sorting would need a new API contract and was not in this plan.
+
+**Extra commands in the palette.** The agreed list did not include "Go to Routes". Without it the palette could enter the overview but not leave it, so it was added next to "Go to Overview".
+
+**Two bugs found during the runtime check.** Neither was reachable from a unit test:
+
+1. The request toolbar used a four column grid. The new density control became a fifth item and wrapped onto its own full width row. The toolbar is now a wrapping flex row, which also fixes the "Clear filters" button that wrapped before this phase.
+2. Closing the command palette set `aria-hidden="true"` on the dialog while its input still held focus. The browser reported it, and a screen reader user would lose the focused element. `restoreFocusOutOf(modal, opener)` now moves the focus out before the dialog is hidden. The same fix applies to the shortcuts dialog.
+
+**One refinement after the check:** the `?` and `/` shortcuts skip text entry targets. A `select` swallows no characters, so it was removed from that guard. Otherwise `?` stopped working after the user touched any dropdown.
+
+**Runtime verification:** the sortable headers, the compact density, the persisted density choice, the palette filter and its Enter action, and the shortcuts dialog were all checked in a browser against live traffic. The console reported no errors and no warnings.
+
+**Not done in this phase:** `CHANGELOG.md` and the `pom.xml` version are untouched, as in Phase 1 and Phase 2.
+
+## ⏭️ Next step
+
+Every phase is complete. Review the three phases, then decide whether to bump the version in `pom.xml` and write the `CHANGELOG.md` entry for the release.
+
+Plan built to impress the enterprise by 🐢 💨 (Turbotuga™, [Codely](https://codely.com)'s mascot)
diff --git a/src/main/java/com/cafeina/tcpmon/session/OverviewExchange.java b/src/main/java/com/cafeina/tcpmon/session/OverviewExchange.java
new file mode 100644
index 0000000..dfdbc24
--- /dev/null
+++ b/src/main/java/com/cafeina/tcpmon/session/OverviewExchange.java
@@ -0,0 +1,22 @@
+package com.cafeina.tcpmon.session;
+
+import java.time.Instant;
+
+/**
+ * One captured HTTP exchange, reduced to the fields the fleet overview needs.
+ *
+ * @param routeId    the route that captured the exchange
+ * @param startedAt  when the exchange started, never null
+ * @param durationMs the round trip duration, or null when it is unknown
+ * @param statusCode the response status code as text, or null when there is no response
+ * @param method     the request method, or null when the exchange is not HTTP
+ * @param path       the request path, or null when the exchange is not HTTP
+ */
+public record OverviewExchange(
+        String routeId,
+        Instant startedAt,
+        Integer durationMs,
+        String statusCode,
+        String method,
+        String path) {
+}
diff --git a/src/main/java/com/cafeina/tcpmon/session/SessionStore.java b/src/main/java/com/cafeina/tcpmon/session/SessionStore.java
index ccad26d..0199b2c 100644
--- a/src/main/java/com/cafeina/tcpmon/session/SessionStore.java
+++ b/src/main/java/com/cafeina/tcpmon/session/SessionStore.java
@@ -26,6 +26,7 @@
 import java.sql.Statement;
 import java.sql.Types;
 import java.time.Instant;
+import java.time.format.DateTimeParseException;
 import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.Base64;
@@ -456,6 +457,67 @@ public synchronized Map<String, Object> listRequestRowsPaginated(
         }
     }
 
+    /**
+     * Lists the exchanges that started at or after the given instant, newest first.
+     *
+     * <p>The SQL filter compares the stored ISO-8601 text. That comparison is coarse when two
+     * timestamps share a second but differ in precision, so every row is checked again in Java.</p>
+     *
+     * @param since the start of the window
+     * @param limit the maximum number of rows to read
+     * @return the matching exchanges, newest first
+     */
+    public synchronized List<OverviewExchange> overviewExchanges(Instant since, int limit) {
+        try (PreparedStatement statement = connection.prepareStatement("""
+                select
+                    route_id,
+                    started_at,
+                    duration_ms,
+                    response_status_code,
+                    request_method,
+                    request_path
+                from session_exchanges
+                where started_at is not null and started_at >= ?
+                order by started_at desc
+                limit ?
+                """)) {
+            statement.setString(1, since.toString());
+            statement.setInt(2, Math.max(1, limit));
+            try (ResultSet rs = statement.executeQuery()) {
+                List<OverviewExchange> rows = new ArrayList<>();
+                while (rs.next()) {
+                    Instant startedAt = parseInstantOrNull(rs.getString("started_at"));
+                    if (startedAt == null || startedAt.isBefore(since)) {
+                        continue;
+                    }
+                    int duration = rs.getInt("duration_ms");
+                    Integer durationMs = rs.wasNull() ? null : duration;
+                    rows.add(new OverviewExchange(
+                            rs.getString("route_id"),
+                            startedAt,
+                            durationMs,
+                            rs.getString("response_status_code"),
+                            rs.getString("request_method"),
+                            rs.getString("request_path")));
+                }
+                return rows;
+            }
+        } catch (SQLException exception) {
+            throw new IllegalStateException("Unable to list overview exchanges since " + since, exception);
+        }
+    }
+
+    private static Instant parseInstantOrNull(String value) {
+        if (value == null || value.isBlank()) {
+            return null;
+        }
+        try {
+            return Instant.parse(value);
+        } catch (DateTimeParseException exception) {
+            return null;
+        }
+    }
+
     public synchronized Map<String, Object> requestFacets(String routeId) {
         boolean hasRoute = routeId != null && !routeId.isBlank();
         Map<String, Object> result = new LinkedHashMap<>();
diff --git a/src/main/java/com/cafeina/tcpmon/web/ControlPlaneServer.java b/src/main/java/com/cafeina/tcpmon/web/ControlPlaneServer.java
index 1b632a7..456b01f 100644
--- a/src/main/java/com/cafeina/tcpmon/web/ControlPlaneServer.java
+++ b/src/main/java/com/cafeina/tcpmon/web/ControlPlaneServer.java
@@ -80,6 +80,7 @@ public final class ControlPlaneServer implements AutoCloseable {
     private final UiConfig config;
     private final SessionStore sessionStore;
     private final ReplayService replayService;
+    private final OverviewAggregator overviewAggregator;
     private final ObjectMapper objectMapper = JsonSupport.objectMapper();
     private final CopyOnWriteArrayList<SseClient> sseClients = new CopyOnWriteArrayList<>();
     private final SessionChangeListener changeListener = this::broadcastSessionChange;
@@ -98,6 +99,7 @@ public ControlPlaneServer(ProxyConfig proxyConfig, RouteRegistry registry, TcpMo
         this.registry = registry;
         this.proxy = proxy;
         this.config = proxyConfig.ui();
+        this.overviewAggregator = new OverviewAggregator(sessionStore);
         this.sessionStore = sessionStore;
         this.replayService = replayService;
     }
@@ -121,6 +123,7 @@ public void start() throws IOException {
         server.createContext("/api/sessions", this::handleSessions);
         server.createContext("/api/requests", this::handleRequests);
         server.createContext("/api/request-facets", this::handleRequestFacets);
+        server.createContext("/api/overview", this::handleOverview);
         server.createContext("/api/pending/", this::handlePending);
         server.createContext("/api/replay", this::handleReplay);
         server.createContext("/api/config", this::handleConfig);
@@ -302,6 +305,41 @@ private void handleRequestFacets(HttpExchange exchange) throws IOException {
         sendJson(exchange, 200, sessionStore.requestFacets(routeId));
     }
 
+    private void handleOverview(HttpExchange exchange) throws IOException {
+        if (!requireAuth(exchange)) return;
+        if (!"GET".equalsIgnoreCase(exchange.getRequestMethod())) {
+            sendJson(exchange, 405, Map.of("error", "method not allowed"));
+            return;
+        }
+        Map<String, String> params = parseQueryParams(exchange.getRequestURI().getQuery());
+        int windowMinutes = 60;
+        String requested = params.get("windowMinutes");
+        if (requested != null && !requested.isBlank()) {
+            try {
+                windowMinutes = Integer.parseInt(requested.trim());
+            } catch (NumberFormatException exception) {
+                sendJson(exchange, 400, Map.of("error", "windowMinutes must be an integer"));
+                return;
+            }
+        }
+        if (!OverviewAggregator.isValidWindow(windowMinutes)) {
+            sendJson(exchange, 400, Map.of(
+                    "error", "unsupported windowMinutes",
+                    "allowed", List.copyOf(OverviewAggregator.ALLOWED_WINDOW_MINUTES)));
+            return;
+        }
+        long start = System.currentTimeMillis();
+        OverviewAggregator.OverviewReport report = overviewAggregator.aggregate(windowMinutes);
+        if (metricsLog.isInfoEnabled()) {
+            metricsLog.info("/api/overview windowMinutes={} dbMs={} routes={} requests={}",
+                    windowMinutes,
+                    System.currentTimeMillis() - start,
+                    report.routes().size(),
+                    report.totals().requests());
+        }
+        sendJson(exchange, 200, report);
+    }
+
     private void handleEvents(HttpExchange exchange) throws IOException {
         if (!requireAuth(exchange)) return;
         if (!"GET".equalsIgnoreCase(exchange.getRequestMethod())) {
diff --git a/src/main/java/com/cafeina/tcpmon/web/OverviewAggregator.java b/src/main/java/com/cafeina/tcpmon/web/OverviewAggregator.java
new file mode 100644
index 0000000..fdbb0ac
--- /dev/null
+++ b/src/main/java/com/cafeina/tcpmon/web/OverviewAggregator.java
@@ -0,0 +1,318 @@
+package com.cafeina.tcpmon.web;
+
+import com.cafeina.tcpmon.RouteConfig;
+import com.cafeina.tcpmon.session.OverviewExchange;
+import com.cafeina.tcpmon.session.SessionStore;
+
+import java.time.Duration;
+import java.time.Instant;
+import java.util.ArrayList;
+import java.util.Comparator;
+import java.util.LinkedHashMap;
+import java.util.LinkedHashSet;
+import java.util.List;
+import java.util.Map;
+import java.util.Set;
+
+/**
+ * Builds the fleet overview: one health summary for every route in a time window.
+ *
+ * <p>An error is a 5xx response. That matches the definition the route statistics already use.
+ * A 4xx response counts as a client error and is reported apart, because it does not indicate
+ * that the target is unhealthy.</p>
+ */
+public final class OverviewAggregator {
+
+    /** The time windows the endpoint accepts, in minutes. */
+    public static final Set<Integer> ALLOWED_WINDOW_MINUTES = Set.of(15, 60, 1440);
+
+    /** The maximum number of exchanges that one report reads. */
+    static final int MAX_ROWS = 20_000;
+
+    /** The number of buckets in a route sparkline. */
+    static final int SPARKLINE_BUCKETS = 12;
+
+    /** A route is degraded at or above this error rate. */
+    static final double DEGRADED_ERROR_RATE = 0.05;
+
+    /** A route is failing at or above this error rate. */
+    static final double FAILING_ERROR_RATE = 0.20;
+
+    /** The number of slow paths the report lists. */
+    static final int SLOWEST_PATH_LIMIT = 5;
+
+    private final SessionStore sessionStore;
+
+    public OverviewAggregator(SessionStore sessionStore) {
+        this.sessionStore = sessionStore;
+    }
+
+    /**
+     * Tells whether the endpoint accepts the given window.
+     *
+     * @param windowMinutes the requested window
+     * @return true when the window is allowed
+     */
+    public static boolean isValidWindow(int windowMinutes) {
+        return ALLOWED_WINDOW_MINUTES.contains(windowMinutes);
+    }
+
+    /**
+     * Builds the report for the given window.
+     *
+     * @param windowMinutes the window, which must be allowed
+     * @return the report
+     * @throws IllegalArgumentException if the window is not allowed
+     */
+    public OverviewReport aggregate(int windowMinutes) {
+        if (!isValidWindow(windowMinutes)) {
+            throw new IllegalArgumentException("Unsupported window: " + windowMinutes);
+        }
+        Instant now = Instant.now();
+        Instant since = now.minus(Duration.ofMinutes(windowMinutes));
+        List<OverviewExchange> rows = sessionStore.overviewExchanges(since, MAX_ROWS);
+        List<RouteConfig> routes = sessionStore.loadRoutes();
+        return summarize(rows, routes, windowMinutes, now);
+    }
+
+    /**
+     * Reduces the raw exchanges to a report. This method is pure, so it is easy to test.
+     *
+     * @param rows          the exchanges inside the window
+     * @param routes        every configured route
+     * @param windowMinutes the window
+     * @param now           the end of the window
+     * @return the report
+     */
+    static OverviewReport summarize(
+            List<OverviewExchange> rows,
+            List<RouteConfig> routes,
+            int windowMinutes,
+            Instant now) {
+
+        Map<String, List<OverviewExchange>> byRoute = new LinkedHashMap<>();
+        Set<String> routeIds = new LinkedHashSet<>();
+        for (RouteConfig route : routes) {
+            routeIds.add(route.id());
+        }
+        for (OverviewExchange row : rows) {
+            String routeId = row.routeId() == null ? "default" : row.routeId();
+            routeIds.add(routeId);
+            byRoute.computeIfAbsent(routeId, key -> new ArrayList<>()).add(row);
+        }
+
+        Map<String, RouteConfig> routeById = new LinkedHashMap<>();
+        for (RouteConfig route : routes) {
+            routeById.put(route.id(), route);
+        }
+
+        Instant since = now.minus(Duration.ofMinutes(windowMinutes));
+        List<RouteOverview> routeOverviews = new ArrayList<>();
+        for (String routeId : routeIds) {
+            List<OverviewExchange> routeRows = byRoute.getOrDefault(routeId, List.of());
+            RouteConfig config = routeById.get(routeId);
+            routeOverviews.add(buildRouteOverview(routeId, config, routeRows, since, now));
+        }
+        routeOverviews.sort(Comparator
+                .comparingLong(RouteOverview::errors).reversed()
+                .thenComparing(Comparator.comparingLong(RouteOverview::requests).reversed())
+                .thenComparing(RouteOverview::routeId));
+
+        return new OverviewReport(
+                now.toString(),
+                windowMinutes,
+                buildTotals(rows),
+                routeOverviews,
+                buildSlowestPaths(rows));
+    }
+
+    private static RouteOverview buildRouteOverview(
+            String routeId,
+            RouteConfig config,
+            List<OverviewExchange> rows,
+            Instant since,
+            Instant now) {
+
+        long requests = rows.size();
+        long errors = countByStatusPrefix(rows, '5');
+        long clientErrors = countByStatusPrefix(rows, '4');
+        double errorRate = rate(errors, requests);
+        List<Integer> durations = sortedDurations(rows);
+
+        return new RouteOverview(
+                routeId,
+                config == null ? null : config.listener().host() + ":" + config.listener().port(),
+                config == null ? null : config.target().host() + ":" + config.target().port(),
+                statusFor(requests, errorRate),
+                requests,
+                errors,
+                clientErrors,
+                errorRate,
+                percentile(durations, 0.50),
+                percentile(durations, 0.95),
+                buildSparkline(rows, since, now));
+    }
+
+    private static OverviewTotals buildTotals(List<OverviewExchange> rows) {
+        long requests = rows.size();
+        long errors = countByStatusPrefix(rows, '5');
+        long clientErrors = countByStatusPrefix(rows, '4');
+        List<Integer> durations = sortedDurations(rows);
+        return new OverviewTotals(
+                requests,
+                errors,
+                clientErrors,
+                rate(errors, requests),
+                percentile(durations, 0.50),
+                percentile(durations, 0.95));
+    }
+
+    private static List<SlowPath> buildSlowestPaths(List<OverviewExchange> rows) {
+        Map<String, List<OverviewExchange>> grouped = new LinkedHashMap<>();
+        for (OverviewExchange row : rows) {
+            if (row.method() == null || row.path() == null || row.durationMs() == null) {
+                continue;
+            }
+            String key = row.routeId() + " " + row.method() + " " + row.path();
+            grouped.computeIfAbsent(key, ignored -> new ArrayList<>()).add(row);
+        }
+        List<SlowPath> paths = new ArrayList<>();
+        for (List<OverviewExchange> group : grouped.values()) {
+            OverviewExchange first = group.get(0);
+            paths.add(new SlowPath(
+                    first.method(),
+                    first.path(),
+                    first.routeId(),
+                    percentile(sortedDurations(group), 0.95),
+                    group.size()));
+        }
+        paths.sort(Comparator
+                .comparingInt((SlowPath path) -> path.p95Ms() == null ? 0 : path.p95Ms()).reversed()
+                .thenComparing(SlowPath::path));
+        return paths.size() > SLOWEST_PATH_LIMIT ? List.copyOf(paths.subList(0, SLOWEST_PATH_LIMIT)) : List.copyOf(paths);
+    }
+
+    /**
+     * Counts the requests in each sparkline bucket, oldest bucket first.
+     *
+     * @param rows  the exchanges of one route
+     * @param since the start of the window
+     * @param now   the end of the window
+     * @return one count per bucket
+     */
+    static List<Long> buildSparkline(List<OverviewExchange> rows, Instant since, Instant now) {
+        long[] buckets = new long[SPARKLINE_BUCKETS];
+        long spanMillis = Math.max(1L, now.toEpochMilli() - since.toEpochMilli());
+        for (OverviewExchange row : rows) {
+            long offset = row.startedAt().toEpochMilli() - since.toEpochMilli();
+            int index = (int) ((offset * SPARKLINE_BUCKETS) / spanMillis);
+            buckets[Math.min(SPARKLINE_BUCKETS - 1, Math.max(0, index))] += 1;
+        }
+        List<Long> result = new ArrayList<>(SPARKLINE_BUCKETS);
+        for (long bucket : buckets) {
+            result.add(bucket);
+        }
+        return result;
+    }
+
+    /**
+     * Returns the nearest rank percentile of the durations.
+     *
+     * @param sortedDurations the durations, sorted ascending
+     * @param percentile      the percentile between 0 and 1
+     * @return the value, or null when there is no duration
+     */
+    static Integer percentile(List<Integer> sortedDurations, double percentile) {
+        if (sortedDurations.isEmpty()) {
+            return null;
+        }
+        int rank = (int) Math.ceil(percentile * sortedDurations.size());
+        int index = Math.min(sortedDurations.size() - 1, Math.max(0, rank - 1));
+        return sortedDurations.get(index);
+    }
+
+    private static List<Integer> sortedDurations(List<OverviewExchange> rows) {
+        List<Integer> durations = new ArrayList<>();
+        for (OverviewExchange row : rows) {
+            if (row.durationMs() != null) {
+                durations.add(row.durationMs());
+            }
+        }
+        durations.sort(Comparator.naturalOrder());
+        return durations;
+    }
+
+    private static long countByStatusPrefix(List<OverviewExchange> rows, char prefix) {
+        long count = 0;
+        for (OverviewExchange row : rows) {
+            String status = row.statusCode();
+            if (status != null && !status.isEmpty() && status.charAt(0) == prefix) {
+                count += 1;
+            }
+        }
+        return count;
+    }
+
+    private static double rate(long part, long total) {
+        if (total <= 0) {
+            return 0.0;
+        }
+        return Math.round((double) part / total * 10_000.0) / 10_000.0;
+    }
+
+    private static String statusFor(long requests, double errorRate) {
+        if (requests == 0) {
+            return "idle";
+        }
+        if (errorRate >= FAILING_ERROR_RATE) {
+            return "failing";
+        }
+        if (errorRate >= DEGRADED_ERROR_RATE) {
+            return "degraded";
+        }
+        return "healthy";
+    }
+
+    /** The whole report. */
+    public record OverviewReport(
+            String generatedAt,
+            int windowMinutes,
+            OverviewTotals totals,
+            List<RouteOverview> routes,
+            List<SlowPath> slowestPaths) {
+    }
+
+    /** The totals across every route. */
+    public record OverviewTotals(
+            long requests,
+            long errors,
+            long clientErrors,
+            double errorRate,
+            Integer p50Ms,
+            Integer p95Ms) {
+    }
+
+    /** The health of one route. */
+    public record RouteOverview(
+            String routeId,
+            String listener,
+            String target,
+            String status,
+            long requests,
+            long errors,
+            long clientErrors,
+            double errorRate,
+            Integer p50Ms,
+            Integer p95Ms,
+            List<Long> sparkline) {
+    }
+
+    /** One slow request path. */
+    public record SlowPath(
+            String method,
+            String path,
+            String routeId,
+            Integer p95Ms,
+            long count) {
+    }
+}
diff --git a/src/main/resources/web/index.html b/src/main/resources/web/index.html
index b8b140b..857cf56 100644
--- a/src/main/resources/web/index.html
+++ b/src/main/resources/web/index.html
@@ -23,6 +23,7 @@
   <link rel="stylesheet" href="/assets/styles/app.css">
 </head>
 <body>
+  <a class="skip-link" href="#main-content">Skip to main content</a>
   <div class="app">
     <header class="topbar">
       <div class="topbar-title">
@@ -37,29 +38,32 @@ <h1 class="sr-only">tcpmon-tls control plane</h1>
     </header>
     <div id="config-panel-container"></div>
 
+    <section id="overview" class="overview" aria-label="Fleet overview" hidden></section>
+
     <div id="app-layout" class="layout">
-      <aside class="sidebar">
+      <nav class="sidebar" aria-label="Routes">
         <div class="sidebar-section">
           <div class="sidebar-header">
             <h2>Routes</h2>
             <div class="sidebar-header-actions">
-              <button id="new-request-btn" class="utility add-route-btn" title="New request" aria-label="New request">✎</button>
-              <button id="import-har-btn" class="utility add-route-btn" title="Import HAR" aria-label="Import HAR">⇧</button>
-              <button id="add-route-btn" class="utility add-route-btn" title="Add route" aria-label="Add route">+</button>
+              <button id="new-request-btn" class="utility add-route-btn" title="New request" aria-label="New request" data-icon="send"></button>
+              <button id="import-har-btn" class="utility add-route-btn" title="Import HAR" aria-label="Import HAR" data-icon="upload"></button>
+              <button id="add-route-btn" class="utility add-route-btn" title="Add route" aria-label="Add route" data-icon="plus"></button>
             </div>
             <input type="file" id="har-import-file-input" accept=".har,application/json" style="display:none;">
           </div>
         </div>
         <div class="sidebar-section">
           <div class="toolbar">
+            <label class="sr-only" for="route-search">Filter routes</label>
             <input id="route-search" type="search" placeholder="Search route or target">
-            <button id="refresh-routes-btn" class="utility">Refresh</button>
+            <button id="refresh-routes-btn" class="utility" data-icon="refresh" data-icon-label="Refresh"></button>
           </div>
         </div>
         <div id="routes" class="route-list"></div>
-      </aside>
+      </nav>
 
-      <main class="content">
+      <main id="main-content" class="content" tabindex="-1">
         <div id="status-banner" aria-live="polite" aria-atomic="false"></div>
         <div id="route-header"></div>
         <div id="request-table"></div>
@@ -76,7 +80,7 @@ <h2>Routes</h2>
           <strong id="route-modal-title" style="font-size:15px;">Add Route</strong>
           <div id="route-modal-summary" class="route-modal-summary" aria-live="polite"></div>
         </div>
-        <button id="route-modal-close-btn" class="utility modal-close-btn" aria-label="Close dialog">✕</button>
+        <button id="route-modal-close-btn" class="utility modal-close-btn" aria-label="Close dialog" data-icon="close"></button>
       </div>
       <div class="modal-body">
         <div id="route-modal-error" class="modal-error" role="alert"></div>
@@ -385,13 +389,13 @@ <h2>Routes</h2>
     <div class="modal-box confirm-modal-box">
       <div class="modal-hdr">
         <strong id="confirm-modal-title">Confirm action</strong>
-        <button id="confirm-modal-close-btn" class="utility modal-close-btn" aria-label="Close dialog">✕</button>
+        <button id="confirm-modal-close-btn" class="utility modal-close-btn" aria-label="Close dialog" data-icon="close"></button>
       </div>
       <div class="modal-body">
         <p id="confirm-modal-message" class="confirm-modal-message"></p>
         <div class="modal-actions">
           <button id="confirm-modal-cancel-btn" class="secondary">Cancel</button>
-          <button id="confirm-modal-confirm-btn" class="danger" data-action="confirm-delete-route">Delete route</button>
+          <button id="confirm-modal-confirm-btn" class="danger" data-action="confirm-delete-route" data-icon="trash" data-icon-label="Delete route"></button>
         </div>
       </div>
     </div>
@@ -403,12 +407,12 @@ <h2>Routes</h2>
         <div class="modal-hdr-main">
           <strong id="body-view-modal-title">Request body</strong>
         </div>
-        <button id="body-view-modal-close-btn" class="utility modal-close-btn" aria-label="Close dialog">✕</button>
+        <button id="body-view-modal-close-btn" class="utility modal-close-btn" aria-label="Close dialog" data-icon="close"></button>
       </div>
       <div class="modal-body body-view-modal-body">
         <div class="body-view-modal-toolbar">
-          <button id="body-view-modal-copy-headers-btn" class="utility" data-action="copy-current-headers">Copy headers</button>
-          <button id="body-view-modal-copy-body-btn" class="utility" data-action="copy-current-body">Copy body</button>
+          <button id="body-view-modal-copy-headers-btn" class="utility" data-action="copy-current-headers" data-icon="copy" data-icon-label="Copy headers"></button>
+          <button id="body-view-modal-copy-body-btn" class="utility" data-action="copy-current-body" data-icon="copy" data-icon-label="Copy body"></button>
         </div>
         <div id="body-view-modal-viewer-container" class="body-view-modal-viewer-container"></div>
       </div>
@@ -421,7 +425,7 @@ <h2>Routes</h2>
         <div class="modal-hdr-main">
           <strong id="replay-edit-modal-title">Edit &amp; Resend Request</strong>
         </div>
-        <button id="replay-edit-modal-close-btn" class="utility modal-close-btn" aria-label="Close dialog">✕</button>
+        <button id="replay-edit-modal-close-btn" class="utility modal-close-btn" aria-label="Close dialog" data-icon="close"></button>
       </div>
       <div class="modal-body replay-edit-modal-body">
         <div class="editor-grid">
@@ -472,7 +476,7 @@ <h2>Routes</h2>
         <div class="modal-hdr-main">
           <strong id="request-builder-modal-title">New Request</strong>
         </div>
-        <button id="request-builder-modal-close-btn" class="utility modal-close-btn" aria-label="Close dialog">✕</button>
+        <button id="request-builder-modal-close-btn" class="utility modal-close-btn" aria-label="Close dialog" data-icon="close"></button>
       </div>
       <div class="modal-body request-builder-modal-body">
         <div class="editor-grid">
@@ -524,7 +528,7 @@ <h2>Routes</h2>
         <div class="modal-hdr-main">
           <strong id="har-import-modal-title">Import HAR</strong>
         </div>
-        <button id="har-import-modal-close-btn" class="utility modal-close-btn" aria-label="Close dialog">✕</button>
+        <button id="har-import-modal-close-btn" class="utility modal-close-btn" aria-label="Close dialog" data-icon="close"></button>
       </div>
       <div class="modal-body har-import-modal-body">
         <p class="har-import-hint">Choose which captured request to open in the request builder.</p>
@@ -536,6 +540,35 @@ <h2>Routes</h2>
     </div>
   </div>
 
+  <div id="command-palette" class="modal-overlay palette-overlay" style="display:none;" role="dialog" aria-modal="true" aria-label="Command palette" aria-hidden="true">
+    <div class="modal-box palette-box">
+      <div class="palette-search">
+        <label class="sr-only" for="command-palette-input">Search routes and actions</label>
+        <input id="command-palette-input" type="search" placeholder="Search routes and actions..." autocomplete="off">
+      </div>
+      <div id="command-palette-list" class="palette-list" role="listbox" aria-label="Commands"></div>
+    </div>
+  </div>
+
+  <div id="shortcuts-modal" class="modal-overlay" style="display:none;" role="dialog" aria-modal="true" aria-labelledby="shortcuts-modal-title" aria-hidden="true">
+    <div class="modal-box">
+      <div class="modal-hdr">
+        <strong id="shortcuts-modal-title">Keyboard shortcuts</strong>
+        <button id="shortcuts-modal-close-btn" class="utility modal-close-btn" aria-label="Close dialog" data-icon="close"></button>
+      </div>
+      <div class="modal-body">
+        <dl class="shortcut-list">
+          <dt><kbd>Ctrl</kbd> <kbd>K</kbd></dt><dd>Open command palette</dd>
+          <dt><kbd>?</kbd></dt><dd>Show keyboard shortcuts</dd>
+          <dt><kbd>Esc</kbd></dt><dd>Close dialog</dd>
+          <dt><kbd>↑</kbd> <kbd>↓</kbd></dt><dd>Move between rows</dd>
+          <dt><kbd>Alt</kbd> <kbd>↑</kbd> <kbd>↓</kbd></dt><dd>Reorder route</dd>
+          <dt><kbd>/</kbd></dt><dd>Focus route search</dd>
+        </dl>
+      </div>
+    </div>
+  </div>
+
   <script defer src="/assets/js/state.js"></script>
   <script defer src="/assets/js/utils.js"></script>
   <script defer src="/assets/js/api.js"></script>
@@ -548,6 +581,8 @@ <h2>Routes</h2>
   <script defer src="/assets/js/replay-edit-modal.js"></script>
   <script defer src="/assets/js/request-builder-modal.js"></script>
   <script defer src="/assets/js/har-import-modal.js"></script>
+  <script defer src="/assets/js/overview.js"></script>
+  <script defer src="/assets/js/command-palette.js"></script>
   <script defer src="/assets/js/app.js"></script>
 </body>
 </html>
diff --git a/src/main/resources/web/js/app.js b/src/main/resources/web/js/app.js
index 6b441d6..ee42b20 100644
--- a/src/main/resources/web/js/app.js
+++ b/src/main/resources/web/js/app.js
@@ -41,6 +41,27 @@ function renderBanner() {
   el.replaceChildren(...fragments);
 }
 
+function applyActiveView() {
+  const view = getState('activeView');
+  const overview = document.getElementById('overview');
+  const layout = document.getElementById('app-layout');
+  if (overview) overview.hidden = view !== 'overview';
+  if (layout) layout.hidden = view === 'overview';
+}
+
+function setActiveView(view) {
+  const next = view === 'overview' ? 'overview' : 'routes';
+  if (getState('activeView') === next) return Promise.resolve();
+  setState('activeView', next);
+  applyActiveView();
+  renderConfigButton();
+  updateTopbarSubtitle();
+  if (next === 'overview') {
+    return loadOverview();
+  }
+  return renderApp();
+}
+
 function renderApp(options = {}) {
   const activeSession = getState('activeSession');
   const settings = {
@@ -51,9 +72,13 @@ function renderApp(options = {}) {
     detailEmptyMessage: 'No requests for the selected route.',
     ...options
   };
+  applyActiveView();
   if (settings.banner) {
     renderBanner();
   }
+  if (getState('activeView') === 'overview') {
+    return Promise.resolve();
+  }
   if (settings.list) {
     renderRouteList();
     renderRouteHeader();
@@ -94,46 +119,7 @@ function parseBooleanAttr(value) {
 }
 
 function initializeStaticButtonIcons() {
-  setButtonContent(document.getElementById('add-route-btn'), '', 'plus', {
-    title: 'Add route',
-    ariaLabel: 'Add route'
-  });
-  setButtonContent(document.getElementById('refresh-routes-btn'), 'Refresh', 'refresh');
-  setButtonContent(document.getElementById('route-modal-close-btn'), '', 'close', {
-    title: 'Close dialog',
-    ariaLabel: 'Close dialog'
-  });
-  setButtonContent(document.getElementById('confirm-modal-close-btn'), '', 'close', {
-    title: 'Close dialog',
-    ariaLabel: 'Close dialog'
-  });
-  setButtonContent(document.getElementById('confirm-modal-confirm-btn'), 'Delete route', 'trash');
-  setButtonContent(document.getElementById('body-view-modal-close-btn'), '', 'close', {
-    title: 'Close dialog',
-    ariaLabel: 'Close dialog'
-  });
-  setButtonContent(document.getElementById('body-view-modal-copy-headers-btn'), 'Copy headers', 'copy');
-  setButtonContent(document.getElementById('body-view-modal-copy-body-btn'), 'Copy body', 'copy');
-  setButtonContent(document.getElementById('replay-edit-modal-close-btn'), '', 'close', {
-    title: 'Close dialog',
-    ariaLabel: 'Close dialog'
-  });
-  setButtonContent(document.getElementById('new-request-btn'), '', 'send', {
-    title: 'New request',
-    ariaLabel: 'New request'
-  });
-  setButtonContent(document.getElementById('request-builder-modal-close-btn'), '', 'close', {
-    title: 'Close dialog',
-    ariaLabel: 'Close dialog'
-  });
-  setButtonContent(document.getElementById('import-har-btn'), '', 'upload', {
-    title: 'Import HAR',
-    ariaLabel: 'Import HAR'
-  });
-  setButtonContent(document.getElementById('har-import-modal-close-btn'), '', 'close', {
-    title: 'Close dialog',
-    ariaLabel: 'Close dialog'
-  });
+  return hydrateStaticIcons(document);
 }
 
 const THEME_STORAGE_KEY = 'tcpmon-theme-preference';
@@ -203,6 +189,23 @@ function bindUiEvents() {
     routesContainer.addEventListener('dragend', handleRouteDragEnd);
   }
 
+  const commandPalette = document.getElementById('command-palette');
+  if (commandPalette) {
+    commandPalette.addEventListener('click', event => {
+      if (event.target === commandPalette) closeCommandPalette();
+    });
+  }
+
+  const shortcutsModal = document.getElementById('shortcuts-modal');
+  if (shortcutsModal) {
+    shortcutsModal.addEventListener('click', event => {
+      if (event.target === shortcutsModal) closeShortcutsDialog();
+    });
+  }
+
+  const shortcutsCloseBtn = document.getElementById('shortcuts-modal-close-btn');
+  if (shortcutsCloseBtn) shortcutsCloseBtn.addEventListener('click', () => closeShortcutsDialog());
+
   const refreshRoutesBtn = document.getElementById('refresh-routes-btn');
   if (refreshRoutesBtn) refreshRoutesBtn.addEventListener('click', () => refreshSessions(true));
 
@@ -342,6 +345,9 @@ function bindUiEvents() {
       applyThemePreference(event.target.value);
       renderConfigButton();
     }
+    if (event.target && event.target.id === 'overview-window') {
+      setOverviewWindow(event.target.value);
+    }
   });
 
   for (const fieldId of [
@@ -369,6 +375,23 @@ function bindUiEvents() {
     if (!actionEl) return;
     const { action } = actionEl.dataset;
     switch (action) {
+      case 'show-view':
+        setActiveView(actionEl.dataset.view);
+        break;
+      case 'sort-requests':
+        toggleRequestSort(actionEl.dataset.sortKey);
+        break;
+      case 'run-palette-command':
+        runPaletteCommand(actionEl.dataset.commandId);
+        break;
+      case 'refresh-overview':
+        setState('overviewData', null);
+        loadOverview();
+        break;
+      case 'open-route':
+        await setActiveView('routes');
+        selectRoute(actionEl.dataset.routeId);
+        break;
       case 'select-route':
         selectRoute(actionEl.dataset.routeId);
         break;
@@ -488,6 +511,51 @@ function bindUiEvents() {
 
   document.addEventListener('keydown', event => {
     const modal = getOpenModal();
+
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
+      event.preventDefault();
+      if (getState('paletteOpen')) {
+        closeCommandPalette();
+      } else {
+        openCommandPalette();
+      }
+      return;
+    }
+
+    if (getState('paletteOpen')) {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        movePaletteSelection(1);
+        return;
+      }
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        movePaletteSelection(-1);
+        return;
+      }
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        runActivePaletteCommand();
+        return;
+      }
+    }
+
+    if (!modal && !isTextEntryTarget(event.target)) {
+      if (event.key === '?') {
+        event.preventDefault();
+        openShortcutsDialog();
+        return;
+      }
+      if (event.key === '/') {
+        const search = document.getElementById('route-search');
+        if (search) {
+          event.preventDefault();
+          search.focus();
+          return;
+        }
+      }
+    }
+
     if (event.key === 'Escape') {
       if (modal) {
         if (modal.id === 'route-modal') {
@@ -502,6 +570,10 @@ function bindUiEvents() {
           closeRequestBuilderModal();
         } else if (modal.id === 'har-import-modal') {
           closeHarImportModal();
+        } else if (modal.id === 'command-palette') {
+          closeCommandPalette();
+        } else if (modal.id === 'shortcuts-modal') {
+          closeShortcutsDialog();
         }
       }
     }
@@ -532,6 +604,9 @@ function bindUiEvents() {
     if (event.target.id === 'request-search') {
       debounceRequestSearch();
     }
+    if (event.target.id === 'command-palette-input') {
+      renderPaletteResults();
+    }
   });
 
   document.addEventListener('change', event => {
@@ -539,6 +614,10 @@ function bindUiEvents() {
       toggleSearchAllRoutes(event.target.checked);
       return;
     }
+    if (event.target.id === 'request-density') {
+      setTableDensity(event.target.value);
+      return;
+    }
     if (event.target.id === 'request-method-filter' || event.target.id === 'request-status-code-filter' || event.target.id === 'request-page-size') {
       resetRequestPageAndRender();
     }
@@ -569,6 +648,12 @@ function moveListFocus(event, selector) {
   return true;
 }
 
+function isTextEntryTarget(target) {
+  if (!target || !target.tagName) return false;
+  const tag = String(target.tagName).toLowerCase();
+  return tag === 'input' || tag === 'textarea' || target.isContentEditable === true;
+}
+
 function getOpenModal() {
   return [...document.querySelectorAll('.modal-overlay')]
     .find(modal => modal.style.display !== 'none') || null;
@@ -658,6 +743,10 @@ async function handleSessionChange(event) {
   } catch (error) {
     return;
   }
+  if (getState('activeView') === 'overview') {
+    scheduleOverviewRefresh();
+    return;
+  }
   const activeSession = getState('activeSession');
   const activeRoute = getState('activeRoute');
   const affectsActiveSession = Boolean(activeSession && payload.sessionId === activeSession);
@@ -696,6 +785,17 @@ async function handleSessionChange(event) {
   }
 }
 
+function scheduleOverviewRefresh() {
+  if (getState('scheduledOverviewRefreshTimer')) return;
+  setState('scheduledOverviewRefreshTimer', setTimeout(() => {
+    setState('scheduledOverviewRefreshTimer', null);
+    if (getState('activeView') !== 'overview') return;
+    loadOverview().catch(() => {
+      // The error state is already rendered by loadOverview.
+    });
+  }, 2000));
+}
+
 function scheduleDetailRefresh() {
   setState('pendingDetailRefresh', true);
   if (getState('scheduledDetailRefreshTimer')) {
@@ -810,6 +910,10 @@ function scheduleRequestTableRefresh() {
 function updateTopbarSubtitle() {
   const el = document.getElementById('topbar-subtitle');
   if (!el) return;
+  if (getState('activeView') === 'overview') {
+    el.textContent = 'Fleet health across every route. Select a row to inspect that route.';
+    return;
+  }
   if (getState('searchAllRoutes')) {
     const facets = getState('requestFacets') || {};
     const total = Number(facets.totalRequests || getState('requestRows').length || 0);
@@ -858,5 +962,8 @@ async function clearRequestFilters() {
 bindUiEvents();
 initializeTheme();
 initializeRouteOrder();
+initializeOverviewWindow();
+initializeTableDensity();
 initializeStaticButtonIcons();
+applyActiveView();
 initApp();
diff --git a/src/main/resources/web/js/command-palette.js b/src/main/resources/web/js/command-palette.js
new file mode 100644
index 0000000..388cd6b
--- /dev/null
+++ b/src/main/resources/web/js/command-palette.js
@@ -0,0 +1,188 @@
+let commandPaletteOpenerEl = null;
+let shortcutsOpenerEl = null;
+
+/**
+ * Builds every command the palette can run for the given state.
+ * The state is passed in so the list can be tested without a live page.
+ */
+function buildPaletteCommands(state = {}) {
+  const routes = Array.isArray(state?.proxyConfig?.routes) ? state.proxyConfig.routes : [];
+  const commands = [
+    {
+      id: 'go-overview',
+      label: 'Go to Overview',
+      hint: 'View',
+      run: () => setActiveView('overview')
+    },
+    {
+      id: 'go-routes',
+      label: 'Go to Routes',
+      hint: 'View',
+      run: () => setActiveView('routes')
+    },
+    {
+      id: 'add-route',
+      label: 'Add route',
+      hint: 'Route',
+      run: () => openAddRouteModal()
+    },
+    {
+      id: 'new-request',
+      label: 'New request',
+      hint: 'Request',
+      run: () => openRequestBuilderModal()
+    },
+    {
+      id: 'import-har',
+      label: 'Import HAR',
+      hint: 'Request',
+      run: () => document.getElementById('har-import-file-input')?.click()
+    },
+    {
+      id: 'clear-filters',
+      label: 'Clear filters',
+      hint: 'Request',
+      run: () => clearRequestFilters()
+    },
+    {
+      id: 'toggle-theme',
+      label: 'Toggle theme',
+      hint: 'Appearance',
+      run: () => {
+        applyThemePreference(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark');
+        renderConfigButton();
+      }
+    }
+  ];
+  for (const route of routes) {
+    commands.push({
+      id: 'open-route:' + route.id,
+      label: 'Open route: ' + route.id,
+      hint: 'Route',
+      run: async () => {
+        await setActiveView('routes');
+        selectRoute(route.id);
+      }
+    });
+  }
+  return commands;
+}
+
+function filterPaletteCommands(commands, query) {
+  const list = Array.isArray(commands) ? commands : [];
+  const needle = String(query || '').trim().toLowerCase();
+  if (!needle) return list;
+  return list.filter(command => String(command.label || '').toLowerCase().includes(needle));
+}
+
+function renderPaletteResults() {
+  const list = document.getElementById('command-palette-list');
+  const input = document.getElementById('command-palette-input');
+  if (!list) return;
+  const commands = filterPaletteCommands(buildPaletteCommands(window.uiState), input ? input.value : '');
+  if (!commands.length) {
+    list.replaceChildren(buildEmptyState('No matching command'));
+    return;
+  }
+  const items = commands.map((command, index) => {
+    const item = document.createElement('button');
+    item.className = 'palette-item' + (index === 0 ? ' is-active' : '');
+    item.type = 'button';
+    item.dataset.action = 'run-palette-command';
+    item.dataset.commandId = command.id;
+
+    const label = document.createElement('span');
+    label.className = 'palette-item-label';
+    label.textContent = command.label;
+    item.appendChild(label);
+
+    if (command.hint) {
+      const hint = document.createElement('span');
+      hint.className = 'palette-item-hint';
+      hint.textContent = command.hint;
+      item.appendChild(hint);
+    }
+    return item;
+  });
+  list.replaceChildren(...items);
+}
+
+function runPaletteCommand(commandId) {
+  const command = buildPaletteCommands(window.uiState).find(entry => entry.id === commandId);
+  closeCommandPalette();
+  if (command) command.run();
+}
+
+function openCommandPalette() {
+  const modal = document.getElementById('command-palette');
+  if (!modal) return;
+  commandPaletteOpenerEl = document.activeElement;
+  setState('paletteOpen', true);
+  modal.style.display = 'flex';
+  modal.setAttribute('aria-hidden', 'false');
+  const input = document.getElementById('command-palette-input');
+  if (input) {
+    input.value = '';
+    input.focus();
+  }
+  renderPaletteResults();
+}
+
+function closeCommandPalette() {
+  const modal = document.getElementById('command-palette');
+  if (!modal) return;
+  setState('paletteOpen', false);
+  const opener = commandPaletteOpenerEl;
+  commandPaletteOpenerEl = null;
+  // Move the focus out before the dialog becomes aria-hidden. A focused element
+  // inside an aria-hidden ancestor is hidden from assistive technology.
+  restoreFocusOutOf(modal, opener);
+  modal.style.display = 'none';
+  modal.setAttribute('aria-hidden', 'true');
+}
+
+function restoreFocusOutOf(modal, opener) {
+  const active = document.activeElement;
+  if (active && modal.contains(active) && typeof active.blur === 'function') {
+    active.blur();
+  }
+  if (opener && opener !== document.body && typeof opener.focus === 'function') {
+    opener.focus();
+  }
+}
+
+function movePaletteSelection(step) {
+  const list = document.getElementById('command-palette-list');
+  if (!list) return;
+  const items = [...list.querySelectorAll('.palette-item')];
+  if (!items.length) return;
+  const currentIndex = items.findIndex(item => item.classList.contains('is-active'));
+  const nextIndex = (currentIndex + step + items.length) % items.length;
+  items.forEach(item => item.classList.remove('is-active'));
+  items[nextIndex].classList.add('is-active');
+  items[nextIndex].scrollIntoView({ block: 'nearest' });
+}
+
+function runActivePaletteCommand() {
+  const active = document.querySelector('#command-palette-list .palette-item.is-active');
+  if (active) runPaletteCommand(active.dataset.commandId);
+}
+
+function openShortcutsDialog() {
+  const modal = document.getElementById('shortcuts-modal');
+  if (!modal) return;
+  shortcutsOpenerEl = document.activeElement;
+  modal.style.display = 'flex';
+  modal.setAttribute('aria-hidden', 'false');
+  document.getElementById('shortcuts-modal-close-btn')?.focus();
+}
+
+function closeShortcutsDialog() {
+  const modal = document.getElementById('shortcuts-modal');
+  if (!modal) return;
+  const opener = shortcutsOpenerEl;
+  shortcutsOpenerEl = null;
+  restoreFocusOutOf(modal, opener);
+  modal.style.display = 'none';
+  modal.setAttribute('aria-hidden', 'true');
+}
diff --git a/src/main/resources/web/js/details.js b/src/main/resources/web/js/details.js
index f77367e..c1d95f0 100644
--- a/src/main/resources/web/js/details.js
+++ b/src/main/resources/web/js/details.js
@@ -1,6 +1,11 @@
 async function loadSessionDetails(sessionId) {
   const payloadsEl = document.getElementById('payloads');
-  if (payloadsEl) payloadsEl.classList.add('loading-overlay');
+  if (payloadsEl) {
+    if (!payloadsEl.children.length) {
+      payloadsEl.replaceChildren(buildSkeleton('payload', 2));
+    }
+    payloadsEl.classList.add('loading-overlay');
+  }
   const data = await fetchJson('/api/sessions/' + sessionId);
   setState('lastLoadedSession', data);
   if (getState('activeSession') === sessionId) {
diff --git a/src/main/resources/web/js/overview.js b/src/main/resources/web/js/overview.js
new file mode 100644
index 0000000..799b597
--- /dev/null
+++ b/src/main/resources/web/js/overview.js
@@ -0,0 +1,358 @@
+const OVERVIEW_WINDOW_STORAGE_KEY = 'tcpmon-overview-window';
+
+const OVERVIEW_WINDOWS = [
+  [15, 'Last 15 minutes'],
+  [60, 'Last hour'],
+  [1440, 'Last 24 hours']
+];
+
+const OVERVIEW_DEGRADED_STATUSES = new Set(['degraded', 'failing']);
+
+function initializeOverviewWindow() {
+  let stored = null;
+  try {
+    stored = localStorage.getItem(OVERVIEW_WINDOW_STORAGE_KEY);
+  } catch (_) {
+    stored = null;
+  }
+  const parsed = Number(stored);
+  const allowed = OVERVIEW_WINDOWS.some(option => option[0] === parsed);
+  setState('overviewWindowMinutes', allowed ? parsed : 60);
+}
+
+function setOverviewWindow(windowMinutes) {
+  const parsed = Number(windowMinutes);
+  if (!OVERVIEW_WINDOWS.some(option => option[0] === parsed)) return;
+  setState('overviewWindowMinutes', parsed);
+  try {
+    localStorage.setItem(OVERVIEW_WINDOW_STORAGE_KEY, String(parsed));
+  } catch (_) {
+    // A browser that blocks storage still shows the chosen window for this page load.
+  }
+  setState('overviewData', null);
+  return loadOverview();
+}
+
+async function loadOverview() {
+  if (getState('overviewRefreshInFlight')) return;
+  const container = document.getElementById('overview');
+  if (container && !container.children.length) {
+    container.replaceChildren(buildSkeleton('table', 5));
+  }
+  setState('overviewRefreshInFlight', true);
+  try {
+    const payload = await fetchJson('/api/overview?windowMinutes=' + getState('overviewWindowMinutes'));
+    setState('overviewData', payload);
+    renderOverview();
+  } catch (error) {
+    if (container) {
+      container.replaceChildren(buildErrorState('Could not load this data.', 'Retry', () => loadOverview()));
+    }
+    throw error;
+  } finally {
+    setState('overviewRefreshInFlight', false);
+  }
+}
+
+function buildOverviewViewModel(payload) {
+  const totalsSource = payload?.totals || {};
+  const routesSource = Array.isArray(payload?.routes) ? payload.routes : [];
+  const pathsSource = Array.isArray(payload?.slowestPaths) ? payload.slowestPaths : [];
+  const totalRequests = Number(totalsSource.requests || 0);
+
+  const routes = routesSource.map(route => {
+    const requests = Number(route.requests || 0);
+    const errors = Number(route.errors || 0);
+    const status = String(route.status || 'idle');
+    return {
+      routeId: route.routeId,
+      listener: route.listener || null,
+      target: route.target || null,
+      status,
+      degraded: OVERVIEW_DEGRADED_STATUSES.has(status),
+      requests,
+      errors,
+      clientErrors: Number(route.clientErrors || 0),
+      errorRate: requests > 0 ? errors / requests : 0,
+      p50Ms: route.p50Ms ?? null,
+      p95Ms: route.p95Ms ?? null,
+      sparkline: Array.isArray(route.sparkline) ? route.sparkline.map(Number) : []
+    };
+  });
+
+  return {
+    empty: totalRequests === 0,
+    windowMinutes: Number(payload?.windowMinutes || 60),
+    generatedAt: payload?.generatedAt || null,
+    totals: {
+      requests: totalRequests,
+      errors: Number(totalsSource.errors || 0),
+      clientErrors: Number(totalsSource.clientErrors || 0),
+      errorRate: totalRequests > 0 ? Number(totalsSource.errors || 0) / totalRequests : 0,
+      p50Ms: totalsSource.p50Ms ?? null,
+      p95Ms: totalsSource.p95Ms ?? null
+    },
+    routes,
+    slowestPaths: pathsSource.map(path => ({
+      method: path.method,
+      path: path.path,
+      routeId: path.routeId,
+      p95Ms: path.p95Ms ?? null,
+      count: Number(path.count || 0)
+    }))
+  };
+}
+
+function buildSparkline(points, options = {}) {
+  const values = Array.isArray(points) ? points.map(Number) : [];
+  const width = Number(options.width || 96);
+  const height = Number(options.height || 22);
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('class', 'sparkline');
+  svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+  svg.setAttribute('width', String(width));
+  svg.setAttribute('height', String(height));
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('focusable', 'false');
+  if (!values.length) return svg;
+
+  const peak = Math.max(1, ...values);
+  const slot = width / values.length;
+  const barWidth = Math.max(1, slot - 1);
+  values.forEach((value, index) => {
+    const barHeight = Math.max(1, Math.round((value / peak) * height));
+    const bar = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    bar.setAttribute('class', value > 0 ? 'sparkline-bar' : 'sparkline-bar sparkline-bar-empty');
+    bar.setAttribute('x', String(Math.round(index * slot)));
+    bar.setAttribute('y', String(height - barHeight));
+    bar.setAttribute('width', String(Math.round(barWidth)));
+    bar.setAttribute('height', String(barHeight));
+    svg.appendChild(bar);
+  });
+  return svg;
+}
+
+function formatOverviewRate(rate) {
+  const value = Number(rate || 0) * 100;
+  if (value === 0) return '0%';
+  return (value < 10 ? value.toFixed(1) : value.toFixed(0)) + '%';
+}
+
+function buildMetricCard(label, value, tone = '') {
+  const card = document.createElement('div');
+  card.className = 'metric-card' + (tone ? ' metric-card-' + tone : '');
+  const valueEl = document.createElement('strong');
+  valueEl.className = 'metric-value';
+  valueEl.textContent = value;
+  const labelEl = document.createElement('span');
+  labelEl.className = 'metric-label';
+  labelEl.textContent = label;
+  card.append(valueEl, labelEl);
+  return card;
+}
+
+function buildOverviewToolbar(viewModel) {
+  const toolbar = document.createElement('header');
+  toolbar.className = 'overview-toolbar';
+
+  const heading = document.createElement('h2');
+  heading.textContent = 'Overview';
+  toolbar.appendChild(heading);
+
+  const controls = document.createElement('div');
+  controls.className = 'overview-controls';
+
+  const label = document.createElement('label');
+  label.className = 'sr-only';
+  label.setAttribute('for', 'overview-window');
+  label.textContent = 'Time window';
+
+  const select = document.createElement('select');
+  select.id = 'overview-window';
+  select.className = 'theme-select';
+  select.setAttribute('aria-label', 'Time window');
+  for (const [value, text] of OVERVIEW_WINDOWS) {
+    const option = document.createElement('option');
+    option.value = String(value);
+    option.textContent = text;
+    select.appendChild(option);
+  }
+  select.value = String(viewModel.windowMinutes);
+
+  const refresh = document.createElement('button');
+  refresh.className = 'utility';
+  refresh.dataset.action = 'refresh-overview';
+  setButtonContent(refresh, 'Refresh', 'refresh');
+
+  controls.append(label, select, refresh);
+  toolbar.appendChild(controls);
+  return toolbar;
+}
+
+function buildRouteHealthTable(viewModel) {
+  const card = document.createElement('section');
+  card.className = 'table-card';
+
+  const title = document.createElement('h3');
+  title.textContent = 'Route health';
+  card.appendChild(title);
+
+  const table = document.createElement('table');
+  table.className = 'overview-table';
+  const head = document.createElement('thead');
+  const headRow = document.createElement('tr');
+  for (const column of ['Route', 'Status', 'Requests', 'Error rate', 'p50 latency', 'p95 latency', 'Traffic']) {
+    const cell = document.createElement('th');
+    cell.textContent = column;
+    headRow.appendChild(cell);
+  }
+  head.appendChild(headRow);
+  table.appendChild(head);
+
+  const body = document.createElement('tbody');
+  for (const route of viewModel.routes) {
+    const row = document.createElement('tr');
+    row.className = 'overview-row';
+    row.dataset.action = 'open-route';
+    row.dataset.routeId = route.routeId;
+    row.tabIndex = 0;
+
+    const routeCell = document.createElement('td');
+    const routeName = document.createElement('strong');
+    routeName.textContent = route.routeId;
+    routeCell.appendChild(routeName);
+    if (route.listener && route.target) {
+      const flow = document.createElement('span');
+      flow.className = 'muted overview-flow';
+      flow.textContent = route.listener + ' → ' + route.target;
+      routeCell.appendChild(flow);
+    }
+    row.appendChild(routeCell);
+
+    const statusCell = document.createElement('td');
+    const badge = document.createElement('span');
+    badge.className = 'pill overview-status overview-status-' + route.status;
+    badge.textContent = route.status;
+    statusCell.appendChild(badge);
+    row.appendChild(statusCell);
+
+    const requestsCell = document.createElement('td');
+    requestsCell.textContent = String(route.requests);
+    row.appendChild(requestsCell);
+
+    const errorCell = document.createElement('td');
+    errorCell.className = route.degraded ? 'overview-error-rate is-degraded' : 'overview-error-rate';
+    errorCell.textContent = formatOverviewRate(route.errorRate);
+    row.appendChild(errorCell);
+
+    const p50Cell = document.createElement('td');
+    p50Cell.innerHTML = formatDuration(route.p50Ms);
+    row.appendChild(p50Cell);
+
+    const p95Cell = document.createElement('td');
+    p95Cell.innerHTML = formatDuration(route.p95Ms);
+    row.appendChild(p95Cell);
+
+    const sparkCell = document.createElement('td');
+    sparkCell.appendChild(buildSparkline(route.sparkline));
+    row.appendChild(sparkCell);
+
+    body.appendChild(row);
+  }
+  table.appendChild(body);
+  card.appendChild(table);
+  return card;
+}
+
+function buildSlowestPathsTable(viewModel) {
+  const card = document.createElement('section');
+  card.className = 'table-card';
+
+  const title = document.createElement('h3');
+  title.textContent = 'Slowest paths';
+  card.appendChild(title);
+
+  if (!viewModel.slowestPaths.length) {
+    card.appendChild(buildEmptyState('No timed requests in this window', 'A request needs a completed response before it can be ranked.'));
+    return card;
+  }
+
+  const table = document.createElement('table');
+  table.className = 'overview-table';
+  const head = document.createElement('thead');
+  const headRow = document.createElement('tr');
+  for (const column of ['Method', 'Path', 'Route', 'p95 latency', 'Requests']) {
+    const cell = document.createElement('th');
+    cell.textContent = column;
+    headRow.appendChild(cell);
+  }
+  head.appendChild(headRow);
+  table.appendChild(head);
+
+  const body = document.createElement('tbody');
+  for (const path of viewModel.slowestPaths) {
+    const row = document.createElement('tr');
+
+    const methodCell = document.createElement('td');
+    const methodBadge = document.createElement('span');
+    methodBadge.className = 'method-badge';
+    methodBadge.textContent = path.method;
+    methodCell.appendChild(methodBadge);
+    row.appendChild(methodCell);
+
+    const pathCell = document.createElement('td');
+    pathCell.className = 'mono';
+    pathCell.textContent = path.path;
+    row.appendChild(pathCell);
+
+    const routeCell = document.createElement('td');
+    routeCell.textContent = path.routeId;
+    row.appendChild(routeCell);
+
+    const p95Cell = document.createElement('td');
+    p95Cell.innerHTML = formatDuration(path.p95Ms);
+    row.appendChild(p95Cell);
+
+    const countCell = document.createElement('td');
+    countCell.textContent = String(path.count);
+    row.appendChild(countCell);
+
+    body.appendChild(row);
+  }
+  table.appendChild(body);
+  card.appendChild(table);
+  return card;
+}
+
+function renderOverview() {
+  const container = document.getElementById('overview');
+  if (!container) return;
+  const payload = getState('overviewData');
+  if (!payload) {
+    container.replaceChildren(buildSkeleton('table', 5));
+    return;
+  }
+  const viewModel = buildOverviewViewModel(payload);
+  const children = [buildOverviewToolbar(viewModel)];
+
+  if (viewModel.empty) {
+    children.push(buildEmptyState(
+      'No traffic in this window',
+      'Widen the time window or send a request through a route.'
+    ));
+    container.replaceChildren(...children);
+    return;
+  }
+
+  const metrics = document.createElement('div');
+  metrics.className = 'metric-row';
+  metrics.append(
+    buildMetricCard('Requests', String(viewModel.totals.requests)),
+    buildMetricCard('Error rate', formatOverviewRate(viewModel.totals.errorRate),
+      viewModel.totals.errorRate > 0 ? 'danger' : ''),
+    buildMetricCard('p50 latency', viewModel.totals.p50Ms === null ? '—' : viewModel.totals.p50Ms + ' ms'),
+    buildMetricCard('p95 latency', viewModel.totals.p95Ms === null ? '—' : viewModel.totals.p95Ms + ' ms')
+  );
+  children.push(metrics, buildRouteHealthTable(viewModel), buildSlowestPathsTable(viewModel));
+  container.replaceChildren(...children);
+}
diff --git a/src/main/resources/web/js/routes.js b/src/main/resources/web/js/routes.js
index a8d475e..2d329de 100644
--- a/src/main/resources/web/js/routes.js
+++ b/src/main/resources/web/js/routes.js
@@ -196,15 +196,19 @@ function renderRouteList() {
   container.setAttribute('role', 'list');
   container.setAttribute('aria-label', 'Routes');
   if (!routes.length) {
+    if (getState('proxyConfig') === null) {
+      container.replaceChildren(buildSkeleton('route-list', 4));
+      return;
+    }
     const query = document.getElementById('route-search').value.trim();
     if (query) {
       container.replaceChildren(buildEmptyState(`No route matches "${query}".`, 'Search checks route ID, target address, and client address.'));
     } else {
       const addBtn = document.createElement('button');
       addBtn.className = 'primary';
-      addBtn.textContent = '+ Add route';
+      setButtonContent(addBtn, 'Add route', 'plus');
       addBtn.addEventListener('click', () => openAddRouteModal());
-      container.replaceChildren(buildEmptyState('No listeners configured.', 'Add a route to bind a local listener and forward traffic to a target.', addBtn));
+      container.replaceChildren(buildEmptyState('No routes yet', 'Create your first route to start capturing traffic.', addBtn));
     }
     return;
   }
@@ -411,6 +415,24 @@ function renderConfigButton() {
   const wrap = document.createElement('div');
   wrap.className = 'topbar-tools';
 
+  const activeView = getState('activeView');
+  const viewSwitch = document.createElement('div');
+  viewSwitch.className = 'view-switch';
+  viewSwitch.setAttribute('role', 'group');
+  viewSwitch.setAttribute('aria-label', 'View');
+  for (const [view, label, iconName] of [
+    ['overview', 'Overview', 'activity'],
+    ['routes', 'Routes', 'grip']
+  ]) {
+    const viewButton = document.createElement('button');
+    viewButton.className = 'view-switch-btn' + (activeView === view ? ' is-active' : '');
+    viewButton.dataset.action = 'show-view';
+    viewButton.dataset.view = view;
+    viewButton.setAttribute('aria-pressed', activeView === view ? 'true' : 'false');
+    setButtonContent(viewButton, label, iconName);
+    viewSwitch.appendChild(viewButton);
+  }
+
   const themeCluster = document.createElement('div');
   themeCluster.className = 'theme-cluster';
 
@@ -442,7 +464,7 @@ function renderConfigButton() {
   button.className = 'utility';
   button.dataset.action = 'toggle-config-panel';
   setButtonContent(button, 'Config', 'settings');
-  wrap.append(themeCluster, button);
+  wrap.append(viewSwitch, themeCluster, button);
   el.replaceChildren(wrap);
 }
 
diff --git a/src/main/resources/web/js/sessions.js b/src/main/resources/web/js/sessions.js
index ab4c7ee..1ed754a 100644
--- a/src/main/resources/web/js/sessions.js
+++ b/src/main/resources/web/js/sessions.js
@@ -90,7 +90,14 @@ async function loadRequestsForRoute(routeId) {
   });
 }
 
+function showRequestTableSkeleton() {
+  const container = document.getElementById('request-table');
+  if (!container) return;
+  container.replaceChildren(buildSkeleton('table', Number(getState('requestPageSize')) > 10 ? 6 : 4));
+}
+
 async function loadRequestsPage(routeId, cursor, resetStack) {
+  showRequestTableSkeleton();
   const method = getState('requestMethodFilterValue');
   const statusCode = getState('requestStatusCodeFilterValue');
   const q = getState('requestSearchValue').trim();
@@ -102,7 +109,20 @@ async function loadRequestsPage(routeId, cursor, resetStack) {
   if (statusCode) params.set('statusCode', statusCode);
   if (q) params.set('q', q);
 
-  const requestsData = await fetchJson('/api/requests?' + params);
+  let requestsData;
+  try {
+    requestsData = await fetchJson('/api/requests?' + params);
+  } catch (error) {
+    const container = document.getElementById('request-table');
+    if (container) {
+      container.replaceChildren(buildErrorState(
+        'Could not load this data.',
+        'Retry',
+        () => loadRequestsPage(routeId, cursor, resetStack)
+      ));
+    }
+    throw error;
+  }
 
   if (resetStack) {
     patchState({ requestCursorStack: [] });
@@ -200,7 +220,9 @@ function renderRequestTable() {
   const methodFilter = buildSelectElement('request-method-filter', renderMethodOptions());
   const statusCodeFilter = buildSelectElement('request-status-code-filter', renderStatusCodeOptions());
   const pageSizeFilter = buildSelectElement('request-page-size', renderPageSizeOptions());
-  toolbar.append(methodFilter, statusCodeFilter, pageSizeFilter);
+  const densityFilter = buildSelectElement('request-density', renderDensityOptions());
+  densityFilter.setAttribute('aria-label', 'Row density');
+  toolbar.append(methodFilter, statusCodeFilter, pageSizeFilter, densityFilter);
 
   if (hasActiveFilters) {
     const clearBtn = document.createElement('button');
@@ -242,7 +264,11 @@ function renderRequestTableContent(requestRows, showRoute = false) {
   const fragment = document.createDocumentFragment();
   const scroller = document.createElement('div');
   scroller.className = 'request-table-scroll';
-  scroller.appendChild(buildRequestTableElement(requestRows, activeSession, activeExchangeIndex, showRoute));
+  scroller.appendChild(buildRequestTableElement(requestRows, activeSession, activeExchangeIndex, showRoute, {
+    sortKey: getState('requestSortKey'),
+    sortDirection: getState('requestSortDirection'),
+    density: getState('tableDensity')
+  }));
   fragment.appendChild(scroller);
   fragment.appendChild(buildRequestTableFooter(rangeStart, rangeEnd, totalRequests, hasPrev, hasMore));
   return fragment;
@@ -260,6 +286,51 @@ function renderMethodOptions() {
     })));
 }
 
+function renderDensityOptions() {
+  const current = getState('tableDensity') === 'compact' ? 'compact' : 'comfortable';
+  return [
+    { value: 'comfortable', label: 'Comfortable', selected: current === 'comfortable' },
+    { value: 'compact', label: 'Compact', selected: current === 'compact' }
+  ];
+}
+
+function toggleRequestSort(sortKey) {
+  if (!REQUEST_SORT_ACCESSORS[sortKey]) return;
+  const currentKey = getState('requestSortKey');
+  const currentDirection = getState('requestSortDirection');
+  if (currentKey === sortKey && currentDirection === 'desc') {
+    patchState({ requestSortDirection: 'asc' });
+  } else if (currentKey === sortKey && currentDirection === 'asc') {
+    patchState({ requestSortKey: null, requestSortDirection: 'desc' });
+  } else {
+    patchState({ requestSortKey: sortKey, requestSortDirection: 'desc' });
+  }
+  renderRequestTable();
+}
+
+const TABLE_DENSITY_STORAGE_KEY = 'tcpmon-table-density';
+
+function initializeTableDensity() {
+  let stored = null;
+  try {
+    stored = localStorage.getItem(TABLE_DENSITY_STORAGE_KEY);
+  } catch (_) {
+    stored = null;
+  }
+  setState('tableDensity', stored === 'compact' ? 'compact' : 'comfortable');
+}
+
+function setTableDensity(density) {
+  const next = density === 'compact' ? 'compact' : 'comfortable';
+  setState('tableDensity', next);
+  try {
+    localStorage.setItem(TABLE_DENSITY_STORAGE_KEY, next);
+  } catch (_) {
+    // A browser that blocks storage still applies the density for this page load.
+  }
+  renderRequestTable();
+}
+
 function renderPageSizeOptions() {
   const current = getState('requestPageSize') || 10;
   return [10, 25, 50, 100].map(n => ({ value: String(n), label: `${n} / page`, selected: n === current }));
@@ -329,23 +400,90 @@ async function changeRequestPage(delta) {
   renderRequestTable();
 }
 
-function buildRequestTableElement(pageItems, activeSession, activeExchangeIndex, showRoute = false) {
+const REQUEST_SORT_ACCESSORS = {
+  route: row => String(row.routeId || ''),
+  method: row => String(row.requestMethod || ''),
+  path: row => String(row.requestPath || ''),
+  response: row => Number(row.responseStatusCode) || 0,
+  duration: row => (row.durationMs == null ? -1 : Number(row.durationMs)),
+  size: row => Number(row.responseSizeBytes || 0),
+  client: row => String(row.clientAddress || ''),
+  started: row => String(row.startedAt || '')
+};
+
+const REQUEST_TABLE_COLUMNS = [
+  ['route', 'Route'],
+  ['method', 'Method'],
+  ['path', 'Path'],
+  ['response', 'Response'],
+  ['duration', 'Duration'],
+  ['size', 'Size'],
+  ['client', 'Client'],
+  ['started', 'Started']
+];
+
+/**
+ * Sorts the rows of the current page. The sort is stable: rows that compare
+ * equal keep the order the server sent.
+ */
+function sortRequestRows(rows, sortKey, sortDirection) {
+  const list = Array.isArray(rows) ? rows.slice() : [];
+  const accessor = REQUEST_SORT_ACCESSORS[sortKey];
+  if (!accessor) return list;
+  const factor = sortDirection === 'asc' ? 1 : -1;
+  return list
+    .map((row, index) => ({ row, index }))
+    .sort((left, right) => {
+      const a = accessor(left.row);
+      const b = accessor(right.row);
+      if (a < b) return -factor;
+      if (a > b) return factor;
+      return left.index - right.index;
+    })
+    .map(entry => entry.row);
+}
+
+function buildRequestSortHeader(key, label, sortKey, sortDirection) {
+  const th = document.createElement('th');
+  th.dataset.action = 'sort-requests';
+  th.dataset.sortKey = key;
+  th.tabIndex = 0;
+  th.className = 'sortable-header';
+  th.title = 'Sort the requests on this page';
+  const isActive = key === sortKey;
+  th.setAttribute('aria-sort', isActive ? (sortDirection === 'asc' ? 'ascending' : 'descending') : 'none');
+  if (isActive) th.classList.add('is-sorted');
+
+  const text = document.createElement('span');
+  text.textContent = label;
+  th.appendChild(text);
+  if (isActive) {
+    th.appendChild(buildIcon(sortDirection === 'asc' ? 'chevron-up' : 'chevron-down'));
+  }
+  return th;
+}
+
+function buildRequestTableElement(pageItems, activeSession, activeExchangeIndex, showRoute = false, viewOptions = {}) {
+  const sortKey = viewOptions.sortKey || null;
+  const sortDirection = viewOptions.sortDirection === 'asc' ? 'asc' : 'desc';
+  const density = viewOptions.density === 'compact' ? 'compact' : 'comfortable';
+
   const table = document.createElement('table');
-  table.className = 'request-table';
+  table.className = 'request-table' + (density === 'compact' ? ' request-table-compact' : '');
+  table.dataset.density = density;
+
   const thead = document.createElement('thead');
   const headerRow = document.createElement('tr');
-  const labels = showRoute
-    ? ['Route', 'Method', 'Path', 'Response', 'Duration', 'Size', 'Client', 'Started']
-    : ['Method', 'Path', 'Response', 'Duration', 'Size', 'Client', 'Started'];
-  for (const label of labels) {
-    const th = document.createElement('th');
-    th.textContent = label;
-    headerRow.appendChild(th);
+  const columns = showRoute
+    ? REQUEST_TABLE_COLUMNS
+    : REQUEST_TABLE_COLUMNS.filter(column => column[0] !== 'route');
+  for (const [key, label] of columns) {
+    headerRow.appendChild(buildRequestSortHeader(key, label, sortKey, sortDirection));
   }
   thead.appendChild(headerRow);
 
   const tbody = document.createElement('tbody');
-  for (const request of pageItems) {
+  for (const request of sortRequestRows(pageItems, sortKey, sortDirection)) {
     const row = document.createElement('tr');
     const exchangeIndex = Number(request.exchangeIndex || 0);
     row.className = `session-entry${request.sessionId === activeSession && exchangeIndex === activeExchangeIndex ? ' active' : ''}`;
@@ -488,7 +626,7 @@ function buildDurationCell(ms) {
     span.className = 'muted';
     span.textContent = '—';
   } else {
-    span.className = value < 200 ? 'timing-fast' : value < 1000 ? 'timing-medium' : 'timing-slow';
+    span.className = latencyClass(value);
     span.textContent = value < 1000 ? `${value} ms` : `${(value / 1000).toFixed(1)} s`;
   }
   cell.appendChild(span);
diff --git a/src/main/resources/web/js/state.js b/src/main/resources/web/js/state.js
index 88a890c..74b464b 100644
--- a/src/main/resources/web/js/state.js
+++ b/src/main/resources/web/js/state.js
@@ -37,6 +37,15 @@ window.uiState = {
   requestTableRefreshInFlight: false,
   authPromptInFlight: null,
   configPanelOpen: false,
+  activeView: 'routes',
+  overviewData: null,
+  overviewWindowMinutes: 60,
+  overviewRefreshInFlight: false,
+  scheduledOverviewRefreshTimer: null,
+  requestSortKey: null,
+  requestSortDirection: 'desc',
+  tableDensity: 'comfortable',
+  paletteOpen: false,
   payloadHeadersExpanded: {
     Request: true,
     Response: true
diff --git a/src/main/resources/web/js/utils.js b/src/main/resources/web/js/utils.js
index b5e609f..52c48b9 100644
--- a/src/main/resources/web/js/utils.js
+++ b/src/main/resources/web/js/utils.js
@@ -207,13 +207,33 @@ function formatTime(value) {
   return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
 }
 
+const LATENCY_MODERATE_MS = 300;
+const LATENCY_SLOW_MS = 1000;
+const LATENCY_LEVEL_CLASS = {
+  fast: 'timing-fast',
+  moderate: 'timing-medium',
+  slow: 'timing-slow'
+};
+
+function latencyLevel(durationMs) {
+  if (durationMs == null) return null;
+  const value = Number(durationMs);
+  if (Number.isNaN(value)) return null;
+  if (value >= LATENCY_SLOW_MS) return 'slow';
+  if (value >= LATENCY_MODERATE_MS) return 'moderate';
+  return 'fast';
+}
+
+function latencyClass(durationMs) {
+  return LATENCY_LEVEL_CLASS[latencyLevel(durationMs)] || 'muted';
+}
+
 function formatDuration(ms) {
   if (ms == null) return '<span class="muted">—</span>';
   const n = Number(ms);
   if (isNaN(n)) return '<span class="muted">—</span>';
-  const cls = n < 200 ? 'timing-fast' : n < 1000 ? 'timing-medium' : 'timing-slow';
   const label = n < 1000 ? n + ' ms' : (n / 1000).toFixed(1) + ' s';
-  return `<span class="${cls}">${escapeHtml(label)}</span>`;
+  return `<span class="${latencyClass(n)}">${escapeHtml(label)}</span>`;
 }
 
 function formatBytes(bytes) {
@@ -290,7 +310,14 @@ const ICON_PATHS = {
   grip: '<circle cx="9" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/><circle cx="15" cy="6" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="15" cy="18" r="1.2"/>',
   expand: '<path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/>',
   upload: '<path d="M12 21V9"/><path d="m7 14 5-5 5 5"/><path d="M5 3h14"/>',
-  lock: '<rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>'
+  lock: '<rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
+  search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>',
+  warning: '<path d="M10.3 3.6 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+  check: '<path d="m20 6-11 11-5-5"/>',
+  'chevron-down': '<path d="m6 9 6 6 6-6"/>',
+  'chevron-up': '<path d="m18 15-6-6-6 6"/>',
+  command: '<path d="M15 6a3 3 0 1 1 3 3h-3Zm0 0v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12"/>',
+  activity: '<path d="M3 12h4l3 8 4-16 3 8h4"/>'
 };
 
 function buildIcon(name) {
@@ -326,6 +353,72 @@ function setButtonContent(button, label, iconName = '', options = {}) {
   return button;
 }
 
+const SKELETON_VARIANTS = {
+  'route-list': ['skeleton-line-md', 'skeleton-line-lg', 'skeleton-line-sm'],
+  table: ['skeleton-line-sm', 'skeleton-line-lg', 'skeleton-line-md'],
+  payload: ['skeleton-line-lg', 'skeleton-line-lg', 'skeleton-line-md']
+};
+
+function buildSkeleton(variant, rowCount = 3) {
+  const widths = SKELETON_VARIANTS[variant] || SKELETON_VARIANTS.table;
+  const rows = Math.max(1, Number(rowCount) || 1);
+  const wrapper = document.createElement('div');
+  wrapper.className = 'skeleton skeleton-' + (SKELETON_VARIANTS[variant] ? variant : 'table');
+  wrapper.setAttribute('aria-hidden', 'true');
+  wrapper.dataset.skeletonRows = String(rows);
+  for (let index = 0; index < rows; index += 1) {
+    const row = document.createElement('div');
+    row.className = 'skeleton-row';
+    widths.forEach(width => {
+      const line = document.createElement('div');
+      line.className = 'skeleton-line ' + width;
+      row.appendChild(line);
+    });
+    wrapper.appendChild(row);
+  }
+  return wrapper;
+}
+
+function buildErrorState(message, retryLabel = 'Retry', onRetry = null) {
+  const wrapper = document.createElement('div');
+  wrapper.className = 'error-state';
+  wrapper.setAttribute('role', 'alert');
+
+  const iconWrap = document.createElement('div');
+  iconWrap.className = 'error-state-icon';
+  iconWrap.appendChild(buildIcon('warning'));
+  wrapper.appendChild(iconWrap);
+
+  const text = document.createElement('strong');
+  text.className = 'error-state-message';
+  text.textContent = message;
+  wrapper.appendChild(text);
+
+  if (onRetry) {
+    const retry = document.createElement('button');
+    retry.className = 'utility';
+    retry.dataset.action = 'retry';
+    setButtonContent(retry, retryLabel, 'refresh');
+    retry.addEventListener('click', onRetry);
+    wrapper.appendChild(retry);
+  }
+  return wrapper;
+}
+
+function hydrateStaticIcons(root = document) {
+  const targets = root.querySelectorAll('[data-icon]');
+  targets.forEach(target => {
+    const iconName = target.dataset.icon;
+    if (!iconName) return;
+    const label = target.dataset.iconLabel || '';
+    setButtonContent(target, label, iconName, {
+      ariaLabel: target.getAttribute('aria-label') || '',
+      title: target.title || ''
+    });
+  });
+  return targets.length;
+}
+
 function markStoredSecret(hintId, configured) {
   const hint = document.getElementById(hintId);
   if (!hint) return;
diff --git a/src/main/resources/web/styles/app.css b/src/main/resources/web/styles/app.css
index 54b1fa4..bb1ff6b 100644
--- a/src/main/resources/web/styles/app.css
+++ b/src/main/resources/web/styles/app.css
@@ -69,6 +69,44 @@
   --sans: var(--font-ui);
   --shadow: 0 1px 2px rgba(24, 33, 47, 0.04);
   --theme-transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
+
+  /* Spacing scale */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 32px;
+  --space-8: 40px;
+
+  /* Typography scale */
+  --text-2xs: 10px;
+  --text-xs: 11px;
+  --text-sm: 12px;
+  --text-md: 13px;
+  --text-base: 14px;
+  --text-lg: 15px;
+  --text-xl: 16px;
+  --leading-tight: 1.2;
+  --leading-normal: 1.5;
+
+  /* Radius scale */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-pill: 999px;
+
+  /* Elevation scale */
+  --elevation-1: 0 1px 2px rgba(24, 33, 47, 0.04);
+  --elevation-2: 0 1px 2px rgba(24, 33, 47, 0.08), 0 6px 14px rgba(24, 33, 47, 0.04);
+  --elevation-3: 0 12px 32px rgba(24, 33, 47, 0.16);
+
+  /* Focus ring */
+  --focus-ring: rgba(15, 108, 189, 0.45);
+  --focus-ring-soft: rgba(15, 108, 189, 0.18);
+  --danger-ring: rgba(180, 35, 24, 0.35);
 }
 * { box-sizing: border-box; }
 .sr-only {
@@ -102,8 +140,8 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 16px;
-  padding: 12px 16px;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--space-4);
   background: var(--surface);
   border-bottom: 1px solid var(--border);
   transition: var(--theme-transition);
@@ -114,14 +152,14 @@ body {
   gap: 2px;
 }
 .topbar-title strong {
-  font-size: 16px;
+  font-size: var(--text-xl);
   font-weight: 600;
   letter-spacing: -0.02em;
 }
 .topbar-tools {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-2);
 }
 .theme-cluster {
   display: inline-flex;
@@ -137,14 +175,14 @@ body {
 }
 .theme-label {
   color: var(--text-muted);
-  font-size: 11px;
+  font-size: var(--text-xs);
 }
 .theme-select {
   min-height: 30px;
   min-width: 86px;
-  padding: 4px 28px 4px 8px;
+  padding: var(--space-1) 28px var(--space-1) var(--space-2);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   background: var(--surface);
   color: var(--text);
   font: 12px/1.2 var(--sans);
@@ -154,7 +192,7 @@ body {
   border-color: var(--border-strong);
 }
 .theme-select:focus-visible {
-  outline: 2px solid rgba(15, 108, 189, 0.35);
+  outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
 }
 .layout {
@@ -171,25 +209,25 @@ body {
   min-height: 0;
 }
 .sidebar-section {
-  padding: 12px;
+  padding: var(--space-3);
   border-bottom: 1px solid var(--border);
 }
 .sidebar h2,
 .content h2,
 .content h3 {
   margin: 0;
-  font-size: 14px;
+  font-size: var(--text-base);
 }
 .toolbar {
   display: grid;
-  gap: 8px;
+  gap: var(--space-2);
 }
 input,
 select,
 textarea {
   width: 100%;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: var(--surface);
   color: var(--text);
   font: inherit;
@@ -205,8 +243,8 @@ input[type="radio"] {
 input:focus,
 select:focus,
 textarea:focus {
-  outline: 2px solid rgba(15, 108, 189, 0.14);
-  border-color: rgba(15, 108, 189, 0.45);
+  outline: 2px solid var(--focus-ring-soft);
+  border-color: var(--focus-ring);
 }
 button {
   display: inline-flex;
@@ -215,8 +253,8 @@ button {
   gap: 6px;
   min-height: 34px;
   border: 1px solid transparent;
-  border-radius: 10px;
-  padding: 8px 12px;
+  border-radius: var(--radius-md);
+  padding: var(--space-2) var(--space-3);
   font: inherit;
   font-weight: 600;
   line-height: 1.2;
@@ -249,7 +287,7 @@ button:active:not(:disabled) {
   transform: translateY(0);
 }
 button:focus-visible {
-  outline: 2px solid rgba(15, 108, 189, 0.18);
+  outline: 2px solid var(--focus-ring-soft);
   outline-offset: 2px;
 }
 button:disabled {
@@ -290,11 +328,11 @@ button.ghost:hover:not(:disabled) {
 button.utility {
   min-height: 28px;
   padding: 5px 9px;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: transparent;
   border-color: rgba(24, 33, 47, 0.08);
   color: var(--text-muted);
-  font-size: 12px;
+  font-size: var(--text-sm);
   font-weight: 500;
   box-shadow: none;
 }
@@ -316,8 +354,8 @@ button.danger:hover:not(:disabled) {
 button.nav {
   min-height: 30px;
   padding: 6px 10px;
-  border-radius: 8px;
-  font-size: 12px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
   font-weight: 600;
 }
 button.action-main {
@@ -334,13 +372,13 @@ button.action-edit {
 }
 .route-list {
   overflow: auto;
-  padding: 8px;
+  padding: var(--space-2);
 }
 .route-row {
   border: 1px solid var(--border);
   border-left: 3px solid var(--border);
-  border-radius: 10px;
-  padding: 10px 10px 10px 12px;
+  border-radius: var(--radius-md);
+  padding: 10px 10px 10px var(--space-3);
   margin-bottom: 8px;
   background: var(--surface);
   cursor: pointer;
@@ -367,7 +405,7 @@ button.action-edit {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-2);
   min-width: 0;
 }
 .row-top {
@@ -378,7 +416,7 @@ button.action-edit {
   padding-top: 6px;
   border-top: 1px solid var(--border);
   font-family: var(--mono);
-  font-size: 11px;
+  font-size: var(--text-xs);
   color: var(--text-muted);
   white-space: nowrap;
   overflow: hidden;
@@ -397,10 +435,10 @@ button.action-edit {
 .pill {
   display: inline-flex;
   align-items: center;
-  border-radius: 999px;
-  padding: 3px 8px;
+  border-radius: var(--radius-pill);
+  padding: 3px var(--space-2);
   font-family: var(--sans);
-  font-size: 11px;
+  font-size: var(--text-xs);
   font-weight: 600;
   line-height: 1;
   border: 1px solid transparent;
@@ -461,10 +499,10 @@ button.action-edit {
 .status-badge {
   display: inline-flex;
   align-items: center;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: 2px 6px;
   font-family: var(--mono);
-  font-size: 11px;
+  font-size: var(--text-xs);
   font-weight: 600;
   font-variant-ligatures: none;
   line-height: 1;
@@ -484,10 +522,10 @@ button.action-edit {
 .method-badge {
   display: inline-flex;
   align-items: center;
-  border-radius: 4px;
+  border-radius: var(--radius-xs);
   padding: 2px 6px;
   font-family: var(--mono);
-  font-size: 10px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   font-variant-ligatures: none;
   line-height: 1;
@@ -511,11 +549,11 @@ button.action-edit {
   padding-top: 10px;
   border-top: 1px solid var(--border);
 }
-.tls-col { font-size: 12px; }
+.tls-col { font-size: var(--text-sm); }
 .tls-col .label { margin-bottom: 6px; }
 .tls-row {
   display: flex;
-  gap: 8px;
+  gap: var(--space-2);
   margin-bottom: 4px;
 }
 .tls-row .tls-key {
@@ -530,14 +568,14 @@ button.action-edit {
 .config-panel {
   background: var(--surface-2);
   border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 10px 12px;
+  border-radius: var(--radius-md);
+  padding: 10px var(--space-3);
   margin-top: 8px;
-  font-size: 12px;
+  font-size: var(--text-sm);
 }
 .config-row {
   display: flex;
-  gap: 8px;
+  gap: var(--space-2);
   margin-bottom: 4px;
 }
 .config-row .config-key {
@@ -552,19 +590,19 @@ button.action-edit {
   display: flex;
   flex-direction: column;
   gap: 5px;
-  padding: 4px 0;
+  padding: var(--space-1) 0;
 }
 .wf-row {
   display: grid;
   grid-template-columns: 110px 1fr 64px;
   align-items: center;
   gap: 10px;
-  font-size: 12px;
+  font-size: var(--text-sm);
 }
 .wf-label {
   color: var(--text-muted);
   text-align: right;
-  font-size: 11px;
+  font-size: var(--text-xs);
   text-transform: uppercase;
   letter-spacing: .04em;
   white-space: nowrap;
@@ -573,7 +611,7 @@ button.action-edit {
   position: relative;
   height: 14px;
   background: var(--surface-3);
-  border-radius: 4px;
+  border-radius: var(--radius-xs);
   overflow: hidden;
 }
 .wf-bar {
@@ -591,22 +629,22 @@ button.action-edit {
 .wf-bar-total   { background: var(--border-strong); }
 .wf-dur {
   font-family: var(--mono);
-  font-size: 11px;
+  font-size: var(--text-xs);
   font-variant-ligatures: none;
   color: var(--text-muted);
   text-align: right;
   white-space: nowrap;
 }
 .wf-sep { height: 1px; background: var(--border); margin: 3px 0; }
-.wf-row-total .wf-label { color: var(--text); font-weight: 600; font-size: 12px; text-transform: none; letter-spacing: 0; }
+.wf-row-total .wf-label { color: var(--text); font-weight: 600; font-size: var(--text-sm); text-transform: none; letter-spacing: 0; }
 .wf-row-total .wf-dur   { color: var(--text); font-weight: 600; }
-.wf-empty { font-size: 12px; color: var(--text-muted); padding: 4px 0; }
+.wf-empty { font-size: var(--text-sm); color: var(--text-muted); padding: var(--space-1) 0; }
 .route-line,
 .mono {
   font-family: var(--mono);
 }
 .route-line {
-  font-size: 11px;
+  font-size: var(--text-xs);
   color: var(--text-muted);
   white-space: nowrap;
   overflow: hidden;
@@ -621,8 +659,8 @@ button.action-edit {
 .content {
   display: grid;
   grid-template-rows: auto auto 1fr auto;
-  gap: 12px;
-  padding: 12px;
+  gap: var(--space-3);
+  padding: var(--space-3);
   min-height: 0;
 }
 #status-banner {
@@ -645,15 +683,15 @@ button.action-edit {
 .banner {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-2);
   width: min(680px, 100%);
   min-height: 42px;
   margin: 0;
-  padding: 10px 12px;
-  border-radius: 8px;
+  padding: 10px var(--space-3);
+  border-radius: var(--radius-md);
   border: 1px solid var(--border-strong);
   background: var(--surface);
-  font-size: 13px;
+  font-size: var(--text-md);
   box-shadow: 0 10px 30px rgba(24, 33, 47, 0.16);
   animation: banner-fade-in 90ms ease-out;
   transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
@@ -678,13 +716,13 @@ button.action-edit {
   float: right;
   min-height: 0;
   padding: 2px 6px;
-  border-radius: 4px;
+  border-radius: var(--radius-xs);
   background: transparent;
   border-color: transparent;
   color: inherit;
   opacity: 0.65;
   margin-left: 8px;
-  font-size: 12px;
+  font-size: var(--text-sm);
   font-weight: 700;
   box-shadow: none;
 }
@@ -705,7 +743,7 @@ button.action-edit {
 }
 .modal-actions {
   display: flex;
-  gap: 8px;
+  gap: var(--space-2);
   justify-content: flex-end;
   margin-top: 20px;
 }
@@ -723,7 +761,7 @@ button.action-edit {
   padding: 2px 0;
 }
 .tls-panel-title {
-  font-size: 13px;
+  font-size: var(--text-md);
 }
 .tls-section-padded {
   padding-bottom: 12px;
@@ -735,30 +773,29 @@ button.action-edit {
 .editor-card {
   background: var(--surface);
   border: 1px solid var(--border);
-  border-radius: 12px;
-  box-shadow: var(--shadow);
+  border-radius: var(--radius-md);
   transition: var(--theme-transition);
 }
 .route-card,
 .table-card,
 .events-card,
 .editor-card {
-  padding: 12px;
+  padding: var(--space-3);
 }
 .route-title {
   display: flex;
   justify-content: space-between;
   align-items: start;
-  gap: 12px;
+  gap: var(--space-3);
 }
 .route-title strong {
   display: block;
-  font-size: 15px;
+  font-size: var(--text-lg);
   font-weight: 600;
   letter-spacing: -0.02em;
 }
 .route-header-card {
-  padding: 0 0 12px;
+  padding: 0 0 var(--space-3);
   background: transparent;
   border: 0;
   border-radius: 0;
@@ -779,11 +816,11 @@ button.action-edit {
 .route-header-title-row {
   display: flex;
   align-items: baseline;
-  gap: 8px;
+  gap: var(--space-2);
 }
 .route-header-name {
   display: block;
-  font-size: 15px;
+  font-size: var(--text-lg);
   font-weight: 600;
   letter-spacing: 0;
   line-height: 1.2;
@@ -791,7 +828,7 @@ button.action-edit {
 .route-header-flow {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-2);
   min-width: 0;
   padding: 0;
   border: 0;
@@ -803,7 +840,7 @@ button.action-edit {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: var(--text-sm);
   color: var(--text);
 }
 .route-flow-arrow {
@@ -817,7 +854,7 @@ button.action-edit {
   align-items: center;
   justify-content: flex-end;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: var(--space-2);
   flex-shrink: 0;
 }
 .route-status-cluster {
@@ -833,17 +870,17 @@ button.action-edit {
   align-items: center;
   justify-content: center;
   min-height: 26px;
-  padding: 3px 8px;
-  border-radius: 6px;
+  padding: 3px var(--space-2);
+  border-radius: var(--radius-sm);
   border: 1px solid var(--border);
   background: transparent;
 }
 .route-pending-label {
-  font-size: 10px;
+  font-size: var(--text-2xs);
   color: var(--text-muted);
 }
 .route-pending-value {
-  font-size: 12px;
+  font-size: var(--text-sm);
   line-height: 1.1;
   font-weight: 600;
   letter-spacing: 0;
@@ -864,10 +901,10 @@ button.action-edit {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: var(--space-3);
   margin-top: 8px;
   color: var(--text-muted);
-  font-size: 12px;
+  font-size: var(--text-sm);
 }
 .route-stats-summary {
   min-width: 0;
@@ -880,21 +917,21 @@ button.action-edit {
   border: 0;
   border-left: 1px solid var(--border);
   border-radius: 0;
-  padding: 0 0 0 12px;
+  padding: 0 0 0 var(--space-3);
   display: inline-flex;
   flex-direction: row;
   align-items: baseline;
   gap: 5px;
 }
 .stat-block .stat-value {
-  font-size: 12px;
+  font-size: var(--text-sm);
   font-weight: 600;
   letter-spacing: 0;
   line-height: 1;
   color: var(--text);
 }
 .stat-block .stat-label {
-  font-size: 11px;
+  font-size: var(--text-xs);
   color: var(--text-muted);
   text-transform: none;
   letter-spacing: 0;
@@ -910,14 +947,14 @@ button.action-edit {
 .route-selection-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 10px 12px;
+  gap: 10px var(--space-3);
 }
 .route-selection-item {
   min-width: 0;
 }
 .route-selection-value {
   display: block;
-  font-size: 12px;
+  font-size: var(--text-sm);
   color: var(--text);
 }
 .route-selection-item .label {
@@ -929,7 +966,7 @@ button.action-edit {
   white-space: nowrap;
 }
 .route-selection-empty {
-  font-size: 12px;
+  font-size: var(--text-sm);
   color: var(--text-muted);
 }
 .session-notes {
@@ -946,38 +983,40 @@ button.action-edit {
   margin-top: 14px;
   padding-top: 12px;
   border-top: 1px solid var(--border);
-  font-size: 12px;
+  font-size: var(--text-sm);
   color: var(--text-muted);
 }
 .label {
   display: block;
   margin-bottom: 4px;
   color: var(--text-muted);
-  font-size: 11px;
+  font-size: var(--text-xs);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
 .request-toolbar {
-  display: grid;
-  grid-template-columns: minmax(360px, 1fr) 112px 128px 104px;
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-2);
   margin-bottom: 10px;
 }
 .request-all-routes-toggle {
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 12px;
+  font-size: var(--text-sm);
   color: var(--text-muted);
   margin-bottom: 8px;
 }
 .request-toolbar input[type="search"] {
+  flex: 1 1 280px;
   min-width: 0;
 }
 .request-toolbar select {
-  min-width: 0;
-  width: 100%;
+  flex: 0 0 auto;
+  width: auto;
+  min-width: 112px;
 }
 .request-toolbar button {
   width: max-content;
@@ -986,12 +1025,12 @@ button.action-edit {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 12px;
+  gap: var(--space-3);
   margin-top: 10px;
 }
 .pager {
   display: flex;
-  gap: 8px;
+  gap: var(--space-2);
   align-items: center;
 }
 .pager button {
@@ -1000,19 +1039,19 @@ button.action-edit {
 table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 12px;
+  font-size: var(--text-sm);
 }
 th,
 td {
   text-align: left;
-  padding: 9px 8px;
+  padding: 9px var(--space-2);
   border-bottom: 1px solid var(--border);
   vertical-align: top;
 }
 th {
   font-family: var(--sans);
   color: var(--text-muted);
-  font-size: 11px;
+  font-size: var(--text-xs);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
@@ -1035,7 +1074,7 @@ tr.session-entry.active > td:first-child {
 .payload-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
+  gap: var(--space-3);
   min-height: 0;
   align-items: stretch;
 }
@@ -1048,11 +1087,11 @@ tr.session-entry.active > td:first-child {
   position: relative;
 }
 .payload-header {
-  padding: 12px 12px 0;
+  padding: var(--space-3) var(--space-3) 0;
   display: flex;
   justify-content: space-between;
   align-items: start;
-  gap: 12px;
+  gap: var(--space-3);
   min-width: 0;
 }
 .payload-header > :first-child {
@@ -1060,7 +1099,7 @@ tr.session-entry.active > td:first-child {
 }
 .payload-header-metric {
   display: block;
-  font-size: 11px;
+  font-size: var(--text-xs);
 }
 .payload-header-right {
   display: flex;
@@ -1073,21 +1112,21 @@ tr.session-entry.active > td:first-child {
   visibility: hidden;
 }
 .payload-section {
-  padding: 0 12px 12px;
+  padding: 0 var(--space-3) var(--space-3);
   min-width: 0;
 }
 .payload-details {
-  margin: 0 12px 12px;
+  margin: 0 var(--space-3) var(--space-3);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: var(--surface-2);
 }
 .payload-details summary {
   list-style: none;
   cursor: pointer;
-  padding: 10px 12px;
+  padding: 10px var(--space-3);
   color: var(--text-muted);
-  font-size: 12px;
+  font-size: var(--text-sm);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   user-select: none;
@@ -1106,7 +1145,7 @@ tr.session-entry.active > td:first-child {
   content: '-';
 }
 .payload-details-body {
-  padding: 0 12px 12px;
+  padding: 0 var(--space-3) var(--space-3);
   max-height: 220px;
   overflow-y: auto;
 }
@@ -1115,9 +1154,9 @@ tr.session-entry.active > td:first-child {
   table-layout: fixed;
 }
 .headers-table td {
-  padding: 7px 8px;
+  padding: 7px var(--space-2);
   border-bottom: 1px solid var(--border);
-  font-size: 12px;
+  font-size: var(--text-sm);
   vertical-align: top;
   word-break: break-all;
   overflow-wrap: anywhere;
@@ -1128,7 +1167,7 @@ tr.session-entry.active > td:first-child {
   font-family: var(--mono);
 }
 .payload-body {
-  padding: 0 12px 12px;
+  padding: 0 var(--space-3) var(--space-3);
   min-height: 0;
   min-width: 0;
 }
@@ -1136,7 +1175,7 @@ tr.session-entry.active > td:first-child {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-2);
   margin-bottom: 4px;
   min-width: 0;
 }
@@ -1151,7 +1190,7 @@ tr.session-entry.active > td:first-child {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
-  padding: 0 12px 12px;
+  padding: 0 var(--space-3) var(--space-3);
   border-top: 1px solid var(--border);
   margin-top: 4px;
   padding-top: 12px;
@@ -1168,7 +1207,7 @@ tr.session-entry.active > td:first-child {
   list-style: none;
   min-height: 38px;
   padding: 10px 14px;
-  border-radius: 10px;
+  border-radius: var(--radius-md);
   cursor: pointer;
 }
 .payload-actions-menu-trigger::-webkit-details-marker {
@@ -1177,7 +1216,7 @@ tr.session-entry.active > td:first-child {
 .payload-actions-menu-trigger::after {
   content: '▾';
   margin-left: 8px;
-  font-size: 10px;
+  font-size: var(--text-2xs);
   color: var(--text-muted);
 }
 .payload-actions-menu[open] .payload-actions-menu-trigger {
@@ -1194,7 +1233,7 @@ tr.session-entry.active > td:first-child {
   min-width: 180px;
   padding: 6px;
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: var(--radius-md);
   background: var(--surface);
   box-shadow: var(--shadow);
 }
@@ -1207,7 +1246,7 @@ tr.session-entry.active > td:first-child {
   background: transparent;
   color: var(--text);
   box-shadow: none;
-  font-size: 12px;
+  font-size: var(--text-sm);
   font-weight: 500;
 }
 .payload-menu-item:hover:not(:disabled) {
@@ -1216,7 +1255,7 @@ tr.session-entry.active > td:first-child {
 }
 .body-viewer {
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: var(--surface-2);
   overflow: hidden;
 }
@@ -1238,7 +1277,7 @@ tr.session-entry.active > td:first-child {
 }
 .body-viewer-code {
   min-width: 0;
-  padding: 10px 12px;
+  padding: 10px var(--space-3);
   font: 12px/1.5 var(--mono);
   font-variant-ligatures: none;
   color: var(--text);
@@ -1304,7 +1343,7 @@ pre {
   color: var(--text);
   background: var(--surface-2);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 10px;
 }
 .loading-overlay {
@@ -1318,12 +1357,12 @@ pre {
 }
 .muted {
   color: var(--text-muted);
-  font-size: 12px;
+  font-size: var(--text-sm);
 }
 .intercept-panel {
   border: 1px solid rgba(161, 92, 7, 0.25);
   border-left: 3px solid var(--warn);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   background: rgba(161, 92, 7, 0.04);
   margin-bottom: 12px;
   overflow: hidden;
@@ -1337,7 +1376,7 @@ pre {
   border-bottom: 1px solid rgba(161, 92, 7, 0.15);
 }
 .intercept-item {
-  padding: 12px 14px;
+  padding: var(--space-3) 14px;
   border-bottom: 1px solid rgba(161, 92, 7, 0.1);
 }
 .intercept-item:last-child {
@@ -1384,15 +1423,15 @@ pre {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  gap: 8px;
+  gap: var(--space-2);
   margin-bottom: 2px;
 }
 .tl-label strong {
-  font-size: 12px;
+  font-size: var(--text-sm);
 }
 .tl-detail {
   font-family: var(--mono);
-  font-size: 11px;
+  font-size: var(--text-xs);
   font-variant-ligatures: none;
   color: var(--text-muted);
   white-space: nowrap;
@@ -1402,12 +1441,12 @@ pre {
 .actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: var(--space-2);
   margin-top: 10px;
 }
 .event-actions {
   display: flex;
-  gap: 8px;
+  gap: var(--space-2);
 }
 .editor-actions {
   display: flex;
@@ -1422,13 +1461,13 @@ pre {
 }
 .editor-grid {
   display: grid;
-  gap: 8px;
+  gap: var(--space-2);
   margin-top: 10px;
 }
 .request-grid {
   display: grid;
   grid-template-columns: 120px 1fr 200px 130px;
-  gap: 8px;
+  gap: var(--space-2);
 }
 .header-pairs-list {
   display: flex;
@@ -1443,7 +1482,7 @@ pre {
   align-items: center;
 }
 .header-pair-remove {
-  padding: 4px 8px;
+  padding: var(--space-1) var(--space-2);
 }
 .body-field-hdr {
   display: flex;
@@ -1459,7 +1498,7 @@ pre {
   min-height: 180px;
   color: var(--text-muted);
   border: 1px dashed var(--border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   background: var(--surface);
 }
 @media (max-width: 1180px) {
@@ -1487,12 +1526,10 @@ pre {
   .request-grid {
     grid-template-columns: 1fr;
   }
-  .request-toolbar {
-    grid-template-columns: 1fr;
-  }
   .request-toolbar input[type="search"],
   .request-toolbar select,
   .request-toolbar button {
+    flex: 1 1 100%;
     min-width: 0;
     width: 100%;
   }
@@ -1539,14 +1576,20 @@ pre {
   --danger: #f85149;
   --button-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 14px rgba(0,0,0,0.15);
   --shadow: 0 10px 26px rgba(0,0,0,0.25);
+  --elevation-1: 0 1px 2px rgba(0,0,0,0.25);
+  --elevation-2: 0 1px 2px rgba(0,0,0,0.3), 0 6px 14px rgba(0,0,0,0.15);
+  --elevation-3: 0 12px 32px rgba(0,0,0,0.45);
+  --focus-ring: rgba(88, 166, 255, 0.75);
+  --focus-ring-soft: rgba(88, 166, 255, 0.32);
+  --danger-ring: rgba(248, 81, 73, 0.5);
 }
 .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:1000; }
-.modal-box { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:0; min-width:440px; max-width:620px; max-height:90vh; overflow-y:auto; }
+.modal-box { background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:0; min-width:440px; max-width:620px; max-height:90vh; overflow-y:auto; }
 #route-modal .modal-box { max-width:760px; }
-.modal-tabs { display:flex; gap:20px; padding:0 20px; margin:0 -20px 4px; border-bottom:1px solid var(--border); }
+.modal-tabs { display:flex; gap: var(--space-5); padding: 0 var(--space-5); margin: 0 -20px var(--space-1); border-bottom:1px solid var(--border); }
 .modal-tab {
   position:relative; padding:10px 2px; background:none; border:none; border-bottom:2px solid transparent;
-  color:var(--text-muted); font-size:13px; font-weight:600; font-family:var(--sans); cursor:pointer;
+  color:var(--text-muted); font-size: var(--text-md); font-weight:600; font-family:var(--sans); cursor:pointer;
 }
 .modal-tab[aria-selected="true"] { color:var(--text); border-bottom-color:var(--accent); }
 .modal-tab-dot {
@@ -1554,19 +1597,19 @@ pre {
   margin-left:6px; vertical-align:middle; opacity:0; transition:opacity .15s;
 }
 .modal-tab-dot.visible { opacity:1; }
-.connection-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; align-items:start; }
+.connection-grid { display:grid; grid-template-columns:1fr 1fr; gap: 0 var(--space-6); align-items:start; }
 .connection-grid.stacked { grid-template-columns:1fr; }
 .connection-col { min-width:0; }
-.modal-hdr { display:flex; justify-content:space-between; align-items:center; padding:16px 20px 14px; border-bottom:1px solid var(--border); }
-.modal-hdr-main { display:flex; flex-direction:column; gap:4px; min-width:0; }
+.modal-hdr { display:flex; justify-content:space-between; align-items:center; padding: var(--space-4) var(--space-5) 14px; border-bottom:1px solid var(--border); }
+.modal-hdr-main { display:flex; flex-direction:column; gap: var(--space-1); min-width:0; }
 .modal-hdr strong { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; }
-.modal-body { padding:16px 20px 20px; }
-.form-group { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
-.form-group label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
+.modal-body { padding: var(--space-4) var(--space-5) var(--space-5); }
+.form-group { display:flex; flex-direction:column; gap: var(--space-1); margin-bottom:12px; }
+.form-group label { font-size: var(--text-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
 .field-help,
 .section-note {
   display: block;
-  font-size: 11px;
+  font-size: var(--text-xs);
   line-height: 1.4;
   color: var(--text-muted);
 }
@@ -1579,17 +1622,17 @@ pre {
   min-height: 24px;
 }
 .route-modal-summary .pill {
-  font-size: 10px;
+  font-size: var(--text-2xs);
   letter-spacing: 0;
-  padding: 2px 8px;
+  padding: 2px var(--space-2);
 }
-.form-group input[type=text], .form-group input[type=number], .form-group input[type=password], .form-group select { background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:6px 8px; border-radius:4px; font-size:13px; width:100%; }
-.form-group input[type=text], .form-group input[type=number], .form-group input[type=password] { font-family: var(--mono); font-size: 12px; font-variant-ligatures: none; }
-.form-section-hdr { display:flex; align-items:center; gap:8px; margin:18px 0 10px; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
+.form-group input[type=text], .form-group input[type=number], .form-group input[type=password], .form-group select { background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding: 6px var(--space-2); border-radius: var(--radius-xs); font-size: var(--text-md); width:100%; }
+.form-group input[type=text], .form-group input[type=number], .form-group input[type=password] { font-family: var(--mono); font-size: var(--text-sm); font-variant-ligatures: none; }
+.form-section-hdr { display:flex; align-items:center; gap: var(--space-2); margin:18px 0 10px; font-size: var(--text-xs); font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
 .form-section-hdr::after { content:''; flex:1; height:1px; background:var(--border); }
 .form-section-details { margin:18px 0 10px; }
 .form-section-details > summary {
-  display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; color:var(--text-muted);
+  display:flex; align-items:center; gap: var(--space-2); font-size: var(--text-xs); font-weight:700; color:var(--text-muted);
   text-transform:uppercase; letter-spacing:.06em; cursor:pointer; list-style:none; user-select:none;
 }
 .form-section-details > summary::-webkit-details-marker { display:none; }
@@ -1600,7 +1643,7 @@ pre {
 .form-section-details .section-note:first-of-type { margin-top:0; }
 .tls-advanced-details { margin-top:10px; }
 .tls-advanced-details > summary {
-  display:flex; align-items:center; gap:6px; font-size:10px; font-weight:600; color:var(--text-muted);
+  display:flex; align-items:center; gap:6px; font-size: var(--text-2xs); font-weight:600; color:var(--text-muted);
   text-transform:uppercase; letter-spacing:.05em; cursor:pointer; list-style:none; user-select:none; margin-bottom:6px;
 }
 .tls-advanced-details > summary::-webkit-details-marker { display:none; }
@@ -1608,15 +1651,15 @@ pre {
 .tls-advanced-details[open] > summary::before { content:'▾'; }
 .field-warning {
   color: var(--warn);
-  font-size: 11px;
+  font-size: var(--text-xs);
   line-height: 1.35;
   margin: -4px 0 10px;
 }
 .stored-secret-hint {
   display: none;
   align-items: center;
-  gap: 4px;
-  font-size: 10px;
+  gap: var(--space-1);
+  font-size: var(--text-2xs);
   color: var(--text-muted);
   margin-top: 4px;
 }
@@ -1641,7 +1684,7 @@ pre {
   margin-bottom: 10px;
 }
 .mock-rule-title {
-  font-size: 11px;
+  font-size: var(--text-xs);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .05em;
@@ -1650,21 +1693,21 @@ pre {
 .mock-rules-actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-2);
 }
 .mock-rules-empty {
-  font-size: 12px;
-  padding: 8px 0 4px;
-}
-.form-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
-.form-row-3 { display:grid; grid-template-columns:2fr 2fr 1fr; gap:8px; }
-.tls-alt-or { text-align:center; font-size:11px; color:var(--text-muted); margin:4px 0 8px; opacity:.7; }
-.tls-subsection-label { font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
-.form-check { display:flex; align-items:center; gap:6px; font-size:13px; margin-bottom:8px; }
+  font-size: var(--text-sm);
+  padding: var(--space-2) 0 var(--space-1);
+}
+.form-row { display:grid; grid-template-columns:1fr 1fr; gap: var(--space-2); }
+.form-row-3 { display:grid; grid-template-columns:2fr 2fr 1fr; gap: var(--space-2); }
+.tls-alt-or { text-align:center; font-size: var(--text-xs); color:var(--text-muted); margin: var(--space-1) 0 var(--space-2); opacity:.7; }
+.tls-subsection-label { font-size: var(--text-2xs); font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
+.form-check { display:flex; align-items:center; gap:6px; font-size: var(--text-md); margin-bottom:8px; }
 .route-actions {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--space-1);
   opacity: 0;
   transition: opacity .15s, background-color .15s;
   position: absolute;
@@ -1673,20 +1716,20 @@ pre {
   transform: translateY(-50%);
   z-index: 2;
   padding: 3px;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
 }
 .route-row:hover .route-actions { opacity:1; }
-.route-action-btn { min-height:0; padding:2px 6px; border-radius:4px; font-size:11px; line-height:1.4; }
-.add-route-btn { min-height:24px; padding:2px 8px; font-size:13px; }
-[role="button"]:focus-visible { outline:2px solid rgba(15, 108, 189, 0.45); outline-offset:2px; }
-.modal-error { color:var(--danger); font-size:12px; margin-top:8px; padding:6px 8px; border:1px solid rgba(180,35,24,.2); border-radius:4px; background:rgba(180,35,24,.06); display:none; }
-.modal-hint { font-size:11px; color:var(--text-muted); margin-top:12px; padding:8px; border:1px solid var(--border); border-radius:4px; background:var(--surface-2); }
+.route-action-btn { min-height:0; padding:2px 6px; border-radius: var(--radius-xs); font-size: var(--text-xs); line-height:1.4; }
+.add-route-btn { min-height:24px; padding: 2px var(--space-2); font-size: var(--text-md); }
+[role="button"]:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
+.modal-error { color:var(--danger); font-size: var(--text-sm); margin-top:8px; padding: 6px var(--space-2); border:1px solid rgba(180,35,24,.2); border-radius: var(--radius-xs); background:rgba(180,35,24,.06); display:none; }
+.modal-hint { font-size: var(--text-xs); color:var(--text-muted); margin-top:12px; padding: var(--space-2); border:1px solid var(--border); border-radius: var(--radius-xs); background:var(--surface-2); }
 
 /* UX redesign pass: denser operational layout, visible actions, safer responsive behavior. */
 .brand-line {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-2);
   min-width: 0;
 }
 
@@ -1730,15 +1773,15 @@ pre {
 }
 
 .route-list {
-  scroll-padding: 8px;
+  scroll-padding: var(--space-2);
 }
 
 .route-row {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: start;
-  gap: 8px;
-  border-radius: 8px;
+  gap: var(--space-2);
+  border-radius: var(--radius-md);
   padding: 10px;
   position: relative;
 }
@@ -1772,7 +1815,7 @@ pre {
 
 .route-row:has(.route-row-select:focus-visible),
 tr.session-entry:focus-visible {
-  outline: 2px solid rgba(15, 108, 189, 0.42);
+  outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
 }
 
@@ -1784,7 +1827,7 @@ tr.session-entry:focus-visible {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-family: var(--mono);
-  font-size: 12px;
+  font-size: var(--text-sm);
   color: var(--text);
   font-weight: 600;
   letter-spacing: 0;
@@ -1793,7 +1836,7 @@ tr.session-entry:focus-visible {
 .route-row-side {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--space-1);
   flex-shrink: 0;
 }
 
@@ -1818,8 +1861,8 @@ tr.session-entry:focus-visible {
   width: 26px;
   min-height: 24px;
   padding: 0;
-  border-radius: 6px;
-  font-size: 11px;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
 }
 
 .route-action-btn.route-action-delete {
@@ -1890,13 +1933,8 @@ tr.session-entry:focus-visible {
   min-width: 0;
 }
 
-.route-card,
-.table-card,
-.payload-card,
-.events-card,
-.editor-card,
 .modal-box {
-  border-radius: 8px;
+  border-radius: var(--radius-md);
 }
 
 .route-header-card {
@@ -1904,23 +1942,16 @@ tr.session-entry:focus-visible {
   border-radius: 0;
 }
 
-.route-card,
-.table-card,
-.payload-card,
-.events-card,
-.editor-card {
-  box-shadow: none;
-}
-
 .route-header-flow {
   max-width: min(760px, 100%);
 }
 
 .request-table-scroll {
   max-width: 100%;
-  overflow-x: auto;
+  max-height: min(60vh, 640px);
+  overflow: auto;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   -webkit-overflow-scrolling: touch;
 }
 
@@ -1975,7 +2006,7 @@ tr.session-entry:focus-visible {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 12px;
+  gap: var(--space-3);
   cursor: pointer;
   list-style: none;
 }
@@ -2006,7 +2037,7 @@ tr.session-entry:focus-visible {
 .intercept-actions,
 .timeline-actions {
   display: flex;
-  gap: 8px;
+  gap: var(--space-2);
 }
 
 .intercept-item-top {
@@ -2024,7 +2055,7 @@ tr.session-entry:focus-visible {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: var(--text-sm);
 }
 
 .timeline-actions {
@@ -2033,7 +2064,7 @@ tr.session-entry:focus-visible {
 }
 
 .timeline-time {
-  font-size: 11px;
+  font-size: var(--text-xs);
   white-space: nowrap;
 }
 
@@ -2044,14 +2075,14 @@ tr.session-entry:focus-visible {
 .diff-wrap {
   margin-bottom: 12px;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   overflow: auto;
 }
 
 .diff-table {
   width: 100%;
   min-width: 620px;
-  font-size: 12px;
+  font-size: var(--text-sm);
   border-collapse: collapse;
 }
 
@@ -2060,7 +2091,7 @@ tr.session-entry:focus-visible {
 }
 
 .diff-table th {
-  padding: 8px 10px;
+  padding: var(--space-2) 10px;
 }
 
 .diff-table td {
@@ -2085,7 +2116,7 @@ tr.session-entry:focus-visible {
 
 .empty-state {
   min-height: 160px;
-  padding: 20px;
+  padding: var(--space-5);
   text-align: center;
 }
 
@@ -2093,13 +2124,13 @@ tr.session-entry:focus-visible {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-2);
   max-width: 420px;
 }
 
 .empty-state-body strong {
   color: var(--text);
-  font-size: 13px;
+  font-size: var(--text-md);
   font-weight: 600;
 }
 
@@ -2110,19 +2141,19 @@ tr.session-entry:focus-visible {
 .config-panel-wrap {
   background: var(--surface);
   border-bottom: 1px solid var(--border);
-  padding: 12px 16px;
+  padding: var(--space-3) var(--space-4);
 }
 
 .config-panel-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 12px;
+  gap: var(--space-3);
   margin-bottom: 8px;
 }
 
 .config-panel-header strong {
-  font-size: 13px;
+  font-size: var(--text-md);
 }
 
 .config-route-block {
@@ -2131,7 +2162,7 @@ tr.session-entry:focus-visible {
 
 .modal-overlay {
   align-items: stretch;
-  padding: 24px;
+  padding: var(--space-6);
 }
 
 .modal-box {
@@ -2143,7 +2174,7 @@ tr.session-entry:focus-visible {
 
 .modal-close-btn {
   min-height: 0;
-  padding: 2px 8px;
+  padding: 2px var(--space-2);
 }
 
 .confirm-modal-overlay {
@@ -2158,7 +2189,7 @@ tr.session-entry:focus-visible {
 .confirm-modal-message {
   margin: 0;
   color: var(--text);
-  font-size: 13px;
+  font-size: var(--text-md);
   line-height: 1.45;
 }
 
@@ -2175,7 +2206,7 @@ tr.session-entry:focus-visible {
 .modal-body.body-view-modal-body {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--space-2);
   flex: 1 1 auto;
   min-height: 0;
 }
@@ -2221,24 +2252,24 @@ tr.session-entry:focus-visible {
 }
 .har-import-hint {
   margin: 0 0 10px;
-  font-size: 12px;
+  font-size: var(--text-sm);
   color: var(--text-muted);
 }
 .har-entry-list {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--space-1);
   max-height: 320px;
   overflow-y: auto;
 }
 .har-entry-item {
   text-align: left;
   width: 100%;
-  padding: 8px 10px;
-  border-radius: 6px;
+  padding: var(--space-2) 10px;
+  border-radius: var(--radius-sm);
   border: 1px solid var(--border);
   background: var(--surface);
-  font-size: 12px;
+  font-size: var(--text-sm);
   font-family: var(--mono);
   cursor: pointer;
 }
@@ -2262,9 +2293,9 @@ tr.session-entry:focus-visible {
 .tls-subsection {
   border: 1px solid var(--border);
   border-left: 3px solid var(--accent);
-  border-radius: 8px;
-  padding: 12px;
-  margin: 4px 0 12px;
+  border-radius: var(--radius-md);
+  padding: var(--space-3);
+  margin: var(--space-1) 0 var(--space-3);
   background: var(--surface-2);
 }
 
@@ -2272,12 +2303,12 @@ tr.session-entry:focus-visible {
   font-weight: 400;
   text-transform: none;
   letter-spacing: 0;
-  font-size: 10px;
+  font-size: var(--text-2xs);
 }
 
 .field-error {
   color: var(--danger);
-  font-size: 11px;
+  font-size: var(--text-xs);
   line-height: 1.35;
 }
 
@@ -2285,7 +2316,7 @@ input[aria-invalid="true"],
 select[aria-invalid="true"],
 textarea[aria-invalid="true"] {
   border-color: rgba(180, 35, 24, 0.7);
-  outline: 2px solid rgba(180, 35, 24, 0.12);
+  outline: 2px solid var(--danger-ring);
 }
 
 @media (max-width: 1180px) {
@@ -2385,7 +2416,7 @@ textarea[aria-invalid="true"] {
   }
   .modal-hdr {
     align-items: flex-start;
-    gap: 12px;
+    gap: var(--space-3);
   }
 
   .form-row,
@@ -2403,6 +2434,350 @@ textarea[aria-invalid="true"] {
   }
 }
 
+/* ---------------------------------------------------- Fleet overview */
+.overview {
+  display: grid;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  align-content: start;
+}
+.overview[hidden] { display: none; }
+.layout[hidden] { display: none; }
+
+.overview-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.overview-toolbar h2 {
+  margin: 0;
+  font-size: var(--text-xl);
+}
+.overview-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.overview-controls .theme-select { width: auto; }
+
+.view-switch {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-2);
+}
+.view-switch-btn {
+  min-height: 28px;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+}
+.view-switch-btn:hover:not(:disabled) {
+  transform: none;
+  color: var(--text);
+}
+.view-switch-btn.is-active {
+  background: var(--surface);
+  border-color: var(--border);
+  color: var(--text);
+  box-shadow: var(--elevation-1);
+}
+
+.metric-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: var(--space-3);
+}
+.metric-card {
+  display: grid;
+  gap: var(--space-1);
+  padding: var(--space-4);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  transition: var(--theme-transition);
+}
+.metric-value {
+  font-size: 28px;
+  line-height: var(--leading-tight);
+  font-variant-numeric: tabular-nums;
+}
+.metric-label {
+  font-size: var(--text-xs);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+.metric-card-danger .metric-value { color: var(--danger); }
+
+.overview-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+.overview-table th {
+  text-align: left;
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-xs);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+.overview-table td {
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--border);
+  vertical-align: middle;
+}
+.overview-table tbody tr:last-child td { border-bottom: none; }
+.overview-row { cursor: pointer; }
+.overview-row:hover { background: var(--surface-2); }
+.overview-row:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+.overview-flow {
+  display: block;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+}
+.overview-error-rate { font-variant-numeric: tabular-nums; }
+.overview-error-rate.is-degraded { color: var(--danger); font-weight: 600; }
+
+.overview-status { text-transform: uppercase; }
+.overview-status-healthy { color: var(--ok); border-color: var(--ok); }
+.overview-status-degraded { color: var(--warn); border-color: var(--warn); }
+.overview-status-failing { color: var(--danger); border-color: var(--danger); }
+.overview-status-idle { color: var(--text-muted); }
+
+.sparkline { display: block; }
+.sparkline-bar { fill: var(--accent); }
+.sparkline-bar-empty { fill: var(--border); }
+
+@media (max-width: 760px) {
+  .overview { padding: var(--space-3); }
+  .overview-table th:nth-child(5),
+  .overview-table td:nth-child(5),
+  .overview-table th:nth-child(7),
+  .overview-table td:nth-child(7) {
+    display: none;
+  }
+  .view-switch-btn .button-label { display: none; }
+}
+
+/* ---------------------------------------------------- Sortable table */
+.request-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--surface-2);
+}
+.sortable-header {
+  cursor: pointer;
+  user-select: none;
+}
+.sortable-header > span {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+.sortable-header .icon {
+  width: 12px;
+  height: 12px;
+  vertical-align: middle;
+  margin-left: var(--space-1);
+}
+.sortable-header:hover { color: var(--text); }
+.sortable-header.is-sorted { color: var(--accent); }
+.sortable-header:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+
+.request-table-compact th,
+.request-table-compact td {
+  padding-block: var(--space-1);
+  font-size: var(--text-xs);
+}
+
+/* ---------------------------------------------------- Command palette */
+.palette-overlay {
+  align-items: flex-start;
+  padding-top: 12vh;
+}
+.palette-box {
+  width: min(560px, 92vw);
+  min-width: 0;
+  padding: 0;
+  overflow: hidden;
+}
+.palette-search {
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--border);
+}
+.palette-search input {
+  border: none;
+  background: transparent;
+  font-size: var(--text-lg);
+  padding: var(--space-1) 0;
+}
+.palette-search input:focus {
+  outline: none;
+  border-color: transparent;
+}
+.palette-list {
+  max-height: 48vh;
+  overflow-y: auto;
+  padding: var(--space-2);
+  display: grid;
+  gap: 2px;
+}
+.palette-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  width: 100%;
+  min-height: 36px;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text);
+  font-weight: 500;
+  text-align: left;
+}
+.palette-item:hover:not(:disabled) { transform: none; }
+.palette-item.is-active,
+.palette-item:hover {
+  background: var(--accent-soft);
+  color: var(--accent-strong);
+}
+.palette-item-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.palette-item-hint {
+  flex: 0 0 auto;
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+/* ---------------------------------------------------- Shortcuts dialog */
+.shortcut-list {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-2) var(--space-4);
+  align-items: center;
+  margin: 0;
+}
+.shortcut-list dt { margin: 0; white-space: nowrap; }
+.shortcut-list dd { margin: 0; color: var(--text-muted); }
+kbd {
+  display: inline-block;
+  min-width: 22px;
+  padding: 2px var(--space-1);
+  border: 1px solid var(--border-strong);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-xs);
+  background: var(--surface-2);
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  text-align: center;
+}
+
+/* ---------------------------------------------------- Skip link */
+.skip-link {
+  position: absolute;
+  left: var(--space-2);
+  top: var(--space-2);
+  z-index: 2000;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  background: var(--accent);
+  color: #ffffff;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  text-decoration: none;
+  transform: translateY(-200%);
+  transition: transform 120ms ease;
+}
+.skip-link:focus-visible {
+  transform: translateY(0);
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* ---------------------------------------------------- Skeletons */
+.skeleton {
+  display: grid;
+  gap: var(--space-2);
+  padding: var(--space-3);
+}
+.skeleton-line {
+  height: 12px;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--surface-3) 0%,
+    var(--surface-2) 50%,
+    var(--surface-3) 100%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+.skeleton-line-sm { width: 40%; }
+.skeleton-line-md { width: 65%; }
+.skeleton-line-lg { width: 100%; }
+.skeleton-row {
+  display: grid;
+  gap: var(--space-2);
+  padding: var(--space-2) 0;
+  border-bottom: 1px solid var(--border);
+}
+.skeleton-row:last-child { border-bottom: none; }
+.skeleton-payload {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: var(--space-3);
+}
+@keyframes skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ---------------------------------------------------- Error state */
+.error-state {
+  display: grid;
+  justify-items: center;
+  gap: var(--space-3);
+  padding: var(--space-6) var(--space-4);
+  text-align: center;
+}
+.error-state-icon {
+  color: var(--danger);
+}
+.error-state-icon .icon {
+  width: 22px;
+  height: 22px;
+}
+.error-state-message {
+  color: var(--text);
+  font-size: var(--text-base);
+  font-weight: 600;
+  max-width: 46ch;
+}
+
 @media (prefers-reduced-motion: reduce) {
   :root {
     --theme-transition: none;
@@ -2418,7 +2793,13 @@ textarea[aria-invalid="true"] {
   .payload-card,
   .events-card,
   .editor-card,
-  .banner {
+  .banner,
+  .skip-link,
+  .palette-item {
     transition: none;
   }
+  .skeleton-line {
+    animation: none;
+    background: var(--surface-3);
+  }
 }
diff --git a/src/test/java/com/cafeina/tcpmon/web/ControlPlaneServerTest.java b/src/test/java/com/cafeina/tcpmon/web/ControlPlaneServerTest.java
index 54b11ee..30a8316 100644
--- a/src/test/java/com/cafeina/tcpmon/web/ControlPlaneServerTest.java
+++ b/src/test/java/com/cafeina/tcpmon/web/ControlPlaneServerTest.java
@@ -455,4 +455,169 @@ void resolvesAssetContentTypes() {
         assertEquals("font/otf", ControlPlaneServer.assetContentType("ibm-plex-sans-600.otf"));
         assertEquals("application/octet-stream", ControlPlaneServer.assetContentType("binary.bin"));
     }
+
+    @Test
+    void overviewEndpointReturnsTotalsAndPerRouteRows(@TempDir Path tempDir) throws Exception {
+        ProxyConfig config = overviewConfig(tempDir, 8080, "token");
+        RouteConfig healthy = overviewRoute("route-ok", 9000, "ok.example.com");
+        RouteConfig broken = overviewRoute("route-bad", 9001, "bad.example.com");
+
+        try (SessionStore store = new SessionStore(tempDir.resolve("sessions"), JsonSupport.objectMapper())) {
+            recordExchange(store, "route-ok", "GET /health", "200 OK");
+            recordExchange(store, "route-ok", "GET /health", "200 OK");
+            recordExchange(store, "route-bad", "POST /charge", "500 Internal Server Error");
+            recordExchange(store, "route-bad", "GET /missing", "404 Not Found");
+
+            OverviewAggregator.OverviewReport report = new OverviewAggregator(store).aggregate(60);
+
+            assertEquals(60, report.windowMinutes());
+            assertEquals(4, report.totals().requests());
+            assertEquals(1, report.totals().errors());
+            assertEquals(1, report.totals().clientErrors());
+            assertEquals(0.25, report.totals().errorRate());
+
+            Map<String, OverviewAggregator.RouteOverview> byId = new java.util.LinkedHashMap<>();
+            for (OverviewAggregator.RouteOverview route : report.routes()) {
+                byId.put(route.routeId(), route);
+            }
+            assertEquals(List.of("route-bad", "route-ok"), List.copyOf(byId.keySet()));
+
+            OverviewAggregator.RouteOverview okRoute = byId.get("route-ok");
+            assertEquals(2, okRoute.requests());
+            assertEquals(0, okRoute.errors());
+            assertEquals("healthy", okRoute.status());
+            assertEquals(OverviewAggregator.SPARKLINE_BUCKETS, okRoute.sparkline().size());
+
+            OverviewAggregator.RouteOverview badRoute = byId.get("route-bad");
+            assertEquals(1, badRoute.errors());
+            assertEquals(1, badRoute.clientErrors());
+            assertEquals(0.5, badRoute.errorRate());
+            assertEquals("failing", badRoute.status());
+
+            assertFalse(report.slowestPaths().isEmpty());
+            assertTrue(report.slowestPaths().size() <= OverviewAggregator.SLOWEST_PATH_LIMIT);
+
+            // A configured route without traffic still appears, marked idle.
+            OverviewAggregator.OverviewReport withIdle = OverviewAggregator.summarize(
+                    List.of(), List.of(healthy, broken), 60, Instant.now());
+            assertEquals(2, withIdle.routes().size());
+            assertEquals("idle", withIdle.routes().get(0).status());
+            assertEquals("127.0.0.1:9000", withIdle.routes().stream()
+                    .filter(route -> route.routeId().equals("route-ok"))
+                    .findFirst().orElseThrow().listener());
+        }
+    }
+
+    @Test
+    void overviewEndpointHonoursTheWindowParameter() {
+        Instant now = Instant.parse("2026-08-21T12:00:00Z");
+        List<com.cafeina.tcpmon.session.OverviewExchange> rows = List.of(
+                new com.cafeina.tcpmon.session.OverviewExchange(
+                        "route-a", now.minusSeconds(60), 100, "200", "GET", "/recent"),
+                new com.cafeina.tcpmon.session.OverviewExchange(
+                        "route-a", now.minusSeconds(300), 900, "200", "GET", "/older"));
+
+        OverviewAggregator.OverviewReport wide = OverviewAggregator.summarize(rows, List.of(), 60, now);
+        assertEquals(2, wide.totals().requests());
+        assertEquals(100, wide.totals().p50Ms());
+        assertEquals(900, wide.totals().p95Ms());
+
+        // The 15 minute window keeps both rows, but the sparkline places them in different buckets.
+        OverviewAggregator.OverviewReport narrow = OverviewAggregator.summarize(rows, List.of(), 15, now);
+        List<Long> sparkline = narrow.routes().get(0).sparkline();
+        assertEquals(OverviewAggregator.SPARKLINE_BUCKETS, sparkline.size());
+        assertEquals(2, sparkline.stream().mapToLong(Long::longValue).sum());
+        assertEquals(1, sparkline.get(sparkline.size() - 1));
+    }
+
+    @Test
+    void overviewEndpointRejectsAnInvalidWindow(@TempDir Path tempDir) throws Exception {
+        assertTrue(OverviewAggregator.isValidWindow(15));
+        assertTrue(OverviewAggregator.isValidWindow(60));
+        assertTrue(OverviewAggregator.isValidWindow(1440));
+        assertFalse(OverviewAggregator.isValidWindow(7));
+        assertFalse(OverviewAggregator.isValidWindow(0));
+        assertFalse(OverviewAggregator.isValidWindow(-60));
+
+        try (SessionStore store = new SessionStore(tempDir.resolve("sessions"), JsonSupport.objectMapper())) {
+            OverviewAggregator aggregator = new OverviewAggregator(store);
+            org.junit.jupiter.api.Assertions.assertThrows(
+                    IllegalArgumentException.class, () -> aggregator.aggregate(7));
+        }
+    }
+
+    @Test
+    void overviewEndpointRequiresAuthentication(@TempDir Path tempDir) throws Exception {
+        int port;
+        try (java.net.ServerSocket probe = new java.net.ServerSocket(0)) {
+            port = probe.getLocalPort();
+        }
+        ProxyConfig config = overviewConfig(tempDir, port, "secret-token");
+        RouteConfig route = overviewRoute("route-a", 9000, "example.com");
+
+        try (SessionStore store = new SessionStore(tempDir.resolve("sessions"), JsonSupport.objectMapper())) {
+            recordExchange(store, "route-a", "GET /health", "200 OK");
+            ControlPlaneServer server = new ControlPlaneServer(
+                    config,
+                    new RouteRegistry(List.of(route), store),
+                    (TcpMonProxy) null,
+                    store,
+                    new ReplayService(config, new RouteRegistry(List.of(route), null)));
+            server.start();
+            try {
+                java.net.http.HttpClient client = java.net.http.HttpClient.newHttpClient();
+                java.net.URI uri = java.net.URI.create(
+                        "http://127.0.0.1:" + port + "/api/overview?windowMinutes=60");
+
+                java.net.http.HttpResponse<String> anonymous = client.send(
+                        java.net.http.HttpRequest.newBuilder(uri).GET().build(),
+                        java.net.http.HttpResponse.BodyHandlers.ofString());
+                assertEquals(401, anonymous.statusCode());
+
+                java.net.http.HttpResponse<String> authorized = client.send(
+                        java.net.http.HttpRequest.newBuilder(uri)
+                                .header("Authorization", "Bearer secret-token")
+                                .GET().build(),
+                        java.net.http.HttpResponse.BodyHandlers.ofString());
+                assertEquals(200, authorized.statusCode());
+                assertTrue(authorized.body().contains("\"windowMinutes\":60"));
+                assertTrue(authorized.body().contains("\"routeId\":\"route-a\""));
+
+                java.net.http.HttpResponse<String> badWindow = client.send(
+                        java.net.http.HttpRequest.newBuilder(
+                                        java.net.URI.create("http://127.0.0.1:" + port + "/api/overview?windowMinutes=7"))
+                                .header("Authorization", "Bearer secret-token")
+                                .GET().build(),
+                        java.net.http.HttpResponse.BodyHandlers.ofString());
+                assertEquals(400, badWindow.statusCode());
+            } finally {
+                server.close();
+            }
+        }
+    }
+
+    private static ProxyConfig overviewConfig(Path tempDir, int port, String token) {
+        return new ProxyConfig(
+                new UiConfig("127.0.0.1", port, true, token, null),
+                tempDir,
+                com.cafeina.tcpmon.InterceptMode.NONE,
+                List.of("TLSv1.3"),
+                List.of());
+    }
+
+    private static RouteConfig overviewRoute(String id, int listenerPort, String targetHost) {
+        return new RouteConfig(
+                id,
+                new ListenerConfig("127.0.0.1", listenerPort, TransportMode.PLAIN, ClientAuthMode.NONE, null, List.of(), List.of(), null),
+                new TargetConfig(targetHost, 443, TransportMode.TLS, targetHost, false, true, false, null, List.of(), List.of()),
+                0, 0, null, null, List.of());
+    }
+
+    private static void recordExchange(SessionStore store, String routeId, String requestLine, String statusLine) {
+        String sessionId = store.openSession(routeId, "client", "listener", "target");
+        store.recordPayload(sessionId, Direction.CLIENT_TO_TARGET,
+                (requestLine + " HTTP/1.1\r\nHost: example.com\r\n\r\n").getBytes(), null, Map.of());
+        store.recordPayload(sessionId, Direction.TARGET_TO_CLIENT,
+                ("HTTP/1.1 " + statusLine + "\r\nContent-Length: 2\r\n\r\nOK").getBytes(), null, Map.of());
+    }
 }
diff --git a/src/test/js/web-helpers.test.mjs b/src/test/js/web-helpers.test.mjs
index 2b71fce..940c892 100644
--- a/src/test/js/web-helpers.test.mjs
+++ b/src/test/js/web-helpers.test.mjs
@@ -160,6 +160,12 @@ class FakeNode {
     this.attributes[name] = String(value);
   }
 
+  getAttribute(name) {
+    return Object.prototype.hasOwnProperty.call(this.attributes, name)
+      ? this.attributes[name]
+      : null;
+  }
+
   addEventListener(type, listener) {
     this.listeners[type] = listener;
   }
@@ -313,6 +319,8 @@ function loadWebHelpers() {
   loadScript(context, 'route-modal.js');
   loadScript(context, 'sessions.js');
   loadScript(context, 'details.js');
+  loadScript(context, 'overview.js');
+  loadScript(context, 'command-palette.js');
   loadScript(context, 'actions.js');
   return context;
 }
@@ -886,3 +894,338 @@ test('buildRouteHeaderViewModel splits route health from active selection contex
   assert.equal(model.activeSelection.statusCode, '');
   assert.equal(model.activeSelection.durationMs, null);
 });
+
+test('buildIcon returns an svg element with the requested name', () => {
+  const ctx = loadWebHelpers();
+
+  const svg = ctx.buildIcon('search');
+
+  assert.equal(svg.tagName, 'svg');
+  assert.equal(svg.attributes.class, 'icon');
+  assert.equal(svg.attributes.viewBox, '0 0 24 24');
+  assert.equal(svg.attributes['aria-hidden'], 'true');
+  assert.ok(svg.innerHTML.includes('circle'));
+});
+
+test('buildIcon falls back to a generic glyph for an unknown name', () => {
+  const ctx = loadWebHelpers();
+
+  const unknown = ctx.buildIcon('definitely-not-an-icon');
+  const fallback = ctx.buildIcon('file');
+
+  assert.equal(unknown.innerHTML, fallback.innerHTML);
+});
+
+test('buildSkeleton renders the requested row count', () => {
+  const ctx = loadWebHelpers();
+
+  const skeleton = ctx.buildSkeleton('table', 5);
+
+  assert.equal(skeleton.className, 'skeleton skeleton-table');
+  assert.equal(skeleton.attributes['aria-hidden'], 'true');
+  assert.equal(skeleton.children.length, 5);
+  assert.ok(skeleton.children.every(row => row.className === 'skeleton-row'));
+  assert.ok(skeleton.children[0].children.every(line => line.className.startsWith('skeleton-line')));
+
+  const unknownVariant = ctx.buildSkeleton('nope', 0);
+  assert.equal(unknownVariant.className, 'skeleton skeleton-table');
+  assert.equal(unknownVariant.children.length, 1);
+});
+
+test('buildErrorState renders the message and wires the retry action', () => {
+  const ctx = loadWebHelpers();
+  let retries = 0;
+
+  const state = ctx.buildErrorState('Could not load this data.', 'Retry', () => { retries += 1; });
+
+  assert.equal(state.className, 'error-state');
+  assert.equal(state.attributes.role, 'alert');
+  const message = state.children.find(child => child.className === 'error-state-message');
+  assert.equal(message.textContent, 'Could not load this data.');
+
+  const retryButton = state.children.find(child => child.dataset.action === 'retry');
+  assert.ok(retryButton, 'expected a retry button');
+  retryButton.listeners.click();
+  assert.equal(retries, 1);
+
+  const withoutRetry = ctx.buildErrorState('Could not load this data.', 'Retry', null);
+  assert.equal(withoutRetry.children.some(child => child.dataset.action === 'retry'), false);
+});
+
+test('hydrateStaticIcons wires every data-icon button', () => {
+  const ctx = loadWebHelpers();
+
+  const iconOnly = ctx.document.getElementById('add-route-btn');
+  iconOnly.dataset.icon = 'plus';
+  iconOnly.setAttribute('aria-label', 'Add route');
+
+  const labelled = ctx.document.getElementById('refresh-routes-btn');
+  labelled.dataset.icon = 'refresh';
+  labelled.dataset.iconLabel = 'Refresh';
+
+  const untouched = ctx.document.getElementById('route-search');
+
+  const hydrated = ctx.hydrateStaticIcons(ctx.document);
+
+  assert.equal(hydrated, 2);
+
+  assert.equal(iconOnly.children.length, 1);
+  assert.equal(iconOnly.children[0].tagName, 'svg');
+  assert.equal(iconOnly.classList.contains('icon-only'), true);
+  assert.equal(iconOnly.attributes['aria-label'], 'Add route');
+
+  assert.equal(labelled.children.length, 2);
+  assert.equal(labelled.children[0].tagName, 'svg');
+  assert.equal(labelled.children[1].className, 'button-label');
+  assert.equal(labelled.children[1].textContent, 'Refresh');
+  assert.equal(labelled.classList.contains('icon-only'), false);
+
+  assert.equal(untouched.children.length, 0);
+});
+
+test('buildOverviewViewModel computes the error rate per route', () => {
+  const ctx = loadWebHelpers();
+
+  const viewModel = ctx.buildOverviewViewModel({
+    windowMinutes: 60,
+    totals: { requests: 10, errors: 2, clientErrors: 1, p50Ms: 120, p95Ms: 900 },
+    routes: [
+      { routeId: 'route-a', listener: '127.0.0.1:9000', target: 'a.example.com:443',
+        status: 'healthy', requests: 8, errors: 0, clientErrors: 1, sparkline: [1, 2, 5] },
+      { routeId: 'route-b', listener: '127.0.0.1:9001', target: 'b.example.com:443',
+        status: 'failing', requests: 2, errors: 2, clientErrors: 0, sparkline: [0, 2] }
+    ],
+    slowestPaths: [{ method: 'GET', path: '/slow', routeId: 'route-a', p95Ms: 900, count: 3 }]
+  });
+
+  assert.equal(viewModel.empty, false);
+  assert.equal(viewModel.windowMinutes, 60);
+  assert.equal(viewModel.totals.requests, 10);
+  assert.equal(viewModel.totals.errorRate, 0.2);
+
+  assert.equal(viewModel.routes[0].routeId, 'route-a');
+  assert.equal(viewModel.routes[0].errorRate, 0);
+  assert.equal(viewModel.routes[1].routeId, 'route-b');
+  assert.equal(viewModel.routes[1].errorRate, 1);
+
+  assert.equal(viewModel.slowestPaths.length, 1);
+  assert.equal(viewModel.slowestPaths[0].path, '/slow');
+  assert.equal(viewModel.slowestPaths[0].count, 3);
+});
+
+test('buildOverviewViewModel marks a route as degraded above the error threshold', () => {
+  const ctx = loadWebHelpers();
+
+  const viewModel = ctx.buildOverviewViewModel({
+    windowMinutes: 15,
+    totals: { requests: 3, errors: 1 },
+    routes: [
+      { routeId: 'healthy-route', status: 'healthy', requests: 1, errors: 0, sparkline: [] },
+      { routeId: 'degraded-route', status: 'degraded', requests: 1, errors: 0, sparkline: [] },
+      { routeId: 'failing-route', status: 'failing', requests: 1, errors: 1, sparkline: [] },
+      { routeId: 'idle-route', status: 'idle', requests: 0, errors: 0, sparkline: [] }
+    ],
+    slowestPaths: []
+  });
+
+  const byId = Object.fromEntries(viewModel.routes.map(route => [route.routeId, route]));
+  assert.equal(byId['healthy-route'].degraded, false);
+  assert.equal(byId['degraded-route'].degraded, true);
+  assert.equal(byId['failing-route'].degraded, true);
+  assert.equal(byId['idle-route'].degraded, false);
+  assert.equal(byId['idle-route'].errorRate, 0);
+});
+
+test('buildSparkline renders one point per bucket', () => {
+  const ctx = loadWebHelpers();
+
+  const sparkline = ctx.buildSparkline([0, 3, 1, 6], { width: 80, height: 20 });
+
+  assert.equal(sparkline.tagName, 'svg');
+  assert.equal(sparkline.attributes['aria-hidden'], 'true');
+  assert.equal(sparkline.children.length, 4);
+  assert.equal(sparkline.children[0].attributes.class, 'sparkline-bar sparkline-bar-empty');
+  assert.equal(sparkline.children[3].attributes.class, 'sparkline-bar');
+  // The tallest bucket fills the full height.
+  assert.equal(sparkline.children[3].attributes.height, '20');
+  assert.equal(sparkline.children[3].attributes.y, '0');
+
+  assert.equal(ctx.buildSparkline([], {}).children.length, 0);
+});
+
+test('buildOverviewViewModel returns an empty state flag when there is no traffic', () => {
+  const ctx = loadWebHelpers();
+
+  const viewModel = ctx.buildOverviewViewModel({
+    windowMinutes: 1440,
+    totals: { requests: 0, errors: 0, p50Ms: null, p95Ms: null },
+    routes: [{ routeId: 'route-a', status: 'idle', requests: 0, errors: 0, sparkline: [0, 0] }],
+    slowestPaths: []
+  });
+
+  assert.equal(viewModel.empty, true);
+  assert.equal(viewModel.totals.errorRate, 0);
+  assert.equal(viewModel.routes[0].status, 'idle');
+
+  const missingPayload = ctx.buildOverviewViewModel(null);
+  assert.equal(missingPayload.empty, true);
+  assert.equal(missingPayload.routes.length, 0);
+  assert.equal(missingPayload.slowestPaths.length, 0);
+});
+
+function requestRow(overrides = {}) {
+  return {
+    sessionId: overrides.sessionId || 's-1',
+    exchangeIndex: 0,
+    routeId: 'route-a',
+    requestMethod: 'GET',
+    requestPath: '/one',
+    responseStatusCode: '200',
+    durationMs: 100,
+    responseSizeBytes: 100,
+    clientAddress: '127.0.0.1:1',
+    startedAt: '2026-08-21T12:00:00Z',
+    ...overrides
+  };
+}
+
+test('sortRequestRows orders by duration in both directions', () => {
+  const ctx = loadWebHelpers();
+  const rows = [
+    requestRow({ sessionId: 's-a', durationMs: 500 }),
+    requestRow({ sessionId: 's-b', durationMs: 20 }),
+    requestRow({ sessionId: 's-c', durationMs: 1500 })
+  ];
+
+  const descending = ctx.sortRequestRows(rows, 'duration', 'desc');
+  assert.deepEqual(Array.from(descending, row => row.sessionId), ['s-c', 's-a', 's-b']);
+
+  const ascending = ctx.sortRequestRows(rows, 'duration', 'asc');
+  assert.deepEqual(Array.from(ascending, row => row.sessionId), ['s-b', 's-a', 's-c']);
+
+  // An unknown key leaves the server order untouched.
+  assert.deepEqual(
+    Array.from(ctx.sortRequestRows(rows, 'nope', 'desc'), row => row.sessionId),
+    ['s-a', 's-b', 's-c']
+  );
+  // The input array is not mutated.
+  assert.deepEqual(Array.from(rows, row => row.sessionId), ['s-a', 's-b', 's-c']);
+});
+
+test('sortRequestRows keeps a stable order for equal keys', () => {
+  const ctx = loadWebHelpers();
+  const rows = [
+    requestRow({ sessionId: 's-a', durationMs: 100 }),
+    requestRow({ sessionId: 's-b', durationMs: 100 }),
+    requestRow({ sessionId: 's-c', durationMs: 100 }),
+    requestRow({ sessionId: 's-d', durationMs: 900 })
+  ];
+
+  assert.deepEqual(
+    Array.from(ctx.sortRequestRows(rows, 'duration', 'desc'), row => row.sessionId),
+    ['s-d', 's-a', 's-b', 's-c']
+  );
+  assert.deepEqual(
+    Array.from(ctx.sortRequestRows(rows, 'duration', 'asc'), row => row.sessionId),
+    ['s-a', 's-b', 's-c', 's-d']
+  );
+});
+
+test('latencyLevel classifies a duration against the thresholds', () => {
+  const ctx = loadWebHelpers();
+
+  assert.equal(ctx.latencyLevel(0), 'fast');
+  assert.equal(ctx.latencyLevel(299), 'fast');
+  assert.equal(ctx.latencyLevel(300), 'moderate');
+  assert.equal(ctx.latencyLevel(999), 'moderate');
+  assert.equal(ctx.latencyLevel(1000), 'slow');
+  assert.equal(ctx.latencyLevel(5000), 'slow');
+  assert.equal(ctx.latencyLevel(null), null);
+  assert.equal(ctx.latencyLevel('oops'), null);
+
+  assert.equal(ctx.latencyClass(50), 'timing-fast');
+  assert.equal(ctx.latencyClass(500), 'timing-medium');
+  assert.equal(ctx.latencyClass(2000), 'timing-slow');
+  assert.equal(ctx.latencyClass(null), 'muted');
+});
+
+test('buildRequestTableElement applies the compact density class', () => {
+  const ctx = loadWebHelpers();
+  const rows = [requestRow()];
+
+  const compact = ctx.buildRequestTableElement(rows, null, 0, false, { density: 'compact' });
+  assert.equal(compact.className, 'request-table request-table-compact');
+  assert.equal(compact.dataset.density, 'compact');
+
+  const comfortable = ctx.buildRequestTableElement(rows, null, 0, false, { density: 'comfortable' });
+  assert.equal(comfortable.className, 'request-table');
+  assert.equal(comfortable.dataset.density, 'comfortable');
+
+  // An unknown density falls back to comfortable.
+  assert.equal(ctx.buildRequestTableElement(rows, null, 0, false, {}).dataset.density, 'comfortable');
+});
+
+test('buildRequestTableElement marks the active sort column', () => {
+  const ctx = loadWebHelpers();
+  const rows = [requestRow()];
+
+  const table = ctx.buildRequestTableElement(rows, null, 0, false, {
+    sortKey: 'duration',
+    sortDirection: 'asc'
+  });
+  const headers = table.querySelectorAll('th');
+  assert.equal(headers.length, 7);
+
+  const durationHeader = headers.find(header => header.dataset.sortKey === 'duration');
+  assert.equal(durationHeader.attributes['aria-sort'], 'ascending');
+  assert.equal(durationHeader.classList.contains('is-sorted'), true);
+  assert.equal(durationHeader.dataset.action, 'sort-requests');
+
+  const pathHeader = headers.find(header => header.dataset.sortKey === 'path');
+  assert.equal(pathHeader.attributes['aria-sort'], 'none');
+  assert.equal(pathHeader.classList.contains('is-sorted'), false);
+
+  // The route column only appears when the table shows every route.
+  const withRoute = ctx.buildRequestTableElement(rows, null, 0, true, {});
+  assert.equal(withRoute.querySelectorAll('th').length, 8);
+});
+
+test('buildPaletteCommands includes one command per route', () => {
+  const ctx = loadWebHelpers();
+
+  const withoutRoutes = ctx.buildPaletteCommands({});
+  const routeCommands = withoutRoutes.filter(command => command.id.startsWith('open-route:'));
+  assert.equal(routeCommands.length, 0);
+  assert.ok(withoutRoutes.some(command => command.label === 'Go to Overview'));
+  assert.ok(withoutRoutes.some(command => command.label === 'Clear filters'));
+  assert.ok(withoutRoutes.some(command => command.label === 'Toggle theme'));
+
+  const withRoutes = ctx.buildPaletteCommands({
+    proxyConfig: { routes: [{ id: 'route-a' }, { id: 'route-b' }] }
+  });
+  const openCommands = withRoutes.filter(command => command.id.startsWith('open-route:'));
+  assert.equal(openCommands.length, 2);
+  assert.deepEqual(Array.from(openCommands, command => command.label),
+    ['Open route: route-a', 'Open route: route-b']);
+  assert.ok(openCommands.every(command => typeof command.run === 'function'));
+});
+
+test('filterPaletteCommands matches on the command label', () => {
+  const ctx = loadWebHelpers();
+  const commands = ctx.buildPaletteCommands({
+    proxyConfig: { routes: [{ id: 'payments-api' }, { id: 'billing-api' }] }
+  });
+
+  assert.deepEqual(
+    Array.from(ctx.filterPaletteCommands(commands, 'payments'), command => command.label),
+    ['Open route: payments-api']
+  );
+  // The match ignores case and surrounding blanks.
+  assert.deepEqual(
+    Array.from(ctx.filterPaletteCommands(commands, '  THEME  '), command => command.label),
+    ['Toggle theme']
+  );
+  assert.equal(ctx.filterPaletteCommands(commands, '').length, commands.length);
+  assert.equal(ctx.filterPaletteCommands(commands, 'no-such-command').length, 0);
+  assert.equal(ctx.filterPaletteCommands(null, 'x').length, 0);
+});