game progress

frontend.css

@@ -493,6 +493,7 @@ body {
   color: var(--text-muted);
   font-size: 48px;
   opacity: 0.5;
+  padding: 64px 0;
 }
 
 /* ── Game Over ────────────────────────────────────────────────── */
@@ -504,6 +505,7 @@ body {
   align-items: center;
   justify-content: center;
   text-align: center;
+  padding: 64px 0;
 }
 
 .game-over__title {
@@ -606,6 +608,33 @@ body {
   40% { opacity: 1; }
 }
 
+/* ── Next Round Toast ─────────────────────────────────────────── */
+
+.next-round-toast {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  padding: 16px 32px;
+  border-radius: 32px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+  color: var(--text-dim);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  z-index: 100;
+  animation: slide-up 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes slide-up {
+  from { opacity: 0; transform: translate(-50%, 20px); }
+  to { opacity: 1; transform: translate(-50%, 0); }
+}
+
 /* ── Scrollbar ────────────────────────────────────────────────── */
 
 ::-webkit-scrollbar { width: 8px; }

frontend.tsx

@@ -396,19 +396,39 @@ function App() {
 
       <div className="layout">
         <main className="main" ref={mainRef}>
-          {state.active && <Arena round={state.active} total={totalRounds} />}
+          {(() => {
+            const isGeneratingNextPrompt = state.active && state.active.phase === "prompting" && !state.active.prompt;
+            const lastCompleted = state.completed[state.completed.length - 1];
 
-          {!state.active && !state.done && state.completed.length > 0 && (
-            <div className="arena-waiting">
-              Next round starting<span className="dots"><span>.</span><span>.</span><span>.</span></span>
-            </div>
-          )}
+            if (isGeneratingNextPrompt && lastCompleted) {
+              return (
+                <>
+                  <Arena round={lastCompleted} total={totalRounds} />
+                  <div className="next-round-toast">
+                    <ModelName model={state.active!.prompter} /> is cooking up the next prompt<span className="dots"><span>.</span><span>.</span><span>.</span></span>
+                  </div>
+                </>
+              );
+            }
 
-          {!state.active && !state.done && state.completed.length === 0 && (
-            <div className="arena-waiting">
-              Game starting<span className="dots"><span>.</span><span>.</span><span>.</span></span>
-            </div>
-          )}
+            if (state.active) {
+              return <Arena round={state.active} total={totalRounds} />;
+            }
+
+            if (!state.active && !state.done && state.completed.length > 0) {
+              return <Arena round={lastCompleted} total={totalRounds} />;
+            }
+
+            if (!state.active && !state.done && state.completed.length === 0) {
+              return (
+                <div className="arena-waiting">
+                  Game starting<span className="dots"><span>.</span><span>.</span><span>.</span></span>
+                </div>
+              );
+            }
+
+            return null;
+          })()}
 
           {state.done && <GameOver scores={state.scores} />}
         </main>

game.ts

@@ -390,7 +390,7 @@ export async function runGame(
     }
     rerender();
 
-    await new Promise((r) => setTimeout(r, 2000));
+    await new Promise((r) => setTimeout(r, 5000));
 
     // Archive round
     saveRound(round);