Add server chat tab and show all four players

src/lib/game-chat.ts

@@ -0,0 +1,23 @@
+export interface ChatMessage {
+    time: string;
+    guid: string;
+    slot: number;
+    player: string;
+    message: string;
+}
+
+function plainText(value: string): string {
+    return value.replace(/\^[0-9]/g, '').replace(/[\x00-\x1f\x7f]/g, '').trim();
+}
+
+/** Preserve log order: elapsed timestamps can reset between matches. */
+export function parseGameChat(lines: readonly string[]): ChatMessage[] {
+    return lines.flatMap(line => {
+        const match = /^\s*(\d+:[0-5]\d)\s+say;([^;]+);(\d+);([^;]*);(.*)$/.exec(line);
+        if (!match) return [];
+        const message = plainText(match[5]);
+        if (!message) return [];
+        return [{ time: match[1], guid: match[2], slot: Number(match[3]),
+            player: plainText(match[4]) || 'Unknown player', message }];
+    });
+}

src/lib/ui/components/ChatPanel.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+    import { onMount, tick } from 'svelte';
+    import { parseGameChat, type ChatMessage } from '$lib/game-chat.js';
+    import { pollVisible } from '$ui/poll.js';
+    import Button from './primitives/Button.svelte';
+
+    let { server, game }: { server: string; game: string | null } = $props();
+    let messages = $state<ChatMessage[]>([]);
+    let loaded = $state(false);
+    let loading = $state(false);
+    let error = $state('');
+    let missing = $state(false);
+    let body = $state<HTMLDivElement | null>(null);
+    let follow = $state(true);
+    let controller: AbortController | null = null;
+
+    async function refresh() {
+        if (loading) return;
+        loading = true;
+        const request = new AbortController();
+        controller = request;
+        try {
+            const key = game === 't6' ? 'games_zm' : 'games_sp';
+            const response = await fetch(`/api/servers/${encodeURIComponent(server)}/logs/${key}?lines=2000`, { signal: request.signal });
+            const data = await response.json();
+            if (!response.ok || !data.ok) throw new Error(data.reason ?? 'Could not refresh chat.');
+            if (request.signal.aborted) return;
+            messages = parseGameChat(data.lines ?? []);
+            missing = !!data.missing;
+            loaded = true;
+            error = '';
+            await tick();
+            if (follow && body) body.scrollTop = body.scrollHeight;
+        } catch (err) {
+            if (!request.signal.aborted) error = err instanceof Error ? err.message : 'Could not refresh chat.';
+        } finally { loading = false; }
+    }
+
+    function onScroll() {
+        if (body) follow = body.scrollHeight - body.scrollTop - body.clientHeight < 40;
+    }
+    async function latest() {
+        follow = true;
+        await tick();
+        if (body) body.scrollTop = body.scrollHeight;
+    }
+    onMount(() => {
+        const stop = pollVisible(refresh, 5000);
+        return () => { stop(); controller?.abort(); };
+    });
+</script>
+
+<section aria-label="Player chat">
+    <div class="chat-head">
+        <div><h2>Chat</h2><p>Recent messages from the game log · refreshes every 5 seconds</p></div>
+        <div class="actions">
+            {#if !follow}<Button size="sm" onclick={latest}>Latest messages</Button>{/if}
+            <Button size="sm" onclick={refresh} disabled={loading}>{loading ? 'Refreshing…' : 'Refresh'}</Button>
+        </div>
+    </div>
+    {#if error}<p class="ui-error" role="alert">{error} {loaded ? 'Showing the last loaded messages.' : ''}</p>{/if}
+    {#if !loaded && !error}
+        <p class="empty" role="status">Loading chat…</p>
+    {:else if loaded && !messages.length}
+        <p class="empty">{missing ? 'Waiting for the game log. Player messages will appear here.' : 'No player messages in the recent game log.'}</p>
+    {:else if messages.length}
+        <!-- svelte-ignore a11y_no_noninteractive_tabindex (The scrollable chat region must support keyboard scrolling.) -->
+        <div class="messages" bind:this={body} onscroll={onScroll} tabindex="0" role="region" aria-label="Chat messages">
+            <ol>
+                {#each messages as message}
+                    <li>
+                        <span class="time" title="Elapsed game-log time">{message.time}</span>
+                        <div><strong>{message.player}</strong><p>{message.message}</p></div>
+                    </li>
+                {/each}
+            </ol>
+        </div>
+    {/if}
+    <p class="note">Times are elapsed game-log times. Older messages may fall outside the recent log window.</p>
+</section>
+
+<style>
+    .chat-head, .actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+    h2 { margin: 0; font-size: var(--text-lg); }
+    .chat-head p, .note, .empty { color: var(--text-secondary); font-size: var(--text-sm); }
+    .messages { max-height: 60vh; overflow: auto; margin-top: 16px; }
+    ol { list-style: none; padding: 0; margin: 0; }
+    li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
+    .time { font-family: var(--font-mono); color: var(--text-tertiary); font-size: var(--text-sm); }
+    strong { color: var(--text-primary); overflow-wrap: anywhere; }
+    li p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+    .empty { padding: 24px 0; }
+    .note { margin-bottom: 0; }
+</style>

src/lib/ui/components/ServerCard.svelte

@@ -67,7 +67,7 @@
         (roster ?? [])
             .slice()
             .sort((a, b) => b.score - a.score)
-            .slice(0, 3)
+            .slice(0, 4)
     );
     let showRoster = $derived(health === 'online' || health === 'stale');
     let title = $derived(serverTitle(name));

src/routes/servers/[name]/+page.svelte

@@ -18,6 +18,7 @@
     import { elapsedSince } from '$ui/duration.js';
     import PlayerScoreboard from '$ui/components/PlayerScoreboard.svelte';
     import LogPanel from '$ui/components/LogPanel.svelte';
+    import ChatPanel from '$ui/components/ChatPanel.svelte';
     import { gametypeLabel } from '$ui/gametype.js';
     import { decodeRconError, rconFixHint } from '$ui/rconError.js';
     import { komodoFixHint, type KomodoPortFailure } from '$ui/komodoError.js';
@@ -101,7 +102,7 @@
     let rconProbe = $state<RconProbeResult | null>(null);
     let probingRcon = $state(false);
     let destroyOpen = $state(false);
-    const sectionIds = ['scoreboard', 'logs', 'config', 'inventory', 'diagnostics', 'history'];
+    const sectionIds = ['scoreboard', 'chat', 'logs', 'config', 'inventory', 'diagnostics', 'history'];
     const activeTab = $derived(sectionIds.includes($page.url.searchParams.get('tab') ?? '') ? $page.url.searchParams.get('tab')! : 'scoreboard');
     function changeTab(tab: string) {
         const url = new URL($page.url);
@@ -212,6 +213,7 @@
     // Tab config — Diagnostics gets a warning badge when there's an issue.
     let tabs = $derived([
         { id: 'scoreboard', label: 'Scoreboard', badge: scoreboard?.players.length ?? null },
+        { id: 'chat',       label: 'Chat' },
         { id: 'logs',       label: 'Logs' },
         { id: 'config', label: 'Config' },
         { id: 'inventory',  label: 'Inventory', badge: inventory.length || null },
@@ -308,6 +310,10 @@
                 <Card padding="lg">
                     {#key name}<PlayerScoreboard report={scoreboard} mapLabel={scoreboard ? fleetIdentity({ ...server, last_map: scoreboard.map }).map : undefined} />{/key}
                 </Card>
+            {:else if activeTab === 'chat'}
+                <Card padding="lg">
+                    {#key name}<ChatPanel server={name} game={server.game} />{/key}
+                </Card>
             {:else if activeTab === 'logs'}
                 <Card padding="lg">
                     <LogPanel