From 260ad581f6bdab6ab53ae90b891946ba536dc2b3 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 11:56:21 +0800
Subject: [PATCH 01/60] feat(contest): refresh student dashboard

---
 .../apps/contests/exporters/data_service.py   |   5 +-
 backend/apps/contests/exporters/dto.py        |   2 +-
 .../0077_remove_contest_anonymous_mode.py     |  19 +
 backend/apps/contests/models.py               |  16 -
 backend/apps/contests/serializers.py          |  71 +-
 .../apps/contests/services/export_service.py  |   3 +-
 .../services/participant_dashboard.py         |   4 +-
 backend/apps/contests/services/scoreboard.py  |  11 +-
 .../test_contest_viewset_actions.py           |  33 +-
 .../tests/participation/test_participation.py |  27 -
 .../standings/test_contest_legacy_flows.py    |  48 --
 .../tests/test_participant_dashboard_api.py   |   1 -
 backend/apps/contests/views/contest.py        |  44 -
 backend/apps/contests/views/exam_answer.py    |  17 +-
 .../management/commands/seed_loadtest_data.py |   2 +-
 frontend/src/core/entities/contest.entity.ts  |  11 +-
 frontend/src/core/ports/contest.repository.ts |   3 +-
 .../contest/joinContest.usecase.test.ts       |   5 +-
 .../usecases/contest/joinContest.usecase.ts   |   7 +-
 .../src/features/app/components/UserMenu.tsx  |  69 --
 .../contest/components/ContestScoreboard.tsx  |   5 +-
 .../contest/components/ExamModeWrapper.tsx    |   6 +-
 .../admin/AdminInsightRail.module.scss        |  32 +-
 .../components/admin/AdminInsightRail.tsx     | 106 ++-
 .../admin/AdminOverviewCommandCenter.test.tsx |  34 +-
 .../admin/AdminOverviewCommandCenter.tsx      |  18 +-
 .../admin/examEditor/hooks/useExamAutoSave.ts |   1 -
 .../settings/ContestSettingsModal.stories.tsx |   3 +-
 .../admin/settings/DisplaySettingsPanel.tsx   |  16 -
 .../ContestResultDashboardPanel.tsx           |   2 -
 .../statistics/QuestionStatisticsDetail.tsx   |   2 +-
 .../statistics/contestResultDashboard.mock.ts |  49 +-
 .../contestResultDashboard.transform.ts       |   4 +-
 .../statistics/useContestResultDashboard.ts   |   4 -
 .../statistics/useExamStatistics.test.ts      |   2 +-
 .../admin/statistics/useExamStatistics.ts     |   4 +-
 .../components/layout/ContestExitModal.tsx    |   2 +-
 .../contest/components/layout/ContestHero.tsx |  57 +-
 .../layout/ContestLayout.module.scss          |   7 +
 .../components/layout/ContestLayout.tsx       |  77 +-
 .../modals/ContestRegistrationModal.tsx       |  41 +-
 .../participants/ParticipantDashboardPane.tsx |   9 +-
 .../ParticipantOperationsPane.tsx             |  10 +-
 .../ParticipantsListPane.test.tsx             |   7 +-
 .../participants/ParticipantsListPane.tsx     |   6 +-
 .../StudentContestDashboard.module.scss       | 353 ++++++++
 .../StudentContestDashboardView.test.tsx      | 378 +++++++++
 .../StudentContestDashboardView.tsx           | 760 ++++++++++++++++++
 .../studentDashboardState.test.ts             | 113 +++
 .../studentDashboard/studentDashboardState.ts | 110 +++
 .../domain/contestRuntimePolicy.test.ts       |   1 +
 .../contest/domain/contestRuntimePolicy.ts    |   5 +-
 .../contest/hooks/useContestExamActions.ts    |   3 +-
 .../screens/ContestDashboardScreen.tsx        | 113 +--
 .../screens/ContestPreRegistrationScreen.tsx  |  16 +-
 .../panels/AdminContestSettingsScreen.tsx     |   1 -
 .../admin/panels/AdminOverviewScreen.tsx      |  53 +-
 .../admin/panels/AdminProctoringPanel.tsx     |   4 -
 .../adminOverviewDashboard.model.test.ts      |   2 +-
 .../panels/adminOverviewDashboard.model.ts    |   5 +-
 .../screens/paperExam/usePaperExamFlow.ts     |   2 +-
 .../settings/ContestExamGradingScreen.tsx     |   1 -
 .../grading/GradingByQuestionTabScreen.tsx    |  11 +-
 .../grading/GradingByStudentTabScreen.tsx     |  15 +-
 .../settings/grading/GradingCardViewOnly.tsx  |   8 +-
 .../grading/GradingMatrixViewScreen.test.tsx  |   8 +-
 .../grading/GradingMatrixViewScreen.tsx       |   2 -
 .../grading/GradingSplitPanelScreen.test.tsx  |   2 +-
 .../grading/GradingSplitPanelScreen.tsx       |   6 +-
 .../settings/grading/buildGradingRows.ts      |   6 +-
 .../screens/settings/grading/gradingTypes.ts  |   2 +-
 .../settings/grading/objectiveRegrade.test.ts |   2 +-
 .../grading/useAiGradingScreenData.ts         |   4 +-
 .../settings/grading/useGradingData.ts        |  23 +-
 .../src/infrastructure/api/dto/contest.dto.ts |   5 -
 .../api/repositories/contest.repository.ts    |   2 +-
 .../contestParticipants.repository.ts         |  12 -
 .../api/repositories/exam.repository.ts       |   5 +-
 .../repositories/examAnswers.repository.ts    |   6 +-
 .../mappers/contest.mapper.test.ts            |  18 +
 .../infrastructure/mappers/contest.mapper.ts  |  11 +-
 frontend/src/shared/mocks/contest.mock.ts     |   1 -
 82 files changed, 2159 insertions(+), 812 deletions(-)
 create mode 100644 backend/apps/contests/migrations/0077_remove_contest_anonymous_mode.py
 create mode 100644 frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss
 create mode 100644 frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
 create mode 100644 frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
 create mode 100644 frontend/src/features/contest/components/studentDashboard/studentDashboardState.test.ts
 create mode 100644 frontend/src/features/contest/components/studentDashboard/studentDashboardState.ts

diff --git a/backend/apps/contests/exporters/data_service.py b/backend/apps/contests/exporters/data_service.py
index afa05b45..666c3c35 100644
--- a/backend/apps/contests/exporters/data_service.py
+++ b/backend/apps/contests/exporters/data_service.py
@@ -105,11 +105,12 @@ def get_participants(self) -> List[ParticipantDTO]:
 
         result = []
         for p in participants:
+            profile = getattr(p.user, 'profile', None)
             result.append(ParticipantDTO(
                 user_id=p.user.id,
                 username=p.user.username,
                 email=getattr(p.user, 'email', ''),
-                nickname=getattr(p, 'nickname', '') or '',
+                display_name=getattr(profile, 'display_name', '') or '',
                 exam_status=getattr(p, 'exam_status', ''),
                 started_at=getattr(p, 'started_at', None),
                 left_at=getattr(p, 'left_at', None),
@@ -178,7 +179,7 @@ def calculate_standings(self, user_id: Optional[int] = None) -> StandingsDTO:
             stats[p.user_id] = UserStandingDTO(
                 user_id=p.user_id,
                 username=p.username,
-                display_name=p.nickname or p.username,
+                display_name=p.display_name or p.username,
                 problems=problem_stats,
             )
 
diff --git a/backend/apps/contests/exporters/dto.py b/backend/apps/contests/exporters/dto.py
index a9596022..db3d8a9b 100644
--- a/backend/apps/contests/exporters/dto.py
+++ b/backend/apps/contests/exporters/dto.py
@@ -74,7 +74,7 @@ class ParticipantDTO:
     user_id: int
     username: str
     email: str = ''
-    nickname: str = ''
+    display_name: str = ''
     exam_status: str = ''
     started_at: Optional[datetime] = None
     left_at: Optional[datetime] = None
diff --git a/backend/apps/contests/migrations/0077_remove_contest_anonymous_mode.py b/backend/apps/contests/migrations/0077_remove_contest_anonymous_mode.py
new file mode 100644
index 00000000..8dd96514
--- /dev/null
+++ b/backend/apps/contests/migrations/0077_remove_contest_anonymous_mode.py
@@ -0,0 +1,19 @@
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("contests", "0076_unique_exam_question_order"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="contest",
+            name="anonymous_mode_enabled",
+        ),
+        migrations.RemoveField(
+            model_name="contestparticipant",
+            name="nickname",
+        ),
+    ]
diff --git a/backend/apps/contests/models.py b/backend/apps/contests/models.py
index 6c78b552..c5d2cd12 100644
--- a/backend/apps/contests/models.py
+++ b/backend/apps/contests/models.py
@@ -215,13 +215,6 @@ class QuestionEditLockTrigger(models.TextChoices):
         help_text='TA 完成批改後手動設為 True，學生才能查看成績'
     )
     
-    # Anonymous mode settings
-    anonymous_mode_enabled = models.BooleanField(
-        default=False,
-        verbose_name='啟用匿名模式',
-        help_text='啟用後學生可使用暱稱參與競賽，排行榜和提交列表顯示暱稱'
-    )
-    
     created_at = models.DateTimeField(auto_now_add=True, verbose_name='建立時間')
     updated_at = models.DateTimeField(auto_now=True, verbose_name='更新時間')
     
@@ -483,15 +476,6 @@ class ContestParticipant(models.Model):
         help_text='手動或系統自動交卷原因'
     )
     
-    # Anonymous mode nickname
-    nickname = models.CharField(
-        max_length=50,
-        blank=True,
-        default='',
-        verbose_name='暱稱',
-        help_text='匿名模式下顯示的名稱，預設為用戶名'
-    )
-    
     # Explicit exam state (primary state field for UI)
     exam_status = models.CharField(
         max_length=20,
diff --git a/backend/apps/contests/serializers.py b/backend/apps/contests/serializers.py
index e56b4c83..cfd03bb7 100644
--- a/backend/apps/contests/serializers.py
+++ b/backend/apps/contests/serializers.py
@@ -95,7 +95,6 @@ class ContestDetailSerializer(serializers.ModelSerializer):
     accepted_at = serializers.SerializerMethodField()
     submitted_at = serializers.SerializerMethodField()
     auto_unlock_at = serializers.SerializerMethodField()
-    my_nickname = serializers.SerializerMethodField()
     problems = serializers.SerializerMethodField()
     participant_count = serializers.SerializerMethodField()
     admins = serializers.SerializerMethodField()
@@ -139,7 +138,6 @@ class Meta:
             'created_at',
             'updated_at',
             # Computed fields
-            'my_nickname',
             'current_user_role',
             'permissions',
             'has_joined',
@@ -159,7 +157,6 @@ class Meta:
             'max_cheat_warnings',
             'allow_auto_unlock',
             'auto_unlock_minutes',
-            'anonymous_mode_enabled',
             'participant_count',
             'admins',
             'is_classroom_bound',
@@ -193,11 +190,6 @@ def _get_current_registration(self, obj):
             cache[cache_key] = obj.registrations.filter(user=user).first()
         return cache[cache_key]
 
-    def get_my_nickname(self, obj):
-        """Get nickname for current user."""
-        registration = self._get_current_registration(obj)
-        return registration.nickname if registration else None
-
     def get_lock_reason(self, obj):
         """Get lock reason for current user."""
         registration = self._get_current_registration(obj)
@@ -414,7 +406,6 @@ class Meta:
             'allow_auto_unlock',
             'auto_unlock_minutes',
             'status',
-            'anonymous_mode_enabled',
             'results_published',
         ]
         read_only_fields = ['id']
@@ -864,25 +855,8 @@ class Meta:
         read_only_fields = ['author', 'status', 'answered_at', 'author_username', 'author_display_name', 'problem_title']
 
     def get_author_display_name(self, obj):
-        """根據匿名模式返回適當的作者名稱"""
-        request = self.context.get('request')
-        contest = obj.contest
-        
-        if not contest.anonymous_mode_enabled:
-            return obj.author.username
-        
-        # 管理者可見真實名稱
-        if request and request.user.is_authenticated:
-            from .permissions import get_user_role_in_contest
-            role = get_user_role_in_contest(request.user, contest)
-            if role in ['admin', 'owner', 'teacher']:
-                return obj.author.username
-
-        # 查找該用戶的暱稱
-        participant = ContestParticipant.objects.filter(
-            contest=contest, user=obj.author
-        ).first()
-        return participant.nickname if participant else obj.author.username
+        profile = getattr(obj.author, 'profile', None)
+        return getattr(profile, 'display_name', '') or obj.author.username
 
 
 class ClarificationCreateSerializer(serializers.ModelSerializer):
@@ -1070,9 +1044,7 @@ class ContestParticipantSerializer(serializers.ModelSerializer):
     user = UserSerializer(read_only=True)
     user_id = serializers.IntegerField(source='user.id', read_only=True)
     username = serializers.CharField(source='user.username', read_only=True)
-    nickname = serializers.CharField(read_only=True)
     display_name = serializers.SerializerMethodField()
-    user_display_name = serializers.SerializerMethodField()
     account_role = serializers.CharField(source='user.role', read_only=True)
     auth_provider = serializers.CharField(source='user.auth_provider', read_only=True)
     total_score = serializers.SerializerMethodField()
@@ -1090,7 +1062,7 @@ class Meta:
             'user_id', 'username', 'user', 'score', 'total_score', 'rank', 
             'joined_at', 'exam_status',
             'lock_reason', 'violation_count', 'submit_reason', 'auto_unlock_at', 'remaining_unlock_seconds',
-            'nickname', 'display_name', 'user_display_name', 'account_role', 'auth_provider',
+            'display_name', 'account_role', 'auth_provider',
             'connection_status', 'last_heartbeat_at', 'live_monitoring_online', 'live_monitoring_sources',
         ]
 
@@ -1180,23 +1152,8 @@ def get_total_score(self, obj):
         return total
 
     def get_display_name(self, obj):
-        """根據權限返回適當的顯示名稱"""
-        request = self.context.get('request')
-        contest = obj.contest
-        
-        # 非匿名模式，直接返回真實用戶名
-        if not contest.anonymous_mode_enabled:
-            return obj.user.username
-        
-        # 管理者可見真實名稱
-        if request and request.user.is_authenticated:
-            from .permissions import get_user_role_in_contest
-            role = get_user_role_in_contest(request.user, contest)
-            if role in ['admin', 'owner', 'teacher']:
-                return obj.user.username
-
-        # 其他用戶看暱稱 (nickname 預設為 username)
-        return obj.nickname or obj.user.username
+        profile = getattr(obj.user, 'profile', None)
+        return getattr(profile, 'display_name', '') or ""
 
     def get_auto_unlock_at(self, obj):
         """Calculate auto unlock time if applicable."""
@@ -1218,13 +1175,6 @@ def get_remaining_unlock_seconds(self, obj):
             
         return int((unlock_at - now).total_seconds())
 
-    def get_user_display_name(self, obj):
-        profile = getattr(obj.user, 'profile', None)
-        if not profile:
-            return ""
-        return profile.display_name or ""
-
-
 # ============================================================================
 # Exam Answer Serializers
 # ============================================================================
@@ -1258,7 +1208,7 @@ class ExamAnswerDetailSerializer(serializers.ModelSerializer):
     )
     participant_user_id = serializers.SerializerMethodField()
     participant_username = serializers.SerializerMethodField()
-    participant_nickname = serializers.SerializerMethodField()
+    participant_display_name = serializers.SerializerMethodField()
 
     class Meta:
         model = ExamAnswer
@@ -1268,7 +1218,7 @@ class Meta:
             'answer', 'is_correct', 'score', 'feedback',
             'question_snapshot',
             'graded_by_username', 'graded_at',
-            'participant_user_id', 'participant_username', 'participant_nickname',
+            'participant_user_id', 'participant_username', 'participant_display_name',
             'created_at', 'updated_at',
         ]
         read_only_fields = fields
@@ -1304,15 +1254,16 @@ def get_participant_user_id(self, obj):
     def get_participant_username(self, obj):
         return obj.participant.user.username
 
-    def get_participant_nickname(self, obj):
-        return obj.participant.nickname or obj.participant.user.username
+    def get_participant_display_name(self, obj):
+        profile = getattr(obj.participant.user, 'profile', None)
+        return getattr(profile, 'display_name', '') or ""
 
 
 class ExamAnswerGradingSerializer(serializers.ModelSerializer):
     """Slim serializer for grading screens.
 
     Drops redundant per-row duplicates (question_prompt/type/options/explanation/
-    max_score/question_snapshot and participant_username/nickname). Consumers
+    max_score/question_snapshot and participant_username/display_name). Consumers
     should join question info via GET /exam-questions/ and participant info via
     contest participants list — both are O(题数) / O(学生数) rather than
     O(answers)."""
diff --git a/backend/apps/contests/services/export_service.py b/backend/apps/contests/services/export_service.py
index 035dba57..9b3e216e 100644
--- a/backend/apps/contests/services/export_service.py
+++ b/backend/apps/contests/services/export_service.py
@@ -163,7 +163,8 @@ def build_paper_exam_results_csv_response(contest):
     participant_count = len(students)
 
     for p in students:
-        display_name = p.nickname or p.user.username
+        profile = getattr(p.user, 'profile', None)
+        display_name = getattr(profile, 'display_name', '') or ''
         status_label = p.get_exam_status_display()
         p_answers = answer_lookup.get(p.id, {})
         graded_count = sum(
diff --git a/backend/apps/contests/services/participant_dashboard.py b/backend/apps/contests/services/participant_dashboard.py
index aa7a2ab9..871e6bfb 100644
--- a/backend/apps/contests/services/participant_dashboard.py
+++ b/backend/apps/contests/services/participant_dashboard.py
@@ -79,9 +79,7 @@ def _serialize_participant(participant: ContestParticipant) -> dict[str, Any]:
     return {
         "user_id": participant.user_id,
         "username": participant.user.username,
-        "nickname": participant.nickname or participant.user.username,
-        "display_name": participant.nickname or participant.user.username,
-        "user_display_name": getattr(profile, "display_name", "") or "",
+        "display_name": getattr(profile, "display_name", "") or "",
         "account_role": getattr(participant.user, "role", "student"),
         "auth_provider": getattr(participant.user, "auth_provider", "email"),
         "email": getattr(participant.user, "email", ""),
diff --git a/backend/apps/contests/services/scoreboard.py b/backend/apps/contests/services/scoreboard.py
index 427e90ed..dc477ba4 100644
--- a/backend/apps/contests/services/scoreboard.py
+++ b/backend/apps/contests/services/scoreboard.py
@@ -88,7 +88,6 @@ def calculate(contest: Contest, user_scope: ScoreboardScope) -> ScoreboardResult
             stats[participant.user.id] = {
                 "user": UserSerializer(participant.user).data,
                 "display_name": display_name,
-                "nickname": participant.nickname,
                 "solved": 0,
                 "rank": participant.rank,
                 "score": participant.score,
@@ -177,11 +176,5 @@ def _build_display_name(
         is_privileged: bool,
         use_export_display: bool,
     ) -> str:
-        if use_export_display:
-            return participant.nickname or participant.user.username
-
-        if not contest.anonymous_mode_enabled:
-            return participant.user.username
-        if is_privileged:
-            return participant.user.username
-        return participant.nickname or participant.user.username
+        profile = getattr(participant.user, "profile", None)
+        return getattr(profile, "display_name", "") or participant.user.username
diff --git a/backend/apps/contests/tests/management/test_contest_viewset_actions.py b/backend/apps/contests/tests/management/test_contest_viewset_actions.py
index fd64de60..3b630736 100644
--- a/backend/apps/contests/tests/management/test_contest_viewset_actions.py
+++ b/backend/apps/contests/tests/management/test_contest_viewset_actions.py
@@ -276,7 +276,7 @@ def test_owner_can_list_participants(
     assert response.status_code == status.HTTP_200_OK
     assert len(response.data) == 1
     assert response.data[0]["user"]["id"] == student.id
-    assert response.data[0]["user_display_name"] == "Student Display"
+    assert response.data[0]["display_name"] == "Student Display"
     assert response.data[0]["account_role"] == student.role
     assert response.data[0]["auth_provider"] == student.auth_provider
 
@@ -455,37 +455,6 @@ def test_register_rejects_non_published_contest(
     assert response.data["message"] == "Contest is not published"
 
 
-@pytest.mark.django_db
-def test_update_nickname_handles_not_registered_and_blank_nickname(
-    api_client: APIClient,
-    contest: Contest,
-    student: User,
-) -> None:
-    contest.anonymous_mode_enabled = True
-    contest.save(update_fields=["anonymous_mode_enabled"])
-    api_client.force_authenticate(user=student)
-
-    not_registered = api_client.post(
-        f"/api/v1/contests/{contest.id}/update_nickname/",
-        {"nickname": "newname"},
-        format="json",
-    )
-    assert not_registered.status_code == status.HTTP_400_BAD_REQUEST
-    assert not_registered.data["error"] == "Not registered for this contest"
-
-    participant = ContestParticipant.objects.create(contest=contest, user=student, nickname="old")
-    response = api_client.post(
-        f"/api/v1/contests/{contest.id}/update_nickname/",
-        {"nickname": "   "},
-        format="json",
-    )
-
-    assert response.status_code == status.HTTP_200_OK
-    participant.refresh_from_db()
-    assert participant.nickname == student.username
-    assert response.data["nickname"] == student.username
-
-
 @pytest.mark.django_db
 def test_enter_privileged_user_and_leave_without_registration(
     api_client: APIClient,
diff --git a/backend/apps/contests/tests/participation/test_participation.py b/backend/apps/contests/tests/participation/test_participation.py
index b735c5a9..4fb18049 100644
--- a/backend/apps/contests/tests/participation/test_participation.py
+++ b/backend/apps/contests/tests/participation/test_participation.py
@@ -252,30 +252,3 @@ def test_enter_and_leave_contest(self):
         # Try to enter again
         response = self.client.post(url_enter)
         self.assertEqual(response.status_code, status.HTTP_403_FORBIDDEN)
-
-    def test_update_nickname_requires_anonymous_mode(self):
-        ContestParticipant.objects.create(contest=self.public_contest, user=self.user)
-        url = reverse('contests:contest-update-nickname', args=[self.public_contest.id])
-        response = self.client.post(url, {'nickname': 'alias'})
-        self.assertEqual(response.status_code, status.HTTP_400_BAD_REQUEST)
-        self.assertEqual(response.data.get('error'), 'Anonymous mode is not enabled for this contest')
-
-    def test_update_nickname_rejects_long_value(self):
-        contest = Contest.objects.create(
-            name='Anonymous Contest',
-            start_time=timezone.now(),
-            end_time=timezone.now() + timedelta(hours=2),
-            owner=self.admin,
-            visibility='public',
-            status='published',
-            anonymous_mode_enabled=True,
-        )
-        ContestParticipant.objects.create(contest=contest, user=self.user)
-        long_nickname = 'n' * 51
-        url = reverse('contests:contest-update-nickname', args=[contest.id])
-        response = self.client.post(url, {'nickname': long_nickname})
-        self.assertEqual(response.status_code, status.HTTP_400_BAD_REQUEST)
-        self.assertEqual(
-            response.data.get('error'),
-            'Nickname is too long (max 50 characters)',
-        )
diff --git a/backend/apps/contests/tests/standings/test_contest_legacy_flows.py b/backend/apps/contests/tests/standings/test_contest_legacy_flows.py
index a1a27795..4269b04a 100644
--- a/backend/apps/contests/tests/standings/test_contest_legacy_flows.py
+++ b/backend/apps/contests/tests/standings/test_contest_legacy_flows.py
@@ -62,7 +62,6 @@ class Meta:
     contest = factory.SubFactory(ContestFactory)
     user = factory.SubFactory(UserFactory)
     exam_status = ExamStatus.IN_PROGRESS
-    nickname = ""
 
 
 class ContestProblemBindingFactory(factory.django.DjangoModelFactory):
@@ -223,53 +222,6 @@ def test_standings_shows_problem_titles_for_admins(
         assert problem.get("title") is not None
 
 
-@pytest.mark.django_db
-def test_anonymous_mode_uses_nickname_for_students(
-    api_client: APIClient,
-) -> None:
-    teacher = UserFactory(role="teacher")
-    viewer = UserFactory()
-    other = UserFactory()
-    contest, _ = create_contest_with_problem(
-        owner=teacher,
-        scoreboard_visible_during_contest=True,
-        anonymous_mode_enabled=True,
-    )
-    ContestParticipantFactory(contest=contest, user=viewer, nickname="alpha")
-    ContestParticipantFactory(contest=contest, user=other, nickname="beta")
-
-    api_client.force_authenticate(user=viewer)
-    response = api_client.get(f"/api/v1/contests/{contest.id}/standings/")
-
-    assert response.status_code == 200
-    display_names = {entry["display_name"] for entry in response.data.get("standings", [])}
-    assert "alpha" in display_names
-    assert "beta" in display_names
-
-
-@pytest.mark.django_db
-def test_anonymous_mode_admin_sees_real_names(
-    api_client: APIClient,
-) -> None:
-    teacher = UserFactory(role="teacher")
-    admin = UserFactory(role="admin", is_staff=True)
-    participant = UserFactory()
-    contest, _ = create_contest_with_problem(
-        owner=teacher,
-        scoreboard_visible_during_contest=True,
-        anonymous_mode_enabled=True,
-    )
-    ContestParticipantFactory(contest=contest, user=participant, nickname="alias")
-
-    api_client.force_authenticate(user=admin)
-    response = api_client.get(f"/api/v1/contests/{contest.id}/standings/")
-
-    assert response.status_code == 200
-    display_names = {entry["display_name"] for entry in response.data.get("standings", [])}
-    assert participant.username in display_names
-    assert "alias" not in display_names
-
-
 @pytest.mark.django_db
 def test_standings_excludes_test_submissions_from_score(
     api_client: APIClient,
diff --git a/backend/apps/contests/tests/test_participant_dashboard_api.py b/backend/apps/contests/tests/test_participant_dashboard_api.py
index 6898b2df..f51cbbb3 100644
--- a/backend/apps/contests/tests/test_participant_dashboard_api.py
+++ b/backend/apps/contests/tests/test_participant_dashboard_api.py
@@ -63,7 +63,6 @@ def _create_participant(self, contest: Contest) -> ContestParticipant:
             user=self.student,
             exam_status=ExamStatus.IN_PROGRESS,
             started_at=timezone.now() - timedelta(minutes=20),
-            nickname="Stu Dashboard",
             score=12,
             violation_count=2,
         )
diff --git a/backend/apps/contests/views/contest.py b/backend/apps/contests/views/contest.py
index 17b16314..c80a9c43 100644
--- a/backend/apps/contests/views/contest.py
+++ b/backend/apps/contests/views/contest.py
@@ -212,7 +212,6 @@ def _ensure_classroom_bound_participant(self, contest: Contest, user):
                     if contest.delivery_mode == "practice"
                     else AssignmentState.ACCEPTED
                 ),
-                "nickname": user.username,
             },
         )
         return participant, created, None
@@ -855,9 +854,6 @@ def register(self, request, pk=None):
         )
         if error_response is not None:
             return error_response
-        if participant.nickname != user.username and not participant.nickname:
-            participant.nickname = user.username
-            participant.save(update_fields=["nickname"])
         if not created:
             raise DRFValidationError('Already registered')
         ContestActivityViewSet.log_activity(
@@ -871,46 +867,6 @@ def register(self, request, pk=None):
             status=status.HTTP_201_CREATED,
         )
 
-    @action(detail=True, methods=['post'], permission_classes=[permissions.IsAuthenticated], url_path='update_nickname')
-    def update_nickname(self, request, pk=None):
-        """
-        Allow user to update their nickname in an anonymous contest.
-        """
-        contest = self.get_object()
-        user = request.user
-
-        if not contest.anonymous_mode_enabled:
-            return Response(
-                {'error': 'Anonymous mode is not enabled for this contest'},
-                status=status.HTTP_400_BAD_REQUEST
-            )
-
-        try:
-            participant = ContestParticipant.objects.get(contest=contest, user=user)
-        except ContestParticipant.DoesNotExist:
-            return Response(
-                {'error': 'Not registered for this contest'},
-                status=status.HTTP_400_BAD_REQUEST
-            )
-
-        nickname = request.data.get('nickname', '').strip()
-        if not nickname:
-            nickname = user.username
-
-        if len(nickname) > 50:
-            return Response(
-                {'error': 'Nickname is too long (max 50 characters)'},
-                status=status.HTTP_400_BAD_REQUEST
-            )
-
-        participant.nickname = nickname
-        participant.save()
-
-        return Response({
-            'status': 'updated',
-            'nickname': nickname
-        })
-
     @action(detail=True, methods=['post'], permission_classes=[permissions.IsAuthenticated])
     def enter(self, request, pk=None):
         """
diff --git a/backend/apps/contests/views/exam_answer.py b/backend/apps/contests/views/exam_answer.py
index 86f4ca5f..a83ba3b8 100644
--- a/backend/apps/contests/views/exam_answer.py
+++ b/backend/apps/contests/views/exam_answer.py
@@ -64,6 +64,11 @@ def _student_participants_qs(self, contest):
             user__role='student',
         ).select_related('user')
 
+    @staticmethod
+    def _participant_display_name(participant):
+        profile = getattr(participant.user, 'profile', None)
+        return getattr(profile, 'display_name', '') or ''
+
     @staticmethod
     def _build_score_distribution(scores, max_score):
         buckets = [
@@ -151,8 +156,7 @@ def _build_option_distribution(cls, question, answers, participants_by_id):
                         participants.append({
                             'participant_id': participant.id,
                             'username': participant.user.username,
-                            'nickname': participant.nickname or None,
-                            'display_name': participant.nickname or participant.user.username,
+                            'display_name': cls._participant_display_name(participant),
                         })
 
             if isinstance(correct_answer, list):
@@ -544,8 +548,7 @@ def question_detail(self, request, contest_pk=None):
             {
                 'participant_id': participant.id,
                 'username': participant.user.username,
-                'nickname': participant.nickname or None,
-                'display_name': participant.nickname or participant.user.username,
+                'display_name': self._participant_display_name(participant),
             }
             for participant in participants
             if participant.id not in answered_participant_ids
@@ -560,10 +563,8 @@ def question_detail(self, request, contest_pk=None):
                     'exam_answer_id': answer['id'],
                     'participant_id': answer['participant_id'],
                     'username': participants_by_id[answer['participant_id']].user.username,
-                    'nickname': participants_by_id[answer['participant_id']].nickname or None,
-                    'display_name': (
-                        participants_by_id[answer['participant_id']].nickname
-                        or participants_by_id[answer['participant_id']].user.username
+                    'display_name': self._participant_display_name(
+                        participants_by_id[answer['participant_id']],
                     ),
                     'score': float(answer['score']) if answer['score'] is not None else None,
                     'graded_at': answer['graded_at'],
diff --git a/backend/apps/core/management/commands/seed_loadtest_data.py b/backend/apps/core/management/commands/seed_loadtest_data.py
index c87614e1..dbfc132d 100644
--- a/backend/apps/core/management/commands/seed_loadtest_data.py
+++ b/backend/apps/core/management/commands/seed_loadtest_data.py
@@ -292,7 +292,7 @@ def _register_participants(self, contest):
         for student in students:
             if student.id not in existing:
                 new_participants.append(
-                    ContestParticipant(contest=contest, user=student, nickname=student.username)
+                    ContestParticipant(contest=contest, user=student)
                 )
         if new_participants:
             ContestParticipant.objects.bulk_create(new_participants, ignore_conflicts=True)
diff --git a/frontend/src/core/entities/contest.entity.ts b/frontend/src/core/entities/contest.entity.ts
index 7306a933..4915c7f3 100644
--- a/frontend/src/core/entities/contest.entity.ts
+++ b/frontend/src/core/entities/contest.entity.ts
@@ -98,7 +98,7 @@ export interface ContestParticipant {
   userId: string;
   username: string;
   email?: string;
-  userDisplayName?: string;
+  displayName?: string;
   accountRole?: string;
   authProvider?: string;
   connectionStatus?: "offline" | "online" | "live";
@@ -115,9 +115,6 @@ export interface ContestParticipant {
   lockReason?: string;
   violationCount: number;
   submitReason?: string;
-  // Anonymous mode fields
-  nickname?: string;
-  displayName?: string;
 }
 
 export type ParticipantDashboardDetail =
@@ -324,10 +321,6 @@ export interface ContestDetail extends Contest {
   screenShareRecoveryGraceMs?: number;
   scoreboardVisibleDuringContest: boolean;
 
-  // Anonymous mode
-  anonymousModeEnabled?: boolean;
-  myNickname?: string;
-
   // Advanced settings
   allowMultipleJoins: boolean;
   maxCheatWarnings: number;
@@ -546,7 +539,6 @@ export interface ScoreboardProblemCell {
 export interface ScoreboardRow {
   userId: string;
   displayName: string;
-  nickname?: string;
   solvedCount: number;
   totalScore: number;
   penalty: number;
@@ -663,7 +655,6 @@ export interface ContestUpdateRequest {
   warningTimeoutSeconds?: number;
   screenShareRecoveryGraceMs?: number;
   scoreboardVisibleDuringContest?: boolean;
-  anonymousModeEnabled?: boolean;
   allowMultipleJoins?: boolean;
   maxCheatWarnings?: number;
   allowAutoUnlock?: boolean;
diff --git a/frontend/src/core/ports/contest.repository.ts b/frontend/src/core/ports/contest.repository.ts
index b93cfd9a..ecd3d917 100644
--- a/frontend/src/core/ports/contest.repository.ts
+++ b/frontend/src/core/ports/contest.repository.ts
@@ -33,7 +33,7 @@ export interface IContestRepository {
   toggleStatus(id: string): Promise<{ status: string }>;
   registerContest(
     id: string,
-    data?: { password?: string; nickname?: string }
+    data?: { password?: string }
   ): Promise<void>;
   enterContest(id: string, data?: { password?: string }): Promise<void>;
   archiveContest(id: string): Promise<void>;
@@ -199,7 +199,6 @@ export interface ContestUpdatePayload {
   warningTimeoutSeconds?: number;
   screenShareRecoveryGraceMs?: number;
   scoreboardVisibleDuringContest?: boolean;
-  anonymousModeEnabled?: boolean;
   allowMultipleJoins?: boolean;
   maxCheatWarnings?: number;
   allowAutoUnlock?: boolean;
diff --git a/frontend/src/core/usecases/contest/joinContest.usecase.test.ts b/frontend/src/core/usecases/contest/joinContest.usecase.test.ts
index 33e35203..88f8a681 100644
--- a/frontend/src/core/usecases/contest/joinContest.usecase.test.ts
+++ b/frontend/src/core/usecases/contest/joinContest.usecase.test.ts
@@ -22,6 +22,7 @@ describe("joinContest.usecase", () => {
         endTime: "",
         status: "published",
         visibility: "private",
+        hasJoined: false,
         isRegistered: false,
       },
       undefined
@@ -40,6 +41,7 @@ describe("joinContest.usecase", () => {
         endTime: "",
         status: "published",
         visibility: "public",
+        hasJoined: true,
         isRegistered: true,
       },
       undefined
@@ -58,6 +60,7 @@ describe("joinContest.usecase", () => {
         endTime: "",
         status: "published",
         visibility: "public",
+        hasJoined: false,
         isRegistered: false,
       },
       undefined
@@ -72,12 +75,10 @@ describe("joinContest.usecase", () => {
     const result = await joinContestUseCase({
       contestId: "c1",
       password: "secret",
-      nickname: "neo",
     });
 
     expect(registerContest).toHaveBeenCalledWith("c1", {
       password: "secret",
-      nickname: "neo",
     });
     expect(result).toEqual({ success: true });
   });
diff --git a/frontend/src/core/usecases/contest/joinContest.usecase.ts b/frontend/src/core/usecases/contest/joinContest.usecase.ts
index 48de063c..3feedbef 100644
--- a/frontend/src/core/usecases/contest/joinContest.usecase.ts
+++ b/frontend/src/core/usecases/contest/joinContest.usecase.ts
@@ -17,7 +17,6 @@ import type { ContestDetail } from "@/core/entities/contest.entity";
 export interface JoinContestInput {
   contestId: string;
   password?: string;
-  nickname?: string;
 }
 
 export interface JoinContestOutput {
@@ -43,7 +42,7 @@ export function validateJoinContest(
   }
 
   // Check if already registered
-  if (contest.isRegistered) {
+  if (contest.hasJoined) {
     return {
       valid: false,
       error: "Already registered for this contest",
@@ -60,10 +59,10 @@ export function validateJoinContest(
 export async function joinContestUseCase(
   input: JoinContestInput
 ): Promise<JoinContestOutput> {
-  const { contestId, password, nickname } = input;
+  const { contestId, password } = input;
 
   try {
-    await registerContest(contestId, { password, nickname });
+    await registerContest(contestId, { password });
 
     return {
       success: true,
diff --git a/frontend/src/features/app/components/UserMenu.tsx b/frontend/src/features/app/components/UserMenu.tsx
index 53171791..859df1a3 100644
--- a/frontend/src/features/app/components/UserMenu.tsx
+++ b/frontend/src/features/app/components/UserMenu.tsx
@@ -3,13 +3,10 @@ import {
   HeaderGlobalAction,
   HeaderPanel,
   Modal,
-  TextInput,
-  InlineLoading,
 } from "@carbon/react";
 import {
   Login,
   Logout,
-  Edit,
   Code,
   Book,
   RecentlyViewed,
@@ -26,7 +23,6 @@ import { useTranslation } from "react-i18next";
 import { useUserPreferences } from "@/features/auth/hooks/useUserPreferences";
 import type { ContestDetail } from "@/core/entities/contest.entity";
 import { getClassroomContestDashboardPath } from "@/features/contest/domain/contestRoutePolicy";
-import { updateNickname } from "@/infrastructure/api/repositories";
 import { Avatar } from "@/shared/ui/avatar";
 import "./UserMenu.scss";
 
@@ -44,7 +40,6 @@ export const UserMenu: React.FC<UserMenuProps> = ({
   onExpandedChange,
   contestMode = false,
   contest,
-  onContestRefresh,
   settingsOnly = false,
 }) => {
   const navigate = useNavigate();
@@ -57,15 +52,6 @@ export const UserMenu: React.FC<UserMenuProps> = ({
 
   const [isExpandedInternal, setIsExpandedInternal] = useState(false);
   const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
-  const [isNicknameModalOpen, setIsNicknameModalOpen] = useState(false);
-  const [nickname, setNickname] = useState(contest?.myNickname || "");
-  const [nicknameLoading, setNicknameLoading] = useState(false);
-
-  useEffect(() => {
-    if (contest?.myNickname) {
-      setNickname(contest.myNickname);
-    }
-  }, [contest?.myNickname]);
 
   const isExpanded = isExpandedInternal && !otherPanelExpanded;
 
@@ -120,27 +106,6 @@ export const UserMenu: React.FC<UserMenuProps> = ({
     window.location.assign("/dev/storybook/");
   };
 
-  const handleNicknameUpdate = async () => {
-    if (!contest) return;
-    setNicknameLoading(true);
-    try {
-      await updateNickname(contest.id, nickname);
-      onContestRefresh?.();
-      setIsNicknameModalOpen(false);
-    } catch (error) {
-      console.error("Failed to update nickname", error);
-      alert(tContest("avatar.updateFailed"));
-    } finally {
-      setNicknameLoading(false);
-    }
-  };
-
-  const canEditNickname =
-    contestMode &&
-    contest?.anonymousModeEnabled &&
-    (contest.examStatus !== "in_progress" ||
-      contest.currentUserRole === "admin");
-
   const getRoleLabel = (role: string | undefined) => {
     if (!role) return t("user.role.student");
     return t(`user.role.${role}`);
@@ -189,18 +154,6 @@ export const UserMenu: React.FC<UserMenuProps> = ({
             <span className="user-menu-role">{getRoleLabel(user.role)}</span>
           </div>
 
-          {/* Contest nickname */}
-          {contestMode && canEditNickname && (
-            <button
-              type="button"
-              className="user-menu-link"
-              onClick={() => setIsNicknameModalOpen(true)}
-            >
-              <Edit size={16} />
-              {tContest("avatar.editNickname")}
-            </button>
-          )}
-
           {contestMode && contest?.boundClassroomId && (
             <button
               type="button"
@@ -360,28 +313,6 @@ export const UserMenu: React.FC<UserMenuProps> = ({
         <p data-testid="user-menu-logout-message">{t("auth.logout.confirmMessage")}</p>
       </Modal>
 
-      {/* Nickname Modal */}
-      <Modal
-        open={isNicknameModalOpen}
-        modalHeading={tContest("avatar.editNickname")}
-        primaryButtonText={tContest("button.save")}
-        secondaryButtonText={tContest("common:button.cancel")}
-        onRequestClose={() => setIsNicknameModalOpen(false)}
-        onRequestSubmit={handleNicknameUpdate}
-        primaryButtonDisabled={nicknameLoading}
-      >
-        <TextInput
-          id="nickname-input"
-          labelText={tContest("avatar.nickname")}
-          value={nickname}
-          onChange={(e) => setNickname(e.target.value)}
-          maxLength={20}
-        />
-        {nicknameLoading && (
-          <InlineLoading description={tContest("avatar.saving")} />
-        )}
-      </Modal>
-
     </>
   );
 };
diff --git a/frontend/src/features/contest/components/ContestScoreboard.tsx b/frontend/src/features/contest/components/ContestScoreboard.tsx
index c57c634b..8abf4531 100644
--- a/frontend/src/features/contest/components/ContestScoreboard.tsx
+++ b/frontend/src/features/contest/components/ContestScoreboard.tsx
@@ -38,7 +38,6 @@ export interface StandingRow {
     username: string;
   };
   displayName?: string;
-  nickname?: string;
   solved: number;
   total_score: number;
   time: number;
@@ -92,13 +91,12 @@ const ContestScoreboard: React.FC<ContestScoreboardProps> = ({
   const rows = standings.map((s, index) => {
     // Use rank + index for unique ID since multiple users could have same rank
     const rowId = `row_${s.rank}_${s.user?.id || index}`;
-    // Use displayName if available (for anonymous mode), fallback to username
+    // Use profile display name when available, fallback to username.
     const displayName = s.displayName || s.user?.username || "Unknown";
     const row: {
       id: string;
       rank: number;
       user: string;
-      nickname?: string;
       realUsername?: string;
       solved: number;
       total_score: number;
@@ -108,7 +106,6 @@ const ContestScoreboard: React.FC<ContestScoreboardProps> = ({
       id: rowId,
       rank: s.rank,
       user: displayName,
-      nickname: s.nickname,
       realUsername: s.user?.username,
       solved: s.solved || 0,
       total_score: s.total_score || 0,
diff --git a/frontend/src/features/contest/components/ExamModeWrapper.tsx b/frontend/src/features/contest/components/ExamModeWrapper.tsx
index 78d1650e..e872f2a2 100644
--- a/frontend/src/features/contest/components/ExamModeWrapper.tsx
+++ b/frontend/src/features/contest/components/ExamModeWrapper.tsx
@@ -99,11 +99,13 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
   const { showToast } = useToast();
   const streamAdapterRef = useRef(createStreamAdapter());
   const { t } = useTranslation("contest");
+  const policyRequired =
+    cheatDetectionEnabled && (isExamMonitored || isMonitoredStatus(examStatus));
   const {
     config: anticheatConfig,
     loading: anticheatConfigLoading,
     refresh: refreshAnticheatConfig,
-  } = useContestAnticheatConfig(contestId);
+  } = useContestAnticheatConfig(policyRequired ? contestId : undefined);
   const anticheatEffective = anticheatConfig?.effective;
   const capability = detectAnticheatCapability();
   const monitoringPlan = resolveDeviceMonitoringPlan(
@@ -129,8 +131,6 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
   const screenModuleRole =
     monitoringPlan.sources.screenShare.role ?? "secondary";
   const webcamModuleRole = monitoringPlan.sources.webcam.role ?? "secondary";
-  const policyRequired =
-    cheatDetectionEnabled && (isExamMonitored || isMonitoredStatus(examStatus));
   const policyConfigMissing =
     policyRequired && !anticheatConfigLoading && !anticheatConfig;
   const policyDeviceUnavailable =
diff --git a/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss b/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
index e1e2b3b8..70eb8164 100644
--- a/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
@@ -31,6 +31,13 @@
   line-height: 1.2;
 }
 
+.cardActionButton {
+  justify-self: start;
+  width: fit-content;
+  min-width: 7.5rem;
+  justify-content: center;
+}
+
 .chartFrame {
   --cds-grid-bg: transparent;
 
@@ -79,6 +86,30 @@
   line-height: 0;
 }
 
+.answerProgress {
+  display: grid;
+  gap: 0.5rem;
+  padding-top: 0.5rem;
+}
+
+.answerProgressHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.answerProgressHeader span {
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+}
+
+.answerProgressHeader strong {
+  color: var(--cds-text-primary);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: 600;
+}
+
 /* 比例 meter 會插入多個 layout spacer（條上方、圖例上方）；皆以 display 收斂且不與 inline height 競爭 */
 .distributionChartFrame :global(.chart-holder .graph-frame > .layout-child.spacer),
 .distributionChartFrame
@@ -111,4 +142,3 @@
   font-size: var(--cds-label-01-font-size, 0.75rem);
   font-weight: 500;
 }
-
diff --git a/frontend/src/features/contest/components/admin/AdminInsightRail.tsx b/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
index 4d97cd27..1c06c146 100644
--- a/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
+++ b/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
@@ -6,7 +6,7 @@ import {
   MeterChart,
 } from "@carbon/charts-react";
 import "@carbon/charts-react/styles.css";
-import { ProgressBar, SkeletonPlaceholder, SkeletonText } from "@carbon/react";
+import { Button, ProgressBar, SkeletonPlaceholder, SkeletonText } from "@carbon/react";
 import type {
   DashboardChartSeries,
   DashboardInsightCard,
@@ -18,10 +18,20 @@ import styles from "./AdminInsightRail.module.scss";
 interface AdminInsightRailProps {
   cards: DashboardInsightCard[];
   distribution?: DistributionItem[];
-  /** 僅在總覽右欄第一區塊設為 true，避免多個 rail 重複顯示「考試進度」（考生比例）卡片。 */
+  /** 僅在總覽右欄第一區塊設為 true，避免多個 rail 重複顯示考生分佈卡片。 */
   showDistribution?: boolean;
   loadingCardKeys?: string[];
   distributionLoading?: boolean;
+  gradingAction?: InsightCardAction;
+}
+
+export interface InsightCardAction {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  loadingLabel?: string;
+  kind?: "primary" | "secondary" | "tertiary" | "danger--tertiary";
 }
 
 const resolveCarbonChartTheme = (
@@ -145,8 +155,12 @@ const DistributionOverview = ({
 }) => {
   const { t } = useTranslation("contest");
   const title = t(
-    "adminOverview.widgets.examProgress",
-    "考試進度",
+    "adminOverview.widgets.studentDistribution",
+    "考生分佈總覽",
+  );
+  const answerProgressLabel = t(
+    "adminOverview.widgets.answerProgress",
+    "作答進度",
   );
   const visibleDistribution = distribution.filter(
     (item) => item.key !== "offline",
@@ -185,36 +199,52 @@ const DistributionOverview = ({
         <>
           <div className={styles.cardHeader}>
             <span>{title}</span>
-            <strong>{completionPercent}%</strong>
+            <strong>{total} 人</strong>
           </div>
           {hasDistributionData ? (
-            <div className={styles.distributionChartFrame}>
-              <MeterChart
-                data={distributionChartData}
-                options={{
-                  title: "",
-                  height: "108px",
-                  resizable: true,
-                  theme,
-                  meter: {
-                    height: 8,
-                    proportional: {
-                      unit: "人",
-                      breakdownFormatter: () =>
-                        `已交卷 ${submittedCount} / ${total} 人（完成率 ${completionPercent}%）`,
-                      totalFormatter: (value) => `考生總數 ${value} 人`,
+            <>
+              <div className={styles.distributionChartFrame}>
+                <MeterChart
+                  data={distributionChartData}
+                  options={{
+                    title: "",
+                    height: "108px",
+                    resizable: true,
+                    theme,
+                    meter: {
+                      height: 8,
+                      proportional: {
+                        unit: "人",
+                        breakdownFormatter: () =>
+                          `已交卷 ${submittedCount} / ${total} 人（完成率 ${completionPercent}%）`,
+                        totalFormatter: (value) => `考生總數 ${value} 人`,
+                      },
                     },
-                  },
-                  color: {
-                    scale: chartColorScale,
-                  },
-                  legend: {
-                    enabled: false,
-                  },
-                  toolbar: { enabled: false },
-                }}
-              />
-            </div>
+                    color: {
+                      scale: chartColorScale,
+                    },
+                    legend: {
+                      enabled: false,
+                    },
+                    toolbar: { enabled: false },
+                  }}
+                />
+              </div>
+              <div className={styles.answerProgress}>
+                <div className={styles.answerProgressHeader}>
+                  <span>{answerProgressLabel}</span>
+                  <strong>{completionPercent}%</strong>
+                </div>
+                <ProgressBar
+                  label={answerProgressLabel}
+                  hideLabel
+                  size="small"
+                  value={completionPercent}
+                  status={completionPercent >= 100 ? "finished" : "active"}
+                  className={styles.rightPanelProgressBar}
+                />
+              </div>
+            </>
           ) : (
             <div className={styles.emptyState}>尚無考生分佈資料</div>
           )}
@@ -230,6 +260,7 @@ export default function AdminInsightRail({
   showDistribution = false,
   loadingCardKeys = [],
   distributionLoading = false,
+  gradingAction,
 }: AdminInsightRailProps) {
   const { theme } = useTheme();
   const chartTheme = resolveCarbonChartTheme(theme);
@@ -265,6 +296,7 @@ export default function AdminInsightRail({
           card={card}
           chartTheme={chartTheme}
           loading={loadingKeys.has(card.key)}
+          action={gradingAction}
         />
       ))}
     </div>
@@ -302,10 +334,12 @@ function InsightCard({
   card,
   chartTheme,
   loading,
+  action,
 }: {
   card: DashboardInsightCard;
   chartTheme: "white" | "g10" | "g90" | "g100";
   loading: boolean;
+  action?: InsightCardAction;
 }) {
   const isGradingCard = card.key === "grading_progress";
   const hasPriorityEventData =
@@ -344,6 +378,16 @@ function InsightCard({
       ) : (
         <ProgressChart card={card} />
       )}
+      {isGradingCard && action ? (
+        <Button
+          kind={action.kind ?? "primary"}
+          onClick={action.onClick}
+          disabled={loading || action.disabled || action.loading}
+          className={styles.cardActionButton}
+        >
+          {action.loading ? action.loadingLabel ?? action.label : action.label}
+        </Button>
+      ) : null}
     </section>
   );
 }
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
index 14695a9c..3b7b9bed 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import type { ContestParticipant } from "@/core/entities/contest.entity";
 import type { AdminOverviewDashboardData } from "@/features/contest/screens/admin/panels/adminOverviewDashboard.model";
+import type { InsightCardAction } from "./AdminInsightRail";
 import AdminOverviewCommandCenter from "./AdminOverviewCommandCenter";
 
 const participantDashboardState = vi.hoisted(() => ({
@@ -186,7 +187,7 @@ const participants: ContestParticipant[] = [
   {
     userId: "1",
     username: "ming",
-    userDisplayName: "王小明",
+    displayName: "王小明",
     connectionStatus: "online",
     liveMonitoringOnline: true,
     score: 82,
@@ -198,7 +199,7 @@ const participants: ContestParticipant[] = [
   {
     userId: "2",
     username: "hua",
-    userDisplayName: "陳小華",
+    displayName: "陳小華",
     connectionStatus: "offline",
     score: 74,
     joinedAt: "2026-05-03T09:00:00+08:00",
@@ -217,12 +218,14 @@ describe("AdminOverviewCommandCenter", () => {
     adminLoading = false,
     gradingLoading = false,
     antiCheatEnabled = true,
+    gradingAction,
   }: {
     onOpenPanel?: (panel: string) => void;
     overrideData?: AdminOverviewDashboardData;
     adminLoading?: boolean;
     gradingLoading?: boolean;
     antiCheatEnabled?: boolean;
+    gradingAction?: InsightCardAction;
   } = {}) =>
     render(
       <AdminOverviewCommandCenter
@@ -235,6 +238,7 @@ describe("AdminOverviewCommandCenter", () => {
         participants={participants}
         primary={primary}
         questionStatsGallery={questionStatsGallery}
+        gradingAction={gradingAction}
       />,
     );
 
@@ -259,8 +263,13 @@ describe("AdminOverviewCommandCenter", () => {
       screen.getByRole("progressbar", { name: "時間進度" }),
     ).toHaveAttribute("aria-valuenow", "62");
     expect(screen.getAllByText("違規事件").length).toBeGreaterThan(0);
-    const distributionOverview = screen.getByLabelText("考試進度");
+    const distributionOverview = screen.getByLabelText("考生分佈總覽");
     expect(distributionOverview).toBeInTheDocument();
+    expect(
+      within(distributionOverview).getByRole("progressbar", {
+        name: "作答進度",
+      }),
+    ).toHaveAttribute("aria-valuenow", "17");
     expect(
       within(distributionOverview).queryByText("離線"),
     ).not.toBeInTheDocument();
@@ -320,7 +329,7 @@ describe("AdminOverviewCommandCenter", () => {
   it("keeps only essential drilldown content in the left overview column", () => {
     renderCommandCenter();
 
-    expect(screen.getByLabelText("考試進度")).toBeInTheDocument();
+    expect(screen.getByLabelText("考生分佈總覽")).toBeInTheDocument();
     expect(screen.queryByText("auto_submit")).not.toBeInTheDocument();
     expect(screen.getByText("陳小華")).toBeInTheDocument();
     expect(screen.queryByText("競賽發布")).not.toBeInTheDocument();
@@ -333,6 +342,21 @@ describe("AdminOverviewCommandCenter", () => {
     expect(screen.queryByText("題目統計")).not.toBeInTheDocument();
   });
 
+  it("shows the publish results action under grading progress", async () => {
+    const onPublishResults = vi.fn();
+
+    renderCommandCenter({
+      gradingAction: {
+        label: "發布成績",
+        onClick: onPublishResults,
+      },
+    });
+
+    await userEvent.click(screen.getByRole("button", { name: "發布成績" }));
+
+    expect(onPublishResults).toHaveBeenCalledTimes(1);
+  });
+
   it("groups participants by status and switches the card metric", async () => {
     renderCommandCenter();
 
@@ -427,7 +451,7 @@ describe("AdminOverviewCommandCenter", () => {
 
     expect(screen.getByLabelText("考生列表載入中")).toBeInTheDocument();
     expect(screen.getByLabelText("批改資料載入中")).toBeInTheDocument();
-    expect(screen.getByLabelText("考試進度")).toBeInTheDocument();
+    expect(screen.getByLabelText("考生分佈總覽")).toBeInTheDocument();
   });
 
   it("keeps generic panel entries out of the live dashboard", () => {
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
index eda35555..ff35fb1c 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
@@ -44,6 +44,7 @@ import type {
 } from "@/core/entities/contest.entity";
 import AdminInsightRail, {
   PriorityEventsInsightCard,
+  type InsightCardAction,
 } from "@/features/contest/components/admin/AdminInsightRail";
 import AdminSegmentedDashboard from "@/features/contest/components/admin/AdminSegmentedDashboard";
 import ParticipantDashboardPane from "@/features/contest/components/participants/ParticipantDashboardPane";
@@ -85,14 +86,14 @@ interface AdminOverviewCommandCenterProps {
   primary: ReactNode;
   questionStatsGallery?: ReactNode;
   resultOverview?: ReactNode;
+  gradingAction?: InsightCardAction;
 }
 
 const isStudentParticipant = (participant: ContestParticipant) =>
   !participant.accountRole || participant.accountRole === "student";
 
-const displayName = (participant: ContestParticipant) =>
+const getProfileDisplayName = (participant: ContestParticipant) =>
   participant.displayName ||
-  participant.userDisplayName ||
   participant.username ||
   participant.userId;
 
@@ -309,6 +310,7 @@ export default function AdminOverviewCommandCenter({
   primary,
   questionStatsGallery,
   resultOverview,
+  gradingAction,
 }: AdminOverviewCommandCenterProps) {
   const { t } = useTranslation("contest");
   const { showToast } = useToast();
@@ -558,7 +560,10 @@ export default function AdminOverviewCommandCenter({
     .sort(
       (left, right) =>
         getParticipantSortScore(right) - getParticipantSortScore(left) ||
-        displayName(left).localeCompare(displayName(right), "zh-TW"),
+        getProfileDisplayName(left).localeCompare(
+          getProfileDisplayName(right),
+          "zh-TW",
+        ),
     );
   const filteredStudentParticipants = useMemo(() => {
     const normalizedQuery = participantSearch.trim().toLowerCase();
@@ -573,7 +578,7 @@ export default function AdminOverviewCommandCenter({
       }
       if (!normalizedQuery) return true;
       return [
-        displayName(participant),
+        getProfileDisplayName(participant),
         participant.username,
         participant.email,
         participant.lockReason,
@@ -783,7 +788,7 @@ export default function AdminOverviewCommandCenter({
                   >
                     <div className={styles.participantCardHeader}>
                       <div className={styles.participantIdentity}>
-                        <strong>{displayName(participant)}</strong>
+                        <strong>{getProfileDisplayName(participant)}</strong>
                         <span>@{participant.username}</span>
                         <span className={styles.participantConnection}>
                           <span
@@ -838,7 +843,7 @@ export default function AdminOverviewCommandCenter({
       <Search
         id="overview-participants-search"
         labelText="搜尋考生"
-        placeholder="搜尋姓名或使用者 ID..."
+        placeholder="搜尋顯示名稱或使用者名稱..."
         value={participantSearch}
         onChange={handleParticipantSearchChange}
         onClear={() => setParticipantSearch("")}
@@ -976,6 +981,7 @@ export default function AdminOverviewCommandCenter({
             <AdminInsightRail
               cards={gradingInsightCards}
               loadingCardKeys={gradingLoading ? ["grading_progress"] : []}
+              gradingAction={gradingAction}
             />
             {resultOverview}
             <AdminInsightRail
diff --git a/frontend/src/features/contest/components/admin/examEditor/hooks/useExamAutoSave.ts b/frontend/src/features/contest/components/admin/examEditor/hooks/useExamAutoSave.ts
index c05c0232..fb2ec230 100644
--- a/frontend/src/features/contest/components/admin/examEditor/hooks/useExamAutoSave.ts
+++ b/frontend/src/features/contest/components/admin/examEditor/hooks/useExamAutoSave.ts
@@ -46,7 +46,6 @@ const FIELD_NAME_MAP: Record<string, keyof ContestUpdatePayload> = {
   warningTimeoutSeconds: "warningTimeoutSeconds",
   screenShareRecoveryGraceMs: "screenShareRecoveryGraceMs",
   scoreboardVisibleDuringContest: "scoreboardVisibleDuringContest",
-  anonymousModeEnabled: "anonymousModeEnabled",
   maxCheatWarnings: "maxCheatWarnings",
   allowMultipleJoins: "allowMultipleJoins",
   allowAutoUnlock: "allowAutoUnlock",
diff --git a/frontend/src/features/contest/components/admin/settings/ContestSettingsModal.stories.tsx b/frontend/src/features/contest/components/admin/settings/ContestSettingsModal.stories.tsx
index 079950ed..82cb23fd 100644
--- a/frontend/src/features/contest/components/admin/settings/ContestSettingsModal.stories.tsx
+++ b/frontend/src/features/contest/components/admin/settings/ContestSettingsModal.stories.tsx
@@ -31,7 +31,6 @@ function useFormState() {
     warningTimeoutSeconds: mockContest.warningTimeoutSeconds,
     screenShareRecoveryGraceMs: mockContest.screenShareRecoveryGraceMs,
     scoreboardVisibleDuringContest: mockContest.scoreboardVisibleDuringContest,
-    anonymousModeEnabled: mockContest.anonymousModeEnabled,
     allowMultipleJoins: mockContest.allowMultipleJoins,
     maxCheatWarnings: mockContest.maxCheatWarnings,
     allowAutoUnlock: mockContest.allowAutoUnlock,
@@ -188,7 +187,7 @@ export const Display: Story = {
   parameters: {
     docs: {
       description: {
-        story: "顯示設定 panel：排行榜可見性、匿名模式。",
+        story: "顯示設定 panel：排行榜可見性。",
       },
     },
   },
diff --git a/frontend/src/features/contest/components/admin/settings/DisplaySettingsPanel.tsx b/frontend/src/features/contest/components/admin/settings/DisplaySettingsPanel.tsx
index 4d63f360..04aee1df 100644
--- a/frontend/src/features/contest/components/admin/settings/DisplaySettingsPanel.tsx
+++ b/frontend/src/features/contest/components/admin/settings/DisplaySettingsPanel.tsx
@@ -32,22 +32,6 @@ export default function DisplaySettingsPanel({
         />
       </ActionRow>
 
-      <ActionRow
-        label={t("settings.anonymousMode")}
-        description={t("settings.anonymousModeHelp")}
-        saveState={getState("anonymousModeEnabled")}
-        onRetry={() => onRetry("anonymousModeEnabled")}
-      >
-        <Toggle
-          id="settings-anonymous"
-          labelText=""
-          hideLabel
-          labelA={tc("toggle.off")}
-          labelB={tc("toggle.on")}
-          toggled={(form.anonymousModeEnabled as boolean) ?? false}
-          onToggle={(checked) => onChange("anonymousModeEnabled", checked)}
-        />
-      </ActionRow>
     </Section>
   );
 }
diff --git a/frontend/src/features/contest/components/admin/statistics/ContestResultDashboardPanel.tsx b/frontend/src/features/contest/components/admin/statistics/ContestResultDashboardPanel.tsx
index b6b1a7e1..881ab790 100644
--- a/frontend/src/features/contest/components/admin/statistics/ContestResultDashboardPanel.tsx
+++ b/frontend/src/features/contest/components/admin/statistics/ContestResultDashboardPanel.tsx
@@ -930,7 +930,6 @@ function OptionDistributionList({
     participants: Array<{
       participantId: number;
       username: string;
-      nickname: string | null;
       displayName: string;
     }>;
   }>;
@@ -1330,7 +1329,6 @@ function formatAnswerContent(
 type ObjectiveParticipantRow = {
   participantId: number;
   username: string;
-  nickname: string | null;
   displayName: string;
   isOmitted: boolean;
   selectedOptions: string[];
diff --git a/frontend/src/features/contest/components/admin/statistics/QuestionStatisticsDetail.tsx b/frontend/src/features/contest/components/admin/statistics/QuestionStatisticsDetail.tsx
index 8610514a..c4e33e4c 100644
--- a/frontend/src/features/contest/components/admin/statistics/QuestionStatisticsDetail.tsx
+++ b/frontend/src/features/contest/components/admin/statistics/QuestionStatisticsDetail.tsx
@@ -86,7 +86,7 @@ export default function QuestionStatisticsDetail({
             {(stat.subjectiveEntries ?? []).map((entry, idx) => (
               <AccordionItem
                 key={idx}
-                title={`${entry.studentNickname} — ${
+                title={`${entry.studentDisplayName} — ${
                   entry.score !== null
                     ? t("statistics.scoreUnit", "{{score}} 分", {
                         score: entry.score,
diff --git a/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.mock.ts b/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.mock.ts
index 21d69174..e2cbb6f5 100644
--- a/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.mock.ts
+++ b/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.mock.ts
@@ -57,7 +57,6 @@ interface BaseQuestionDetailMock {
   responses: Array<{
     participantId: number;
     username: string;
-    nickname: string | null;
     displayName: string;
     score: number | null;
     gradedAt: string | null;
@@ -77,7 +76,6 @@ export type QuestionDetailMock =
         participants: Array<{
           participantId: number;
           username: string;
-          nickname: string | null;
           displayName: string;
         }>;
       }>;
@@ -85,7 +83,6 @@ export type QuestionDetailMock =
       omittedParticipants?: Array<{
         participantId: number;
         username: string;
-        nickname: string | null;
         displayName: string;
       }>;
     })
@@ -246,21 +243,21 @@ export function createContestResultDashboardMock(
       kind: "single_choice",
       scoreBands: makeScoreBands([1, 2, 5, 8, 12, 20], 2),
       responses: [
-        { participantId: 1, username: "amy", nickname: "Amy", displayName: "Amy", score: 10, gradedAt: "2026-04-01T01:00:00.000Z", feedback: "", answer: { selected: "B" } },
-        { participantId: 2, username: "ben", nickname: null, displayName: "ben", score: 0, gradedAt: "2026-04-01T01:01:00.000Z", feedback: "", answer: { selected: "A" } },
+        { participantId: 1, username: "amy", displayName: "Amy", score: 10, gradedAt: "2026-04-01T01:00:00.000Z", feedback: "", answer: { selected: "B" } },
+        { participantId: 2, username: "ben", displayName: "ben", score: 0, gradedAt: "2026-04-01T01:01:00.000Z", feedback: "", answer: { selected: "A" } },
       ],
       optionDistribution: [
-        { label: "A. 編譯器在執行期做最佳化", count: 6, percent: 13, isCorrect: false, participants: [{ participantId: 2, username: "ben", nickname: null, displayName: "ben" }] },
-        { label: "B. 變數作用域由區塊決定", count: 24, percent: 50, isCorrect: true, participants: [{ participantId: 1, username: "amy", nickname: "Amy", displayName: "Amy" }] },
+        { label: "A. 編譯器在執行期做最佳化", count: 6, percent: 13, isCorrect: false, participants: [{ participantId: 2, username: "ben", displayName: "ben" }] },
+        { label: "B. 變數作用域由區塊決定", count: 24, percent: 50, isCorrect: true, participants: [{ participantId: 1, username: "amy", displayName: "Amy" }] },
         { label: "C. 遞迴一定比迴圈慢", count: 14, percent: 29, isCorrect: false, participants: [] },
         { label: "D. 陣列長度可在執行期改變", count: 2, percent: 4, isCorrect: false, participants: [] },
       ],
       omittedCount: 4,
       omittedParticipants: [
-        { participantId: 101, username: "amy", nickname: "Amy", displayName: "Amy" },
-        { participantId: 102, username: "ben", nickname: null, displayName: "ben" },
-        { participantId: 103, username: "carol", nickname: "Carol", displayName: "Carol" },
-        { participantId: 104, username: "derek", nickname: null, displayName: "derek" },
+        { participantId: 101, username: "amy", displayName: "Amy" },
+        { participantId: 102, username: "ben", displayName: "ben" },
+        { participantId: 103, username: "carol", displayName: "Carol" },
+        { participantId: 104, username: "derek", displayName: "derek" },
       ],
     },
     q2: {
@@ -268,8 +265,8 @@ export function createContestResultDashboardMock(
       kind: "essay",
       scoreBands: makeScoreBands([5, 8, 14, 11, 9], 3),
       responses: [
-        { participantId: 11, username: "amy", nickname: "Amy", displayName: "Amy", score: 12, gradedAt: "2026-04-01T01:10:00.000Z", feedback: "", answer: { text: "程序有獨立位址空間；執行緒共享資源。" } },
-        { participantId: 12, username: "ben", nickname: null, displayName: "ben", score: null, gradedAt: null, feedback: "", answer: { text: "待批改作答內容。" } },
+        { participantId: 11, username: "amy", displayName: "Amy", score: 12, gradedAt: "2026-04-01T01:10:00.000Z", feedback: "", answer: { text: "程序有獨立位址空間；執行緒共享資源。" } },
+        { participantId: 12, username: "ben", displayName: "ben", score: null, gradedAt: null, feedback: "", answer: { text: "待批改作答內容。" } },
       ],
       gradingProgress: { graded: 29, total: 47 },
     },
@@ -278,7 +275,7 @@ export function createContestResultDashboardMock(
       kind: "short_answer",
       scoreBands: makeScoreBands([3, 7, 14, 16, 7], 2),
       responses: [
-        { participantId: 21, username: "carol", nickname: "Carol", displayName: "Carol", score: 8, gradedAt: "2026-04-01T01:20:00.000Z", feedback: "", answer: { text: "O(n log n)" } },
+        { participantId: 21, username: "carol", displayName: "Carol", score: 8, gradedAt: "2026-04-01T01:20:00.000Z", feedback: "", answer: { text: "O(n log n)" } },
       ],
       gradingProgress: { graded: 47, total: 47 },
     },
@@ -287,17 +284,17 @@ export function createContestResultDashboardMock(
       kind: "multiple_choice",
       scoreBands: makeScoreBands([6, 5, 10, 16, 12], 3),
       responses: [
-        { participantId: 31, username: "eva", nickname: "Eva", displayName: "Eva", score: 15, gradedAt: "2026-04-01T01:30:00.000Z", feedback: "", answer: { selected: ["A", "B", "D"] } },
+        { participantId: 31, username: "eva", displayName: "Eva", score: 15, gradedAt: "2026-04-01T01:30:00.000Z", feedback: "", answer: { selected: ["A", "B", "D"] } },
       ],
       optionDistribution: [
-        { label: "A. Stack 適合 DFS", count: 34, percent: 69, isCorrect: true, participants: [{ participantId: 31, username: "eva", nickname: "Eva", displayName: "Eva" }] },
-        { label: "B. Queue 適合 BFS", count: 33, percent: 67, isCorrect: true, participants: [{ participantId: 31, username: "eva", nickname: "Eva", displayName: "Eva" }] },
+        { label: "A. Stack 適合 DFS", count: 34, percent: 69, isCorrect: true, participants: [{ participantId: 31, username: "eva", displayName: "Eva" }] },
+        { label: "B. Queue 適合 BFS", count: 33, percent: 67, isCorrect: true, participants: [{ participantId: 31, username: "eva", displayName: "Eva" }] },
         { label: "C. HashMap 保持排序", count: 21, percent: 43, isCorrect: false, participants: [] },
-        { label: "D. Heap 可維護極值", count: 30, percent: 61, isCorrect: true, participants: [{ participantId: 31, username: "eva", nickname: "Eva", displayName: "Eva" }] },
+        { label: "D. Heap 可維護極值", count: 30, percent: 61, isCorrect: true, participants: [{ participantId: 31, username: "eva", displayName: "Eva" }] },
       ],
       omittedCount: 1,
       omittedParticipants: [
-        { participantId: 105, username: "eva", nickname: "Eva", displayName: "Eva" },
+        { participantId: 105, username: "eva", displayName: "Eva" },
       ],
     },
     q5: {
@@ -305,7 +302,7 @@ export function createContestResultDashboardMock(
       kind: "essay",
       scoreBands: makeScoreBands([2, 4, 10, 16, 16], 3),
       responses: [
-        { participantId: 41, username: "fred", nickname: null, displayName: "fred", score: 14, gradedAt: "2026-04-01T01:40:00.000Z", feedback: "", answer: { text: "避免 circular wait。" } },
+        { participantId: 41, username: "fred", displayName: "fred", score: 14, gradedAt: "2026-04-01T01:40:00.000Z", feedback: "", answer: { text: "避免 circular wait。" } },
       ],
       gradingProgress: { graded: 48, total: 48 },
     },
@@ -314,16 +311,16 @@ export function createContestResultDashboardMock(
       kind: "true_false",
       scoreBands: makeScoreBands([7, 0, 0, 13, 28], 1),
       responses: [
-        { participantId: 51, username: "gina", nickname: "Gina", displayName: "Gina", score: 5, gradedAt: "2026-04-01T01:50:00.000Z", feedback: "", answer: { selected: true } },
+        { participantId: 51, username: "gina", displayName: "Gina", score: 5, gradedAt: "2026-04-01T01:50:00.000Z", feedback: "", answer: { selected: true } },
       ],
       optionDistribution: [
-        { label: "A. True", count: 31, percent: 65, isCorrect: true, participants: [{ participantId: 51, username: "gina", nickname: "Gina", displayName: "Gina" }] },
+        { label: "A. True", count: 31, percent: 65, isCorrect: true, participants: [{ participantId: 51, username: "gina", displayName: "Gina" }] },
         { label: "B. False", count: 17, percent: 35, isCorrect: false, participants: [] },
       ],
       omittedCount: 2,
       omittedParticipants: [
-        { participantId: 106, username: "harry", nickname: null, displayName: "harry" },
-        { participantId: 107, username: "iris", nickname: "Iris", displayName: "Iris" },
+        { participantId: 106, username: "harry", displayName: "harry" },
+        { participantId: 107, username: "iris", displayName: "Iris" },
       ],
     },
     q7: {
@@ -331,7 +328,7 @@ export function createContestResultDashboardMock(
       kind: "essay",
       scoreBands: makeScoreBands([2, 5, 9, 8, 4], 3),
       responses: [
-        { participantId: 61, username: "jack", nickname: null, displayName: "jack", score: 13, gradedAt: "2026-04-01T02:00:00.000Z", feedback: "", answer: { text: "說明 CAP 與補償。" } },
+        { participantId: 61, username: "jack", displayName: "jack", score: 13, gradedAt: "2026-04-01T02:00:00.000Z", feedback: "", answer: { text: "說明 CAP 與補償。" } },
       ],
       gradingProgress: { graded: 28, total: 47 },
     },
@@ -340,7 +337,7 @@ export function createContestResultDashboardMock(
       kind: "short_answer",
       scoreBands: makeScoreBands([10, 8, 7, 11, 9], 2),
       responses: [
-        { participantId: 71, username: "kate", nickname: "Kate", displayName: "Kate", score: 6, gradedAt: "2026-04-01T02:10:00.000Z", feedback: "", answer: { text: "page replacement 會在 page fault 後觸發。" } },
+        { participantId: 71, username: "kate", displayName: "Kate", score: 6, gradedAt: "2026-04-01T02:10:00.000Z", feedback: "", answer: { text: "page replacement 會在 page fault 後觸發。" } },
       ],
       gradingProgress: { graded: 33, total: 45 },
     },
diff --git a/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.transform.ts b/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.transform.ts
index 7bc7526f..d0c21f3e 100644
--- a/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.transform.ts
+++ b/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.transform.ts
@@ -79,8 +79,8 @@ export function transformToDashboardData(input: TransformInput): DashboardMockDa
       const responses = answers.map((answer) => ({
         participantId: answer.participant_user_id,
         username: answer.participant_username,
-        nickname: answer.participant_nickname || null,
-        displayName: answer.participant_nickname || answer.participant_username,
+        displayName:
+          answer.participant_display_name || answer.participant_username,
         score: answer.score,
         gradedAt: answer.graded_at,
         feedback: answer.feedback || "",
diff --git a/frontend/src/features/contest/components/admin/statistics/useContestResultDashboard.ts b/frontend/src/features/contest/components/admin/statistics/useContestResultDashboard.ts
index 80cdadcb..d437f4dd 100644
--- a/frontend/src/features/contest/components/admin/statistics/useContestResultDashboard.ts
+++ b/frontend/src/features/contest/components/admin/statistics/useContestResultDashboard.ts
@@ -210,7 +210,6 @@ function mapQuestionDetail(
       responses: dto.responses.map((response) => ({
         participantId: response.participant_id,
         username: response.username,
-        nickname: response.nickname,
         displayName: response.display_name,
         score: response.score,
         gradedAt: response.graded_at,
@@ -225,7 +224,6 @@ function mapQuestionDetail(
         participants: (item.participants ?? []).map((participant) => ({
           participantId: participant.participant_id,
           username: participant.username,
-          nickname: participant.nickname,
           displayName: participant.display_name,
         })),
       })),
@@ -233,7 +231,6 @@ function mapQuestionDetail(
       omittedParticipants: (dto.omitted_participants ?? []).map((item) => ({
         participantId: item.participant_id,
         username: item.username,
-        nickname: item.nickname,
         displayName: item.display_name,
       })),
     };
@@ -246,7 +243,6 @@ function mapQuestionDetail(
     responses: dto.responses.map((response) => ({
       participantId: response.participant_id,
       username: response.username,
-      nickname: response.nickname,
       displayName: response.display_name,
       score: response.score,
       gradedAt: response.graded_at,
diff --git a/frontend/src/features/contest/components/admin/statistics/useExamStatistics.test.ts b/frontend/src/features/contest/components/admin/statistics/useExamStatistics.test.ts
index 6f9ae25c..91e64cba 100644
--- a/frontend/src/features/contest/components/admin/statistics/useExamStatistics.test.ts
+++ b/frontend/src/features/contest/components/admin/statistics/useExamStatistics.test.ts
@@ -18,7 +18,7 @@ function buildAnswerRow(partial: Partial<GradingAnswerRow> = {}): GradingAnswerR
     id: partial.id ?? "a-1",
     studentId: partial.studentId ?? "u-1",
     studentUsername: partial.studentUsername ?? "student",
-    studentNickname: partial.studentNickname ?? "Student",
+    studentDisplayName: partial.studentDisplayName ?? "Student",
     questionId: partial.questionId ?? "q-1",
     questionIndex: partial.questionIndex ?? 1,
     questionPrompt: partial.questionPrompt ?? "Question 1",
diff --git a/frontend/src/features/contest/components/admin/statistics/useExamStatistics.ts b/frontend/src/features/contest/components/admin/statistics/useExamStatistics.ts
index a17919e5..3f50b0be 100644
--- a/frontend/src/features/contest/components/admin/statistics/useExamStatistics.ts
+++ b/frontend/src/features/contest/components/admin/statistics/useExamStatistics.ts
@@ -15,7 +15,7 @@ export interface OptionStat {
 }
 
 export interface SubjectiveEntry {
-  studentNickname: string;
+  studentDisplayName: string;
   studentUsername: string;
   answerText: string;
   score: number | null;
@@ -62,7 +62,7 @@ export function useExamStatistics() {
         optionDistribution = buildOptionDistribution(answers);
       } else {
         subjectiveEntries = answers.map((a) => ({
-          studentNickname: a.studentNickname ?? "",
+          studentDisplayName: a.studentDisplayName ?? "",
           studentUsername: a.studentUsername ?? "",
           answerText: extractAnswerText(a),
           score: a.score,
diff --git a/frontend/src/features/contest/components/layout/ContestExitModal.tsx b/frontend/src/features/contest/components/layout/ContestExitModal.tsx
index 16608a87..5f4671be 100644
--- a/frontend/src/features/contest/components/layout/ContestExitModal.tsx
+++ b/frontend/src/features/contest/components/layout/ContestExitModal.tsx
@@ -48,7 +48,7 @@ const ContestExitModal: React.FC<ContestExitModalProps> = ({
     }
 
     // Student - Not joined
-    if (!contest?.hasJoined && !contest?.isRegistered) {
+    if (!contest?.hasJoined) {
       return t("exitModal.studentNotJoined");
     }
 
diff --git a/frontend/src/features/contest/components/layout/ContestHero.tsx b/frontend/src/features/contest/components/layout/ContestHero.tsx
index cb7bc6fc..d31ac6bd 100644
--- a/frontend/src/features/contest/components/layout/ContestHero.tsx
+++ b/frontend/src/features/contest/components/layout/ContestHero.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from "react";
-import { Button, Modal, TextInput, Select, SelectItem } from "@carbon/react";
+import { Button, Modal, Select, SelectItem } from "@carbon/react";
 import {
   PlayFilled,
   Flag,
@@ -20,7 +20,7 @@ import {
 } from "@/core/entities/contest.entity";
 import { HeroBase } from "@/shared/layout/HeroBase";
 import { KpiCard } from "@/shared/ui/dataCard";
-import { updateNickname, downloadMyReport } from "@/infrastructure/api/repositories";
+import { downloadMyReport } from "@/infrastructure/api/repositories";
 import { useInterval } from "@/shared/hooks/useInterval";
 import styles from "./ContestHero.module.scss";
 
@@ -56,7 +56,6 @@ interface ContestHeroProps {
   onEndExam?: () => void;
   onGoToAnswering?: () => void;
   onTabChange?: (tab: string) => void;
-  onRefreshContest?: () => Promise<void>;
   maxWidth?: string;
 }
 
@@ -66,7 +65,6 @@ const ContestHero: React.FC<ContestHeroProps> = ({
   onStartExam,
   onEndExam,
   onGoToAnswering,
-  onRefreshContest,
   maxWidth,
 }) => {
   const { t } = useTranslation("contest");
@@ -75,11 +73,6 @@ const ContestHero: React.FC<ContestHeroProps> = ({
   const [progress, setProgress] = useState(0);
   const [showEndConfirm, setShowEndConfirm] = useState(false);
 
-  // Update Nickname States
-  const [showUpdateNicknameModal, setShowUpdateNicknameModal] = useState(false);
-  const [newNickname, setNewNickname] = useState("");
-  const [isUpdatingNickname, setIsUpdatingNickname] = useState(false);
-
   // Report download state
   const [reportDownloading, setReportDownloading] = useState(false);
   const [showReportModal, setShowReportModal] = useState(false);
@@ -234,7 +227,7 @@ const ContestHero: React.FC<ContestHeroProps> = ({
     // Check if contest has ended (time-based)
     if (isEnded) {
       const hasSubmitted = contest.examStatus === "submitted" &&
-        (contest.hasJoined || contest.isRegistered);
+        contest.hasJoined;
       if (hasSubmitted) {
         return (
           <Button
@@ -399,50 +392,6 @@ const ContestHero: React.FC<ContestHeroProps> = ({
         </div>
       </Modal>
 
-      {/* Update Nickname Modal */}
-      <Modal
-        open={showUpdateNicknameModal}
-        modalHeading={t("hero.updateNickname")}
-        primaryButtonText={
-          isUpdatingNickname ? t("hero.updating") : t("hero.confirmUpdate")
-        }
-        secondaryButtonText={tc("button.cancel")}
-        onRequestClose={() => setShowUpdateNicknameModal(false)}
-        onRequestSubmit={async () => {
-          if (!contest) return;
-          setIsUpdatingNickname(true);
-          try {
-            await updateNickname(contest.id, newNickname);
-            setShowUpdateNicknameModal(false);
-            if (onRefreshContest) {
-              await onRefreshContest();
-            } else {
-              // Fallback if no refresh function provided (shouldn't happen in updated layout)
-              console.warn("No refresh function provided");
-            }
-          } catch (error) {
-            console.error("Failed to update nickname", error);
-            const message =
-              error instanceof Error ? error.message : t("hero.updateFailed");
-            showError(message);
-          } finally {
-            setIsUpdatingNickname(false);
-          }
-        }}
-        primaryButtonDisabled={isUpdatingNickname}
-      >
-        <div className={styles.modalSpacing}>
-          <p className={styles.modalSpacing}>{t("hero.nicknameHint")}</p>
-          <TextInput
-            id="update-nickname"
-            labelText={t("hero.nicknameLabel")}
-            placeholder={t("hero.nicknamePlaceholder")}
-            value={newNickname}
-            onChange={(e) => setNewNickname(e.target.value)}
-          />
-        </div>
-      </Modal>
-
       {/* Report Download Modal */}
       <Modal
         open={showReportModal}
diff --git a/frontend/src/features/contest/components/layout/ContestLayout.module.scss b/frontend/src/features/contest/components/layout/ContestLayout.module.scss
index cefc75de..440080b3 100644
--- a/frontend/src/features/contest/components/layout/ContestLayout.module.scss
+++ b/frontend/src/features/contest/components/layout/ContestLayout.module.scss
@@ -55,6 +55,13 @@
   flex: 1;
 }
 
+.dashboardContent {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+
 // Header brand with embedded breadcrumb
 .headerBrand {
   display: inline-flex;
diff --git a/frontend/src/features/contest/components/layout/ContestLayout.tsx b/frontend/src/features/contest/components/layout/ContestLayout.tsx
index a7c57772..3ea43e9b 100644
--- a/frontend/src/features/contest/components/layout/ContestLayout.tsx
+++ b/frontend/src/features/contest/components/layout/ContestLayout.tsx
@@ -19,10 +19,6 @@ import {
 } from "@carbon/icons-react";
 import { useTranslation } from "react-i18next";
 import ExamModeWrapper from "@/features/contest/components/ExamModeWrapper";
-import ContestPreRegistrationScreen from "@/features/contest/screens/ContestPreRegistrationScreen";
-import ContestHero from "@/features/contest/components/layout/ContestHero";
-import ContestTabs from "@/features/contest/components/layout/ContestTabs";
-import { ContentPage } from "@/shared/layout/ContentPage";
 import { ContestProvider } from "@/features/contest/contexts/ContestContext";
 import { ExamModeMonitorModal } from "@/features/contest/components/modals/ExamModeMonitorModal";
 import ExamStatusBadge from "@/features/contest/components/exam/ExamStatusBadge";
@@ -51,7 +47,6 @@ const ContestLayout = () => {
     isSolvePage,
     isPaperExamPage,
     hasEnded,
-    isUpcoming,
     isAdmin,
     userScore,
     totalMaxScore,
@@ -76,8 +71,11 @@ const ContestLayout = () => {
   const [monitoringModalOpen, setMonitoringModalOpen] = useState(false);
   const [errorModalOpen, setErrorModalOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
+  const isContestParticipant = !!contest?.hasJoined;
   const lockContestMenu =
-    !!contest?.cheatDetectionEnabled && contest.examStatus === "in_progress";
+    isContestParticipant &&
+    !!contest?.cheatDetectionEnabled &&
+    contest.examStatus === "in_progress";
 
   const { timeLeft, isCountdownToStart, unlockTimeLeft } = useContestTimers({
     contest,
@@ -191,7 +189,17 @@ const ContestLayout = () => {
   const renderMainContent = () => {
     const outletContent = (
       <ContestProvider initialContest={contest} initialScoreboardData={scoreboardData} onRefresh={refreshContest}>
-        <Outlet context={{ refreshContest }} />
+        <Outlet
+          context={{
+            refreshContest,
+            onJoin: handleJoin,
+            onStartExam: handleStartExam,
+            onEndExam: handleEndExam,
+            onGoToAnswering: handleGoToAnswering,
+            onOpenAdminPanel: isAdmin ? () => navigate(adminPath) : undefined,
+            isAdmin,
+          }}
+        />
       </ContestProvider>
     );
 
@@ -199,66 +207,23 @@ const ContestLayout = () => {
       return outletContent;
     }
 
-    if (isUpcoming && contest) {
-      return (
-        <div className={styles.scrollableContent}>
-          <ContestPreRegistrationScreen
-            contest={contest}
-            onJoin={handleJoin}
-            isAdmin={isAdmin}
-            onOpenAdminPanel={
-              isAdmin ? () => navigate(adminPath) : undefined
-            }
-          />
-        </div>
-      );
-    }
-
-    if (contest && !contest.hasJoined) {
-      return (
-        <div className={styles.scrollableContent}>
-          <ContestPreRegistrationScreen
-            contest={contest}
-            onJoin={handleJoin}
-            isAdmin={isAdmin}
-            onOpenAdminPanel={
-              isAdmin ? () => navigate(adminPath) : undefined
-            }
-          />
-        </div>
-      );
-    }
-
     if (isSolvePage) {
       return outletContent;
     }
 
     return (
-      <ContentPage
-        hero={
-          <ContestHero
-            contest={contest}
-            onStartExam={handleStartExam}
-            onEndExam={handleEndExam}
-            onGoToAnswering={handleGoToAnswering}
-            onRefreshContest={refreshContest}
-            maxWidth="1056px"
-          />
-        }
-        stickyHeader={
-            contest ? <ContestTabs contest={contest} maxWidth="1056px" /> : undefined
-        }
-      >
+      <div className={styles.dashboardContent}>
         {outletContent}
-      </ContentPage>
+      </div>
     );
   };
 
   const examModeProps = {
     contestId: contestId || "",
-    cheatDetectionEnabled: !!contest?.cheatDetectionEnabled,
-    isExamMonitored: !!contest?.isExamMonitored,
-    requiresFullscreen: !!contest?.requiresFullscreen,
+    cheatDetectionEnabled:
+      isContestParticipant && !!contest?.cheatDetectionEnabled,
+    isExamMonitored: isContestParticipant && !!contest?.isExamMonitored,
+    requiresFullscreen: isContestParticipant && !!contest?.requiresFullscreen,
     hasEnded,
     lockReason: contest?.lockReason,
     examStatus: contest?.examStatus,
diff --git a/frontend/src/features/contest/components/modals/ContestRegistrationModal.tsx b/frontend/src/features/contest/components/modals/ContestRegistrationModal.tsx
index 2b381751..1a31b777 100644
--- a/frontend/src/features/contest/components/modals/ContestRegistrationModal.tsx
+++ b/frontend/src/features/contest/components/modals/ContestRegistrationModal.tsx
@@ -8,12 +8,12 @@ export interface ContestRegistrationModalProps {
   open: boolean;
   contest: ContestDetail;
   onClose: () => void;
-  onSubmit: (data: { nickname?: string; password?: string }) => void;
+  onSubmit: (data: { password?: string }) => void;
 }
 
 /**
  * 競賽報名確認 Modal
- * 支援私有競賽密碼輸入、匿名模式暱稱設定
+ * 支援私有競賽密碼輸入
  */
 export const ContestRegistrationModal: React.FC<ContestRegistrationModalProps> = ({
   open,
@@ -23,23 +23,17 @@ export const ContestRegistrationModal: React.FC<ContestRegistrationModalProps> =
 }) => {
   const { t } = useTranslation("contest");
   const requiresPassword = contest.requiresPassword ?? contest.visibility === "private";
-  const [nickname, setNickname] = useState("");
   const [password, setPassword] = useState("");
 
   const handleSubmit = () => {
     onSubmit({
-      nickname: nickname || undefined,
       password: password || undefined,
     });
-    // Reset form
-    setNickname("");
     setPassword("");
   };
 
   const handleClose = () => {
     onClose();
-    // Reset form
-    setNickname("");
     setPassword("");
   };
 
@@ -73,37 +67,6 @@ export const ContestRegistrationModal: React.FC<ContestRegistrationModalProps> =
           </div>
         )}
 
-        {/* Anonymous mode nickname input */}
-        {contest.anonymousModeEnabled && (
-          <div>
-            <p style={{ marginBottom: "0.5rem", color: "var(--cds-text-secondary)" }}>
-              {t(
-                "registration.anonymousHint",
-                "本競賽已啟用匿名模式，您可以設定一個暱稱。排行榜和提交列表將顯示您的暱稱而非真實帳號。",
-              )}
-            </p>
-            <TextInput
-              id="registration-nickname"
-              labelText={t("registration.nicknameLabel", "暱稱 (選填)")}
-              placeholder={t("registration.nicknamePlaceholder", "留空則使用預設帳號名稱")}
-              value={nickname}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setNickname(e.target.value)
-              }
-              maxLength={50}
-            />
-            <p
-              style={{
-                fontSize: "0.875rem",
-                color: "var(--cds-text-secondary)",
-                marginTop: "0.5rem",
-              }}
-            >
-              {t("registration.nicknameHint", "您可以在報名後隨時修改暱稱。")}
-            </p>
-          </div>
-        )}
-
         {/* Exam mode warning */}
         {contest.cheatDetectionEnabled && (
           <InlineNotification
diff --git a/frontend/src/features/contest/components/participants/ParticipantDashboardPane.tsx b/frontend/src/features/contest/components/participants/ParticipantDashboardPane.tsx
index b2ed1308..fb05578f 100644
--- a/frontend/src/features/contest/components/participants/ParticipantDashboardPane.tsx
+++ b/frontend/src/features/contest/components/participants/ParticipantDashboardPane.tsx
@@ -403,10 +403,7 @@ const ParticipantDashboardPane: React.FC<ParticipantDashboardPaneProps> = ({
                       <div className={styles.profileIdentity}>
                         <div className={styles.profileNameRow}>
                           <span className={styles.primaryText}>
-                            {participant.userDisplayName ||
-                              participant.displayName ||
-                              participant.nickname ||
-                              participant.username}
+                            {participant.displayName || participant.username}
                           </span>
                           <Tag
                             size="sm"
@@ -530,13 +527,13 @@ const ParticipantDashboardPane: React.FC<ParticipantDashboardPaneProps> = ({
                         {[
                           {
                             icon: UserMultiple,
-                            label: t("dashboard.username", "使用者"),
+                            label: t("dashboard.username", "使用者名稱"),
                             value: participant.username || "-",
                           },
                           {
                             icon: UserMultiple,
                             label: t("dashboard.displayName", "顯示名稱"),
-                            value: participant.userDisplayName || "-",
+                            value: participant.displayName || "-",
                           },
                           {
                             icon: UserMultiple,
diff --git a/frontend/src/features/contest/components/participants/ParticipantOperationsPane.tsx b/frontend/src/features/contest/components/participants/ParticipantOperationsPane.tsx
index 95aa88ce..4297ef26 100644
--- a/frontend/src/features/contest/components/participants/ParticipantOperationsPane.tsx
+++ b/frontend/src/features/contest/components/participants/ParticipantOperationsPane.tsx
@@ -47,10 +47,8 @@ interface ParticipantOperationsPaneProps {
   showViolationKpi?: boolean;
 }
 
-const getParticipantDisplayName = (participant: ContestParticipant) =>
-  participant.userDisplayName ||
+const getProfileDisplayName = (participant: ContestParticipant) =>
   participant.displayName ||
-  participant.nickname ||
   participant.username;
 
 const formatClockTime = (value?: string | null) => {
@@ -127,7 +125,7 @@ const ParticipantOperationsPane = ({
   }
 
   const participant = dashboard.participant;
-  const displayName = getParticipantDisplayName(participant);
+  const profileDisplayName = getProfileDisplayName(participant);
   const primaryAction = dashboard.actions.canUnlock
     ? {
         label: t("participants.actions.unlock", "解除鎖定"),
@@ -238,7 +236,9 @@ const ParticipantOperationsPane = ({
         <div className={styles.operationsHeroTop}>
           <div className={styles.operationsIdentity}>
             <div className={styles.operationsTitleRow}>
-              <h2 className={styles.operationsTitle}>{displayName}</h2>
+              <h2 className={styles.operationsTitle}>
+                {profileDisplayName}
+              </h2>
             </div>
             <p className={styles.operationsSubtitle}>@{participant.username}</p>
           </div>
diff --git a/frontend/src/features/contest/components/participants/ParticipantsListPane.test.tsx b/frontend/src/features/contest/components/participants/ParticipantsListPane.test.tsx
index 8f3f4459..121d9da8 100644
--- a/frontend/src/features/contest/components/participants/ParticipantsListPane.test.tsx
+++ b/frontend/src/features/contest/components/participants/ParticipantsListPane.test.tsx
@@ -27,7 +27,6 @@ const participant: ContestParticipant = {
   userId: "1",
   username: "student1",
   displayName: "Student One",
-  userDisplayName: "Real Name",
   accountRole: "student",
   authProvider: "google",
   score: 90,
@@ -50,7 +49,9 @@ describe("ParticipantsListPane", () => {
     );
 
     expect(screen.getByText("顯示 1 / 3 位")).toBeInTheDocument();
-    fireEvent.click(screen.getByText("Real Name"));
+    expect(screen.getByText("Student One")).toBeInTheDocument();
+    expect(screen.getByText("@student1")).toBeInTheDocument();
+    fireEvent.click(screen.getByText("Student One"));
     expect(onSelect).toHaveBeenCalledWith("1");
   });
 
@@ -65,7 +66,7 @@ describe("ParticipantsListPane", () => {
       />,
     );
 
-    expect(screen.queryByText("顯示名稱 Real Name")).not.toBeInTheDocument();
+    expect(screen.queryByText("顯示名稱 Student One")).not.toBeInTheDocument();
     expect(screen.queryByText("身份 student")).not.toBeInTheDocument();
     expect(screen.queryByText("註冊身份 SSO")).not.toBeInTheDocument();
   });
diff --git a/frontend/src/features/contest/components/participants/ParticipantsListPane.tsx b/frontend/src/features/contest/components/participants/ParticipantsListPane.tsx
index 6032d908..b218f8f6 100644
--- a/frontend/src/features/contest/components/participants/ParticipantsListPane.tsx
+++ b/frontend/src/features/contest/components/participants/ParticipantsListPane.tsx
@@ -29,10 +29,8 @@ interface ParticipantsListPaneProps {
   onSelect: (userId: string) => void;
 }
 
-const getParticipantDisplayName = (participant: ContestParticipant) =>
-  participant.userDisplayName ||
+const getProfileDisplayName = (participant: ContestParticipant) =>
   participant.displayName ||
-  participant.nickname ||
   participant.username;
 
 const NEEDS_ATTENTION_STATUSES = new Set(["locked", "paused"]);
@@ -113,7 +111,7 @@ const ParticipantsListPane: React.FC<ParticipantsListPaneProps> = ({
             <div className={styles.gridCardHeader}>
               <div className={styles.gridCardIdentity}>
                 <ListItemTitle className={styles.gridCardName}>
-                  {getParticipantDisplayName(participant)}
+                  {getProfileDisplayName(participant)}
                 </ListItemTitle>
                 <ListItemMeta className={styles.gridCardUsername}>
                   @{participant.username}
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss
new file mode 100644
index 00000000..cb94477c
--- /dev/null
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss
@@ -0,0 +1,353 @@
+.root {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.dashboard {
+  max-width: 1056px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.summaryPanel,
+.infoGrid,
+.progressGrid {
+  border: 1px solid var(--cds-border-subtle);
+}
+
+.summaryPanel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
+}
+
+.summaryMain,
+.actionPanel,
+.infoCell,
+.progressPanel,
+.rulesPanel {
+  padding: 1.5rem;
+}
+
+.summaryMain {
+  min-width: 0;
+  border-right: 1px solid var(--cds-border-subtle);
+}
+
+.titleRow,
+.sectionHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.titleRow {
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: 1rem;
+}
+
+.title {
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-size: var(--cds-heading-04-font-size, 1.75rem);
+  font-weight: 600;
+  line-height: var(--cds-heading-04-line-height, 1.28572);
+}
+
+.phaseTitle,
+.sectionTitle {
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: 600;
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+}
+
+.phaseDescription,
+.sectionDescription,
+.recordMeta,
+.emptyText,
+.metricLabel {
+  color: var(--cds-text-secondary);
+}
+
+.phaseDescription {
+  margin: 0.25rem 0 0;
+  max-width: 44rem;
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+}
+
+.markdown,
+.rulesContent {
+  margin-top: 1rem;
+  color: var(--cds-text-primary);
+}
+
+.markdown {
+  max-width: 48rem;
+}
+
+.actionPanel {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 1.5rem;
+}
+
+.actionStack,
+.modalStack {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.timerValue {
+  margin: 0.25rem 0 0;
+  color: var(--cds-text-primary);
+  font-family: var(--cds-code-font-family, monospace);
+  font-size: var(--cds-heading-05-font-size, 2rem);
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.infoGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border-top: 0;
+}
+
+.infoCell {
+  min-width: 0;
+  border-right: 1px solid var(--cds-border-subtle);
+}
+
+.infoCell:last-child {
+  border-right: 0;
+}
+
+.metricLabel {
+  margin: 0;
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+}
+
+.metricValue {
+  margin: 0.375rem 0 0;
+  color: var(--cds-text-primary);
+  font-size: var(--cds-body-compact-02-font-size, 1rem);
+  font-weight: 600;
+  line-height: var(--cds-body-compact-02-line-height, 1.375);
+}
+
+.progressGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
+  border-top: 0;
+}
+
+.progressPanel {
+  border-right: 1px solid var(--cds-border-subtle);
+}
+
+.progressTrack {
+  position: relative;
+  block-size: 0.5rem;
+  margin-top: 1.5rem;
+  overflow: hidden;
+  background: var(--cds-layer-accent-01);
+}
+
+.progressFill {
+  block-size: 100%;
+  min-inline-size: 0;
+  background: var(--cds-support-success);
+}
+
+.statGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.rulesPanel {
+  display: grid;
+  gap: 1rem;
+  align-content: start;
+}
+
+.warningIcon {
+  color: var(--cds-support-warning);
+}
+
+.successIcon {
+  color: var(--cds-support-success);
+}
+
+.inlineRecordsPanel {
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--cds-border-subtle);
+}
+
+.inlineRecordsHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.inlineRecordsTitle {
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+  font-weight: 600;
+  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+}
+
+.recordList {
+  display: grid;
+  margin-top: 1rem;
+  border-top: 1px solid var(--cds-border-subtle);
+}
+
+.recordRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+.recordRow:last-child {
+  border-bottom: 0;
+}
+
+.recordTitle {
+  color: var(--cds-text-primary);
+  font-size: var(--cds-body-compact-02-font-size, 1rem);
+  font-weight: 600;
+  line-height: var(--cds-body-compact-02-line-height, 1.375);
+}
+
+.recordMeta {
+  margin-top: 0.25rem;
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+}
+
+.recordScore {
+  color: var(--cds-text-primary);
+  font-family: var(--cds-code-font-family, monospace);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.problemReportList {
+  display: grid;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.problemReportItem {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem;
+  border: 1px solid var(--cds-border-subtle);
+}
+
+.problemReportMeta {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.errorText {
+  margin: 1rem 0 0;
+  color: var(--cds-text-error);
+}
+
+.emptyText {
+  margin: 1rem 0 0;
+}
+
+@media (max-width: 1056px) {
+  .summaryPanel,
+  .progressGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .summaryMain,
+  .progressPanel {
+    border-right: 0;
+    border-bottom: 1px solid var(--cds-border-subtle);
+  }
+
+  .infoGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .infoCell:nth-child(2) {
+    border-right: 0;
+  }
+
+  .infoCell:nth-child(n + 3) {
+    border-top: 1px solid var(--cds-border-subtle);
+  }
+}
+
+@media (max-width: 672px) {
+  .dashboard {
+    padding: 0.75rem;
+  }
+
+  .summaryMain,
+  .actionPanel,
+  .infoCell,
+  .progressPanel,
+  .rulesPanel {
+    padding: 1rem;
+  }
+
+  .infoGrid,
+  .statGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .infoCell {
+    border-right: 0;
+    border-top: 1px solid var(--cds-border-subtle);
+  }
+
+  .infoCell:first-child {
+    border-top: 0;
+  }
+
+  .recordRow {
+    grid-template-columns: 1fr;
+  }
+
+  .recordScore {
+    white-space: normal;
+  }
+
+  .problemReportItem {
+    grid-template-columns: 1fr;
+  }
+
+  .problemReportMeta {
+    justify-content: flex-start;
+  }
+
+  .inlineRecordsHeader {
+    display: grid;
+  }
+
+}
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
new file mode 100644
index 00000000..568ed566
--- /dev/null
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
@@ -0,0 +1,378 @@
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { ChangeEventHandler, ReactNode } from "react";
+import type {
+  ContestDetail,
+} from "@/core/entities/contest.entity";
+import { getExamQuestions } from "@/infrastructure/api/repositories/examQuestions.repository";
+import {
+  getExamResults,
+  getMyExamAnswers,
+} from "@/infrastructure/api/repositories/examAnswers.repository";
+import StudentContestDashboard from "./StudentContestDashboardView";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (_key: string, fallback?: string) => fallback ?? _key,
+  }),
+  initReactI18next: {
+    type: "3rdParty",
+    init: () => {},
+  },
+}));
+
+vi.mock("@carbon/react", () => ({
+  Button: ({
+    children,
+    disabled,
+    onClick,
+  }: {
+    children: ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+  }) => (
+    <button type="button" disabled={disabled} onClick={onClick}>
+      {children}
+    </button>
+  ),
+  InlineNotification: ({
+    title,
+    subtitle,
+  }: {
+    title: ReactNode;
+    subtitle: ReactNode;
+  }) => (
+    <div>
+      <span>{title}</span>
+      <span>{subtitle}</span>
+    </div>
+  ),
+  Modal: ({
+    open,
+    children,
+  }: {
+    open: boolean;
+    children: ReactNode;
+  }) => (open ? <div role="dialog">{children}</div> : null),
+  Select: ({
+    children,
+    value,
+    onChange,
+  }: {
+    children: ReactNode;
+    value: string;
+    onChange?: ChangeEventHandler<HTMLSelectElement>;
+  }) => (
+    <select value={value} onChange={onChange}>
+      {children}
+    </select>
+  ),
+  SelectItem: ({ value, text }: { value: string; text: string }) => (
+    <option value={value}>{text}</option>
+  ),
+  Tag: ({ children }: { children: ReactNode }) => <span>{children}</span>,
+  TextInput: () => <input aria-label="text input" />,
+}));
+
+vi.mock("@carbon/icons-react", () => {
+  const Icon = () => <span aria-hidden="true" />;
+  return {
+    Checkmark: Icon,
+    Document: Icon,
+    Flag: Icon,
+    Launch: Icon,
+    Login: Icon,
+    Play: Icon,
+    Renew: Icon,
+    Time: Icon,
+    WarningAlt: Icon,
+  };
+});
+
+vi.mock("@/shared/ui/markdown/MarkdownRenderer", () => ({
+  default: ({ children }: { children: string }) => <div>{children}</div>,
+}));
+
+vi.mock("@/features/contest/components/exam/PaperQuestionOverviewTable", () => ({
+  default: ({
+    rows,
+    showScore,
+    showFeedback,
+  }: {
+    rows: Array<{
+      id: string;
+      index: number;
+      prompt: string;
+      scoreDisplay?: string;
+      feedbackDisplay?: string;
+      statusLabel?: string;
+    }>;
+    showScore?: boolean;
+    showFeedback?: boolean;
+  }) => (
+    <div>
+      {rows.map((row) => (
+        <div key={row.id}>
+          <span>{row.index}</span>
+          <span>{row.prompt}</span>
+          <span>{row.statusLabel}</span>
+          {showScore ? <span>{row.scoreDisplay}</span> : null}
+          {showFeedback ? <span>{row.feedbackDisplay}</span> : null}
+        </div>
+      ))}
+    </div>
+  ),
+}));
+
+vi.mock("@/features/contest/components/modals/ContestRegistrationModal", () => ({
+  ContestRegistrationModal: ({ open }: { open: boolean }) =>
+    open ? <div>registration modal</div> : null,
+}));
+
+vi.mock("@/infrastructure/api/repositories", () => ({
+  downloadMyReport: vi.fn(),
+}));
+
+vi.mock("@/infrastructure/api/repositories/examQuestions.repository", () => ({
+  getExamQuestions: vi.fn(async () => []),
+}));
+
+vi.mock("@/infrastructure/api/repositories/examAnswers.repository", () => ({
+  getExamResults: vi.fn(async () => []),
+  getMyExamAnswers: vi.fn(async () => []),
+}));
+
+const createContest = (
+  overrides: Partial<ContestDetail> = {},
+): ContestDetail =>
+  ({
+    id: "contest-1",
+    name: "測試競賽",
+    description: "競賽說明",
+    startTime: "2099-05-05T10:00:00.000Z",
+    endTime: "2099-05-05T12:00:00.000Z",
+    status: "published",
+    visibility: "public",
+    hasJoined: true,
+    isRegistered: true,
+    contestType: "coding",
+    deliveryMode: "exam",
+    countsTowardGrade: true,
+    cheatDetectionEnabled: false,
+    scoreboardVisibleDuringContest: false,
+    allowMultipleJoins: false,
+    maxCheatWarnings: 3,
+    allowAutoUnlock: false,
+    autoUnlockMinutes: 0,
+    resultsPublished: false,
+    examQuestionsCount: 0,
+    isExamMonitored: false,
+    requiresFullscreen: false,
+    canSubmitExam: true,
+    examStatus: "not_started",
+    permissions: {
+      canSwitchView: true,
+      canEditContest: false,
+      canToggleStatus: false,
+      canDeleteContest: false,
+      canPublishProblems: false,
+      canViewAllSubmissions: false,
+      canViewFullScoreboard: false,
+      canManageClarifications: false,
+    },
+    problems: [
+      {
+        id: "binding-1",
+        problemId: "problem-1",
+        label: "A",
+        title: "Two Sum",
+        score: 50,
+        maxScore: 50,
+      },
+    ],
+    rules: "規則",
+    ...overrides,
+  }) as ContestDetail;
+
+const renderDashboard = (
+  contest: ContestDetail,
+) =>
+  render(
+    <StudentContestDashboard
+      contest={contest}
+    />,
+  );
+
+describe("StudentContestDashboard", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders pre-exam join state inside the dashboard", () => {
+    renderDashboard(
+      createContest({
+        hasJoined: false,
+        isRegistered: false,
+      }),
+    );
+
+    expect(screen.getByRole("main", { name: "學生競賽首頁" })).toBeInTheDocument();
+    expect(screen.getByText("考試前")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /加入競賽/ })).toBeInTheDocument();
+  });
+
+  it("does not show answer records before the participant starts", () => {
+    renderDashboard(createContest());
+
+    expect(screen.getByText("考試前")).toBeInTheDocument();
+    expect(screen.getByText("尚無作答紀錄。")).toBeInTheDocument();
+    expect(screen.queryByText("Two Sum")).not.toBeInTheDocument();
+  });
+
+  it("renders in-exam progress and answering action", () => {
+    renderDashboard(
+      createContest({
+        startTime: "2000-05-05T10:00:00.000Z",
+        endTime: "2099-05-05T12:00:00.000Z",
+        examStatus: "in_progress",
+        problems: [
+          {
+            id: "binding-1",
+            problemId: "problem-1",
+            label: "A",
+            title: "Two Sum",
+            score: 50,
+            maxScore: 50,
+            userStatus: "AC",
+          },
+        ],
+      }),
+    );
+
+    expect(screen.getByText("考試中")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /回到作答/ })).toBeInTheDocument();
+    expect(screen.getByText("1 / 1")).toBeInTheDocument();
+  });
+
+  it("renders in-exam paper progress from autosaved answers", async () => {
+    vi.mocked(getExamQuestions).mockResolvedValueOnce([
+      {
+        id: "question-1",
+        contestId: "contest-1",
+        questionType: "short_answer",
+        prompt: "Explain",
+        options: [],
+        explanation: "",
+        score: 10,
+        order: 1,
+        createdAt: "2000-05-05T10:00:00.000Z",
+        updatedAt: "2000-05-05T10:00:00.000Z",
+      },
+      {
+        id: "question-2",
+        contestId: "contest-1",
+        questionType: "single_choice",
+        prompt: "Choose",
+        options: ["A", "B"],
+        explanation: "",
+        score: 5,
+        order: 2,
+        createdAt: "2000-05-05T10:00:00.000Z",
+        updatedAt: "2000-05-05T10:00:00.000Z",
+      },
+    ]);
+    vi.mocked(getMyExamAnswers).mockResolvedValueOnce([
+      {
+        id: "answer-1",
+        questionId: "question-1",
+        answer: { text: "draft answer" },
+        createdAt: "2000-05-05T10:10:00.000Z",
+        updatedAt: "2000-05-05T10:10:00.000Z",
+      },
+    ]);
+
+    renderDashboard(
+      createContest({
+        contestType: "paper_exam",
+        startTime: "2000-05-05T10:00:00.000Z",
+        endTime: "2099-05-05T12:00:00.000Z",
+        examStatus: "in_progress",
+        examQuestionsCount: 2,
+        problems: [],
+      }),
+    );
+
+    expect(await screen.findByText("目前作答狀況")).toBeInTheDocument();
+    expect(await screen.findByText("1 / 2")).toBeInTheDocument();
+    expect(screen.getByText("已作答")).toBeInTheDocument();
+    expect(screen.getByText("未作答")).toBeInTheDocument();
+    expect(getMyExamAnswers).toHaveBeenCalledWith("contest-1");
+    expect(getExamResults).not.toHaveBeenCalled();
+  });
+
+  it("renders post-exam answer report without extra score panels", () => {
+    renderDashboard(
+      createContest({
+        startTime: "2000-05-05T10:00:00.000Z",
+        endTime: "2000-05-05T12:00:00.000Z",
+        examStatus: "submitted",
+        resultsPublished: true,
+      }),
+    );
+
+    expect(screen.getByText("考試後")).toBeInTheDocument();
+    expect(screen.queryByText("分數分佈")).not.toBeInTheDocument();
+    expect(screen.queryByText("成績單與分數分佈")).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /下載作答報告/ })).toBeInTheDocument();
+  });
+
+  it("renders published paper exam score from answer results", async () => {
+    vi.mocked(getExamQuestions).mockResolvedValueOnce([
+      {
+        id: "question-1",
+        contestId: "contest-1",
+        questionType: "short_answer",
+        prompt: "Explain",
+        options: [],
+        explanation: "",
+        score: 10,
+        order: 1,
+        createdAt: "2000-05-05T10:00:00.000Z",
+        updatedAt: "2000-05-05T10:00:00.000Z",
+      },
+    ]);
+    vi.mocked(getExamResults).mockResolvedValueOnce([
+      {
+        id: "answer-1",
+        questionId: "question-1",
+        answer: { text: "answer" },
+        createdAt: "2000-05-05T10:10:00.000Z",
+        updatedAt: "2000-05-05T10:10:00.000Z",
+        isCorrect: null,
+        score: 8,
+        feedback: "Good",
+        gradedByUsername: "teacher",
+        gradedAt: "2000-05-05T11:00:00.000Z",
+      },
+    ]);
+
+    renderDashboard(
+      createContest({
+        contestType: "paper_exam",
+        startTime: "2000-05-05T10:00:00.000Z",
+        endTime: "2000-05-05T12:00:00.000Z",
+        examStatus: "submitted",
+        resultsPublished: true,
+        examQuestionsCount: 1,
+        problems: [],
+      }),
+    );
+
+    expect(await screen.findAllByText("8 / 10")).not.toHaveLength(0);
+    expect(screen.getByText("考試成績")).toBeInTheDocument();
+    expect(screen.getByText("8")).toBeInTheDocument();
+    expect(screen.queryByText("Good")).not.toBeInTheDocument();
+    expect(screen.getByText("作答紀錄與成績")).toBeInTheDocument();
+    expect(screen.queryByText("相關頁面")).not.toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
new file mode 100644
index 00000000..158a84a9
--- /dev/null
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
@@ -0,0 +1,760 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  Button,
+  InlineNotification,
+  Modal,
+  Select,
+  SelectItem,
+  Tag,
+} from "@carbon/react";
+import {
+  Checkmark,
+  Document,
+  Flag,
+  Launch,
+  Login,
+  Play,
+  Renew,
+  Time,
+  WarningAlt,
+} from "@carbon/icons-react";
+import { useTranslation } from "react-i18next";
+
+import type {
+  ContestDetail,
+  ExamQuestion,
+} from "@/core/entities/contest.entity";
+import {
+  getContestState,
+  getContestStateColor,
+  getContestStateLabel,
+} from "@/core/entities/contest.entity";
+import { downloadMyReport } from "@/infrastructure/api/repositories";
+import { getExamQuestions } from "@/infrastructure/api/repositories/examQuestions.repository";
+import {
+  getExamResults,
+  getMyExamAnswers,
+  type ExamAnswer,
+  type ExamAnswerDetail,
+} from "@/infrastructure/api/repositories/examAnswers.repository";
+import MarkdownRenderer from "@/shared/ui/markdown/MarkdownRenderer";
+import { formatDate } from "@/shared/utils/format";
+import { useInterval } from "@/shared/hooks/useInterval";
+import PaperQuestionOverviewTable, {
+  type PaperQuestionOverviewRow,
+} from "@/features/contest/components/exam/PaperQuestionOverviewTable";
+import { ContestRegistrationModal } from "@/features/contest/components/modals/ContestRegistrationModal";
+import {
+  buildCodingProgressSummary,
+  formatCompactDuration,
+  resolveStudentContestPhase,
+  type StudentContestPhase,
+} from "./studentDashboardState";
+import styles from "./StudentContestDashboard.module.scss";
+
+interface StudentContestDashboardProps {
+  contest: ContestDetail;
+  onJoin?: (data?: { password?: string }) => void;
+  onStartExam?: () => void;
+  onEndExam?: () => void;
+  onGoToAnswering?: () => void;
+  onOpenAdminPanel?: () => void;
+  onRefreshContest?: () => Promise<void>;
+  isAdmin?: boolean;
+}
+
+interface PaperExamDashboardData {
+  loading: boolean;
+  error: string | null;
+  questions: ExamQuestion[];
+  answers: ExamAnswer[];
+  results: ExamAnswerDetail[];
+}
+
+const EMPTY_PAPER_DATA: PaperExamDashboardData = {
+  loading: false,
+  error: null,
+  questions: [],
+  answers: [],
+  results: [],
+};
+
+const isParticipant = (contest: ContestDetail): boolean =>
+  contest.hasJoined;
+
+const QUESTION_TYPE_LABEL: Record<string, string> = {
+  true_false: "是非題",
+  single_choice: "單選題",
+  multiple_choice: "多選題",
+  short_answer: "簡答題",
+  essay: "申論題",
+};
+
+const getPhaseCopy = (
+  phase: StudentContestPhase,
+  resultsPublished: boolean,
+): { title: string; description: string } => {
+  if (phase === "before") {
+    return {
+      title: "考試前",
+      description: "確認報名狀態、規則與監控設定，等待考試開始。",
+    };
+  }
+  if (phase === "during") {
+    return {
+      title: "考試中",
+      description: "追蹤作答進度與剩餘時間，必要時回到作答畫面。",
+    };
+  }
+  return {
+    title: "考試後",
+    description: resultsPublished
+      ? "成績已發布，可查看作答紀錄與成績。"
+      : "作答已結束，成績尚未發布。",
+  };
+};
+
+const getExamStatusLabel = (contest: ContestDetail): string => {
+  switch (contest.examStatus) {
+    case "in_progress":
+      return "作答中";
+    case "paused":
+      return "待恢復";
+    case "locked":
+      return "已鎖定";
+    case "submitted":
+      return "已交卷";
+    case "not_started":
+    default:
+      return isParticipant(contest) ? "尚未開始" : "尚未加入";
+  }
+};
+
+const getRemainingLabel = (
+  phase: StudentContestPhase,
+  contest: ContestDetail,
+  nowMs: number,
+): { label: string; value: string } => {
+  const startMs = Date.parse(contest.startTime);
+  const endMs = Date.parse(contest.endTime);
+
+  if (phase === "before") {
+    return {
+      label: "距離開始",
+      value: Number.isFinite(startMs)
+        ? formatCompactDuration(startMs - nowMs)
+        : "-",
+    };
+  }
+  if (phase === "during") {
+    return {
+      label: "剩餘時間",
+      value: Number.isFinite(endMs) ? formatCompactDuration(endMs - nowMs) : "-",
+    };
+  }
+  return {
+    label: "考試狀態",
+    value: contest.resultsPublished ? "成績已發布" : "等待成績發布",
+  };
+};
+
+const buildPaperProgressSummary = (
+  questions: ExamQuestion[],
+  answers: Array<Pick<ExamAnswer, "questionId"> & Partial<Pick<ExamAnswerDetail, "score">>>,
+  resultsPublished: boolean,
+) => {
+  const resultQuestionIds = new Set(answers.map((answer) => answer.questionId));
+  const completedItems = questions.filter((question) =>
+    resultQuestionIds.has(String(question.id)),
+  ).length;
+  const totalScore = resultsPublished
+    ? answers.reduce((sum, answer) => sum + (answer.score ?? 0), 0)
+    : null;
+  const maxScore = questions.reduce(
+    (sum, question) => sum + (question.score ?? 0),
+    0,
+  );
+  return {
+    totalItems: questions.length,
+    completedItems,
+    attemptedItems: completedItems,
+    totalScore,
+    maxScore,
+  };
+};
+
+export default function StudentContestDashboard({
+  contest,
+  onJoin,
+  onStartExam,
+  onEndExam,
+  onGoToAnswering,
+  onOpenAdminPanel,
+  onRefreshContest,
+  isAdmin = false,
+}: StudentContestDashboardProps) {
+  const { t } = useTranslation("contest");
+  const { t: tc } = useTranslation("common");
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  const [showRegisterModal, setShowRegisterModal] = useState(false);
+  const [showEndConfirm, setShowEndConfirm] = useState(false);
+  const [showReportModal, setShowReportModal] = useState(false);
+  const [reportLanguage, setReportLanguage] = useState("zh-TW");
+  const [reportDownloading, setReportDownloading] = useState(false);
+  const [reportError, setReportError] = useState<string | null>(null);
+  const [paperData, setPaperData] =
+    useState<PaperExamDashboardData>(EMPTY_PAPER_DATA);
+  const [paperReloadKey, setPaperReloadKey] = useState(0);
+
+  const phase = resolveStudentContestPhase(contest, nowMs);
+  const phaseCopy = getPhaseCopy(phase, contest.resultsPublished);
+  const participant = isParticipant(contest);
+  const requiresPassword =
+    contest.requiresPassword ?? contest.visibility === "private";
+  const contestState = getContestState({
+    status: contest.status,
+    startTime: contest.startTime,
+    endTime: contest.endTime,
+  });
+  const remaining = getRemainingLabel(phase, contest, nowMs);
+  const examStatus = contest.examStatus ?? "not_started";
+  const hasAnswerRecord =
+    contest.resultsPublished ||
+    examStatus !== "not_started" ||
+    !!contest.hasStarted ||
+    !!contest.startedAt ||
+    !!contest.submittedAt ||
+    contest.problems.some((problem) => !!problem.userStatus);
+  const shouldLoadPaperData =
+    contest.contestType === "paper_exam" &&
+    participant &&
+    hasAnswerRecord &&
+    phase !== "before";
+
+  useInterval(() => setNowMs(Date.now()), phase !== "after" ? 1000 : null);
+
+  useEffect(() => {
+    if (!shouldLoadPaperData) {
+      setPaperData(EMPTY_PAPER_DATA);
+      return;
+    }
+
+    let cancelled = false;
+    setPaperData((previous) => ({ ...previous, loading: true, error: null }));
+    const load = async () => {
+      const [questionsResult, answersResult] =
+        await Promise.allSettled([
+          getExamQuestions(contest.id),
+          contest.resultsPublished
+            ? getExamResults(contest.id)
+            : getMyExamAnswers(contest.id),
+        ]);
+      if (cancelled) return;
+
+      const questions =
+        questionsResult.status === "fulfilled"
+          ? questionsResult.value.slice().sort((a, b) => a.order - b.order)
+          : [];
+      const answers =
+        answersResult.status === "fulfilled" && !contest.resultsPublished
+          ? answersResult.value as ExamAnswer[]
+          : [];
+      const results =
+        answersResult.status === "fulfilled" && contest.resultsPublished
+          ? answersResult.value as ExamAnswerDetail[]
+          : [];
+
+      setPaperData({
+        loading: false,
+        error: questionsResult.status === "rejected" ? "題目資料暫時無法載入" : null,
+        questions,
+        answers,
+        results,
+      });
+    };
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    contest.contestType,
+    contest.id,
+    contest.resultsPublished,
+    paperReloadKey,
+    shouldLoadPaperData,
+  ]);
+
+  const progressSummary = useMemo(() => {
+    if (contest.contestType === "paper_exam") {
+      return buildPaperProgressSummary(
+        paperData.questions,
+        contest.resultsPublished ? paperData.results : paperData.answers,
+        contest.resultsPublished,
+      );
+    }
+    return buildCodingProgressSummary(contest);
+  }, [contest, paperData]);
+
+  const progressPercent =
+    progressSummary.totalItems > 0
+      ? Math.round(
+          (progressSummary.completedItems / progressSummary.totalItems) * 100,
+        )
+      : 0;
+
+  const canRegister = contest.status === "published" && contestState !== "ended";
+  const canStartExam =
+    participant &&
+    contest.status === "published" &&
+    phase === "during" &&
+    examStatus === "not_started";
+  const canResumeExam = participant && examStatus === "paused";
+  const canGoToAnswering = participant && examStatus === "in_progress";
+  const canSubmitExam = participant && examStatus === "in_progress";
+  const scoreDisplay = contest.resultsPublished
+    ? progressSummary.totalScore === null
+      ? "成績已發布"
+      : `${progressSummary.totalScore} / ${progressSummary.maxScore}`
+    : "尚未發布";
+  const primaryStatus = contest.resultsPublished
+    ? {
+        label: "考試成績",
+        value:
+          contest.contestType === "paper_exam" && paperData.loading
+            ? "載入中..."
+            : scoreDisplay,
+      }
+    : remaining;
+
+  const handleRegisterSubmit = (data: { password?: string }) => {
+    setShowRegisterModal(false);
+    onJoin?.(data);
+  };
+
+  const handleDownloadReport = async () => {
+    setReportError(null);
+    setReportDownloading(true);
+    try {
+      await downloadMyReport(contest.id, reportLanguage);
+      setShowReportModal(false);
+    } catch (error) {
+      setReportError(error instanceof Error ? error.message : t("report.failed"));
+    } finally {
+      setReportDownloading(false);
+    }
+  };
+
+  const renderPrimaryAction = () => {
+    if (!participant && phase !== "after") {
+      return (
+        <Button
+          renderIcon={Login}
+          disabled={!canRegister}
+          onClick={() => setShowRegisterModal(true)}
+        >
+          {canRegister ? "加入競賽" : "目前不可加入"}
+        </Button>
+      );
+    }
+    if (canStartExam || canResumeExam) {
+      return (
+        <Button renderIcon={Play} onClick={onStartExam}>
+          {canResumeExam ? "恢復作答" : "開始作答"}
+        </Button>
+      );
+    }
+    if (canGoToAnswering) {
+      return (
+        <Button renderIcon={Launch} onClick={onGoToAnswering}>
+          回到作答
+        </Button>
+      );
+    }
+    if (contest.examStatus === "submitted") {
+      return (
+        <Button
+          kind="tertiary"
+          renderIcon={Document}
+          onClick={() => setShowReportModal(true)}
+        >
+          下載作答報告
+        </Button>
+      );
+    }
+    return (
+      <Button kind="secondary" disabled renderIcon={Time}>
+        {phase === "before" ? "等待開始" : "不可作答"}
+      </Button>
+    );
+  };
+
+  const renderCodingRecords = () => {
+    if (!hasAnswerRecord) {
+      return <p className={styles.emptyText}>尚無作答紀錄。</p>;
+    }
+
+    const problems = contest.problems.map((problem, index) => ({
+      id: problem.id,
+      label: problem.label || String(index + 1),
+      problemId: problem.problemId,
+      title: problem.title,
+      order: problem.order ?? index,
+      score: problem.maxScore ?? problem.score ?? 0,
+      userStatus: problem.userStatus,
+    }));
+
+    if (!problems.length) {
+      return <p className={styles.emptyText}>尚無題目資料。</p>;
+    }
+
+    return (
+      <div className={styles.problemReportList}>
+        {problems.map((problem) => {
+          const statusText = problem.userStatus ?? "尚未提交";
+          return (
+            <div className={styles.problemReportItem} key={problem.id}>
+              <div>
+                <div className={styles.recordTitle}>
+                  {problem.label}. {problem.title || "Untitled"}
+                </div>
+                <div className={styles.recordMeta}>
+                  滿分 {problem.score ?? 0}
+                </div>
+              </div>
+              <div className={styles.problemReportMeta}>
+                <Tag type={problem.userStatus === "AC" ? "green" : "cool-gray"}>
+                  {statusText}
+                </Tag>
+                <span className={styles.recordScore}>
+                  {contest.resultsPublished ? "成績已發布" : "待發布"}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const renderPaperRecords = () => {
+    if (!hasAnswerRecord || phase === "before") {
+      return <p className={styles.emptyText}>尚無作答紀錄。</p>;
+    }
+    if (paperData.loading) return <p className={styles.emptyText}>載入作答資料中...</p>;
+    if (paperData.error) return <p className={styles.errorText}>{paperData.error}</p>;
+    if (!paperData.questions.length) {
+      return <p className={styles.emptyText}>尚無題目資料。</p>;
+    }
+
+    const resultMap = new Map(
+      paperData.results.map((result) => [String(result.questionId), result]),
+    );
+    const answerMap = new Map(
+      paperData.answers.map((answer) => [String(answer.questionId), answer]),
+    );
+    const rows: PaperQuestionOverviewRow[] = paperData.questions.map(
+      (question, index) => {
+        const result = resultMap.get(String(question.id));
+        const answer = answerMap.get(String(question.id));
+        const answered = !!result || !!answer;
+        const questionType =
+          result?.questionType ??
+          result?.questionSnapshot?.questionType ??
+          question.questionType;
+        const maxScore =
+          question.score ?? result?.maxScore ?? result?.questionSnapshot?.score ?? 0;
+        const status =
+          !answered
+            ? { label: "未作答", tone: "warm-gray" as const }
+            : !contest.resultsPublished
+              ? { label: "已作答", tone: "cool-gray" as const }
+            : result?.isCorrect === true
+                ? { label: "正確", tone: "green" as const }
+                : result?.isCorrect === false
+                  ? (result?.score ?? 0) > 0
+                    ? { label: "部分得分", tone: "cyan" as const }
+                    : { label: "未得分", tone: "red" as const }
+                  : { label: result?.gradedAt ? "已批改" : "待批改", tone: "warm-gray" as const };
+
+        return {
+          id: String(question.id),
+          index: index + 1,
+          prompt:
+            result?.questionPrompt ??
+            result?.questionSnapshot?.prompt ??
+            question.prompt,
+          typeLabel: t(
+            `common:questionType.label.${questionType}`,
+            QUESTION_TYPE_LABEL[questionType] ?? questionType,
+          ),
+          maxScore,
+          scoreDisplay: contest.resultsPublished
+            ? String(result?.score ?? 0)
+            : result
+              ? "已作答"
+              : "-",
+          statusLabel: status.label,
+          statusTone: status.tone,
+        };
+      },
+    );
+
+    return (
+      <PaperQuestionOverviewTable
+        rows={rows}
+        showScore={contest.resultsPublished}
+        showFeedback={false}
+      />
+    );
+  };
+
+  return (
+    <main className={styles.root} aria-label="學生競賽首頁">
+      <div className={styles.dashboard}>
+        <section className={styles.summaryPanel} aria-label="競賽狀態">
+          <div className={styles.summaryMain}>
+            <div className={styles.titleRow}>
+              <h1 className={styles.title}>{contest.name}</h1>
+              <Tag type={getContestStateColor(contestState)}>
+                {getContestStateLabel(contestState)}
+              </Tag>
+              <Tag type={participant ? "green" : "gray"}>
+                {participant ? "已加入" : "未加入"}
+              </Tag>
+              {contest.cheatDetectionEnabled ? (
+                <Tag type="red">監控中</Tag>
+              ) : null}
+            </div>
+            <p className={styles.phaseTitle}>{phaseCopy.title}</p>
+            <p className={styles.phaseDescription}>{phaseCopy.description}</p>
+            {contest.description ? (
+              <div className={styles.markdown}>
+                <MarkdownRenderer>{contest.description}</MarkdownRenderer>
+              </div>
+            ) : null}
+          </div>
+          <aside className={styles.actionPanel} aria-label="主要操作">
+            <div>
+              <p className={styles.metricLabel}>{primaryStatus.label}</p>
+              <p className={styles.timerValue}>{primaryStatus.value}</p>
+            </div>
+            <div className={styles.actionStack}>
+              {renderPrimaryAction()}
+              {canSubmitExam ? (
+                <Button
+                  kind="danger--tertiary"
+                  renderIcon={Flag}
+                  onClick={() => setShowEndConfirm(true)}
+                >
+                  交卷
+                </Button>
+              ) : null}
+              {isAdmin && onOpenAdminPanel ? (
+                <Button kind="ghost" renderIcon={Launch} onClick={onOpenAdminPanel}>
+                  管理後台
+                </Button>
+              ) : null}
+            </div>
+          </aside>
+        </section>
+
+        <section className={styles.infoGrid} aria-label="考試資訊">
+          <div className={styles.infoCell}>
+            <p className={styles.metricLabel}>開始時間</p>
+            <p className={styles.metricValue}>
+              {formatDate(contest.startTime, { includeSeconds: false })}
+            </p>
+          </div>
+          <div className={styles.infoCell}>
+            <p className={styles.metricLabel}>結束時間</p>
+            <p className={styles.metricValue}>
+              {formatDate(contest.endTime, { includeSeconds: false })}
+            </p>
+          </div>
+          <div className={styles.infoCell}>
+            <p className={styles.metricLabel}>作答狀態</p>
+            <p className={styles.metricValue}>{getExamStatusLabel(contest)}</p>
+          </div>
+          <div className={styles.infoCell}>
+            <p className={styles.metricLabel}>題目數</p>
+            <p className={styles.metricValue}>
+              {contest.contestType === "paper_exam"
+                ? paperData.questions.length || contest.examQuestionsCount
+                : progressSummary.totalItems}
+            </p>
+          </div>
+        </section>
+
+        <section className={styles.progressGrid} aria-label="作答狀況">
+          <div className={styles.progressPanel}>
+            <div className={styles.sectionHeader}>
+              <div>
+                <h2 className={styles.sectionTitle}>
+                  作答狀況
+                </h2>
+                <p className={styles.sectionDescription}>
+                  {phase === "before"
+                    ? "開始後會在這裡顯示作答進度。"
+                    : contest.resultsPublished
+                      ? "依已發布成績與題目資料計算。"
+                      : "依自動儲存答案與題目資料計算。"}
+                </p>
+              </div>
+              <Tag type="cool-gray">{progressPercent}%</Tag>
+            </div>
+            <div className={styles.progressTrack} aria-hidden="true">
+              <div
+                className={styles.progressFill}
+                style={{ inlineSize: `${progressPercent}%` }}
+              />
+            </div>
+            <div className={styles.statGrid}>
+              <div>
+                <p className={styles.metricLabel}>已完成</p>
+                <p className={styles.metricValue}>
+                  {progressSummary.completedItems} / {progressSummary.totalItems}
+                </p>
+              </div>
+              <div>
+                <p className={styles.metricLabel}>已嘗試</p>
+                <p className={styles.metricValue}>
+                  {progressSummary.attemptedItems}
+                </p>
+              </div>
+              <div>
+                <p className={styles.metricLabel}>目前分數</p>
+                <p className={styles.metricValue}>
+                  {progressSummary.totalScore === null
+                    ? scoreDisplay
+                    : `${progressSummary.totalScore} / ${progressSummary.maxScore}`}
+                </p>
+              </div>
+            </div>
+            <div className={styles.inlineRecordsPanel} aria-label="作答紀錄">
+              <div className={styles.inlineRecordsHeader}>
+                <div>
+                  <h3 className={styles.inlineRecordsTitle}>
+                    {phase === "during"
+                      ? "目前作答狀況"
+                      : phase === "after" && contest.resultsPublished
+                        ? "作答紀錄與成績"
+                        : "作答紀錄"}
+                  </h3>
+                  <p className={styles.sectionDescription}>
+                    {contest.resultsPublished
+                      ? "成績已發布，以下顯示目前可見的分數資料。"
+                      : phase === "during"
+                        ? "依自動儲存答案顯示，尚未代表已交卷。"
+                        : "成績尚未發布時，只顯示目前可見的作答狀態。"}
+                  </p>
+                </div>
+                <Button
+                  kind="ghost"
+                  renderIcon={Renew}
+                  onClick={() => {
+                    setPaperReloadKey((value) => value + 1);
+                    void onRefreshContest?.();
+                  }}
+                >
+                  重新整理
+                </Button>
+              </div>
+              {contest.contestType === "paper_exam"
+                ? renderPaperRecords()
+                : renderCodingRecords()}
+            </div>
+          </div>
+          <div className={styles.rulesPanel}>
+            <div className={styles.sectionHeader}>
+              <div>
+                <h2 className={styles.sectionTitle}>規則與監控</h2>
+                <p className={styles.sectionDescription}>
+                  {requiresPassword ? "此競賽需要密碼。" : "此競賽不需要密碼。"}
+                </p>
+              </div>
+              {contest.cheatDetectionEnabled ? (
+                <WarningAlt size={20} className={styles.warningIcon} />
+              ) : (
+                <Checkmark size={20} className={styles.successIcon} />
+              )}
+            </div>
+            {contest.cheatDetectionEnabled ? (
+              <InlineNotification
+                kind="warning"
+                lowContrast
+                hideCloseButton
+                title="已啟用監控"
+                subtitle="進入作答後會啟用全螢幕、分頁切換與裝置監控。"
+              />
+            ) : null}
+            {contest.rules ? (
+              <div className={styles.rulesContent}>
+                <MarkdownRenderer>{contest.rules}</MarkdownRenderer>
+              </div>
+            ) : (
+              <p className={styles.emptyText}>沒有額外規則。</p>
+            )}
+          </div>
+        </section>
+      </div>
+
+      <ContestRegistrationModal
+        open={showRegisterModal}
+        contest={contest}
+        onClose={() => setShowRegisterModal(false)}
+        onSubmit={handleRegisterSubmit}
+      />
+
+      <Modal
+        open={showEndConfirm}
+        modalHeading="確認交卷"
+        primaryButtonText="確認交卷"
+        secondaryButtonText={tc("button.cancel")}
+        danger
+        onRequestSubmit={() => {
+          setShowEndConfirm(false);
+          onEndExam?.();
+        }}
+        onRequestClose={() => setShowEndConfirm(false)}
+      >
+        <p>交卷後將無法繼續修改答案。</p>
+      </Modal>
+
+      <Modal
+        open={showReportModal}
+        modalHeading="下載作答報告"
+        primaryButtonText={reportDownloading ? "準備中" : "下載"}
+        secondaryButtonText={tc("button.cancel")}
+        primaryButtonDisabled={reportDownloading}
+        onRequestSubmit={handleDownloadReport}
+        onRequestClose={() => {
+          if (!reportDownloading) setShowReportModal(false);
+        }}
+        size="xs"
+      >
+        <div className={styles.modalStack}>
+          <Select
+            id="student-contest-report-language"
+            labelText="報告語言"
+            value={reportLanguage}
+            onChange={(event) => setReportLanguage(event.target.value)}
+          >
+            <SelectItem value="zh-TW" text="繁體中文" />
+            <SelectItem value="en" text="English" />
+            <SelectItem value="ja" text="日本語" />
+            <SelectItem value="ko" text="한국어" />
+          </Select>
+          {reportError ? (
+            <InlineNotification
+              kind="error"
+              lowContrast
+              hideCloseButton
+              title="下載失敗"
+              subtitle={reportError}
+            />
+          ) : null}
+        </div>
+      </Modal>
+    </main>
+  );
+}
diff --git a/frontend/src/features/contest/components/studentDashboard/studentDashboardState.test.ts b/frontend/src/features/contest/components/studentDashboard/studentDashboardState.test.ts
new file mode 100644
index 00000000..72bed97c
--- /dev/null
+++ b/frontend/src/features/contest/components/studentDashboard/studentDashboardState.test.ts
@@ -0,0 +1,113 @@
+import { describe, expect, it } from "vitest";
+import type {
+  ContestDetail,
+  ScoreboardData,
+} from "@/core/entities/contest.entity";
+import {
+  findCurrentUserScoreboardRow,
+  resolveStudentContestPhase,
+} from "./studentDashboardState";
+
+const createContest = (
+  overrides: Partial<ContestDetail> = {},
+): ContestDetail =>
+  ({
+    id: "contest-1",
+    name: "Contest",
+    description: "",
+    startTime: "2026-05-05T10:00:00.000Z",
+    endTime: "2026-05-05T12:00:00.000Z",
+    status: "published",
+    visibility: "public",
+    hasJoined: true,
+    isRegistered: true,
+    contestType: "coding",
+    deliveryMode: "exam",
+    countsTowardGrade: true,
+    cheatDetectionEnabled: false,
+    scoreboardVisibleDuringContest: false,
+    allowMultipleJoins: false,
+    maxCheatWarnings: 3,
+    allowAutoUnlock: false,
+    autoUnlockMinutes: 0,
+    resultsPublished: false,
+    examQuestionsCount: 0,
+    isExamMonitored: false,
+    requiresFullscreen: false,
+    canSubmitExam: true,
+    examStatus: "not_started",
+    permissions: {
+      canSwitchView: true,
+      canEditContest: false,
+      canToggleStatus: false,
+      canDeleteContest: false,
+      canPublishProblems: false,
+      canViewAllSubmissions: false,
+      canViewFullScoreboard: false,
+      canManageClarifications: false,
+    },
+    problems: [],
+    ...overrides,
+  }) as ContestDetail;
+
+describe("studentDashboardState", () => {
+  it("resolves before, during, and after phases", () => {
+    expect(
+      resolveStudentContestPhase(
+        createContest(),
+        Date.parse("2026-05-05T09:00:00.000Z"),
+      ),
+    ).toBe("before");
+
+    expect(
+      resolveStudentContestPhase(
+        createContest({ examStatus: "in_progress" }),
+        Date.parse("2026-05-05T09:00:00.000Z"),
+      ),
+    ).toBe("during");
+
+    expect(
+      resolveStudentContestPhase(
+        createContest({ examStatus: "submitted" }),
+        Date.parse("2026-05-05T09:00:00.000Z"),
+      ),
+    ).toBe("after");
+  });
+
+  it("matches scoreboard rows by user id before display name fallback", () => {
+    const scoreboardData: ScoreboardData = {
+      contestId: "contest-1",
+      contestName: "Contest",
+      problems: [],
+      rows: [
+        {
+          userId: "2",
+          displayName: "same-name",
+          solvedCount: 0,
+          totalScore: 0,
+          penalty: 0,
+          rank: 2,
+          problems: {},
+        },
+        {
+          userId: "1",
+          displayName: "different-name",
+          solvedCount: 1,
+          totalScore: 100,
+          penalty: 0,
+          rank: 1,
+          problems: {},
+        },
+      ],
+    };
+
+    const row = findCurrentUserScoreboardRow(scoreboardData, {
+      id: 1,
+      username: "same-name",
+      role: "student",
+    });
+
+    expect(row?.userId).toBe("1");
+  });
+
+});
diff --git a/frontend/src/features/contest/components/studentDashboard/studentDashboardState.ts b/frontend/src/features/contest/components/studentDashboard/studentDashboardState.ts
new file mode 100644
index 00000000..88c7aae8
--- /dev/null
+++ b/frontend/src/features/contest/components/studentDashboard/studentDashboardState.ts
@@ -0,0 +1,110 @@
+import type {
+  ContestDetail,
+  ExamStatusType,
+  ScoreboardData,
+  ScoreboardRow,
+} from "@/core/entities/contest.entity";
+import type { User } from "@/core/entities/auth.entity";
+import { getContestState } from "@/core/entities/contest.entity";
+
+export type StudentContestPhase = "before" | "during" | "after";
+
+const ACTIVE_EXAM_STATUSES = new Set<ExamStatusType>([
+  "in_progress",
+  "paused",
+  "locked",
+]);
+
+export const resolveStudentContestPhase = (
+  contest: ContestDetail,
+  nowMs: number = Date.now(),
+): StudentContestPhase => {
+  if (contest.examStatus === "submitted") return "after";
+  if (ACTIVE_EXAM_STATUSES.has(contest.examStatus ?? "not_started")) {
+    return "during";
+  }
+
+  const contestState = getContestState({
+    status: contest.status,
+    startTime: contest.startTime,
+    endTime: contest.endTime,
+  });
+  if (contestState === "ended") return "after";
+  if (contestState === "running") return "during";
+
+  const startMs = Date.parse(contest.startTime);
+  if (Number.isFinite(startMs) && nowMs >= startMs) return "during";
+  return "before";
+};
+
+export const findCurrentUserScoreboardRow = (
+  scoreboardData: ScoreboardData | null | undefined,
+  currentUser: User | null | undefined,
+): ScoreboardRow | null => {
+  if (!scoreboardData?.rows?.length || !currentUser) return null;
+
+  const userId = String(currentUser.id);
+  const directMatch = scoreboardData.rows.find(
+    (row) => String(row.userId) === userId,
+  );
+  if (directMatch) return directMatch;
+
+  const nameCandidates = new Set(
+    [
+      currentUser.username,
+      currentUser.profile?.display_name,
+      currentUser.email,
+    ]
+      .filter(Boolean)
+      .map((value) => String(value)),
+  );
+  return (
+    scoreboardData.rows.find((row) => nameCandidates.has(row.displayName)) ??
+    null
+  );
+};
+
+export interface StudentProgressSummary {
+  totalItems: number;
+  completedItems: number;
+  attemptedItems: number;
+  totalScore: number | null;
+  maxScore: number;
+}
+
+export const buildCodingProgressSummary = (
+  contest: ContestDetail,
+): StudentProgressSummary => {
+  const totalItems = contest.problems?.length || 0;
+  const maxScore =
+    contest.problems?.reduce(
+      (sum, problem) => sum + (problem.maxScore ?? problem.score ?? 0),
+      0,
+    ) ||
+    0;
+  const completedItems = contest.problems.filter(
+    (problem) => problem.userStatus === "AC",
+  ).length;
+  const attemptedItems = contest.problems.filter(
+    (problem) => !!problem.userStatus,
+  ).length;
+  return {
+    totalItems,
+    completedItems,
+    attemptedItems,
+    totalScore: null,
+    maxScore,
+  };
+};
+
+export const formatCompactDuration = (milliseconds: number): string => {
+  const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor((totalSeconds % 86400) / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (days > 0) return `${days}d ${hours}h ${minutes}m`;
+  if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;
+  return `${minutes}m ${seconds}s`;
+};
diff --git a/frontend/src/features/contest/domain/contestRuntimePolicy.test.ts b/frontend/src/features/contest/domain/contestRuntimePolicy.test.ts
index 33a9fec8..ce62a295 100644
--- a/frontend/src/features/contest/domain/contestRuntimePolicy.test.ts
+++ b/frontend/src/features/contest/domain/contestRuntimePolicy.test.ts
@@ -85,6 +85,7 @@ describe("contestRuntimePolicy", () => {
   it("recognizes contest participation", () => {
     expect(isContestParticipant(createContest({ hasJoined: false, isRegistered: false }))).toBe(false);
     expect(isContestParticipant(createContest({ hasJoined: true, isRegistered: false }))).toBe(true);
+    expect(isContestParticipant(createContest({ hasJoined: false, isRegistered: true }))).toBe(false);
   });
 
   it("treats submitted/locked/paused/in_progress as started exam", () => {
diff --git a/frontend/src/features/contest/domain/contestRuntimePolicy.ts b/frontend/src/features/contest/domain/contestRuntimePolicy.ts
index 6bb13780..737dc270 100644
--- a/frontend/src/features/contest/domain/contestRuntimePolicy.ts
+++ b/frontend/src/features/contest/domain/contestRuntimePolicy.ts
@@ -1,14 +1,13 @@
 import type { ContestDetail, ContestStatus, ContestType, ExamStatusType } from "@/core/entities/contest.entity";
 
 type ContestTypeTarget = Pick<ContestDetail, "contestType"> | null | undefined;
-type ParticipantTarget = Pick<ContestDetail, "hasJoined" | "isRegistered"> | null | undefined;
+type ParticipantTarget = Pick<ContestDetail, "hasJoined"> | null | undefined;
 type ExamStatusTarget = Pick<ContestDetail, "examStatus"> | null | undefined;
 type TabTarget =
   | Pick<
       ContestDetail,
       | "contestType"
       | "hasJoined"
-      | "isRegistered"
       | "examStatus"
       | "endTime"
       | "cheatDetectionEnabled"
@@ -54,7 +53,7 @@ const isExamStatusIn = (
 ): boolean => (status ? allowed.has(status) : false);
 
 export const isContestParticipant = (contest: ParticipantTarget): boolean =>
-  !!(contest?.hasJoined || contest?.isRegistered);
+  !!contest?.hasJoined;
 
 export const hasStartedExam = (contest: ExamStatusTarget): boolean =>
   !!contest && isExamStatusIn(contest.examStatus, EXAM_STARTED_STATUSES);
diff --git a/frontend/src/features/contest/hooks/useContestExamActions.ts b/frontend/src/features/contest/hooks/useContestExamActions.ts
index 20b837db..739cefb8 100644
--- a/frontend/src/features/contest/hooks/useContestExamActions.ts
+++ b/frontend/src/features/contest/hooks/useContestExamActions.ts
@@ -99,13 +99,12 @@ export const useContestExamActions = ({
   }, []);
 
   const handleJoin = useCallback(
-    async (data?: { nickname?: string; password?: string }) => {
+    async (data?: { password?: string }) => {
       if (!contest) return;
 
       const result = await joinContestUseCase({
         contestId: contest.id,
         password: data?.password,
-        nickname: data?.nickname,
       });
 
       if (result.success) {
diff --git a/frontend/src/features/contest/screens/ContestDashboardScreen.tsx b/frontend/src/features/contest/screens/ContestDashboardScreen.tsx
index 8e5e4ddc..5bc8b47c 100644
--- a/frontend/src/features/contest/screens/ContestDashboardScreen.tsx
+++ b/frontend/src/features/contest/screens/ContestDashboardScreen.tsx
@@ -1,46 +1,28 @@
-import { useState, useEffect, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { useSearchParams } from "react-router-dom";
-import { Modal, SkeletonText, Grid, Column, Tile } from "@carbon/react";
+import { useEffect } from "react";
+import { useSearchParams, useOutletContext } from "react-router-dom";
+import { SkeletonText, Grid, Column, Tile } from "@carbon/react";
 
-import type { ScoreboardRow } from "@/core/entities/contest.entity";
-import { useAuth } from "@/features/auth/contexts/AuthContext";
 import { SubmissionDetailModal } from "@/features/submissions/components";
 import { useContest } from "@/features/contest/contexts/ContestContext";
 
-import {
-  type ContestTabKey,
-} from "@/features/contest/tabConfig";
-import { getContestTypeModule } from "@/features/contest/modules/registry";
-import { resolveStudentTabRenderer } from "@/features/contest/modules/StudentTabRendererRegistry";
+import StudentContestDashboard from "@/features/contest/components/studentDashboard/StudentContestDashboardView";
+
+interface ContestDashboardOutletContext {
+  refreshContest?: () => Promise<void>;
+  onJoin?: (data?: { password?: string }) => void;
+  onStartExam?: () => void;
+  onEndExam?: () => void;
+  onGoToAnswering?: () => void;
+  onOpenAdminPanel?: () => void;
+  isAdmin?: boolean;
+}
 
 const ContestDashboard = () => {
-  const { t } = useTranslation('contest');
-  const { t: tc } = useTranslation('common');
   const [searchParams, setSearchParams] = useSearchParams();
+  const outletContext = useOutletContext<ContestDashboardOutletContext | null>();
 
-  // Use contest and standings from context
-  const { contest, loading, scoreboardData } = useContest();
-  const { user: currentUser } = useAuth();
-
-  // Personal stats state
-  const [myRank, setMyRank] = useState<ScoreboardRow | null>(null);
-  const [lockModalOpen, setLockModalOpen] = useState(false);
-
-  // Find my rank from context standings
-  useEffect(() => {
-    const timerId = setTimeout(() => {
-      if (!currentUser) {
-        setMyRank(null);
-        return;
-      }
-      const myEntry = scoreboardData?.rows?.find(
-        (s) => s.displayName === currentUser.username
-      );
-      setMyRank(myEntry || null);
-    }, 0);
-    return () => clearTimeout(timerId);
-  }, [currentUser, scoreboardData]);
+  // Use contest from context; student dashboard intentionally avoids standings.
+  const { contest, loading } = useContest();
 
   const handleSubmissionClose = () => {
     setSearchParams((prev) => {
@@ -50,36 +32,17 @@ const ContestDashboard = () => {
     });
   };
 
-  const selectedTabParam = searchParams.get("tab") || "overview";
   const selectedSubmissionId = searchParams.get("submissionId");
-  const contestModule = useMemo(
-    () => getContestTypeModule(contest?.contestType),
-    [contest?.contestType],
-  );
-  const availableTabs = useMemo(
-    () => contestModule.student.getTabs(contest),
-    [contest, contestModule],
-  );
-
-  const availableTabKeys = useMemo(
-    () => availableTabs.map((tab) => tab.key),
-    [availableTabs]
-  );
-
-  const selectedTabKey = availableTabKeys.includes(selectedTabParam as ContestTabKey)
-    ? selectedTabParam
-    : availableTabKeys[0];
-  const selectedTab = availableTabs.find((tab) => tab.key === selectedTabKey) ?? availableTabs[0];
 
   useEffect(() => {
     if (!contest) return;
-    if (selectedTabParam === selectedTabKey) return;
+    if (!searchParams.has("tab")) return;
     setSearchParams((prev) => {
       const next = new URLSearchParams(prev);
-      next.set("tab", selectedTabKey);
+      next.delete("tab");
       return next;
     });
-  }, [contest, selectedTabKey, selectedTabParam, setSearchParams]);
+  }, [contest, searchParams, setSearchParams]);
 
   // Skeleton loading component
   const renderSkeleton = () => (
@@ -118,23 +81,19 @@ const ContestDashboard = () => {
 
   // Guard against null contest
   if (!contest) return renderSkeleton();
-  if (!selectedTab) return null;
-
-  const renderTabContent = () => {
-    const render = resolveStudentTabRenderer(
-      contestModule,
-      selectedTab.contentKind,
-    );
-    return render({
-      contest,
-      myRank,
-      maxWidth: "1056px",
-    });
-  };
 
   return (
     <>
-      {renderTabContent()}
+      <StudentContestDashboard
+        contest={contest}
+        onJoin={outletContext?.onJoin}
+        onStartExam={outletContext?.onStartExam}
+        onEndExam={outletContext?.onEndExam}
+        onGoToAnswering={outletContext?.onGoToAnswering}
+        onOpenAdminPanel={outletContext?.onOpenAdminPanel}
+        onRefreshContest={outletContext?.refreshContest}
+        isAdmin={outletContext?.isAdmin}
+      />
 
       {/* Submission Detail Modal */}
       {selectedSubmissionId && (
@@ -144,18 +103,6 @@ const ContestDashboard = () => {
           onClose={handleSubmissionClose}
         />
       )}
-
-      {/* Lock Modal */}
-      <Modal
-        open={lockModalOpen}
-        modalHeading={t('exam.answerLocked')}
-        primaryButtonText={tc('button.confirm')}
-        onRequestClose={() => setLockModalOpen(false)}
-        onRequestSubmit={() => setLockModalOpen(false)}
-        size="sm"
-      >
-        <p>{t('exam.contactProctorToUnlock')}</p>
-      </Modal>
     </>
   );
 };
diff --git a/frontend/src/features/contest/screens/ContestPreRegistrationScreen.tsx b/frontend/src/features/contest/screens/ContestPreRegistrationScreen.tsx
index 5375de2f..71c35846 100644
--- a/frontend/src/features/contest/screens/ContestPreRegistrationScreen.tsx
+++ b/frontend/src/features/contest/screens/ContestPreRegistrationScreen.tsx
@@ -20,7 +20,7 @@ import styles from "./ContestPreRegistrationScreen.module.scss";
 interface ContestPreRegistrationScreenProps {
   contest: ContestDetail;
   loading?: boolean;
-  onJoin?: (data?: { nickname?: string; password?: string }) => void;
+  onJoin?: (data?: { password?: string }) => void;
   isAdmin?: boolean;
   onOpenAdminPanel?: () => void;
 }
@@ -136,7 +136,7 @@ const ContestPreRegistrationScreen: React.FC<ContestPreRegistrationScreenProps>
     setShowRegisterModal(true);
   };
 
-  const handleRegisterSubmit = (data: { nickname?: string; password?: string }) => {
+  const handleRegisterSubmit = (data: { password?: string }) => {
     setShowRegisterModal(false);
     onJoin?.(data);
   };
@@ -228,18 +228,6 @@ const ContestPreRegistrationScreen: React.FC<ContestPreRegistrationScreenProps>
             />
           )}
 
-          {contest.anonymousModeEnabled && (
-            <InlineNotification
-              kind="info"
-              title={t("preRegistration.anonymousTitle", "匿名模式")}
-              subtitle={t(
-                "hero.anonymousModeHint",
-                "本競賽已啟用匿名模式，您可以設定一個暱稱。排行榜和提交列表將顯示您的暱稱而非真實帳號。"
-              )}
-              lowContrast
-              hideCloseButton
-            />
-          )}
         </div>
 
         {contest.rules && (
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminContestSettingsScreen.tsx b/frontend/src/features/contest/screens/admin/panels/AdminContestSettingsScreen.tsx
index 4e4025d9..ce4fcb4a 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminContestSettingsScreen.tsx
+++ b/frontend/src/features/contest/screens/admin/panels/AdminContestSettingsScreen.tsx
@@ -249,7 +249,6 @@ const ContestSettingsOverlay = ({ open, onClose }: ContestSettingsOverlayProps)
       warningTimeoutSeconds: contest.warningTimeoutSeconds ?? 20,
       screenShareRecoveryGraceMs: contest.screenShareRecoveryGraceMs ?? 30_000,
       scoreboardVisibleDuringContest: contest.scoreboardVisibleDuringContest ?? false,
-      anonymousModeEnabled: contest.anonymousModeEnabled ?? false,
       allowMultipleJoins: contest.allowMultipleJoins ?? false,
       maxCheatWarnings: contest.maxCheatWarnings ?? 0,
       allowAutoUnlock: contest.allowAutoUnlock ?? false,
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
index 2e0866c2..796c8a8d 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
+++ b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
@@ -25,7 +25,7 @@ import type {
   AdminPanelProps,
 } from "@/features/contest/modules/types";
 import { useGradingData } from "@/features/contest/screens/settings/grading";
-import { addContestParticipant } from "@/infrastructure/api/repositories";
+import { addContestParticipant, updateContest } from "@/infrastructure/api/repositories";
 import { exportContestResults } from "@/infrastructure/api/repositories/contestExports.repository";
 import { useToast } from "@/shared/contexts/ToastContext";
 import { buildAdminOverviewDashboard } from "./adminOverviewDashboard.model";
@@ -82,6 +82,7 @@ export default function AdminOverviewScreen({
   const [, setSearchParams] = useSearchParams();
   const [refreshing, setRefreshing] = useState(false);
   const [exporting, setExporting] = useState(false);
+  const [publishingResults, setPublishingResults] = useState(false);
   const [resultRefreshKey, setResultRefreshKey] = useState(0);
   const [addParticipantOpen, setAddParticipantOpen] = useState(false);
   const classroomBound = Boolean(contest?.isClassroomBound);
@@ -197,6 +198,46 @@ export default function AdminOverviewScreen({
     }
   }, [contest?.id, exporting, showToast, t]);
 
+  const handleToggleResultsPublished = useCallback(async () => {
+    if (!contest?.id || publishingResults) return;
+    const nextPublished = !contest.resultsPublished;
+    setPublishingResults(true);
+    try {
+      await updateContest(contest.id, { resultsPublished: nextPublished });
+      await Promise.all([refreshContest(), refreshAllAdminData()]);
+      setResultRefreshKey((current) => current + 1);
+      showToast({
+        kind: "success",
+        title: t("common.success", "成功"),
+        subtitle: nextPublished
+          ? t("adminOverview.actions.publishResultsSuccess", "成績已發布")
+          : t("adminOverview.actions.revokeResultsSuccess", "已撤回成績發布"),
+      });
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : nextPublished
+            ? t("adminOverview.actions.publishResultsFailed", "發布失敗")
+            : t("adminOverview.actions.revokeResultsFailed", "撤回失敗");
+      showToast({
+        kind: "error",
+        title: t("common.error", "錯誤"),
+        subtitle: message,
+      });
+    } finally {
+      setPublishingResults(false);
+    }
+  }, [
+    contest?.id,
+    contest?.resultsPublished,
+    publishingResults,
+    refreshAllAdminData,
+    refreshContest,
+    showToast,
+    t,
+  ]);
+
   useEffect(() => {
     return registerPanelRefresh("overview", handleRefresh);
   }, [handleRefresh, registerPanelRefresh]);
@@ -311,6 +352,16 @@ export default function AdminOverviewScreen({
             onOpenPanel={openPanel}
             participants={participants}
             primary={null}
+            gradingAction={{
+              label: contest.resultsPublished
+                ? t("adminOverview.actions.revokeResults", "撤回發布")
+                : t("adminOverview.actions.publishResults", "發布成績"),
+              loadingLabel: t("action.processing", "處理中..."),
+              onClick: () => void handleToggleResultsPublished(),
+              disabled: !contest.id,
+              loading: publishingResults,
+              kind: contest.resultsPublished ? "danger--tertiary" : "primary",
+            }}
             resultOverview={
               <AdminExamResultOverview
                 contest={contest}
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.tsx b/frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.tsx
index 629f15ae..ae2f2d7e 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.tsx
+++ b/frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.tsx
@@ -80,9 +80,7 @@ const inferSourceModule = (publisher: RealtimeSfuPublisherDto): LiveSource => {
 };
 
 const getParticipantDisplayName = (participant: ContestParticipant) =>
-  participant.userDisplayName ||
   participant.displayName ||
-  participant.nickname ||
   participant.username;
 
 const isParticipantLive = (participant: ContestParticipant) =>
@@ -123,9 +121,7 @@ const isContestInExamWindow = (contest: ContestDetail | null | undefined, now: n
 const getParticipantSearchText = (participant: ContestParticipant) =>
   [
     participant.username,
-    participant.userDisplayName,
     participant.displayName,
-    participant.nickname,
     participant.email,
     participant.examStatus,
   ]
diff --git a/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.test.ts b/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.test.ts
index f53794cd..737d907f 100644
--- a/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.test.ts
+++ b/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.test.ts
@@ -63,7 +63,7 @@ const participant = (
   ({
     userId,
     username: `student-${userId}`,
-    userDisplayName: `學生 ${userId}`,
+    displayName: `學生 ${userId}`,
     accountRole: "student",
     connectionStatus: "online",
     score: 0,
diff --git a/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.ts b/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.ts
index dbe8b090..35311cab 100644
--- a/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.ts
+++ b/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.ts
@@ -180,9 +180,8 @@ const studentParticipants = (participants: ContestParticipant[]) =>
       !participant.accountRole || participant.accountRole === "student",
   );
 
-const displayName = (participant: ContestParticipant) =>
+const getProfileDisplayName = (participant: ContestParticipant) =>
   participant.displayName ||
-  participant.userDisplayName ||
   participant.username ||
   participant.userId;
 
@@ -381,7 +380,7 @@ export const getTeacherAttentionRows = ({
     const common = {
       id: participant.userId,
       userId: participant.userId,
-      studentName: displayName(participant),
+      studentName: getProfileDisplayName(participant),
       timeLabel: formatTime(
         latestEvent?.timestamp ||
           participantTimestamps.lockedAt ||
diff --git a/frontend/src/features/contest/screens/paperExam/usePaperExamFlow.ts b/frontend/src/features/contest/screens/paperExam/usePaperExamFlow.ts
index 9e25ef04..50d1a4f5 100644
--- a/frontend/src/features/contest/screens/paperExam/usePaperExamFlow.ts
+++ b/frontend/src/features/contest/screens/paperExam/usePaperExamFlow.ts
@@ -45,7 +45,7 @@ export const usePaperExamFlow = () => {
 
   const clearError = () => setError(null);
 
-  const register = async (data?: { nickname?: string; password?: string }) => {
+  const register = async (data?: { password?: string }) => {
     const id = guardContestId();
     setLoading(true);
     setError(null);
diff --git a/frontend/src/features/contest/screens/settings/ContestExamGradingScreen.tsx b/frontend/src/features/contest/screens/settings/ContestExamGradingScreen.tsx
index 270187f3..c940fd10 100644
--- a/frontend/src/features/contest/screens/settings/ContestExamGradingScreen.tsx
+++ b/frontend/src/features/contest/screens/settings/ContestExamGradingScreen.tsx
@@ -433,7 +433,6 @@ const ContestExamGradingScreen: React.FC = () => {
                       username: row.displayName,
                     },
                     displayName: row.displayName,
-                    nickname: row.nickname,
                     solved: row.solvedCount,
                     total_score: row.totalScore,
                     time: row.penalty,
diff --git a/frontend/src/features/contest/screens/settings/grading/GradingByQuestionTabScreen.tsx b/frontend/src/features/contest/screens/settings/grading/GradingByQuestionTabScreen.tsx
index 5e2ce3f0..0e758ca9 100644
--- a/frontend/src/features/contest/screens/settings/grading/GradingByQuestionTabScreen.tsx
+++ b/frontend/src/features/contest/screens/settings/grading/GradingByQuestionTabScreen.tsx
@@ -36,7 +36,6 @@ interface GradingByQuestionTabScreenProps {
   students: {
     studentId: string;
     username: string;
-    nickname: string;
     displayName?: string;
   }[];
   onGrade: (answerId: string, score: number, feedback: string) => void;
@@ -124,7 +123,7 @@ export default function GradingByQuestionTabScreen({
         id: `absent-${s.studentId}-${activeQuestionId}`,
         studentId: s.studentId,
         studentUsername: s.username,
-        studentNickname: s.displayName || s.nickname || s.username,
+        studentDisplayName: s.displayName || s.username,
         questionId: activeQuestionId,
         questionIndex: qInfo?.questionIndex ?? 0,
         questionPrompt: qInfo?.prompt ?? "",
@@ -151,7 +150,7 @@ export default function GradingByQuestionTabScreen({
       rows = rows.filter(
         (r) =>
           r.studentUsername.toLowerCase().includes(q) ||
-          r.studentNickname.toLowerCase().includes(q)
+          r.studentDisplayName.toLowerCase().includes(q)
       );
     }
 
@@ -315,7 +314,7 @@ export default function GradingByQuestionTabScreen({
                 className={isAbsent ? styles.absentItem : undefined}
               >
                 <ListItemContent>
-                  <ListItemTitle>{a.studentNickname}</ListItemTitle>
+                  <ListItemTitle>{a.studentDisplayName}</ListItemTitle>
                   <ListItemMeta>{a.studentUsername}</ListItemMeta>
                 </ListItemContent>
                 <ListItemTrailing>
@@ -383,7 +382,7 @@ export default function GradingByQuestionTabScreen({
           selectedQuestion ? `Q${selectedQuestion.questionIndex}` : "—"
         }
         studentLabel={
-          selectedAnswer?.studentNickname ?? t("grading.noSelection", "未選擇")
+          selectedAnswer?.studentDisplayName ?? t("grading.noSelection", "未選擇")
         }
         questionContent={sidebarContent}
         studentContent={middlePaneContent}
@@ -405,7 +404,7 @@ export default function GradingByQuestionTabScreen({
             ? `Q${selectedQuestion.questionIndex}`
             : t("grading.question", "題目"),
           secondary: selectedAnswer
-            ? `${selectedAnswer.studentNickname} (${selectedAnswer.studentUsername})`
+            ? `${selectedAnswer.studentDisplayName} (${selectedAnswer.studentUsername})`
             : undefined,
         }}
       />
diff --git a/frontend/src/features/contest/screens/settings/grading/GradingByStudentTabScreen.tsx b/frontend/src/features/contest/screens/settings/grading/GradingByStudentTabScreen.tsx
index 1533867d..ea04c519 100644
--- a/frontend/src/features/contest/screens/settings/grading/GradingByStudentTabScreen.tsx
+++ b/frontend/src/features/contest/screens/settings/grading/GradingByStudentTabScreen.tsx
@@ -35,7 +35,7 @@ import mini from "./GradingMini.module.scss";
 interface StudentSummary {
   studentId: string;
   username: string;
-  nickname: string;
+  displayName: string;
   totalScore: number;
   maxPossible: number;
   gradedCount: number;
@@ -48,7 +48,6 @@ interface GradingByStudentTabScreenProps {
   students: {
     studentId: string;
     username: string;
-    nickname: string;
     displayName?: string;
   }[];
   onGrade: (answerId: string, score: number, feedback: string) => void;
@@ -91,7 +90,7 @@ export default function GradingByStudentTabScreen({
       return {
         studentId: s.studentId,
         username: s.username,
-        nickname: s.nickname,
+        displayName: s.displayName || s.username,
         totalScore,
         maxPossible,
         gradedCount,
@@ -106,7 +105,7 @@ export default function GradingByStudentTabScreen({
     return studentSummaries.filter(
       (s) =>
         s.username.toLowerCase().includes(q) ||
-        s.nickname.toLowerCase().includes(q)
+        s.displayName.toLowerCase().includes(q)
     );
   }, [studentSummaries, searchQuery]);
   const activeSelectedStudentId = useMemo(() => {
@@ -141,7 +140,7 @@ export default function GradingByStudentTabScreen({
           id: `absent-${activeSelectedStudentId}-${question.questionId}`,
           studentId: activeSelectedStudentId,
           studentUsername: activeStudent?.username ?? "",
-          studentNickname: activeStudent?.nickname ?? "",
+          studentDisplayName: activeStudent?.displayName ?? "",
           questionId: question.questionId,
           questionIndex: question.questionIndex,
           questionPrompt: question.prompt,
@@ -265,8 +264,8 @@ export default function GradingByStudentTabScreen({
             onClick={() => handleStudentSelect(s.studentId)}
           >
             <ListItemContent>
-              <ListItemTitle>{s.nickname || s.username}</ListItemTitle>
-              {s.nickname && s.nickname !== s.username && (
+              <ListItemTitle>{s.displayName || s.username}</ListItemTitle>
+              {s.displayName && s.displayName !== s.username && (
                 <ListItemMeta>{s.username}</ListItemMeta>
               )}
             </ListItemContent>
@@ -448,7 +447,7 @@ export default function GradingByStudentTabScreen({
             hasNextStudent={hasNextStudent}
             contextPath={{
               primary: selectedStudentSummary
-                ? `${selectedStudentSummary.nickname} (${selectedStudentSummary.username})`
+                ? `${selectedStudentSummary.displayName} (${selectedStudentSummary.username})`
                 : t("grading.student", "學生"),
               secondary: currentAnswer
                 ? `Q${currentAnswer.questionIndex}`
diff --git a/frontend/src/features/contest/screens/settings/grading/GradingCardViewOnly.tsx b/frontend/src/features/contest/screens/settings/grading/GradingCardViewOnly.tsx
index 2af10ebf..ab885d77 100644
--- a/frontend/src/features/contest/screens/settings/grading/GradingCardViewOnly.tsx
+++ b/frontend/src/features/contest/screens/settings/grading/GradingCardViewOnly.tsx
@@ -50,10 +50,10 @@ const GradingCardViewOnly: React.FC<GradingCardViewOnlyProps> = ({
 
   const user = useMemo(
     () =>
-      row.studentNickname === row.studentUsername
-        ? row.studentNickname
-        : `${row.studentNickname} (${row.studentUsername})`,
-    [row.studentNickname, row.studentUsername],
+      row.studentDisplayName === row.studentUsername
+        ? row.studentDisplayName
+        : `${row.studentDisplayName} (${row.studentUsername})`,
+    [row.studentDisplayName, row.studentUsername],
   );
 
   const answerText = useMemo(() => stringifyAnswer(row.answerContent), [row.answerContent]);
diff --git a/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.test.tsx b/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.test.tsx
index b20bd213..0f4d4984 100644
--- a/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.test.tsx
+++ b/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.test.tsx
@@ -50,8 +50,8 @@ const questionProgress: QuestionProgress[] = [
 ];
 
 const students = [
-  { studentId: "s-1", username: "u1", nickname: "Student A" },
-  { studentId: "s-2", username: "u2", nickname: "Student B" },
+  { studentId: "s-1", username: "u1", displayName: "Student A" },
+  { studentId: "s-2", username: "u2", displayName: "Student B" },
 ];
 
 const answersByQuestion = new Map<string, GradingAnswerRow[]>([
@@ -62,7 +62,7 @@ const answersByQuestion = new Map<string, GradingAnswerRow[]>([
         id: "a-1",
         studentId: "s-1",
         studentUsername: "u1",
-        studentNickname: "Student A",
+        studentDisplayName: "Student A",
         questionId: "q-1",
         questionIndex: 1,
         questionPrompt: "Question 1",
@@ -81,7 +81,7 @@ const answersByQuestion = new Map<string, GradingAnswerRow[]>([
         id: "a-2",
         studentId: "s-2",
         studentUsername: "u2",
-        studentNickname: "Student B",
+        studentDisplayName: "Student B",
         questionId: "q-1",
         questionIndex: 1,
         questionPrompt: "Question 1",
diff --git a/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.tsx b/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.tsx
index 0cf7e90b..78027e47 100644
--- a/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.tsx
+++ b/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.tsx
@@ -8,7 +8,6 @@ interface GradingMatrixViewScreenProps {
   students: {
     studentId: string;
     username: string;
-    nickname: string;
     displayName?: string;
   }[];
   answersByQuestion: Map<string, GradingAnswerRow[]>;
@@ -221,7 +220,6 @@ export default function GradingMatrixViewScreen({
             const username = (student.username && student.username.trim()) || student.studentId;
             const displayNameCandidate =
               (student.displayName && student.displayName.trim()) ||
-              (student.nickname && student.nickname.trim()) ||
               "";
             const displayName =
               displayNameCandidate && displayNameCandidate !== username
diff --git a/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.test.tsx b/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.test.tsx
index f1f3aa40..92b3b351 100644
--- a/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.test.tsx
+++ b/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.test.tsx
@@ -39,7 +39,7 @@ const answer: GradingAnswerRow = {
   id: "a-1",
   studentId: "s-1",
   studentUsername: "student1",
-  studentNickname: "Student One",
+  studentDisplayName: "Student One",
   questionId: "q-1",
   questionIndex: 1,
   questionPrompt: "Question prompt",
diff --git a/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.tsx b/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.tsx
index 23241b87..fa75bc16 100644
--- a/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.tsx
+++ b/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.tsx
@@ -355,9 +355,9 @@ export default function GradingSplitPanelScreen({
           transition={{ layout: { duration: 0.18, ease: "easeOut" } }}
         >
           <span className={styles.studentLine}>
-            {answer.studentNickname === answer.studentUsername
-              ? answer.studentNickname
-              : `${answer.studentNickname} (${answer.studentUsername})`}
+            {answer.studentDisplayName === answer.studentUsername
+              ? answer.studentDisplayName
+              : `${answer.studentDisplayName} (${answer.studentUsername})`}
           </span>
 
           <div className={styles.questionPrompt}>
diff --git a/frontend/src/features/contest/screens/settings/grading/buildGradingRows.ts b/frontend/src/features/contest/screens/settings/grading/buildGradingRows.ts
index 6c5ec27e..5fa8705f 100644
--- a/frontend/src/features/contest/screens/settings/grading/buildGradingRows.ts
+++ b/frontend/src/features/contest/screens/settings/grading/buildGradingRows.ts
@@ -13,7 +13,7 @@ import type { GradingAnswerRow, QuestionType } from "./gradingTypes";
 export function buildGradingRows(
   allAnswers: ExamAnswerGrading[],
   questions: ExamQuestion[],
-  participantMap?: Map<string, { username: string; nickname: string }>,
+  participantMap?: Map<string, { username: string; displayName: string }>,
 ): GradingAnswerRow[] {
   const questionsMap = new Map<string, ExamQuestion>();
   questions.forEach((q, i) =>
@@ -32,13 +32,13 @@ export function buildGradingRows(
     const studentId = a.participantUserId;
     const student = participantMap?.get(studentId);
     const studentUsername = student?.username ?? "unknown";
-    const studentNickname = student?.nickname ?? studentUsername;
+    const studentDisplayName = student?.displayName ?? studentUsername;
 
     return {
       id: a.id,
       studentId,
       studentUsername,
-      studentNickname,
+      studentDisplayName,
       questionId: a.questionId,
       questionIndex: qIdx + 1,
       questionPrompt: q?.prompt ?? "",
diff --git a/frontend/src/features/contest/screens/settings/grading/gradingTypes.ts b/frontend/src/features/contest/screens/settings/grading/gradingTypes.ts
index b4b6a30c..e1e65157 100644
--- a/frontend/src/features/contest/screens/settings/grading/gradingTypes.ts
+++ b/frontend/src/features/contest/screens/settings/grading/gradingTypes.ts
@@ -23,7 +23,7 @@ export interface GradingAnswerRow {
   id: string;
   studentId: string;
   studentUsername: string;
-  studentNickname: string;
+  studentDisplayName: string;
   questionId: string;
   questionIndex: number; // 1-based
   questionPrompt: string;
diff --git a/frontend/src/features/contest/screens/settings/grading/objectiveRegrade.test.ts b/frontend/src/features/contest/screens/settings/grading/objectiveRegrade.test.ts
index 0b32136d..e337c023 100644
--- a/frontend/src/features/contest/screens/settings/grading/objectiveRegrade.test.ts
+++ b/frontend/src/features/contest/screens/settings/grading/objectiveRegrade.test.ts
@@ -6,7 +6,7 @@ const buildRow = (partial: Partial<GradingAnswerRow>): GradingAnswerRow => ({
   id: partial.id ?? "a1",
   studentId: partial.studentId ?? "u1",
   studentUsername: partial.studentUsername ?? "student",
-  studentNickname: partial.studentNickname ?? "student",
+  studentDisplayName: partial.studentDisplayName ?? "student",
   questionId: partial.questionId ?? "q1",
   questionIndex: partial.questionIndex ?? 1,
   questionPrompt: partial.questionPrompt ?? "prompt",
diff --git a/frontend/src/features/contest/screens/settings/grading/useAiGradingScreenData.ts b/frontend/src/features/contest/screens/settings/grading/useAiGradingScreenData.ts
index f5320c80..e7c0c30b 100644
--- a/frontend/src/features/contest/screens/settings/grading/useAiGradingScreenData.ts
+++ b/frontend/src/features/contest/screens/settings/grading/useAiGradingScreenData.ts
@@ -52,11 +52,11 @@ export function useAiGradingScreenData(
   const contestAdminContext = useContext(ContestAdminContext);
 
   const participantMap = useMemo(() => {
-    const map = new Map<string, { username: string; nickname: string }>();
+    const map = new Map<string, { username: string; displayName: string }>();
     for (const p of contestAdminContext?.participants ?? []) {
       map.set(String(p.userId), {
         username: p.username,
-        nickname: p.nickname ?? p.displayName ?? p.username,
+        displayName: p.displayName ?? p.username,
       });
     }
     return map;
diff --git a/frontend/src/features/contest/screens/settings/grading/useGradingData.ts b/frontend/src/features/contest/screens/settings/grading/useGradingData.ts
index b26bd900..dc90b4ec 100644
--- a/frontend/src/features/contest/screens/settings/grading/useGradingData.ts
+++ b/frontend/src/features/contest/screens/settings/grading/useGradingData.ts
@@ -154,11 +154,11 @@ export function useGradingData(options: UseGradingDataOptions = {}) {
 
   // Build participant map
   const participantMap = useMemo(() => {
-    const map = new Map<string, { username: string; nickname: string }>();
+    const map = new Map<string, { username: string; displayName: string }>();
     for (const p of participants) {
       map.set(String(p.userId), {
         username: p.username,
-        nickname: p.nickname ?? p.displayName ?? p.username,
+        displayName: p.displayName ?? p.username,
       });
     }
     return map;
@@ -222,8 +222,8 @@ export function useGradingData(options: UseGradingDataOptions = {}) {
             id: `coding-${submission.id}`,
             studentId: submission.userId,
             studentUsername: student?.username ?? submission.username ?? "unknown",
-            studentNickname:
-              student?.nickname ??
+            studentDisplayName:
+              student?.displayName ??
               submission.username ??
               "unknown",
             questionId: canonicalProblemId,
@@ -297,9 +297,9 @@ export function useGradingData(options: UseGradingDataOptions = {}) {
               id: `coding-standing-${studentId}-${canonicalProblemId}`,
               studentId,
               studentUsername:
-                student?.username || standingRow.displayName || standingRow.nickname || "unknown",
-              studentNickname:
-                student?.nickname || standingRow.displayName || standingRow.nickname || "unknown",
+                student?.username || standingRow.displayName || "unknown",
+              studentDisplayName:
+                student?.displayName || standingRow.displayName || "unknown",
               questionId: canonicalProblemId,
               questionIndex: problemMeta?.index ?? 0,
               questionPrompt: problemMeta?.title ?? canonicalProblemId,
@@ -498,16 +498,14 @@ export function useGradingData(options: UseGradingDataOptions = {}) {
     // Start from all participants
     const map = new Map<
       string,
-      { studentId: string; username: string; nickname: string; displayName?: string; accountRole?: string }
+      { studentId: string; username: string; displayName?: string; accountRole?: string }
     >();
     for (const p of participants) {
       const id = String(p.userId);
       map.set(id, {
         studentId: id,
         username: p.username,
-        nickname: p.nickname ?? p.displayName ?? p.username,
-        displayName:
-          p.userDisplayName ?? p.displayName ?? p.nickname ?? p.username,
+        displayName: p.displayName ?? p.username,
         accountRole: p.accountRole,
       });
     }
@@ -517,8 +515,7 @@ export function useGradingData(options: UseGradingDataOptions = {}) {
         map.set(a.studentId, {
           studentId: a.studentId,
           username: a.studentUsername,
-          nickname: a.studentNickname,
-          displayName: a.studentNickname || a.studentUsername,
+          displayName: a.studentDisplayName || a.studentUsername,
         });
       }
     }
diff --git a/frontend/src/infrastructure/api/dto/contest.dto.ts b/frontend/src/infrastructure/api/dto/contest.dto.ts
index 0474618b..554fae63 100644
--- a/frontend/src/infrastructure/api/dto/contest.dto.ts
+++ b/frontend/src/infrastructure/api/dto/contest.dto.ts
@@ -107,7 +107,6 @@ export interface ContestDetailDto extends ContestDto {
   warning_timeout_seconds?: number;
   screen_share_recovery_grace_ms?: number;
   scoreboard_visible_during_contest?: boolean;
-  anonymous_mode_enabled?: boolean;
   allow_multiple_joins?: boolean;
   max_cheat_warnings?: number;
   allow_auto_unlock?: boolean;
@@ -118,7 +117,6 @@ export interface ContestDetailDto extends ContestDto {
   question_edit_lock_trigger?: "coding_submission" | "exam_answer" | null;
   is_exam_questions_frozen?: boolean;
   exam_questions_count?: number;
-  my_nickname?: string;
   has_started?: boolean;
   started_at?: string;
   left_at?: string;
@@ -175,7 +173,6 @@ export interface ContestParticipantDto {
       display_name?: string;
     };
   };
-  user_display_name?: string;
   account_role?: string;
   auth_provider?: string;
   connection_status?: "offline" | "online" | "live";
@@ -190,7 +187,6 @@ export interface ContestParticipantDto {
   lock_reason?: string;
   violation_count?: number;
   submit_reason?: string;
-  nickname?: string;
   display_name?: string;
   started_at?: string;
   left_at?: string;
@@ -297,7 +293,6 @@ export interface ScoreboardRowDto {
   user?: { id?: number | string; username?: string };
   user_id?: number | string;
   display_name?: string;
-  nickname?: string;
   solved?: number;
   solved_count?: number;
   total_score?: number;
diff --git a/frontend/src/infrastructure/api/repositories/contest.repository.ts b/frontend/src/infrastructure/api/repositories/contest.repository.ts
index c21a748b..c9bb8680 100644
--- a/frontend/src/infrastructure/api/repositories/contest.repository.ts
+++ b/frontend/src/infrastructure/api/repositories/contest.repository.ts
@@ -84,7 +84,7 @@ export const toggleStatus = async (
 
 export const registerContest = async (
   id: string,
-  data?: { password?: string; nickname?: string }
+  data?: { password?: string }
 ): Promise<void> => {
   await requestJson<void>(
     httpClient.post(`/api/v1/contests/${id}/register/`, data),
diff --git a/frontend/src/infrastructure/api/repositories/contestParticipants.repository.ts b/frontend/src/infrastructure/api/repositories/contestParticipants.repository.ts
index e26b8c4f..cdeeb5aa 100644
--- a/frontend/src/infrastructure/api/repositories/contestParticipants.repository.ts
+++ b/frontend/src/infrastructure/api/repositories/contestParticipants.repository.ts
@@ -35,18 +35,6 @@ export const unlockParticipant = async (
   );
 };
 
-export const updateNickname = async (
-  contestId: string,
-  nickname: string
-): Promise<any> => {
-  return requestJson<any>(
-    httpClient.post(`/api/v1/contests/${contestId}/update_nickname/`, {
-      nickname,
-    }),
-    "Failed to update nickname"
-  );
-};
-
 export const updateParticipant = async (
   contestId: string,
   userId: number,
diff --git a/frontend/src/infrastructure/api/repositories/exam.repository.ts b/frontend/src/infrastructure/api/repositories/exam.repository.ts
index 43c13c95..af9941af 100644
--- a/frontend/src/infrastructure/api/repositories/exam.repository.ts
+++ b/frontend/src/infrastructure/api/repositories/exam.repository.ts
@@ -62,7 +62,7 @@ export interface ExamAnswerDto {
   graded_at: string | null;
   participant_user_id: number;
   participant_username: string;
-  participant_nickname: string;
+  participant_display_name: string;
   created_at: string;
   updated_at: string;
 }
@@ -119,7 +119,6 @@ export interface ExamDashboardQuestionDetailDto {
   responses: Array<{
     participant_id: number;
     username: string;
-    nickname: string | null;
     display_name: string;
     score: number | null;
     graded_at: string | null;
@@ -134,7 +133,6 @@ export interface ExamDashboardQuestionDetailDto {
     participants: Array<{
       participant_id: number;
       username: string;
-      nickname: string | null;
       display_name: string;
     }>;
   }>;
@@ -142,7 +140,6 @@ export interface ExamDashboardQuestionDetailDto {
   omitted_participants?: Array<{
     participant_id: number;
     username: string;
-    nickname: string | null;
     display_name: string;
   }>;
   grading_progress?: {
diff --git a/frontend/src/infrastructure/api/repositories/examAnswers.repository.ts b/frontend/src/infrastructure/api/repositories/examAnswers.repository.ts
index ce018aff..258a1e7b 100644
--- a/frontend/src/infrastructure/api/repositories/examAnswers.repository.ts
+++ b/frontend/src/infrastructure/api/repositories/examAnswers.repository.ts
@@ -34,7 +34,7 @@ export interface ExamAnswerDetailDto extends ExamAnswerDto {
   question_snapshot?: QuestionSnapshotDto | null;
   participant_user_id?: number;
   participant_username?: string;
-  participant_nickname?: string;
+  participant_display_name?: string;
 }
 
 export interface ExamAnswer {
@@ -68,7 +68,7 @@ export interface ExamAnswerDetail extends ExamAnswer {
   questionSnapshot?: QuestionSnapshot | null;
   participantUserId?: string;
   participantUsername?: string;
-  participantNickname?: string;
+  participantDisplayName?: string;
 }
 
 /**
@@ -159,7 +159,7 @@ const mapAnswerDetailDto = (dto: ExamAnswerDetailDto): ExamAnswerDetail => ({
     : null,
   participantUserId: dto.participant_user_id != null ? String(dto.participant_user_id) : undefined,
   participantUsername: dto.participant_username,
-  participantNickname: dto.participant_nickname,
+  participantDisplayName: dto.participant_display_name,
 });
 
 // ── Student API ──
diff --git a/frontend/src/infrastructure/mappers/contest.mapper.test.ts b/frontend/src/infrastructure/mappers/contest.mapper.test.ts
index 6628014a..f77bc3d2 100644
--- a/frontend/src/infrastructure/mappers/contest.mapper.test.ts
+++ b/frontend/src/infrastructure/mappers/contest.mapper.test.ts
@@ -3,10 +3,28 @@ import {
   mapContestAnticheatConfigDto,
   mapContestDetailDto,
   mapContestOverviewMetricsDto,
+  mapContestParticipantDto,
   mapContestUpdateRequestToDto,
 } from "./contest.mapper";
 
 describe("contest mapper", () => {
+  describe("mapContestParticipantDto", () => {
+    it("maps participant display name from profile display_name", () => {
+      const result = mapContestParticipantDto({
+        user_id: 1,
+        username: "student1",
+        display_name: "Student One",
+        score: 0,
+        joined_at: "2026-05-03T08:50:00+08:00",
+        exam_status: "not_started",
+        violation_count: 0,
+      });
+
+      expect(result.displayName).toBe("Student One");
+      expect(result.username).toBe("student1");
+    });
+  });
+
   describe("mapContestOverviewMetricsDto", () => {
     it("maps overview metrics payload with heartbeat and time progress", () => {
       const dto = {
diff --git a/frontend/src/infrastructure/mappers/contest.mapper.ts b/frontend/src/infrastructure/mappers/contest.mapper.ts
index 1211f241..aaf466ee 100644
--- a/frontend/src/infrastructure/mappers/contest.mapper.ts
+++ b/frontend/src/infrastructure/mappers/contest.mapper.ts
@@ -122,7 +122,6 @@ export function mapContestDetailDto(dto: ContestDetailDto): ContestDetail {
         ? dto.screen_share_recovery_grace_ms
         : 30_000,
     scoreboardVisibleDuringContest: !!dto.scoreboard_visible_during_contest,
-    anonymousModeEnabled: !!dto.anonymous_mode_enabled,
 
     allowMultipleJoins: !!dto.allow_multiple_joins,
     maxCheatWarnings: dto.max_cheat_warnings || 0,
@@ -136,7 +135,6 @@ export function mapContestDetailDto(dto: ContestDetailDto): ContestDetail {
       dto.question_edit_locked ?? dto.is_exam_questions_frozen
     ),
     examQuestionsCount: dto.exam_questions_count ?? 0,
-    myNickname: dto.my_nickname,
 
     hasStarted: !!dto.has_started,
     startedAt: dto.started_at,
@@ -684,8 +682,7 @@ export function mapContestParticipantDto(
     userId: dto.user_id?.toString() || "",
     username: dto.username || "",
     email: dto.user?.email,
-    userDisplayName:
-      dto.user_display_name || dto.user?.profile?.display_name || "",
+    displayName: dto.display_name || dto.user?.profile?.display_name || "",
     accountRole: dto.account_role || dto.user?.role || "",
     authProvider: dto.auth_provider || dto.user?.auth_provider || "",
     connectionStatus:
@@ -706,8 +703,6 @@ export function mapContestParticipantDto(
     lockReason: dto.lock_reason,
     violationCount: dto.violation_count || 0,
     submitReason: dto.submit_reason,
-    nickname: dto.nickname,
-    displayName: dto.display_name,
   };
 }
 
@@ -953,8 +948,7 @@ export function mapScoreboardDto(dto: ScoreboardDto): ScoreboardData {
           rank: s.rank || 0,
           user: s.user || { id: 0, username: "Unknown" },
           userId: s.user?.id?.toString() || "",
-          displayName: s.display_name || s.nickname || s.user?.username || "",
-          nickname: s.nickname,
+          displayName: s.display_name || s.user?.username || "",
           solvedCount: s.solved || s.solved_count || 0,
           totalScore: s.total_score || 0,
           penalty: s.time || 0,
@@ -1159,7 +1153,6 @@ export function mapContestUpdateRequestToDto(
     warning_timeout_seconds: request.warningTimeoutSeconds,
     screen_share_recovery_grace_ms: request.screenShareRecoveryGraceMs,
     scoreboard_visible_during_contest: request.scoreboardVisibleDuringContest,
-    anonymous_mode_enabled: request.anonymousModeEnabled,
     allow_multiple_joins: request.allowMultipleJoins,
     max_cheat_warnings: request.maxCheatWarnings,
     allow_auto_unlock: request.allowAutoUnlock,
diff --git a/frontend/src/shared/mocks/contest.mock.ts b/frontend/src/shared/mocks/contest.mock.ts
index 85730178..a614f844 100644
--- a/frontend/src/shared/mocks/contest.mock.ts
+++ b/frontend/src/shared/mocks/contest.mock.ts
@@ -54,7 +54,6 @@ export const createMockContest = (
   warningTimeoutSeconds: 20,
   screenShareRecoveryGraceMs: 30000,
   scoreboardVisibleDuringContest: false,
-  anonymousModeEnabled: false,
   allowMultipleJoins: false,
   maxCheatWarnings: 3,
   allowAutoUnlock: true,

From 6945c5dbd4d346992bdb6347463e6e58948f64d0 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 11:59:45 +0800
Subject: [PATCH 02/60] fix(contest-admin): remove duplicate answer progress
 rail

---
 .../admin/AdminInsightRail.module.scss        | 24 -------------------
 .../components/admin/AdminInsightRail.tsx     | 18 --------------
 .../admin/AdminOverviewCommandCenter.test.tsx |  7 ++++--
 3 files changed, 5 insertions(+), 44 deletions(-)

diff --git a/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss b/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
index 70eb8164..717762aa 100644
--- a/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
@@ -86,30 +86,6 @@
   line-height: 0;
 }
 
-.answerProgress {
-  display: grid;
-  gap: 0.5rem;
-  padding-top: 0.5rem;
-}
-
-.answerProgressHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.answerProgressHeader span {
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
-.answerProgressHeader strong {
-  color: var(--cds-text-primary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-  font-weight: 600;
-}
-
 /* 比例 meter 會插入多個 layout spacer（條上方、圖例上方）；皆以 display 收斂且不與 inline height 競爭 */
 .distributionChartFrame :global(.chart-holder .graph-frame > .layout-child.spacer),
 .distributionChartFrame
diff --git a/frontend/src/features/contest/components/admin/AdminInsightRail.tsx b/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
index 1c06c146..165f5065 100644
--- a/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
+++ b/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
@@ -158,10 +158,6 @@ const DistributionOverview = ({
     "adminOverview.widgets.studentDistribution",
     "考生分佈總覽",
   );
-  const answerProgressLabel = t(
-    "adminOverview.widgets.answerProgress",
-    "作答進度",
-  );
   const visibleDistribution = distribution.filter(
     (item) => item.key !== "offline",
   );
@@ -230,20 +226,6 @@ const DistributionOverview = ({
                   }}
                 />
               </div>
-              <div className={styles.answerProgress}>
-                <div className={styles.answerProgressHeader}>
-                  <span>{answerProgressLabel}</span>
-                  <strong>{completionPercent}%</strong>
-                </div>
-                <ProgressBar
-                  label={answerProgressLabel}
-                  hideLabel
-                  size="small"
-                  value={completionPercent}
-                  status={completionPercent >= 100 ? "finished" : "active"}
-                  className={styles.rightPanelProgressBar}
-                />
-              </div>
             </>
           ) : (
             <div className={styles.emptyState}>尚無考生分佈資料</div>
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
index 3b7b9bed..d4897a85 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
@@ -266,10 +266,13 @@ describe("AdminOverviewCommandCenter", () => {
     const distributionOverview = screen.getByLabelText("考生分佈總覽");
     expect(distributionOverview).toBeInTheDocument();
     expect(
-      within(distributionOverview).getByRole("progressbar", {
+      within(distributionOverview).getByTestId("proportional-meter-chart"),
+    ).toBeInTheDocument();
+    expect(
+      within(distributionOverview).queryByRole("progressbar", {
         name: "作答進度",
       }),
-    ).toHaveAttribute("aria-valuenow", "17");
+    ).not.toBeInTheDocument();
     expect(
       within(distributionOverview).queryByText("離線"),
     ).not.toBeInTheDocument();

From 9c77abd8ebda7672eb71e59605e12c30c00b94dc Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 13:53:49 +0800
Subject: [PATCH 03/60] docs(contest): add dashboard typography & layout
 consolidation design

Spec for the Container/Block/Tabs primitive set that replaces the
duplicated title/subtitle/time/divider/tab+toolbar SCSS across the
student contest dashboard and the admin contest dashboard.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...-05-contest-dashboard-typography-design.md | 203 ++++++++++++++++++
 1 file changed, 203 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-05-05-contest-dashboard-typography-design.md

diff --git a/docs/superpowers/specs/2026-05-05-contest-dashboard-typography-design.md b/docs/superpowers/specs/2026-05-05-contest-dashboard-typography-design.md
new file mode 100644
index 00000000..3bd61e13
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-05-contest-dashboard-typography-design.md
@@ -0,0 +1,203 @@
+# 競賽儀表板版面與排版整頓設計
+
+- Date: 2026-05-05
+- Scope: `frontend/src/features/contest/`（學生競賽儀表板 + 競賽管理儀表板 + 對應的 tab 區）
+- Goal: 消除兩端各自實作的 title / subtitle / time / divider / tab+toolbar 樣式重複，建立可長期沿用的儀表板版面元件。
+
+## 目前問題
+
+目前學生端與管理端各自寫一套 SCSS：
+
+- 頁面標題 size 不一（學生 1.75rem `heading-04`、管理寫死 `1.25rem`）。
+- 區塊標題、metric label/value 各自命名（`.title` / `.sectionTitle` / `.recordTitle` / `.panelHeader h3` / `.examScheduleItem strong` …），且管理端多處直接寫 `1.25rem`、`1.5rem` 等 hardcoded 值。
+- `border-right` / `border-bottom` + `:last-child { border: 0 }` 這類 divider 樣板在 `detailRow` / `examStatusMatrix` / `panelGrid` / 學生端 `.layout` 等多處重寫。
+- Tab + toolbar 模式（`.tabRow / .tabRowToolbar / .tabRowSearch / .tabRowFilterMenu`）以及 mobile 換行 media query 在 participants / clarifications / proctoring 等 admin tab 各寫一份。
+- 同一個 className（例如 `.title`、`.subtitle`）在多個 module 各自定義不同字型，閱讀程式碼時無從預期實際長相。
+
+## 設計方向
+
+採三層元件架構，由 Container 處理結構（佈局 + divider + 邊框），Block 處理內容外殼（padding + header slot），Typography primitives 處理字型細節。Tab + toolbar 不另立層級，而是 `DashboardBlock` 的一種頭部選擇。
+
+兩端視覺對齊原則：
+
+- 頁面標題使用學生端尺寸（`heading-04` 1.75rem）但採細體字（weight 400）。
+- 其餘標題、metric、副標、時間，全部對齊管理端較緊湊的尺寸；移除所有 hardcode，全部走 Carbon token。
+
+### Type Scale
+
+| 角色 | Token | 計算值 | weight | 字型 |
+| --- | --- | --- | --- | --- |
+| PageTitle | `--cds-heading-04-font-size` | 1.75rem | 400（細體）| sans |
+| PageSubtitle | `--cds-body-01-font-size` | 0.875rem | 400 | sans |
+| SectionTitle | `--cds-heading-compact-02-font-size` | 1rem | 600 | sans |
+| SectionDescription | `--cds-body-compact-01-font-size` | 0.875rem | 400 | sans |
+| MetricLabel | `--cds-label-01-font-size` | 0.75rem | 400 | sans |
+| MetricValue（預設）| `--cds-heading-compact-02-font-size` | 1rem | 600 | sans |
+| MetricValue（大）| `--cds-heading-03-font-size` | 1.25rem | 600 | sans |
+| TimeDisplay（大）| `--cds-heading-03-font-size` | 1.25rem | 600 | `--cds-code-font-family` |
+| TimeDisplay（header 內聯）| `--cds-body-compact-01-font-size` | 0.875rem | 400 | `--cds-code-font-family` |
+
+實作端規定：所有 typography 樣式必須來自 Carbon token；新增 stylelint 規則 `declaration-property-value-disallowed-list` 在 `font-size` / `font-weight` 上禁止寫死的 rem / 數字 weight。
+
+## 元件規格
+
+統一前綴 `Dashboard*`。所有元件放置於 `frontend/src/shared/components/dashboard/`（新建）。各元件一個 `.tsx` + 對應 `.module.scss`，禁止呼叫端透過 `className` / `style` 覆寫核心樣式。
+
+### Layer 1：結構容器
+
+#### `DashboardPage`
+
+最外層 wrapper。處理 max-width clamp 與整體 padding，提供 scroll 區。對應目前學生端 `.root` + `.dashboard`、admin 的 `.page` + `.content`。
+
+```tsx
+<DashboardPage>
+  {/* children: DashboardContainer 或多個區塊 */}
+</DashboardPage>
+```
+
+#### `DashboardContainer`
+
+```tsx
+<DashboardContainer
+  layout="stack" | "split" | "grid"
+  columns={number | "auto"}        // 僅 layout="grid" 有效
+  dividers="auto" | "none"          // 預設 "none"
+  bordered                          // 是否畫外圍邊框
+>
+  {children}
+</DashboardContainer>
+```
+
+行為：
+
+- `stack`：垂直排列 children；`dividers="auto"` 時於每對相鄰 children 之間補水平分隔線（最後一個不補）。
+- `split`：水平排列；`dividers="auto"` 時於相鄰 children 之間補垂直分隔線。
+- `grid`：依 `columns` 排列；`dividers="auto"` 時水平與垂直分隔線都補，多列換行時兩個方向都處理（matrix 風格）。
+- 可任意 nest。`bordered` 由外層控制，內層不重複畫框。
+- 不接收 `padding` / `gap` / `style` / `className`，避免逃生口導致呼叫端再開分支。
+
+對應目前 SCSS 中要刪除的：
+
+- 學生端 `.layout`（split + bordered + 中間分隔線）。
+- 學生端 `.detailRow` + `.detailCell` 的 grid + border-right + last-child 樣板。
+- 管理端 `.examStatusMatrix` / `.examStatusMetric`、`.examScheduleGrid` / `.examScheduleItem` 的 grid + border-right。
+- `.panelGrid`、`.entryGrid` 的外框 + 內部 divider。
+- 上述伴隨的 mobile 拆欄 media query（由 Container 內部處理）。
+
+#### `DashboardBlock`
+
+```tsx
+<DashboardBlock padding="default" | "compact" | "flush">
+  {/* children 可以是 BlockHeader + 任意內容，或 DashboardTabs */}
+</DashboardBlock>
+```
+
+行為：
+
+- `padding`：`default`（一般 panel）/ `compact`（密度高的清單）/ `flush`（內部子組件自帶 padding，不再外加）。
+- 不畫 border、不管自己跟兄弟之間的分隔線；那是父層 Container 的事。
+- Block 是 leaf 級的內容外殼；children 可自由組合（shadcn 風）。
+
+### Layer 2：Block 頭部
+
+#### `BlockHeader`
+
+```tsx
+<BlockHeader
+  title="參賽進度"
+  titleAs="h2" | "h3"               // 預設 h2
+  titleSize="page" | "section"      // 預設 section
+  description="可選副標"
+  actions={<IconButton ... />}
+/>
+```
+
+`titleSize="page"` → 使用 `PageTitle` 樣式；`titleSize="section"` → `SectionTitle` 樣式。
+
+對應目前 SCSS 要刪除的：
+
+- 學生端 `.titleRow` / `.title` / `.tagRow`（actions slot 取代 tagRow 的固定位置）。
+- 學生端 `.sectionHeader` / `.sectionTitle` / `.sectionDescription` / `.inlineRecordsHeader` / `.inlineRecordsTitle` / `.chartHeader`。
+- 管理端 `.dashboardTitleBlock` / `.dashboardTitleRow h2` / `.dashboardDescription`、`.panelHeader h3` / `.panelHeader p`（`AdminOverviewCommandCenter`、`AdminPreparationDashboard`、`OverviewActionWidgets`、`OverviewInsightsPanel` 的同型樣式）。
+
+### Layer 3：Tab 區
+
+`DashboardTabs` 為 context provider，協調 `DashboardTabBar` 與 `DashboardTabPanel`。
+
+```tsx
+<DashboardBlock padding="flush">
+  <DashboardTabs activeId={tabId} onChange={setTabId}>
+    <DashboardTabBar
+      tabs={[
+        { id: "all", label: "全部" },
+        { id: "active", label: "進行中", badge: 12 },
+      ]}
+      toolbar={
+        <DashboardToolbar>
+          <DashboardToolbar.Search value={q} onChange={setQ} placeholder="搜尋學生" />
+          <DashboardToolbar.FilterMenu options={...} />
+        </DashboardToolbar>
+      }
+    />
+
+    <DashboardTabPanel tabId="all">{/* 自由內容 */}</DashboardTabPanel>
+    <DashboardTabPanel tabId="active">{/* 自由內容 */}</DashboardTabPanel>
+  </DashboardTabs>
+</DashboardBlock>
+```
+
+責任分配：
+
+- `DashboardTabs`：context（active id、onChange）。不畫任何視覺。
+- `DashboardTabBar`：tab 列排版、底線 border-bottom、toolbar slot 的對齊與 `max-width` clamp、mobile 換行（toolbar 自動換到下一行佔滿寬度）。內部仍使用 Carbon `<Tabs> / <TabList> / <Tab>` 以保留鍵盤導覽與 aria。
+- `DashboardTabPanel`：依 context 中 `activeId` 與自身 `tabId` 比對，match 才 render。
+- `DashboardToolbar`：flex row、預設右對齊、提供 borderless 子元件樣式 context（取代目前 `:global(.cds--search-input) { border: none; background: transparent; }` 等覆蓋）。`children` 開放給任意內容（例如 export 按鈕）；常用的 `Search` / `FilterMenu` 以 sub-component 形式提供，內部已套好 toolbar 預設樣式。
+
+對應目前 SCSS 要刪除的：
+
+- `AdminOverviewCommandCenter.module.scss` 的 `.tabRow / .tabRowToolbar / .tabRowToolbarActive / .tabRowSearch / .tabRowFilterMenu` 與其 `@media (max-width: 672px)` 規則。
+- 其他 admin panel（participants / clarifications / proctoring）若各自重抄一份，亦同步移除。
+
+### Layer 4：Typography primitives
+
+放 `frontend/src/shared/components/dashboard/typography/`。多數情境會被 `BlockHeader` 與 `MetricBlock` 等高階元件包用，呼叫端極少直接使用。
+
+- `PageTitle`：預設 `<h1>`，可由 `as` 改。
+- `SectionTitle`：預設 `<h2>`。
+- `MetricBlock`：包裝 label + value（+ 可選 trend / icon slot），props `label`、`value`、`size="default" | "lg"`、`align="start" | "end"`。對應學生端 `.metricLabel + .metricValue`、管理端 `.examStatusMetric span+strong`、`.examScheduleItem span+strong`、`.examProgressTitle + .examProgressValue`、`participantSingleMetric`、`OverviewActionWidgets` 與 `OverviewInsightsPanel` 的數值 + 標籤組合。
+- `TimeDisplay`：props `variant="countdown" | "header"`、`value`、`label`。`countdown` 走 `heading-03` + monospace；`header` 走 `body-compact-01` + monospace。對應學生端 `.timerValue`、`ContestHero` 的 `.timeLabel / .timeValue`、`ContestLayout` 的 `.headerTimerDisplay`。
+
+所有 typography primitive 僅接 `as` / `size` / `align` 等語意 props，不接受 `style` / `className`。
+
+## 整頓範圍
+
+直接以新元件取代並刪除對應 SCSS 規則：
+
+- `frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss`
+- `frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx`
+- `frontend/src/features/contest/components/participants/ContestParticipantsDashboard.module.scss`（若使用 panelHeader / sectionHeader）
+- `frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss` 與 `.tsx`
+- `frontend/src/features/contest/components/admin/AdminPreparationDashboard.module.scss` 與 `.tsx`
+- `frontend/src/features/contest/components/admin/AdminInsightRail.module.scss`
+- `frontend/src/features/contest/components/admin/OverviewInsightsPanel.module.scss`
+- `frontend/src/features/contest/components/admin/OverviewActionWidgets.module.scss`
+- `frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss` 與 `.tsx`
+- `frontend/src/features/contest/screens/admin/panels/AdminClarificationsPanel.module.scss`
+- `frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.module.scss`
+- `frontend/src/features/contest/components/layout/ContestHero.module.scss` 與相關 `.tsx`
+- `frontend/src/features/contest/components/layout/ContestLayout.module.scss`（`.headerTimerDisplay` 部分換 `<TimeDisplay variant="header" />`，其餘 layout 樣式保留）
+
+僅替換 typography / divider / tab+toolbar 相關規則；色彩、interactive state、specific layout（例如 `.scoreDistributionPanel` 的圖表容器尺寸）等保留不動。
+
+## 預期效果
+
+- 兩端頁面標題、區塊標題、metric、時間視覺一致；學生端僅以 weight 400 維持柔和感。
+- `font-size` / `font-weight` / `border-right` / `border-bottom` + `:last-child` 的重複樣板從 contest 模組消失。
+- 新儀表板（教師工作區、批改、統計、未來其他應用）可直接組合 `DashboardPage` / `Container` / `Block` / `BlockHeader` / `Tabs` / `Toolbar`，無需從零寫 module SCSS。
+- 加上 stylelint 規則後，`font-size`、`font-weight` 寫死值無法再進入 contest 模組，避免回退。
+
+## 開放議題
+
+1. `DashboardContainer` `layout="grid"` 在多列 wrap 時的 divider 演算法在 RTL 下是否需要特例驗證。
+2. 引入 stylelint 規則的範圍：先限縮在 `frontend/src/shared/components/dashboard/**` 與 `frontend/src/features/contest/**`，待穩定後再擴及全 features。
+3. Storybook：每個新元件需有對應 story，列為實作計畫的一部分。

From c285428b72c70f328190758188fd2842e1adc80f Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 13:58:42 +0800
Subject: [PATCH 04/60] docs(contest): add dashboard primitives implementation
 plan

Step-by-step plan covering 6 phases: typography, structure, tabs/toolbar,
and migrations of student dashboard / admin overview / contest hero.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...est-dashboard-typography-implementation.md | 1492 +++++++++++++++++
 1 file changed, 1492 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-05-05-contest-dashboard-typography-implementation.md

diff --git a/docs/superpowers/plans/2026-05-05-contest-dashboard-typography-implementation.md b/docs/superpowers/plans/2026-05-05-contest-dashboard-typography-implementation.md
new file mode 100644
index 00000000..5a9853d5
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-05-contest-dashboard-typography-implementation.md
@@ -0,0 +1,1492 @@
+# 競賽儀表板版面與排版整頓 — 實作計畫
+
+> **Spec:** `docs/superpowers/specs/2026-05-05-contest-dashboard-typography-design.md`
+
+**Goal:** 把學生競賽儀表板與競賽管理儀表板各自重複的 title/subtitle/time/divider/tab+toolbar 樣式，遷移到一組可重用的 dashboard primitive（DashboardPage / Container / Block / BlockHeader / Tabs / Toolbar / 4 個 typography primitive）。
+
+**Architecture:** 新元件放 `frontend/src/shared/components/dashboard/`，採三層 + tab 子系統設計。所有 typography 樣式來自 Carbon token；divider 由 Container 注入；tab+toolbar 樣式由 TabBar/Toolbar 內部處理。
+
+**Tech Stack:** React 19 + TypeScript + CSS Modules + SCSS + `@carbon/react` + Vitest + Storybook (CSF3)。
+
+---
+
+## 執行順序
+
+1. Phase 1：typography primitives（PageTitle / SectionTitle / MetricBlock / TimeDisplay）
+2. Phase 2：結構元件（DashboardPage / Container / Block / BlockHeader）
+3. Phase 3：Tabs + Toolbar 子系統
+4. Phase 4：遷移學生競賽儀表板（小範圍驗證）
+5. Phase 5：遷移管理端（AdminOverviewScreen header / CommandCenter / Preparation / ActionWidgets / InsightsPanel）
+6. Phase 6：遷移 ContestHero / ContestLayout 時間相關
+
+每個 Phase 結束都 commit。Phase 1–3 是純新增、零侵入；Phase 4 之後才動既有畫面。
+
+---
+
+## Phase 1：Typography Primitives
+
+**Files:**
+
+- Create: `frontend/src/shared/components/dashboard/typography/PageTitle.tsx`
+- Create: `frontend/src/shared/components/dashboard/typography/PageTitle.module.scss`
+- Create: `frontend/src/shared/components/dashboard/typography/SectionTitle.tsx`
+- Create: `frontend/src/shared/components/dashboard/typography/SectionTitle.module.scss`
+- Create: `frontend/src/shared/components/dashboard/typography/MetricBlock.tsx`
+- Create: `frontend/src/shared/components/dashboard/typography/MetricBlock.module.scss`
+- Create: `frontend/src/shared/components/dashboard/typography/TimeDisplay.tsx`
+- Create: `frontend/src/shared/components/dashboard/typography/TimeDisplay.module.scss`
+- Create: `frontend/src/shared/components/dashboard/typography/index.ts`
+- Create: `frontend/src/shared/components/dashboard/typography/typography.test.tsx`
+- Create: `frontend/src/shared/components/dashboard/typography/typography.stories.tsx`
+
+### Task 1.1：PageTitle
+
+責任：頁面層級主標題；預設 `<h1>`；學生端 size + 細體字。
+
+- [ ] **Step 1：寫 SCSS**
+
+```scss
+// PageTitle.module.scss
+.root {
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-size: var(--cds-heading-04-font-size, 1.75rem);
+  font-weight: 400;
+  line-height: var(--cds-heading-04-line-height, 1.28572);
+}
+```
+
+- [ ] **Step 2：寫 component**
+
+```tsx
+// PageTitle.tsx
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import styles from "./PageTitle.module.scss";
+
+type Props<E extends ElementType> = {
+  as?: E;
+  children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<E>, "as" | "children" | "className" | "style">;
+
+export function PageTitle<E extends ElementType = "h1">({
+  as,
+  children,
+  ...rest
+}: Props<E>) {
+  const Tag = (as ?? "h1") as ElementType;
+  return (
+    <Tag className={styles.root} {...rest}>
+      {children}
+    </Tag>
+  );
+}
+```
+
+### Task 1.2：SectionTitle
+
+責任：區塊標題；預設 `<h2>`；對齊 `heading-compact-02`。
+
+- [ ] **Step 1：寫 SCSS**
+
+```scss
+// SectionTitle.module.scss
+.root {
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: 600;
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+}
+```
+
+- [ ] **Step 2：寫 component**
+
+```tsx
+// SectionTitle.tsx
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import styles from "./SectionTitle.module.scss";
+
+type Props<E extends ElementType> = {
+  as?: E;
+  children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<E>, "as" | "children" | "className" | "style">;
+
+export function SectionTitle<E extends ElementType = "h2">({
+  as,
+  children,
+  ...rest
+}: Props<E>) {
+  const Tag = (as ?? "h2") as ElementType;
+  return (
+    <Tag className={styles.root} {...rest}>
+      {children}
+    </Tag>
+  );
+}
+```
+
+### Task 1.3：MetricBlock
+
+責任：label + value + 可選 trend slot；size default(1rem) / lg(1.25rem)；align start / end。
+
+- [ ] **Step 1：寫 SCSS**
+
+```scss
+// MetricBlock.module.scss
+.root {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.alignEnd {
+  justify-items: end;
+  text-align: end;
+}
+
+.label {
+  margin: 0;
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: 400;
+  line-height: var(--cds-label-01-line-height, 1.33333);
+}
+
+.value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-weight: 600;
+}
+
+.valueDefault {
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+}
+
+.valueLg {
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  line-height: var(--cds-heading-03-line-height, 1.4);
+}
+```
+
+- [ ] **Step 2：寫 component**
+
+```tsx
+// MetricBlock.tsx
+import type { ReactNode } from "react";
+import styles from "./MetricBlock.module.scss";
+
+export interface MetricBlockProps {
+  label: ReactNode;
+  value: ReactNode;
+  size?: "default" | "lg";
+  align?: "start" | "end";
+  trailing?: ReactNode;
+}
+
+export function MetricBlock({
+  label,
+  value,
+  size = "default",
+  align = "start",
+  trailing,
+}: MetricBlockProps) {
+  const valueClass =
+    size === "lg" ? styles.valueLg : styles.valueDefault;
+  const rootClass = [styles.root, align === "end" && styles.alignEnd]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div className={rootClass}>
+      <span className={styles.label}>{label}</span>
+      <strong className={`${styles.value} ${valueClass}`}>
+        {value}
+        {trailing}
+      </strong>
+    </div>
+  );
+}
+```
+
+### Task 1.4：TimeDisplay
+
+責任：時間數字（monospace）；variant countdown / header；可選 label。
+
+- [ ] **Step 1：寫 SCSS**
+
+```scss
+// TimeDisplay.module.scss
+.root {
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.label {
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: 400;
+  line-height: var(--cds-label-01-line-height, 1.33333);
+}
+
+.value {
+  color: var(--cds-text-primary);
+  font-family: var(--cds-code-font-family, monospace);
+}
+
+.countdown {
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  font-weight: 600;
+  line-height: var(--cds-heading-03-line-height, 1.4);
+}
+
+.header {
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: 400;
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+}
+```
+
+- [ ] **Step 2：寫 component**
+
+```tsx
+// TimeDisplay.tsx
+import type { ReactNode } from "react";
+import styles from "./TimeDisplay.module.scss";
+
+export interface TimeDisplayProps {
+  value: ReactNode;
+  variant?: "countdown" | "header";
+  label?: ReactNode;
+}
+
+export function TimeDisplay({
+  value,
+  variant = "countdown",
+  label,
+}: TimeDisplayProps) {
+  const valueClass =
+    variant === "header" ? styles.header : styles.countdown;
+  return (
+    <span className={styles.root}>
+      {label && <span className={styles.label}>{label}</span>}
+      <span className={`${styles.value} ${valueClass}`}>{value}</span>
+    </span>
+  );
+}
+```
+
+### Task 1.5：Barrel export
+
+- [ ] **Step 1：寫 index.ts**
+
+```ts
+// frontend/src/shared/components/dashboard/typography/index.ts
+export { PageTitle } from "./PageTitle";
+export { SectionTitle } from "./SectionTitle";
+export { MetricBlock, type MetricBlockProps } from "./MetricBlock";
+export { TimeDisplay, type TimeDisplayProps } from "./TimeDisplay";
+```
+
+### Task 1.6：行為測試
+
+涵蓋：預設 tag、`as` 切換、MetricBlock align、TimeDisplay 有/無 label、TimeDisplay variant。
+
+- [ ] **Step 1：寫測試**
+
+```tsx
+// typography.test.tsx
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  MetricBlock,
+  PageTitle,
+  SectionTitle,
+  TimeDisplay,
+} from "./index";
+
+describe("PageTitle", () => {
+  it("defaults to h1", () => {
+    render(<PageTitle>Hello</PageTitle>);
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Hello");
+  });
+
+  it("respects as prop", () => {
+    render(<PageTitle as="h2">Hello</PageTitle>);
+    expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument();
+  });
+});
+
+describe("SectionTitle", () => {
+  it("defaults to h2", () => {
+    render(<SectionTitle>Section</SectionTitle>);
+    expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent("Section");
+  });
+});
+
+describe("MetricBlock", () => {
+  it("renders label and value", () => {
+    render(<MetricBlock label="參賽人數" value={42} />);
+    expect(screen.getByText("參賽人數")).toBeInTheDocument();
+    expect(screen.getByText("42")).toBeInTheDocument();
+  });
+
+  it("renders trailing slot", () => {
+    render(
+      <MetricBlock label="x" value="y" trailing={<span data-testid="t">T</span>} />,
+    );
+    expect(screen.getByTestId("t")).toBeInTheDocument();
+  });
+});
+
+describe("TimeDisplay", () => {
+  it("renders value", () => {
+    render(<TimeDisplay value="01:23:45" />);
+    expect(screen.getByText("01:23:45")).toBeInTheDocument();
+  });
+
+  it("renders optional label", () => {
+    render(<TimeDisplay value="01:23:45" label="剩餘時間" />);
+    expect(screen.getByText("剩餘時間")).toBeInTheDocument();
+  });
+});
+```
+
+- [ ] **Step 2：跑測試**
+
+```bash
+cd frontend && npx vitest run src/shared/components/dashboard/typography
+```
+
+預期：全綠。
+
+### Task 1.7：Storybook stories
+
+- [ ] **Step 1：寫 stories**
+
+```tsx
+// typography.stories.tsx
+import type { Meta, StoryObj } from "@storybook/react";
+import { ArrowUp } from "@carbon/icons-react";
+import {
+  MetricBlock,
+  PageTitle,
+  SectionTitle,
+  TimeDisplay,
+} from "./index";
+
+const meta: Meta = {
+  title: "Dashboard/Typography",
+  parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Headings: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: "1rem" }}>
+      <PageTitle>2026 春季程式競賽</PageTitle>
+      <SectionTitle>參賽進度</SectionTitle>
+    </div>
+  ),
+};
+
+export const Metrics: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "2rem" }}>
+      <MetricBlock label="題目數量" value={12} />
+      <MetricBlock label="參賽人數" value={42} size="lg" />
+      <MetricBlock
+        label="完成率"
+        value="78%"
+        size="lg"
+        trailing={<ArrowUp size={16} />}
+      />
+      <MetricBlock label="剩餘" value="04:12" align="end" />
+    </div>
+  ),
+};
+
+export const Times: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "2rem", alignItems: "center" }}>
+      <TimeDisplay variant="countdown" value="01:23:45" label="剩餘時間" />
+      <TimeDisplay variant="header" value="14:05" />
+    </div>
+  ),
+};
+```
+
+### Task 1.8：Commit
+
+- [ ] **Step 1：commit**
+
+```bash
+git add frontend/src/shared/components/dashboard/typography
+git commit -m "feat(dashboard): add typography primitives"
+```
+
+---
+
+## Phase 2：結構元件 Container / Block / BlockHeader
+
+**Files:**
+
+- Create: `frontend/src/shared/components/dashboard/DashboardPage.tsx`
+- Create: `frontend/src/shared/components/dashboard/DashboardPage.module.scss`
+- Create: `frontend/src/shared/components/dashboard/DashboardContainer.tsx`
+- Create: `frontend/src/shared/components/dashboard/DashboardContainer.module.scss`
+- Create: `frontend/src/shared/components/dashboard/DashboardBlock.tsx`
+- Create: `frontend/src/shared/components/dashboard/DashboardBlock.module.scss`
+- Create: `frontend/src/shared/components/dashboard/BlockHeader.tsx`
+- Create: `frontend/src/shared/components/dashboard/BlockHeader.module.scss`
+- Create: `frontend/src/shared/components/dashboard/index.ts`
+- Create: `frontend/src/shared/components/dashboard/structure.test.tsx`
+- Create: `frontend/src/shared/components/dashboard/structure.stories.tsx`
+
+### Task 2.1：DashboardPage
+
+責任：scroll 容器 + max-width clamp + 頁面 padding。
+
+- [ ] **Step 1：SCSS**
+
+```scss
+// DashboardPage.module.scss
+.root {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.inner {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+@media (max-width: 672px) {
+  .inner {
+    padding: 0.75rem;
+  }
+}
+```
+
+- [ ] **Step 2：component**
+
+```tsx
+// DashboardPage.tsx
+import type { ReactNode } from "react";
+import styles from "./DashboardPage.module.scss";
+
+export interface DashboardPageProps {
+  children: ReactNode;
+  ariaLabel?: string;
+}
+
+export function DashboardPage({ children, ariaLabel }: DashboardPageProps) {
+  return (
+    <main className={styles.root} aria-label={ariaLabel}>
+      <div className={styles.inner}>{children}</div>
+    </main>
+  );
+}
+```
+
+### Task 2.2：DashboardContainer
+
+責任：layout=stack/split/grid + dividers="auto"|"none" + bordered；不接 padding/style/className。
+
+關鍵實作：dividers 用 `> *:not(:last-child)` 補 border（stack：bottom；split：right；grid：right + bottom 都補，外層 wrap 時自動）。
+
+- [ ] **Step 1：SCSS**
+
+```scss
+// DashboardContainer.module.scss
+.root {
+  display: flex;
+  min-width: 0;
+}
+
+.bordered {
+  border: 1px solid var(--cds-border-subtle);
+}
+
+// stack
+.stack {
+  flex-direction: column;
+}
+
+.stack.dividers > *:not(:last-child) {
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+// split
+.split {
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.split.dividers > *:not(:last-child) {
+  border-right: 1px solid var(--cds-border-subtle);
+}
+
+@media (max-width: 1056px) {
+  .split {
+    flex-direction: column;
+  }
+
+  .split.dividers > *:not(:last-child) {
+    border-right: 0;
+    border-bottom: 1px solid var(--cds-border-subtle);
+  }
+}
+
+// grid
+.grid {
+  display: grid;
+}
+
+.gridCols2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.gridCols3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.gridCols4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.gridColsAuto {
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+}
+
+.grid.dividers > * {
+  border-right: 1px solid var(--cds-border-subtle);
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+// 最右一欄 / 最下一列消除多餘 border 由具體 column 數決定
+.grid.dividers.gridCols2 > *:nth-child(2n) { border-right: 0; }
+.grid.dividers.gridCols3 > *:nth-child(3n) { border-right: 0; }
+.grid.dividers.gridCols4 > *:nth-child(4n) { border-right: 0; }
+
+// 最後一列無下邊框（簡化處理：所有 child 加 bottom，再用負的 margin 方式較複雜；改用最後 child 取消）
+.grid.dividers > *:last-child { border-right: 0; }
+
+// 最後一整列移除底邊：以 nth-last-child + nth-child 的精確算法在 wrap 情境較難覆蓋全部欄數；保留底邊時讓外層 .bordered 包裹效果視覺仍可接受。
+// （保留 bottom border，整體外觀類似 Carbon DataTable 的網格視覺）
+
+@media (max-width: 672px) {
+  .grid:not(.gridColsAuto) {
+    grid-template-columns: 1fr;
+  }
+
+  .grid.dividers:not(.gridColsAuto) > * {
+    border-right: 0;
+  }
+}
+```
+
+- [ ] **Step 2：component**
+
+```tsx
+// DashboardContainer.tsx
+import type { ReactNode } from "react";
+import styles from "./DashboardContainer.module.scss";
+
+type Layout = "stack" | "split" | "grid";
+type Columns = 2 | 3 | 4 | "auto";
+
+export interface DashboardContainerProps {
+  layout: Layout;
+  columns?: Columns;
+  dividers?: "auto" | "none";
+  bordered?: boolean;
+  children: ReactNode;
+  ariaLabel?: string;
+}
+
+const COLS_CLASS: Record<Columns, string> = {
+  2: styles.gridCols2,
+  3: styles.gridCols3,
+  4: styles.gridCols4,
+  auto: styles.gridColsAuto,
+};
+
+export function DashboardContainer({
+  layout,
+  columns,
+  dividers = "none",
+  bordered = false,
+  children,
+  ariaLabel,
+}: DashboardContainerProps) {
+  const classes = [
+    styles.root,
+    styles[layout],
+    dividers === "auto" && styles.dividers,
+    bordered && styles.bordered,
+    layout === "grid" && columns && COLS_CLASS[columns],
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div className={classes} aria-label={ariaLabel}>
+      {children}
+    </div>
+  );
+}
+```
+
+### Task 2.3：DashboardBlock
+
+責任：padding (default/compact/flush)；不畫 border。
+
+- [ ] **Step 1：SCSS**
+
+```scss
+// DashboardBlock.module.scss
+.root {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.paddingDefault {
+  padding: 1.25rem 1.5rem;
+}
+
+.paddingCompact {
+  padding: 0.75rem 1rem;
+}
+
+.paddingFlush {
+  padding: 0;
+}
+
+@media (max-width: 672px) {
+  .paddingDefault {
+    padding: 1rem;
+  }
+}
+```
+
+- [ ] **Step 2：component**
+
+```tsx
+// DashboardBlock.tsx
+import type { ReactNode } from "react";
+import styles from "./DashboardBlock.module.scss";
+
+type Padding = "default" | "compact" | "flush";
+
+export interface DashboardBlockProps {
+  padding?: Padding;
+  children: ReactNode;
+  ariaLabel?: string;
+}
+
+const PAD: Record<Padding, string> = {
+  default: styles.paddingDefault,
+  compact: styles.paddingCompact,
+  flush: styles.paddingFlush,
+};
+
+export function DashboardBlock({
+  padding = "default",
+  children,
+  ariaLabel,
+}: DashboardBlockProps) {
+  return (
+    <section
+      className={`${styles.root} ${PAD[padding]}`}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </section>
+  );
+}
+```
+
+### Task 2.4：BlockHeader
+
+責任：title + description + actions slot；可選 titleSize=page|section、titleAs。
+
+- [ ] **Step 1：SCSS**
+
+```scss
+// BlockHeader.module.scss
+.root {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.text {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.description {
+  margin: 0;
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+}
+
+.actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 0 0 auto;
+}
+```
+
+- [ ] **Step 2：component**
+
+```tsx
+// BlockHeader.tsx
+import type { ElementType, ReactNode } from "react";
+import { PageTitle } from "./typography/PageTitle";
+import { SectionTitle } from "./typography/SectionTitle";
+import styles from "./BlockHeader.module.scss";
+
+export interface BlockHeaderProps {
+  title: ReactNode;
+  titleAs?: ElementType;
+  titleSize?: "page" | "section";
+  description?: ReactNode;
+  actions?: ReactNode;
+}
+
+export function BlockHeader({
+  title,
+  titleAs,
+  titleSize = "section",
+  description,
+  actions,
+}: BlockHeaderProps) {
+  const TitleComp = titleSize === "page" ? PageTitle : SectionTitle;
+  return (
+    <header className={styles.root}>
+      <div className={styles.text}>
+        <TitleComp as={titleAs}>{title}</TitleComp>
+        {description && <p className={styles.description}>{description}</p>}
+      </div>
+      {actions && <div className={styles.actions}>{actions}</div>}
+    </header>
+  );
+}
+```
+
+### Task 2.5：Barrel export
+
+- [ ] **Step 1：寫 index.ts**
+
+```ts
+// frontend/src/shared/components/dashboard/index.ts
+export * from "./typography";
+export { DashboardPage } from "./DashboardPage";
+export {
+  DashboardContainer,
+  type DashboardContainerProps,
+} from "./DashboardContainer";
+export { DashboardBlock, type DashboardBlockProps } from "./DashboardBlock";
+export { BlockHeader, type BlockHeaderProps } from "./BlockHeader";
+```
+
+### Task 2.6：行為測試
+
+- [ ] **Step 1：寫測試**
+
+```tsx
+// structure.test.tsx
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  BlockHeader,
+  DashboardBlock,
+  DashboardContainer,
+  DashboardPage,
+} from "./index";
+
+describe("DashboardPage", () => {
+  it("renders children inside main", () => {
+    render(<DashboardPage ariaLabel="page">x</DashboardPage>);
+    expect(screen.getByRole("main", { name: "page" })).toHaveTextContent("x");
+  });
+});
+
+describe("DashboardContainer", () => {
+  it("renders children", () => {
+    render(
+      <DashboardContainer layout="stack">
+        <div>a</div>
+        <div>b</div>
+      </DashboardContainer>,
+    );
+    expect(screen.getByText("a")).toBeInTheDocument();
+    expect(screen.getByText("b")).toBeInTheDocument();
+  });
+});
+
+describe("DashboardBlock", () => {
+  it("renders as section", () => {
+    render(<DashboardBlock ariaLabel="block">body</DashboardBlock>);
+    expect(screen.getByRole("region", { name: "block" })).toHaveTextContent("body");
+  });
+});
+
+describe("BlockHeader", () => {
+  it("renders title and description", () => {
+    render(<BlockHeader title="Hello" description="desc" />);
+    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
+    expect(screen.getByText("desc")).toBeInTheDocument();
+  });
+
+  it("renders actions slot", () => {
+    render(
+      <BlockHeader
+        title="t"
+        actions={<button data-testid="a">A</button>}
+      />,
+    );
+    expect(screen.getByTestId("a")).toBeInTheDocument();
+  });
+
+  it("uses h1 when titleSize=page", () => {
+    render(<BlockHeader title="X" titleSize="page" />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+});
+```
+
+- [ ] **Step 2：跑測試**
+
+```bash
+cd frontend && npx vitest run src/shared/components/dashboard
+```
+
+預期：全綠。
+
+### Task 2.7：Storybook stories
+
+- [ ] **Step 1：寫 stories**
+
+```tsx
+// structure.stories.tsx
+import type { Meta, StoryObj } from "@storybook/react";
+import { Add } from "@carbon/icons-react";
+import { Button } from "@carbon/react";
+import {
+  BlockHeader,
+  DashboardBlock,
+  DashboardContainer,
+  DashboardPage,
+  MetricBlock,
+} from "./index";
+
+const meta: Meta = {
+  title: "Dashboard/Structure",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const SplitWithStackInside: Story = {
+  render: () => (
+    <DashboardPage>
+      <DashboardContainer layout="split" bordered dividers="auto">
+        <DashboardContainer layout="stack" dividers="auto">
+          <DashboardBlock>
+            <BlockHeader
+              titleSize="page"
+              title="2026 春季程式競賽"
+              description="練習用儀表板示範"
+              actions={<Button size="sm" renderIcon={Add}>新增</Button>}
+            />
+          </DashboardBlock>
+          <DashboardContainer layout="grid" columns={3} dividers="auto">
+            <DashboardBlock><MetricBlock label="題目" value={12} /></DashboardBlock>
+            <DashboardBlock><MetricBlock label="參賽" value={42} /></DashboardBlock>
+            <DashboardBlock><MetricBlock label="完成率" value="78%" /></DashboardBlock>
+          </DashboardContainer>
+        </DashboardContainer>
+        <DashboardContainer layout="stack" dividers="auto">
+          <DashboardBlock>
+            <BlockHeader title="統計" description="近 24 小時" />
+          </DashboardBlock>
+          <DashboardBlock>內容</DashboardBlock>
+        </DashboardContainer>
+      </DashboardContainer>
+    </DashboardPage>
+  ),
+};
+
+export const Grid2x2Matrix: Story = {
+  render: () => (
+    <DashboardContainer layout="grid" columns={2} bordered dividers="auto">
+      <DashboardBlock><MetricBlock label="A" value="1" size="lg" /></DashboardBlock>
+      <DashboardBlock><MetricBlock label="B" value="2" size="lg" /></DashboardBlock>
+      <DashboardBlock><MetricBlock label="C" value="3" size="lg" /></DashboardBlock>
+      <DashboardBlock><MetricBlock label="D" value="4" size="lg" /></DashboardBlock>
+    </DashboardContainer>
+  ),
+};
+```
+
+### Task 2.8：Commit
+
+- [ ] **Step 1：commit**
+
+```bash
+git add frontend/src/shared/components/dashboard
+git commit -m "feat(dashboard): add page/container/block/header primitives"
+```
+
+---
+
+## Phase 3：Tabs + Toolbar
+
+**Files:**
+
+- Create: `frontend/src/shared/components/dashboard/tabs/DashboardTabs.tsx`
+- Create: `frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx`
+- Create: `frontend/src/shared/components/dashboard/tabs/DashboardTabBar.module.scss`
+- Create: `frontend/src/shared/components/dashboard/tabs/DashboardTabPanel.tsx`
+- Create: `frontend/src/shared/components/dashboard/tabs/DashboardToolbar.tsx`
+- Create: `frontend/src/shared/components/dashboard/tabs/DashboardToolbar.module.scss`
+- Create: `frontend/src/shared/components/dashboard/tabs/index.ts`
+- Create: `frontend/src/shared/components/dashboard/tabs/tabs.test.tsx`
+- Create: `frontend/src/shared/components/dashboard/tabs/tabs.stories.tsx`
+- Modify: `frontend/src/shared/components/dashboard/index.ts`（加上 tabs 出口）
+
+### Task 3.1：DashboardTabs context provider
+
+- [ ] **Step 1：context**
+
+```tsx
+// DashboardTabs.tsx
+import { createContext, useContext, type ReactNode } from "react";
+
+interface Ctx {
+  activeId: string;
+  onChange: (id: string) => void;
+}
+const TabsCtx = createContext<Ctx | null>(null);
+
+export interface DashboardTabsProps {
+  activeId: string;
+  onChange: (id: string) => void;
+  children: ReactNode;
+}
+
+export function DashboardTabs({
+  activeId,
+  onChange,
+  children,
+}: DashboardTabsProps) {
+  return (
+    <TabsCtx.Provider value={{ activeId, onChange }}>
+      {children}
+    </TabsCtx.Provider>
+  );
+}
+
+export function useDashboardTabs(): Ctx {
+  const ctx = useContext(TabsCtx);
+  if (!ctx) {
+    throw new Error("DashboardTabs context missing");
+  }
+  return ctx;
+}
+```
+
+### Task 3.2：DashboardTabBar
+
+- [ ] **Step 1：SCSS**
+
+```scss
+// DashboardTabBar.module.scss
+.root {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+.tabs {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.toolbar {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 1 auto;
+  margin: 0 1rem;
+  align-self: center;
+  max-width: 24rem;
+  width: 100%;
+}
+
+@media (max-width: 672px) {
+  .root {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+
+  .toolbar {
+    margin: 0 1rem 0.5rem;
+    max-width: none;
+  }
+}
+```
+
+- [ ] **Step 2：component（用 Carbon Tabs）**
+
+```tsx
+// DashboardTabBar.tsx
+import type { ReactNode } from "react";
+import { Tabs, TabList, Tab } from "@carbon/react";
+import { useDashboardTabs } from "./DashboardTabs";
+import styles from "./DashboardTabBar.module.scss";
+
+export interface TabDef {
+  id: string;
+  label: ReactNode;
+  badge?: ReactNode;
+}
+
+export interface DashboardTabBarProps {
+  tabs: TabDef[];
+  toolbar?: ReactNode;
+}
+
+export function DashboardTabBar({ tabs, toolbar }: DashboardTabBarProps) {
+  const { activeId, onChange } = useDashboardTabs();
+  const selectedIndex = Math.max(
+    0,
+    tabs.findIndex((t) => t.id === activeId),
+  );
+  return (
+    <div className={styles.root}>
+      <Tabs
+        selectedIndex={selectedIndex}
+        onChange={({ selectedIndex }) => {
+          const next = tabs[selectedIndex];
+          if (next) onChange(next.id);
+        }}
+        className={styles.tabs}
+      >
+        <TabList aria-label="dashboard tabs">
+          {tabs.map((t) => (
+            <Tab key={t.id}>
+              {t.label}
+              {t.badge !== undefined && <> ({t.badge})</>}
+            </Tab>
+          ))}
+        </TabList>
+      </Tabs>
+      {toolbar && <div className={styles.toolbar}>{toolbar}</div>}
+    </div>
+  );
+}
+```
+
+### Task 3.3：DashboardTabPanel
+
+- [ ] **Step 1：component**
+
+```tsx
+// DashboardTabPanel.tsx
+import type { ReactNode } from "react";
+import { useDashboardTabs } from "./DashboardTabs";
+
+export interface DashboardTabPanelProps {
+  tabId: string;
+  children: ReactNode;
+}
+
+export function DashboardTabPanel({ tabId, children }: DashboardTabPanelProps) {
+  const { activeId } = useDashboardTabs();
+  if (activeId !== tabId) return null;
+  return <>{children}</>;
+}
+```
+
+### Task 3.4：DashboardToolbar
+
+- [ ] **Step 1：SCSS**
+
+```scss
+// DashboardToolbar.module.scss
+.root {
+  display: inline-flex;
+  align-items: stretch;
+  width: 100%;
+  gap: 0;
+  border: 0;
+  background: transparent;
+}
+
+.search {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.search :global(.cds--search-input) {
+  border: none;
+  background: transparent;
+}
+
+.search :global(.cds--search-magnifier) {
+  inset-inline-start: 0.75rem;
+}
+
+.filterMenu {
+  flex: 0 0 auto;
+  border-left: 0;
+}
+```
+
+- [ ] **Step 2：component**
+
+```tsx
+// DashboardToolbar.tsx
+import type { ChangeEvent, ReactNode } from "react";
+import { Search } from "@carbon/react";
+import styles from "./DashboardToolbar.module.scss";
+
+export interface DashboardToolbarProps {
+  children: ReactNode;
+}
+
+function Root({ children }: DashboardToolbarProps) {
+  return <div className={styles.root}>{children}</div>;
+}
+
+interface ToolbarSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  ariaLabel?: string;
+}
+
+function ToolbarSearch({
+  value,
+  onChange,
+  placeholder,
+  ariaLabel,
+}: ToolbarSearchProps) {
+  return (
+    <div className={styles.search}>
+      <Search
+        size="lg"
+        labelText={ariaLabel ?? placeholder ?? "search"}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+      />
+    </div>
+  );
+}
+
+interface ToolbarFilterSlotProps {
+  children: ReactNode;
+}
+function ToolbarFilter({ children }: ToolbarFilterSlotProps) {
+  return <div className={styles.filterMenu}>{children}</div>;
+}
+
+export const DashboardToolbar = Object.assign(Root, {
+  Search: ToolbarSearch,
+  Filter: ToolbarFilter,
+});
+```
+
+### Task 3.5：Barrel exports
+
+- [ ] **Step 1：tabs/index.ts**
+
+```ts
+export {
+  DashboardTabs,
+  type DashboardTabsProps,
+} from "./DashboardTabs";
+export {
+  DashboardTabBar,
+  type DashboardTabBarProps,
+  type TabDef,
+} from "./DashboardTabBar";
+export {
+  DashboardTabPanel,
+  type DashboardTabPanelProps,
+} from "./DashboardTabPanel";
+export {
+  DashboardToolbar,
+  type DashboardToolbarProps,
+} from "./DashboardToolbar";
+```
+
+- [ ] **Step 2：在 dashboard/index.ts 加入**
+
+```ts
+export * from "./tabs";
+```
+
+### Task 3.6：行為測試
+
+- [ ] **Step 1：tabs.test.tsx**
+
+```tsx
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import {
+  DashboardTabBar,
+  DashboardTabPanel,
+  DashboardTabs,
+  DashboardToolbar,
+} from "./index";
+
+describe("Dashboard tabs", () => {
+  function setup(active: string, onChange = vi.fn()) {
+    render(
+      <DashboardTabs activeId={active} onChange={onChange}>
+        <DashboardTabBar
+          tabs={[
+            { id: "a", label: "A" },
+            { id: "b", label: "B" },
+          ]}
+          toolbar={
+            <DashboardToolbar>
+              <DashboardToolbar.Search
+                value=""
+                onChange={() => undefined}
+                placeholder="search"
+              />
+            </DashboardToolbar>
+          }
+        />
+        <DashboardTabPanel tabId="a">PANEL_A</DashboardTabPanel>
+        <DashboardTabPanel tabId="b">PANEL_B</DashboardTabPanel>
+      </DashboardTabs>,
+    );
+    return { onChange };
+  }
+
+  it("only renders active panel", () => {
+    setup("a");
+    expect(screen.getByText("PANEL_A")).toBeInTheDocument();
+    expect(screen.queryByText("PANEL_B")).not.toBeInTheDocument();
+  });
+
+  it("renders toolbar slot", () => {
+    setup("a");
+    expect(screen.getByPlaceholderText("search")).toBeInTheDocument();
+  });
+
+  it("fires onChange when clicking another tab", () => {
+    const { onChange } = setup("a");
+    fireEvent.click(screen.getByRole("tab", { name: "B" }));
+    expect(onChange).toHaveBeenCalledWith("b");
+  });
+});
+```
+
+- [ ] **Step 2：跑測試**
+
+```bash
+cd frontend && npx vitest run src/shared/components/dashboard/tabs
+```
+
+### Task 3.7：Stories
+
+- [ ] **Step 1：tabs.stories.tsx**
+
+```tsx
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  DashboardBlock,
+  DashboardTabBar,
+  DashboardTabPanel,
+  DashboardTabs,
+  DashboardToolbar,
+} from "../index";
+
+const meta: Meta = {
+  title: "Dashboard/Tabs",
+  parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const TabsWithToolbar: Story = {
+  render: () => {
+    const [active, setActive] = useState("all");
+    const [q, setQ] = useState("");
+    return (
+      <DashboardBlock padding="flush">
+        <DashboardTabs activeId={active} onChange={setActive}>
+          <DashboardTabBar
+            tabs={[
+              { id: "all", label: "全部" },
+              { id: "active", label: "進行中", badge: 12 },
+              { id: "done", label: "已結束" },
+            ]}
+            toolbar={
+              <DashboardToolbar>
+                <DashboardToolbar.Search
+                  value={q}
+                  onChange={setQ}
+                  placeholder="搜尋學生"
+                />
+              </DashboardToolbar>
+            }
+          />
+          <DashboardTabPanel tabId="all">
+            <div style={{ padding: "1rem" }}>全部內容</div>
+          </DashboardTabPanel>
+          <DashboardTabPanel tabId="active">
+            <div style={{ padding: "1rem" }}>進行中</div>
+          </DashboardTabPanel>
+          <DashboardTabPanel tabId="done">
+            <div style={{ padding: "1rem" }}>已結束</div>
+          </DashboardTabPanel>
+        </DashboardTabs>
+      </DashboardBlock>
+    );
+  },
+};
+```
+
+### Task 3.8：Commit
+
+```bash
+git add frontend/src/shared/components/dashboard/tabs frontend/src/shared/components/dashboard/index.ts
+git commit -m "feat(dashboard): add tabs and toolbar primitives"
+```
+
+---
+
+## Phase 4：遷移學生競賽儀表板
+
+**Files:**
+
+- Modify: `frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx`
+- Modify: `frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss`（移除已用元件取代的規則）
+- Read for context: `frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx`
+
+### Task 4.1：取代外層 layout
+
+- [ ] **Step 1：把 `<main className={styles.root}><div className={styles.dashboard}><div className={styles.layout}>...` 換成 `<DashboardPage ariaLabel="學生競賽首頁"><DashboardContainer layout="split" bordered dividers="auto">...`
+
+- [ ] **Step 2：左欄改 `<DashboardContainer layout="stack" dividers="auto">`，右欄同理。
+
+### Task 4.2：取代 titleRow / detailRow / 各種 metric
+
+- [ ] **Step 1**：頁面標題用 `<DashboardBlock><BlockHeader titleSize="page" title={contest.name} actions={<TagRow ... />} /></DashboardBlock>`。
+- [ ] **Step 2**：原 `.detailRow` 三格 metric 改 `<DashboardContainer layout="grid" columns={3} dividers="auto">` 內含三個 `<DashboardBlock><MetricBlock label="..." value={...} /></DashboardBlock>`。
+- [ ] **Step 3**：原右欄 summaryMetric / summaryChart / scoreDistributionPanel / actionStack / rulesPanel 各包成 `<DashboardBlock>`，header 用 `<BlockHeader title="..." description="..." />` 或 `<BlockHeader title="..." />`。
+- [ ] **Step 4**：`.timerValue` 換 `<TimeDisplay variant="countdown" value={remainingTime} label="剩餘時間" />`。
+- [ ] **Step 5**：`.recordTitle` / `.recordMeta` 區仍走自有 layout（這部分不在整頓範圍），但 `.metricLabel + .metricValue` 全部用 `<MetricBlock>`。
+
+### Task 4.3：清理舊 SCSS
+
+- [ ] **Step 1**：刪除 `StudentContestDashboard.module.scss` 中已不使用的：`.title`、`.titleRow`、`.tagRow`、`.sectionHeader`、`.sectionTitle`、`.inlineRecordsTitle`、`.sectionDescription`、`.detailRow`、`.detailCell`、`.summaryMetric`、`.scoreDistributionPanel`、`.actionStack`、`.rulesPanel`、`.timerValue`、`.metricLabel`、`.metricValue`、`.layout`、`.mainPanel`、`.summaryPanel`、`.dashboard`、`.root`，以及對應的 media query 內覆寫。
+- [ ] **Step 2**：保留 `.recordTitle`、`.recordScore`、`.recordMeta`、`.problemReportList`、`.problemReportItem`、`.problemReportMeta`、`.questionList`、`.errorText`、`.emptyText`、`.warningIcon`、`.successIcon`、`.progressTrack`、`.progressFill`、`.chartSkeleton`、`.scoreDistributionChart`、`.rulesContent`、`.inlineRecordsPanel`（這些是 record-list 與 chart 自己的 layout，不在整頓範圍）。
+
+### Task 4.4：跑既有測試
+
+- [ ] **Step 1：跑 student dashboard 測試**
+
+```bash
+cd frontend && npx vitest run src/features/contest/components/studentDashboard
+```
+
+預期：全綠（測試斷言應為 text content 或 aria，不依賴具體 className）。
+
+如有測試斷言依賴 `styles.title` className，更新為 `getByRole("heading", { name: ... })`。
+
+### Task 4.5：lint / typecheck
+
+```bash
+cd frontend && npx tsc -b --noEmit && npm run lint -- src/features/contest/components/studentDashboard src/shared/components/dashboard
+```
+
+### Task 4.6：Commit
+
+```bash
+git add frontend/src/features/contest/components/studentDashboard
+git commit -m "refactor(contest): migrate student dashboard to dashboard primitives"
+```
+
+---
+
+## Phase 5：遷移管理端主畫面
+
+涵蓋：
+
+- `screens/admin/panels/AdminOverviewScreen.tsx` 與 `.module.scss`：頁面 header 改 `BlockHeader titleSize="page"`，刪除 `.dashboardTitleBlock / .dashboardTitleRow h2 / .dashboardDescription / .contestHeader`。
+- `components/admin/AdminOverviewCommandCenter.tsx` 與 `.module.scss`：
+  - `.examStatusMatrix + .examStatusMetric` 換 `DashboardContainer layout="grid" columns={2} dividers="auto"` + `MetricBlock size="lg"`。
+  - `.examScheduleGrid + .examScheduleItem` 換 `DashboardContainer layout="grid" columns={2} dividers="auto"` + `MetricBlock size="lg"`。
+  - `.examProgressBlock + .examProgressTitle + .examProgressValue` 換 `DashboardBlock` + `MetricBlock size="lg"`。
+  - `.panelHeader h3 / .panelHeader p` 全換 `BlockHeader`，刪 SCSS 對應規則。
+- `components/admin/AdminPreparationDashboard.module.scss`：`.panelHeader` 同上。
+- `components/admin/OverviewActionWidgets.module.scss`：`.title / .subtitle / .widgetTitle / 數值` 改用 `BlockHeader` + `MetricBlock`。
+- `components/admin/OverviewInsightsPanel.module.scss`：`.title / .actionTileTitle / 數值` 同上。
+- `components/admin/AdminInsightRail.module.scss`：影響部分（標題與描述）。
+
+每個檔案改完後 commit：
+
+```bash
+git commit -m "refactor(contest-admin): migrate <FileName> to dashboard primitives"
+```
+
+完成後跑：
+
+```bash
+cd frontend && npx vitest run src/features/contest && npx tsc -b --noEmit
+```
+
+---
+
+## Phase 6：遷移 ContestHero / ContestLayout 時間元件
+
+**Files:**
+
+- Modify: `frontend/src/features/contest/components/layout/ContestHero.tsx`
+- Modify: `frontend/src/features/contest/components/layout/ContestHero.module.scss`：刪 `.timeLabel / .timeValue`。
+- Modify: `frontend/src/features/contest/components/layout/ContestLayout.tsx`：`.headerTimerDisplay` 處改 `<TimeDisplay variant="header" value={...} />`。
+- Modify: `frontend/src/features/contest/components/layout/ContestLayout.module.scss`：刪 `.headerTimerDisplay`。
+
+完成後 commit：
+
+```bash
+git commit -m "refactor(contest): use TimeDisplay primitive for hero and layout timers"
+```
+
+---
+
+## 收尾
+
+- [ ] 跑全部 contest 測試：`cd frontend && npx vitest run src/features/contest`
+- [ ] 跑 typecheck：`cd frontend && npx tsc -b --noEmit`
+- [ ] 啟動 storybook 目視：`bash .codex/skills/qjudge-env-compose-owner/scripts/qjudge-dc.sh dev logs -f storybook`，逐個檢查 `Dashboard/Typography`、`Dashboard/Structure`、`Dashboard/Tabs` 故事。
+- [ ] 啟動 dev：visual check 學生 dashboard 與 admin overview。
+
+完成 Phase 1–6 後，stylelint 規則與其餘 admin tab（participants/clarifications/proctoring）的 toolbar 遷移為獨立後續工作。

From 20bee77f6eb6983c7ba2a2b47dce305853442633 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 13:59:44 +0800
Subject: [PATCH 05/60] feat(dashboard): add typography primitives

PageTitle / SectionTitle / MetricBlock / TimeDisplay built on Carbon
typography tokens. PageTitle uses heading-04 size with weight 400;
others align with the more compact admin scale.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../typography/MetricBlock.module.scss        | 37 +++++++++++
 .../dashboard/typography/MetricBlock.tsx      | 32 ++++++++++
 .../typography/PageTitle.module.scss          |  7 +++
 .../dashboard/typography/PageTitle.tsx        | 23 +++++++
 .../typography/SectionTitle.module.scss       |  7 +++
 .../dashboard/typography/SectionTitle.tsx     | 23 +++++++
 .../typography/TimeDisplay.module.scss        | 29 +++++++++
 .../dashboard/typography/TimeDisplay.tsx      | 22 +++++++
 .../components/dashboard/typography/index.ts  |  4 ++
 .../typography/typography.stories.tsx         | 50 +++++++++++++++
 .../dashboard/typography/typography.test.tsx  | 63 +++++++++++++++++++
 11 files changed, 297 insertions(+)
 create mode 100644 frontend/src/shared/components/dashboard/typography/MetricBlock.module.scss
 create mode 100644 frontend/src/shared/components/dashboard/typography/MetricBlock.tsx
 create mode 100644 frontend/src/shared/components/dashboard/typography/PageTitle.module.scss
 create mode 100644 frontend/src/shared/components/dashboard/typography/PageTitle.tsx
 create mode 100644 frontend/src/shared/components/dashboard/typography/SectionTitle.module.scss
 create mode 100644 frontend/src/shared/components/dashboard/typography/SectionTitle.tsx
 create mode 100644 frontend/src/shared/components/dashboard/typography/TimeDisplay.module.scss
 create mode 100644 frontend/src/shared/components/dashboard/typography/TimeDisplay.tsx
 create mode 100644 frontend/src/shared/components/dashboard/typography/index.ts
 create mode 100644 frontend/src/shared/components/dashboard/typography/typography.stories.tsx
 create mode 100644 frontend/src/shared/components/dashboard/typography/typography.test.tsx

diff --git a/frontend/src/shared/components/dashboard/typography/MetricBlock.module.scss b/frontend/src/shared/components/dashboard/typography/MetricBlock.module.scss
new file mode 100644
index 00000000..25d20250
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/MetricBlock.module.scss
@@ -0,0 +1,37 @@
+.root {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.alignEnd {
+  justify-items: end;
+  text-align: end;
+}
+
+.label {
+  margin: 0;
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: 400;
+  line-height: var(--cds-label-01-line-height, 1.33333);
+}
+
+.value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-weight: 600;
+}
+
+.valueDefault {
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+}
+
+.valueLg {
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  line-height: var(--cds-heading-03-line-height, 1.4);
+}
diff --git a/frontend/src/shared/components/dashboard/typography/MetricBlock.tsx b/frontend/src/shared/components/dashboard/typography/MetricBlock.tsx
new file mode 100644
index 00000000..bc9ed1cf
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/MetricBlock.tsx
@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import styles from "./MetricBlock.module.scss";
+
+export interface MetricBlockProps {
+  label: ReactNode;
+  value: ReactNode;
+  size?: "default" | "lg";
+  align?: "start" | "end";
+  trailing?: ReactNode;
+}
+
+export function MetricBlock({
+  label,
+  value,
+  size = "default",
+  align = "start",
+  trailing,
+}: MetricBlockProps) {
+  const valueClass = size === "lg" ? styles.valueLg : styles.valueDefault;
+  const rootClass = [styles.root, align === "end" && styles.alignEnd]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div className={rootClass}>
+      <span className={styles.label}>{label}</span>
+      <strong className={`${styles.value} ${valueClass}`}>
+        {value}
+        {trailing}
+      </strong>
+    </div>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/typography/PageTitle.module.scss b/frontend/src/shared/components/dashboard/typography/PageTitle.module.scss
new file mode 100644
index 00000000..8ee0157f
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/PageTitle.module.scss
@@ -0,0 +1,7 @@
+.root {
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-size: var(--cds-heading-04-font-size, 1.75rem);
+  font-weight: 400;
+  line-height: var(--cds-heading-04-line-height, 1.28572);
+}
diff --git a/frontend/src/shared/components/dashboard/typography/PageTitle.tsx b/frontend/src/shared/components/dashboard/typography/PageTitle.tsx
new file mode 100644
index 00000000..1ec382f9
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/PageTitle.tsx
@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import styles from "./PageTitle.module.scss";
+
+type Props<E extends ElementType> = {
+  as?: E;
+  children: ReactNode;
+} & Omit<
+  ComponentPropsWithoutRef<E>,
+  "as" | "children" | "className" | "style"
+>;
+
+export function PageTitle<E extends ElementType = "h1">({
+  as,
+  children,
+  ...rest
+}: Props<E>) {
+  const Tag = (as ?? "h1") as ElementType;
+  return (
+    <Tag className={styles.root} {...rest}>
+      {children}
+    </Tag>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/typography/SectionTitle.module.scss b/frontend/src/shared/components/dashboard/typography/SectionTitle.module.scss
new file mode 100644
index 00000000..4f05fec0
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/SectionTitle.module.scss
@@ -0,0 +1,7 @@
+.root {
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: 600;
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+}
diff --git a/frontend/src/shared/components/dashboard/typography/SectionTitle.tsx b/frontend/src/shared/components/dashboard/typography/SectionTitle.tsx
new file mode 100644
index 00000000..6b089669
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/SectionTitle.tsx
@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import styles from "./SectionTitle.module.scss";
+
+type Props<E extends ElementType> = {
+  as?: E;
+  children: ReactNode;
+} & Omit<
+  ComponentPropsWithoutRef<E>,
+  "as" | "children" | "className" | "style"
+>;
+
+export function SectionTitle<E extends ElementType = "h2">({
+  as,
+  children,
+  ...rest
+}: Props<E>) {
+  const Tag = (as ?? "h2") as ElementType;
+  return (
+    <Tag className={styles.root} {...rest}>
+      {children}
+    </Tag>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/typography/TimeDisplay.module.scss b/frontend/src/shared/components/dashboard/typography/TimeDisplay.module.scss
new file mode 100644
index 00000000..0937c6ba
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/TimeDisplay.module.scss
@@ -0,0 +1,29 @@
+.root {
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.label {
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: 400;
+  line-height: var(--cds-label-01-line-height, 1.33333);
+}
+
+.value {
+  color: var(--cds-text-primary);
+  font-family: var(--cds-code-font-family, monospace);
+}
+
+.countdown {
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  font-weight: 600;
+  line-height: var(--cds-heading-03-line-height, 1.4);
+}
+
+.header {
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: 400;
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+}
diff --git a/frontend/src/shared/components/dashboard/typography/TimeDisplay.tsx b/frontend/src/shared/components/dashboard/typography/TimeDisplay.tsx
new file mode 100644
index 00000000..c6045ff1
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/TimeDisplay.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import styles from "./TimeDisplay.module.scss";
+
+export interface TimeDisplayProps {
+  value: ReactNode;
+  variant?: "countdown" | "header";
+  label?: ReactNode;
+}
+
+export function TimeDisplay({
+  value,
+  variant = "countdown",
+  label,
+}: TimeDisplayProps) {
+  const valueClass = variant === "header" ? styles.header : styles.countdown;
+  return (
+    <span className={styles.root}>
+      {label && <span className={styles.label}>{label}</span>}
+      <span className={`${styles.value} ${valueClass}`}>{value}</span>
+    </span>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/typography/index.ts b/frontend/src/shared/components/dashboard/typography/index.ts
new file mode 100644
index 00000000..b093402a
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/index.ts
@@ -0,0 +1,4 @@
+export { PageTitle } from "./PageTitle";
+export { SectionTitle } from "./SectionTitle";
+export { MetricBlock, type MetricBlockProps } from "./MetricBlock";
+export { TimeDisplay, type TimeDisplayProps } from "./TimeDisplay";
diff --git a/frontend/src/shared/components/dashboard/typography/typography.stories.tsx b/frontend/src/shared/components/dashboard/typography/typography.stories.tsx
new file mode 100644
index 00000000..7256536e
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/typography.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ArrowUp } from "@carbon/icons-react";
+import {
+  MetricBlock,
+  PageTitle,
+  SectionTitle,
+  TimeDisplay,
+} from "./index";
+
+const meta: Meta = {
+  title: "Dashboard/Typography",
+  parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Headings: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: "1rem" }}>
+      <PageTitle>2026 春季程式競賽</PageTitle>
+      <SectionTitle>參賽進度</SectionTitle>
+    </div>
+  ),
+};
+
+export const Metrics: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "2rem" }}>
+      <MetricBlock label="題目數量" value={12} />
+      <MetricBlock label="參賽人數" value={42} size="lg" />
+      <MetricBlock
+        label="完成率"
+        value="78%"
+        size="lg"
+        trailing={<ArrowUp size={16} />}
+      />
+      <MetricBlock label="剩餘" value="04:12" align="end" />
+    </div>
+  ),
+};
+
+export const Times: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "2rem", alignItems: "center" }}>
+      <TimeDisplay variant="countdown" value="01:23:45" label="剩餘時間" />
+      <TimeDisplay variant="header" value="14:05" />
+    </div>
+  ),
+};
diff --git a/frontend/src/shared/components/dashboard/typography/typography.test.tsx b/frontend/src/shared/components/dashboard/typography/typography.test.tsx
new file mode 100644
index 00000000..549bfb1b
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/typography.test.tsx
@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  MetricBlock,
+  PageTitle,
+  SectionTitle,
+  TimeDisplay,
+} from "./index";
+
+describe("PageTitle", () => {
+  it("defaults to h1", () => {
+    render(<PageTitle>Hello</PageTitle>);
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Hello");
+  });
+
+  it("respects as prop", () => {
+    render(<PageTitle as="h2">Hello</PageTitle>);
+    expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument();
+  });
+});
+
+describe("SectionTitle", () => {
+  it("defaults to h2", () => {
+    render(<SectionTitle>Section</SectionTitle>);
+    expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent("Section");
+  });
+
+  it("respects as prop", () => {
+    render(<SectionTitle as="h3">S</SectionTitle>);
+    expect(screen.getByRole("heading", { level: 3 })).toBeInTheDocument();
+  });
+});
+
+describe("MetricBlock", () => {
+  it("renders label and value", () => {
+    render(<MetricBlock label="參賽人數" value={42} />);
+    expect(screen.getByText("參賽人數")).toBeInTheDocument();
+    expect(screen.getByText("42")).toBeInTheDocument();
+  });
+
+  it("renders trailing slot", () => {
+    render(
+      <MetricBlock
+        label="x"
+        value="y"
+        trailing={<span data-testid="trail">T</span>}
+      />,
+    );
+    expect(screen.getByTestId("trail")).toBeInTheDocument();
+  });
+});
+
+describe("TimeDisplay", () => {
+  it("renders value", () => {
+    render(<TimeDisplay value="01:23:45" />);
+    expect(screen.getByText("01:23:45")).toBeInTheDocument();
+  });
+
+  it("renders optional label", () => {
+    render(<TimeDisplay value="01:23:45" label="剩餘時間" />);
+    expect(screen.getByText("剩餘時間")).toBeInTheDocument();
+  });
+});

From 4adee50d20ee6795e8a3dbd910f61a05142867d5 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 14:00:46 +0800
Subject: [PATCH 06/60] feat(dashboard): add page/container/block/header
 primitives

DashboardPage handles scroll + max-width clamp; DashboardContainer
exposes stack/split/grid layouts and auto-injects dividers between
siblings; DashboardBlock provides padding variants without owning
borders; BlockHeader composes title (page or section size) plus
description and actions slots.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../dashboard/BlockHeader.module.scss         | 27 ++++++
 .../components/dashboard/BlockHeader.tsx      | 31 +++++++
 .../dashboard/DashboardBlock.module.scss      | 23 +++++
 .../components/dashboard/DashboardBlock.tsx   | 31 +++++++
 .../dashboard/DashboardContainer.module.scss  | 92 +++++++++++++++++++
 .../dashboard/DashboardContainer.tsx          | 45 +++++++++
 .../dashboard/DashboardPage.module.scss       | 18 ++++
 .../components/dashboard/DashboardPage.tsx    | 15 +++
 .../src/shared/components/dashboard/index.ts  |  8 ++
 .../dashboard/structure.stories.tsx           | 76 +++++++++++++++
 .../components/dashboard/structure.test.tsx   | 85 +++++++++++++++++
 11 files changed, 451 insertions(+)
 create mode 100644 frontend/src/shared/components/dashboard/BlockHeader.module.scss
 create mode 100644 frontend/src/shared/components/dashboard/BlockHeader.tsx
 create mode 100644 frontend/src/shared/components/dashboard/DashboardBlock.module.scss
 create mode 100644 frontend/src/shared/components/dashboard/DashboardBlock.tsx
 create mode 100644 frontend/src/shared/components/dashboard/DashboardContainer.module.scss
 create mode 100644 frontend/src/shared/components/dashboard/DashboardContainer.tsx
 create mode 100644 frontend/src/shared/components/dashboard/DashboardPage.module.scss
 create mode 100644 frontend/src/shared/components/dashboard/DashboardPage.tsx
 create mode 100644 frontend/src/shared/components/dashboard/index.ts
 create mode 100644 frontend/src/shared/components/dashboard/structure.stories.tsx
 create mode 100644 frontend/src/shared/components/dashboard/structure.test.tsx

diff --git a/frontend/src/shared/components/dashboard/BlockHeader.module.scss b/frontend/src/shared/components/dashboard/BlockHeader.module.scss
new file mode 100644
index 00000000..d05c4156
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/BlockHeader.module.scss
@@ -0,0 +1,27 @@
+.root {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.text {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.description {
+  margin: 0;
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+}
+
+.actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 0 0 auto;
+}
diff --git a/frontend/src/shared/components/dashboard/BlockHeader.tsx b/frontend/src/shared/components/dashboard/BlockHeader.tsx
new file mode 100644
index 00000000..b457c8a3
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/BlockHeader.tsx
@@ -0,0 +1,31 @@
+import type { ElementType, ReactNode } from "react";
+import { PageTitle } from "./typography/PageTitle";
+import { SectionTitle } from "./typography/SectionTitle";
+import styles from "./BlockHeader.module.scss";
+
+export interface BlockHeaderProps {
+  title: ReactNode;
+  titleAs?: ElementType;
+  titleSize?: "page" | "section";
+  description?: ReactNode;
+  actions?: ReactNode;
+}
+
+export function BlockHeader({
+  title,
+  titleAs,
+  titleSize = "section",
+  description,
+  actions,
+}: BlockHeaderProps) {
+  const TitleComp = titleSize === "page" ? PageTitle : SectionTitle;
+  return (
+    <header className={styles.root}>
+      <div className={styles.text}>
+        <TitleComp as={titleAs}>{title}</TitleComp>
+        {description && <p className={styles.description}>{description}</p>}
+      </div>
+      {actions && <div className={styles.actions}>{actions}</div>}
+    </header>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/DashboardBlock.module.scss b/frontend/src/shared/components/dashboard/DashboardBlock.module.scss
new file mode 100644
index 00000000..9b776ddd
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/DashboardBlock.module.scss
@@ -0,0 +1,23 @@
+.root {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.paddingDefault {
+  padding: 1.25rem 1.5rem;
+}
+
+.paddingCompact {
+  padding: 0.75rem 1rem;
+}
+
+.paddingFlush {
+  padding: 0;
+}
+
+@media (max-width: 672px) {
+  .paddingDefault {
+    padding: 1rem;
+  }
+}
diff --git a/frontend/src/shared/components/dashboard/DashboardBlock.tsx b/frontend/src/shared/components/dashboard/DashboardBlock.tsx
new file mode 100644
index 00000000..adf5d39a
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/DashboardBlock.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import styles from "./DashboardBlock.module.scss";
+
+type Padding = "default" | "compact" | "flush";
+
+export interface DashboardBlockProps {
+  padding?: Padding;
+  children: ReactNode;
+  ariaLabel?: string;
+}
+
+const PAD: Record<Padding, string> = {
+  default: styles.paddingDefault,
+  compact: styles.paddingCompact,
+  flush: styles.paddingFlush,
+};
+
+export function DashboardBlock({
+  padding = "default",
+  children,
+  ariaLabel,
+}: DashboardBlockProps) {
+  return (
+    <section
+      className={`${styles.root} ${PAD[padding]}`}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </section>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/DashboardContainer.module.scss b/frontend/src/shared/components/dashboard/DashboardContainer.module.scss
new file mode 100644
index 00000000..f05c4944
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/DashboardContainer.module.scss
@@ -0,0 +1,92 @@
+.root {
+  display: flex;
+  min-width: 0;
+}
+
+.bordered {
+  border: 1px solid var(--cds-border-subtle);
+}
+
+.stack {
+  flex-direction: column;
+}
+
+.stack.dividers > *:not(:last-child) {
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+.split {
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.split > * {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.split.dividers > *:not(:last-child) {
+  border-right: 1px solid var(--cds-border-subtle);
+}
+
+@media (max-width: 1056px) {
+  .split {
+    flex-direction: column;
+  }
+
+  .split.dividers > *:not(:last-child) {
+    border-right: 0;
+    border-bottom: 1px solid var(--cds-border-subtle);
+  }
+}
+
+.grid {
+  display: grid;
+}
+
+.gridCols2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.gridCols3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.gridCols4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.gridColsAuto {
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+}
+
+.grid.dividers > * {
+  border-right: 1px solid var(--cds-border-subtle);
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+.grid.dividers.gridCols2 > *:nth-child(2n) {
+  border-right: 0;
+}
+
+.grid.dividers.gridCols3 > *:nth-child(3n) {
+  border-right: 0;
+}
+
+.grid.dividers.gridCols4 > *:nth-child(4n) {
+  border-right: 0;
+}
+
+.grid.dividers > *:last-child {
+  border-right: 0;
+}
+
+@media (max-width: 672px) {
+  .grid:not(.gridColsAuto) {
+    grid-template-columns: 1fr;
+  }
+
+  .grid.dividers:not(.gridColsAuto) > * {
+    border-right: 0;
+  }
+}
diff --git a/frontend/src/shared/components/dashboard/DashboardContainer.tsx b/frontend/src/shared/components/dashboard/DashboardContainer.tsx
new file mode 100644
index 00000000..9ec946f3
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/DashboardContainer.tsx
@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+import styles from "./DashboardContainer.module.scss";
+
+type Layout = "stack" | "split" | "grid";
+type Columns = 2 | 3 | 4 | "auto";
+
+export interface DashboardContainerProps {
+  layout: Layout;
+  columns?: Columns;
+  dividers?: "auto" | "none";
+  bordered?: boolean;
+  children: ReactNode;
+  ariaLabel?: string;
+}
+
+const COLS_CLASS: Record<Columns, string> = {
+  2: styles.gridCols2,
+  3: styles.gridCols3,
+  4: styles.gridCols4,
+  auto: styles.gridColsAuto,
+};
+
+export function DashboardContainer({
+  layout,
+  columns,
+  dividers = "none",
+  bordered = false,
+  children,
+  ariaLabel,
+}: DashboardContainerProps) {
+  const classes = [
+    styles.root,
+    styles[layout],
+    dividers === "auto" && styles.dividers,
+    bordered && styles.bordered,
+    layout === "grid" && columns && COLS_CLASS[columns],
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div className={classes} aria-label={ariaLabel}>
+      {children}
+    </div>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/DashboardPage.module.scss b/frontend/src/shared/components/dashboard/DashboardPage.module.scss
new file mode 100644
index 00000000..bdcc99fa
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/DashboardPage.module.scss
@@ -0,0 +1,18 @@
+.root {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.inner {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+@media (max-width: 672px) {
+  .inner {
+    padding: 0.75rem;
+  }
+}
diff --git a/frontend/src/shared/components/dashboard/DashboardPage.tsx b/frontend/src/shared/components/dashboard/DashboardPage.tsx
new file mode 100644
index 00000000..112d4681
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/DashboardPage.tsx
@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import styles from "./DashboardPage.module.scss";
+
+export interface DashboardPageProps {
+  children: ReactNode;
+  ariaLabel?: string;
+}
+
+export function DashboardPage({ children, ariaLabel }: DashboardPageProps) {
+  return (
+    <main className={styles.root} aria-label={ariaLabel}>
+      <div className={styles.inner}>{children}</div>
+    </main>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/index.ts b/frontend/src/shared/components/dashboard/index.ts
new file mode 100644
index 00000000..0d254b95
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/index.ts
@@ -0,0 +1,8 @@
+export * from "./typography";
+export { DashboardPage, type DashboardPageProps } from "./DashboardPage";
+export {
+  DashboardContainer,
+  type DashboardContainerProps,
+} from "./DashboardContainer";
+export { DashboardBlock, type DashboardBlockProps } from "./DashboardBlock";
+export { BlockHeader, type BlockHeaderProps } from "./BlockHeader";
diff --git a/frontend/src/shared/components/dashboard/structure.stories.tsx b/frontend/src/shared/components/dashboard/structure.stories.tsx
new file mode 100644
index 00000000..6b08b0a4
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/structure.stories.tsx
@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Add } from "@carbon/icons-react";
+import { Button } from "@carbon/react";
+import {
+  BlockHeader,
+  DashboardBlock,
+  DashboardContainer,
+  DashboardPage,
+  MetricBlock,
+} from "./index";
+
+const meta: Meta = {
+  title: "Dashboard/Structure",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const SplitWithStackInside: Story = {
+  render: () => (
+    <DashboardPage ariaLabel="demo">
+      <DashboardContainer layout="split" bordered dividers="auto">
+        <DashboardContainer layout="stack" dividers="auto">
+          <DashboardBlock>
+            <BlockHeader
+              titleSize="page"
+              title="2026 春季程式競賽"
+              description="練習用儀表板示範"
+              actions={
+                <Button size="sm" renderIcon={Add}>
+                  新增
+                </Button>
+              }
+            />
+          </DashboardBlock>
+          <DashboardContainer layout="grid" columns={3} dividers="auto">
+            <DashboardBlock>
+              <MetricBlock label="題目" value={12} />
+            </DashboardBlock>
+            <DashboardBlock>
+              <MetricBlock label="參賽" value={42} />
+            </DashboardBlock>
+            <DashboardBlock>
+              <MetricBlock label="完成率" value="78%" />
+            </DashboardBlock>
+          </DashboardContainer>
+        </DashboardContainer>
+        <DashboardContainer layout="stack" dividers="auto">
+          <DashboardBlock>
+            <BlockHeader title="統計" description="近 24 小時" />
+          </DashboardBlock>
+          <DashboardBlock>內容</DashboardBlock>
+        </DashboardContainer>
+      </DashboardContainer>
+    </DashboardPage>
+  ),
+};
+
+export const Grid2x2Matrix: Story = {
+  render: () => (
+    <DashboardContainer layout="grid" columns={2} bordered dividers="auto">
+      <DashboardBlock>
+        <MetricBlock label="A" value="1" size="lg" />
+      </DashboardBlock>
+      <DashboardBlock>
+        <MetricBlock label="B" value="2" size="lg" />
+      </DashboardBlock>
+      <DashboardBlock>
+        <MetricBlock label="C" value="3" size="lg" />
+      </DashboardBlock>
+      <DashboardBlock>
+        <MetricBlock label="D" value="4" size="lg" />
+      </DashboardBlock>
+    </DashboardContainer>
+  ),
+};
diff --git a/frontend/src/shared/components/dashboard/structure.test.tsx b/frontend/src/shared/components/dashboard/structure.test.tsx
new file mode 100644
index 00000000..335d89ed
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/structure.test.tsx
@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  BlockHeader,
+  DashboardBlock,
+  DashboardContainer,
+  DashboardPage,
+} from "./index";
+
+describe("DashboardPage", () => {
+  it("renders children inside main with aria-label", () => {
+    render(<DashboardPage ariaLabel="page">x</DashboardPage>);
+    expect(screen.getByRole("main", { name: "page" })).toHaveTextContent("x");
+  });
+});
+
+describe("DashboardContainer", () => {
+  it("renders children for stack layout", () => {
+    render(
+      <DashboardContainer layout="stack">
+        <div>a</div>
+        <div>b</div>
+      </DashboardContainer>,
+    );
+    expect(screen.getByText("a")).toBeInTheDocument();
+    expect(screen.getByText("b")).toBeInTheDocument();
+  });
+
+  it("renders children for split layout", () => {
+    render(
+      <DashboardContainer layout="split" dividers="auto" bordered>
+        <div>l</div>
+        <div>r</div>
+      </DashboardContainer>,
+    );
+    expect(screen.getByText("l")).toBeInTheDocument();
+    expect(screen.getByText("r")).toBeInTheDocument();
+  });
+
+  it("renders children for grid layout with columns", () => {
+    render(
+      <DashboardContainer layout="grid" columns={3} dividers="auto">
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+      </DashboardContainer>,
+    );
+    expect(screen.getByText("1")).toBeInTheDocument();
+    expect(screen.getByText("3")).toBeInTheDocument();
+  });
+});
+
+describe("DashboardBlock", () => {
+  it("renders as accessible section", () => {
+    render(<DashboardBlock ariaLabel="block">body</DashboardBlock>);
+    expect(screen.getByRole("region", { name: "block" })).toHaveTextContent(
+      "body",
+    );
+  });
+});
+
+describe("BlockHeader", () => {
+  it("renders title and description", () => {
+    render(<BlockHeader title="Hello" description="desc" />);
+    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
+    expect(screen.getByText("desc")).toBeInTheDocument();
+  });
+
+  it("renders actions slot", () => {
+    render(
+      <BlockHeader title="t" actions={<button data-testid="a">A</button>} />,
+    );
+    expect(screen.getByTestId("a")).toBeInTheDocument();
+  });
+
+  it("uses h1 when titleSize=page", () => {
+    render(<BlockHeader title="X" titleSize="page" />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+
+  it("uses h2 by default", () => {
+    render(<BlockHeader title="X" />);
+    expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument();
+  });
+});

From cc409098fdad35d54b074e2399ef4e152d63252c Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 14:01:40 +0800
Subject: [PATCH 07/60] feat(dashboard): add tabs and toolbar primitives

DashboardTabs context provider coordinates DashboardTabBar (Carbon
Tabs wrapper with toolbar slot and mobile stacking) and
DashboardTabPanel (renders only when its tabId matches the active
context). DashboardToolbar provides Search and Filter sub-components
preset for the borderless in-tab-bar appearance.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/shared/components/dashboard/index.ts  |  1 +
 .../tabs/DashboardTabBar.module.scss          | 35 +++++++++++
 .../dashboard/tabs/DashboardTabBar.tsx        | 50 ++++++++++++++++
 .../dashboard/tabs/DashboardTabPanel.tsx      | 13 +++++
 .../dashboard/tabs/DashboardTabs.tsx          | 33 +++++++++++
 .../tabs/DashboardToolbar.module.scss         | 27 +++++++++
 .../dashboard/tabs/DashboardToolbar.tsx       | 49 ++++++++++++++++
 .../shared/components/dashboard/tabs/index.ts | 11 ++++
 .../dashboard/tabs/tabs.stories.tsx           | 54 +++++++++++++++++
 .../components/dashboard/tabs/tabs.test.tsx   | 58 +++++++++++++++++++
 10 files changed, 331 insertions(+)
 create mode 100644 frontend/src/shared/components/dashboard/tabs/DashboardTabBar.module.scss
 create mode 100644 frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx
 create mode 100644 frontend/src/shared/components/dashboard/tabs/DashboardTabPanel.tsx
 create mode 100644 frontend/src/shared/components/dashboard/tabs/DashboardTabs.tsx
 create mode 100644 frontend/src/shared/components/dashboard/tabs/DashboardToolbar.module.scss
 create mode 100644 frontend/src/shared/components/dashboard/tabs/DashboardToolbar.tsx
 create mode 100644 frontend/src/shared/components/dashboard/tabs/index.ts
 create mode 100644 frontend/src/shared/components/dashboard/tabs/tabs.stories.tsx
 create mode 100644 frontend/src/shared/components/dashboard/tabs/tabs.test.tsx

diff --git a/frontend/src/shared/components/dashboard/index.ts b/frontend/src/shared/components/dashboard/index.ts
index 0d254b95..2ed13d89 100644
--- a/frontend/src/shared/components/dashboard/index.ts
+++ b/frontend/src/shared/components/dashboard/index.ts
@@ -1,4 +1,5 @@
 export * from "./typography";
+export * from "./tabs";
 export { DashboardPage, type DashboardPageProps } from "./DashboardPage";
 export {
   DashboardContainer,
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.module.scss b/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.module.scss
new file mode 100644
index 00000000..f4f66332
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.module.scss
@@ -0,0 +1,35 @@
+.root {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+.tabs {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.toolbar {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 1 auto;
+  margin: 0 1rem;
+  align-self: center;
+  max-width: 24rem;
+  width: 100%;
+}
+
+@media (max-width: 672px) {
+  .root {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+
+  .toolbar {
+    margin: 0 1rem 0.5rem;
+    max-width: none;
+  }
+}
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx b/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx
new file mode 100644
index 00000000..7a58e960
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx
@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+import { Tab, TabList, Tabs } from "@carbon/react";
+import { useDashboardTabs } from "./DashboardTabs";
+import styles from "./DashboardTabBar.module.scss";
+
+export interface TabDef {
+  id: string;
+  label: ReactNode;
+  badge?: ReactNode;
+}
+
+export interface DashboardTabBarProps {
+  tabs: TabDef[];
+  toolbar?: ReactNode;
+  ariaLabel?: string;
+}
+
+export function DashboardTabBar({
+  tabs,
+  toolbar,
+  ariaLabel = "dashboard tabs",
+}: DashboardTabBarProps) {
+  const { activeId, onChange } = useDashboardTabs();
+  const selectedIndex = Math.max(
+    0,
+    tabs.findIndex((t) => t.id === activeId),
+  );
+  return (
+    <div className={styles.root}>
+      <Tabs
+        selectedIndex={selectedIndex}
+        onChange={({ selectedIndex }: { selectedIndex: number }) => {
+          const next = tabs[selectedIndex];
+          if (next) onChange(next.id);
+        }}
+        className={styles.tabs}
+      >
+        <TabList aria-label={ariaLabel}>
+          {tabs.map((t) => (
+            <Tab key={t.id}>
+              {t.label}
+              {t.badge !== undefined && <> ({t.badge})</>}
+            </Tab>
+          ))}
+        </TabList>
+      </Tabs>
+      {toolbar && <div className={styles.toolbar}>{toolbar}</div>}
+    </div>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardTabPanel.tsx b/frontend/src/shared/components/dashboard/tabs/DashboardTabPanel.tsx
new file mode 100644
index 00000000..9bf07dfc
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardTabPanel.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import { useDashboardTabs } from "./DashboardTabs";
+
+export interface DashboardTabPanelProps {
+  tabId: string;
+  children: ReactNode;
+}
+
+export function DashboardTabPanel({ tabId, children }: DashboardTabPanelProps) {
+  const { activeId } = useDashboardTabs();
+  if (activeId !== tabId) return null;
+  return <>{children}</>;
+}
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardTabs.tsx b/frontend/src/shared/components/dashboard/tabs/DashboardTabs.tsx
new file mode 100644
index 00000000..5b9def87
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardTabs.tsx
@@ -0,0 +1,33 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+interface Ctx {
+  activeId: string;
+  onChange: (id: string) => void;
+}
+const TabsCtx = createContext<Ctx | null>(null);
+
+export interface DashboardTabsProps {
+  activeId: string;
+  onChange: (id: string) => void;
+  children: ReactNode;
+}
+
+export function DashboardTabs({
+  activeId,
+  onChange,
+  children,
+}: DashboardTabsProps) {
+  return (
+    <TabsCtx.Provider value={{ activeId, onChange }}>
+      {children}
+    </TabsCtx.Provider>
+  );
+}
+
+export function useDashboardTabs(): Ctx {
+  const ctx = useContext(TabsCtx);
+  if (!ctx) {
+    throw new Error("DashboardTabs context missing");
+  }
+  return ctx;
+}
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.module.scss b/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.module.scss
new file mode 100644
index 00000000..43e03b77
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.module.scss
@@ -0,0 +1,27 @@
+.root {
+  display: inline-flex;
+  align-items: stretch;
+  width: 100%;
+  gap: 0;
+  border: 0;
+  background: transparent;
+}
+
+.search {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.search :global(.cds--search-input) {
+  border: none;
+  background: transparent;
+}
+
+.search :global(.cds--search-magnifier) {
+  inset-inline-start: 0.75rem;
+}
+
+.filterMenu {
+  flex: 0 0 auto;
+  border-left: 0;
+}
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.tsx b/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.tsx
new file mode 100644
index 00000000..17a6151a
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.tsx
@@ -0,0 +1,49 @@
+import type { ChangeEvent, ReactNode } from "react";
+import { Search } from "@carbon/react";
+import styles from "./DashboardToolbar.module.scss";
+
+export interface DashboardToolbarProps {
+  children: ReactNode;
+}
+
+function Root({ children }: DashboardToolbarProps) {
+  return <div className={styles.root}>{children}</div>;
+}
+
+interface ToolbarSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  ariaLabel?: string;
+}
+
+function ToolbarSearch({
+  value,
+  onChange,
+  placeholder,
+  ariaLabel,
+}: ToolbarSearchProps) {
+  return (
+    <div className={styles.search}>
+      <Search
+        size="lg"
+        labelText={ariaLabel ?? placeholder ?? "search"}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+      />
+    </div>
+  );
+}
+
+interface ToolbarFilterSlotProps {
+  children: ReactNode;
+}
+function ToolbarFilter({ children }: ToolbarFilterSlotProps) {
+  return <div className={styles.filterMenu}>{children}</div>;
+}
+
+export const DashboardToolbar = Object.assign(Root, {
+  Search: ToolbarSearch,
+  Filter: ToolbarFilter,
+});
diff --git a/frontend/src/shared/components/dashboard/tabs/index.ts b/frontend/src/shared/components/dashboard/tabs/index.ts
new file mode 100644
index 00000000..c32a7f1d
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/index.ts
@@ -0,0 +1,11 @@
+export { DashboardTabs, type DashboardTabsProps } from "./DashboardTabs";
+export {
+  DashboardTabBar,
+  type DashboardTabBarProps,
+  type TabDef,
+} from "./DashboardTabBar";
+export {
+  DashboardTabPanel,
+  type DashboardTabPanelProps,
+} from "./DashboardTabPanel";
+export { DashboardToolbar, type DashboardToolbarProps } from "./DashboardToolbar";
diff --git a/frontend/src/shared/components/dashboard/tabs/tabs.stories.tsx b/frontend/src/shared/components/dashboard/tabs/tabs.stories.tsx
new file mode 100644
index 00000000..5a3fda46
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/tabs.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  DashboardBlock,
+  DashboardTabBar,
+  DashboardTabPanel,
+  DashboardTabs,
+  DashboardToolbar,
+} from "../index";
+
+const meta: Meta = {
+  title: "Dashboard/Tabs",
+  parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const TabsWithToolbar: Story = {
+  render: () => {
+    const [active, setActive] = useState("all");
+    const [q, setQ] = useState("");
+    return (
+      <DashboardBlock padding="flush">
+        <DashboardTabs activeId={active} onChange={setActive}>
+          <DashboardTabBar
+            tabs={[
+              { id: "all", label: "全部" },
+              { id: "active", label: "進行中", badge: 12 },
+              { id: "done", label: "已結束" },
+            ]}
+            toolbar={
+              <DashboardToolbar>
+                <DashboardToolbar.Search
+                  value={q}
+                  onChange={setQ}
+                  placeholder="搜尋學生"
+                />
+              </DashboardToolbar>
+            }
+          />
+          <DashboardTabPanel tabId="all">
+            <div style={{ padding: "1rem" }}>全部內容</div>
+          </DashboardTabPanel>
+          <DashboardTabPanel tabId="active">
+            <div style={{ padding: "1rem" }}>進行中</div>
+          </DashboardTabPanel>
+          <DashboardTabPanel tabId="done">
+            <div style={{ padding: "1rem" }}>已結束</div>
+          </DashboardTabPanel>
+        </DashboardTabs>
+      </DashboardBlock>
+    );
+  },
+};
diff --git a/frontend/src/shared/components/dashboard/tabs/tabs.test.tsx b/frontend/src/shared/components/dashboard/tabs/tabs.test.tsx
new file mode 100644
index 00000000..5a749a4b
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/tabs.test.tsx
@@ -0,0 +1,58 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import {
+  DashboardTabBar,
+  DashboardTabPanel,
+  DashboardTabs,
+  DashboardToolbar,
+} from "./index";
+
+function renderTabs(active: string, onChange = vi.fn()) {
+  render(
+    <DashboardTabs activeId={active} onChange={onChange}>
+      <DashboardTabBar
+        tabs={[
+          { id: "a", label: "A" },
+          { id: "b", label: "B" },
+        ]}
+        toolbar={
+          <DashboardToolbar>
+            <DashboardToolbar.Search
+              value=""
+              onChange={() => undefined}
+              placeholder="search"
+            />
+          </DashboardToolbar>
+        }
+      />
+      <DashboardTabPanel tabId="a">PANEL_A</DashboardTabPanel>
+      <DashboardTabPanel tabId="b">PANEL_B</DashboardTabPanel>
+    </DashboardTabs>,
+  );
+  return { onChange };
+}
+
+describe("Dashboard tabs", () => {
+  it("only renders active panel", () => {
+    renderTabs("a");
+    expect(screen.getByText("PANEL_A")).toBeInTheDocument();
+    expect(screen.queryByText("PANEL_B")).not.toBeInTheDocument();
+  });
+
+  it("renders toolbar slot", () => {
+    renderTabs("a");
+    expect(screen.getByPlaceholderText("search")).toBeInTheDocument();
+  });
+
+  it("fires onChange when clicking another tab", () => {
+    const { onChange } = renderTabs("a");
+    fireEvent.click(screen.getByRole("tab", { name: "B" }));
+    expect(onChange).toHaveBeenCalledWith("b");
+  });
+
+  it("switches panel when active id changes", () => {
+    renderTabs("b");
+    expect(screen.queryByText("PANEL_A")).not.toBeInTheDocument();
+    expect(screen.getByText("PANEL_B")).toBeInTheDocument();
+  });
+});

From 9347dead5a26a347be6513be96a536d5dc0d996c Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 14:07:35 +0800
Subject: [PATCH 08/60] refactor(contest): migrate student dashboard to
 dashboard primitives

Replace the bespoke .root/.dashboard/.layout/.titleRow/.detailRow/.timerValue
SCSS with DashboardPage, DashboardContainer (split + grid + stack),
DashboardBlock, BlockHeader and TimeDisplay/MetricBlock primitives.
Inner Carbon Tabs are kept; only the outer page layout, hero title and
metric cells are migrated.

Also switch BlockHeader description from <p> to <div> so it can host
arbitrary nodes (e.g. tag rows) without nesting block elements in <p>.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../StudentContestDashboard.module.scss       | 272 ++-----
 .../StudentContestDashboardView.test.tsx      | 130 ++--
 .../StudentContestDashboardView.tsx           | 707 +++++++++++-------
 .../components/dashboard/BlockHeader.tsx      |   2 +-
 .../dashboard/tabs/DashboardTabBar.tsx        |  35 +-
 5 files changed, 598 insertions(+), 548 deletions(-)

diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss
index cb94477c..24f4f589 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss
@@ -1,65 +1,37 @@
-.root {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
+// 此 module 只保留 student dashboard 內部 list / chart / tab content 的局部樣式。
+// 頁面層級 layout、title、metric、time 已改用 @/shared/components/dashboard 元件。
 
-.dashboard {
-  max-width: 1056px;
-  margin: 0 auto;
-  padding: 1rem;
+.tagRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
 }
 
-.summaryPanel,
-.infoGrid,
-.progressGrid {
-  border: 1px solid var(--cds-border-subtle);
+.tabPanel {
+  padding: 0;
 }
 
-.summaryPanel {
+.tabContent {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
-}
-
-.summaryMain,
-.actionPanel,
-.infoCell,
-.progressPanel,
-.rulesPanel {
+  gap: 1rem;
   padding: 1.5rem;
 }
 
-.summaryMain {
-  min-width: 0;
-  border-right: 1px solid var(--cds-border-subtle);
-}
-
-.titleRow,
-.sectionHeader {
+.sectionHeader,
+.inlineRecordsHeader,
+.chartHeader {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 1rem;
 }
 
-.titleRow {
+.chartHeader {
   align-items: center;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  margin-bottom: 1rem;
 }
 
-.title {
-  margin: 0;
-  color: var(--cds-text-primary);
-  font-size: var(--cds-heading-04-font-size, 1.75rem);
-  font-weight: 600;
-  line-height: var(--cds-heading-04-line-height, 1.28572);
-}
-
-.phaseTitle,
-.sectionTitle {
+.inlineRecordsTitle {
   margin: 0;
   color: var(--cds-text-primary);
   font-size: var(--cds-heading-compact-02-font-size, 1rem);
@@ -67,96 +39,38 @@
   line-height: var(--cds-heading-compact-02-line-height, 1.375);
 }
 
-.phaseDescription,
-.sectionDescription,
-.recordMeta,
-.emptyText,
-.metricLabel {
-  color: var(--cds-text-secondary);
-}
-
-.phaseDescription {
+.sectionDescription {
   margin: 0.25rem 0 0;
-  max-width: 44rem;
+  color: var(--cds-text-secondary);
   font-size: var(--cds-body-01-font-size, 0.875rem);
   line-height: var(--cds-body-01-line-height, 1.42857);
 }
 
-.markdown,
-.rulesContent {
-  margin-top: 1rem;
-  color: var(--cds-text-primary);
-}
-
-.markdown {
-  max-width: 48rem;
-}
-
-.actionPanel {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 1.5rem;
-}
-
 .actionStack,
 .modalStack {
   display: grid;
   gap: 0.75rem;
 }
 
-.timerValue {
-  margin: 0.25rem 0 0;
-  color: var(--cds-text-primary);
-  font-family: var(--cds-code-font-family, monospace);
-  font-size: var(--cds-heading-05-font-size, 2rem);
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-.infoGrid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  border-top: 0;
-}
-
-.infoCell {
-  min-width: 0;
-  border-right: 1px solid var(--cds-border-subtle);
-}
-
-.infoCell:last-child {
-  border-right: 0;
-}
-
 .metricLabel {
   margin: 0;
+  color: var(--cds-text-secondary);
   font-size: var(--cds-label-01-font-size, 0.75rem);
   line-height: var(--cds-label-01-line-height, 1.33333);
 }
 
 .metricValue {
-  margin: 0.375rem 0 0;
+  margin: 0;
   color: var(--cds-text-primary);
-  font-size: var(--cds-body-compact-02-font-size, 1rem);
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
   font-weight: 600;
-  line-height: var(--cds-body-compact-02-line-height, 1.375);
-}
-
-.progressGrid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
-  border-top: 0;
-}
-
-.progressPanel {
-  border-right: 1px solid var(--cds-border-subtle);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
 }
 
 .progressTrack {
   position: relative;
   block-size: 0.5rem;
-  margin-top: 1.5rem;
+  margin-top: 0.75rem;
   overflow: hidden;
   background: var(--cds-layer-accent-01);
 }
@@ -167,17 +81,19 @@
   background: var(--cds-support-success);
 }
 
-.statGrid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1rem;
-  margin-top: 1.5rem;
+.scoreDistributionChart {
+  min-height: 11.25rem;
+  margin-top: 0.75rem;
+  overflow: hidden;
 }
 
-.rulesPanel {
-  display: grid;
-  gap: 1rem;
-  align-content: start;
+.chartSkeleton {
+  width: 100%;
+  height: 11.25rem;
+}
+
+.rulesContent {
+  color: var(--cds-text-primary);
 }
 
 .warningIcon {
@@ -188,44 +104,14 @@
   color: var(--cds-support-success);
 }
 
-.inlineRecordsPanel {
-  margin-top: 1.5rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--cds-border-subtle);
-}
-
-.inlineRecordsHeader {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.inlineRecordsTitle {
-  margin: 0;
-  color: var(--cds-text-primary);
-  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
-  font-weight: 600;
-  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
-}
-
-.recordList {
-  display: grid;
-  margin-top: 1rem;
-  border-top: 1px solid var(--cds-border-subtle);
-}
-
-.recordRow {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 1rem;
-  align-items: center;
-  padding: 1rem 0;
-  border-bottom: 1px solid var(--cds-border-subtle);
+.recordMeta,
+.emptyText {
+  color: var(--cds-text-secondary);
 }
 
-.recordRow:last-child {
-  border-bottom: 0;
+.recordMeta {
+  margin-top: 0.25rem;
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
 }
 
 .recordTitle {
@@ -235,11 +121,6 @@
   line-height: var(--cds-body-compact-02-line-height, 1.375);
 }
 
-.recordMeta {
-  margin-top: 0.25rem;
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
 .recordScore {
   color: var(--cds-text-primary);
   font-family: var(--cds-code-font-family, monospace);
@@ -250,7 +131,6 @@
 .problemReportList {
   display: grid;
   gap: 0.75rem;
-  margin-top: 1rem;
 }
 
 .problemReportItem {
@@ -269,76 +149,29 @@
   gap: 0.75rem;
 }
 
+.questionList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
 .errorText {
   margin: 1rem 0 0;
   color: var(--cds-text-error);
 }
 
 .emptyText {
-  margin: 1rem 0 0;
-}
-
-@media (max-width: 1056px) {
-  .summaryPanel,
-  .progressGrid {
-    grid-template-columns: 1fr;
-  }
-
-  .summaryMain,
-  .progressPanel {
-    border-right: 0;
-    border-bottom: 1px solid var(--cds-border-subtle);
-  }
-
-  .infoGrid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .infoCell:nth-child(2) {
-    border-right: 0;
-  }
-
-  .infoCell:nth-child(n + 3) {
-    border-top: 1px solid var(--cds-border-subtle);
-  }
+  margin: 0;
 }
 
 @media (max-width: 672px) {
-  .dashboard {
-    padding: 0.75rem;
-  }
-
-  .summaryMain,
-  .actionPanel,
-  .infoCell,
-  .progressPanel,
-  .rulesPanel {
+  .tabContent {
     padding: 1rem;
   }
 
-  .infoGrid,
-  .statGrid {
-    grid-template-columns: 1fr;
-  }
-
-  .infoCell {
-    border-right: 0;
-    border-top: 1px solid var(--cds-border-subtle);
-  }
-
-  .infoCell:first-child {
-    border-top: 0;
-  }
-
-  .recordRow {
-    grid-template-columns: 1fr;
-  }
-
-  .recordScore {
-    white-space: normal;
-  }
-
+  .inlineRecordsHeader,
   .problemReportItem {
+    display: grid;
     grid-template-columns: 1fr;
   }
 
@@ -346,8 +179,7 @@
     justify-content: flex-start;
   }
 
-  .inlineRecordsHeader {
-    display: grid;
+  .recordScore {
+    white-space: normal;
   }
-
 }
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
index 568ed566..4c46a008 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
@@ -9,6 +9,7 @@ import {
   getExamResults,
   getMyExamAnswers,
 } from "@/infrastructure/api/repositories/examAnswers.repository";
+import { getExamDashboardSummary } from "@/infrastructure/api/repositories/exam.repository";
 import StudentContestDashboard from "./StudentContestDashboardView";
 
 vi.mock("react-i18next", () => ({
@@ -70,10 +71,30 @@ vi.mock("@carbon/react", () => ({
   SelectItem: ({ value, text }: { value: string; text: string }) => (
     <option value={value}>{text}</option>
   ),
+  SkeletonPlaceholder: () => <div data-testid="skeleton-placeholder" />,
+  Tab: ({ children }: { children: ReactNode }) => (
+    <button type="button">{children}</button>
+  ),
+  TabList: ({ children }: { children: ReactNode }) => (
+    <div role="tablist">{children}</div>
+  ),
+  TabPanel: ({ children }: { children: ReactNode }) => (
+    <div role="tabpanel">{children}</div>
+  ),
+  TabPanels: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  Tabs: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   Tag: ({ children }: { children: ReactNode }) => <span>{children}</span>,
   TextInput: () => <input aria-label="text input" />,
 }));
 
+vi.mock("@carbon/charts-react", () => ({
+  LollipopChart: () => <div data-testid="score-distribution-chart" />,
+}));
+
+vi.mock("@/shared/ui/theme/ThemeContext", () => ({
+  useTheme: () => ({ theme: "white" }),
+}));
+
 vi.mock("@carbon/icons-react", () => {
   const Icon = () => <span aria-hidden="true" />;
   return {
@@ -93,37 +114,6 @@ vi.mock("@/shared/ui/markdown/MarkdownRenderer", () => ({
   default: ({ children }: { children: string }) => <div>{children}</div>,
 }));
 
-vi.mock("@/features/contest/components/exam/PaperQuestionOverviewTable", () => ({
-  default: ({
-    rows,
-    showScore,
-    showFeedback,
-  }: {
-    rows: Array<{
-      id: string;
-      index: number;
-      prompt: string;
-      scoreDisplay?: string;
-      feedbackDisplay?: string;
-      statusLabel?: string;
-    }>;
-    showScore?: boolean;
-    showFeedback?: boolean;
-  }) => (
-    <div>
-      {rows.map((row) => (
-        <div key={row.id}>
-          <span>{row.index}</span>
-          <span>{row.prompt}</span>
-          <span>{row.statusLabel}</span>
-          {showScore ? <span>{row.scoreDisplay}</span> : null}
-          {showFeedback ? <span>{row.feedbackDisplay}</span> : null}
-        </div>
-      ))}
-    </div>
-  ),
-}));
-
 vi.mock("@/features/contest/components/modals/ContestRegistrationModal", () => ({
   ContestRegistrationModal: ({ open }: { open: boolean }) =>
     open ? <div>registration modal</div> : null,
@@ -142,6 +132,38 @@ vi.mock("@/infrastructure/api/repositories/examAnswers.repository", () => ({
   getMyExamAnswers: vi.fn(async () => []),
 }));
 
+vi.mock("@/infrastructure/api/repositories/exam.repository", () => ({
+  getExamDashboardSummary: vi.fn(async () => ({
+    contest: {
+      id: "contest-1",
+      name: "測試競賽",
+      course: "",
+      contest_type: "paper_exam",
+      participant_count: 2,
+      completed_count: 2,
+      results_published: true,
+    },
+    summary: {
+      average_score: 75,
+      median_score: 75,
+      max_total_score: 100,
+    },
+    score_distribution: [
+      { range_label: "0-9%", count: 0 },
+      { range_label: "10-19%", count: 0 },
+      { range_label: "20-29%", count: 0 },
+      { range_label: "30-39%", count: 0 },
+      { range_label: "40-49%", count: 0 },
+      { range_label: "50-59%", count: 1 },
+      { range_label: "60-69%", count: 0 },
+      { range_label: "70-79%", count: 1 },
+      { range_label: "80-89%", count: 0 },
+      { range_label: "90-100%", count: 0 },
+    ],
+    questions: [],
+  })),
+}));
+
 const createContest = (
   overrides: Partial<ContestDetail> = {},
 ): ContestDetail =>
@@ -217,14 +239,14 @@ describe("StudentContestDashboard", () => {
     );
 
     expect(screen.getByRole("main", { name: "學生競賽首頁" })).toBeInTheDocument();
-    expect(screen.getByText("考試前")).toBeInTheDocument();
+    expect(screen.getByText("總時長")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: /加入競賽/ })).toBeInTheDocument();
   });
 
   it("does not show answer records before the participant starts", () => {
     renderDashboard(createContest());
 
-    expect(screen.getByText("考試前")).toBeInTheDocument();
+    expect(screen.getByText("總時長")).toBeInTheDocument();
     expect(screen.getByText("尚無作答紀錄。")).toBeInTheDocument();
     expect(screen.queryByText("Two Sum")).not.toBeInTheDocument();
   });
@@ -249,9 +271,11 @@ describe("StudentContestDashboard", () => {
       }),
     );
 
-    expect(screen.getByText("考試中")).toBeInTheDocument();
+    expect(screen.getByText("總時長")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: /回到作答/ })).toBeInTheDocument();
-    expect(screen.getByText("1 / 1")).toBeInTheDocument();
+    expect(screen.getByText("100%")).toBeInTheDocument();
+    expect(screen.queryByText("已完成")).not.toBeInTheDocument();
+    expect(screen.queryByText("已嘗試")).not.toBeInTheDocument();
   });
 
   it("renders in-exam paper progress from autosaved answers", async () => {
@@ -303,27 +327,50 @@ describe("StudentContestDashboard", () => {
     );
 
     expect(await screen.findByText("目前作答狀況")).toBeInTheDocument();
-    expect(await screen.findByText("1 / 2")).toBeInTheDocument();
+    expect(await screen.findByText("50%")).toBeInTheDocument();
+    expect(screen.queryByText("已完成")).not.toBeInTheDocument();
+    expect(screen.queryByText("已嘗試")).not.toBeInTheDocument();
     expect(screen.getByText("已作答")).toBeInTheDocument();
     expect(screen.getByText("未作答")).toBeInTheDocument();
+    expect(screen.getByText("draft answer")).toBeInTheDocument();
     expect(getMyExamAnswers).toHaveBeenCalledWith("contest-1");
     expect(getExamResults).not.toHaveBeenCalled();
   });
 
-  it("renders post-exam answer report without extra score panels", () => {
+  it("renders post-exam answer report and score distribution", async () => {
     renderDashboard(
       createContest({
+        contestType: "paper_exam",
         startTime: "2000-05-05T10:00:00.000Z",
         endTime: "2000-05-05T12:00:00.000Z",
         examStatus: "submitted",
         resultsPublished: true,
+        problems: [],
       }),
     );
 
-    expect(screen.getByText("考試後")).toBeInTheDocument();
-    expect(screen.queryByText("分數分佈")).not.toBeInTheDocument();
+    expect(screen.getByText("考試成績")).toBeInTheDocument();
     expect(screen.queryByText("成績單與分數分佈")).not.toBeInTheDocument();
-    expect(screen.getByRole("button", { name: /下載作答報告/ })).toBeInTheDocument();
+    expect(screen.queryByText("作答狀態")).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /下載成績單/ })).toBeInTheDocument();
+    expect(await screen.findByText("成績分布")).toBeInTheDocument();
+    expect(screen.getByText("平均 75.0 / 100")).toBeInTheDocument();
+    expect(screen.getByTestId("score-distribution-chart")).toBeInTheDocument();
+    expect(getExamDashboardSummary).toHaveBeenCalledWith("contest-1");
+  });
+
+  it("shows rejoin action after submission when multiple joins are allowed", () => {
+    renderDashboard(
+      createContest({
+        startTime: "2000-05-05T10:00:00.000Z",
+        endTime: "2099-05-05T12:00:00.000Z",
+        examStatus: "submitted",
+        allowMultipleJoins: true,
+      }),
+    );
+
+    expect(screen.getByRole("button", { name: /下載作答證明/ })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /重新加入/ })).toBeInTheDocument();
   });
 
   it("renders published paper exam score from answer results", async () => {
@@ -370,8 +417,7 @@ describe("StudentContestDashboard", () => {
 
     expect(await screen.findAllByText("8 / 10")).not.toHaveLength(0);
     expect(screen.getByText("考試成績")).toBeInTheDocument();
-    expect(screen.getByText("8")).toBeInTheDocument();
-    expect(screen.queryByText("Good")).not.toBeInTheDocument();
+    expect(screen.getByText("Good")).toBeInTheDocument();
     expect(screen.getByText("作答紀錄與成績")).toBeInTheDocument();
     expect(screen.queryByText("相關頁面")).not.toBeInTheDocument();
   });
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
index 158a84a9..95dbf984 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
@@ -1,10 +1,19 @@
 import { useEffect, useMemo, useState } from "react";
+import { ScaleTypes } from "@carbon/charts";
+import { LollipopChart } from "@carbon/charts-react";
+import "@carbon/charts-react/styles.css";
 import {
   Button,
   InlineNotification,
   Modal,
   Select,
   SelectItem,
+  SkeletonPlaceholder,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
   Tag,
 } from "@carbon/react";
 import {
@@ -23,6 +32,7 @@ import { useTranslation } from "react-i18next";
 import type {
   ContestDetail,
   ExamQuestion,
+  ExamQuestionType,
 } from "@/core/entities/contest.entity";
 import {
   getContestState,
@@ -30,6 +40,10 @@ import {
   getContestStateLabel,
 } from "@/core/entities/contest.entity";
 import { downloadMyReport } from "@/infrastructure/api/repositories";
+import {
+  getExamDashboardSummary,
+  type ExamDashboardSummaryDto,
+} from "@/infrastructure/api/repositories/exam.repository";
 import { getExamQuestions } from "@/infrastructure/api/repositories/examQuestions.repository";
 import {
   getExamResults,
@@ -38,12 +52,20 @@ import {
   type ExamAnswerDetail,
 } from "@/infrastructure/api/repositories/examAnswers.repository";
 import MarkdownRenderer from "@/shared/ui/markdown/MarkdownRenderer";
+import { useTheme } from "@/shared/ui/theme/ThemeContext";
 import { formatDate } from "@/shared/utils/format";
 import { useInterval } from "@/shared/hooks/useInterval";
-import PaperQuestionOverviewTable, {
-  type PaperQuestionOverviewRow,
-} from "@/features/contest/components/exam/PaperQuestionOverviewTable";
+import {
+  BlockHeader,
+  DashboardBlock,
+  DashboardContainer,
+  DashboardPage,
+  MetricBlock,
+  TimeDisplay,
+} from "@/shared/components/dashboard";
 import { ContestRegistrationModal } from "@/features/contest/components/modals/ContestRegistrationModal";
+import PaperQuestionReportCard from "@/features/contest/components/exam/PaperQuestionReportCard";
+import { getMarkedQuestionIds } from "@/features/contest/screens/paperExam/hooks";
 import {
   buildCodingProgressSummary,
   formatCompactDuration,
@@ -90,44 +112,33 @@ const QUESTION_TYPE_LABEL: Record<string, string> = {
   essay: "申論題",
 };
 
-const getPhaseCopy = (
-  phase: StudentContestPhase,
-  resultsPublished: boolean,
-): { title: string; description: string } => {
-  if (phase === "before") {
-    return {
-      title: "考試前",
-      description: "確認報名狀態、規則與監控設定，等待考試開始。",
-    };
-  }
-  if (phase === "during") {
-    return {
-      title: "考試中",
-      description: "追蹤作答進度與剩餘時間，必要時回到作答畫面。",
-    };
+const PASSING_SCORE_THRESHOLD_PERCENT = 60;
+
+const resolveCarbonChartTheme = (
+  theme: string,
+): "white" | "g10" | "g90" | "g100" => {
+  switch (theme) {
+    case "g10":
+    case "g90":
+    case "g100":
+    case "white":
+      return theme;
+    default:
+      return "white";
   }
-  return {
-    title: "考試後",
-    description: resultsPublished
-      ? "成績已發布，可查看作答紀錄與成績。"
-      : "作答已結束，成績尚未發布。",
-  };
 };
 
-const getExamStatusLabel = (contest: ContestDetail): string => {
-  switch (contest.examStatus) {
-    case "in_progress":
-      return "作答中";
-    case "paused":
-      return "待恢復";
-    case "locked":
-      return "已鎖定";
-    case "submitted":
-      return "已交卷";
-    case "not_started":
-    default:
-      return isParticipant(contest) ? "尚未開始" : "尚未加入";
-  }
+const getBucketUpperPercent = (label: string): number | null => {
+  const values = label.match(/\d+(?:\.\d+)?/g)?.map(Number) ?? [];
+  if (values.length === 0) return null;
+  return Math.max(...values);
+};
+
+const isFailingScoreBucket = (label: string) => {
+  const upperPercent = getBucketUpperPercent(label);
+  return (
+    upperPercent !== null && upperPercent < PASSING_SCORE_THRESHOLD_PERCENT
+  );
 };
 
 const getRemainingLabel = (
@@ -195,6 +206,7 @@ export default function StudentContestDashboard({
 }: StudentContestDashboardProps) {
   const { t } = useTranslation("contest");
   const { t: tc } = useTranslation("common");
+  const { theme } = useTheme();
   const [nowMs, setNowMs] = useState(() => Date.now());
   const [showRegisterModal, setShowRegisterModal] = useState(false);
   const [showEndConfirm, setShowEndConfirm] = useState(false);
@@ -204,10 +216,16 @@ export default function StudentContestDashboard({
   const [reportError, setReportError] = useState<string | null>(null);
   const [paperData, setPaperData] =
     useState<PaperExamDashboardData>(EMPTY_PAPER_DATA);
+  const [scoreSummary, setScoreSummary] =
+    useState<ExamDashboardSummaryDto | null>(null);
+  const [scoreSummaryLoading, setScoreSummaryLoading] = useState(false);
+  const [scoreSummaryError, setScoreSummaryError] = useState<string | null>(null);
   const [paperReloadKey, setPaperReloadKey] = useState(0);
+  const [markedQuestionIds, setMarkedQuestionIds] = useState<Set<string>>(
+    () => getMarkedQuestionIds(contest.id),
+  );
 
   const phase = resolveStudentContestPhase(contest, nowMs);
-  const phaseCopy = getPhaseCopy(phase, contest.resultsPublished);
   const participant = isParticipant(contest);
   const requiresPassword =
     contest.requiresPassword ?? contest.visibility === "private";
@@ -236,11 +254,13 @@ export default function StudentContestDashboard({
   useEffect(() => {
     if (!shouldLoadPaperData) {
       setPaperData(EMPTY_PAPER_DATA);
+      setMarkedQuestionIds(getMarkedQuestionIds(contest.id));
       return;
     }
 
     let cancelled = false;
     setPaperData((previous) => ({ ...previous, loading: true, error: null }));
+    setMarkedQuestionIds(getMarkedQuestionIds(contest.id));
     const load = async () => {
       const [questionsResult, answersResult] =
         await Promise.allSettled([
@@ -271,6 +291,7 @@ export default function StudentContestDashboard({
         answers,
         results,
       });
+      setMarkedQuestionIds(getMarkedQuestionIds(contest.id));
     };
     void load();
     return () => {
@@ -284,6 +305,48 @@ export default function StudentContestDashboard({
     shouldLoadPaperData,
   ]);
 
+  useEffect(() => {
+    if (
+      contest.contestType !== "paper_exam" ||
+      !participant ||
+      !contest.resultsPublished
+    ) {
+      setScoreSummary(null);
+      setScoreSummaryLoading(false);
+      setScoreSummaryError(null);
+      return;
+    }
+
+    let cancelled = false;
+    setScoreSummaryLoading(true);
+    setScoreSummaryError(null);
+    void (async () => {
+      try {
+        const summary = await getExamDashboardSummary(contest.id);
+        if (cancelled) return;
+        setScoreSummary(summary);
+      } catch (error) {
+        if (cancelled) return;
+        setScoreSummary(null);
+        setScoreSummaryError(
+          error instanceof Error ? error.message : "成績分布暫時無法載入",
+        );
+      } finally {
+        if (!cancelled) setScoreSummaryLoading(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    contest.contestType,
+    contest.id,
+    contest.resultsPublished,
+    participant,
+    paperReloadKey,
+  ]);
+
   const progressSummary = useMemo(() => {
     if (contest.contestType === "paper_exam") {
       return buildPaperProgressSummary(
@@ -311,6 +374,12 @@ export default function StudentContestDashboard({
   const canResumeExam = participant && examStatus === "paused";
   const canGoToAnswering = participant && examStatus === "in_progress";
   const canSubmitExam = participant && examStatus === "in_progress";
+  const canRestartSubmittedExam =
+    participant &&
+    contest.status === "published" &&
+    contestState !== "ended" &&
+    examStatus === "submitted" &&
+    contest.allowMultipleJoins;
   const scoreDisplay = contest.resultsPublished
     ? progressSummary.totalScore === null
       ? "成績已發布"
@@ -325,6 +394,65 @@ export default function StudentContestDashboard({
             : scoreDisplay,
       }
     : remaining;
+  const reportDownloadLabel = contest.resultsPublished
+    ? "下載成績單"
+    : "下載作答證明";
+  const startMs = Date.parse(contest.startTime);
+  const endMs = Date.parse(contest.endTime);
+  const durationDisplay =
+    Number.isFinite(startMs) && Number.isFinite(endMs)
+      ? formatCompactDuration(endMs - startMs)
+      : "-";
+  const chartTheme = resolveCarbonChartTheme(theme);
+  const scoreDistributionData = useMemo(
+    () =>
+      scoreSummary
+        ? scoreSummary.score_distribution.map((bucket) => ({
+            group: bucket.range_label,
+            value: bucket.count,
+          }))
+        : [],
+    [scoreSummary],
+  );
+  const hasScoreDistributionData = scoreDistributionData.some(
+    (item) => item.value > 0,
+  );
+  const scoreDistributionOptions = useMemo(
+    () => ({
+      title: "",
+      height: "180px",
+      theme: chartTheme,
+      toolbar: { enabled: false },
+      legend: { enabled: false },
+      axes: {
+        left: {
+          mapsTo: "group",
+          scaleType: ScaleTypes.LABELS,
+          visible: false,
+        },
+        bottom: {
+          mapsTo: "value",
+          scaleType: ScaleTypes.LINEAR,
+          visible: false,
+        },
+      },
+      grid: {
+        x: { enabled: false },
+        y: { enabled: false },
+      },
+      color: {
+        scale: (scoreSummary?.score_distribution ?? []).reduce<
+          Record<string, string>
+        >((acc, bucket) => {
+          acc[bucket.range_label] = isFailingScoreBucket(bucket.range_label)
+            ? "var(--cds-support-error)"
+            : "var(--cds-link-primary)";
+          return acc;
+        }, {}),
+      },
+    }),
+    [chartTheme, scoreSummary?.score_distribution],
+  );
 
   const handleRegisterSubmit = (data: { password?: string }) => {
     setShowRegisterModal(false);
@@ -370,15 +498,22 @@ export default function StudentContestDashboard({
         </Button>
       );
     }
-    if (contest.examStatus === "submitted") {
+    if (examStatus === "submitted") {
       return (
-        <Button
-          kind="tertiary"
-          renderIcon={Document}
-          onClick={() => setShowReportModal(true)}
-        >
-          下載作答報告
-        </Button>
+        <>
+          <Button
+            kind="tertiary"
+            renderIcon={Document}
+            onClick={() => setShowReportModal(true)}
+          >
+            {reportDownloadLabel}
+          </Button>
+          {canRestartSubmittedExam ? (
+            <Button renderIcon={Play} onClick={onStartExam}>
+              重新加入
+            </Button>
+          ) : null}
+        </>
       );
     }
     return (
@@ -452,92 +587,267 @@ export default function StudentContestDashboard({
     const answerMap = new Map(
       paperData.answers.map((answer) => [String(answer.questionId), answer]),
     );
-    const rows: PaperQuestionOverviewRow[] = paperData.questions.map(
-      (question, index) => {
-        const result = resultMap.get(String(question.id));
-        const answer = answerMap.get(String(question.id));
-        const answered = !!result || !!answer;
-        const questionType =
-          result?.questionType ??
-          result?.questionSnapshot?.questionType ??
-          question.questionType;
-        const maxScore =
-          question.score ?? result?.maxScore ?? result?.questionSnapshot?.score ?? 0;
-        const status =
-          !answered
-            ? { label: "未作答", tone: "warm-gray" as const }
-            : !contest.resultsPublished
-              ? { label: "已作答", tone: "cool-gray" as const }
-            : result?.isCorrect === true
-                ? { label: "正確", tone: "green" as const }
-                : result?.isCorrect === false
-                  ? (result?.score ?? 0) > 0
-                    ? { label: "部分得分", tone: "cyan" as const }
-                    : { label: "未得分", tone: "red" as const }
-                  : { label: result?.gradedAt ? "已批改" : "待批改", tone: "warm-gray" as const };
-
-        return {
-          id: String(question.id),
-          index: index + 1,
-          prompt:
+
+    return (
+      <div className={styles.questionList}>
+        {paperData.questions.map((question, index) => {
+          const result = resultMap.get(String(question.id));
+          const answer = answerMap.get(String(question.id));
+          const marked = markedQuestionIds.has(String(question.id));
+          const answerPayload = result?.answer ?? answer?.answer;
+          const answered = !!answerPayload;
+          const questionType = (
+            result?.questionType ??
+            result?.questionSnapshot?.questionType ??
+            question.questionType
+          ) as ExamQuestionType;
+          const maxScore =
+            question.score ?? result?.maxScore ?? result?.questionSnapshot?.score ?? 0;
+          const status =
+            marked
+              ? {
+                  label: "已標記",
+                  tone: "warm-gray" as const,
+                  emphasis: "warning" as const,
+                }
+              : !answered
+              ? { label: "未作答", tone: "warm-gray" as const }
+              : !contest.resultsPublished
+                ? {
+                    label: "已作答",
+                    tone: "cool-gray" as const,
+                  }
+                : result?.isCorrect === true
+                  ? { label: "正確", tone: "green" as const }
+                  : result?.isCorrect === false
+                    ? (result?.score ?? 0) > 0
+                      ? { label: "部分得分", tone: "cyan" as const }
+                      : { label: "未得分", tone: "red" as const }
+                    : {
+                        label: result?.gradedAt ? "已批改" : "待批改",
+                        tone: "warm-gray" as const,
+                      };
+          const prompt =
             result?.questionPrompt ??
             result?.questionSnapshot?.prompt ??
-            question.prompt,
-          typeLabel: t(
-            `common:questionType.label.${questionType}`,
-            QUESTION_TYPE_LABEL[questionType] ?? questionType,
-          ),
-          maxScore,
-          scoreDisplay: contest.resultsPublished
-            ? String(result?.score ?? 0)
-            : result
-              ? "已作答"
-              : "-",
-          statusLabel: status.label,
-          statusTone: status.tone,
-        };
-      },
-    );
+            question.prompt;
 
-    return (
-      <PaperQuestionOverviewTable
-        rows={rows}
-        showScore={contest.resultsPublished}
-        showFeedback={false}
-      />
+          return (
+            <PaperQuestionReportCard
+              key={question.id}
+              questionId={String(question.id)}
+              index={index + 1}
+              questionType={questionType}
+              typeLabel={t(
+                `common:questionType.label.${questionType}`,
+                QUESTION_TYPE_LABEL[questionType] ?? questionType,
+              )}
+              prompt={prompt}
+              options={question.options}
+              answer={answerPayload ?? {}}
+              statusLabel={status.label}
+              statusTone={status.tone}
+              statusEmphasis={status.emphasis}
+              showGrading={contest.resultsPublished}
+              score={result?.score}
+              maxScore={maxScore}
+              gradedByUsername={result?.gradedByUsername}
+              feedback={result?.feedback}
+              correctAnswer={
+                result?.questionSnapshot?.correctAnswer ?? question.correctAnswer
+              }
+              explanation={
+                result?.questionExplanation ??
+                result?.questionSnapshot?.explanation ??
+                question.explanation
+              }
+            />
+          );
+        })}
+      </div>
     );
   };
 
+  const tagRow = (
+    <div className={styles.tagRow}>
+      <Tag type={getContestStateColor(contestState)}>
+        {getContestStateLabel(contestState)}
+      </Tag>
+      <Tag type={participant ? "green" : "gray"}>
+        {participant ? "已加入" : "未加入"}
+      </Tag>
+      {contest.cheatDetectionEnabled ? <Tag type="red">監控中</Tag> : null}
+    </div>
+  );
+
   return (
-    <main className={styles.root} aria-label="學生競賽首頁">
-      <div className={styles.dashboard}>
-        <section className={styles.summaryPanel} aria-label="競賽狀態">
-          <div className={styles.summaryMain}>
-            <div className={styles.titleRow}>
-              <h1 className={styles.title}>{contest.name}</h1>
-              <Tag type={getContestStateColor(contestState)}>
-                {getContestStateLabel(contestState)}
-              </Tag>
-              <Tag type={participant ? "green" : "gray"}>
-                {participant ? "已加入" : "未加入"}
-              </Tag>
-              {contest.cheatDetectionEnabled ? (
-                <Tag type="red">監控中</Tag>
-              ) : null}
+    <DashboardPage ariaLabel="學生競賽首頁">
+      <DashboardContainer layout="split" bordered dividers="auto">
+        <DashboardContainer layout="stack" dividers="auto" ariaLabel="競賽主要內容">
+          <DashboardBlock>
+            <BlockHeader
+              titleSize="page"
+              title={contest.name}
+              description={tagRow}
+              actions={
+                <Button
+                  kind="ghost"
+                  renderIcon={Renew}
+                  onClick={() => {
+                    setPaperReloadKey((value) => value + 1);
+                    void onRefreshContest?.();
+                  }}
+                >
+                  重新整理
+                </Button>
+              }
+            />
+          </DashboardBlock>
+
+          <DashboardContainer
+            layout="grid"
+            columns={3}
+            dividers="auto"
+            ariaLabel="競賽資訊"
+          >
+            <DashboardBlock>
+              <MetricBlock
+                label="開始時間"
+                value={formatDate(contest.startTime, { includeSeconds: false })}
+              />
+            </DashboardBlock>
+            <DashboardBlock>
+              <MetricBlock
+                label="截止時間"
+                value={formatDate(contest.endTime, { includeSeconds: false })}
+              />
+            </DashboardBlock>
+            <DashboardBlock>
+              <MetricBlock label="總時長" value={durationDisplay} />
+            </DashboardBlock>
+          </DashboardContainer>
+
+          <DashboardBlock padding="flush">
+            <Tabs>
+              <TabList aria-label="競賽資訊切換">
+                <Tab>規則說明</Tab>
+                <Tab>作答紀錄</Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel className={styles.tabPanel}>
+                  <div className={styles.tabContent}>
+                    <div className={styles.sectionHeader}>
+                      <div>
+                        <h3 className={styles.inlineRecordsTitle}>規則說明</h3>
+                        <p className={styles.sectionDescription}>
+                          {requiresPassword
+                            ? "此競賽需要密碼。"
+                            : "此競賽不需要密碼。"}
+                        </p>
+                      </div>
+                      {contest.cheatDetectionEnabled ? (
+                        <WarningAlt size={20} className={styles.warningIcon} />
+                      ) : (
+                        <Checkmark size={20} className={styles.successIcon} />
+                      )}
+                    </div>
+                    {contest.cheatDetectionEnabled ? (
+                      <InlineNotification
+                        kind="warning"
+                        lowContrast
+                        hideCloseButton
+                        title="已啟用監控"
+                        subtitle="進入作答後會啟用全螢幕、分頁切換與裝置監控。"
+                      />
+                    ) : null}
+                    {contest.description ? (
+                      <div className={styles.rulesContent}>
+                        <MarkdownRenderer>{contest.description}</MarkdownRenderer>
+                      </div>
+                    ) : null}
+                    {contest.rules ? (
+                      <div className={styles.rulesContent}>
+                        <MarkdownRenderer>{contest.rules}</MarkdownRenderer>
+                      </div>
+                    ) : (
+                      <p className={styles.emptyText}>沒有額外規則。</p>
+                    )}
+                  </div>
+                </TabPanel>
+                <TabPanel className={styles.tabPanel}>
+                  <div className={styles.tabContent}>
+                    <div className={styles.inlineRecordsHeader}>
+                      <div>
+                        <h3 className={styles.inlineRecordsTitle}>
+                          {phase === "during"
+                            ? "目前作答狀況"
+                            : phase === "after" && contest.resultsPublished
+                              ? "作答紀錄與成績"
+                              : "作答紀錄"}
+                        </h3>
+                      </div>
+                    </div>
+                    {contest.contestType === "paper_exam"
+                      ? renderPaperRecords()
+                      : renderCodingRecords()}
+                  </div>
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </DashboardBlock>
+        </DashboardContainer>
+
+        <DashboardContainer layout="stack" dividers="auto" ariaLabel="競賽摘要">
+          <DashboardBlock>
+            <TimeDisplay
+              variant="countdown"
+              label={primaryStatus.label}
+              value={primaryStatus.value}
+            />
+          </DashboardBlock>
+
+          <DashboardBlock>
+            <div className={styles.chartHeader}>
+              <span className={styles.metricLabel}>完成率</span>
+              <strong className={styles.metricValue}>{progressPercent}%</strong>
             </div>
-            <p className={styles.phaseTitle}>{phaseCopy.title}</p>
-            <p className={styles.phaseDescription}>{phaseCopy.description}</p>
-            {contest.description ? (
-              <div className={styles.markdown}>
-                <MarkdownRenderer>{contest.description}</MarkdownRenderer>
-              </div>
-            ) : null}
-          </div>
-          <aside className={styles.actionPanel} aria-label="主要操作">
-            <div>
-              <p className={styles.metricLabel}>{primaryStatus.label}</p>
-              <p className={styles.timerValue}>{primaryStatus.value}</p>
+            <div className={styles.progressTrack} aria-hidden="true">
+              <div
+                className={styles.progressFill}
+                style={{ inlineSize: `${progressPercent}%` }}
+              />
             </div>
+          </DashboardBlock>
+
+          {contest.resultsPublished && contest.contestType === "paper_exam" ? (
+            <DashboardBlock ariaLabel="成績分布">
+              <div className={styles.chartHeader}>
+                <span className={styles.metricLabel}>成績分布</span>
+                {scoreSummary ? (
+                  <strong className={styles.metricValue}>
+                    平均 {scoreSummary.summary.average_score.toFixed(1)} /{" "}
+                    {scoreSummary.summary.max_total_score}
+                  </strong>
+                ) : null}
+              </div>
+              <div className={styles.scoreDistributionChart}>
+                {scoreSummaryLoading ? (
+                  <SkeletonPlaceholder className={styles.chartSkeleton} />
+                ) : scoreSummaryError ? (
+                  <p className={styles.emptyText}>{scoreSummaryError}</p>
+                ) : hasScoreDistributionData ? (
+                  <LollipopChart
+                    data={scoreDistributionData}
+                    options={scoreDistributionOptions}
+                  />
+                ) : (
+                  <p className={styles.emptyText}>尚無成績分布資料。</p>
+                )}
+              </div>
+            </DashboardBlock>
+          ) : null}
+
+          <DashboardBlock>
             <div className={styles.actionStack}>
               {renderPrimaryAction()}
               {canSubmitExam ? (
@@ -555,148 +865,9 @@ export default function StudentContestDashboard({
                 </Button>
               ) : null}
             </div>
-          </aside>
-        </section>
-
-        <section className={styles.infoGrid} aria-label="考試資訊">
-          <div className={styles.infoCell}>
-            <p className={styles.metricLabel}>開始時間</p>
-            <p className={styles.metricValue}>
-              {formatDate(contest.startTime, { includeSeconds: false })}
-            </p>
-          </div>
-          <div className={styles.infoCell}>
-            <p className={styles.metricLabel}>結束時間</p>
-            <p className={styles.metricValue}>
-              {formatDate(contest.endTime, { includeSeconds: false })}
-            </p>
-          </div>
-          <div className={styles.infoCell}>
-            <p className={styles.metricLabel}>作答狀態</p>
-            <p className={styles.metricValue}>{getExamStatusLabel(contest)}</p>
-          </div>
-          <div className={styles.infoCell}>
-            <p className={styles.metricLabel}>題目數</p>
-            <p className={styles.metricValue}>
-              {contest.contestType === "paper_exam"
-                ? paperData.questions.length || contest.examQuestionsCount
-                : progressSummary.totalItems}
-            </p>
-          </div>
-        </section>
-
-        <section className={styles.progressGrid} aria-label="作答狀況">
-          <div className={styles.progressPanel}>
-            <div className={styles.sectionHeader}>
-              <div>
-                <h2 className={styles.sectionTitle}>
-                  作答狀況
-                </h2>
-                <p className={styles.sectionDescription}>
-                  {phase === "before"
-                    ? "開始後會在這裡顯示作答進度。"
-                    : contest.resultsPublished
-                      ? "依已發布成績與題目資料計算。"
-                      : "依自動儲存答案與題目資料計算。"}
-                </p>
-              </div>
-              <Tag type="cool-gray">{progressPercent}%</Tag>
-            </div>
-            <div className={styles.progressTrack} aria-hidden="true">
-              <div
-                className={styles.progressFill}
-                style={{ inlineSize: `${progressPercent}%` }}
-              />
-            </div>
-            <div className={styles.statGrid}>
-              <div>
-                <p className={styles.metricLabel}>已完成</p>
-                <p className={styles.metricValue}>
-                  {progressSummary.completedItems} / {progressSummary.totalItems}
-                </p>
-              </div>
-              <div>
-                <p className={styles.metricLabel}>已嘗試</p>
-                <p className={styles.metricValue}>
-                  {progressSummary.attemptedItems}
-                </p>
-              </div>
-              <div>
-                <p className={styles.metricLabel}>目前分數</p>
-                <p className={styles.metricValue}>
-                  {progressSummary.totalScore === null
-                    ? scoreDisplay
-                    : `${progressSummary.totalScore} / ${progressSummary.maxScore}`}
-                </p>
-              </div>
-            </div>
-            <div className={styles.inlineRecordsPanel} aria-label="作答紀錄">
-              <div className={styles.inlineRecordsHeader}>
-                <div>
-                  <h3 className={styles.inlineRecordsTitle}>
-                    {phase === "during"
-                      ? "目前作答狀況"
-                      : phase === "after" && contest.resultsPublished
-                        ? "作答紀錄與成績"
-                        : "作答紀錄"}
-                  </h3>
-                  <p className={styles.sectionDescription}>
-                    {contest.resultsPublished
-                      ? "成績已發布，以下顯示目前可見的分數資料。"
-                      : phase === "during"
-                        ? "依自動儲存答案顯示，尚未代表已交卷。"
-                        : "成績尚未發布時，只顯示目前可見的作答狀態。"}
-                  </p>
-                </div>
-                <Button
-                  kind="ghost"
-                  renderIcon={Renew}
-                  onClick={() => {
-                    setPaperReloadKey((value) => value + 1);
-                    void onRefreshContest?.();
-                  }}
-                >
-                  重新整理
-                </Button>
-              </div>
-              {contest.contestType === "paper_exam"
-                ? renderPaperRecords()
-                : renderCodingRecords()}
-            </div>
-          </div>
-          <div className={styles.rulesPanel}>
-            <div className={styles.sectionHeader}>
-              <div>
-                <h2 className={styles.sectionTitle}>規則與監控</h2>
-                <p className={styles.sectionDescription}>
-                  {requiresPassword ? "此競賽需要密碼。" : "此競賽不需要密碼。"}
-                </p>
-              </div>
-              {contest.cheatDetectionEnabled ? (
-                <WarningAlt size={20} className={styles.warningIcon} />
-              ) : (
-                <Checkmark size={20} className={styles.successIcon} />
-              )}
-            </div>
-            {contest.cheatDetectionEnabled ? (
-              <InlineNotification
-                kind="warning"
-                lowContrast
-                hideCloseButton
-                title="已啟用監控"
-                subtitle="進入作答後會啟用全螢幕、分頁切換與裝置監控。"
-              />
-            ) : null}
-            {contest.rules ? (
-              <div className={styles.rulesContent}>
-                <MarkdownRenderer>{contest.rules}</MarkdownRenderer>
-              </div>
-            ) : (
-              <p className={styles.emptyText}>沒有額外規則。</p>
-            )}
-          </div>
-        </section>
-      </div>
+          </DashboardBlock>
+        </DashboardContainer>
+      </DashboardContainer>
 
       <ContestRegistrationModal
         open={showRegisterModal}
@@ -722,7 +893,7 @@ export default function StudentContestDashboard({
 
       <Modal
         open={showReportModal}
-        modalHeading="下載作答報告"
+        modalHeading={reportDownloadLabel}
         primaryButtonText={reportDownloading ? "準備中" : "下載"}
         secondaryButtonText={tc("button.cancel")}
         primaryButtonDisabled={reportDownloading}
@@ -755,6 +926,6 @@ export default function StudentContestDashboard({
           ) : null}
         </div>
       </Modal>
-    </main>
+    </DashboardPage>
   );
 }
diff --git a/frontend/src/shared/components/dashboard/BlockHeader.tsx b/frontend/src/shared/components/dashboard/BlockHeader.tsx
index b457c8a3..f7d59ae8 100644
--- a/frontend/src/shared/components/dashboard/BlockHeader.tsx
+++ b/frontend/src/shared/components/dashboard/BlockHeader.tsx
@@ -23,7 +23,7 @@ export function BlockHeader({
     <header className={styles.root}>
       <div className={styles.text}>
         <TitleComp as={titleAs}>{title}</TitleComp>
-        {description && <p className={styles.description}>{description}</p>}
+        {description && <div className={styles.description}>{description}</div>}
       </div>
       {actions && <div className={styles.actions}>{actions}</div>}
     </header>
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx b/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx
index 7a58e960..b22937b7 100644
--- a/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx
@@ -27,23 +27,24 @@ export function DashboardTabBar({
   );
   return (
     <div className={styles.root}>
-      <Tabs
-        selectedIndex={selectedIndex}
-        onChange={({ selectedIndex }: { selectedIndex: number }) => {
-          const next = tabs[selectedIndex];
-          if (next) onChange(next.id);
-        }}
-        className={styles.tabs}
-      >
-        <TabList aria-label={ariaLabel}>
-          {tabs.map((t) => (
-            <Tab key={t.id}>
-              {t.label}
-              {t.badge !== undefined && <> ({t.badge})</>}
-            </Tab>
-          ))}
-        </TabList>
-      </Tabs>
+      <div className={styles.tabs}>
+        <Tabs
+          selectedIndex={selectedIndex}
+          onChange={({ selectedIndex }: { selectedIndex: number }) => {
+            const next = tabs[selectedIndex];
+            if (next) onChange(next.id);
+          }}
+        >
+          <TabList aria-label={ariaLabel}>
+            {tabs.map((t) => (
+              <Tab key={t.id}>
+                {t.label}
+                {t.badge !== undefined && <> ({t.badge})</>}
+              </Tab>
+            ))}
+          </TabList>
+        </Tabs>
+      </div>
       {toolbar && <div className={styles.toolbar}>{toolbar}</div>}
     </div>
   );

From 86a5317201661a4012c119061a7a623d037ea30d Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 14:11:47 +0800
Subject: [PATCH 09/60] refactor(contest-admin): migrate overview header and
 exam status panel

AdminOverviewScreen renderContestHeader now uses DashboardBlock +
BlockHeader; the bespoke .contestHeader / .dashboardTitleBlock /
.dashboardTitleRow / .dashboardDescription SCSS is gone.

AdminOverviewCommandCenter exam status summary now uses two
DashboardContainer grids (people-count and schedule) with MetricBlock
size=lg, plus a stacked DashboardBlock with TimeDisplay countdown for
the timeline progress. The hardcoded 1.5rem font sizes and the
.examStatusMatrix / .examStatusMetric / .examScheduleGrid /
.examScheduleItem / .examProgressTitle / .examProgressValue /
.examStatusPanel / .panelHeader rules are removed.

DashboardPage gains an opt-in fullBleed prop so admin pages can render
without the 1180px clamp.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../AdminOverviewCommandCenter.module.scss    | 110 +-----------
 .../admin/AdminOverviewCommandCenter.tsx      |  92 ++++++----
 .../panels/AdminOverviewScreen.module.scss    |  52 +-----
 .../admin/panels/AdminOverviewScreen.tsx      | 166 +++++++++---------
 .../dashboard/DashboardPage.module.scss       |   9 +
 .../components/dashboard/DashboardPage.tsx    |  12 +-
 6 files changed, 167 insertions(+), 274 deletions(-)

diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
index b7082b35..dc019495 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
@@ -16,68 +16,10 @@
   border-top: 1px solid var(--cds-border-subtle);
 }
 
-.examStatusPanel {
-  display: grid;
-  border-bottom: 1px solid var(--cds-border-subtle);
-}
-
-.examStatusMatrix {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  border-bottom: 1px solid var(--cds-border-subtle);
-}
-
-.examStatusMetric {
-  display: grid;
-  gap: 0.375rem;
-  align-content: center;
-  min-height: 6.25rem;
-  padding: 1.25rem 1.5rem;
-  border-right: 1px solid var(--cds-border-subtle);
-}
-
-.examStatusMetric:last-child {
-  border-right: 0;
-}
-
-.examStatusMetric span,
-.examScheduleItem span {
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
-.examStatusMetric strong {
-  color: var(--cds-text-primary);
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.15;
-}
-
-.examProgressBlock {
-  display: grid;
-  gap: 0.875rem;
-  padding: 1.25rem 1.5rem 1.5rem;
-}
-
 .examProgressHeader {
   display: grid;
   gap: 0.5rem;
-}
-
-.examProgressTitle {
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
-.examProgressValue {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--cds-text-primary);
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.15;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  margin-bottom: 0.875rem;
 }
 
 .rightPanelProgressBar :global(.cds--progress-bar__track),
@@ -85,56 +27,6 @@
   height: 0.5rem;
 }
 
-.examScheduleGrid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  border-bottom: 1px solid var(--cds-border-subtle);
-}
-
-.examScheduleItem {
-  display: grid;
-  gap: 0.25rem;
-  align-content: center;
-  min-width: 0;
-  min-height: 5rem;
-  padding: 1.25rem 1.5rem;
-  border-right: 1px solid var(--cds-border-subtle);
-}
-
-.examScheduleItem:last-child {
-  border-right: 0;
-}
-
-.examScheduleItem strong {
-  overflow: visible;
-  color: var(--cds-text-primary);
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.15;
-  white-space: pre-line;
-}
-
-.panelHeader {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.panelHeader h3 {
-  margin: 0;
-  color: var(--cds-text-primary);
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.panelHeader p {
-  margin: 0.25rem 0 0;
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
 .panelGrid {
   border: 1px solid var(--cds-border-subtle);
 }
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
index ff35fb1c..f7fe3afa 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
@@ -70,6 +70,13 @@ import {
 } from "@/infrastructure/api/repositories";
 import { useToast } from "@/shared/contexts/ToastContext";
 import { ConfirmModal, useConfirmModal } from "@/shared/ui/modal";
+import {
+  BlockHeader,
+  DashboardBlock,
+  DashboardContainer,
+  MetricBlock,
+  TimeDisplay,
+} from "@/shared/components/dashboard";
 import styles from "./AdminOverviewCommandCenter.module.scss";
 
 interface AdminOverviewCommandCenterProps {
@@ -666,47 +673,58 @@ export default function AdminOverviewCommandCenter({
     data.timeline.endDateTimeLabel,
   );
   const examStatusSummary = (
-    <section className={styles.examStatusPanel} aria-label="考試狀態摘要">
-      <div className={styles.examStatusMatrix}>
-        <div className={styles.examStatusMetric}>
-          <span>考試人數</span>
-          <strong>{studentParticipants.length}</strong>
-        </div>
-        <div className={styles.examStatusMetric}>
-          <span>在線人數</span>
-          <strong>{liveStudentCount}</strong>
-        </div>
-      </div>
-      <div className={styles.examScheduleGrid} aria-label="考試時間">
-        <div className={styles.examScheduleItem}>
-          <span>開始時間</span>
-          <strong>{scheduleLabels.start}</strong>
-        </div>
-        <div className={styles.examScheduleItem}>
-          <span>結束時間</span>
-          <strong>{scheduleLabels.end}</strong>
-        </div>
-      </div>
-      <div className={styles.examProgressBlock}>
+    <DashboardContainer
+      layout="stack"
+      dividers="auto"
+      ariaLabel="考試狀態摘要"
+    >
+      <DashboardContainer layout="grid" columns={2} dividers="auto">
+        <DashboardBlock>
+          <MetricBlock
+            label="考試人數"
+            value={studentParticipants.length}
+            size="lg"
+          />
+        </DashboardBlock>
+        <DashboardBlock>
+          <MetricBlock label="在線人數" value={liveStudentCount} size="lg" />
+        </DashboardBlock>
+      </DashboardContainer>
+      <DashboardContainer
+        layout="grid"
+        columns={2}
+        dividers="auto"
+        ariaLabel="考試時間"
+      >
+        <DashboardBlock>
+          <MetricBlock
+            label="開始時間"
+            value={scheduleLabels.start}
+            size="lg"
+          />
+        </DashboardBlock>
+        <DashboardBlock>
+          <MetricBlock label="結束時間" value={scheduleLabels.end} size="lg" />
+        </DashboardBlock>
+      </DashboardContainer>
+      <DashboardBlock>
         <div className={styles.examProgressHeader}>
-          <span className={styles.examProgressTitle}>倒數計時</span>
-          <strong className={styles.examProgressValue}>
-            {data.timeline.primaryTimeLabel}
-          </strong>
+          <TimeDisplay
+            variant="countdown"
+            label="倒數計時"
+            value={data.timeline.primaryTimeLabel}
+          />
         </div>
         <ProgressBar
-          label={t(
-            "adminOverview.widgets.timelineProgress",
-            "時間進度",
-          )}
+          label={t("adminOverview.widgets.timelineProgress", "時間進度")}
           hideLabel
           size="small"
           value={examProgressPercent}
           status={examProgressStatus}
           className={styles.rightPanelProgressBar}
         />
-      </div>
-    </section>
+      </DashboardBlock>
+    </DashboardContainer>
   );
   const selectedParticipant = selectedUserId
     ? participants.find((participant) => participant.userId === selectedUserId)
@@ -824,12 +842,10 @@ export default function AdminOverviewCommandCenter({
   );
   const participantPanel = (
     <div className={styles.drilldownPanel}>
-      <div className={styles.panelHeader}>
-        <div>
-          <h3>考生列表</h3>
-          <p>依異常程度排序，快速掃描考生狀態。</p>
-        </div>
-      </div>
+      <BlockHeader
+        title="考生列表"
+        description="依異常程度排序，快速掃描考生狀態。"
+      />
       {participantMetricTags}
       {participantContent}
     </div>
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss
index eede3886..22e84e07 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss
+++ b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss
@@ -15,60 +15,20 @@
   padding: 0;
 }
 
-.contestHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  min-height: 4.5rem;
-  padding: 0.875rem 1rem;
-}
-
-.dashboardTitleBlock {
+.headerMeta {
   display: grid;
-  gap: 0.5rem;
-  min-width: 0;
+  gap: 0.375rem;
 }
 
-.dashboardTitleRow {
-  display: flex;
+.headerTags {
+  display: inline-flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
-  align-items: center;
+  gap: 0.5rem;
 }
 
-.dashboardTitleRow h2 {
+.headerMeta p {
   margin: 0;
-  overflow-wrap: anywhere;
-  color: var(--cds-text-primary);
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1.25;
-}
-
-.dashboardDescription {
   max-width: 52rem;
-  margin: 0;
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
-.headerActions {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.125rem;
-  flex: 0 0 auto;
-}
-
-@media (max-width: 900px) {
-  .contestHeader {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .headerActions {
-    align-self: flex-end;
-  }
 }
 
 .publishSummary {
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
index 796c8a8d..956dbf1b 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
+++ b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
@@ -28,6 +28,10 @@ import { useGradingData } from "@/features/contest/screens/settings/grading";
 import { addContestParticipant, updateContest } from "@/infrastructure/api/repositories";
 import { exportContestResults } from "@/infrastructure/api/repositories/contestExports.repository";
 import { useToast } from "@/shared/contexts/ToastContext";
+import {
+  BlockHeader,
+  DashboardBlock,
+} from "@/shared/components/dashboard";
 import { buildAdminOverviewDashboard } from "./adminOverviewDashboard.model";
 import styles from "./AdminOverviewScreen.module.scss";
 
@@ -253,87 +257,91 @@ export default function AdminOverviewScreen({
       ? t("adminOverview.screen.contestType.paperExam", "考卷")
       : t("adminOverview.screen.contestType.coding", "Coding Test");
   const renderContestHeader = () => (
-    <section
-      className={styles.contestHeader}
-      aria-label={t("adminOverview.screen.contestInfoLabel", "競賽資訊")}
+    <DashboardBlock
+      padding="compact"
+      ariaLabel={t("adminOverview.screen.contestInfoLabel", "競賽資訊")}
     >
-      <div className={styles.dashboardTitleBlock}>
-        <div className={styles.dashboardTitleRow}>
-          <h2>{contest.name}</h2>
-          <Tag type={status.type} size="sm">
-            {status.label}
-          </Tag>
-          <Tag type="cool-gray" size="sm">
-            {contestTypeLabel}
-          </Tag>
-        </div>
-        {contest.description ? (
-          <p className={styles.dashboardDescription}>{contest.description}</p>
-        ) : null}
-      </div>
-      <div className={styles.headerActions}>
-        <Button
-          kind="ghost"
-          hasIconOnly
-          renderIcon={Settings}
-          iconDescription={t(
-            "adminOverview.screen.actions.settings",
-            "競賽設定",
-          )}
-          onClick={openSettings}
-        />
-        <Button
-          kind="ghost"
-          hasIconOnly
-          renderIcon={Launch}
-          iconDescription={t(
-            "adminOverview.screen.actions.contestHome",
-            "競賽主頁",
-          )}
-          disabled={!contestHomePath}
-          onClick={() => {
-            if (!contestHomePath) return;
-            window.open(contestHomePath, "_blank", "noopener,noreferrer");
-          }}
-        />
-        {classroomBound ? null : (
-          <Button
-            kind="ghost"
-            hasIconOnly
-            renderIcon={UserFollow}
-            iconDescription={t(
-              "adminOverview.screen.actions.addParticipant",
-              "新增參賽者",
+      <BlockHeader
+        title={contest.name}
+        description={
+          <div className={styles.headerMeta}>
+            <div className={styles.headerTags}>
+              <Tag type={status.type} size="sm">
+                {status.label}
+              </Tag>
+              <Tag type="cool-gray" size="sm">
+                {contestTypeLabel}
+              </Tag>
+            </div>
+            {contest.description ? <p>{contest.description}</p> : null}
+          </div>
+        }
+        actions={
+          <>
+            <Button
+              kind="ghost"
+              hasIconOnly
+              renderIcon={Settings}
+              iconDescription={t(
+                "adminOverview.screen.actions.settings",
+                "競賽設定",
+              )}
+              onClick={openSettings}
+            />
+            <Button
+              kind="ghost"
+              hasIconOnly
+              renderIcon={Launch}
+              iconDescription={t(
+                "adminOverview.screen.actions.contestHome",
+                "競賽主頁",
+              )}
+              disabled={!contestHomePath}
+              onClick={() => {
+                if (!contestHomePath) return;
+                window.open(contestHomePath, "_blank", "noopener,noreferrer");
+              }}
+            />
+            {classroomBound ? null : (
+              <Button
+                kind="ghost"
+                hasIconOnly
+                renderIcon={UserFollow}
+                iconDescription={t(
+                  "adminOverview.screen.actions.addParticipant",
+                  "新增參賽者",
+                )}
+                onClick={() => setAddParticipantOpen(true)}
+              />
             )}
-            onClick={() => setAddParticipantOpen(true)}
-          />
-        )}
-        <Button
-          kind="ghost"
-          hasIconOnly
-          renderIcon={Renew}
-          iconDescription={
-            refreshing
-              ? t("adminOverview.screen.actions.refreshing", "重新整理中")
-              : t("adminOverview.screen.actions.refresh", "重新整理")
-          }
-          disabled={refreshing}
-          onClick={() => void handleRefresh()}
-        />
-        <Button
-          kind="ghost"
-          hasIconOnly
-          renderIcon={Download}
-          iconDescription={
-            exporting
-              ? t("adminOverview.screen.actions.exporting", "匯出中")
-              : t("adminOverview.screen.actions.export", "匯出成績")
-          }
-          disabled={exporting || !contest.id}
-          onClick={() => void handleExport()}
-        />
-      </div>
-    </section>
+            <Button
+              kind="ghost"
+              hasIconOnly
+              renderIcon={Renew}
+              iconDescription={
+                refreshing
+                  ? t("adminOverview.screen.actions.refreshing", "重新整理中")
+                  : t("adminOverview.screen.actions.refresh", "重新整理")
+              }
+              disabled={refreshing}
+              onClick={() => void handleRefresh()}
+            />
+            <Button
+              kind="ghost"
+              hasIconOnly
+              renderIcon={Download}
+              iconDescription={
+                exporting
+                  ? t("adminOverview.screen.actions.exporting", "匯出中")
+                  : t("adminOverview.screen.actions.export", "匯出成績")
+              }
+              disabled={exporting || !contest.id}
+              onClick={() => void handleExport()}
+            />
+          </>
+        }
+      />
+    </DashboardBlock>
   );
 
   return (
diff --git a/frontend/src/shared/components/dashboard/DashboardPage.module.scss b/frontend/src/shared/components/dashboard/DashboardPage.module.scss
index bdcc99fa..812f28aa 100644
--- a/frontend/src/shared/components/dashboard/DashboardPage.module.scss
+++ b/frontend/src/shared/components/dashboard/DashboardPage.module.scss
@@ -11,8 +11,17 @@
   padding: 1rem;
 }
 
+.fullBleed {
+  max-width: none;
+  padding: 0;
+}
+
 @media (max-width: 672px) {
   .inner {
     padding: 0.75rem;
   }
+
+  .fullBleed {
+    padding: 0;
+  }
 }
diff --git a/frontend/src/shared/components/dashboard/DashboardPage.tsx b/frontend/src/shared/components/dashboard/DashboardPage.tsx
index 112d4681..63b55941 100644
--- a/frontend/src/shared/components/dashboard/DashboardPage.tsx
+++ b/frontend/src/shared/components/dashboard/DashboardPage.tsx
@@ -4,12 +4,20 @@ import styles from "./DashboardPage.module.scss";
 export interface DashboardPageProps {
   children: ReactNode;
   ariaLabel?: string;
+  fullBleed?: boolean;
 }
 
-export function DashboardPage({ children, ariaLabel }: DashboardPageProps) {
+export function DashboardPage({
+  children,
+  ariaLabel,
+  fullBleed = false,
+}: DashboardPageProps) {
+  const innerClassName = fullBleed
+    ? `${styles.inner} ${styles.fullBleed}`
+    : styles.inner;
   return (
     <main className={styles.root} aria-label={ariaLabel}>
-      <div className={styles.inner}>{children}</div>
+      <div className={innerClassName}>{children}</div>
     </main>
   );
 }

From 8bea7d851a13454867c755b03e72f6edb4ac1701 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 14:13:16 +0800
Subject: [PATCH 10/60] refactor(contest): use MetricBlock for hero start/end
 time pairs

ContestHero metadata block now composes two MetricBlock instances; the
ad-hoc .timeLabel / .timeValue SCSS rules are removed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../contest/components/layout/ContestHero.module.scss | 10 ----------
 .../contest/components/layout/ContestHero.tsx         | 11 +++--------
 2 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/frontend/src/features/contest/components/layout/ContestHero.module.scss b/frontend/src/features/contest/components/layout/ContestHero.module.scss
index 6676682c..2788f831 100644
--- a/frontend/src/features/contest/components/layout/ContestHero.module.scss
+++ b/frontend/src/features/contest/components/layout/ContestHero.module.scss
@@ -14,16 +14,6 @@
   color: var(--cds-text-secondary);
 }
 
-// ─── Metadata ───────────────────────────────────────────────
-.timeLabel {
-  margin-bottom: layout.$spacing-02;
-}
-
-.timeValue {
-  color: var(--cds-text-primary);
-  font-weight: 600;
-}
-
 // ─── Action rows ────────────────────────────────────────────
 .actionRow {
   display: flex;
diff --git a/frontend/src/features/contest/components/layout/ContestHero.tsx b/frontend/src/features/contest/components/layout/ContestHero.tsx
index d31ac6bd..23a44117 100644
--- a/frontend/src/features/contest/components/layout/ContestHero.tsx
+++ b/frontend/src/features/contest/components/layout/ContestHero.tsx
@@ -22,6 +22,7 @@ import { HeroBase } from "@/shared/layout/HeroBase";
 import { KpiCard } from "@/shared/ui/dataCard";
 import { downloadMyReport } from "@/infrastructure/api/repositories";
 import { useInterval } from "@/shared/hooks/useInterval";
+import { MetricBlock } from "@/shared/components/dashboard";
 import styles from "./ContestHero.module.scss";
 
 const MinimalProgressBar = ({
@@ -176,14 +177,8 @@ const ContestHero: React.FC<ContestHeroProps> = ({
 
   const metadata = (
     <>
-      <div>
-        <div className={styles.timeLabel}>{t("startTime")}</div>
-        <div className={styles.timeValue}>{formatDate(startTime)}</div>
-      </div>
-      <div>
-        <div className={styles.timeLabel}>{t("endTime")}</div>
-        <div className={styles.timeValue}>{formatDate(endTime)}</div>
-      </div>
+      <MetricBlock label={t("startTime")} value={formatDate(startTime)} />
+      <MetricBlock label={t("endTime")} value={formatDate(endTime)} />
     </>
   );
 

From 6123d98db2ad5301df78f2ceb788a47090815e01 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 14:14:49 +0800
Subject: [PATCH 11/60] feat(dashboard): add split proportions for main+aside
 layout

DashboardContainer split layout now accepts proportions="equal" |
"main-aside" | "aside-main". Student dashboard switches to
main-aside so the right summary rail clamps to 18-22rem instead of
sharing 50/50 with the main content. Mobile breakpoint still
collapses to a single column.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../StudentContestDashboardView.tsx           | 82 ++++++++++++++++++-
 .../dashboard/DashboardContainer.module.scss  | 27 ++++++
 .../dashboard/DashboardContainer.tsx          | 11 +++
 3 files changed, 118 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
index 95dbf984..38b10f33 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
@@ -30,6 +30,7 @@ import {
 import { useTranslation } from "react-i18next";
 
 import type {
+  ContestAnnouncement,
   ContestDetail,
   ExamQuestion,
   ExamQuestionType,
@@ -40,10 +41,12 @@ import {
   getContestStateLabel,
 } from "@/core/entities/contest.entity";
 import { downloadMyReport } from "@/infrastructure/api/repositories";
+import { getContestAnnouncements } from "@/infrastructure/api/repositories/contestAnnouncements.repository";
 import {
   getExamDashboardSummary,
   type ExamDashboardSummaryDto,
 } from "@/infrastructure/api/repositories/exam.repository";
+import { mapContestAnnouncementDto } from "@/infrastructure/mappers/contest.mapper";
 import { getExamQuestions } from "@/infrastructure/api/repositories/examQuestions.repository";
 import {
   getExamResults,
@@ -220,6 +223,9 @@ export default function StudentContestDashboard({
     useState<ExamDashboardSummaryDto | null>(null);
   const [scoreSummaryLoading, setScoreSummaryLoading] = useState(false);
   const [scoreSummaryError, setScoreSummaryError] = useState<string | null>(null);
+  const [announcements, setAnnouncements] = useState<ContestAnnouncement[]>([]);
+  const [announcementsLoading, setAnnouncementsLoading] = useState(true);
+  const [announcementsError, setAnnouncementsError] = useState<string | null>(null);
   const [paperReloadKey, setPaperReloadKey] = useState(0);
   const [markedQuestionIds, setMarkedQuestionIds] = useState<Set<string>>(
     () => getMarkedQuestionIds(contest.id),
@@ -305,6 +311,36 @@ export default function StudentContestDashboard({
     shouldLoadPaperData,
   ]);
 
+  useEffect(() => {
+    if (!contest.id) {
+      setAnnouncements([]);
+      return;
+    }
+
+    let cancelled = false;
+    setAnnouncementsLoading(true);
+    setAnnouncementsError(null);
+    void (async () => {
+      try {
+        const data = await getContestAnnouncements(contest.id);
+        if (cancelled) return;
+        setAnnouncements(data.map(mapContestAnnouncementDto));
+      } catch (error) {
+        if (cancelled) return;
+        setAnnouncements([]);
+        setAnnouncementsError(
+          error instanceof Error ? error.message : "公告暫時無法載入",
+        );
+      } finally {
+        if (!cancelled) setAnnouncementsLoading(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [contest.id, paperReloadKey]);
+
   useEffect(() => {
     if (
       contest.contestType !== "paper_exam" ||
@@ -668,6 +704,38 @@ export default function StudentContestDashboard({
     );
   };
 
+  const renderAnnouncements = () => {
+    if (announcementsLoading) {
+      return <p className={styles.emptyText}>載入公告中...</p>;
+    }
+    if (announcementsError) {
+      return <p className={styles.errorText}>{announcementsError}</p>;
+    }
+    if (!announcements.length) {
+      return <p className={styles.emptyText}>目前沒有公告。</p>;
+    }
+
+    return (
+      <div className={styles.announcementList}>
+        {announcements.map((announcement) => (
+          <article className={styles.announcementItem} key={announcement.id}>
+            <div className={styles.announcementHeader}>
+              <h3 className={styles.announcementTitle}>{announcement.title}</h3>
+              {announcement.createdAt ? (
+                <span className={styles.announcementMeta}>
+                  {formatDate(announcement.createdAt, { includeSeconds: false })}
+                </span>
+              ) : null}
+            </div>
+            <div className={styles.announcementContent}>
+              <MarkdownRenderer>{announcement.content}</MarkdownRenderer>
+            </div>
+          </article>
+        ))}
+      </div>
+    );
+  };
+
   const tagRow = (
     <div className={styles.tagRow}>
       <Tag type={getContestStateColor(contestState)}>
@@ -681,8 +749,13 @@ export default function StudentContestDashboard({
   );
 
   return (
-    <DashboardPage ariaLabel="學生競賽首頁">
-      <DashboardContainer layout="split" bordered dividers="auto">
+    <DashboardPage ariaLabel="學生競賽首頁" fullBleed>
+      <DashboardContainer
+        layout="split"
+        proportions="main-aside"
+        bordered
+        dividers="auto"
+      >
         <DashboardContainer layout="stack" dividers="auto" ariaLabel="競賽主要內容">
           <DashboardBlock>
             <BlockHeader
@@ -727,6 +800,11 @@ export default function StudentContestDashboard({
             </DashboardBlock>
           </DashboardContainer>
 
+          <DashboardBlock>
+            <BlockHeader title="公告" />
+            {renderAnnouncements()}
+          </DashboardBlock>
+
           <DashboardBlock padding="flush">
             <Tabs>
               <TabList aria-label="競賽資訊切換">
diff --git a/frontend/src/shared/components/dashboard/DashboardContainer.module.scss b/frontend/src/shared/components/dashboard/DashboardContainer.module.scss
index f05c4944..7e0e22ad 100644
--- a/frontend/src/shared/components/dashboard/DashboardContainer.module.scss
+++ b/frontend/src/shared/components/dashboard/DashboardContainer.module.scss
@@ -25,6 +25,26 @@
   min-width: 0;
 }
 
+// proportions: main-aside (主內容 fluid + 右側 18-22rem 側欄)
+.split.proportionsMainAside > *:first-child {
+  flex: 1 1 0;
+}
+
+.split.proportionsMainAside > *:last-child {
+  flex: 0 0 auto;
+  width: clamp(18rem, 24%, 22rem);
+}
+
+// proportions: aside-main (左側 sidebar + 主內容 fluid)
+.split.proportionsAsideMain > *:first-child {
+  flex: 0 0 auto;
+  width: clamp(18rem, 24%, 22rem);
+}
+
+.split.proportionsAsideMain > *:last-child {
+  flex: 1 1 0;
+}
+
 .split.dividers > *:not(:last-child) {
   border-right: 1px solid var(--cds-border-subtle);
 }
@@ -34,6 +54,13 @@
     flex-direction: column;
   }
 
+  .split > *,
+  .split.proportionsMainAside > *,
+  .split.proportionsAsideMain > * {
+    flex: 1 1 auto;
+    width: auto;
+  }
+
   .split.dividers > *:not(:last-child) {
     border-right: 0;
     border-bottom: 1px solid var(--cds-border-subtle);
diff --git a/frontend/src/shared/components/dashboard/DashboardContainer.tsx b/frontend/src/shared/components/dashboard/DashboardContainer.tsx
index 9ec946f3..1ad6cb9f 100644
--- a/frontend/src/shared/components/dashboard/DashboardContainer.tsx
+++ b/frontend/src/shared/components/dashboard/DashboardContainer.tsx
@@ -3,10 +3,12 @@ import styles from "./DashboardContainer.module.scss";
 
 type Layout = "stack" | "split" | "grid";
 type Columns = 2 | 3 | 4 | "auto";
+type Proportions = "equal" | "main-aside" | "aside-main";
 
 export interface DashboardContainerProps {
   layout: Layout;
   columns?: Columns;
+  proportions?: Proportions;
   dividers?: "auto" | "none";
   bordered?: boolean;
   children: ReactNode;
@@ -20,9 +22,15 @@ const COLS_CLASS: Record<Columns, string> = {
   auto: styles.gridColsAuto,
 };
 
+const PROPORTIONS_CLASS: Record<Exclude<Proportions, "equal">, string> = {
+  "main-aside": styles.proportionsMainAside,
+  "aside-main": styles.proportionsAsideMain,
+};
+
 export function DashboardContainer({
   layout,
   columns,
+  proportions = "equal",
   dividers = "none",
   bordered = false,
   children,
@@ -34,6 +42,9 @@ export function DashboardContainer({
     dividers === "auto" && styles.dividers,
     bordered && styles.bordered,
     layout === "grid" && columns && COLS_CLASS[columns],
+    layout === "split" &&
+      proportions !== "equal" &&
+      PROPORTIONS_CLASS[proportions],
   ]
     .filter(Boolean)
     .join(" ");

From dc3a6e57f0d566843781975c9dd2046ef763b93e Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 14:21:18 +0800
Subject: [PATCH 12/60] fix(contest): announcements use BlockHeader;
 DashboardPage fills viewport

Announcement items now compose BlockHeader instead of bespoke
.announcementHeader / .announcementTitle SCSS, so the title typography
matches the rest of the dashboard.

DashboardPage .root and .inner switch to flex-column with the inner
direct child stretched to fill remaining height. With fullBleed, the
bordered split container therefore reaches the bottom of the viewport
when content is short, instead of leaving a dark band underneath.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../StudentContestDashboard.module.scss       | 29 +++++++++++++++
 .../StudentContestDashboardView.test.tsx      | 36 +++++++++++++++++--
 .../StudentContestDashboardView.tsx           | 18 +++++-----
 .../dashboard/DashboardPage.module.scss       | 11 ++++++
 4 files changed, 84 insertions(+), 10 deletions(-)

diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss
index 24f4f589..a0987125 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss
@@ -96,6 +96,35 @@
   color: var(--cds-text-primary);
 }
 
+.announcementList {
+  display: grid;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.announcementItem {
+  display: grid;
+  gap: 0.75rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--cds-border-subtle);
+}
+
+.announcementItem:first-child {
+  padding-top: 0;
+  border-top: 0;
+}
+
+.announcementMeta {
+  flex: 0 0 auto;
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+}
+
+.announcementContent {
+  color: var(--cds-text-primary);
+}
+
 .warningIcon {
   color: var(--cds-support-warning);
 }
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
index 4c46a008..d9bee305 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
@@ -10,6 +10,7 @@ import {
   getMyExamAnswers,
 } from "@/infrastructure/api/repositories/examAnswers.repository";
 import { getExamDashboardSummary } from "@/infrastructure/api/repositories/exam.repository";
+import { getContestAnnouncements } from "@/infrastructure/api/repositories/contestAnnouncements.repository";
 import StudentContestDashboard from "./StudentContestDashboardView";
 
 vi.mock("react-i18next", () => ({
@@ -75,8 +76,16 @@ vi.mock("@carbon/react", () => ({
   Tab: ({ children }: { children: ReactNode }) => (
     <button type="button">{children}</button>
   ),
-  TabList: ({ children }: { children: ReactNode }) => (
-    <div role="tablist">{children}</div>
+  TabList: ({
+    children,
+    ...props
+  }: {
+    children: ReactNode;
+    "aria-label"?: string;
+  }) => (
+    <div role="tablist" aria-label={props["aria-label"]}>
+      {children}
+    </div>
   ),
   TabPanel: ({ children }: { children: ReactNode }) => (
     <div role="tabpanel">{children}</div>
@@ -164,6 +173,10 @@ vi.mock("@/infrastructure/api/repositories/exam.repository", () => ({
   })),
 }));
 
+vi.mock("@/infrastructure/api/repositories/contestAnnouncements.repository", () => ({
+  getContestAnnouncements: vi.fn(() => new Promise(() => {})),
+}));
+
 const createContest = (
   overrides: Partial<ContestDetail> = {},
 ): ContestDetail =>
@@ -243,6 +256,25 @@ describe("StudentContestDashboard", () => {
     expect(screen.getByRole("button", { name: /加入競賽/ })).toBeInTheDocument();
   });
 
+  it("renders contest announcements above the tabs", async () => {
+    vi.mocked(getContestAnnouncements).mockResolvedValueOnce([
+      {
+        id: "ann-1",
+        title: "考試公告",
+        content: "請準時進入考場",
+        created_at: "2099-05-05T09:00:00.000Z",
+        updated_at: "2099-05-05T09:00:00.000Z",
+        created_by: { username: "teacher" },
+      },
+    ]);
+
+    renderDashboard(createContest());
+
+    expect(await screen.findByText("考試公告")).toBeInTheDocument();
+    expect(screen.getByText("請準時進入考場")).toBeInTheDocument();
+    expect(screen.getByRole("tablist", { name: "競賽資訊切換" })).toBeInTheDocument();
+  });
+
   it("does not show answer records before the participant starts", () => {
     renderDashboard(createContest());
 
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
index 38b10f33..851fbc77 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
@@ -719,14 +719,16 @@ export default function StudentContestDashboard({
       <div className={styles.announcementList}>
         {announcements.map((announcement) => (
           <article className={styles.announcementItem} key={announcement.id}>
-            <div className={styles.announcementHeader}>
-              <h3 className={styles.announcementTitle}>{announcement.title}</h3>
-              {announcement.createdAt ? (
-                <span className={styles.announcementMeta}>
-                  {formatDate(announcement.createdAt, { includeSeconds: false })}
-                </span>
-              ) : null}
-            </div>
+            <BlockHeader
+              title={announcement.title}
+              actions={
+                announcement.createdAt ? (
+                  <span className={styles.announcementMeta}>
+                    {formatDate(announcement.createdAt, { includeSeconds: false })}
+                  </span>
+                ) : null
+              }
+            />
             <div className={styles.announcementContent}>
               <MarkdownRenderer>{announcement.content}</MarkdownRenderer>
             </div>
diff --git a/frontend/src/shared/components/dashboard/DashboardPage.module.scss b/frontend/src/shared/components/dashboard/DashboardPage.module.scss
index 812f28aa..980a6c14 100644
--- a/frontend/src/shared/components/dashboard/DashboardPage.module.scss
+++ b/frontend/src/shared/components/dashboard/DashboardPage.module.scss
@@ -1,16 +1,27 @@
 .root {
+  display: flex;
   flex: 1 1 auto;
+  flex-direction: column;
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 .inner {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
   max-width: 1180px;
+  width: 100%;
   margin: 0 auto;
   padding: 1rem;
 }
 
+.inner > * {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 .fullBleed {
   max-width: none;
   padding: 0;

From aa19bc62546b76ac8e9fae6798683e6efa3bc646 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 14:25:32 +0800
Subject: [PATCH 13/60] refactor(contest-admin): migrate panel headers and
 titles to dashboard primitives

Six admin panels (AdminPreparationDashboard, OverviewActionWidgets,
OverviewInsightsPanel, OverviewEventSummaryPanel, StudentStatusBreakdown,
DraftChecklistPanel) now use BlockHeader / SectionTitle from
@/shared/components/dashboard for their section titles and
title-with-description-and-actions headers. Their bespoke .title /
.subtitle / .panelHeader / .widgetTitle SCSS rules are removed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../AdminPreparationDashboard.module.scss     | 21 -------
 .../admin/AdminPreparationDashboard.tsx       | 57 ++++++++-----------
 .../admin/DraftChecklistPanel.module.scss     | 18 ------
 .../components/admin/DraftChecklistPanel.tsx  | 55 +++++++++---------
 .../admin/OverviewActionWidgets.module.scss   | 21 -------
 .../admin/OverviewActionWidgets.tsx           | 21 +++++--
 .../OverviewEventSummaryPanel.module.scss     |  7 ---
 .../admin/OverviewEventSummaryPanel.tsx       |  9 +--
 .../admin/OverviewInsightsPanel.module.scss   |  7 ---
 .../admin/OverviewInsightsPanel.tsx           |  9 +--
 .../admin/StudentStatusBreakdown.module.scss  |  7 ---
 .../admin/StudentStatusBreakdown.tsx          |  3 +-
 12 files changed, 78 insertions(+), 157 deletions(-)

diff --git a/frontend/src/features/contest/components/admin/AdminPreparationDashboard.module.scss b/frontend/src/features/contest/components/admin/AdminPreparationDashboard.module.scss
index ddbeafcf..d383b562 100644
--- a/frontend/src/features/contest/components/admin/AdminPreparationDashboard.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminPreparationDashboard.module.scss
@@ -1,24 +1,3 @@
-.panelHeader {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.panelHeader h3 {
-  margin: 0;
-  color: var(--cds-text-primary);
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.panelHeader p {
-  margin: 0.25rem 0 0;
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
 .checklist {
   display: grid;
   gap: 0;
diff --git a/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx b/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx
index a9a6272f..c3322919 100644
--- a/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx
+++ b/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx
@@ -16,6 +16,7 @@ import type {
   AdminPreparationDashboardData,
   PreparationReadinessState,
 } from "@/features/contest/screens/admin/panels/adminOverviewDashboard.model";
+import { BlockHeader } from "@/shared/components/dashboard";
 import styles from "./AdminPreparationDashboard.module.scss";
 
 interface AdminPreparationDashboardProps {
@@ -104,23 +105,17 @@ export default function AdminPreparationDashboard({
           label: t("adminPreparationDashboard.tabs.readiness", "準備狀態"),
           content: (
             <>
-              <div className={styles.panelHeader}>
-                <div>
-                  <h3>
-                    {t(
-                      "adminPreparationDashboard.readiness.title",
-                      "準備狀態",
-                    )}
-                  </h3>
-                  <p>
-                    {t(
-                      "adminPreparationDashboard.readiness.description",
-                      "非考試時段優先確認能否順利開考與收尾。",
-                    )}
-                  </p>
-                </div>
-                <TaskComplete size={18} />
-              </div>
+              <BlockHeader
+                title={t(
+                  "adminPreparationDashboard.readiness.title",
+                  "準備狀態",
+                )}
+                description={t(
+                  "adminPreparationDashboard.readiness.description",
+                  "非考試時段優先確認能否順利開考與收尾。",
+                )}
+                actions={<TaskComplete size={18} />}
+              />
               <ul className={styles.checklist}>
                 {data.checklistItems.map((item) => (
                   <li key={item.key} className={styles.checklistItem}>
@@ -143,23 +138,17 @@ export default function AdminPreparationDashboard({
           label: t("adminPreparationDashboard.tabs.grading", "批改與成績"),
           content: (
             <div className={styles.gradingPanel}>
-              <div className={styles.panelHeader}>
-                <div>
-                  <h3>
-                    {t(
-                      "adminPreparationDashboard.grading.title",
-                      "批改與成績",
-                    )}
-                  </h3>
-                  <p>
-                    {t(
-                      "adminPreparationDashboard.grading.description",
-                      "考後查看批改剩餘量與成績發布狀態。",
-                    )}
-                  </p>
-                </div>
-                <ChartBar size={18} />
-              </div>
+              <BlockHeader
+                title={t(
+                  "adminPreparationDashboard.grading.title",
+                  "批改與成績",
+                )}
+                description={t(
+                  "adminPreparationDashboard.grading.description",
+                  "考後查看批改剩餘量與成績發布狀態。",
+                )}
+                actions={<ChartBar size={18} />}
+              />
               <div
                 className={styles.progressTrack}
                 role="progressbar"
diff --git a/frontend/src/features/contest/components/admin/DraftChecklistPanel.module.scss b/frontend/src/features/contest/components/admin/DraftChecklistPanel.module.scss
index 62532882..a03fc0ab 100644
--- a/frontend/src/features/contest/components/admin/DraftChecklistPanel.module.scss
+++ b/frontend/src/features/contest/components/admin/DraftChecklistPanel.module.scss
@@ -5,24 +5,6 @@
   margin-bottom: 1rem;
 }
 
-.header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.title {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-.subtitle {
-  margin: 0;
-  color: var(--cds-text-secondary);
-  font-size: 0.875rem;
-}
-
 .checkList {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/features/contest/components/admin/DraftChecklistPanel.tsx b/frontend/src/features/contest/components/admin/DraftChecklistPanel.tsx
index 74593d82..739ee353 100644
--- a/frontend/src/features/contest/components/admin/DraftChecklistPanel.tsx
+++ b/frontend/src/features/contest/components/admin/DraftChecklistPanel.tsx
@@ -7,6 +7,7 @@ import {
 } from "@carbon/react";
 import { useTranslation } from "react-i18next";
 import type { ContestDetail } from "@/core/entities/contest.entity";
+import { BlockHeader } from "@/shared/components/dashboard";
 import styles from "./DraftChecklistPanel.module.scss";
 
 type ChecklistStatus = "done" | "suggest" | "missing";
@@ -130,34 +131,32 @@ export default function DraftChecklistPanel({
 
   return (
     <Tile className={styles.panel}>
-      <div className={styles.header}>
-        <h3 className={styles.title}>
-          {t("adminOverview.draftChecklist.title", "發布前 Checklist")}
-        </h3>
-        <p className={styles.subtitle}>
-          {t(
-            "adminOverview.draftChecklist.subtitle",
-            "發布不會被阻擋；以下項目可協助你在發布前把競賽設定更完整",
-          )}
-        </p>
-        <Button
-          kind="primary"
-          size="sm"
-          disabled={publishLoading}
-          onClick={() => {
-            void (async () => {
-              setPublishLoading(true);
-              try {
-                await onPublishContest();
-              } finally {
-                setPublishLoading(false);
-              }
-            })();
-          }}
-        >
-          {t("adminOverview.actions.publishContest", "發布競賽")}
-        </Button>
-      </div>
+      <BlockHeader
+        title={t("adminOverview.draftChecklist.title", "發布前 Checklist")}
+        description={t(
+          "adminOverview.draftChecklist.subtitle",
+          "發布不會被阻擋；以下項目可協助你在發布前把競賽設定更完整",
+        )}
+        actions={
+          <Button
+            kind="primary"
+            size="sm"
+            disabled={publishLoading}
+            onClick={() => {
+              void (async () => {
+                setPublishLoading(true);
+                try {
+                  await onPublishContest();
+                } finally {
+                  setPublishLoading(false);
+                }
+              })();
+            }}
+          >
+            {t("adminOverview.actions.publishContest", "發布競賽")}
+          </Button>
+        }
+      />
 
       {loading && (
         <InlineNotification
diff --git a/frontend/src/features/contest/components/admin/OverviewActionWidgets.module.scss b/frontend/src/features/contest/components/admin/OverviewActionWidgets.module.scss
index 0aae5898..9c64ac13 100644
--- a/frontend/src/features/contest/components/admin/OverviewActionWidgets.module.scss
+++ b/frontend/src/features/contest/components/admin/OverviewActionWidgets.module.scss
@@ -11,19 +11,6 @@
   gap: 0.75rem;
 }
 
-.title {
-  margin: 0;
-  font-size: var(--cds-body-02-font-size, 1rem);
-  font-weight: 600;
-  color: var(--cds-text-primary);
-}
-
-.subtitle {
-  margin: 0;
-  font-size: var(--cds-label-01-font-size, 0.75rem);
-  color: var(--cds-text-secondary);
-}
-
 .grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -48,14 +35,6 @@
   color: var(--cds-text-secondary);
 }
 
-.widgetTitle {
-  margin: 0;
-  font-size: var(--cds-label-01-font-size, 0.75rem);
-  font-weight: 500;
-  line-height: 1.2;
-  color: var(--cds-text-primary);
-}
-
 .widgetUnit {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: 400;
diff --git a/frontend/src/features/contest/components/admin/OverviewActionWidgets.tsx b/frontend/src/features/contest/components/admin/OverviewActionWidgets.tsx
index 3ace7879..a9d97e09 100644
--- a/frontend/src/features/contest/components/admin/OverviewActionWidgets.tsx
+++ b/frontend/src/features/contest/components/admin/OverviewActionWidgets.tsx
@@ -23,6 +23,7 @@ import {
   calculateContestTimeProgressAt,
   formatDuration,
 } from "./overviewMetrics.utils";
+import { BlockHeader, SectionTitle } from "@/shared/components/dashboard";
 import styles from "./OverviewActionWidgets.module.scss";
 
 interface OverviewActionWidgetsProps {
@@ -208,8 +209,13 @@ export default function OverviewActionWidgets({
     return (
       <section className={styles.section}>
         <div className={styles.header}>
-          <h3 className={styles.title}>{t("adminOverview.widgets.title", "控制台")}</h3>
-          <p className={styles.subtitle}>{t("adminOverview.widgets.subtitle", "快速進入設定、題目與狀態操作")}</p>
+          <BlockHeader
+            title={t("adminOverview.widgets.title", "控制台")}
+            description={t(
+              "adminOverview.widgets.subtitle",
+              "快速進入設定、題目與狀態操作",
+            )}
+          />
         </div>
         <div className={styles.grid}>
           {Array.from({ length: 4 }).map((_, i) => (
@@ -246,8 +252,13 @@ export default function OverviewActionWidgets({
   return (
     <section className={styles.section}>
       <div className={styles.header}>
-        <h3 className={styles.title}>{t("adminOverview.widgets.title", "控制台")}</h3>
-        <p className={styles.subtitle}>{t("adminOverview.widgets.subtitle", "快速進入設定、題目與狀態操作")}</p>
+        <BlockHeader
+          title={t("adminOverview.widgets.title", "控制台")}
+          description={t(
+            "adminOverview.widgets.subtitle",
+            "快速進入設定、題目與狀態操作",
+          )}
+        />
       </div>
 
       <div className={styles.grid}>
@@ -353,7 +364,7 @@ export default function OverviewActionWidgets({
           <div className={styles.progressHeader}>
             <div className={styles.progressTitleRow}>
               <Time size={16} className={styles.widgetIcon} />
-              <h3 className={styles.widgetTitle}>{t("adminOverview.widgets.examProgress", "考試進度")}</h3>
+              <SectionTitle as="h3">{t("adminOverview.widgets.examProgress", "考試進度")}</SectionTitle>
             </div>
             <span className={styles.progressPercent}>
               {!hasSchedule
diff --git a/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.module.scss b/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.module.scss
index cfceed4f..ae23095e 100644
--- a/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.module.scss
+++ b/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.module.scss
@@ -5,13 +5,6 @@
   gap: 0.75rem;
 }
 
-.title {
-  margin: 0;
-  font-size: var(--cds-body-02-font-size, 1rem);
-  font-weight: 600;
-  color: var(--cds-text-primary);
-}
-
 .statsGrid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
diff --git a/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.tsx b/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.tsx
index a00f4e13..01a6c14a 100644
--- a/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.tsx
+++ b/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.tsx
@@ -9,6 +9,7 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import type { ExamEvent } from "@/core/entities/contest.entity";
 import { getEventPriority } from "@/features/contest/constants/eventTaxonomy";
+import { SectionTitle } from "@/shared/components/dashboard";
 import styles from "./OverviewEventSummaryPanel.module.scss";
 
 interface OverviewEventSummaryPanelProps {
@@ -71,9 +72,9 @@ export default function OverviewEventSummaryPanel({
   if (loading) {
     return (
       <section className={styles.section}>
-        <h3 className={styles.title}>
+        <SectionTitle as="h3">
           {t("adminOverview.events.title", "事件摘要")}
-        </h3>
+        </SectionTitle>
         <div className={styles.statsGrid}>
           {Array.from({ length: 4 }).map((_, i) => (
             <Tile key={i} className={styles.statTile}>
@@ -94,9 +95,9 @@ export default function OverviewEventSummaryPanel({
 
   return (
     <section className={styles.section}>
-      <h3 className={styles.title}>
+      <SectionTitle as="h3">
         {t("adminOverview.events.title", "事件摘要")}
-      </h3>
+      </SectionTitle>
 
       <div className={styles.statsGrid}>
         {[
diff --git a/frontend/src/features/contest/components/admin/OverviewInsightsPanel.module.scss b/frontend/src/features/contest/components/admin/OverviewInsightsPanel.module.scss
index eeb4d3b1..353f3609 100644
--- a/frontend/src/features/contest/components/admin/OverviewInsightsPanel.module.scss
+++ b/frontend/src/features/contest/components/admin/OverviewInsightsPanel.module.scss
@@ -21,13 +21,6 @@
   }
 }
 
-.title {
-  margin: 0;
-  font-size: var(--cds-body-02-font-size, 1rem);
-  font-weight: 600;
-  color: var(--cds-text-primary);
-}
-
 .tile {
   border: 1px solid var(--cds-border-subtle);
   padding: 0.875rem;
diff --git a/frontend/src/features/contest/components/admin/OverviewInsightsPanel.tsx b/frontend/src/features/contest/components/admin/OverviewInsightsPanel.tsx
index 03538c1b..d2343a6d 100644
--- a/frontend/src/features/contest/components/admin/OverviewInsightsPanel.tsx
+++ b/frontend/src/features/contest/components/admin/OverviewInsightsPanel.tsx
@@ -10,6 +10,7 @@ import {
   formatDuration,
   calculateContestTimeProgressAt,
 } from "./overviewMetrics.utils";
+import { SectionTitle } from "@/shared/components/dashboard";
 import styles from "./OverviewInsightsPanel.module.scss";
 
 interface OverviewInsightsPanelProps {
@@ -130,9 +131,9 @@ export default function OverviewInsightsPanel({
   if (loading) {
     return (
       <aside className={styles.panel}>
-        <h3 className={styles.title}>
+        <SectionTitle as="h3">
           {t("adminOverview.sidebar.title", "狀態與入口")}
-        </h3>
+        </SectionTitle>
         {Array.from({ length: 3 }).map((_, i) => (
           <Tile key={i} className={styles.tile}>
             <SkeletonText width="50%" />
@@ -147,9 +148,9 @@ export default function OverviewInsightsPanel({
 
   return (
     <aside className={styles.panel}>
-      <h3 className={styles.title}>
+      <SectionTitle as="h3">
         {t("adminOverview.sidebar.title", "狀態與入口")}
-      </h3>
+      </SectionTitle>
 
       <Tile className={styles.tile}>
         <div className={styles.tileHeader}>
diff --git a/frontend/src/features/contest/components/admin/StudentStatusBreakdown.module.scss b/frontend/src/features/contest/components/admin/StudentStatusBreakdown.module.scss
index 96787f63..84f86641 100644
--- a/frontend/src/features/contest/components/admin/StudentStatusBreakdown.module.scss
+++ b/frontend/src/features/contest/components/admin/StudentStatusBreakdown.module.scss
@@ -10,13 +10,6 @@
   justify-content: space-between;
 }
 
-.title {
-  margin: 0;
-  font-size: var(--cds-body-02-font-size, 1rem);
-  font-weight: 600;
-  color: var(--cds-text-primary);
-}
-
 .grid {
   --status-columns: 4;
   display: flex;
diff --git a/frontend/src/features/contest/components/admin/StudentStatusBreakdown.tsx b/frontend/src/features/contest/components/admin/StudentStatusBreakdown.tsx
index 10772d1d..78037fdc 100644
--- a/frontend/src/features/contest/components/admin/StudentStatusBreakdown.tsx
+++ b/frontend/src/features/contest/components/admin/StudentStatusBreakdown.tsx
@@ -7,6 +7,7 @@ import {
 } from "@carbon/icons-react";
 import { useTranslation } from "react-i18next";
 import type { ParticipantStatusKpi } from "@/features/contest/screens/admin/participantStatusKpi";
+import { SectionTitle } from "@/shared/components/dashboard";
 import styles from "./StudentStatusBreakdown.module.scss";
 
 interface StudentStatusBreakdownProps {
@@ -32,7 +33,7 @@ export default function StudentStatusBreakdown({
   return (
     <div className={styles.section}>
       <div className={styles.header}>
-        <h3 className={styles.title}>{t("studentStatus.title", "學生狀態分佈")}</h3>
+        <SectionTitle as="h3">{t("studentStatus.title", "學生狀態分佈")}</SectionTitle>
       </div>
 
       <div className={styles.grid}>

From 39748e619ccd3d5775067e02c0f20cf76e058751 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 14:29:19 +0800
Subject: [PATCH 14/60] docs(spec): contest announcement & Q&A UX design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 答題畫面新增唯讀通知 banner + modal，互動回 dashboard
- 已讀狀態用 localStorage（不引入新後端表）
- 教師考試前後皆可發公告；既有 readOnly 限制需解開
- 拆掉 ContestClarifications.tsx 巨檔
- ClarificationViewSet 加 status / problem filter

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...6-05-05-contest-announcement-qna-design.md | 217 ++++++++++++++++++
 1 file changed, 217 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md

diff --git a/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md b/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md
new file mode 100644
index 00000000..1817e6cb
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md
@@ -0,0 +1,217 @@
+# 競賽公告與提問功能 UX 設計
+
+- 日期：2026-05-05
+- 分支：dev
+- 狀態：Draft（待 writing-plans）
+
+## 目標
+
+讓競賽中的「公告」與「Q&A 提問」功能在學生端與教師端形成一致、可被注意到的流程，並修正目前在答題畫面內完全看不到通知、教師無法在考試前後發公告的缺陷。
+
+## 範圍與非範圍
+
+**範圍**
+
+- 學生在答題畫面（`PaperExamAnsweringScreen`）能被「通知」到新公告與新回覆。
+- 學生與教師在 contest dashboard / admin panel 上的完整公告與 Q&A 互動。
+- 教師端在競賽未開始 / 進行中 / 已結束三種狀態下都能發公告。
+- 既有 `ContestClarifications.tsx`（405 行混合元件）拆檔。
+
+**非範圍**
+
+- 不引入新的後端表（無 ReadReceipt、無 watermark 欄位）。
+- 不顯示「已讀人數 / 未讀名單」（後端沒有資料來源）。
+- 不做 SSE / WebSocket，沿用現有 polling。
+- 不做答題畫面內的提問（學生想提問需回 dashboard）。
+- 不修改既有競賽分數 / 排行榜 / 監考相關流程。
+
+## 現況差距
+
+| 既有 | 缺陷 |
+|---|---|
+| `ContestAnnouncement`、`Clarification` model | 缺「已讀」相關概念 |
+| `useClarifications` polling | 沒有未讀數計算 |
+| `ContestClarifications.tsx` | 405 行單檔，混合公告 + Q&A + 三種 modal |
+| `ContestQAScreen` / `AdminClarificationsScreen` | 在「進行中以外」整段 readOnly，導致教師考試前後不能發公告 |
+| `PaperExamAnsweringScreen` | 完全沒有通知入口 |
+| Clarification list endpoint | 未確認 `is_public=true` 的提問對非作者學生是否可見 |
+
+## 設計
+
+### A. 已讀狀態：localStorage
+
+- 不動後端。每個學生瀏覽器自己記。
+- key：`qjudge.contest.{contestId}.readIds`
+- value：JSON 陣列，混存兩種前綴 id：
+  - `ann:{announcementId}`
+  - `clr:{clarificationId}:{answered_at_iso}`
+- 「未讀 clarification」嚴格定義為 `status='answered' AND clr:{id}:{answered_at} 不在 readIds 中`。亦即「沒被回覆過的 clarification」（pending）不算未讀，不會出 banner；教師若日後修改回覆造成 `answered_at` 改變，會視為新一輪未讀。
+- 已讀寫入時機：
+  - 答題畫面 NotificationModal 點「我已閱讀」或「✕」 → 把 modal 顯示的所有 id 一次寫入。
+  - Dashboard 上 `ContestAnnouncementList` / `ContestClarificationList` 的卡片進入 viewport（IntersectionObserver）→ 標單筆已讀。
+- 跨裝置 / 清快取會重新提示，這是接受的取捨（考試多半同一台電腦）。
+
+### B. 未讀計算 hook：`useContestUnread`
+
+```
+useContestUnread(contestId, currentUserId): {
+  unreadAnnouncementIds: string[],
+  unreadClarificationIds: string[],   // 含「對我可見的」公開 Q&A 與「自己提問的私下新回覆」
+  unreadCount: number,                 // 兩者長度加總
+  markRead: (ids: string[]) => void,
+  markAllRead: () => void,
+}
+```
+
+- 內部 reuse 既有 `useClarifications`（取資料 + polling）。
+- 對學生：可見的 clarification = 自己發問的所有 + 其他人的 `is_public=true & status='answered'`。對「未讀」的計算只看其中 `status='answered'` 的子集合（見 §A 定義）。
+- 對教師：本 hook 不啟用 banner（教師不需要公告通知，自己發的）。
+- 對應 react state 變化會觸發 banner 的出現 / 消失。
+
+### C. 學生端：答題畫面（`PaperExamAnsweringScreen`）
+
+**新增兩個元件**
+
+1. `ExamNotificationBanner.tsx`
+   - 位置：考試版面頂部，緊接 ExamNavigator 上方。
+   - 出現條件：`unreadCount > 0`。
+   - 文案：`你有 {unreadCount} 則新訊息 · 點此查看`。
+   - 行為：點擊整條 banner → 打開 `ExamNotificationModal`。`✕` 按鈕 = 直接 markAllRead 並關閉 banner（不必開 modal）。
+   - 樣式：Carbon `InlineNotification` (kind=`info`) 為主，使用 `--cds-support-info` 顏色。
+
+2. `ExamNotificationModal.tsx`
+   - Carbon `Modal`，`passiveModal` 形式。
+   - 內容分兩區（依時間倒序，未讀置頂並用分隔線與已讀分開）：
+     - **新公告**：title / content / 時間。
+     - **新回覆**：題號（若有）/ 自己原本的問題摘要 / 教師回覆內容 / 時間。
+   - 底部按鈕：
+     - Primary：「我已閱讀」→ markAllRead，關閉。
+     - Secondary：「前往討論區」→ 導向 contest dashboard 的 Q&A tab；保持 modal 已標已讀的副作用。
+   - **此 Modal 不含「提問」、「公開 Q&A 列表」、「歷史公告列表」**。
+
+### D. 學生端：Contest Dashboard / Q&A Tab
+
+維持 `ContestQAScreen` 入口，但元件拆檔（見 §G）。包含：
+
+- 公告完整歷史列表（含已讀與未讀）。
+- 「我的提問」列表 + 狀態（pending / answered）+ 教師回覆內容。
+- 「公開 Q&A」列表（`is_public=true` 的提問）：匿名顯示，僅顯示「題號 / 問題 / 公開回覆」，不顯示提問者帳號。
+- 「我要提問」按鈕（依下表權限決定 enabled）。
+- 卡片進入 viewport 時對單筆 id 標已讀（`useContestUnread.markRead`）。
+
+### E. 權限狀態表
+
+| 競賽狀態 | 學生看公告 | 學生發問 | 教師發公告 | 教師回覆 |
+|---|---|---|---|---|
+| 未開始（published, now < startTime） | ✅ | ❌（按鈕 disabled，hint：「考試開始後可發問」） | ✅ | ✅ |
+| 進行中 | ✅ | ✅ | ✅ | ✅ |
+| 已結束（now > endTime） | ✅（只讀） | ❌ | ✅ | ✅ |
+
+需要對應修改 `ContestClarifications.tsx` 既有的 `isReadOnly` 邏輯：原本 `contestStatus !== "published" || isEnded` 一律鎖死所有操作；改為**僅鎖學生的「我要提問」**，教師發公告 / 回覆永不鎖。
+
+### F. 教師端：`AdminClarificationsScreen`
+
+- 提問列表頂部加 Filter：`全部 / 待回覆 / 已回覆 / 依題目`。
+- 預設排序：`status=pending` 優先，再依 `created_at` 由新到舊。
+- 回覆 Modal 維持現有「`公開 / 私下`」切換。
+- 公告區「發布公告」按鈕在所有競賽狀態下可用。
+
+### G. 元件拆檔
+
+把現行 `frontend/src/features/contest/components/ContestClarifications.tsx` 拆掉：
+
+```
+frontend/src/features/contest/components/discussion/
+  ContestAnnouncementList.tsx        # 公告列表（顯示 + 未讀標記）
+  ContestClarificationList.tsx       # Q&A 列表（含 tab：我的提問 / 公開 Q&A）
+  AskClarificationModal.tsx          # 學生發問 modal
+  ReplyClarificationModal.tsx        # 教師回覆 modal
+  PostAnnouncementModal.tsx          # 教師發公告 modal
+  ContestDiscussionView.tsx          # 組合上述五個，給 ContestQAScreen / AdminClarificationsScreen 用
+  index.ts
+
+frontend/src/features/contest/components/exam/
+  ExamNotificationBanner.tsx
+  ExamNotificationModal.tsx
+
+frontend/src/features/contest/hooks/
+  useContestUnread.ts
+```
+
+刪除：`ContestClarifications.tsx`、`AnnouncementSectionLayout.tsx`（功能搬入 `ContestAnnouncementList`）、`DiscussionsSection.tsx`（同樣搬入 `ContestClarificationList`）。
+
+### H. 後端最小改動
+
+僅修兩個 ViewSet，不新增表 / 欄位 / 端點：
+
+1. **`ClarificationViewSet` query filter**：
+   - 支援 `?status=pending|answered`
+   - 支援 `?problem={uuid}`
+   - 學生端 list queryset：`Q(author=user) | Q(is_public=True, status='answered')`（公開 Q&A 必須已被回覆才出現，避免「公開待答」造成噪音）。
+   - 教師端 list queryset：所有 contest 內 clarification。
+
+2. **`ContestAnnouncementViewSet`**：無需改動 schema。確認 list permission 對所有 enrolled 學生開放，create / update / delete 限教師 + 管理員（既有行為應已正確，僅做驗證）。
+
+如測試發現 list queryset 與此規格不符，視為 bug 修補。
+
+## 資料流
+
+```
+[Polling 30s]
+  ↓
+useClarifications(contestId)  ──→  raw announcements + clarifications
+                                          │
+                                          ▼
+                          useContestUnread(contestId, userId)
+                                          │
+                ┌────────────────────────┼─────────────────────────┐
+                ▼                        ▼                         ▼
+   ExamNotificationBanner      ContestAnnouncementList     ContestClarificationList
+   (only when unread > 0)      (in-viewport markRead)      (in-viewport markRead)
+                │
+                ▼
+        ExamNotificationModal
+        (markAllRead on close)
+```
+
+## 錯誤處理
+
+- 發布 / 回覆 / 提問 API 失敗：沿用現有 `showError(...)` modal，文案再依操作分（已存在）。
+- localStorage 寫入失敗（quota / private mode）：catch 後 log warn，不擋 UI 流程；下次仍會視為未讀，使用者體驗等同 banner 多顯示一次。
+- polling 失敗：沿用 `useClarifications` 既有錯誤狀態，不在 banner 顯示錯誤訊息（避免雜訊）。
+
+## 測試重點
+
+- `useContestUnread`：給定 mock list + localStorage state，驗證 unreadCount 與 markRead 的副作用。
+- 權限：未開始 / 進行中 / 已結束三狀態下，學生提問按鈕 enabled / disabled 與教師發公告按鈕都 enabled 的行為。
+- 答題畫面 banner：`unreadCount` 變化時的出現 / 消失；點擊 / 點 ✕ / 點「我已閱讀」三個入口都把 ids 寫進 localStorage。
+- Modal 顯示順序：未讀置頂、已讀置底、各自時間倒序。
+- 公開 Q&A 匿名：DOM 上不出現提問者 username。
+- Backend filter：`?status=pending` 與 `?problem={uuid}` 對學生 / 教師兩個角色的 queryset 結果。
+- Backend 公開 Q&A 可見性：「他人發的 `is_public=true & status='answered'`」對學生可見；「他人發的 `is_public=false`」對學生不可見。
+
+## 影響的檔案（粗估）
+
+**Backend**
+- `backend/apps/contests/views/clarification.py`（filter + queryset）
+- `backend/apps/contests/tests/`（新增 viewset filter + 可見性測試）
+
+**Frontend（新增）**
+- `features/contest/components/discussion/*`
+- `features/contest/components/exam/ExamNotificationBanner.tsx`
+- `features/contest/components/exam/ExamNotificationModal.tsx`
+- `features/contest/hooks/useContestUnread.ts`
+
+**Frontend（修改）**
+- `features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx`（掛 banner）
+- `features/contest/screens/ContestQAScreen.tsx`（改用 `ContestDiscussionView`）
+- `features/contest/screens/admin/panels/AdminClarificationsScreen.tsx`（改用 `ContestDiscussionView` + filter）
+
+**Frontend（刪除）**
+- `features/contest/components/ContestClarifications.tsx`
+- `features/contest/components/AnnouncementSectionLayout.tsx`
+- `features/contest/components/DiscussionsSection.tsx`
+
+## 開放問題
+
+無。所有 UX 取捨已在腦力激盪階段確認。

From dac941a0622e11105b896ebd12e81b9df8a2ffb2 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 14:30:20 +0800
Subject: [PATCH 15/60] refactor(contest): migrate header timer and insight
 rail to dashboard primitives

ContestLayout header timer now uses TimeDisplay variant=header (the
typography rules are removed from the wrapper SCSS).

AdminInsightRail card headers now use MetricBlock size=lg, eliminating
the hardcoded 1.5rem font-size in .cardHeader strong and the bespoke
label/value typography.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../admin/AdminInsightRail.module.scss        |  17 -
 .../components/admin/AdminInsightRail.tsx     |  25 +-
 .../layout/ContestLayout.module.scss          | 165 +++++++-
 .../components/layout/ContestLayout.tsx       | 363 ++++++++++++------
 4 files changed, 421 insertions(+), 149 deletions(-)

diff --git a/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss b/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
index 717762aa..ee553864 100644
--- a/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
@@ -14,23 +14,6 @@
   border-bottom: 1px solid var(--cds-border-subtle);
 }
 
-.cardHeader {
-  display: grid;
-  gap: 0.375rem;
-}
-
-.cardHeader span {
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
-.cardHeader strong {
-  color: var(--cds-text-primary);
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
 .cardActionButton {
   justify-self: start;
   width: fit-content;
diff --git a/frontend/src/features/contest/components/admin/AdminInsightRail.tsx b/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
index 165f5065..1b4c65e6 100644
--- a/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
+++ b/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
@@ -13,6 +13,7 @@ import type {
   DistributionItem,
 } from "@/features/contest/screens/admin/panels/adminOverviewDashboard.model";
 import { useTheme } from "@/shared/ui/theme/ThemeContext";
+import { MetricBlock } from "@/shared/components/dashboard";
 import styles from "./AdminInsightRail.module.scss";
 
 interface AdminInsightRailProps {
@@ -193,10 +194,7 @@ const DistributionOverview = ({
         </div>
       ) : (
         <>
-          <div className={styles.cardHeader}>
-            <span>{title}</span>
-            <strong>{total} 人</strong>
-          </div>
+          <MetricBlock label={title} value={`${total} 人`} size="lg" />
           {hasDistributionData ? (
             <>
               <div className={styles.distributionChartFrame}>
@@ -331,14 +329,17 @@ function InsightCard({
     );
   return (
     <section className={styles.card} aria-busy={loading}>
-      <div className={styles.cardHeader}>
-        <span>{card.title}</span>
-        {loading ? (
-          <SkeletonText heading width="5rem" />
-        ) : (
-          <strong>{card.value}</strong>
-        )}
-      </div>
+      <MetricBlock
+        label={card.title}
+        value={
+          loading ? (
+            <SkeletonText heading width="5rem" />
+          ) : (
+            card.value
+          )
+        }
+        size="lg"
+      />
       {loading ? (
         card.kind === "line" ? (
           <SkeletonPlaceholder className={styles.chartSkeleton} />
diff --git a/frontend/src/features/contest/components/layout/ContestLayout.module.scss b/frontend/src/features/contest/components/layout/ContestLayout.module.scss
index 440080b3..64c07483 100644
--- a/frontend/src/features/contest/components/layout/ContestLayout.module.scss
+++ b/frontend/src/features/contest/components/layout/ContestLayout.module.scss
@@ -55,6 +55,139 @@
   flex: 1;
 }
 
+.contestShellBody {
+  --contest-shell-sidebar-expanded-width: 18rem;
+  --contest-shell-sidebar-collapsed-width: 3rem;
+
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.contestShellSidebar {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--cds-layer);
+  border-right: 1px solid var(--cds-border-subtle-01);
+  transition: width 160ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.contestShellSidebarExpanded {
+  width: var(--contest-shell-sidebar-expanded-width);
+}
+
+.contestShellSidebarCollapsed {
+  width: var(--contest-shell-sidebar-collapsed-width);
+}
+
+.contestShellNav {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 0.375rem;
+  min-height: 0;
+  padding: 0.75rem 0.5rem;
+  overflow: hidden;
+}
+
+.contestShellNavButton {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: 3rem;
+  padding: 0 0.75rem;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--cds-text-secondary);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.contestShellNavButton:hover {
+  background: var(--cds-layer-hover);
+  color: var(--cds-text-primary);
+}
+
+.contestShellNavButton:focus-visible {
+  outline: 2px solid var(--cds-focus);
+  outline-offset: -2px;
+}
+
+.contestShellNavButtonActive {
+  background: var(--cds-layer-selected);
+  color: var(--cds-text-primary);
+}
+
+.contestShellNavButton span {
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  line-height: 1.25;
+  text-overflow: ellipsis;
+}
+
+.contestShellSidebarCollapsed .contestShellNav {
+  align-items: center;
+  padding: 0.5rem 0.25rem;
+}
+
+.contestShellSidebarCollapsed .contestShellNavButton {
+  justify-content: center;
+  width: 2.5rem;
+  padding: 0;
+  border-radius: 0.375rem;
+}
+
+.contestShellSidebarCollapsed .contestShellNavButton span {
+  display: none;
+}
+
+.contestShellFooter {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  min-height: 3rem;
+  padding: 0.25rem 0.5rem;
+  border-top: 1px solid var(--cds-border-subtle-01);
+}
+
+.contestShellSidebarCollapsed .contestShellFooter {
+  justify-content: center;
+  padding: 0.25rem;
+}
+
+.contestShellToggle {
+  flex-shrink: 0;
+  color: var(--cds-icon-primary);
+}
+
+.contestShellContent {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.contestShellBody .contestShellContent > * {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+}
+
 .dashboardContent {
   flex: 1 1 auto;
   min-height: 0;
@@ -120,8 +253,6 @@
   height: 100%;
   padding: 0 1rem;
   color: var(--cds-text-primary);
-  font-family: var(--cds-code-font-family, monospace);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
 }
 
 .headerScoreDisplay {
@@ -251,4 +382,34 @@
   .headerActions {
     display: none !important;
   }
+
+  .contestShellBody {
+    flex-direction: column;
+  }
+
+  .contestShellSidebar {
+    width: 100%;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--cds-border-subtle-01);
+  }
+
+  .contestShellNav {
+    flex-direction: row;
+    padding: 0.375rem;
+  }
+
+  .contestShellNavButton {
+    min-height: 3rem;
+    width: auto;
+    max-width: 8rem;
+  }
+
+  .contestShellSidebarCollapsed .contestShellNavButton {
+    width: 2.5rem;
+  }
+
+  .contestShellFooter {
+    display: none;
+  }
 }
diff --git a/frontend/src/features/contest/components/layout/ContestLayout.tsx b/frontend/src/features/contest/components/layout/ContestLayout.tsx
index 3ea43e9b..e0fb4596 100644
--- a/frontend/src/features/contest/components/layout/ContestLayout.tsx
+++ b/frontend/src/features/contest/components/layout/ContestLayout.tsx
@@ -1,4 +1,5 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
+import type { ReactNode } from "react";
 import { Link, Outlet, useParams } from "react-router-dom";
 import {
   Breadcrumb,
@@ -6,16 +7,20 @@ import {
   Header,
   HeaderGlobalBar,
   HeaderGlobalAction,
+  IconButton,
   Modal,
   HeaderNavigation,
 } from "@carbon/react";
 import {
   Maximize,
-  Minimize,
   Time,
   Renew,
   Dashboard,
   ChevronLeft,
+  Home,
+  List,
+  SidePanelClose,
+  SidePanelOpen,
 } from "@carbon/icons-react";
 import { useTranslation } from "react-i18next";
 import ExamModeWrapper from "@/features/contest/components/ExamModeWrapper";
@@ -27,12 +32,18 @@ import { useContestExamActions } from "@/features/contest/hooks/useContestExamAc
 import { useContestLayoutState } from "@/features/contest/hooks/useContestLayoutState";
 import {
   getClassroomContestDashboardPath,
+  getClassroomContestPrecheckPath,
+  getFirstContestProblemId,
   getClassroomContestSolvePath,
+  shouldRouteToPrecheck,
 } from "@/features/contest/domain/contestRoutePolicy";
 import ExamSubmissionProgressModal from "@/features/contest/components/exam/ExamSubmissionProgressModal";
+import { hasExamPrecheckPassed } from "@/features/contest/screens/paperExam/hooks";
 import { SideMenu } from "@/features/app/components/SideMenu";
 import { SideMenuToggle } from "@/features/app/components/SideMenuToggle";
 import { UserMenu } from "@/features/app/components/UserMenu";
+import { ContestLayoutHeaderSlotContext } from "./ContestLayoutHeaderSlotContext";
+import { TimeDisplay } from "@/shared/components/dashboard";
 import styles from "./ContestLayout.module.scss";
 
 const ContestLayout = () => {
@@ -62,12 +73,28 @@ const ContestLayout = () => {
     boundClassroomId && contestId
       ? getClassroomContestDashboardPath(boundClassroomId, contestId)
       : "/dashboard";
+  const precheckPath =
+    boundClassroomId && contestId
+      ? getClassroomContestPrecheckPath(boundClassroomId, contestId)
+      : "/dashboard";
+  const firstProblemId =
+    contest?.contestType === "coding"
+      ? getFirstContestProblemId(contest)
+      : undefined;
+  const answeringPath =
+    boundClassroomId && contestId
+      ? getClassroomContestSolvePath(boundClassroomId, contestId, firstProblemId)
+      : "/dashboard";
   const adminPath =
     boundClassroomId && contestId
       ? `${dashboardPath}/admin`
       : "/dashboard";
 
   const [sideMenuOpen, setSideMenuOpen] = useState(false);
+  const [contestShellExpanded, setContestShellExpanded] = useState(
+    () => typeof window !== "undefined" && window.innerWidth > 900,
+  );
+  const [headerActions, setHeaderActions] = useState<ReactNode>(null);
   const [monitoringModalOpen, setMonitoringModalOpen] = useState(false);
   const [errorModalOpen, setErrorModalOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
@@ -90,11 +117,17 @@ const ContestLayout = () => {
 
   const handleGoToAnswering = () => {
     if (!contestId || !contest) return;
-    navigate(
-      boundClassroomId
-        ? getClassroomContestSolvePath(boundClassroomId, contestId)
-        : "/dashboard",
-    );
+    if (
+      boundClassroomId &&
+      shouldRouteToPrecheck({
+        contest,
+        precheckPassed: hasExamPrecheckPassed(contest.id),
+      })
+    ) {
+      navigate(precheckPath);
+      return;
+    }
+    navigate(answeringPath);
   };
 
   const {
@@ -117,6 +150,10 @@ const ContestLayout = () => {
     },
     onError: showError,
   });
+  const headerSlotValue = useMemo(
+    () => ({ setHeaderActions }),
+    [setHeaderActions],
+  );
 
   if (contestLoading) {
     return (
@@ -239,138 +276,228 @@ const ContestLayout = () => {
   const showScoreDisplay =
     isSolvePage && contest?.problems && contest.problems.length > 0;
   const hideSolveNavExtras = isSolvePage && contest?.contestType === "coding";
-  const showContestMenuToggle = !hideSolveNavExtras && !lockContestMenu;
+  const isPaperSolvePage = isSolvePage && contest?.contestType === "paper_exam";
+  const showContestShellSidebar =
+    !isPaperSolvePage &&
+    isContestParticipant &&
+    !!contestId &&
+    !!boundClassroomId &&
+    (isSolvePage ||
+      contest?.examStatus === "in_progress" ||
+      contest?.examStatus === "paused" ||
+      contest?.examStatus === "locked");
+  const showContestMenuToggle =
+    !showContestShellSidebar && !hideSolveNavExtras && !lockContestMenu;
   const effectiveSideMenuOpen = showContestMenuToggle && sideMenuOpen;
+  const renderContestShellContent = () => {
+    const mainContent = renderMainContent();
+    if (!showContestShellSidebar) return mainContent;
 
-  return (
-    <ExamModeWrapper {...examModeProps}>
-      {isPaperExamPage ? (
-        renderMainContent()
-      ) : (
-        <div className={styles.root}>
-          <Header aria-label={t("header.contestPlatform")}>
-            {showContestMenuToggle ? (
-              <SideMenuToggle
-                isOpen={effectiveSideMenuOpen}
-                onClick={() => setSideMenuOpen((o) => !o)}
-              />
-            ) : hideSolveNavExtras ? (
-              <button
-                type="button"
-                className={`side-menu-toggle ${styles.solveBackButton}`}
-                aria-label={t("adminLayout.header.backToHome", "返回競賽主頁")}
-                title={t("adminLayout.header.backToHome", "返回競賽主頁")}
-                onClick={() => navigate(dashboardPath)}
-              >
-                <ChevronLeft size={20} />
-              </button>
-            ) : null}
-            <div className={styles.headerBrand}>
-              <Link to="/dashboard" className={styles.headerBrandLink}>
-                {tc("header.prefix")}
-              </Link>
-              {renderContestBreadcrumb()}
-            </div>
-
-            <HeaderNavigation aria-label={tc("header.contestNavigation")}>
-              {showContestTimer && !boundClassroomId && (
-                <div className={styles.headerTimerDisplay}>
-                  <Time size={16} />
-                  <span>
-                    {isCountdownToStart
-                      ? t("timeToStart", { time: timeLeft })
-                      : timeLeft}
-                  </span>
-                </div>
-              )}
+    const homeLabel = t("contestShell.home", "總覽");
+    const answeringLabel =
+      contest?.contestType === "paper_exam"
+        ? t("contestShell.paperAnswering", "作答")
+        : t("contestShell.codingAnswering", "解題");
 
-              {showScoreDisplay && (
-                <div className={styles.headerScoreDisplay}>
-                  <span className={styles.scoreLabel}>{t("overview.scoreLabel")}</span>
-                  <span
-                    className={`${styles.scoreValue} ${userScore > 0 ? styles.hasScore : ""}`}
-                  >
-                    {userScore}
-                  </span>
-                  <span className={styles.scoreDivider}>/</span>
-                  <span className={styles.totalScore}>{totalMaxScore}</span>
-                </div>
+    return (
+      <div className={styles.contestShellBody}>
+        <aside
+          className={[
+            styles.contestShellSidebar,
+            contestShellExpanded
+              ? styles.contestShellSidebarExpanded
+              : styles.contestShellSidebarCollapsed,
+          ].join(" ")}
+          aria-label={t("contestShell.sidebarLabel", "考試導覽")}
+        >
+          <div className={styles.contestShellNav}>
+            <button
+              type="button"
+              className={`${styles.contestShellNavButton} ${
+                !isSolvePage ? styles.contestShellNavButtonActive : ""
+              }`}
+              aria-current={!isSolvePage ? "page" : undefined}
+              aria-label={homeLabel}
+              title={homeLabel}
+              onClick={() => navigate(dashboardPath)}
+            >
+              <Home size={20} />
+              <span>{homeLabel}</span>
+            </button>
+            <button
+              type="button"
+              className={`${styles.contestShellNavButton} ${
+                isSolvePage ? styles.contestShellNavButtonActive : ""
+              }`}
+              aria-current={isSolvePage ? "page" : undefined}
+              aria-label={answeringLabel}
+              title={answeringLabel}
+              onClick={handleGoToAnswering}
+            >
+              <List size={20} />
+              <span>{answeringLabel}</span>
+            </button>
+          </div>
+          <div className={styles.contestShellFooter}>
+            <IconButton
+              kind="ghost"
+              size="md"
+              align="top"
+              label={
+                contestShellExpanded
+                  ? tc("ui.collapseSidebar", "收合側欄")
+                  : tc("ui.expandSidebar", "展開側欄")
+              }
+              onClick={() => setContestShellExpanded((expanded) => !expanded)}
+              className={styles.contestShellToggle}
+            >
+              {contestShellExpanded ? (
+                <SidePanelClose size={20} />
+              ) : (
+                <SidePanelOpen size={20} />
               )}
-            </HeaderNavigation>
+            </IconButton>
+          </div>
+        </aside>
+        <div className={styles.contestShellContent}>{mainContent}</div>
+      </div>
+    );
+  };
 
-            <HeaderGlobalBar>
-              {renderExamStatus()}
+  return (
+    <ExamModeWrapper {...examModeProps}>
+      <ContestLayoutHeaderSlotContext.Provider value={headerSlotValue}>
+      <div className={styles.root}>
+        <Header aria-label={t("header.contestPlatform")}>
+          {showContestMenuToggle ? (
+            <SideMenuToggle
+              isOpen={effectiveSideMenuOpen}
+              onClick={() => setSideMenuOpen((o) => !o)}
+            />
+          ) : hideSolveNavExtras && !showContestShellSidebar ? (
+            <button
+              type="button"
+              className={`side-menu-toggle ${styles.solveBackButton}`}
+              aria-label={t("adminLayout.header.backToHome", "返回競賽主頁")}
+              title={t("adminLayout.header.backToHome", "返回競賽主頁")}
+              onClick={() => navigate(dashboardPath)}
+            >
+              <ChevronLeft size={20} />
+            </button>
+          ) : null}
+          <div className={styles.headerBrand}>
+            <Link to="/dashboard" className={styles.headerBrandLink}>
+              {tc("header.prefix")}
+            </Link>
+            {renderContestBreadcrumb()}
+          </div>
 
-              {isAdmin && (
-                <HeaderGlobalAction
-                  aria-label={t("preRegistration.openAdminPanel", "前往管理後台")}
-                  tooltipAlignment="center"
-                  onClick={() => navigate(adminPath)}
+          <HeaderNavigation aria-label={tc("header.contestNavigation")}>
+            {showContestTimer && !boundClassroomId && (
+              <div className={styles.headerTimerDisplay}>
+                <Time size={16} />
+                <TimeDisplay
+                  variant="header"
+                  value={
+                    isCountdownToStart
+                      ? t("timeToStart", { time: timeLeft })
+                      : timeLeft
+                  }
+                />
+              </div>
+            )}
+
+            {showScoreDisplay && (
+              <div className={styles.headerScoreDisplay}>
+                <span className={styles.scoreLabel}>{t("overview.scoreLabel")}</span>
+                <span
+                  className={`${styles.scoreValue} ${userScore > 0 ? styles.hasScore : ""}`}
                 >
-                  <Dashboard size={20} />
-                </HeaderGlobalAction>
-              )}
+                  {userScore}
+                </span>
+                <span className={styles.scoreDivider}>/</span>
+                <span className={styles.totalScore}>{totalMaxScore}</span>
+              </div>
+            )}
+          </HeaderNavigation>
+
+          <HeaderGlobalBar>
+            {renderExamStatus()}
 
+            {headerActions}
+
+            {isAdmin && (
               <HeaderGlobalAction
-                aria-label={isRefreshing ? t('action.refreshing') : t("refresh")}
+                aria-label={t("preRegistration.openAdminPanel", "前往管理後台")}
                 tooltipAlignment="center"
-                onClick={isRefreshing ? undefined : refreshContest}
-                className={styles.headerActions}
+                onClick={() => navigate(adminPath)}
               >
-                <Renew size={20} className={isRefreshing ? styles.refreshing : undefined} />
+                <Dashboard size={20} />
               </HeaderGlobalAction>
-
+            )}
+
+            <HeaderGlobalAction
+              aria-label={isRefreshing ? t('action.refreshing') : t("refresh")}
+              tooltipAlignment="center"
+              onClick={isRefreshing ? undefined : refreshContest}
+              className={styles.headerActions}
+            >
+              <Renew size={20} className={isRefreshing ? styles.refreshing : undefined} />
+            </HeaderGlobalAction>
+
+            {!isFullscreen && (
               <HeaderGlobalAction
-                aria-label={isFullscreen ? t("exitFullscreen") : t("enterFullscreen")}
+                aria-label={t("enterFullscreen")}
                 tooltipAlignment="center"
                 onClick={toggleFullscreen}
                 className={styles.headerActions}
               >
-                {isFullscreen ? <Minimize size={20} /> : <Maximize size={20} />}
+                <Maximize size={20} />
               </HeaderGlobalAction>
+            )}
+
+            <UserMenu
+              contestMode
+              contest={contest}
+              onContestRefresh={refreshContest}
+              settingsOnly={lockContestMenu}
+            />
+          </HeaderGlobalBar>
+
+          {showContestMenuToggle ? (
+            <SideMenu
+              isOpen={effectiveSideMenuOpen}
+              onClose={() => setSideMenuOpen(false)}
+            />
+          ) : null}
+        </Header>
+
+        <ExamModeMonitorModal
+          open={monitoringModalOpen}
+          onRequestClose={() => setMonitoringModalOpen(false)}
+        />
 
-              <UserMenu
-                contestMode
-                contest={contest}
-                onContestRefresh={refreshContest}
-                settingsOnly={lockContestMenu}
-              />
-            </HeaderGlobalBar>
-
-            {showContestMenuToggle ? (
-              <SideMenu
-                isOpen={effectiveSideMenuOpen}
-                onClose={() => setSideMenuOpen(false)}
-              />
-            ) : null}
-          </Header>
-
-          <ExamModeMonitorModal
-            open={monitoringModalOpen}
-            onRequestClose={() => setMonitoringModalOpen(false)}
-          />
-
-          <div className={styles.mainContent}>
-            <div className={styles.contentWrapper}>
-              {renderMainContent()}
-            </div>
+        <div className={styles.mainContent}>
+          <div className={styles.contentWrapper}>
+            {renderContestShellContent()}
           </div>
-
-          <ExamSubmissionProgressModal
-            state={submissionProgress.state}
-            onRequestClose={submissionProgress.close}
-          />
-
-          <Modal
-            open={errorModalOpen}
-            modalHeading={tc("message.error")}
-            passiveModal
-            onRequestClose={() => setErrorModalOpen(false)}
-          >
-            <p>{errorMessage}</p>
-          </Modal>
         </div>
-      )}
+
+        <ExamSubmissionProgressModal
+          state={submissionProgress.state}
+          onRequestClose={submissionProgress.close}
+        />
+
+        <Modal
+          open={errorModalOpen}
+          modalHeading={tc("message.error")}
+          passiveModal
+          onRequestClose={() => setErrorModalOpen(false)}
+        >
+          <p>{errorMessage}</p>
+        </Modal>
+      </div>
+      </ContestLayoutHeaderSlotContext.Provider>
     </ExamModeWrapper>
   );
 };

From 39e7fdf3eb2898a4d3b5d8bd9a8fd26d5959dda8 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 14:38:59 +0800
Subject: [PATCH 16/60] fix(contest-admin): tidy participant list header and
 insight card spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove the participant-list description ("依異常程度排序，快速掃描考生狀態。")
since the title is self-explanatory.

Drop the .card min-height: 8rem in AdminInsightRail; the rail cards now
size to their content + padding so the participant-distribution card
doesn't leave empty space below the meter chart.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../contest/components/admin/AdminInsightRail.module.scss    | 1 -
 .../contest/components/admin/AdminOverviewCommandCenter.tsx  | 5 +----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss b/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
index ee553864..14ae5080 100644
--- a/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
@@ -9,7 +9,6 @@
   display: grid;
   gap: 1rem;
   align-content: start;
-  min-height: 8rem;
   padding: 1.25rem;
   border-bottom: 1px solid var(--cds-border-subtle);
 }
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
index f7fe3afa..03cffbc3 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
@@ -842,10 +842,7 @@ export default function AdminOverviewCommandCenter({
   );
   const participantPanel = (
     <div className={styles.drilldownPanel}>
-      <BlockHeader
-        title="考生列表"
-        description="依異常程度排序，快速掃描考生狀態。"
-      />
+      <BlockHeader title="考生列表" />
       {participantMetricTags}
       {participantContent}
     </div>

From 50d05a3c42689a6480b3ecea0bb75cd6f41316c2 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 14:48:00 +0800
Subject: [PATCH 17/60] =?UTF-8?q?docs(spec):=20rework=20contest=20comm=20d?=
 =?UTF-8?q?esign=20=E2=80=94=20Conversation=20+=20Message=20+=20navbar=20b?=
 =?UTF-8?q?ell?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 Clarification，改為 ContestConversation + ContestMessage 雙向 thread
- ContestAnnouncement 維持純廣播（取消 target_user 計畫）
- 通知入口改為 ContestLayout navbar 鈴鐺（不再用 banner）
- 教師可從 AdminProctoringPanel 對特定學生主動開啟對話
- 學生可在 thread 中回覆教師
- 已讀仍用 localStorage（key 含 ann: / msg: 前綴）

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...6-05-05-contest-announcement-qna-design.md | 368 ++++++++++++------
 1 file changed, 249 insertions(+), 119 deletions(-)

diff --git a/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md b/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md
index 1817e6cb..b81a48bf 100644
--- a/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md
+++ b/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md
@@ -1,4 +1,4 @@
-# 競賽公告與提問功能 UX 設計
+# 競賽公告與對話功能 UX 設計
 
 - 日期：2026-05-05
 - 分支：dev
@@ -6,212 +6,342 @@
 
 ## 目標
 
-讓競賽中的「公告」與「Q&A 提問」功能在學生端與教師端形成一致、可被注意到的流程，並修正目前在答題畫面內完全看不到通知、教師無法在考試前後發公告的缺陷。
+讓競賽中三類訊息流——「廣播公告」、「老師–學生雙向對話」、「未讀通知」——形成一致、可被注意到的流程，並修正目前完全沒有通知入口、教師無法在考試前後發公告、學生無法回覆老師訊息的缺陷。
 
 ## 範圍與非範圍
 
 **範圍**
 
-- 學生在答題畫面（`PaperExamAnsweringScreen`）能被「通知」到新公告與新回覆。
-- 學生與教師在 contest dashboard / admin panel 上的完整公告與 Q&A 互動。
-- 教師端在競賽未開始 / 進行中 / 已結束三種狀態下都能發公告。
-- 既有 `ContestClarifications.tsx`（405 行混合元件）拆檔。
+- ContestLayout 頂部 navbar 新增「通知鈴鐺」入口，覆蓋所有 contest 子頁面（dashboard / 答題 / 排行榜 / admin）
+- 學生與教師可在 contest dashboard / admin panel 進行雙向對話（thread）
+- 教師可在 AdminProctoringPanel 對「特定學生」主動開啟對話
+- 廣播公告 (`ContestAnnouncement`)：教師可在競賽未開始 / 進行中 / 已結束三種狀態下都能發布
+- 移除舊 `Clarification` 模型與既有 `ContestClarifications.tsx` / 相關 UI
 
 **非範圍**
 
-- 不引入新的後端表（無 ReadReceipt、無 watermark 欄位）。
-- 不顯示「已讀人數 / 未讀名單」（後端沒有資料來源）。
-- 不做 SSE / WebSocket，沿用現有 polling。
-- 不做答題畫面內的提問（學生想提問需回 dashboard）。
-- 不修改既有競賽分數 / 排行榜 / 監考相關流程。
+- 不引入 ReadReceipt 表、不顯示「已讀人數 / 未讀名單」（已讀狀態用 localStorage）
+- 不做 SSE / WebSocket，沿用 polling
+- 不做答題畫面內直接提問入口（學生想開對話需回 dashboard）
+- 不修改既有競賽分數 / 排行榜 / 監考偵測流程
+- 不做「公開 Q&A」（所有對話僅老師與該學生可見）
+- 不保留 `Clarification` 舊資料（依使用者指示直接 drop table、不做 fallback）
 
 ## 現況差距
 
 | 既有 | 缺陷 |
 |---|---|
-| `ContestAnnouncement`、`Clarification` model | 缺「已讀」相關概念 |
-| `useClarifications` polling | 沒有未讀數計算 |
+| `Clarification` model | 只能「問一次答一次」，無法雙向多輪對話；老師無法主動開啟 |
+| `ContestAnnouncement` | 純廣播，老師無法只通知個別學生 |
 | `ContestClarifications.tsx` | 405 行單檔，混合公告 + Q&A + 三種 modal |
 | `ContestQAScreen` / `AdminClarificationsScreen` | 在「進行中以外」整段 readOnly，導致教師考試前後不能發公告 |
-| `PaperExamAnsweringScreen` | 完全沒有通知入口 |
-| Clarification list endpoint | 未確認 `is_public=true` 的提問對非作者學生是否可見 |
+| `ContestLayout` header | 沒有任何通知入口 |
+| `AdminProctoringPanel` | 沒有「對單一學生送訊息」的能力 |
 
 ## 設計
 
-### A. 已讀狀態：localStorage
+### A. 資料模型
 
-- 不動後端。每個學生瀏覽器自己記。
-- key：`qjudge.contest.{contestId}.readIds`
-- value：JSON 陣列，混存兩種前綴 id：
-  - `ann:{announcementId}`
-  - `clr:{clarificationId}:{answered_at_iso}`
-- 「未讀 clarification」嚴格定義為 `status='answered' AND clr:{id}:{answered_at} 不在 readIds 中`。亦即「沒被回覆過的 clarification」（pending）不算未讀，不會出 banner；教師若日後修改回覆造成 `answered_at` 改變，會視為新一輪未讀。
-- 已讀寫入時機：
-  - 答題畫面 NotificationModal 點「我已閱讀」或「✕」 → 把 modal 顯示的所有 id 一次寫入。
-  - Dashboard 上 `ContestAnnouncementList` / `ContestClarificationList` 的卡片進入 viewport（IntersectionObserver）→ 標單筆已讀。
-- 跨裝置 / 清快取會重新提示，這是接受的取捨（考試多半同一台電腦）。
+#### A.1 新增 `ContestConversation`
 
-### B. 未讀計算 hook：`useContestUnread`
+```
+contest          FK → Contest
+student          FK → User                 # 對話另一端的學生
+problem          FK → Problem (nullable)   # 學生提問可帶題目；老師主動私訊通常為 null
+initiated_by     CharField('student'|'teacher')
+status           CharField('open'|'resolved')
+created_at       DateTimeField
+updated_at       DateTimeField
+last_message_at  DateTimeField             # 用於排序與未讀判斷
+```
+
+- `(contest, student, problem)` 不設 unique：同一題、同一學生可有多次對話
+- `status` 預設 `'open'`；老師回覆後可手動 mark resolved；學生再 reply 自動回 `'open'`
+
+#### A.2 新增 `ContestMessage`
 
 ```
-useContestUnread(contestId, currentUserId): {
-  unreadAnnouncementIds: string[],
-  unreadClarificationIds: string[],   // 含「對我可見的」公開 Q&A 與「自己提問的私下新回覆」
-  unreadCount: number,                 // 兩者長度加總
-  markRead: (ids: string[]) => void,
-  markAllRead: () => void,
+conversation  FK → ContestConversation
+sender        FK → User
+sender_role   CharField('student'|'teacher')   # denormalized for clarity & queries
+content       TextField
+created_at    DateTimeField
+```
+
+- 一條 conversation 至少有一則 message（建立 conversation 時一併寫入第一則）
+- `sender_role` 在 create 時依 sender 的競賽角色決定，後端強制；前端不可指定
+
+#### A.3 移除 `Clarification`
+
+- Migration：drop table `contest_clarifications`
+- 同時移除所有引用：`models.py` 的 `Clarification` class、`serializers.py`、`views/`、`admin.py`、`urls.py` 的 router register、相關測試檔
+- 既有資料直接清除（依使用者指示）
+
+#### A.4 `ContestAnnouncement` 維持原狀（純廣播）
+
+- 不加 `target_user`（原計畫廢除）
+- 行為：老師發布 → 全部已加入該 contest 的學生都能看見
+
+### B. 已讀狀態：localStorage
+
+- 不動後端的 read 狀態。每個學生瀏覽器自己記
+- key：`qjudge.contest.{contestId}.readIds`
+- value：JSON 陣列，混存兩種前綴 id：
+  - `ann:{announcementId}`：對應廣播公告
+  - `msg:{messageId}`：對應 ContestMessage 中「對方傳給我」的訊息
+- 已讀寫入時機：
+  - Notification Modal 點「我已閱讀」或「✕」 → 把 modal 顯示的所有 id 一次寫入
+  - Dashboard 上 `ContestAnnouncementList` / `ContestConversationList` 的卡片進入 viewport（IntersectionObserver）→ 標單筆已讀
+  - 開啟 Conversation thread 時，把 thread 內所有對方訊息標已讀
+- 跨裝置 / 清快取會重新提示，這是接受的取捨
+
+### C. 未讀計算 hook：`useContestUnread`
+
+```ts
+useContestUnread(contestId, currentUserId, role): {
+  unreadAnnouncementIds: string[]      // 學生用
+  unreadMessageIds: string[]            // 學生用：對方傳給我且未讀的 message
+  pendingConversationCount: number      // 老師用：等我回的對話數
+  unreadCount: number
+  markRead: (ids: string[]) => void
+  markAllRead: () => void
 }
 ```
 
-- 內部 reuse 既有 `useClarifications`（取資料 + polling）。
-- 對學生：可見的 clarification = 自己發問的所有 + 其他人的 `is_public=true & status='answered'`。對「未讀」的計算只看其中 `status='answered'` 的子集合（見 §A 定義）。
-- 對教師：本 hook 不啟用 banner（教師不需要公告通知，自己發的）。
-- 對應 react state 變化會觸發 banner 的出現 / 消失。
+- 內部 polling 兩個 list endpoint：`/announcements/`、`/conversations/`（含每個 conversation 的最新一則 message 預覽）
+- 角色差異：
+  - **學生**：可見 conversation = 自己參與的；`unreadCount = unreadAnnouncementIds.length + unreadMessageIds.length`，其中 unreadMessageIds 取每個 conversation 中 `sender_role='teacher'` 且尚未在 localStorage 的訊息 id
+  - **教師 / 管理員**：可見全部 conversation；`unreadCount = pendingConversationCount`，定義為 `status='open' AND last_message.sender_role='student'`（=「等我回的對話」），不計公告
 
-### C. 學生端：答題畫面（`PaperExamAnsweringScreen`）
+### D. 通知入口：`ContestLayout` 頂部 navbar 鈴鐺
+
+**為何放 navbar 而不是答題畫面 banner**
+
+- 一個 ContestLayout 覆蓋所有 contest 子頁面，不只答題中
+- 不吃答題畫面的垂直空間
+- 跟既有 `HeaderGlobalBar` 一致風格
 
 **新增兩個元件**
 
-1. `ExamNotificationBanner.tsx`
-   - 位置：考試版面頂部，緊接 ExamNavigator 上方。
-   - 出現條件：`unreadCount > 0`。
-   - 文案：`你有 {unreadCount} 則新訊息 · 點此查看`。
-   - 行為：點擊整條 banner → 打開 `ExamNotificationModal`。`✕` 按鈕 = 直接 markAllRead 並關閉 banner（不必開 modal）。
-   - 樣式：Carbon `InlineNotification` (kind=`info`) 為主，使用 `--cds-support-info` 顏色。
-
-2. `ExamNotificationModal.tsx`
-   - Carbon `Modal`，`passiveModal` 形式。
-   - 內容分兩區（依時間倒序，未讀置頂並用分隔線與已讀分開）：
-     - **新公告**：title / content / 時間。
-     - **新回覆**：題號（若有）/ 自己原本的問題摘要 / 教師回覆內容 / 時間。
+1. **`ContestNotificationBell.tsx`**（掛在 `ContestLayout` 的 `<HeaderGlobalBar>` 內）
+   - Carbon `HeaderGlobalAction`，icon 用 `@carbon/icons-react` 的 `Notification`
+   - 右上角紅色數字 badge：`unreadCount`（>9 顯示 `9+`，=0 不顯示 badge）
+   - 角色差異：
+     - **學生**：點擊 → 開 `ContestNotificationModal`（見下）
+     - **教師 / 管理員**：點擊 → 直接導向 `AdminClarificationsScreen?status=open&awaiting=teacher`，不開 modal（待回的對話需要的是處理動作而非閱讀）
+
+2. **`ContestNotificationModal.tsx`**（學生用）
+   - Carbon `Modal`，`passiveModal`
+   - 內容兩區（依時間倒序，未讀置頂並用分隔線與已讀分開）：
+     - **新公告**：title / content / 時間
+     - **新訊息**：對話另一端 (老師) / 訊息內容（截斷）/ 題目（若有）/ 時間
    - 底部按鈕：
-     - Primary：「我已閱讀」→ markAllRead，關閉。
-     - Secondary：「前往討論區」→ 導向 contest dashboard 的 Q&A tab；保持 modal 已標已讀的副作用。
-   - **此 Modal 不含「提問」、「公開 Q&A 列表」、「歷史公告列表」**。
+     - Primary：「我已閱讀」→ markAllRead，關閉
+     - Secondary：「前往討論」→ 導向 contest dashboard 的 Q&A tab；保持 modal 已標已讀的副作用
+   - **此 Modal 僅是通知摘要，不含發起新對話 / 完整歷史**
+
+### E. 學生端：Contest Dashboard / Q&A Tab
+
+維持 `ContestQAScreen` 入口，但元件拆檔（見 §H）。包含：
+
+- 公告完整歷史列表（含已讀與未讀）
+- 「我的對話」列表：每筆顯示 `題號（若有）/ 對方最新訊息預覽 / 時間 / 未讀紅點`
+- 點開單筆 → `ConversationThreadView`：時序顯示所有 message，底部有輸入框可繼續發訊（依下表權限決定 enabled）
+- 「新增對話」按鈕（原「我要提問」）：開 `StartConversationModal`，可選題目 + 第一則訊息內容
+- 公告卡片 / 對話列表項進入 viewport 標已讀；開啟 thread 時 thread 內訊息全部標已讀
 
-### D. 學生端：Contest Dashboard / Q&A Tab
+### F. 權限狀態表
 
-維持 `ContestQAScreen` 入口，但元件拆檔（見 §G）。包含：
+| 競賽狀態 | 學生看公告/對話 | 學生發起新對話 | 學生在現有對話中回覆 | 教師發公告 | 教師回覆對話 | 教師主動開對話（私訊） |
+|---|---|---|---|---|---|---|
+| 未開始（published, now < startTime） | ✅ | ❌（disabled，hint：「考試開始後可發問」） | ✅ | ✅ | ✅ | ✅ |
+| 進行中 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
+| 已結束（now > endTime） | ✅（只讀） | ❌ | ❌（thread 變唯讀） | ✅ | ✅ | ✅ |
 
-- 公告完整歷史列表（含已讀與未讀）。
-- 「我的提問」列表 + 狀態（pending / answered）+ 教師回覆內容。
-- 「公開 Q&A」列表（`is_public=true` 的提問）：匿名顯示，僅顯示「題號 / 問題 / 公開回覆」，不顯示提問者帳號。
-- 「我要提問」按鈕（依下表權限決定 enabled）。
-- 卡片進入 viewport 時對單筆 id 標已讀（`useContestUnread.markRead`）。
+需要對應修改現行 `isReadOnly` 邏輯：原本 `contestStatus !== "published" || isEnded` 一律鎖死所有操作；改為**僅鎖學生的「發起／回覆」相關按鈕**，教師永不鎖。
 
-### E. 權限狀態表
+### G. 教師端
 
-| 競賽狀態 | 學生看公告 | 學生發問 | 教師發公告 | 教師回覆 |
-|---|---|---|---|---|
-| 未開始（published, now < startTime） | ✅ | ❌（按鈕 disabled，hint：「考試開始後可發問」） | ✅ | ✅ |
-| 進行中 | ✅ | ✅ | ✅ | ✅ |
-| 已結束（now > endTime） | ✅（只讀） | ❌ | ✅ | ✅ |
+#### G.1 `AdminClarificationsScreen` 改為 `AdminConversationsScreen`
 
-需要對應修改 `ContestClarifications.tsx` 既有的 `isReadOnly` 邏輯：原本 `contestStatus !== "published" || isEnded` 一律鎖死所有操作；改為**僅鎖學生的「我要提問」**，教師發公告 / 回覆永不鎖。
+- 對話列表頂部加 Filter：`全部 / 等我回 / 已回覆 / 已結案 / 依題目`
+  - `等我回 = status=open AND last_message.sender_role='student'`
+- 預設排序：`等我回` 優先，再依 `last_message_at` 由新到舊
+- 點開單筆 → 同 `ConversationThreadView`，老師可：
+  - 在底部輸入框 append message（隨 sender_role 自動為 teacher）
+  - 點「標記為已結案」→ status='resolved'
+- 公告區「發布公告」按鈕在所有競賽狀態下可用
 
-### F. 教師端：`AdminClarificationsScreen`
+#### G.2 `AdminProctoringPanel` 新增動作
 
-- 提問列表頂部加 Filter：`全部 / 待回覆 / 已回覆 / 依題目`。
-- 預設排序：`status=pending` 優先，再依 `created_at` 由新到舊。
-- 回覆 Modal 維持現有「`公開 / 私下`」切換。
-- 公告區「發布公告」按鈕在所有競賽狀態下可用。
+- 在每位被監考的學生卡片上新增「📩 傳送訊息」按鈕
+- 點擊 → 開 `StartConversationModal`（變體）：
+  - 標頭顯示「給：{username}」
+  - TextArea 輸入第一則訊息內容
+  - 不需選題目（problem=null）
+  - Primary：「送出」→ 呼叫 `POST /conversations/`，後端依 sender 自動帶 `initiated_by='teacher'`
+- 該訊息會出現在學生 navbar bell 與 dashboard「我的對話」中
 
-### G. 元件拆檔
+### H. 元件拆檔
 
-把現行 `frontend/src/features/contest/components/ContestClarifications.tsx` 拆掉：
+把現行 `frontend/src/features/contest/components/ContestClarifications.tsx` 整檔砍掉。新結構：
 
 ```
 frontend/src/features/contest/components/discussion/
-  ContestAnnouncementList.tsx        # 公告列表（顯示 + 未讀標記）
-  ContestClarificationList.tsx       # Q&A 列表（含 tab：我的提問 / 公開 Q&A）
-  AskClarificationModal.tsx          # 學生發問 modal
-  ReplyClarificationModal.tsx        # 教師回覆 modal
+  ContestAnnouncementList.tsx        # 公告列表
+  ContestConversationList.tsx        # 對話列表（學生：我的對話；老師：所有對話）
+  ConversationThreadView.tsx         # 點開單筆對話的 thread 顯示 + 回覆輸入框
+  StartConversationModal.tsx         # 學生「新增對話」/ 老師「傳送訊息」共用
   PostAnnouncementModal.tsx          # 教師發公告 modal
-  ContestDiscussionView.tsx          # 組合上述五個，給 ContestQAScreen / AdminClarificationsScreen 用
+  ContestDiscussionView.tsx          # 組合給 ContestQAScreen / AdminConversationsScreen 用
   index.ts
 
-frontend/src/features/contest/components/exam/
-  ExamNotificationBanner.tsx
-  ExamNotificationModal.tsx
+frontend/src/features/contest/components/notification/
+  ContestNotificationBell.tsx
+  ContestNotificationModal.tsx
 
 frontend/src/features/contest/hooks/
   useContestUnread.ts
+  useContestConversations.ts          # 取代 useClarifications，封裝 polling + thread 操作
 ```
 
-刪除：`ContestClarifications.tsx`、`AnnouncementSectionLayout.tsx`（功能搬入 `ContestAnnouncementList`）、`DiscussionsSection.tsx`（同樣搬入 `ContestClarificationList`）。
+刪除：`ContestClarifications.tsx`、`AnnouncementSectionLayout.tsx`、`DiscussionsSection.tsx`、`useClarifications.ts`。
+
+### I. 後端改動
+
+#### I.1 新增 model + migration
+
+- 建立 `contest_conversations`、`contest_messages` 兩張表（schema 如 §A）
+- Migration 同時 `DROP TABLE contest_clarifications`（依使用者指示，不做資料保留）
+
+#### I.2 新增 ViewSets
 
-### H. 後端最小改動
+- **`ContestConversationViewSet`**（巢狀於 `/contests/{id}/conversations/`）
+  - list：
+    - 學生 queryset：`Q(student=user)`
+    - 教師 queryset：所有 contest 內 conversation
+  - filter：
+    - `?status=open|resolved`
+    - `?awaiting=teacher|student`（等對方回的對話；對學生通常等於 unread message 來源）
+    - `?problem={uuid}`
+  - create payload：`{ problem_id?, initial_content }`，後端依 user 角色決定 `initiated_by` 與 `student`：
+    - 學生 create：`student=user`、`initiated_by='student'`
+    - 教師 create：payload 須提供 `student_id`（指定收件學生）、`initiated_by='teacher'`、permission 限教師 / 管理員
+  - retrieve：回傳 conversation + 所有 messages
+  - 自訂 action `POST /conversations/{id}/messages/`：append message（前端送 `{ content }`，後端依 sender 自動填 `sender_role`、檢查權限）
+  - 自訂 action `PATCH /conversations/{id}/resolve/`：限教師 / 管理員，把 status 設為 resolved
 
-僅修兩個 ViewSet，不新增表 / 欄位 / 端點：
+- **`ContestMessageViewSet`** 不另外開 root，僅以 nested action 形式存在
 
-1. **`ClarificationViewSet` query filter**：
-   - 支援 `?status=pending|answered`
-   - 支援 `?problem={uuid}`
-   - 學生端 list queryset：`Q(author=user) | Q(is_public=True, status='answered')`（公開 Q&A 必須已被回覆才出現，避免「公開待答」造成噪音）。
-   - 教師端 list queryset：所有 contest 內 clarification。
+#### I.3 既有 ViewSet 調整
 
-2. **`ContestAnnouncementViewSet`**：無需改動 schema。確認 list permission 對所有 enrolled 學生開放，create / update / delete 限教師 + 管理員（既有行為應已正確，僅做驗證）。
+- `ClarificationViewSet`：刪除整個檔案
+- `urls.py`：移除 `clarifications` router 註冊
+- `ContestAnnouncementViewSet`：無 schema 變更；「進行中以外整段 readOnly」是前端邏輯，後端原本就允許教師任何時候發公告，僅做測試覆蓋確認
 
-如測試發現 list queryset 與此規格不符，視為 bug 修補。
+#### I.4 權限
+
+- 學生對 `ContestConversationViewSet`：
+  - list：僅自己參與的
+  - retrieve：僅自己參與的
+  - create：限自己作為 student
+  - append message：限本人是 conversation.student，且該 contest 未結束（依 §F 表）
+  - resolve：禁止
+- 教師 / 管理員：全部允許
 
 ## 資料流
 
 ```
 [Polling 30s]
   ↓
-useClarifications(contestId)  ──→  raw announcements + clarifications
+useContestConversations(contestId)  ──→  conversations + latest message preview
+useContestAnnouncements(contestId)  ──→  announcements
                                           │
                                           ▼
-                          useContestUnread(contestId, userId)
+                          useContestUnread(contestId, userId, role)
                                           │
                 ┌────────────────────────┼─────────────────────────┐
                 ▼                        ▼                         ▼
-   ExamNotificationBanner      ContestAnnouncementList     ContestClarificationList
-   (only when unread > 0)      (in-viewport markRead)      (in-viewport markRead)
-                │
-                ▼
-        ExamNotificationModal
-        (markAllRead on close)
+   ContestNotificationBell      ContestAnnouncementList    ContestConversationList
+   (badge = unreadCount)        (in-viewport markRead)     (in-viewport markRead)
+                │                                                  │
+                ▼                                                  ▼
+      ContestNotificationModal                          ConversationThreadView
+      (markAllRead on close, 學生用)                    (open → mark thread msgs read,
+                                                         post → append message API)
 ```
 
 ## 錯誤處理
 
-- 發布 / 回覆 / 提問 API 失敗：沿用現有 `showError(...)` modal，文案再依操作分（已存在）。
-- localStorage 寫入失敗（quota / private mode）：catch 後 log warn，不擋 UI 流程；下次仍會視為未讀，使用者體驗等同 banner 多顯示一次。
-- polling 失敗：沿用 `useClarifications` 既有錯誤狀態，不在 banner 顯示錯誤訊息（避免雜訊）。
+- 發布公告 / 開對話 / 回覆訊息 / resolve API 失敗：沿用 `showError(...)` modal
+- localStorage 寫入失敗（quota / private mode）：catch 後 log warn，不擋 UI
+- polling 失敗：保留 loaded state，不在鈴鐺顯示錯誤訊息
+- thread 中追加訊息送出失敗：保留輸入框內容，顯示 inline 錯誤；不清空使用者打的字
 
 ## 測試重點
 
-- `useContestUnread`：給定 mock list + localStorage state，驗證 unreadCount 與 markRead 的副作用。
-- 權限：未開始 / 進行中 / 已結束三狀態下，學生提問按鈕 enabled / disabled 與教師發公告按鈕都 enabled 的行為。
-- 答題畫面 banner：`unreadCount` 變化時的出現 / 消失；點擊 / 點 ✕ / 點「我已閱讀」三個入口都把 ids 寫進 localStorage。
-- Modal 顯示順序：未讀置頂、已讀置底、各自時間倒序。
-- 公開 Q&A 匿名：DOM 上不出現提問者 username。
-- Backend filter：`?status=pending` 與 `?problem={uuid}` 對學生 / 教師兩個角色的 queryset 結果。
-- Backend 公開 Q&A 可見性：「他人發的 `is_public=true & status='answered'`」對學生可見；「他人發的 `is_public=false`」對學生不可見。
+**Frontend**
 
-## 影響的檔案（粗估）
+- `useContestUnread`：學生 / 教師兩種角色下 unreadCount 計算；markRead / markAllRead 寫入 localStorage
+- 鈴鐺 badge：`unreadCount` 變化時出現 / 消失，>9 顯示 `9+`
+- 學生 Modal：未讀置頂、已讀置底、各自時間倒序
+- 教師鈴鐺點擊：導向 `?status=open&awaiting=teacher`
+- ConversationThreadView：開啟時把 thread 內對方訊息標已讀；送訊失敗保留輸入內容；end-state 對話唯讀
+- 權限：未開始 / 進行中 / 已結束三狀態下，學生「新增對話」、「在 thread 中回覆」、教師發公告 / 私訊按鈕的 enabled / disabled
+- AdminProctoringPanel：點「傳送訊息」打開 modal，送出後呼叫 conversation create API 帶 `student_id`
 
 **Backend**
-- `backend/apps/contests/views/clarification.py`（filter + queryset）
-- `backend/apps/contests/tests/`（新增 viewset filter + 可見性測試）
+
+- `ContestConversationViewSet`：
+  - 學生 list 只看自己；教師 list 看全部
+  - 學生 create 不能指定 `student_id`；教師可指定
+  - 學生 append message 限自己參與；教師 append 任意 conversation
+  - resolve 限教師
+  - filter `?status` / `?awaiting` / `?problem` 各自正確
+  - 競賽結束後學生 append 被拒（403）
+- Migration：drop `contest_clarifications` table 後相關 import 不留殘骸
+- `ContestAnnouncementViewSet`：教師在三種競賽狀態下都能 create
+
+## 影響的檔案（粗估）
+
+**Backend（新增）**
+- `backend/apps/contests/migrations/00XX_drop_clarification_add_conversation.py`
+- `backend/apps/contests/views/conversation.py`
+- `backend/apps/contests/serializers.py`（新增 `ContestConversationSerializer`、`ContestMessageSerializer`）
+- `backend/apps/contests/tests/conversation/`
+
+**Backend（修改）**
+- `backend/apps/contests/models.py`（移除 Clarification、新增 Conversation/Message）
+- `backend/apps/contests/admin.py`（移除 Clarification、新增 Conversation/Message）
+- `backend/apps/contests/urls.py`（換 router）
+- `backend/apps/contests/permissions.py`
+
+**Backend（刪除）**
+- 所有 Clarification 相關 view / serializer / 測試 / 引用
 
 **Frontend（新增）**
-- `features/contest/components/discussion/*`
-- `features/contest/components/exam/ExamNotificationBanner.tsx`
-- `features/contest/components/exam/ExamNotificationModal.tsx`
+- `features/contest/components/discussion/*`（如 §H）
+- `features/contest/components/notification/ContestNotificationBell.tsx`
+- `features/contest/components/notification/ContestNotificationModal.tsx`
 - `features/contest/hooks/useContestUnread.ts`
+- `features/contest/hooks/useContestConversations.ts`
+- `infrastructure/api/repositories` 新增 conversation / message endpoints
+- `core/entities/contest.entity` 新增 `ContestConversation`、`ContestMessage` 類型
 
 **Frontend（修改）**
-- `features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx`（掛 banner）
+- `features/contest/components/layout/ContestLayout.tsx`（在 `HeaderGlobalBar` 掛鈴鐺）
 - `features/contest/screens/ContestQAScreen.tsx`（改用 `ContestDiscussionView`）
-- `features/contest/screens/admin/panels/AdminClarificationsScreen.tsx`（改用 `ContestDiscussionView` + filter）
+- `features/contest/screens/admin/panels/AdminClarificationsScreen.tsx` → 改名為 `AdminConversationsScreen.tsx`
+- `features/contest/screens/admin/panels/AdminProctoringPanel.tsx`（每位學生加「📩 傳送訊息」按鈕）
+- `features/contest/modules/AdminPanelRendererRegistry.tsx`（key 改為 `conversations`）
+- `features/contest/tabConfig.ts` / 路由若有 hardcoded `clarifications` key 一併改
 
 **Frontend（刪除）**
 - `features/contest/components/ContestClarifications.tsx`
 - `features/contest/components/AnnouncementSectionLayout.tsx`
 - `features/contest/components/DiscussionsSection.tsx`
+- `features/contest/hooks/useClarifications.ts`
 
 ## 開放問題
 
-無。所有 UX 取捨已在腦力激盪階段確認。
+無。

From 48d11e70ae59de3a2ca96953ff3304efd07c86bc Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 14:53:51 +0800
Subject: [PATCH 18/60] docs(spec): drop conversation status & initiated_by
 fields
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

兩個欄位都可由訊息推算出來，不必額外存：
- 「進行中／已回覆」看 last_message.sender_role
- 「誰發起的」看第一則 message 的 sender_role
- list endpoint 多回傳 first_sender_role 供前端使用

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...6-05-05-contest-announcement-qna-design.md | 39 ++++++++-----------
 1 file changed, 16 insertions(+), 23 deletions(-)

diff --git a/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md b/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md
index b81a48bf..6762b661 100644
--- a/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md
+++ b/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md
@@ -48,15 +48,13 @@
 contest          FK → Contest
 student          FK → User                 # 對話另一端的學生
 problem          FK → Problem (nullable)   # 學生提問可帶題目；老師主動私訊通常為 null
-initiated_by     CharField('student'|'teacher')
-status           CharField('open'|'resolved')
 created_at       DateTimeField
-updated_at       DateTimeField
 last_message_at  DateTimeField             # 用於排序與未讀判斷
 ```
 
 - `(contest, student, problem)` 不設 unique：同一題、同一學生可有多次對話
-- `status` 預設 `'open'`；老師回覆後可手動 mark resolved；學生再 reply 自動回 `'open'`
+- 無 status 欄位：「進行中／待回覆」由 `last_message.sender_role` 表達
+- 無 `initiated_by` 欄位：「誰發起的」由第一則 message 的 `sender_role` 表達；list endpoint 回傳時附 `first_sender_role` 給前端用（避免每次 join messages 表）
 
 #### A.2 新增 `ContestMessage`
 
@@ -111,7 +109,7 @@ useContestUnread(contestId, currentUserId, role): {
 - 內部 polling 兩個 list endpoint：`/announcements/`、`/conversations/`（含每個 conversation 的最新一則 message 預覽）
 - 角色差異：
   - **學生**：可見 conversation = 自己參與的；`unreadCount = unreadAnnouncementIds.length + unreadMessageIds.length`，其中 unreadMessageIds 取每個 conversation 中 `sender_role='teacher'` 且尚未在 localStorage 的訊息 id
-  - **教師 / 管理員**：可見全部 conversation；`unreadCount = pendingConversationCount`，定義為 `status='open' AND last_message.sender_role='student'`（=「等我回的對話」），不計公告
+  - **教師 / 管理員**：可見全部 conversation；`unreadCount = pendingConversationCount`，定義為 `last_message.sender_role='student'`（=「最後一則是學生發的，等我回」），不計公告
 
 ### D. 通知入口：`ContestLayout` 頂部 navbar 鈴鐺
 
@@ -128,7 +126,7 @@ useContestUnread(contestId, currentUserId, role): {
    - 右上角紅色數字 badge：`unreadCount`（>9 顯示 `9+`，=0 不顯示 badge）
    - 角色差異：
      - **學生**：點擊 → 開 `ContestNotificationModal`（見下）
-     - **教師 / 管理員**：點擊 → 直接導向 `AdminClarificationsScreen?status=open&awaiting=teacher`，不開 modal（待回的對話需要的是處理動作而非閱讀）
+     - **教師 / 管理員**：點擊 → 直接導向 `AdminConversationsScreen?awaiting=teacher`，不開 modal（待回的對話需要的是處理動作而非閱讀）
 
 2. **`ContestNotificationModal.tsx`**（學生用）
    - Carbon `Modal`，`passiveModal`
@@ -164,12 +162,11 @@ useContestUnread(contestId, currentUserId, role): {
 
 #### G.1 `AdminClarificationsScreen` 改為 `AdminConversationsScreen`
 
-- 對話列表頂部加 Filter：`全部 / 等我回 / 已回覆 / 已結案 / 依題目`
-  - `等我回 = status=open AND last_message.sender_role='student'`
+- 對話列表頂部加 Filter：`全部 / 等我回 / 我已回 / 依題目`
+  - `等我回 = last_message.sender_role='student'`
+  - `我已回 = last_message.sender_role='teacher'`
 - 預設排序：`等我回` 優先，再依 `last_message_at` 由新到舊
-- 點開單筆 → 同 `ConversationThreadView`，老師可：
-  - 在底部輸入框 append message（隨 sender_role 自動為 teacher）
-  - 點「標記為已結案」→ status='resolved'
+- 點開單筆 → 同 `ConversationThreadView`，老師在底部輸入框 append message（sender_role 自動為 teacher）
 - 公告區「發布公告」按鈕在所有競賽狀態下可用
 
 #### G.2 `AdminProctoringPanel` 新增動作
@@ -179,7 +176,7 @@ useContestUnread(contestId, currentUserId, role): {
   - 標頭顯示「給：{username}」
   - TextArea 輸入第一則訊息內容
   - 不需選題目（problem=null）
-  - Primary：「送出」→ 呼叫 `POST /conversations/`，後端依 sender 自動帶 `initiated_by='teacher'`
+  - Primary：「送出」→ 呼叫 `POST /conversations/`，後端依 sender 寫入第一則 `Message(sender_role='teacher')`
 - 該訊息會出現在學生 navbar bell 與 dashboard「我的對話」中
 
 ### H. 元件拆檔
@@ -221,15 +218,13 @@ frontend/src/features/contest/hooks/
     - 學生 queryset：`Q(student=user)`
     - 教師 queryset：所有 contest 內 conversation
   - filter：
-    - `?status=open|resolved`
-    - `?awaiting=teacher|student`（等對方回的對話；對學生通常等於 unread message 來源）
+    - `?awaiting=teacher|student`（依 `last_message.sender_role` 判斷誰在等對方回）
     - `?problem={uuid}`
-  - create payload：`{ problem_id?, initial_content }`，後端依 user 角色決定 `initiated_by` 與 `student`：
-    - 學生 create：`student=user`、`initiated_by='student'`
-    - 教師 create：payload 須提供 `student_id`（指定收件學生）、`initiated_by='teacher'`、permission 限教師 / 管理員
+  - create payload：`{ problem_id?, initial_content, student_id? }`，後端依 user 角色決定 `student` 與第一則 message 的 `sender_role`：
+    - 學生 create：忽略 `student_id`，`student=user`，第一則 `sender_role='student'`
+    - 教師 create：必須提供 `student_id`，第一則 `sender_role='teacher'`，permission 限教師 / 管理員
   - retrieve：回傳 conversation + 所有 messages
   - 自訂 action `POST /conversations/{id}/messages/`：append message（前端送 `{ content }`，後端依 sender 自動填 `sender_role`、檢查權限）
-  - 自訂 action `PATCH /conversations/{id}/resolve/`：限教師 / 管理員，把 status 設為 resolved
 
 - **`ContestMessageViewSet`** 不另外開 root，僅以 nested action 形式存在
 
@@ -246,7 +241,6 @@ frontend/src/features/contest/hooks/
   - retrieve：僅自己參與的
   - create：限自己作為 student
   - append message：限本人是 conversation.student，且該 contest 未結束（依 §F 表）
-  - resolve：禁止
 - 教師 / 管理員：全部允許
 
 ## 資料流
@@ -273,7 +267,7 @@ useContestAnnouncements(contestId)  ──→  announcements
 
 ## 錯誤處理
 
-- 發布公告 / 開對話 / 回覆訊息 / resolve API 失敗：沿用 `showError(...)` modal
+- 發布公告 / 開對話 / 回覆訊息 API 失敗：沿用 `showError(...)` modal
 - localStorage 寫入失敗（quota / private mode）：catch 後 log warn，不擋 UI
 - polling 失敗：保留 loaded state，不在鈴鐺顯示錯誤訊息
 - thread 中追加訊息送出失敗：保留輸入框內容，顯示 inline 錯誤；不清空使用者打的字
@@ -285,7 +279,7 @@ useContestAnnouncements(contestId)  ──→  announcements
 - `useContestUnread`：學生 / 教師兩種角色下 unreadCount 計算；markRead / markAllRead 寫入 localStorage
 - 鈴鐺 badge：`unreadCount` 變化時出現 / 消失，>9 顯示 `9+`
 - 學生 Modal：未讀置頂、已讀置底、各自時間倒序
-- 教師鈴鐺點擊：導向 `?status=open&awaiting=teacher`
+- 教師鈴鐺點擊：導向 `?awaiting=teacher`
 - ConversationThreadView：開啟時把 thread 內對方訊息標已讀；送訊失敗保留輸入內容；end-state 對話唯讀
 - 權限：未開始 / 進行中 / 已結束三狀態下，學生「新增對話」、「在 thread 中回覆」、教師發公告 / 私訊按鈕的 enabled / disabled
 - AdminProctoringPanel：點「傳送訊息」打開 modal，送出後呼叫 conversation create API 帶 `student_id`
@@ -296,8 +290,7 @@ useContestAnnouncements(contestId)  ──→  announcements
   - 學生 list 只看自己；教師 list 看全部
   - 學生 create 不能指定 `student_id`；教師可指定
   - 學生 append message 限自己參與；教師 append 任意 conversation
-  - resolve 限教師
-  - filter `?status` / `?awaiting` / `?problem` 各自正確
+  - filter `?awaiting` / `?problem` 各自正確
   - 競賽結束後學生 append 被拒（403）
 - Migration：drop `contest_clarifications` table 後相關 import 不留殘骸
 - `ContestAnnouncementViewSet`：教師在三種競賽狀態下都能 create

From ff12c5708ebe839775e899d1493952b955857ec8 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 14:58:18 +0800
Subject: [PATCH 19/60] docs(spec): drop problem field, unique (contest,
 student), simpler dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ContestConversation 砍掉 problem 欄位
- (contest, student) 加 unique 約束：每個學生在一個 contest 內一條對話
- 學生端 dashboard 直接展開 thread（不需要列表）
- 教師端 filter 簡化為「全部 / 未回 / 已回」
- Proctoring「傳送訊息」走 ensure-and-append（idempotent）

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...6-05-05-contest-announcement-qna-design.md | 84 ++++++++++---------
 1 file changed, 43 insertions(+), 41 deletions(-)

diff --git a/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md b/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md
index 6762b661..26049ec1 100644
--- a/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md
+++ b/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md
@@ -47,14 +47,12 @@
 ```
 contest          FK → Contest
 student          FK → User                 # 對話另一端的學生
-problem          FK → Problem (nullable)   # 學生提問可帶題目；老師主動私訊通常為 null
 created_at       DateTimeField
 last_message_at  DateTimeField             # 用於排序與未讀判斷
 ```
 
-- `(contest, student, problem)` 不設 unique：同一題、同一學生可有多次對話
-- 無 status 欄位：「進行中／待回覆」由 `last_message.sender_role` 表達
-- 無 `initiated_by` 欄位：「誰發起的」由第一則 message 的 `sender_role` 表達；list endpoint 回傳時附 `first_sender_role` 給前端用（避免每次 join messages 表）
+- `(contest, student)` **unique**：每個學生在一個 contest 內僅一條對話串（避免無法區分的多條對話）
+- 無 status / initiated_by / problem 欄位；所有「狀態」與「誰發話」都由 message 表表達
 
 #### A.2 新增 `ContestMessage`
 
@@ -140,44 +138,45 @@ useContestUnread(contestId, currentUserId, role): {
 
 ### E. 學生端：Contest Dashboard / Q&A Tab
 
-維持 `ContestQAScreen` 入口，但元件拆檔（見 §H）。包含：
+維持 `ContestQAScreen` 入口，但元件拆檔（見 §H）。佈局：
 
-- 公告完整歷史列表（含已讀與未讀）
-- 「我的對話」列表：每筆顯示 `題號（若有）/ 對方最新訊息預覽 / 時間 / 未讀紅點`
-- 點開單筆 → `ConversationThreadView`：時序顯示所有 message，底部有輸入框可繼續發訊（依下表權限決定 enabled）
-- 「新增對話」按鈕（原「我要提問」）：開 `StartConversationModal`，可選題目 + 第一則訊息內容
-- 公告卡片 / 對話列表項進入 viewport 標已讀；開啟 thread 時 thread 內訊息全部標已讀
+- 上半部：公告完整歷史列表（含已讀與未讀）
+- 下半部：與老師的單一對話 thread —— `ConversationThreadView` 直接展開（不需要列表，每個學生只有一條）
+  - 若尚無對話：顯示空狀態「點下方輸入框開始你的提問」+ 輸入框
+  - 若已有對話：時序顯示所有 message，底部輸入框可繼續發訊（依下表權限決定 enabled）
+  - 第一次送訊時若 conversation 不存在，前端先呼叫 `POST /conversations/` 建立 + 寫第一則 message；之後都呼叫 `POST /conversations/{id}/messages/`
+- 公告卡片進入 viewport 標已讀；開啟頁面時對話 thread 內所有訊息直接標已讀
 
 ### F. 權限狀態表
 
-| 競賽狀態 | 學生看公告/對話 | 學生發起新對話 | 學生在現有對話中回覆 | 教師發公告 | 教師回覆對話 | 教師主動開對話（私訊） |
-|---|---|---|---|---|---|---|
-| 未開始（published, now < startTime） | ✅ | ❌（disabled，hint：「考試開始後可發問」） | ✅ | ✅ | ✅ | ✅ |
-| 進行中 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
-| 已結束（now > endTime） | ✅（只讀） | ❌ | ❌（thread 變唯讀） | ✅ | ✅ | ✅ |
+| 競賽狀態 | 學生看公告/對話 | 學生發訊（含首則） | 教師發公告 | 教師發訊（含首則） |
+|---|---|---|---|---|
+| 未開始（published, now < startTime） | ✅ | ❌（disabled，hint：「考試開始後可發問」） | ✅ | ✅ |
+| 進行中 | ✅ | ✅ | ✅ | ✅ |
+| 已結束（now > endTime） | ✅（只讀） | ❌（輸入框 disabled） | ✅ | ✅ |
 
-需要對應修改現行 `isReadOnly` 邏輯：原本 `contestStatus !== "published" || isEnded` 一律鎖死所有操作；改為**僅鎖學生的「發起／回覆」相關按鈕**，教師永不鎖。
+需要對應修改現行 `isReadOnly` 邏輯：原本 `contestStatus !== "published" || isEnded` 一律鎖死所有操作；改為**僅鎖學生的訊息輸入框**，教師永不鎖。
 
 ### G. 教師端
 
 #### G.1 `AdminClarificationsScreen` 改為 `AdminConversationsScreen`
 
-- 對話列表頂部加 Filter：`全部 / 等我回 / 我已回 / 依題目`
-  - `等我回 = last_message.sender_role='student'`
-  - `我已回 = last_message.sender_role='teacher'`
-- 預設排序：`等我回` 優先，再依 `last_message_at` 由新到舊
-- 點開單筆 → 同 `ConversationThreadView`，老師在底部輸入框 append message（sender_role 自動為 teacher）
+- 對話列表頂部加 Filter：`全部 / 未回 / 已回`
+  - `未回 = last_message.sender_role='student'`
+  - `已回 = last_message.sender_role='teacher'`
+- 預設排序：`未回` 優先，再依 `last_message_at` 由新到舊
+- 每筆顯示：學生 username / 最後一則訊息預覽 / 時間 / `未回` badge（若為未回）
+- 點開單筆 → `ConversationThreadView`，老師在底部輸入框 append message（sender_role 自動為 teacher）
 - 公告區「發布公告」按鈕在所有競賽狀態下可用
 
 #### G.2 `AdminProctoringPanel` 新增動作
 
 - 在每位被監考的學生卡片上新增「📩 傳送訊息」按鈕
-- 點擊 → 開 `StartConversationModal`（變體）：
+- 點擊 → 開 `SendMessageModal`：
   - 標頭顯示「給：{username}」
-  - TextArea 輸入第一則訊息內容
-  - 不需選題目（problem=null）
-  - Primary：「送出」→ 呼叫 `POST /conversations/`，後端依 sender 寫入第一則 `Message(sender_role='teacher')`
-- 該訊息會出現在學生 navbar bell 與 dashboard「我的對話」中
+  - TextArea 輸入訊息內容
+  - Primary：「送出」→ 走 `POST /conversations/{contestId}/messages-to-student/`（見 §I.2 的 ensure-and-append action），後端：若 `(contest, student)` 已有對話則 append；否則 create + 寫入第一則 `Message(sender_role='teacher')`
+- 該訊息會出現在學生 navbar bell 與 dashboard 對話 thread 中
 
 ### H. 元件拆檔
 
@@ -186,11 +185,12 @@ useContestUnread(contestId, currentUserId, role): {
 ```
 frontend/src/features/contest/components/discussion/
   ContestAnnouncementList.tsx        # 公告列表
-  ContestConversationList.tsx        # 對話列表（學生：我的對話；老師：所有對話）
-  ConversationThreadView.tsx         # 點開單筆對話的 thread 顯示 + 回覆輸入框
-  StartConversationModal.tsx         # 學生「新增對話」/ 老師「傳送訊息」共用
+  ContestConversationList.tsx        # 對話列表（僅老師端用）
+  ConversationThreadView.tsx         # thread 顯示 + 訊息輸入框（學生 / 老師通用）
+  SendMessageModal.tsx               # 老師於 proctoring panel「傳送訊息」用
   PostAnnouncementModal.tsx          # 教師發公告 modal
-  ContestDiscussionView.tsx          # 組合給 ContestQAScreen / AdminConversationsScreen 用
+  StudentDiscussionView.tsx          # 學生 ContestQAScreen 用：公告列表 + ConversationThreadView
+  AdminDiscussionView.tsx            # 老師 AdminConversationsScreen 用：公告列表 + ConversationList
   index.ts
 
 frontend/src/features/contest/components/notification/
@@ -217,14 +217,15 @@ frontend/src/features/contest/hooks/
   - list：
     - 學生 queryset：`Q(student=user)`
     - 教師 queryset：所有 contest 內 conversation
-  - filter：
+  - filter（僅教師端有意義）：
     - `?awaiting=teacher|student`（依 `last_message.sender_role` 判斷誰在等對方回）
-    - `?problem={uuid}`
-  - create payload：`{ problem_id?, initial_content, student_id? }`，後端依 user 角色決定 `student` 與第一則 message 的 `sender_role`：
-    - 學生 create：忽略 `student_id`，`student=user`，第一則 `sender_role='student'`
-    - 教師 create：必須提供 `student_id`，第一則 `sender_role='teacher'`，permission 限教師 / 管理員
+  - create payload：`{ initial_content, student_id? }`，後端依 user 角色處理：
+    - 學生 create：忽略 `student_id`，`student=user`；若 `(contest, user)` 已有對話則回傳既存（idempotent），否則建立 + 寫第一則 `sender_role='student'`
+    - 教師 create：必須提供 `student_id`，permission 限教師 / 管理員；同樣 idempotent
   - retrieve：回傳 conversation + 所有 messages
   - 自訂 action `POST /conversations/{id}/messages/`：append message（前端送 `{ content }`，後端依 sender 自動填 `sender_role`、檢查權限）
+  - 學生端「我的對話」可用 `GET /conversations/me/`：直接回傳該學生在此 contest 的唯一 conversation（含 messages）；不存在則回 404，前端據此顯示空狀態
+  - 教師端 proctoring 用 `POST /conversations/messages-to-student/`：body `{ student_id, content }`，後端做 ensure-and-append（有就用，沒就建）
 
 - **`ContestMessageViewSet`** 不另外開 root，僅以 nested action 形式存在
 
@@ -281,16 +282,17 @@ useContestAnnouncements(contestId)  ──→  announcements
 - 學生 Modal：未讀置頂、已讀置底、各自時間倒序
 - 教師鈴鐺點擊：導向 `?awaiting=teacher`
 - ConversationThreadView：開啟時把 thread 內對方訊息標已讀；送訊失敗保留輸入內容；end-state 對話唯讀
-- 權限：未開始 / 進行中 / 已結束三狀態下，學生「新增對話」、「在 thread 中回覆」、教師發公告 / 私訊按鈕的 enabled / disabled
-- AdminProctoringPanel：點「傳送訊息」打開 modal，送出後呼叫 conversation create API 帶 `student_id`
+- 權限：未開始 / 進行中 / 已結束三狀態下，學生訊息輸入框、教師發公告 / 訊息按鈕的 enabled / disabled
+- AdminProctoringPanel：點「傳送訊息」打開 modal，送出後呼叫 ensure-and-append API 帶 `student_id`
 
 **Backend**
 
 - `ContestConversationViewSet`：
-  - 學生 list 只看自己；教師 list 看全部
-  - 學生 create 不能指定 `student_id`；教師可指定
+  - 學生 `GET /me/` 取自己唯一對話（不存在回 404）；教師 list 看全部
+  - 學生 create / messages-to-student 被拒；教師 messages-to-student 可用
+  - `(contest, student)` unique 約束生效：重複呼叫 create 不會建立第二筆，回傳既存
   - 學生 append message 限自己參與；教師 append 任意 conversation
-  - filter `?awaiting` / `?problem` 各自正確
+  - filter `?awaiting` 正確
   - 競賽結束後學生 append 被拒（403）
 - Migration：drop `contest_clarifications` table 後相關 import 不留殘骸
 - `ContestAnnouncementViewSet`：教師在三種競賽狀態下都能 create
@@ -323,7 +325,7 @@ useContestAnnouncements(contestId)  ──→  announcements
 
 **Frontend（修改）**
 - `features/contest/components/layout/ContestLayout.tsx`（在 `HeaderGlobalBar` 掛鈴鐺）
-- `features/contest/screens/ContestQAScreen.tsx`（改用 `ContestDiscussionView`）
+- `features/contest/screens/ContestQAScreen.tsx`（改用 `StudentDiscussionView`）
 - `features/contest/screens/admin/panels/AdminClarificationsScreen.tsx` → 改名為 `AdminConversationsScreen.tsx`
 - `features/contest/screens/admin/panels/AdminProctoringPanel.tsx`（每位學生加「📩 傳送訊息」按鈕）
 - `features/contest/modules/AdminPanelRendererRegistry.tsx`（key 改為 `conversations`）

From 04a025f83cd56a0d61e77993d1c789da407eac2e Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:04:02 +0800
Subject: [PATCH 20/60] refactor(contest): unify countdown via
 CountdownProgress; route right rail dividers through DashboardContainer

Add a shared CountdownProgress component that owns its own per-second
ticker and renders TimeDisplay + ProgressBar from the dashboard
primitives. Both the student dashboard's primary status block and the
admin overview's exam status panel now use it, so the admin's countdown
ticks live like the student side.

Replace the bespoke .rightOverviewColumn div and AdminInsightRail.root
div with DashboardContainer layout=stack dividers="auto", and drop the
.card border-bottom inside the rail. Dividers between every direct
child in the right rail (examStatusSummary, distribution, grading,
events) are now produced uniformly by the DashboardContainer pattern.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/CountdownProgress.module.scss  |  9 ++
 .../contest/components/CountdownProgress.tsx  | 88 +++++++++++++++++++
 .../admin/AdminInsightRail.module.scss        |  8 --
 .../components/admin/AdminInsightRail.tsx     |  9 +-
 .../AdminOverviewCommandCenter.module.scss    |  6 --
 .../admin/AdminOverviewCommandCenter.test.tsx | 19 +++-
 .../admin/AdminOverviewCommandCenter.tsx      | 34 +++----
 .../StudentContestDashboardView.test.tsx      |  3 +
 .../StudentContestDashboardView.tsx           | 57 +++---------
 9 files changed, 145 insertions(+), 88 deletions(-)
 create mode 100644 frontend/src/features/contest/components/CountdownProgress.module.scss
 create mode 100644 frontend/src/features/contest/components/CountdownProgress.tsx

diff --git a/frontend/src/features/contest/components/CountdownProgress.module.scss b/frontend/src/features/contest/components/CountdownProgress.module.scss
new file mode 100644
index 00000000..a95b13f0
--- /dev/null
+++ b/frontend/src/features/contest/components/CountdownProgress.module.scss
@@ -0,0 +1,9 @@
+.root {
+  display: grid;
+  gap: 0.875rem;
+}
+
+.progressBar :global(.cds--progress-bar__track),
+.progressBar :global(.cds--progress-bar__bar) {
+  height: 0.5rem;
+}
diff --git a/frontend/src/features/contest/components/CountdownProgress.tsx b/frontend/src/features/contest/components/CountdownProgress.tsx
new file mode 100644
index 00000000..82e62ecf
--- /dev/null
+++ b/frontend/src/features/contest/components/CountdownProgress.tsx
@@ -0,0 +1,88 @@
+import { useState, type ReactNode } from "react";
+import { ProgressBar } from "@carbon/react";
+import { TimeDisplay } from "@/shared/components/dashboard";
+import { useInterval } from "@/shared/hooks/useInterval";
+import { formatCompactDuration } from "@/features/contest/components/studentDashboard/studentDashboardState";
+import styles from "./CountdownProgress.module.scss";
+
+export interface CountdownProgressProps {
+  startTime: string;
+  endTime: string;
+  /** Override the value shown when the contest is over. Default: "考試已結束". */
+  afterPhase?: { label: string; value: ReactNode };
+  /** Hide the progress bar (default: shown). */
+  hideProgress?: boolean;
+}
+
+type Phase = "before" | "during" | "after" | "unset";
+
+export function CountdownProgress({
+  startTime,
+  endTime,
+  afterPhase,
+  hideProgress = false,
+}: CountdownProgressProps) {
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  const startMs = Date.parse(startTime);
+  const endMs = Date.parse(endTime);
+
+  const phase: Phase = !Number.isFinite(startMs) || !Number.isFinite(endMs)
+    ? "unset"
+    : nowMs < startMs
+      ? "before"
+      : nowMs >= endMs
+        ? "after"
+        : "during";
+
+  useInterval(
+    () => setNowMs(Date.now()),
+    phase === "during" || phase === "before" ? 1000 : null,
+  );
+
+  const display = (() => {
+    if (phase === "unset") {
+      return { label: "倒數計時", value: "未設定", percent: 0 };
+    }
+    if (phase === "before") {
+      return {
+        label: "距離開始",
+        value: formatCompactDuration(startMs - nowMs),
+        percent: 0,
+      };
+    }
+    if (phase === "during") {
+      const total = Math.max(1, endMs - startMs);
+      const elapsed = nowMs - startMs;
+      return {
+        label: "剩餘時間",
+        value: formatCompactDuration(endMs - nowMs),
+        percent: Math.round(Math.max(0, Math.min(100, (elapsed / total) * 100))),
+      };
+    }
+    return {
+      label: afterPhase?.label ?? "考試狀態",
+      value: afterPhase?.value ?? "考試已結束",
+      percent: 100,
+    };
+  })();
+
+  return (
+    <div className={styles.root}>
+      <TimeDisplay
+        variant="countdown"
+        label={display.label}
+        value={display.value}
+      />
+      {!hideProgress ? (
+        <ProgressBar
+          label="時間進度"
+          hideLabel
+          size="small"
+          value={display.percent}
+          status={phase === "after" ? "finished" : "active"}
+          className={styles.progressBar}
+        />
+      ) : null}
+    </div>
+  );
+}
diff --git a/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss b/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
index 14ae5080..2544cdb0 100644
--- a/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
@@ -1,16 +1,8 @@
-.root {
-  display: grid;
-  grid-auto-rows: max-content;
-  align-content: start;
-  min-height: 0;
-}
-
 .card {
   display: grid;
   gap: 1rem;
   align-content: start;
   padding: 1.25rem;
-  border-bottom: 1px solid var(--cds-border-subtle);
 }
 
 .cardActionButton {
diff --git a/frontend/src/features/contest/components/admin/AdminInsightRail.tsx b/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
index 1b4c65e6..b71fc92a 100644
--- a/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
+++ b/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
@@ -13,7 +13,10 @@ import type {
   DistributionItem,
 } from "@/features/contest/screens/admin/panels/adminOverviewDashboard.model";
 import { useTheme } from "@/shared/ui/theme/ThemeContext";
-import { MetricBlock } from "@/shared/components/dashboard";
+import {
+  DashboardContainer,
+  MetricBlock,
+} from "@/shared/components/dashboard";
 import styles from "./AdminInsightRail.module.scss";
 
 interface AdminInsightRailProps {
@@ -254,7 +257,7 @@ export default function AdminInsightRail({
   const gradingCards = cards.filter((card) => card.key === "grading_progress");
 
   return (
-    <div className={styles.root}>
+    <DashboardContainer layout="stack" dividers="auto">
       {primaryCards.map((card) => (
         <InsightCard
           key={card.key}
@@ -279,7 +282,7 @@ export default function AdminInsightRail({
           action={gradingAction}
         />
       ))}
-    </div>
+    </DashboardContainer>
   );
 }
 
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
index dc019495..0669b521 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
@@ -4,12 +4,6 @@
   align-content: start;
 }
 
-.rightOverviewColumn {
-  display: grid;
-  grid-auto-rows: max-content;
-  align-content: start;
-  min-height: 0;
-}
 
 .eventLogPanel {
   min-width: 0;
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
index d4897a85..6a13bed3 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
@@ -58,7 +58,21 @@ vi.mock("@/shared/contexts/ToastContext", () => ({
   useToast: () => ({ showToast: vi.fn() }),
 }));
 
+// Use a contest window that places "now" roughly in the middle so the
+// CountdownProgress component renders during-phase output deterministically.
+const COUNTDOWN_START = new Date(Date.now() - 60 * 60 * 1000).toISOString();
+const COUNTDOWN_END = new Date(Date.now() + 45 * 60 * 1000).toISOString();
+
 vi.mock("@/features/contest/contexts", () => ({
+  useContest: () => ({
+    contest: {
+      id: "contest-1",
+      name: "Mock Contest",
+      startTime: COUNTDOWN_START,
+      endTime: COUNTDOWN_END,
+    },
+    refreshContest: vi.fn(),
+  }),
   useContestAdmin: () => ({
     refreshAllAdminData: vi.fn(),
     refreshParticipants: vi.fn(),
@@ -256,12 +270,11 @@ describe("AdminOverviewCommandCenter", () => {
     expect(within(examSchedule).getByText("09:00")).toBeInTheDocument();
     expect(within(examSchedule).getByText("結束時間")).toBeInTheDocument();
     expect(within(examSchedule).getByText("11:00")).toBeInTheDocument();
-    expect(within(examSummary).getByText("倒數計時")).toBeInTheDocument();
-    expect(within(examSummary).getByText("剩餘 45:00")).toBeInTheDocument();
+    expect(within(examSummary).getByText("剩餘時間")).toBeInTheDocument();
     expect(screen.getAllByText("批改進度").length).toBeGreaterThan(0);
     expect(
       screen.getByRole("progressbar", { name: "時間進度" }),
-    ).toHaveAttribute("aria-valuenow", "62");
+    ).toBeInTheDocument();
     expect(screen.getAllByText("違規事件").length).toBeGreaterThan(0);
     const distributionOverview = screen.getByLabelText("考生分佈總覽");
     expect(distributionOverview).toBeInTheDocument();
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
index 03cffbc3..44b1f183 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
@@ -2,7 +2,6 @@ import {
   Button,
   OverflowMenu,
   OverflowMenuItem,
-  ProgressBar,
   Search,
   SelectableTag,
   SkeletonText,
@@ -54,7 +53,8 @@ import {
   EXAM_STATUS_LABELS,
   getExamStatusLabel,
 } from "@/features/contest/constants/examLabels";
-import { useContestAdmin } from "@/features/contest/contexts";
+import { useContest, useContestAdmin } from "@/features/contest/contexts";
+import { CountdownProgress } from "@/features/contest/components/CountdownProgress";
 import type { AdminPanelId } from "@/features/contest/modules/types";
 import useParticipantDashboard from "@/features/contest/screens/settings/participants/useParticipantDashboard";
 import ContestLogsScreen from "@/features/contest/screens/settings/ContestLogsScreen";
@@ -75,7 +75,6 @@ import {
   DashboardBlock,
   DashboardContainer,
   MetricBlock,
-  TimeDisplay,
 } from "@/shared/components/dashboard";
 import styles from "./AdminOverviewCommandCenter.module.scss";
 
@@ -322,6 +321,7 @@ export default function AdminOverviewCommandCenter({
   const { t } = useTranslation("contest");
   const { showToast } = useToast();
   const { confirm, modalProps: confirmModalProps } = useConfirmModal();
+  const { contest } = useContest();
   const { refreshAllAdminData, refreshParticipants, examEventsLoading } =
     useContestAdmin();
   const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
@@ -663,11 +663,6 @@ export default function AdminOverviewCommandCenter({
   const priorityEventsCard = insightCards.find(
     (card) => card.key === "priority_events",
   );
-  const examProgressPercent = Math.round(
-    Math.max(0, Math.min(100, data.timeline.progressPercent)),
-  );
-  const examProgressStatus =
-    examProgressPercent >= 100 ? "finished" : "active";
   const scheduleLabels = normalizeScheduleLabels(
     data.timeline.startDateTimeLabel,
     data.timeline.endDateTimeLabel,
@@ -708,21 +703,12 @@ export default function AdminOverviewCommandCenter({
         </DashboardBlock>
       </DashboardContainer>
       <DashboardBlock>
-        <div className={styles.examProgressHeader}>
-          <TimeDisplay
-            variant="countdown"
-            label="倒數計時"
-            value={data.timeline.primaryTimeLabel}
+        {contest ? (
+          <CountdownProgress
+            startTime={contest.startTime}
+            endTime={contest.endTime}
           />
-        </div>
-        <ProgressBar
-          label={t("adminOverview.widgets.timelineProgress", "時間進度")}
-          hideLabel
-          size="small"
-          value={examProgressPercent}
-          status={examProgressStatus}
-          className={styles.rightPanelProgressBar}
-        />
+        ) : null}
       </DashboardBlock>
     </DashboardContainer>
   );
@@ -983,7 +969,7 @@ export default function AdminOverviewCommandCenter({
           </div>
         }
         side={
-          <div className={styles.rightOverviewColumn}>
+          <DashboardContainer layout="stack" dividers="auto">
             {examStatusSummary}
             <AdminInsightRail
               cards={[]}
@@ -1012,7 +998,7 @@ export default function AdminOverviewCommandCenter({
               />
               <ContestLogsScreen embedded />
             </section>
-          </div>
+          </DashboardContainer>
         }
       />
       <AnimatePresence>
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
index d9bee305..3a63be9d 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
@@ -72,6 +72,9 @@ vi.mock("@carbon/react", () => ({
   SelectItem: ({ value, text }: { value: string; text: string }) => (
     <option value={value}>{text}</option>
   ),
+  ProgressBar: ({ value }: { value: number }) => (
+    <div data-testid="progress-bar" data-value={value} />
+  ),
   SkeletonPlaceholder: () => <div data-testid="skeleton-placeholder" />,
   Tab: ({ children }: { children: ReactNode }) => (
     <button type="button">{children}</button>
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
index 851fbc77..aa98153b 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
@@ -64,8 +64,8 @@ import {
   DashboardContainer,
   DashboardPage,
   MetricBlock,
-  TimeDisplay,
 } from "@/shared/components/dashboard";
+import { CountdownProgress } from "@/features/contest/components/CountdownProgress";
 import { ContestRegistrationModal } from "@/features/contest/components/modals/ContestRegistrationModal";
 import PaperQuestionReportCard from "@/features/contest/components/exam/PaperQuestionReportCard";
 import { getMarkedQuestionIds } from "@/features/contest/screens/paperExam/hooks";
@@ -73,7 +73,6 @@ import {
   buildCodingProgressSummary,
   formatCompactDuration,
   resolveStudentContestPhase,
-  type StudentContestPhase,
 } from "./studentDashboardState";
 import styles from "./StudentContestDashboard.module.scss";
 
@@ -144,34 +143,6 @@ const isFailingScoreBucket = (label: string) => {
   );
 };
 
-const getRemainingLabel = (
-  phase: StudentContestPhase,
-  contest: ContestDetail,
-  nowMs: number,
-): { label: string; value: string } => {
-  const startMs = Date.parse(contest.startTime);
-  const endMs = Date.parse(contest.endTime);
-
-  if (phase === "before") {
-    return {
-      label: "距離開始",
-      value: Number.isFinite(startMs)
-        ? formatCompactDuration(startMs - nowMs)
-        : "-",
-    };
-  }
-  if (phase === "during") {
-    return {
-      label: "剩餘時間",
-      value: Number.isFinite(endMs) ? formatCompactDuration(endMs - nowMs) : "-",
-    };
-  }
-  return {
-    label: "考試狀態",
-    value: contest.resultsPublished ? "成績已發布" : "等待成績發布",
-  };
-};
-
 const buildPaperProgressSummary = (
   questions: ExamQuestion[],
   answers: Array<Pick<ExamAnswer, "questionId"> & Partial<Pick<ExamAnswerDetail, "score">>>,
@@ -240,7 +211,6 @@ export default function StudentContestDashboard({
     startTime: contest.startTime,
     endTime: contest.endTime,
   });
-  const remaining = getRemainingLabel(phase, contest, nowMs);
   const examStatus = contest.examStatus ?? "not_started";
   const hasAnswerRecord =
     contest.resultsPublished ||
@@ -421,15 +391,10 @@ export default function StudentContestDashboard({
       ? "成績已發布"
       : `${progressSummary.totalScore} / ${progressSummary.maxScore}`
     : "尚未發布";
-  const primaryStatus = contest.resultsPublished
-    ? {
-        label: "考試成績",
-        value:
-          contest.contestType === "paper_exam" && paperData.loading
-            ? "載入中..."
-            : scoreDisplay,
-      }
-    : remaining;
+  const afterPhaseValue =
+    contest.contestType === "paper_exam" && paperData.loading
+      ? "載入中..."
+      : scoreDisplay;
   const reportDownloadLabel = contest.resultsPublished
     ? "下載成績單"
     : "下載作答證明";
@@ -879,10 +844,14 @@ export default function StudentContestDashboard({
 
         <DashboardContainer layout="stack" dividers="auto" ariaLabel="競賽摘要">
           <DashboardBlock>
-            <TimeDisplay
-              variant="countdown"
-              label={primaryStatus.label}
-              value={primaryStatus.value}
+            <CountdownProgress
+              startTime={contest.startTime}
+              endTime={contest.endTime}
+              afterPhase={
+                contest.resultsPublished
+                  ? { label: "考試成績", value: afterPhaseValue }
+                  : { label: "考試狀態", value: "等待成績發布" }
+              }
             />
           </DashboardBlock>
 

From 5e95577226760ed76254ef9877cb8c21c7f843dd Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:04:56 +0800
Subject: [PATCH 21/60] docs(plan): contest conversation implementation plan
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

22 個任務分 6 階段：後端 model+API+測試 → 前端 hooks/utils → 元件 →
通知鈴鐺 → 螢幕接線 → 清理。每步含完整代碼與命令。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...-05-contest-conversation-implementation.md | 2603 +++++++++++++++++
 1 file changed, 2603 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-05-05-contest-conversation-implementation.md

diff --git a/docs/superpowers/plans/2026-05-05-contest-conversation-implementation.md b/docs/superpowers/plans/2026-05-05-contest-conversation-implementation.md
new file mode 100644
index 00000000..3b8b750a
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-05-contest-conversation-implementation.md
@@ -0,0 +1,2603 @@
+# 競賽公告與對話功能 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:** 取代既有 Clarification 模型為雙向 Conversation thread，新增 navbar 通知鈴鐺，並讓教師於 proctoring panel 對特定學生發訊息。
+
+**Architecture:**
+- Backend：新增 `ContestConversation` + `ContestMessage`，`(contest, student)` unique；同 migration 刪除舊 `Clarification` 表
+- Frontend：拆掉 `ContestClarifications.tsx` 巨檔，新增 `discussion/` 與 `notification/` 兩個元件夾、兩個 hook（`useContestConversations`、`useContestUnread`），鈴鐺掛在 `ContestLayout` 的 `HeaderGlobalBar`
+- 已讀狀態用 localStorage（無後端 read receipt）
+
+**Tech Stack:** Django 5 + DRF（後端）、React 18 + Carbon Design System + react-router-dom + react-i18next（前端）、pytest + RTL/Vitest（測試）
+
+**參考文件：** `docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md`
+
+---
+
+## Phase 1：Backend 模型 + Migration
+
+### Task 1: 新增 Conversation/Message model 並移除 Clarification
+
+**Files:**
+- Modify: `backend/apps/contests/models.py`
+- Modify: `backend/apps/contests/admin.py`
+- Create: `backend/apps/contests/migrations/0078_drop_clarification_add_conversation.py`
+
+- [ ] **Step 1：在 `models.py` 中刪除 `Clarification` class**
+
+定位 `backend/apps/contests/models.py:553-610`，整段 `class Clarification(models.Model)` 連同其 Meta 與 `__str__` 全部刪除。
+
+- [ ] **Step 2：在 `models.py` 末尾、`ContestActivity` class 之前新增兩個新 model**
+
+```python
+class ContestConversation(models.Model):
+    """
+    Single conversation thread between a student and the teaching team.
+    Unique per (contest, student) - one ongoing conversation per pair.
+    """
+    contest = models.ForeignKey(
+        Contest,
+        on_delete=models.CASCADE,
+        related_name='conversations',
+        verbose_name='競賽',
+    )
+    student = models.ForeignKey(
+        User,
+        on_delete=models.CASCADE,
+        related_name='contest_conversations',
+        verbose_name='學生',
+    )
+    created_at = models.DateTimeField(auto_now_add=True, verbose_name='建立時間')
+    last_message_at = models.DateTimeField(verbose_name='最後一則訊息時間')
+
+    class Meta:
+        db_table = 'contest_conversations'
+        verbose_name = '競賽對話'
+        verbose_name_plural = '競賽對話'
+        unique_together = [('contest', 'student')]
+        ordering = ['-last_message_at']
+
+    def __str__(self):
+        return f"Conversation #{self.id} ({self.student.username} in contest {self.contest_id})"
+
+
+class ContestMessage(models.Model):
+    """
+    A single message inside a ContestConversation thread.
+    """
+    SENDER_ROLE_CHOICES = [
+        ('student', 'Student'),
+        ('teacher', 'Teacher'),
+    ]
+    conversation = models.ForeignKey(
+        ContestConversation,
+        on_delete=models.CASCADE,
+        related_name='messages',
+        verbose_name='對話',
+    )
+    sender = models.ForeignKey(
+        User,
+        on_delete=models.SET_NULL,
+        null=True,
+        related_name='sent_contest_messages',
+        verbose_name='發送者',
+    )
+    sender_role = models.CharField(
+        max_length=10,
+        choices=SENDER_ROLE_CHOICES,
+        verbose_name='發送者角色',
+    )
+    content = models.TextField(verbose_name='內容')
+    created_at = models.DateTimeField(auto_now_add=True, verbose_name='建立時間')
+
+    class Meta:
+        db_table = 'contest_messages'
+        verbose_name = '競賽訊息'
+        verbose_name_plural = '競賽訊息'
+        ordering = ['created_at']
+
+    def __str__(self):
+        return f"Message #{self.id} from {self.sender_role} in conv {self.conversation_id}"
+```
+
+- [ ] **Step 3：在 `admin.py` 中刪除 Clarification 註冊、新增兩個 model**
+
+開啟 `backend/apps/contests/admin.py`，搜尋 `Clarification` 並把所有相關 import / `@admin.register(Clarification)` / class 整段刪除，於檔案結尾追加：
+
+```python
+from .models import ContestConversation, ContestMessage
+
+
+@admin.register(ContestConversation)
+class ContestConversationAdmin(admin.ModelAdmin):
+    list_display = ('id', 'contest', 'student', 'last_message_at', 'created_at')
+    list_filter = ('contest',)
+    search_fields = ('student__username',)
+    readonly_fields = ('created_at', 'last_message_at')
+
+
+@admin.register(ContestMessage)
+class ContestMessageAdmin(admin.ModelAdmin):
+    list_display = ('id', 'conversation', 'sender_role', 'sender', 'created_at')
+    list_filter = ('sender_role',)
+    readonly_fields = ('created_at',)
+```
+
+- [ ] **Step 4：產生 migration**
+
+Run：
+```bash
+bash .codex/skills/qjudge-env-compose-owner/scripts/qjudge-dc.sh dev exec -T backend python manage.py makemigrations contests --name drop_clarification_add_conversation
+```
+
+Expected：產生 `backend/apps/contests/migrations/0078_drop_clarification_add_conversation.py`，內含 `DeleteModel(Clarification)` + `CreateModel(ContestConversation)` + `CreateModel(ContestMessage)`。
+
+- [ ] **Step 5：套用 migration（dev DB 不保留 Clarification 資料）**
+
+```bash
+bash .codex/skills/qjudge-env-compose-owner/scripts/qjudge-dc.sh dev exec -T backend python manage.py migrate contests
+```
+
+Expected：output 含 `0078_drop_clarification_add_conversation... OK`。
+
+- [ ] **Step 6：Commit**
+
+```bash
+git add backend/apps/contests/models.py backend/apps/contests/admin.py backend/apps/contests/migrations/0078_drop_clarification_add_conversation.py
+git commit -m "feat(contests): replace Clarification with Conversation+Message models"
+```
+
+---
+
+### Task 2: 移除舊 Clarification 引用（serializers / urls / views）
+
+**Files:**
+- Modify: `backend/apps/contests/serializers.py`
+- Modify: `backend/apps/contests/urls.py`
+- Modify: `backend/apps/contests/views/__init__.py`
+- Delete: `backend/apps/contests/views/clarification.py`
+
+- [ ] **Step 1：刪除 `views/clarification.py`**
+
+```bash
+rm backend/apps/contests/views/clarification.py
+```
+
+- [ ] **Step 2：在 `views/__init__.py` 中移除 `ClarificationViewSet` 的 export**
+
+開啟 `backend/apps/contests/views/__init__.py`，刪除 `from .clarification import ClarificationViewSet` 與相應的 `__all__` 條目。
+
+- [ ] **Step 3：在 `urls.py` 中移除 clarification import + register**
+
+定位 `backend/apps/contests/urls.py:7` 的 `ClarificationViewSet` import 整行刪除；同時刪除 `backend/apps/contests/urls.py:24` 的：
+```python
+contest_router.register(r'clarifications', ClarificationViewSet, basename='contest-clarifications')
+```
+
+- [ ] **Step 4：在 `serializers.py` 中刪除三個 Clarification serializer**
+
+`grep -n "Clarification" backend/apps/contests/serializers.py` 找出 `ClarificationSerializer`、`ClarificationCreateSerializer`、`ClarificationReplySerializer` 三個 class，整段刪除（含相關 imports 中的 `Clarification` 引用）。
+
+- [ ] **Step 5：驗證沒有殘餘引用**
+
+```bash
+grep -rn "Clarification" backend/apps/contests/ --include="*.py"
+```
+Expected：只剩下 migrations 歷史檔（不可動）內提及 Clarification 的舊紀錄；views/serializers/admin/urls 都不再 import 或使用該名稱。
+
+- [ ] **Step 6：Commit**
+
+```bash
+git add backend/apps/contests/serializers.py backend/apps/contests/urls.py backend/apps/contests/views/__init__.py backend/apps/contests/views/clarification.py
+git commit -m "refactor(contests): drop ClarificationViewSet and serializers"
+```
+
+---
+
+### Task 3: 新增 Conversation/Message serializer
+
+**Files:**
+- Modify: `backend/apps/contests/serializers.py`
+
+- [ ] **Step 1：在 `serializers.py` 末尾追加三個 serializer**
+
+```python
+class ContestMessageSerializer(serializers.ModelSerializer):
+    sender_username = serializers.CharField(source='sender.username', read_only=True, default=None)
+
+    class Meta:
+        model = ContestMessage
+        fields = ['id', 'sender', 'sender_username', 'sender_role', 'content', 'created_at']
+        read_only_fields = ['id', 'sender', 'sender_username', 'sender_role', 'created_at']
+
+
+class ContestConversationListSerializer(serializers.ModelSerializer):
+    student_username = serializers.CharField(source='student.username', read_only=True)
+    last_message = serializers.SerializerMethodField()
+    first_sender_role = serializers.SerializerMethodField()
+
+    class Meta:
+        model = ContestConversation
+        fields = [
+            'id', 'student', 'student_username',
+            'created_at', 'last_message_at',
+            'last_message', 'first_sender_role',
+        ]
+
+    def get_last_message(self, obj):
+        msg = obj.messages.order_by('-created_at').first()
+        if not msg:
+            return None
+        return ContestMessageSerializer(msg).data
+
+    def get_first_sender_role(self, obj):
+        msg = obj.messages.order_by('created_at').first()
+        return msg.sender_role if msg else None
+
+
+class ContestConversationDetailSerializer(ContestConversationListSerializer):
+    messages = ContestMessageSerializer(many=True, read_only=True)
+
+    class Meta(ContestConversationListSerializer.Meta):
+        fields = ContestConversationListSerializer.Meta.fields + ['messages']
+
+
+class ContestConversationCreateSerializer(serializers.Serializer):
+    initial_content = serializers.CharField()
+    student_id = serializers.UUIDField(required=False, allow_null=True)
+
+
+class SendMessageToStudentSerializer(serializers.Serializer):
+    student_id = serializers.UUIDField()
+    content = serializers.CharField()
+
+
+class AppendMessageSerializer(serializers.Serializer):
+    content = serializers.CharField()
+```
+
+確保上方 `from .models import` 區塊新增 `ContestConversation, ContestMessage`。
+
+- [ ] **Step 2：Commit**
+
+```bash
+git add backend/apps/contests/serializers.py
+git commit -m "feat(contests): add Conversation/Message serializers"
+```
+
+---
+
+### Task 4: 新增 ContestConversationViewSet
+
+**Files:**
+- Create: `backend/apps/contests/views/conversation.py`
+- Modify: `backend/apps/contests/views/__init__.py`
+- Modify: `backend/apps/contests/urls.py`
+
+- [ ] **Step 1：建立 `views/conversation.py`**
+
+```python
+"""ContestConversationViewSet."""
+from django.db import IntegrityError, transaction
+from django.db.models import OuterRef, Subquery
+from django.utils import timezone
+from rest_framework import viewsets, permissions, status
+from rest_framework.decorators import action
+from rest_framework.exceptions import PermissionDenied, NotFound, ValidationError
+from rest_framework.response import Response
+from django.shortcuts import get_object_or_404
+
+from ..models import Contest, ContestConversation, ContestMessage, User
+from ..serializers import (
+    ContestConversationListSerializer,
+    ContestConversationDetailSerializer,
+    ContestConversationCreateSerializer,
+    SendMessageToStudentSerializer,
+    AppendMessageSerializer,
+    ContestMessageSerializer,
+)
+from ..permissions import can_manage_contest
+
+
+def _is_contest_active_for_student(contest):
+    now = timezone.now()
+    if contest.end_time and now > contest.end_time:
+        return False
+    return True
+
+
+def _annotate_last_message_role(qs):
+    last_msg_role = ContestMessage.objects.filter(
+        conversation=OuterRef('pk')
+    ).order_by('-created_at').values('sender_role')[:1]
+    return qs.annotate(_last_role=Subquery(last_msg_role))
+
+
+class ContestConversationViewSet(viewsets.GenericViewSet):
+    """
+    GET    /contests/{contest_pk}/conversations/                  教師 list
+    GET    /contests/{contest_pk}/conversations/me/               學生取自己的（404 if none）
+    GET    /contests/{contest_pk}/conversations/{pk}/             retrieve（含 messages）
+    POST   /contests/{contest_pk}/conversations/                  學生 create（idempotent）
+    POST   /contests/{contest_pk}/conversations/{pk}/messages/    append message
+    POST   /contests/{contest_pk}/conversations/messages-to-student/  教師 ensure-and-append
+    """
+    permission_classes = [permissions.IsAuthenticated]
+
+    def _get_contest(self):
+        contest_id = self.kwargs.get('contest_pk')
+        return get_object_or_404(Contest, id=contest_id)
+
+    def _is_manager(self, contest):
+        return can_manage_contest(self.request.user, contest)
+
+    def _serialize_detail(self, conversation):
+        return ContestConversationDetailSerializer(conversation).data
+
+    # ── list (teacher only) ────────────────────────────────────────────
+    def list(self, request, contest_pk=None):
+        contest = self._get_contest()
+        if not self._is_manager(request.user):
+            raise PermissionDenied("Only teaching staff can list conversations.")
+
+        qs = ContestConversation.objects.filter(contest=contest).select_related('student')
+        qs = _annotate_last_message_role(qs)
+
+        awaiting = request.query_params.get('awaiting')
+        if awaiting == 'teacher':
+            qs = qs.filter(_last_role='student')
+        elif awaiting == 'student':
+            qs = qs.filter(_last_role='teacher')
+
+        data = ContestConversationListSerializer(qs, many=True).data
+        return Response(data)
+
+    # ── retrieve ───────────────────────────────────────────────────────
+    def retrieve(self, request, pk=None, contest_pk=None):
+        contest = self._get_contest()
+        conv = get_object_or_404(ContestConversation, pk=pk, contest=contest)
+        if not self._is_manager(request.user) and conv.student_id != request.user.id:
+            raise PermissionDenied("You can only view your own conversation.")
+        return Response(self._serialize_detail(conv))
+
+    # ── student: my conversation ──────────────────────────────────────
+    @action(detail=False, methods=['get'], url_path='me')
+    def me(self, request, contest_pk=None):
+        contest = self._get_contest()
+        try:
+            conv = ContestConversation.objects.get(contest=contest, student=request.user)
+        except ContestConversation.DoesNotExist:
+            raise NotFound("No conversation yet.")
+        return Response(self._serialize_detail(conv))
+
+    # ── create (student-initiated) ────────────────────────────────────
+    def create(self, request, contest_pk=None):
+        contest = self._get_contest()
+        serializer = ContestConversationCreateSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+
+        if self._is_manager(request.user):
+            raise PermissionDenied(
+                "Teachers should use POST /messages-to-student/ to send messages."
+            )
+
+        if not _is_contest_active_for_student(contest):
+            raise PermissionDenied("Contest has ended; cannot start a new message.")
+
+        with transaction.atomic():
+            conv, created = ContestConversation.objects.get_or_create(
+                contest=contest,
+                student=request.user,
+                defaults={'last_message_at': timezone.now()},
+            )
+            self._append_message(
+                conv, sender=request.user, sender_role='student',
+                content=serializer.validated_data['initial_content'],
+            )
+        return Response(
+            self._serialize_detail(conv),
+            status=status.HTTP_201_CREATED if created else status.HTTP_200_OK,
+        )
+
+    # ── append message ────────────────────────────────────────────────
+    @action(detail=True, methods=['post'], url_path='messages')
+    def append_message(self, request, pk=None, contest_pk=None):
+        contest = self._get_contest()
+        conv = get_object_or_404(ContestConversation, pk=pk, contest=contest)
+        serializer = AppendMessageSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+
+        if self._is_manager(request.user):
+            sender_role = 'teacher'
+        else:
+            if conv.student_id != request.user.id:
+                raise PermissionDenied("You can only post in your own conversation.")
+            if not _is_contest_active_for_student(contest):
+                raise PermissionDenied("Contest has ended; cannot post message.")
+            sender_role = 'student'
+
+        msg = self._append_message(
+            conv, sender=request.user, sender_role=sender_role,
+            content=serializer.validated_data['content'],
+        )
+        return Response(ContestMessageSerializer(msg).data, status=status.HTTP_201_CREATED)
+
+    # ── teacher: ensure-and-append to a specific student ──────────────
+    @action(detail=False, methods=['post'], url_path='messages-to-student')
+    def messages_to_student(self, request, contest_pk=None):
+        contest = self._get_contest()
+        if not self._is_manager(request.user):
+            raise PermissionDenied("Only teaching staff can use this endpoint.")
+        serializer = SendMessageToStudentSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+
+        student_id = serializer.validated_data['student_id']
+        try:
+            student = User.objects.get(id=student_id)
+        except User.DoesNotExist:
+            raise ValidationError({'student_id': 'Student not found.'})
+
+        with transaction.atomic():
+            conv, _created = ContestConversation.objects.get_or_create(
+                contest=contest, student=student,
+                defaults={'last_message_at': timezone.now()},
+            )
+            self._append_message(
+                conv, sender=request.user, sender_role='teacher',
+                content=serializer.validated_data['content'],
+            )
+        return Response(self._serialize_detail(conv), status=status.HTTP_201_CREATED)
+
+    # ── helper ────────────────────────────────────────────────────────
+    def _append_message(self, conversation, sender, sender_role, content):
+        msg = ContestMessage.objects.create(
+            conversation=conversation,
+            sender=sender,
+            sender_role=sender_role,
+            content=content,
+        )
+        conversation.last_message_at = msg.created_at
+        conversation.save(update_fields=['last_message_at'])
+        return msg
+```
+
+- [ ] **Step 2：在 `views/__init__.py` 加上 export**
+
+```python
+from .conversation import ContestConversationViewSet
+```
+
+並加進 `__all__`（若有）。
+
+- [ ] **Step 3：在 `urls.py` 註冊新 router**
+
+`backend/apps/contests/urls.py` 內找 `contest_router.register(r'announcements', ...)` 區塊，下方追加：
+
+```python
+from .views import ContestConversationViewSet
+contest_router.register(r'conversations', ContestConversationViewSet, basename='contest-conversations')
+```
+
+（若 `from .views import ...` 已存在則直接把 `ContestConversationViewSet` 加進去）
+
+- [ ] **Step 4：用 Django shell 確認 URL 可解析**
+
+```bash
+bash .codex/skills/qjudge-env-compose-owner/scripts/qjudge-dc.sh dev exec -T backend python manage.py show_urls | grep conversation
+```
+
+Expected：列出 `/api/contests/<contest_pk>/conversations/` 等 endpoints。
+
+- [ ] **Step 5：Commit**
+
+```bash
+git add backend/apps/contests/views/conversation.py backend/apps/contests/views/__init__.py backend/apps/contests/urls.py
+git commit -m "feat(contests): add ContestConversationViewSet"
+```
+
+---
+
+### Task 5: 後端測試（list / create / append / messages-to-student / 權限）
+
+**Files:**
+- Create: `backend/apps/contests/tests/conversation/__init__.py`
+- Create: `backend/apps/contests/tests/conversation/test_conversation_viewset.py`
+
+- [ ] **Step 1：建立測試骨架**
+
+```python
+# backend/apps/contests/tests/conversation/__init__.py
+```
+（空檔案）
+
+- [ ] **Step 2：撰寫測試**
+
+```python
+# backend/apps/contests/tests/conversation/test_conversation_viewset.py
+import pytest
+from django.urls import reverse
+from rest_framework.test import APIClient
+from django.contrib.auth import get_user_model
+
+from apps.contests.models import (
+    Contest, ContestParticipant, ContestConversation, ContestMessage
+)
+
+User = get_user_model()
+
+
+@pytest.fixture
+def teacher(db):
+    return User.objects.create_user(username='teacher1', password='x', role='teacher')
+
+
+@pytest.fixture
+def student(db):
+    return User.objects.create_user(username='student1', password='x', role='student')
+
+
+@pytest.fixture
+def other_student(db):
+    return User.objects.create_user(username='student2', password='x', role='student')
+
+
+@pytest.fixture
+def contest(db, teacher, student, other_student):
+    from django.utils import timezone
+    from datetime import timedelta
+    c = Contest.objects.create(
+        name='Test',
+        owner=teacher,
+        start_time=timezone.now() - timedelta(hours=1),
+        end_time=timezone.now() + timedelta(hours=1),
+    )
+    ContestParticipant.objects.create(contest=c, user=student)
+    ContestParticipant.objects.create(contest=c, user=other_student)
+    return c
+
+
+def _client(user):
+    c = APIClient()
+    c.force_authenticate(user=user)
+    return c
+
+
+def test_student_create_conversation_idempotent(contest, student):
+    url = f'/api/contests/{contest.id}/conversations/'
+    client = _client(student)
+    r1 = client.post(url, {'initial_content': 'hello'}, format='json')
+    assert r1.status_code == 201
+    conv_id = r1.data['id']
+
+    r2 = client.post(url, {'initial_content': 'hello again'}, format='json')
+    assert r2.status_code == 200
+    assert r2.data['id'] == conv_id
+    assert ContestConversation.objects.filter(contest=contest, student=student).count() == 1
+    assert ContestMessage.objects.filter(conversation_id=conv_id).count() == 2
+
+
+def test_student_get_me_returns_404_when_no_conversation(contest, student):
+    url = f'/api/contests/{contest.id}/conversations/me/'
+    r = _client(student).get(url)
+    assert r.status_code == 404
+
+
+def test_student_cannot_view_other_students_conversation(contest, student, other_student):
+    conv = ContestConversation.objects.create(
+        contest=contest, student=other_student, last_message_at='2024-01-01T00:00:00Z'
+    )
+    url = f'/api/contests/{contest.id}/conversations/{conv.id}/'
+    r = _client(student).get(url)
+    assert r.status_code == 403
+
+
+def test_teacher_list_filters_awaiting_teacher(contest, teacher, student, other_student):
+    conv1 = ContestConversation.objects.create(
+        contest=contest, student=student, last_message_at='2024-01-01T00:00:00Z'
+    )
+    ContestMessage.objects.create(conversation=conv1, sender=student, sender_role='student', content='ask')
+    conv2 = ContestConversation.objects.create(
+        contest=contest, student=other_student, last_message_at='2024-01-01T00:00:00Z'
+    )
+    ContestMessage.objects.create(conversation=conv2, sender=other_student, sender_role='student', content='q')
+    ContestMessage.objects.create(conversation=conv2, sender=teacher, sender_role='teacher', content='a')
+
+    url = f'/api/contests/{contest.id}/conversations/?awaiting=teacher'
+    r = _client(teacher).get(url)
+    assert r.status_code == 200
+    assert {c['id'] for c in r.data} == {conv1.id}
+
+
+def test_student_create_blocked_after_contest_ended(contest, student):
+    from django.utils import timezone
+    from datetime import timedelta
+    contest.end_time = timezone.now() - timedelta(minutes=1)
+    contest.save()
+
+    url = f'/api/contests/{contest.id}/conversations/'
+    r = _client(student).post(url, {'initial_content': 'late'}, format='json')
+    assert r.status_code == 403
+
+
+def test_teacher_messages_to_student_creates_conversation(contest, teacher, student):
+    url = f'/api/contests/{contest.id}/conversations/messages-to-student/'
+    r = _client(teacher).post(url, {'student_id': str(student.id), 'content': 'pay attention'}, format='json')
+    assert r.status_code == 201
+    conv = ContestConversation.objects.get(contest=contest, student=student)
+    msgs = list(conv.messages.all())
+    assert len(msgs) == 1
+    assert msgs[0].sender_role == 'teacher'
+
+
+def test_teacher_messages_to_student_appends_to_existing(contest, teacher, student):
+    conv = ContestConversation.objects.create(
+        contest=contest, student=student, last_message_at='2024-01-01T00:00:00Z'
+    )
+    ContestMessage.objects.create(conversation=conv, sender=student, sender_role='student', content='q')
+
+    url = f'/api/contests/{contest.id}/conversations/messages-to-student/'
+    r = _client(teacher).post(url, {'student_id': str(student.id), 'content': 'a'}, format='json')
+    assert r.status_code == 201
+    assert conv.messages.count() == 2
+
+
+def test_student_append_message_blocked_after_contest_ended(contest, student):
+    conv = ContestConversation.objects.create(
+        contest=contest, student=student, last_message_at='2024-01-01T00:00:00Z'
+    )
+    from django.utils import timezone
+    from datetime import timedelta
+    contest.end_time = timezone.now() - timedelta(minutes=1)
+    contest.save()
+
+    url = f'/api/contests/{contest.id}/conversations/{conv.id}/messages/'
+    r = _client(student).post(url, {'content': 'late'}, format='json')
+    assert r.status_code == 403
+
+
+def test_student_cannot_use_messages_to_student_endpoint(contest, student, other_student):
+    url = f'/api/contests/{contest.id}/conversations/messages-to-student/'
+    r = _client(student).post(url, {'student_id': str(other_student.id), 'content': 'x'}, format='json')
+    assert r.status_code == 403
+```
+
+- [ ] **Step 3：執行測試**
+
+```bash
+bash .codex/skills/qjudge-env-compose-owner/scripts/qjudge-dc.sh dev exec -T -e PYTEST_ADDOPTS='--no-cov' backend pytest apps/contests/tests/conversation/ -v
+```
+
+Expected：所有測試 pass。如有 fail，回頭 debug View / Serializer。
+
+- [ ] **Step 4：Commit**
+
+```bash
+git add backend/apps/contests/tests/conversation/
+git commit -m "test(contests): add Conversation viewset coverage"
+```
+
+---
+
+## Phase 2：Frontend Infrastructure
+
+### Task 6: Entity types + API repository
+
+**Files:**
+- Modify: `frontend/src/core/entities/contest.entity.ts`
+- Create: `frontend/src/infrastructure/api/repositories/contestConversation.ts`
+- Modify: `frontend/src/infrastructure/api/repositories/index.ts`
+- Modify: `frontend/src/infrastructure/mappers/contest.mapper.ts`
+
+- [ ] **Step 1：在 `contest.entity.ts` 中新增三個 type，移除 Clarification**
+
+開啟 `frontend/src/core/entities/contest.entity.ts`，刪除 `Clarification` 相關 type（搜尋 `Clarification` 的所有 export type / interface），於檔案末尾新增：
+
+```typescript
+export type ContestMessageSenderRole = 'student' | 'teacher';
+
+export interface ContestMessage {
+  id: string;
+  sender: string | null;
+  senderUsername: string | null;
+  senderRole: ContestMessageSenderRole;
+  content: string;
+  createdAt: string;
+}
+
+export interface ContestConversation {
+  id: string;
+  student: string;
+  studentUsername: string;
+  createdAt: string;
+  lastMessageAt: string;
+  lastMessage: ContestMessage | null;
+  firstSenderRole: ContestMessageSenderRole | null;
+  messages?: ContestMessage[];
+}
+```
+
+- [ ] **Step 2：在 `contest.mapper.ts` 中新增兩個 mapper，移除 Clarification mapper**
+
+刪除既有 `mapClarificationDto`（搜尋並整段刪除），新增：
+
+```typescript
+import type { ContestConversation, ContestMessage } from '@/core/entities/contest.entity';
+
+export const mapContestMessageDto = (raw: any): ContestMessage => ({
+  id: String(raw.id),
+  sender: raw.sender ? String(raw.sender) : null,
+  senderUsername: raw.sender_username ?? null,
+  senderRole: raw.sender_role,
+  content: raw.content,
+  createdAt: raw.created_at,
+});
+
+export const mapContestConversationDto = (raw: any): ContestConversation => ({
+  id: String(raw.id),
+  student: String(raw.student),
+  studentUsername: raw.student_username ?? '',
+  createdAt: raw.created_at,
+  lastMessageAt: raw.last_message_at,
+  lastMessage: raw.last_message ? mapContestMessageDto(raw.last_message) : null,
+  firstSenderRole: raw.first_sender_role ?? null,
+  messages: Array.isArray(raw.messages) ? raw.messages.map(mapContestMessageDto) : undefined,
+});
+```
+
+- [ ] **Step 3：建立 repository 檔**
+
+```typescript
+// frontend/src/infrastructure/api/repositories/contestConversation.ts
+import apiClient from '@/infrastructure/api/client';
+import {
+  mapContestConversationDto,
+  mapContestMessageDto,
+} from '@/infrastructure/mappers/contest.mapper';
+import type {
+  ContestConversation,
+  ContestMessage,
+} from '@/core/entities/contest.entity';
+
+const base = (contestId: string) => `/api/contests/${contestId}/conversations`;
+
+export const listConversations = async (
+  contestId: string,
+  awaiting?: 'teacher' | 'student',
+): Promise<ContestConversation[]> => {
+  const params = awaiting ? { awaiting } : {};
+  const { data } = await apiClient.get(`${base(contestId)}/`, { params });
+  return (data as unknown[]).map(mapContestConversationDto);
+};
+
+export const getMyConversation = async (
+  contestId: string,
+): Promise<ContestConversation | null> => {
+  try {
+    const { data } = await apiClient.get(`${base(contestId)}/me/`);
+    return mapContestConversationDto(data);
+  } catch (err: any) {
+    if (err?.response?.status === 404) return null;
+    throw err;
+  }
+};
+
+export const getConversation = async (
+  contestId: string,
+  conversationId: string,
+): Promise<ContestConversation> => {
+  const { data } = await apiClient.get(`${base(contestId)}/${conversationId}/`);
+  return mapContestConversationDto(data);
+};
+
+export const createStudentConversation = async (
+  contestId: string,
+  initialContent: string,
+): Promise<ContestConversation> => {
+  const { data } = await apiClient.post(`${base(contestId)}/`, {
+    initial_content: initialContent,
+  });
+  return mapContestConversationDto(data);
+};
+
+export const appendMessage = async (
+  contestId: string,
+  conversationId: string,
+  content: string,
+): Promise<ContestMessage> => {
+  const { data } = await apiClient.post(
+    `${base(contestId)}/${conversationId}/messages/`,
+    { content },
+  );
+  return mapContestMessageDto(data);
+};
+
+export const sendMessageToStudent = async (
+  contestId: string,
+  studentId: string,
+  content: string,
+): Promise<ContestConversation> => {
+  const { data } = await apiClient.post(
+    `${base(contestId)}/messages-to-student/`,
+    { student_id: studentId, content },
+  );
+  return mapContestConversationDto(data);
+};
+```
+
+- [ ] **Step 4：在 `repositories/index.ts` 補 export，並把所有 `createClarification / replyClarification / deleteClarification / getClarifications` 整段刪除**
+
+`grep -n "Clarification" frontend/src/infrastructure/api/repositories/index.ts` 找出後刪除，於底部新增：
+
+```typescript
+export {
+  listConversations,
+  getMyConversation,
+  getConversation,
+  createStudentConversation,
+  appendMessage,
+  sendMessageToStudent,
+} from './contestConversation';
+```
+
+- [ ] **Step 5：型別檢查**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+Expected：通過。預期會有「`useClarifications` 等檔尚未刪除而引用刪除的 type」錯誤 —— 這些檔案會在後續任務中刪除，先把錯誤檔列入下一階段（Phase 6）的清單，**此階段允許這幾個錯誤暫時存在**。
+
+> 若 typecheck 是 CI gate 又無法 pass，可在此 task 提前刪除 `useClarifications.ts`（檔案內容暫時換成 `export {}`），等 Phase 6 真正清理。實作上以「先讓 type 通過為止」為原則。
+
+- [ ] **Step 6：Commit**
+
+```bash
+git add frontend/src/core/entities/contest.entity.ts frontend/src/infrastructure/api/repositories/contestConversation.ts frontend/src/infrastructure/api/repositories/index.ts frontend/src/infrastructure/mappers/contest.mapper.ts
+git commit -m "feat(api): conversation entity + repository"
+```
+
+---
+
+### Task 7: localStorage 已讀工具
+
+**Files:**
+- Create: `frontend/src/features/contest/hooks/contestReadStorage.ts`
+- Create: `frontend/src/features/contest/hooks/contestReadStorage.test.ts`
+
+- [ ] **Step 1：寫失敗測試**
+
+```typescript
+// frontend/src/features/contest/hooks/contestReadStorage.test.ts
+import { describe, it, expect, beforeEach } from 'vitest';
+import {
+  loadReadIds,
+  saveReadIds,
+  markRead,
+  isRead,
+  STORAGE_KEY_PREFIX,
+} from './contestReadStorage';
+
+describe('contestReadStorage', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('returns empty Set when no entry exists', () => {
+    expect(loadReadIds('c1').size).toBe(0);
+  });
+
+  it('persists ids per contest', () => {
+    saveReadIds('c1', new Set(['ann:1', 'msg:5']));
+    expect(loadReadIds('c1')).toEqual(new Set(['ann:1', 'msg:5']));
+    expect(loadReadIds('c2').size).toBe(0);
+  });
+
+  it('markRead adds ids without dropping existing ones', () => {
+    saveReadIds('c1', new Set(['ann:1']));
+    markRead('c1', ['ann:2', 'msg:9']);
+    expect(loadReadIds('c1')).toEqual(new Set(['ann:1', 'ann:2', 'msg:9']));
+  });
+
+  it('isRead reflects storage', () => {
+    saveReadIds('c1', new Set(['ann:1']));
+    expect(isRead('c1', 'ann:1')).toBe(true);
+    expect(isRead('c1', 'ann:2')).toBe(false);
+  });
+
+  it('uses the documented key prefix', () => {
+    saveReadIds('c1', new Set(['ann:1']));
+    expect(localStorage.getItem(`${STORAGE_KEY_PREFIX}c1.readIds`)).toBeTruthy();
+  });
+});
+```
+
+- [ ] **Step 2：執行確認 fail**
+
+```bash
+cd frontend && npm test -- contestReadStorage
+```
+
+Expected：fail（檔案尚不存在）。
+
+- [ ] **Step 3：實作**
+
+```typescript
+// frontend/src/features/contest/hooks/contestReadStorage.ts
+export const STORAGE_KEY_PREFIX = 'qjudge.contest.';
+
+const keyFor = (contestId: string) => `${STORAGE_KEY_PREFIX}${contestId}.readIds`;
+
+export const loadReadIds = (contestId: string): Set<string> => {
+  try {
+    const raw = localStorage.getItem(keyFor(contestId));
+    if (!raw) return new Set();
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? new Set(parsed) : new Set();
+  } catch {
+    return new Set();
+  }
+};
+
+export const saveReadIds = (contestId: string, ids: Set<string>): void => {
+  try {
+    localStorage.setItem(keyFor(contestId), JSON.stringify([...ids]));
+  } catch (err) {
+    console.warn('[contestReadStorage] failed to save', err);
+  }
+};
+
+export const markRead = (contestId: string, ids: string[]): void => {
+  if (ids.length === 0) return;
+  const current = loadReadIds(contestId);
+  ids.forEach((id) => current.add(id));
+  saveReadIds(contestId, current);
+};
+
+export const isRead = (contestId: string, id: string): boolean =>
+  loadReadIds(contestId).has(id);
+```
+
+- [ ] **Step 4：執行測試 pass**
+
+```bash
+cd frontend && npm test -- contestReadStorage
+```
+
+Expected：5 tests pass。
+
+- [ ] **Step 5：Commit**
+
+```bash
+git add frontend/src/features/contest/hooks/contestReadStorage.ts frontend/src/features/contest/hooks/contestReadStorage.test.ts
+git commit -m "feat(contest): localStorage read-tracking utility"
+```
+
+---
+
+### Task 8: useContestConversations hook（取代 useClarifications）
+
+**Files:**
+- Create: `frontend/src/features/contest/hooks/useContestConversations.ts`
+
+- [ ] **Step 1：實作**
+
+```typescript
+// frontend/src/features/contest/hooks/useContestConversations.ts
+import { useCallback, useEffect, useState } from 'react';
+import {
+  listConversations,
+  getMyConversation,
+  getContestAnnouncements,
+} from '@/infrastructure/api/repositories';
+import { mapContestAnnouncementDto } from '@/infrastructure/mappers/contest.mapper';
+import { useInterval } from '@/shared/hooks/useInterval';
+import type {
+  ContestAnnouncement,
+  ContestConversation,
+} from '@/core/entities/contest.entity';
+
+interface Options {
+  pollIntervalMs?: number | null;
+  role: 'student' | 'teacher';
+  awaiting?: 'teacher' | 'student';
+}
+
+export const useContestConversations = (
+  contestId: string,
+  options: Options,
+) => {
+  const [announcements, setAnnouncements] = useState<ContestAnnouncement[]>([]);
+  const [conversations, setConversations] = useState<ContestConversation[]>([]);
+  const [myConversation, setMyConversation] = useState<ContestConversation | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const pollIntervalMs = options.pollIntervalMs ?? null;
+  const role = options.role;
+  const awaiting = options.awaiting;
+
+  const fetchAll = useCallback(
+    async (showLoading = false) => {
+      if (!contestId) return;
+      if (showLoading) setLoading(true);
+      try {
+        const [annData, convPart] = await Promise.all([
+          getContestAnnouncements(contestId),
+          role === 'teacher'
+            ? listConversations(contestId, awaiting)
+            : getMyConversation(contestId).then((c) => (c ? [c] : [])),
+        ]);
+        setAnnouncements(
+          (Array.isArray(annData) ? annData : []).map((it: any) =>
+            mapContestAnnouncementDto(it),
+          ),
+        );
+        if (role === 'teacher') {
+          setConversations(convPart);
+          setMyConversation(null);
+        } else {
+          setConversations([]);
+          setMyConversation(convPart[0] ?? null);
+        }
+        setError(null);
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        if (showLoading) setLoading(false);
+      }
+    },
+    [contestId, role, awaiting],
+  );
+
+  useEffect(() => {
+    fetchAll(true);
+  }, [fetchAll]);
+
+  useInterval(
+    () => fetchAll(false),
+    contestId && pollIntervalMs && pollIntervalMs > 0 ? pollIntervalMs : null,
+  );
+
+  return {
+    announcements,
+    conversations,
+    myConversation,
+    loading,
+    error,
+    refresh: () => fetchAll(false),
+  };
+};
+```
+
+- [ ] **Step 2：型別檢查**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+Expected：通過（與既有 announcement repository / interval hook 已存在）。
+
+- [ ] **Step 3：Commit**
+
+```bash
+git add frontend/src/features/contest/hooks/useContestConversations.ts
+git commit -m "feat(contest): useContestConversations hook"
+```
+
+---
+
+### Task 9: useContestUnread hook
+
+**Files:**
+- Create: `frontend/src/features/contest/hooks/useContestUnread.ts`
+- Create: `frontend/src/features/contest/hooks/useContestUnread.test.ts`
+
+- [ ] **Step 1：寫失敗測試**
+
+```typescript
+// frontend/src/features/contest/hooks/useContestUnread.test.ts
+import { describe, it, expect, beforeEach } from 'vitest';
+import { computeUnread } from './useContestUnread';
+import type {
+  ContestAnnouncement,
+  ContestConversation,
+} from '@/core/entities/contest.entity';
+
+const ann = (id: string): ContestAnnouncement =>
+  ({ id, title: 't', content: 'c', createdAt: 'x' } as any);
+
+const msg = (id: string, role: 'student' | 'teacher') =>
+  ({ id, senderRole: role, content: 'm', createdAt: 'x', sender: null, senderUsername: null });
+
+const conv = (
+  id: string,
+  messages: ReturnType<typeof msg>[],
+): ContestConversation =>
+  ({
+    id, student: 's', studentUsername: 's',
+    createdAt: 'x', lastMessageAt: 'x',
+    lastMessage: messages[messages.length - 1] ?? null,
+    firstSenderRole: messages[0]?.senderRole ?? null,
+    messages,
+  } as any);
+
+describe('computeUnread', () => {
+  beforeEach(() => localStorage.clear());
+
+  it('student counts unread announcements + teacher messages', () => {
+    const result = computeUnread({
+      contestId: 'c1',
+      role: 'student',
+      announcements: [ann('1'), ann('2')],
+      conversations: [],
+      myConversation: conv('cv1', [
+        msg('m1', 'student'),
+        msg('m2', 'teacher'),
+        msg('m3', 'teacher'),
+      ]),
+      readIds: new Set<string>(),
+    });
+    expect(result.unreadAnnouncementIds).toEqual(['1', '2']);
+    expect(result.unreadMessageIds).toEqual(['m2', 'm3']);
+    expect(result.unreadCount).toBe(4);
+  });
+
+  it('student excludes own messages from unread', () => {
+    const result = computeUnread({
+      contestId: 'c1',
+      role: 'student',
+      announcements: [],
+      conversations: [],
+      myConversation: conv('cv1', [msg('m1', 'student')]),
+      readIds: new Set<string>(),
+    });
+    expect(result.unreadMessageIds).toEqual([]);
+  });
+
+  it('teacher unread = number of conversations awaiting teacher reply', () => {
+    const result = computeUnread({
+      contestId: 'c1',
+      role: 'teacher',
+      announcements: [ann('1')],
+      conversations: [
+        conv('cv1', [msg('m1', 'student')]),
+        conv('cv2', [msg('m2', 'student'), msg('m3', 'teacher')]),
+        conv('cv3', [msg('m4', 'student')]),
+      ],
+      myConversation: null,
+      readIds: new Set<string>(),
+    });
+    expect(result.pendingConversationCount).toBe(2);
+    expect(result.unreadCount).toBe(2);
+    expect(result.unreadAnnouncementIds).toEqual([]);
+  });
+
+  it('respects already-read ids in localStorage', () => {
+    const result = computeUnread({
+      contestId: 'c1',
+      role: 'student',
+      announcements: [ann('1'), ann('2')],
+      conversations: [],
+      myConversation: conv('cv1', [msg('m1', 'teacher'), msg('m2', 'teacher')]),
+      readIds: new Set<string>(['ann:1', 'msg:m1']),
+    });
+    expect(result.unreadAnnouncementIds).toEqual(['2']);
+    expect(result.unreadMessageIds).toEqual(['m2']);
+    expect(result.unreadCount).toBe(2);
+  });
+});
+```
+
+- [ ] **Step 2：執行測試確認 fail**
+
+```bash
+cd frontend && npm test -- useContestUnread
+```
+
+Expected：fail（檔案尚不存在）。
+
+- [ ] **Step 3：實作**
+
+```typescript
+// frontend/src/features/contest/hooks/useContestUnread.ts
+import { useCallback, useMemo, useState } from 'react';
+import type {
+  ContestAnnouncement,
+  ContestConversation,
+} from '@/core/entities/contest.entity';
+import {
+  loadReadIds,
+  markRead as markReadStorage,
+} from './contestReadStorage';
+
+export interface ComputeUnreadInput {
+  contestId: string;
+  role: 'student' | 'teacher';
+  announcements: ContestAnnouncement[];
+  conversations: ContestConversation[];
+  myConversation: ContestConversation | null;
+  readIds: Set<string>;
+}
+
+export interface UnreadSummary {
+  unreadAnnouncementIds: string[];
+  unreadMessageIds: string[];
+  pendingConversationCount: number;
+  unreadCount: number;
+}
+
+export const computeUnread = (input: ComputeUnreadInput): UnreadSummary => {
+  const { role, announcements, conversations, myConversation, readIds } = input;
+
+  const unreadAnnouncementIds = announcements
+    .map((a) => a.id)
+    .filter((id) => !readIds.has(`ann:${id}`));
+
+  if (role === 'teacher') {
+    const pending = conversations.filter(
+      (c) => c.lastMessage?.senderRole === 'student',
+    ).length;
+    return {
+      unreadAnnouncementIds: [],
+      unreadMessageIds: [],
+      pendingConversationCount: pending,
+      unreadCount: pending,
+    };
+  }
+
+  const teacherMsgs = (myConversation?.messages ?? []).filter(
+    (m) => m.senderRole === 'teacher',
+  );
+  const unreadMessageIds = teacherMsgs
+    .map((m) => m.id)
+    .filter((id) => !readIds.has(`msg:${id}`));
+
+  return {
+    unreadAnnouncementIds,
+    unreadMessageIds,
+    pendingConversationCount: 0,
+    unreadCount: unreadAnnouncementIds.length + unreadMessageIds.length,
+  };
+};
+
+export const useContestUnread = (input: Omit<ComputeUnreadInput, 'readIds'>) => {
+  const [readVersion, setReadVersion] = useState(0);
+
+  const readIds = useMemo(
+    () => loadReadIds(input.contestId),
+    [input.contestId, readVersion],
+  );
+
+  const summary = useMemo(
+    () => computeUnread({ ...input, readIds }),
+    [input, readIds],
+  );
+
+  const markRead = useCallback(
+    (ids: string[]) => {
+      if (!ids.length) return;
+      markReadStorage(input.contestId, ids);
+      setReadVersion((v) => v + 1);
+    },
+    [input.contestId],
+  );
+
+  const markAllRead = useCallback(() => {
+    const annKeys = summary.unreadAnnouncementIds.map((id) => `ann:${id}`);
+    const msgKeys = summary.unreadMessageIds.map((id) => `msg:${id}`);
+    markRead([...annKeys, ...msgKeys]);
+  }, [summary, markRead]);
+
+  return { ...summary, markRead, markAllRead };
+};
+```
+
+- [ ] **Step 4：執行測試 pass**
+
+```bash
+cd frontend && npm test -- useContestUnread
+```
+
+Expected：4 tests pass。
+
+- [ ] **Step 5：Commit**
+
+```bash
+git add frontend/src/features/contest/hooks/useContestUnread.ts frontend/src/features/contest/hooks/useContestUnread.test.ts
+git commit -m "feat(contest): useContestUnread hook with read tracking"
+```
+
+---
+
+## Phase 3：Frontend Components — Discussion
+
+### Task 10: ConversationThreadView
+
+**Files:**
+- Create: `frontend/src/features/contest/components/discussion/ConversationThreadView.tsx`
+- Create: `frontend/src/features/contest/components/discussion/ConversationThreadView.module.scss`
+
+- [ ] **Step 1：實作**
+
+```tsx
+// frontend/src/features/contest/components/discussion/ConversationThreadView.tsx
+import { useEffect, useState } from 'react';
+import { Button, TextArea, InlineNotification, Tag } from '@carbon/react';
+import { Send } from '@carbon/icons-react';
+import type { ContestConversation, ContestMessage } from '@/core/entities/contest.entity';
+import styles from './ConversationThreadView.module.scss';
+
+interface ConversationThreadViewProps {
+  conversation: ContestConversation | null;
+  /** 'student' or 'teacher' (current viewer role) */
+  viewerRole: 'student' | 'teacher';
+  /** if false, input is disabled (e.g., contest ended for student) */
+  canPost: boolean;
+  /** label for the disabled hint, shown above input when canPost=false */
+  disabledHint?: string;
+  /** called when sending message; promise resolves when done */
+  onSend: (content: string) => Promise<void>;
+  /** optional empty-state message when conversation is null */
+  emptyHint?: string;
+}
+
+export const ConversationThreadView = ({
+  conversation,
+  viewerRole,
+  canPost,
+  disabledHint,
+  onSend,
+  emptyHint,
+}: ConversationThreadViewProps) => {
+  const [draft, setDraft] = useState('');
+  const [sending, setSending] = useState(false);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  useEffect(() => {
+    setErrorMsg(null);
+  }, [conversation?.id]);
+
+  const handleSend = async () => {
+    if (!draft.trim() || sending) return;
+    setSending(true);
+    setErrorMsg(null);
+    try {
+      await onSend(draft.trim());
+      setDraft('');
+    } catch (err: any) {
+      setErrorMsg(err?.response?.data?.detail ?? '訊息送出失敗，請稍後再試');
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const messages: ContestMessage[] = conversation?.messages ?? [];
+
+  return (
+    <div className={styles.thread}>
+      <div className={styles.messages}>
+        {messages.length === 0 && (
+          <p className={styles.empty}>{emptyHint ?? '目前沒有訊息'}</p>
+        )}
+        {messages.map((m) => {
+          const isMine =
+            (m.senderRole === 'student' && viewerRole === 'student') ||
+            (m.senderRole === 'teacher' && viewerRole === 'teacher');
+          return (
+            <div
+              key={m.id}
+              className={`${styles.bubble} ${isMine ? styles.mine : styles.theirs}`}
+            >
+              <div className={styles.meta}>
+                <Tag size="sm" type={m.senderRole === 'teacher' ? 'cyan' : 'gray'}>
+                  {m.senderRole === 'teacher' ? '老師' : '學生'}
+                </Tag>
+                <span className={styles.time}>{new Date(m.createdAt).toLocaleString()}</span>
+              </div>
+              <div className={styles.content}>{m.content}</div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className={styles.composer}>
+        {!canPost && disabledHint && (
+          <InlineNotification
+            kind="info"
+            lowContrast
+            hideCloseButton
+            title={disabledHint}
+            className={styles.hint}
+          />
+        )}
+        {errorMsg && (
+          <InlineNotification
+            kind="error"
+            lowContrast
+            title={errorMsg}
+            onCloseButtonClick={() => setErrorMsg(null)}
+          />
+        )}
+        <TextArea
+          id="conv-thread-input"
+          labelText="輸入訊息"
+          rows={3}
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          disabled={!canPost || sending}
+        />
+        <div className={styles.composerActions}>
+          <Button
+            renderIcon={Send}
+            disabled={!canPost || sending || !draft.trim()}
+            onClick={handleSend}
+          >
+            {sending ? '傳送中…' : '送出'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConversationThreadView;
+```
+
+- [ ] **Step 2：建立 SCSS**
+
+```scss
+// frontend/src/features/contest/components/discussion/ConversationThreadView.module.scss
+.thread { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
+.messages { display: flex; flex-direction: column; gap: 0.75rem; min-height: 12rem; padding: 0.5rem; overflow-y: auto; }
+.empty { color: var(--cds-text-secondary); text-align: center; padding: 2rem 0; }
+.bubble { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1rem; border-radius: 0.25rem; max-width: 80%; }
+.bubble.mine { align-self: flex-end; background: var(--cds-layer-accent); }
+.bubble.theirs { align-self: flex-start; background: var(--cds-layer); }
+.meta { display: flex; gap: 0.5rem; align-items: center; font-size: 0.75rem; color: var(--cds-text-secondary); }
+.time {}
+.content { white-space: pre-wrap; }
+.composer { display: flex; flex-direction: column; gap: 0.5rem; }
+.composerActions { display: flex; justify-content: flex-end; }
+.hint {}
+```
+
+- [ ] **Step 3：型別檢查**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+Expected：通過。
+
+- [ ] **Step 4：Commit**
+
+```bash
+git add frontend/src/features/contest/components/discussion/ConversationThreadView.tsx frontend/src/features/contest/components/discussion/ConversationThreadView.module.scss
+git commit -m "feat(contest): ConversationThreadView component"
+```
+
+---
+
+### Task 11: ContestAnnouncementList
+
+**Files:**
+- Create: `frontend/src/features/contest/components/discussion/ContestAnnouncementList.tsx`
+
+- [ ] **Step 1：實作**
+
+```tsx
+// frontend/src/features/contest/components/discussion/ContestAnnouncementList.tsx
+import { useEffect, useRef } from 'react';
+import { Tile, Tag, Button } from '@carbon/react';
+import { TrashCan } from '@carbon/icons-react';
+import type { ContestAnnouncement } from '@/core/entities/contest.entity';
+
+interface Props {
+  announcements: ContestAnnouncement[];
+  unreadIds: Set<string>;
+  canDelete?: boolean;
+  onMarkRead: (ids: string[]) => void;
+  onDelete?: (id: string) => void;
+  onCreate?: () => void;
+  showCreateButton?: boolean;
+}
+
+export const ContestAnnouncementList = ({
+  announcements,
+  unreadIds,
+  canDelete,
+  onMarkRead,
+  onDelete,
+  onCreate,
+  showCreateButton,
+}: Props) => {
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        const ids = entries
+          .filter((e) => e.isIntersecting)
+          .map((e) => (e.target as HTMLElement).dataset.annId)
+          .filter((id): id is string => !!id && unreadIds.has(id));
+        if (ids.length) onMarkRead(ids.map((id) => `ann:${id}`));
+      },
+      { threshold: 0.5 },
+    );
+    return () => observerRef.current?.disconnect();
+  }, [unreadIds, onMarkRead]);
+
+  const refFn = (el: HTMLDivElement | null) => {
+    if (el && observerRef.current) observerRef.current.observe(el);
+  };
+
+  return (
+    <section>
+      <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
+        <h4 style={{ margin: 0 }}>公告</h4>
+        {showCreateButton && onCreate && (
+          <Button kind="ghost" size="sm" onClick={onCreate}>
+            發布公告
+          </Button>
+        )}
+      </header>
+
+      {announcements.length === 0 ? (
+        <Tile><div style={{ padding: '1rem', textAlign: 'center', color: 'var(--cds-text-secondary)' }}>目前沒有任何公告</div></Tile>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+          {announcements.map((a) => {
+            const unread = unreadIds.has(a.id);
+            return (
+              <Tile key={a.id}>
+                <div ref={refFn} data-ann-id={a.id} style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
+                  <div style={{ flex: 1 }}>
+                    <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', marginBottom: '0.25rem' }}>
+                      <strong>{a.title}</strong>
+                      {unread && <Tag size="sm" type="red">新</Tag>}
+                    </div>
+                    <p style={{ margin: '0.25rem 0', whiteSpace: 'pre-wrap' }}>{a.content}</p>
+                    <small style={{ color: 'var(--cds-text-secondary)' }}>
+                      {new Date(a.createdAt).toLocaleString()}
+                    </small>
+                  </div>
+                  {canDelete && onDelete && (
+                    <Button kind="ghost" size="sm" hasIconOnly renderIcon={TrashCan} iconDescription="刪除" onClick={() => onDelete(a.id)} />
+                  )}
+                </div>
+              </Tile>
+            );
+          })}
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default ContestAnnouncementList;
+```
+
+- [ ] **Step 2：型別檢查**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+Expected：通過。
+
+- [ ] **Step 3：Commit**
+
+```bash
+git add frontend/src/features/contest/components/discussion/ContestAnnouncementList.tsx
+git commit -m "feat(contest): ContestAnnouncementList with unread badge"
+```
+
+---
+
+### Task 12: ContestConversationList（教師端列表）
+
+**Files:**
+- Create: `frontend/src/features/contest/components/discussion/ContestConversationList.tsx`
+
+- [ ] **Step 1：實作**
+
+```tsx
+// frontend/src/features/contest/components/discussion/ContestConversationList.tsx
+import { Tile, Tag } from '@carbon/react';
+import type { ContestConversation } from '@/core/entities/contest.entity';
+
+interface Props {
+  conversations: ContestConversation[];
+  selectedId: string | null;
+  onSelect: (conversation: ContestConversation) => void;
+}
+
+export const ContestConversationList = ({ conversations, selectedId, onSelect }: Props) => {
+  if (conversations.length === 0) {
+    return <Tile><div style={{ padding: '1rem', color: 'var(--cds-text-secondary)' }}>目前沒有對話</div></Tile>;
+  }
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+      {conversations.map((c) => {
+        const awaitingTeacher = c.lastMessage?.senderRole === 'student';
+        const selected = c.id === selectedId;
+        return (
+          <button
+            key={c.id}
+            type="button"
+            onClick={() => onSelect(c)}
+            style={{
+              textAlign: 'left',
+              border: selected ? '2px solid var(--cds-focus)' : '1px solid var(--cds-border-subtle)',
+              borderRadius: '0.25rem',
+              background: 'var(--cds-layer)',
+              padding: '0.75rem',
+              cursor: 'pointer',
+            }}
+          >
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '0.5rem' }}>
+              <strong>{c.studentUsername}</strong>
+              {awaitingTeacher && <Tag size="sm" type="red">未回</Tag>}
+            </div>
+            <div style={{ color: 'var(--cds-text-secondary)', fontSize: '0.875rem', marginTop: '0.25rem' }}>
+              {c.lastMessage?.content?.slice(0, 80) ?? '（尚無訊息）'}
+            </div>
+            <small style={{ color: 'var(--cds-text-helper)' }}>
+              {new Date(c.lastMessageAt).toLocaleString()}
+            </small>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ContestConversationList;
+```
+
+- [ ] **Step 2：型別檢查 + Commit**
+
+```bash
+cd frontend && npm run -s typecheck
+git add frontend/src/features/contest/components/discussion/ContestConversationList.tsx
+git commit -m "feat(contest): ContestConversationList for teacher panel"
+```
+
+---
+
+### Task 13: PostAnnouncementModal + SendMessageModal
+
+**Files:**
+- Create: `frontend/src/features/contest/components/discussion/PostAnnouncementModal.tsx`
+- Create: `frontend/src/features/contest/components/discussion/SendMessageModal.tsx`
+
+- [ ] **Step 1：建 PostAnnouncementModal**
+
+```tsx
+// frontend/src/features/contest/components/discussion/PostAnnouncementModal.tsx
+import { useState } from 'react';
+import { Modal, TextArea, TextInput } from '@carbon/react';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (title: string, content: string) => Promise<void>;
+}
+
+export const PostAnnouncementModal = ({ open, onClose, onSubmit }: Props) => {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [sending, setSending] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!title.trim() || !content.trim() || sending) return;
+    setSending(true);
+    try {
+      await onSubmit(title.trim(), content.trim());
+      setTitle('');
+      setContent('');
+      onClose();
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      modalHeading="發布公告"
+      primaryButtonText={sending ? '發布中…' : '發布'}
+      secondaryButtonText="取消"
+      primaryButtonDisabled={sending || !title.trim() || !content.trim()}
+      onRequestClose={onClose}
+      onRequestSubmit={handleSubmit}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <TextInput id="ann-title" labelText="標題" value={title} onChange={(e) => setTitle(e.target.value)} />
+        <TextArea id="ann-content" labelText="內容" rows={5} value={content} onChange={(e) => setContent(e.target.value)} />
+      </div>
+    </Modal>
+  );
+};
+
+export default PostAnnouncementModal;
+```
+
+- [ ] **Step 2：建 SendMessageModal**
+
+```tsx
+// frontend/src/features/contest/components/discussion/SendMessageModal.tsx
+import { useState } from 'react';
+import { Modal, TextArea } from '@carbon/react';
+
+interface Props {
+  open: boolean;
+  recipientUsername: string;
+  onClose: () => void;
+  onSubmit: (content: string) => Promise<void>;
+}
+
+export const SendMessageModal = ({ open, recipientUsername, onClose, onSubmit }: Props) => {
+  const [content, setContent] = useState('');
+  const [sending, setSending] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!content.trim() || sending) return;
+    setSending(true);
+    try {
+      await onSubmit(content.trim());
+      setContent('');
+      onClose();
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      modalHeading={`傳送訊息給：${recipientUsername}`}
+      primaryButtonText={sending ? '傳送中…' : '送出'}
+      secondaryButtonText="取消"
+      primaryButtonDisabled={sending || !content.trim()}
+      onRequestClose={onClose}
+      onRequestSubmit={handleSubmit}
+    >
+      <TextArea id="send-msg-content" labelText="訊息內容" rows={5} value={content} onChange={(e) => setContent(e.target.value)} />
+    </Modal>
+  );
+};
+
+export default SendMessageModal;
+```
+
+- [ ] **Step 3：建 `discussion/index.ts`**
+
+```typescript
+// frontend/src/features/contest/components/discussion/index.ts
+export { default as ConversationThreadView } from './ConversationThreadView';
+export { default as ContestAnnouncementList } from './ContestAnnouncementList';
+export { default as ContestConversationList } from './ContestConversationList';
+export { default as PostAnnouncementModal } from './PostAnnouncementModal';
+export { default as SendMessageModal } from './SendMessageModal';
+```
+
+- [ ] **Step 4：型別檢查 + Commit**
+
+```bash
+cd frontend && npm run -s typecheck
+git add frontend/src/features/contest/components/discussion/
+git commit -m "feat(contest): announcement and message modals + index"
+```
+
+---
+
+### Task 14: StudentDiscussionView + AdminDiscussionView（組合元件）
+
+**Files:**
+- Create: `frontend/src/features/contest/components/discussion/StudentDiscussionView.tsx`
+- Create: `frontend/src/features/contest/components/discussion/AdminDiscussionView.tsx`
+
+- [ ] **Step 1：建 StudentDiscussionView**
+
+```tsx
+// frontend/src/features/contest/components/discussion/StudentDiscussionView.tsx
+import { useEffect } from 'react';
+import {
+  ContestAnnouncementList,
+  ConversationThreadView,
+} from '@/features/contest/components/discussion';
+import { useContestConversations } from '@/features/contest/hooks/useContestConversations';
+import { useContestUnread } from '@/features/contest/hooks/useContestUnread';
+import {
+  appendMessage,
+  createStudentConversation,
+} from '@/infrastructure/api/repositories';
+
+interface Props {
+  contestId: string;
+  contestEnded: boolean;
+  contestNotStarted: boolean;
+}
+
+export const StudentDiscussionView = ({ contestId, contestEnded, contestNotStarted }: Props) => {
+  const { announcements, myConversation, refresh, loading } = useContestConversations(
+    contestId,
+    { role: 'student', pollIntervalMs: 30_000 },
+  );
+  const { unreadAnnouncementIds, unreadMessageIds, markRead } = useContestUnread({
+    contestId, role: 'student',
+    announcements, conversations: [], myConversation,
+  });
+
+  useEffect(() => {
+    if (myConversation && unreadMessageIds.length) {
+      markRead(unreadMessageIds.map((id) => `msg:${id}`));
+    }
+  }, [myConversation?.id, unreadMessageIds.join(','), markRead]);
+
+  if (loading) return <div>載入中...</div>;
+
+  const handleSend = async (content: string) => {
+    if (!myConversation) {
+      await createStudentConversation(contestId, content);
+    } else {
+      await appendMessage(contestId, myConversation.id, content);
+    }
+    await refresh();
+  };
+
+  const canPost = !contestEnded && !contestNotStarted;
+  const hint = contestNotStarted
+    ? '考試開始後可發問'
+    : contestEnded
+      ? '考試已結束，無法繼續對話'
+      : undefined;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <ContestAnnouncementList
+        announcements={announcements}
+        unreadIds={new Set(unreadAnnouncementIds)}
+        onMarkRead={(keys) => markRead(keys)}
+      />
+      <section>
+        <h4 style={{ marginTop: 0 }}>與老師對話</h4>
+        <ConversationThreadView
+          conversation={myConversation}
+          viewerRole="student"
+          canPost={canPost}
+          disabledHint={hint}
+          emptyHint="尚無訊息，可在下方輸入框開始你的提問"
+          onSend={handleSend}
+        />
+      </section>
+    </div>
+  );
+};
+
+export default StudentDiscussionView;
+```
+
+- [ ] **Step 2：建 AdminDiscussionView**
+
+```tsx
+// frontend/src/features/contest/components/discussion/AdminDiscussionView.tsx
+import { useEffect, useMemo, useState } from 'react';
+import { Dropdown } from '@carbon/react';
+import {
+  ContestAnnouncementList,
+  ContestConversationList,
+  ConversationThreadView,
+  PostAnnouncementModal,
+} from '@/features/contest/components/discussion';
+import { useContestConversations } from '@/features/contest/hooks/useContestConversations';
+import {
+  appendMessage,
+  createContestAnnouncement,
+  deleteContestAnnouncement,
+  getConversation,
+} from '@/infrastructure/api/repositories';
+import type { ContestConversation } from '@/core/entities/contest.entity';
+
+interface Props {
+  contestId: string;
+  initialAwaiting?: 'teacher' | 'student' | undefined;
+}
+
+type AwaitingFilter = 'all' | 'teacher' | 'student';
+
+export const AdminDiscussionView = ({ contestId, initialAwaiting }: Props) => {
+  const [filter, setFilter] = useState<AwaitingFilter>(initialAwaiting ?? 'all');
+  const apiAwaiting = filter === 'all' ? undefined : filter;
+  const { announcements, conversations, refresh, loading } = useContestConversations(
+    contestId,
+    { role: 'teacher', pollIntervalMs: 30_000, awaiting: apiAwaiting },
+  );
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [selectedDetail, setSelectedDetail] = useState<ContestConversation | null>(null);
+  const [annModalOpen, setAnnModalOpen] = useState(false);
+
+  useEffect(() => {
+    if (!selectedId) { setSelectedDetail(null); return; }
+    let cancelled = false;
+    getConversation(contestId, selectedId).then((d) => {
+      if (!cancelled) setSelectedDetail(d);
+    });
+    return () => { cancelled = true; };
+  }, [contestId, selectedId, conversations.length]);
+
+  const handleSend = async (content: string) => {
+    if (!selectedDetail) return;
+    await appendMessage(contestId, selectedDetail.id, content);
+    const fresh = await getConversation(contestId, selectedDetail.id);
+    setSelectedDetail(fresh);
+    await refresh();
+  };
+
+  const filterItems = useMemo(
+    () => [
+      { id: 'all', label: '全部' },
+      { id: 'teacher', label: '未回' },
+      { id: 'student', label: '已回' },
+    ],
+    [],
+  );
+
+  if (loading) return <div>載入中...</div>;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <ContestAnnouncementList
+        announcements={announcements}
+        unreadIds={new Set()}
+        canDelete
+        onMarkRead={() => {}}
+        onDelete={async (id) => {
+          await deleteContestAnnouncement(contestId, id);
+          await refresh();
+        }}
+        showCreateButton
+        onCreate={() => setAnnModalOpen(true)}
+      />
+
+      <section>
+        <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '1rem', marginBottom: '0.75rem' }}>
+          <h4 style={{ margin: 0 }}>學生對話</h4>
+          <Dropdown
+            id="conv-filter"
+            label="篩選"
+            titleText=""
+            size="sm"
+            items={filterItems}
+            itemToString={(i) => i?.label ?? ''}
+            selectedItem={filterItems.find((i) => i.id === filter)}
+            onChange={({ selectedItem }) => selectedItem && setFilter(selectedItem.id as AwaitingFilter)}
+          />
+        </header>
+        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 2fr)', gap: '1rem' }}>
+          <ContestConversationList
+            conversations={conversations}
+            selectedId={selectedId}
+            onSelect={(c) => setSelectedId(c.id)}
+          />
+          <div>
+            {selectedDetail ? (
+              <ConversationThreadView
+                conversation={selectedDetail}
+                viewerRole="teacher"
+                canPost
+                onSend={handleSend}
+              />
+            ) : (
+              <div style={{ padding: '2rem', textAlign: 'center', color: 'var(--cds-text-secondary)' }}>
+                請選擇左側對話
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+
+      <PostAnnouncementModal
+        open={annModalOpen}
+        onClose={() => setAnnModalOpen(false)}
+        onSubmit={async (title, content) => {
+          await createContestAnnouncement(contestId, { title, content });
+          await refresh();
+        }}
+      />
+    </div>
+  );
+};
+
+export default AdminDiscussionView;
+```
+
+- [ ] **Step 3：補進 `discussion/index.ts`**
+
+```typescript
+export { default as StudentDiscussionView } from './StudentDiscussionView';
+export { default as AdminDiscussionView } from './AdminDiscussionView';
+```
+
+- [ ] **Step 4：型別檢查 + Commit**
+
+```bash
+cd frontend && npm run -s typecheck
+git add frontend/src/features/contest/components/discussion/
+git commit -m "feat(contest): Student/Admin discussion view composers"
+```
+
+---
+
+## Phase 4：Notification Bell
+
+### Task 15: ContestNotificationModal
+
+**Files:**
+- Create: `frontend/src/features/contest/components/notification/ContestNotificationModal.tsx`
+
+- [ ] **Step 1：實作**
+
+```tsx
+// frontend/src/features/contest/components/notification/ContestNotificationModal.tsx
+import { Modal, Tag } from '@carbon/react';
+import type { ContestAnnouncement, ContestMessage } from '@/core/entities/contest.entity';
+
+interface Props {
+  open: boolean;
+  unreadAnnouncements: ContestAnnouncement[];
+  unreadMessages: ContestMessage[];
+  onMarkAllRead: () => void;
+  onClose: () => void;
+  onGoToDiscussion: () => void;
+}
+
+export const ContestNotificationModal = ({
+  open, unreadAnnouncements, unreadMessages,
+  onMarkAllRead, onClose, onGoToDiscussion,
+}: Props) => {
+  const handleClose = () => {
+    onMarkAllRead();
+    onClose();
+  };
+  const handleSecondary = () => {
+    onMarkAllRead();
+    onGoToDiscussion();
+    onClose();
+  };
+
+  return (
+    <Modal
+      open={open}
+      modalHeading="未讀通知"
+      primaryButtonText="我已閱讀"
+      secondaryButtonText="前往討論"
+      onRequestClose={handleClose}
+      onRequestSubmit={handleClose}
+      onSecondarySubmit={handleSecondary}
+    >
+      <section style={{ marginBottom: '1.5rem' }}>
+        <h5 style={{ marginTop: 0 }}>新公告（{unreadAnnouncements.length}）</h5>
+        {unreadAnnouncements.length === 0 ? (
+          <p style={{ color: 'var(--cds-text-secondary)' }}>無</p>
+        ) : (
+          <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+            {unreadAnnouncements.map((a) => (
+              <li key={a.id}>
+                <strong>{a.title}</strong>
+                <p style={{ margin: '0.25rem 0', whiteSpace: 'pre-wrap' }}>{a.content}</p>
+                <small style={{ color: 'var(--cds-text-secondary)' }}>{new Date(a.createdAt).toLocaleString()}</small>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section>
+        <h5 style={{ margin: '0 0 0.5rem 0' }}>新訊息（{unreadMessages.length}）</h5>
+        {unreadMessages.length === 0 ? (
+          <p style={{ color: 'var(--cds-text-secondary)' }}>無</p>
+        ) : (
+          <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+            {unreadMessages.map((m) => (
+              <li key={m.id}>
+                <Tag size="sm" type="cyan">老師</Tag>{' '}
+                <span>{m.content}</span>
+                <div><small style={{ color: 'var(--cds-text-secondary)' }}>{new Date(m.createdAt).toLocaleString()}</small></div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </Modal>
+  );
+};
+
+export default ContestNotificationModal;
+```
+
+- [ ] **Step 2：型別檢查 + Commit**
+
+```bash
+cd frontend && npm run -s typecheck
+git add frontend/src/features/contest/components/notification/ContestNotificationModal.tsx
+git commit -m "feat(contest): ContestNotificationModal for student bell"
+```
+
+---
+
+### Task 16: ContestNotificationBell
+
+**Files:**
+- Create: `frontend/src/features/contest/components/notification/ContestNotificationBell.tsx`
+- Create: `frontend/src/features/contest/components/notification/ContestNotificationBell.module.scss`
+
+- [ ] **Step 1：實作**
+
+```tsx
+// frontend/src/features/contest/components/notification/ContestNotificationBell.tsx
+import { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { HeaderGlobalAction } from '@carbon/react';
+import { Notification } from '@carbon/icons-react';
+import { useContestConversations } from '@/features/contest/hooks/useContestConversations';
+import { useContestUnread } from '@/features/contest/hooks/useContestUnread';
+import { ContestNotificationModal } from './ContestNotificationModal';
+import styles from './ContestNotificationBell.module.scss';
+
+interface Props {
+  contestId: string;
+  /** 'student' | 'teacher' */
+  role: 'student' | 'teacher';
+  /** path to navigate teachers when bell clicked, e.g. /admin/conversations?awaiting=teacher */
+  teacherClickPath: string;
+  /** path to navigate students from "前往討論" */
+  studentDiscussionPath: string;
+}
+
+export const ContestNotificationBell = ({
+  contestId, role, teacherClickPath, studentDiscussionPath,
+}: Props) => {
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+
+  const awaiting = role === 'teacher' ? ('teacher' as const) : undefined;
+  const { announcements, conversations, myConversation } = useContestConversations(
+    contestId,
+    { role, pollIntervalMs: 30_000, awaiting },
+  );
+
+  const { unreadAnnouncementIds, unreadMessageIds, unreadCount, markAllRead } =
+    useContestUnread({ contestId, role, announcements, conversations, myConversation });
+
+  const unreadAnnouncements = useMemo(
+    () => announcements.filter((a) => unreadAnnouncementIds.includes(a.id)),
+    [announcements, unreadAnnouncementIds],
+  );
+  const unreadMessages = useMemo(
+    () => (myConversation?.messages ?? []).filter((m) => unreadMessageIds.includes(m.id)),
+    [myConversation?.messages, unreadMessageIds],
+  );
+
+  const badgeText = unreadCount === 0 ? null : unreadCount > 9 ? '9+' : String(unreadCount);
+
+  const handleClick = () => {
+    if (role === 'teacher') {
+      navigate(teacherClickPath);
+    } else {
+      setOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <HeaderGlobalAction aria-label="通知" tooltipAlignment="center" onClick={handleClick}>
+        <span className={styles.iconWrapper}>
+          <Notification size={20} />
+          {badgeText && <span className={styles.badge}>{badgeText}</span>}
+        </span>
+      </HeaderGlobalAction>
+      {role === 'student' && (
+        <ContestNotificationModal
+          open={open}
+          unreadAnnouncements={unreadAnnouncements}
+          unreadMessages={unreadMessages}
+          onClose={() => setOpen(false)}
+          onMarkAllRead={markAllRead}
+          onGoToDiscussion={() => navigate(studentDiscussionPath)}
+        />
+      )}
+    </>
+  );
+};
+
+export default ContestNotificationBell;
+```
+
+- [ ] **Step 2：建立 SCSS**
+
+```scss
+// frontend/src/features/contest/components/notification/ContestNotificationBell.module.scss
+.iconWrapper { position: relative; display: inline-flex; }
+.badge {
+  position: absolute;
+  top: -0.25rem; right: -0.5rem;
+  min-width: 1.1rem; height: 1.1rem;
+  padding: 0 0.25rem;
+  background: var(--cds-support-error);
+  color: var(--cds-text-on-color);
+  border-radius: 0.55rem;
+  font-size: 0.6875rem;
+  line-height: 1.1rem;
+  text-align: center;
+  font-weight: 600;
+}
+```
+
+- [ ] **Step 3：建 `notification/index.ts`**
+
+```typescript
+export { default as ContestNotificationBell } from './ContestNotificationBell';
+export { default as ContestNotificationModal } from './ContestNotificationModal';
+```
+
+- [ ] **Step 4：Commit**
+
+```bash
+git add frontend/src/features/contest/components/notification/
+git commit -m "feat(contest): ContestNotificationBell with badge"
+```
+
+---
+
+### Task 17: 在 ContestLayout 掛上鈴鐺
+
+**Files:**
+- Modify: `frontend/src/features/contest/components/layout/ContestLayout.tsx`
+
+- [ ] **Step 1：在 import 區塊加上 Bell 與 path 構造器**
+
+開啟 `frontend/src/features/contest/components/layout/ContestLayout.tsx`：
+
+```typescript
+import { ContestNotificationBell } from '@/features/contest/components/notification';
+```
+
+- [ ] **Step 2：在 `<HeaderGlobalBar>` 內 `{renderExamStatus()}` 之後、`{headerActions}` 之前插入 Bell**
+
+定位 `frontend/src/features/contest/components/layout/ContestLayout.tsx:425` 的 `{renderExamStatus()}` 行，下方插入：
+
+```tsx
+{contestId && (
+  <ContestNotificationBell
+    contestId={contestId}
+    role={isAdmin ? 'teacher' : 'student'}
+    teacherClickPath={`${adminPath}/conversations?awaiting=teacher`}
+    studentDiscussionPath={`${dashboardPath}/qa`}
+  />
+)}
+```
+
+> 路徑請依現有 routing 命名調整：若 dashboard 的 Q&A 子路徑與此不同，於 Task 19 接線時一併修正。
+
+- [ ] **Step 3：手動驗證**
+
+```bash
+cd frontend && npm run dev
+```
+
+開瀏覽器到任一 contest，確認頂部 navbar 出現鈴鐺 icon；製造 1 筆未讀公告（用後端 admin 介面或 seed），重整看到紅色 badge。
+
+- [ ] **Step 4：Commit**
+
+```bash
+git add frontend/src/features/contest/components/layout/ContestLayout.tsx
+git commit -m "feat(contest): mount notification bell in ContestLayout header"
+```
+
+---
+
+## Phase 5：Wire Up Screens
+
+### Task 18: ContestQAScreen 改用 StudentDiscussionView
+
+**Files:**
+- Modify: `frontend/src/features/contest/screens/ContestQAScreen.tsx`
+
+- [ ] **Step 1：重寫整檔**
+
+```tsx
+// frontend/src/features/contest/screens/ContestQAScreen.tsx
+import { useParams } from 'react-router-dom';
+import { useContext } from 'react';
+import { ContestContext } from '@/features/contest/contexts/ContestContext';
+import { StudentDiscussionView } from '@/features/contest/components/discussion';
+
+export const ContestQAScreen = () => {
+  const { contestId } = useParams<{ contestId: string }>();
+  const { contest } = useContext(ContestContext);
+  const now = Date.now();
+  const contestEnded = !!contest?.endTime && new Date(contest.endTime).getTime() < now;
+  const contestNotStarted = !!contest?.startTime && new Date(contest.startTime).getTime() > now;
+
+  if (!contestId) return null;
+
+  return (
+    <StudentDiscussionView
+      contestId={contestId}
+      contestEnded={contestEnded}
+      contestNotStarted={contestNotStarted}
+    />
+  );
+};
+
+export default ContestQAScreen;
+```
+
+> 若 `ContestContext` API 與本檔假設不符（例如 `contest` 欄位不在 context 裡），改用既有 `useContestLayoutState` hook 取得 contest。透過 `grep -n "ContestContext" frontend/src/features/contest/contexts/ContestContext.tsx` 確認。
+
+- [ ] **Step 2：型別檢查 + Commit**
+
+```bash
+cd frontend && npm run -s typecheck
+git add frontend/src/features/contest/screens/ContestQAScreen.tsx
+git commit -m "refactor(contest): ContestQAScreen uses StudentDiscussionView"
+```
+
+---
+
+### Task 19: AdminClarificationsScreen → AdminConversationsScreen
+
+**Files:**
+- Rename + Rewrite: `frontend/src/features/contest/screens/admin/panels/AdminClarificationsScreen.tsx` → `AdminConversationsScreen.tsx`
+- Modify: `frontend/src/features/contest/modules/AdminPanelRendererRegistry.tsx`
+- Modify: 其他 hardcoded `clarifications` key 處（grep 確認）
+- Delete: `frontend/src/features/contest/screens/admin/panels/AdminClarificationsPanel.module.scss`（內容若不再使用）
+
+- [ ] **Step 1：建立新檔 `AdminConversationsScreen.tsx`**
+
+```tsx
+// frontend/src/features/contest/screens/admin/panels/AdminConversationsScreen.tsx
+import { useParams, useSearchParams } from 'react-router-dom';
+import { AdminDiscussionView } from '@/features/contest/components/discussion';
+
+export const AdminConversationsScreen = () => {
+  const { contestId } = useParams<{ contestId: string }>();
+  const [params] = useSearchParams();
+  const awaiting = params.get('awaiting');
+  const initial = awaiting === 'teacher' || awaiting === 'student' ? awaiting : undefined;
+
+  if (!contestId) return null;
+  return <AdminDiscussionView contestId={contestId} initialAwaiting={initial} />;
+};
+
+export default AdminConversationsScreen;
+```
+
+- [ ] **Step 2：刪除舊檔**
+
+```bash
+rm frontend/src/features/contest/screens/admin/panels/AdminClarificationsScreen.tsx
+rm frontend/src/features/contest/screens/admin/panels/AdminClarificationsPanel.module.scss
+```
+
+- [ ] **Step 3：更新 panel registry**
+
+`frontend/src/features/contest/modules/AdminPanelRendererRegistry.tsx`：
+
+```typescript
+import AdminConversationsScreen from '../screens/admin/panels/AdminConversationsScreen';
+
+const registry = {
+  // ...existing entries...
+  conversations: AdminConversationsScreen,
+};
+```
+
+刪除舊 key `clarifications`。
+
+- [ ] **Step 4：搜尋 hardcoded `clarifications` 字串**
+
+```bash
+grep -rn "clarifications" frontend/src/features/contest/ --include="*.tsx" --include="*.ts" | grep -v node_modules
+```
+
+針對每處 hit：tab config / route / breadcrumb 等，把 `clarifications` 改為 `conversations`，label 與 i18n key 一併調整。
+
+- [ ] **Step 5：型別檢查 + 啟動 dev 確認 admin panel 可載入**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+- [ ] **Step 6：Commit**
+
+```bash
+git add -A frontend/src/features/contest/screens/admin/panels/ frontend/src/features/contest/modules/AdminPanelRendererRegistry.tsx
+git commit -m "refactor(contest): rename Clarifications panel to Conversations"
+```
+
+---
+
+### Task 20: AdminProctoringPanel 加「傳送訊息」按鈕
+
+**Files:**
+- Modify: `frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.tsx`
+
+- [ ] **Step 1：閱讀現有檔案找出每個學生卡片渲染處**
+
+```bash
+grep -n "participant\|student\|map(" frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.tsx | head -30
+```
+
+- [ ] **Step 2：在學生卡片操作區追加按鈕**
+
+於 student card 渲染區的動作 / button row 加入：
+
+```tsx
+import { useState } from 'react';
+import { Button } from '@carbon/react';
+import { Email } from '@carbon/icons-react';
+import { SendMessageModal } from '@/features/contest/components/discussion';
+import { sendMessageToStudent } from '@/infrastructure/api/repositories';
+
+// inside the row:
+const [msgOpenFor, setMsgOpenFor] = useState<{ id: string; username: string } | null>(null);
+
+<Button
+  kind="ghost"
+  size="sm"
+  renderIcon={Email}
+  onClick={() => setMsgOpenFor({ id: participant.user.id, username: participant.user.username })}
+>
+  傳送訊息
+</Button>
+
+<SendMessageModal
+  open={!!msgOpenFor}
+  recipientUsername={msgOpenFor?.username ?? ''}
+  onClose={() => setMsgOpenFor(null)}
+  onSubmit={async (content) => {
+    if (!msgOpenFor) return;
+    await sendMessageToStudent(contestId, msgOpenFor.id, content);
+  }}
+/>
+```
+
+> 實際 import path 與型別欄位（`participant.user.id`）請依該檔現有資料結構調整。
+
+- [ ] **Step 3：型別檢查 + 手動測試**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+打開 dev server，登入教師帳號 → contest admin → 監考面板 → 對任一學生點「傳送訊息」 → 送出 → 切到學生帳號（另一瀏覽器）查看鈴鐺與 dashboard。
+
+- [ ] **Step 4：Commit**
+
+```bash
+git add frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.tsx
+git commit -m "feat(contest): proctoring panel can send direct message to student"
+```
+
+---
+
+## Phase 6：Cleanup
+
+### Task 21: 刪除既有 ContestClarifications / 相關元件 / 舊 hook
+
+**Files:**
+- Delete: `frontend/src/features/contest/components/ContestClarifications.tsx`
+- Delete: `frontend/src/features/contest/components/AnnouncementSectionLayout.tsx`
+- Delete: `frontend/src/features/contest/components/DiscussionsSection.tsx`
+- Delete: `frontend/src/features/contest/hooks/useClarifications.ts`
+- Modify: `frontend/src/features/contest/components/index.ts`
+
+- [ ] **Step 1：搜尋殘餘 import**
+
+```bash
+grep -rn "ContestClarifications\|AnnouncementSectionLayout\|DiscussionsSection\|useClarifications" frontend/src --include="*.ts" --include="*.tsx" | grep -v node_modules
+```
+
+- [ ] **Step 2：對每個 hit 改寫或刪除引用**
+
+預期僅剩 `frontend/src/features/contest/components/index.ts` 中的 re-export，整段刪除。其他若有則改為新元件。
+
+- [ ] **Step 3：刪除檔案**
+
+```bash
+rm frontend/src/features/contest/components/ContestClarifications.tsx \
+   frontend/src/features/contest/components/AnnouncementSectionLayout.tsx \
+   frontend/src/features/contest/components/DiscussionsSection.tsx \
+   frontend/src/features/contest/hooks/useClarifications.ts
+```
+
+- [ ] **Step 4：型別檢查 + lint**
+
+```bash
+cd frontend && npm run -s typecheck && npm run -s lint
+```
+
+Expected：無錯誤。
+
+- [ ] **Step 5：Commit**
+
+```bash
+git add -A frontend/src/features/contest/
+git commit -m "chore(contest): remove legacy Clarifications components and hook"
+```
+
+---
+
+### Task 22: i18n 與最終驗收
+
+**Files:**
+- Modify: `frontend/src/locales/*` 或對應 i18n 檔（依專案結構）
+
+- [ ] **Step 1：執行 i18n 同步**
+
+```bash
+cd frontend && npm run sync:i18n && npm run check:i18n
+```
+
+Expected：通過。
+
+- [ ] **Step 2：執行完整 backend 測試**
+
+```bash
+bash .codex/skills/qjudge-env-compose-owner/scripts/qjudge-dc.sh dev exec -T -e PYTEST_ADDOPTS='--no-cov' backend pytest apps/contests/tests/ -v
+```
+
+Expected：所有 contest 測試（含本次新增）通過；舊 Clarification 測試應已隨 Task 2 一併移除（如有殘留請刪除）。
+
+- [ ] **Step 3：執行 frontend 單元測試**
+
+```bash
+cd frontend && npm test
+```
+
+Expected：所有測試通過，特別是 `contestReadStorage.test.ts` 與 `useContestUnread.test.ts`。
+
+- [ ] **Step 4：手動 E2E 驗收清單**
+
+依序在瀏覽器驗證：
+
+- [ ] 學生登入 → contest → navbar 鈴鐺顯示未讀公告 badge
+- [ ] 點鈴鐺 → modal 列出公告與訊息 → 「我已閱讀」後 badge 消失
+- [ ] 學生 dashboard Q&A tab → 上半公告、下半對話 thread；無對話時顯示 empty hint
+- [ ] 學生輸入訊息送出 → 出現在 thread 中 → 重整仍在
+- [ ] 教師登入 → contest admin → 對話面板 filter 「未回」運作
+- [ ] 教師回覆 → 學生鈴鐺 badge 出現 → modal 顯示新訊息
+- [ ] 教師 proctoring panel 對學生送訊息 → 學生 dashboard 看到該訊息
+- [ ] 競賽結束（手動把 end_time 改為過去）：學生 thread 輸入框 disabled，hint 顯示
+
+- [ ] **Step 5：Commit i18n 變更（若有）**
+
+```bash
+git add -A
+git diff --cached --stat
+git commit -m "chore(contest): sync i18n & verify full conversation flow"
+```
+
+---
+
+## 自我審查
+
+1. **Spec 覆蓋檢查**
+   - §A 資料模型 → Task 1
+   - §B localStorage 已讀 → Task 7
+   - §C useContestUnread → Task 9
+   - §D navbar 鈴鐺 → Task 15-17
+   - §E Q&A tab + thread → Task 10-11, 14, 18
+   - §F 權限狀態 → Task 4 後端 + Task 14 前端輸入框 disabled
+   - §G.1 教師面板 + filter → Task 12, 14, 19
+   - §G.2 Proctoring 傳送訊息 → Task 20
+   - §H 元件拆檔 → Task 10-14
+   - §I 後端 → Task 1-5
+
+2. **Placeholder 檢查**：每段 step 皆含完整代碼或精確命令，無 TBD / TODO。Task 19 / 20 留有「依現有結構微調」的彈性註記，但動作描述明確（grep + 取代 hardcoded key）。
+
+3. **型別一致性**：`ContestConversation` / `ContestMessage` / `senderRole` / `firstSenderRole` 的命名在 Task 6 定義後，Task 8-20 皆延用。後端 `last_message` / `first_sender_role` 與前端 `lastMessage` / `firstSenderRole` 一一對應（mapper 在 Task 6 處理）。

From 0c8be905eb8da83d2769aa03de788494ba095aba Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:12:44 +0800
Subject: [PATCH 22/60] refactor(contest-admin): migrate command center
 tab+toolbar to dashboard primitives

The participants/answer-distribution tab strip and its inline search +
filter toolbar now use DashboardTabs / DashboardTabBar /
DashboardTabPanel / DashboardToolbar instead of bespoke .tabRow /
.tabRowToolbar / .tabRowSearch / .tabRowFilterMenu. Mobile stacking,
borderless search input, and toolbar alignment are all owned by the
shared primitives.

DashboardToolbar.Search now accepts id, size, and onClear so existing
callers that need clearable search can opt in without dropping back to
raw Carbon Search.

DashboardTabPanel switches from conditional render to always-render
with hidden=true on inactive panels, matching Carbon Tabs semantics so
screen readers and tests can locate every tabpanel by role.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../AdminOverviewCommandCenter.module.scss    |  67 -------
 .../admin/AdminOverviewCommandCenter.tsx      | 180 +++++++++---------
 .../dashboard/tabs/DashboardTabPanel.tsx      |   8 +-
 .../dashboard/tabs/DashboardToolbar.tsx       |  10 +-
 .../components/dashboard/tabs/tabs.test.tsx   |  16 +-
 5 files changed, 113 insertions(+), 168 deletions(-)

diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
index 0669b521..7d4eb13d 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
@@ -21,14 +21,6 @@
   height: 0.5rem;
 }
 
-.panelGrid {
-  border: 1px solid var(--cds-border-subtle);
-}
-
-.drilldownTabPanel {
-  padding: 0;
-}
-
 .drilldownPanel {
   min-width: 0;
   padding: 1.25rem;
@@ -38,54 +30,6 @@
   padding: 0;
 }
 
-.tabRow {
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
-  gap: 1rem;
-  border-bottom: 1px solid var(--cds-border-subtle);
-}
-
-.tabRow > :global(.cds--tabs) {
-  flex: 0 1 auto;
-  min-width: 0;
-}
-
-.tabRowToolbar {
-  display: flex;
-  flex: 0 1 auto;
-  align-items: stretch;
-  margin: 0 1rem;
-  max-width: 24rem;
-  width: 100%;
-  align-self: center;
-  border: 0;
-  background: transparent;
-}
-
-.tabRowToolbarActive {
-  border-color: transparent;
-}
-
-.tabRowSearch {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.tabRowSearch :global(.cds--search-input) {
-  border: none;
-  background: transparent;
-}
-
-.tabRowSearch :global(.cds--search-magnifier) {
-  inset-inline-start: 0.75rem;
-}
-
-.tabRowFilterMenu {
-  flex: 0 0 auto;
-  border-left: 0;
-}
-
 .emptyState {
   color: var(--cds-text-secondary);
 }
@@ -296,17 +240,6 @@
 }
 
 @media (max-width: 672px) {
-  .tabRow {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.5rem;
-  }
-
-  .tabRowToolbar {
-    margin: 0 1rem 0.5rem;
-    max-width: none;
-  }
-
   .participantDrawerBackdrop {
     display: none;
   }
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
index 44b1f183..3e7d3608 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
@@ -2,14 +2,8 @@ import {
   Button,
   OverflowMenu,
   OverflowMenuItem,
-  Search,
   SelectableTag,
   SkeletonText,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
 } from "@carbon/react";
 import {
   CheckmarkFilled,
@@ -74,6 +68,10 @@ import {
   BlockHeader,
   DashboardBlock,
   DashboardContainer,
+  DashboardTabBar,
+  DashboardTabPanel,
+  DashboardTabs,
+  DashboardToolbar,
   MetricBlock,
 } from "@/shared/components/dashboard";
 import styles from "./AdminOverviewCommandCenter.module.scss";
@@ -330,7 +328,8 @@ export default function AdminOverviewCommandCenter({
   const [participantSearch, setParticipantSearch] = useState("");
   const [participantStatusFilter, setParticipantStatusFilter] =
     useState<ParticipantStatusFilter>("all");
-  const [activePanelTab, setActivePanelTab] = useState(0);
+  const [activePanelTab, setActivePanelTab] =
+    useState<"participants" | "questionStats">("participants");
   const [questionStatsSearch, setQuestionStatsSearch] = useState("");
   const [questionStatsKindFilter, setQuestionStatsKindFilter] =
     useState<string>("all");
@@ -635,8 +634,6 @@ export default function AdminOverviewCommandCenter({
   ) => {
     setParticipantSearch(event.target.value);
   };
-  const isFilterActive = participantStatusFilter !== "all";
-  const isQuestionStatsFilterActive = questionStatsKindFilter !== "all";
   const participantMetricTags = (
     <div className={styles.metricTagGroup} aria-label="考生卡片資料切換">
       {PARTICIPANT_METRIC_OPTIONS.map((option) => (
@@ -834,42 +831,41 @@ export default function AdminOverviewCommandCenter({
     </div>
   );
   const participantTabToolbar = (
-    <div
-      className={`${styles.tabRowToolbar} ${
-        isFilterActive ? styles.tabRowToolbarActive : ""
-      }`}
-    >
-      <Search
+    <DashboardToolbar>
+      <DashboardToolbar.Search
         id="overview-participants-search"
-        labelText="搜尋考生"
+        ariaLabel="搜尋考生"
         placeholder="搜尋顯示名稱或使用者名稱..."
         value={participantSearch}
-        onChange={handleParticipantSearchChange}
+        onChange={(value) =>
+          handleParticipantSearchChange({
+            target: { value },
+          } as ChangeEvent<HTMLInputElement>)
+        }
         onClear={() => setParticipantSearch("")}
-        size="md"
-        className={styles.tabRowSearch}
       />
-      <OverflowMenu
-        renderIcon={Filter}
-        iconDescription="篩選狀態"
-        size="md"
-        flipped
-        className={styles.tabRowFilterMenu}
-        aria-label="篩選考生狀態"
-      >
-        {PARTICIPANT_STATUS_FILTERS.map((option) => (
-          <OverflowMenuItem
-            key={option.id}
-            itemText={
-              participantStatusFilter === option.id
-                ? `✓  ${option.label}`
-                : option.label
-            }
-            onClick={() => setParticipantStatusFilter(option.id)}
-          />
-        ))}
-      </OverflowMenu>
-    </div>
+      <DashboardToolbar.Filter>
+        <OverflowMenu
+          renderIcon={Filter}
+          iconDescription="篩選狀態"
+          size="md"
+          flipped
+          aria-label="篩選考生狀態"
+        >
+          {PARTICIPANT_STATUS_FILTERS.map((option) => (
+            <OverflowMenuItem
+              key={option.id}
+              itemText={
+                participantStatusFilter === option.id
+                  ? `✓  ${option.label}`
+                  : option.label
+              }
+              onClick={() => setParticipantStatusFilter(option.id)}
+            />
+          ))}
+        </OverflowMenu>
+      </DashboardToolbar.Filter>
+    </DashboardToolbar>
   );
   const questionStatsPanel = (
     <div className={`${styles.drilldownPanel} ${styles.drilldownPanelFlush}`}>
@@ -896,66 +892,66 @@ export default function AdminOverviewCommandCenter({
     </div>
   );
   const questionStatsTabToolbar = (
-    <div
-      className={`${styles.tabRowToolbar} ${
-        isQuestionStatsFilterActive ? styles.tabRowToolbarActive : ""
-      }`}
-    >
-      <Search
+    <DashboardToolbar>
+      <DashboardToolbar.Search
         id="overview-question-stats-search"
-        labelText="搜尋題目"
+        ariaLabel="搜尋題目"
         placeholder="搜尋題號或題目..."
         value={questionStatsSearch}
-        onChange={(event) => setQuestionStatsSearch(event.target.value)}
+        onChange={setQuestionStatsSearch}
         onClear={() => setQuestionStatsSearch("")}
-        size="md"
-        className={styles.tabRowSearch}
       />
-      <OverflowMenu
-        renderIcon={Filter}
-        iconDescription="篩選題型"
-        size="md"
-        flipped
-        className={styles.tabRowFilterMenu}
-        aria-label="篩選題型"
-      >
-        {QUESTION_KIND_FILTERS.map((option) => (
-          <OverflowMenuItem
-            key={option.id}
-            itemText={
-              questionStatsKindFilter === option.id
-                ? `✓  ${option.label}`
-                : option.label
-            }
-            onClick={() => setQuestionStatsKindFilter(option.id)}
-          />
-        ))}
-      </OverflowMenu>
-    </div>
+      <DashboardToolbar.Filter>
+        <OverflowMenu
+          renderIcon={Filter}
+          iconDescription="篩選題型"
+          size="md"
+          flipped
+          aria-label="篩選題型"
+        >
+          {QUESTION_KIND_FILTERS.map((option) => (
+            <OverflowMenuItem
+              key={option.id}
+              itemText={
+                questionStatsKindFilter === option.id
+                  ? `✓  ${option.label}`
+                  : option.label
+              }
+              onClick={() => setQuestionStatsKindFilter(option.id)}
+            />
+          ))}
+        </OverflowMenu>
+      </DashboardToolbar.Filter>
+    </DashboardToolbar>
   );
   const drilldownPanel = (
-    <section className={styles.panelGrid} aria-label="總覽資料切換">
-      <Tabs
-        selectedIndex={activePanelTab}
-        onChange={({ selectedIndex }) => setActivePanelTab(selectedIndex)}
+    <DashboardBlock padding="flush" ariaLabel="總覽資料切換">
+      <DashboardTabs
+        activeId={activePanelTab}
+        onChange={(id) =>
+          setActivePanelTab(id as "participants" | "questionStats")
+        }
       >
-        <div className={styles.tabRow}>
-          <TabList aria-label="總覽資料切換">
-            <Tab>參與者</Tab>
-            <Tab>作答分佈</Tab>
-          </TabList>
-          {activePanelTab === 0 ? participantTabToolbar : questionStatsTabToolbar}
-        </div>
-        <TabPanels>
-          <TabPanel className={styles.drilldownTabPanel}>
-            {participantPanel}
-          </TabPanel>
-          <TabPanel className={styles.drilldownTabPanel}>
-            {questionStatsPanel}
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
-    </section>
+        <DashboardTabBar
+          ariaLabel="總覽資料切換"
+          tabs={[
+            { id: "participants", label: "參與者" },
+            { id: "questionStats", label: "作答分佈" },
+          ]}
+          toolbar={
+            activePanelTab === "participants"
+              ? participantTabToolbar
+              : questionStatsTabToolbar
+          }
+        />
+        <DashboardTabPanel tabId="participants">
+          {participantPanel}
+        </DashboardTabPanel>
+        <DashboardTabPanel tabId="questionStats">
+          {questionStatsPanel}
+        </DashboardTabPanel>
+      </DashboardTabs>
+    </DashboardBlock>
   );
   return (
     <>
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardTabPanel.tsx b/frontend/src/shared/components/dashboard/tabs/DashboardTabPanel.tsx
index 9bf07dfc..22622bd8 100644
--- a/frontend/src/shared/components/dashboard/tabs/DashboardTabPanel.tsx
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardTabPanel.tsx
@@ -8,6 +8,10 @@ export interface DashboardTabPanelProps {
 
 export function DashboardTabPanel({ tabId, children }: DashboardTabPanelProps) {
   const { activeId } = useDashboardTabs();
-  if (activeId !== tabId) return null;
-  return <>{children}</>;
+  const active = activeId === tabId;
+  return (
+    <div role="tabpanel" hidden={!active}>
+      {children}
+    </div>
+  );
 }
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.tsx b/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.tsx
index 17a6151a..a441cc85 100644
--- a/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.tsx
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.tsx
@@ -13,24 +13,32 @@ function Root({ children }: DashboardToolbarProps) {
 interface ToolbarSearchProps {
   value: string;
   onChange: (value: string) => void;
+  onClear?: () => void;
   placeholder?: string;
   ariaLabel?: string;
+  id?: string;
+  size?: "sm" | "md" | "lg";
 }
 
 function ToolbarSearch({
   value,
   onChange,
+  onClear,
   placeholder,
   ariaLabel,
+  id,
+  size = "md",
 }: ToolbarSearchProps) {
   return (
     <div className={styles.search}>
       <Search
-        size="lg"
+        id={id}
+        size={size}
         labelText={ariaLabel ?? placeholder ?? "search"}
         placeholder={placeholder}
         value={value}
         onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+        onClear={onClear}
       />
     </div>
   );
diff --git a/frontend/src/shared/components/dashboard/tabs/tabs.test.tsx b/frontend/src/shared/components/dashboard/tabs/tabs.test.tsx
index 5a749a4b..94a1785f 100644
--- a/frontend/src/shared/components/dashboard/tabs/tabs.test.tsx
+++ b/frontend/src/shared/components/dashboard/tabs/tabs.test.tsx
@@ -33,10 +33,12 @@ function renderTabs(active: string, onChange = vi.fn()) {
 }
 
 describe("Dashboard tabs", () => {
-  it("only renders active panel", () => {
+  it("hides inactive panel", () => {
     renderTabs("a");
-    expect(screen.getByText("PANEL_A")).toBeInTheDocument();
-    expect(screen.queryByText("PANEL_B")).not.toBeInTheDocument();
+    const panelA = screen.getByText("PANEL_A");
+    const panelB = screen.getByText("PANEL_B");
+    expect(panelA.closest('[role="tabpanel"]')).not.toHaveAttribute("hidden");
+    expect(panelB.closest('[role="tabpanel"]')).toHaveAttribute("hidden");
   });
 
   it("renders toolbar slot", () => {
@@ -50,9 +52,11 @@ describe("Dashboard tabs", () => {
     expect(onChange).toHaveBeenCalledWith("b");
   });
 
-  it("switches panel when active id changes", () => {
+  it("switches active panel when active id changes", () => {
     renderTabs("b");
-    expect(screen.queryByText("PANEL_A")).not.toBeInTheDocument();
-    expect(screen.getByText("PANEL_B")).toBeInTheDocument();
+    const panelA = screen.getByText("PANEL_A");
+    const panelB = screen.getByText("PANEL_B");
+    expect(panelA.closest('[role="tabpanel"]')).toHaveAttribute("hidden");
+    expect(panelB.closest('[role="tabpanel"]')).not.toHaveAttribute("hidden");
   });
 });

From 9a66cee077483535a786557ffbbca86292d4ad06 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:14:58 +0800
Subject: [PATCH 23/60] feat(contest): shimmer running countdown progress bar

When the contest is in the during phase, CountdownProgress overlays a
2s linear-gradient shimmer on the progress bar so the bar feels alive
between per-second ticks. Before/after phases stay static.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/CountdownProgress.module.scss  | 28 +++++++++++++++++++
 .../contest/components/CountdownProgress.tsx  |  4 ++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/contest/components/CountdownProgress.module.scss b/frontend/src/features/contest/components/CountdownProgress.module.scss
index a95b13f0..c655ff15 100644
--- a/frontend/src/features/contest/components/CountdownProgress.module.scss
+++ b/frontend/src/features/contest/components/CountdownProgress.module.scss
@@ -7,3 +7,31 @@
 .progressBar :global(.cds--progress-bar__bar) {
   height: 0.5rem;
 }
+
+// Running shimmer: when the contest is in progress, the bar gets a
+// subtle moving highlight so the value feels alive even between
+// per-second ticks.
+.running :global(.cds--progress-bar__bar) {
+  position: relative;
+  overflow: hidden;
+}
+
+.running :global(.cds--progress-bar__bar)::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.35) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  transform: translateX(-100%);
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
diff --git a/frontend/src/features/contest/components/CountdownProgress.tsx b/frontend/src/features/contest/components/CountdownProgress.tsx
index 82e62ecf..2413e28e 100644
--- a/frontend/src/features/contest/components/CountdownProgress.tsx
+++ b/frontend/src/features/contest/components/CountdownProgress.tsx
@@ -80,7 +80,9 @@ export function CountdownProgress({
           size="small"
           value={display.percent}
           status={phase === "after" ? "finished" : "active"}
-          className={styles.progressBar}
+          className={`${styles.progressBar} ${
+            phase === "during" ? styles.running : ""
+          }`}
         />
       ) : null}
     </div>

From 517305dc1f97c4be0b695d7b2f85564756f5dde6 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:18:13 +0800
Subject: [PATCH 24/60] chore(dashboard): add typography token guard script

scripts/check-typography-tokens.js scans the dashboard primitive
library (src/shared/components/dashboard) for hardcoded font-size
values and exits non-zero if any escape onto a primitive. Carbon CSS
tokens (var(--cds-*)), keywords (inherit/normal/etc.) and SCSS
variables remain allowed. font-weight numbers stay free since not all
weights have semantic Carbon tokens.

Run via `npm run check:typography`. Scope intentionally stops at the
dashboard library so feature-level legacy SCSS isn't disturbed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/package.json                       |   1 +
 frontend/scripts/check-typography-tokens.js | 153 ++++++++++++++++++++
 2 files changed, 154 insertions(+)
 create mode 100644 frontend/scripts/check-typography-tokens.js

diff --git a/frontend/package.json b/frontend/package.json
index 849b4583..479e9daa 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
     "cf:landing:deploy:preview": "npm run build:landing && npx wrangler pages deploy dist-landing --project-name=qjudge-landing --branch=preview",
     "check:docs": "node scripts/check-docs-translations.js",
     "check:i18n": "node scripts/check-i18n-sync.js",
+    "check:typography": "node scripts/check-typography-tokens.js",
     "sync:i18n": "node scripts/sync-i18n.js",
     "lint": "eslint . --max-warnings=9999",
     "preview": "vite preview",
diff --git a/frontend/scripts/check-typography-tokens.js b/frontend/scripts/check-typography-tokens.js
new file mode 100644
index 00000000..e688a561
--- /dev/null
+++ b/frontend/scripts/check-typography-tokens.js
@@ -0,0 +1,153 @@
+#!/usr/bin/env node
+/**
+ * Typography Token Guard
+ *
+ * Forbids hardcoded font-size / font-weight values inside the dashboard
+ * primitive library and the contest feature module so that the cleanup
+ * we did doesn't silently regress. Allowed: var(--cds-...), inherit,
+ * normal, and other CSS keywords. Disallowed: bare numbers, rem/px/em
+ * lengths.
+ *
+ * Usage: npm run check:typography
+ *        node scripts/check-typography-tokens.js
+ */
+
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const ROOT = path.join(__dirname, "..");
+
+// Only enforce inside the dashboard primitive library. These files are
+// the source of truth for typography in the contest dashboards, so any
+// hardcoded font-size here would silently break the contract for every
+// caller. Feature-level SCSS files retain their own legacy styles.
+const TARGET_DIRS = [
+  "src/shared/components/dashboard",
+];
+
+const colors = {
+  reset: "\x1b[0m",
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  cyan: "\x1b[36m",
+  bold: "\x1b[1m",
+};
+
+function walk(dir, out = []) {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      walk(full, out);
+    } else if (entry.isFile() && entry.name.endsWith(".module.scss")) {
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+// A line passes if the property declares a value coming from a Carbon
+// token, an explicit keyword (inherit/normal/initial/etc.), or
+// references a SCSS variable / mixin. It fails on bare numbers and
+// length units like 1rem / 14px.
+function isAllowed(value) {
+  const v = value.trim().toLowerCase();
+  if (v.startsWith("var(")) return true;
+  if (v.startsWith("inherit")) return true;
+  if (v.startsWith("initial")) return true;
+  if (v.startsWith("unset")) return true;
+  if (v.startsWith("revert")) return true;
+  if (v.startsWith("normal")) return true;
+  if (v.startsWith("bold")) return true;
+  if (v.startsWith("bolder")) return true;
+  if (v.startsWith("lighter")) return true;
+  if (v.startsWith("$")) return true; // SCSS variable
+  if (v.startsWith("@")) return true; // SCSS function or mixin output
+  return false;
+}
+
+function check(file) {
+  const content = fs.readFileSync(file, "utf8");
+  const lines = content.split("\n");
+  const issues = [];
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    // Strip line comments to avoid false positives in `// font-size: 1rem`
+    const stripped = line.replace(/\/\/.*$/, "");
+    // Only enforce font-size — font-weight numbers (400/600/etc.) are
+    // standard CSS and don't all map to Carbon tokens.
+    const match = stripped.match(/^\s*(font-size)\s*:\s*([^;]+);?/i);
+    if (!match) continue;
+
+    const [, prop, value] = match;
+    if (isAllowed(value)) continue;
+
+    issues.push({
+      line: i + 1,
+      property: prop,
+      value: value.trim(),
+      raw: line,
+    });
+  }
+
+  return issues;
+}
+
+function main() {
+  const files = [];
+  for (const dir of TARGET_DIRS) {
+    const full = path.join(ROOT, dir);
+    if (!fs.existsSync(full)) continue;
+    walk(full, files);
+  }
+
+  let totalIssues = 0;
+  const reports = [];
+
+  for (const file of files) {
+    const issues = check(file);
+    if (issues.length === 0) continue;
+    totalIssues += issues.length;
+    reports.push({ file, issues });
+  }
+
+  if (totalIssues === 0) {
+    console.log(
+      `${colors.green}✓ Typography token guard passed${colors.reset} ` +
+        `(${files.length} files scanned)`,
+    );
+    return;
+  }
+
+  console.log(
+    `${colors.red}${colors.bold}✗ Typography token guard found ${totalIssues} hardcoded value(s):${colors.reset}\n`,
+  );
+
+  for (const { file, issues } of reports) {
+    const rel = path.relative(ROOT, file);
+    console.log(`${colors.cyan}${rel}${colors.reset}`);
+    for (const issue of issues) {
+      console.log(
+        `  ${colors.yellow}line ${issue.line}${colors.reset}  ` +
+          `${issue.property}: ${colors.red}${issue.value}${colors.reset}`,
+      );
+    }
+    console.log();
+  }
+
+  console.log(
+    `Replace hardcoded values with Carbon typography tokens, e.g.\n` +
+      `  font-size: var(--cds-heading-compact-02-font-size, 1rem);\n` +
+      `  font-weight: 600;  // → var(--cds-heading-compact-02-font-weight) where available\n`,
+  );
+
+  process.exit(1);
+}
+
+main();

From 21b1472ea5f4a352242f2454b75cd41c4f361f72 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:18:37 +0800
Subject: [PATCH 25/60] chore: ignore extra db backup formats

Add *.sql.gz, *.dump, *.backup, and backups/ to .gitignore so local pg_dump artifacts stay out of the working tree.
---
 .gitignore | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.gitignore b/.gitignore
index f176aac0..3a3ad837 100644
--- a/.gitignore
+++ b/.gitignore
@@ -87,8 +87,12 @@ celerybeat.pid
 
 # Database
 *.sql
+*.sql.gz
+*.dump
+*.backup
 *.sqlite
 *.db
+backups/
 artifacts/db_backups/
 
 # Migrations (optional - uncomment if you want to ignore migrations)

From a387165da358b4ad81fe2a985761dc0d86131628 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:19:22 +0800
Subject: [PATCH 26/60] feat(contest): allow participants to view dashboard
 summary after results published

Previously dashboard-summary was teacher/admin only. Now participants of a
contest can read it once `results_published` is true; staff still has
unrestricted access. Adds two regression tests for the new branches.
---
 .../contests/tests/exam/test_exam_answers.py  | 32 +++++++++++++++++++
 backend/apps/contests/views/exam_answer.py    | 19 ++++++++---
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/backend/apps/contests/tests/exam/test_exam_answers.py b/backend/apps/contests/tests/exam/test_exam_answers.py
index 6ab1ac42..7d000f96 100644
--- a/backend/apps/contests/tests/exam/test_exam_answers.py
+++ b/backend/apps/contests/tests/exam/test_exam_answers.py
@@ -441,6 +441,38 @@ def test_teacher_view_dashboard_summary(self):
         self.assertEqual(essay_summary['subjective_stats']['graded_count'], 1)
         self.assertEqual(essay_summary['subjective_stats']['pending_count'], 1)
 
+    def test_participant_can_view_dashboard_summary_after_results_published(self):
+        self.contest.results_published = True
+        self.contest.save(update_fields=['results_published'])
+        ExamAnswer.objects.create(
+            participant=self.participant,
+            question=self.q_single,
+            answer={'selected': 'B'},
+            is_correct=True,
+            score=5,
+        )
+
+        self.client.force_authenticate(user=self.student)
+        url = reverse(
+            'contests:contest-exam-answers-dashboard-summary',
+            kwargs={'contest_pk': self.contest.id},
+        )
+        resp = self.client.get(url)
+
+        self.assertEqual(resp.status_code, status.HTTP_200_OK)
+        self.assertEqual(resp.data['contest']['participant_count'], 1)
+        self.assertEqual(resp.data['score_distribution'][-1]['range_label'], '90-100%')
+
+    def test_participant_cannot_view_dashboard_summary_before_results_published(self):
+        self.client.force_authenticate(user=self.student)
+        url = reverse(
+            'contests:contest-exam-answers-dashboard-summary',
+            kwargs={'contest_pk': self.contest.id},
+        )
+        resp = self.client.get(url)
+
+        self.assertEqual(resp.status_code, status.HTTP_403_FORBIDDEN)
+
     def test_dashboard_summary_cache_invalidates_on_submission(self):
         self.client.force_authenticate(user=self.teacher)
         summary_url = reverse(
diff --git a/backend/apps/contests/views/exam_answer.py b/backend/apps/contests/views/exam_answer.py
index a83ba3b8..392a7997 100644
--- a/backend/apps/contests/views/exam_answer.py
+++ b/backend/apps/contests/views/exam_answer.py
@@ -64,6 +64,16 @@ def _student_participants_qs(self, contest):
             user__role='student',
         ).select_related('user')
 
+    def _can_view_dashboard_summary(self, user, contest):
+        if can_manage_contest(user, contest):
+            return True
+        if not contest.results_published:
+            return False
+        return ContestParticipant.objects.filter(
+            contest=contest,
+            user=user,
+        ).exists()
+
     @staticmethod
     def _participant_display_name(participant):
         profile = getattr(participant.user, 'profile', None)
@@ -359,16 +369,17 @@ def _parse_dashboard_kind(cls, raw):
 
     @action(detail=False, methods=['get'], url_path='dashboard-summary')
     def dashboard_summary(self, request, contest_pk=None):
-        """Contest result dashboard summary (teacher/admin only).
+        """Contest result dashboard summary.
 
         Supports ``?kind=<alias|csv of enums>`` to filter the per-question
         ``questions`` array (e.g. ``?kind=subjective``). Contest-level summary
         (average, median, score distribution) is always computed over all
-        questions so numbers stay consistent across callers.
+        questions so numbers stay consistent across callers. Contest staff can
+        view it anytime; participants can view it after results are published.
         """
         contest = self._get_contest(contest_pk)
-        if not can_manage_contest(request.user, contest):
-            raise PermissionDenied('Only contest staff can view dashboard summary.')
+        if not self._can_view_dashboard_summary(request.user, contest):
+            raise PermissionDenied('Results dashboard summary is not available.')
 
         kind_filter = self._parse_dashboard_kind(request.query_params.get('kind'))
 

From 7632cf81d4194d3c5b4c8d34d3fdc715459aa5d5 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:19:40 +0800
Subject: [PATCH 27/60] feat(contest): refresh paper exam answering UX

- Split classroom contest routes: dashboard renders inside MainLayout via
  new ContestWorkspaceLayout; the full ContestLayout shell is now reserved
  for the answering runtime (solve / paper).
- ExamNavigator: collapsible side rail with mini view, optional overview
  entry, refined typography, marker tone, and toolbar slot when the
  surrounding layout exposes its own actions.
- PaperExamAnsweringScreen: persist marked questions in localStorage and
  forward the submit button + save status into the layout header slot via
  ContestLayoutHeaderSlotContext when available.
- AnswerDisplay: gain an explicit selected-answer indicator and a
  showCorrectness toggle so the same component covers both the live
  answering view and the post-grading review.
- Extract PaperQuestionReportCard from ParticipantDashboardPane so the
  per-question grading card can be reused across report views.
---
 frontend/src/App.tsx                          |  15 +-
 .../components/exam/AnswerDisplay.module.scss |  18 ++
 .../contest/components/exam/AnswerDisplay.tsx |  26 ++-
 .../components/exam/ExamNavigator.module.scss | 154 ++++++++++++++++--
 .../contest/components/exam/ExamNavigator.tsx | 149 ++++++++++++++---
 .../contest/components/exam/PaperExamCore.tsx |  50 +++---
 .../exam/PaperQuestionReportCard.module.scss  |  61 +++++++
 .../exam/PaperQuestionReportCard.tsx          | 109 +++++++++++++
 .../layout/ContestLayoutHeaderSlotContext.tsx |  15 ++
 .../layout/ContestWorkspaceLayout.tsx         | 137 ++++++++++++++++
 .../participants/ParticipantDashboardPane.tsx |  74 +++------
 frontend/src/features/contest/index.ts        |   1 +
 frontend/src/features/contest/routes.tsx      |  13 +-
 .../paperExam/PaperExamAnswering.module.scss  |  33 +++-
 .../paperExam/PaperExamAnsweringScreen.tsx    |  67 +++++++-
 .../contest/screens/paperExam/hooks/index.ts  |   4 +
 .../paperExam/hooks/markedQuestionStorage.ts  |  33 ++++
 17 files changed, 825 insertions(+), 134 deletions(-)
 create mode 100644 frontend/src/features/contest/components/exam/PaperQuestionReportCard.module.scss
 create mode 100644 frontend/src/features/contest/components/exam/PaperQuestionReportCard.tsx
 create mode 100644 frontend/src/features/contest/components/layout/ContestLayoutHeaderSlotContext.tsx
 create mode 100644 frontend/src/features/contest/components/layout/ContestWorkspaceLayout.tsx
 create mode 100644 frontend/src/features/contest/screens/paperExam/hooks/markedQuestionStorage.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index fe054b72..1764da60 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -30,7 +30,14 @@ import {
   UserPreferencesHydrator,
 } from "@/features/auth";
 import { problemDetailRoutes, problemSolveRoutes } from "@/features/problems";
-import { classroomContestDetailRoutes, classroomContestAdminRoute, classroomExamPreviewRoute, classroomExamPrecheckRoute, classroomPracticeRoute } from "@/features/contest";
+import {
+  classroomContestDetailRoutes,
+  classroomContestRuntimeRoutes,
+  classroomContestAdminRoute,
+  classroomExamPreviewRoute,
+  classroomExamPrecheckRoute,
+  classroomPracticeRoute,
+} from "@/features/contest";
 import { dashboardRoute } from "@/features/dashboard";
 import { docsRoutes, DocsLayout } from "@/features/docs";
 import { changelogRoutes } from "@/features/changelog";
@@ -146,6 +153,8 @@ function App() {
                               />
                               {/* Classroom Detail - inside MainLayout for shared sidebar */}
                               {classroomDetailRoute}
+                              {/* Contest dashboard - inside WorkspaceShell until answering starts */}
+                              {classroomContestDetailRoutes}
                             </Route>
 
                             {/* Legacy hidden routes */}
@@ -156,8 +165,8 @@ function App() {
                             {/* Problem Solve - Full-screen IDE-style solver */}
                             {problemSolveRoutes}
 
-                            {/* Classroom-scoped Contest Routes */}
-                            {classroomContestDetailRoutes}
+                            {/* Classroom-scoped Contest Runtime Routes */}
+                            {classroomContestRuntimeRoutes}
 
                             {/* Classroom Exam Precheck - Classroom-scoped */}
                             {classroomExamPrecheckRoute}
diff --git a/frontend/src/features/contest/components/exam/AnswerDisplay.module.scss b/frontend/src/features/contest/components/exam/AnswerDisplay.module.scss
index ff447d6d..8da5c279 100644
--- a/frontend/src/features/contest/components/exam/AnswerDisplay.module.scss
+++ b/frontend/src/features/contest/components/exam/AnswerDisplay.module.scss
@@ -59,6 +59,24 @@
   line-height: 1.4;
 }
 
+.optionLabel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  min-width: 0;
+}
+
+.selectedIcon {
+  flex-shrink: 0;
+  color: var(--cds-link-primary);
+}
+
+.optionSelected {
+  border-color: var(--cds-link-primary);
+}
+
 .optionSelectedCorrect {
   background: color-mix(in srgb, var(--cds-support-success) 10%, transparent);
   border-color: var(--cds-support-success);
diff --git a/frontend/src/features/contest/components/exam/AnswerDisplay.tsx b/frontend/src/features/contest/components/exam/AnswerDisplay.tsx
index eb3bb8c7..4030644f 100644
--- a/frontend/src/features/contest/components/exam/AnswerDisplay.tsx
+++ b/frontend/src/features/contest/components/exam/AnswerDisplay.tsx
@@ -1,4 +1,4 @@
-import { Checkmark } from "@carbon/icons-react";
+import { Checkmark, DotMark } from "@carbon/icons-react";
 import { useTranslation } from "react-i18next";
 
 import type { ExamQuestionType } from "@/core/entities/contest.entity";
@@ -13,6 +13,7 @@ export interface AnswerDisplayProps {
   options: string[];
   correctAnswer: unknown;
   explanation?: string | null;
+  showCorrectness?: boolean;
 }
 
 function isSelected(answerContent: Record<string, unknown>, idx: number): boolean {
@@ -60,6 +61,7 @@ const AnswerDisplay: React.FC<AnswerDisplayProps> = ({
   options,
   correctAnswer,
   explanation,
+  showCorrectness = true,
 }) => {
   const { t } = useTranslation("contest");
   const subjective = isSubjectiveType(questionType);
@@ -115,27 +117,35 @@ const AnswerDisplay: React.FC<AnswerDisplayProps> = ({
       <div className={styles.optionsList}>
         {effectiveOptions.map((opt, i) => {
           const selected = isSelected(answerContent, i);
-          const correct = isCorrect(correctAnswer, i);
+          const correct = showCorrectness && isCorrect(correctAnswer, i);
           const classNames = [
             styles.optionItem,
-            selected && correct ? styles.optionSelectedCorrect : "",
-            selected && !correct ? styles.optionSelectedWrong : "",
-            !selected && correct ? styles.optionCorrect : "",
+            selected && !showCorrectness ? styles.optionSelected : "",
+            selected && showCorrectness && correct ? styles.optionSelectedCorrect : "",
+            selected && showCorrectness && !correct ? styles.optionSelectedWrong : "",
+            !selected && showCorrectness && correct ? styles.optionCorrect : "",
           ]
             .filter(Boolean)
             .join(" ");
 
           return (
             <div key={i} className={classNames}>
-              <span>
-                {String.fromCharCode(65 + i)}. {opt}
+              <span className={styles.optionLabel}>
+                <span>{String.fromCharCode(65 + i)}. {opt}</span>
+                {selected ? (
+                  <DotMark
+                    size={16}
+                    className={styles.selectedIcon}
+                    aria-label="Your answer"
+                  />
+                ) : null}
               </span>
               {correct && <Checkmark size={16} className={styles.correctIcon} />}
             </div>
           );
         })}
       </div>
-      {correctAnswer != null && (
+      {showCorrectness && correctAnswer != null && (
         <div className={styles.correctSummary}>
           <span className={styles.correctLabel}>
             {t("grading.correctAnswer", "正確答案")}:
diff --git a/frontend/src/features/contest/components/exam/ExamNavigator.module.scss b/frontend/src/features/contest/components/exam/ExamNavigator.module.scss
index b2f06169..77f32710 100644
--- a/frontend/src/features/contest/components/exam/ExamNavigator.module.scss
+++ b/frontend/src/features/contest/components/exam/ExamNavigator.module.scss
@@ -5,33 +5,153 @@
 .navigator {
   display: flex;
   flex-direction: column;
-  width: 200px;
-  min-width: 200px;
+  width: clamp(17rem, 22vw, 22rem);
+  min-width: 17rem;
+  max-width: 22rem;
+  border-right: 1px solid var(--cds-border-subtle-01);
+  background: var(--cds-background);
 }
 
-/* Numbered badge for each question */
-.itemNumber {
+.navigatorMini {
+  width: 3rem;
+  min-width: 3rem;
+  max-width: 3rem;
+}
+
+.panel {
+  background: var(--cds-background);
+}
+
+.panelHeader,
+.panelFooter {
+  background: var(--cds-background);
+}
+
+.navigatorMini .panelFooter {
+  justify-content: center;
+  min-height: 3rem;
+  padding: 0;
+}
+
+.panelToggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 0;
+  background: transparent;
+  color: var(--cds-icon-primary);
+  cursor: pointer;
+}
+
+.panelToggle:hover {
+  background: var(--cds-layer-hover);
+}
+
+.panelToggle:focus-visible {
+  outline: 2px solid var(--cds-focus);
+  outline-offset: -2px;
+}
+
+.overviewItem {
+  min-height: 3.5rem;
+  border-left: 4px solid transparent;
+  background: var(--cds-background);
+}
+
+.overviewTitle {
+  display: inline-flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  font-weight: 500;
+}
+
+.miniOverviewItem,
+.miniItem {
+  width: 3rem;
+  height: 3rem;
+  min-height: 3rem;
+  max-height: 3rem;
+  border-left: 4px solid transparent;
+  background: var(--cds-background);
+}
+
+.miniItem {
   @include type.type-style("label-01");
+
   font-weight: 600;
-  color: var(--cds-text-primary);
-  width: 24px;
-  height: 24px;
+}
+
+.miniItemUnanswered {
+  border-left-color: var(--cds-border-strong-01);
+}
+
+.miniItemAnswered {
+  border-left-color: var(--cds-support-success);
+}
+
+.miniItemMarked {
+  border-left-color: var(--cds-support-warning);
+}
+
+.miniItemActive {
+  background-color: color-mix(in srgb, var(--cds-layer-selected-01, var(--cds-layer-accent-01)) 56%, transparent);
+}
+
+.item {
+  border-left: 4px solid var(--cds-border-subtle-01);
+  min-height: 4.75rem;
+  max-height: 4.75rem;
+  padding-top: layout.$spacing-03;
+  padding-bottom: layout.$spacing-03;
+  background: var(--cds-background);
+}
+
+.itemUnanswered {
+  border-left-color: var(--cds-border-strong-01);
+}
+
+.itemAnswered {
+  border-left-color: var(--cds-support-success);
+}
+
+.itemMarked {
+  border-left-color: var(--cds-support-warning);
+}
+
+.itemActive {
+  background-color: color-mix(in srgb, var(--cds-layer-selected-01, var(--cds-layer-accent-01)) 56%, transparent);
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--cds-layer-selected-hover-01) 68%, transparent);
+  }
+}
+
+.itemMeta {
   display: flex;
   align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background-color: var(--cds-layer-02);
-  flex-shrink: 0;
+  gap: layout.$spacing-01;
 }
 
-.itemNumberAnswered {
-  background-color: var(--cds-support-success);
-  color: var(--cds-text-on-color);
+.itemMetaDivider {
+  color: var(--cds-text-placeholder);
 }
 
-/* Marked-for-review tint */
-.itemMarked {
-  background-color: rgba(255, 214, 0, 0.15);
+.itemPrompt {
+  @include type.type-style("body-compact-01");
+
+  display: -webkit-box;
+  overflow: hidden;
+  font-weight: 400;
+  line-height: 1.4;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.itemActive .itemPrompt {
+  font-weight: 600;
 }
 
 /* Footer text */
diff --git a/frontend/src/features/contest/components/exam/ExamNavigator.tsx b/frontend/src/features/contest/components/exam/ExamNavigator.tsx
index 0e2be191..bb562573 100644
--- a/frontend/src/features/contest/components/exam/ExamNavigator.tsx
+++ b/frontend/src/features/contest/components/exam/ExamNavigator.tsx
@@ -1,12 +1,12 @@
 import { type FC, memo, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import type { ExamItem } from "../../types/exam.types";
+import { Home, SidePanelClose, SidePanelOpen } from "@carbon/icons-react";
 import {
   ListPanel,
   ListHeader,
   ListFooter,
   ListItem,
-  ListItemLeading,
   ListItemContent,
   ListItemTitle,
   ListItemMeta,
@@ -19,6 +19,10 @@ interface ExamNavigatorProps {
   answeredIds: Set<string>;
   markedIds?: Set<string>;
   onSelect: (index: number) => void;
+  collapsed?: boolean;
+  overviewLabel?: string;
+  onSelectOverview?: () => void;
+  onToggleCollapse?: () => void;
 }
 
 export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
@@ -27,6 +31,10 @@ export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
   answeredIds,
   markedIds,
   onSelect,
+  collapsed = false,
+  overviewLabel,
+  onSelectOverview,
+  onToggleCollapse,
 }) => {
   const { t } = useTranslation("contest");
   const answeredCount = items.filter((item) => {
@@ -38,18 +46,96 @@ export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
   const itemRefs = useRef<Map<number, HTMLButtonElement>>(new Map());
 
   useEffect(() => {
+    if (collapsed) return;
     const el = itemRefs.current.get(activeIndex);
     if (el) {
       el.scrollIntoView({ block: "nearest", behavior: "smooth" });
     }
-  }, [activeIndex]);
+  }, [activeIndex, collapsed]);
+
+  if (collapsed) {
+    return (
+      <nav className={`${styles.navigator} ${styles.navigatorMini}`}>
+        <ListPanel
+          className={styles.panel}
+          footer={
+            <ListFooter className={styles.panelFooter}>
+              {onToggleCollapse && (
+                <button
+                  type="button"
+                  className={styles.panelToggle}
+                  onClick={onToggleCollapse}
+                  aria-label={t("answering.navigation.showList")}
+                  title={t("answering.navigation.showList")}
+                >
+                  <SidePanelOpen size={20} />
+                </button>
+              )}
+            </ListFooter>
+          }
+        >
+          {onSelectOverview && (
+            <ListItem
+              size="compact"
+              onClick={onSelectOverview}
+              className={styles.miniOverviewItem}
+            >
+              <Home size={18} />
+            </ListItem>
+          )}
+          {items.map((item, index) => {
+            const id = item.kind === "coding" ? item.data.id : item.data.id;
+            const isActive = index === activeIndex;
+            const isAnswered = answeredIds.has(id);
+            const isMarked = markedIds?.has(id) ?? false;
+            const itemClassName = [
+              styles.miniItem,
+              isAnswered ? styles.miniItemAnswered : styles.miniItemUnanswered,
+              isMarked ? styles.miniItemMarked : "",
+              isActive ? styles.miniItemActive : "",
+            ].filter(Boolean).join(" ");
+
+            return (
+              <ListItem
+                key={id}
+                size="compact"
+                onClick={() => onSelect(index)}
+                className={itemClassName}
+              >
+                Q{index + 1}
+              </ListItem>
+            );
+          })}
+        </ListPanel>
+      </nav>
+    );
+  }
 
   return (
     <nav className={styles.navigator}>
       <ListPanel
-        header={<ListHeader title={t("answering.navigation.questionList")} />}
+        className={styles.panel}
+        header={
+          <ListHeader
+            title={t("answering.navigation.questionList")}
+            className={styles.panelHeader}
+            action={
+              onToggleCollapse ? (
+                <button
+                  type="button"
+                  className={styles.panelToggle}
+                  onClick={onToggleCollapse}
+                  aria-label={t("answering.navigation.hideList")}
+                  title={t("answering.navigation.hideList")}
+                >
+                  <SidePanelClose size={20} />
+                </button>
+              ) : null
+            }
+          />
+        }
         footer={
-          <ListFooter>
+          <ListFooter className={styles.panelFooter}>
             <span className={styles.summaryText}>
               {t("answering.navigation.answeredProgress", { answered: answeredCount, total: items.length })}
             </span>
@@ -61,6 +147,16 @@ export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
           </ListFooter>
         }
       >
+        {onSelectOverview && (
+          <ListItem onClick={onSelectOverview} className={styles.overviewItem}>
+            <ListItemContent>
+              <ListItemTitle className={styles.overviewTitle}>
+                <Home size={18} />
+                <span>{overviewLabel ?? t("contestShell.home", "總覽")}</span>
+              </ListItemTitle>
+            </ListItemContent>
+          </ListItem>
+        )}
         {items.map((item, index) => {
           const id = item.kind === "coding" ? item.data.id : item.data.id;
           const isActive = index === activeIndex;
@@ -75,33 +171,38 @@ export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
           const title =
             item.kind === "coding"
               ? `${item.data.label}. ${item.data.title}`
-              : item.data.prompt.slice(0, 30) + (item.data.prompt.length > 30 ? "…" : "");
+              : item.data.prompt.slice(0, 72) + (item.data.prompt.length > 72 ? "…" : "");
+          const itemClassName = [
+            styles.item,
+            isAnswered ? styles.itemAnswered : styles.itemUnanswered,
+            isMarked ? styles.itemMarked : "",
+            isActive ? styles.itemActive : "",
+          ].filter(Boolean).join(" ");
 
           return (
             <ListItem
               key={id}
-              active={isActive}
               onClick={() => onSelect(index)}
-              className={isMarked ? styles.itemMarked : undefined}
+              className={itemClassName}
             >
-              <ListItemLeading>
-                <span
-                  ref={(el) => {
-                    // Attach ref to parent button via leading span for scroll-into-view
-                    if (el?.parentElement?.parentElement) {
-                      itemRefs.current.set(index, el.parentElement.parentElement as HTMLButtonElement);
-                    } else {
-                      itemRefs.current.delete(index);
-                    }
-                  }}
-                  className={`${styles.itemNumber} ${isAnswered ? styles.itemNumberAnswered : ""}`}
-                >
-                  {index + 1}
-                </span>
-              </ListItemLeading>
               <ListItemContent>
-                <ListItemMeta>{typeLabel}</ListItemMeta>
-                <ListItemTitle>{title}</ListItemTitle>
+                <ListItemMeta className={styles.itemMeta}>
+                  <span
+                    ref={(el) => {
+                      const button = el?.closest("button");
+                      if (button) {
+                        itemRefs.current.set(index, button as HTMLButtonElement);
+                      } else {
+                        itemRefs.current.delete(index);
+                      }
+                    }}
+                  >
+                    Q{index + 1}
+                  </span>
+                  <span className={styles.itemMetaDivider}>·</span>
+                  <span>{typeLabel}</span>
+                </ListItemMeta>
+                <ListItemTitle className={styles.itemPrompt}>{title}</ListItemTitle>
               </ListItemContent>
             </ListItem>
           );
diff --git a/frontend/src/features/contest/components/exam/PaperExamCore.tsx b/frontend/src/features/contest/components/exam/PaperExamCore.tsx
index c2864aa2..62f75ed0 100644
--- a/frontend/src/features/contest/components/exam/PaperExamCore.tsx
+++ b/frontend/src/features/contest/components/exam/PaperExamCore.tsx
@@ -6,7 +6,6 @@ import {
   ArrowRight,
   CenterToFit,
   ListBulleted,
-  List,
 } from "@carbon/icons-react";
 import { ExamNavigator } from "./ExamNavigator";
 import type { ExamItem, ExamViewMode } from "../../types/exam.types";
@@ -42,8 +41,11 @@ interface PaperExamCoreProps {
   items: ExamItem[];
   answeredIds: Set<string>;
   markedIds?: Set<string>;
-  toolbarLeft: React.ReactNode;
+  toolbarLeft?: React.ReactNode;
   toolbarCenter?: React.ReactNode;
+  showToolbar?: boolean;
+  overviewLabel?: string;
+  onSelectOverview?: () => void;
   renderItem: (item: ExamItem, index: number, mode: ExamViewMode) => React.ReactNode;
   styles: Record<string, string>;
   syncIndex?: number | null;
@@ -56,6 +58,9 @@ export const PaperExamCore: React.FC<PaperExamCoreProps> = ({
   markedIds,
   toolbarLeft,
   toolbarCenter,
+  showToolbar = true,
+  overviewLabel,
+  onSelectOverview,
   renderItem,
   styles,
   syncIndex,
@@ -71,7 +76,7 @@ export const PaperExamCore: React.FC<PaperExamCoreProps> = ({
   const [viewMode, setViewMode] = useState<ExamViewMode>("single");
   const [activeIndex, setActiveIndex] = useState(0);
   const [allModeActiveIndex, setAllModeActiveIndex] = useState(0);
-  const [navVisible, setNavVisible] = useState(true);
+  const [navCollapsed, setNavCollapsed] = useState(false);
   const [slideDir, setSlideDir] = useState<"left" | "right">("right");
   const [animating, setAnimating] = useState(false);
 
@@ -228,10 +233,12 @@ export const PaperExamCore: React.FC<PaperExamCoreProps> = ({
 
   return (
     <div className={styles.container}>
-      <div className={`${styles.toolbar} ${toolbarVisible ? "" : styles.toolbarHidden}`}>
-        <div className={styles.toolbarLeft}>{toolbarLeft}</div>
-        <div className={styles.toolbarCenter}>{toolbarCenter}</div>
-      </div>
+      {showToolbar && (
+        <div className={`${styles.toolbar} ${toolbarVisible ? "" : styles.toolbarHidden}`}>
+          <div className={styles.toolbarLeft}>{toolbarLeft}</div>
+          <div className={styles.toolbarCenter}>{toolbarCenter}</div>
+        </div>
+      )}
 
       <div className={styles.modeSwitcher}>
         {VIEW_MODES.map((m) => (
@@ -248,23 +255,18 @@ export const PaperExamCore: React.FC<PaperExamCoreProps> = ({
       </div>
 
       <div className={styles.body}>
-        <div className={`${styles.navWrapper} ${navVisible ? "" : styles.navWrapperHidden}`}>
-          {navVisible && (
-            <ExamNavigator
-              items={items}
-              activeIndex={effectiveViewMode === "single" ? effectiveActiveIndex : effectiveAllModeActiveIndex}
-              answeredIds={answeredIds}
-              markedIds={markedIds}
-              onSelect={effectiveViewMode === "single" ? handleSetActiveIndex : handleScrollToItem}
-            />
-          )}
-          <button
-            className={styles.navToggle}
-            onClick={() => setNavVisible((v) => !v)}
-            aria-label={navVisible ? t("answering.navigation.hideList") : t("answering.navigation.showList")}
-          >
-            <List size={20} />
-          </button>
+        <div className={`${styles.navWrapper} ${navCollapsed ? styles.navWrapperCollapsed : ""}`}>
+          <ExamNavigator
+            items={items}
+            activeIndex={effectiveViewMode === "single" ? effectiveActiveIndex : effectiveAllModeActiveIndex}
+            answeredIds={answeredIds}
+            markedIds={markedIds}
+            collapsed={navCollapsed}
+            overviewLabel={overviewLabel}
+            onSelectOverview={onSelectOverview}
+            onToggleCollapse={() => setNavCollapsed((collapsed) => !collapsed)}
+            onSelect={effectiveViewMode === "single" ? handleSetActiveIndex : handleScrollToItem}
+          />
         </div>
 
         {effectiveViewMode === "single" ? renderSingleMode() : renderAllMode()}
diff --git a/frontend/src/features/contest/components/exam/PaperQuestionReportCard.module.scss b/frontend/src/features/contest/components/exam/PaperQuestionReportCard.module.scss
new file mode 100644
index 00000000..9a6d980b
--- /dev/null
+++ b/frontend/src/features/contest/components/exam/PaperQuestionReportCard.module.scss
@@ -0,0 +1,61 @@
+.root {
+  padding: 0;
+  border-bottom: 1px solid var(--cds-border-subtle);
+  background: transparent;
+}
+
+.root:last-child {
+  border-bottom: 0;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.title {
+  color: var(--cds-text-primary);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: 600;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+
+.meta {
+  margin-top: 0.25rem;
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  line-height: 1.2;
+}
+
+.body {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.markdownBlock,
+.feedbackBlock {
+  padding-left: 0.75rem;
+}
+
+.feedbackLabel {
+  margin-bottom: 0.25rem;
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  line-height: 1.2;
+}
+
+.warningTag {
+  color: var(--cds-text-primary);
+  background: color-mix(in srgb, var(--cds-support-warning) 22%, transparent);
+}
+
+@media (max-width: 672px) {
+  .header {
+    display: grid;
+  }
+}
diff --git a/frontend/src/features/contest/components/exam/PaperQuestionReportCard.tsx b/frontend/src/features/contest/components/exam/PaperQuestionReportCard.tsx
new file mode 100644
index 00000000..e7e37401
--- /dev/null
+++ b/frontend/src/features/contest/components/exam/PaperQuestionReportCard.tsx
@@ -0,0 +1,109 @@
+import { Tag } from "@carbon/react";
+
+import type { ExamQuestionType } from "@/core/entities/contest.entity";
+import AnswerDisplay from "@/features/contest/components/exam/AnswerDisplay";
+import MarkdownRenderer from "@/shared/ui/markdown/MarkdownRenderer";
+
+import styles from "./PaperQuestionReportCard.module.scss";
+
+type StatusTone =
+  | "red"
+  | "magenta"
+  | "purple"
+  | "blue"
+  | "cyan"
+  | "teal"
+  | "green"
+  | "gray"
+  | "cool-gray"
+  | "warm-gray"
+  | "high-contrast"
+  | "outline";
+
+interface PaperQuestionReportCardProps {
+  questionId: string;
+  index: number;
+  questionType: ExamQuestionType;
+  typeLabel: string;
+  prompt: string;
+  options: string[];
+  answer: Record<string, unknown>;
+  statusLabel: string;
+  statusTone: StatusTone;
+  statusEmphasis?: "warning";
+  showGrading?: boolean;
+  score?: number | null;
+  maxScore: number;
+  gradedByUsername?: string | null;
+  feedback?: string | null;
+  correctAnswer?: unknown;
+  explanation?: string | null;
+}
+
+export default function PaperQuestionReportCard({
+  index,
+  questionType,
+  typeLabel,
+  prompt,
+  options,
+  answer,
+  statusLabel,
+  statusTone,
+  statusEmphasis,
+  showGrading = false,
+  score,
+  maxScore,
+  gradedByUsername,
+  feedback,
+  correctAnswer,
+  explanation,
+}: PaperQuestionReportCardProps) {
+  return (
+    <article className={styles.root}>
+      <div className={styles.header}>
+        <div>
+          <div className={styles.title}>
+            Q{index} · {typeLabel}
+          </div>
+          {showGrading ? (
+            <div className={styles.meta}>
+              {score ?? "-"} / {maxScore}
+              {gradedByUsername ? ` · ${gradedByUsername}` : ""}
+            </div>
+          ) : null}
+        </div>
+        <Tag
+          type={statusTone}
+          className={statusEmphasis === "warning" ? styles.warningTag : undefined}
+        >
+          {statusLabel}
+        </Tag>
+      </div>
+      <div className={styles.body}>
+        <div className={styles.markdownBlock}>
+          <MarkdownRenderer enableMath enableHighlight>
+            {prompt}
+          </MarkdownRenderer>
+        </div>
+        <AnswerDisplay
+          questionType={questionType}
+          answerContent={answer}
+          options={options}
+          correctAnswer={showGrading ? correctAnswer : undefined}
+          explanation={showGrading ? explanation : null}
+          showCorrectness={showGrading}
+        />
+        {showGrading && feedback?.trim() ? (
+          <div>
+            <div className={styles.feedbackLabel}>批改評語</div>
+            <div className={styles.feedbackBlock}>
+              <MarkdownRenderer enableMath enableHighlight>
+                {feedback}
+              </MarkdownRenderer>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </article>
+  );
+}
diff --git a/frontend/src/features/contest/components/layout/ContestLayoutHeaderSlotContext.tsx b/frontend/src/features/contest/components/layout/ContestLayoutHeaderSlotContext.tsx
new file mode 100644
index 00000000..172c6ea6
--- /dev/null
+++ b/frontend/src/features/contest/components/layout/ContestLayoutHeaderSlotContext.tsx
@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+
+type ContestLayoutHeaderSlot = ReactNode | null;
+
+interface ContestLayoutHeaderSlotContextValue {
+  setHeaderActions: Dispatch<SetStateAction<ContestLayoutHeaderSlot>>;
+}
+
+export const ContestLayoutHeaderSlotContext =
+  createContext<ContestLayoutHeaderSlotContextValue | null>(null);
+
+export function useContestLayoutHeaderSlot() {
+  return useContext(ContestLayoutHeaderSlotContext);
+}
diff --git a/frontend/src/features/contest/components/layout/ContestWorkspaceLayout.tsx b/frontend/src/features/contest/components/layout/ContestWorkspaceLayout.tsx
new file mode 100644
index 00000000..14cc7d36
--- /dev/null
+++ b/frontend/src/features/contest/components/layout/ContestWorkspaceLayout.tsx
@@ -0,0 +1,137 @@
+import { useState } from "react";
+import { Outlet, useParams } from "react-router-dom";
+import { InlineLoading, Modal } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+
+import { ContestProvider } from "@/features/contest/contexts/ContestContext";
+import ExamSubmissionProgressModal from "@/features/contest/components/exam/ExamSubmissionProgressModal";
+import { useContestExamActions } from "@/features/contest/hooks/useContestExamActions";
+import { useContestLayoutState } from "@/features/contest/hooks/useContestLayoutState";
+import {
+  getClassroomContestPrecheckPath,
+  getClassroomContestSolvePath,
+  shouldRouteToPrecheck,
+} from "@/features/contest/domain/contestRoutePolicy";
+import { hasExamPrecheckPassed } from "@/features/contest/screens/paperExam/hooks";
+
+const ContestWorkspaceLayout = () => {
+  const { classroomId } = useParams<{ classroomId?: string }>();
+  const { t } = useTranslation("contest");
+  const { t: tc } = useTranslation("common");
+  const {
+    contestId,
+    contest,
+    contestLoading,
+    contestNotFound,
+    hasEnded,
+    isAdmin,
+    scoreboardData,
+    refreshContest,
+    navigate,
+  } = useContestLayoutState();
+
+  const [errorModalOpen, setErrorModalOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const boundClassroomId = classroomId || contest?.boundClassroomId || undefined;
+  const precheckPath =
+    boundClassroomId && contestId
+      ? getClassroomContestPrecheckPath(boundClassroomId, contestId)
+      : "/dashboard";
+  const answeringPath =
+    boundClassroomId && contestId
+      ? getClassroomContestSolvePath(boundClassroomId, contestId)
+      : "/dashboard";
+  const adminPath =
+    boundClassroomId && contestId
+      ? `/classrooms/${boundClassroomId}/contest/${contestId}/admin`
+      : "/dashboard";
+
+  const showError = (msg: string) => {
+    setErrorMessage(msg);
+    setErrorModalOpen(true);
+  };
+
+  const handleGoToAnswering = () => {
+    if (!contestId || !contest) return;
+    if (
+      boundClassroomId &&
+      shouldRouteToPrecheck({
+        contest,
+        precheckPassed: hasExamPrecheckPassed(contest.id),
+      })
+    ) {
+      navigate(precheckPath);
+      return;
+    }
+    navigate(answeringPath);
+  };
+
+  const {
+    handleJoin,
+    handleStartExam,
+    handleEndExam,
+    submissionProgress,
+  } = useContestExamActions({
+    contest,
+    contestId,
+    hasEnded,
+    refreshContest,
+    navigate,
+    messages: {
+      joinError: t("error.joinFailed"),
+      startError: t("error.startExamFailed"),
+      endError: t("error.endExamFailed"),
+      exitError: t("error.exitFailed"),
+    },
+    onError: showError,
+  });
+
+  if (contestLoading) {
+    return (
+      <div style={{ padding: "2rem" }}>
+        <InlineLoading description={tc("message.loading")} />
+      </div>
+    );
+  }
+
+  if (contestNotFound) {
+    return null;
+  }
+
+  return (
+    <ContestProvider
+      initialContest={contest}
+      initialScoreboardData={scoreboardData}
+      onRefresh={refreshContest}
+    >
+      <Outlet
+        context={{
+          refreshContest,
+          onJoin: handleJoin,
+          onStartExam: handleStartExam,
+          onEndExam: handleEndExam,
+          onGoToAnswering: handleGoToAnswering,
+          onOpenAdminPanel: isAdmin ? () => navigate(adminPath) : undefined,
+          isAdmin,
+        }}
+      />
+
+      <ExamSubmissionProgressModal
+        state={submissionProgress.state}
+        onRequestClose={submissionProgress.close}
+      />
+
+      <Modal
+        open={errorModalOpen}
+        modalHeading={tc("message.error")}
+        passiveModal
+        onRequestClose={() => setErrorModalOpen(false)}
+      >
+        <p>{errorMessage}</p>
+      </Modal>
+    </ContestProvider>
+  );
+};
+
+export default ContestWorkspaceLayout;
diff --git a/frontend/src/features/contest/components/participants/ParticipantDashboardPane.tsx b/frontend/src/features/contest/components/participants/ParticipantDashboardPane.tsx
index fb05578f..1e0ef878 100644
--- a/frontend/src/features/contest/components/participants/ParticipantDashboardPane.tsx
+++ b/frontend/src/features/contest/components/participants/ParticipantDashboardPane.tsx
@@ -43,14 +43,13 @@ import type {
   ParticipantDashboardDetail,
   ParticipantDashboardStatus,
 } from "@/core/entities/contest.entity";
-import AnswerDisplay from "@/features/contest/components/exam/AnswerDisplay";
 import PaperQuestionOverviewTable from "@/features/contest/components/exam/PaperQuestionOverviewTable";
+import PaperQuestionReportCard from "@/features/contest/components/exam/PaperQuestionReportCard";
 import ContestLogsScreen from "@/features/contest/screens/settings/ContestLogsScreen";
 import { questionTypeLabel } from "@/features/contest/screens/settings/grading/gradingTypes";
 import { useContestSubmissions } from "@/features/contest/hooks/useContestSubmissions";
 import { OverviewDataCards } from "@/shared/ui/dataCard";
 import ContainerCard from "@/shared/layout/ContainerCard";
-import MarkdownRenderer from "@/shared/ui/markdown/MarkdownRenderer";
 import { useTheme } from "@/shared/ui/theme/ThemeContext";
 
 import styles from "./ContestParticipantsDashboard.module.scss";
@@ -650,57 +649,28 @@ const ParticipantDashboardPane: React.FC<ParticipantDashboardPaneProps> = ({
                     </h5>
                     <div className={styles.questionList}>
                       {paperReport.questionDetails.map((row) => (
-                        <div
+                        <PaperQuestionReportCard
                           key={row.questionId}
-                          className={styles.questionItem}
-                        >
-                          <div className={styles.questionHeader}>
-                            <div>
-                              <div className={styles.primaryText}>
-                                Q{row.index} ·{" "}
-                                {t(
-                                  `common:questionType.label.${row.questionType}`,
-                                  questionTypeLabel[row.questionType],
-                                )}
-                              </div>
-                              <div className={styles.secondaryText}>
-                                {row.score ?? "-"} / {row.maxScore}
-                                {row.gradedByUsername
-                                  ? ` • ${row.gradedByUsername}`
-                                  : ""}
-                              </div>
-                            </div>
-                            <Tag type={toTagType(row.status)}>
-                              {row.status.label}
-                            </Tag>
-                          </div>
-                          <div className={styles.questionBody}>
-                            <div className={styles.markdownBlock}>
-                              <MarkdownRenderer enableMath enableHighlight>
-                                {row.prompt}
-                              </MarkdownRenderer>
-                            </div>
-                            <AnswerDisplay
-                              questionType={row.questionType}
-                              answerContent={row.answer}
-                              options={row.options}
-                              correctAnswer={row.correctAnswer}
-                              explanation={row.explanation}
-                            />
-                            {row.feedback ? (
-                              <div>
-                                <div className={styles.secondaryText}>
-                                  {t("dashboard.feedback", "批改評語")}
-                                </div>
-                                <div className={styles.markdownBlock}>
-                                  <MarkdownRenderer enableMath enableHighlight>
-                                    {row.feedback}
-                                  </MarkdownRenderer>
-                                </div>
-                              </div>
-                            ) : null}
-                          </div>
-                        </div>
+                          questionId={row.questionId}
+                          index={row.index}
+                          questionType={row.questionType}
+                          typeLabel={t(
+                            `common:questionType.label.${row.questionType}`,
+                            questionTypeLabel[row.questionType],
+                          )}
+                          prompt={row.prompt}
+                          options={row.options}
+                          answer={row.answer}
+                          statusLabel={row.status.label}
+                          statusTone={toTagType(row.status)}
+                          showGrading
+                          score={row.score}
+                          maxScore={row.maxScore}
+                          gradedByUsername={row.gradedByUsername}
+                          feedback={row.feedback}
+                          correctAnswer={row.correctAnswer}
+                          explanation={row.explanation}
+                        />
                       ))}
                     </div>
                   </div>
diff --git a/frontend/src/features/contest/index.ts b/frontend/src/features/contest/index.ts
index 90235aad..8938547b 100644
--- a/frontend/src/features/contest/index.ts
+++ b/frontend/src/features/contest/index.ts
@@ -5,6 +5,7 @@
 
 export {
   classroomContestDetailRoutes,
+  classroomContestRuntimeRoutes,
   classroomContestAdminRoute,
   classroomExamPreviewRoute,
   classroomExamPrecheckRoute,
diff --git a/frontend/src/features/contest/routes.tsx b/frontend/src/features/contest/routes.tsx
index 5ad8d2df..381c1300 100644
--- a/frontend/src/features/contest/routes.tsx
+++ b/frontend/src/features/contest/routes.tsx
@@ -1,6 +1,7 @@
 import { lazy, Suspense } from "react";
 import { Route } from "react-router";
 import ContestLayout from "./components/layout/ContestLayout";
+import ContestWorkspaceLayout from "./components/layout/ContestWorkspaceLayout";
 import { ContestProvider } from "./contexts/ContestContext";
 import ContestDashboardScreen from "./screens/ContestDashboardScreen";
 import ContestSolveScreen from "./screens/ContestSolveScreen";
@@ -13,11 +14,19 @@ const ExamPrecheckScreen = lazy(() => import("./screens/paperExam/ExamPrecheckSc
 // ── Classroom-scoped contest routes (/classrooms/:classroomId/contest/:contestId) ──
 
 /**
- * Classroom Contest Detail 路由（需在 RequireAuth 內使用，有獨立 Layout）
+ * Classroom Contest Detail dashboard — rendered inside MainLayout / WorkspaceShell.
  */
 export const classroomContestDetailRoutes = (
-  <Route path="/classrooms/:classroomId/contest/:contestId" element={<ContestLayout />}>
+  <Route path="/classrooms/:classroomId/contest/:contestId" element={<ContestWorkspaceLayout />}>
     <Route index element={<ContestDashboardScreen />} />
+  </Route>
+);
+
+/**
+ * Classroom Contest runtime routes — full contest shell only while answering.
+ */
+export const classroomContestRuntimeRoutes = (
+  <Route path="/classrooms/:classroomId/contest/:contestId" element={<ContestLayout />}>
     <Route path="solve" element={<ContestSolveScreen />} />
     <Route path="solve/:problemId" element={<ContestSolveScreen />} />
   </Route>
diff --git a/frontend/src/features/contest/screens/paperExam/PaperExamAnswering.module.scss b/frontend/src/features/contest/screens/paperExam/PaperExamAnswering.module.scss
index 3d58d8ee..11c0ae7a 100644
--- a/frontend/src/features/contest/screens/paperExam/PaperExamAnswering.module.scss
+++ b/frontend/src/features/contest/screens/paperExam/PaperExamAnswering.module.scss
@@ -13,6 +13,24 @@
 .toolbarLeft :global(.cds--btn),
 .toolbarCenter :global(.cds--btn) { @include exam.exam-toolbar-btn-height; }
 
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  height: 100%;
+}
+
+.headerSubmitButton {
+  min-height: 3rem;
+  height: 3rem;
+}
+
+.headerSaveStatus {
+  @include type.type-style("label-01");
+  color: var(--cds-text-helper);
+  white-space: nowrap;
+}
+
 .timer           { @include exam.exam-timer; }
 .timerText       { @include exam.exam-timer-text; }
 
@@ -39,16 +57,27 @@
 
 .body            { @include exam.exam-body; }
 .navWrapper      { @include exam.exam-nav-wrapper; }
+.navWrapperCollapsed { width: 3rem; }
 .navWrapperHidden { @include exam.exam-nav-wrapper-hidden; }
 .navToggle       { @include exam.exam-nav-toggle; }
 
-.singleContent   { @include exam.exam-single-content; }
+.singleContent {
+  @include exam.exam-single-content;
+
+  border-left: 1px solid var(--cds-border-subtle-01);
+}
+
 .questionArea    { @include exam.exam-question-area; }
 .questionInner   { @include exam.exam-question-inner; }
 .navButtons      { @include exam.exam-nav-buttons; }
 .navInfo         { @include exam.exam-nav-info; }
 
-.allContent      { @include exam.exam-all-content; }
+.allContent {
+  @include exam.exam-all-content;
+
+  border-left: 1px solid var(--cds-border-subtle-01);
+}
+
 .allSpacer       { @include exam.exam-all-spacer; }
 .allItem         { @include exam.exam-all-item; }
 .allItemDimmed   { @include exam.exam-all-item-dimmed; }
diff --git a/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx b/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx
index 1c385e33..31bd8e51 100644
--- a/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx
+++ b/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx
@@ -24,6 +24,8 @@ import {
   usePaperExamAutoSave,
   usePaperExamQuestions,
   usePaperExamSaveOnLeave,
+  getMarkedQuestionIds,
+  saveMarkedQuestionIds,
   hasExamPrecheckPassed,
   syncExamPrecheckGateByStatus,
 } from "./hooks";
@@ -45,6 +47,7 @@ import { recordExamEventWithForcedCapture } from "@/features/contest/anticheat/f
 import { exitFullscreen, isFullscreen } from "@/core/usecases/exam";
 import { clearExamCaptureSessionId } from "@/shared/state/examCaptureSessionStore";
 import { stopCaptureForContest } from "@/features/contest/anticheat/captureLifecycle";
+import { useContestLayoutHeaderSlot } from "@/features/contest/components/layout/ContestLayoutHeaderSlotContext";
 import {
   buildExamEntryDeviceMetadata,
   detectAnticheatCapability,
@@ -111,6 +114,7 @@ const PaperExamAnsweringScreen: React.FC = () => {
     [monitoringPlan]
   );
   const submitProgress = useExamSubmissionProgress();
+  const contestLayoutHeaderSlot = useContestLayoutHeaderSlot();
 
   const { items, answers, setAnswers, answeredIds, loadingQuestions } =
     usePaperExamQuestions(contestId);
@@ -124,7 +128,12 @@ const PaperExamAnsweringScreen: React.FC = () => {
     setAnswers,
   });
 
-  const [markedIds, setMarkedIds] = useState<Set<string>>(new Set());
+  const [markedIds, setMarkedIds] = useState<Set<string>>(() =>
+    getMarkedQuestionIds(contestId),
+  );
+  useEffect(() => {
+    setMarkedIds(getMarkedQuestionIds(contestId));
+  }, [contestId]);
   const toggleMark = useCallback((id: string) => {
     setMarkedIds((prev) => {
       const next = new Set(prev);
@@ -133,9 +142,10 @@ const PaperExamAnsweringScreen: React.FC = () => {
       } else {
         next.add(id);
       }
+      saveMarkedQuestionIds(contestId, next);
       return next;
     });
-  }, []);
+  }, [contestId]);
 
   const isInProgress = contest?.examStatus === "in_progress";
   const isSubmitted = contest?.examStatus === "submitted";
@@ -349,6 +359,56 @@ const PaperExamAnsweringScreen: React.FC = () => {
     setShowSubmitReview(true);
   }, [flushAll]);
 
+  const shouldUseHeaderActions =
+    !!contestLayoutHeaderSlot &&
+    !autoSubmitted &&
+    !isSubmitted &&
+    !loadingQuestions &&
+    items.length > 0;
+
+  useEffect(() => {
+    if (!contestLayoutHeaderSlot) return;
+    if (!shouldUseHeaderActions) {
+      contestLayoutHeaderSlot.setHeaderActions(null);
+      return;
+    }
+
+    contestLayoutHeaderSlot.setHeaderActions(
+      <div className={styles.headerActions}>
+        {saveStatus !== "idle" && (
+          <span
+            className={`${styles.headerSaveStatus} ${
+              saveStatus === "error" ? styles.saveStatusError : ""
+            }`}
+          >
+            {saveStatusLabel}
+          </span>
+        )}
+        <Button
+          kind="primary"
+          size="md"
+          className={styles.headerSubmitButton}
+          data-testid="paper-exam-open-submit-review-btn"
+          renderIcon={SendFilled}
+          onClick={openSubmitReview}
+        >
+          {t("answering.submit.button")}
+        </Button>
+      </div>,
+    );
+
+    return () => {
+      contestLayoutHeaderSlot.setHeaderActions(null);
+    };
+  }, [
+    contestLayoutHeaderSlot,
+    openSubmitReview,
+    saveStatus,
+    saveStatusLabel,
+    shouldUseHeaderActions,
+    t,
+  ]);
+
   const handleSubmitExam = useCallback(async () => {
     if (!contestId || isSubmittingExam) return;
     setIsSubmittingExam(true);
@@ -411,6 +471,9 @@ const PaperExamAnsweringScreen: React.FC = () => {
         syncIndex={syncIndex}
         renderItem={renderItem}
         onActiveIndexChange={handleActiveIndexChange}
+        showToolbar={!contestLayoutHeaderSlot}
+        overviewLabel={t("contestShell.home", "總覽")}
+        onSelectOverview={() => dashboardPath && navigate(dashboardPath)}
         toolbarLeft={(
           <>
             <Button
diff --git a/frontend/src/features/contest/screens/paperExam/hooks/index.ts b/frontend/src/features/contest/screens/paperExam/hooks/index.ts
index 09b4bd33..194d3493 100644
--- a/frontend/src/features/contest/screens/paperExam/hooks/index.ts
+++ b/frontend/src/features/contest/screens/paperExam/hooks/index.ts
@@ -5,6 +5,10 @@ export { useAnticheatWebcamCapture } from "./useAnticheatWebcamCapture";
 export { usePaperExamQuestions } from "./usePaperExamQuestions";
 export { usePaperExamAutoSave } from "./usePaperExamAutoSave";
 export { usePaperExamSaveOnLeave, type SaveStatus } from "./usePaperExamSaveOnLeave";
+export {
+  getMarkedQuestionIds,
+  saveMarkedQuestionIds,
+} from "./markedQuestionStorage";
 export {
   hasExamPrecheckPassed,
   markExamPrecheckPassed,
diff --git a/frontend/src/features/contest/screens/paperExam/hooks/markedQuestionStorage.ts b/frontend/src/features/contest/screens/paperExam/hooks/markedQuestionStorage.ts
new file mode 100644
index 00000000..39a4797f
--- /dev/null
+++ b/frontend/src/features/contest/screens/paperExam/hooks/markedQuestionStorage.ts
@@ -0,0 +1,33 @@
+const MARKED_PREFIX = "qjudge.exam.marked";
+
+const keyForContest = (contestId: string) => `${MARKED_PREFIX}.${contestId}`;
+
+export const getMarkedQuestionIds = (contestId: string | undefined): Set<string> => {
+  if (!contestId) return new Set();
+  try {
+    const raw = localStorage.getItem(keyForContest(contestId));
+    if (!raw) return new Set();
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed)
+      ? new Set(parsed.filter((item) => typeof item === "string"))
+      : new Set();
+  } catch {
+    return new Set();
+  }
+};
+
+export const saveMarkedQuestionIds = (
+  contestId: string | undefined,
+  ids: Set<string>,
+): void => {
+  if (!contestId) return;
+  try {
+    if (ids.size === 0) {
+      localStorage.removeItem(keyForContest(contestId));
+      return;
+    }
+    localStorage.setItem(keyForContest(contestId), JSON.stringify([...ids]));
+  } catch {
+    // localStorage can be unavailable; marking is a UI aid only.
+  }
+};

From 615f83a6af35333b5ffb22222031646d7a857bcc Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:22:07 +0800
Subject: [PATCH 28/60] fix(dashboard): extract tabs story render into named
 component

Pre-push ESLint flagged the inline `render: () => { ... useState ... }` for
violating react-hooks/rules-of-hooks because the arrow function is not
recognized as a React component. Moves the body into a top-level
`TabsWithToolbarStory` so hooks fire from a proper component.
---
 .../dashboard/tabs/tabs.stories.tsx           | 72 ++++++++++---------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/frontend/src/shared/components/dashboard/tabs/tabs.stories.tsx b/frontend/src/shared/components/dashboard/tabs/tabs.stories.tsx
index 5a3fda46..6f057179 100644
--- a/frontend/src/shared/components/dashboard/tabs/tabs.stories.tsx
+++ b/frontend/src/shared/components/dashboard/tabs/tabs.stories.tsx
@@ -15,40 +15,42 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
+function TabsWithToolbarStory() {
+  const [active, setActive] = useState("all");
+  const [q, setQ] = useState("");
+  return (
+    <DashboardBlock padding="flush">
+      <DashboardTabs activeId={active} onChange={setActive}>
+        <DashboardTabBar
+          tabs={[
+            { id: "all", label: "全部" },
+            { id: "active", label: "進行中", badge: 12 },
+            { id: "done", label: "已結束" },
+          ]}
+          toolbar={
+            <DashboardToolbar>
+              <DashboardToolbar.Search
+                value={q}
+                onChange={setQ}
+                placeholder="搜尋學生"
+              />
+            </DashboardToolbar>
+          }
+        />
+        <DashboardTabPanel tabId="all">
+          <div style={{ padding: "1rem" }}>全部內容</div>
+        </DashboardTabPanel>
+        <DashboardTabPanel tabId="active">
+          <div style={{ padding: "1rem" }}>進行中</div>
+        </DashboardTabPanel>
+        <DashboardTabPanel tabId="done">
+          <div style={{ padding: "1rem" }}>已結束</div>
+        </DashboardTabPanel>
+      </DashboardTabs>
+    </DashboardBlock>
+  );
+}
+
 export const TabsWithToolbar: Story = {
-  render: () => {
-    const [active, setActive] = useState("all");
-    const [q, setQ] = useState("");
-    return (
-      <DashboardBlock padding="flush">
-        <DashboardTabs activeId={active} onChange={setActive}>
-          <DashboardTabBar
-            tabs={[
-              { id: "all", label: "全部" },
-              { id: "active", label: "進行中", badge: 12 },
-              { id: "done", label: "已結束" },
-            ]}
-            toolbar={
-              <DashboardToolbar>
-                <DashboardToolbar.Search
-                  value={q}
-                  onChange={setQ}
-                  placeholder="搜尋學生"
-                />
-              </DashboardToolbar>
-            }
-          />
-          <DashboardTabPanel tabId="all">
-            <div style={{ padding: "1rem" }}>全部內容</div>
-          </DashboardTabPanel>
-          <DashboardTabPanel tabId="active">
-            <div style={{ padding: "1rem" }}>進行中</div>
-          </DashboardTabPanel>
-          <DashboardTabPanel tabId="done">
-            <div style={{ padding: "1rem" }}>已結束</div>
-          </DashboardTabPanel>
-        </DashboardTabs>
-      </DashboardBlock>
-    );
-  },
+  render: () => <TabsWithToolbarStory />,
 };

From f46665d9fb3f86ba420a4e6f09a4597e444b8895 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:34:42 +0800
Subject: [PATCH 29/60] feat(dashboard): add KPIBlock primitive for single-data
 emphasis
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

KPIBlock composes DashboardBlock + MetricBlock(size=lg) and reserves a
visualization slot beneath, formalising the "title + data + child"
pattern used by 考生分佈總覽, 完成率, 分數分布, 違規事件 etc.

Migrate the right-rail insight cards (DistributionOverview, generic
InsightCard) and the student dashboard's 完成率 / 成績分布 panels to
KPIBlock; the bespoke MetricBlock+children compositions are gone.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/admin/AdminInsightRail.tsx     | 110 +++++++++---------
 .../StudentContestDashboardView.tsx           |  29 ++---
 .../components/dashboard/KPIBlock.module.scss |   4 +
 .../shared/components/dashboard/KPIBlock.tsx  |  48 ++++++++
 .../src/shared/components/dashboard/index.ts  |   1 +
 .../dashboard/structure.stories.tsx           |  45 +++++++
 .../components/dashboard/structure.test.tsx   |  34 ++++++
 7 files changed, 196 insertions(+), 75 deletions(-)
 create mode 100644 frontend/src/shared/components/dashboard/KPIBlock.module.scss
 create mode 100644 frontend/src/shared/components/dashboard/KPIBlock.tsx

diff --git a/frontend/src/features/contest/components/admin/AdminInsightRail.tsx b/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
index b71fc92a..3abf4d4d 100644
--- a/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
+++ b/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
@@ -15,7 +15,7 @@ import type {
 import { useTheme } from "@/shared/ui/theme/ThemeContext";
 import {
   DashboardContainer,
-  MetricBlock,
+  KPIBlock,
 } from "@/shared/components/dashboard";
 import styles from "./AdminInsightRail.module.scss";
 
@@ -180,13 +180,13 @@ const DistributionOverview = ({
     scale[item.label] = DISTRIBUTION_TONE_COLOR[item.key];
     return scale;
   }, {});
-  return (
-    <section
-      className={`${styles.card} ${styles.distributionCard}`}
-      aria-busy={loading}
-      aria-label={title}
-    >
-      {loading ? (
+  if (loading) {
+    return (
+      <section
+        className={`${styles.card} ${styles.distributionCard}`}
+        aria-busy
+        aria-label={title}
+      >
         <div className={styles.distributionList}>
           {Array.from({ length: 4 }).map((_, index) => (
             <div key={index} className={styles.distributionItem}>
@@ -195,45 +195,44 @@ const DistributionOverview = ({
             </div>
           ))}
         </div>
+      </section>
+    );
+  }
+
+  return (
+    <KPIBlock title={title} value={`${total} 人`} ariaLabel={title}>
+      {hasDistributionData ? (
+        <div className={styles.distributionChartFrame}>
+          <MeterChart
+            data={distributionChartData}
+            options={{
+              title: "",
+              height: "108px",
+              resizable: true,
+              theme,
+              meter: {
+                height: 8,
+                proportional: {
+                  unit: "人",
+                  breakdownFormatter: () =>
+                    `已交卷 ${submittedCount} / ${total} 人（完成率 ${completionPercent}%）`,
+                  totalFormatter: (value) => `考生總數 ${value} 人`,
+                },
+              },
+              color: {
+                scale: chartColorScale,
+              },
+              legend: {
+                enabled: false,
+              },
+              toolbar: { enabled: false },
+            }}
+          />
+        </div>
       ) : (
-        <>
-          <MetricBlock label={title} value={`${total} 人`} size="lg" />
-          {hasDistributionData ? (
-            <>
-              <div className={styles.distributionChartFrame}>
-                <MeterChart
-                  data={distributionChartData}
-                  options={{
-                    title: "",
-                    height: "108px",
-                    resizable: true,
-                    theme,
-                    meter: {
-                      height: 8,
-                      proportional: {
-                        unit: "人",
-                        breakdownFormatter: () =>
-                          `已交卷 ${submittedCount} / ${total} 人（完成率 ${completionPercent}%）`,
-                        totalFormatter: (value) => `考生總數 ${value} 人`,
-                      },
-                    },
-                    color: {
-                      scale: chartColorScale,
-                    },
-                    legend: {
-                      enabled: false,
-                    },
-                    toolbar: { enabled: false },
-                  }}
-                />
-              </div>
-            </>
-          ) : (
-            <div className={styles.emptyState}>尚無考生分佈資料</div>
-          )}
-        </>
+        <div className={styles.emptyState}>尚無考生分佈資料</div>
       )}
-    </section>
+    </KPIBlock>
   );
 };
 
@@ -331,18 +330,13 @@ function InsightCard({
       group.values.some((point) => point.value > 0),
     );
   return (
-    <section className={styles.card} aria-busy={loading}>
-      <MetricBlock
-        label={card.title}
-        value={
-          loading ? (
-            <SkeletonText heading width="5rem" />
-          ) : (
-            card.value
-          )
-        }
-        size="lg"
-      />
+    <KPIBlock
+      title={card.title}
+      value={
+        loading ? <SkeletonText heading width="5rem" /> : card.value
+      }
+      ariaLabel={card.title}
+    >
       {loading ? (
         card.kind === "line" ? (
           <SkeletonPlaceholder className={styles.chartSkeleton} />
@@ -374,6 +368,6 @@ function InsightCard({
           {action.loading ? action.loadingLabel ?? action.label : action.label}
         </Button>
       ) : null}
-    </section>
+    </KPIBlock>
   );
 }
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
index aa98153b..0a9ae5f6 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
@@ -63,6 +63,7 @@ import {
   DashboardBlock,
   DashboardContainer,
   DashboardPage,
+  KPIBlock,
   MetricBlock,
 } from "@/shared/components/dashboard";
 import { CountdownProgress } from "@/features/contest/components/CountdownProgress";
@@ -855,30 +856,24 @@ export default function StudentContestDashboard({
             />
           </DashboardBlock>
 
-          <DashboardBlock>
-            <div className={styles.chartHeader}>
-              <span className={styles.metricLabel}>完成率</span>
-              <strong className={styles.metricValue}>{progressPercent}%</strong>
-            </div>
+          <KPIBlock title="完成率" value={`${progressPercent}%`}>
             <div className={styles.progressTrack} aria-hidden="true">
               <div
                 className={styles.progressFill}
                 style={{ inlineSize: `${progressPercent}%` }}
               />
             </div>
-          </DashboardBlock>
+          </KPIBlock>
 
           {contest.resultsPublished && contest.contestType === "paper_exam" ? (
-            <DashboardBlock ariaLabel="成績分布">
-              <div className={styles.chartHeader}>
-                <span className={styles.metricLabel}>成績分布</span>
-                {scoreSummary ? (
-                  <strong className={styles.metricValue}>
-                    平均 {scoreSummary.summary.average_score.toFixed(1)} /{" "}
-                    {scoreSummary.summary.max_total_score}
-                  </strong>
-                ) : null}
-              </div>
+            <KPIBlock
+              title="成績分布"
+              value={
+                scoreSummary
+                  ? `平均 ${scoreSummary.summary.average_score.toFixed(1)} / ${scoreSummary.summary.max_total_score}`
+                  : "—"
+              }
+            >
               <div className={styles.scoreDistributionChart}>
                 {scoreSummaryLoading ? (
                   <SkeletonPlaceholder className={styles.chartSkeleton} />
@@ -893,7 +888,7 @@ export default function StudentContestDashboard({
                   <p className={styles.emptyText}>尚無成績分布資料。</p>
                 )}
               </div>
-            </DashboardBlock>
+            </KPIBlock>
           ) : null}
 
           <DashboardBlock>
diff --git a/frontend/src/shared/components/dashboard/KPIBlock.module.scss b/frontend/src/shared/components/dashboard/KPIBlock.module.scss
new file mode 100644
index 00000000..68b7978c
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/KPIBlock.module.scss
@@ -0,0 +1,4 @@
+.body {
+  margin-top: 0.875rem;
+  min-width: 0;
+}
diff --git a/frontend/src/shared/components/dashboard/KPIBlock.tsx b/frontend/src/shared/components/dashboard/KPIBlock.tsx
new file mode 100644
index 00000000..54453f84
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/KPIBlock.tsx
@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+import { DashboardBlock } from "./DashboardBlock";
+import { MetricBlock } from "./typography/MetricBlock";
+import styles from "./KPIBlock.module.scss";
+
+export interface KPIBlockProps {
+  /** Small section label rendered above the value. */
+  title: ReactNode;
+  /** Highlighted KPI value (e.g. "126 人", "78%", "0.0 / 103"). */
+  value: ReactNode;
+  /** Optional inline icon / badge rendered next to the value. */
+  trailing?: ReactNode;
+  /** Value size. Defaults to "lg" for KPI emphasis. */
+  size?: "default" | "lg";
+  /** Align label + value to start (default) or end. */
+  align?: "start" | "end";
+  /** Inherit DashboardBlock padding contract. */
+  padding?: "default" | "compact" | "flush";
+  /** Visualization slot — chart, progress bar, list, etc. */
+  children?: ReactNode;
+  ariaLabel?: string;
+}
+
+export function KPIBlock({
+  title,
+  value,
+  trailing,
+  size = "lg",
+  align = "start",
+  padding = "default",
+  children,
+  ariaLabel,
+}: KPIBlockProps) {
+  const resolvedAriaLabel =
+    ariaLabel ?? (typeof title === "string" ? title : undefined);
+  return (
+    <DashboardBlock padding={padding} ariaLabel={resolvedAriaLabel}>
+      <MetricBlock
+        label={title}
+        value={value}
+        size={size}
+        align={align}
+        trailing={trailing}
+      />
+      {children ? <div className={styles.body}>{children}</div> : null}
+    </DashboardBlock>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/index.ts b/frontend/src/shared/components/dashboard/index.ts
index 2ed13d89..6543e018 100644
--- a/frontend/src/shared/components/dashboard/index.ts
+++ b/frontend/src/shared/components/dashboard/index.ts
@@ -7,3 +7,4 @@ export {
 } from "./DashboardContainer";
 export { DashboardBlock, type DashboardBlockProps } from "./DashboardBlock";
 export { BlockHeader, type BlockHeaderProps } from "./BlockHeader";
+export { KPIBlock, type KPIBlockProps } from "./KPIBlock";
diff --git a/frontend/src/shared/components/dashboard/structure.stories.tsx b/frontend/src/shared/components/dashboard/structure.stories.tsx
index 6b08b0a4..b96676b4 100644
--- a/frontend/src/shared/components/dashboard/structure.stories.tsx
+++ b/frontend/src/shared/components/dashboard/structure.stories.tsx
@@ -6,6 +6,7 @@ import {
   DashboardBlock,
   DashboardContainer,
   DashboardPage,
+  KPIBlock,
   MetricBlock,
 } from "./index";
 
@@ -56,6 +57,50 @@ export const SplitWithStackInside: Story = {
   ),
 };
 
+export const KPIBlocks: Story = {
+  render: () => (
+    <DashboardContainer layout="stack" bordered dividers="auto">
+      <KPIBlock title="考生分佈總覽" value="126 人">
+        <div
+          style={{
+            height: 8,
+            background: "var(--cds-layer-accent-01)",
+            position: "relative",
+            overflow: "hidden",
+          }}
+        >
+          <div
+            style={{
+              width: "36%",
+              height: "100%",
+              background: "var(--cds-support-success)",
+            }}
+          />
+        </div>
+      </KPIBlock>
+      <KPIBlock title="完成率" value="78%">
+        <div
+          style={{
+            height: 8,
+            background: "var(--cds-layer-accent-01)",
+            overflow: "hidden",
+          }}
+        >
+          <div
+            style={{
+              width: "78%",
+              height: "100%",
+              background: "var(--cds-interactive)",
+            }}
+          />
+        </div>
+      </KPIBlock>
+      <KPIBlock title="分數分布" value="0.0 / 103" />
+      <KPIBlock title="違規事件" value={3} />
+    </DashboardContainer>
+  ),
+};
+
 export const Grid2x2Matrix: Story = {
   render: () => (
     <DashboardContainer layout="grid" columns={2} bordered dividers="auto">
diff --git a/frontend/src/shared/components/dashboard/structure.test.tsx b/frontend/src/shared/components/dashboard/structure.test.tsx
index 335d89ed..2c146118 100644
--- a/frontend/src/shared/components/dashboard/structure.test.tsx
+++ b/frontend/src/shared/components/dashboard/structure.test.tsx
@@ -5,6 +5,7 @@ import {
   DashboardBlock,
   DashboardContainer,
   DashboardPage,
+  KPIBlock,
 } from "./index";
 
 describe("DashboardPage", () => {
@@ -83,3 +84,36 @@ describe("BlockHeader", () => {
     expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument();
   });
 });
+
+describe("KPIBlock", () => {
+  it("renders title and value", () => {
+    render(<KPIBlock title="考生分佈總覽" value="126 人" />);
+    expect(screen.getByText("考生分佈總覽")).toBeInTheDocument();
+    expect(screen.getByText("126 人")).toBeInTheDocument();
+  });
+
+  it("renders visualization child", () => {
+    render(
+      <KPIBlock title="完成率" value="78%">
+        <div data-testid="chart">chart</div>
+      </KPIBlock>,
+    );
+    expect(screen.getByTestId("chart")).toBeInTheDocument();
+  });
+
+  it("derives aria-label from string title", () => {
+    render(<KPIBlock title="違規事件" value={3} />);
+    expect(
+      screen.getByRole("region", { name: "違規事件" }),
+    ).toBeInTheDocument();
+  });
+
+  it("respects explicit aria-label", () => {
+    render(
+      <KPIBlock title="x" value="y" ariaLabel="custom">
+        body
+      </KPIBlock>,
+    );
+    expect(screen.getByRole("region", { name: "custom" })).toBeInTheDocument();
+  });
+});

From 3a891c8dab8bc0323a57cbb1dbf41bbea515d55e Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:39:06 +0800
Subject: [PATCH 30/60] fix(dashboard): even out spacing in KPIBlock body and
 participant panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

KPIBlock body switches from a single margin-top to flex-column with
gap so multiple slot children (chart + action button) get consistent
breathing room between them — fixes the cramped layout where the 發布
成績 button sat directly under the 批改進度 progress bar.

The drilldown participant panel gains flex-column gap so the section
header, metric tag group, and content list each get the same vertical
rhythm. The negative-top margin hack on .metricTagGroup is removed
now that the parent owns the spacing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/admin/AdminOverviewCommandCenter.module.scss   | 4 +++-
 frontend/src/shared/components/dashboard/KPIBlock.module.scss | 3 +++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
index 7d4eb13d..5e1de1a7 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
@@ -22,6 +22,9 @@
 }
 
 .drilldownPanel {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   min-width: 0;
   padding: 1.25rem;
 }
@@ -80,7 +83,6 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  margin: -0.25rem 0 1rem;
 }
 
 .participantCard {
diff --git a/frontend/src/shared/components/dashboard/KPIBlock.module.scss b/frontend/src/shared/components/dashboard/KPIBlock.module.scss
index 68b7978c..ca12d8df 100644
--- a/frontend/src/shared/components/dashboard/KPIBlock.module.scss
+++ b/frontend/src/shared/components/dashboard/KPIBlock.module.scss
@@ -1,4 +1,7 @@
 .body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
   margin-top: 0.875rem;
   min-width: 0;
 }

From a40950030496da230eeae1aa5862727a239d51ac Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:44:12 +0800
Subject: [PATCH 31/60] docs(spec): unify contest layout under
 MainLayout/WorkspaceShell
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

砍掉 ContestLayout（505 行），所有 contest 頁面共用同一條 layout 軌道。
客製化由 SideMenu / WorkspaceTopNav / UserMenu 各自的 mode-aware 邏輯處理。
新增 useContestRuntimeMode hook + RuntimeRouteWrapper 共用 wrapper。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...test-workspace-shell-unification-design.md | 309 ++++++++++++++++++
 1 file changed, 309 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-05-05-contest-workspace-shell-unification-design.md

diff --git a/docs/superpowers/specs/2026-05-05-contest-workspace-shell-unification-design.md b/docs/superpowers/specs/2026-05-05-contest-workspace-shell-unification-design.md
new file mode 100644
index 00000000..c6c9fb41
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-05-contest-workspace-shell-unification-design.md
@@ -0,0 +1,309 @@
+# 競賽 Layout 統一在 WorkspaceShell 之下 設計
+
+- 日期：2026-05-05
+- 分支：dev
+- 狀態：Draft（待 writing-plans）
+
+## 目標
+
+把目前 contest runtime 自帶的 505 行 `ContestLayout` 砍掉，所有 contest 頁面（含 runtime / 非 runtime）統一走 `MainLayout` + `WorkspaceShell`。客製化由 SideMenu / WorkspaceTopNav / UserMenu 各自的 mode-aware 邏輯處理。視覺一致、main content 為重心。
+
+## 範圍與非範圍
+
+**範圍**
+
+- 移除 `ContestLayout.tsx`（與其 SCSS）
+- runtime 路由（`/solve`、paper exam 答題畫面）改掛在 `MainLayout` / `WorkspaceShell` / `ContestWorkspaceLayout` 之下
+- `SideMenu` 加 contest mode 分支：非 runtime 顯示「返回教室」單條目；runtime 顯示「Solve/Dashboard tabs + problem list」
+- `WorkspaceTopNav` 加 runtime 鎖定：logo / 麵包屑 `pointer-events: none`，視覺保留
+- `UserMenu` 在 runtime 期間 `settingsOnly={true}`
+- runtime 期間透過 `useDisablePanel('right')` 關閉右側 AI chat panel
+- `ExamModeWrapper` 等 runtime 限定邏輯從 `ContestLayout` 拆出，搬到一個 `RuntimeRouteWrapper`
+
+**非範圍**
+
+- `WorkspaceShell` 本體不動（不引入 slot system、不換位置）
+- AppSidebar 不動
+- precheck / admin / preview / practice / classroom 既有 layout 不動
+- 不新建 `ContestShell` 元件
+- 不重做右側 aside panel（先前提的「dashboard 左欄資訊塞右欄」**取消**，重心放在 main content）
+- 不動 contest 路由的 URL 結構
+
+## 現況差距
+
+| 既有 | 缺陷 |
+|---|---|
+| `ContestLayout.tsx`（505 行） | 自帶 Header + sidebar + 麵包屑 + Modal，跟 WorkspaceShell 平行宇宙；視覺與行為要靠人為紀律才能跟 app 一致 |
+| `routes.tsx` 雙條路由 | runtime 用 `ContestLayout`，非 runtime 用 `ContestWorkspaceLayout`；多軌維護 |
+| `SideMenu` | 沒有 runtime mode 概念；無法在 contest 答題期間顯示「Solve/Dashboard tabs + problem list」 |
+| `WorkspaceTopNav` | 沒有 runtime 鎖定機制 |
+| 答題期間 AI chat panel | 沒有自動關閉 |
+
+## 設計
+
+### A. 架構：所有 contest 頁面共用 ContestWorkspaceLayout
+
+`ContestWorkspaceLayout` 已存在且只是個透明 wrapper（提供 `ContestProvider` + outletContext）。讓 runtime 與非 runtime 共用這同一個 layout：
+
+```
+<Route element={<MainLayout />}>          // 提供 WorkspaceShell + AppSidebar + WorkspaceTopNav
+  <Route element={<ContestWorkspaceLayout />}>   // 提供 ContestProvider + exam handlers
+    <Route index element={<ContestDashboardScreen />} />
+    <Route path="solve" element={<RuntimeRouteWrapper><ContestSolveScreen /></RuntimeRouteWrapper>} />
+    <Route path="solve/:problemId" element={<RuntimeRouteWrapper><ContestSolveScreen /></RuntimeRouteWrapper>} />
+    {/* 其他子頁同樣留在這裡 */}
+  </Route>
+</Route>
+```
+
+`ContestLayout.tsx` 整檔刪除。其內既有功能拆解到：
+- 權限 / refresh / score / 麵包屑顯示 → 已存在於 `WorkspaceTopNav` / `useContestLayoutState`
+- ExamModeWrapper / ExamSubmissionProgressModal / ExamModeMonitorModal / 計時 / handleStartExam 等 → 搬到下方 §B 的 `RuntimeRouteWrapper`
+- contestShell sidebar（既有的 Solve/Dashboard nav + Home/List icon）→ 搬到 SideMenu 的 runtime mode（§C）
+- ExamStatusBadge / 計時顯示 → 搬到 WorkspaceTopNav 的 runtime extension（§D）
+
+### B. `RuntimeRouteWrapper`
+
+新增一個 wrapper，包住每個 runtime route element，負責：
+
+- 渲染 `<ExamModeWrapper>`（既有，保留 cheat detection / fullscreen / 監考行為）
+- 把 `ExamSubmissionProgressModal` / `ExamModeMonitorModal` mount 在這裡
+- 透過 `useDisablePanel('right')` 關閉右側 AI chat panel
+- 提供 runtime context（見 §F）讓 SideMenu / TopNav 知道「現在是 runtime」
+
+```tsx
+// frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
+export const RuntimeRouteWrapper = ({ children }: { children: ReactNode }) => {
+  const { contest, contestId, hasEnded, isAdmin, refreshContest } = useContestLayoutState();
+  // useDisablePanel('right') already exists; 這個 hook 確保 runtime 期間右側 chat 關閉
+  useDisablePanel('right');
+
+  const examActions = useContestExamActions({ /* ... */ });
+  const submissionProgress = examActions.submissionProgress;
+
+  return (
+    <ContestRuntimeProvider value={{ isRuntime: true, ...examActions }}>
+      <ExamModeWrapper {...examModeProps}>
+        {children}
+      </ExamModeWrapper>
+      <ExamSubmissionProgressModal state={submissionProgress.state} onRequestClose={submissionProgress.close} />
+      <ExamModeMonitorModal /* ... */ />
+    </ContestRuntimeProvider>
+  );
+};
+```
+
+### C. `SideMenu` 加 contest mode 分支
+
+`SideMenu` 已是 561 行 context-aware menu，依 URL 與角色決定顯示什麼。新增兩個 contest mode：
+
+```ts
+// 偵測階段（在既有 contest path 判定下加細分）
+const inContestPath = /^\/classrooms\/[^/]+\/contest\/[^/]+/.test(pathname);
+const inAdminPath = /^\/classrooms\/[^/]+\/contest\/[^/]+\/admin/.test(pathname);
+const { isRuntime } = useContestRuntimeMode();
+const inContestIdle = inContestPath && !inAdminPath && !isRuntime;
+```
+
+**非 runtime contest mode**（`inContestPath && !isRuntime && 不在 admin path`）
+
+```
+返回教室                    → /classrooms/:classroomId
+競賽主頁（current page）
+```
+
+不顯示 dashboard / 教室列表 / 提交 / chat 等其他 app-level 條目（聚焦 contest）。
+
+**Runtime contest mode**（`isRuntime`）
+
+```
+┌──────────────────┐
+│ [Solve|Dashboard]│   tab toggle（Carbon ContentSwitcher 樣式）
+├──────────────────┤
+│ 題目列表：        │
+│  P1 ✓ Hello      │
+│  P2 ● A+B   ← active │
+│  P3 ○ Factorial  │
+└──────────────────┘
+```
+
+- Solve tab active：當前在 `/solve`；點 Dashboard tab → navigate 到 contest dashboard URL，SideMenu 自動切回「非 runtime contest mode」
+- 題目列表來自 `useContest()`（既有 ContestProvider）；每題 status icon：
+  - ✓ = 已完整作答（依現有 status 判斷邏輯）
+  - ● = 部分作答 / 進行中
+  - ○ = 未作答
+
+不顯示「返回教室」（runtime 不允許離開）。
+
+> 抽出 `<SideMenuContestRuntimeSection />` 與 `<SideMenuContestIdleSection />` 作為 SideMenu 內部子元件，避免 SideMenu 主檔再膨脹。
+
+### D. `WorkspaceTopNav` 加 runtime 鎖定
+
+加入一個 prop 或 context 偵測：
+
+```tsx
+const { isRuntime } = useContestRuntimeMode();
+```
+
+當 `isRuntime` 為 true：
+
+- Logo / 麵包屑 hyperlink 加 `aria-disabled` + `pointer-events: none`，視覺保留但不可點擊
+- 顯示新增資訊：ExamStatusBadge（從 ContestLayout 搬出）+ 倒數計時 TimeDisplay（既有）
+- 既有的「avatar / 教室 / contest」麵包屑邏輯不變（已支援）
+
+### E. `UserMenu` settingsOnly
+
+`UserMenu` 已支援 `settingsOnly` prop（既有 `lockContestMenu` 邏輯透過 ContestLayout 傳入）。改為從 context 讀：
+
+```tsx
+const { isRuntime } = useContestRuntimeMode();
+return <UserMenu settingsOnly={isRuntime} ... />;
+```
+
+讓任何掛在 WorkspaceShell 下的 page 都能正確啟用該行為。
+
+### F. Runtime 偵測機制
+
+新增 `useContestRuntimeMode` hook 與 context，集中判定：
+
+```ts
+// frontend/src/features/contest/hooks/useContestRuntimeMode.ts
+import { useLocation } from 'react-router-dom';
+
+export const useContestRuntimeMode = () => {
+  const { pathname } = useLocation();
+  const isRuntime = /^\/classrooms\/[^/]+\/contest\/[^/]+\/solve(?:\/|$)/.test(pathname);
+  return { isRuntime };
+};
+```
+
+> 既有 `useContestLayoutState` 的 `isSolvePage` / `isPaperExamPage` 判斷依賴 contest type，繼續供需要區分 coding vs paper 的場景使用；本 hook 只暴露 navbar / sidemenu 需要的單一 boolean。
+
+`SideMenu` / `WorkspaceTopNav` / `UserMenu` 直接呼叫此 hook 即可，不依賴 prop 傳遞。
+
+> 若有 cheat-detection-active 等更細的 runtime 子狀態（例：考試已開始但未進入 solve 路徑），由 `RuntimeRouteWrapper` 提供的 `ContestRuntimeContext` 補充表達；本次不擴張此狀態空間，先以 URL 為準。
+
+### G. 路由調整（`routes.tsx`）
+
+```diff
+- export const classroomContestDetailRoutes = (
+-   <Route path="/classrooms/:classroomId/contest/:contestId" element={<ContestWorkspaceLayout />}>
+-     <Route index element={<ContestDashboardScreen />} />
+-   </Route>
+- );
+- export const classroomContestRuntimeRoutes = (
+-   <Route path="/classrooms/:classroomId/contest/:contestId" element={<ContestLayout />}>
+-     <Route path="solve" element={<ContestSolveScreen />} />
+-     <Route path="solve/:problemId" element={<ContestSolveScreen />} />
+-   </Route>
+- );
+
++ export const classroomContestRoutes = (
++   <Route path="/classrooms/:classroomId/contest/:contestId" element={<ContestWorkspaceLayout />}>
++     <Route index element={<ContestDashboardScreen />} />
++     <Route
++       path="solve"
++       element={<RuntimeRouteWrapper><ContestSolveScreen /></RuntimeRouteWrapper>}
++     />
++     <Route
++       path="solve/:problemId"
++       element={<RuntimeRouteWrapper><ContestSolveScreen /></RuntimeRouteWrapper>}
++     />
++   </Route>
++ );
+```
+
+`App.tsx` 對應：把 `classroomContestRoutes` 整段放進 `<Route element={<MainLayout />}>` 區塊；移除原先 `classroomContestRuntimeRoutes` 的 import 與使用。
+
+precheck / admin / preview / practice 路由不動。
+
+## 元件結構
+
+```
+frontend/src/features/contest/components/layout/
+  ContestWorkspaceLayout.tsx         # 既有，保留作 ContestProvider wrapper
+  RuntimeRouteWrapper.tsx            # NEW：runtime route 共用 wrapper
+  ContestLayoutHeaderSlotContext.tsx # 既有，保留供 page 自行 inject header actions
+
+frontend/src/features/contest/hooks/
+  useContestRuntimeMode.ts           # NEW：URL-based runtime 偵測
+
+frontend/src/features/contest/contexts/
+  ContestRuntimeContext.tsx          # NEW：runtime route 提供 examActions / submissionProgress 等
+
+frontend/src/features/app/components/
+  SideMenu.tsx                       # 修改：加 contest idle / runtime branch
+  workspace/WorkspaceTopNav.tsx      # 修改：runtime 鎖定 + ExamStatusBadge / 倒數
+  GlobalHeader.tsx                   # 若 UserMenu 由此渲染，改為讀 useContestRuntimeMode
+```
+
+刪除：
+- `frontend/src/features/contest/components/layout/ContestLayout.tsx`
+- `frontend/src/features/contest/components/layout/ContestLayout.module.scss`
+
+## 資料流
+
+```
+URL change
+   │
+   ▼
+useContestRuntimeMode()  ──→  isRuntime
+   │
+   ├─→ SideMenu                 (idle: 返回教室 / runtime: tabs+題目)
+   ├─→ WorkspaceTopNav          (runtime: logo/breadcrumb disabled, ExamStatus shown)
+   ├─→ UserMenu                 (runtime: settingsOnly)
+   └─→ RuntimeRouteWrapper      (掛在 runtime route 上，啟動 ExamModeWrapper / 關閉 chat panel / mount runtime modals)
+```
+
+## 錯誤處理
+
+- runtime 期間使用者試圖直接 navigate 到 app-level URL（透過瀏覽器位址列等）：由 `ExamModeWrapper` 既有的 fullscreen lock / cheat detection 處理；不另外做 SPA 攔截
+- `useDisablePanel('right')` 期間使用者試圖打開 chat：依現有 useDisablePanel 行為（按鈕 disable / FAB 隱藏）
+- 路由切換到 runtime 時若使用者已開著 chat：依現有 `useDisablePanel` 自動關閉
+- 取消遷移風險：保留 `ContestWorkspaceLayout` 的 outletContext 介面（refreshContest / onJoin / onStartExam / onEndExam / onGoToAnswering / onOpenAdminPanel / isAdmin），既有 children screens 不需大改
+
+## 測試重點
+
+**Frontend 單元 / 整合**
+
+- `useContestRuntimeMode`：給 mock pathname，驗證 isRuntime / isSolve / isPaper 正確
+- `SideMenu`：在 contest idle path 下渲染，DOM 上只有「返回教室」+「競賽主頁」；在 runtime path 下渲染，DOM 上有 Solve/Dashboard tab + problem list、無「返回教室」
+- `WorkspaceTopNav`：runtime 時 logo / breadcrumb 有 `pointer-events: none`、ExamStatusBadge 顯示
+- `UserMenu`：runtime 時菜單只剩設定 / 登出
+- `RuntimeRouteWrapper`：render 時呼叫 `useDisablePanel('right')`、ExamModeWrapper 收到正確 props
+
+**手動 E2E 驗收清單**
+
+- [ ] 學生登入 → contest dashboard：左 sidebar 只有「返回教室 / 競賽主頁」
+- [ ] 點「進入答題」進到 /solve：左 sidebar 切換為 Solve/Dashboard tabs + 題目清單
+- [ ] runtime 期間點 logo / 麵包屑無反應
+- [ ] runtime 期間點頭像 → menu 只有設定 / 登出
+- [ ] runtime 期間 AI chat 右面板按鈕被 disable
+- [ ] 點 sidebar Dashboard tab → 切回 contest dashboard URL，sidebar 自動回 idle 模式
+- [ ] 答題流程結束、提交完畢 → 回到 dashboard，AI chat 右面板可開啟
+- [ ] 視覺：navbar / sidebar 與其他 app 頁面視覺一致
+
+## 影響的檔案（粗估）
+
+**Frontend（新增）**
+- `features/contest/components/layout/RuntimeRouteWrapper.tsx`
+- `features/contest/hooks/useContestRuntimeMode.ts`
+- `features/contest/contexts/ContestRuntimeContext.tsx`
+- `features/app/components/SideMenuContestSection.tsx`（將 idle / runtime 子區塊抽出）
+
+**Frontend（修改）**
+- `features/contest/routes.tsx`（合併路由）
+- `features/contest/index.ts`（exports）
+- `App.tsx`（把 contest 路由放進 MainLayout）
+- `features/app/components/SideMenu.tsx`（加 contest idle / runtime 分支）
+- `features/app/components/workspace/WorkspaceTopNav.tsx`（runtime 鎖定 + ExamStatusBadge）
+- `features/app/components/UserMenu.tsx`（settingsOnly 來源從 prop 改為直接呼叫 `useContestRuntimeMode`，移除外部傳入 prop 的 path）
+- `features/contest/components/layout/ContestWorkspaceLayout.tsx`（補完 outletContext，補可能缺的 examActions）
+
+**Frontend（刪除）**
+- `features/contest/components/layout/ContestLayout.tsx`
+- `features/contest/components/layout/ContestLayout.module.scss`
+
+## 開放問題
+
+無。

From f25ddb099b18fa991d3f81330796266653881762 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:46:49 +0800
Subject: [PATCH 32/60] chore(contest): collapse remaining bespoke headers and
 dead SCSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Student dashboard inner tabs (規則說明 / 作答紀錄) now use BlockHeader
instead of bespoke .sectionHeader / .inlineRecordsHeader /
.inlineRecordsTitle / .sectionDescription markup. The unused
.metricLabel / .metricValue / .chartHeader rules from before the
KPIBlock migration are deleted.

AdminOverviewScreen drops dead .publishSummary / .publishSummaryIntro
/ .publishSummaryGrid / .publishSummaryItem / .publishSummaryLabel /
.publishSummaryValue rules — none of them are referenced anywhere.

AdminOverviewCommandCenter .participantSingleMetric strong replaces
its hardcoded font-size: 1.25rem with the heading-03 Carbon token, so
the participant card emphasis aligns with MetricBlock size=lg.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../AdminOverviewCommandCenter.module.scss    |  4 +-
 .../StudentContestDashboard.module.scss       | 44 ----------------
 .../StudentContestDashboardView.tsx           | 52 +++++++++----------
 .../panels/AdminOverviewScreen.module.scss    | 37 -------------
 4 files changed, 28 insertions(+), 109 deletions(-)

diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
index 5e1de1a7..647e8869 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
@@ -157,9 +157,9 @@
   align-items: center;
   gap: 0.375rem;
   color: var(--cds-text-primary);
-  font-size: 1.25rem;
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
   font-weight: 600;
-  line-height: 1.2;
+  line-height: var(--cds-heading-03-line-height, 1.4);
 }
 
 .participantSingleMetric strong,
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss
index a0987125..335e843d 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss
@@ -18,55 +18,12 @@
   padding: 1.5rem;
 }
 
-.sectionHeader,
-.inlineRecordsHeader,
-.chartHeader {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.chartHeader {
-  align-items: center;
-}
-
-.inlineRecordsTitle {
-  margin: 0;
-  color: var(--cds-text-primary);
-  font-size: var(--cds-heading-compact-02-font-size, 1rem);
-  font-weight: 600;
-  line-height: var(--cds-heading-compact-02-line-height, 1.375);
-}
-
-.sectionDescription {
-  margin: 0.25rem 0 0;
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-01-font-size, 0.875rem);
-  line-height: var(--cds-body-01-line-height, 1.42857);
-}
-
 .actionStack,
 .modalStack {
   display: grid;
   gap: 0.75rem;
 }
 
-.metricLabel {
-  margin: 0;
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-label-01-font-size, 0.75rem);
-  line-height: var(--cds-label-01-line-height, 1.33333);
-}
-
-.metricValue {
-  margin: 0;
-  color: var(--cds-text-primary);
-  font-size: var(--cds-heading-compact-02-font-size, 1rem);
-  font-weight: 600;
-  line-height: var(--cds-heading-compact-02-line-height, 1.375);
-}
-
 .progressTrack {
   position: relative;
   block-size: 0.5rem;
@@ -198,7 +155,6 @@
     padding: 1rem;
   }
 
-  .inlineRecordsHeader,
   .problemReportItem {
     display: grid;
     grid-template-columns: 1fr;
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
index 0a9ae5f6..5dd1996e 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
@@ -782,21 +782,22 @@ export default function StudentContestDashboard({
               <TabPanels>
                 <TabPanel className={styles.tabPanel}>
                   <div className={styles.tabContent}>
-                    <div className={styles.sectionHeader}>
-                      <div>
-                        <h3 className={styles.inlineRecordsTitle}>規則說明</h3>
-                        <p className={styles.sectionDescription}>
-                          {requiresPassword
-                            ? "此競賽需要密碼。"
-                            : "此競賽不需要密碼。"}
-                        </p>
-                      </div>
-                      {contest.cheatDetectionEnabled ? (
-                        <WarningAlt size={20} className={styles.warningIcon} />
-                      ) : (
-                        <Checkmark size={20} className={styles.successIcon} />
-                      )}
-                    </div>
+                    <BlockHeader
+                      titleAs="h3"
+                      title="規則說明"
+                      description={
+                        requiresPassword
+                          ? "此競賽需要密碼。"
+                          : "此競賽不需要密碼。"
+                      }
+                      actions={
+                        contest.cheatDetectionEnabled ? (
+                          <WarningAlt size={20} className={styles.warningIcon} />
+                        ) : (
+                          <Checkmark size={20} className={styles.successIcon} />
+                        )
+                      }
+                    />
                     {contest.cheatDetectionEnabled ? (
                       <InlineNotification
                         kind="warning"
@@ -822,17 +823,16 @@ export default function StudentContestDashboard({
                 </TabPanel>
                 <TabPanel className={styles.tabPanel}>
                   <div className={styles.tabContent}>
-                    <div className={styles.inlineRecordsHeader}>
-                      <div>
-                        <h3 className={styles.inlineRecordsTitle}>
-                          {phase === "during"
-                            ? "目前作答狀況"
-                            : phase === "after" && contest.resultsPublished
-                              ? "作答紀錄與成績"
-                              : "作答紀錄"}
-                        </h3>
-                      </div>
-                    </div>
+                    <BlockHeader
+                      titleAs="h3"
+                      title={
+                        phase === "during"
+                          ? "目前作答狀況"
+                          : phase === "after" && contest.resultsPublished
+                            ? "作答紀錄與成績"
+                            : "作答紀錄"
+                      }
+                    />
                     {contest.contestType === "paper_exam"
                       ? renderPaperRecords()
                       : renderCodingRecords()}
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss
index 22e84e07..6b1a9423 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss
+++ b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss
@@ -30,40 +30,3 @@
   margin: 0;
   max-width: 52rem;
 }
-
-.publishSummary {
-  display: grid;
-  gap: 0.75rem;
-}
-
-.publishSummaryIntro {
-  margin: 0;
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
-.publishSummaryGrid {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.publishSummaryItem {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.5rem 0.625rem;
-  border: 1px solid var(--cds-border-subtle);
-  border-radius: 0.375rem;
-}
-
-.publishSummaryLabel {
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-label-01-font-size, 0.75rem);
-}
-
-.publishSummaryValue {
-  color: var(--cds-text-primary);
-  font-weight: 600;
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}

From cff6b906e50f964c4c0163631eaaf433ba6bddf2 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:47:54 +0800
Subject: [PATCH 33/60] docs(plan): contest layout unification implementation
 plan
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

11 個任務分 5 階段：偵測 hook + RuntimeRouteWrapper → top nav/UserMenu →
SideMenu idle/runtime → 路由合併 → 清理。每步含完整代碼與命令。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...kspace-shell-unification-implementation.md | 1013 +++++++++++++++++
 1 file changed, 1013 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-05-05-contest-workspace-shell-unification-implementation.md

diff --git a/docs/superpowers/plans/2026-05-05-contest-workspace-shell-unification-implementation.md b/docs/superpowers/plans/2026-05-05-contest-workspace-shell-unification-implementation.md
new file mode 100644
index 00000000..1484b2bd
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-05-contest-workspace-shell-unification-implementation.md
@@ -0,0 +1,1013 @@
+# 競賽 Layout 統一 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:** 砍掉 `ContestLayout.tsx`（505 行），所有 contest 頁面（含 runtime / 非 runtime）統一走 `MainLayout` + `WorkspaceShell`，客製化由 `SideMenu` / `WorkspaceTopNav` / `UserMenu` 各自的 mode-aware 邏輯處理。
+
+**Architecture:**
+- 新增一個 URL-based hook `useContestRuntimeMode` 集中判定 runtime 狀態
+- 新增 `RuntimeRouteWrapper` 包住 runtime route element，負責 ExamModeWrapper / 監考 modal / 關閉 right chat panel
+- `SideMenu` / `WorkspaceTopNav` / `UserMenu` 直接呼叫該 hook 自我調整
+- 合併路由：runtime 與非 runtime 共用 `ContestWorkspaceLayout`，整段放進 `MainLayout`
+
+**Tech Stack:** React 18、react-router-dom、Carbon Design System、Vitest/RTL（測試）。
+
+**參考文件：** `docs/superpowers/specs/2026-05-05-contest-workspace-shell-unification-design.md`
+
+---
+
+## Phase 1：共用偵測 + RuntimeRouteWrapper
+
+### Task 1: `useContestRuntimeMode` hook
+
+**Files:**
+- Create: `frontend/src/features/contest/hooks/useContestRuntimeMode.ts`
+- Create: `frontend/src/features/contest/hooks/useContestRuntimeMode.test.ts`
+
+- [ ] **Step 1：寫失敗測試**
+
+```typescript
+// frontend/src/features/contest/hooks/useContestRuntimeMode.test.ts
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { useContestRuntimeMode } from './useContestRuntimeMode';
+
+const wrap = (initialPath: string) => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <MemoryRouter initialEntries={[initialPath]}>{children}</MemoryRouter>
+  );
+  return Wrapper;
+};
+
+describe('useContestRuntimeMode', () => {
+  it.each([
+    ['/classrooms/c1/contest/x1/solve', true],
+    ['/classrooms/c1/contest/x1/solve/p1', true],
+    ['/classrooms/c1/contest/x1', false],
+    ['/classrooms/c1/contest/x1/admin', false],
+    ['/dashboard', false],
+    ['/classrooms/c1', false],
+  ])('returns isRuntime=%s for %s', (path, expected) => {
+    const { result } = renderHook(() => useContestRuntimeMode(), {
+      wrapper: wrap(path),
+    });
+    expect(result.current.isRuntime).toBe(expected);
+  });
+});
+```
+
+- [ ] **Step 2：執行測試確認 fail**
+
+```bash
+cd frontend && npm test -- useContestRuntimeMode
+```
+Expected：fail（檔案尚不存在）。
+
+- [ ] **Step 3：實作**
+
+```typescript
+// frontend/src/features/contest/hooks/useContestRuntimeMode.ts
+import { useLocation } from 'react-router-dom';
+
+const RUNTIME_REGEX = /^\/classrooms\/[^/]+\/contest\/[^/]+\/solve(?:\/|$)/;
+
+export interface ContestRuntimeMode {
+  isRuntime: boolean;
+}
+
+export const useContestRuntimeMode = (): ContestRuntimeMode => {
+  const { pathname } = useLocation();
+  return { isRuntime: RUNTIME_REGEX.test(pathname) };
+};
+```
+
+- [ ] **Step 4：執行測試 pass**
+
+```bash
+cd frontend && npm test -- useContestRuntimeMode
+```
+Expected：6 tests pass。
+
+- [ ] **Step 5：Commit**
+
+```bash
+git add frontend/src/features/contest/hooks/useContestRuntimeMode.ts frontend/src/features/contest/hooks/useContestRuntimeMode.test.ts
+git commit -m "feat(contest): URL-based useContestRuntimeMode hook"
+```
+
+---
+
+### Task 2: `RuntimeRouteWrapper` + `ContestRuntimeContext`
+
+**Files:**
+- Create: `frontend/src/features/contest/contexts/ContestRuntimeContext.tsx`
+- Create: `frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx`
+
+- [ ] **Step 1：建立 ContestRuntimeContext**
+
+```typescript
+// frontend/src/features/contest/contexts/ContestRuntimeContext.tsx
+import { createContext, useContext } from 'react';
+import type { ReactNode } from 'react';
+
+interface ContestRuntimeContextValue {
+  isRuntime: boolean;
+}
+
+const ContestRuntimeContext = createContext<ContestRuntimeContextValue>({
+  isRuntime: false,
+});
+
+export const ContestRuntimeProvider = ({
+  value,
+  children,
+}: {
+  value: ContestRuntimeContextValue;
+  children: ReactNode;
+}) => (
+  <ContestRuntimeContext.Provider value={value}>
+    {children}
+  </ContestRuntimeContext.Provider>
+);
+
+export const useContestRuntimeContext = () => useContext(ContestRuntimeContext);
+```
+
+- [ ] **Step 2：建立 RuntimeRouteWrapper**
+
+開啟 `frontend/src/features/contest/components/layout/ContestLayout.tsx` 速覽 `useContestExamActions` / `ExamModeWrapper` / `ExamModeMonitorModal` / `ExamSubmissionProgressModal` / `useContestLayoutState` / `useContestTimers` 等使用方式作為參考，但**不從 ContestLayout import 任何東西**——RuntimeRouteWrapper 自行重建這些 hook 呼叫。
+
+```tsx
+// frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import { Modal } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+import { useDisablePanel } from '@/features/app/contexts/useDisablePanel';
+import ExamModeWrapper from '@/features/contest/components/ExamModeWrapper';
+import { ExamModeMonitorModal } from '@/features/contest/components/modals/ExamModeMonitorModal';
+import ExamSubmissionProgressModal from '@/features/contest/components/exam/ExamSubmissionProgressModal';
+import { useContestExamActions } from '@/features/contest/hooks/useContestExamActions';
+import { useContestLayoutState } from '@/features/contest/hooks/useContestLayoutState';
+import { ContestRuntimeProvider } from '@/features/contest/contexts/ContestRuntimeContext';
+
+interface Props {
+  children: ReactNode;
+}
+
+export const RuntimeRouteWrapper = ({ children }: Props) => {
+  const { t } = useTranslation('contest');
+  const { t: tc } = useTranslation('common');
+  const {
+    contestId,
+    contest,
+    hasEnded,
+    refreshContest,
+    navigate,
+  } = useContestLayoutState();
+
+  const [errorOpen, setErrorOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [monitoringOpen, setMonitoringOpen] = useState(false);
+
+  // 關閉右側 AI chat panel
+  useDisablePanel('right');
+
+  const showError = (msg: string) => {
+    setErrorMessage(msg);
+    setErrorOpen(true);
+  };
+
+  const examActions = useContestExamActions({
+    contest,
+    contestId,
+    hasEnded,
+    refreshContest,
+    navigate,
+    messages: {
+      joinError: t('error.joinFailed'),
+      startError: t('error.startExamFailed'),
+      endError: t('error.endExamFailed'),
+      exitError: t('error.exitFailed'),
+    },
+    onError: showError,
+  });
+
+  const isContestParticipant = !!contest?.hasJoined;
+  const examModeProps = {
+    contestId: contestId || '',
+    cheatDetectionEnabled: isContestParticipant && !!contest?.cheatDetectionEnabled,
+    isExamMonitored: isContestParticipant && !!contest?.isExamMonitored,
+    requiresFullscreen: isContestParticipant && !!contest?.requiresFullscreen,
+    hasEnded,
+    lockReason: contest?.lockReason,
+    examStatus: contest?.examStatus,
+    onRefresh: refreshContest,
+  };
+
+  return (
+    <ContestRuntimeProvider value={{ isRuntime: true }}>
+      <ExamModeWrapper {...examModeProps}>
+        {children}
+      </ExamModeWrapper>
+
+      <ExamModeMonitorModal
+        open={monitoringOpen}
+        onRequestClose={() => setMonitoringOpen(false)}
+      />
+
+      <ExamSubmissionProgressModal
+        state={examActions.submissionProgress.state}
+        onRequestClose={examActions.submissionProgress.close}
+      />
+
+      <Modal
+        open={errorOpen}
+        modalHeading={tc('message.error')}
+        passiveModal
+        onRequestClose={() => setErrorOpen(false)}
+      >
+        <p>{errorMessage}</p>
+      </Modal>
+    </ContestRuntimeProvider>
+  );
+};
+
+export default RuntimeRouteWrapper;
+```
+
+> 若 `useContestExamActions` 的 `messages` 欄位實際 key 與本檔不同，依該檔簽名調整；不要更動其 contract。
+
+- [ ] **Step 3：型別檢查**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+Expected：通過。
+
+- [ ] **Step 4：Commit**
+
+```bash
+git add frontend/src/features/contest/contexts/ContestRuntimeContext.tsx frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
+git commit -m "feat(contest): RuntimeRouteWrapper + ContestRuntimeContext"
+```
+
+---
+
+## Phase 2：Top nav 與 UserMenu 適配
+
+### Task 3: `WorkspaceTopNav` 加 runtime 鎖定 + ExamStatusBadge
+
+**Files:**
+- Modify: `frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx`
+- Modify: `frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss`
+
+- [ ] **Step 1：在 WorkspaceTopNav 加 useContestRuntimeMode 與 ExamStatusBadge**
+
+開啟 `frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx`，於既有 imports 之後加入：
+
+```tsx
+import { useContestRuntimeMode } from '@/features/contest/hooks/useContestRuntimeMode';
+import { useContestLayoutState } from '@/features/contest/hooks/useContestLayoutState';
+import { useContestTimers } from '@/features/contest/hooks/useContestTimers';
+import ExamStatusBadge from '@/features/contest/components/exam/ExamStatusBadge';
+import { TimeDisplay } from '@/shared/components/dashboard';
+```
+
+於主元件函式內取得 runtime / contest 資料：
+
+```tsx
+const { isRuntime } = useContestRuntimeMode();
+const { contest, contestId, refreshContest } = useContestLayoutState();
+const { timeLeft, isCountdownToStart, unlockTimeLeft } = useContestTimers({
+  contest,
+  contestId,
+  refreshContest,
+});
+```
+
+- [ ] **Step 2：將 logo / 麵包屑 hyperlinks 套上 runtime 鎖定 className**
+
+定位 `frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx:153`（`<header>` 與 `styles.left`）。在現有的 logo / 麵包屑容器外層 className 後面附加 runtime modifier：
+
+```tsx
+<div
+  className={[styles.context, isRuntime ? styles.contextLocked : '']
+    .filter(Boolean)
+    .join(' ')}
+>
+```
+
+並對所有 `contextLink` 元素加 `aria-disabled={isRuntime}`、`tabIndex={isRuntime ? -1 : 0}`，並把 `onClick` 包裝為 `runtime 時 noop`：
+
+```tsx
+const handleContextClick = (next: () => void) =>
+  isRuntime
+    ? (e: React.SyntheticEvent) => { e.preventDefault(); }
+    : next;
+```
+
+接著把所有 `onClick={someHandler}` 替換為 `onClick={handleContextClick(someHandler)}`。
+
+- [ ] **Step 3：在 actions 區塊插入 ExamStatusBadge + 倒數**
+
+定位 `<div className={styles.actions}>`（第 291 行附近），在 `<UserMenu />` 之前插入：
+
+```tsx
+{isRuntime && contest && (
+  <>
+    <ExamStatusBadge
+      examStatus={contest.examStatus}
+      cheatDetectionEnabled={contest.cheatDetectionEnabled}
+      timeLeft={timeLeft}
+      unlockTimeLeft={unlockTimeLeft}
+      lockReason={contest.lockReason}
+      autoUnlockAt={contest.autoUnlockAt}
+    />
+    <div className={styles.runtimeTimer}>
+      <TimeDisplay
+        variant="header"
+        value={isCountdownToStart ? `(待開始) ${timeLeft}` : timeLeft}
+      />
+    </div>
+  </>
+)}
+```
+
+- [ ] **Step 4：在 SCSS 加 contextLocked 與 runtimeTimer 樣式**
+
+開啟 `frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss`，於檔案結尾新增：
+
+```scss
+.contextLocked {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.runtimeTimer {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-variant-numeric: tabular-nums;
+  margin-right: 0.5rem;
+}
+```
+
+- [ ] **Step 5：型別檢查 + 視覺驗證**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+```bash
+cd frontend && npm run dev
+```
+開瀏覽器：1) 隨意 contest dashboard 頁面 navbar 與其他 app 頁面一致；2) 進入 `/solve` 後 logo / 麵包屑 hyperlinks 點擊無反應、ExamStatusBadge + 倒數顯示。
+
+- [ ] **Step 6：Commit**
+
+```bash
+git add frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss
+git commit -m "feat(top-nav): runtime lock + ExamStatusBadge in workspace top nav"
+```
+
+---
+
+### Task 4: `UserMenu` settingsOnly 來源改為 hook
+
+**Files:**
+- Modify: `frontend/src/features/app/components/UserMenu.tsx`
+
+- [ ] **Step 1：在 UserMenu 內讀 useContestRuntimeMode**
+
+開啟 `frontend/src/features/app/components/UserMenu.tsx`，於既有 imports 後加入：
+
+```tsx
+import { useContestRuntimeMode } from '@/features/contest/hooks/useContestRuntimeMode';
+```
+
+修改 props 與內部邏輯：原 `settingsOnly = false` 仍保留作為「外部強制覆蓋」的 escape hatch，但若沒傳就讀 hook：
+
+```tsx
+export const UserMenu: React.FC<UserMenuProps> = ({
+  settingsOnly,
+  ...rest
+}) => {
+  const { isRuntime } = useContestRuntimeMode();
+  const effectiveSettingsOnly = settingsOnly ?? isRuntime;
+
+  // ... 原本檔案內所有 `settingsOnly` 的引用都換為 `effectiveSettingsOnly`
+};
+```
+
+實作上把所有 `settingsOnly` 內部 reference（檔內第 81 行附近的條件分支等）統一替換為 `effectiveSettingsOnly`。
+
+- [ ] **Step 2：型別檢查 + 手動驗證**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+dev 開啟，driver flow：1) /dashboard 點頭像 → 完整選單；2) `/classrooms/.../contest/.../solve` 點頭像 → 只剩設定 / 登出。
+
+- [ ] **Step 3：Commit**
+
+```bash
+git add frontend/src/features/app/components/UserMenu.tsx
+git commit -m "feat(user-menu): auto settingsOnly during contest runtime"
+```
+
+---
+
+## Phase 3：SideMenu 兩個 contest mode
+
+### Task 5: `SideMenuContestIdleSection`
+
+**Files:**
+- Create: `frontend/src/features/app/components/SideMenuContestIdleSection.tsx`
+
+- [ ] **Step 1：實作**
+
+```tsx
+// frontend/src/features/app/components/SideMenuContestIdleSection.tsx
+import { Link, useLocation, useParams } from 'react-router-dom';
+import { Home, ArrowLeft } from '@carbon/icons-react';
+
+interface Props {
+  classroomId: string;
+  contestId: string;
+  compact?: boolean;
+}
+
+export const SideMenuContestIdleSection = ({ classroomId, contestId, compact }: Props) => {
+  const { pathname } = useLocation();
+  const dashboardPath = `/classrooms/${classroomId}/contest/${contestId}`;
+  const isDashboard = pathname === dashboardPath;
+  const classroomPath = `/classrooms/${classroomId}`;
+
+  const itemBase: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.75rem',
+    padding: compact ? '0.5rem' : '0.75rem 1rem',
+    borderRadius: '0.25rem',
+    color: 'var(--cds-text-primary)',
+    textDecoration: 'none',
+  };
+
+  return (
+    <nav aria-label="Contest navigation" style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
+      <Link to={classroomPath} style={itemBase}>
+        <ArrowLeft size={20} />
+        {!compact && <span>返回教室</span>}
+      </Link>
+      <Link
+        to={dashboardPath}
+        style={{
+          ...itemBase,
+          background: isDashboard ? 'var(--cds-layer-accent)' : 'transparent',
+          fontWeight: isDashboard ? 600 : 400,
+        }}
+        aria-current={isDashboard ? 'page' : undefined}
+      >
+        <Home size={20} />
+        {!compact && <span>競賽主頁</span>}
+      </Link>
+    </nav>
+  );
+};
+
+export default SideMenuContestIdleSection;
+```
+
+- [ ] **Step 2：型別檢查 + Commit**
+
+```bash
+cd frontend && npm run -s typecheck
+git add frontend/src/features/app/components/SideMenuContestIdleSection.tsx
+git commit -m "feat(side-menu): contest idle section with back-to-classroom"
+```
+
+---
+
+### Task 6: `SideMenuContestRuntimeSection`
+
+**Files:**
+- Create: `frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx`
+
+- [ ] **Step 1：實作**
+
+```tsx
+// frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx
+import { useNavigate, useParams } from 'react-router-dom';
+import { ContentSwitcher, Switch, Tag } from '@carbon/react';
+import { Checkmark, CircleDash, IncompleteCancel } from '@carbon/icons-react';
+import { useContest } from '@/features/contest/contexts/ContestContext';
+
+interface Props {
+  classroomId: string;
+  contestId: string;
+  /** 'solve' | 'dashboard' — current sidebar tab */
+  activeTab: 'solve' | 'dashboard';
+  /** 已選的 problem id，用以高亮 */
+  activeProblemId?: string;
+  compact?: boolean;
+}
+
+const statusIcon = (status: 'done' | 'partial' | 'untouched') => {
+  if (status === 'done') return <Checkmark size={16} aria-label="已作答" />;
+  if (status === 'partial') return <IncompleteCancel size={16} aria-label="進行中" />;
+  return <CircleDash size={16} aria-label="未作答" />;
+};
+
+export const SideMenuContestRuntimeSection = ({
+  classroomId,
+  contestId,
+  activeTab,
+  activeProblemId,
+  compact,
+}: Props) => {
+  const navigate = useNavigate();
+  const { contest } = useContest();
+  const dashboardPath = `/classrooms/${classroomId}/contest/${contestId}`;
+  const solvePath = `/classrooms/${classroomId}/contest/${contestId}/solve`;
+
+  const handleTabChange = ({ name }: { name: string | number }) => {
+    if (name === 'dashboard') navigate(dashboardPath);
+    else navigate(solvePath);
+  };
+
+  const problems = contest?.problems ?? [];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+      {!compact && (
+        <ContentSwitcher
+          selectedIndex={activeTab === 'solve' ? 0 : 1}
+          onChange={handleTabChange}
+          size="sm"
+        >
+          <Switch name="solve" text="Solve" />
+          <Switch name="dashboard" text="Dashboard" />
+        </ContentSwitcher>
+      )}
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
+        {problems.length === 0 ? (
+          <p style={{ color: 'var(--cds-text-secondary)', fontSize: '0.75rem' }}>
+            {compact ? '' : '尚無題目'}
+          </p>
+        ) : (
+          problems.map((p) => {
+            const isActive = p.problemId === activeProblemId;
+            const status =
+              p.userStatus === 'completed'
+                ? 'done'
+                : p.userStatus === 'in_progress'
+                  ? 'partial'
+                  : 'untouched';
+            const target = `/classrooms/${classroomId}/contest/${contestId}/solve/${p.problemId}`;
+            return (
+              <button
+                key={p.problemId}
+                type="button"
+                onClick={() => navigate(target)}
+                aria-current={isActive ? 'page' : undefined}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '0.5rem',
+                  padding: compact ? '0.5rem' : '0.5rem 0.75rem',
+                  borderRadius: '0.25rem',
+                  background: isActive ? 'var(--cds-layer-accent)' : 'transparent',
+                  border: 'none',
+                  cursor: 'pointer',
+                  textAlign: 'left',
+                  width: '100%',
+                  color: 'var(--cds-text-primary)',
+                }}
+              >
+                {statusIcon(status)}
+                {!compact && (
+                  <>
+                    <span style={{ flexShrink: 0, fontWeight: 600 }}>{p.label}</span>
+                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      {p.title}
+                    </span>
+                  </>
+                )}
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SideMenuContestRuntimeSection;
+```
+
+> `contest.problems` / `userStatus` 的實際欄位名稱請對照 `core/entities/contest.entity.ts` 的 `ContestProblemSummary`；若 status 欄位不是 `userStatus` 就調整為實際 key，但**不改動 entity 定義**。
+
+- [ ] **Step 2：型別檢查 + Commit**
+
+```bash
+cd frontend && npm run -s typecheck
+git add frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx
+git commit -m "feat(side-menu): contest runtime section with tabs and problem list"
+```
+
+---
+
+### Task 7: `SideMenu` 接上 contest idle / runtime 分支
+
+**Files:**
+- Modify: `frontend/src/features/app/components/SideMenu.tsx`
+
+- [ ] **Step 1：在 SideMenu 內 imports 區塊加入新元件與 hook**
+
+```tsx
+import { useContestRuntimeMode } from '@/features/contest/hooks/useContestRuntimeMode';
+import SideMenuContestIdleSection from './SideMenuContestIdleSection';
+import SideMenuContestRuntimeSection from './SideMenuContestRuntimeSection';
+```
+
+- [ ] **Step 2：在 SideMenu 主函式內加上 contest path 偵測**
+
+於既有取得 `pathname` 之後，新增：
+
+```tsx
+const contestMatch = useMemo(
+  () => pathname.match(/^\/classrooms\/([^/]+)\/contest\/([^/]+)/),
+  [pathname],
+);
+const inAdminPath = /^\/classrooms\/[^/]+\/contest\/[^/]+\/admin/.test(pathname);
+const { isRuntime } = useContestRuntimeMode();
+const inContestIdle = !!contestMatch && !inAdminPath && !isRuntime;
+const inContestRuntime = !!contestMatch && isRuntime;
+const classroomId = contestMatch?.[1] ?? '';
+const contestId = contestMatch?.[2] ?? '';
+const activeProblemId = useMemo(() => {
+  const m = pathname.match(/\/solve\/([^/]+)/);
+  return m?.[1];
+}, [pathname]);
+```
+
+> `useMemo` 已經是 SideMenu 內部使用模式，沿用即可。
+
+- [ ] **Step 3：在 `SideMenu` 既有 render flow 中插入 idle / runtime 分支**
+
+定位 SideMenu 內目前回傳的 nav 區塊（`<div className={styles.nav}>` 等），改為早期返回：
+
+```tsx
+if (inContestRuntime) {
+  return (
+    <SideMenuContestRuntimeSection
+      classroomId={classroomId}
+      contestId={contestId}
+      activeTab="solve"
+      activeProblemId={activeProblemId}
+      compact={compact}
+    />
+  );
+}
+
+if (inContestIdle) {
+  return (
+    <SideMenuContestIdleSection
+      classroomId={classroomId}
+      contestId={contestId}
+      compact={compact}
+    />
+  );
+}
+
+// 既有原始 SideMenu 內容（教室列表、提交、AI 等）
+return ( /* ... */ );
+```
+
+> 確切插入位置：早於既有「角色 / 路徑」分支返回；若 SideMenu 主結構是 `<aside>...</aside>`，可在頂層 `<aside>` 內以條件 children 的方式加分支，避免重複包 `<aside>`。
+
+- [ ] **Step 4：型別檢查 + 視覺驗證**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+dev 啟動，逐一檢查：
+- /dashboard：原 SideMenu（教室、題目、提交...）
+- /classrooms/cid/contest/cid（idle）：sidebar 只有「返回教室 / 競賽主頁」
+- /classrooms/cid/contest/cid/admin：原 admin sidebar 不變
+- /classrooms/cid/contest/cid/solve（runtime）：sidebar 是 ContentSwitcher + 題目列表
+
+- [ ] **Step 5：Commit**
+
+```bash
+git add frontend/src/features/app/components/SideMenu.tsx
+git commit -m "feat(side-menu): switch to contest idle/runtime sections by URL"
+```
+
+---
+
+## Phase 4：路由合併
+
+### Task 8: `routes.tsx` 合併
+
+**Files:**
+- Modify: `frontend/src/features/contest/routes.tsx`
+- Modify: `frontend/src/features/contest/index.ts`（若有 export `classroomContestRuntimeRoutes`）
+
+- [ ] **Step 1：重寫 routes.tsx 的 contest 主路由**
+
+```tsx
+// frontend/src/features/contest/routes.tsx
+import { lazy, Suspense } from 'react';
+import { Route } from 'react-router';
+import ContestWorkspaceLayout from './components/layout/ContestWorkspaceLayout';
+import RuntimeRouteWrapper from './components/layout/RuntimeRouteWrapper';
+import { ContestProvider } from './contexts/ContestContext';
+import ContestDashboardScreen from './screens/ContestDashboardScreen';
+import ContestSolveScreen from './screens/ContestSolveScreen';
+import ContestPracticeScreen from './screens/ContestPracticeScreen';
+
+const AdminDashboardScreen = lazy(() => import('./screens/admin/AdminDashboardScreen'));
+const StudentExamDemoScreen = lazy(() => import('./screens/examDemo/StudentExamDemoScreen'));
+const ExamPrecheckScreen = lazy(() => import('./screens/paperExam/ExamPrecheckScreen'));
+
+/**
+ * Classroom Contest 主路由（dashboard + runtime 共用）。
+ * 在 App.tsx 必須掛在 <MainLayout> 之下。
+ */
+export const classroomContestRoutes = (
+  <Route
+    path="/classrooms/:classroomId/contest/:contestId"
+    element={<ContestWorkspaceLayout />}
+  >
+    <Route index element={<ContestDashboardScreen />} />
+    <Route
+      path="solve"
+      element={
+        <RuntimeRouteWrapper>
+          <ContestSolveScreen />
+        </RuntimeRouteWrapper>
+      }
+    />
+    <Route
+      path="solve/:problemId"
+      element={
+        <RuntimeRouteWrapper>
+          <ContestSolveScreen />
+        </RuntimeRouteWrapper>
+      }
+    />
+  </Route>
+);
+
+/**
+ * Classroom Contest Admin Dashboard — 獨立全頁面
+ */
+export const classroomContestAdminRoute = (
+  <Route
+    path="/classrooms/:classroomId/contest/:contestId/admin"
+    element={<Suspense fallback={null}><AdminDashboardScreen /></Suspense>}
+  />
+);
+
+/**
+ * Classroom Exam Preview — 獨立全頁面
+ */
+export const classroomExamPreviewRoute = (
+  <Route
+    path="/classrooms/:classroomId/contest/:contestId/exam-preview"
+    element={<Suspense fallback={null}><StudentExamDemoScreen /></Suspense>}
+  />
+);
+
+/**
+ * Classroom Practice — 獨立全頁面
+ */
+export const classroomPracticeRoute = (
+  <Route
+    path="/classrooms/:classroomId/contest/:contestId/practice"
+    element={
+      <ContestProvider>
+        <ContestPracticeScreen />
+      </ContestProvider>
+    }
+  />
+);
+
+/**
+ * Classroom Exam Precheck — 獨立全頁面
+ */
+export const classroomExamPrecheckRoute = (
+  <Route
+    path="/classrooms/:classroomId/contest/:contestId/exam-precheck"
+    element={
+      <ContestProvider>
+        <Suspense fallback={null}><ExamPrecheckScreen /></Suspense>
+      </ContestProvider>
+    }
+  />
+);
+```
+
+> **變動重點**：移除 `classroomContestDetailRoutes` 與 `classroomContestRuntimeRoutes`，合併為單一 `classroomContestRoutes`；移除 `ContestLayout` 的 import。
+
+- [ ] **Step 2：同步 `frontend/src/features/contest/index.ts`**
+
+把舊 exports（`classroomContestDetailRoutes`、`classroomContestRuntimeRoutes`）替換為 `classroomContestRoutes`。
+
+```bash
+grep -n "classroomContestDetailRoutes\|classroomContestRuntimeRoutes" frontend/src/features/contest/index.ts
+```
+
+把找到的 export 名稱改為 `classroomContestRoutes`，import 對齊。
+
+- [ ] **Step 3：Commit**
+
+```bash
+git add frontend/src/features/contest/routes.tsx frontend/src/features/contest/index.ts
+git commit -m "refactor(contest): merge runtime+detail routes into one branch"
+```
+
+---
+
+### Task 9: `App.tsx` 把 contest 路由放進 MainLayout
+
+**Files:**
+- Modify: `frontend/src/App.tsx`
+
+- [ ] **Step 1：修改 contest 路由掛載位置**
+
+定位 `frontend/src/App.tsx:148`（既有 `<Route element={<MainLayout />}>` 區塊）與 contest 路由相關片段。把目前分屬 MainLayout 內、外兩處的 contest 路由統一放進 MainLayout 下：
+
+搜尋現有：
+```bash
+grep -n "classroomContestDetailRoutes\|classroomContestRuntimeRoutes\|classroomContestRoutes" frontend/src/App.tsx
+```
+
+把舊的 `{classroomContestDetailRoutes}`（在 MainLayout 內）與 `{classroomContestRuntimeRoutes}`（在 MainLayout 外）替換為**單一引用** `{classroomContestRoutes}`，且**只放在 `<Route element={<MainLayout />}>` 之內**。
+
+對應 imports：
+
+```diff
+- import {
+-   classroomContestDetailRoutes,
+-   classroomContestRuntimeRoutes,
+-   classroomContestAdminRoute,
+-   classroomExamPreviewRoute,
+-   classroomPracticeRoute,
+-   classroomExamPrecheckRoute,
+- } from '@/features/contest';
++ import {
++   classroomContestRoutes,
++   classroomContestAdminRoute,
++   classroomExamPreviewRoute,
++   classroomPracticeRoute,
++   classroomExamPrecheckRoute,
++ } from '@/features/contest';
+```
+
+> 不要碰其他 admin / preview / practice / precheck route 的位置（依然獨立於 MainLayout 之外）。
+
+- [ ] **Step 2：型別檢查 + dev server**
+
+```bash
+cd frontend && npm run -s typecheck && npm run dev
+```
+
+開瀏覽器逐一驗證：
+- /classrooms/cid/contest/cid 渲染正常（與其他 dashboard 同 layout）
+- /classrooms/cid/contest/cid/solve 渲染正常（runtime sidebar + locked navbar）
+- /classrooms/cid/contest/cid/admin 渲染正常（不在 MainLayout 下，自帶 layout）
+- /classrooms/cid/contest/cid/exam-precheck 渲染正常（不在 MainLayout 下）
+
+- [ ] **Step 3：Commit**
+
+```bash
+git add frontend/src/App.tsx
+git commit -m "refactor(app): mount contest routes under MainLayout"
+```
+
+---
+
+## Phase 5：清理
+
+### Task 10: 刪除 `ContestLayout`
+
+**Files:**
+- Delete: `frontend/src/features/contest/components/layout/ContestLayout.tsx`
+- Delete: `frontend/src/features/contest/components/layout/ContestLayout.module.scss`
+
+- [ ] **Step 1：搜尋殘餘 import**
+
+```bash
+grep -rn "ContestLayout\b\|ContestLayout\.module\|from .*ContestLayout" frontend/src --include="*.ts" --include="*.tsx" | grep -v ContestLayoutHeaderSlotContext | grep -v ContestWorkspaceLayout | grep -v node_modules
+```
+
+對每個 hit 檢查並修改/刪除引用。預期殘餘只在已修改的檔案內。
+
+- [ ] **Step 2：刪檔**
+
+```bash
+rm frontend/src/features/contest/components/layout/ContestLayout.tsx
+rm frontend/src/features/contest/components/layout/ContestLayout.module.scss
+```
+
+- [ ] **Step 3：型別檢查 + lint**
+
+```bash
+cd frontend && npm run -s typecheck && npm run -s lint
+```
+Expected：通過。
+
+- [ ] **Step 4：Commit**
+
+```bash
+git add -A frontend/src/features/contest/components/layout/
+git commit -m "chore(contest): remove obsolete ContestLayout"
+```
+
+---
+
+### Task 11: i18n 與 E2E 驗收
+
+**Files:**
+- Modify: `frontend/src/locales/*` 或對應 i18n 檔（依專案結構）
+
+- [ ] **Step 1：i18n 檢查 / 同步**
+
+```bash
+cd frontend && npm run sync:i18n && npm run check:i18n
+```
+Expected：通過；本次未新增字串，預期無變動或僅顯示未使用提示。
+
+- [ ] **Step 2：執行所有單元測試**
+
+```bash
+cd frontend && npm test
+```
+Expected：所有測試通過，特別是 `useContestRuntimeMode.test.ts`。
+
+- [ ] **Step 3：手動 E2E 驗收清單**
+
+依序在瀏覽器逐一驗證：
+
+- [ ] 學生登入 → /dashboard：sidebar 是原本的（教室、題目、提交...），navbar 正常
+- [ ] 點進 /classrooms/cid/contest/cid：sidebar 切為「返回教室 / 競賽主頁」；navbar 仍可互動；右側 chat panel 可開啟
+- [ ] 點 navbar 教室 / contest 麵包屑可切換
+- [ ] 進入 /solve：
+  - sidebar 切為 ContentSwitcher（Solve / Dashboard）+ 題目列表
+  - navbar logo / 麵包屑點擊無反應（pointer-events: none）
+  - navbar 顯示 ExamStatusBadge 與倒數
+  - UserMenu 點開只剩設定 / 登出
+  - 右側 chat panel 不可開啟（FAB / 按鈕 disable）
+- [ ] sidebar 點 Dashboard tab → 切回 contest dashboard URL，sidebar 自動回 idle 模式，右側 chat 可開
+- [ ] sidebar 點 Solve tab 或題目項 → navigate 至 `/solve` 或 `/solve/{id}`
+- [ ] 視覺：navbar / sidebar 與其他 app 頁面（dashboard / classroom）視覺一致（顏色、border、字級、間距）
+- [ ] 行動裝置：sidebar 在 contest idle 與 runtime 模式都可透過 drawer 開啟，內容正確
+- [ ] 競賽結束（手動把 end_time 改為過去）：runtime sidebar 仍能瀏覽歷史；提交按鈕 disable
+
+- [ ] **Step 4：Commit i18n 變更（若有）**
+
+```bash
+git add -A
+git diff --cached --stat
+git commit -m "chore(contest): finalize layout unification verification"
+```
+
+---
+
+## 自我審查
+
+### 1. Spec 覆蓋
+
+- §A 架構：runtime/非 runtime 共用 `ContestWorkspaceLayout` → Task 8
+- §B `RuntimeRouteWrapper` → Task 2
+- §C `SideMenu` 兩個 mode → Task 5、6、7
+- §D `WorkspaceTopNav` runtime 鎖定 + ExamStatus → Task 3
+- §E `UserMenu` settingsOnly → Task 4
+- §F Runtime 偵測 → Task 1
+- §G 路由調整 → Task 8、9
+- 元件結構 / 刪除清單 → Task 10
+- 測試重點 → Task 1（unit）、Task 11（E2E）
+
+### 2. Placeholder 掃描
+
+- Task 7 內提到「依 SideMenu 主結構決定條件 children 包裝方式」—— 是合理的實作彈性註記，不是 TBD
+- Task 6 註記 `userStatus` 欄位需對照 entity —— 這是已知 entity 的屬性查詢，動作明確
+- Task 3 步驟 2 對 `onClick` 包裝邏輯給出完整 helper 函式，無 TBD
+- 無 TBD / TODO / 「實作 later」字樣
+
+### 3. 型別 / 命名一致性
+
+- `useContestRuntimeMode` 回傳 `{ isRuntime: boolean }`，Task 1、3、4、7 一致
+- `RuntimeRouteWrapper` 接受 `{ children }`，Task 2、8 一致
+- `ContestRuntimeProvider` value 形狀 `{ isRuntime: boolean }`，Task 2 內一致
+- `SideMenuContestIdleSection` / `SideMenuContestRuntimeSection` 命名與 file path 在 Task 5、6、7 一致
+- `classroomContestRoutes` 名稱在 Task 8、9、index.ts 一致
+- 路徑 regex `/^\/classrooms\/[^/]+\/contest\/[^/]+\/solve(?:\/|$)/` 在 Task 1 與 Task 7 一致

From d0d14e200fbe416ff77436befb70f8d0c3e73083 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:50:14 +0800
Subject: [PATCH 34/60] refactor(contest): student dashboard inner tabs use
 DashboardTabs primitive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The student dashboard's 規則說明 / 作答紀錄 tab strip was still on raw
Carbon Tabs/TabList/TabPanels. Migrate to DashboardTabs +
DashboardTabBar + DashboardTabPanel so the visual treatment and
mobile stacking match the rest of the dashboard primitives.

Drop the .markdownBlock / .feedbackBlock { padding-left: 0.75rem }
indent on PaperQuestionReportCard. The prompt and the question header
now share the same horizontal axis instead of the prompt being
mysteriously inset.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../exam/PaperQuestionReportCard.module.scss  |   5 -
 .../StudentContestDashboardView.tsx           | 143 +++++++++---------
 2 files changed, 73 insertions(+), 75 deletions(-)

diff --git a/frontend/src/features/contest/components/exam/PaperQuestionReportCard.module.scss b/frontend/src/features/contest/components/exam/PaperQuestionReportCard.module.scss
index 9a6d980b..5633f13c 100644
--- a/frontend/src/features/contest/components/exam/PaperQuestionReportCard.module.scss
+++ b/frontend/src/features/contest/components/exam/PaperQuestionReportCard.module.scss
@@ -37,11 +37,6 @@
   gap: 0.75rem;
 }
 
-.markdownBlock,
-.feedbackBlock {
-  padding-left: 0.75rem;
-}
-
 .feedbackLabel {
   margin-bottom: 0.25rem;
   color: var(--cds-text-secondary);
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
index 5dd1996e..045a341d 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
@@ -9,11 +9,6 @@ import {
   Select,
   SelectItem,
   SkeletonPlaceholder,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
   Tag,
 } from "@carbon/react";
 import {
@@ -63,6 +58,9 @@ import {
   DashboardBlock,
   DashboardContainer,
   DashboardPage,
+  DashboardTabBar,
+  DashboardTabPanel,
+  DashboardTabs,
   KPIBlock,
   MetricBlock,
 } from "@/shared/components/dashboard";
@@ -183,6 +181,7 @@ export default function StudentContestDashboard({
   const { t: tc } = useTranslation("common");
   const { theme } = useTheme();
   const [nowMs, setNowMs] = useState(() => Date.now());
+  const [infoTab, setInfoTab] = useState<"rules" | "records">("rules");
   const [showRegisterModal, setShowRegisterModal] = useState(false);
   const [showEndConfirm, setShowEndConfirm] = useState(false);
   const [showReportModal, setShowReportModal] = useState(false);
@@ -774,72 +773,76 @@ export default function StudentContestDashboard({
           </DashboardBlock>
 
           <DashboardBlock padding="flush">
-            <Tabs>
-              <TabList aria-label="競賽資訊切換">
-                <Tab>規則說明</Tab>
-                <Tab>作答紀錄</Tab>
-              </TabList>
-              <TabPanels>
-                <TabPanel className={styles.tabPanel}>
-                  <div className={styles.tabContent}>
-                    <BlockHeader
-                      titleAs="h3"
-                      title="規則說明"
-                      description={
-                        requiresPassword
-                          ? "此競賽需要密碼。"
-                          : "此競賽不需要密碼。"
-                      }
-                      actions={
-                        contest.cheatDetectionEnabled ? (
-                          <WarningAlt size={20} className={styles.warningIcon} />
-                        ) : (
-                          <Checkmark size={20} className={styles.successIcon} />
-                        )
-                      }
-                    />
-                    {contest.cheatDetectionEnabled ? (
-                      <InlineNotification
-                        kind="warning"
-                        lowContrast
-                        hideCloseButton
-                        title="已啟用監控"
-                        subtitle="進入作答後會啟用全螢幕、分頁切換與裝置監控。"
-                      />
-                    ) : null}
-                    {contest.description ? (
-                      <div className={styles.rulesContent}>
-                        <MarkdownRenderer>{contest.description}</MarkdownRenderer>
-                      </div>
-                    ) : null}
-                    {contest.rules ? (
-                      <div className={styles.rulesContent}>
-                        <MarkdownRenderer>{contest.rules}</MarkdownRenderer>
-                      </div>
-                    ) : (
-                      <p className={styles.emptyText}>沒有額外規則。</p>
-                    )}
-                  </div>
-                </TabPanel>
-                <TabPanel className={styles.tabPanel}>
-                  <div className={styles.tabContent}>
-                    <BlockHeader
-                      titleAs="h3"
-                      title={
-                        phase === "during"
-                          ? "目前作答狀況"
-                          : phase === "after" && contest.resultsPublished
-                            ? "作答紀錄與成績"
-                            : "作答紀錄"
-                      }
+            <DashboardTabs
+              activeId={infoTab}
+              onChange={(id) => setInfoTab(id as "rules" | "records")}
+            >
+              <DashboardTabBar
+                ariaLabel="競賽資訊切換"
+                tabs={[
+                  { id: "rules", label: "規則說明" },
+                  { id: "records", label: "作答紀錄" },
+                ]}
+              />
+              <DashboardTabPanel tabId="rules">
+                <div className={styles.tabContent}>
+                  <BlockHeader
+                    titleAs="h3"
+                    title="規則說明"
+                    description={
+                      requiresPassword
+                        ? "此競賽需要密碼。"
+                        : "此競賽不需要密碼。"
+                    }
+                    actions={
+                      contest.cheatDetectionEnabled ? (
+                        <WarningAlt size={20} className={styles.warningIcon} />
+                      ) : (
+                        <Checkmark size={20} className={styles.successIcon} />
+                      )
+                    }
+                  />
+                  {contest.cheatDetectionEnabled ? (
+                    <InlineNotification
+                      kind="warning"
+                      lowContrast
+                      hideCloseButton
+                      title="已啟用監控"
+                      subtitle="進入作答後會啟用全螢幕、分頁切換與裝置監控。"
                     />
-                    {contest.contestType === "paper_exam"
-                      ? renderPaperRecords()
-                      : renderCodingRecords()}
-                  </div>
-                </TabPanel>
-              </TabPanels>
-            </Tabs>
+                  ) : null}
+                  {contest.description ? (
+                    <div className={styles.rulesContent}>
+                      <MarkdownRenderer>{contest.description}</MarkdownRenderer>
+                    </div>
+                  ) : null}
+                  {contest.rules ? (
+                    <div className={styles.rulesContent}>
+                      <MarkdownRenderer>{contest.rules}</MarkdownRenderer>
+                    </div>
+                  ) : (
+                    <p className={styles.emptyText}>沒有額外規則。</p>
+                  )}
+                </div>
+              </DashboardTabPanel>
+              <DashboardTabPanel tabId="records">
+                <div className={styles.tabContent}>
+                  <BlockHeader
+                    titleAs="h3"
+                    title={
+                      phase === "during"
+                        ? "目前作答狀況"
+                        : phase === "after" && contest.resultsPublished
+                          ? "作答紀錄與成績"
+                          : "作答紀錄"
+                    }
+                  />
+                  {contest.contestType === "paper_exam"
+                    ? renderPaperRecords()
+                    : renderCodingRecords()}
+                </div>
+              </DashboardTabPanel>
+            </DashboardTabs>
           </DashboardBlock>
         </DashboardContainer>
 

From f51e7e3b3b70af95f143f4b1060ec936204a321c Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:53:12 +0800
Subject: [PATCH 35/60] feat(dashboard): add padding prop to DashboardTabBar
 (defaults to inset)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DashboardTabBar now accepts padding="default" | "flush". The default
adds 1rem inline padding so the tab strip stops hugging the block
edge — matching the inline padding of DashboardBlock padding="default"
and giving the tabs visual breathing room. flush remains available
for callers that need the bar to sit exactly at the container edge.

The toolbar drops its own 0 1rem margin in favour of the tab bar's
padding, keeping the spacing model consistent in both desktop and the
mobile column layout.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../dashboard/tabs/DashboardTabBar.module.scss    | 12 ++++++++++--
 .../components/dashboard/tabs/DashboardTabBar.tsx | 15 ++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.module.scss b/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.module.scss
index f4f66332..bff577c0 100644
--- a/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.module.scss
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.module.scss
@@ -6,6 +6,12 @@
   border-bottom: 1px solid var(--cds-border-subtle);
 }
 
+// padding="default" — keep the tab strip from hugging the block edge.
+// Mirrors the inline padding used by DashboardBlock padding="default".
+.padded {
+  padding-inline: 1rem;
+}
+
 .tabs {
   flex: 0 1 auto;
   min-width: 0;
@@ -15,7 +21,6 @@
   display: inline-flex;
   align-items: center;
   flex: 0 1 auto;
-  margin: 0 1rem;
   align-self: center;
   max-width: 24rem;
   width: 100%;
@@ -28,8 +33,11 @@
     gap: 0.5rem;
   }
 
+  .padded {
+    padding-block-end: 0.5rem;
+  }
+
   .toolbar {
-    margin: 0 1rem 0.5rem;
     max-width: none;
   }
 }
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx b/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx
index b22937b7..43b9d952 100644
--- a/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx
@@ -13,20 +13,33 @@ export interface DashboardTabBarProps {
   tabs: TabDef[];
   toolbar?: ReactNode;
   ariaLabel?: string;
+  /**
+   * Inline padding around the tab strip.
+   * - "default" (recommended): adds 1rem inline padding so the tabs
+   *   sit a little inset from the block edge.
+   * - "flush": no padding; for cases where the bar already sits inside
+   *   a container that handles inset itself.
+   */
+  padding?: "default" | "flush";
 }
 
 export function DashboardTabBar({
   tabs,
   toolbar,
   ariaLabel = "dashboard tabs",
+  padding = "default",
 }: DashboardTabBarProps) {
   const { activeId, onChange } = useDashboardTabs();
   const selectedIndex = Math.max(
     0,
     tabs.findIndex((t) => t.id === activeId),
   );
+  const rootClass =
+    padding === "flush"
+      ? styles.root
+      : `${styles.root} ${styles.padded}`;
   return (
-    <div className={styles.root}>
+    <div className={rootClass}>
       <div className={styles.tabs}>
         <Tabs
           selectedIndex={selectedIndex}

From 1e947ea19a4d968df92e46d04ea9b52316fcba15 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:54:30 +0800
Subject: [PATCH 36/60] feat(contest): URL-based useContestRuntimeMode hook

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../hooks/useContestRuntimeMode.test.tsx      | 27 +++++++++++++++++++
 .../contest/hooks/useContestRuntimeMode.ts    | 12 +++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 frontend/src/features/contest/hooks/useContestRuntimeMode.test.tsx
 create mode 100644 frontend/src/features/contest/hooks/useContestRuntimeMode.ts

diff --git a/frontend/src/features/contest/hooks/useContestRuntimeMode.test.tsx b/frontend/src/features/contest/hooks/useContestRuntimeMode.test.tsx
new file mode 100644
index 00000000..f62ae639
--- /dev/null
+++ b/frontend/src/features/contest/hooks/useContestRuntimeMode.test.tsx
@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { useContestRuntimeMode } from './useContestRuntimeMode';
+
+const wrap = (initialPath: string) => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <MemoryRouter initialEntries={[initialPath]}>{children}</MemoryRouter>
+  );
+  return Wrapper;
+};
+
+describe('useContestRuntimeMode', () => {
+  it.each([
+    ['/classrooms/c1/contest/x1/solve', true],
+    ['/classrooms/c1/contest/x1/solve/p1', true],
+    ['/classrooms/c1/contest/x1', false],
+    ['/classrooms/c1/contest/x1/admin', false],
+    ['/dashboard', false],
+    ['/classrooms/c1', false],
+  ])('returns isRuntime=%s for %s', (path, expected) => {
+    const { result } = renderHook(() => useContestRuntimeMode(), {
+      wrapper: wrap(path),
+    });
+    expect(result.current.isRuntime).toBe(expected);
+  });
+});
diff --git a/frontend/src/features/contest/hooks/useContestRuntimeMode.ts b/frontend/src/features/contest/hooks/useContestRuntimeMode.ts
new file mode 100644
index 00000000..7a1ba925
--- /dev/null
+++ b/frontend/src/features/contest/hooks/useContestRuntimeMode.ts
@@ -0,0 +1,12 @@
+import { useLocation } from 'react-router-dom';
+
+const RUNTIME_REGEX = /^\/classrooms\/[^/]+\/contest\/[^/]+\/solve(?:\/|$)/;
+
+export interface ContestRuntimeMode {
+  isRuntime: boolean;
+}
+
+export const useContestRuntimeMode = (): ContestRuntimeMode => {
+  const { pathname } = useLocation();
+  return { isRuntime: RUNTIME_REGEX.test(pathname) };
+};

From 25300edbd25d7b338bb4dd05cbd2ab4f1a87366a Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:55:57 +0800
Subject: [PATCH 37/60] refactor(contest-admin): violation events log tabs use
 DashboardTabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The embedded ContestLogsScreen tab strip (違規事件 / 考試事件 + refresh
button) was the last raw Carbon Tabs site in the admin overview. It
now uses DashboardTabs / DashboardTabBar / DashboardTabPanel with the
refresh button passed through the toolbar slot.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../screens/settings/ContestLogsScreen.tsx    | 60 ++++++++++---------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/frontend/src/features/contest/screens/settings/ContestLogsScreen.tsx b/frontend/src/features/contest/screens/settings/ContestLogsScreen.tsx
index b1840b2a..9689ce9d 100644
--- a/frontend/src/features/contest/screens/settings/ContestLogsScreen.tsx
+++ b/frontend/src/features/contest/screens/settings/ContestLogsScreen.tsx
@@ -33,6 +33,11 @@ import EventIncidentCard from "@/features/contest/components/admin/EventIncident
 import IncidentCard from "@/features/contest/components/admin/IncidentCard";
 import { getIncidentEvidenceFrameCount } from "@/features/contest/components/admin/incidentEvidence";
 import { useContestAnticheatConfig } from "@/features/contest/hooks/useContestAnticheatConfig";
+import {
+  DashboardTabBar,
+  DashboardTabPanel,
+  DashboardTabs,
+} from "@/shared/components/dashboard";
 import styles from "./ContestLogsScreen.module.scss";
 
 const CATEGORY_FILTER_OPTIONS = [
@@ -754,34 +759,35 @@ const ContestLogsScreen: React.FC<ContestLogsScreenProps> = ({
 
         <div className={styles.feedSection}>
           {embedded ? (
-            <Tabs
-              selectedIndex={activeTab}
-              onChange={({ selectedIndex }) => setActiveTab(selectedIndex)}
+            <DashboardTabs
+              activeId={activeTab === 0 ? "violations" : "exam"}
+              onChange={(id) => setActiveTab(id === "violations" ? 0 : 1)}
             >
-              <div className={styles.embeddedFeedHeader}>
-                <TabList aria-label="事件紀錄切換">
-                  <Tab>違規事件</Tab>
-                  <Tab>考試事件</Tab>
-                </TabList>
-                <Button
-                  kind="ghost"
-                  renderIcon={Renew}
-                  onClick={() => {
-                    void handleRefresh();
-                  }}
-                  hasIconOnly
-                  iconDescription={t("action.refresh", "重新整理")}
-                  disabled={
-                    isRefreshing || isRefreshPending || antiCheatConfigLoading
-                  }
-                  size="sm"
-                />
-              </div>
-              <TabPanels>
-                <TabPanel>{feedPanel(0)}</TabPanel>
-                <TabPanel>{feedPanel(1)}</TabPanel>
-              </TabPanels>
-            </Tabs>
+              <DashboardTabBar
+                ariaLabel="事件紀錄切換"
+                tabs={[
+                  { id: "violations", label: "違規事件" },
+                  { id: "exam", label: "考試事件" },
+                ]}
+                toolbar={
+                  <Button
+                    kind="ghost"
+                    renderIcon={Renew}
+                    onClick={() => {
+                      void handleRefresh();
+                    }}
+                    hasIconOnly
+                    iconDescription={t("action.refresh", "重新整理")}
+                    disabled={
+                      isRefreshing || isRefreshPending || antiCheatConfigLoading
+                    }
+                    size="sm"
+                  />
+                }
+              />
+              <DashboardTabPanel tabId="violations">{feedPanel(0)}</DashboardTabPanel>
+              <DashboardTabPanel tabId="exam">{feedPanel(1)}</DashboardTabPanel>
+            </DashboardTabs>
           ) : (
             <>
               <div className={styles.feedHeader}>

From 4223556273869a66c2f71d4aee94526f63e38ebe Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:57:42 +0800
Subject: [PATCH 38/60] chore(contest): export useContestRuntimeMode from hooks
 barrel

---
 frontend/src/features/contest/hooks/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/features/contest/hooks/index.ts b/frontend/src/features/contest/hooks/index.ts
index 064a57b6..a0fb0602 100644
--- a/frontend/src/features/contest/hooks/index.ts
+++ b/frontend/src/features/contest/hooks/index.ts
@@ -2,5 +2,7 @@ export { useClarifications } from "./useClarifications";
 export { useContestExamActions } from "./useContestExamActions";
 export { useContestNavigationGuard } from "./useContestNavigationGuard";
 export { useContestProblemSelection } from "./useContestProblemSelection";
+export { useContestRuntimeMode } from "./useContestRuntimeMode";
+export type { ContestRuntimeMode } from "./useContestRuntimeMode";
 export { useContestSubmissions } from "./useContestSubmissions";
 export { useContestTimers } from "./useContestTimers";

From d1b1376adea15cf891204756b8c69303fa21f637 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:57:52 +0800
Subject: [PATCH 39/60] fix(contest): drop outer dashboard frame on student
 page

The student dashboard's top-level DashboardContainer no longer sets
bordered. Now that the page is rendered fullBleed inside the contest
workspace shell, the outer frame just doubled the chrome and its
bottom edge could be clipped by the scroll container. Internal
dividers between the main column and summary rail are unaffected.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/studentDashboard/StudentContestDashboardView.tsx  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
index 045a341d..612addab 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
@@ -720,7 +720,6 @@ export default function StudentContestDashboard({
       <DashboardContainer
         layout="split"
         proportions="main-aside"
-        bordered
         dividers="auto"
       >
         <DashboardContainer layout="stack" dividers="auto" ariaLabel="競賽主要內容">

From 10a6f3b6fb36b9d703e01f534a8f958cf3fae914 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 15:59:38 +0800
Subject: [PATCH 40/60] feat(contest): RuntimeRouteWrapper +
 ContestRuntimeContext

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/layout/RuntimeRouteWrapper.tsx | 96 +++++++++++++++++++
 .../contexts/ContestRuntimeContext.tsx        | 24 +++++
 2 files changed, 120 insertions(+)
 create mode 100644 frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
 create mode 100644 frontend/src/features/contest/contexts/ContestRuntimeContext.tsx

diff --git a/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx b/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
new file mode 100644
index 00000000..b210a84b
--- /dev/null
+++ b/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import { Modal } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+import { useDisablePanel } from '@/features/app/contexts/useDisablePanel';
+import ExamModeWrapper from '@/features/contest/components/ExamModeWrapper';
+import { ExamModeMonitorModal } from '@/features/contest/components/modals/ExamModeMonitorModal';
+import ExamSubmissionProgressModal from '@/features/contest/components/exam/ExamSubmissionProgressModal';
+import { useContestExamActions } from '@/features/contest/hooks/useContestExamActions';
+import { useContestLayoutState } from '@/features/contest/hooks/useContestLayoutState';
+import { ContestRuntimeProvider } from '@/features/contest/contexts/ContestRuntimeContext';
+
+interface Props {
+  children: ReactNode;
+}
+
+export const RuntimeRouteWrapper = ({ children }: Props) => {
+  const { t } = useTranslation('contest');
+  const { t: tc } = useTranslation('common');
+  const {
+    contestId,
+    contest,
+    hasEnded,
+    refreshContest,
+    navigate,
+  } = useContestLayoutState();
+
+  const [errorOpen, setErrorOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [monitoringOpen, setMonitoringOpen] = useState(false);
+
+  // Closes right-side AI chat panel for the lifetime of this wrapper
+  useDisablePanel('right');
+
+  const showError = (msg: string) => {
+    setErrorMessage(msg);
+    setErrorOpen(true);
+  };
+
+  const examActions = useContestExamActions({
+    contest,
+    contestId,
+    hasEnded,
+    refreshContest,
+    navigate,
+    messages: {
+      joinError: t('error.joinFailed'),
+      startError: t('error.startExamFailed'),
+      endError: t('error.endExamFailed'),
+      exitError: t('error.exitFailed'),
+    },
+    onError: showError,
+  });
+
+  const isContestParticipant = !!contest?.hasJoined;
+  const examModeProps = {
+    contestId: contestId || '',
+    cheatDetectionEnabled: isContestParticipant && !!contest?.cheatDetectionEnabled,
+    isExamMonitored: isContestParticipant && !!contest?.isExamMonitored,
+    requiresFullscreen: isContestParticipant && !!contest?.requiresFullscreen,
+    hasEnded,
+    lockReason: contest?.lockReason,
+    examStatus: contest?.examStatus,
+    onRefresh: refreshContest,
+  };
+
+  return (
+    <ContestRuntimeProvider value={{ isRuntime: true }}>
+      <ExamModeWrapper {...examModeProps}>
+        {children}
+      </ExamModeWrapper>
+
+      <ExamModeMonitorModal
+        open={monitoringOpen}
+        onRequestClose={() => setMonitoringOpen(false)}
+      />
+
+      <ExamSubmissionProgressModal
+        state={examActions.submissionProgress.state}
+        onRequestClose={examActions.submissionProgress.close}
+      />
+
+      <Modal
+        open={errorOpen}
+        modalHeading={tc('message.error')}
+        passiveModal
+        onRequestClose={() => setErrorOpen(false)}
+      >
+        <p>{errorMessage}</p>
+      </Modal>
+    </ContestRuntimeProvider>
+  );
+};
+
+export default RuntimeRouteWrapper;
diff --git a/frontend/src/features/contest/contexts/ContestRuntimeContext.tsx b/frontend/src/features/contest/contexts/ContestRuntimeContext.tsx
new file mode 100644
index 00000000..df0629a1
--- /dev/null
+++ b/frontend/src/features/contest/contexts/ContestRuntimeContext.tsx
@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+import type { ReactNode } from 'react';
+
+interface ContestRuntimeContextValue {
+  isRuntime: boolean;
+}
+
+const ContestRuntimeContext = createContext<ContestRuntimeContextValue>({
+  isRuntime: false,
+});
+
+export const ContestRuntimeProvider = ({
+  value,
+  children,
+}: {
+  value: ContestRuntimeContextValue;
+  children: ReactNode;
+}) => (
+  <ContestRuntimeContext.Provider value={value}>
+    {children}
+  </ContestRuntimeContext.Provider>
+);
+
+export const useContestRuntimeContext = () => useContext(ContestRuntimeContext);

From 771552896e8982b90678f58c91b1fe90e185dbbc Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:03:11 +0800
Subject: [PATCH 41/60] fix(contest-admin): rename participant distribution KPI
 to student progress
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The right-rail "考生分佈總覽" KPI now reads "學生作答進度" with the
completion percent as its highlighted value (e.g. "36%") instead of
the raw headcount. The breakdown formatter under the meter is
trimmed: it just states "已交卷 X / Y 人" without re-stating the
completion rate that the value already shows.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../contest/components/admin/AdminInsightRail.tsx      | 10 +++++++---
 .../admin/AdminOverviewCommandCenter.test.tsx          |  6 +++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/features/contest/components/admin/AdminInsightRail.tsx b/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
index 3abf4d4d..0e077790 100644
--- a/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
+++ b/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
@@ -160,7 +160,7 @@ const DistributionOverview = ({
   const { t } = useTranslation("contest");
   const title = t(
     "adminOverview.widgets.studentDistribution",
-    "考生分佈總覽",
+    "學生作答進度",
   );
   const visibleDistribution = distribution.filter(
     (item) => item.key !== "offline",
@@ -200,7 +200,11 @@ const DistributionOverview = ({
   }
 
   return (
-    <KPIBlock title={title} value={`${total} 人`} ariaLabel={title}>
+    <KPIBlock
+      title={title}
+      value={`${completionPercent}%`}
+      ariaLabel={title}
+    >
       {hasDistributionData ? (
         <div className={styles.distributionChartFrame}>
           <MeterChart
@@ -215,7 +219,7 @@ const DistributionOverview = ({
                 proportional: {
                   unit: "人",
                   breakdownFormatter: () =>
-                    `已交卷 ${submittedCount} / ${total} 人（完成率 ${completionPercent}%）`,
+                    `已交卷 ${submittedCount} / ${total} 人`,
                   totalFormatter: (value) => `考生總數 ${value} 人`,
                 },
               },
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
index 6a13bed3..e1e128b2 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
@@ -276,7 +276,7 @@ describe("AdminOverviewCommandCenter", () => {
       screen.getByRole("progressbar", { name: "時間進度" }),
     ).toBeInTheDocument();
     expect(screen.getAllByText("違規事件").length).toBeGreaterThan(0);
-    const distributionOverview = screen.getByLabelText("考生分佈總覽");
+    const distributionOverview = screen.getByLabelText("學生作答進度");
     expect(distributionOverview).toBeInTheDocument();
     expect(
       within(distributionOverview).getByTestId("proportional-meter-chart"),
@@ -345,7 +345,7 @@ describe("AdminOverviewCommandCenter", () => {
   it("keeps only essential drilldown content in the left overview column", () => {
     renderCommandCenter();
 
-    expect(screen.getByLabelText("考生分佈總覽")).toBeInTheDocument();
+    expect(screen.getByLabelText("學生作答進度")).toBeInTheDocument();
     expect(screen.queryByText("auto_submit")).not.toBeInTheDocument();
     expect(screen.getByText("陳小華")).toBeInTheDocument();
     expect(screen.queryByText("競賽發布")).not.toBeInTheDocument();
@@ -467,7 +467,7 @@ describe("AdminOverviewCommandCenter", () => {
 
     expect(screen.getByLabelText("考生列表載入中")).toBeInTheDocument();
     expect(screen.getByLabelText("批改資料載入中")).toBeInTheDocument();
-    expect(screen.getByLabelText("考生分佈總覽")).toBeInTheDocument();
+    expect(screen.getByLabelText("學生作答進度")).toBeInTheDocument();
   });
 
   it("keeps generic panel entries out of the live dashboard", () => {

From c9495d1bc0b6b17bd09c6e87457b4914a2b50a89 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:04:37 +0800
Subject: [PATCH 42/60] feat(contest): expose openMonitor through
 ContestRuntimeContext

Add openMonitor callback to ContestRuntimeContextValue and wire it to
setMonitoringOpen in RuntimeRouteWrapper so sibling components like
ExamStatusBadge can trigger the monitoring modal via context.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../features/contest/components/layout/RuntimeRouteWrapper.tsx  | 2 +-
 .../src/features/contest/contexts/ContestRuntimeContext.tsx     | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx b/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
index b210a84b..6c85aba6 100644
--- a/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
+++ b/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
@@ -66,7 +66,7 @@ export const RuntimeRouteWrapper = ({ children }: Props) => {
   };
 
   return (
-    <ContestRuntimeProvider value={{ isRuntime: true }}>
+    <ContestRuntimeProvider value={{ isRuntime: true, openMonitor: () => setMonitoringOpen(true) }}>
       <ExamModeWrapper {...examModeProps}>
         {children}
       </ExamModeWrapper>
diff --git a/frontend/src/features/contest/contexts/ContestRuntimeContext.tsx b/frontend/src/features/contest/contexts/ContestRuntimeContext.tsx
index df0629a1..647212be 100644
--- a/frontend/src/features/contest/contexts/ContestRuntimeContext.tsx
+++ b/frontend/src/features/contest/contexts/ContestRuntimeContext.tsx
@@ -3,10 +3,12 @@ import type { ReactNode } from 'react';
 
 interface ContestRuntimeContextValue {
   isRuntime: boolean;
+  openMonitor: () => void;
 }
 
 const ContestRuntimeContext = createContext<ContestRuntimeContextValue>({
   isRuntime: false,
+  openMonitor: () => {},
 });
 
 export const ContestRuntimeProvider = ({

From 2ac78042a76caa08ba8207f1a8d2df32689f0a92 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:07:25 +0800
Subject: [PATCH 43/60] feat(top-nav): runtime lock + ExamStatusBadge in
 workspace top nav

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../workspace/WorkspaceTopNav.module.scss     |  8 ++++
 .../components/workspace/WorkspaceTopNav.tsx  | 37 +++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss b/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss
index 3ab60983..63c9e4ce 100644
--- a/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss
+++ b/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss
@@ -136,3 +136,11 @@
     font-size: 0.875rem;
   }
 }
+
+.runtimeTimer {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-variant-numeric: tabular-nums;
+  margin-right: 0.5rem;
+}
diff --git a/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx b/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx
index f0833715..43f07a24 100644
--- a/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx
+++ b/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx
@@ -9,6 +9,12 @@ import { getClassroomIcon } from "@/features/classroom/constants/classroomIcons"
 import { getClassroomContestAdminPath, getClassroomContestDashboardPath } from "@/features/contest/domain/contestRoutePolicy";
 import { useWorkspace } from "@/features/app/contexts/WorkspaceContext";
 import { UserMenu } from "@/features/app/components/UserMenu";
+import { useContestRuntimeMode } from "@/features/contest/hooks";
+import { useContestRuntimeContext } from "@/features/contest/contexts/ContestRuntimeContext";
+import { useContestLayoutState } from "@/features/contest/hooks/useContestLayoutState";
+import { useContestTimers } from "@/features/contest/hooks/useContestTimers";
+import ExamStatusBadge from "@/features/contest/components/exam/ExamStatusBadge";
+import { TimeDisplay } from "@/shared/components/dashboard";
 import styles from "./WorkspaceTopNav.module.scss";
 
 type MenuKind = "classroom" | "contest" | "contestMode" | null;
@@ -149,6 +155,15 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
     navigate(getClassroomContestAdminPath(classroomId, contestRouteId));
   }, [classroomId, contestRouteId, navigate]);
 
+  const { isRuntime } = useContestRuntimeMode();
+  const { openMonitor } = useContestRuntimeContext();
+  const { contest, contestId, refreshContest } = useContestLayoutState();
+  const { timeLeft, isCountdownToStart, unlockTimeLeft } = useContestTimers({
+    contest,
+    contestId,
+    refreshContest,
+  });
+
   return (
     <header className={styles.root}>
       <div className={styles.left}>
@@ -179,6 +194,7 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
                   aria-haspopup="menu"
                   aria-expanded={openMenu === "classroom"}
                   onClick={() => setOpenMenu((menu) => menu === "classroom" ? null : "classroom")}
+                  disabled={isRuntime}
                 >
                   {createElement(getClassroomIcon(currentClassroom.icon), { size: 18 })}
                   <span>{currentClassroom.name}</span>
@@ -216,6 +232,7 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
                   aria-haspopup="menu"
                   aria-expanded={openMenu === "contest"}
                   onClick={() => setOpenMenu((menu) => menu === "contest" ? null : "contest")}
+                  disabled={isRuntime}
                 >
                   <span>
                     {currentContest?.contestName ??
@@ -250,6 +267,7 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
                       aria-haspopup="menu"
                       aria-expanded={openMenu === "contestMode"}
                       onClick={() => setOpenMenu((menu) => menu === "contestMode" ? null : "contestMode")}
+                      disabled={isRuntime}
                     >
                       <span>{t("workspaceTopNav.adminConsole", "管理後台")}</span>
                       <ChevronDown size={14} />
@@ -289,6 +307,25 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
       </div>
 
       <div className={styles.actions}>
+        {isRuntime && contest && (
+          <>
+            <ExamStatusBadge
+              examStatus={contest.examStatus}
+              cheatDetectionEnabled={contest.cheatDetectionEnabled}
+              timeLeft={timeLeft}
+              unlockTimeLeft={unlockTimeLeft}
+              lockReason={contest.lockReason}
+              autoUnlockAt={contest.autoUnlockAt}
+              onClick={openMonitor}
+            />
+            <div className={styles.runtimeTimer}>
+              <TimeDisplay
+                variant="header"
+                value={isCountdownToStart ? `(待開始) ${timeLeft}` : timeLeft}
+              />
+            </div>
+          </>
+        )}
         <UserMenu />
       </div>
     </header>

From d1530236d9f3c2309a9f55dd6268894653cb0eb5 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:11:22 +0800
Subject: [PATCH 44/60] refactor(top-nav): extract RuntimeNavExtras to avoid
 running contest hooks on every page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../workspace/WorkspaceTopNav.module.scss     |  5 ++
 .../components/workspace/WorkspaceTopNav.tsx  | 64 +++++++++++--------
 2 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss b/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss
index 63c9e4ce..1713380b 100644
--- a/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss
+++ b/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss
@@ -144,3 +144,8 @@
   font-variant-numeric: tabular-nums;
   margin-right: 0.5rem;
 }
+
+.contextLink:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
diff --git a/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx b/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx
index 43f07a24..fced189f 100644
--- a/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx
+++ b/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx
@@ -156,13 +156,6 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
   }, [classroomId, contestRouteId, navigate]);
 
   const { isRuntime } = useContestRuntimeMode();
-  const { openMonitor } = useContestRuntimeContext();
-  const { contest, contestId, refreshContest } = useContestLayoutState();
-  const { timeLeft, isCountdownToStart, unlockTimeLeft } = useContestTimers({
-    contest,
-    contestId,
-    refreshContest,
-  });
 
   return (
     <header className={styles.root}>
@@ -307,27 +300,46 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
       </div>
 
       <div className={styles.actions}>
-        {isRuntime && contest && (
-          <>
-            <ExamStatusBadge
-              examStatus={contest.examStatus}
-              cheatDetectionEnabled={contest.cheatDetectionEnabled}
-              timeLeft={timeLeft}
-              unlockTimeLeft={unlockTimeLeft}
-              lockReason={contest.lockReason}
-              autoUnlockAt={contest.autoUnlockAt}
-              onClick={openMonitor}
-            />
-            <div className={styles.runtimeTimer}>
-              <TimeDisplay
-                variant="header"
-                value={isCountdownToStart ? `(待開始) ${timeLeft}` : timeLeft}
-              />
-            </div>
-          </>
-        )}
+        {isRuntime && <RuntimeNavExtras />}
         <UserMenu />
       </div>
     </header>
   );
 }
+
+function RuntimeNavExtras() {
+  const { t } = useTranslation("common");
+  const { openMonitor } = useContestRuntimeContext();
+  const { contest, contestId, refreshContest } = useContestLayoutState();
+  const { timeLeft, isCountdownToStart, unlockTimeLeft } = useContestTimers({
+    contest,
+    contestId,
+    refreshContest,
+  });
+
+  if (!contest) return null;
+
+  return (
+    <>
+      <ExamStatusBadge
+        examStatus={contest.examStatus}
+        cheatDetectionEnabled={contest.cheatDetectionEnabled}
+        timeLeft={timeLeft}
+        unlockTimeLeft={unlockTimeLeft}
+        lockReason={contest.lockReason}
+        autoUnlockAt={contest.autoUnlockAt}
+        onClick={openMonitor}
+      />
+      <div className={styles.runtimeTimer}>
+        <TimeDisplay
+          variant="header"
+          value={
+            isCountdownToStart
+              ? t("workspaceTopNav.countdownToStart", "(待開始) {{time}}", { time: timeLeft })
+              : timeLeft
+          }
+        />
+      </div>
+    </>
+  );
+}

From 1b8935e071e1f12dd9751721af68bcd63d7e399e Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:12:57 +0800
Subject: [PATCH 45/60] feat(user-menu): auto settingsOnly during contest
 runtime

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/features/app/components/UserMenu.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/app/components/UserMenu.tsx b/frontend/src/features/app/components/UserMenu.tsx
index 859df1a3..c72e1771 100644
--- a/frontend/src/features/app/components/UserMenu.tsx
+++ b/frontend/src/features/app/components/UserMenu.tsx
@@ -23,6 +23,7 @@ import { useTranslation } from "react-i18next";
 import { useUserPreferences } from "@/features/auth/hooks/useUserPreferences";
 import type { ContestDetail } from "@/core/entities/contest.entity";
 import { getClassroomContestDashboardPath } from "@/features/contest/domain/contestRoutePolicy";
+import { useContestRuntimeMode } from "@/features/contest/hooks";
 import { Avatar } from "@/shared/ui/avatar";
 import "./UserMenu.scss";
 
@@ -40,7 +41,7 @@ export const UserMenu: React.FC<UserMenuProps> = ({
   onExpandedChange,
   contestMode = false,
   contest,
-  settingsOnly = false,
+  settingsOnly,
 }) => {
   const navigate = useNavigate();
   const { user, logout } = useAuth();
@@ -50,6 +51,9 @@ export const UserMenu: React.FC<UserMenuProps> = ({
     useUserPreferences();
   const { open: openSettings } = useSettingsDialog();
 
+  const { isRuntime } = useContestRuntimeMode();
+  const effectiveSettingsOnly = settingsOnly ?? isRuntime;
+
   const [isExpandedInternal, setIsExpandedInternal] = useState(false);
   const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
 
@@ -78,7 +82,7 @@ export const UserMenu: React.FC<UserMenuProps> = ({
   }, [isExpanded, onExpandedChange, t]);
 
   const handleToggle = () => {
-    if (settingsOnly) {
+    if (effectiveSettingsOnly) {
       openSettings();
       return;
     }

From 5552bb009105bc0af080fdb32ad727d5ae905611 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:15:59 +0800
Subject: [PATCH 46/60] feat(side-menu): contest idle section with
 back-to-classroom

---
 .../components/SideMenuContestIdleSection.tsx | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 frontend/src/features/app/components/SideMenuContestIdleSection.tsx

diff --git a/frontend/src/features/app/components/SideMenuContestIdleSection.tsx b/frontend/src/features/app/components/SideMenuContestIdleSection.tsx
new file mode 100644
index 00000000..b606ae72
--- /dev/null
+++ b/frontend/src/features/app/components/SideMenuContestIdleSection.tsx
@@ -0,0 +1,51 @@
+import { Link, useLocation } from "react-router-dom";
+import { Home, ArrowLeft } from "@carbon/icons-react";
+
+interface Props {
+  classroomId: string;
+  contestId: string;
+  compact?: boolean;
+}
+
+export const SideMenuContestIdleSection = ({ classroomId, contestId, compact }: Props) => {
+  const { pathname } = useLocation();
+  const dashboardPath = `/classrooms/${classroomId}/contest/${contestId}`;
+  const isDashboard = pathname === dashboardPath;
+  const classroomPath = `/classrooms/${classroomId}`;
+
+  const itemBase: React.CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem",
+    padding: compact ? "0.5rem" : "0.75rem 1rem",
+    borderRadius: "0.25rem",
+    color: "var(--cds-text-primary)",
+    textDecoration: "none",
+  };
+
+  return (
+    <nav
+      aria-label="Contest navigation"
+      style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}
+    >
+      <Link to={classroomPath} style={itemBase}>
+        <ArrowLeft size={20} />
+        {!compact && <span>返回教室</span>}
+      </Link>
+      <Link
+        to={dashboardPath}
+        style={{
+          ...itemBase,
+          background: isDashboard ? "var(--cds-layer-accent)" : "transparent",
+          fontWeight: isDashboard ? 600 : 400,
+        }}
+        aria-current={isDashboard ? "page" : undefined}
+      >
+        <Home size={20} />
+        {!compact && <span>競賽主頁</span>}
+      </Link>
+    </nav>
+  );
+};
+
+export default SideMenuContestIdleSection;

From 9a880231767c1d0678f57f0b852f83dd49b193e7 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:18:07 +0800
Subject: [PATCH 47/60] feat(side-menu): contest runtime section with tabs and
 problem list

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../SideMenuContestRuntimeSection.tsx         | 113 ++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx

diff --git a/frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx b/frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx
new file mode 100644
index 00000000..f4341519
--- /dev/null
+++ b/frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx
@@ -0,0 +1,113 @@
+import { useNavigate } from "react-router-dom";
+import { ContentSwitcher, Switch } from "@carbon/react";
+import { Checkmark, CircleDash, IncompleteCancel } from "@carbon/icons-react";
+import { useContest } from "@/features/contest/contexts/ContestContext";
+import type { ContestProblemSummary } from "@/core/entities/contest.entity";
+import type { SubmissionStatus } from "@/core/entities/submission.entity";
+
+interface Props {
+  classroomId: string;
+  contestId: string;
+  /** 'solve' | 'dashboard' — current sidebar tab */
+  activeTab: "solve" | "dashboard";
+  /** 已選的 problemId，用以高亮 */
+  activeProblemId?: string;
+  compact?: boolean;
+}
+
+type ProblemStatusKind = "done" | "partial" | "untouched";
+
+const mapStatusKind = (status: SubmissionStatus | undefined): ProblemStatusKind => {
+  if (status === "AC" || status === "passed") return "done";
+  if (status === undefined) return "untouched";
+  return "partial";
+};
+
+const renderStatusIcon = (kind: ProblemStatusKind) => {
+  if (kind === "done") return <Checkmark size={16} aria-label="已完成" />;
+  if (kind === "partial") return <IncompleteCancel size={16} aria-label="進行中" />;
+  return <CircleDash size={16} aria-label="未作答" />;
+};
+
+export const SideMenuContestRuntimeSection = ({
+  classroomId,
+  contestId,
+  activeTab,
+  activeProblemId,
+  compact,
+}: Props) => {
+  const navigate = useNavigate();
+  const { contest } = useContest();
+
+  const dashboardPath = `/classrooms/${classroomId}/contest/${contestId}`;
+  const solvePath = `/classrooms/${classroomId}/contest/${contestId}/solve`;
+
+  const handleTabChange = ({ name }: { name?: string | number }) => {
+    if (name === "dashboard") navigate(dashboardPath);
+    else navigate(solvePath);
+  };
+
+  const problems: ContestProblemSummary[] = contest?.problems ?? [];
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+      {!compact && (
+        <ContentSwitcher
+          selectedIndex={activeTab === "solve" ? 0 : 1}
+          onChange={handleTabChange}
+          size="sm"
+        >
+          <Switch name="solve" text="Solve" />
+          <Switch name="dashboard" text="Dashboard" />
+        </ContentSwitcher>
+      )}
+
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+        {problems.length === 0 ? (
+          <p style={{ color: "var(--cds-text-secondary)", fontSize: "0.75rem" }}>
+            {compact ? "" : "尚無題目"}
+          </p>
+        ) : (
+          problems.map((p) => {
+            const isActive = p.problemId === activeProblemId;
+            const kind = mapStatusKind(p.userStatus);
+            const target = `${solvePath}/${p.problemId}`;
+            return (
+              <button
+                key={p.problemId}
+                type="button"
+                onClick={() => navigate(target)}
+                aria-current={isActive ? "page" : undefined}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "0.5rem",
+                  padding: compact ? "0.5rem" : "0.5rem 0.75rem",
+                  borderRadius: "0.25rem",
+                  background: isActive ? "var(--cds-layer-accent)" : "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                  textAlign: "left",
+                  width: "100%",
+                  color: "var(--cds-text-primary)",
+                }}
+              >
+                {renderStatusIcon(kind)}
+                {!compact && (
+                  <>
+                    <span style={{ flexShrink: 0, fontWeight: 600 }}>{p.label}</span>
+                    <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                      {p.title}
+                    </span>
+                  </>
+                )}
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SideMenuContestRuntimeSection;

From 287e7f96b59d83fdf039b830c34d9a07f6f74e7f Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:22:49 +0800
Subject: [PATCH 48/60] feat(side-menu): switch to contest idle/runtime
 sections by URL

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/features/app/components/SideMenu.tsx  | 464 ++++++++++--------
 1 file changed, 250 insertions(+), 214 deletions(-)

diff --git a/frontend/src/features/app/components/SideMenu.tsx b/frontend/src/features/app/components/SideMenu.tsx
index 414653a3..3fc7580d 100644
--- a/frontend/src/features/app/components/SideMenu.tsx
+++ b/frontend/src/features/app/components/SideMenu.tsx
@@ -30,9 +30,12 @@ import { useOptionalChatbotContext } from "@/features/chatbot/contexts/ChatbotPr
 import { chatbotRepository } from "@/infrastructure/api/repositories";
 import { ChatHistoryPanel } from "@/features/chatbot/components/chat-ui/ChatHistoryPanel";
 import { getClassroomContestDashboardPath } from "@/features/contest/domain/contestRoutePolicy";
+import { useContestRuntimeMode } from "@/features/contest/hooks";
 import { getContestTypeModule } from "@/features/contest/modules/registry";
 import type { AdminPanelId } from "@/features/contest/modules/types";
 import type { ClassroomAdminPanelId } from "@/features/classroom/screens/ClassroomAdminLayout";
+import SideMenuContestIdleSection from "./SideMenuContestIdleSection";
+import SideMenuContestRuntimeSection from "./SideMenuContestRuntimeSection";
 import "./SideMenu.scss";
 
 type ContestPanelNavItem = {
@@ -105,6 +108,21 @@ export const SideMenu: React.FC<SideMenuProps> = ({
     return { classroomId: match[1], contestId: match[2] };
   }, [location.pathname]);
 
+  const contestMatch = useMemo(() => {
+    const m = location.pathname.match(/^\/classrooms\/([^/]+)\/contest\/([^/]+)/);
+    return m ? { classroomId: m[1], contestId: m[2] } : null;
+  }, [location.pathname]);
+
+  const { isRuntime } = useContestRuntimeMode();
+
+  const inContestIdle = !!contestMatch && !contestAdminContext && !isRuntime;
+  const inContestRuntime = !!contestMatch && isRuntime;
+
+  const activeProblemId = useMemo(() => {
+    const m = location.pathname.match(/\/solve\/([^/]+)/);
+    return m?.[1];
+  }, [location.pathname]);
+
   // Route-aware: show classroom workspace panel when on a classroom route
   const isOnClassroomRoute = Boolean(classroomId) && !location.pathname.startsWith("/classrooms/join");
   const isChatRoute = location.pathname === "/chat" || location.pathname.startsWith("/chat/");
@@ -319,239 +337,257 @@ export const SideMenu: React.FC<SideMenuProps> = ({
         ].filter(Boolean).join(" ")}
         aria-label={t("header.sideNav", "Side navigation")}
       >
-        {showContestAdminMiniNav && (
-          <div className="side-menu__section">
-            {contestPanelNavItems.map(({ panel, label, Icon }) => (
-              <button
-                key={panel}
-                type="button"
-                title={label}
-                aria-label={label}
-                className={`side-menu__link${contestActivePanel === panel ? " side-menu__link--active" : ""}`}
-                onClick={() => goToContestPanel(panel)}
-              >
-                <Icon size={16} />
-                <span>{label}</span>
-              </button>
-            ))}
-          </div>
-        )}
-
-        {!showContestAdminMiniNav && (
-          isChatRoute && isTeacherOrAdmin ? (
-            <>
+        {inContestRuntime && contestMatch ? (
+          <SideMenuContestRuntimeSection
+            classroomId={contestMatch.classroomId}
+            contestId={contestMatch.contestId}
+            activeTab="solve"
+            activeProblemId={activeProblemId}
+            compact={compact}
+          />
+        ) : inContestIdle && contestMatch ? (
+          <SideMenuContestIdleSection
+            classroomId={contestMatch.classroomId}
+            contestId={contestMatch.contestId}
+            compact={compact}
+          />
+        ) : (
+          <>
+            {showContestAdminMiniNav && (
               <div className="side-menu__section">
-                <button
-                  type="button"
-                  title={homeLabel}
-                  aria-label={homeLabel}
-                  className={`side-menu__link${isActive("/dashboard") ? " side-menu__link--active" : ""}`}
-                  onClick={() => go("/dashboard")}
-                >
-                  <Home size={16} />
-                  <span>{homeLabel}</span>
-                </button>
-                <button
-                  type="button"
-                  title={t("nav.chat", "Chat")}
-                  aria-label={t("nav.chat", "Chat")}
-                  className="side-menu__link side-menu__link--active"
-                  onClick={() => go("/chat")}
-                >
-                  <ChatIcon size={16} />
-                  <span>{t("nav.chat", "Chat")}</span>
-                </button>
-              </div>
-              <div className="side-menu__chat-panel">
-                <ChatHistoryPanel
-                  sessions={sessions}
-                  currentSessionId={currentSessionId}
-                  onSelectSession={handleSelectSession}
-                  onDeleteSession={handleDeleteSession}
-                  onRenameSession={handleRenameSession}
-                  showNewChatButton
-                  onNewChat={handleNewChat}
-                />
-              </div>
-            </>
-          ) : isOnClassroomRoute ? (
-            /* Inside a classroom: global links + panel sub-nav */
-            <>
-              <div className="side-menu__section">
-                <button
-                  type="button"
-                  title={homeLabel}
-                  aria-label={homeLabel}
-                  className={`side-menu__link${isActive("/dashboard") ? " side-menu__link--active" : ""}`}
-                  onClick={() => go("/dashboard")}
-                >
-                  <Home size={16} />
-                  <span>{homeLabel}</span>
-                </button>
-                {isTeacherOrAdmin && (
-                  <button
-                    type="button"
-                    title={t("nav.chat", "Chat")}
-                    aria-label={t("nav.chat", "Chat")}
-                    className={`side-menu__link${isActive("/chat") ? " side-menu__link--active" : ""}`}
-                    onClick={() => go("/chat")}
-                  >
-                    <ChatIcon size={16} />
-                    <span>{t("nav.chat", "Chat")}</span>
-                  </button>
-                )}
-                {isTeacherOrAdmin && (
+                {contestPanelNavItems.map(({ panel, label, Icon }) => (
                   <button
+                    key={panel}
                     type="button"
-                    title={t("nav.marketplace", "Marketplace")}
-                    aria-label={t("nav.marketplace", "Marketplace")}
-                    className={`side-menu__link${isActive("/marketplace") ? " side-menu__link--active" : ""}`}
-                    onClick={() => go("/marketplace")}
+                    title={label}
+                    aria-label={label}
+                    className={`side-menu__link${contestActivePanel === panel ? " side-menu__link--active" : ""}`}
+                    onClick={() => goToContestPanel(panel)}
                   >
-                    <Globe size={16} />
-                    <span>{t("nav.marketplace", "Marketplace")}</span>
+                    <Icon size={16} />
+                    <span>{label}</span>
                   </button>
-                )}
+                ))}
               </div>
-              <div className="side-menu__divider" />
-              <div className="side-menu__section">
-                {contestAdminContext ? (
-                  contestPanelNavItems.map(({ panel, label, Icon }) => (
+            )}
+
+            {!showContestAdminMiniNav && (
+              isChatRoute && isTeacherOrAdmin ? (
+                <>
+                  <div className="side-menu__section">
                     <button
-                      key={panel}
                       type="button"
-                      title={label}
-                      aria-label={label}
-                      className={`side-menu__link${contestActivePanel === panel ? " side-menu__link--active" : ""}`}
-                      onClick={() => goToContestPanel(panel)}
+                      title={homeLabel}
+                      aria-label={homeLabel}
+                      className={`side-menu__link${isActive("/dashboard") ? " side-menu__link--active" : ""}`}
+                      onClick={() => go("/dashboard")}
                     >
-                      <Icon size={16} />
-                      <span>{label}</span>
+                      <Home size={16} />
+                      <span>{homeLabel}</span>
                     </button>
-                  ))
-                ) : (
-                  ([
-                    { panel: "overview", label: tClassroom("sideMenu.overview", "概要"), Icon: Dashboard },
-                    { panel: "announcements", label: tClassroom("sideMenu.announcements", "教室公告"), Icon: Bullhorn },
-                    { panel: "contests", label: tClassroom("sideMenu.contests", "競賽列表"), Icon: Trophy },
-                    { panel: "members", label: tClassroom("sideMenu.members", "教室成員"), Icon: UserMultiple },
-                    ...(canOpenClassroomSettings
-                      ? ([
-                          {
-                            panel: "settings" as const,
-                            label: tClassroom("sideMenu.settings", "教室設定"),
-                            Icon: Settings,
-                          },
-                        ] as const)
-                      : []),
-                  ] as { panel: ClassroomAdminPanelId; label: string; Icon: ComponentType<{ size?: number }> }[]).map(({ panel, label, Icon }) => (
                     <button
-                      key={panel}
                       type="button"
-                      title={label}
-                      aria-label={label}
-                      className={`side-menu__link${classroomActivePanel === panel ? " side-menu__link--active" : ""}`}
-                      onClick={() => goToPanel(panel)}
+                      title={t("nav.chat", "Chat")}
+                      aria-label={t("nav.chat", "Chat")}
+                      className="side-menu__link side-menu__link--active"
+                      onClick={() => go("/chat")}
                     >
-                      <Icon size={16} />
-                      <span>{label}</span>
+                      <ChatIcon size={16} />
+                      <span>{t("nav.chat", "Chat")}</span>
                     </button>
-                  ))
-                )}
-              </div>
-            </>
-          ) : (
-            /* Default classrooms list */
-            <>
-              <div className="side-menu__section">
-                <button
-                  type="button"
-                  title={homeLabel}
-                  aria-label={homeLabel}
-                  className={`side-menu__link${isActive("/dashboard") ? " side-menu__link--active" : ""}`}
-                  onClick={() => go("/dashboard")}
-                >
-                  <Home size={16} />
-                  <span>{homeLabel}</span>
-                </button>
-                {isTeacherOrAdmin && (
-                  <button
-                    type="button"
-                    title={t("nav.chat", "Chat")}
-                    aria-label={t("nav.chat", "Chat")}
-                    className={`side-menu__link${isActive("/chat") ? " side-menu__link--active" : ""}`}
-                    onClick={() => go("/chat")}
-                  >
-                    <ChatIcon size={16} />
-                    <span>{t("nav.chat", "Chat")}</span>
-                  </button>
-                )}
-                {isTeacherOrAdmin && (
-                  <button
-                    type="button"
-                    title={t("nav.marketplace", "Marketplace")}
-                    aria-label={t("nav.marketplace", "Marketplace")}
-                    className={`side-menu__link${isActive("/marketplace") ? " side-menu__link--active" : ""}`}
-                    onClick={() => go("/marketplace")}
-                  >
-                    <Globe size={16} />
-                    <span>{t("nav.marketplace", "Marketplace")}</span>
-                  </button>
-                )}
-              </div>
-              {classrooms.length > 0 && (
+                  </div>
+                  <div className="side-menu__chat-panel">
+                    <ChatHistoryPanel
+                      sessions={sessions}
+                      currentSessionId={currentSessionId}
+                      onSelectSession={handleSelectSession}
+                      onDeleteSession={handleDeleteSession}
+                      onRenameSession={handleRenameSession}
+                      showNewChatButton
+                      onNewChat={handleNewChat}
+                    />
+                  </div>
+                </>
+              ) : isOnClassroomRoute ? (
+                /* Inside a classroom: global links + panel sub-nav */
                 <>
+                  <div className="side-menu__section">
+                    <button
+                      type="button"
+                      title={homeLabel}
+                      aria-label={homeLabel}
+                      className={`side-menu__link${isActive("/dashboard") ? " side-menu__link--active" : ""}`}
+                      onClick={() => go("/dashboard")}
+                    >
+                      <Home size={16} />
+                      <span>{homeLabel}</span>
+                    </button>
+                    {isTeacherOrAdmin && (
+                      <button
+                        type="button"
+                        title={t("nav.chat", "Chat")}
+                        aria-label={t("nav.chat", "Chat")}
+                        className={`side-menu__link${isActive("/chat") ? " side-menu__link--active" : ""}`}
+                        onClick={() => go("/chat")}
+                      >
+                        <ChatIcon size={16} />
+                        <span>{t("nav.chat", "Chat")}</span>
+                      </button>
+                    )}
+                    {isTeacherOrAdmin && (
+                      <button
+                        type="button"
+                        title={t("nav.marketplace", "Marketplace")}
+                        aria-label={t("nav.marketplace", "Marketplace")}
+                        className={`side-menu__link${isActive("/marketplace") ? " side-menu__link--active" : ""}`}
+                        onClick={() => go("/marketplace")}
+                      >
+                        <Globe size={16} />
+                        <span>{t("nav.marketplace", "Marketplace")}</span>
+                      </button>
+                    )}
+                  </div>
                   <div className="side-menu__divider" />
                   <div className="side-menu__section">
-                    <div className="side-menu__section-header">
-                      <span>{t("nav.classrooms")}</span>
-                    </div>
-                    <div className="side-menu__classroom-list">
-                      {classrooms.map((c) => {
-                        const isCurrent = c.id === classroomId;
-                        const Icon = getClassroomIcon(c.icon);
-                        const avatarInitial = getClassroomAvatarInitial(c.name);
-                        return (
-                          <button
-                            key={c.id}
-                            type="button"
-                            title={c.name}
-                            aria-label={c.name}
-                            className={`side-menu__classroom${isCurrent ? " side-menu__classroom--active" : ""}`}
-                            onClick={() => go(`/classrooms/${c.id}`)}
-                          >
-                            {compact ? (
-                              <div className="side-menu__classroom-avatar" aria-hidden="true">
-                                {avatarInitial}
-                              </div>
-                            ) : (
-                              <Icon size={16} />
-                            )}
-                            <span className="side-menu__classroom-name">{c.name}</span>
-                            {isCurrent && <Checkmark size={16} className="side-menu__classroom-check" />}
-                          </button>
-                        );
-                      })}
-                    </div>
+                    {contestAdminContext ? (
+                      contestPanelNavItems.map(({ panel, label, Icon }) => (
+                        <button
+                          key={panel}
+                          type="button"
+                          title={label}
+                          aria-label={label}
+                          className={`side-menu__link${contestActivePanel === panel ? " side-menu__link--active" : ""}`}
+                          onClick={() => goToContestPanel(panel)}
+                        >
+                          <Icon size={16} />
+                          <span>{label}</span>
+                        </button>
+                      ))
+                    ) : (
+                      ([
+                        { panel: "overview", label: tClassroom("sideMenu.overview", "概要"), Icon: Dashboard },
+                        { panel: "announcements", label: tClassroom("sideMenu.announcements", "教室公告"), Icon: Bullhorn },
+                        { panel: "contests", label: tClassroom("sideMenu.contests", "競賽列表"), Icon: Trophy },
+                        { panel: "members", label: tClassroom("sideMenu.members", "教室成員"), Icon: UserMultiple },
+                        ...(canOpenClassroomSettings
+                          ? ([
+                              {
+                                panel: "settings" as const,
+                                label: tClassroom("sideMenu.settings", "教室設定"),
+                                Icon: Settings,
+                              },
+                            ] as const)
+                          : []),
+                      ] as { panel: ClassroomAdminPanelId; label: string; Icon: ComponentType<{ size?: number }> }[]).map(({ panel, label, Icon }) => (
+                        <button
+                          key={panel}
+                          type="button"
+                          title={label}
+                          aria-label={label}
+                          className={`side-menu__link${classroomActivePanel === panel ? " side-menu__link--active" : ""}`}
+                          onClick={() => goToPanel(panel)}
+                        >
+                          <Icon size={16} />
+                          <span>{label}</span>
+                        </button>
+                      ))
+                    )}
                   </div>
                 </>
-              )}
-            </>
-          )
-        )}
-        {contestAdminContext && (
-          <div className="side-menu__bottom">
-            <button
-              type="button"
-              title={contestHomeLabel}
-              aria-label={contestHomeLabel}
-              className="side-menu__link"
-              onClick={goToContestHome}
-            >
-              <Education size={16} />
-              <span>{contestHomeLabel}</span>
-            </button>
-          </div>
+              ) : (
+                /* Default classrooms list */
+                <>
+                  <div className="side-menu__section">
+                    <button
+                      type="button"
+                      title={homeLabel}
+                      aria-label={homeLabel}
+                      className={`side-menu__link${isActive("/dashboard") ? " side-menu__link--active" : ""}`}
+                      onClick={() => go("/dashboard")}
+                    >
+                      <Home size={16} />
+                      <span>{homeLabel}</span>
+                    </button>
+                    {isTeacherOrAdmin && (
+                      <button
+                        type="button"
+                        title={t("nav.chat", "Chat")}
+                        aria-label={t("nav.chat", "Chat")}
+                        className={`side-menu__link${isActive("/chat") ? " side-menu__link--active" : ""}`}
+                        onClick={() => go("/chat")}
+                      >
+                        <ChatIcon size={16} />
+                        <span>{t("nav.chat", "Chat")}</span>
+                      </button>
+                    )}
+                    {isTeacherOrAdmin && (
+                      <button
+                        type="button"
+                        title={t("nav.marketplace", "Marketplace")}
+                        aria-label={t("nav.marketplace", "Marketplace")}
+                        className={`side-menu__link${isActive("/marketplace") ? " side-menu__link--active" : ""}`}
+                        onClick={() => go("/marketplace")}
+                      >
+                        <Globe size={16} />
+                        <span>{t("nav.marketplace", "Marketplace")}</span>
+                      </button>
+                    )}
+                  </div>
+                  {classrooms.length > 0 && (
+                    <>
+                      <div className="side-menu__divider" />
+                      <div className="side-menu__section">
+                        <div className="side-menu__section-header">
+                          <span>{t("nav.classrooms")}</span>
+                        </div>
+                        <div className="side-menu__classroom-list">
+                          {classrooms.map((c) => {
+                            const isCurrent = c.id === classroomId;
+                            const Icon = getClassroomIcon(c.icon);
+                            const avatarInitial = getClassroomAvatarInitial(c.name);
+                            return (
+                              <button
+                                key={c.id}
+                                type="button"
+                                title={c.name}
+                                aria-label={c.name}
+                                className={`side-menu__classroom${isCurrent ? " side-menu__classroom--active" : ""}`}
+                                onClick={() => go(`/classrooms/${c.id}`)}
+                              >
+                                {compact ? (
+                                  <div className="side-menu__classroom-avatar" aria-hidden="true">
+                                    {avatarInitial}
+                                  </div>
+                                ) : (
+                                  <Icon size={16} />
+                                )}
+                                <span className="side-menu__classroom-name">{c.name}</span>
+                                {isCurrent && <Checkmark size={16} className="side-menu__classroom-check" />}
+                              </button>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </>
+              )
+            )}
+            {contestAdminContext && (
+              <div className="side-menu__bottom">
+                <button
+                  type="button"
+                  title={contestHomeLabel}
+                  aria-label={contestHomeLabel}
+                  className="side-menu__link"
+                  onClick={goToContestHome}
+                >
+                  <Education size={16} />
+                  <span>{contestHomeLabel}</span>
+                </button>
+              </div>
+            )}
+          </>
         )}
       </nav>
     </>

From d06776ea473f17fa4c14f174ea8ed8539662d684 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:28:02 +0800
Subject: [PATCH 49/60] refactor(side-menu): inject problems via prop to avoid
 cross-tree ContestProvider dependency

SideMenuContestRuntimeSection no longer calls useContest() (which throws
outside ContestProvider). SideMenu now fetches contest data for all
contest URLs (not just admin) via contestIdToFetch, and passes
problems down as a prop.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/features/app/components/SideMenu.tsx  | 23 +++++++++++--------
 .../SideMenuContestRuntimeSection.tsx         |  6 ++---
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/src/features/app/components/SideMenu.tsx b/frontend/src/features/app/components/SideMenu.tsx
index 3fc7580d..31d7a366 100644
--- a/frontend/src/features/app/components/SideMenu.tsx
+++ b/frontend/src/features/app/components/SideMenu.tsx
@@ -90,7 +90,7 @@ export const SideMenu: React.FC<SideMenuProps> = ({
 
   const [classrooms, setClassrooms] = useState<Classroom[]>([]);
   const [fetched, setFetched] = useState(false);
-  const [contestForAdminNav, setContestForAdminNav] = useState<ContestDetail | null>(null);
+  const [contestForNav, setContestForNav] = useState<ContestDetail | null>(null);
   const [contestFetched, setContestFetched] = useState(false);
   const { sessions, refreshSessions } = useChatSessionContext();
   const chatbot = useOptionalChatbotContext();
@@ -113,6 +113,8 @@ export const SideMenu: React.FC<SideMenuProps> = ({
     return m ? { classroomId: m[1], contestId: m[2] } : null;
   }, [location.pathname]);
 
+  const contestIdToFetch = contestAdminContext?.contestId ?? contestMatch?.contestId ?? null;
+
   const { isRuntime } = useContestRuntimeMode();
 
   const inContestIdle = !!contestMatch && !contestAdminContext && !isRuntime;
@@ -157,18 +159,18 @@ export const SideMenu: React.FC<SideMenuProps> = ({
   }, [isPanelMode, isOpen, isChatRoute, isTeacherOrAdmin, refreshSessions]);
 
   useEffect(() => {
-    setContestForAdminNav(null);
+    setContestForNav(null);
     setContestFetched(false);
-  }, [contestAdminContext?.contestId]);
+  }, [contestIdToFetch]);
 
   useEffect(() => {
-    if (!contestAdminContext?.contestId || contestFetched) return;
+    if (!contestIdToFetch || contestFetched) return;
     let active = true;
     const loadContest = async () => {
       try {
-        const contest = await getContest(contestAdminContext.contestId);
+        const contest = await getContest(contestIdToFetch);
         if (!active) return;
-        setContestForAdminNav(contest ?? null);
+        setContestForNav(contest ?? null);
       } finally {
         if (active) {
           setContestFetched(true);
@@ -179,7 +181,7 @@ export const SideMenu: React.FC<SideMenuProps> = ({
     return () => {
       active = false;
     };
-  }, [contestAdminContext?.contestId, contestFetched]);
+  }, [contestIdToFetch, contestFetched]);
 
   useEffect(() => {
     if (isPanelMode || !isOpen) return;
@@ -286,10 +288,10 @@ export const SideMenu: React.FC<SideMenuProps> = ({
 
   const contestPanelNavItems = useMemo<ContestPanelNavItem[]>(() => {
     if (!contestAdminContext) return [];
-    const module = getContestTypeModule(contestForAdminNav?.contestType);
+    const module = getContestTypeModule(contestForNav?.contestType);
     const isExamMode = module.admin.editorKind === "paper_exam";
     const panels = Array.from(new Set<AdminPanelId>([
-      ...module.admin.getAvailablePanels(contestForAdminNav),
+      ...module.admin.getAvailablePanels(contestForNav),
       "settings",
     ]));
     return panels.flatMap((panel) => {
@@ -302,7 +304,7 @@ export const SideMenu: React.FC<SideMenuProps> = ({
         Icon: meta.Icon,
       }];
     });
-  }, [contestAdminContext, contestForAdminNav, tContest]);
+  }, [contestAdminContext, contestForNav, tContest]);
 
   const goToPanel = useCallback((panel: string) => {
     navigate(`/classrooms/${classroomId}?panel=${panel}`);
@@ -344,6 +346,7 @@ export const SideMenu: React.FC<SideMenuProps> = ({
             activeTab="solve"
             activeProblemId={activeProblemId}
             compact={compact}
+            problems={contestForNav?.problems ?? []}
           />
         ) : inContestIdle && contestMatch ? (
           <SideMenuContestIdleSection
diff --git a/frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx b/frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx
index f4341519..be576221 100644
--- a/frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx
+++ b/frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx
@@ -1,7 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import { ContentSwitcher, Switch } from "@carbon/react";
 import { Checkmark, CircleDash, IncompleteCancel } from "@carbon/icons-react";
-import { useContest } from "@/features/contest/contexts/ContestContext";
 import type { ContestProblemSummary } from "@/core/entities/contest.entity";
 import type { SubmissionStatus } from "@/core/entities/submission.entity";
 
@@ -13,6 +12,7 @@ interface Props {
   /** 已選的 problemId，用以高亮 */
   activeProblemId?: string;
   compact?: boolean;
+  problems: ContestProblemSummary[];
 }
 
 type ProblemStatusKind = "done" | "partial" | "untouched";
@@ -35,9 +35,9 @@ export const SideMenuContestRuntimeSection = ({
   activeTab,
   activeProblemId,
   compact,
+  problems,
 }: Props) => {
   const navigate = useNavigate();
-  const { contest } = useContest();
 
   const dashboardPath = `/classrooms/${classroomId}/contest/${contestId}`;
   const solvePath = `/classrooms/${classroomId}/contest/${contestId}/solve`;
@@ -47,8 +47,6 @@ export const SideMenuContestRuntimeSection = ({
     else navigate(solvePath);
   };
 
-  const problems: ContestProblemSummary[] = contest?.problems ?? [];
-
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
       {!compact && (

From 9b0e9bdbf3f1349153befcc0affa62a621b3229c Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:29:26 +0800
Subject: [PATCH 50/60] refactor(contest): merge runtime+detail routes into one
 branch

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/features/contest/index.ts   |  3 +-
 frontend/src/features/contest/routes.tsx | 35 +++++++++++++++---------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/frontend/src/features/contest/index.ts b/frontend/src/features/contest/index.ts
index 8938547b..1b6ff50b 100644
--- a/frontend/src/features/contest/index.ts
+++ b/frontend/src/features/contest/index.ts
@@ -4,8 +4,7 @@
 // (e.g., "@/features/contest/contexts") instead of this barrel.
 
 export {
-  classroomContestDetailRoutes,
-  classroomContestRuntimeRoutes,
+  classroomContestRoutes,
   classroomContestAdminRoute,
   classroomExamPreviewRoute,
   classroomExamPrecheckRoute,
diff --git a/frontend/src/features/contest/routes.tsx b/frontend/src/features/contest/routes.tsx
index 381c1300..a41a5293 100644
--- a/frontend/src/features/contest/routes.tsx
+++ b/frontend/src/features/contest/routes.tsx
@@ -1,7 +1,7 @@
 import { lazy, Suspense } from "react";
 import { Route } from "react-router";
-import ContestLayout from "./components/layout/ContestLayout";
 import ContestWorkspaceLayout from "./components/layout/ContestWorkspaceLayout";
+import RuntimeRouteWrapper from "./components/layout/RuntimeRouteWrapper";
 import { ContestProvider } from "./contexts/ContestContext";
 import ContestDashboardScreen from "./screens/ContestDashboardScreen";
 import ContestSolveScreen from "./screens/ContestSolveScreen";
@@ -14,21 +14,30 @@ const ExamPrecheckScreen = lazy(() => import("./screens/paperExam/ExamPrecheckSc
 // ── Classroom-scoped contest routes (/classrooms/:classroomId/contest/:contestId) ──
 
 /**
- * Classroom Contest Detail dashboard — rendered inside MainLayout / WorkspaceShell.
+ * Classroom Contest 主路由（dashboard + runtime 共用同一條 layout 軌道）。
+ * 在 App.tsx 必須掛在 <MainLayout> 之下。
+ * Runtime 子路由包在 <RuntimeRouteWrapper> 裡，啟動 ExamModeWrapper / 監考 modal /
+ * 關閉右側 chat panel / 提供 ContestRuntimeContext。
  */
-export const classroomContestDetailRoutes = (
+export const classroomContestRoutes = (
   <Route path="/classrooms/:classroomId/contest/:contestId" element={<ContestWorkspaceLayout />}>
     <Route index element={<ContestDashboardScreen />} />
-  </Route>
-);
-
-/**
- * Classroom Contest runtime routes — full contest shell only while answering.
- */
-export const classroomContestRuntimeRoutes = (
-  <Route path="/classrooms/:classroomId/contest/:contestId" element={<ContestLayout />}>
-    <Route path="solve" element={<ContestSolveScreen />} />
-    <Route path="solve/:problemId" element={<ContestSolveScreen />} />
+    <Route
+      path="solve"
+      element={
+        <RuntimeRouteWrapper>
+          <ContestSolveScreen />
+        </RuntimeRouteWrapper>
+      }
+    />
+    <Route
+      path="solve/:problemId"
+      element={
+        <RuntimeRouteWrapper>
+          <ContestSolveScreen />
+        </RuntimeRouteWrapper>
+      }
+    />
   </Route>
 );
 

From 1b421268e5f7126642f1764ad8438656bd7c0ba2 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:32:01 +0800
Subject: [PATCH 51/60] refactor(app): mount contest routes under MainLayout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/App.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1764da60..9ff92174 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -31,8 +31,7 @@ import {
 } from "@/features/auth";
 import { problemDetailRoutes, problemSolveRoutes } from "@/features/problems";
 import {
-  classroomContestDetailRoutes,
-  classroomContestRuntimeRoutes,
+  classroomContestRoutes,
   classroomContestAdminRoute,
   classroomExamPreviewRoute,
   classroomExamPrecheckRoute,
@@ -153,8 +152,8 @@ function App() {
                               />
                               {/* Classroom Detail - inside MainLayout for shared sidebar */}
                               {classroomDetailRoute}
-                              {/* Contest dashboard - inside WorkspaceShell until answering starts */}
-                              {classroomContestDetailRoutes}
+                              {/* Classroom Contest - dashboard + runtime, all under shared MainLayout/WorkspaceShell */}
+                              {classroomContestRoutes}
                             </Route>
 
                             {/* Legacy hidden routes */}
@@ -165,9 +164,6 @@ function App() {
                             {/* Problem Solve - Full-screen IDE-style solver */}
                             {problemSolveRoutes}
 
-                            {/* Classroom-scoped Contest Runtime Routes */}
-                            {classroomContestRuntimeRoutes}
-
                             {/* Classroom Exam Precheck - Classroom-scoped */}
                             {classroomExamPrecheckRoute}
                           </Route>

From fa2cd1e0baf71f259ee15ba5db083944cd92df43 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:34:36 +0800
Subject: [PATCH 52/60] chore(contest): remove obsolete ContestLayout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../exam/ExamStatusBadge.module.scss          |  48 ++
 .../components/exam/ExamStatusBadge.tsx       |   2 +-
 .../src/features/contest/components/index.ts  |   1 -
 .../layout/ContestLayout.module.scss          | 415 --------------
 .../components/layout/ContestLayout.tsx       | 505 ------------------
 5 files changed, 49 insertions(+), 922 deletions(-)
 create mode 100644 frontend/src/features/contest/components/exam/ExamStatusBadge.module.scss
 delete mode 100644 frontend/src/features/contest/components/layout/ContestLayout.module.scss
 delete mode 100644 frontend/src/features/contest/components/layout/ContestLayout.tsx

diff --git a/frontend/src/features/contest/components/exam/ExamStatusBadge.module.scss b/frontend/src/features/contest/components/exam/ExamStatusBadge.module.scss
new file mode 100644
index 00000000..0f0270e5
--- /dev/null
+++ b/frontend/src/features/contest/components/exam/ExamStatusBadge.module.scss
@@ -0,0 +1,48 @@
+.examStatusBase {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 100%;
+  padding: 0 1rem;
+  font-weight: bold;
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  cursor: help;
+}
+
+.examStatusLocked {
+  composes: examStatusBase;
+  background-color: color-mix(in srgb, var(--cds-support-error) 12%, transparent);
+  color: var(--cds-support-error);
+}
+
+.examStatusPaused {
+  composes: examStatusBase;
+  background-color: color-mix(in srgb, var(--cds-support-warning) 15%, transparent);
+  color: var(--cds-support-warning);
+}
+
+.examStatusInProgress {
+  composes: examStatusBase;
+  background-color: color-mix(in srgb, var(--cds-support-success) 12%, transparent);
+  color: var(--cds-support-success);
+  cursor: pointer;
+}
+
+.examStatusWarning {
+  composes: examStatusBase;
+  background-color: color-mix(in srgb, var(--cds-support-warning) 15%, transparent);
+  color: var(--cds-support-warning);
+  cursor: pointer;
+}
+
+.examStatusCritical {
+  composes: examStatusBase;
+  background-color: color-mix(in srgb, var(--cds-support-error) 12%, transparent);
+  color: var(--cds-support-error);
+  cursor: pointer;
+}
+
+.examTimeDisplay {
+  font-family: var(--cds-code-font-family, monospace);
+  margin-left: 0.5rem;
+}
diff --git a/frontend/src/features/contest/components/exam/ExamStatusBadge.tsx b/frontend/src/features/contest/components/exam/ExamStatusBadge.tsx
index b0ba6273..71c0eee7 100644
--- a/frontend/src/features/contest/components/exam/ExamStatusBadge.tsx
+++ b/frontend/src/features/contest/components/exam/ExamStatusBadge.tsx
@@ -2,7 +2,7 @@ import type { ExamStatusType } from "@/core/entities/contest.entity";
 import { View, Locked, WarningAltFilled } from "@carbon/icons-react";
 import { useExamMonitoringStatus } from "@/features/contest/contexts/ExamMonitoringStatusContext";
 import { useTranslation } from "react-i18next";
-import styles from "../layout/ContestLayout.module.scss";
+import styles from "./ExamStatusBadge.module.scss";
 
 interface ExamStatusBadgeProps {
   examStatus?: ExamStatusType;
diff --git a/frontend/src/features/contest/components/index.ts b/frontend/src/features/contest/components/index.ts
index dcf3d139..3270d434 100644
--- a/frontend/src/features/contest/components/index.ts
+++ b/frontend/src/features/contest/components/index.ts
@@ -1,5 +1,4 @@
 // Layout Components
-export { default as ContestLayout } from "./layout/ContestLayout";
 export { default as ContestHero } from "./layout/ContestHero";
 export { default as ContestTabs } from "./layout/ContestTabs";
 export { default as ContestExitModal } from "./layout/ContestExitModal";
diff --git a/frontend/src/features/contest/components/layout/ContestLayout.module.scss b/frontend/src/features/contest/components/layout/ContestLayout.module.scss
deleted file mode 100644
index 64c07483..00000000
--- a/frontend/src/features/contest/components/layout/ContestLayout.module.scss
+++ /dev/null
@@ -1,415 +0,0 @@
-// ContestLayout styles
-
-.root {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-// Loading state
-.loadingContainer {
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-}
-
-.loadingContent {
-  text-align: center;
-}
-
-.spinner {
-  width: 48px;
-  height: 48px;
-  border: 4px solid var(--cds-border-subtle);
-  border-top-color: var(--cds-link-primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 0 auto 1rem;
-}
-
-.loadingText {
-  color: var(--cds-text-secondary);
-}
-
-// Main content area
-.mainContent {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.contentWrapper {
-  margin-top: 3rem;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: var(--cds-background);
-}
-
-.scrollableContent {
-  overflow: auto;
-  flex: 1;
-}
-
-.contestShellBody {
-  --contest-shell-sidebar-expanded-width: 18rem;
-  --contest-shell-sidebar-collapsed-width: 3rem;
-
-  display: flex;
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.contestShellSidebar {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  min-height: 0;
-  height: 100%;
-  overflow: hidden;
-  background: var(--cds-layer);
-  border-right: 1px solid var(--cds-border-subtle-01);
-  transition: width 160ms cubic-bezier(0.2, 0, 0.38, 0.9);
-}
-
-.contestShellSidebarExpanded {
-  width: var(--contest-shell-sidebar-expanded-width);
-}
-
-.contestShellSidebarCollapsed {
-  width: var(--contest-shell-sidebar-collapsed-width);
-}
-
-.contestShellNav {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: 0.375rem;
-  min-height: 0;
-  padding: 0.75rem 0.5rem;
-  overflow: hidden;
-}
-
-.contestShellNavButton {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.75rem;
-  width: 100%;
-  min-height: 3rem;
-  padding: 0 0.75rem;
-  border: 1px solid transparent;
-  border-radius: 0.5rem;
-  background: transparent;
-  color: var(--cds-text-secondary);
-  cursor: pointer;
-  font: inherit;
-  text-align: left;
-  white-space: nowrap;
-}
-
-.contestShellNavButton:hover {
-  background: var(--cds-layer-hover);
-  color: var(--cds-text-primary);
-}
-
-.contestShellNavButton:focus-visible {
-  outline: 2px solid var(--cds-focus);
-  outline-offset: -2px;
-}
-
-.contestShellNavButtonActive {
-  background: var(--cds-layer-selected);
-  color: var(--cds-text-primary);
-}
-
-.contestShellNavButton span {
-  min-width: 0;
-  overflow: hidden;
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-  line-height: 1.25;
-  text-overflow: ellipsis;
-}
-
-.contestShellSidebarCollapsed .contestShellNav {
-  align-items: center;
-  padding: 0.5rem 0.25rem;
-}
-
-.contestShellSidebarCollapsed .contestShellNavButton {
-  justify-content: center;
-  width: 2.5rem;
-  padding: 0;
-  border-radius: 0.375rem;
-}
-
-.contestShellSidebarCollapsed .contestShellNavButton span {
-  display: none;
-}
-
-.contestShellFooter {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-shrink: 0;
-  min-height: 3rem;
-  padding: 0.25rem 0.5rem;
-  border-top: 1px solid var(--cds-border-subtle-01);
-}
-
-.contestShellSidebarCollapsed .contestShellFooter {
-  justify-content: center;
-  padding: 0.25rem;
-}
-
-.contestShellToggle {
-  flex-shrink: 0;
-  color: var(--cds-icon-primary);
-}
-
-.contestShellContent {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.contestShellBody .contestShellContent > * {
-  flex: 1 1 auto;
-  min-height: 0;
-  height: 100%;
-}
-
-.dashboardContent {
-  flex: 1 1 auto;
-  min-height: 0;
-  display: flex;
-  overflow: hidden;
-}
-
-// Header brand with embedded breadcrumb
-.headerBrand {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.75rem;
-  min-width: 0;
-}
-
-.solveBackButton {
-  border-right: 1px solid var(--cds-border-subtle);
-}
-
-.headerBrandLink {
-  color: var(--cds-text-primary);
-  text-decoration: none;
-  font-size: 0.875rem;
-  font-weight: 600;
-  white-space: nowrap;
-
-  &:hover {
-    color: var(--cds-link-primary-hover);
-  }
-}
-
-// Carbon Breadcrumb inside header
-.breadcrumb {
-  display: inline-flex;
-  align-items: center;
-  margin: 0;
-
-  :global(.cds--breadcrumb-item) {
-    margin-right: 0;
-  }
-
-  :global(.cds--link) {
-    color: var(--cds-text-secondary);
-    font-size: 0.875rem;
-    text-decoration: none;
-
-    &:hover {
-      color: var(--cds-link-primary-hover);
-    }
-  }
-
-  :global(.cds--breadcrumb-item--current) {
-    color: var(--cds-text-primary);
-    font-size: 0.875rem;
-  }
-}
-
-// Header navigation items
-.headerTimerDisplay {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  height: 100%;
-  padding: 0 1rem;
-  color: var(--cds-text-primary);
-}
-
-.headerScoreDisplay {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  height: 100%;
-  padding: 0 1rem;
-  color: var(--cds-text-primary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-  font-weight: 600;
-}
-
-.scoreLabel {
-  color: var(--cds-text-secondary);
-}
-
-.scoreValue {
-  font-family: var(--cds-code-font-family, monospace);
-
-  &.hasScore {
-    color: var(--cds-support-success);
-  }
-}
-
-.scoreDivider {
-  color: var(--cds-text-secondary);
-}
-
-.totalScore {
-  font-family: var(--cds-code-font-family, monospace);
-}
-
-// Exam status indicators
-.examStatusBase {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  height: 100%;
-  padding: 0 1rem;
-  font-weight: bold;
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-  cursor: help;
-}
-
-.examStatusLocked {
-  composes: examStatusBase;
-  background-color: color-mix(in srgb, var(--cds-support-error) 12%, transparent);
-  color: var(--cds-support-error);
-}
-
-.examStatusPaused {
-  composes: examStatusBase;
-  background-color: color-mix(in srgb, var(--cds-support-warning) 15%, transparent);
-  color: var(--cds-support-warning);
-}
-
-.examStatusInProgress {
-  composes: examStatusBase;
-  background-color: color-mix(in srgb, var(--cds-support-success) 12%, transparent);
-  color: var(--cds-support-success);
-  cursor: pointer;
-}
-
-.examStatusWarning {
-  composes: examStatusBase;
-  background-color: color-mix(in srgb, var(--cds-support-warning) 15%, transparent);
-  color: var(--cds-support-warning);
-  cursor: pointer;
-}
-
-.examStatusCritical {
-  composes: examStatusBase;
-  background-color: color-mix(in srgb, var(--cds-support-error) 12%, transparent);
-  color: var(--cds-support-error);
-  cursor: pointer;
-}
-
-.examTimeDisplay {
-  font-family: var(--cds-code-font-family, monospace);
-  margin-left: 0.5rem;
-}
-
-// Exit button
-.exitButton {
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-// Refresh icon animation
-.refreshing {
-  animation: spin 1s linear infinite;
-}
-
-// Shared animation
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-// ── Mobile adjustments ──
-@media (max-width: 900px) {
-  .headerBrand {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  .breadcrumb {
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  .breadcrumb :global(.cds--breadcrumb-item--current) {
-    display: block;
-    max-width: 8rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .headerActions {
-    display: none !important;
-  }
-
-  .contestShellBody {
-    flex-direction: column;
-  }
-
-  .contestShellSidebar {
-    width: 100%;
-    height: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--cds-border-subtle-01);
-  }
-
-  .contestShellNav {
-    flex-direction: row;
-    padding: 0.375rem;
-  }
-
-  .contestShellNavButton {
-    min-height: 3rem;
-    width: auto;
-    max-width: 8rem;
-  }
-
-  .contestShellSidebarCollapsed .contestShellNavButton {
-    width: 2.5rem;
-  }
-
-  .contestShellFooter {
-    display: none;
-  }
-}
diff --git a/frontend/src/features/contest/components/layout/ContestLayout.tsx b/frontend/src/features/contest/components/layout/ContestLayout.tsx
deleted file mode 100644
index e0fb4596..00000000
--- a/frontend/src/features/contest/components/layout/ContestLayout.tsx
+++ /dev/null
@@ -1,505 +0,0 @@
-import { useMemo, useState } from "react";
-import type { ReactNode } from "react";
-import { Link, Outlet, useParams } from "react-router-dom";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  Header,
-  HeaderGlobalBar,
-  HeaderGlobalAction,
-  IconButton,
-  Modal,
-  HeaderNavigation,
-} from "@carbon/react";
-import {
-  Maximize,
-  Time,
-  Renew,
-  Dashboard,
-  ChevronLeft,
-  Home,
-  List,
-  SidePanelClose,
-  SidePanelOpen,
-} from "@carbon/icons-react";
-import { useTranslation } from "react-i18next";
-import ExamModeWrapper from "@/features/contest/components/ExamModeWrapper";
-import { ContestProvider } from "@/features/contest/contexts/ContestContext";
-import { ExamModeMonitorModal } from "@/features/contest/components/modals/ExamModeMonitorModal";
-import ExamStatusBadge from "@/features/contest/components/exam/ExamStatusBadge";
-import { useContestTimers } from "@/features/contest/hooks/useContestTimers";
-import { useContestExamActions } from "@/features/contest/hooks/useContestExamActions";
-import { useContestLayoutState } from "@/features/contest/hooks/useContestLayoutState";
-import {
-  getClassroomContestDashboardPath,
-  getClassroomContestPrecheckPath,
-  getFirstContestProblemId,
-  getClassroomContestSolvePath,
-  shouldRouteToPrecheck,
-} from "@/features/contest/domain/contestRoutePolicy";
-import ExamSubmissionProgressModal from "@/features/contest/components/exam/ExamSubmissionProgressModal";
-import { hasExamPrecheckPassed } from "@/features/contest/screens/paperExam/hooks";
-import { SideMenu } from "@/features/app/components/SideMenu";
-import { SideMenuToggle } from "@/features/app/components/SideMenuToggle";
-import { UserMenu } from "@/features/app/components/UserMenu";
-import { ContestLayoutHeaderSlotContext } from "./ContestLayoutHeaderSlotContext";
-import { TimeDisplay } from "@/shared/components/dashboard";
-import styles from "./ContestLayout.module.scss";
-
-const ContestLayout = () => {
-  const { classroomId } = useParams<{ classroomId?: string }>();
-  const {
-    contestId,
-    contest,
-    contestLoading,
-    contestNotFound,
-    isFullscreen,
-    isRefreshing,
-    isSolvePage,
-    isPaperExamPage,
-    hasEnded,
-    isAdmin,
-    userScore,
-    totalMaxScore,
-    scoreboardData,
-    refreshContest,
-    navigate,
-  } = useContestLayoutState();
-
-  const boundClassroomId = classroomId || contest?.boundClassroomId || undefined;
-  const { t } = useTranslation("contest");
-  const { t: tc } = useTranslation("common");
-  const dashboardPath =
-    boundClassroomId && contestId
-      ? getClassroomContestDashboardPath(boundClassroomId, contestId)
-      : "/dashboard";
-  const precheckPath =
-    boundClassroomId && contestId
-      ? getClassroomContestPrecheckPath(boundClassroomId, contestId)
-      : "/dashboard";
-  const firstProblemId =
-    contest?.contestType === "coding"
-      ? getFirstContestProblemId(contest)
-      : undefined;
-  const answeringPath =
-    boundClassroomId && contestId
-      ? getClassroomContestSolvePath(boundClassroomId, contestId, firstProblemId)
-      : "/dashboard";
-  const adminPath =
-    boundClassroomId && contestId
-      ? `${dashboardPath}/admin`
-      : "/dashboard";
-
-  const [sideMenuOpen, setSideMenuOpen] = useState(false);
-  const [contestShellExpanded, setContestShellExpanded] = useState(
-    () => typeof window !== "undefined" && window.innerWidth > 900,
-  );
-  const [headerActions, setHeaderActions] = useState<ReactNode>(null);
-  const [monitoringModalOpen, setMonitoringModalOpen] = useState(false);
-  const [errorModalOpen, setErrorModalOpen] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
-  const isContestParticipant = !!contest?.hasJoined;
-  const lockContestMenu =
-    isContestParticipant &&
-    !!contest?.cheatDetectionEnabled &&
-    contest.examStatus === "in_progress";
-
-  const { timeLeft, isCountdownToStart, unlockTimeLeft } = useContestTimers({
-    contest,
-    contestId,
-    refreshContest,
-  });
-
-  const showError = (msg: string) => {
-    setErrorMessage(msg);
-    setErrorModalOpen(true);
-  };
-
-  const handleGoToAnswering = () => {
-    if (!contestId || !contest) return;
-    if (
-      boundClassroomId &&
-      shouldRouteToPrecheck({
-        contest,
-        precheckPassed: hasExamPrecheckPassed(contest.id),
-      })
-    ) {
-      navigate(precheckPath);
-      return;
-    }
-    navigate(answeringPath);
-  };
-
-  const {
-    handleJoin,
-    handleStartExam,
-    handleEndExam,
-    toggleFullscreen,
-    submissionProgress,
-  } = useContestExamActions({
-    contest,
-    contestId,
-    hasEnded,
-    refreshContest,
-    navigate,
-    messages: {
-      joinError: t("error.joinFailed"),
-      startError: t("error.startExamFailed"),
-      endError: t("error.endExamFailed"),
-      exitError: t("error.exitFailed"),
-    },
-    onError: showError,
-  });
-  const headerSlotValue = useMemo(
-    () => ({ setHeaderActions }),
-    [setHeaderActions],
-  );
-
-  if (contestLoading) {
-    return (
-      <div className={styles.loadingContainer}>
-        <div className={styles.loadingContent}>
-          <div className={styles.spinner} />
-          <p className={styles.loadingText}>{tc("message.loading")}</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (contestNotFound) {
-    return null;
-  }
-
-  const renderExamStatus = () => (
-    <ExamStatusBadge
-      examStatus={contest?.examStatus}
-      cheatDetectionEnabled={contest?.cheatDetectionEnabled}
-      timeLeft={timeLeft}
-      unlockTimeLeft={unlockTimeLeft}
-      lockReason={contest?.lockReason}
-      autoUnlockAt={contest?.autoUnlockAt}
-      onClick={() => setMonitoringModalOpen(true)}
-    />
-  );
-
-  const renderContestBreadcrumb = () => {
-    const contestName = contest?.name || t("mode");
-    const answeringLabel = t("dashboard.answerLabel", "作答");
-    const showAnsweringBreadcrumb =
-      lockContestMenu || (isSolvePage && contest?.contestType === "coding");
-
-    if (showAnsweringBreadcrumb) {
-      return (
-        <Breadcrumb noTrailingSlash className={styles.breadcrumb}>
-          <BreadcrumbItem>{contestName}</BreadcrumbItem>
-          <BreadcrumbItem isCurrentPage>{answeringLabel}</BreadcrumbItem>
-        </Breadcrumb>
-      );
-    }
-
-    if (boundClassroomId) {
-      return (
-        <Breadcrumb noTrailingSlash className={styles.breadcrumb}>
-          <BreadcrumbItem>
-            <Link to="/dashboard">{tc("nav.dashboard")}</Link>
-          </BreadcrumbItem>
-          <BreadcrumbItem>
-            <Link to={`/classrooms/${boundClassroomId}`}>
-              {tc("nav.classrooms", "教室")}
-            </Link>
-          </BreadcrumbItem>
-          <BreadcrumbItem isCurrentPage>{contestName}</BreadcrumbItem>
-        </Breadcrumb>
-      );
-    }
-
-    return (
-      <Breadcrumb noTrailingSlash className={styles.breadcrumb}>
-        <BreadcrumbItem>
-          <Link to="/dashboard">{tc("nav.dashboard")}</Link>
-        </BreadcrumbItem>
-        <BreadcrumbItem isCurrentPage>{contestName}</BreadcrumbItem>
-      </Breadcrumb>
-    );
-  };
-
-  const renderMainContent = () => {
-    const outletContent = (
-      <ContestProvider initialContest={contest} initialScoreboardData={scoreboardData} onRefresh={refreshContest}>
-        <Outlet
-          context={{
-            refreshContest,
-            onJoin: handleJoin,
-            onStartExam: handleStartExam,
-            onEndExam: handleEndExam,
-            onGoToAnswering: handleGoToAnswering,
-            onOpenAdminPanel: isAdmin ? () => navigate(adminPath) : undefined,
-            isAdmin,
-          }}
-        />
-      </ContestProvider>
-    );
-
-    if (isPaperExamPage) {
-      return outletContent;
-    }
-
-    if (isSolvePage) {
-      return outletContent;
-    }
-
-    return (
-      <div className={styles.dashboardContent}>
-        {outletContent}
-      </div>
-    );
-  };
-
-  const examModeProps = {
-    contestId: contestId || "",
-    cheatDetectionEnabled:
-      isContestParticipant && !!contest?.cheatDetectionEnabled,
-    isExamMonitored: isContestParticipant && !!contest?.isExamMonitored,
-    requiresFullscreen: isContestParticipant && !!contest?.requiresFullscreen,
-    hasEnded,
-    lockReason: contest?.lockReason,
-    examStatus: contest?.examStatus,
-    onRefresh: refreshContest,
-  };
-
-  const showContestTimer =
-    contest &&
-    (!contest.cheatDetectionEnabled ||
-      contest.examStatus === "not_started" ||
-      contest.examStatus === "submitted");
-
-  const showScoreDisplay =
-    isSolvePage && contest?.problems && contest.problems.length > 0;
-  const hideSolveNavExtras = isSolvePage && contest?.contestType === "coding";
-  const isPaperSolvePage = isSolvePage && contest?.contestType === "paper_exam";
-  const showContestShellSidebar =
-    !isPaperSolvePage &&
-    isContestParticipant &&
-    !!contestId &&
-    !!boundClassroomId &&
-    (isSolvePage ||
-      contest?.examStatus === "in_progress" ||
-      contest?.examStatus === "paused" ||
-      contest?.examStatus === "locked");
-  const showContestMenuToggle =
-    !showContestShellSidebar && !hideSolveNavExtras && !lockContestMenu;
-  const effectiveSideMenuOpen = showContestMenuToggle && sideMenuOpen;
-  const renderContestShellContent = () => {
-    const mainContent = renderMainContent();
-    if (!showContestShellSidebar) return mainContent;
-
-    const homeLabel = t("contestShell.home", "總覽");
-    const answeringLabel =
-      contest?.contestType === "paper_exam"
-        ? t("contestShell.paperAnswering", "作答")
-        : t("contestShell.codingAnswering", "解題");
-
-    return (
-      <div className={styles.contestShellBody}>
-        <aside
-          className={[
-            styles.contestShellSidebar,
-            contestShellExpanded
-              ? styles.contestShellSidebarExpanded
-              : styles.contestShellSidebarCollapsed,
-          ].join(" ")}
-          aria-label={t("contestShell.sidebarLabel", "考試導覽")}
-        >
-          <div className={styles.contestShellNav}>
-            <button
-              type="button"
-              className={`${styles.contestShellNavButton} ${
-                !isSolvePage ? styles.contestShellNavButtonActive : ""
-              }`}
-              aria-current={!isSolvePage ? "page" : undefined}
-              aria-label={homeLabel}
-              title={homeLabel}
-              onClick={() => navigate(dashboardPath)}
-            >
-              <Home size={20} />
-              <span>{homeLabel}</span>
-            </button>
-            <button
-              type="button"
-              className={`${styles.contestShellNavButton} ${
-                isSolvePage ? styles.contestShellNavButtonActive : ""
-              }`}
-              aria-current={isSolvePage ? "page" : undefined}
-              aria-label={answeringLabel}
-              title={answeringLabel}
-              onClick={handleGoToAnswering}
-            >
-              <List size={20} />
-              <span>{answeringLabel}</span>
-            </button>
-          </div>
-          <div className={styles.contestShellFooter}>
-            <IconButton
-              kind="ghost"
-              size="md"
-              align="top"
-              label={
-                contestShellExpanded
-                  ? tc("ui.collapseSidebar", "收合側欄")
-                  : tc("ui.expandSidebar", "展開側欄")
-              }
-              onClick={() => setContestShellExpanded((expanded) => !expanded)}
-              className={styles.contestShellToggle}
-            >
-              {contestShellExpanded ? (
-                <SidePanelClose size={20} />
-              ) : (
-                <SidePanelOpen size={20} />
-              )}
-            </IconButton>
-          </div>
-        </aside>
-        <div className={styles.contestShellContent}>{mainContent}</div>
-      </div>
-    );
-  };
-
-  return (
-    <ExamModeWrapper {...examModeProps}>
-      <ContestLayoutHeaderSlotContext.Provider value={headerSlotValue}>
-      <div className={styles.root}>
-        <Header aria-label={t("header.contestPlatform")}>
-          {showContestMenuToggle ? (
-            <SideMenuToggle
-              isOpen={effectiveSideMenuOpen}
-              onClick={() => setSideMenuOpen((o) => !o)}
-            />
-          ) : hideSolveNavExtras && !showContestShellSidebar ? (
-            <button
-              type="button"
-              className={`side-menu-toggle ${styles.solveBackButton}`}
-              aria-label={t("adminLayout.header.backToHome", "返回競賽主頁")}
-              title={t("adminLayout.header.backToHome", "返回競賽主頁")}
-              onClick={() => navigate(dashboardPath)}
-            >
-              <ChevronLeft size={20} />
-            </button>
-          ) : null}
-          <div className={styles.headerBrand}>
-            <Link to="/dashboard" className={styles.headerBrandLink}>
-              {tc("header.prefix")}
-            </Link>
-            {renderContestBreadcrumb()}
-          </div>
-
-          <HeaderNavigation aria-label={tc("header.contestNavigation")}>
-            {showContestTimer && !boundClassroomId && (
-              <div className={styles.headerTimerDisplay}>
-                <Time size={16} />
-                <TimeDisplay
-                  variant="header"
-                  value={
-                    isCountdownToStart
-                      ? t("timeToStart", { time: timeLeft })
-                      : timeLeft
-                  }
-                />
-              </div>
-            )}
-
-            {showScoreDisplay && (
-              <div className={styles.headerScoreDisplay}>
-                <span className={styles.scoreLabel}>{t("overview.scoreLabel")}</span>
-                <span
-                  className={`${styles.scoreValue} ${userScore > 0 ? styles.hasScore : ""}`}
-                >
-                  {userScore}
-                </span>
-                <span className={styles.scoreDivider}>/</span>
-                <span className={styles.totalScore}>{totalMaxScore}</span>
-              </div>
-            )}
-          </HeaderNavigation>
-
-          <HeaderGlobalBar>
-            {renderExamStatus()}
-
-            {headerActions}
-
-            {isAdmin && (
-              <HeaderGlobalAction
-                aria-label={t("preRegistration.openAdminPanel", "前往管理後台")}
-                tooltipAlignment="center"
-                onClick={() => navigate(adminPath)}
-              >
-                <Dashboard size={20} />
-              </HeaderGlobalAction>
-            )}
-
-            <HeaderGlobalAction
-              aria-label={isRefreshing ? t('action.refreshing') : t("refresh")}
-              tooltipAlignment="center"
-              onClick={isRefreshing ? undefined : refreshContest}
-              className={styles.headerActions}
-            >
-              <Renew size={20} className={isRefreshing ? styles.refreshing : undefined} />
-            </HeaderGlobalAction>
-
-            {!isFullscreen && (
-              <HeaderGlobalAction
-                aria-label={t("enterFullscreen")}
-                tooltipAlignment="center"
-                onClick={toggleFullscreen}
-                className={styles.headerActions}
-              >
-                <Maximize size={20} />
-              </HeaderGlobalAction>
-            )}
-
-            <UserMenu
-              contestMode
-              contest={contest}
-              onContestRefresh={refreshContest}
-              settingsOnly={lockContestMenu}
-            />
-          </HeaderGlobalBar>
-
-          {showContestMenuToggle ? (
-            <SideMenu
-              isOpen={effectiveSideMenuOpen}
-              onClose={() => setSideMenuOpen(false)}
-            />
-          ) : null}
-        </Header>
-
-        <ExamModeMonitorModal
-          open={monitoringModalOpen}
-          onRequestClose={() => setMonitoringModalOpen(false)}
-        />
-
-        <div className={styles.mainContent}>
-          <div className={styles.contentWrapper}>
-            {renderContestShellContent()}
-          </div>
-        </div>
-
-        <ExamSubmissionProgressModal
-          state={submissionProgress.state}
-          onRequestClose={submissionProgress.close}
-        />
-
-        <Modal
-          open={errorModalOpen}
-          modalHeading={tc("message.error")}
-          passiveModal
-          onRequestClose={() => setErrorModalOpen(false)}
-        >
-          <p>{errorMessage}</p>
-        </Modal>
-      </div>
-      </ContestLayoutHeaderSlotContext.Provider>
-    </ExamModeWrapper>
-  );
-};
-
-export default ContestLayout;

From 44e10f4e8a95bc74b8eee08f863e9c9ce48b5e02 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:38:10 +0800
Subject: [PATCH 53/60] chore(contest): hide student announcement block behind
 a flag
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The student dashboard 公告 block is gated behind SHOW_ANNOUNCEMENTS,
currently false. Data fetching, state, and renderer are kept intact;
flipping the constant to true brings the block back without revisiting
the call site.

The corresponding integration test is marked as skipped with a note.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../StudentContestDashboardView.test.tsx      |  11 +-
 .../StudentContestDashboardView.tsx           | 344 ++++++++++++++----
 2 files changed, 276 insertions(+), 79 deletions(-)

diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
index 3a63be9d..8bfa3274 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
@@ -1,5 +1,5 @@
-import { render, screen } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { ChangeEventHandler, ReactNode } from "react";
 import type {
   ContestDetail,
@@ -242,6 +242,10 @@ const renderDashboard = (
   );
 
 describe("StudentContestDashboard", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
   beforeEach(() => {
     vi.clearAllMocks();
   });
@@ -259,7 +263,8 @@ describe("StudentContestDashboard", () => {
     expect(screen.getByRole("button", { name: /加入競賽/ })).toBeInTheDocument();
   });
 
-  it("renders contest announcements above the tabs", async () => {
+  // 公告 block 暫時於 view 中隱藏（SHOW_ANNOUNCEMENTS=false），啟用時恢復此測試
+  it.skip("renders contest announcements above the tabs", async () => {
     vi.mocked(getContestAnnouncements).mockResolvedValueOnce([
       {
         id: "ann-1",
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
index 612addab..bf51212c 100644
--- a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { ScaleTypes } from "@carbon/charts";
 import { LollipopChart } from "@carbon/charts-react";
 import "@carbon/charts-react/styles.css";
@@ -115,6 +115,9 @@ const QUESTION_TYPE_LABEL: Record<string, string> = {
 
 const PASSING_SCORE_THRESHOLD_PERCENT = 60;
 
+// 公告 block 暫時隱藏（資料拉取與渲染邏輯保留，flip 為 true 即可恢復）
+const SHOW_ANNOUNCEMENTS = false;
+
 const resolveCarbonChartTheme = (
   theme: string,
 ): "white" | "g10" | "g90" | "g100" => {
@@ -180,6 +183,22 @@ export default function StudentContestDashboard({
   const { t } = useTranslation("contest");
   const { t: tc } = useTranslation("common");
   const { theme } = useTheme();
+  const tr = useCallback(
+    (
+      key: string,
+      defaultValue: string,
+      values?: Record<string, string | number>,
+    ) => {
+      const translated = values
+        ? t(key, { defaultValue, ...values })
+        : t(key, defaultValue);
+      if (typeof translated === "string") return translated;
+      return defaultValue.replace(/{{(\w+)}}/g, (_, name) =>
+        String(values?.[name] ?? ""),
+      );
+    },
+    [t],
+  );
   const [nowMs, setNowMs] = useState(() => Date.now());
   const [infoTab, setInfoTab] = useState<"rules" | "records">("rules");
   const [showRegisterModal, setShowRegisterModal] = useState(false);
@@ -262,7 +281,13 @@ export default function StudentContestDashboard({
 
       setPaperData({
         loading: false,
-        error: questionsResult.status === "rejected" ? "題目資料暫時無法載入" : null,
+        error:
+          questionsResult.status === "rejected"
+            ? tr(
+                "studentDashboard.errors.questionsLoadFailed",
+                "題目資料暫時無法載入",
+              )
+            : null,
         questions,
         answers,
         results,
@@ -299,7 +324,12 @@ export default function StudentContestDashboard({
         if (cancelled) return;
         setAnnouncements([]);
         setAnnouncementsError(
-          error instanceof Error ? error.message : "公告暫時無法載入",
+          error instanceof Error
+            ? error.message
+            : tr(
+                "studentDashboard.errors.announcementsLoadFailed",
+                "公告暫時無法載入",
+              ),
         );
       } finally {
         if (!cancelled) setAnnouncementsLoading(false);
@@ -335,7 +365,12 @@ export default function StudentContestDashboard({
         if (cancelled) return;
         setScoreSummary(null);
         setScoreSummaryError(
-          error instanceof Error ? error.message : "成績分布暫時無法載入",
+          error instanceof Error
+            ? error.message
+            : tr(
+                "studentDashboard.errors.scoreDistributionLoadFailed",
+                "成績分布暫時無法載入",
+              ),
         );
       } finally {
         if (!cancelled) setScoreSummaryLoading(false);
@@ -388,16 +423,16 @@ export default function StudentContestDashboard({
     contest.allowMultipleJoins;
   const scoreDisplay = contest.resultsPublished
     ? progressSummary.totalScore === null
-      ? "成績已發布"
+      ? t("studentDashboard.results.published", "成績已發布")
       : `${progressSummary.totalScore} / ${progressSummary.maxScore}`
-    : "尚未發布";
+    : t("studentDashboard.results.unpublished", "尚未發布");
   const afterPhaseValue =
     contest.contestType === "paper_exam" && paperData.loading
-      ? "載入中..."
+      ? t("studentDashboard.loading", "載入中...")
       : scoreDisplay;
   const reportDownloadLabel = contest.resultsPublished
-    ? "下載成績單"
-    : "下載作答證明";
+    ? t("studentDashboard.actions.downloadReport", "下載成績單")
+    : t("studentDashboard.actions.downloadProof", "下載作答證明");
   const startMs = Date.parse(contest.startTime);
   const endMs = Date.parse(contest.endTime);
   const durationDisplay =
@@ -481,21 +516,25 @@ export default function StudentContestDashboard({
           disabled={!canRegister}
           onClick={() => setShowRegisterModal(true)}
         >
-          {canRegister ? "加入競賽" : "目前不可加入"}
+          {canRegister
+            ? t("studentDashboard.actions.join", "加入競賽")
+            : t("studentDashboard.actions.joinUnavailable", "目前不可加入")}
         </Button>
       );
     }
     if (canStartExam || canResumeExam) {
       return (
         <Button renderIcon={Play} onClick={onStartExam}>
-          {canResumeExam ? "恢復作答" : "開始作答"}
+          {canResumeExam
+            ? t("studentDashboard.actions.resume", "恢復作答")
+            : t("studentDashboard.actions.start", "開始作答")}
         </Button>
       );
     }
     if (canGoToAnswering) {
       return (
         <Button renderIcon={Launch} onClick={onGoToAnswering}>
-          回到作答
+          {t("studentDashboard.actions.backToAnswering", "回到作答")}
         </Button>
       );
     }
@@ -511,7 +550,7 @@ export default function StudentContestDashboard({
           </Button>
           {canRestartSubmittedExam ? (
             <Button renderIcon={Play} onClick={onStartExam}>
-              重新加入
+              {t("studentDashboard.actions.rejoin", "重新加入")}
             </Button>
           ) : null}
         </>
@@ -519,14 +558,20 @@ export default function StudentContestDashboard({
     }
     return (
       <Button kind="secondary" disabled renderIcon={Time}>
-        {phase === "before" ? "等待開始" : "不可作答"}
+        {phase === "before"
+          ? t("studentDashboard.actions.waitingStart", "等待開始")
+          : t("studentDashboard.actions.unavailable", "不可作答")}
       </Button>
     );
   };
 
   const renderCodingRecords = () => {
     if (!hasAnswerRecord) {
-      return <p className={styles.emptyText}>尚無作答紀錄。</p>;
+      return (
+        <p className={styles.emptyText}>
+          {t("studentDashboard.empty.noAnswerRecords", "尚無作答紀錄。")}
+        </p>
+      );
     }
 
     const problems = contest.problems.map((problem, index) => ({
@@ -540,13 +585,19 @@ export default function StudentContestDashboard({
     }));
 
     if (!problems.length) {
-      return <p className={styles.emptyText}>尚無題目資料。</p>;
+      return (
+        <p className={styles.emptyText}>
+          {t("studentDashboard.empty.noQuestions", "尚無題目資料。")}
+        </p>
+      );
     }
 
     return (
       <div className={styles.problemReportList}>
         {problems.map((problem) => {
-          const statusText = problem.userStatus ?? "尚未提交";
+          const statusText =
+            problem.userStatus ??
+            t("studentDashboard.records.notSubmitted", "尚未提交");
           return (
             <div className={styles.problemReportItem} key={problem.id}>
               <div>
@@ -554,7 +605,9 @@ export default function StudentContestDashboard({
                   {problem.label}. {problem.title || "Untitled"}
                 </div>
                 <div className={styles.recordMeta}>
-                  滿分 {problem.score ?? 0}
+                  {tr("studentDashboard.records.fullScore", "滿分 {{score}}", {
+                    score: problem.score ?? 0,
+                  })}
                 </div>
               </div>
               <div className={styles.problemReportMeta}>
@@ -562,7 +615,9 @@ export default function StudentContestDashboard({
                   {statusText}
                 </Tag>
                 <span className={styles.recordScore}>
-                  {contest.resultsPublished ? "成績已發布" : "待發布"}
+                  {contest.resultsPublished
+                    ? t("studentDashboard.results.published", "成績已發布")
+                    : t("studentDashboard.results.pendingPublish", "待發布")}
                 </span>
               </div>
             </div>
@@ -574,12 +629,26 @@ export default function StudentContestDashboard({
 
   const renderPaperRecords = () => {
     if (!hasAnswerRecord || phase === "before") {
-      return <p className={styles.emptyText}>尚無作答紀錄。</p>;
+      return (
+        <p className={styles.emptyText}>
+          {t("studentDashboard.empty.noAnswerRecords", "尚無作答紀錄。")}
+        </p>
+      );
+    }
+    if (paperData.loading) {
+      return (
+        <p className={styles.emptyText}>
+          {t("studentDashboard.loadingAnswers", "載入作答資料中...")}
+        </p>
+      );
     }
-    if (paperData.loading) return <p className={styles.emptyText}>載入作答資料中...</p>;
     if (paperData.error) return <p className={styles.errorText}>{paperData.error}</p>;
     if (!paperData.questions.length) {
-      return <p className={styles.emptyText}>尚無題目資料。</p>;
+      return (
+        <p className={styles.emptyText}>
+          {t("studentDashboard.empty.noQuestions", "尚無題目資料。")}
+        </p>
+      );
     }
 
     const resultMap = new Map(
@@ -607,25 +676,45 @@ export default function StudentContestDashboard({
           const status =
             marked
               ? {
-                  label: "已標記",
+                  label: t("studentDashboard.answerStatus.marked", "已標記"),
                   tone: "warm-gray" as const,
                   emphasis: "warning" as const,
                 }
               : !answered
-              ? { label: "未作答", tone: "warm-gray" as const }
+              ? {
+                  label: t("studentDashboard.answerStatus.unanswered", "未作答"),
+                  tone: "warm-gray" as const,
+                }
               : !contest.resultsPublished
                 ? {
-                    label: "已作答",
+                    label: t("studentDashboard.answerStatus.answered", "已作答"),
                     tone: "cool-gray" as const,
                   }
                 : result?.isCorrect === true
-                  ? { label: "正確", tone: "green" as const }
+                  ? {
+                      label: t("studentDashboard.answerStatus.correct", "正確"),
+                      tone: "green" as const,
+                    }
                   : result?.isCorrect === false
                     ? (result?.score ?? 0) > 0
-                      ? { label: "部分得分", tone: "cyan" as const }
-                      : { label: "未得分", tone: "red" as const }
+                      ? {
+                          label: t(
+                            "studentDashboard.answerStatus.partial",
+                            "部分得分",
+                          ),
+                          tone: "cyan" as const,
+                        }
+                      : {
+                          label: t(
+                            "studentDashboard.answerStatus.noScore",
+                            "未得分",
+                          ),
+                          tone: "red" as const,
+                        }
                     : {
-                        label: result?.gradedAt ? "已批改" : "待批改",
+                        label: result?.gradedAt
+                          ? t("studentDashboard.answerStatus.graded", "已批改")
+                          : t("studentDashboard.answerStatus.pendingGrading", "待批改"),
                         tone: "warm-gray" as const,
                       };
           const prompt =
@@ -671,13 +760,21 @@ export default function StudentContestDashboard({
 
   const renderAnnouncements = () => {
     if (announcementsLoading) {
-      return <p className={styles.emptyText}>載入公告中...</p>;
+      return (
+        <p className={styles.emptyText}>
+          {t("studentDashboard.announcements.loading", "載入公告中...")}
+        </p>
+      );
     }
     if (announcementsError) {
       return <p className={styles.errorText}>{announcementsError}</p>;
     }
     if (!announcements.length) {
-      return <p className={styles.emptyText}>目前沒有公告。</p>;
+      return (
+        <p className={styles.emptyText}>
+          {t("studentDashboard.announcements.empty", "目前沒有公告。")}
+        </p>
+      );
     }
 
     return (
@@ -706,23 +803,39 @@ export default function StudentContestDashboard({
   const tagRow = (
     <div className={styles.tagRow}>
       <Tag type={getContestStateColor(contestState)}>
-        {getContestStateLabel(contestState)}
+        {t(
+          `studentDashboard.contestState.${contestState}`,
+          getContestStateLabel(contestState),
+        )}
       </Tag>
       <Tag type={participant ? "green" : "gray"}>
-        {participant ? "已加入" : "未加入"}
+        {participant
+          ? t("studentDashboard.joinStatus.joined", "已加入")
+          : t("studentDashboard.joinStatus.notJoined", "未加入")}
       </Tag>
-      {contest.cheatDetectionEnabled ? <Tag type="red">監控中</Tag> : null}
+      {contest.cheatDetectionEnabled ? (
+        <Tag type="red">
+          {t("studentDashboard.monitoring.enabled", "監控中")}
+        </Tag>
+      ) : null}
     </div>
   );
 
   return (
-    <DashboardPage ariaLabel="學生競賽首頁" fullBleed>
+    <DashboardPage
+      ariaLabel={t("studentDashboard.ariaLabel", "學生競賽首頁")}
+      fullBleed
+    >
       <DashboardContainer
         layout="split"
         proportions="main-aside"
         dividers="auto"
       >
-        <DashboardContainer layout="stack" dividers="auto" ariaLabel="競賽主要內容">
+        <DashboardContainer
+          layout="stack"
+          dividers="auto"
+          ariaLabel={t("studentDashboard.mainContent", "競賽主要內容")}
+        >
           <DashboardBlock>
             <BlockHeader
               titleSize="page"
@@ -737,7 +850,7 @@ export default function StudentContestDashboard({
                     void onRefreshContest?.();
                   }}
                 >
-                  重新整理
+                  {t("studentDashboard.actions.refresh", "重新整理")}
                 </Button>
               }
             />
@@ -747,29 +860,36 @@ export default function StudentContestDashboard({
             layout="grid"
             columns={3}
             dividers="auto"
-            ariaLabel="競賽資訊"
+            ariaLabel={t("studentDashboard.infoLabel", "競賽資訊")}
           >
             <DashboardBlock>
               <MetricBlock
-                label="開始時間"
+                label={t("studentDashboard.metrics.startTime", "開始時間")}
                 value={formatDate(contest.startTime, { includeSeconds: false })}
               />
             </DashboardBlock>
             <DashboardBlock>
               <MetricBlock
-                label="截止時間"
+                label={t("studentDashboard.metrics.endTime", "截止時間")}
                 value={formatDate(contest.endTime, { includeSeconds: false })}
               />
             </DashboardBlock>
             <DashboardBlock>
-              <MetricBlock label="總時長" value={durationDisplay} />
+              <MetricBlock
+                label={t("studentDashboard.metrics.duration", "總時長")}
+                value={durationDisplay}
+              />
             </DashboardBlock>
           </DashboardContainer>
 
-          <DashboardBlock>
-            <BlockHeader title="公告" />
-            {renderAnnouncements()}
-          </DashboardBlock>
+          {SHOW_ANNOUNCEMENTS ? (
+            <DashboardBlock>
+              <BlockHeader
+                title={t("studentDashboard.announcements.title", "公告")}
+              />
+              {renderAnnouncements()}
+            </DashboardBlock>
+          ) : null}
 
           <DashboardBlock padding="flush">
             <DashboardTabs
@@ -777,21 +897,33 @@ export default function StudentContestDashboard({
               onChange={(id) => setInfoTab(id as "rules" | "records")}
             >
               <DashboardTabBar
-                ariaLabel="競賽資訊切換"
+                ariaLabel={t("studentDashboard.tabs.ariaLabel", "競賽資訊切換")}
                 tabs={[
-                  { id: "rules", label: "規則說明" },
-                  { id: "records", label: "作答紀錄" },
+                  {
+                    id: "rules",
+                    label: t("studentDashboard.tabs.rules", "規則說明"),
+                  },
+                  {
+                    id: "records",
+                    label: t("studentDashboard.tabs.records", "作答紀錄"),
+                  },
                 ]}
               />
               <DashboardTabPanel tabId="rules">
                 <div className={styles.tabContent}>
                   <BlockHeader
                     titleAs="h3"
-                    title="規則說明"
+                    title={t("studentDashboard.rules.title", "規則說明")}
                     description={
                       requiresPassword
-                        ? "此競賽需要密碼。"
-                        : "此競賽不需要密碼。"
+                        ? t(
+                            "studentDashboard.rules.requiresPassword",
+                            "此競賽需要密碼。",
+                          )
+                        : t(
+                            "studentDashboard.rules.noPassword",
+                            "此競賽不需要密碼。",
+                          )
                     }
                     actions={
                       contest.cheatDetectionEnabled ? (
@@ -806,8 +938,14 @@ export default function StudentContestDashboard({
                       kind="warning"
                       lowContrast
                       hideCloseButton
-                      title="已啟用監控"
-                      subtitle="進入作答後會啟用全螢幕、分頁切換與裝置監控。"
+                      title={t(
+                        "studentDashboard.monitoring.title",
+                        "已啟用監控",
+                      )}
+                      subtitle={t(
+                        "studentDashboard.monitoring.subtitle",
+                        "進入作答後會啟用全螢幕、分頁切換與裝置監控。",
+                      )}
                     />
                   ) : null}
                   {contest.description ? (
@@ -820,7 +958,9 @@ export default function StudentContestDashboard({
                       <MarkdownRenderer>{contest.rules}</MarkdownRenderer>
                     </div>
                   ) : (
-                    <p className={styles.emptyText}>沒有額外規則。</p>
+                    <p className={styles.emptyText}>
+                      {t("studentDashboard.rules.empty", "沒有額外規則。")}
+                    </p>
                   )}
                 </div>
               </DashboardTabPanel>
@@ -830,10 +970,13 @@ export default function StudentContestDashboard({
                     titleAs="h3"
                     title={
                       phase === "during"
-                        ? "目前作答狀況"
+                        ? t("studentDashboard.records.currentStatus", "目前作答狀況")
                         : phase === "after" && contest.resultsPublished
-                          ? "作答紀錄與成績"
-                          : "作答紀錄"
+                          ? t(
+                              "studentDashboard.records.withResults",
+                              "作答紀錄與成績",
+                            )
+                          : t("studentDashboard.records.title", "作答紀錄")
                     }
                   />
                   {contest.contestType === "paper_exam"
@@ -845,20 +988,36 @@ export default function StudentContestDashboard({
           </DashboardBlock>
         </DashboardContainer>
 
-        <DashboardContainer layout="stack" dividers="auto" ariaLabel="競賽摘要">
+        <DashboardContainer
+          layout="stack"
+          dividers="auto"
+          ariaLabel={t("studentDashboard.summary.ariaLabel", "競賽摘要")}
+        >
           <DashboardBlock>
             <CountdownProgress
               startTime={contest.startTime}
               endTime={contest.endTime}
               afterPhase={
                 contest.resultsPublished
-                  ? { label: "考試成績", value: afterPhaseValue }
-                  : { label: "考試狀態", value: "等待成績發布" }
+                  ? {
+                      label: t("studentDashboard.summary.examResult", "考試成績"),
+                      value: afterPhaseValue,
+                    }
+                  : {
+                      label: t("studentDashboard.summary.examStatus", "考試狀態"),
+                      value: t(
+                        "studentDashboard.results.waitingPublish",
+                        "等待成績發布",
+                      ),
+                    }
               }
             />
           </DashboardBlock>
 
-          <KPIBlock title="完成率" value={`${progressPercent}%`}>
+          <KPIBlock
+            title={t("studentDashboard.summary.completionRate", "完成率")}
+            value={`${progressPercent}%`}
+          >
             <div className={styles.progressTrack} aria-hidden="true">
               <div
                 className={styles.progressFill}
@@ -869,10 +1028,17 @@ export default function StudentContestDashboard({
 
           {contest.resultsPublished && contest.contestType === "paper_exam" ? (
             <KPIBlock
-              title="成績分布"
+              title={t("studentDashboard.summary.scoreDistribution", "成績分布")}
               value={
                 scoreSummary
-                  ? `平均 ${scoreSummary.summary.average_score.toFixed(1)} / ${scoreSummary.summary.max_total_score}`
+                  ? tr(
+                      "studentDashboard.summary.averageScore",
+                      "平均 {{average}} / {{max}}",
+                      {
+                        average: scoreSummary.summary.average_score.toFixed(1),
+                        max: scoreSummary.summary.max_total_score,
+                      },
+                    )
                   : "—"
               }
             >
@@ -887,7 +1053,12 @@ export default function StudentContestDashboard({
                     options={scoreDistributionOptions}
                   />
                 ) : (
-                  <p className={styles.emptyText}>尚無成績分布資料。</p>
+                  <p className={styles.emptyText}>
+                    {t(
+                      "studentDashboard.empty.noScoreDistribution",
+                      "尚無成績分布資料。",
+                    )}
+                  </p>
                 )}
               </div>
             </KPIBlock>
@@ -902,12 +1073,12 @@ export default function StudentContestDashboard({
                   renderIcon={Flag}
                   onClick={() => setShowEndConfirm(true)}
                 >
-                  交卷
+                  {t("studentDashboard.actions.submit", "交卷")}
                 </Button>
               ) : null}
               {isAdmin && onOpenAdminPanel ? (
                 <Button kind="ghost" renderIcon={Launch} onClick={onOpenAdminPanel}>
-                  管理後台
+                  {t("studentDashboard.actions.adminPanel", "管理後台")}
                 </Button>
               ) : null}
             </div>
@@ -924,8 +1095,8 @@ export default function StudentContestDashboard({
 
       <Modal
         open={showEndConfirm}
-        modalHeading="確認交卷"
-        primaryButtonText="確認交卷"
+        modalHeading={t("studentDashboard.submitConfirm.heading", "確認交卷")}
+        primaryButtonText={t("studentDashboard.submitConfirm.confirm", "確認交卷")}
         secondaryButtonText={tc("button.cancel")}
         danger
         onRequestSubmit={() => {
@@ -934,13 +1105,22 @@ export default function StudentContestDashboard({
         }}
         onRequestClose={() => setShowEndConfirm(false)}
       >
-        <p>交卷後將無法繼續修改答案。</p>
+        <p>
+          {t(
+            "studentDashboard.submitConfirm.body",
+            "交卷後將無法繼續修改答案。",
+          )}
+        </p>
       </Modal>
 
       <Modal
         open={showReportModal}
         modalHeading={reportDownloadLabel}
-        primaryButtonText={reportDownloading ? "準備中" : "下載"}
+        primaryButtonText={
+          reportDownloading
+            ? t("studentDashboard.report.preparing", "準備中")
+            : t("studentDashboard.report.download", "下載")
+        }
         secondaryButtonText={tc("button.cancel")}
         primaryButtonDisabled={reportDownloading}
         onRequestSubmit={handleDownloadReport}
@@ -952,21 +1132,33 @@ export default function StudentContestDashboard({
         <div className={styles.modalStack}>
           <Select
             id="student-contest-report-language"
-            labelText="報告語言"
+            labelText={t("studentDashboard.report.language", "報告語言")}
             value={reportLanguage}
             onChange={(event) => setReportLanguage(event.target.value)}
           >
-            <SelectItem value="zh-TW" text="繁體中文" />
-            <SelectItem value="en" text="English" />
-            <SelectItem value="ja" text="日本語" />
-            <SelectItem value="ko" text="한국어" />
+            <SelectItem
+              value="zh-TW"
+              text={t("studentDashboard.report.languages.zhTW", "繁體中文")}
+            />
+            <SelectItem
+              value="en"
+              text={t("studentDashboard.report.languages.en", "English")}
+            />
+            <SelectItem
+              value="ja"
+              text={t("studentDashboard.report.languages.ja", "日本語")}
+            />
+            <SelectItem
+              value="ko"
+              text={t("studentDashboard.report.languages.ko", "한국어")}
+            />
           </Select>
           {reportError ? (
             <InlineNotification
               kind="error"
               lowContrast
               hideCloseButton
-              title="下載失敗"
+              title={t("studentDashboard.report.failedTitle", "下載失敗")}
               subtitle={reportError}
             />
           ) : null}

From d67258a072bf5fc9b32de6c6563d6f40d8ae4bdb Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:43:13 +0800
Subject: [PATCH 54/60] fix: localize contest admin dashboard

---
 .../admin/AdminOverviewCommandCenter.test.tsx |   6 +-
 .../admin/AdminOverviewCommandCenter.tsx      | 301 +++++++++----
 .../admin/AdminPreparationDashboard.tsx       |   4 +
 .../admin/AdminSegmentedDashboard.tsx         |   4 +-
 .../admin/panels/AdminOverviewScreen.tsx      |  20 +-
 .../panels/adminOverviewDashboard.model.ts    | 408 +++++++++++++-----
 frontend/src/i18n/locales/en/contest.json     | 306 ++++++++++++-
 frontend/src/i18n/locales/ja/contest.json     | 306 ++++++++++++-
 frontend/src/i18n/locales/ko/contest.json     | 306 ++++++++++++-
 frontend/src/i18n/locales/zh-TW/contest.json  | 306 ++++++++++++-
 10 files changed, 1763 insertions(+), 204 deletions(-)

diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
index e1e128b2..e9bc3b3f 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
@@ -382,14 +382,14 @@ describe("AdminOverviewCommandCenter", () => {
     const lockedCard = screen.getByRole("button", { name: /王小明/ });
     expect(within(lockedCard).getByText("分數")).toBeInTheDocument();
     expect(within(lockedCard).getByText("82")).toBeInTheDocument();
-    expect(within(lockedCard).queryByText("違規")).not.toBeInTheDocument();
+    expect(within(lockedCard).queryByText("異常事件")).not.toBeInTheDocument();
     expect(within(lockedCard).getByText("@ming")).toBeInTheDocument();
     expect(within(lockedCard).getByText("在線")).toBeInTheDocument();
     const metricSwitch = screen.getByLabelText("考生卡片資料切換");
 
-    await userEvent.click(within(metricSwitch).getByText("違規"));
+    await userEvent.click(within(metricSwitch).getByText("異常事件"));
 
-    expect(within(lockedCard).getByText("違規")).toBeInTheDocument();
+    expect(within(lockedCard).getByText("異常事件")).toBeInTheDocument();
     expect(within(lockedCard).getByText("2")).toBeInTheDocument();
 
     await userEvent.click(within(metricSwitch).getByText("作答進度"));
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
index 3e7d3608..5a9595dc 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
@@ -157,11 +157,6 @@ const getParticipantStatusLabel = (participant: ContestParticipant) =>
   EXAM_STATUS_LABELS[participant.examStatus] ||
   participant.examStatus;
 
-const getStatusGroupLabel = (status: string) =>
-  getExamStatusLabel(status as ContestParticipant["examStatus"]) ||
-  EXAM_STATUS_LABELS[status as ContestParticipant["examStatus"]] ||
-  status;
-
 type ParticipantMetricKey =
   | "score"
   | "violations"
@@ -178,12 +173,25 @@ interface ParticipantMetricDisplay {
 
 const PARTICIPANT_METRIC_OPTIONS: Array<{
   key: ParticipantMetricKey;
-  label: string;
+  labelKey: string;
+  defaultLabel: string;
 }> = [
-  { key: "score", label: "分數" },
-  { key: "violations", label: "違規" },
-  { key: "answerProgress", label: "作答進度" },
-  { key: "gradingProgress", label: "批改進度" },
+  { key: "score", labelKey: "adminOverview.command.metric.score", defaultLabel: "分數" },
+  {
+    key: "violations",
+    labelKey: "adminOverview.command.metric.violations",
+    defaultLabel: "異常事件",
+  },
+  {
+    key: "answerProgress",
+    labelKey: "adminOverview.command.metric.answerProgress",
+    defaultLabel: "作答進度",
+  },
+  {
+    key: "gradingProgress",
+    labelKey: "adminOverview.command.metric.gradingProgress",
+    defaultLabel: "批改進度",
+  },
 ];
 
 const DATE_TIME_LABEL_REGEX = /^(\d{4}\/\d{2}\/\d{2})\s+(\d{2}:\d{2})$/;
@@ -217,66 +225,101 @@ type ParticipantStatusFilter =
 
 type FilterOption<TId extends string = string> = {
   id: TId;
-  label: string;
+  labelKey: string;
+  defaultLabel: string;
 };
 
 const PARTICIPANT_STATUS_FILTERS: FilterOption<ParticipantStatusFilter>[] = [
-  { id: "all", label: "全部狀態" },
-  { id: "needs_attention", label: "需要處理" },
-  { id: "in_progress", label: "作答中" },
-  { id: "submitted", label: "已交卷" },
-  { id: "not_started", label: "未開始" },
-  { id: "locked", label: "鎖定" },
-  { id: "paused", label: "暫停" },
+  { id: "all", labelKey: "adminOverview.command.filters.allStatuses", defaultLabel: "全部狀態" },
+  {
+    id: "needs_attention",
+    labelKey: "adminOverview.command.filters.needsAttention",
+    defaultLabel: "需要處理",
+  },
+  { id: "in_progress", labelKey: "examStatus.in_progress", defaultLabel: "作答中" },
+  { id: "submitted", labelKey: "examStatus.submitted", defaultLabel: "已交卷" },
+  { id: "not_started", labelKey: "examStatus.not_started", defaultLabel: "未開始" },
+  { id: "locked", labelKey: "examStatus.locked", defaultLabel: "鎖定" },
+  { id: "paused", labelKey: "examStatus.paused", defaultLabel: "暫停" },
 ];
 
 const QUESTION_KIND_FILTERS: FilterOption[] = [
-  { id: "all", label: "全部題型" },
-  { id: "single_choice", label: "單選題" },
-  { id: "multiple_choice", label: "多選題" },
-  { id: "true_false", label: "是非題" },
-  { id: "short_answer", label: "簡答題" },
-  { id: "essay", label: "申論題" },
+  { id: "all", labelKey: "adminOverview.command.filters.allQuestionTypes", defaultLabel: "全部題型" },
+  { id: "single_choice", labelKey: "common:questionType.label.single_choice", defaultLabel: "單選題" },
+  { id: "multiple_choice", labelKey: "common:questionType.label.multiple_choice", defaultLabel: "多選題" },
+  { id: "true_false", labelKey: "common:questionType.label.true_false", defaultLabel: "是非題" },
+  { id: "short_answer", labelKey: "common:questionType.label.short_answer", defaultLabel: "簡答題" },
+  { id: "essay", labelKey: "common:questionType.label.essay", defaultLabel: "申論題" },
 ];
 
-const getAnswerProgressMetric = (participant: ContestParticipant) => {
+type DashboardTranslate = (
+  key: string,
+  defaultValue: string,
+  values?: Record<string, string | number>,
+) => string;
+
+const getAnswerProgressMetric = (
+  participant: ContestParticipant,
+  tr: DashboardTranslate,
+) => {
   switch (participant.examStatus) {
     case "submitted":
-      return { value: "100%", detail: "已交卷" };
+      return { value: "100%", detail: tr("examStatus.submitted", "已交卷") };
     case "in_progress":
-      return { value: "進行中", detail: "作答中" };
+      return {
+        value: tr("adminOverview.command.metric.inProgress", "進行中"),
+        detail: tr("examStatus.in_progress", "作答中"),
+      };
     case "locked":
-      return { value: "中斷", detail: "已鎖定" };
+      return {
+        value: tr("adminOverview.command.metric.interrupted", "中斷"),
+        detail: tr("examStatus.locked", "已鎖定"),
+      };
     case "paused":
-      return { value: "暫停", detail: "已暫停" };
+      return {
+        value: tr("examStatus.paused", "暫停"),
+        detail: tr("adminOverview.command.metric.pausedDetail", "已暫停"),
+      };
     default:
-      return { value: "0%", detail: "未開始" };
+      return { value: "0%", detail: tr("examStatus.not_started", "未開始") };
   }
 };
 
-const getGradingProgressMetric = (participant: ContestParticipant) => {
+const getGradingProgressMetric = (
+  participant: ContestParticipant,
+  tr: DashboardTranslate,
+) => {
   if (participant.examStatus === "submitted") {
-    return { value: "已計分", detail: `${participant.score ?? 0} 分` };
+    return {
+      value: tr("adminOverview.command.metric.scored", "已計分"),
+      detail: tr("adminOverview.command.metric.scoreUnit", "{{score}} 分", {
+        score: participant.score ?? 0,
+      }),
+    };
   }
-  return { value: "未交卷", detail: getParticipantStatusLabel(participant) };
+  return {
+    value: tr("adminOverview.command.metric.notSubmitted", "未交卷"),
+    detail: getParticipantStatusLabel(participant),
+  };
 };
 
 const getParticipantMetric = (
   participant: ContestParticipant,
   metric: ParticipantMetricKey,
+  tr: DashboardTranslate,
 ): ParticipantMetricDisplay => {
   if (metric === "violations") {
     return {
-      label: "違規",
+      label: tr("adminOverview.command.metric.violations", "異常事件"),
       value: String(participant.violationCount ?? 0),
-      detail: "次",
+      detail: tr("adminOverview.command.metric.eventUnit", "次"),
       tone: (participant.violationCount ?? 0) > 0 ? "danger" : "neutral",
     };
   }
   if (metric === "answerProgress") {
     return {
-      label: "作答進度",
-      ...getAnswerProgressMetric(participant),
+      label: tr("adminOverview.command.metric.answerProgress", "作答進度"),
+      ...getAnswerProgressMetric(participant, tr),
       tone:
         participant.examStatus === "locked" ||
         participant.examStatus === "paused"
@@ -287,15 +330,15 @@ const getParticipantMetric = (
   }
   if (metric === "gradingProgress") {
     return {
-      label: "批改進度",
-      ...getGradingProgressMetric(participant),
+      label: tr("adminOverview.command.metric.gradingProgress", "批改進度"),
+      ...getGradingProgressMetric(participant, tr),
       tone: "neutral",
     };
   }
   return {
-    label: "分數",
+    label: tr("adminOverview.command.metric.score", "分數"),
     value: String(participant.score ?? 0),
-    detail: "分",
+    detail: tr("adminOverview.command.metric.pointUnit", "分"),
     tone: "neutral",
   };
 };
@@ -317,6 +360,22 @@ export default function AdminOverviewCommandCenter({
   gradingAction,
 }: AdminOverviewCommandCenterProps) {
   const { t } = useTranslation("contest");
+  const tr = useCallback(
+    (
+      key: string,
+      defaultValue: string,
+      values?: Record<string, string | number>,
+    ) => {
+      const translated = values
+        ? t(key, { defaultValue, ...values })
+        : t(key, defaultValue);
+      if (typeof translated === "string") return translated;
+      return defaultValue.replace(/{{(\w+)}}/g, (_, name) =>
+        String(values?.[name] ?? ""),
+      );
+    },
+    [t],
+  );
   const { showToast } = useToast();
   const { confirm, modalProps: confirmModalProps } = useConfirmModal();
   const { contest } = useContest();
@@ -617,14 +676,22 @@ export default function AdminOverviewCommandCenter({
       ? [
           {
             id: "needs_attention",
-            title: "需要處理",
+            title: tr(
+              "adminOverview.command.filters.needsAttention",
+              "需要處理",
+            ),
             participants: participantsNeedingAttention,
           },
         ]
       : []),
     ...statusGroupKeys.map((status) => ({
       id: status,
-      title: getStatusGroupLabel(status),
+      title: tr(
+        `examStatus.${status}`,
+        getExamStatusLabel(status as ContestParticipant["examStatus"]) ||
+          EXAM_STATUS_LABELS[status as ContestParticipant["examStatus"]] ||
+          status,
+      ),
       participants: normalParticipantsByStatus[status],
     })),
   ];
@@ -635,12 +702,18 @@ export default function AdminOverviewCommandCenter({
     setParticipantSearch(event.target.value);
   };
   const participantMetricTags = (
-    <div className={styles.metricTagGroup} aria-label="考生卡片資料切換">
+    <div
+      className={styles.metricTagGroup}
+      aria-label={t(
+        "adminOverview.command.metricSwitcher",
+        "考生卡片資料切換",
+      )}
+    >
       {PARTICIPANT_METRIC_OPTIONS.map((option) => (
         <SelectableTag
           key={option.key}
           id={`participant-metric-${option.key}`}
-          text={option.label}
+          text={t(option.labelKey, option.defaultLabel)}
           selected={participantMetric === option.key}
           onChange={() => setParticipantMetric(option.key)}
           size="sm"
@@ -668,35 +741,43 @@ export default function AdminOverviewCommandCenter({
     <DashboardContainer
       layout="stack"
       dividers="auto"
-      ariaLabel="考試狀態摘要"
+      ariaLabel={t("adminOverview.command.examStatusSummary", "考試狀態摘要")}
     >
       <DashboardContainer layout="grid" columns={2} dividers="auto">
         <DashboardBlock>
           <MetricBlock
-            label="考試人數"
+            label={t("adminOverview.command.metrics.examParticipants", "考試人數")}
             value={studentParticipants.length}
             size="lg"
           />
         </DashboardBlock>
         <DashboardBlock>
-          <MetricBlock label="在線人數" value={liveStudentCount} size="lg" />
+          <MetricBlock
+            label={t("adminOverview.command.metrics.onlineParticipants", "在線人數")}
+            value={liveStudentCount}
+            size="lg"
+          />
         </DashboardBlock>
       </DashboardContainer>
       <DashboardContainer
         layout="grid"
         columns={2}
         dividers="auto"
-        ariaLabel="考試時間"
+        ariaLabel={t("adminOverview.command.examTime", "考試時間")}
       >
         <DashboardBlock>
           <MetricBlock
-            label="開始時間"
+            label={t("adminOverview.command.metrics.startTime", "開始時間")}
             value={scheduleLabels.start}
             size="lg"
           />
         </DashboardBlock>
         <DashboardBlock>
-          <MetricBlock label="結束時間" value={scheduleLabels.end} size="lg" />
+          <MetricBlock
+            label={t("adminOverview.command.metrics.endTime", "結束時間")}
+            value={scheduleLabels.end}
+            size="lg"
+          />
         </DashboardBlock>
       </DashboardContainer>
       <DashboardBlock>
@@ -744,7 +825,10 @@ export default function AdminOverviewCommandCenter({
     />
   );
   const participantContent = adminLoading ? (
-    <div className={styles.participantGridSections} aria-label="考生列表載入中">
+    <div
+      className={styles.participantGridSections}
+      aria-label={t("adminOverview.command.participants.loading", "考生列表載入中")}
+    >
       {Array.from({ length: 8 }).map((_, index) => (
         <div className={styles.participantCard} key={index}>
           <SkeletonText heading width="60%" />
@@ -754,7 +838,9 @@ export default function AdminOverviewCommandCenter({
       ))}
     </div>
   ) : filteredStudentParticipants.length === 0 ? (
-    <div className={styles.emptyState}>目前沒有考生</div>
+    <div className={styles.emptyState}>
+      {t("adminOverview.command.participants.empty", "目前沒有考生")}
+    </div>
   ) : (
     <div className={styles.participantGridSections}>
       {participantGroups.map((group) => {
@@ -778,6 +864,7 @@ export default function AdminOverviewCommandCenter({
                 const metric = getParticipantMetric(
                   participant,
                   participantMetric,
+                  tr,
                 );
                 const MetricIcon = metric.icon;
                 return (
@@ -796,9 +883,15 @@ export default function AdminOverviewCommandCenter({
                             className={
                               live ? styles.liveDot : styles.offlineDot
                             }
-                            aria-label={live ? "在線" : "離線"}
+                            aria-label={
+                              live
+                                ? t("adminOverview.command.connection.online", "在線")
+                                : t("adminOverview.command.connection.offline", "離線")
+                            }
                           />
-                          {live ? "在線" : "離線"}
+                          {live
+                            ? t("adminOverview.command.connection.online", "在線")
+                            : t("adminOverview.command.connection.offline", "離線")}
                         </span>
                       </div>
                       <div
@@ -825,7 +918,9 @@ export default function AdminOverviewCommandCenter({
   );
   const participantPanel = (
     <div className={styles.drilldownPanel}>
-      <BlockHeader title="考生列表" />
+      <BlockHeader
+        title={t("adminOverview.command.participants.title", "考生列表")}
+      />
       {participantMetricTags}
       {participantContent}
     </div>
@@ -834,8 +929,11 @@ export default function AdminOverviewCommandCenter({
     <DashboardToolbar>
       <DashboardToolbar.Search
         id="overview-participants-search"
-        ariaLabel="搜尋考生"
-        placeholder="搜尋顯示名稱或使用者名稱..."
+        ariaLabel={t("adminOverview.command.participants.search", "搜尋考生")}
+        placeholder={t(
+          "adminOverview.command.participants.searchPlaceholder",
+          "搜尋顯示名稱或使用者名稱...",
+        )}
         value={participantSearch}
         onChange={(value) =>
           handleParticipantSearchChange({
@@ -847,18 +945,24 @@ export default function AdminOverviewCommandCenter({
       <DashboardToolbar.Filter>
         <OverflowMenu
           renderIcon={Filter}
-          iconDescription="篩選狀態"
+          iconDescription={t(
+            "adminOverview.command.participants.filterStatus",
+            "篩選狀態",
+          )}
           size="md"
           flipped
-          aria-label="篩選考生狀態"
+          aria-label={t(
+            "adminOverview.command.participants.filterStatusAria",
+            "篩選考生狀態",
+          )}
         >
           {PARTICIPANT_STATUS_FILTERS.map((option) => (
             <OverflowMenuItem
               key={option.id}
               itemText={
                 participantStatusFilter === option.id
-                  ? `✓  ${option.label}`
-                  : option.label
+                  ? `✓  ${t(option.labelKey, option.defaultLabel)}`
+                  : t(option.labelKey, option.defaultLabel)
               }
               onClick={() => setParticipantStatusFilter(option.id)}
             />
@@ -887,7 +991,12 @@ export default function AdminOverviewCommandCenter({
             },
           )
         : questionStatsGallery ?? (
-        <div className={styles.emptyState}>目前沒有作答分佈資料</div>
+        <div className={styles.emptyState}>
+          {t(
+            "adminOverview.command.questionStats.empty",
+            "目前沒有作答分佈資料",
+          )}
+        </div>
       )}
     </div>
   );
@@ -895,8 +1004,11 @@ export default function AdminOverviewCommandCenter({
     <DashboardToolbar>
       <DashboardToolbar.Search
         id="overview-question-stats-search"
-        ariaLabel="搜尋題目"
-        placeholder="搜尋題號或題目..."
+        ariaLabel={t("adminOverview.command.questionStats.search", "搜尋題目")}
+        placeholder={t(
+          "adminOverview.command.questionStats.searchPlaceholder",
+          "搜尋題號或題目...",
+        )}
         value={questionStatsSearch}
         onChange={setQuestionStatsSearch}
         onClear={() => setQuestionStatsSearch("")}
@@ -904,18 +1016,24 @@ export default function AdminOverviewCommandCenter({
       <DashboardToolbar.Filter>
         <OverflowMenu
           renderIcon={Filter}
-          iconDescription="篩選題型"
+          iconDescription={t(
+            "adminOverview.command.questionStats.filterQuestionType",
+            "篩選題型",
+          )}
           size="md"
           flipped
-          aria-label="篩選題型"
+          aria-label={t(
+            "adminOverview.command.questionStats.filterQuestionTypeAria",
+            "篩選題型",
+          )}
         >
           {QUESTION_KIND_FILTERS.map((option) => (
             <OverflowMenuItem
               key={option.id}
               itemText={
                 questionStatsKindFilter === option.id
-                  ? `✓  ${option.label}`
-                  : option.label
+                  ? `✓  ${t(option.labelKey, option.defaultLabel)}`
+                  : t(option.labelKey, option.defaultLabel)
               }
               onClick={() => setQuestionStatsKindFilter(option.id)}
             />
@@ -925,7 +1043,10 @@ export default function AdminOverviewCommandCenter({
     </DashboardToolbar>
   );
   const drilldownPanel = (
-    <DashboardBlock padding="flush" ariaLabel="總覽資料切換">
+    <DashboardBlock
+      padding="flush"
+      ariaLabel={t("adminOverview.command.drilldown.ariaLabel", "總覽資料切換")}
+    >
       <DashboardTabs
         activeId={activePanelTab}
         onChange={(id) =>
@@ -933,10 +1054,16 @@ export default function AdminOverviewCommandCenter({
         }
       >
         <DashboardTabBar
-          ariaLabel="總覽資料切換"
+          ariaLabel={t("adminOverview.command.drilldown.ariaLabel", "總覽資料切換")}
           tabs={[
-            { id: "participants", label: "參與者" },
-            { id: "questionStats", label: "作答分佈" },
+            {
+              id: "participants",
+              label: t("adminOverview.command.drilldown.participants", "參與者"),
+            },
+            {
+              id: "questionStats",
+              label: t("adminOverview.command.drilldown.questionStats", "作答分佈"),
+            },
           ]}
           toolbar={
             activePanelTab === "participants"
@@ -956,7 +1083,11 @@ export default function AdminOverviewCommandCenter({
   return (
     <>
       <AdminSegmentedDashboard
-        ariaLabel="教師管理總覽"
+        ariaLabel={t("adminOverview.command.ariaLabel", "教師管理總覽")}
+        tabListAriaLabel={t(
+          "adminOverview.command.tabsAriaLabel",
+          "教師管理總覽分頁",
+        )}
         header={header}
         primary={
           <div className={styles.leftOverviewColumn}>
@@ -987,7 +1118,10 @@ export default function AdminOverviewCommandCenter({
                   : []),
               ]}
             />
-            <section className={styles.eventLogPanel} aria-label="事件紀錄">
+            <section
+              className={styles.eventLogPanel}
+              aria-label={t("adminOverview.command.eventLog", "事件紀錄")}
+            >
               <PriorityEventsInsightCard
                 card={priorityEventsCard}
                 loading={adminLoading || examEventsLoading}
@@ -1009,7 +1143,10 @@ export default function AdminOverviewCommandCenter({
             <motion.button
               type="button"
               className={styles.participantDrawerBackdrop}
-              aria-label="關閉學生詳細資訊背景"
+              aria-label={t(
+                "adminOverview.command.drawer.closeBackdrop",
+                "關閉學生詳細資訊背景",
+              )}
               onClick={() => setSelectedUserId(null)}
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
@@ -1020,19 +1157,25 @@ export default function AdminOverviewCommandCenter({
               className={styles.participantDrawer}
               role="dialog"
               aria-modal="true"
-              aria-label="學生詳細資訊"
+              aria-label={t(
+                "adminOverview.command.drawer.ariaLabel",
+                "學生詳細資訊",
+              )}
               initial={{ x: 24, opacity: 0 }}
               animate={{ x: 0, opacity: 1 }}
               exit={{ x: 24, opacity: 0 }}
               transition={{ duration: 0.2, ease: "easeOut" }}
             >
               <div className={styles.participantDrawerToolbar}>
-                <h3>學生詳細資訊</h3>
+                <h3>{t("adminOverview.command.drawer.title", "學生詳細資訊")}</h3>
                 <Button
                   kind="ghost"
                   hasIconOnly
                   renderIcon={Close}
-                  iconDescription="關閉學生詳細資訊"
+                  iconDescription={t(
+                    "adminOverview.command.drawer.close",
+                    "關閉學生詳細資訊",
+                  )}
                   onClick={() => setSelectedUserId(null)}
                 />
               </div>
diff --git a/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx b/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx
index c3322919..d98b69cd 100644
--- a/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx
+++ b/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx
@@ -97,6 +97,10 @@ export default function AdminPreparationDashboard({
   return (
     <AdminSegmentedDashboard
       ariaLabel={t("adminPreparationDashboard.ariaLabel", "準備與成績儀表板")}
+      tabListAriaLabel={t(
+        "adminPreparationDashboard.tabs.ariaLabel",
+        "準備與成績分頁",
+      )}
       primary={primary}
       side={<AdminInsightRail cards={data.insightCards} />}
       tabs={[
diff --git a/frontend/src/features/contest/components/admin/AdminSegmentedDashboard.tsx b/frontend/src/features/contest/components/admin/AdminSegmentedDashboard.tsx
index 5d5fbf9b..d993f01e 100644
--- a/frontend/src/features/contest/components/admin/AdminSegmentedDashboard.tsx
+++ b/frontend/src/features/contest/components/admin/AdminSegmentedDashboard.tsx
@@ -10,6 +10,7 @@ export interface AdminSegmentedDashboardTab {
 
 interface AdminSegmentedDashboardProps {
   ariaLabel: string;
+  tabListAriaLabel?: string;
   header?: ReactNode;
   primary: ReactNode;
   side: ReactNode;
@@ -18,6 +19,7 @@ interface AdminSegmentedDashboardProps {
 
 export default function AdminSegmentedDashboard({
   ariaLabel,
+  tabListAriaLabel,
   header,
   primary,
   side,
@@ -33,7 +35,7 @@ export default function AdminSegmentedDashboard({
       {tabs && tabs.length > 0 ? (
         <div className={styles.tabsPanel}>
           <Tabs>
-            <TabList aria-label={`${ariaLabel} 分頁`}>
+            <TabList aria-label={tabListAriaLabel ?? ariaLabel}>
               {tabs.map((tab) => (
                 <Tab key={tab.key}>{tab.label}</Tab>
               ))}
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
index 956dbf1b..2387721a 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
+++ b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
@@ -32,7 +32,10 @@ import {
   BlockHeader,
   DashboardBlock,
 } from "@/shared/components/dashboard";
-import { buildAdminOverviewDashboard } from "./adminOverviewDashboard.model";
+import {
+  buildAdminOverviewDashboard,
+  type DashboardText,
+} from "./adminOverviewDashboard.model";
 import styles from "./AdminOverviewScreen.module.scss";
 
 type ContestStatusDisplay = {
@@ -72,6 +75,18 @@ export default function AdminOverviewScreen({
   onOpenSettings,
 }: AdminPanelProps) {
   const { t } = useTranslation("contest");
+  const tr = useCallback<DashboardText>(
+    (key, defaultValue, values) => {
+      const translated = values
+        ? t(key, { defaultValue, ...values })
+        : t(key, defaultValue);
+      if (typeof translated === "string") return translated;
+      return defaultValue.replace(/{{(\w+)}}/g, (_, name) =>
+        String(values?.[name] ?? ""),
+      );
+    },
+    [t],
+  );
   const { showToast } = useToast();
   const contestStatusDisplay = useContestStatusDisplay();
   const { contest, refreshContest } = useContest();
@@ -145,8 +160,9 @@ export default function AdminOverviewScreen({
       examEvents,
       overviewMetrics,
       gradingStats: globalStats,
+      tr,
     });
-  }, [contest, participants, examEvents, overviewMetrics, globalStats]);
+  }, [contest, participants, examEvents, overviewMetrics, globalStats, tr]);
 
   const openPanel = useCallback(
     (panel: AdminPanelId) => {
diff --git a/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.ts b/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.ts
index 35311cab..0918ac0c 100644
--- a/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.ts
+++ b/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.ts
@@ -11,6 +11,23 @@ import {
   formatDuration,
 } from "@/features/contest/components/admin/overviewMetrics.utils";
 
+export type DashboardText = (
+  key: string,
+  defaultValue: string,
+  values?: Record<string, string | number>,
+) => string;
+
+const interpolateDashboardText = (
+  defaultValue: string,
+  values?: Record<string, string | number>,
+) =>
+  defaultValue.replace(/{{(\w+)}}/g, (_, name) =>
+    String(values?.[name] ?? ""),
+  );
+
+const defaultDashboardText: DashboardText = (_key, defaultValue, values) =>
+  interpolateDashboardText(defaultValue, values);
+
 export type OverviewKpiKey =
   | "online"
   | "started"
@@ -243,10 +260,15 @@ const formatScheduleDateTime = (
   return dateTime === "-" ? dateTime : dateTime.replace(" ", "\n");
 };
 
-const formatWindow = (contest: ContestDetail) => {
+const formatWindow = (
+  contest: ContestDetail,
+  tr: DashboardText = defaultDashboardText,
+) => {
   const start = formatTime(contest.startTime);
   const end = formatTime(contest.endTime);
-  if (start === "-" || end === "-") return "未設定";
+  if (start === "-" || end === "-") {
+    return tr("adminOverview.model.common.unset", "未設定");
+  }
   return `${start}-${end}`;
 };
 
@@ -256,15 +278,17 @@ const buildTimelineSummary = ({
   contest,
   now,
   progressPercent,
+  tr = defaultDashboardText,
 }: {
   contest: ContestDetail;
   now: Date;
   progressPercent?: number;
+  tr?: DashboardText;
 }): DashboardTimelineSummary => {
   const start = Date.parse(contest.startTime);
   const end = Date.parse(contest.endTime);
   const nowMs = now.getTime();
-  const timeWindowLabel = formatWindow(contest);
+  const timeWindowLabel = formatWindow(contest, tr);
   const startDateKey = formatDateKey(contest.startTime);
   const endDateKey = formatDateKey(contest.endTime);
   const isCrossDay = Boolean(
@@ -275,8 +299,8 @@ const buildTimelineSummary = ({
 
   if (!Number.isFinite(start) || !Number.isFinite(end) || end <= start) {
     return {
-      phaseLabel: "時間未設定",
-      primaryTimeLabel: "未設定",
+      phaseLabel: tr("adminOverview.model.timeline.timeUnset", "時間未設定"),
+      primaryTimeLabel: tr("adminOverview.model.common.unset", "未設定"),
       timeWindowLabel,
       startDateTimeLabel,
       endDateTimeLabel,
@@ -286,8 +310,12 @@ const buildTimelineSummary = ({
 
   if (nowMs < start) {
     return {
-      phaseLabel: "尚未開始",
-      primaryTimeLabel: `距離開始 ${formatDuration((start - nowMs) / 1000)}`,
+      phaseLabel: tr("adminOverview.model.timeline.notStarted", "尚未開始"),
+      primaryTimeLabel: tr(
+        "adminOverview.model.timeline.startsIn",
+        "距離開始 {{time}}",
+        { time: formatDuration((start - nowMs) / 1000) },
+      ),
       timeWindowLabel,
       startDateTimeLabel,
       endDateTimeLabel,
@@ -297,8 +325,11 @@ const buildTimelineSummary = ({
 
   if (nowMs >= end) {
     return {
-      phaseLabel: "已結束",
-      primaryTimeLabel: "考試已結束",
+      phaseLabel: tr("adminOverview.model.timeline.ended", "已結束"),
+      primaryTimeLabel: tr(
+        "adminOverview.model.timeline.examEnded",
+        "考試已結束",
+      ),
       timeWindowLabel,
       startDateTimeLabel,
       endDateTimeLabel,
@@ -309,8 +340,10 @@ const buildTimelineSummary = ({
   const resolvedProgress =
     progressPercent ?? ((nowMs - start) / Math.max(1, end - start)) * 100;
   return {
-    phaseLabel: "進行中",
-    primaryTimeLabel: `剩餘 ${formatDuration((end - nowMs) / 1000)}`,
+    phaseLabel: tr("adminOverview.model.timeline.running", "進行中"),
+    primaryTimeLabel: tr("adminOverview.model.timeline.remaining", "剩餘 {{time}}", {
+      time: formatDuration((end - nowMs) / 1000),
+    }),
     timeWindowLabel,
     startDateTimeLabel,
     endDateTimeLabel,
@@ -332,13 +365,19 @@ const getWorkItemCount = (contest: ContestDetail) =>
 const percentage = (value: number, total: number) =>
   total <= 0 ? 0 : Math.round((value / total) * 100);
 
-const buildProgressSeries = (percent: number): DashboardChartSeries[] => [
+const buildProgressSeries = (
+  percent: number,
+  tr: DashboardText = defaultDashboardText,
+): DashboardChartSeries[] => [
   {
     key: "progress",
-    label: "進度",
+    label: tr("adminOverview.model.progress.label", "進度"),
     values: [
-      { label: "開始", value: 0 },
-      { label: "目前", value: clampPercent(percent) },
+      { label: tr("adminOverview.model.progress.start", "開始"), value: 0 },
+      {
+        label: tr("adminOverview.model.progress.current", "目前"),
+        value: clampPercent(percent),
+      },
     ],
   },
 ];
@@ -362,10 +401,12 @@ export const getTeacherAttentionRows = ({
   participants,
   examEvents,
   limit = 5,
+  tr = defaultDashboardText,
 }: {
   participants: ContestParticipant[];
   examEvents: ExamEvent[];
   limit?: number;
+  tr?: DashboardText;
 }): TeacherAttentionRow[] => {
   const latest = latestEventByUser(
     examEvents.filter((event) => event.eventType !== "heartbeat"),
@@ -392,8 +433,10 @@ export const getTeacherAttentionRows = ({
       rows.push({
         ...common,
         kind: "locked",
-        statusLabel: "鎖定",
-        eventLabel: participant.lockReason || "考試已鎖定",
+        statusLabel: tr("adminOverview.model.status.locked", "鎖定"),
+        eventLabel:
+          participant.lockReason ||
+          tr("adminOverview.model.attention.examLocked", "考試已鎖定"),
         panelTarget: "participants",
       });
       continue;
@@ -403,10 +446,14 @@ export const getTeacherAttentionRows = ({
       rows.push({
         ...common,
         kind: "violation",
-        statusLabel: "違規",
+        statusLabel: tr("adminOverview.model.status.anomaly", "異常"),
         eventLabel: latestEvent
           ? latestEvent.eventType
-          : `${participant.violationCount} 次違規`,
+          : tr(
+              "adminOverview.model.attention.anomalyCount",
+              "{{count}} 次異常",
+              { count: participant.violationCount ?? 0 },
+            ),
         panelTarget: "logs",
       });
       continue;
@@ -416,8 +463,11 @@ export const getTeacherAttentionRows = ({
       rows.push({
         ...common,
         kind: "offline",
-        statusLabel: "離線",
-        eventLabel: "連線中斷",
+        statusLabel: tr("adminOverview.model.status.offline", "離線"),
+        eventLabel: tr(
+          "adminOverview.model.attention.connectionInterrupted",
+          "連線中斷",
+        ),
         panelTarget: "participants",
       });
       continue;
@@ -427,8 +477,11 @@ export const getTeacherAttentionRows = ({
       rows.push({
         ...common,
         kind: "not_started",
-        statusLabel: "未開始",
-        eventLabel: "尚未進入考試",
+        statusLabel: tr("adminOverview.model.status.notStarted", "未開始"),
+        eventLabel: tr(
+          "adminOverview.model.attention.notEntered",
+          "尚未進入考試",
+        ),
         panelTarget: "participants",
       });
     }
@@ -446,6 +499,7 @@ export const getTeacherAttentionRows = ({
 
 const buildDistribution = (
   participants: ContestParticipant[],
+  tr: DashboardText = defaultDashboardText,
 ): DistributionItem[] => {
   const students = studentParticipants(participants);
   const total = students.length;
@@ -455,29 +509,29 @@ const buildDistribution = (
   const items = [
     {
       key: "in_progress" as const,
-      label: "作答中",
+      label: tr("adminOverview.model.status.inProgress", "作答中"),
       value: count((p) => p.examStatus === "in_progress"),
     },
     {
       key: "not_started" as const,
-      label: "未開始",
+      label: tr("adminOverview.model.status.notStarted", "未開始"),
       value: count((p) => p.examStatus === "not_started"),
     },
     {
       key: "submitted" as const,
-      label: "已交卷",
+      label: tr("adminOverview.model.status.submitted", "已交卷"),
       value: count((p) => p.examStatus === "submitted"),
     },
     {
       key: "locked" as const,
-      label: "鎖定",
+      label: tr("adminOverview.model.status.locked", "鎖定"),
       value: count(
         (p) => p.examStatus === "locked" || p.examStatus === "paused",
       ),
     },
     {
       key: "offline" as const,
-      label: "離線",
+      label: tr("adminOverview.model.status.offline", "離線"),
       value: count((p) => p.connectionStatus === "offline"),
     },
   ];
@@ -506,6 +560,7 @@ const buildRecentEvents = (examEvents: ExamEvent[]): RecentExamEventItem[] =>
 
 const buildPriorityEventSeries = (
   examEvents: ExamEvent[],
+  tr: DashboardText = defaultDashboardText,
 ): DashboardChartSeries[] => {
   const priorityEvents = examEvents
     .filter((event) => {
@@ -517,7 +572,10 @@ const buildPriorityEventSeries = (
     new Set(priorityEvents.map((event) => formatTime(event.timestamp))),
   ).slice(-8);
 
-  const safeLabels = bucketLabels.length > 0 ? bucketLabels : ["目前"];
+  const safeLabels =
+    bucketLabels.length > 0
+      ? bucketLabels
+      : [tr("adminOverview.model.progress.current", "目前")];
   const countFor = (priority: number, label: string) =>
     priorityEvents.filter(
       (event) =>
@@ -558,11 +616,13 @@ const buildInsightCards = ({
   gradingLabel,
   examProgressPercent,
   examEvents,
+  tr = defaultDashboardText,
 }: {
   gradingPercent: number;
   gradingLabel: string;
   examProgressPercent: number;
   examEvents: ExamEvent[];
+  tr?: DashboardText;
 }): DashboardInsightCard[] => {
   const priorityTotal = examEvents.filter((event) => {
     const priority = getEventPriority(event.eventType);
@@ -572,26 +632,26 @@ const buildInsightCards = ({
   return [
     {
       key: "grading_progress",
-      title: "批改進度",
+      title: tr("adminOverview.model.insights.gradingProgress", "批改進度"),
       value: gradingLabel,
       kind: "progress",
       progressPercent: gradingPercent,
-      series: buildProgressSeries(gradingPercent),
+      series: buildProgressSeries(gradingPercent, tr),
     },
     {
       key: "exam_progress",
-      title: "考試進度",
+      title: tr("adminOverview.model.insights.examProgress", "考試進度"),
       value: `${Math.round(clampPercent(examProgressPercent))}%`,
       kind: "progress",
       progressPercent: examProgressPercent,
-      series: buildProgressSeries(examProgressPercent),
+      series: buildProgressSeries(examProgressPercent, tr),
     },
     {
       key: "priority_events",
-      title: "違規事件",
+      title: tr("adminOverview.model.insights.priorityEvents", "異常事件"),
       value: String(priorityTotal),
       kind: "line",
-      series: buildPriorityEventSeries(examEvents),
+      series: buildPriorityEventSeries(examEvents, tr),
     },
   ];
 };
@@ -603,6 +663,7 @@ export const buildAdminOverviewDashboard = ({
   overviewMetrics,
   gradingStats,
   now = new Date(),
+  tr = defaultDashboardText,
 }: {
   contest: ContestDetail;
   participants: ContestParticipant[];
@@ -610,6 +671,7 @@ export const buildAdminOverviewDashboard = ({
   overviewMetrics: ContestOverviewMetrics | null;
   gradingStats?: GlobalStats;
   now?: Date;
+  tr?: DashboardText;
 }): AdminOverviewDashboardData => {
   const students = studentParticipants(participants);
   const total = Math.max(students.length, contest.participantCount || 0);
@@ -631,6 +693,7 @@ export const buildAdminOverviewDashboard = ({
     participants,
     examEvents,
     limit: 5,
+    tr,
   });
   const liveTimeProgress =
     overviewMetrics?.timeProgress ||
@@ -639,38 +702,41 @@ export const buildAdminOverviewDashboard = ({
   const totalAnswers = gradingStats?.totalAnswers ?? 0;
   const gradingPercent =
     totalAnswers > 0 ? Math.round((gradedAnswers / totalAnswers) * 100) : 0;
-  const gradingLabel = totalAnswers > 0 ? `${gradingPercent}%` : "尚無批改資料";
+  const gradingLabel =
+    totalAnswers > 0
+      ? `${gradingPercent}%`
+      : tr("adminOverview.model.grading.noData", "尚無批改資料");
   const workItemCount = getWorkItemCount(contest);
 
   return {
     kpis: [
       {
         key: "online",
-        label: "在線考生",
+        label: tr("adminOverview.model.kpi.onlineStudents", "在線考生"),
         value: `${overviewMetrics?.onlineNow ?? 0} / ${total}`,
         tone: "neutral",
       },
       {
         key: "started",
-        label: "已開始",
+        label: tr("adminOverview.model.kpi.started", "已開始"),
         value: String(started),
         tone: "neutral",
       },
       {
         key: "submitted",
-        label: "已交卷",
+        label: tr("adminOverview.model.status.submitted", "已交卷"),
         value: String(submitted),
         tone: "neutral",
       },
       {
         key: "locked",
-        label: "鎖定",
+        label: tr("adminOverview.model.status.locked", "鎖定"),
         value: String(locked),
         tone: locked > 0 ? "danger" : "neutral",
       },
       {
         key: "attention",
-        label: "待處理事件",
+        label: tr("adminOverview.model.kpi.pendingEvents", "待處理事件"),
         value: String(attentionRows.length),
         tone: attentionRows.length > 0 ? "warning" : "neutral",
       },
@@ -679,35 +745,36 @@ export const buildAdminOverviewDashboard = ({
       contest,
       now,
       progressPercent: liveTimeProgress.progressPercent,
+      tr,
     }),
     railItems: [
       {
         key: "online",
-        label: "在線",
+        label: tr("adminOverview.model.status.online", "在線"),
         value: `${overviewMetrics?.onlineNow ?? 0} / ${total}`,
         tone: "neutral",
       },
       {
         key: "in_progress",
-        label: "作答中",
+        label: tr("adminOverview.model.status.inProgress", "作答中"),
         value: String(inProgress),
         tone: "neutral",
       },
       {
         key: "not_started",
-        label: "未開始",
+        label: tr("adminOverview.model.status.notStarted", "未開始"),
         value: String(notStarted),
         tone: notStarted > 0 ? "warning" : "neutral",
       },
       {
         key: "submitted",
-        label: "已交卷",
+        label: tr("adminOverview.model.status.submitted", "已交卷"),
         value: String(submitted),
         tone: "neutral",
       },
       {
         key: "locked_offline",
-        label: "鎖定 / 離線",
+        label: tr("adminOverview.model.status.lockedOffline", "鎖定 / 離線"),
         value: `${locked} / ${offline}`,
         tone: locked > 0 || offline > 0 ? "danger" : "neutral",
       },
@@ -717,44 +784,68 @@ export const buildAdminOverviewDashboard = ({
       gradingLabel,
       examProgressPercent: liveTimeProgress.progressPercent,
       examEvents,
+      tr,
     }),
     attentionRows,
-    distribution: buildDistribution(participants),
+    distribution: buildDistribution(participants, tr),
     examStatus: {
-      timeWindowLabel: formatWindow(contest),
+      timeWindowLabel: formatWindow(contest, tr),
       remainingLabel: liveTimeProgress.isEnded
-        ? "已結束"
+        ? tr("adminOverview.model.timeline.ended", "已結束")
         : formatDuration(liveTimeProgress.remainingSeconds),
       timeProgressPercent: liveTimeProgress.progressPercent,
-      resultsLabel: contest.resultsPublished ? "已發布" : "未發布",
+      resultsLabel: contest.resultsPublished
+        ? tr("adminOverview.model.results.published", "已發布")
+        : tr("adminOverview.model.results.unpublished", "未發布"),
       gradingLabel,
       workItemLabel:
-        contest.contestType === "paper_exam" ? "考卷題目" : "程式題目",
+        contest.contestType === "paper_exam"
+          ? tr("adminOverview.model.workItems.paperExam", "考卷題目")
+          : tr("adminOverview.model.workItems.coding", "程式題目"),
       workItemCount,
     },
     recentEvents: buildRecentEvents(examEvents),
     nextActions: [
       {
         key: "attention",
-        title: "處理異常",
+        title: tr("adminOverview.model.nextActions.attention.title", "處理異常"),
         description:
           attentionRows.length > 0
-            ? `${attentionRows.length} 位考生需要確認`
-            : "目前沒有待處理異常",
+            ? tr(
+                "adminOverview.model.nextActions.attention.hasItems",
+                "{{count}} 位考生需要確認",
+                { count: attentionRows.length },
+              )
+            : tr(
+                "adminOverview.model.nextActions.attention.empty",
+                "目前沒有待處理異常",
+              ),
         panelTarget: "participants",
         disabled: attentionRows.length === 0,
       },
       {
         key: "grading",
-        title: "前往批改",
+        title: tr("adminOverview.model.nextActions.grading.title", "前往批改"),
         description:
-          totalAnswers > 0 ? `已批改 ${gradingPercent}%` : "考後可開始批改",
+          totalAnswers > 0
+            ? tr("adminOverview.model.nextActions.grading.progress", "已批改 {{percent}}%", {
+                percent: gradingPercent,
+              })
+            : tr(
+                "adminOverview.model.nextActions.grading.afterExam",
+                "考後可開始批改",
+              ),
         panelTarget: "grading",
       },
       {
         key: "results",
-        title: "發布成績",
-        description: contest.resultsPublished ? "成績已發布" : "確認批改後發布",
+        title: tr("adminOverview.model.nextActions.results.title", "發布成績"),
+        description: contest.resultsPublished
+          ? tr("adminOverview.model.results.published", "成績已發布")
+          : tr(
+              "adminOverview.model.nextActions.results.readyToPublish",
+              "確認批改後發布",
+            ),
         panelTarget: "grading",
         disabled: contest.resultsPublished,
       },
@@ -762,16 +853,30 @@ export const buildAdminOverviewDashboard = ({
   };
 };
 
-const contestStatusLabel = (status: ContestDetail["status"]) => {
-  if (status === "draft") return "草稿";
-  if (status === "archived") return "已封存";
-  return "已發布";
+const contestStatusLabel = (
+  status: ContestDetail["status"],
+  tr: DashboardText = defaultDashboardText,
+) => {
+  if (status === "draft") {
+    return tr("adminOverview.model.contestStatus.draft", "草稿");
+  }
+  if (status === "archived") {
+    return tr("adminOverview.model.contestStatus.archived", "已封存");
+  }
+  return tr("adminOverview.model.contestStatus.published", "已發布");
 };
 
-const readinessLabel = (status: PreparationReadinessState) => {
-  if (status === "done") return "完成";
-  if (status === "missing") return "缺少";
-  return "待確認";
+const readinessLabel = (
+  status: PreparationReadinessState,
+  tr: DashboardText = defaultDashboardText,
+) => {
+  if (status === "done") {
+    return tr("adminOverview.model.readiness.done", "完成");
+  }
+  if (status === "missing") {
+    return tr("adminOverview.model.readiness.missing", "缺少");
+  }
+  return tr("adminOverview.model.readiness.warning", "待確認");
 };
 
 export const buildAdminPreparationDashboard = ({
@@ -779,11 +884,13 @@ export const buildAdminPreparationDashboard = ({
   participants,
   gradingStats,
   now = new Date(),
+  tr = defaultDashboardText,
 }: {
   contest: ContestDetail;
   participants: ContestParticipant[];
   gradingStats?: GlobalStats;
   now?: Date;
+  tr?: DashboardText;
 }): AdminPreparationDashboardData => {
   const students = studentParticipants(participants);
   const participantTotal = Math.max(
@@ -798,69 +905,108 @@ export const buildAdminPreparationDashboard = ({
   const ungradedAnswers =
     gradingStats?.ungradedAnswers ?? Math.max(totalAnswers - gradedAnswers, 0);
   const gradingPercent = percentage(gradedAnswers, totalAnswers);
-  const gradingLabel = totalAnswers > 0 ? `${gradingPercent}%` : "尚無資料";
+  const gradingLabel =
+    totalAnswers > 0
+      ? `${gradingPercent}%`
+      : tr("adminOverview.model.common.noData", "尚無資料");
   const workItemLabel =
-    contest.contestType === "paper_exam" ? "考卷題目" : "程式題目";
+    contest.contestType === "paper_exam"
+      ? tr("adminOverview.model.workItems.paperExam", "考卷題目")
+      : tr("adminOverview.model.workItems.coding", "程式題目");
   const publishState: PreparationReadinessState =
     contest.status === "published" ? "done" : "warning";
 
   const checklistItems: PreparationChecklistItem[] = [
     {
       key: "publish",
-      label: "競賽發布",
+      label: tr("adminOverview.model.preparation.publish", "競賽發布"),
       status: publishState,
-      statusLabel: readinessLabel(publishState),
+      statusLabel: readinessLabel(publishState, tr),
       description:
         contest.status === "published"
-          ? "參賽者可依權限進入競賽"
-          : `目前狀態：${contestStatusLabel(contest.status)}`,
+          ? tr(
+              "adminOverview.model.preparation.publishedDescription",
+              "參賽者可依權限進入競賽",
+            )
+          : tr(
+              "adminOverview.model.preparation.currentStatus",
+              "目前狀態：{{status}}",
+              { status: contestStatusLabel(contest.status, tr) },
+            ),
     },
     {
       key: "work_items",
       label: workItemLabel,
       status: workItemCount > 0 ? "done" : "missing",
-      statusLabel: readinessLabel(workItemCount > 0 ? "done" : "missing"),
+      statusLabel: readinessLabel(workItemCount > 0 ? "done" : "missing", tr),
       description:
         workItemCount > 0
-          ? `已設定 ${workItemCount} 題`
-          : "尚未建立可作答的題目",
+          ? tr("adminOverview.model.preparation.workItemsReady", "已設定 {{count}} 題", {
+              count: workItemCount,
+            })
+          : tr(
+              "adminOverview.model.preparation.workItemsMissing",
+              "尚未建立可作答的題目",
+            ),
     },
     {
       key: "schedule",
-      label: "考試時段",
+      label: tr("adminOverview.model.preparation.schedule", "考試時段"),
       status: scheduleReady ? "done" : "missing",
-      statusLabel: readinessLabel(scheduleReady ? "done" : "missing"),
+      statusLabel: readinessLabel(scheduleReady ? "done" : "missing", tr),
       description: scheduleReady
-        ? formatWindow(contest)
-        : "開始與結束時間未完整設定",
+        ? formatWindow(contest, tr)
+        : tr(
+            "adminOverview.model.preparation.scheduleMissing",
+            "開始與結束時間未完整設定",
+          ),
     },
     {
       key: "participants",
-      label: "參賽者名單",
+      label: tr("adminOverview.model.preparation.participantList", "參賽者名單"),
       status: participantTotal > 0 ? "done" : "warning",
-      statusLabel: readinessLabel(participantTotal > 0 ? "done" : "warning"),
+      statusLabel: readinessLabel(participantTotal > 0 ? "done" : "warning", tr),
       description:
         participantTotal > 0
-          ? `${participantTotal} 位參賽者`
-          : "尚未看到參賽者資料",
+          ? tr(
+              "adminOverview.model.preparation.participantCount",
+              "{{count}} 位參賽者",
+              { count: participantTotal },
+            )
+          : tr(
+              "adminOverview.model.preparation.participantsMissing",
+              "尚未看到參賽者資料",
+            ),
     },
     {
       key: "rules",
-      label: "作答規則",
+      label: tr("adminOverview.model.preparation.rules", "作答規則"),
       status: hasRules ? "done" : "warning",
-      statusLabel: readinessLabel(hasRules ? "done" : "warning"),
-      description: hasRules ? "已填寫規則說明" : "可補上考試規則與注意事項",
+      statusLabel: readinessLabel(hasRules ? "done" : "warning", tr),
+      description: hasRules
+        ? tr("adminOverview.model.preparation.rulesReady", "已填寫規則說明")
+        : tr(
+            "adminOverview.model.preparation.rulesMissing",
+            "可補上考試規則與注意事項",
+          ),
     },
     {
       key: "anti_cheat",
-      label: "防作弊設定",
+      label: tr("adminOverview.model.preparation.antiCheat", "防作弊設定"),
       status: contest.cheatDetectionEnabled ? "done" : "warning",
       statusLabel: readinessLabel(
         contest.cheatDetectionEnabled ? "done" : "warning",
+        tr,
       ),
       description: contest.cheatDetectionEnabled
-        ? "防作弊監控已啟用"
-        : "可依考試需求啟用",
+        ? tr(
+            "adminOverview.model.preparation.antiCheatEnabled",
+            "防作弊監控已啟用",
+          )
+        : tr(
+            "adminOverview.model.preparation.antiCheatOptional",
+            "可依考試需求啟用",
+          ),
     },
   ];
 
@@ -868,12 +1014,13 @@ export const buildAdminPreparationDashboard = ({
     timeline: buildTimelineSummary({
       contest,
       now,
+      tr,
     }),
     railItems: [
       {
         key: "status",
-        label: "競賽狀態",
-        value: contestStatusLabel(contest.status),
+        label: tr("adminOverview.model.summary.status", "競賽狀態"),
+        value: contestStatusLabel(contest.status, tr),
         tone: contest.status === "published" ? "neutral" : "warning",
       },
       {
@@ -884,77 +1031,106 @@ export const buildAdminPreparationDashboard = ({
       },
       {
         key: "participants",
-        label: "參賽者",
+        label: tr("adminOverview.model.summary.participants", "參賽者"),
         value: String(participantTotal),
         tone: participantTotal > 0 ? "neutral" : "warning",
       },
       {
         key: "anti_cheat",
-        label: "防作弊",
-        value: contest.cheatDetectionEnabled ? "已啟用" : "未啟用",
+        label: tr("adminOverview.model.summary.antiCheat", "防作弊"),
+        value: contest.cheatDetectionEnabled
+          ? tr("adminOverview.model.common.enabled", "已啟用")
+          : tr("adminOverview.model.common.disabled", "未啟用"),
         tone: contest.cheatDetectionEnabled ? "neutral" : "warning",
       },
       {
         key: "results",
-        label: "成績",
-        value: contest.resultsPublished ? "已發布" : "未發布",
+        label: tr("adminOverview.model.summary.results", "成績"),
+        value: contest.resultsPublished
+          ? tr("adminOverview.model.results.published", "已發布")
+          : tr("adminOverview.model.results.unpublished", "未發布"),
         tone: contest.resultsPublished ? "neutral" : "warning",
       },
     ],
     insightCards: buildInsightCards({
       gradingPercent,
       gradingLabel,
-      examProgressPercent: buildTimelineSummary({ contest, now })
+      examProgressPercent: buildTimelineSummary({ contest, now, tr })
         .progressPercent,
       examEvents: [],
+      tr,
     }),
     summaryItems: [
       {
         key: "status",
-        label: "競賽狀態",
-        value: contestStatusLabel(contest.status),
+        label: tr("adminOverview.model.summary.status", "競賽狀態"),
+        value: contestStatusLabel(contest.status, tr),
         description:
-          contest.status === "published" ? "已開放給參賽者" : "尚未正式開放",
+          contest.status === "published"
+            ? tr("adminOverview.model.summary.statusOpen", "已開放給參賽者")
+            : tr("adminOverview.model.summary.statusClosed", "尚未正式開放"),
         tone: contest.status === "published" ? "neutral" : "warning",
       },
       {
         key: "schedule",
-        label: "考試時段",
-        value: formatWindow(contest),
-        description: scheduleReady ? "時間設定完整" : "需要補齊時間",
+        label: tr("adminOverview.model.preparation.schedule", "考試時段"),
+        value: formatWindow(contest, tr),
+        description: scheduleReady
+          ? tr("adminOverview.model.summary.scheduleReady", "時間設定完整")
+          : tr("adminOverview.model.summary.scheduleMissing", "需要補齊時間"),
         tone: scheduleReady ? "neutral" : "danger",
       },
       {
         key: "work_items",
         label: workItemLabel,
         value: String(workItemCount),
-        description: workItemCount > 0 ? "內容已建立" : "尚未建立內容",
+        description:
+          workItemCount > 0
+            ? tr("adminOverview.model.summary.workItemsReady", "內容已建立")
+            : tr("adminOverview.model.summary.workItemsMissing", "尚未建立內容"),
         tone: workItemCount > 0 ? "neutral" : "danger",
       },
       {
         key: "participants",
-        label: "參賽者",
+        label: tr("adminOverview.model.summary.participants", "參賽者"),
         value: String(participantTotal),
-        description: participantTotal > 0 ? "名單可供管理" : "尚無參賽者資料",
+        description:
+          participantTotal > 0
+            ? tr("adminOverview.model.summary.participantsReady", "名單可供管理")
+            : tr(
+                "adminOverview.model.summary.participantsMissing",
+                "尚無參賽者資料",
+              ),
         tone: participantTotal > 0 ? "neutral" : "warning",
       },
       {
         key: "grading",
-        label: "批改進度",
+        label: tr("adminOverview.model.insights.gradingProgress", "批改進度"),
         value: gradingLabel,
         description:
           totalAnswers > 0
-            ? `${gradedAnswers} / ${totalAnswers} 份`
-            : "考後才會產生批改資料",
+            ? tr("adminOverview.model.summary.gradingCount", "{{graded}} / {{total}} 份", {
+                graded: gradedAnswers,
+                total: totalAnswers,
+              })
+            : tr(
+                "adminOverview.model.summary.gradingAfterExam",
+                "考後才會產生批改資料",
+              ),
         tone: ungradedAnswers > 0 ? "warning" : "neutral",
       },
       {
         key: "results",
-        label: "成績",
-        value: contest.resultsPublished ? "已發布" : "未發布",
+        label: tr("adminOverview.model.summary.results", "成績"),
+        value: contest.resultsPublished
+          ? tr("adminOverview.model.results.published", "已發布")
+          : tr("adminOverview.model.results.unpublished", "未發布"),
         description: contest.resultsPublished
-          ? "參賽者可查看"
-          : "確認批改後發布",
+          ? tr("adminOverview.model.summary.resultsVisible", "參賽者可查看")
+          : tr(
+              "adminOverview.model.nextActions.results.readyToPublish",
+              "確認批改後發布",
+            ),
         tone: contest.resultsPublished ? "neutral" : "warning",
       },
     ],
@@ -967,8 +1143,10 @@ export const buildAdminPreparationDashboard = ({
       progressLabel:
         totalAnswers > 0
           ? `${gradedAnswers} / ${totalAnswers}`
-          : "尚無作答資料",
-      resultsLabel: contest.resultsPublished ? "已發布" : "未發布",
+          : tr("adminOverview.model.grading.noAnswers", "尚無作答資料"),
+      resultsLabel: contest.resultsPublished
+        ? tr("adminOverview.model.results.published", "已發布")
+        : tr("adminOverview.model.results.unpublished", "未發布"),
       resultsTone: contest.resultsPublished ? "neutral" : "warning",
     },
   };
diff --git a/frontend/src/i18n/locales/en/contest.json b/frontend/src/i18n/locales/en/contest.json
index f2567a85..590839c9 100644
--- a/frontend/src/i18n/locales/en/contest.json
+++ b/frontend/src/i18n/locales/en/contest.json
@@ -62,6 +62,70 @@
       "strictModeEnableSuccess": "Anti-cheat monitoring enabled",
       "updateFailed": "Update failed"
     },
+    "command": {
+      "ariaLabel": "Teacher admin overview",
+      "connection": {
+        "offline": "Offline",
+        "online": "Online"
+      },
+      "drawer": {
+        "ariaLabel": "Student details",
+        "close": "Close student details",
+        "closeBackdrop": "Close student details backdrop",
+        "title": "Student details"
+      },
+      "drilldown": {
+        "ariaLabel": "Overview data tabs",
+        "participants": "Participants",
+        "questionStats": "Answer distribution"
+      },
+      "eventLog": "Event log",
+      "examStatusSummary": "Exam status summary",
+      "examTime": "Exam time",
+      "filters": {
+        "allQuestionTypes": "All question types",
+        "allStatuses": "All statuses",
+        "needsAttention": "Needs attention"
+      },
+      "metric": {
+        "answerProgress": "Answer progress",
+        "eventUnit": "events",
+        "gradingProgress": "Grading progress",
+        "inProgress": "In progress",
+        "interrupted": "Interrupted",
+        "notSubmitted": "Not submitted",
+        "pausedDetail": "Paused",
+        "pointUnit": "pts",
+        "score": "Score",
+        "scoreUnit": "{{score}} pts",
+        "scored": "Scored",
+        "violations": "Anomaly events"
+      },
+      "metricSwitcher": "Student card metric switcher",
+      "metrics": {
+        "endTime": "End time",
+        "examParticipants": "Exam participants",
+        "onlineParticipants": "Online participants",
+        "startTime": "Start time"
+      },
+      "participants": {
+        "empty": "No students yet",
+        "filterStatus": "Filter status",
+        "filterStatusAria": "Filter student status",
+        "loading": "Loading student list",
+        "search": "Search students",
+        "searchPlaceholder": "Search display name or username...",
+        "title": "Student list"
+      },
+      "questionStats": {
+        "empty": "No answer distribution data yet",
+        "filterQuestionType": "Filter question type",
+        "filterQuestionTypeAria": "Filter question type",
+        "search": "Search questions",
+        "searchPlaceholder": "Search question number or prompt..."
+      },
+      "tabsAriaLabel": "Teacher admin overview tabs"
+    },
     "events": {
       "critical": "High-risk events",
       "empty": "No events yet",
@@ -91,6 +155,127 @@
       "problemUnit": "problems",
       "time": "Time Progress"
     },
+    "model": {
+      "attention": {
+        "anomalyCount": "{{count}} anomalies",
+        "connectionInterrupted": "Connection interrupted",
+        "examLocked": "Exam locked",
+        "notEntered": "Has not entered the exam"
+      },
+      "common": {
+        "disabled": "Disabled",
+        "enabled": "Enabled",
+        "noData": "No data yet",
+        "unset": "Not set"
+      },
+      "contestStatus": {
+        "archived": "Archived",
+        "draft": "Draft",
+        "published": "Published"
+      },
+      "grading": {
+        "noAnswers": "No answer data yet",
+        "noData": "No grading data yet"
+      },
+      "insights": {
+        "examProgress": "Exam progress",
+        "gradingProgress": "Grading progress",
+        "priorityEvents": "Anomaly events"
+      },
+      "kpi": {
+        "onlineStudents": "Online students",
+        "pendingEvents": "Pending events",
+        "started": "Started"
+      },
+      "nextActions": {
+        "attention": {
+          "empty": "No pending anomalies",
+          "hasItems": "{{count}} students need review",
+          "title": "Review anomalies"
+        },
+        "grading": {
+          "afterExam": "Grading can start after the exam",
+          "progress": "{{percent}}% graded",
+          "title": "Open grading"
+        },
+        "results": {
+          "readyToPublish": "Publish after reviewing grading",
+          "title": "Publish results"
+        }
+      },
+      "preparation": {
+        "antiCheat": "Anti-cheat settings",
+        "antiCheatEnabled": "Anti-cheat monitoring enabled",
+        "antiCheatOptional": "Enable if required for this exam",
+        "currentStatus": "Current status: {{status}}",
+        "participantCount": "{{count}} participants",
+        "participantList": "Participant roster",
+        "participantsMissing": "No participant data yet",
+        "publish": "Contest publish",
+        "publishedDescription": "Participants can enter according to permissions",
+        "rules": "Answer rules",
+        "rulesMissing": "Add exam rules and notes",
+        "rulesReady": "Rules are filled in",
+        "schedule": "Exam window",
+        "scheduleMissing": "Start and end times are incomplete",
+        "workItemsMissing": "No answerable questions yet",
+        "workItemsReady": "{{count}} questions set"
+      },
+      "progress": {
+        "current": "Now",
+        "label": "Progress",
+        "start": "Start"
+      },
+      "readiness": {
+        "done": "Done",
+        "missing": "Missing",
+        "warning": "Review"
+      },
+      "results": {
+        "published": "Published",
+        "unpublished": "Unpublished"
+      },
+      "status": {
+        "anomaly": "Anomaly",
+        "inProgress": "Answering",
+        "locked": "Locked",
+        "lockedOffline": "Locked / Offline",
+        "notStarted": "Not started",
+        "offline": "Offline",
+        "online": "Online",
+        "submitted": "Submitted"
+      },
+      "summary": {
+        "antiCheat": "Anti-cheat",
+        "gradingAfterExam": "Grading data appears after the exam",
+        "gradingCount": "{{graded}} / {{total}} answers",
+        "participants": "Participants",
+        "participantsMissing": "No participant data yet",
+        "participantsReady": "Roster ready to manage",
+        "results": "Results",
+        "resultsVisible": "Visible to participants",
+        "scheduleMissing": "Schedule needs completion",
+        "scheduleReady": "Schedule is complete",
+        "status": "Contest status",
+        "statusClosed": "Not officially open yet",
+        "statusOpen": "Open to participants",
+        "workItemsMissing": "Content not created yet",
+        "workItemsReady": "Content created"
+      },
+      "timeline": {
+        "ended": "Ended",
+        "examEnded": "Exam ended",
+        "notStarted": "Not started",
+        "remaining": "{{time}} remaining",
+        "running": "In progress",
+        "startsIn": "Starts in {{time}}",
+        "timeUnset": "Time not set"
+      },
+      "workItems": {
+        "coding": "Coding problems",
+        "paperExam": "Paper exam questions"
+      }
+    },
     "screen": {
       "actions": {
         "addParticipant": "Add participant",
@@ -144,7 +329,6 @@
       "disabled": "Disabled",
       "enabled": "Enabled",
       "examProgress": "Exam progress",
-      "timelineProgress": "Time progress",
       "goEventPanel": "Go to event panel",
       "goParticipantList": "Open participant list",
       "goProblemManagement": "Go to problem management",
@@ -159,6 +343,7 @@
       "status": "Contest status",
       "strictExamMode": "Anti-cheat monitoring",
       "subtitle": "Quick access to settings, questions, and status actions",
+      "timelineProgress": "Time progress",
       "title": "Command Center",
       "violationCount": "Anomaly events",
       "violationCountAria": "Anomaly events, go to event panel"
@@ -197,6 +382,7 @@
       "title": "Readiness"
     },
     "tabs": {
+      "ariaLabel": "Preparation and grading tabs",
       "entries": "Management entries",
       "grading": "Grading & results",
       "readiness": "Readiness"
@@ -1576,6 +1762,124 @@
     "ungraded": "Ungraded",
     "viewSubmissionSamples": "View submission samples"
   },
+  "studentDashboard": {
+    "actions": {
+      "adminPanel": "Admin dashboard",
+      "backToAnswering": "Back to answering",
+      "downloadProof": "Download answer proof",
+      "downloadReport": "Download score report",
+      "join": "Join contest",
+      "joinUnavailable": "Joining unavailable",
+      "refresh": "Refresh",
+      "rejoin": "Join again",
+      "resume": "Resume answering",
+      "start": "Start answering",
+      "submit": "Submit",
+      "unavailable": "Answering unavailable",
+      "waitingStart": "Waiting to start"
+    },
+    "announcements": {
+      "empty": "No announcements yet.",
+      "loading": "Loading announcements...",
+      "title": "Announcements"
+    },
+    "answerStatus": {
+      "answered": "Answered",
+      "correct": "Correct",
+      "graded": "Graded",
+      "marked": "Marked",
+      "noScore": "No credit",
+      "partial": "Partial credit",
+      "pendingGrading": "Pending grading",
+      "unanswered": "Unanswered"
+    },
+    "ariaLabel": "Student contest home",
+    "contestState": {
+      "archived": "Archived",
+      "draft": "Draft",
+      "ended": "Ended",
+      "running": "In progress",
+      "unknown": "Unknown",
+      "upcoming": "Upcoming"
+    },
+    "empty": {
+      "noAnswerRecords": "No answer records yet.",
+      "noQuestions": "No question data yet.",
+      "noScoreDistribution": "No score distribution data yet."
+    },
+    "errors": {
+      "announcementsLoadFailed": "Announcements are temporarily unavailable",
+      "questionsLoadFailed": "Question data is temporarily unavailable",
+      "scoreDistributionLoadFailed": "Score distribution is temporarily unavailable"
+    },
+    "infoLabel": "Contest information",
+    "joinStatus": {
+      "joined": "Joined",
+      "notJoined": "Not joined"
+    },
+    "loading": "Loading...",
+    "loadingAnswers": "Loading answers...",
+    "mainContent": "Contest main content",
+    "metrics": {
+      "duration": "Duration",
+      "endTime": "End time",
+      "startTime": "Start time"
+    },
+    "monitoring": {
+      "enabled": "Monitoring",
+      "subtitle": "Fullscreen, tab switching, and device monitoring will start after entering the exam.",
+      "title": "Monitoring enabled"
+    },
+    "records": {
+      "currentStatus": "Current answer status",
+      "fullScore": "Full score {{score}}",
+      "notSubmitted": "Not submitted",
+      "title": "Answer records",
+      "withResults": "Answer records and results"
+    },
+    "report": {
+      "download": "Download",
+      "failedTitle": "Download failed",
+      "language": "Report language",
+      "languages": {
+        "en": "English",
+        "ja": "日本語",
+        "ko": "한국어",
+        "zhTW": "繁體中文"
+      },
+      "preparing": "Preparing"
+    },
+    "results": {
+      "pendingPublish": "Pending publish",
+      "published": "Results published",
+      "unpublished": "Not published yet",
+      "waitingPublish": "Waiting for results"
+    },
+    "rules": {
+      "empty": "No additional rules.",
+      "noPassword": "This contest does not require a password.",
+      "requiresPassword": "This contest requires a password.",
+      "title": "Rules"
+    },
+    "submitConfirm": {
+      "body": "You will not be able to change answers after submitting.",
+      "confirm": "Submit",
+      "heading": "Confirm submission"
+    },
+    "summary": {
+      "ariaLabel": "Contest summary",
+      "averageScore": "Average {{average}} / {{max}}",
+      "completionRate": "Completion rate",
+      "examResult": "Exam result",
+      "examStatus": "Exam status",
+      "scoreDistribution": "Score distribution"
+    },
+    "tabs": {
+      "ariaLabel": "Contest information tabs",
+      "records": "Answer records",
+      "rules": "Rules"
+    }
+  },
   "studentStatus": {
     "pausedLocked": "Paused / Locked",
     "personCount": "{{count}}",
diff --git a/frontend/src/i18n/locales/ja/contest.json b/frontend/src/i18n/locales/ja/contest.json
index e1582092..d2d3577d 100644
--- a/frontend/src/i18n/locales/ja/contest.json
+++ b/frontend/src/i18n/locales/ja/contest.json
@@ -62,6 +62,70 @@
       "strictModeEnableSuccess": "不正対策監視を有効にしました",
       "updateFailed": "更新に失敗しました"
     },
+    "command": {
+      "ariaLabel": "教師管理概要",
+      "connection": {
+        "offline": "オフライン",
+        "online": "オンライン"
+      },
+      "drawer": {
+        "ariaLabel": "学生詳細",
+        "close": "学生詳細を閉じる",
+        "closeBackdrop": "学生詳細背景を閉じる",
+        "title": "学生詳細"
+      },
+      "drilldown": {
+        "ariaLabel": "概要データ切替",
+        "participants": "参加者",
+        "questionStats": "回答分布"
+      },
+      "eventLog": "イベント記録",
+      "examStatusSummary": "試験状態サマリー",
+      "examTime": "試験時間",
+      "filters": {
+        "allQuestionTypes": "すべての問題形式",
+        "allStatuses": "すべての状態",
+        "needsAttention": "対応が必要"
+      },
+      "metric": {
+        "answerProgress": "回答進捗",
+        "eventUnit": "件",
+        "gradingProgress": "採点進捗",
+        "inProgress": "進行中",
+        "interrupted": "中断",
+        "notSubmitted": "未提出",
+        "pausedDetail": "一時停止中",
+        "pointUnit": "点",
+        "score": "点数",
+        "scoreUnit": "{{score}} 点",
+        "scored": "採点済み",
+        "violations": "異常イベント"
+      },
+      "metricSwitcher": "学生カード指標切替",
+      "metrics": {
+        "endTime": "終了時間",
+        "examParticipants": "受験者数",
+        "onlineParticipants": "オンライン人数",
+        "startTime": "開始時間"
+      },
+      "participants": {
+        "empty": "学生はいません",
+        "filterStatus": "状態で絞り込み",
+        "filterStatusAria": "学生状態で絞り込み",
+        "loading": "学生一覧を読み込み中",
+        "search": "学生を検索",
+        "searchPlaceholder": "表示名またはユーザー名を検索...",
+        "title": "学生一覧"
+      },
+      "questionStats": {
+        "empty": "回答分布データはまだありません",
+        "filterQuestionType": "問題形式で絞り込み",
+        "filterQuestionTypeAria": "問題形式で絞り込み",
+        "search": "問題を検索",
+        "searchPlaceholder": "問題番号または内容を検索..."
+      },
+      "tabsAriaLabel": "教師管理概要タブ"
+    },
     "events": {
       "critical": "高リスクイベント",
       "empty": "現在イベントはありません",
@@ -91,6 +155,127 @@
       "problemUnit": "問",
       "time": "時間進捗"
     },
+    "model": {
+      "attention": {
+        "anomalyCount": "{{count}} 件の異常",
+        "connectionInterrupted": "接続が中断されました",
+        "examLocked": "試験がロックされています",
+        "notEntered": "まだ試験に入っていません"
+      },
+      "common": {
+        "disabled": "無効",
+        "enabled": "有効",
+        "noData": "データなし",
+        "unset": "未設定"
+      },
+      "contestStatus": {
+        "archived": "アーカイブ済み",
+        "draft": "下書き",
+        "published": "公開済み"
+      },
+      "grading": {
+        "noAnswers": "回答データはまだありません",
+        "noData": "採点データはまだありません"
+      },
+      "insights": {
+        "examProgress": "試験進捗",
+        "gradingProgress": "採点進捗",
+        "priorityEvents": "異常イベント"
+      },
+      "kpi": {
+        "onlineStudents": "オンライン学生",
+        "pendingEvents": "未対応イベント",
+        "started": "開始済み"
+      },
+      "nextActions": {
+        "attention": {
+          "empty": "未対応の異常はありません",
+          "hasItems": "{{count}} 名の学生を確認してください",
+          "title": "異常を確認"
+        },
+        "grading": {
+          "afterExam": "試験後に採点できます",
+          "progress": "{{percent}}% 採点済み",
+          "title": "採点へ"
+        },
+        "results": {
+          "readyToPublish": "採点確認後に公開",
+          "title": "成績を公開"
+        }
+      },
+      "preparation": {
+        "antiCheat": "不正対策設定",
+        "antiCheatEnabled": "不正対策監視は有効です",
+        "antiCheatOptional": "試験要件に応じて有効化できます",
+        "currentStatus": "現在の状態：{{status}}",
+        "participantCount": "{{count}} 名の参加者",
+        "participantList": "参加者名簿",
+        "participantsMissing": "参加者データがまだありません",
+        "publish": "コンテスト公開",
+        "publishedDescription": "参加者は権限に応じて入れます",
+        "rules": "回答ルール",
+        "rulesMissing": "試験ルールと注意事項を追加できます",
+        "rulesReady": "ルール説明は入力済みです",
+        "schedule": "試験時間帯",
+        "scheduleMissing": "開始・終了時間が未設定です",
+        "workItemsMissing": "回答可能な問題がまだありません",
+        "workItemsReady": "{{count}} 問設定済み"
+      },
+      "progress": {
+        "current": "現在",
+        "label": "進捗",
+        "start": "開始"
+      },
+      "readiness": {
+        "done": "完了",
+        "missing": "不足",
+        "warning": "確認待ち"
+      },
+      "results": {
+        "published": "公開済み",
+        "unpublished": "未公開"
+      },
+      "status": {
+        "anomaly": "異常",
+        "inProgress": "回答中",
+        "locked": "ロック",
+        "lockedOffline": "ロック / オフライン",
+        "notStarted": "未開始",
+        "offline": "オフライン",
+        "online": "オンライン",
+        "submitted": "提出済み"
+      },
+      "summary": {
+        "antiCheat": "不正対策",
+        "gradingAfterExam": "採点データは試験後に生成されます",
+        "gradingCount": "{{graded}} / {{total}} 件",
+        "participants": "参加者",
+        "participantsMissing": "参加者データがまだありません",
+        "participantsReady": "名簿を管理できます",
+        "results": "成績",
+        "resultsVisible": "参加者が閲覧できます",
+        "scheduleMissing": "時間設定の補完が必要です",
+        "scheduleReady": "時間設定は完了しています",
+        "status": "コンテスト状態",
+        "statusClosed": "まだ正式公開されていません",
+        "statusOpen": "参加者に公開済み",
+        "workItemsMissing": "内容はまだ作成されていません",
+        "workItemsReady": "内容は作成済みです"
+      },
+      "timeline": {
+        "ended": "終了",
+        "examEnded": "試験は終了しました",
+        "notStarted": "開始前",
+        "remaining": "残り {{time}}",
+        "running": "進行中",
+        "startsIn": "開始まで {{time}}",
+        "timeUnset": "時間未設定"
+      },
+      "workItems": {
+        "coding": "プログラミング問題",
+        "paperExam": "試験問題"
+      }
+    },
     "screen": {
       "actions": {
         "addParticipant": "受験者を追加",
@@ -144,7 +329,6 @@
       "disabled": "無効",
       "enabled": "有効",
       "examProgress": "試験進捗",
-      "timelineProgress": "時間進捗",
       "goEventPanel": "イベントパネルへ移動",
       "goParticipantList": "参加者リストを開く",
       "goProblemManagement": "問題管理へ移動",
@@ -159,6 +343,7 @@
       "status": "コンテスト状態",
       "strictExamMode": "不正対策監視",
       "subtitle": "設定、問題、状態操作へすばやくアクセス",
+      "timelineProgress": "時間進捗",
       "title": "コマンドセンター",
       "violationCount": "異常イベント数",
       "violationCountAria": "異常イベント数、イベントパネルへ移動"
@@ -197,6 +382,7 @@
       "title": "準備狀態"
     },
     "tabs": {
+      "ariaLabel": "準備と採点タブ",
       "entries": "管理入口",
       "grading": "批改與成績",
       "readiness": "準備狀態"
@@ -1576,6 +1762,124 @@
     "ungraded": "未採点",
     "viewSubmissionSamples": "提出サンプルを見る"
   },
+  "studentDashboard": {
+    "actions": {
+      "adminPanel": "管理ダッシュボード",
+      "backToAnswering": "回答に戻る",
+      "downloadProof": "回答証明をダウンロード",
+      "downloadReport": "成績レポートをダウンロード",
+      "join": "コンテストに参加",
+      "joinUnavailable": "現在参加できません",
+      "refresh": "更新",
+      "rejoin": "再参加",
+      "resume": "回答を再開",
+      "start": "回答を開始",
+      "submit": "提出",
+      "unavailable": "回答できません",
+      "waitingStart": "開始待ち"
+    },
+    "announcements": {
+      "empty": "現在お知らせはありません。",
+      "loading": "お知らせを読み込み中...",
+      "title": "お知らせ"
+    },
+    "answerStatus": {
+      "answered": "回答済み",
+      "correct": "正解",
+      "graded": "採点済み",
+      "marked": "マーク済み",
+      "noScore": "得点なし",
+      "partial": "部分点",
+      "pendingGrading": "採点待ち",
+      "unanswered": "未回答"
+    },
+    "ariaLabel": "学生コンテストホーム",
+    "contestState": {
+      "archived": "アーカイブ済み",
+      "draft": "下書き",
+      "ended": "終了",
+      "running": "進行中",
+      "unknown": "不明",
+      "upcoming": "開始前"
+    },
+    "empty": {
+      "noAnswerRecords": "回答記録はまだありません。",
+      "noQuestions": "問題データはまだありません。",
+      "noScoreDistribution": "得点分布データはまだありません。"
+    },
+    "errors": {
+      "announcementsLoadFailed": "お知らせを一時的に読み込めません",
+      "questionsLoadFailed": "問題データを一時的に読み込めません",
+      "scoreDistributionLoadFailed": "得点分布を一時的に読み込めません"
+    },
+    "infoLabel": "コンテスト情報",
+    "joinStatus": {
+      "joined": "参加済み",
+      "notJoined": "未参加"
+    },
+    "loading": "読み込み中...",
+    "loadingAnswers": "回答データを読み込み中...",
+    "mainContent": "コンテストのメイン内容",
+    "metrics": {
+      "duration": "総時間",
+      "endTime": "終了時間",
+      "startTime": "開始時間"
+    },
+    "monitoring": {
+      "enabled": "監視中",
+      "subtitle": "試験に入ると、全画面・タブ切替・デバイス監視が有効になります。",
+      "title": "監視が有効です"
+    },
+    "records": {
+      "currentStatus": "現在の回答状況",
+      "fullScore": "満点 {{score}}",
+      "notSubmitted": "未提出",
+      "title": "回答記録",
+      "withResults": "回答記録と成績"
+    },
+    "report": {
+      "download": "ダウンロード",
+      "failedTitle": "ダウンロード失敗",
+      "language": "レポート言語",
+      "languages": {
+        "en": "English",
+        "ja": "日本語",
+        "ko": "한국어",
+        "zhTW": "繁體中文"
+      },
+      "preparing": "準備中"
+    },
+    "results": {
+      "pendingPublish": "公開待ち",
+      "published": "成績公開済み",
+      "unpublished": "未公開",
+      "waitingPublish": "成績公開待ち"
+    },
+    "rules": {
+      "empty": "追加ルールはありません。",
+      "noPassword": "このコンテストにはパスワードは不要です。",
+      "requiresPassword": "このコンテストにはパスワードが必要です。",
+      "title": "ルール"
+    },
+    "submitConfirm": {
+      "body": "提出後は回答を変更できません。",
+      "confirm": "提出する",
+      "heading": "提出確認"
+    },
+    "summary": {
+      "ariaLabel": "コンテスト概要",
+      "averageScore": "平均 {{average}} / {{max}}",
+      "completionRate": "完了率",
+      "examResult": "試験成績",
+      "examStatus": "試験状態",
+      "scoreDistribution": "得点分布"
+    },
+    "tabs": {
+      "ariaLabel": "コンテスト情報タブ",
+      "records": "回答記録",
+      "rules": "ルール"
+    }
+  },
   "studentStatus": {
     "pausedLocked": "一時停止 / ロック",
     "personCount": "{{count}} 名",
diff --git a/frontend/src/i18n/locales/ko/contest.json b/frontend/src/i18n/locales/ko/contest.json
index 96a03262..54c13057 100644
--- a/frontend/src/i18n/locales/ko/contest.json
+++ b/frontend/src/i18n/locales/ko/contest.json
@@ -62,6 +62,70 @@
       "strictModeEnableSuccess": "부정행위 방지 감독이 활성화되었습니다",
       "updateFailed": "업데이트 실패"
     },
+    "command": {
+      "ariaLabel": "교사 관리 개요",
+      "connection": {
+        "offline": "오프라인",
+        "online": "온라인"
+      },
+      "drawer": {
+        "ariaLabel": "학생 상세 정보",
+        "close": "학생 상세 정보 닫기",
+        "closeBackdrop": "학생 상세 배경 닫기",
+        "title": "학생 상세 정보"
+      },
+      "drilldown": {
+        "ariaLabel": "개요 데이터 전환",
+        "participants": "참가자",
+        "questionStats": "답안 분포"
+      },
+      "eventLog": "이벤트 기록",
+      "examStatusSummary": "시험 상태 요약",
+      "examTime": "시험 시간",
+      "filters": {
+        "allQuestionTypes": "전체 문항 유형",
+        "allStatuses": "전체 상태",
+        "needsAttention": "처리 필요"
+      },
+      "metric": {
+        "answerProgress": "답안 진행률",
+        "eventUnit": "회",
+        "gradingProgress": "채점 진행률",
+        "inProgress": "진행 중",
+        "interrupted": "중단됨",
+        "notSubmitted": "미제출",
+        "pausedDetail": "일시 중지됨",
+        "pointUnit": "점",
+        "score": "점수",
+        "scoreUnit": "{{score}} 점",
+        "scored": "점수 반영됨",
+        "violations": "이상 이벤트"
+      },
+      "metricSwitcher": "학생 카드 지표 전환",
+      "metrics": {
+        "endTime": "종료 시간",
+        "examParticipants": "응시 인원",
+        "onlineParticipants": "온라인 인원",
+        "startTime": "시작 시간"
+      },
+      "participants": {
+        "empty": "현재 학생이 없습니다",
+        "filterStatus": "상태 필터",
+        "filterStatusAria": "학생 상태 필터",
+        "loading": "학생 목록을 불러오는 중",
+        "search": "학생 검색",
+        "searchPlaceholder": "표시 이름 또는 사용자 이름 검색...",
+        "title": "학생 목록"
+      },
+      "questionStats": {
+        "empty": "아직 답안 분포 데이터가 없습니다",
+        "filterQuestionType": "문항 유형 필터",
+        "filterQuestionTypeAria": "문항 유형 필터",
+        "search": "문항 검색",
+        "searchPlaceholder": "문항 번호 또는 내용을 검색..."
+      },
+      "tabsAriaLabel": "교사 관리 개요 탭"
+    },
     "events": {
       "critical": "고위험 이벤트",
       "empty": "현재 이벤트가 없습니다",
@@ -91,6 +155,127 @@
       "problemUnit": "문제",
       "time": "시간 진행"
     },
+    "model": {
+      "attention": {
+        "anomalyCount": "이상 {{count}}회",
+        "connectionInterrupted": "연결이 끊어졌습니다",
+        "examLocked": "시험이 잠겼습니다",
+        "notEntered": "아직 시험에 입장하지 않았습니다"
+      },
+      "common": {
+        "disabled": "비활성화됨",
+        "enabled": "활성화됨",
+        "noData": "아직 데이터 없음",
+        "unset": "미설정"
+      },
+      "contestStatus": {
+        "archived": "보관됨",
+        "draft": "초안",
+        "published": "공개됨"
+      },
+      "grading": {
+        "noAnswers": "아직 답안 데이터 없음",
+        "noData": "아직 채점 데이터 없음"
+      },
+      "insights": {
+        "examProgress": "시험 진행률",
+        "gradingProgress": "채점 진행률",
+        "priorityEvents": "이상 이벤트"
+      },
+      "kpi": {
+        "onlineStudents": "온라인 학생",
+        "pendingEvents": "처리 대기 이벤트",
+        "started": "시작됨"
+      },
+      "nextActions": {
+        "attention": {
+          "empty": "처리 대기 이상 없음",
+          "hasItems": "학생 {{count}}명 확인 필요",
+          "title": "이상 확인"
+        },
+        "grading": {
+          "afterExam": "시험 후 채점을 시작할 수 있습니다",
+          "progress": "{{percent}}% 채점됨",
+          "title": "채점으로 이동"
+        },
+        "results": {
+          "readyToPublish": "채점 확인 후 공개",
+          "title": "성적 공개"
+        }
+      },
+      "preparation": {
+        "antiCheat": "부정행위 방지 설정",
+        "antiCheatEnabled": "부정행위 방지 모니터링이 활성화되었습니다",
+        "antiCheatOptional": "시험 요구에 따라 활성화할 수 있습니다",
+        "currentStatus": "현재 상태: {{status}}",
+        "participantCount": "참가자 {{count}}명",
+        "participantList": "참가자 명단",
+        "participantsMissing": "아직 참가자 데이터가 없습니다",
+        "publish": "대회 공개",
+        "publishedDescription": "참가자는 권한에 따라 대회에 들어갈 수 있습니다",
+        "rules": "답안 규칙",
+        "rulesMissing": "시험 규칙과 유의사항을 추가할 수 있습니다",
+        "rulesReady": "규칙 안내가 입력되었습니다",
+        "schedule": "시험 시간대",
+        "scheduleMissing": "시작 및 종료 시간이 완전하지 않습니다",
+        "workItemsMissing": "아직 답안 작성 가능한 문항이 없습니다",
+        "workItemsReady": "{{count}}개 문항 설정됨"
+      },
+      "progress": {
+        "current": "현재",
+        "label": "진행률",
+        "start": "시작"
+      },
+      "readiness": {
+        "done": "완료",
+        "missing": "누락",
+        "warning": "확인 필요"
+      },
+      "results": {
+        "published": "공개됨",
+        "unpublished": "미공개"
+      },
+      "status": {
+        "anomaly": "이상",
+        "inProgress": "답안 작성 중",
+        "locked": "잠김",
+        "lockedOffline": "잠김 / 오프라인",
+        "notStarted": "미시작",
+        "offline": "오프라인",
+        "online": "온라인",
+        "submitted": "제출됨"
+      },
+      "summary": {
+        "antiCheat": "부정행위 방지",
+        "gradingAfterExam": "시험 후 채점 데이터가 생성됩니다",
+        "gradingCount": "{{graded}} / {{total}}건",
+        "participants": "참가자",
+        "participantsMissing": "아직 참가자 데이터가 없습니다",
+        "participantsReady": "명단 관리 가능",
+        "results": "성적",
+        "resultsVisible": "참가자가 볼 수 있습니다",
+        "scheduleMissing": "시간 설정 보완 필요",
+        "scheduleReady": "시간 설정 완료",
+        "status": "대회 상태",
+        "statusClosed": "아직 공식 공개되지 않음",
+        "statusOpen": "참가자에게 공개됨",
+        "workItemsMissing": "아직 내용이 생성되지 않음",
+        "workItemsReady": "내용이 생성됨"
+      },
+      "timeline": {
+        "ended": "종료됨",
+        "examEnded": "시험이 종료되었습니다",
+        "notStarted": "시작 전",
+        "remaining": "{{time}} 남음",
+        "running": "진행 중",
+        "startsIn": "{{time}} 후 시작",
+        "timeUnset": "시간 미설정"
+      },
+      "workItems": {
+        "coding": "코딩 문제",
+        "paperExam": "시험 문항"
+      }
+    },
     "screen": {
       "actions": {
         "addParticipant": "참가자 추가",
@@ -144,7 +329,6 @@
       "disabled": "비활성화",
       "enabled": "활성화",
       "examProgress": "시험 진행률",
-      "timelineProgress": "시간 진행",
       "goEventPanel": "이벤트 패널로 이동",
       "goParticipantList": "참가자 목록 열기",
       "goProblemManagement": "문제 관리로 이동",
@@ -159,6 +343,7 @@
       "status": "경진대회 상태",
       "strictExamMode": "부정행위 방지 감독",
       "subtitle": "설정, 문제, 상태 작업으로 빠르게 이동",
+      "timelineProgress": "시간 진행",
       "title": "명령 센터",
       "violationCount": "이상 이벤트 수",
       "violationCountAria": "이상 이벤트 수, 이벤트 패널로 이동"
@@ -197,6 +382,7 @@
       "title": "準備狀態"
     },
     "tabs": {
+      "ariaLabel": "준비 및 채점 탭",
       "entries": "管理入口",
       "grading": "批改與成績",
       "readiness": "準備狀態"
@@ -1576,6 +1762,124 @@
     "ungraded": "미채점",
     "viewSubmissionSamples": "제출 샘플 보기"
   },
+  "studentDashboard": {
+    "actions": {
+      "adminPanel": "관리 대시보드",
+      "backToAnswering": "답안 화면으로 돌아가기",
+      "downloadProof": "답안 증명 다운로드",
+      "downloadReport": "성적표 다운로드",
+      "join": "대회 참가",
+      "joinUnavailable": "현재 참가할 수 없음",
+      "refresh": "새로고침",
+      "rejoin": "다시 참가",
+      "resume": "답안 작성 재개",
+      "start": "답안 작성 시작",
+      "submit": "제출",
+      "unavailable": "답안 작성 불가",
+      "waitingStart": "시작 대기"
+    },
+    "announcements": {
+      "empty": "현재 공지사항이 없습니다.",
+      "loading": "공지사항을 불러오는 중...",
+      "title": "공지사항"
+    },
+    "answerStatus": {
+      "answered": "답변됨",
+      "correct": "정답",
+      "graded": "채점됨",
+      "marked": "표시됨",
+      "noScore": "점수 없음",
+      "partial": "부분 점수",
+      "pendingGrading": "채점 대기",
+      "unanswered": "미답변"
+    },
+    "ariaLabel": "학생 대회 홈",
+    "contestState": {
+      "archived": "보관됨",
+      "draft": "초안",
+      "ended": "종료됨",
+      "running": "진행 중",
+      "unknown": "알 수 없음",
+      "upcoming": "시작 예정"
+    },
+    "empty": {
+      "noAnswerRecords": "아직 답안 기록이 없습니다.",
+      "noQuestions": "아직 문항 데이터가 없습니다.",
+      "noScoreDistribution": "아직 점수 분포 데이터가 없습니다."
+    },
+    "errors": {
+      "announcementsLoadFailed": "공지사항을 일시적으로 불러올 수 없습니다",
+      "questionsLoadFailed": "문항 데이터를 일시적으로 불러올 수 없습니다",
+      "scoreDistributionLoadFailed": "점수 분포를 일시적으로 불러올 수 없습니다"
+    },
+    "infoLabel": "대회 정보",
+    "joinStatus": {
+      "joined": "참가됨",
+      "notJoined": "미참가"
+    },
+    "loading": "불러오는 중...",
+    "loadingAnswers": "답안 데이터를 불러오는 중...",
+    "mainContent": "대회 주요 내용",
+    "metrics": {
+      "duration": "총 시간",
+      "endTime": "종료 시간",
+      "startTime": "시작 시간"
+    },
+    "monitoring": {
+      "enabled": "모니터링 중",
+      "subtitle": "시험에 들어가면 전체 화면, 탭 전환 및 장치 모니터링이 활성화됩니다.",
+      "title": "모니터링이 활성화됨"
+    },
+    "records": {
+      "currentStatus": "현재 답안 상태",
+      "fullScore": "만점 {{score}}",
+      "notSubmitted": "미제출",
+      "title": "답안 기록",
+      "withResults": "답안 기록 및 성적"
+    },
+    "report": {
+      "download": "다운로드",
+      "failedTitle": "다운로드 실패",
+      "language": "보고서 언어",
+      "languages": {
+        "en": "English",
+        "ja": "日本語",
+        "ko": "한국어",
+        "zhTW": "繁體中文"
+      },
+      "preparing": "준비 중"
+    },
+    "results": {
+      "pendingPublish": "공개 대기",
+      "published": "성적 공개됨",
+      "unpublished": "아직 공개되지 않음",
+      "waitingPublish": "성적 공개 대기"
+    },
+    "rules": {
+      "empty": "추가 규칙이 없습니다.",
+      "noPassword": "이 대회는 비밀번호가 필요하지 않습니다.",
+      "requiresPassword": "이 대회는 비밀번호가 필요합니다.",
+      "title": "규칙 안내"
+    },
+    "submitConfirm": {
+      "body": "제출 후에는 답안을 수정할 수 없습니다.",
+      "confirm": "제출 확인",
+      "heading": "제출 확인"
+    },
+    "summary": {
+      "ariaLabel": "대회 요약",
+      "averageScore": "평균 {{average}} / {{max}}",
+      "completionRate": "완료율",
+      "examResult": "시험 성적",
+      "examStatus": "시험 상태",
+      "scoreDistribution": "점수 분포"
+    },
+    "tabs": {
+      "ariaLabel": "대회 정보 전환",
+      "records": "답안 기록",
+      "rules": "규칙 안내"
+    }
+  },
   "studentStatus": {
     "pausedLocked": "일시 정지 / 잠금",
     "personCount": "{{count}}명",
diff --git a/frontend/src/i18n/locales/zh-TW/contest.json b/frontend/src/i18n/locales/zh-TW/contest.json
index 4f351817..4e4ad275 100644
--- a/frontend/src/i18n/locales/zh-TW/contest.json
+++ b/frontend/src/i18n/locales/zh-TW/contest.json
@@ -62,6 +62,70 @@
       "strictModeEnableSuccess": "已啟用防作弊監控",
       "updateFailed": "更新失敗"
     },
+    "command": {
+      "ariaLabel": "教師管理總覽",
+      "connection": {
+        "offline": "離線",
+        "online": "在線"
+      },
+      "drawer": {
+        "ariaLabel": "學生詳細資訊",
+        "close": "關閉學生詳細資訊",
+        "closeBackdrop": "關閉學生詳細資訊背景",
+        "title": "學生詳細資訊"
+      },
+      "drilldown": {
+        "ariaLabel": "總覽資料切換",
+        "participants": "參與者",
+        "questionStats": "作答分佈"
+      },
+      "eventLog": "事件紀錄",
+      "examStatusSummary": "考試狀態摘要",
+      "examTime": "考試時間",
+      "filters": {
+        "allQuestionTypes": "全部題型",
+        "allStatuses": "全部狀態",
+        "needsAttention": "需要處理"
+      },
+      "metric": {
+        "answerProgress": "作答進度",
+        "eventUnit": "次",
+        "gradingProgress": "批改進度",
+        "inProgress": "進行中",
+        "interrupted": "中斷",
+        "notSubmitted": "未交卷",
+        "pausedDetail": "已暫停",
+        "pointUnit": "分",
+        "score": "分數",
+        "scoreUnit": "{{score}} 分",
+        "scored": "已計分",
+        "violations": "異常事件"
+      },
+      "metricSwitcher": "考生卡片資料切換",
+      "metrics": {
+        "endTime": "結束時間",
+        "examParticipants": "考試人數",
+        "onlineParticipants": "在線人數",
+        "startTime": "開始時間"
+      },
+      "participants": {
+        "empty": "目前沒有考生",
+        "filterStatus": "篩選狀態",
+        "filterStatusAria": "篩選考生狀態",
+        "loading": "考生列表載入中",
+        "search": "搜尋考生",
+        "searchPlaceholder": "搜尋顯示名稱或使用者名稱...",
+        "title": "考生列表"
+      },
+      "questionStats": {
+        "empty": "目前沒有作答分佈資料",
+        "filterQuestionType": "篩選題型",
+        "filterQuestionTypeAria": "篩選題型",
+        "search": "搜尋題目",
+        "searchPlaceholder": "搜尋題號或題目..."
+      },
+      "tabsAriaLabel": "教師管理總覽分頁"
+    },
     "events": {
       "critical": "高風險事件",
       "empty": "目前沒有事件",
@@ -91,6 +155,127 @@
       "problemUnit": "題",
       "time": "時間進度"
     },
+    "model": {
+      "attention": {
+        "anomalyCount": "{{count}} 次異常",
+        "connectionInterrupted": "連線中斷",
+        "examLocked": "考試已鎖定",
+        "notEntered": "尚未進入考試"
+      },
+      "common": {
+        "disabled": "未啟用",
+        "enabled": "已啟用",
+        "noData": "尚無資料",
+        "unset": "未設定"
+      },
+      "contestStatus": {
+        "archived": "已封存",
+        "draft": "草稿",
+        "published": "已發布"
+      },
+      "grading": {
+        "noAnswers": "尚無作答資料",
+        "noData": "尚無批改資料"
+      },
+      "insights": {
+        "examProgress": "考試進度",
+        "gradingProgress": "批改進度",
+        "priorityEvents": "異常事件"
+      },
+      "kpi": {
+        "onlineStudents": "在線考生",
+        "pendingEvents": "待處理事件",
+        "started": "已開始"
+      },
+      "nextActions": {
+        "attention": {
+          "empty": "目前沒有待處理異常",
+          "hasItems": "{{count}} 位考生需要確認",
+          "title": "處理異常"
+        },
+        "grading": {
+          "afterExam": "考後可開始批改",
+          "progress": "已批改 {{percent}}%",
+          "title": "前往批改"
+        },
+        "results": {
+          "readyToPublish": "確認批改後發布",
+          "title": "發布成績"
+        }
+      },
+      "preparation": {
+        "antiCheat": "防作弊設定",
+        "antiCheatEnabled": "防作弊監控已啟用",
+        "antiCheatOptional": "可依考試需求啟用",
+        "currentStatus": "目前狀態：{{status}}",
+        "participantCount": "{{count}} 位參賽者",
+        "participantList": "參賽者名單",
+        "participantsMissing": "尚未看到參賽者資料",
+        "publish": "競賽發布",
+        "publishedDescription": "參賽者可依權限進入競賽",
+        "rules": "作答規則",
+        "rulesMissing": "可補上考試規則與注意事項",
+        "rulesReady": "已填寫規則說明",
+        "schedule": "考試時段",
+        "scheduleMissing": "開始與結束時間未完整設定",
+        "workItemsMissing": "尚未建立可作答的題目",
+        "workItemsReady": "已設定 {{count}} 題"
+      },
+      "progress": {
+        "current": "目前",
+        "label": "進度",
+        "start": "開始"
+      },
+      "readiness": {
+        "done": "完成",
+        "missing": "缺少",
+        "warning": "待確認"
+      },
+      "results": {
+        "published": "已發布",
+        "unpublished": "未發布"
+      },
+      "status": {
+        "anomaly": "異常",
+        "inProgress": "作答中",
+        "locked": "鎖定",
+        "lockedOffline": "鎖定 / 離線",
+        "notStarted": "未開始",
+        "offline": "離線",
+        "online": "在線",
+        "submitted": "已交卷"
+      },
+      "summary": {
+        "antiCheat": "防作弊",
+        "gradingAfterExam": "考後才會產生批改資料",
+        "gradingCount": "{{graded}} / {{total}} 份",
+        "participants": "參賽者",
+        "participantsMissing": "尚無參賽者資料",
+        "participantsReady": "名單可供管理",
+        "results": "成績",
+        "resultsVisible": "參賽者可查看",
+        "scheduleMissing": "需要補齊時間",
+        "scheduleReady": "時間設定完整",
+        "status": "競賽狀態",
+        "statusClosed": "尚未正式開放",
+        "statusOpen": "已開放給參賽者",
+        "workItemsMissing": "尚未建立內容",
+        "workItemsReady": "內容已建立"
+      },
+      "timeline": {
+        "ended": "已結束",
+        "examEnded": "考試已結束",
+        "notStarted": "尚未開始",
+        "remaining": "剩餘 {{time}}",
+        "running": "進行中",
+        "startsIn": "距離開始 {{time}}",
+        "timeUnset": "時間未設定"
+      },
+      "workItems": {
+        "coding": "程式題目",
+        "paperExam": "考卷題目"
+      }
+    },
     "screen": {
       "actions": {
         "addParticipant": "新增參賽者",
@@ -144,7 +329,6 @@
       "disabled": "未啟用",
       "enabled": "已啟用",
       "examProgress": "考試進度",
-      "timelineProgress": "時間進度",
       "goEventPanel": "前往事件面板",
       "goParticipantList": "進入參賽者列表",
       "goProblemManagement": "前往題目管理",
@@ -159,6 +343,7 @@
       "status": "競賽狀態",
       "strictExamMode": "防作弊監控",
       "subtitle": "快速進入設定、題目與狀態操作",
+      "timelineProgress": "時間進度",
       "title": "控制台",
       "violationCount": "異常事件數",
       "violationCountAria": "異常事件數 前往事件面板"
@@ -197,6 +382,7 @@
       "title": "準備狀態"
     },
     "tabs": {
+      "ariaLabel": "準備與成績分頁",
       "entries": "管理入口",
       "grading": "批改與成績",
       "readiness": "準備狀態"
@@ -1576,6 +1762,124 @@
     "ungraded": "未批改",
     "viewSubmissionSamples": "查看提交樣本"
   },
+  "studentDashboard": {
+    "actions": {
+      "adminPanel": "管理後台",
+      "backToAnswering": "回到作答",
+      "downloadProof": "下載作答證明",
+      "downloadReport": "下載成績單",
+      "join": "加入競賽",
+      "joinUnavailable": "目前不可加入",
+      "refresh": "重新整理",
+      "rejoin": "重新加入",
+      "resume": "恢復作答",
+      "start": "開始作答",
+      "submit": "交卷",
+      "unavailable": "不可作答",
+      "waitingStart": "等待開始"
+    },
+    "announcements": {
+      "empty": "目前沒有公告。",
+      "loading": "載入公告中...",
+      "title": "公告"
+    },
+    "answerStatus": {
+      "answered": "已作答",
+      "correct": "正確",
+      "graded": "已批改",
+      "marked": "已標記",
+      "noScore": "未得分",
+      "partial": "部分得分",
+      "pendingGrading": "待批改",
+      "unanswered": "未作答"
+    },
+    "ariaLabel": "學生競賽首頁",
+    "contestState": {
+      "archived": "已封存",
+      "draft": "草稿",
+      "ended": "已結束",
+      "running": "進行中",
+      "unknown": "未知",
+      "upcoming": "即將開始"
+    },
+    "empty": {
+      "noAnswerRecords": "尚無作答紀錄。",
+      "noQuestions": "尚無題目資料。",
+      "noScoreDistribution": "尚無成績分布資料。"
+    },
+    "errors": {
+      "announcementsLoadFailed": "公告暫時無法載入",
+      "questionsLoadFailed": "題目資料暫時無法載入",
+      "scoreDistributionLoadFailed": "成績分布暫時無法載入"
+    },
+    "infoLabel": "競賽資訊",
+    "joinStatus": {
+      "joined": "已加入",
+      "notJoined": "未加入"
+    },
+    "loading": "載入中...",
+    "loadingAnswers": "載入作答資料中...",
+    "mainContent": "競賽主要內容",
+    "metrics": {
+      "duration": "總時長",
+      "endTime": "截止時間",
+      "startTime": "開始時間"
+    },
+    "monitoring": {
+      "enabled": "監控中",
+      "subtitle": "進入作答後會啟用全螢幕、分頁切換與裝置監控。",
+      "title": "已啟用監控"
+    },
+    "records": {
+      "currentStatus": "目前作答狀況",
+      "fullScore": "滿分 {{score}}",
+      "notSubmitted": "尚未提交",
+      "title": "作答紀錄",
+      "withResults": "作答紀錄與成績"
+    },
+    "report": {
+      "download": "下載",
+      "failedTitle": "下載失敗",
+      "language": "報告語言",
+      "languages": {
+        "en": "English",
+        "ja": "日本語",
+        "ko": "한국어",
+        "zhTW": "繁體中文"
+      },
+      "preparing": "準備中"
+    },
+    "results": {
+      "pendingPublish": "待發布",
+      "published": "成績已發布",
+      "unpublished": "尚未發布",
+      "waitingPublish": "等待成績發布"
+    },
+    "rules": {
+      "empty": "沒有額外規則。",
+      "noPassword": "此競賽不需要密碼。",
+      "requiresPassword": "此競賽需要密碼。",
+      "title": "規則說明"
+    },
+    "submitConfirm": {
+      "body": "交卷後將無法繼續修改答案。",
+      "confirm": "確認交卷",
+      "heading": "確認交卷"
+    },
+    "summary": {
+      "ariaLabel": "競賽摘要",
+      "averageScore": "平均 {{average}} / {{max}}",
+      "completionRate": "完成率",
+      "examResult": "考試成績",
+      "examStatus": "考試狀態",
+      "scoreDistribution": "成績分布"
+    },
+    "tabs": {
+      "ariaLabel": "競賽資訊切換",
+      "records": "作答紀錄",
+      "rules": "規則說明"
+    }
+  },
   "studentStatus": {
     "pausedLocked": "已暫停 / 已鎖定",
     "personCount": "{{count}} 人",

From 75b7ce4f127adee453a2d245cd5a9c488bd0eed3 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:50:12 +0800
Subject: [PATCH 55/60] fix(side-menu): align idle section style with
 AppSideMenu via shared classes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/SideMenuContestIdleSection.tsx | 32 +++++--------------
 1 file changed, 8 insertions(+), 24 deletions(-)

diff --git a/frontend/src/features/app/components/SideMenuContestIdleSection.tsx b/frontend/src/features/app/components/SideMenuContestIdleSection.tsx
index b606ae72..ed11633b 100644
--- a/frontend/src/features/app/components/SideMenuContestIdleSection.tsx
+++ b/frontend/src/features/app/components/SideMenuContestIdleSection.tsx
@@ -4,47 +4,31 @@ import { Home, ArrowLeft } from "@carbon/icons-react";
 interface Props {
   classroomId: string;
   contestId: string;
+  /** kept for API parity with the runtime section; styling is driven by the parent .side-menu--mini class */
   compact?: boolean;
 }
 
-export const SideMenuContestIdleSection = ({ classroomId, contestId, compact }: Props) => {
+export const SideMenuContestIdleSection = ({ classroomId, contestId }: Props) => {
   const { pathname } = useLocation();
   const dashboardPath = `/classrooms/${classroomId}/contest/${contestId}`;
   const isDashboard = pathname === dashboardPath;
   const classroomPath = `/classrooms/${classroomId}`;
 
-  const itemBase: React.CSSProperties = {
-    display: "flex",
-    alignItems: "center",
-    gap: "0.75rem",
-    padding: compact ? "0.5rem" : "0.75rem 1rem",
-    borderRadius: "0.25rem",
-    color: "var(--cds-text-primary)",
-    textDecoration: "none",
-  };
-
   return (
-    <nav
-      aria-label="Contest navigation"
-      style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}
-    >
-      <Link to={classroomPath} style={itemBase}>
+    <div className="side-menu__section">
+      <Link to={classroomPath} className="side-menu__link">
         <ArrowLeft size={20} />
-        {!compact && <span>返回教室</span>}
+        <span>返回教室</span>
       </Link>
       <Link
         to={dashboardPath}
-        style={{
-          ...itemBase,
-          background: isDashboard ? "var(--cds-layer-accent)" : "transparent",
-          fontWeight: isDashboard ? 600 : 400,
-        }}
+        className={`side-menu__link${isDashboard ? " side-menu__link--active" : ""}`}
         aria-current={isDashboard ? "page" : undefined}
       >
         <Home size={20} />
-        {!compact && <span>競賽主頁</span>}
+        <span>競賽主頁</span>
       </Link>
-    </nav>
+    </div>
   );
 };
 

From 77882d4d0d9664095838fedaf8c3a5e80f490e26 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:50:15 +0800
Subject: [PATCH 56/60] fix(contest): wait for contest load before mounting
 ExamModeWrapper to preserve precheck handoff

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../contest/components/layout/RuntimeRouteWrapper.tsx     | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx b/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
index 6c85aba6..36ac12d2 100644
--- a/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
+++ b/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
@@ -21,6 +21,8 @@ export const RuntimeRouteWrapper = ({ children }: Props) => {
   const {
     contestId,
     contest,
+    contestLoading,
+    contestNotFound,
     hasEnded,
     refreshContest,
     navigate,
@@ -65,6 +67,12 @@ export const RuntimeRouteWrapper = ({ children }: Props) => {
     onRefresh: refreshContest,
   };
 
+  // Guard: don't render ExamModeWrapper until contest is loaded.
+  // Otherwise ExamModeWrapper renders with cheatDetectionEnabled=false,
+  // triggering its cleanup effect which destroys the precheck screen-share handoff stream.
+  if (contestLoading || (!contest && !contestNotFound)) return null;
+  if (contestNotFound) return null;
+
   return (
     <ContestRuntimeProvider value={{ isRuntime: true, openMonitor: () => setMonitoringOpen(true) }}>
       <ExamModeWrapper {...examModeProps}>

From 8809342d07da6fd48c1fc7c63863ecacbf44e881 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 16:50:18 +0800
Subject: [PATCH 57/60] fix(paper-exam): remove duplicate ExamStatusBadge (now
 provided by global navbar)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../screens/paperExam/PaperExamAnsweringScreen.tsx        | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx b/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx
index 31bd8e51..a06026c5 100644
--- a/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx
+++ b/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx
@@ -14,7 +14,6 @@ import {
   CheckmarkFilled,
   FlagFilled,
 } from "@carbon/icons-react";
-import ExamStatusBadge from "@/features/contest/components/exam/ExamStatusBadge";
 import { usePaperExamFlow } from "./usePaperExamFlow";
 import { useInterval } from "@/shared/hooks/useInterval";
 import { ExamQuestionCard } from "../../components/exam/ExamQuestionCard";
@@ -494,13 +493,6 @@ const PaperExamAnsweringScreen: React.FC = () => {
                 {saveStatusLabel}
               </span>
             )}
-            <ExamStatusBadge
-              examStatus={contest?.examStatus}
-              cheatDetectionEnabled={contest?.cheatDetectionEnabled}
-              timeLeft={countdown.display}
-              lockReason={contest?.lockReason}
-              autoUnlockAt={contest?.autoUnlockAt}
-            />
             <Button
               kind="primary"
               data-testid="paper-exam-open-submit-review-btn"

From ae958810e6ab074dfc5b6b49c1fee38ef06a77d1 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 17:04:05 +0800
Subject: [PATCH 58/60] refactor(contest-admin): preparation entries use
 DashboardContainer grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 管理入口 entry tile grid in AdminPreparationDashboard was a hand-
rolled copy of the Container's bordered grid pattern: a 2-column grid
with 1px outer border, per-cell border-right + border-bottom, and
nth-child / nth-last-child resets plus a mobile single-column
fallback. Replace the wrapper with
<DashboardContainer layout="grid" columns={2} bordered dividers="auto">
and drop the duplicated SCSS — divider behaviour now comes from a
single source.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../AdminPreparationDashboard.module.scss     | 31 +------------------
 .../admin/AdminPreparationDashboard.tsx       | 14 +++++++--
 2 files changed, 12 insertions(+), 33 deletions(-)

diff --git a/frontend/src/features/contest/components/admin/AdminPreparationDashboard.module.scss b/frontend/src/features/contest/components/admin/AdminPreparationDashboard.module.scss
index d383b562..b668d6ee 100644
--- a/frontend/src/features/contest/components/admin/AdminPreparationDashboard.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminPreparationDashboard.module.scss
@@ -95,31 +95,14 @@
   font-weight: 600;
 }
 
-.entryGrid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0;
-  border: 1px solid var(--cds-border-subtle);
-}
-
 .entryButton {
   width: 100%;
   max-width: none;
   min-height: 5.5rem;
   border: 0;
-  border-right: 1px solid var(--cds-border-subtle);
-  border-bottom: 1px solid var(--cds-border-subtle);
   text-align: left;
 }
 
-.entryButton:nth-child(2n) {
-  border-right: 0;
-}
-
-.entryButton:nth-last-child(-n + 2) {
-  border-bottom: 0;
-}
-
 .entryText {
   display: grid;
   gap: 0.125rem;
@@ -133,19 +116,7 @@
 }
 
 @media (max-width: 672px) {
-  .checklistItem,
-  .entryGrid {
+  .checklistItem {
     grid-template-columns: 1fr;
   }
-
-  .entryButton,
-  .entryButton:nth-child(2n),
-  .entryButton:nth-last-child(-n + 2) {
-    border-right: 0;
-    border-bottom: 1px solid var(--cds-border-subtle);
-  }
-
-  .entryButton:last-child {
-    border-bottom: 0;
-  }
 }
diff --git a/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx b/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx
index d98b69cd..4a57e617 100644
--- a/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx
+++ b/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx
@@ -16,7 +16,10 @@ import type {
   AdminPreparationDashboardData,
   PreparationReadinessState,
 } from "@/features/contest/screens/admin/panels/adminOverviewDashboard.model";
-import { BlockHeader } from "@/shared/components/dashboard";
+import {
+  BlockHeader,
+  DashboardContainer,
+} from "@/shared/components/dashboard";
 import styles from "./AdminPreparationDashboard.module.scss";
 
 interface AdminPreparationDashboardProps {
@@ -211,7 +214,12 @@ export default function AdminPreparationDashboard({
           key: "entries",
           label: t("adminPreparationDashboard.tabs.entries", "管理入口"),
           content: (
-            <div className={styles.entryGrid}>
+            <DashboardContainer
+              layout="grid"
+              columns={2}
+              bordered
+              dividers="auto"
+            >
               {panelEntries.map((entry) => {
                 const Icon = entry.icon;
                 return (
@@ -229,7 +237,7 @@ export default function AdminPreparationDashboard({
                   </Button>
                 );
               })}
-            </div>
+            </DashboardContainer>
           ),
         },
       ]}

From 46b3d796ad2e878d55b933a86ddc03948c7f55f1 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 19:12:11 +0800
Subject: [PATCH 59/60] feat(contest): unify runtime workspace shell

---
 .../apps/contests/services/exam_validation.py |   4 +-
 .../contests/tests/exam/test_exam_state.py    |  11 ++
 .../tests/test_exam_service_boundaries.py     |  39 ++++++
 frontend/src/App.tsx                          |  15 ++-
 .../features/app/components/MainLayout.tsx    |  18 ++-
 .../src/features/app/components/SideMenu.tsx  |  18 ++-
 .../SideMenuContestRuntimeSection.tsx         | 126 +++++++++---------
 .../src/features/app/components/UserMenu.scss |   5 +-
 .../workspace/WorkspaceTopNav.module.scss     |  80 ++++++++++-
 .../components/workspace/WorkspaceTopNav.tsx  | 108 +++++++++++----
 .../contest/components/ExamModeWrapper.tsx    |  37 +++--
 .../admin/AdminOverviewCommandCenter.test.tsx |  19 ++-
 .../admin/AdminOverviewCommandCenter.tsx      |  59 +++++---
 .../components/exam/ExamNavigator.module.scss |  50 ++++++-
 .../contest/components/exam/ExamNavigator.tsx |  24 ++--
 .../components/exam/ExamStatusBadge.tsx       |   4 +
 .../contest/components/exam/PaperExamCore.tsx |  66 +++++++--
 .../layout/ContestLayoutHeaderSlotContext.tsx |  15 ---
 .../layout/ContestWorkspaceLayout.tsx         |  62 +++++++--
 .../components/layout/RuntimeRouteWrapper.tsx |  55 ++------
 .../contexts/ContestRuntimeContext.tsx        |  26 ----
 .../ContestRuntimeNavigatorContext.tsx        |  29 ++++
 .../contexts/contestRuntimeNavigatorStore.ts  |  21 +++
 .../src/features/contest/contexts/index.ts    |  11 ++
 .../contexts/useContestRuntimeNavigator.ts    |  27 ++++
 .../contest/contexts/useOptionalContest.ts    |   5 +
 .../hooks/useScreenShareMonitoring.test.ts    |  10 +-
 .../contest/hooks/useScreenShareMonitoring.ts |  11 +-
 frontend/src/features/contest/index.ts        |   3 +-
 frontend/src/features/contest/routes.tsx      |  14 +-
 .../panels/AdminOverviewScreen.module.scss    |  29 ++--
 .../admin/panels/AdminOverviewScreen.test.tsx |   2 +
 .../admin/panels/AdminOverviewScreen.tsx      |  75 ++---------
 .../paperExam/PaperExamAnswering.module.scss  |   6 +-
 .../paperExam/PaperExamAnsweringScreen.tsx    |  35 +++--
 .../src/shared/ui/list/ListPanel.module.scss  |   6 +
 frontend/src/shared/ui/list/ListPanel.tsx     |   4 +-
 37 files changed, 746 insertions(+), 383 deletions(-)
 delete mode 100644 frontend/src/features/contest/components/layout/ContestLayoutHeaderSlotContext.tsx
 delete mode 100644 frontend/src/features/contest/contexts/ContestRuntimeContext.tsx
 create mode 100644 frontend/src/features/contest/contexts/ContestRuntimeNavigatorContext.tsx
 create mode 100644 frontend/src/features/contest/contexts/contestRuntimeNavigatorStore.ts
 create mode 100644 frontend/src/features/contest/contexts/useContestRuntimeNavigator.ts
 create mode 100644 frontend/src/features/contest/contexts/useOptionalContest.ts

diff --git a/backend/apps/contests/services/exam_validation.py b/backend/apps/contests/services/exam_validation.py
index 8fa76c62..77aad9e4 100644
--- a/backend/apps/contests/services/exam_validation.py
+++ b/backend/apps/contests/services/exam_validation.py
@@ -27,10 +27,10 @@ def validate_exam_operation(contest, user, require_in_progress=False, allow_admi
     if allow_admin_bypass and can_manage_contest(user, contest):
         try:
             participant = ContestParticipant.objects.get(contest=contest, user=user)
-            return participant, None
+            return participant
         except ContestParticipant.DoesNotExist:
             # Managers don't need to be registered
-            return None, None
+            return None
 
     # Layer 1: Contest status
     if contest.status != 'published':
diff --git a/backend/apps/contests/tests/exam/test_exam_state.py b/backend/apps/contests/tests/exam/test_exam_state.py
index 2a3c9641..524c5984 100644
--- a/backend/apps/contests/tests/exam/test_exam_state.py
+++ b/backend/apps/contests/tests/exam/test_exam_state.py
@@ -38,6 +38,17 @@ def test_start_exam(self):
         
         p = ContestParticipant.objects.get(user=self.user, contest=self.contest)
         self.assertEqual(p.exam_status, ExamStatus.IN_PROGRESS)
+
+    def test_owner_participant_can_start_exam(self):
+        ContestParticipant.objects.create(contest=self.contest, user=self.admin)
+        self.client.force_authenticate(user=self.admin)
+
+        url = reverse('contests:contest-exam-start-exam', args=[self.contest.id])
+        response = self.client.post(url)
+
+        self.assertEqual(response.status_code, status.HTTP_200_OK)
+        p = ContestParticipant.objects.get(user=self.admin, contest=self.contest)
+        self.assertEqual(p.exam_status, ExamStatus.IN_PROGRESS)
         
     def test_end_exam(self):
         # Start first
diff --git a/backend/apps/contests/tests/test_exam_service_boundaries.py b/backend/apps/contests/tests/test_exam_service_boundaries.py
index aa28be50..0edda7c1 100644
--- a/backend/apps/contests/tests/test_exam_service_boundaries.py
+++ b/backend/apps/contests/tests/test_exam_service_boundaries.py
@@ -92,6 +92,45 @@ def test_validate_exam_operation_returns_participant_on_success_and_raises_valid
     ) == participant
 
 
+@pytest.mark.django_db
+def test_validate_exam_operation_admin_bypass_returns_participant_not_tuple(
+    teacher: User,
+    published_contest: Contest,
+):
+    participant = ContestParticipant.objects.create(
+        contest=published_contest,
+        user=teacher,
+        exam_status=ExamStatus.NOT_STARTED,
+    )
+
+    assert validate_exam_operation(published_contest, teacher) == participant
+
+    adapted_participant, response = validate_exam_operation_for_view(
+        published_contest,
+        teacher,
+    )
+
+    assert response is None
+    assert adapted_participant == participant
+    assert not isinstance(adapted_participant, tuple)
+
+
+@pytest.mark.django_db
+def test_validate_exam_operation_admin_bypass_without_participant_returns_none(
+    teacher: User,
+    published_contest: Contest,
+):
+    assert validate_exam_operation(published_contest, teacher) is None
+
+    adapted_participant, response = validate_exam_operation_for_view(
+        published_contest,
+        teacher,
+    )
+
+    assert adapted_participant is None
+    assert response is None
+
+
 @pytest.mark.django_db
 def test_validate_exam_operation_view_adapter_preserves_legacy_error_response(
     teacher: User,
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 9ff92174..b2e5964e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -31,7 +31,8 @@ import {
 } from "@/features/auth";
 import { problemDetailRoutes, problemSolveRoutes } from "@/features/problems";
 import {
-  classroomContestRoutes,
+  classroomContestRouteChildren,
+  ContestWorkspaceLayout,
   classroomContestAdminRoute,
   classroomExamPreviewRoute,
   classroomExamPrecheckRoute,
@@ -152,8 +153,16 @@ function App() {
                               />
                               {/* Classroom Detail - inside MainLayout for shared sidebar */}
                               {classroomDetailRoute}
-                              {/* Classroom Contest - dashboard + runtime, all under shared MainLayout/WorkspaceShell */}
-                              {classroomContestRoutes}
+                            </Route>
+
+                            {/* Classroom Contest - ContestProvider wraps MainLayout/WorkspaceShell */}
+                            <Route
+                              path="/classrooms/:classroomId/contest/:contestId"
+                              element={<ContestWorkspaceLayout />}
+                            >
+                              <Route element={<MainLayout />}>
+                                {classroomContestRouteChildren}
+                              </Route>
                             </Route>
 
                             {/* Legacy hidden routes */}
diff --git a/frontend/src/features/app/components/MainLayout.tsx b/frontend/src/features/app/components/MainLayout.tsx
index 8583341b..ecae13fe 100644
--- a/frontend/src/features/app/components/MainLayout.tsx
+++ b/frontend/src/features/app/components/MainLayout.tsx
@@ -1,10 +1,11 @@
-import { Outlet, useLocation } from "react-router-dom";
+import { Outlet, useLocation, useOutletContext } from "react-router-dom";
 import { Content } from "@carbon/react";
 import { WorkspaceShell } from "@/features/chatbot/components/workspace/WorkspaceShell";
 import styles from "./MainLayout.module.scss";
 
 const MainLayout = () => {
   const location = useLocation();
+  const outletContext = useOutletContext<unknown>();
   const isChatPage = location.pathname.startsWith("/chat");
 
   return (
@@ -13,11 +14,20 @@ const MainLayout = () => {
         <WorkspaceShell>
           {isChatPage ? (
             <div style={{ flex: 1, height: "100%", overflow: "hidden", display: "flex", flexDirection: "column" }}>
-              <Outlet />
+              <Outlet context={outletContext} />
             </div>
           ) : (
-            <Content style={{ height: "100%", overflow: "auto", marginTop: 0 }}>
-              <Outlet />
+            <Content
+              style={{
+                height: "100%",
+                minHeight: 0,
+                overflow: "auto",
+                marginTop: 0,
+                display: "flex",
+                flexDirection: "column",
+              }}
+            >
+              <Outlet context={outletContext} />
             </Content>
           )}
         </WorkspaceShell>
diff --git a/frontend/src/features/app/components/SideMenu.tsx b/frontend/src/features/app/components/SideMenu.tsx
index 31d7a366..c7522dc1 100644
--- a/frontend/src/features/app/components/SideMenu.tsx
+++ b/frontend/src/features/app/components/SideMenu.tsx
@@ -29,6 +29,7 @@ import { useAiSessionParam } from "@/features/chatbot/lib/aiSessionUrl";
 import { useOptionalChatbotContext } from "@/features/chatbot/contexts/ChatbotProvider";
 import { chatbotRepository } from "@/infrastructure/api/repositories";
 import { ChatHistoryPanel } from "@/features/chatbot/components/chat-ui/ChatHistoryPanel";
+import { useOptionalContest } from "@/features/contest/contexts";
 import { getClassroomContestDashboardPath } from "@/features/contest/domain/contestRoutePolicy";
 import { useContestRuntimeMode } from "@/features/contest/hooks";
 import { getContestTypeModule } from "@/features/contest/modules/registry";
@@ -114,6 +115,10 @@ export const SideMenu: React.FC<SideMenuProps> = ({
   }, [location.pathname]);
 
   const contestIdToFetch = contestAdminContext?.contestId ?? contestMatch?.contestId ?? null;
+  const contestContext = useOptionalContest();
+  const contextContestForNav =
+    contestContext?.contest?.id === contestIdToFetch ? contestContext.contest : null;
+  const effectiveContestForNav = contextContestForNav ?? contestForNav;
 
   const { isRuntime } = useContestRuntimeMode();
 
@@ -164,7 +169,7 @@ export const SideMenu: React.FC<SideMenuProps> = ({
   }, [contestIdToFetch]);
 
   useEffect(() => {
-    if (!contestIdToFetch || contestFetched) return;
+    if (!contestIdToFetch || contestFetched || contextContestForNav) return;
     let active = true;
     const loadContest = async () => {
       try {
@@ -181,7 +186,7 @@ export const SideMenu: React.FC<SideMenuProps> = ({
     return () => {
       active = false;
     };
-  }, [contestIdToFetch, contestFetched]);
+  }, [contestIdToFetch, contestFetched, contextContestForNav]);
 
   useEffect(() => {
     if (isPanelMode || !isOpen) return;
@@ -288,10 +293,10 @@ export const SideMenu: React.FC<SideMenuProps> = ({
 
   const contestPanelNavItems = useMemo<ContestPanelNavItem[]>(() => {
     if (!contestAdminContext) return [];
-    const module = getContestTypeModule(contestForNav?.contestType);
+    const module = getContestTypeModule(effectiveContestForNav?.contestType);
     const isExamMode = module.admin.editorKind === "paper_exam";
     const panels = Array.from(new Set<AdminPanelId>([
-      ...module.admin.getAvailablePanels(contestForNav),
+      ...module.admin.getAvailablePanels(effectiveContestForNav),
       "settings",
     ]));
     return panels.flatMap((panel) => {
@@ -304,7 +309,7 @@ export const SideMenu: React.FC<SideMenuProps> = ({
         Icon: meta.Icon,
       }];
     });
-  }, [contestAdminContext, contestForNav, tContest]);
+  }, [contestAdminContext, effectiveContestForNav, tContest]);
 
   const goToPanel = useCallback((panel: string) => {
     navigate(`/classrooms/${classroomId}?panel=${panel}`);
@@ -343,10 +348,9 @@ export const SideMenu: React.FC<SideMenuProps> = ({
           <SideMenuContestRuntimeSection
             classroomId={contestMatch.classroomId}
             contestId={contestMatch.contestId}
-            activeTab="solve"
             activeProblemId={activeProblemId}
             compact={compact}
-            problems={contestForNav?.problems ?? []}
+            problems={effectiveContestForNav?.problems ?? []}
           />
         ) : inContestIdle && contestMatch ? (
           <SideMenuContestIdleSection
diff --git a/frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx b/frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx
index be576221..8992838e 100644
--- a/frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx
+++ b/frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx
@@ -1,14 +1,13 @@
 import { useNavigate } from "react-router-dom";
-import { ContentSwitcher, Switch } from "@carbon/react";
 import { Checkmark, CircleDash, IncompleteCancel } from "@carbon/icons-react";
 import type { ContestProblemSummary } from "@/core/entities/contest.entity";
 import type { SubmissionStatus } from "@/core/entities/submission.entity";
+import { ExamNavigator } from "@/features/contest/components/exam/ExamNavigator";
+import { useContestRuntimeNavigator } from "@/features/contest/contexts";
 
 interface Props {
   classroomId: string;
   contestId: string;
-  /** 'solve' | 'dashboard' — current sidebar tab */
-  activeTab: "solve" | "dashboard";
   /** 已選的 problemId，用以高亮 */
   activeProblemId?: string;
   compact?: boolean;
@@ -32,78 +31,75 @@ const renderStatusIcon = (kind: ProblemStatusKind) => {
 export const SideMenuContestRuntimeSection = ({
   classroomId,
   contestId,
-  activeTab,
   activeProblemId,
   compact,
   problems,
 }: Props) => {
   const navigate = useNavigate();
+  const runtimeNavigator = useContestRuntimeNavigator();
 
-  const dashboardPath = `/classrooms/${classroomId}/contest/${contestId}`;
   const solvePath = `/classrooms/${classroomId}/contest/${contestId}/solve`;
 
-  const handleTabChange = ({ name }: { name?: string | number }) => {
-    if (name === "dashboard") navigate(dashboardPath);
-    else navigate(solvePath);
-  };
-
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
-      {!compact && (
-        <ContentSwitcher
-          selectedIndex={activeTab === "solve" ? 0 : 1}
-          onChange={handleTabChange}
-          size="sm"
-        >
-          <Switch name="solve" text="Solve" />
-          <Switch name="dashboard" text="Dashboard" />
-        </ContentSwitcher>
+    <div style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}>
+      {runtimeNavigator ? (
+        <ExamNavigator
+          items={runtimeNavigator.items}
+          activeIndex={runtimeNavigator.activeIndex}
+          answeredIds={runtimeNavigator.answeredIds}
+          markedIds={runtimeNavigator.markedIds}
+          collapsed={compact}
+          overviewLabel={runtimeNavigator.overviewLabel}
+          onSelectOverview={runtimeNavigator.onSelectOverview}
+          onSelect={runtimeNavigator.onSelect}
+          hideHeader
+        />
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem", minHeight: 0 }}>
+          {problems.length === 0 ? (
+            <p style={{ color: "var(--cds-text-secondary)", fontSize: "0.75rem" }}>
+              {compact ? "" : "尚無題目"}
+            </p>
+          ) : (
+            problems.map((p) => {
+              const isActive = p.problemId === activeProblemId;
+              const kind = mapStatusKind(p.userStatus);
+              const target = `${solvePath}/${p.problemId}`;
+              return (
+                <button
+                  key={p.problemId}
+                  type="button"
+                  onClick={() => navigate(target)}
+                  aria-current={isActive ? "page" : undefined}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.5rem",
+                    padding: compact ? "0.5rem" : "0.5rem 0.75rem",
+                    borderRadius: "0.25rem",
+                    background: isActive ? "var(--cds-layer-accent)" : "transparent",
+                    border: "none",
+                    cursor: "pointer",
+                    textAlign: "left",
+                    width: "100%",
+                    color: "var(--cds-text-primary)",
+                  }}
+                >
+                  {renderStatusIcon(kind)}
+                  {!compact && (
+                    <>
+                      <span style={{ flexShrink: 0, fontWeight: 600 }}>{p.label}</span>
+                      <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                        {p.title}
+                      </span>
+                    </>
+                  )}
+                </button>
+              );
+            })
+          )}
+        </div>
       )}
-
-      <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
-        {problems.length === 0 ? (
-          <p style={{ color: "var(--cds-text-secondary)", fontSize: "0.75rem" }}>
-            {compact ? "" : "尚無題目"}
-          </p>
-        ) : (
-          problems.map((p) => {
-            const isActive = p.problemId === activeProblemId;
-            const kind = mapStatusKind(p.userStatus);
-            const target = `${solvePath}/${p.problemId}`;
-            return (
-              <button
-                key={p.problemId}
-                type="button"
-                onClick={() => navigate(target)}
-                aria-current={isActive ? "page" : undefined}
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "0.5rem",
-                  padding: compact ? "0.5rem" : "0.5rem 0.75rem",
-                  borderRadius: "0.25rem",
-                  background: isActive ? "var(--cds-layer-accent)" : "transparent",
-                  border: "none",
-                  cursor: "pointer",
-                  textAlign: "left",
-                  width: "100%",
-                  color: "var(--cds-text-primary)",
-                }}
-              >
-                {renderStatusIcon(kind)}
-                {!compact && (
-                  <>
-                    <span style={{ flexShrink: 0, fontWeight: 600 }}>{p.label}</span>
-                    <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                      {p.title}
-                    </span>
-                  </>
-                )}
-              </button>
-            );
-          })
-        )}
-      </div>
     </div>
   );
 };
diff --git a/frontend/src/features/app/components/UserMenu.scss b/frontend/src/features/app/components/UserMenu.scss
index d859de8a..653e799b 100644
--- a/frontend/src/features/app/components/UserMenu.scss
+++ b/frontend/src/features/app/components/UserMenu.scss
@@ -6,7 +6,8 @@
   display: flex;
   align-items: center;
   gap: layout.$spacing-03;
-  padding: 0 layout.$spacing-04;
+  padding: 0 layout.$spacing-03;
+  margin-right: 0;
   height: 100%;
   background: none;
   border: none;
@@ -45,7 +46,7 @@
   }
 
   @media (max-width: 672px) {
-    padding: 0 layout.$spacing-03;
+    padding: 0 layout.$spacing-02;
 
     &__text {
       display: none;
diff --git a/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss b/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss
index 1713380b..76039eae 100644
--- a/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss
+++ b/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss
@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: space-between;
   min-height: 3rem;
-  padding: 0 0.75rem;
+  padding: 0 0 0 0.75rem;
   border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
   background: var(--cds-layer);
   color: var(--cds-text-primary);
@@ -125,11 +125,12 @@
   justify-content: flex-end;
   flex-shrink: 0;
   height: 3rem;
+  padding-right: 0;
 }
 
 @media (max-width: 672px) {
   .root {
-    padding: 0 0.5rem;
+    padding: 0 0 0 0.5rem;
   }
 
   .context {
@@ -142,7 +143,80 @@
   align-items: center;
   gap: 0.25rem;
   font-variant-numeric: tabular-nums;
-  margin-right: 0.5rem;
+  min-height: 3rem;
+  padding: 0 0.75rem;
+  border-left: 1px solid var(--cds-border-subtle-01);
+  color: var(--cds-text-primary);
+}
+
+.runtimeMonitoringMini {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 3rem;
+  block-size: 3rem;
+  padding: 0;
+  border: 0;
+  border-left: 1px solid var(--cds-border-subtle-01);
+  background: transparent;
+  color: var(--cds-icon-secondary);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--cds-layer-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: -2px;
+  }
+}
+
+.runtimeMonitoringNormal {
+  color: var(--cds-support-success);
+
+  svg {
+    animation: workspaceMonitoringPulse 2.8s ease-in-out infinite;
+    filter: drop-shadow(0 0 0 rgba(66, 190, 101, 0));
+  }
+}
+
+.runtimeMonitoringWarning {
+  color: var(--cds-support-warning);
+}
+
+.runtimeMonitoringCritical {
+  color: var(--cds-support-error);
+}
+
+.runtimeMonitoringCountdown {
+  position: absolute;
+  right: 0.25rem;
+  bottom: 0.25rem;
+  max-inline-size: 2.25rem;
+  overflow: hidden;
+  color: currentColor;
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@keyframes workspaceMonitoringPulse {
+  0%,
+  100% {
+    opacity: 0.76;
+    transform: scale(1);
+    filter: drop-shadow(0 0 0 rgba(66, 190, 101, 0));
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.08);
+    filter: drop-shadow(0 0 6px rgba(66, 190, 101, 0.52));
+  }
 }
 
 .contextLink:disabled {
diff --git a/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx b/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx
index fced189f..a6a63923 100644
--- a/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx
+++ b/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx
@@ -1,19 +1,29 @@
 import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { IconButton } from "@carbon/react";
-import { ChevronDown, Education, Home, OpenPanelLeft, Settings } from "@carbon/icons-react";
+import {
+  ChevronDown,
+  Education,
+  Home,
+  Locked,
+  OpenPanelLeft,
+  Settings,
+  View,
+  WarningAltFilled,
+} from "@carbon/icons-react";
 import { useTranslation } from "react-i18next";
 import type { BoundContest, Classroom, ClassroomDetail } from "@/core/entities/classroom.entity";
 import { getClassroom, getClassrooms } from "@/infrastructure/api/repositories/classroom.repository";
 import { getClassroomIcon } from "@/features/classroom/constants/classroomIcons";
 import { getClassroomContestAdminPath, getClassroomContestDashboardPath } from "@/features/contest/domain/contestRoutePolicy";
+import { usePageHeaderActionsSlot } from "@/features/app/contexts/PageHeaderActionsContext";
 import { useWorkspace } from "@/features/app/contexts/WorkspaceContext";
 import { UserMenu } from "@/features/app/components/UserMenu";
 import { useContestRuntimeMode } from "@/features/contest/hooks";
-import { useContestRuntimeContext } from "@/features/contest/contexts/ContestRuntimeContext";
-import { useContestLayoutState } from "@/features/contest/hooks/useContestLayoutState";
+import { useContest } from "@/features/contest/contexts/ContestContext";
 import { useContestTimers } from "@/features/contest/hooks/useContestTimers";
-import ExamStatusBadge from "@/features/contest/components/exam/ExamStatusBadge";
+import { ExamModeMonitorModal } from "@/features/contest/components/modals/ExamModeMonitorModal";
+import { useExamMonitoringStatus } from "@/features/contest/contexts/ExamMonitoringStatusContext";
 import { TimeDisplay } from "@/shared/components/dashboard";
 import styles from "./WorkspaceTopNav.module.scss";
 
@@ -43,6 +53,7 @@ interface WorkspaceTopNavProps {
 export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
   const { t } = useTranslation("common");
   const { left } = useWorkspace();
+  const pageHeaderActions = usePageHeaderActionsSlot();
   const location = useLocation();
   const navigate = useNavigate();
   const menuRef = useRef<HTMLDivElement>(null);
@@ -156,6 +167,7 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
   }, [classroomId, contestRouteId, navigate]);
 
   const { isRuntime } = useContestRuntimeMode();
+  const effectiveOpenMenu = isRuntime ? null : openMenu;
 
   return (
     <header className={styles.root}>
@@ -185,15 +197,15 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
                   type="button"
                   className={styles.contextLink}
                   aria-haspopup="menu"
-                  aria-expanded={openMenu === "classroom"}
+                  aria-expanded={effectiveOpenMenu === "classroom"}
                   onClick={() => setOpenMenu((menu) => menu === "classroom" ? null : "classroom")}
                   disabled={isRuntime}
                 >
                   {createElement(getClassroomIcon(currentClassroom.icon), { size: 18 })}
                   <span>{currentClassroom.name}</span>
-                  <ChevronDown size={14} />
+                  {!isRuntime ? <ChevronDown size={14} /> : null}
                 </button>
-                {openMenu === "classroom" ? (
+                {effectiveOpenMenu === "classroom" ? (
                   <div className={styles.menu} role="menu">
                     {classrooms.map((classroom) => {
                       return (
@@ -223,7 +235,7 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
                   type="button"
                   className={styles.contextLink}
                   aria-haspopup="menu"
-                  aria-expanded={openMenu === "contest"}
+                  aria-expanded={effectiveOpenMenu === "contest"}
                   onClick={() => setOpenMenu((menu) => menu === "contest" ? null : "contest")}
                   disabled={isRuntime}
                 >
@@ -231,9 +243,9 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
                     {currentContest?.contestName ??
                       t("workspaceTopNav.contestFallback", "Contest")}
                   </span>
-                  <ChevronDown size={14} />
+                  {!isRuntime ? <ChevronDown size={14} /> : null}
                 </button>
-                {openMenu === "contest" ? (
+                {effectiveOpenMenu === "contest" ? (
                   <div className={styles.menu} role="menu">
                     {contests.map((contest) => (
                       <button
@@ -258,14 +270,14 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
                       type="button"
                       className={styles.contextLink}
                       aria-haspopup="menu"
-                      aria-expanded={openMenu === "contestMode"}
+                      aria-expanded={effectiveOpenMenu === "contestMode"}
                       onClick={() => setOpenMenu((menu) => menu === "contestMode" ? null : "contestMode")}
                       disabled={isRuntime}
                     >
                       <span>{t("workspaceTopNav.adminConsole", "管理後台")}</span>
-                      <ChevronDown size={14} />
+                      {!isRuntime ? <ChevronDown size={14} /> : null}
                     </button>
-                    {openMenu === "contestMode" ? (
+                    {effectiveOpenMenu === "contestMode" ? (
                       <div className={styles.menu} role="menu">
                         <button
                           type="button"
@@ -301,45 +313,85 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
 
       <div className={styles.actions}>
         {isRuntime && <RuntimeNavExtras />}
-        <UserMenu />
+        {pageHeaderActions}
+        {!isRuntime ? <UserMenu /> : null}
       </div>
     </header>
   );
 }
 
 function RuntimeNavExtras() {
-  const { t } = useTranslation("common");
-  const { openMonitor } = useContestRuntimeContext();
-  const { contest, contestId, refreshContest } = useContestLayoutState();
+  const { t } = useTranslation("contest");
+  const [monitoringOpen, setMonitoringOpen] = useState(false);
+  const { contest, refreshContest } = useContest();
+  const monitoringReminder = useExamMonitoringStatus();
   const { timeLeft, isCountdownToStart, unlockTimeLeft } = useContestTimers({
     contest,
-    contestId,
+    contestId: contest?.id,
     refreshContest,
   });
 
   if (!contest) return null;
 
+  const monitoringLabel = monitoringReminder
+    ? t(`exam.monitoringReminder.${monitoringReminder.source}`, {
+        defaultValue: t("exam.monitoringIssueHint", "監控需處理"),
+      })
+    : contest.examStatus === "locked"
+      ? t("exam.locked", "已鎖定")
+      : contest.examStatus === "paused"
+        ? t("exam.paused", "已暫停")
+        : t("exam.monitoring", "監控中");
+  const MonitoringIcon = monitoringReminder || contest.examStatus === "paused"
+    ? WarningAltFilled
+    : contest.examStatus === "locked"
+      ? Locked
+      : View;
+  const monitoringToneClass =
+    monitoringReminder?.tone === "critical" || contest.examStatus === "locked"
+      ? styles.runtimeMonitoringCritical
+      : monitoringReminder || contest.examStatus === "paused"
+        ? styles.runtimeMonitoringWarning
+        : styles.runtimeMonitoringNormal;
+
   return (
     <>
-      <ExamStatusBadge
-        examStatus={contest.examStatus}
-        cheatDetectionEnabled={contest.cheatDetectionEnabled}
-        timeLeft={timeLeft}
-        unlockTimeLeft={unlockTimeLeft}
-        lockReason={contest.lockReason}
-        autoUnlockAt={contest.autoUnlockAt}
-        onClick={openMonitor}
-      />
+      {contest.cheatDetectionEnabled ? (
+        <button
+          type="button"
+          className={`${styles.runtimeMonitoringMini} ${monitoringToneClass}`}
+          onClick={() => setMonitoringOpen(true)}
+          aria-label={monitoringLabel}
+          title={[
+            monitoringLabel,
+            unlockTimeLeft ? unlockTimeLeft : null,
+            monitoringReminder?.countdownSeconds != null
+              ? `${monitoringReminder.countdownSeconds}s`
+              : null,
+          ].filter(Boolean).join(" ")}
+        >
+          <MonitoringIcon size={20} />
+          {monitoringReminder?.countdownSeconds != null ? (
+            <span className={styles.runtimeMonitoringCountdown}>
+              {monitoringReminder.countdownSeconds}s
+            </span>
+          ) : null}
+        </button>
+      ) : null}
       <div className={styles.runtimeTimer}>
         <TimeDisplay
           variant="header"
           value={
             isCountdownToStart
-              ? t("workspaceTopNav.countdownToStart", "(待開始) {{time}}", { time: timeLeft })
+              ? t("answering.runtimeNav.startsIn", "{{time}} 後開始", { time: timeLeft })
               : timeLeft
           }
         />
       </div>
+      <ExamModeMonitorModal
+        open={monitoringOpen}
+        onRequestClose={() => setMonitoringOpen(false)}
+      />
     </>
   );
 }
diff --git a/frontend/src/features/contest/components/ExamModeWrapper.tsx b/frontend/src/features/contest/components/ExamModeWrapper.tsx
index e872f2a2..3a13700c 100644
--- a/frontend/src/features/contest/components/ExamModeWrapper.tsx
+++ b/frontend/src/features/contest/components/ExamModeWrapper.tsx
@@ -177,16 +177,20 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
   });
 
   const precheckPassed = contestId ? hasExamPrecheckPassed(contestId) : false;
+  const shouldMonitorActiveExam = isMonitoredStatus(examStatus);
   const screenCaptureEnabled =
     effectiveMonitoringEnabled &&
+    shouldMonitorActiveExam &&
     precheckPassed &&
     monitoringPlan.runtime.enableScreenShareCapture;
   const webcamCaptureEnabled =
     effectiveMonitoringEnabled &&
+    shouldMonitorActiveExam &&
     precheckPassed &&
     monitoringPlan.runtime.enableWebcamCapture;
   const viewportMonitorEnabled =
     effectiveMonitoringEnabled &&
+    shouldMonitorActiveExam &&
     precheckPassed &&
     monitoringPlan.runtime.enableViewportIntegrity;
   const hasSentScreenDegradedRef = useRef(false);
@@ -231,7 +235,7 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
     },
     [contestId, webcamModuleRole],
   );
-  const streamMonitorEnabled = effectiveMonitoringEnabled;
+  const streamMonitorEnabled = effectiveMonitoringEnabled && shouldMonitorActiveExam;
   const screenStreamMonitorEnabled =
     streamMonitorEnabled && monitoringPlan.runtime.monitorScreenShareStream;
   const webcamStreamMonitorEnabled =
@@ -239,6 +243,17 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
   const lockedFullscreenTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
     null,
   );
+  const isAnsweringPath = useCallback(() => {
+    const contestBasePath = classroomId
+      ? getClassroomContestDashboardPath(classroomId, contestId)
+      : null;
+    if (!contestBasePath) return false;
+    const normalizedPath = location.pathname.replace(/\/+$/, "");
+    return (
+      normalizedPath === `${contestBasePath}/solve` ||
+      normalizedPath.startsWith(`${contestBasePath}/solve/`)
+    );
+  }, [classroomId, contestId, location.pathname]);
 
   // When config refreshes and screen share is no longer required, discard any
   // lingering precheck/runtime handoff streams so they don't trigger "螢幕分享已中斷"
@@ -675,6 +690,7 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
 
   useEffect(() => {
     if (initialFullscreenCheckDone.current || !cheatDetectionEnabled) return;
+    if (!isAnsweringPath()) return;
     if (runtimeReauthActive) return;
 
     if (
@@ -697,6 +713,7 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
   }, [
     examStatus,
     cheatDetectionEnabled,
+    isAnsweringPath,
     isSubmittingFromFullscreenExit,
     effectiveRequiresFullscreen,
     runtimeReauthActive,
@@ -719,6 +736,7 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
       cheatDetectionEnabled &&
       examStatus === "locked" &&
       effectiveRequiresFullscreen &&
+      isAnsweringPath() &&
       !fullscreenAdapterRef.current.isActive()
     ) {
       if (lockedFullscreenTimerRef.current) {
@@ -738,6 +756,7 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
     effectiveRequiresFullscreen,
     forceStopCapture,
     forceStopWebcamCapture,
+    isAnsweringPath,
     runtimeReauthActive,
   ]);
 
@@ -745,7 +764,8 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
     const shouldMonitorFullscreen =
       cheatDetectionEnabled &&
       effectiveRequiresFullscreen &&
-      examStatus === "locked";
+      examStatus === "locked" &&
+      isAnsweringPath();
 
     if (!shouldMonitorFullscreen) return;
 
@@ -774,6 +794,7 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
     cheatDetectionEnabled,
     effectiveRequiresFullscreen,
     examStatus,
+    isAnsweringPath,
     isSubmittingFromFullscreenExit,
     runtimeReauthActive,
   ]);
@@ -869,18 +890,6 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
     }
   }, [effectiveRequiresFullscreen]);
 
-  const isAnsweringPath = useCallback(() => {
-    const contestBasePath = classroomId
-      ? getClassroomContestDashboardPath(classroomId, contestId)
-      : null;
-    if (!contestBasePath) return false;
-    const normalizedPath = location.pathname.replace(/\/+$/, "");
-    return (
-      normalizedPath === `${contestBasePath}/solve` ||
-      normalizedPath.startsWith(`${contestBasePath}/solve/`)
-    );
-  }, [classroomId, contestId, location.pathname]);
-
   const shouldShowPolicyUnavailableScreen =
     policyUnavailable && isAnsweringPath();
   const shouldShowLockScreen =
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
index e9bc3b3f..5d00167e 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
@@ -251,6 +251,7 @@ describe("AdminOverviewCommandCenter", () => {
         onOpenPanel={onOpenPanel}
         participants={participants}
         primary={primary}
+        overviewInfo={{ contestTypeLabel: "考卷" }}
         questionStatsGallery={questionStatsGallery}
         gradingAction={gradingAction}
       />,
@@ -260,16 +261,24 @@ describe("AdminOverviewCommandCenter", () => {
     renderCommandCenter();
 
     expect(screen.getByText("競賽資訊")).toBeInTheDocument();
+    const contestInfo = screen.getByLabelText("競賽基本資訊");
+    expect(within(contestInfo).getByText("考卷題型")).toBeInTheDocument();
+    expect(within(contestInfo).getByText("考卷")).toBeInTheDocument();
+    expect(within(contestInfo).getByText("題目數量")).toBeInTheDocument();
+    expect(within(contestInfo).getByText("12")).toBeInTheDocument();
+    expect(within(contestInfo).getByText("開始時間")).toBeInTheDocument();
+    expect(within(contestInfo).getByText("09:00")).toBeInTheDocument();
+    expect(within(contestInfo).getByText("結束時間")).toBeInTheDocument();
+    expect(within(contestInfo).getByText("11:00")).toBeInTheDocument();
+    expect(
+      contestInfo.compareDocumentPosition(screen.getByText("考生列表")) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
     const examSummary = screen.getByLabelText("考試狀態摘要");
     expect(within(examSummary).getByText("考試人數")).toBeInTheDocument();
     expect(within(examSummary).getByText("2")).toBeInTheDocument();
     expect(within(examSummary).getByText("在線人數")).toBeInTheDocument();
     expect(within(examSummary).getByText("1")).toBeInTheDocument();
-    const examSchedule = within(examSummary).getByLabelText("考試時間");
-    expect(within(examSchedule).getByText("開始時間")).toBeInTheDocument();
-    expect(within(examSchedule).getByText("09:00")).toBeInTheDocument();
-    expect(within(examSchedule).getByText("結束時間")).toBeInTheDocument();
-    expect(within(examSchedule).getByText("11:00")).toBeInTheDocument();
     expect(within(examSummary).getByText("剩餘時間")).toBeInTheDocument();
     expect(screen.getAllByText("批改進度").length).toBeGreaterThan(0);
     expect(
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
index 5a9595dc..cc138493 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
@@ -79,6 +79,9 @@ import styles from "./AdminOverviewCommandCenter.module.scss";
 interface AdminOverviewCommandCenterProps {
   header?: ReactNode;
   data: AdminOverviewDashboardData;
+  overviewInfo?: {
+    contestTypeLabel: string;
+  };
   adminLoading?: boolean;
   gradingLoading?: boolean;
   contestId?: string;
@@ -346,6 +349,7 @@ const getParticipantMetric = (
 export default function AdminOverviewCommandCenter({
   header,
   data,
+  overviewInfo,
   adminLoading = false,
   gradingLoading = false,
   contestId,
@@ -737,6 +741,39 @@ export default function AdminOverviewCommandCenter({
     data.timeline.startDateTimeLabel,
     data.timeline.endDateTimeLabel,
   );
+  const contestInfoRow = (
+    <DashboardContainer
+      layout="grid"
+      columns={4}
+      dividers="auto"
+      ariaLabel={t("adminOverview.command.contestInfo", "競賽基本資訊")}
+    >
+      <DashboardBlock>
+        <MetricBlock
+          label={t("adminOverview.command.metrics.contestType", "考卷題型")}
+          value={overviewInfo?.contestTypeLabel ?? "—"}
+        />
+      </DashboardBlock>
+      <DashboardBlock>
+        <MetricBlock
+          label={t("adminOverview.command.metrics.questionCount", "題目數量")}
+          value={data.examStatus.workItemCount}
+        />
+      </DashboardBlock>
+      <DashboardBlock>
+        <MetricBlock
+          label={t("adminOverview.command.metrics.startTime", "開始時間")}
+          value={scheduleLabels.start}
+        />
+      </DashboardBlock>
+      <DashboardBlock>
+        <MetricBlock
+          label={t("adminOverview.command.metrics.endTime", "結束時間")}
+          value={scheduleLabels.end}
+        />
+      </DashboardBlock>
+    </DashboardContainer>
+  );
   const examStatusSummary = (
     <DashboardContainer
       layout="stack"
@@ -759,27 +796,6 @@ export default function AdminOverviewCommandCenter({
           />
         </DashboardBlock>
       </DashboardContainer>
-      <DashboardContainer
-        layout="grid"
-        columns={2}
-        dividers="auto"
-        ariaLabel={t("adminOverview.command.examTime", "考試時間")}
-      >
-        <DashboardBlock>
-          <MetricBlock
-            label={t("adminOverview.command.metrics.startTime", "開始時間")}
-            value={scheduleLabels.start}
-            size="lg"
-          />
-        </DashboardBlock>
-        <DashboardBlock>
-          <MetricBlock
-            label={t("adminOverview.command.metrics.endTime", "結束時間")}
-            value={scheduleLabels.end}
-            size="lg"
-          />
-        </DashboardBlock>
-      </DashboardContainer>
       <DashboardBlock>
         {contest ? (
           <CountdownProgress
@@ -1091,6 +1107,7 @@ export default function AdminOverviewCommandCenter({
         header={header}
         primary={
           <div className={styles.leftOverviewColumn}>
+            {contestInfoRow}
             {primary}
             {drilldownPanel}
           </div>
diff --git a/frontend/src/features/contest/components/exam/ExamNavigator.module.scss b/frontend/src/features/contest/components/exam/ExamNavigator.module.scss
index 77f32710..4ff592af 100644
--- a/frontend/src/features/contest/components/exam/ExamNavigator.module.scss
+++ b/frontend/src/features/contest/components/exam/ExamNavigator.module.scss
@@ -5,11 +5,13 @@
 .navigator {
   display: flex;
   flex-direction: column;
-  width: clamp(17rem, 22vw, 22rem);
-  min-width: 17rem;
-  max-width: 22rem;
-  border-right: 1px solid var(--cds-border-subtle-01);
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  border-right: 0;
   background: var(--cds-background);
+  flex: 1;
+  min-height: 0;
 }
 
 .navigatorMini {
@@ -18,6 +20,44 @@
   max-width: 3rem;
 }
 
+.miniScrollArea {
+  position: relative;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  scrollbar-color: transparent transparent;
+
+  &:hover,
+  &:focus-within {
+    scrollbar-width: thin;
+    scrollbar-color: var(--cds-border-strong-01) transparent;
+  }
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: transparent;
+  }
+
+  &:hover::-webkit-scrollbar-thumb,
+  &:focus-within::-webkit-scrollbar-thumb {
+    background: var(--cds-border-strong-01);
+  }
+
+  &:hover::-webkit-scrollbar,
+  &:focus-within::-webkit-scrollbar {
+    width: 0.35rem;
+    height: 0;
+  }
+}
+
 .panel {
   background: var(--cds-background);
 }
@@ -70,6 +110,8 @@
 .miniOverviewItem,
 .miniItem {
   width: 3rem;
+  max-width: 3rem;
+  box-sizing: border-box;
   height: 3rem;
   min-height: 3rem;
   max-height: 3rem;
diff --git a/frontend/src/features/contest/components/exam/ExamNavigator.tsx b/frontend/src/features/contest/components/exam/ExamNavigator.tsx
index bb562573..af86a2e5 100644
--- a/frontend/src/features/contest/components/exam/ExamNavigator.tsx
+++ b/frontend/src/features/contest/components/exam/ExamNavigator.tsx
@@ -23,6 +23,7 @@ interface ExamNavigatorProps {
   overviewLabel?: string;
   onSelectOverview?: () => void;
   onToggleCollapse?: () => void;
+  hideHeader?: boolean;
 }
 
 export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
@@ -35,6 +36,7 @@ export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
   overviewLabel,
   onSelectOverview,
   onToggleCollapse,
+  hideHeader = false,
 }) => {
   const { t } = useTranslation("contest");
   const answeredCount = items.filter((item) => {
@@ -58,9 +60,10 @@ export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
       <nav className={`${styles.navigator} ${styles.navigatorMini}`}>
         <ListPanel
           className={styles.panel}
+          scrollAreaClassName={styles.miniScrollArea}
           footer={
-            <ListFooter className={styles.panelFooter}>
-              {onToggleCollapse && (
+            onToggleCollapse ? (
+              <ListFooter className={styles.panelFooter}>
                 <button
                   type="button"
                   className={styles.panelToggle}
@@ -68,10 +71,10 @@ export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
                   aria-label={t("answering.navigation.showList")}
                   title={t("answering.navigation.showList")}
                 >
-                  <SidePanelOpen size={20} />
+                  <SidePanelClose size={20} />
                 </button>
-              )}
-            </ListFooter>
+              </ListFooter>
+            ) : null
           }
         >
           {onSelectOverview && (
@@ -115,7 +118,7 @@ export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
     <nav className={styles.navigator}>
       <ListPanel
         className={styles.panel}
-        header={
+        header={!hideHeader ? (
           <ListHeader
             title={t("answering.navigation.questionList")}
             className={styles.panelHeader}
@@ -128,12 +131,12 @@ export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
                   aria-label={t("answering.navigation.hideList")}
                   title={t("answering.navigation.hideList")}
                 >
-                  <SidePanelClose size={20} />
+                  <SidePanelOpen size={20} />
                 </button>
               ) : null
             }
           />
-        }
+        ) : null}
         footer={
           <ListFooter className={styles.panelFooter}>
             <span className={styles.summaryText}>
@@ -152,7 +155,10 @@ export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
             <ListItemContent>
               <ListItemTitle className={styles.overviewTitle}>
                 <Home size={18} />
-                <span>{overviewLabel ?? t("contestShell.home", "總覽")}</span>
+                <span>
+                  {overviewLabel ??
+                    t("contestShell.backToContestHome", "返回競賽主頁")}
+                </span>
               </ListItemTitle>
             </ListItemContent>
           </ListItem>
diff --git a/frontend/src/features/contest/components/exam/ExamStatusBadge.tsx b/frontend/src/features/contest/components/exam/ExamStatusBadge.tsx
index 71c0eee7..4bf59d2d 100644
--- a/frontend/src/features/contest/components/exam/ExamStatusBadge.tsx
+++ b/frontend/src/features/contest/components/exam/ExamStatusBadge.tsx
@@ -12,6 +12,7 @@ interface ExamStatusBadgeProps {
   lockReason?: string;
   autoUnlockAt?: string | null;
   onClick?: () => void;
+  hideWhenNormal?: boolean;
 }
 
 const ExamStatusBadge: React.FC<ExamStatusBadgeProps> = ({
@@ -22,6 +23,7 @@ const ExamStatusBadge: React.FC<ExamStatusBadgeProps> = ({
   lockReason,
   autoUnlockAt,
   onClick,
+  hideWhenNormal = false,
 }) => {
   const { t } = useTranslation("contest");
   const monitoringReminder = useExamMonitoringStatus();
@@ -73,6 +75,8 @@ const ExamStatusBadge: React.FC<ExamStatusBadgeProps> = ({
   }
 
   if (examStatus === "in_progress") {
+    if (hideWhenNormal && !monitoringReminder) return null;
+
     const reminderLabel = monitoringReminder
       ? getMonitoringReminderLabel(monitoringReminder.source)
       : t("exam.monitoring");
diff --git a/frontend/src/features/contest/components/exam/PaperExamCore.tsx b/frontend/src/features/contest/components/exam/PaperExamCore.tsx
index 62f75ed0..85139ff1 100644
--- a/frontend/src/features/contest/components/exam/PaperExamCore.tsx
+++ b/frontend/src/features/contest/components/exam/PaperExamCore.tsx
@@ -8,6 +8,7 @@ import {
   ListBulleted,
 } from "@carbon/icons-react";
 import { ExamNavigator } from "./ExamNavigator";
+import { useRegisterContestRuntimeNavigator } from "@/features/contest/contexts";
 import type { ExamItem, ExamViewMode } from "../../types/exam.types";
 
 function useScrollDirection(ref: React.RefObject<HTMLElement | null>) {
@@ -44,6 +45,7 @@ interface PaperExamCoreProps {
   toolbarLeft?: React.ReactNode;
   toolbarCenter?: React.ReactNode;
   showToolbar?: boolean;
+  externalNavigator?: boolean;
   overviewLabel?: string;
   onSelectOverview?: () => void;
   renderItem: (item: ExamItem, index: number, mode: ExamViewMode) => React.ReactNode;
@@ -59,6 +61,7 @@ export const PaperExamCore: React.FC<PaperExamCoreProps> = ({
   toolbarLeft,
   toolbarCenter,
   showToolbar = true,
+  externalNavigator = false,
   overviewLabel,
   onSelectOverview,
   renderItem,
@@ -166,6 +169,41 @@ export const PaperExamCore: React.FC<PaperExamCoreProps> = ({
     }
   }, []);
 
+  const navigatorState = useMemo(
+    () =>
+      externalNavigator
+        ? {
+            items,
+            activeIndex:
+              effectiveViewMode === "single"
+                ? effectiveActiveIndex
+                : effectiveAllModeActiveIndex,
+            answeredIds,
+            markedIds,
+            overviewLabel,
+            onSelect:
+              effectiveViewMode === "single"
+                ? handleSetActiveIndex
+                : handleScrollToItem,
+            onSelectOverview,
+          }
+        : null,
+    [
+      answeredIds,
+      effectiveActiveIndex,
+      effectiveAllModeActiveIndex,
+      effectiveViewMode,
+      externalNavigator,
+      handleScrollToItem,
+      handleSetActiveIndex,
+      items,
+      markedIds,
+      onSelectOverview,
+      overviewLabel,
+    ],
+  );
+  useRegisterContestRuntimeNavigator(navigatorState);
+
   const renderSingleMode = () => {
     const item = items[effectiveActiveIndex];
     if (!item) return null;
@@ -255,19 +293,21 @@ export const PaperExamCore: React.FC<PaperExamCoreProps> = ({
       </div>
 
       <div className={styles.body}>
-        <div className={`${styles.navWrapper} ${navCollapsed ? styles.navWrapperCollapsed : ""}`}>
-          <ExamNavigator
-            items={items}
-            activeIndex={effectiveViewMode === "single" ? effectiveActiveIndex : effectiveAllModeActiveIndex}
-            answeredIds={answeredIds}
-            markedIds={markedIds}
-            collapsed={navCollapsed}
-            overviewLabel={overviewLabel}
-            onSelectOverview={onSelectOverview}
-            onToggleCollapse={() => setNavCollapsed((collapsed) => !collapsed)}
-            onSelect={effectiveViewMode === "single" ? handleSetActiveIndex : handleScrollToItem}
-          />
-        </div>
+        {!externalNavigator && (
+          <div className={`${styles.navWrapper} ${navCollapsed ? styles.navWrapperCollapsed : ""}`}>
+            <ExamNavigator
+              items={items}
+              activeIndex={effectiveViewMode === "single" ? effectiveActiveIndex : effectiveAllModeActiveIndex}
+              answeredIds={answeredIds}
+              markedIds={markedIds}
+              collapsed={navCollapsed}
+              overviewLabel={overviewLabel}
+              onSelectOverview={onSelectOverview}
+              onToggleCollapse={() => setNavCollapsed((collapsed) => !collapsed)}
+              onSelect={effectiveViewMode === "single" ? handleSetActiveIndex : handleScrollToItem}
+            />
+          </div>
+        )}
 
         {effectiveViewMode === "single" ? renderSingleMode() : renderAllMode()}
       </div>
diff --git a/frontend/src/features/contest/components/layout/ContestLayoutHeaderSlotContext.tsx b/frontend/src/features/contest/components/layout/ContestLayoutHeaderSlotContext.tsx
deleted file mode 100644
index 172c6ea6..00000000
--- a/frontend/src/features/contest/components/layout/ContestLayoutHeaderSlotContext.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createContext, useContext } from "react";
-import type { Dispatch, ReactNode, SetStateAction } from "react";
-
-type ContestLayoutHeaderSlot = ReactNode | null;
-
-interface ContestLayoutHeaderSlotContextValue {
-  setHeaderActions: Dispatch<SetStateAction<ContestLayoutHeaderSlot>>;
-}
-
-export const ContestLayoutHeaderSlotContext =
-  createContext<ContestLayoutHeaderSlotContextValue | null>(null);
-
-export function useContestLayoutHeaderSlot() {
-  return useContext(ContestLayoutHeaderSlotContext);
-}
diff --git a/frontend/src/features/contest/components/layout/ContestWorkspaceLayout.tsx b/frontend/src/features/contest/components/layout/ContestWorkspaceLayout.tsx
index 14cc7d36..08394545 100644
--- a/frontend/src/features/contest/components/layout/ContestWorkspaceLayout.tsx
+++ b/frontend/src/features/contest/components/layout/ContestWorkspaceLayout.tsx
@@ -4,6 +4,8 @@ import { InlineLoading, Modal } from "@carbon/react";
 import { useTranslation } from "react-i18next";
 
 import { ContestProvider } from "@/features/contest/contexts/ContestContext";
+import { ContestRuntimeNavigatorProvider } from "@/features/contest/contexts/ContestRuntimeNavigatorContext";
+import ExamModeWrapper from "@/features/contest/components/ExamModeWrapper";
 import ExamSubmissionProgressModal from "@/features/contest/components/exam/ExamSubmissionProgressModal";
 import { useContestExamActions } from "@/features/contest/hooks/useContestExamActions";
 import { useContestLayoutState } from "@/features/contest/hooks/useContestLayoutState";
@@ -14,6 +16,13 @@ import {
 } from "@/features/contest/domain/contestRoutePolicy";
 import { hasExamPrecheckPassed } from "@/features/contest/screens/paperExam/hooks";
 
+const PROTECTED_EXAM_STATUSES = new Set([
+  "in_progress",
+  "paused",
+  "locked",
+  "submitted",
+]);
+
 const ContestWorkspaceLayout = () => {
   const { classroomId } = useParams<{ classroomId?: string }>();
   const { t } = useTranslation("contest");
@@ -87,6 +96,45 @@ const ContestWorkspaceLayout = () => {
     onError: showError,
   });
 
+  const outlet = (
+    <Outlet
+      context={{
+        refreshContest,
+        onJoin: handleJoin,
+        onStartExam: handleStartExam,
+        onEndExam: handleEndExam,
+        onGoToAnswering: handleGoToAnswering,
+        onOpenAdminPanel: isAdmin ? () => navigate(adminPath) : undefined,
+        isAdmin,
+      }}
+    />
+  );
+
+  const shouldProtectContestSurface =
+    !!contestId &&
+    !!contest &&
+    !!contest.hasJoined &&
+    !!contest.cheatDetectionEnabled &&
+    !!contest.examStatus &&
+    PROTECTED_EXAM_STATUSES.has(contest.examStatus);
+
+  const contestSurface = shouldProtectContestSurface ? (
+    <ExamModeWrapper
+      contestId={contestId || ""}
+      cheatDetectionEnabled={!!contest?.cheatDetectionEnabled}
+      isExamMonitored={!!contest?.isExamMonitored}
+      requiresFullscreen={!!contest?.requiresFullscreen}
+      hasEnded={hasEnded}
+      lockReason={contest?.lockReason}
+      examStatus={contest?.examStatus}
+      onRefresh={refreshContest}
+    >
+      {outlet}
+    </ExamModeWrapper>
+  ) : (
+    outlet
+  );
+
   if (contestLoading) {
     return (
       <div style={{ padding: "2rem" }}>
@@ -105,17 +153,9 @@ const ContestWorkspaceLayout = () => {
       initialScoreboardData={scoreboardData}
       onRefresh={refreshContest}
     >
-      <Outlet
-        context={{
-          refreshContest,
-          onJoin: handleJoin,
-          onStartExam: handleStartExam,
-          onEndExam: handleEndExam,
-          onGoToAnswering: handleGoToAnswering,
-          onOpenAdminPanel: isAdmin ? () => navigate(adminPath) : undefined,
-          isAdmin,
-        }}
-      />
+      <ContestRuntimeNavigatorProvider>
+        {contestSurface}
+      </ContestRuntimeNavigatorProvider>
 
       <ExamSubmissionProgressModal
         state={submissionProgress.state}
diff --git a/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx b/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
index 36ac12d2..e5e97e86 100644
--- a/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
+++ b/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
@@ -1,15 +1,14 @@
 import { useState } from 'react';
 import type { ReactNode } from 'react';
 import { Modal } from '@carbon/react';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
+import { isContestEnded } from '@/core/entities/contest.entity';
 import { useDisablePanel } from '@/features/app/contexts/useDisablePanel';
-import ExamModeWrapper from '@/features/contest/components/ExamModeWrapper';
-import { ExamModeMonitorModal } from '@/features/contest/components/modals/ExamModeMonitorModal';
 import ExamSubmissionProgressModal from '@/features/contest/components/exam/ExamSubmissionProgressModal';
+import { useContest } from '@/features/contest/contexts/ContestContext';
 import { useContestExamActions } from '@/features/contest/hooks/useContestExamActions';
-import { useContestLayoutState } from '@/features/contest/hooks/useContestLayoutState';
-import { ContestRuntimeProvider } from '@/features/contest/contexts/ContestRuntimeContext';
 
 interface Props {
   children: ReactNode;
@@ -18,19 +17,13 @@ interface Props {
 export const RuntimeRouteWrapper = ({ children }: Props) => {
   const { t } = useTranslation('contest');
   const { t: tc } = useTranslation('common');
-  const {
-    contestId,
-    contest,
-    contestLoading,
-    contestNotFound,
-    hasEnded,
-    refreshContest,
-    navigate,
-  } = useContestLayoutState();
+  const { contestId } = useParams<{ contestId?: string }>();
+  const navigate = useNavigate();
+  const { contest, loading, refreshContest } = useContest();
+  const hasEnded = !!contest && isContestEnded(contest);
 
   const [errorOpen, setErrorOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
-  const [monitoringOpen, setMonitoringOpen] = useState(false);
 
   // Closes right-side AI chat panel for the lifetime of this wrapper
   useDisablePanel('right');
@@ -55,34 +48,14 @@ export const RuntimeRouteWrapper = ({ children }: Props) => {
     onError: showError,
   });
 
-  const isContestParticipant = !!contest?.hasJoined;
-  const examModeProps = {
-    contestId: contestId || '',
-    cheatDetectionEnabled: isContestParticipant && !!contest?.cheatDetectionEnabled,
-    isExamMonitored: isContestParticipant && !!contest?.isExamMonitored,
-    requiresFullscreen: isContestParticipant && !!contest?.requiresFullscreen,
-    hasEnded,
-    lockReason: contest?.lockReason,
-    examStatus: contest?.examStatus,
-    onRefresh: refreshContest,
-  };
-
-  // Guard: don't render ExamModeWrapper until contest is loaded.
-  // Otherwise ExamModeWrapper renders with cheatDetectionEnabled=false,
-  // triggering its cleanup effect which destroys the precheck screen-share handoff stream.
-  if (contestLoading || (!contest && !contestNotFound)) return null;
-  if (contestNotFound) return null;
+  // Guard: don't render runtime content until contest is loaded. The contest
+  // surface wrapper owns ExamModeWrapper so dashboard and solve share one
+  // monitoring lifecycle.
+  if (loading || !contest) return null;
 
   return (
-    <ContestRuntimeProvider value={{ isRuntime: true, openMonitor: () => setMonitoringOpen(true) }}>
-      <ExamModeWrapper {...examModeProps}>
-        {children}
-      </ExamModeWrapper>
-
-      <ExamModeMonitorModal
-        open={monitoringOpen}
-        onRequestClose={() => setMonitoringOpen(false)}
-      />
+    <>
+      {children}
 
       <ExamSubmissionProgressModal
         state={examActions.submissionProgress.state}
@@ -97,7 +70,7 @@ export const RuntimeRouteWrapper = ({ children }: Props) => {
       >
         <p>{errorMessage}</p>
       </Modal>
-    </ContestRuntimeProvider>
+    </>
   );
 };
 
diff --git a/frontend/src/features/contest/contexts/ContestRuntimeContext.tsx b/frontend/src/features/contest/contexts/ContestRuntimeContext.tsx
deleted file mode 100644
index 647212be..00000000
--- a/frontend/src/features/contest/contexts/ContestRuntimeContext.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { createContext, useContext } from 'react';
-import type { ReactNode } from 'react';
-
-interface ContestRuntimeContextValue {
-  isRuntime: boolean;
-  openMonitor: () => void;
-}
-
-const ContestRuntimeContext = createContext<ContestRuntimeContextValue>({
-  isRuntime: false,
-  openMonitor: () => {},
-});
-
-export const ContestRuntimeProvider = ({
-  value,
-  children,
-}: {
-  value: ContestRuntimeContextValue;
-  children: ReactNode;
-}) => (
-  <ContestRuntimeContext.Provider value={value}>
-    {children}
-  </ContestRuntimeContext.Provider>
-);
-
-export const useContestRuntimeContext = () => useContext(ContestRuntimeContext);
diff --git a/frontend/src/features/contest/contexts/ContestRuntimeNavigatorContext.tsx b/frontend/src/features/contest/contexts/ContestRuntimeNavigatorContext.tsx
new file mode 100644
index 00000000..86b78091
--- /dev/null
+++ b/frontend/src/features/contest/contexts/ContestRuntimeNavigatorContext.tsx
@@ -0,0 +1,29 @@
+import {
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+
+import {
+  ContestRuntimeNavigatorContext,
+  type ContestRuntimeNavigatorState,
+} from "./contestRuntimeNavigatorStore";
+
+export function ContestRuntimeNavigatorProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [navigator, setNavigator] =
+    useState<ContestRuntimeNavigatorState | null>(null);
+  const value = useMemo(
+    () => ({ navigator, setNavigator }),
+    [navigator],
+  );
+
+  return (
+    <ContestRuntimeNavigatorContext.Provider value={value}>
+      {children}
+    </ContestRuntimeNavigatorContext.Provider>
+  );
+}
diff --git a/frontend/src/features/contest/contexts/contestRuntimeNavigatorStore.ts b/frontend/src/features/contest/contexts/contestRuntimeNavigatorStore.ts
new file mode 100644
index 00000000..956f4407
--- /dev/null
+++ b/frontend/src/features/contest/contexts/contestRuntimeNavigatorStore.ts
@@ -0,0 +1,21 @@
+import { createContext } from "react";
+
+import type { ExamItem } from "@/features/contest/types/exam.types";
+
+export interface ContestRuntimeNavigatorState {
+  items: ExamItem[];
+  activeIndex: number;
+  answeredIds: Set<string>;
+  markedIds?: Set<string>;
+  overviewLabel?: string;
+  onSelect: (index: number) => void;
+  onSelectOverview?: () => void;
+}
+
+export interface ContestRuntimeNavigatorContextValue {
+  navigator: ContestRuntimeNavigatorState | null;
+  setNavigator: (state: ContestRuntimeNavigatorState | null) => void;
+}
+
+export const ContestRuntimeNavigatorContext =
+  createContext<ContestRuntimeNavigatorContextValue | null>(null);
diff --git a/frontend/src/features/contest/contexts/index.ts b/frontend/src/features/contest/contexts/index.ts
index 8293a50c..b4ad1a41 100644
--- a/frontend/src/features/contest/contexts/index.ts
+++ b/frontend/src/features/contest/contexts/index.ts
@@ -1,4 +1,15 @@
 export { ContestProvider, useContest } from "./ContestContext";
+export { useOptionalContest } from "./useOptionalContest";
+export {
+  ContestRuntimeNavigatorProvider,
+} from "./ContestRuntimeNavigatorContext";
+export {
+  useContestRuntimeNavigator,
+  useRegisterContestRuntimeNavigator,
+} from "./useContestRuntimeNavigator";
+export type {
+  ContestRuntimeNavigatorState,
+} from "./contestRuntimeNavigatorStore";
 export type { default as ContestContext } from "./ContestContext";
 export { ContestAdminProvider, useContestAdmin } from "./ContestAdminContext";
 export {
diff --git a/frontend/src/features/contest/contexts/useContestRuntimeNavigator.ts b/frontend/src/features/contest/contexts/useContestRuntimeNavigator.ts
new file mode 100644
index 00000000..ac41a5d7
--- /dev/null
+++ b/frontend/src/features/contest/contexts/useContestRuntimeNavigator.ts
@@ -0,0 +1,27 @@
+import { useContext, useEffect } from "react";
+
+import {
+  ContestRuntimeNavigatorContext,
+  type ContestRuntimeNavigatorState,
+} from "./contestRuntimeNavigatorStore";
+
+export function useContestRuntimeNavigator() {
+  return useContext(ContestRuntimeNavigatorContext)?.navigator ?? null;
+}
+
+export function useRegisterContestRuntimeNavigator(
+  state: ContestRuntimeNavigatorState | null,
+) {
+  const ctx = useContext(ContestRuntimeNavigatorContext);
+  const setNavigator = ctx?.setNavigator;
+
+  useEffect(() => {
+    if (!setNavigator) return;
+    setNavigator(state);
+  }, [setNavigator, state]);
+
+  useEffect(() => {
+    if (!setNavigator) return;
+    return () => setNavigator(null);
+  }, [setNavigator]);
+}
diff --git a/frontend/src/features/contest/contexts/useOptionalContest.ts b/frontend/src/features/contest/contexts/useOptionalContest.ts
new file mode 100644
index 00000000..d94cd9b7
--- /dev/null
+++ b/frontend/src/features/contest/contexts/useOptionalContest.ts
@@ -0,0 +1,5 @@
+import { useContext } from "react";
+
+import ContestContext from "./ContestContext";
+
+export const useOptionalContest = () => useContext(ContestContext) ?? null;
diff --git a/frontend/src/features/contest/hooks/useScreenShareMonitoring.test.ts b/frontend/src/features/contest/hooks/useScreenShareMonitoring.test.ts
index 9b4266c7..673e873f 100644
--- a/frontend/src/features/contest/hooks/useScreenShareMonitoring.test.ts
+++ b/frontend/src/features/contest/hooks/useScreenShareMonitoring.test.ts
@@ -273,7 +273,7 @@ describe("useScreenShareMonitoring", () => {
     expect(result.current.reauth.inProgress).toBe(false);
   });
 
-  it("unmount clears reauth state", () => {
+  it("keeps reauth state across runtime unmounts", () => {
     const config = makeConfig();
     const { result, unmount } = renderHook(() =>
       useScreenShareMonitoring(config),
@@ -286,12 +286,14 @@ describe("useScreenShareMonitoring", () => {
 
     unmount();
 
-    // After unmount, runtimeReauth entry should be cleared
-    // Verify by mounting a fresh hook and checking initial state is clean
+    // Route changes can unmount the runtime wrapper while the student is still
+    // inside the active contest surface. The re-share countdown must survive so
+    // dashboard/answering remounts can keep prompting recovery.
     const { result: result2 } = renderHook(() =>
       useScreenShareMonitoring(config),
     );
-    expect(result2.current.reauth.active).toBe(false);
+    expect(result2.current.reauth.active).toBe(true);
+    expect(result2.current.reauth.inProgress).toBe(true);
   });
 
   it("reauth.remainingSeconds is non-null while countdown is active", () => {
diff --git a/frontend/src/features/contest/hooks/useScreenShareMonitoring.ts b/frontend/src/features/contest/hooks/useScreenShareMonitoring.ts
index 72785334..95d529fb 100644
--- a/frontend/src/features/contest/hooks/useScreenShareMonitoring.ts
+++ b/frontend/src/features/contest/hooks/useScreenShareMonitoring.ts
@@ -175,12 +175,11 @@ export function useScreenShareMonitoring({
     }
   }, [contestId, examSubmitted, monitoringDisabled]);
 
-  // Always clear on unmount
-  useEffect(() => {
-    return () => {
-      clearRuntimeScreenShareReauth(contestIdRef.current);
-    };
-  }, []);
+  // Do not clear on unmount: the monitored contest surface can remount while
+  // the exam is still active (for example solve <-> dashboard). The recovery
+  // countdown must survive that transition so the next mount keeps prompting
+  // the student to re-share. Terminal cleanup is handled by examSubmitted /
+  // monitoringDisabled and by explicit exam action cleanup.
 
   return {
     onStreamLost,
diff --git a/frontend/src/features/contest/index.ts b/frontend/src/features/contest/index.ts
index 1b6ff50b..3efa48ff 100644
--- a/frontend/src/features/contest/index.ts
+++ b/frontend/src/features/contest/index.ts
@@ -4,9 +4,10 @@
 // (e.g., "@/features/contest/contexts") instead of this barrel.
 
 export {
-  classroomContestRoutes,
+  classroomContestRouteChildren,
   classroomContestAdminRoute,
   classroomExamPreviewRoute,
   classroomExamPrecheckRoute,
   classroomPracticeRoute,
 } from "./routes";
+export { default as ContestWorkspaceLayout } from "./components/layout/ContestWorkspaceLayout";
diff --git a/frontend/src/features/contest/routes.tsx b/frontend/src/features/contest/routes.tsx
index a41a5293..bd0f0bb4 100644
--- a/frontend/src/features/contest/routes.tsx
+++ b/frontend/src/features/contest/routes.tsx
@@ -1,6 +1,5 @@
 import { lazy, Suspense } from "react";
 import { Route } from "react-router";
-import ContestWorkspaceLayout from "./components/layout/ContestWorkspaceLayout";
 import RuntimeRouteWrapper from "./components/layout/RuntimeRouteWrapper";
 import { ContestProvider } from "./contexts/ContestContext";
 import ContestDashboardScreen from "./screens/ContestDashboardScreen";
@@ -14,13 +13,12 @@ const ExamPrecheckScreen = lazy(() => import("./screens/paperExam/ExamPrecheckSc
 // ── Classroom-scoped contest routes (/classrooms/:classroomId/contest/:contestId) ──
 
 /**
- * Classroom Contest 主路由（dashboard + runtime 共用同一條 layout 軌道）。
- * 在 App.tsx 必須掛在 <MainLayout> 之下。
- * Runtime 子路由包在 <RuntimeRouteWrapper> 裡，啟動 ExamModeWrapper / 監考 modal /
- * 關閉右側 chat panel / 提供 ContestRuntimeContext。
+ * Classroom Contest 主路由 children（dashboard + runtime 共用同一條 layout 軌道）。
+ * App.tsx 會把這段放在 ContestWorkspaceLayout -> MainLayout 之下，讓 WorkspaceShell
+ * 的 top nav / side menu 也能讀到 ContestProvider。
  */
-export const classroomContestRoutes = (
-  <Route path="/classrooms/:classroomId/contest/:contestId" element={<ContestWorkspaceLayout />}>
+export const classroomContestRouteChildren = (
+  <>
     <Route index element={<ContestDashboardScreen />} />
     <Route
       path="solve"
@@ -38,7 +36,7 @@ export const classroomContestRoutes = (
         </RuntimeRouteWrapper>
       }
     />
-  </Route>
+  </>
 );
 
 /**
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss
index 6b1a9423..4d295642 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss
+++ b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss
@@ -15,18 +15,27 @@
   padding: 0;
 }
 
-.headerMeta {
-  display: grid;
-  gap: 0.375rem;
+.overviewHeader {
+  display: flex;
+  min-height: 3rem;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-inline: 1rem;
 }
 
-.headerTags {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+.overviewHeaderTitle {
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: var(--cds-heading-compact-02-font-weight, 600);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
 }
 
-.headerMeta p {
-  margin: 0;
-  max-width: 52rem;
+.overviewHeaderActions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 0.25rem;
 }
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.test.tsx b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.test.tsx
index f621343f..0265325e 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.test.tsx
+++ b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.test.tsx
@@ -156,6 +156,8 @@ describe("AdminOverviewScreen", () => {
     renderScreen("/contest/contest-1/admin?panel=overview&view=live");
 
     expect(screen.getByTestId("live-dashboard")).toBeInTheDocument();
+    expect(screen.getByText("Overview")).toBeInTheDocument();
+    expect(screen.queryByText("演算法期中考")).not.toBeInTheDocument();
     expect(
       screen.getByRole("button", { name: "重新整理" }),
     ).toBeInTheDocument();
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
index 2387721a..4a539299 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
+++ b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Button, Tag } from "@carbon/react";
+import { Button } from "@carbon/react";
 import {
   Download,
   Launch,
@@ -28,49 +28,12 @@ import { useGradingData } from "@/features/contest/screens/settings/grading";
 import { addContestParticipant, updateContest } from "@/infrastructure/api/repositories";
 import { exportContestResults } from "@/infrastructure/api/repositories/contestExports.repository";
 import { useToast } from "@/shared/contexts/ToastContext";
-import {
-  BlockHeader,
-  DashboardBlock,
-} from "@/shared/components/dashboard";
 import {
   buildAdminOverviewDashboard,
   type DashboardText,
 } from "./adminOverviewDashboard.model";
 import styles from "./AdminOverviewScreen.module.scss";
 
-type ContestStatusDisplay = {
-  label: string;
-  type: "gray" | "cool-gray" | "green";
-};
-
-const useContestStatusDisplay = () => {
-  const { t } = useTranslation("contest");
-  return useCallback(
-    (status: string): ContestStatusDisplay => {
-      if (status === "draft")
-        return {
-          label: t("adminOverview.screen.contestStatus.draft", "草稿"),
-          type: "gray",
-        };
-      if (
-        status === "archived" ||
-        status === "ended" ||
-        status === "completed" ||
-        status === "success"
-      )
-        return {
-          label: t("adminOverview.screen.contestStatus.archived", "已封存"),
-          type: "green",
-        };
-      return {
-        label: t("adminOverview.screen.contestStatus.published", "已發布"),
-        type: "green",
-      };
-    },
-    [t],
-  );
-};
-
 export default function AdminOverviewScreen({
   onOpenSettings,
 }: AdminPanelProps) {
@@ -88,7 +51,6 @@ export default function AdminOverviewScreen({
     [t],
   );
   const { showToast } = useToast();
-  const contestStatusDisplay = useContestStatusDisplay();
   const { contest, refreshContest } = useContest();
   const {
     participants,
@@ -264,7 +226,6 @@ export default function AdminOverviewScreen({
 
   if (!contest) return null;
 
-  const status = contestStatusDisplay(contest.status ?? "draft");
   const contestHomePath = contest.boundClassroomId
     ? `/classrooms/${contest.boundClassroomId}/contest/${contest.id}`
     : null;
@@ -273,26 +234,15 @@ export default function AdminOverviewScreen({
       ? t("adminOverview.screen.contestType.paperExam", "考卷")
       : t("adminOverview.screen.contestType.coding", "Coding Test");
   const renderContestHeader = () => (
-    <DashboardBlock
-      padding="compact"
-      ariaLabel={t("adminOverview.screen.contestInfoLabel", "競賽資訊")}
+    <section
+      className={styles.overviewHeader}
+      aria-label={t("adminOverview.screen.contestInfoLabel", "競賽資訊")}
     >
-      <BlockHeader
-        title={contest.name}
-        description={
-          <div className={styles.headerMeta}>
-            <div className={styles.headerTags}>
-              <Tag type={status.type} size="sm">
-                {status.label}
-              </Tag>
-              <Tag type="cool-gray" size="sm">
-                {contestTypeLabel}
-              </Tag>
-            </div>
-            {contest.description ? <p>{contest.description}</p> : null}
-          </div>
-        }
-        actions={
+      <h2 className={styles.overviewHeaderTitle}>
+        {t("adminOverview.screen.title", "Overview")}
+      </h2>
+      <div className={styles.overviewHeaderActions}>
+        {
           <>
             <Button
               kind="ghost"
@@ -356,8 +306,8 @@ export default function AdminOverviewScreen({
             />
           </>
         }
-      />
-    </DashboardBlock>
+      </div>
+    </section>
   );
 
   return (
@@ -376,6 +326,9 @@ export default function AdminOverviewScreen({
             onOpenPanel={openPanel}
             participants={participants}
             primary={null}
+            overviewInfo={{
+              contestTypeLabel,
+            }}
             gradingAction={{
               label: contest.resultsPublished
                 ? t("adminOverview.actions.revokeResults", "撤回發布")
diff --git a/frontend/src/features/contest/screens/paperExam/PaperExamAnswering.module.scss b/frontend/src/features/contest/screens/paperExam/PaperExamAnswering.module.scss
index 11c0ae7a..fcb9a091 100644
--- a/frontend/src/features/contest/screens/paperExam/PaperExamAnswering.module.scss
+++ b/frontend/src/features/contest/screens/paperExam/PaperExamAnswering.module.scss
@@ -56,7 +56,11 @@
 .slideInLeft     { @include exam.exam-slide-in-left; }
 
 .body            { @include exam.exam-body; }
-.navWrapper      { @include exam.exam-nav-wrapper; }
+.navWrapper {
+  @include exam.exam-nav-wrapper;
+
+  width: clamp(17rem, 22vw, 22rem);
+}
 .navWrapperCollapsed { width: 3rem; }
 .navWrapperHidden { @include exam.exam-nav-wrapper-hidden; }
 .navToggle       { @include exam.exam-nav-toggle; }
diff --git a/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx b/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx
index a06026c5..a4781c06 100644
--- a/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx
+++ b/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx
@@ -46,7 +46,8 @@ import { recordExamEventWithForcedCapture } from "@/features/contest/anticheat/f
 import { exitFullscreen, isFullscreen } from "@/core/usecases/exam";
 import { clearExamCaptureSessionId } from "@/shared/state/examCaptureSessionStore";
 import { stopCaptureForContest } from "@/features/contest/anticheat/captureLifecycle";
-import { useContestLayoutHeaderSlot } from "@/features/contest/components/layout/ContestLayoutHeaderSlotContext";
+import { usePageHeaderActions } from "@/features/app/contexts/PageHeaderActionsContext";
+import { useContestRuntimeMode } from "@/features/contest/hooks";
 import {
   buildExamEntryDeviceMetadata,
   detectAnticheatCapability,
@@ -113,7 +114,8 @@ const PaperExamAnsweringScreen: React.FC = () => {
     [monitoringPlan]
   );
   const submitProgress = useExamSubmissionProgress();
-  const contestLayoutHeaderSlot = useContestLayoutHeaderSlot();
+  const setPageHeaderActions = usePageHeaderActions();
+  const { isRuntime } = useContestRuntimeMode();
 
   const { items, answers, setAnswers, answeredIds, loadingQuestions } =
     usePaperExamQuestions(contestId);
@@ -359,22 +361,17 @@ const PaperExamAnsweringScreen: React.FC = () => {
   }, [flushAll]);
 
   const shouldUseHeaderActions =
-    !!contestLayoutHeaderSlot &&
-    !autoSubmitted &&
-    !isSubmitted &&
-    !loadingQuestions &&
-    items.length > 0;
+    isRuntime && !autoSubmitted && !isSubmitted && !loadingQuestions && items.length > 0;
 
   useEffect(() => {
-    if (!contestLayoutHeaderSlot) return;
     if (!shouldUseHeaderActions) {
-      contestLayoutHeaderSlot.setHeaderActions(null);
+      setPageHeaderActions(null);
       return;
     }
 
-    contestLayoutHeaderSlot.setHeaderActions(
+    setPageHeaderActions(
       <div className={styles.headerActions}>
-        {saveStatus !== "idle" && (
+        {saveStatus !== "idle" ? (
           <span
             className={`${styles.headerSaveStatus} ${
               saveStatus === "error" ? styles.saveStatusError : ""
@@ -382,14 +379,14 @@ const PaperExamAnsweringScreen: React.FC = () => {
           >
             {saveStatusLabel}
           </span>
-        )}
+        ) : null}
         <Button
           kind="primary"
-          size="md"
           className={styles.headerSubmitButton}
           data-testid="paper-exam-open-submit-review-btn"
           renderIcon={SendFilled}
           onClick={openSubmitReview}
+          disabled={!isInProgress}
         >
           {t("answering.submit.button")}
         </Button>
@@ -397,13 +394,14 @@ const PaperExamAnsweringScreen: React.FC = () => {
     );
 
     return () => {
-      contestLayoutHeaderSlot.setHeaderActions(null);
+      setPageHeaderActions(null);
     };
   }, [
-    contestLayoutHeaderSlot,
-    openSubmitReview,
     saveStatus,
     saveStatusLabel,
+    isInProgress,
+    openSubmitReview,
+    setPageHeaderActions,
     shouldUseHeaderActions,
     t,
   ]);
@@ -470,8 +468,9 @@ const PaperExamAnsweringScreen: React.FC = () => {
         syncIndex={syncIndex}
         renderItem={renderItem}
         onActiveIndexChange={handleActiveIndexChange}
-        showToolbar={!contestLayoutHeaderSlot}
-        overviewLabel={t("contestShell.home", "總覽")}
+        showToolbar={!isRuntime}
+        externalNavigator={isRuntime}
+        overviewLabel={t("contestShell.backToContestHome", "返回競賽主頁")}
         onSelectOverview={() => dashboardPath && navigate(dashboardPath)}
         toolbarLeft={(
           <>
diff --git a/frontend/src/shared/ui/list/ListPanel.module.scss b/frontend/src/shared/ui/list/ListPanel.module.scss
index 95fa7e7d..32744630 100644
--- a/frontend/src/shared/ui/list/ListPanel.module.scss
+++ b/frontend/src/shared/ui/list/ListPanel.module.scss
@@ -15,6 +15,7 @@
   flex: 1;
   min-height: 0;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 // ─── Header ─────────────────────────────────────────────────
@@ -93,10 +94,15 @@
 
 // Compact / mini variant
 .itemCompact {
+  box-sizing: border-box;
   height: 2.5rem;
   min-height: 2.5rem;
   max-height: 2.5rem;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
   padding: 0;
+  overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/src/shared/ui/list/ListPanel.tsx b/frontend/src/shared/ui/list/ListPanel.tsx
index b1e3e07f..d0a61f56 100644
--- a/frontend/src/shared/ui/list/ListPanel.tsx
+++ b/frontend/src/shared/ui/list/ListPanel.tsx
@@ -11,15 +11,17 @@ export const ListPanel = ({
   header,
   footer,
   className,
+  scrollAreaClassName,
 }: {
   children: ReactNode;
   header?: ReactNode;
   footer?: ReactNode;
   className?: string;
+  scrollAreaClassName?: string;
 }) => (
   <div className={cx(styles.panel, className)}>
     {header}
-    <div className={styles.scrollArea}>{children}</div>
+    <div className={cx(styles.scrollArea, scrollAreaClassName)}>{children}</div>
     {footer}
   </div>
 );

From 982f09a6301520808455ce85c268f8489ec67e03 Mon Sep 17 00:00:00 2001
From: quan0715 <quan787887@gmail.com>
Date: Tue, 5 May 2026 19:30:07 +0800
Subject: [PATCH 60/60] fix(ci): remove stale contest anonymous fields

---
 backend/apps/submissions/managers.py          | 11 ----------
 backend/apps/submissions/serializers.py       | 22 +------------------
 .../tests/test_submission_legacy_flows.py     |  1 -
 .../tests/test_submission_service.py          |  1 -
 frontend/src/core/entities/contest.entity.ts  |  4 ++--
 .../studentDashboard/studentDashboardState.ts |  2 +-
 6 files changed, 4 insertions(+), 37 deletions(-)

diff --git a/backend/apps/submissions/managers.py b/backend/apps/submissions/managers.py
index e5ac4946..9a4045b4 100644
--- a/backend/apps/submissions/managers.py
+++ b/backend/apps/submissions/managers.py
@@ -5,11 +5,8 @@
 
 from django.contrib.auth import get_user_model
 from django.db import models
-from django.db.models import OuterRef, Subquery
 from django.utils import timezone
 
-from apps.contests.models import ContestParticipant
-
 User = get_user_model()
 
 
@@ -35,7 +32,6 @@ def optimized_for_list(self) -> "SubmissionQuerySet":
             "problem__id",
             "problem__question_asset__title",
             "contest__id",
-            "contest__anonymous_mode_enabled",
         ).select_related("user", "problem", "problem__question_asset", "contest")
 
     def visible_to(
@@ -55,13 +51,6 @@ def visible_to(
             and (user.is_staff or getattr(user, "role", "") in ["admin", "teacher"])
         )
 
-        if contest_id:
-            nickname_subquery = ContestParticipant.objects.filter(
-                contest_id=contest_id,
-                user_id=OuterRef("user_id"),
-            ).values("nickname")[:1]
-            queryset = queryset.annotate(_contest_nickname=Subquery(nickname_subquery))
-
         if not include_all:
             if created_after:
                 queryset = queryset.filter(created_at__gte=created_after)
diff --git a/backend/apps/submissions/serializers.py b/backend/apps/submissions/serializers.py
index 680235ed..8ca89301 100644
--- a/backend/apps/submissions/serializers.py
+++ b/backend/apps/submissions/serializers.py
@@ -99,27 +99,7 @@ def get_problem_title(self, obj):
     contest_id = serializers.UUIDField(source='contest.id', read_only=True, allow_null=True)
     
     def get_username(self, obj):
-        """Handle anonymous mode for contests."""
-        # If no contest or anonymous mode not enabled, return real username
-        if not obj.contest or not obj.contest.anonymous_mode_enabled:
-            return obj.user.username
-        
-        request = self.context.get('request')
-        viewer = request.user if request else None
-        
-        # Privileged users or owners see real username
-        is_privileged = viewer and (viewer.is_staff or getattr(viewer, 'role', '') in ['teacher', 'admin'])
-        is_owner = viewer and viewer == obj.user
-        
-        if is_privileged or is_owner:
-            return obj.user.username
-        
-        # For others, return nickname if available
-        # Use annotated field from queryset (added via Subquery in ViewSet)
-        if hasattr(obj, '_contest_nickname') and obj._contest_nickname:
-            return obj._contest_nickname
-        
-        # Fallback to real username
+        """Return submitter username."""
         return obj.user.username
     
     class Meta:
diff --git a/backend/apps/submissions/tests/test_submission_legacy_flows.py b/backend/apps/submissions/tests/test_submission_legacy_flows.py
index 0f67c4aa..31ee0425 100644
--- a/backend/apps/submissions/tests/test_submission_legacy_flows.py
+++ b/backend/apps/submissions/tests/test_submission_legacy_flows.py
@@ -65,7 +65,6 @@ class Meta:
     contest = factory.SubFactory(ContestFactory)
     user = factory.SubFactory(UserFactory)
     exam_status = ExamStatus.NOT_STARTED
-    nickname = ""
 
 
 @pytest.fixture
diff --git a/backend/apps/submissions/tests/test_submission_service.py b/backend/apps/submissions/tests/test_submission_service.py
index c4f01b85..ecb638e8 100644
--- a/backend/apps/submissions/tests/test_submission_service.py
+++ b/backend/apps/submissions/tests/test_submission_service.py
@@ -73,7 +73,6 @@ class Meta:
     contest = factory.SubFactory(ContestFactory)
     user = factory.SubFactory(UserFactory)
     exam_status = ExamStatus.IN_PROGRESS
-    nickname = ""
 
 
 # ---------------------------------------------------------------------------
diff --git a/frontend/src/core/entities/contest.entity.ts b/frontend/src/core/entities/contest.entity.ts
index 4915c7f3..bc9f823c 100644
--- a/frontend/src/core/entities/contest.entity.ts
+++ b/frontend/src/core/entities/contest.entity.ts
@@ -678,7 +678,7 @@ export const getContestState = (contest: {
   endTime?: string;
   start_time?: string;
   end_time?: string;
-}): ContestDisplayState => {
+}, nowMs: number = Date.now()): ContestDisplayState => {
   if (contest.status === "draft") {
     return "draft";
   }
@@ -687,7 +687,7 @@ export const getContestState = (contest: {
     return "archived";
   }
 
-  const now = new Date().getTime();
+  const now = nowMs;
   const startTimeValue = contest.startTime || contest.start_time || "";
   const endTimeValue = contest.endTime || contest.end_time || "";
   const startTime = new Date(startTimeValue).getTime();
diff --git a/frontend/src/features/contest/components/studentDashboard/studentDashboardState.ts b/frontend/src/features/contest/components/studentDashboard/studentDashboardState.ts
index 88c7aae8..f7579206 100644
--- a/frontend/src/features/contest/components/studentDashboard/studentDashboardState.ts
+++ b/frontend/src/features/contest/components/studentDashboard/studentDashboardState.ts
@@ -28,7 +28,7 @@ export const resolveStudentContestPhase = (
     status: contest.status,
     startTime: contest.startTime,
     endTime: contest.endTime,
-  });
+  }, nowMs);
   if (contestState === "ended") return "after";
   if (contestState === "running") return "during";