cleanup events + limits + more logs

frontend.tsx

@@ -32,20 +32,25 @@ type RoundState = {
   scoreB?: number;
 };
 type GameState = {
-  completed: RoundState[];
+  lastCompleted: RoundState | null;
   active: RoundState | null;
   scores: Record<string, number>;
   done: boolean;
   isPaused: boolean;
   generation: number;
 };
-type ServerMessage = {
+type StateMessage = {
   type: "state";
   data: GameState;
   totalRounds: number;
   viewerCount: number;
   version?: string;
 };
+type ViewerCountMessage = {
+  type: "viewerCount";
+  viewerCount: number;
+};
+type ServerMessage = StateMessage | ViewerCountMessage;
 
 // ── Model colors & logos ─────────────────────────────────────────────────────
 
@@ -432,6 +437,8 @@ function App() {
           setState(msg.data);
           setTotalRounds(msg.totalRounds);
           setViewerCount(msg.viewerCount);
+        } else if (msg.type === "viewerCount") {
+          setViewerCount(msg.viewerCount);
         }
       };
     }
@@ -445,11 +452,10 @@ function App() {
 
   if (!connected || !state) return <ConnectingScreen />;
 
-  const lastCompleted = state.completed[state.completed.length - 1];
   const isNextPrompting =
     state.active?.phase === "prompting" && !state.active.prompt;
   const displayRound =
-    isNextPrompting && lastCompleted ? lastCompleted : state.active;
+    isNextPrompting && state.lastCompleted ? state.lastCompleted : state.active;
 
   return (
     <div className="app">
@@ -486,7 +492,7 @@ function App() {
             </div>
           )}
 
-          {isNextPrompting && lastCompleted && (
+          {isNextPrompting && state.lastCompleted && (
             <div className="next-toast">
               <ModelTag model={state.active!.prompter} small /> is writing the
               next prompt