強化房間清理與比賽中分頁限制

2026-04-19 18:05:33 +08:00
parent 2d1ad0600e
commit edab74f125
9 changed files with 285 additions and 233 deletions
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@
  - `比賽結算` 需要長按 `1 秒` 才會觸發。
  - 比分 `0:0` 時不可結算。
  - 全站文字預設不可選取，避免手機誤觸反白。
+  - 只要已設定先攻並開始比賽，就不能切換到其他分頁，需先完成結算。
 - 語音播報
  - 可設定是否播報得分者。
  - 可設定是否播報發球者。
@@ -38,6 +39,8 @@
  - 帶入隊伍進入記分板後會自動建立房間。
  - 記分板會顯示房號。
  - 房間列表不顯示比分，只顯示房號、隊伍、目標分數與更新時間。
+  - 房間列表可手動重新取得，按一次後有 `5 秒` 冷卻。
+  - 手動重新取得時，會順便清理沒有主控在線的無主房間。
  - 觀戰者只能看，不能操作。
  - 觀戰同步使用 `SSE + 輪詢備援`。
  - 房主重整、離開記分板或換隊伍時，未完成房間會自動清掉。
@@ -46,6 +49,7 @@
 - PWA
  - 可加入手機主畫面，像 App 一樣開啟。
  - 支援主畫面 icon 與版本更新提示。
+  - 文件頁面改為網路優先，降低 iPad / iPhone PWA 卡舊版快取的機率。

 ## 開發

--- a/public/sw.js
+++ b/public/sw.js
@@ -1,7 +1,5 @@
-const CACHE_NAME = 'badminton-scoreboard-v1'
+const CACHE_NAME = 'badminton-scoreboard-v2'
 const APP_SHELL = [
-  '/',
-  '/index.html',
  '/manifest.webmanifest',
  '/favicon.png',
  '/icon.png',
@@ -51,19 +49,45 @@ self.addEventListener('fetch', (event) => {
    return
  }

-  event.respondWith(
-    caches.match(event.request).then(async (cachedResponse) => {
-      if (cachedResponse) {
-        return cachedResponse
+  if (requestUrl.pathname.startsWith('/api/')) {
+    event.respondWith(fetch(event.request))
+    return
  }

+  const isNavigationRequest =
+    event.request.mode === 'navigate' || event.request.destination === 'document'
+
+  if (isNavigationRequest) {
+    event.respondWith(
+      fetch(event.request)
+        .then(async (networkResponse) => {
+          if (networkResponse.ok) {
+            const cache = await caches.open(CACHE_NAME)
+            cache.put('/index.html', networkResponse.clone())
+          }
+
+          return networkResponse
+        })
+        .catch(async () => {
+          const fallback = await caches.match('/index.html')
+          if (fallback) {
+            return fallback
+          }
+
+          throw new Error('Navigation request failed')
+        }),
+    )
+    return
+  }
+
+  event.respondWith(
+    caches.match(event.request).then(async (cachedResponse) => {
      try {
        const networkResponse = await fetch(event.request)

        if (
          networkResponse.ok &&
-          (event.request.destination === 'document' ||
-            event.request.destination === 'script' ||
+          (event.request.destination === 'script' ||
            event.request.destination === 'style' ||
            event.request.destination === 'image' ||
            requestUrl.pathname.startsWith('/assets/'))
@@ -74,11 +98,8 @@ self.addEventListener('fetch', (event) => {

        return networkResponse
      } catch (error) {
-        if (event.request.mode === 'navigate') {
-          const fallback = await caches.match('/index.html')
-          if (fallback) {
-            return fallback
-          }
+        if (cachedResponse) {
+          return cachedResponse
        }

        throw error
--- a/server/data/live-rooms.json
+++ b/server/data/live-rooms.json
@@ -1,197 +1 @@
-[
-  {
-    "createdAt": "2026-04-19T04:50:38.216Z",
-    "groupId": 1,
-    "hostToken": "mo5afjewicxz50b9",
-    "leftTeamName": "柏威 / 玟瑄",
-    "matchupLabel": "柏威 / 玟瑄 vs 小念 / 建喵",
-    "pointLog": [
-      {
-        "round": 0,
-        "starter": 3,
-        "winCount": 0,
-        "winner": 1
-      },
-      {
-        "round": 1,
-        "starter": 3,
-        "winCount": 0,
-        "winner": 0
-      },
-      {
-        "round": 2,
-        "starter": 1,
-        "winCount": 1,
-        "winner": 0
-      },
-      {
-        "round": 3,
-        "starter": 1,
-        "winCount": 0,
-        "winner": 1
-      },
-      {
-        "round": 4,
-        "starter": 2,
-        "winCount": 1,
-        "winner": 1
-      }
-    ],
-    "rightTeamName": "小念 / 建喵",
-    "roomId": "341793",
-    "scoreState": {
-      "scoreLeft": 2,
-      "scoreRight": 3,
-      "gamesLeft": 0,
-      "gamesRight": 0,
-      "currentGame": 1,
-      "targetScore": 21,
-      "serving": "right",
-      "leftRightCourtPlayer": "playerB",
-      "rightRightCourtPlayer": "playerA"
-    },
-    "status": "finished",
-    "targetDate": "2026-04-13",
-    "updatedAt": "2026-04-19T04:50:56.351Z",
-    "winnerTeamName": "小念 / 建喵"
-  },
-  {
-    "createdAt": "2026-04-19T04:51:17.794Z",
-    "groupId": 2,
-    "hostToken": "mo5agdyag7fyqyxv",
-    "leftTeamName": "景涵 / 小念",
-    "matchupLabel": "景涵 / 小念 vs 柏威 / 玟瑄",
-    "pointLog": [
-      {
-        "round": 0,
-        "starter": 0,
-        "winCount": 0,
-        "winner": 0
-      },
-      {
-        "round": 1,
-        "starter": 0,
-        "winCount": 0,
-        "winner": 1
-      }
-    ],
-    "rightTeamName": "柏威 / 玟瑄",
-    "roomId": "174740",
-    "scoreState": {
-      "scoreLeft": 1,
-      "scoreRight": 1,
-      "gamesLeft": 0,
-      "gamesRight": 0,
-      "currentGame": 1,
-      "targetScore": 21,
-      "serving": "right",
-      "leftRightCourtPlayer": "playerB",
-      "rightRightCourtPlayer": "playerA"
-    },
-    "status": "finished",
-    "targetDate": "2026-04-13",
-    "updatedAt": "2026-04-19T04:51:25.160Z",
-    "winnerTeamName": "景涵 / 小念"
-  },
-  {
-    "createdAt": "2026-04-19T04:51:25.190Z",
-    "groupId": 2,
-    "hostToken": "mo5agjnqeabkfpr2",
-    "leftTeamName": "景涵 / 小念",
-    "matchupLabel": "景涵 / 小念 vs 柏威 / 玟瑄",
-    "pointLog": [
-      {
-        "round": 0,
-        "starter": 0,
-        "winCount": 0,
-        "winner": 0
-      },
-      {
-        "round": 1,
-        "starter": 0,
-        "winCount": 0,
-        "winner": 1
-      },
-      {
-        "round": 2,
-        "starter": 2,
-        "winCount": 1,
-        "winner": 1
-      }
-    ],
-    "rightTeamName": "柏威 / 玟瑄",
-    "roomId": "239300",
-    "scoreState": {
-      "scoreLeft": 1,
-      "scoreRight": 2,
-      "gamesLeft": 0,
-      "gamesRight": 0,
-      "currentGame": 1,
-      "targetScore": 21,
-      "serving": "right",
-      "leftRightCourtPlayer": "playerB",
-      "rightRightCourtPlayer": "playerB"
-    },
-    "status": "finished",
-    "targetDate": "2026-04-13",
-    "updatedAt": "2026-04-19T04:52:26.087Z",
-    "winnerTeamName": "柏威 / 玟瑄"
-  },
-  {
-    "createdAt": "2026-04-19T04:58:15.291Z",
-    "groupId": 1,
-    "hostToken": "mo5apc3foksw0enn",
-    "leftTeamName": "景涵 / RuRu",
-    "matchupLabel": "景涵 / RuRu vs 小念 / 柏威",
-    "pointLog": [
-      {
-        "round": 0,
-        "starter": 0,
-        "winCount": 0,
-        "winner": 0
-      }
-    ],
-    "rightTeamName": "小念 / 柏威",
-    "roomId": "432277",
-    "scoreState": {
-      "scoreLeft": 1,
-      "scoreRight": 0,
-      "gamesLeft": 0,
-      "gamesRight": 0,
-      "currentGame": 1,
-      "targetScore": 21,
-      "serving": "left",
-      "leftRightCourtPlayer": "playerB",
-      "rightRightCourtPlayer": "playerA"
-    },
-    "status": "finished",
-    "targetDate": "2026-04-13",
-    "updatedAt": "2026-04-19T04:58:25.870Z",
-    "winnerTeamName": "景涵 / RuRu"
-  },
-  {
-    "createdAt": "2026-04-19T05:01:10.705Z",
-    "groupId": 1,
-    "hostToken": "mo5at3g18sybc1fw",
-    "leftTeamName": "柏威 / RuRu",
-    "matchupLabel": "柏威 / RuRu vs 建喵 / 小念",
-    "pointLog": [],
-    "rightTeamName": "建喵 / 小念",
-    "roomId": "498013",
-    "scoreState": {
-      "scoreLeft": 0,
-      "scoreRight": 0,
-      "gamesLeft": 0,
-      "gamesRight": 0,
-      "currentGame": 1,
-      "targetScore": 21,
-      "serving": null,
-      "leftRightCourtPlayer": "playerA",
-      "rightRightCourtPlayer": "playerA"
-    },
-    "status": "live",
-    "targetDate": "2026-04-13",
-    "updatedAt": "2026-04-19T05:01:10.731Z",
-    "winnerTeamName": null
-  }
-]
+[]
--- a/server/server.mjs
+++ b/server/server.mjs
@@ -11,6 +11,7 @@ const matchTableName = process.env.DB_TABLE ?? 'badminton'
 const historyTableName = process.env.DB_HISTORY_TABLE ?? 'history'
 const appVersion = process.env.APP_VERSION ?? `${Date.now()}`
 const appStartedAt = new Date().toISOString()
+const LIVE_ROOM_STALE_MS = 30_000

 const currentFilePath = fileURLToPath(import.meta.url)
 const currentDir = path.dirname(currentFilePath)
@@ -77,6 +78,17 @@ app.get('/api/rooms', (_request, response) => {
  })
 })

+app.post('/api/rooms/reconcile', (_request, response) => {
+  const removedRoomIds = pruneStaleRooms()
+
+  response.json({
+    ok: true,
+    data: {
+      removedRoomIds,
+    },
+  })
+})
+
 app.get('/api/rooms/stream', (request, response) => {
  setupSse(response)
  roomListClients.add(response)
@@ -106,6 +118,7 @@ app.post('/api/rooms', (request, response) => {
    clients: new Set(),
    createdAt: now,
    hostToken,
+    hostSeenAt: now,
    roomId,
    status: 'live',
    updatedAt: now,
@@ -171,6 +184,35 @@ app.post('/api/rooms/:roomId/release', (request, response) => {
  })
 })

+app.post('/api/rooms/:roomId/heartbeat', (request, response) => {
+  const room = rooms.get(request.params.roomId)
+
+  if (!room) {
+    response.status(404).json({
+      ok: false,
+      message: '找不到這個房間。',
+    })
+    return
+  }
+
+  const { hostToken } = request.body ?? {}
+
+  if (typeof hostToken !== 'string' || hostToken !== room.hostToken) {
+    response.status(403).json({
+      ok: false,
+      message: '沒有權限更新房間心跳。',
+    })
+    return
+  }
+
+  room.hostSeenAt = new Date().toISOString()
+  persistRooms()
+
+  response.json({
+    ok: true,
+  })
+})
+
 app.get('/api/rooms/:roomId', (request, response) => {
  const room = rooms.get(request.params.roomId)

@@ -520,6 +562,8 @@ function loadPersistedRooms() {

      nextRooms.set(savedRoom.roomId, {
        ...savedRoom,
+        hostSeenAt:
+          typeof savedRoom.hostSeenAt === 'string' ? savedRoom.hostSeenAt : savedRoom.updatedAt,
        clients: new Set(),
      })
    })
@@ -540,6 +584,7 @@ function persistRooms() {
          createdAt: room.createdAt,
          groupId: room.groupId,
          hostToken: room.hostToken,
+          hostSeenAt: room.hostSeenAt,
          leftTeamName: room.leftTeamName,
          matchupLabel: room.matchupLabel,
          pointLog: room.pointLog,
@@ -618,6 +663,39 @@ function serializeRoom(room) {
  }
 }

+function pruneStaleRooms() {
+  const now = Date.now()
+  const removedRoomIds = []
+
+  rooms.forEach((room, roomId) => {
+    if (room.status !== 'live') {
+      return
+    }
+
+    const hostSeenAtTime = Date.parse(room.hostSeenAt ?? '')
+
+    if (!Number.isFinite(hostSeenAtTime) || now - hostSeenAtTime > LIVE_ROOM_STALE_MS) {
+      room.clients.forEach((client) => {
+        sendSse(client, 'room-closed', {
+          roomId: room.roomId,
+          status: 'stale',
+        })
+        client.end()
+      })
+
+      rooms.delete(roomId)
+      removedRoomIds.push(roomId)
+    }
+  })
+
+  if (removedRoomIds.length > 0) {
+    persistRooms()
+    broadcastRoomList()
+  }
+
+  return removedRoomIds
+}
+
 function getLiveRoomSummaries() {
  return Array.from(rooms.values())
    .filter((room) => room.status === 'live')
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import {
  loadMatchResults,
  releaseLiveRoom,
  saveMatchHistory,
+  sendLiveRoomHeartbeat,
  updateLiveRoom,
 } from './lib/api'
 import {
@@ -90,6 +91,7 @@ const STREAK_TITLES: Record<number, string> = {
 }
 const PWA_UPDATE_EVENT = 'badminton-scoreboard:pwa-update-ready'
 const APP_VERSION_POLL_MS = 30000
+const LIVE_ROOM_HEARTBEAT_MS = 10_000

 function App() {
  const location = useLocation()
@@ -129,6 +131,7 @@ function App() {
  const [victoryAnnouncement, setVictoryAnnouncement] = useState<VictoryAnnouncement | null>(null)
  const [pwaUpdateReady, setPwaUpdateReady] = useState(false)
  const [liveRoomSession, setLiveRoomSession] = useState<LiveRoomSession | null>(null)
+  const [navigationLockMessage, setNavigationLockMessage] = useState('')
  const currentAppVersionRef = useRef<string | null>(null)
  const creatingRoomRef = useRef(false)
  const lastSyncedRoomSignatureRef = useRef('')
@@ -139,6 +142,7 @@ function App() {
  const leftTeam = activeMatchup.leftTeam
  const rightTeam = activeMatchup.rightTeam
  const liveRoomId = liveRoomSession?.roomId ?? null
+  const isNavigationLocked = Boolean(leftTeam && rightTeam && scoreState.serving !== null)

  useEffect(() => {
    window.localStorage.setItem(STORAGE_KEYS.targetDate, targetDate)
@@ -192,6 +196,18 @@ function App() {
    return () => window.clearTimeout(timer)
  }, [victoryAnnouncement])

+  useEffect(() => {
+    if (!navigationLockMessage) {
+      return
+    }
+
+    const timer = window.setTimeout(() => {
+      setNavigationLockMessage('')
+    }, 1400)
+
+    return () => window.clearTimeout(timer)
+  }, [navigationLockMessage])
+
  useEffect(() => {
    const handlePwaUpdateReady = () => {
      setPwaUpdateReady(true)
@@ -482,6 +498,43 @@ function App() {
    isScoreboardRoute,
  ])

+  useEffect(() => {
+    if (!isNavigationLocked || isScoreboardRoute) {
+      return
+    }
+
+    navigate('/scoreboard', { replace: true })
+    setNavigationLockMessage('比賽進行中，請先完成結算。')
+  }, [isNavigationLocked, isScoreboardRoute, navigate])
+
+  useEffect(() => {
+    if (!isScoreboardRoute || !liveRoomSession || liveRoomSession.status !== 'live') {
+      return
+    }
+
+    let active = true
+
+    const syncHeartbeat = async () => {
+      try {
+        await sendLiveRoomHeartbeat(liveRoomSession.roomId, liveRoomSession.hostToken)
+      } catch (error) {
+        if (active) {
+          console.error('live room heartbeat error:', error)
+        }
+      }
+    }
+
+    void syncHeartbeat()
+    const timer = window.setInterval(() => {
+      void syncHeartbeat()
+    }, LIVE_ROOM_HEARTBEAT_MS)
+
+    return () => {
+      active = false
+      window.clearInterval(timer)
+    }
+  }, [isScoreboardRoute, liveRoomSession])
+
  useEffect(() => {
    if (!liveRoomSession || liveRoomSession.status !== 'live') {
      return
@@ -822,6 +875,15 @@ function App() {
    }
  }

+  const handleNavAttempt = (targetPath: string) => (event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (!isNavigationLocked || targetPath === '/scoreboard') {
+      return
+    }
+
+    event.preventDefault()
+    setNavigationLockMessage('比賽進行中，請先完成結算。')
+  }
+
  return (
    <div className={isScoreboardRoute ? 'app-shell app-shell-scoreboard' : 'app-shell'}>
      <header className={isScoreboardRoute ? 'topbar topbar-compact' : 'topbar'}>
@@ -837,16 +899,32 @@ function App() {
        </div>

        <nav className="topnav" aria-label="主要導覽">
-          <NavLink className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')} to="/teams">
+          <NavLink
+            className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')}
+            onClick={handleNavAttempt('/teams')}
+            to="/teams"
+          >
            選隊伍
          </NavLink>
-          <NavLink className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')} to="/scoreboard">
+          <NavLink
+            className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')}
+            onClick={handleNavAttempt('/scoreboard')}
+            to="/scoreboard"
+          >
            記分板
          </NavLink>
-          <NavLink className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')} to="/history">
+          <NavLink
+            className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')}
+            onClick={handleNavAttempt('/history')}
+            to="/history"
+          >
            歷史戰績
          </NavLink>
-          <NavLink className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')} to="/rooms">
+          <NavLink
+            className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')}
+            onClick={handleNavAttempt('/rooms')}
+            to="/rooms"
+          >
            房間列表
          </NavLink>
        </nav>
@@ -943,6 +1021,12 @@ function App() {
          </button>
        </div>
      ) : null}
+
+      {navigationLockMessage ? (
+        <div className="floating-status-bubble" role="status" aria-live="polite">
+          {navigationLockMessage}
+        </div>
+      ) : null}
    </div>
  )
 }
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -24,7 +24,7 @@ export async function loadMatchResults(time: string) {
  }

  if (!response.ok || !payload.ok) {
-    throw new Error(payload.message ?? '無法讀取對戰資料。')
+    throw new Error(payload.message ?? '讀取指定日期分組失敗。')
  }

  return payload.data ?? null
@@ -46,7 +46,7 @@ export async function saveMatchHistory(payload: HistoryUploadPayload) {
  }

  if (!response.ok || !result.ok || !result.data) {
-    throw new Error(result.message ?? '無法上傳戰績。')
+    throw new Error(result.message ?? '上傳戰績失敗。')
  }

  return result.data
@@ -61,7 +61,7 @@ export async function loadHistoryList() {
  }

  if (!response.ok || !payload.ok) {
-    throw new Error(payload.message ?? '無法讀取歷史戰績。')
+    throw new Error(payload.message ?? '讀取歷史戰績失敗。')
  }

  return (payload.data ?? []).map(normalizeHistoryRecord)
@@ -98,7 +98,7 @@ export async function createLiveRoom(payload: LiveRoomPayload) {
  }

  if (!response.ok || !result.ok || !result.data) {
-    throw new Error(result.message ?? '建立觀戰房間失敗。')
+    throw new Error(result.message ?? '建立房間失敗。')
  }

  return result.data
@@ -146,6 +146,46 @@ export async function releaseLiveRoom(roomId: string, hostToken: string) {
  }
 }

+export async function sendLiveRoomHeartbeat(roomId: string, hostToken: string) {
+  const response = await fetch(`/api/rooms/${roomId}/heartbeat`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ hostToken }),
+    keepalive: true,
+  })
+
+  const result = (await readJsonSafely(response)) as {
+    ok?: boolean
+    message?: string
+  }
+
+  if (!response.ok || !result.ok) {
+    throw new Error(result.message ?? '更新房間心跳失敗。')
+  }
+}
+
+export async function reconcileLiveRooms() {
+  const response = await fetch('/api/rooms/reconcile', {
+    method: 'POST',
+  })
+
+  const result = (await readJsonSafely(response)) as {
+    ok?: boolean
+    message?: string
+    data?: {
+      removedRoomIds?: string[]
+    }
+  }
+
+  if (!response.ok || !result.ok) {
+    throw new Error(result.message ?? '清理無主房間失敗。')
+  }
+
+  return result.data?.removedRoomIds ?? []
+}
+
 export async function loadLiveRoomList() {
  const response = await fetch('/api/rooms')
  const result = (await readJsonSafely(response)) as {
@@ -178,7 +218,7 @@ export async function loadLiveRoom(roomId: string) {
  }

  if (!response.ok || !result.ok || !result.data) {
-    throw new Error(result.message ?? '載入房間內容失敗。')
+    throw new Error(result.message ?? '載入觀戰房間失敗。')
  }

  return result.data
@@ -271,7 +311,7 @@ function parseJson<T>(value: string | null, fallback: T): T {
 }

 function getDayLabel(dayOfWeek: number) {
-  const labels = ['週日', '週一', '週二', '週三', '週四', '週五', '週六']
+  const labels = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  return labels[dayOfWeek] ?? '-'
 }

--- a/src/main.tsx
+++ b/src/main.tsx
@@ -43,7 +43,11 @@ if ('serviceWorker' in navigator) {
      window.location.reload()
    })

-    void navigator.serviceWorker.register('/sw.js').then((registration) => {
+    void navigator.serviceWorker
+      .register('/sw.js', {
+        updateViaCache: 'none',
+      })
+      .then((registration) => {
      if (registration.waiting) {
        notifyUpdateReady()
      }
@@ -52,6 +56,7 @@ if ('serviceWorker' in navigator) {
      registration.addEventListener('updatefound', () => {
        trackWorker(registration.installing)
      })
+      void registration.update()
    })
  })
 }
--- a/src/pages/RoomListPage.tsx
+++ b/src/pages/RoomListPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { loadLiveRoomList, subscribeRoomList } from '../lib/api'
+import { loadLiveRoomList, reconcileLiveRooms, subscribeRoomList } from '../lib/api'
 import type { LiveRoomSummary } from '../types'

 const REFRESH_COOLDOWN_SECONDS = 5
@@ -10,23 +10,20 @@ export function RoomListPage() {
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)
  const [refreshCooldown, setRefreshCooldown] = useState(0)
+  const [refreshMessage, setRefreshMessage] = useState('')
  const [rooms, setRooms] = useState<LiveRoomSummary[]>([])
  const loadingRef = useRef(false)

  useEffect(() => {
    let active = true

-    const loadRooms = async (options?: { manual?: boolean }) => {
+    const loadRooms = async () => {
      if (loadingRef.current) {
        return
      }

      loadingRef.current = true

-      if (options?.manual) {
-        setRefreshing(true)
-      }
-
      try {
        const nextRooms = await loadLiveRoomList()

@@ -47,9 +44,6 @@ export function RoomListPage() {

        if (active) {
          setLoading(false)
-          if (options?.manual) {
-            setRefreshing(false)
-          }
        }
      }
    }
@@ -83,6 +77,18 @@ export function RoomListPage() {
    return () => window.clearTimeout(timer)
  }, [refreshCooldown])

+  useEffect(() => {
+    if (!refreshMessage) {
+      return
+    }
+
+    const timer = window.setTimeout(() => {
+      setRefreshMessage('')
+    }, 2000)
+
+    return () => window.clearTimeout(timer)
+  }, [refreshMessage])
+
  const refreshRoomList = async () => {
    if (refreshCooldown > 0 || loadingRef.current) {
      return
@@ -93,9 +99,15 @@ export function RoomListPage() {
    setRefreshCooldown(REFRESH_COOLDOWN_SECONDS)

    try {
+      const removedRoomIds = await reconcileLiveRooms()
      const nextRooms = await loadLiveRoomList()
      setRooms(nextRooms)
      setError('')
+      setRefreshMessage(
+        removedRoomIds.length > 0
+          ? `已清掉 ${removedRoomIds.length} 個無主房間。`
+          : '已檢查房間列表，沒有需要清理的房間。',
+      )
    } catch (loadError) {
      setError(loadError instanceof Error ? loadError.message : '載入房間列表失敗。')
    } finally {
@@ -129,6 +141,7 @@ export function RoomListPage() {
          </button>
        </div>

+        {refreshMessage ? <p className="selection-hint">{refreshMessage}</p> : null}
        {loading ? <p>正在載入房間列表...</p> : null}
        {!loading && error ? <p className="history-empty">{error}</p> : null}
        {!loading && !error && rooms.length === 0 ? (
--- a/src/pages/RoomSpectatorPage.tsx
+++ b/src/pages/RoomSpectatorPage.tsx
@@ -86,10 +86,13 @@ export function RoomSpectatorPage({ onConfirmFinished }: RoomSpectatorPageProps)
          return
        }

-        if (payload.status === 'released') {
+        if (payload.status === 'released' || payload.status === 'stale') {
          setRoomClosedDialog({
            title: '房間已關閉',
-            message: '房主已重整頁面、離開記分板或重新選隊伍，本房間已結束觀戰。',
+            message:
+              payload.status === 'stale'
+                ? '這個房間已經沒有主控在線上，系統已自動清理並結束觀戰。'
+                : '房主已重整頁面、離開記分板或重新選隊伍，本房間已結束觀戰。',
          })
          setLoading(false)
        }