death flow enhancements

Author: RobotHanzo

AGENTS.md

@@ -37,11 +37,22 @@ TypeScript/React frontend + JDA (Discord API) + MongoDB + WebSocket sync.
 - **Type Generation**: Run `yarn generate-api` after backend DTO changes to
   regenerate [types.gen.ts](src/dashboard/src/api/types.gen.ts)
 
+### UI Layout Strategy
+
+- **Sidebar-Centric Design**: The application uses a persistent `Sidebar` (
+  `src/dashboard/src/components/layout/Sidebar.tsx`) as the primary game status hub.
+    - Displays: Day count, game phase (Day/Night), step name, and countdown timer.
+    - Controls: Contains navigation and status indicators (e.g., "Current Speaker").
+- **Responsiveness**: Key views (like `NightStatus`) use dynamic height calculations (`calc(100vh - ...)` ) and internal
+  scrolling to ensure usability across mobile and desktop.
+
 ## Critical Patterns
 
 ### Data Model Hierarchy
 
 - **Session** (guild-scoped): Contains `players: Map<String, Player>`, `currentState`, `stateData`, game settings
+    - `stateData`: Stores transient but critical step data (e.g., `processedDeathPlayerIds` for robust death processing,
+      poll results) to ensure resilience against restarts.
 - **Player** (nested class in Session): `roles: List<String>`, `alive: Boolean`, `police`, identity flags (`jinBaoBao`,
   `duplicated`)
 - **Game Steps**: State machine uses step IDs like "SETUP", "NIGHT", "SPEECH", "VOTING" - managed by `GameStateService`

src/dashboard/FEATURES.md

@@ -18,7 +18,6 @@ exhaustive way. It was assembled by statically scanning the dashboard source.
   - Back-to-login button
 - `/server/:guildId` (Main server dashboard)
   - `MainDashboard` (stage content + navigator)
-  - `GameHeader` (day, step, speaker, timer, actions)
   - Stage-specific content (see Stages section)
 - `/server/:guildId/players` — Player management grid (`PlayerCard` list)
 - `/server/:guildId/speech` — `SpeechManager` (speech management UI)

src/dashboard/src/components/layout/Sidebar.tsx

@@ -1,9 +1,21 @@
-import { Activity, LayoutGrid, LogOut, Mic, Moon, Settings, Users } from 'lucide-react';
+import {
+  Activity,
+  LayoutGrid,
+  LogOut,
+  Mic,
+  Moon,
+  Settings,
+  Settings2,
+  Sun,
+  Users,
+} from 'lucide-react';
 import { useTranslation } from '@/lib/i18n';
 import { ThemeToggle } from '@/components/ui/ThemeToggle';
 import { useAuth } from '@/features/auth/contexts/AuthContext';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { DiscordAvatar, DiscordName } from '@/components/DiscordUser';
+import { Player } from '@/api/types.gen';
+import { GAME_STEPS } from '@/features/game/constants';
 
 interface SidebarProps {
   onLogout: () => void;
@@ -16,6 +28,16 @@ interface SidebarProps {
   onToggleSpectatorMode: () => void;
   isSpectatorMode: boolean;
   isConnected: boolean;
+
+  // Game Header Relocated Props
+  dayCount: number;
+  timerSeconds: number;
+  speech?: any;
+  players?: Player[];
+  currentStep?: string;
+  currentState?: string;
+  guildId?: string;
+  isManualStep?: boolean;
 }
 
 export const Sidebar: React.FC<SidebarProps> = ({
@@ -29,10 +51,19 @@ export const Sidebar: React.FC<SidebarProps> = ({
   onToggleSpectatorMode,
   isSpectatorMode,
   isConnected,
+  dayCount,
+  timerSeconds,
+  speech,
+  players,
+  currentStep,
+  currentState,
+  guildId,
+  isManualStep = false,
 }) => {
   const { t } = useTranslation();
   const { user } = useAuth();
   const location = useLocation();
+  const navigate = useNavigate();
 
   const isDashboardActive =
     location.pathname.endsWith(user?.user?.guildId ? `/server/${user.user.guildId}` : '/') &&
@@ -45,6 +76,15 @@ export const Sidebar: React.FC<SidebarProps> = ({
   const isSpectatorActive = location.pathname.includes('/spectator');
   const isSpeechActive = location.pathname.includes('/speech');
 
+  const currentSpeaker =
+    speech?.currentSpeakerId && players
+      ? players.find((p) => p.id === speech.currentSpeakerId)
+      : null;
+
+  const displayDay = dayCount === 0 && currentState !== 'SETUP' && !!currentState ? 1 : dayCount;
+  const isNight = currentState?.includes('NIGHT');
+  const isLobby = currentState === 'SETUP' || !currentState;
+
   return (
     <aside className="w-full md:w-64 bg-slate-100 dark:bg-slate-950 border-r border-slate-300 dark:border-slate-800 flex flex-col shrink-0">
       <div className="p-6 flex items-center gap-3 border-b border-slate-300 dark:border-slate-800">
@@ -57,7 +97,42 @@ export const Sidebar: React.FC<SidebarProps> = ({
         </span>
       </div>
 
-      <nav className="flex-1 p-4 space-y-1">
+      <div className="p-4 border-b border-slate-300 dark:border-slate-800 space-y-4">
+        {/* Game Status */}
+        <div className="bg-white dark:bg-slate-900 rounded-xl p-3 border border-slate-200 dark:border-slate-800 shadow-sm">
+          <div className="flex items-center gap-2 mb-2 text-slate-900 dark:text-slate-100">
+            {isLobby ? (
+              <Settings2 className="w-4 h-4 text-slate-500 dark:text-slate-400" />
+            ) : isNight ? (
+              <Moon className="w-4 h-4 text-indigo-500 dark:text-indigo-400" />
+            ) : (
+              <Sun className="w-4 h-4 text-orange-500" />
+            )}
+            <span className="font-bold text-sm">
+              {!isLobby && displayDay > 0 && t('game.day', { day: String(displayDay) }) + ' - '}
+              {(() => {
+                const stepInfo = GAME_STEPS.find((s) => s.id === currentStep);
+                return stepInfo ? t(stepInfo.key) : currentStep || 'LOBBY';
+              })()}
+            </span>
+          </div>
+
+          {!isManualStep && !isLobby && (
+            <div className="flex items-center justify-between">
+              <span className="text-[10px] text-slate-500 dark:text-slate-400 font-bold uppercase tracking-wider">
+                {t('game.timer')}
+              </span>
+              <div
+                className={`font-mono font-bold text-lg ${timerSeconds < 10 ? 'text-red-500 dark:text-red-400' : 'text-slate-800 dark:text-slate-200'}`}
+              >
+                {Math.floor(timerSeconds / 60)}:{String(timerSeconds % 60).padStart(2, '0')}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <nav className="flex-1 p-4 space-y-1 overflow-y-auto overflow-x-hidden">
         {user?.user?.role === 'JUDGE' && !isSpectatorMode && (
           <>
             <button
@@ -127,39 +202,70 @@ export const Sidebar: React.FC<SidebarProps> = ({
       <div className="p-4 border-t border-slate-300 dark:border-slate-800 space-y-3">
         {/* User Profile */}
         {user && (
-          <div className="flex items-center gap-3 px-2 py-2 bg-slate-200/50 dark:bg-slate-800/50 rounded-lg">
-            <DiscordAvatar
-              userId={user.user.userId}
-              guildId={user.user.guildId}
-              avatarClassName="w-10 h-10 rounded-full ring-2 ring-indigo-200 dark:ring-indigo-900"
-            />
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-slate-900 dark:text-white truncate">
-                <DiscordName userId={user.user.userId} guildId={user.user.guildId} />
-              </p>
-              {user.user.role === 'JUDGE' ? (
-                <button
-                  onClick={onToggleSpectatorMode}
-                  className={`inline-block px-2 py-0.5 text-xs font-medium rounded transition-colors cursor-pointer ${
-                    isSpectatorMode
-                      ? 'bg-blue-100 dark:bg-blue-950 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-900'
-                      : 'bg-purple-100 dark:bg-purple-950 text-purple-700 dark:text-purple-300 hover:bg-purple-200 dark:hover:bg-purple-900'
-                  }`}
-                  title={isSpectatorMode ? t('sidebar.backToJudge') : t('sidebar.viewAsSpectator')}
-                >
-                  {isSpectatorMode ? t('userRoles.SPECTATOR') : t('userRoles.JUDGE')}
-                </button>
-              ) : (
-                <span
-                  className={`inline-block px-2 py-0.5 text-xs font-medium rounded ${
-                    user.user.role === 'SPECTATOR'
-                      ? 'bg-blue-100 dark:bg-blue-950 text-blue-700 dark:text-blue-300'
-                      : 'bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300'
-                  }`}
-                >
-                  {t(`userRoles.${user.user.role}`) || user.user.role}
+          <div className="space-y-3">
+            {currentSpeaker && (
+              <button
+                onClick={() => navigate(`/server/${guildId}/speech`, { replace: true })}
+                className="w-full flex flex-col items-center gap-1 p-3 bg-indigo-50 dark:bg-indigo-950/30 border border-indigo-200 dark:border-indigo-800/50 rounded-xl transition-all hover:bg-indigo-100 dark:hover:bg-indigo-950/50 group"
+              >
+                <div className="flex items-center gap-2 text-indigo-600 dark:text-indigo-400">
+                  <Mic className="w-3 h-3 animate-pulse" />
+                  <span className="text-[10px] font-bold uppercase tracking-wider">
+                    {t('messages.speaking')}
+                  </span>
+                </div>
+                <span className="font-bold text-sm text-slate-900 dark:text-slate-100">
+                  {currentSpeaker.nickname}
                 </span>
-              )}
+                {speech?.endTime && (
+                  <span className="text-xs font-mono text-indigo-600 dark:text-indigo-400 bg-indigo-100/50 dark:bg-indigo-900/30 px-2 py-0.5 rounded-full border border-indigo-200/50 dark:border-indigo-800/30 mt-1">
+                    {(() => {
+                      const seconds = Math.max(0, Math.ceil((speech.endTime - Date.now()) / 1000));
+                      return `${Math.floor(seconds / 60)
+                        .toString()
+                        .padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;
+                    })()}
+                  </span>
+                )}
+              </button>
+            )}
+
+            <div className="flex items-center gap-3 px-2 py-2 bg-slate-200/50 dark:bg-slate-800/50 rounded-lg">
+              <DiscordAvatar
+                userId={user.user.userId}
+                guildId={user.user.guildId}
+                avatarClassName="w-10 h-10 rounded-full ring-2 ring-indigo-200 dark:ring-indigo-900"
+              />
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-slate-900 dark:text-white truncate">
+                  <DiscordName userId={user.user.userId} guildId={user.user.guildId} />
+                </p>
+                {user.user.role === 'JUDGE' ? (
+                  <button
+                    onClick={onToggleSpectatorMode}
+                    className={`inline-block px-2 py-0.5 text-xs font-medium rounded transition-colors cursor-pointer ${
+                      isSpectatorMode
+                        ? 'bg-blue-100 dark:bg-blue-950 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-900'
+                        : 'bg-purple-100 dark:bg-purple-950 text-purple-700 dark:text-purple-300 hover:bg-purple-200 dark:hover:bg-purple-900'
+                    }`}
+                    title={
+                      isSpectatorMode ? t('sidebar.backToJudge') : t('sidebar.viewAsSpectator')
+                    }
+                  >
+                    {isSpectatorMode ? t('userRoles.SPECTATOR') : t('userRoles.JUDGE')}
+                  </button>
+                ) : (
+                  <span
+                    className={`inline-block px-2 py-0.5 text-xs font-medium rounded ${
+                      user.user.role === 'SPECTATOR'
+                        ? 'bg-blue-100 dark:bg-blue-950 text-blue-700 dark:text-blue-300'
+                        : 'bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300'
+                    }`}
+                  >
+                    {t(`userRoles.${user.user.role}`) || user.user.role}
+                  </span>
+                )}
+              </div>
             </div>
           </div>
         )}