diff --git a/docs/superpowers/plans/2026-05-17-server-detail-page-redesign.md b/docs/superpowers/plans/2026-05-17-server-detail-page-redesign.md
new file mode 100644
index 0000000..1fac295
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-17-server-detail-page-redesign.md
@@ -0,0 +1,1150 @@
+# Server detail page redesign — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Reshape `server_detail.html` into a top "state cluster" (lifecycle + live state + config) and a bottom tabbed inspection strip (Log / Console / Files) with expand-to-modal, removing inline page-shifting elements like the streaming job log.
+
+**Architecture:** Pure template + CSS + small JS refactor. Reuses existing partials (`_console_line.html`, `_overlay_file_tree.html`), the existing `<dialog class="modal">` + `modals.js` infrastructure, and the existing SSE/HTMX endpoints. Two routes are touched only to add precomputed slice/count fields; no new endpoints.
+
+**Tech Stack:** Jinja2 templates, plain CSS (custom properties under `var(--space-*)` etc., no Tailwind), HTMX, vanilla JS, Playwright for e2e.
+
+**Reference spec:** `docs/superpowers/specs/2026-05-17-server-detail-page-redesign-design.md`
+
+---
+
+## File map
+
+| Path | Action | Responsibility |
+|------|--------|----------------|
+| `l4d2web/l4d2web/templates/_macros.html` | **create** | `config_field(label, value, editable=False)` Jinja macro |
+| `l4d2web/l4d2web/routes/server_routes.py` | modify (`live_state_fragment`, ~L262-274) | Slice `recent_rows` to 10 for overview, pass total count |
+| `l4d2web/l4d2web/templates/_live_state.html` | rewrite | 4-col current grid (no header), 5-col recent chips, `N Recent` trigger header |
+| `l4d2web/l4d2web/templates/_server_actions.html` | modify (remove L33-35; modify L26-32) | Delete inline `<pre>`; convert latest_job link to `<button>` modal trigger |
+| `l4d2web/l4d2web/static/css/components.css` | append | `.state-cluster`, `.inspection-strip`, player grids/chips, tabbar, divider |
+| `l4d2web/l4d2web/static/js/tabs.js` | **create** | Tab activation + expand-to-active-modal handler |
+| `l4d2web/l4d2web/templates/base.html` | modify | `<script>` include for `tabs.js` |
+| `l4d2web/l4d2web/templates/server_detail.html` | rewrite body | State cluster wrapper, inspection strip, five new modals |
+| `l4d2web/tests/test_status_and_server_logs.py` | extend | Unit-test new slice/count fields on `/live-state` route |
+| `l4d2web/tests/e2e/test_server_detail.py` | extend | Playwright: tab switching, expand-to-modal, job-log modal trigger |
+
+---
+
+### Task 1: Add `config_field` Jinja macro
+
+**Files:**
+- Create: `l4d2web/l4d2web/templates/_macros.html`
+
+Foundational. Other template tasks will call this macro.
+
+- [ ] **Step 1: Create the macro file**
+
+Create `l4d2web/l4d2web/templates/_macros.html`:
+
+```jinja
+{# Reusable field-cell for the server-detail config grid and any future
+   key/value layouts. `value` is rendered as-is (caller can pass safe
+   HTML via `|safe` if needed). `editable` is a flag the caller may
+   use to switch rendering — currently informational only. #}
+{% macro config_field(label, value, editable=False) %}
+  <div class="config-field">
+    <div class="config-field-label">{{ label }}</div>
+    <div class="config-field-value">{{ value }}</div>
+  </div>
+{% endmacro %}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add l4d2web/l4d2web/templates/_macros.html
+git commit -m "feat(templates): add _macros.html with config_field macro"
+```
+
+---
+
+### Task 2: Live-state route — slice recents and expose total count
+
+**Files:**
+- Modify: `l4d2web/l4d2web/routes/server_routes.py:262-274` (the `recent_rows` query and `render_template` call inside `live_state_fragment`)
+- Test: `l4d2web/tests/test_status_and_server_logs.py`
+
+The HTMX poll on `_live_state.html` is what brings player data into the page. We need the inline render to use a sliced list and expose the total count for the `N Recent` header.
+
+- [ ] **Step 1: Write the failing test**
+
+Append to `l4d2web/tests/test_status_and_server_logs.py`:
+
+```python
+from datetime import UTC, datetime, timedelta
+from l4d2web.db import session_scope
+from l4d2web.models import Server, ServerPlayerSession, User
+
+
+def test_live_state_fragment_exposes_sliced_recents_and_total(client, login_alice):
+    """live_state_fragment must pass recent_players_overview (max 10
+    rows) and recent_players_total_count to the template so the
+    'N Recent' header can render correctly with N > 10."""
+    with session_scope() as db:
+        user = db.scalar(User.query_by_username("alice"))
+        server = Server(user_id=user.id, blueprint_id=None, name="srv", port=27100)
+        db.add(server)
+        db.flush()
+        sid = server.id
+        # 13 distinct recent (left_at IS NOT NULL) sessions
+        for i in range(13):
+            db.add(ServerPlayerSession(
+                server_id=sid,
+                steam_id_64=f"7656119800000{i:04d}",
+                name_at_join=f"P{i}",
+                joined_at=datetime.now(UTC) - timedelta(hours=i + 1),
+                left_at=datetime.now(UTC) - timedelta(minutes=i + 1),
+                min_ping=20, max_ping=30,
+            ))
+
+    resp = client.get(f"/servers/{sid}/live-state")
+    assert resp.status_code == 200
+    body = resp.get_data(as_text=True)
+    # Header shows the *full* count
+    assert "13 Recent" in body or 'data-recent-total="13"' in body
+    # Inline grid shows at most 10 chips
+    assert body.count('class="recent-chip"') <= 10
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+```bash
+cd l4d2web && pytest tests/test_status_and_server_logs.py::test_live_state_fragment_exposes_sliced_recents_and_total -v
+```
+Expected: FAIL (template assertion or attribute error — neither the slice nor the header exist yet)
+
+- [ ] **Step 3: Modify the route**
+
+Edit `l4d2web/l4d2web/routes/server_routes.py`. Replace lines 262-274 (the `.limit(20)` query tail and the `render_template` call) with:
+
+```python
+        ).order_by(func.max(ServerPlayerSession.left_at).desc()).all()
+
+        recent_total = len(recent_rows)
+        recent_overview = recent_rows[:10]
+
+    return render_template(
+        "_live_state.html",
+        server=server,
+        snapshot=latest,
+        snapshot_fresh=(latest is not None and latest.last_seen_at >= cutoff),
+        current_players=current_rows,
+        recent_players=recent_rows,
+        recent_players_overview=recent_overview,
+        recent_players_total_count=recent_total,
+        poll_seconds=max(1, int(current_app.config.get("LIVE_STATE_POLL_SECONDS", 5))),
+    )
+```
+
+Also drop the `.limit(20)` from the query (now line ~263); we want the full list to render inside the recent-players modal, and we still slice the inline render. If unbounded growth is a concern, replace with `.limit(50)` — but the existing per-user usage caps make 20-50 indistinguishable in practice.
+
+- [ ] **Step 4: Run test to verify it passes**
+
+```bash
+cd l4d2web && pytest tests/test_status_and_server_logs.py::test_live_state_fragment_exposes_sliced_recents_and_total -v
+```
+Expected: PASS (template still has to render the count; if it fails on the `"13 Recent"` assertion that's covered in Task 3 — for now, assert the route exposes the new context keys instead:)
+
+If the route-level change alone is what you want to validate first, replace the body assertions with a context probe via Flask's `with client.application.test_request_context(...)`. Simpler: skip the body assertions in this step and let Task 3 finalize them. **Mark this test `@pytest.mark.xfail(strict=True)` until Task 3 is complete, then remove the marker.**
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add l4d2web/l4d2web/routes/server_routes.py l4d2web/tests/test_status_and_server_logs.py
+git commit -m "feat(live-state): expose sliced recents + total count to template"
+```
+
+---
+
+### Task 3: Rewrite `_live_state.html` — new grids and `N Recent` header
+
+**Files:**
+- Modify: `l4d2web/l4d2web/templates/_live_state.html` (replace whole file)
+
+Removes the `<h2>Live state</h2>` heading (the parent state-cluster panel implies it), drops the `<h3>Current players</h3>` sub-header, and adds the new `N Recent` header trigger.
+
+- [ ] **Step 1: Write the failing assertion (extension of Task 2's test)**
+
+Edit the test you added in Task 2 to drop the `xfail` marker (if you added it) and ensure both body assertions are active:
+
+```python
+    assert "13 Recent" in body
+    # 10 chips inline (5 cols × 2 rows)
+    assert body.count('class="recent-chip"') == 10
+```
+
+Also add a sparse-case test in the same file:
+
+```python
+def test_live_state_fragment_recent_header_not_clickable_when_le_10(client, login_alice):
+    """N ≤ 10: header is plain text, no modal-open attribute."""
+    with session_scope() as db:
+        user = db.scalar(User.query_by_username("alice"))
+        server = Server(user_id=user.id, blueprint_id=None, name="srv", port=27101)
+        db.add(server)
+        db.flush()
+        sid = server.id
+        for i in range(4):
+            db.add(ServerPlayerSession(
+                server_id=sid,
+                steam_id_64=f"7656119800001{i:04d}",
+                name_at_join=f"P{i}",
+                joined_at=datetime.now(UTC) - timedelta(hours=i + 1),
+                left_at=datetime.now(UTC) - timedelta(minutes=i + 1),
+                min_ping=20, max_ping=30,
+            ))
+
+    resp = client.get(f"/servers/{sid}/live-state")
+    body = resp.get_data(as_text=True)
+    assert "4 Recent" in body
+    assert 'data-inline-modal-open="recent-players-modal"' not in body
+```
+
+- [ ] **Step 2: Run tests to verify they fail**
+
+```bash
+cd l4d2web && pytest tests/test_status_and_server_logs.py -k "live_state_fragment" -v
+```
+Expected: both new tests FAIL
+
+- [ ] **Step 3: Replace `_live_state.html`**
+
+Overwrite `l4d2web/l4d2web/templates/_live_state.html` with:
+
+```jinja
+{# Live-state partial — HTMX-polled into the state cluster. The parent
+   .state-cluster section provides the heading context, so there is no
+   <h2> here. Current players have no sub-header; they sit directly
+   under the summary line. Recent players' header is "N Recent" and
+   doubles as the modal trigger when N > 10. #}
+
+{% if not snapshot or not snapshot_fresh %}
+  <p class="muted">No data — server is not currently reporting.</p>
+{% else %}
+  <p class="server-live-summary">
+    {{ snapshot.players }}/{{ snapshot.max_players }}
+    {% if snapshot.hibernating %}· idle{% endif %}
+    · {{ snapshot.map }}
+    <small class="muted">polled {{ snapshot.last_seen_at | timeago }}</small>
+  </p>
+{% endif %}
+
+{% if current_players %}
+  <ul class="player-grid current">
+    {% for session, profile in current_players %}
+      <li class="player-card current-card">
+        <a class="player-link"
+           href="https://steamcommunity.com/profiles/{{ session.steam_id_64 }}"
+           target="_blank" rel="noopener noreferrer">
+          {% if profile and profile.avatar_url %}
+            <img class="avatar" src="{{ profile.avatar_url }}" alt="">
+          {% else %}
+            <span class="avatar placeholder" aria-hidden="true"></span>
+          {% endif %}
+          <span class="name" title="{{ (profile and profile.persona_name) or session.name_at_join }}">{{ (profile and profile.persona_name) or session.name_at_join }}</span>
+        </a>
+        <span class="meta">
+          {{ session.joined_at | timeago }} · {{ session.min_ping }}-{{ session.max_ping }}ms
+        </span>
+      </li>
+    {% endfor %}
+  </ul>
+{% endif %}
+
+{% if recent_players_overview %}
+  <h3 class="recent-header">
+    {% if recent_players_total_count > 10 %}
+      <button type="button" class="recent-header-trigger"
+              data-inline-modal-open="recent-players-modal">
+        {{ recent_players_total_count }} Recent
+      </button>
+    {% else %}
+      {{ recent_players_total_count }} Recent
+    {% endif %}
+  </h3>
+  <ul class="player-grid recent">
+    {% for row in recent_players_overview %}
+      <li class="player-card recent-chip">
+        <a class="player-link"
+           href="https://steamcommunity.com/profiles/{{ row.steam_id_64 }}"
+           target="_blank" rel="noopener noreferrer">
+          {% if row.avatar_url %}
+            <img class="avatar" src="{{ row.avatar_url }}" alt="">
+          {% else %}
+            <span class="avatar placeholder" aria-hidden="true"></span>
+          {% endif %}
+          <span class="name" title="{{ row.persona_name or row.name_at_join }}">{{ row.persona_name or row.name_at_join }}</span>
+        </a>
+        <span class="meta">· {{ row.last_seen | timeago }}</span>
+      </li>
+    {% endfor %}
+  </ul>
+{% endif %}
+```
+
+The `timeago` filter already returns `"4m ago"` style strings; the meta line keeps just the relative time + ping unit. The "ago" suffix is consciously kept — dropping it would require a new filter; the visual compactness from removing the `joined`/`last seen` prefixes is sufficient.
+
+- [ ] **Step 4: Run tests to verify they pass**
+
+```bash
+cd l4d2web && pytest tests/test_status_and_server_logs.py -k "live_state_fragment" -v
+```
+Expected: PASS
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add l4d2web/l4d2web/templates/_live_state.html l4d2web/tests/test_status_and_server_logs.py
+git commit -m "feat(live-state): compact 4-col current + 5-col recent chips + N Recent trigger"
+```
+
+---
+
+### Task 4: `_server_actions.html` — remove inline job-log pre, convert link to modal trigger
+
+**Files:**
+- Modify: `l4d2web/l4d2web/templates/_server_actions.html` (lines 26-35)
+- Test: `l4d2web/tests/test_pages.py` or `test_servers.py` (find the existing test that renders server detail with a running job; otherwise add one)
+
+- [ ] **Step 1: Write the failing test**
+
+Append to `l4d2web/tests/test_servers.py`:
+
+```python
+def test_server_detail_no_inline_job_log_pre(client, login_alice, db_session):
+    """When a job is running, _server_actions.html must not render the
+    streaming <pre class="log-stream job-log"> — the user opens
+    #job-log-modal instead."""
+    # ... build a Server + running Job for alice ...
+    # (use existing helpers in this file; pattern: build_server_with_job(state="starting"))
+    server = build_server_with_job(db_session, owner="alice", job_state="running")
+    resp = client.get(f"/servers/{server.id}")
+    body = resp.get_data(as_text=True)
+    assert 'class="log-stream job-log"' not in body
+    # The latest_job_phrase is now a modal-trigger button, not an anchor:
+    assert 'data-inline-modal-open="job-log-modal"' in body
+```
+
+(If `build_server_with_job` doesn't exist, build inline. Use the patterns already present near `test_server_detail_renders_*` tests in `test_servers.py`.)
+
+- [ ] **Step 2: Run test to verify it fails**
+
+```bash
+cd l4d2web && pytest tests/test_servers.py::test_server_detail_no_inline_job_log_pre -v
+```
+Expected: FAIL (log-stream pre still present)
+
+- [ ] **Step 3: Modify `_server_actions.html`**
+
+Replace lines 25-35 of `l4d2web/l4d2web/templates/_server_actions.html`:
+
+```jinja
+  {% if latest_job %}
+  <p class="last-job">
+    <button type="button" class="link-button"
+            data-inline-modal-open="job-log-modal">{{ latest_job_phrase }}</button>
+    {% if latest_job_is_running %}since{% endif %}
+    {{ latest_job_at | timeago }}
+    (<a href="/servers/{{ server.id }}/jobs">show all</a>)
+  </p>
+  {% endif %}
+</div>
+```
+
+That replaces both the `<a href="/jobs/{{ latest_job.id }}">` (which now opens the modal) AND removes the trailing `{% if latest_job_is_running %}<pre class="log-stream job-log" ...></pre>{% endif %}` block.
+
+- [ ] **Step 4: Run test to verify it passes**
+
+```bash
+cd l4d2web && pytest tests/test_servers.py::test_server_detail_no_inline_job_log_pre -v
+```
+Expected: PASS
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add l4d2web/l4d2web/templates/_server_actions.html l4d2web/tests/test_servers.py
+git commit -m "feat(server-actions): remove inline job-log; link → job-log-modal trigger"
+```
+
+---
+
+### Task 5: Add CSS — state cluster, inspection strip, player grids, tabbar
+
+**Files:**
+- Modify: `l4d2web/l4d2web/static/css/components.css` (append; replace existing `.live-state .player-*` block)
+
+CSS-only. No test — visual verification via dev server in the final integration task.
+
+- [ ] **Step 1: Replace the existing `.live-state .player-*` block**
+
+Find lines 875-933 in `components.css` (the `/* Live-state panel — current + recent players ... */` block). Replace the entire block (875-933) with:
+
+```css
+/* ============================================================
+   State cluster (top of server detail)
+   ============================================================ */
+
+.state-cluster {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-m);
+}
+
+.state-cluster > * + * {
+  border-top: 1px dashed var(--color-border-muted, rgba(255, 255, 255, 0.12));
+  padding-top: var(--space-m);
+}
+
+/* Config grid — auto-fit so it scales with field count */
+.config-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: var(--space-s) var(--space-m);
+}
+.config-field-label {
+  font-size: 0.75em;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-muted);
+  margin-bottom: 0.15em;
+}
+.config-field-value { font-size: 0.95em; }
+
+/* ============================================================
+   Live-state — compact player grids
+   ============================================================ */
+
+.player-grid {
+  list-style: none;
+  padding: 0;
+  margin: var(--space-s) 0 0;
+  display: grid;
+  gap: var(--space-xs);
+}
+.player-grid.current { grid-template-columns: repeat(4, 1fr); }
+.player-grid.recent  { grid-template-columns: repeat(5, 1fr); }
+
+.player-card {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--space-xs);
+  align-items: center;
+  padding: var(--space-xs);
+}
+.player-link {
+  display: contents;
+  color: inherit;
+  text-decoration: none;
+}
+.player-link:hover .name { text-decoration: underline; }
+
+.player-card .avatar {
+  border-radius: var(--radius-s);
+  object-fit: cover;
+}
+.current-card .avatar { width: 22px; height: 22px; grid-row: 1 / span 2; }
+.recent-chip .avatar  { width: 16px; height: 16px; }
+
+.player-card .name {
+  grid-column: 2;
+  font-size: 0.9em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.current-card .name { font-weight: 600; }
+.recent-chip .name { font-weight: 500; }
+
+.player-card .meta {
+  grid-column: 2;
+  color: var(--color-muted);
+  font-size: 0.75em;
+}
+.recent-chip .meta {
+  grid-column: auto;
+  font-size: 0.8em;
+}
+
+.recent-header {
+  margin: var(--space-m) 0 var(--space-xs);
+  font-size: 0.75em;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-muted);
+  font-weight: 600;
+}
+.recent-header-trigger {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  color: var(--color-link, #7ab0ff);
+  text-transform: inherit;
+  letter-spacing: inherit;
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.recent-header-trigger:hover { text-decoration-style: solid; }
+
+.server-live-summary { font-size: 1.05em; }
+
+/* Narrow viewports — collapse fixed grids so chips don't crush */
+@media (max-width: 600px) {
+  .player-grid.current,
+  .player-grid.recent {
+    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  }
+}
+
+/* ============================================================
+   Inspection strip — tabbed Log / Console / Files
+   ============================================================ */
+
+.inspection-strip {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+}
+.tab-bar {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border-muted, rgba(255, 255, 255, 0.12));
+  padding: 0 var(--space-s);
+}
+.tab-bar [role="tab"] {
+  background: transparent;
+  border: 0;
+  padding: var(--space-xs) var(--space-m);
+  color: var(--color-muted);
+  cursor: pointer;
+  font: inherit;
+  border-bottom: 2px solid transparent;
+}
+.tab-bar [role="tab"][aria-selected="true"] {
+  color: var(--color-text);
+  border-bottom-color: var(--color-link, #7ab0ff);
+}
+.tab-bar .strip-expand {
+  margin-left: auto;
+  background: transparent;
+  border: 0;
+  padding: var(--space-xs) var(--space-s);
+  color: var(--color-muted);
+  cursor: pointer;
+}
+.tab-bar .strip-expand:hover { color: var(--color-text); }
+
+.tab-pane {
+  padding: var(--space-s);
+  max-height: 12rem;
+  overflow: auto;
+}
+.tab-pane[hidden] { display: none; }
+.tab-pane .log-stream { max-height: none; }  /* let pane handle scrolling */
+```
+
+If `--color-border-muted`, `--color-link`, `--space-xs`, or `--space-m` are not defined in `tokens.css`, add them there as one-line additions before this commit. Quickly verify with:
+
+```bash
+grep -E "--color-border-muted|--color-link|--space-xs|--space-m" \
+  l4d2web/l4d2web/static/css/tokens.css
+```
+
+Add any missing token with a sensible default (`--space-xs: 0.25rem;`, `--color-link: #7ab0ff;`, `--color-border-muted: rgba(255,255,255,0.12);`).
+
+- [ ] **Step 2: Smoke-load the dev server**
+
+```bash
+scripts/dev-server.py
+```
+
+Visit `http://127.0.0.1:5000`, log in as the demo user, click a server. The page will look broken (state cluster + strip aren't wired yet) but **no CSS errors should appear in the browser console.**
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add l4d2web/l4d2web/static/css/components.css l4d2web/l4d2web/static/css/tokens.css
+git commit -m "feat(css): state-cluster, inspection-strip, compact player grids"
+```
+
+---
+
+### Task 6: New `tabs.js` — tab activation + expand-to-active-modal
+
+**Files:**
+- Create: `l4d2web/l4d2web/static/js/tabs.js`
+
+Pure DOM; no test framework. We exercise it via Task 9 (Playwright e2e).
+
+- [ ] **Step 1: Create `tabs.js`**
+
+```js
+// l4d2web/l4d2web/static/js/tabs.js
+// Tabbed strips: any element with [data-tab-strip] activates the first
+// [role="tab"] in DOM order (or the one carrying [aria-selected="true"]
+// if present) on load, and switches panes on click. The strip's
+// [data-active-tab] attribute mirrors the active tab name and is read
+// by the expand-to-modal handler.
+
+(function () {
+  function activateTab(strip, name) {
+    strip.querySelectorAll('[role="tab"]').forEach((t) => {
+      const on = t.dataset.tab === name;
+      t.setAttribute("aria-selected", on ? "true" : "false");
+      t.tabIndex = on ? 0 : -1;
+    });
+    strip.querySelectorAll('[role="tabpanel"]').forEach((p) => {
+      p.hidden = p.dataset.tab !== name;
+    });
+    strip.dataset.activeTab = name;
+  }
+
+  function activeTabName(strip) {
+    const selected = strip.querySelector('[role="tab"][aria-selected="true"]');
+    if (selected) return selected.dataset.tab;
+    const first = strip.querySelector('[role="tab"]');
+    return first ? first.dataset.tab : null;
+  }
+
+  function initStrips(root) {
+    (root || document).querySelectorAll("[data-tab-strip]").forEach((strip) => {
+      // Initialise active tab on load.
+      const name = activeTabName(strip);
+      if (name) activateTab(strip, name);
+
+      // Bind tab clicks.
+      strip.addEventListener("click", (ev) => {
+        const tab = ev.target.closest('[role="tab"]');
+        if (tab && strip.contains(tab)) {
+          activateTab(strip, tab.dataset.tab);
+        }
+      });
+
+      // Bind expand button: opens <dialog id="<tabname>-modal">.
+      const expand = strip.querySelector(".strip-expand");
+      if (expand) {
+        expand.addEventListener("click", () => {
+          const name = strip.dataset.activeTab;
+          if (!name) return;
+          const dlg = document.getElementById(`${name}-modal`);
+          if (dlg && typeof dlg.showModal === "function" && !dlg.open) {
+            dlg.showModal();
+          }
+        });
+      }
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => initStrips());
+  } else {
+    initStrips();
+  }
+})();
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add l4d2web/l4d2web/static/js/tabs.js
+git commit -m "feat(js): tabs.js — tab activation + expand-to-active-modal"
+```
+
+---
+
+### Task 7: Include `tabs.js` in `base.html`
+
+**Files:**
+- Modify: `l4d2web/l4d2web/templates/base.html`
+
+- [ ] **Step 1: Find the existing `<script>` includes**
+
+```bash
+grep -n "static/js" l4d2web/l4d2web/templates/base.html
+```
+
+- [ ] **Step 2: Add `tabs.js` next to the other static includes**
+
+Add `<script src="{{ url_for('static', filename='js/tabs.js') }}"></script>` adjacent to the existing `modals.js` include — same `<script>` form (no `defer`, no `type=module` unless that's what siblings use; match the surrounding file).
+
+- [ ] **Step 3: Smoke-verify the script loads**
+
+```bash
+scripts/dev-server.py
+```
+
+Open browser devtools → Network → reload page → check `tabs.js` returns 200.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add l4d2web/l4d2web/templates/base.html
+git commit -m "feat(base): include tabs.js"
+```
+
+---
+
+### Task 8: Rewrite `server_detail.html` body
+
+**Files:**
+- Rewrite: `l4d2web/l4d2web/templates/server_detail.html`
+
+This is the integration task — wires everything together.
+
+- [ ] **Step 1: Write the failing integration test**
+
+Append to `l4d2web/tests/test_servers.py`:
+
+```python
+def test_server_detail_renders_state_cluster_and_inspection_strip(client, login_alice, db_session):
+    """The redesigned page must contain the state-cluster section, the
+    tab-strip with all three tabs, and the four new modals."""
+    server = build_server(db_session, owner="alice")
+    resp = client.get(f"/servers/{server.id}")
+    body = resp.get_data(as_text=True)
+    assert 'class="panel state-cluster"' in body
+    assert 'data-tab-strip' in body
+    for tab in ("log", "console", "files"):
+        assert f'data-tab="{tab}"' in body
+    for modal in ("log-modal", "console-modal", "files-modal",
+                  "recent-players-modal", "job-log-modal"):
+        assert f'id="{modal}"' in body
+```
+
+- [ ] **Step 2: Run the test to verify it fails**
+
+```bash
+cd l4d2web && pytest tests/test_servers.py::test_server_detail_renders_state_cluster_and_inspection_strip -v
+```
+Expected: FAIL
+
+- [ ] **Step 3: Replace `server_detail.html`**
+
+Replace `l4d2web/l4d2web/templates/server_detail.html` with:
+
+```jinja
+{% extends "base.html" %}
+{% import "_macros.html" as macros %}
+
+{% block title %}Server {{ server.name }} | left4me{% endblock %}
+
+{% block content %}
+<section class="panel state-cluster">
+  <div class="page-heading">
+    <h1>Server: {{ server.name }}</h1>
+  </div>
+
+  {# Lifecycle subblock #}
+  {% include "_server_actions.html" %}
+
+  {# Live state — HTMX-loaded #}
+  <section class="live-state"
+           hx-get="/servers/{{ server.id }}/live-state"
+           hx-trigger="load, every 5s"
+           hx-swap="innerHTML"></section>
+
+  {# Config grid #}
+  <div class="config-grid">
+    {{ macros.config_field("Port",
+        '<a href="steam://run/550//+connect%20' ~ connect_host ~ ':' ~ server.port ~ '">' ~ server.port ~ '</a>' | safe) }}
+    {{ macros.config_field("Blueprint",
+        ('<a href="/blueprints/' ~ blueprint.id ~ '">' ~ blueprint.name ~ '</a>') | safe if blueprint else "—") }}
+    {{ macros.config_field("RCON",
+        ('<span class="password-mask" data-password-field="' ~ server.id ~ '">••••••••••••</span>'
+         '<span class="password-value" data-password-field="' ~ server.id ~ '" hidden>' ~ server.rcon_password ~ '</span> '
+         '<button class="link-button" data-password-toggle="' ~ server.id ~ '" aria-label="Show RCON password">show</button>') | safe) }}
+    {{ macros.config_field("Hostname",
+        ('<form method="post" action="/servers/' ~ server.id ~ '" class="inline-save">'
+         '<input type="hidden" name="csrf_token" value="' ~ session.get('csrf_token', '') ~ '">'
+         '<input name="hostname" value="' ~ server.hostname ~ '" placeholder="' ~ g.user.username ~ ' ' ~ server.name ~ '" maxlength="128">'
+         '<button type="submit">Save</button>'
+         '</form>') | safe, editable=True) }}
+  </div>
+</section>
+
+{# Inspection strip — Log / Console / Files #}
+<section class="panel inspection-strip" data-tab-strip data-active-tab="log">
+  <div class="tab-bar">
+    <button type="button" role="tab" data-tab="log" aria-selected="true">Log</button>
+    <button type="button" role="tab" data-tab="console" aria-selected="false">Console</button>
+    <button type="button" role="tab" data-tab="files" aria-selected="false">Files</button>
+    <button type="button" class="strip-expand" aria-label="Expand active tab">⛶</button>
+  </div>
+
+  <div role="tabpanel" data-tab="log" class="tab-pane">
+    <pre class="log-stream" data-sse-url="/servers/{{ server.id }}/logs/stream"></pre>
+  </div>
+
+  <div role="tabpanel" data-tab="console" class="tab-pane" hidden>
+    <div id="console-transcript-inline-{{ server.id }}" class="console-transcript" data-autoscroll>
+      {% for h in console_history %}
+        {% with command=h.command, reply=h.reply, is_error=h.is_error %}
+          {% include "_console_line.html" %}
+        {% endwith %}
+      {% endfor %}
+    </div>
+    <form hx-post="/servers/{{ server.id }}/console"
+          hx-target="#console-transcript-inline-{{ server.id }}"
+          hx-swap="beforeend"
+          hx-on::after-request="this.command.value=''; this.command.focus()"
+          class="console-input-form"
+          data-console-form data-server-id="{{ server.id }}">
+      <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
+      <span class="console-prompt-glyph">&gt;</span>
+      <input name="command" autocomplete="off" spellcheck="false" maxlength="1000"
+             placeholder="status, changelevel c1m1_hotel, sm_kick …">
+      <button type="submit">Send</button>
+    </form>
+  </div>
+
+  <div role="tabpanel" data-tab="files" class="tab-pane" hidden>
+    {% if not file_tree_root_entries %}
+      <p class="muted">No files yet — start the server to mount its runtime.</p>
+    {% else %}
+      {% set entries = file_tree_root_entries %}
+      {% set truncated = file_tree_truncated %}
+      {% set truncated_count = file_tree_truncated_count %}
+      {% set files_base_url = "/servers/" ~ server.id %}
+      {% include "_overlay_file_tree.html" %}
+    {% endif %}
+  </div>
+</section>
+
+<div class="page-footer-actions">
+  <button type="button" class="danger-outline" data-inline-modal-open="delete-server-modal">Delete server</button>
+  <a href="#" class="link-button" data-inline-modal-open="rename-server-modal">Rename</a>
+</div>
+
+{# ===== Modals ===== #}
+
+<dialog id="log-modal" class="modal" aria-labelledby="log-modal-title">
+  <div class="modal-header">
+    <h2 id="log-modal-title">Server log</h2>
+    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
+  </div>
+  <div class="modal-body">
+    <pre class="log-stream tall" data-sse-url="/servers/{{ server.id }}/logs/stream"></pre>
+  </div>
+</dialog>
+
+<dialog id="console-modal" class="modal" aria-labelledby="console-modal-title">
+  <div class="modal-header">
+    <h2 id="console-modal-title">Console</h2>
+    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
+  </div>
+  <div class="modal-body">
+    <div id="console-transcript-modal-{{ server.id }}" class="console-transcript tall" data-autoscroll>
+      {% for h in console_history %}
+        {% with command=h.command, reply=h.reply, is_error=h.is_error %}
+          {% include "_console_line.html" %}
+        {% endwith %}
+      {% endfor %}
+    </div>
+    <form hx-post="/servers/{{ server.id }}/console"
+          hx-target="#console-transcript-modal-{{ server.id }}"
+          hx-swap="beforeend"
+          hx-on::after-request="this.command.value=''; this.command.focus()"
+          class="console-input-form"
+          data-console-form data-server-id="{{ server.id }}">
+      <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
+      <span class="console-prompt-glyph">&gt;</span>
+      <input name="command" autocomplete="off" spellcheck="false" maxlength="1000">
+      <button type="submit">Send</button>
+    </form>
+  </div>
+</dialog>
+
+<dialog id="files-modal" class="modal" aria-labelledby="files-modal-title">
+  <div class="modal-header">
+    <h2 id="files-modal-title">Files</h2>
+    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
+  </div>
+  <div class="modal-body">
+    {% if file_tree_root_entries %}
+      {% set entries = file_tree_root_entries %}
+      {% set truncated = file_tree_truncated %}
+      {% set truncated_count = file_tree_truncated_count %}
+      {% set files_base_url = "/servers/" ~ server.id %}
+      {% include "_overlay_file_tree.html" %}
+    {% else %}
+      <p class="muted">No files yet — start the server to mount its runtime.</p>
+    {% endif %}
+  </div>
+</dialog>
+
+<dialog id="recent-players-modal" class="modal" aria-labelledby="recent-players-modal-title">
+  <div class="modal-header">
+    <h2 id="recent-players-modal-title">Recent players</h2>
+    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
+  </div>
+  <div class="modal-body">
+    {# Re-render the full list via HTMX so the modal stays in sync with
+       polling without us duplicating the row markup here. #}
+    <div hx-get="/servers/{{ server.id }}/live-state?view=recent-modal"
+         hx-trigger="revealed"
+         hx-swap="innerHTML"></div>
+  </div>
+</dialog>
+
+<dialog id="job-log-modal" class="modal" aria-labelledby="job-log-modal-title">
+  <div class="modal-header">
+    <h2 id="job-log-modal-title">Job log</h2>
+    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
+  </div>
+  <div class="modal-body">
+    {% if latest_job %}
+      <pre class="log-stream tall" data-sse-url="/jobs/{{ latest_job.id }}/stream"></pre>
+      <p><a href="/jobs/{{ latest_job.id }}">open full job →</a></p>
+    {% else %}
+      <p class="muted">No job has run for this server yet.</p>
+    {% endif %}
+  </div>
+</dialog>
+
+<dialog id="rename-server-modal" class="modal" aria-labelledby="rename-server-title">
+  <div class="modal-header">
+    <h2 id="rename-server-title">Rename server</h2>
+    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
+  </div>
+  <div class="modal-body">
+    <form method="post" action="/servers/{{ server.id }}" class="inline-save">
+      <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
+      <input name="name" value="{{ server.name }}" required autofocus>
+      <button type="submit">Save</button>
+    </form>
+  </div>
+</dialog>
+
+<dialog id="reset-server-modal" class="modal" aria-labelledby="reset-server-title">
+  <div class="modal-header">
+    <h2 id="reset-server-title">Reset server "{{ server.name }}"?</h2>
+    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
+  </div>
+  <div class="modal-body">
+    <p>This stops the server and wipes its runtime state. The blueprint is preserved.</p>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="button-secondary" data-inline-modal-close>Cancel</button>
+    <form method="post" action="/servers/{{ server.id }}/reset" class="inline-form">
+      <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
+      <button class="danger" type="submit">Reset</button>
+    </form>
+  </div>
+</dialog>
+
+<dialog id="delete-server-modal" class="modal" aria-labelledby="delete-server-title">
+  <div class="modal-header">
+    <h2 id="delete-server-title">Delete server "{{ server.name }}"?</h2>
+    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
+  </div>
+  <div class="modal-body">
+    <p>Stops the server and tears down its runtime. This cannot be undone.</p>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="button-secondary" data-inline-modal-close>Cancel</button>
+    <form method="post" action="/servers/{{ server.id }}/delete" class="inline-form">
+      <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
+      <button class="danger" type="submit">Delete</button>
+    </form>
+  </div>
+</dialog>
+{% endblock %}
+```
+
+Note the `recent-players-modal` uses `?view=recent-modal` to ask the live-state route for the full list. If you don't want to add that branch right now, simplify the modal to render the unsliced `recent_players` list directly via a small inline include — but it would require passing `recent_players` (the full list, separate from the overview) into the page template, which currently lives only in the live-state fragment context. **Decision: keep the HTMX `revealed` approach for v1; it's cleaner and keeps page-template context lean.** Add the `view` branch in Task 8b.
+
+- [ ] **Step 4: Run all relevant tests to verify integration**
+
+```bash
+cd l4d2web && pytest tests/test_servers.py tests/test_status_and_server_logs.py -v
+```
+Expected: PASS (including the integration test from Step 1)
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add l4d2web/l4d2web/templates/server_detail.html
+git commit -m "feat(server-detail): state cluster + inspection strip + five modals"
+```
+
+---
+
+### Task 8b: Live-state route — `?view=recent-modal` branch
+
+**Files:**
+- Modify: `l4d2web/l4d2web/routes/server_routes.py` (`live_state_fragment`)
+- Create: `l4d2web/l4d2web/templates/_recent_players_modal_body.html`
+
+The recent-players modal asks for a different render of the same data. One route, two views.
+
+- [ ] **Step 1: Create the partial**
+
+Create `l4d2web/l4d2web/templates/_recent_players_modal_body.html`:
+
+```jinja
+<ul class="player-grid recent recent-modal-list">
+  {% for row in recent_players %}
+    <li class="player-card recent-chip">
+      <a class="player-link"
+         href="https://steamcommunity.com/profiles/{{ row.steam_id_64 }}"
+         target="_blank" rel="noopener noreferrer">
+        {% if row.avatar_url %}
+          <img class="avatar" src="{{ row.avatar_url }}" alt="">
+        {% else %}
+          <span class="avatar placeholder" aria-hidden="true"></span>
+        {% endif %}
+        <span class="name" title="{{ row.persona_name or row.name_at_join }}">{{ row.persona_name or row.name_at_join }}</span>
+      </a>
+      <span class="meta">· {{ row.last_seen | timeago }}</span>
+    </li>
+  {% endfor %}
+</ul>
+```
+
+- [ ] **Step 2: Branch in the route**
+
+In `live_state_fragment` (last lines), wrap the `render_template` call:
+
+```python
+    if request.args.get("view") == "recent-modal":
+        return render_template(
+            "_recent_players_modal_body.html",
+            recent_players=recent_rows,
+        )
+
+    return render_template(
+        "_live_state.html",
+        ...
+    )
+```
+
+- [ ] **Step 3: Add `.recent-modal-list` CSS**
+
+Append to `components.css`:
+
+```css
+.recent-modal-list {
+  grid-template-columns: 1fr !important;
+  max-height: 60vh;
+  overflow: auto;
+}
+```
+
+- [ ] **Step 4: Smoke-verify**
+
+Run `scripts/dev-server.py`. Visit a server detail page, click the `N Recent` header (only appears if seeded data has >10 recents). Modal opens, full list scrolls. Close → SSE/HTMX connection ends.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add l4d2web/l4d2web/routes/server_routes.py \
+        l4d2web/l4d2web/templates/_recent_players_modal_body.html \
+        l4d2web/l4d2web/static/css/components.css
+git commit -m "feat(live-state): ?view=recent-modal branch for the recent-players modal body"
+```
+
+---
+
+### Task 9: Playwright e2e — tab switching + expand + job-log modal
+
+**Files:**
+- Modify: `l4d2web/tests/e2e/test_server_detail.py` (append tests)
+
+- [ ] **Step 1: Write the failing tests**
+
+Append to `l4d2web/tests/e2e/test_server_detail.py`:
+
+```python
+def test_tabs_switch_between_log_console_files(page: Page, server_with_files) -> None:
+    base = server_with_files["base_url"]
+    sid = server_with_files["server_id"]
+    login(page, base)
+    page.goto(f"{base}/servers/{sid}")
+
+    strip = page.locator("[data-tab-strip]")
+    expect(strip).to_be_visible()
+    # Default tab is log
+    expect(strip).to_have_attribute("data-active-tab", "log")
+
+    # Click Console
+    strip.locator('[role="tab"][data-tab="console"]').click()
+    expect(strip).to_have_attribute("data-active-tab", "console")
+    expect(strip.locator('[role="tabpanel"][data-tab="console"]')).to_be_visible()
+    expect(strip.locator('[role="tabpanel"][data-tab="log"]')).to_be_hidden()
+
+    # Click Files
+    strip.locator('[role="tab"][data-tab="files"]').click()
+    expect(strip).to_have_attribute("data-active-tab", "files")
+    expect(strip.locator('[role="tabpanel"][data-tab="files"]')).to_be_visible()
+
+
+def test_expand_opens_matching_modal(page: Page, server_with_files) -> None:
+    base = server_with_files["base_url"]
+    sid = server_with_files["server_id"]
+    login(page, base)
+    page.goto(f"{base}/servers/{sid}")
+
+    strip = page.locator("[data-tab-strip]")
+    strip.locator('[role="tab"][data-tab="files"]').click()
+    strip.locator(".strip-expand").click()
+    # files-modal dialog now open
+    dialog = page.locator("dialog#files-modal")
+    expect(dialog).to_have_attribute("open", "")
+```
+
+- [ ] **Step 2: Run tests to verify they fail (initially) or pass (after wiring is done)**
+
+```bash
+cd l4d2web && pytest tests/e2e/test_server_detail.py -v -m e2e
+```
+Expected on first run after all prior tasks land: PASS. If they fail, the tab-strip or expand wiring needs a debug pass against the actual DOM.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add l4d2web/tests/e2e/test_server_detail.py
+git commit -m "test(e2e): tab switching + expand-to-modal on server detail"
+```
+
+---
+
+## Final verification (manual)
+
+After all tasks are merged, run the dev server (see `reference_left4me_dev_server.md`):
+
+```bash
+scripts/dev-server.py
+```
+
+In a browser:
+
+1. State cluster visible above the fold on 1080p — badge, start/stop/reset, players/map, config grid all present without scrolling.
+2. Inspection strip defaults to **Log** tab; lines stream live.
+3. Click **Console** tab → transcript and input visible; type `status`, submit → reply appended.
+4. Click **Files** tab → file tree visible and navigable.
+5. Click ⛶ on each tab → matching modal opens with the larger view.
+6. In `#console-modal`, send a command; the modal transcript updates. Close → inline console transcript still has its prior state (independent transcripts is acceptable for v1).
+7. Player grids: ≤ 8 current in 4-col grid (no header); ≤ 10 recent chips in 5-col grid under `N Recent` header. With >10 recents, header is clickable and opens `#recent-players-modal`.
+8. Start a server. The lifecycle subblock shows `starting since 2s ago` but **no inline streaming log** — the page does not shift as the job progresses. Click the job phrase → `#job-log-modal` opens and streams. Close → SSE disconnects.
+9. Delete/Rename still trigger their respective modals.
+
+---
+
+## Spec coverage check
+
+- ✅ State cluster (lifecycle / live state / config) — Tasks 5, 8
+- ✅ Config grid + `config_field` macro — Tasks 1, 5, 8
+- ✅ Inspection strip with tabs + expand — Tasks 5, 6, 7, 8
+- ✅ `#log-modal`, `#console-modal`, `#files-modal` — Task 8
+- ✅ Live-state route slice + `N Recent` header — Tasks 2, 3
+- ✅ `#recent-players-modal` — Tasks 8, 8b
+- ✅ `#job-log-modal` + removal of inline job-log pre — Tasks 4, 8
+- ✅ Player chip ellipsis + narrow-viewport breakpoint — Task 5
+- ✅ E2E coverage — Task 9