feat: the first pages, and what a browser walk found behind them

Phase 4. `/rust` is the server list and the module's landing page (D12);
`/rust/servers/:id` is one server with four tabs — feed, leaderboard, who is
on, wipes (D13). Everything selectable lives in the URL, so any view of the
page is a link. The feed and the presence list poll every twenty seconds while
the tab is visible and not at all when it is not (D14); the leaderboard and the
wipe list load once. `site.footer.status` is filled with a live server and
player count (D15).

Nothing on these pages calls a game server. Every field comes from this
module's own tables, which is what the phase criterion is about: the site
renders the last thing each server said while every server is off.

Walking that criterion in a browser against a live rig found four defects, two
of them already shipped in phase 3:

  * An unreachable refresh called `putState` — the whole-row write — with two
    fields, so a host that rebooted lost its hostname, map, size, seed and wipe
    id. The list then read "Offline" with nothing beside it, which is not "here
    is what we know" but "we have never heard of it". `markUnreachable` now
    moves three columns and mentions no others.
  * "Last reported" read `updated_at`, which a FAILED poll writes too — so an
    offline server claimed it had reported just now, every thirty seconds, for
    as long as it stayed down. `last_seen_at` is the new column, moved only by a
    frame that arrived.
  * Feed rows showed a bare time of day, so three events from six weeks ago all
    read as this afternoon once the feed was filtered to a past wipe.
  * `/rust/servers/typo` rendered core's ErrorState under its own heading and
    read "No such server / Something went wrong", sending a reader who mistyped
    a URL looking for an outage.

Also: a detail route (`GET …/servers/:id`), because it is the only route under
that path that can say a server does not exist — the other four answer an empty
list for an id nobody configured, and each of those is a good answer to its own
question.

`useAsync` cannot poll: it blanks its data on every dependency change, so a
twenty-second refresh built on it would clear the killfeed and re-fill it four
times a minute. `hooks/usePolled.js` is the module's own, invisible when it
succeeds and keeping the rows when it fails.

The client test fake was *nearly* core — it prefixed routes without stripping
the trailing separator, so the first module to register an index route failed
the nav check for a link that works in a browser. It now copies core's line
character for character.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016wDDVXWMDz82WqE1i969r4

client/src/components/Online.jsx

@@ -0,0 +1,94 @@
+// ── Who is on the server right now ────────────────────────────────────────
+//
+// Read from the presence BOARD, not counted from connect and disconnect events:
+// the bridge re-sends the whole board on every connect and every sixty seconds,
+// so this is right even after the website has missed something (PROTOCOL.md
+// §8.3). Counting transitions instead would drift, and drift in the direction
+// people notice — players who never left.
+//
+// It polls with the feed, because "who is on" is the one thing on this page that
+// is a live question.
+
+import { EmptyState, ErrorState, Loading } from '../core.js'
+import { duration, shortId } from '../lib/format.js'
+import usePolled from '../hooks/usePolled.js'
+import api from '../api.js'
+
+export default function Online({ serverId, online }) {
+  const { data, error, loading } = usePolled(() => api.servers.online(serverId), {
+    key: serverId,
+    intervalMs: 20_000,
+  })
+
+  const players = data ? data.players : []
+
+  if (loading) return <Loading />
+  if (error && !data) return <ErrorState error={error} />
+
+  if (players.length === 0) {
+    return (
+      <EmptyState
+        title={online ? 'Nobody is on' : 'The server is offline'}
+        message={
+          online
+            ? 'The server is up and the island is empty. Somebody has to be first.'
+            : 'Presence is the one thing on this page that cannot be answered from the record — it is who is connected now, and nothing is.'
+        }
+      />
+    )
+  }
+
+  return (
+    <>
+      {/* A board is the last one that ARRIVED, and an unreachable sidecar does not
+          clear it — deliberately, because the rows are still the best answer
+          anybody has. But presented bare they read as "these people are on right
+          now", which is the one thing an offline server cannot be saying. The
+          page walk found this with a fixture server whose header said Offline
+          above three apparently-connected players. */}
+      {!online && (
+        <p className="sans" style={{ color: 'var(--dim)', fontSize: '0.8rem', marginTop: 0 }}>
+          This server is offline. Below is the last board it sent, not who is on it now.
+        </p>
+      )}
+      <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+      {players.map((player) => (
+        <li
+          key={player.steamId}
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+            gap: 12,
+            padding: '8px 0',
+            borderBottom: '1px solid var(--line-soft, var(--line))',
+          }}
+        >
+          <span>
+            <strong style={{ color: 'var(--ink)' }}>{player.name || shortId(player.steamId)}</strong>
+            {/* Sleeping is not idle and not offline — a sleeping player's body is
+                in the world and can be killed, which is why the board carries the
+                flag at all. */}
+            {player.sleeping && (
+              <span className="sans" style={{ color: 'var(--dim)', fontSize: '0.76rem' }}> · sleeping</span>
+            )}
+          </span>
+          {/* `connectedAt` is absent for a player who was already on when the
+              plugin loaded — an unknown session length, which is not a session of
+              no length. Saying nothing is the honest render of that. */}
+          <span className="sans" style={{ color: 'var(--dim)', fontSize: '0.78rem', whiteSpace: 'nowrap' }}>
+            {player.connectedAt ? `on for ${sessionSoFar(player.connectedAt)}` : ''}
+          </span>
+          </li>
+        ))}
+      </ul>
+    </>
+  )
+}
+
+/** How long a player has been on, from the DATETIME the board reported. */
+function sessionSoFar(connectedAt) {
+  const since = Date.parse(connectedAt)
+  if (Number.isNaN(since)) return ''
+  return duration((Date.now() - since) / 1000)
+}