suchith's changes

README.md

@@ -26,6 +26,7 @@ This project is built and submitted as part of the Hugging Face × Gradio **Buil
 
 ## 🔗 Submission Details
 *   **Live Space URL**: [https://build-small-hackathon-grid-royale.hf.space](https://build-small-hackathon-grid-royale.hf.space)
+*   **Gradio Panel**: [https://build-small-hackathon-grid-royale.hf.space/gradio](https://build-small-hackathon-grid-royale.hf.space/gradio)
 *   **Demo Video:** *[todo]*
 *   **Social Post:** *[todo]*
 

api.py

@@ -17,6 +17,23 @@ app.add_middleware(
 engine: Engine | None = None
 
 
+@app.on_event("startup")
+async def _seed_default_game():
+    """Pre-create a game so visitors see a live arena instead of a lobby."""
+    global engine
+    try:
+        cfg = GameConfig(grid_size=20, max_turns=100, max_agents=4, num_chests=15)
+        eng = Engine(config=cfg)
+        eng.generate_grid()
+        eng.scatter_chests()
+        for i, name in enumerate(_default_names(4)):
+            eng.spawn_agent(agent_id=f"agent_{i}", name=name)
+        engine = eng
+    except Exception as exc:
+        import logging
+        logging.getLogger("uvicorn.error").warning(f"Default game seed failed: {exc}")
+
+
 class StartGameRequest(BaseModel):
     grid_size: int = 20
     max_turns: int = 50

backend/agent/llm_client.py

@@ -47,7 +47,7 @@ PROVIDER_CONFIG = {
     },
 }
 
-DEFAULT_PROVIDER = "modal"
+DEFAULT_PROVIDER = os.getenv("LLM_PROVIDER", "modal")
 
 
 def get_llm_client(provider: str | None = None) -> AsyncOpenAI:

backend/engine.py

@@ -59,10 +59,16 @@ class Engine:
             pos=[x, y],
             hp=self.env.config.base_hp,
         )
+        import os
+        default_provider = os.getenv("LLM_PROVIDER", "modal")
+        default_model = os.getenv(
+            "LLM_MODEL",
+            "qwen2.5:7b" if default_provider == "local" else "google/gemma-4-26B-A4B-it",
+        )
         brain = Agent(
             agent_id=agent_id,
-            model=model or "google/gemma-4-26B-A4B-it",
-            provider=provider or "modal",
+            model=model or default_model,
+            provider=provider or default_provider,
             system_prompt=system_prompt,
             config=self.env.config,
         )

frontend/static/index.html

@@ -370,13 +370,24 @@ body {
 .camera-mode-badge {
   font-family: 'JetBrains Mono', monospace;
   font-size: 9px; text-transform: uppercase; letter-spacing: 0.15em;
-  color: var(--purple);
-  background: rgba(180,74,255,0.1);
-  border: 1px solid rgba(180,74,255,0.25);
-  padding: 3px 8px; border-radius: 5px;
-  display: none;
+  color: var(--text-dim);
+  background: rgba(255,255,255,0.04);
+  border: 1px solid var(--border);
+  padding: 4px 10px; border-radius: 5px;
+  cursor: pointer; transition: all 0.15s ease;
+}
+.camera-mode-badge:hover:not(:disabled) {
+  color: var(--purple); border-color: rgba(180,74,255,0.5);
+  background: rgba(180,74,255,0.08);
+}
+.camera-mode-badge.active {
+  color: var(--purple); border-color: rgba(180,74,255,0.5);
+  background: rgba(180,74,255,0.15);
+  box-shadow: 0 0 12px rgba(180,74,255,0.25);
+}
+.camera-mode-badge:disabled {
+  opacity: 0.4; cursor: not-allowed;
 }
-.camera-mode-badge.visible { display: block; }
 .winner-announce {
   font-family: 'Space Grotesk', sans-serif;
   font-size: 12px; font-weight: 700; color: var(--gold);
@@ -866,6 +877,29 @@ body {
   flex: 1; overflow-y: auto; padding: 6px 10px;
 }
 
+/* Visual trace chips */
+.trace-chip {
+  display: inline-flex; align-items: center; gap: 3px;
+  padding: 1px 6px; border-radius: 8px;
+  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
+  font-family: 'JetBrains Mono', monospace;
+}
+.trace-chip.dmg   { background: rgba(255,70,85,0.15);  color: #ff7585; }
+.trace-chip.score { background: rgba(251,191,36,0.15); color: #fbbf24; }
+.trace-chip.pos   { background: rgba(255,255,255,0.06); color: var(--text-dim); }
+.trace-row.fail   { border-left-color: #ff4655 !important; opacity: 0.72; }
+.trace-row.fail .trace-label::before { content: '⚠ '; color: #ff4655; }
+.trace-head {
+  display: flex; align-items: center; gap: 6px;
+  margin-bottom: 3px;
+}
+.trace-icon  { font-size: 13px; line-height: 1; }
+.trace-arrow { font-size: 15px; line-height: 1; font-weight: 700; }
+.trace-tool  { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
+.trace-round { font-size: 9px; color: var(--text-muted); font-weight: 400; }
+.trace-turn  { font-size: 9px; color: var(--text-muted); margin-left: auto; }
+.trace-result { font-size: 9.5px; color: var(--text-dim); margin-top: 2px; }
+
 /* ══════════════════════ CONTROLS ══════════════════════ */
 .controls-bar {
   display: flex; align-items: center; gap: 8px;
@@ -1153,7 +1187,8 @@ body {
     </div>
 
     <div class="top-right">
-      <span class="camera-mode-badge" id="cameraModeBadge">👁 POV MODE</span>
+      <button class="camera-mode-badge" id="newGameBtn" onclick="returnToLobby()" title="Open lobby to start a new game">⚙ NEW GAME</button>
+      <button class="camera-mode-badge" id="cameraModeBadge" onclick="togglePov()" title="Toggle chase cam (V) — select an agent first" disabled>📹 OVERVIEW</button>
       <span class="winner-announce" id="winnerAnnounce"></span>
     </div>
   </div>
@@ -1265,6 +1300,50 @@ const AGENT_COLORS = {
   agent_6: '#00e5ff', agent_7: '#ff9100',
 };
 
+const TOOL_VIS = {
+  observe:          { icon: '👁',  color: '#6ec5ff', label: 'OBSERVE' },
+  think:            { icon: '💭',  color: '#a78bfa', label: 'THINK'   },
+  move:             { icon: '➡',   color: '#7dd3fc', label: 'MOVE'    },
+  attack:           { icon: '⚔',   color: '#ff4655', label: 'ATTACK'  },
+  dash:             { icon: '💨',  color: '#fbbf24', label: 'DASH'    },
+  shield:           { icon: '🛡',   color: '#34d399', label: 'SHIELD'  },
+  heal:             { icon: '❤',   color: '#f472b6', label: 'HEAL'    },
+  activate_ability: { icon: '✨',  color: '#c084fc', label: 'ABILITY' },
+};
+const DEFAULT_VIS = { icon: '•', color: '#888', label: 'TOOL' };
+function ARROW_FOR(dx, dy) {
+  dx = Math.sign(dx||0); dy = Math.sign(dy||0);
+  if (dx===0 && dy<0) return '↑'; if (dx===0 && dy>0) return '↓';
+  if (dx<0 && dy===0) return '←'; if (dx>0 && dy===0) return '→';
+  if (dx<0 && dy<0)  return '↖'; if (dx>0 && dy<0)  return '↗';
+  if (dx<0 && dy>0)  return '↙'; if (dx>0 && dy>0)  return '↘';
+  return '·';
+}
+function pickVis(tool, args) {
+  if (tool === 'activate_ability' && args && args.ability && TOOL_VIS[args.ability])
+    return TOOL_VIS[args.ability];
+  return TOOL_VIS[tool] || DEFAULT_VIS;
+}
+function outcomeChips(result) {
+  const r = String(result || '');
+  const chips = [];
+  let fail = false;
+  const score = r.match(/picked up (\d+) points?/i);
+  if (score) chips.push(`<span class="trace-chip score">+${score[1]} pts</span>`);
+  const loot = r.match(/picked up ability '([a-z_]+)'/i);
+  if (loot) chips.push(`<span class="trace-chip score">+${esc(loot[1])}</span>`);
+  const dmg = r.match(/for (\d+) damage/i);
+  if (dmg) chips.push(`<span class="trace-chip dmg">−${dmg[1]} HP</span>`);
+  const heal = r.match(/restored (\d+) HP/i);
+  if (heal) chips.push(`<span class="trace-chip score">+${heal[1]} HP</span>`);
+  const moved = r.match(/Moved to \((\d+),\s*(\d+)\)/i);
+  if (moved) chips.push(`<span class="trace-chip pos">(${moved[1]},${moved[2]})</span>`);
+  if (/eliminated|kill/i.test(r)) chips.push(`<span class="trace-chip dmg">☠ KILL</span>`);
+  if (/shield (activated|broke)/i.test(r)) chips.push(`<span class="trace-chip score">🛡</span>`);
+  if (/^(Invalid|cannot|don't have|can only|You cannot|Ability|No agent)/i.test(r) || /cooldown|no uses left/i.test(r)) fail = true;
+  return { chips: chips.join(' '), fail };
+}
+
 /* ═══════════ LOBBY PARTICLES ═══════════ */
 (function initLobbyParticles() {
   // Disabled for minimal, clean design
@@ -2205,19 +2284,38 @@ function enterFps() {
   app.controls.update();
 
   document.getElementById('fpsHud').classList.add('active');
-  const badge = document.getElementById('cameraModeBadge');
-  badge.textContent = '📹 CHASE CAM';
-  badge.classList.add('visible');
+  updateCameraBadge();
   updateFpsHud(agent);
   buildSidebar();
 }
 
+function updateCameraBadge() {
+  const badge = document.getElementById('cameraModeBadge');
+  if (!badge) return;
+  if (fpsMode) {
+    badge.textContent = '📹 EXIT CHASE';
+    badge.classList.add('active');
+    badge.disabled = false;
+    badge.title = 'Exit chase cam (V)';
+  } else if (selectedId) {
+    badge.textContent = '📹 CHASE CAM';
+    badge.classList.remove('active');
+    badge.disabled = false;
+    badge.title = 'Enter chase cam (V)';
+  } else {
+    badge.textContent = '📹 OVERVIEW';
+    badge.classList.remove('active');
+    badge.disabled = true;
+    badge.title = 'Select an agent first';
+  }
+}
+
 function exitFps() {
   fpsMode = false;
   fpsCameraPos = null;
   fpsLookTarget = null;
   document.getElementById('fpsHud').classList.remove('active');
-  document.getElementById('cameraModeBadge').classList.remove('visible');
+  updateCameraBadge();
   // Restore original orbit distances
   if (app) {
     app.controls.minDistance = 6;
@@ -2498,18 +2596,31 @@ function buildTabContent(aid, tab) {
 function buildTraceForAgent(aid) {
   const entries = traceHistory[aid] || [];
   if (!entries.length) return '<div class="empty-state">No trace data yet</div>';
-  const color = AGENT_COLORS[aid] || '#888';
   return entries.map(e => {
-    const turnStr = `t${e.turn}`;
-    if (e.phase==='exec') {
-      const args = JSON.stringify(e.args||{}).slice(0,100);
-      return `<div class="trace-row" style="border-left-color:${color}">
-        <div class="trace-label">${turnStr} · ⚡ ${e.tool} <span style="color:var(--text-muted);font-weight:400">r${e.round}</span></div>
-        <div class="trace-content">${esc(args)}</div>
-        <div class="trace-content" style="color:var(--cyan);margin-top:2px">→ ${esc((e.result||'').slice(0,200))}</div>
-      </div>`;
+    if (e.phase !== 'exec') return '';
+    const vis = pickVis(e.tool, e.args);
+    const oc  = outcomeChips(e.result);
+    let extra = '';
+    if (e.tool === 'move' || (e.tool === 'activate_ability' && e.args && e.args.ability === 'dash')) {
+      const dx = e.args?.dx ?? 0, dy = e.args?.dy ?? 0;
+      extra = `<span class="trace-arrow" style="color:${vis.color}">${ARROW_FOR(dx,dy)}</span>`;
+    } else if (e.tool === 'activate_ability' && e.args && e.args.ability === 'attack' && (e.args.x!==undefined)) {
+      extra = `<span class="trace-chip pos">→ (${e.args.x},${e.args.y})</span>`;
+    } else if (e.tool === 'think') {
+      const txt = String(e.args?.content || '').slice(0, 80);
+      extra = txt ? `<span style="font-size:9.5px;color:var(--text-dim);font-style:italic;font-weight:400">${esc(txt)}${e.args?.content?.length>80?'…':''}</span>` : '';
     }
-    return '';
+    const result = String(e.result || '').slice(0, 120);
+    return `<div class="trace-row ${oc.fail?'fail':''}" style="border-left-color:${vis.color}">
+      <div class="trace-head">
+        <span class="trace-icon">${vis.icon}</span>
+        <span class="trace-tool" style="color:${vis.color}">${vis.label}</span>
+        ${extra}
+        ${oc.chips}
+        <span class="trace-turn">t${e.turn}·r${e.round}</span>
+      </div>
+      ${result?`<div class="trace-result">${esc(result)}</div>`:''}
+    </div>`;
   }).join('');
 }
 
@@ -2561,9 +2672,22 @@ function buildTracePanel() {
     const name = agent?agent.name:aid, color=AGENT_COLORS[aid]||'#888';
     const entries = log.agents[aid]||[];
     entries.forEach(e => {
-      if (e.phase==='exec') {
-        html+=`<div class="trace-row" style="border-left-color:${color}"><div class="trace-label"><span style="color:${color}">${name}</span> <span style="color:var(--text)">${e.tool}</span></div><div class="trace-content">→ ${esc((e.result||'').slice(0,120))}</div></div>`;
+      if (e.phase!=='exec') return;
+      const vis = pickVis(e.tool, e.args);
+      const oc  = outcomeChips(e.result);
+      let extra = '';
+      if (e.tool === 'move' || (e.tool === 'activate_ability' && e.args && e.args.ability === 'dash')) {
+        extra = `<span class="trace-arrow" style="color:${vis.color}">${ARROW_FOR(e.args?.dx, e.args?.dy)}</span>`;
       }
+      html+=`<div class="trace-row ${oc.fail?'fail':''}" style="border-left-color:${color}">
+        <div class="trace-head">
+          <span class="trace-icon">${vis.icon}</span>
+          <span style="color:${color};font-weight:700;font-size:10px">${esc(name)}</span>
+          <span class="trace-tool" style="color:${vis.color}">${vis.label}</span>
+          ${extra}
+          ${oc.chips}
+        </div>
+      </div>`;
     });
   }
   html += '</div>';
@@ -2596,6 +2720,7 @@ function selectAgent(id) {
   selectedId = id;
   activeTab = 'trace';
   buildSidebar();
+  updateCameraBadge();
   if (id && state) {
     const agent = (state.agents||[]).find(a=>a.id===id);
     if (agent && app) {
@@ -2948,6 +3073,37 @@ document.addEventListener('keydown', e => {
 });
 
 window.addEventListener('resize', ()=>{ if (app) app.resize(); });
+
+function returnToLobby() {
+  if (autoRunning) auto();
+  gameStarted = false; selectedId = null; state = null;
+  document.getElementById('lobby').classList.remove('hidden');
+  const g = document.getElementById('game'); g.classList.remove('visible'); g.style.display = 'none';
+}
+
+async function bootProbe() {
+  try {
+    const r = await fetch('/api/game/state');
+    if (!r.ok) return;
+    const s = await r.json();
+    if (!s || !s.agents || !s.agents.length) return;
+    state = s;
+    gameStarted = true;
+    nameMaterialCache = {};
+    traceHistory = {};
+    document.getElementById('lobby').classList.add('hidden');
+    const game = document.getElementById('game');
+    game.classList.add('visible'); game.style.display = 'flex';
+    showLoading('Joining live arena...');
+    try {
+      await loadThree();
+      if (!app) initScene();
+      requestAnimationFrame(() => { if (app) app.resize(); renderScene(); });
+      updateUI();
+    } finally { hideLoading(); }
+  } catch (_) { /* keep lobby */ }
+}
+bootProbe();
 </script>
 </body>
 </html>

main.py

@@ -1,8 +1,17 @@
 import os
 import uvicorn
+import gradio as gr
 from fastapi.staticfiles import StaticFiles
 from api import app
 
+with gr.Blocks(title="Grid Royale — Gradio Panel", theme=gr.themes.Base()) as demo:
+    gr.Markdown(
+        "## ⚔️ Grid Royale\n"
+        "The main spectator UI is at the [root of this Space](/).\n"
+        "This panel exists for hackathon REQ-02 compliance and quick health checks."
+    )
+
+app = gr.mount_gradio_app(app, demo, path="/gradio")
 app.mount("/", StaticFiles(directory="frontend/static", html=True), name="frontend")
 
 if __name__ == "__main__":

requirements.txt

@@ -3,3 +3,4 @@ uvicorn>=0.20.0
 pydantic>=2.0
 openai>=1.0.0
 python-dotenv>=1.0.0
+gradio>=4.44.0