From 1e14320911d435bfb7783afeae4fafcf3e49c911 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Fri, 21 Aug 2026 17:19:46 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=20=ED=98=84=EC=9E=AC?=
 =?UTF-8?q?=20=EC=8B=9C=EA=B0=81=EC=9D=84=20=EC=B5=9C=EA=B7=BC=20=ED=86=B5?=
 =?UTF-8?q?=EC=8B=A0=20=EA=B8=B0=EC=A4=80=EC=9C=BC=EB=A1=9C=20=EA=B0=B1?=
 =?UTF-8?q?=EC=8B=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

완료 턴 시각 대신 lobby serverTime을 분 경계에 맞춰 표시한다. 게임 API 응답과 SSE 및 같은 계정 탭 전달을 최근 통신으로 기록하고, 45초 공백에는 시계를 멈춘다. 공통 시계 투영과 단위 및 Chromium 회귀 검증을 추가한다.
---
 app/game-frontend/e2e/mainNavigation.spec.ts  | 85 ++++++++++++++++-
 .../src/components/main/CommandListPanel.vue  | 34 ++-----
 .../src/components/main/MainFrontStatus.vue   | 91 +++++++++++++++++--
 app/game-frontend/src/stores/mainDashboard.ts |  9 ++
 .../src/utils/gameServerActivity.ts           | 34 +++++++
 .../src/utils/serverClockProjection.ts        | 67 ++++++++++++++
 app/game-frontend/src/utils/trpc.ts           |  6 ++
 app/game-frontend/src/views/MainView.vue      | 10 +-
 .../test/gameServerActivity.test.ts           | 22 +++++
 .../test/serverClockProjection.test.ts        | 51 +++++++++++
 10 files changed, 374 insertions(+), 35 deletions(-)
 create mode 100644 app/game-frontend/src/utils/gameServerActivity.ts
 create mode 100644 app/game-frontend/src/utils/serverClockProjection.ts
 create mode 100644 app/game-frontend/test/gameServerActivity.test.ts
 create mode 100644 app/game-frontend/test/serverClockProjection.test.ts

diff --git a/app/game-frontend/e2e/mainNavigation.spec.ts b/app/game-frontend/e2e/mainNavigation.spec.ts
index 2114ca10..d5aa1667 100644
--- a/app/game-frontend/e2e/mainNavigation.spec.ts
+++ b/app/game-frontend/e2e/mainNavigation.spec.ts
@@ -1188,7 +1188,7 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
     await expect(page.locator('.legacy-game-info')).toContainText('현재: 185년 1월');
     await expect(page.locator('.legacy-game-info')).toContainText('턴: 10분');
     await expect(page.locator('.legacy-game-info')).not.toContainText('최근 턴:');
-    await expect(page.locator('.execution-status')).toHaveText('동작 시각: 08-13 09:05');
+    await expect(page.locator('.execution-status')).toHaveText('현재 시각: 08-13 09:00');
     await expect(page.locator('.tournament-status')).toHaveText('토너먼트: 참가 모집중');
     await expect(page.locator('.vote-status')).toHaveText('설문: 메뉴 설문');
     const headerStatusGeometry = await page.locator('.main-page').evaluate((element) => {
@@ -1793,6 +1793,89 @@ test('main general card uses local turn time and command clock tracks corrected
     expect(state.operations).toHaveLength(operationsBeforePreopenBoundary);
 });
 
+test('main header clock follows minute boundaries only while game-server contact is recent', async ({
+    page,
+}, testInfo) => {
+    const state: NavigationFixture = {
+        officerLevel: 0,
+        permission: 0,
+        nationLevel: 0,
+        stage: 0,
+        npcMode: 1,
+        generalMeCalls: 0,
+        operations: [],
+        serverTime: '2026-08-13T00:00:35.000Z',
+        serverWallTime: '2026-08-13T00:00:00.000Z',
+        clockMode: 'realtime',
+        clockRunning: true,
+    };
+    await installRealtimeHarness(page);
+    await installFixture(page, state);
+    await page.clock.install({ time: new Date('2026-08-13T00:00:00.000Z') });
+    await page.setViewportSize({ width: 1200, height: 900 });
+    await waitForMain(page);
+    await waitForMainRealtime(page);
+
+    const clock = page.locator('.execution-status');
+    const initialRequestCount = state.trpcRequests?.length ?? 0;
+    await expect(clock).toHaveText('현재 시각: 08-13 09:00');
+    await expect(clock).not.toHaveClass(/execution-status--stale/u);
+
+    await page.clock.runFor(25_000);
+    await expect(clock).toHaveText('현재 시각: 08-13 09:01');
+
+    await page.clock.runFor(21_000);
+    await expect(clock).toHaveClass(/execution-status--stale/u);
+    await expect(clock).toHaveAttribute('title', '최근 45초 동안 서버 통신이 없어 시각 갱신을 멈췄습니다.');
+    await expect.poll(() => clock.evaluate((element) => getComputedStyle(element).color)).toBe('rgb(255, 0, 255)');
+    const staleDesktopGeometry = await clock.evaluate((element) => ({
+        rect: element.getBoundingClientRect().toJSON(),
+        overflow: element.scrollWidth - element.clientWidth,
+        color: getComputedStyle(element).color,
+        fontSize: getComputedStyle(element).fontSize,
+        lineHeight: getComputedStyle(element).lineHeight,
+    }));
+    expect(staleDesktopGeometry.rect.width).toBeCloseTo(333.33, 0);
+    expect(staleDesktopGeometry.rect.height).toBeGreaterThanOrEqual(36);
+    expect(staleDesktopGeometry.overflow).toBeLessThanOrEqual(0);
+    await clock.screenshot({ path: testInfo.outputPath('main-header-clock-stale-desktop-1200.png') });
+    await page.clock.runFor(60_000);
+    await expect(clock).toHaveText('현재 시각: 08-13 09:01');
+
+    await page.evaluate(() => {
+        (window as unknown as { __emitMainRealtime: (type: string, value: unknown) => void }).__emitMainRealtime(
+            'ping',
+            {}
+        );
+    });
+    await expect(clock).toHaveText('현재 시각: 08-13 09:02');
+    await expect(clock).not.toHaveClass(/execution-status--stale/u);
+    await page.clock.runFor(39_000);
+    await expect(clock).toHaveText('현재 시각: 08-13 09:03');
+    await expect.poll(() => clock.evaluate((element) => getComputedStyle(element).color)).toBe('rgb(0, 255, 255)');
+
+    await page.setViewportSize({ width: 500, height: 900 });
+    const freshMobileGeometry = await clock.evaluate((element) => ({
+        rect: element.getBoundingClientRect().toJSON(),
+        overflow: element.scrollWidth - element.clientWidth,
+        color: getComputedStyle(element).color,
+        fontSize: getComputedStyle(element).fontSize,
+        lineHeight: getComputedStyle(element).lineHeight,
+        documentScrollWidth: document.documentElement.scrollWidth,
+    }));
+    expect(freshMobileGeometry.rect.width).toBeCloseTo(166.67, 0);
+    expect(freshMobileGeometry.overflow).toBeLessThanOrEqual(0);
+    expect(freshMobileGeometry.documentScrollWidth).toBe(500);
+    await Promise.all([
+        clock.screenshot({ path: testInfo.outputPath('main-header-clock-fresh-mobile-500.png') }),
+        writeFile(
+            testInfo.outputPath('main-header-clock-geometry.json'),
+            `${JSON.stringify({ staleDesktopGeometry, freshMobileGeometry }, null, 2)}\n`
+        ),
+    ]);
+    expect(state.trpcRequests?.length ?? 0).toBe(initialRequestCount);
+});
+
 test('message targets keep reply behavior and use nation-color contrast in labels and select options', async ({
     page,
 }) => {
diff --git a/app/game-frontend/src/components/main/CommandListPanel.vue b/app/game-frontend/src/components/main/CommandListPanel.vue
index 260037dd..99c274de 100644
--- a/app/game-frontend/src/components/main/CommandListPanel.vue
+++ b/app/game-frontend/src/components/main/CommandListPanel.vue
@@ -3,6 +3,7 @@ import { computed, onUnmounted, ref, watch } from 'vue';
 import { addMinutes } from 'date-fns';
 import ReservedCommandEditor from '../command/ReservedCommandEditor.vue';
 import { formatLocalDateTime, formatLocalTimeSeconds } from '../../utils/legacyDateTime';
+import { projectServerClock, sampleServerClock, type SampledServerClock } from '../../utils/serverClockProjection';
 import type {
     CommandMapData,
     CommandMapLayout,
@@ -90,27 +91,20 @@ const autonomousUntil = computed(() => {
 
 const currentServerTime = ref('--:--:--');
 const MAX_SERVER_CLOCK_TIMER_DELAY_MS = 60_000;
-let sampledServerTimeMs: number | null = null;
-let sampledClientTimeMs = 0;
-let sampledStartDelayMs: number | null = 0;
+let serverClockSample: SampledServerClock | null = null;
 let serverClockTimer: ReturnType<typeof setTimeout> | undefined;
 
 const updateServerClock = () => {
     if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
     serverClockTimer = undefined;
-    if (sampledServerTimeMs === null) {
+    if (serverClockSample === null) {
         currentServerTime.value = '--:--:--';
         return;
     }
-    const clientElapsedMs = Math.max(0, Date.now() - sampledClientTimeMs);
-    const elapsedGameMs =
-        props.clockMode === 'manual' || sampledStartDelayMs === null
-            ? 0
-            : Math.max(0, clientElapsedMs - sampledStartDelayMs);
-    const projectedTime = new Date(sampledServerTimeMs + elapsedGameMs);
+    const { clientElapsedMs, time: projectedTime } = projectServerClock(serverClockSample);
     currentServerTime.value = formatLocalTimeSeconds(projectedTime);
-    if (props.clockMode !== 'manual' && sampledStartDelayMs !== null) {
-        const untilStartMs = sampledStartDelayMs - clientElapsedMs;
+    if (serverClockSample.clockMode !== 'manual' && serverClockSample.startDelayMs !== null) {
+        const untilStartMs = serverClockSample.startDelayMs - clientElapsedMs;
         serverClockTimer = setTimeout(
             updateServerClock,
             untilStartMs > 0
@@ -123,21 +117,7 @@ const updateServerClock = () => {
 watch(
     () => [props.serverTime, props.serverWallTime, props.clockMode, props.clockRunning, props.clockStartsAt] as const,
     ([serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt]) => {
-        const parsed = serverTime ? new Date(serverTime).getTime() : Number.NaN;
-        sampledServerTimeMs = Number.isFinite(parsed) ? parsed : null;
-        sampledClientTimeMs = Date.now();
-        if (clockMode === 'manual') {
-            sampledStartDelayMs = null;
-        } else if (clockRunning !== false) {
-            sampledStartDelayMs = 0;
-        } else {
-            const wallTimeMs = serverWallTime ? new Date(serverWallTime).getTime() : Number.NaN;
-            const startsAtMs = clockStartsAt ? new Date(clockStartsAt).getTime() : Number.NaN;
-            sampledStartDelayMs =
-                Number.isFinite(wallTimeMs) && Number.isFinite(startsAtMs)
-                    ? Math.max(0, startsAtMs - wallTimeMs)
-                    : null;
-        }
+        serverClockSample = sampleServerClock({ serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt });
         updateServerClock();
     },
     { immediate: true }
diff --git a/app/game-frontend/src/components/main/MainFrontStatus.vue b/app/game-frontend/src/components/main/MainFrontStatus.vue
index d4e5000f..b8e5d1d2 100644
--- a/app/game-frontend/src/components/main/MainFrontStatus.vue
+++ b/app/game-frontend/src/components/main/MainFrontStatus.vue
@@ -1,10 +1,26 @@
 <script setup lang="ts">
 import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
-import { computed } from 'vue';
+import { computed, onUnmounted, ref, watch } from 'vue';
 import { resolveTournamentStageName } from '../../utils/tournamentStatus';
+import {
+    GAME_SERVER_ACTIVITY_FRESHNESS_MS,
+    gameServerActivity,
+    isRecentGameServerActivity,
+} from '../../utils/gameServerActivity';
+import {
+    millisecondsUntilNextMinute,
+    projectServerClock,
+    sampleServerClock,
+    type SampledServerClock,
+} from '../../utils/serverClockProjection';
 
 const props = defineProps<{
     tournamentStage: number;
+    serverTime?: string;
+    serverWallTime?: string;
+    clockMode?: 'realtime' | 'manual';
+    clockRunning?: boolean;
+    clockStartsAt?: string | null;
     status: {
         onlineUserCount: number;
         onlineNations: string;
@@ -20,16 +36,75 @@ const props = defineProps<{
 }>();
 
 const tournamentStatus = computed(() => resolveTournamentStageName(props.tournamentStage));
-const lastExecutedStatus = computed(() =>
-    formatServerDateTime(props.status?.lastExecuted, { format: 'monthDayTime', fallback: '기록 없음' })
+const currentServerTime = ref('기록 없음');
+const hasServerClock = ref(false);
+const serverClockFresh = ref(false);
+const serverClockTitle = computed(() => {
+    if (!hasServerClock.value) return '서버 시각을 아직 받지 못했습니다.';
+    if (!serverClockFresh.value) return '최근 45초 동안 서버 통신이 없어 시각 갱신을 멈췄습니다.';
+    return undefined;
+});
+
+let serverClockSample: SampledServerClock | null = null;
+let serverClockTimer: ReturnType<typeof setTimeout> | undefined;
+
+const updateServerClock = () => {
+    if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
+    serverClockTimer = undefined;
+    if (serverClockSample === null) {
+        currentServerTime.value = '기록 없음';
+        hasServerClock.value = false;
+        serverClockFresh.value = false;
+        return;
+    }
+
+    const now = Date.now();
+    const projection = projectServerClock(serverClockSample, now);
+    currentServerTime.value = formatServerDateTime(projection.time, {
+        format: 'monthDayTime',
+        fallback: '기록 없음',
+    });
+    hasServerClock.value = true;
+
+    const lastContactAt = gameServerActivity.lastContactAt.value;
+    serverClockFresh.value = isRecentGameServerActivity(lastContactAt, now);
+    if (!serverClockFresh.value || lastContactAt === null) return;
+
+    const nextDelays = [lastContactAt + GAME_SERVER_ACTIVITY_FRESHNESS_MS - now + 1];
+    if (serverClockSample.clockMode !== 'manual' && serverClockSample.startDelayMs !== null) {
+        const untilStartMs = serverClockSample.startDelayMs - projection.clientElapsedMs;
+        nextDelays.push(untilStartMs > 0 ? untilStartMs : millisecondsUntilNextMinute(projection.time));
+    }
+    serverClockTimer = setTimeout(updateServerClock, Math.max(1, Math.min(...nextDelays)));
+};
+
+watch(
+    () => [props.serverTime, props.serverWallTime, props.clockMode, props.clockRunning, props.clockStartsAt] as const,
+    ([serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt]) => {
+        serverClockSample = sampleServerClock({ serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt });
+        updateServerClock();
+    },
+    { immediate: true }
 );
+watch(() => gameServerActivity.lastContactAt.value, updateServerClock);
+
+onUnmounted(() => {
+    if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
+});
 </script>
 
 <template>
     <section class="front-status" aria-label="접속 현황과 국가 방침">
-        <div class="activity-status" aria-label="동작 시각, 토너먼트와 설문 진행 현황">
-            <div class="status-row execution-status" :class="{ 'execution-status--empty': !status?.lastExecuted }">
-                동작 시각: {{ lastExecutedStatus }}
+        <div class="activity-status" aria-label="현재 시각, 토너먼트와 설문 진행 현황">
+            <div
+                class="status-row execution-status"
+                :class="{
+                    'execution-status--empty': !hasServerClock,
+                    'execution-status--stale': hasServerClock && !serverClockFresh,
+                }"
+                :title="serverClockTitle"
+            >
+                현재 시각: {{ currentServerTime }}
             </div>
             <div class="status-row tournament-status">
                 <RouterLink to="/tournament">
@@ -120,6 +195,10 @@ const lastExecutedStatus = computed(() =>
     color: magenta;
 }
 
+.execution-status--stale {
+    color: magenta;
+}
+
 .vote-label {
     color: cyan;
 }
diff --git a/app/game-frontend/src/stores/mainDashboard.ts b/app/game-frontend/src/stores/mainDashboard.ts
index 08134d0d..1a83d38f 100644
--- a/app/game-frontend/src/stores/mainDashboard.ts
+++ b/app/game-frontend/src/stores/mainDashboard.ts
@@ -21,6 +21,7 @@ import {
 import { createBroadcastTabCoordinator, type BroadcastTabCoordinator } from '../utils/broadcastTabCoordinator';
 import { resolveWithReadModelSnapshotFallback } from '../utils/readModelDeltaRecovery';
 import { createRealtimeRequestOptions } from '../utils/realtimeAccessGrant';
+import { markGameServerContact } from '../utils/gameServerActivity';
 
 const REALTIME_FULL_REFRESH_MIN_INTERVAL_MS = 5_000;
 
@@ -1097,10 +1098,12 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
             onPayload: (message) => {
                 if (!isRealtimeParticipant()) return;
                 if (message.kind === 'patch') {
+                    markGameServerContact();
                     applyDashboardPatch(message.patch);
                     return;
                 }
                 realtimeStatus.value = message.status;
+                if (message.status === 'connected') markGameServerContact();
             },
         });
         realtimeCoordinator.start();
@@ -1153,6 +1156,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
         realtimeSource = source;
 
         source.addEventListener('open', () => {
+            markGameServerContact();
             realtimeStatus.value = 'connected';
             realtimeCoordinator?.postFromLeader({ kind: 'status', status: 'connected' });
         });
@@ -1166,6 +1170,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
             if (!payload || payload.type !== 'readModelInvalidated') {
                 return;
             }
+            markGameServerContact();
             readModelRefreshQueue.request(payload.invalidation, payload.refreshGrant);
         });
         source.addEventListener('messagesInvalidated', (event) => {
@@ -1174,6 +1179,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
             if (!payload || payload.type !== 'messagesInvalidated') {
                 return;
             }
+            markGameServerContact();
             void refreshMessages(payload.refreshGrant);
         });
 
@@ -1182,14 +1188,17 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
         for (const legacyEventType of ['turnCompleted', 'readModelChanged'] as const) {
             source.addEventListener(legacyEventType, () => {
                 if (realtimeCoordinator !== null && !realtimeCoordinator.isLeader()) return;
+                markGameServerContact();
                 realtimeRefreshQueue.request();
             });
         }
         source.addEventListener('messageCreated', () => {
             if (realtimeCoordinator !== null && !realtimeCoordinator.isLeader()) return;
+            markGameServerContact();
             void refreshMessages();
         });
         source.addEventListener('ping', () => {
+            markGameServerContact();
             if (realtimeEnabled.value) {
                 realtimeStatus.value = 'connected';
                 realtimeCoordinator?.postFromLeader({ kind: 'status', status: 'connected' });
diff --git a/app/game-frontend/src/utils/gameServerActivity.ts b/app/game-frontend/src/utils/gameServerActivity.ts
new file mode 100644
index 00000000..cebcb47e
--- /dev/null
+++ b/app/game-frontend/src/utils/gameServerActivity.ts
@@ -0,0 +1,34 @@
+import { readonly, ref, type Ref } from 'vue';
+
+export const GAME_SERVER_ACTIVITY_FRESHNESS_MS = 45_000;
+
+export type GameServerActivityTracker = {
+    lastContactAt: Readonly<Ref<number | null>>;
+    markContact: (contactAt?: number) => void;
+};
+
+export const createGameServerActivityTracker = (): GameServerActivityTracker => {
+    const lastContactAt = ref<number | null>(null);
+
+    return {
+        lastContactAt: readonly(lastContactAt),
+        markContact(contactAt = Date.now()) {
+            if (!Number.isFinite(contactAt)) return;
+            lastContactAt.value = contactAt;
+        },
+    };
+};
+
+export const isRecentGameServerActivity = (
+    lastContactAt: number | null,
+    now = Date.now(),
+    freshnessMs = GAME_SERVER_ACTIVITY_FRESHNESS_MS
+): boolean =>
+    lastContactAt !== null &&
+    Number.isFinite(lastContactAt) &&
+    Number.isFinite(now) &&
+    Math.max(0, now - lastContactAt) <= freshnessMs;
+
+export const gameServerActivity = createGameServerActivityTracker();
+
+export const markGameServerContact = (contactAt = Date.now()) => gameServerActivity.markContact(contactAt);
diff --git a/app/game-frontend/src/utils/serverClockProjection.ts b/app/game-frontend/src/utils/serverClockProjection.ts
new file mode 100644
index 00000000..3376b9cb
--- /dev/null
+++ b/app/game-frontend/src/utils/serverClockProjection.ts
@@ -0,0 +1,67 @@
+export type ServerClockProjectionInput = {
+    serverTime?: string;
+    serverWallTime?: string;
+    clockMode?: 'realtime' | 'manual';
+    clockRunning?: boolean;
+    clockStartsAt?: string | null;
+};
+
+export type SampledServerClock = {
+    serverTimeMs: number;
+    sampledClientTimeMs: number;
+    clockMode: 'realtime' | 'manual';
+    startDelayMs: number | null;
+};
+
+const parseInstant = (value?: string | null): number | null => {
+    if (!value) return null;
+    const parsed = new Date(value).getTime();
+    return Number.isFinite(parsed) ? parsed : null;
+};
+
+export const sampleServerClock = (
+    input: ServerClockProjectionInput,
+    sampledClientTimeMs = Date.now()
+): SampledServerClock | null => {
+    const serverTimeMs = parseInstant(input.serverTime);
+    if (serverTimeMs === null) return null;
+
+    let startDelayMs: number | null;
+    if (input.clockMode === 'manual') {
+        startDelayMs = null;
+    } else if (input.clockRunning !== false) {
+        startDelayMs = 0;
+    } else {
+        const serverWallTimeMs = parseInstant(input.serverWallTime);
+        const clockStartsAtMs = parseInstant(input.clockStartsAt);
+        startDelayMs =
+            serverWallTimeMs !== null && clockStartsAtMs !== null
+                ? Math.max(0, clockStartsAtMs - serverWallTimeMs)
+                : null;
+    }
+
+    return {
+        serverTimeMs,
+        sampledClientTimeMs,
+        clockMode: input.clockMode ?? 'realtime',
+        startDelayMs,
+    };
+};
+
+export const projectServerClock = (sample: SampledServerClock, clientTimeMs = Date.now()) => {
+    const clientElapsedMs = Math.max(0, clientTimeMs - sample.sampledClientTimeMs);
+    const elapsedGameMs =
+        sample.clockMode === 'manual' || sample.startDelayMs === null
+            ? 0
+            : Math.max(0, clientElapsedMs - sample.startDelayMs);
+
+    return {
+        clientElapsedMs,
+        time: new Date(sample.serverTimeMs + elapsedGameMs),
+    };
+};
+
+export const millisecondsUntilNextMinute = (time: Date): number => {
+    const remainder = ((time.getTime() % 60_000) + 60_000) % 60_000;
+    return remainder === 0 ? 60_000 : 60_000 - remainder;
+};
diff --git a/app/game-frontend/src/utils/trpc.ts b/app/game-frontend/src/utils/trpc.ts
index 899042aa..bd291ee4 100644
--- a/app/game-frontend/src/utils/trpc.ts
+++ b/app/game-frontend/src/utils/trpc.ts
@@ -3,6 +3,7 @@ import { REALTIME_ACCESS_GRANT_HEADER } from '@sammo-ts/common/realtime/types';
 import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
 import type { AppRouter } from '@sammo-ts/game-api';
 import { resolveBatchRealtimeAccessGrant } from './realtimeAccessGrant';
+import { markGameServerContact } from './gameServerActivity';
 
 const getGameToken = (): string | null => {
     if (typeof window === 'undefined') {
@@ -17,6 +18,11 @@ export const trpc = createTRPCProxyClient<AppRouter>({
         httpBatchLink({
             url: import.meta.env.VITE_GAME_API_URL ?? '/api/trpc',
             ...trpcJsonBodyHttpClientOptions,
+            async fetch(input, init) {
+                const result = await globalThis.fetch(input, init);
+                markGameServerContact();
+                return result;
+            },
             headers({ opList }) {
                 const token = getGameToken();
                 const refreshGrant = resolveBatchRealtimeAccessGrant(opList);
diff --git a/app/game-frontend/src/views/MainView.vue b/app/game-frontend/src/views/MainView.vue
index 1b6618eb..f12162fe 100644
--- a/app/game-frontend/src/views/MainView.vue
+++ b/app/game-frontend/src/views/MainView.vue
@@ -243,7 +243,15 @@ watch(
         </div>
 
         <div data-main-target="policy">
-            <MainFrontStatus :status="frontStatus" :tournament-stage="tournamentStage" />
+            <MainFrontStatus
+                :status="frontStatus"
+                :tournament-stage="tournamentStage"
+                :server-time="lobbyInfo?.serverTime"
+                :server-wall-time="lobbyInfo?.serverWallTime"
+                :clock-mode="lobbyInfo?.clockMode"
+                :clock-running="lobbyInfo?.clockRunning"
+                :clock-starts-at="lobbyInfo?.clockStartsAt"
+            />
         </div>
 
         <aside v-if="surveyNotice" class="survey-notice" role="status" aria-live="polite">
diff --git a/app/game-frontend/test/gameServerActivity.test.ts b/app/game-frontend/test/gameServerActivity.test.ts
new file mode 100644
index 00000000..dd17f87b
--- /dev/null
+++ b/app/game-frontend/test/gameServerActivity.test.ts
@@ -0,0 +1,22 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import {
+    GAME_SERVER_ACTIVITY_FRESHNESS_MS,
+    createGameServerActivityTracker,
+    isRecentGameServerActivity,
+} from '../src/utils/gameServerActivity.ts';
+
+void test('keeps the most recently observed server contact timestamp', () => {
+    const tracker = createGameServerActivityTracker();
+    tracker.markContact(2_000);
+    tracker.markContact(1_000);
+    tracker.markContact(Number.NaN);
+    assert.equal(tracker.lastContactAt.value, 1_000);
+});
+
+void test('treats three heartbeat intervals as recent activity', () => {
+    assert.equal(isRecentGameServerActivity(1_000, 1_000 + GAME_SERVER_ACTIVITY_FRESHNESS_MS), true);
+    assert.equal(isRecentGameServerActivity(1_000, 1_001 + GAME_SERVER_ACTIVITY_FRESHNESS_MS), false);
+    assert.equal(isRecentGameServerActivity(null, 1_000), false);
+});
diff --git a/app/game-frontend/test/serverClockProjection.test.ts b/app/game-frontend/test/serverClockProjection.test.ts
new file mode 100644
index 00000000..f638984e
--- /dev/null
+++ b/app/game-frontend/test/serverClockProjection.test.ts
@@ -0,0 +1,51 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import {
+    millisecondsUntilNextMinute,
+    projectServerClock,
+    sampleServerClock,
+} from '../src/utils/serverClockProjection.ts';
+
+void test('projects a running server clock from the browser sample instant', () => {
+    const sample = sampleServerClock(
+        {
+            serverTime: '2026-08-13T00:00:35.250Z',
+            clockMode: 'realtime',
+            clockRunning: true,
+        },
+        10_000
+    );
+    assert.ok(sample);
+    assert.equal(projectServerClock(sample, 34_750).time.toISOString(), '2026-08-13T00:01:00.000Z');
+    assert.equal(millisecondsUntilNextMinute(projectServerClock(sample, 10_000).time), 24_750);
+});
+
+void test('keeps manual clocks fixed even while client time advances', () => {
+    const sample = sampleServerClock(
+        { serverTime: '2026-08-13T00:00:35.000Z', clockMode: 'manual', clockRunning: false },
+        10_000
+    );
+    assert.ok(sample);
+    assert.equal(projectServerClock(sample, 130_000).time.toISOString(), '2026-08-13T00:00:35.000Z');
+});
+
+void test('holds a preopen clock until its wall-clock start delay passes', () => {
+    const sample = sampleServerClock(
+        {
+            serverTime: '2026-08-13T00:00:00.000Z',
+            serverWallTime: '2026-08-13T08:00:00.000Z',
+            clockMode: 'realtime',
+            clockRunning: false,
+            clockStartsAt: '2026-08-13T08:01:00.000Z',
+        },
+        10_000
+    );
+    assert.ok(sample);
+    assert.equal(projectServerClock(sample, 69_999).time.toISOString(), '2026-08-13T00:00:00.000Z');
+    assert.equal(projectServerClock(sample, 70_001).time.toISOString(), '2026-08-13T00:00:00.001Z');
+});
+
+void test('rejects an invalid server clock sample', () => {
+    assert.equal(sampleServerClock({ serverTime: 'not-a-time' }, 10_000), null);
+});