Feature: Add Warm LLM button to pre-warm Modal inference container

api.py

@@ -167,3 +167,24 @@ async def run_full_game(req: StartGameRequest):
 def get_default_prompt(grid_size: int = 20):
     from backend.agent.agent import Agent
     return {"default_prompt": Agent.get_default_system_prompt(grid_size=grid_size)}
+
+
+@app.post("/api/model/warm")
+async def warm_model():
+    from backend.agent.llm_client import get_llm_client
+    try:
+        client = get_llm_client()
+        response = await client.chat.completions.create(
+            model="google/gemma-4-26B-A4B-it",
+            messages=[{"role": "user", "content": "ping"}],
+            max_tokens=5
+        )
+        if response and response.choices:
+            return {
+                "status": "success",
+                "message": "Model warmed up successfully!",
+                "response": response.choices[0].message.content
+            }
+        return {"status": "warning", "message": "No choices returned from model."}
+    except Exception as e:
+        return {"status": "error", "detail": str(e)}

frontend/static/index.html

@@ -276,6 +276,39 @@ body {
   35%, 100% { transform: translateX(100%); }
 }
 
+.lobby-warm {
+  padding: 15px; border: 1px solid var(--border); border-radius: 12px;
+  background: var(--surface2);
+  color: var(--text-dim);
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 13px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.15em;
+  cursor: pointer; position: relative; overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
+}
+.lobby-warm:hover {
+  border-color: var(--blue);
+  color: var(--text);
+  box-shadow: 0 0 15px rgba(74,158,255,0.25);
+  transform: translateY(-2px);
+}
+.lobby-warm:disabled { opacity: 0.8; cursor: not-allowed; }
+.lobby-warm.warming {
+  border-color: var(--accent);
+  color: var(--accent);
+  box-shadow: 0 0 15px var(--accent-glow);
+  animation: warmPulse 1.0s infinite alternate;
+}
+.lobby-warm.warmed {
+  border-color: var(--cyan);
+  color: var(--cyan);
+  box-shadow: 0 0 15px rgba(0,229,255,0.25);
+}
+@keyframes warmPulse {
+  0% { opacity: 0.6; }
+  100% { opacity: 1; }
+}
+
 /* ══════════════════════ GAME WRAPPER ══════════════════════ */
 #game {
   display: none; flex-direction: column; height: 100vh;
@@ -1114,7 +1147,10 @@ body {
       <div class="lobby-prompt-wrap">
         <textarea id="systemPromptInput" placeholder="Configure the agent system prompt..."></textarea>
       </div>
-      <button class="lobby-deploy" id="startBtn">⚔ Deploy Agents</button>
+      <div class="lobby-action-group" style="display: flex; gap: 12px; margin-top: 24px;">
+        <button class="lobby-deploy" id="startBtn" style="margin-top: 0; flex: 2;">⚔ Deploy Agents</button>
+        <button class="lobby-warm" id="warmBtn" style="flex: 1;" title="Pre-warm serverless inference models to prevent cold start latency">⚡ Warm LLM</button>
+      </div>
     </div>
   </div>
 </div>
@@ -2863,6 +2899,36 @@ function updateUI() {
 
 /* ═══════════ KEYBOARD ═══════════ */
 document.getElementById('startBtn').addEventListener('click', startGame);
+
+document.getElementById('warmBtn').addEventListener('click', async () => {
+  const btn = document.getElementById('warmBtn');
+  if (btn.disabled) return;
+  
+  btn.disabled = true;
+  btn.classList.add('warming');
+  btn.classList.remove('warmed');
+  btn.textContent = 'Warming...';
+  
+  try {
+    const res = await fetch('/api/model/warm', { method: 'POST' });
+    const data = await res.json();
+    if (data.status === 'success') {
+      btn.classList.remove('warming');
+      btn.classList.add('warmed');
+      btn.textContent = 'Ready ✅';
+    } else {
+      btn.classList.remove('warming');
+      btn.textContent = 'Error ❌';
+      btn.disabled = false;
+      console.error('Failed to warm model:', data.detail || data.message);
+    }
+  } catch (err) {
+    btn.classList.remove('warming');
+    btn.textContent = 'Error ❌';
+    btn.disabled = false;
+    console.error('Failed to warm model:', err);
+  }
+});
 document.getElementById('stepBtn').addEventListener('click', step);
 document.getElementById('autoBtn').addEventListener('click', auto);