Upload folder using huggingface_hub

DESIGN_REFERENCE.md

@@ -0,0 +1,709 @@
+# Pyre — Design Reference for React Implementation
+
+> Extracted from `frontend_new_desgin/index.html`, `js/renderer.js`, `js/sim.js`, and `js/app.js`.  
+> Goal: 16 × 16 grid with per-agent **footprint trail** and **real-time health arc**.
+
+---
+
+## 1. Design Tokens (CSS Custom Properties → JS constants)
+
+```ts
+// Surfaces
+const SURFACE = {
+  bg:      '#f5f2ed',   // page background — warm off-white
+  panel:   '#ffffff',   // card / side panel
+  inset:   '#faf9f6',   // subtle inset (chart bg)
+  hover:   '#f0ede8',
+  border:  '#e4dfd7',
+  borderStrong: '#cdc7be',
+};
+
+// Text
+const TEXT = {
+  primary:   '#1c1712',
+  secondary: '#6b6460',
+  muted:     '#a8a29e',
+};
+
+// Semantic
+const SEMANTIC = {
+  fire:    '#c2410c',
+  fireBg:  'rgba(194,65,12,0.08)',
+  blue:    '#1d4ed8',
+  blueBg:  'rgba(29,78,216,0.08)',
+  green:   '#166534',
+  greenBg: 'rgba(22,101,52,0.08)',
+  amber:   '#92400e',
+  amberBg: 'rgba(146,64,14,0.08)',
+  red:     '#b91c1c',
+  redBg:   'rgba(185,28,28,0.08)',
+};
+
+// Canvas dark-world palette (inside the grid canvas)
+const CANVAS_COLORS = {
+  bg:         '#1e242c',  // dark slate background
+  wallBase:   '#4f443b',
+  floorVis:   '#302620',
+  obstBase:   '#140d0a',
+  exitBase:   '#062210',
+  exitGlow:   '#22c55e',
+  agentCore:  '#0ea5e9',  // sky-blue (healthy)
+  agentGlow:  '#38bdf8',
+  agentBright:'#e0f2fe',
+  fogSeen:    'rgba(30,36,44,0.30)',   // explored but out of view
+  fogUnseen:  'rgba(20,24,30,0.95)',   // never seen
+};
+
+// Typography
+const FONTS = {
+  mono: "'DM Mono', 'JetBrains Mono', monospace",
+  sans: "'DM Sans', 'Inter', system-ui, sans-serif",
+};
+```
+
+---
+
+## 2. Overall Layout
+
+```
+┌──────────────────────── 44px topbar ─────────────────────────┐
+│ 🔥 Pyre | Demo/Live | Easy/Medium/Hard          [Live chip]  │
+├─────────────────────────────────┬────────────────────────────┤
+│                                 │  320px side panel           │
+│     canvas-zone (centered)      │  ─ Episode stats            │
+│     aspect-ratio: 1             │  ─ Reward chart             │
+│     max-size fills available    │  ─ Fire size chart          │
+│     space after header+footer   │  ─ Action histogram         │
+│                                 │  ─ Event log                │
+├──────────────────────── 48px botbar ─────────────────────────┤
+│ ⏮ ▶ ⏭ ↺  | ½× 1× 2× 4× 8×  | Seed [42]     kbd hints     │
+└──────────────────────────────────────────────────────────────┘
+```
+
+### Key layout CSS
+```css
+.shell {
+  display: grid;
+  grid-template-rows: 44px 1fr 48px;
+  height: 100vh;
+  min-width: 1280px;
+}
+.content {
+  display: grid;
+  grid-template-columns: 1fr 320px;
+}
+/* Canvas aspect-ratio 1:1, fills available area */
+.canvas-frame {
+  aspect-ratio: 1;
+  max-width:  min(calc(100vh - 140px), calc(100vw - 360px));
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px #cdc7be, 0 20px 60px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.10);
+}
+```
+
+---
+
+## 3. The 16 × 16 Grid
+
+### Cell Types (integer constants)
+| Value | Name         | Description |
+|-------|-------------|-------------|
+| 0     | `FLOOR`      | Walkable tile |
+| 1     | `WALL`       | Impassable solid |
+| 2     | `DOOR_OPEN`  | Open doorway |
+| 3     | `DOOR_CLOSED`| Closed door (blocks movement & slows fire) |
+| 4     | `EXIT`       | Evacuation point |
+| 5     | `OBSTACLE`   | Charred / impassable ruin |
+
+### Grid storage
+```ts
+// Flat array, row-major: index = y * W + x
+const cellGrid = new Array(16 * 16);   // cell types
+const fireGrid = new Float32Array(256); // 0–1 fire intensity
+const smokeGrid = new Float32Array(256);// 0–1 smoke density
+```
+
+### Cell pixel size
+```ts
+const CANVAS_SIZE = 576; // px (the <canvas> width & height)
+const GRID = 16;
+const cellSize = Math.floor(CANVAS_SIZE / GRID); // = 36px per cell
+```
+
+---
+
+## 4. Per-Cell Visual Design
+
+### FLOOR tile
+```
+Background: #302620 (dark warm brown)
+Checkered accent (even x+y): rgba(255,248,230, 0.035)
+Grout lines (top edge + left edge of each cell):
+  color: rgba(0,0,0,0.3), 1px wide
+Inner corner detail:
+  2px inset shadow strip rgba(0,0,0,0.06) at top-left
+```
+
+### WALL tile  *(pseudo-3D isometric look)*
+```
+3D extrusion height: 8px upward
+Front shadow face (bottom): rgba(0,0,0,0.60), height 8px
+Right-side drop shadow: rgba(0,0,0,0.30), width 3px
+Top face: #4f443b
+Top catch-light (top edge 3px): rgba(255,248,232, 0.25)
+Left highlight (2px strip):     rgba(255,248,232, 0.15)
+Mortar texture lines (3 horizontal + vertical splits):
+  color: rgba(0,0,0,0.20), 1px
+```
+
+### OBSTACLE tile  *(charred ruin)*
+```
+3D elevation: 4px upward
+Front face shadow: #0a0705
+Top face: #140d0a
+Diagonal char texture: 45° stripes rgba(0,0,0,0.6) every 5px
+Ember edge glow (1px border): rgba(255,80,0, 0.35)
+```
+
+### EXIT tile
+```
+Base fill: #062210
+Subtle green tint: rgba(34,197,94, 0.07) inset 2px
+Animated outer glow ring:
+  pulse = 0.62 + 0.38 * sin(time * 2.8)
+  shadowBlur: cellSize * 1.1 * pulse
+  strokeStyle: #22c55e  (blocked: #ef4444)
+Center symbol: ⇥ (blocked: ✕) font bold 50% of cellSize
+Corner bracket accents: rgba(74,222,128, 0.75)
+```
+
+### DOOR_CLOSED tile
+```
+Frame: #291508 (2px rails top/bottom, 2px stiles left/right)
+Door body wood: #5c3621
+Three horizontal panel lines: rgba(0,0,0,0.35) at 14%, 50%, 82% height
+Panel inset shadow: rgba(0,0,0,0.13)
+Doorknob: gold circle rgba(210,168,75,0.88), radius 2.5px at right center
+```
+
+### DOOR_OPEN tile
+```
+Dark passage: rgba(0,0,0,0.38)
+Door panel pressed to left: #5c3621, width 4px
+Top frame: #291508, height 2px
+Faint blue passage glow: rgba(125,211,252,0.10)
+```
+
+---
+
+## 5. Fire Rendering (layered radial gradients)
+
+### Fire color ramp (`fireColor(t, alpha)`)
+```
+t=0.00→0.15: black → deep red   #620600 → #ba0600
+t=0.15→0.40: deep red → orange  → #f63600
+t=0.40→0.65: orange → yellow    → #f6b200
+t=0.65→0.85: yellow → bright    → #ffcd29
+t=0.85→1.00: bright → white-hot → #ffffd3
+```
+
+### Per-cell fire: 4 volumetric gradient layers
+```
+Each frame: flicker factor f1 = 0.82 + 0.18*sin(time*9.5 + x*2.7 + y*3.14)
+Wind offsets: windDx = windVec[0] * cellSize * 0.35 * intensity
+
+Layer 1 (bright core):  radius=cs*0.35, alpha=0.98, offset=(dx*0.2, dy*0.2 - cs*0.1)
+Layer 2 (inner flame):  radius=cs*0.65, alpha=0.75, offset=(dx*0.5, dy*0.5)
+Layer 3 (flame body):   radius=cs*0.95, alpha=0.45, offset=(dx, dy)
+Layer 4 (heat glow):    radius=cs*1.40, alpha=0.18, offset=(dx*1.5, dy*1.5)
+
+Blend mode: 'screen' (Canvas2D globalCompositeOperation)
+
+White-hot core when intensity > 0.48:
+  radius=cs*0.17, rgba(255,255,230, (t-0.48)*1.7) → transparent
+```
+
+### Ambient fire glow (normal blend, under everything)
+```
+Applied when fire ≥ 0.28
+Large radial gradient on floor:
+  radius = cellSize * (2.8 + fire * 2.0)
+  center: rgba(255,100,10, fire*0.65)
+  mid:    rgba(200,60,0,   fire*0.325)
+  edge:   transparent
+```
+
+---
+
+## 6. Smoke Rendering
+
+```
+Smoke color: rgb(200, 210, 220)  — bright thick white/grey
+Animated offset:
+  phase[x,y] = random seed per cell (0..2π)
+  dx = sin(time*0.35 + phase) * 1.8
+  dy = cos(time*0.28 + phase + 1.2) * 1.8
+
+Base puff:
+  radialGradient at (center + offset), radius = cellSize * 0.85
+  alpha = min(0.85, smoke * 0.95) → 0 at edge
+
+Secondary density puff (when smoke > 0.3):
+  radius = cellSize * 0.60
+  offset orthogonal to primary: (dy*1.5, dx*1.5)
+  lighter tint rgb(215,225,240), alpha*0.5
+```
+
+---
+
+## 7. Fog of War
+
+```
+Visibility radius (BFS from agent position):
+  smoke ≤ 0.2  → radius 5 cells
+  smoke 0.2–0.5 → radius 3 cells
+  smoke > 0.5  → radius 2 cells
+
+Rendering (drawn over all cells outside visible set):
+  Explored but not currently visible:  rgba(30,36,44, 0.30)  [semi-transparent]
+  Never explored:                      rgba(20,24,30, 0.95)  [nearly opaque]
+```
+
+---
+
+## 8. Agent Rendering — Body
+
+```tsx
+// All coordinates: agentPixelX = agentX * cellSize + cellSize/2
+
+const pulse  = 0.82 + 0.18 * sin(time * 3.6)          // slow body pulse
+const pulse2 = 0.70 + 0.30 * sin(time * 2.1 + 1.0)    // aura pulse
+const r = cellSize * 0.38 * pulse                       // body radius
+
+// Color by health ratio (health/100):
+health > 60% → #0ea5e9  (sky blue)
+health > 30% → #f59e0b  (amber)
+health ≤ 30% → #ef4444  (red)
+evacuated    → #4ade80  (green)
+```
+
+### Drawing order (bottom to top):
+1. **Outer aura** — faint radial gradient, radius `cellSize*0.74*pulse2`
+   - center→edge: transparent → `rgba(56,189,248,0.09)` → transparent
+2. **Drop shadow** — dark ellipse offset (+2, +3), width `r*0.9`, height `r*0.48`
+3. **Glow** — `ctx.shadowBlur = cellSize*0.90`, `shadowColor = agentColor`
+4. **Body sphere** — radial gradient from highlight offset `(-r*0.28, -r*0.28)`:
+   ```
+   stop 0.00: #ffffff          (specular highlight)
+   stop 0.32: #e0f2fe          (bright rim)
+   stop 0.70: agentColor       (body color)
+   stop 1.00: rgba(0,80,160,0.55)
+   ```
+5. **Outline** — `rgba(255,255,255,0.88)`, lineWidth 1.5
+
+---
+
+## 9. Agent Health Arc Ring ← **Key feature**
+
+Drawn around the agent body every frame:
+
+```tsx
+const arcRadius = bodyRadius * 1.65;
+
+// Track (always visible, faint):
+ctx.arc(px, py, arcRadius, 0, Math.PI*2);
+ctx.strokeStyle = 'rgba(255,255,255,0.07)';
+ctx.lineWidth = 2.5;
+
+// Filled arc (health portion, clockwise from top):
+const startAngle = -Math.PI / 2;             // 12 o'clock
+const endAngle   = startAngle + (health/100) * Math.PI * 2;
+ctx.arc(px, py, arcRadius, startAngle, endAngle);
+ctx.lineCap = 'round';
+ctx.lineWidth = 3.0;
+
+// Arc color by health:
+health > 60%: '#4ade80'   (green)
+health > 30%: '#fbbf24'   (amber)
+health ≤ 30%: '#f87171'   (red)
+
+// Arc glow (drawn twice):
+ctx.shadowBlur = 8;
+ctx.shadowColor = arcColor;
+ctx.stroke();   // called twice for glow effect
+```
+
+**In React**, implement as an SVG circle or Canvas arc that updates every animation frame with `requestAnimationFrame`.
+
+---
+
+## 10. Agent Footprint Trail ← **Key feature**
+
+The trail records the last **14 positions** of the agent.
+
+```tsx
+// agentTrail: Array<{px: number, py: number, t: number}>
+// Updated every frame: push new position to front if moved > 1px
+
+// Drawing (older = more transparent, smaller):
+for (let i = 1; i < trail.length; i++) {
+  const alpha = (1 - i / trail.length) * 0.42;           // fades out
+  const radius = Math.max(1.5, (1 - i / trail.length) * cellSize * 0.22);
+  
+  ctx.beginPath();
+  ctx.arc(trail[i].px, trail[i].py, radius, 0, Math.PI * 2);
+  ctx.fillStyle = `rgba(14, 165, 233, ${alpha})`;         // sky-blue trail dots
+  ctx.fill();
+}
+```
+
+**Visual result**: A dotted comet-tail of fading sky-blue circles showing the agent's recent path. Each dot: 42% max opacity, fading to ~3% at the tail. Radius shrinks from `cellSize*0.22` to 1.5px.
+
+**In React**: Maintain a `trailPositions` state array (length ≤ 14). Push current `[x,y]` each step. Render as absolutely-positioned `div` circles or SVG `<circle>` elements on top of the grid.
+
+---
+
+## 11. HUD Overlays (float above canvas)
+
+### Top-Left HUD Card — Health
+```
+Background: rgba(14,10,8, 0.82)
+Border: 1px rgba(255,255,255,0.10)
+Border-radius: 6px
+Padding: 8px 11px
+Backdrop-filter: blur(8px)
+Text color: #e8e0d8
+
+Layout:
+  Row 1: [HP label] [progress bar 80px] [numeric value]
+  Row 2: [status text] [smoke level text right-aligned]
+
+HP bar:
+  bg: rgba(255,255,255,0.08), height 4px, radius 2px
+  fill class "g" → background: #4ade80
+  fill class "m" → background: #fbbf24
+  fill class "c" → background: #f87171 + animation: blink 0.5s infinite alternate
+    @keyframes blink { to { opacity: 0.3 } }
+
+Status text colors:
+  "Good"     → #4ade80
+  "Moderate" → #fbbf24
+  "Low"      → #fb923c
+  "Critical" → #f87171
+
+Health thresholds:
+  > 75 → "Good"
+  > 50 → "Moderate"
+  > 25 → "Low"
+  ≤ 25 → "Critical"
+```
+
+### Top-Right HUD Card — Step Counter
+```
+Same card style, text right-aligned
+
+Step display: "42 / 150" color #93c5fd (light blue)
+Progress bar: 90px wide, 3px high, background #60a5fa
+Metadata line: "medium · small_office" color rgba(168,162,158,0.6)
+```
+
+### Bottom-Center Episode Banner
+```
+Position: absolute, bottom 14px, horizontally centered
+Font: DM Mono 13px, font-weight 500
+
+EVACUATED:     bg rgba(21,128,61,0.80),  border rgba(74,222,128,.3),  text #dcfce7  → "✓ EVACUATED"
+INCAPACITATED: bg rgba(153,27,27,0.80),  border rgba(248,113,113,.3), text #fee2e2  → "✗ INCAPACITATED"
+TIMEOUT:       bg rgba(120,53,15,0.80),  border rgba(251,191,36,.3),  text #fef3c7  → "⏱ TIMEOUT"
+```
+
+### Bottom-Right Wind Rose
+```
+Position: absolute, bottom 10px, right 10px
+Size: 68×68px canvas, circular shape
+Background: rgba(14,10,8,0.80)
+Border: 1px rgba(255,255,255,0.10)
+border-radius: 50%
+
+Compass ring: rgba(120,140,220,0.28), lineWidth 1.5
+Cardinal labels N/E/S/W: rgba(160,172,232,0.55), 10.9px monospace
+Arrow: rgba(251,191,36,0.95), lineWidth 2.5, arrowhead filled
+Center label: current wind direction (e.g. "NE"), bold 12px, rgba(255,210,80,0.95)
+CALM: "CALM" label, rgba(160,182,232,0.75)
+```
+
+---
+
+## 12. Side Panel
+
+```
+Width: 320px
+Background: #ffffff
+Border-left: 1px #e4dfd7
+Scrollbar: 3px wide, thumb #e4dfd7
+```
+
+### Section Header style
+```css
+font-family: DM Mono;
+font-size: 9px;
+font-weight: 500;
+letter-spacing: 0.12em;
+text-transform: uppercase;
+color: #a8a29e;
+```
+
+### Stat Cards (2-column grid)
+```
+2 columns, gap 6px
+Each card: bg #faf9f6, border 1px #e4dfd7, border-radius 6px, padding 8px 10px
+  Label: 10px, color #a8a29e
+  Value: DM Mono 14px 500, color varies:
+    fire  → #c2410c
+    blue  → #1d4ed8
+    amber → #92400e
+```
+
+### Stat values displayed
+```
+Reward:   totalReward.toFixed(2)          class=blue
+Burned:   percentBurned + "%"             class=fire
+Wind:     windDir (e.g. "NE")             class=amber
+Humidity: humidity*100 + "%"
+Spread ρ: pSpread.toFixed(2)             color=fire
+```
+
+### Mini Line Charts
+```
+bg: #faf9f6
+Grid lines: rgba(0,0,0,0.06), 0.5px, 4 horizontal rows
+Line width: 1.8px
+Endpoint dot: 3px radius circle, same color as line
+Value label: 10px monospace, right-aligned above dot
+
+Reward chart:  color #1d4ed8, fill rgba(29,78,216,0.08)
+Fire chart:    color #c2410c, fill rgba(194,65,12,0.08)
+```
+
+### Action Distribution Histogram
+```
+Horizontal bars, labels on left (54px), bars from 60px
+Bar height: floor((height-8) / numActions) - 2
+Bar bg: rgba(0,0,0,0.05)
+
+Colors:
+  move → #1d4ed8
+  door → #c2410c
+  wait → #7c3aed
+  look → #166534
+
+Count label: right of bar, same color
+```
+
+### Event Log
+```
+Each row: flex, gap 7px, DM Mono 10px
+  Step number: 9px, min-width 22px, color #a8a29e
+  Text:        10px, color #6b6460, flex:1, line-height 1.4
+  Reward delta: 9px, min-width 32px, right-aligned
+    positive → #166534
+    negative → #b91c1c
+
+Alarm rows (burnout events):
+  border-left: 2px #c2410c
+  background: rgba(194,65,12,0.08)
+
+Row animation: @keyframes ein { from { opacity:0; translateY(-2px) } }
+Hover: background #f0ede8
+```
+
+---
+
+## 13. Ember Particle System
+
+```
+Max particles: 220
+Spawned per frame from cells with fire ≥ 0.3 (9% chance per cell)
+
+Each particle:
+  position: (cellCenter ± random*3)
+  velocity: upward cone (-π/2 ± 0.75rad), speed 0.4-1.4 + windInfluence*0.7
+  vertical acceleration: -0.012 (rises)
+  horizontal drag: *0.97 per frame
+  life: 1.0 → 0 at decay rate 0.010–0.025/frame
+
+Types (60% ember / 40% spark):
+  ember: rgba(255, 80+100*life, 0,    life*0.92)
+  spark: rgba(255, 210+45*life, 60*life, life*0.92)
+
+Radius = particle.size (1.3–3.7) * life
+```
+
+---
+
+## 14. React Implementation Guide
+
+### Component Tree (suggested)
+```
+<PyreGrid>                   ← 16×16 canvas/div container
+  <GridCanvas>               ← main Canvas2D renderer
+  <AgentLayer>               ← SVG or div overlay for agent + trail
+    <FootprintTrail />       ← last 14 positions as fading dots
+    <AgentBody />            ← pulsing sphere
+    <HealthArcRing />        ← SVG arc ring around agent
+  <HUDOverlay position="tl"> ← health bar HUD card
+  <HUDOverlay position="tr"> ← step counter HUD card
+  <WindRose />               ← mini canvas, bottom-right
+  <EpisodeBanner />          ← bottom-center banner
+```
+
+### State shape
+```ts
+interface AgentState {
+  x: number;                  // grid column [0..15]
+  y: number;                  // grid row [0..15]
+  health: number;             // 0–100
+  alive: boolean;
+  evacuated: boolean;
+  trail: { x: number; y: number }[];  // last 14 positions, [0]=newest
+}
+
+interface GridState {
+  cellGrid: number[];         // 256 ints — cell types
+  fireGrid: Float32Array;     // 256 floats — 0..1
+  smokeGrid: Float32Array;    // 256 floats — 0..1
+  visibleCells: Set<string>;  // "x,y" keys
+  exploreSet: Set<string>;    // "x,y" keys
+}
+```
+
+### Health arc in React (SVG approach)
+```tsx
+const CELL = 36;  // px
+
+function HealthArcRing({ x, y, health }: { x: number; y: number; health: number }) {
+  const cx = x * CELL + CELL / 2;
+  const cy = y * CELL + CELL / 2;
+  const bodyR = CELL * 0.38;
+  const arcR  = bodyR * 1.65;
+  const circumference = 2 * Math.PI * arcR;
+  const filled = (health / 100) * circumference;
+  
+  const color = health > 60 ? '#4ade80' : health > 30 ? '#fbbf24' : '#f87171';
+
+  return (
+    <svg style={{ position:'absolute', top:0, left:0, pointerEvents:'none' }}
+         width={16*CELL} height={16*CELL}>
+      {/* Track */}
+      <circle cx={cx} cy={cy} r={arcR}
+        fill="none" stroke="rgba(255,255,255,0.07)" strokeWidth={2.5} />
+      {/* Arc — starts at 12 o'clock, clockwise */}
+      <circle cx={cx} cy={cy} r={arcR}
+        fill="none"
+        stroke={color} strokeWidth={3}
+        strokeLinecap="round"
+        strokeDasharray={`${filled} ${circumference}`}
+        transform={`rotate(-90, ${cx}, ${cy})`}
+        style={{ filter: `drop-shadow(0 0 4px ${color})`, transition: 'stroke-dasharray 0.3s' }}
+      />
+    </svg>
+  );
+}
+```
+
+### Footprint trail in React (SVG approach)
+```tsx
+function FootprintTrail({ trail }: { trail: { x: number; y: number }[] }) {
+  const CELL = 36;
+  return (
+    <svg style={{ position:'absolute', top:0, left:0, pointerEvents:'none' }}
+         width={16*CELL} height={16*CELL}>
+      {trail.slice(1).map((pos, i) => {
+        const total = trail.length;
+        const alpha = ((total - 1 - i) / total) * 0.42;
+        const radius = Math.max(1.5, ((total - 1 - i) / total) * CELL * 0.22);
+        const cx = pos.x * CELL + CELL / 2;
+        const cy = pos.y * CELL + CELL / 2;
+        return (
+          <circle key={i} cx={cx} cy={cy} r={radius}
+            fill={`rgba(14,165,233,${alpha.toFixed(3)})`} />
+        );
+      })}
+    </svg>
+  );
+}
+```
+
+### Trail update logic
+```ts
+const MAX_TRAIL = 14;
+
+function updateTrail(
+  trail: { x: number; y: number }[],
+  newX: number,
+  newY: number
+): { x: number; y: number }[] {
+  const last = trail[0];
+  if (last && last.x === newX && last.y === newY) return trail;
+  return [{ x: newX, y: newY }, ...trail].slice(0, MAX_TRAIL);
+}
+```
+
+### Animation loop pattern
+```tsx
+useEffect(() => {
+  let raf: number;
+  const loop = () => {
+    setTime(t => t + 0.016);  // drives fire flicker, smoke drift, pulse
+    raf = requestAnimationFrame(loop);
+  };
+  raf = requestAnimationFrame(loop);
+  return () => cancelAnimationFrame(raf);
+}, []);
+```
+
+---
+
+## 15. Fire & Smoke Constants
+
+```ts
+const FIRE_IGNITION   = 0.1;   // newly ignited
+const FIRE_BURNING    = 0.3;   // actively spreading
+const FIRE_GAIN       = 0.15;  // per-step intensity increase
+const BURNOUT_TICKS   = 5;     // steps at max before becoming obstacle
+const SMOKE_SPREAD    = 0.20;  // fraction diffused per step
+const SMOKE_DOOR_FACT = 0.40;  // doors slow smoke
+const SMOKE_DECAY     = 0.02;  // per-step natural decay
+const EXIT_BLOCK_FIRE = 0.50;  // fire level that blocks an exit
+```
+
+---
+
+## 16. Tile Grid Overlay
+
+A very subtle grid drawn on top of all layers:
+```
+strokeStyle: rgba(255,255,255,0.04)
+lineWidth: 1
+Pattern: full vertical + horizontal lines every cellSize px
+```
+
+---
+
+## 17. Summary — What to Build in React
+
+| Feature | Implementation |
+|---------|---------------|
+| 16×16 grid | CSS grid or Canvas, 36px cells (576px total) |
+| Cell textures | Canvas2D `fillRect` with per-type colors |
+| Fire effect | Radial gradients, 'screen' blend mode, animated `t` |
+| Smoke drift | Radial gradient circles with animated offsets |
+| Fog of war | Semi-transparent overlays driven by BFS visibility set |
+| **Agent body** | Pulsing SVG circle with radial gradient |
+| **Health arc ring** | SVG `<circle>` with `strokeDasharray` trick, color-coded |
+| **Footprint trail** | SVG `<circle>` array, fade + shrink by index |
+| HUD cards | `position:absolute` divs with `backdrop-filter: blur` |
+| HP bar | `width` transition, color class switch (green/amber/red/blink) |
+| Wind rose | Small Canvas2D or SVG compass |
+| Mini charts | Canvas2D line chart with fill area |
+| Event log | Scrolling list, alarm rows with fire border |

demo.html

@@ -0,0 +1,1414 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<title>Pyre — Crisis Navigation Demo</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --s0:#f5f2ed; --s1:#ffffff; --s2:#faf9f6; --s3:#f0ede8;
+  --bd:#e4dfd7; --bd2:#cdc7be;
+  --t1:#1c1712; --t2:#6b6460; --t3:#a8a29e;
+  --fire:#c2410c;  --fire2:rgba(194,65,12,0.08);
+  --blue:#1d4ed8;  --blue2:rgba(29,78,216,0.08);
+  --green:#166534; --green2:rgba(22,101,52,0.08);
+  --amber:#92400e; --amber2:rgba(146,64,14,0.08);
+  --red:#b91c1c;   --red2:rgba(185,28,28,0.08);
+  --mono:'DM Mono','JetBrains Mono',monospace;
+  --sans:'DM Sans','Inter',system-ui,sans-serif;
+  --r:6px;
+}
+
+html, body { height:100%; background:var(--s0); color:var(--t1); font-family:var(--sans); overflow:hidden; font-size:13px; }
+
+/* ── Shell ── */
+.shell { display:grid; grid-template-rows:44px 1fr 48px; height:100vh; min-width:1100px; }
+
+/* ── Topbar ── */
+.topbar {
+  background:var(--s1); border-bottom:1px solid var(--bd);
+  display:flex; align-items:center; padding:0 20px; gap:16px;
+}
+.brand { display:flex; align-items:center; gap:9px; }
+.brand-icon {
+  width:28px; height:28px; border-radius:6px;
+  background:var(--fire); display:flex; align-items:center; justify-content:center;
+  font-size:14px; flex-shrink:0;
+}
+.brand-name { font-family:var(--mono); font-size:14px; font-weight:500; letter-spacing:.05em; }
+.brand-sep  { width:1px; height:18px; background:var(--bd); }
+.brand-sub  { font-size:11px; color:var(--t3); }
+.topbar-sep { width:1px; height:20px; background:var(--bd); }
+.topbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
+
+.seg { display:flex; border:1px solid var(--bd); border-radius:6px; overflow:hidden; background:var(--s2); }
+.seg button {
+  background:none; border:none; padding:5px 11px;
+  font-family:var(--mono); font-size:11px; font-weight:500; color:var(--t2);
+  cursor:pointer; letter-spacing:.03em; transition:background .1s,color .1s;
+}
+.seg button:hover { background:var(--s3); color:var(--t1); }
+.seg button.on { background:var(--s1); color:var(--t1); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
+.seg button.on.fire { color:var(--fire); }
+.seg button + button { border-left:1px solid var(--bd); }
+
+.live-chip {
+  font-family:var(--mono); font-size:10px; font-weight:500;
+  padding:3px 10px; border-radius:12px; border:1px solid; letter-spacing:.05em;
+}
+.live-chip.demo   { border-color:var(--bd2); color:var(--t2); }
+.live-chip.online { border-color:rgba(22,101,52,.4); color:var(--green); background:var(--green2); }
+
+/* ── Content ── */
+.content { display:grid; grid-template-columns:1fr 300px; overflow:hidden; min-height:0; }
+
+/* ── Canvas zone ── */
+.canvas-zone {
+  display:flex; align-items:center; justify-content:center;
+  background:var(--s0); padding:20px; position:relative; overflow:hidden;
+}
+.canvas-frame {
+  position:relative; border-radius:10px; overflow:hidden;
+  box-shadow:0 0 0 1px var(--bd2),0 24px 64px rgba(0,0,0,.20),0 6px 16px rgba(0,0,0,.12);
+  max-width:min(calc(100vh - 140px), calc(100vw - 340px));
+  max-height:calc(100vh - 140px);
+  aspect-ratio:1;
+}
+#mainCanvas { display:block; width:100%; height:100%; }
+
+/* ── HUD overlays ── */
+.hud-tl, .hud-tr { position:absolute; top:12px; pointer-events:none; z-index:2; }
+.hud-tl { left:12px; }
+.hud-tr { right:12px; }
+.hud-card {
+  background:rgba(12,9,7,0.84);
+  border:1px solid rgba(255,255,255,0.10);
+  border-radius:8px; padding:9px 12px;
+  backdrop-filter:blur(10px); color:#e8e0d8;
+  min-width:140px;
+}
+.hud-row { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
+.hud-row:last-child { margin-bottom:0; }
+.hlbl { font-family:var(--mono); font-size:9px; color:rgba(168,162,158,.8); letter-spacing:.10em; }
+.hval { font-family:var(--mono); font-size:13px; font-weight:500; color:#f0e8e0; }
+
+.hbar-bg   { width:84px; height:5px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; flex:1; }
+.hbar-fill { height:100%; border-radius:3px; transition:width .35s,background .35s; }
+.hbar-fill.g { background:#4ade80; }
+.hbar-fill.m { background:#fbbf24; }
+.hbar-fill.c { background:#f87171; animation:hblink .5s infinite alternate; }
+@keyframes hblink { to { opacity:.25 } }
+
+.hstatus { font-family:var(--mono); font-size:9px; }
+.hstatus.good     { color:#4ade80; }
+.hstatus.moderate { color:#fbbf24; }
+.hstatus.low      { color:#fb923c; }
+.hstatus.critical { color:#f87171; }
+
+.step-val { font-family:var(--mono); font-size:13px; font-weight:500; color:#93c5fd; }
+.sbar-bg  { width:100%; height:3px; background:rgba(255,255,255,.07); border-radius:2px; overflow:hidden; margin-top:5px; }
+.sbar-fill { height:100%; border-radius:2px; background:#60a5fa; transition:width .35s; }
+.step-meta { font-family:var(--mono); font-size:9px; color:rgba(168,162,158,.55); margin-top:3px; }
+
+#epBanner {
+  display:none; position:absolute;
+  bottom:14px; left:50%; transform:translateX(-50%);
+  font-family:var(--mono); font-size:13px; font-weight:500;
+  letter-spacing:.04em; padding:10px 22px;
+  border-radius:8px; backdrop-filter:blur(10px);
+  pointer-events:none; white-space:nowrap; z-index:3;
+}
+#epBanner.ok  { background:rgba(21,128,61,.82);  border:1px solid rgba(74,222,128,.3);  color:#dcfce7; }
+#epBanner.bad { background:rgba(153,27,27,.82);   border:1px solid rgba(248,113,113,.3); color:#fee2e2; }
+#epBanner.tmo { background:rgba(120,53,15,.82);   border:1px solid rgba(251,191,36,.3);  color:#fef3c7; }
+
+/* ── Legend badge ── */
+.legend {
+  position:absolute; bottom:12px; left:12px; z-index:2; pointer-events:none;
+  display:flex; flex-direction:column; gap:4px;
+}
+.leg-row { display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9px; color:rgba(220,210,200,.7); }
+.leg-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
+
+/* ── Side panel ── */
+.side {
+  background:var(--s1); border-left:1px solid var(--bd);
+  overflow-y:auto; overflow-x:hidden;
+  scrollbar-width:thin; scrollbar-color:var(--bd) transparent;
+  display:flex; flex-direction:column;
+}
+::-webkit-scrollbar { width:3px; }
+::-webkit-scrollbar-thumb { background:var(--bd); border-radius:2px; }
+
+.side-sec { padding:14px 16px; border-bottom:1px solid var(--bd); }
+.side-sec:last-child { border-bottom:none; flex:1; min-height:0; display:flex; flex-direction:column; }
+.sec-hd {
+  font-family:var(--mono); font-size:9px; font-weight:500;
+  letter-spacing:.12em; text-transform:uppercase; color:var(--t3);
+  margin-bottom:10px; display:flex; align-items:center; justify-content:space-between;
+}
+
+.sg { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
+.sc { background:var(--s2); border:1px solid var(--bd); border-radius:var(--r); padding:8px 10px; }
+.sc-l { font-size:10px; color:var(--t3); margin-bottom:2px; }
+.sc-v { font-family:var(--mono); font-size:14px; font-weight:500; color:var(--t1); }
+.sc-v.fire  { color:var(--fire); }
+.sc-v.blue  { color:var(--blue); }
+.sc-v.amber { color:var(--amber); }
+
+.meta-row {
+  display:flex; justify-content:space-between; align-items:center;
+  margin-top:8px; padding-top:8px; border-top:1px solid var(--bd); font-size:11px;
+}
+
+/* Health legend bar */
+.health-legend { display:flex; gap:3px; margin-top:8px; }
+.hl-seg { height:4px; border-radius:2px; flex:1; }
+.hl-seg.g { background:#4ade80; }
+.hl-seg.m { background:#fbbf24; }
+.hl-seg.l { background:#fb923c; }
+.hl-seg.c { background:#f87171; }
+
+/* Sparkline chart */
+.chart-wrap { background:var(--s2); border:1px solid var(--bd); border-radius:var(--r); overflow:hidden; margin-top:6px; }
+.chart-wrap canvas { display:block; width:100% !important; }
+
+/* Event log */
+.elog { display:flex; flex-direction:column; gap:1px; overflow-y:auto; flex:1; }
+.erow {
+  display:flex; align-items:baseline; gap:7px;
+  padding:3px 6px; border-radius:4px;
+  font-family:var(--mono); font-size:10px;
+  border-left:2px solid transparent;
+  animation:ein .15s ease;
+}
+@keyframes ein { from { opacity:0; transform:translateY(-2px) } }
+.erow:hover { background:var(--s3); }
+.erow.alarm { border-left-color:var(--fire); background:var(--fire2); }
+.estep { color:var(--t3); min-width:22px; font-size:9px; }
+.etext { color:var(--t2); flex:1; line-height:1.4; }
+.erwd { font-size:9px; min-width:32px; text-align:right; }
+.erwd.p { color:var(--green); }
+.erwd.n { color:var(--red); }
+
+/* ── Bottom bar ── */
+.botbar {
+  background:var(--s1); border-top:1px solid var(--bd);
+  display:flex; align-items:center; padding:0 16px; gap:6px;
+}
+.bsep { width:1px; height:20px; background:var(--bd); margin:0 4px; }
+.icn-btn {
+  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
+  background:var(--s2); border:1px solid var(--bd); border-radius:var(--r);
+  color:var(--t2); font-size:12px; cursor:pointer;
+  transition:background .1s,color .1s,border-color .1s;
+}
+.icn-btn:hover { background:var(--s3); color:var(--t1); border-color:var(--bd2); }
+.icn-btn:active { transform:scale(.94); }
+.icn-btn.play { background:var(--fire2); border-color:rgba(194,65,12,.3); color:var(--fire); }
+.icn-btn.play:hover { background:rgba(194,65,12,.14); }
+
+.seed-wrap { display:flex; align-items:center; gap:6px; }
+.seed-lbl  { font-size:11px; color:var(--t3); }
+#seedInput {
+  width:60px; background:var(--s2); border:1px solid var(--bd);
+  color:var(--t1); font-family:var(--mono); font-size:11px;
+  padding:4px 8px; border-radius:var(--r); outline:none;
+}
+#seedInput:focus { border-color:var(--bd2); }
+.keys { margin-left:auto; display:flex; gap:12px; align-items:center; font-size:10px; color:var(--t3); }
+.keys kbd {
+  background:var(--s2); border:1px solid var(--bd2); border-radius:3px;
+  padding:1px 5px; font-family:var(--mono); font-size:10px; color:var(--t2);
+}
+
+/* Toast */
+#toast {
+  position:fixed; bottom:58px; left:50%;
+  transform:translateX(-50%) translateY(6px);
+  background:var(--t1); color:var(--s0);
+  font-family:var(--mono); font-size:11px;
+  padding:7px 16px; border-radius:20px;
+  opacity:0; pointer-events:none; z-index:99;
+  transition:opacity .22s,transform .22s;
+}
+#toast.up { opacity:1; transform:translateX(-50%) translateY(0); }
+</style>
+</head>
+<body>
+<div class="shell">
+
+  <!-- ── Topbar ── -->
+  <header class="topbar">
+    <div class="brand">
+      <div class="brand-icon">🔥</div>
+      <span class="brand-name">Pyre</span>
+      <div class="brand-sep"></div>
+      <span class="brand-sub">Crisis Navigation Environment</span>
+    </div>
+    <div class="topbar-sep"></div>
+    <div class="seg">
+      <button class="diff-btn on fire" data-diff="easy">Easy</button>
+      <button class="diff-btn" data-diff="medium">Medium</button>
+      <button class="diff-btn" data-diff="hard">Hard</button>
+    </div>
+    <div class="topbar-right">
+      <span id="liveChip" class="live-chip demo">Demo Mode</span>
+    </div>
+  </header>
+
+  <!-- ── Content ── -->
+  <div class="content">
+
+    <!-- Canvas zone -->
+    <div class="canvas-zone">
+      <div class="canvas-frame">
+        <canvas id="mainCanvas" width="576" height="576"></canvas>
+
+        <!-- Top-left HUD: Health -->
+        <div class="hud-tl">
+          <div class="hud-card">
+            <div class="hud-row">
+              <span class="hlbl">HP</span>
+              <div class="hbar-bg"><div id="healthBar" class="hbar-fill g" style="width:100%"></div></div>
+              <span id="healthVal" class="hval">100</span>
+            </div>
+            <div class="hud-row" style="gap:10px">
+              <span id="healthStatus" class="hstatus good">Good</span>
+              <span id="smokeTag" style="font-family:var(--mono);font-size:9px;color:rgba(168,162,158,.6);margin-left:auto">smoke: clear</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Top-right HUD: Steps -->
+        <div class="hud-tr">
+          <div class="hud-card" style="text-align:right">
+            <div class="hud-row" style="justify-content:flex-end">
+              <span class="hlbl">STEP</span>
+              <span id="stepCount" class="step-val">0 / 200</span>
+            </div>
+            <div class="sbar-bg"><div id="stepBar" class="sbar-fill" style="width:0%"></div></div>
+            <div id="diffTag" class="step-meta">easy · small_office</div>
+          </div>
+        </div>
+
+        <!-- Episode end banner -->
+        <div id="epBanner"></div>
+
+        <!-- Legend -->
+        <div class="legend">
+          <div class="leg-row"><div class="leg-dot" style="background:#0ea5e9"></div>Agent (human)</div>
+          <div class="leg-row"><div class="leg-dot" style="background:rgba(2,132,199,.45)"></div>Footprint trail</div>
+          <div class="leg-row"><div class="leg-dot" style="background:#c2410c"></div>Fire</div>
+          <div class="leg-row"><div class="leg-dot" style="background:rgba(200,210,220,.7)"></div>Smoke</div>
+          <div class="leg-row"><div class="leg-dot" style="background:#22c55e"></div>Exit</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Side panel -->
+    <aside class="side">
+
+      <div class="side-sec">
+        <div class="sec-hd">Agent Status</div>
+        <div class="sg">
+          <div class="sc"><div class="sc-l">Health</div><div id="sHealthVal" class="sc-v blue">100</div></div>
+          <div class="sc"><div class="sc-l">Status</div><div id="sStatusVal" class="sc-v">Good</div></div>
+          <div class="sc"><div class="sc-l">Smoke</div><div id="sSmokeVal" class="sc-v">clear</div></div>
+          <div class="sc"><div class="sc-l">Reward</div><div id="sRewardVal" class="sc-v blue">0.00</div></div>
+        </div>
+        <div class="health-legend">
+          <div class="hl-seg g" title="Good (>75)"></div>
+          <div class="hl-seg m" title="Moderate (>50)"></div>
+          <div class="hl-seg l" title="Low (>25)"></div>
+          <div class="hl-seg c" title="Critical (≤25)"></div>
+        </div>
+      </div>
+
+      <div class="side-sec">
+        <div class="sec-hd">
+          Episode
+          <span id="sBurnVal" style="color:var(--fire);font-family:var(--mono);font-size:10px">0% burned</span>
+        </div>
+        <div class="sg">
+          <div class="sc"><div class="sc-l">Fire cells</div><div id="sFireVal" class="sc-v fire">0</div></div>
+          <div class="sc"><div class="sc-l">Step</div><div id="sStepVal" class="sc-v">0</div></div>
+          <div class="sc"><div class="sc-l">Wind</div><div id="sWindVal" class="sc-v amber">CALM</div></div>
+          <div class="sc"><div class="sc-l">Spread ρ</div><div id="sSpreadVal" class="sc-v fire">0.10</div></div>
+        </div>
+        <div class="meta-row">
+          <span style="color:var(--t3);font-size:11px">Exits blocked</span>
+          <span id="sExitBlocked" style="font-family:var(--mono);font-size:11px;color:var(--green)">0 / 2</span>
+        </div>
+      </div>
+
+      <div class="side-sec">
+        <div class="sec-hd">
+          Cumulative Reward
+          <span id="sRewardLast" style="color:var(--t2);font-size:10px">—</span>
+        </div>
+        <div class="chart-wrap" style="height:50px">
+          <canvas id="rewardChart" height="50"></canvas>
+        </div>
+      </div>
+
+      <div class="side-sec">
+        <div class="sec-hd">
+          Active Fire
+          <span id="sFireLast" style="color:var(--t2);font-size:10px">0 cells</span>
+        </div>
+        <div class="chart-wrap" style="height:44px">
+          <canvas id="fireChart" height="44"></canvas>
+        </div>
+      </div>
+
+      <div class="side-sec">
+        <div class="sec-hd">Event Log</div>
+        <div id="eventLog" class="elog">
+          <div class="erow">
+            <span class="estep">000</span>
+            <span class="etext">Episode started. Assess surroundings.</span>
+          </div>
+        </div>
+      </div>
+
+    </aside>
+  </div>
+
+  <!-- ── Bottom bar ── -->
+  <footer class="botbar">
+    <button id="resetBtn" class="icn-btn" title="Reset (R)">↺</button>
+    <button id="playBtn"  class="icn-btn play" title="Play / Pause (Space)">▶</button>
+    <button id="stepBtn"  class="icn-btn" title="Step once (→)">⏭</button>
+    <div class="bsep"></div>
+    <div class="seg">
+      <button class="spd-btn" data-s="0.5">½×</button>
+      <button class="spd-btn on" data-s="1">1×</button>
+      <button class="spd-btn" data-s="2">2×</button>
+      <button class="spd-btn" data-s="4">4×</button>
+    </div>
+    <div class="bsep"></div>
+    <div class="seed-wrap">
+      <span class="seed-lbl">Seed</span>
+      <input id="seedInput" type="number" value="42" min="0" max="9999">
+    </div>
+    <div class="keys">
+      <span><kbd>Space</kbd> play</span>
+      <span><kbd>→</kbd> step</span>
+      <span><kbd>R</kbd> reset</span>
+    </div>
+  </footer>
+</div>
+
+<div id="toast"></div>
+
+<script>
+'use strict';
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+const FLOOR=0, WALL=1, DOOR_OPEN=2, DOOR_CLOSED=3, EXIT=4, OBSTACLE=5;
+const FIRE_IGNITION=0.1, FIRE_BURNING=0.3, FIRE_GAIN=0.15, BURNOUT_TICKS=5;
+const SMOKE_SPREAD=0.20, SMOKE_DECAY=0.025, SMOKE_DOOR=0.4;
+const EXIT_BLOCK=0.50;
+const CARDINAL=[[0,-1],[0,1],[-1,0],[1,0]];
+const WIND_DIRS={N:[0,-1],NE:[1,-1],E:[1,0],SE:[1,1],S:[0,1],SW:[-1,1],W:[-1,0],NW:[-1,-1],CALM:[0,0]};
+
+const DIFFICULTY = {
+  easy:   { nSrc:[1,1], spread:[.10,.20], humid:[.30,.50], winds:['CALM'],          maxSteps:200 },
+  medium: { nSrc:[2,3], spread:[.15,.35], humid:[.15,.40], winds:Object.keys(WIND_DIRS), maxSteps:150 },
+  hard:   { nSrc:[3,4], spread:[.30,.50], humid:[.05,.20], winds:['N','NE','E','SE','S','SW','W','NW'], maxSteps:100 },
+};
+
+// ── Seeded PRNG (mulberry32) ──────────────────────────────────────────────────
+function makePRNG(seed) {
+  let s = seed >>> 0;
+  return () => {
+    s += 0x6D2B79F5;
+    let t = s;
+    t = Math.imul(t ^ t>>>15, t|1);
+    t ^= t + Math.imul(t^t>>>7, t|61);
+    return ((t^t>>>14)>>>0) / 4294967296;
+  };
+}
+
+// ── Fire color ramp ───────────────────────────────────────────────────────────
+function fireColor(t, a=1) {
+  t = Math.max(0, Math.min(1, t));
+  let r,g,b;
+  if      (t<.15){ const s=t/.15;        r=~~(98+88*s);  g=~~(6*s);      b=0; }
+  else if (t<.40){ const s=(t-.15)/.25;  r=~~(186+60*s); g=~~(6+60*s);   b=0; }
+  else if (t<.65){ const s=(t-.40)/.25;  r=~~(246+9*s);  g=~~(66+112*s); b=~~(9*s); }
+  else if (t<.85){ const s=(t-.65)/.20;  r=255;          g=~~(178+57*s); b=~~(9+32*s); }
+  else            { const s=(t-.85)/.15; r=255;          g=~~(235+20*s); b=~~(41+214*s); }
+  return `rgba(${r},${g},${b},${a})`;
+}
+
+// ── Floor plan: small office 16×16 ───────────────────────────────────────────
+const LAYOUT = [
+  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+  [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1],
+  [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1],
+  [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1],
+  [1,1,2,1,1,1,2,1,1,1,2,1,1,1,2,1],
+  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+  [4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4],
+  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+  [1,1,2,1,1,1,2,1,1,1,2,1,1,1,2,1],
+  [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1],
+  [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1],
+  [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1],
+  [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1],
+  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+].flat();
+const W=16, H=16;
+const EXITS=[[0,6],[15,8]];
+const DOORS=[[2,4],[6,4],[10,4],[14,4],[2,10],[6,10],[10,10],[14,10]];
+
+// ── BFS utilities ─────────────────────────────────────────────────────────────
+function bfsDist(ax, ay, exits, cellGrid) {
+  const targets = exits.filter(([ex,ey])=>cellGrid[ey*W+ex]!==OBSTACLE);
+  if (!targets.length) return 999;
+  const vis=new Set([`${ax},${ay}`]), q=[[ax,ay,0]];
+  while (q.length) {
+    const [x,y,d]=q.shift();
+    for (const [dx,dy] of CARDINAL) {
+      const nx=x+dx, ny=y+dy;
+      if (nx<0||nx>=W||ny<0||ny>=H) continue;
+      const k=`${nx},${ny}`;
+      if (vis.has(k)) continue;
+      const ct=cellGrid[ny*W+nx];
+      if (ct===WALL||ct===OBSTACLE||ct===DOOR_CLOSED) continue;
+      if (targets.some(([ex,ey])=>ex===nx&&ey===ny)) return d+1;
+      vis.add(k); q.push([nx,ny,d+1]);
+    }
+  }
+  return 999;
+}
+
+function computeVisible(ax, ay, cellGrid, smokeGrid) {
+  const smoke=smokeGrid[ay*W+ax];
+  const radius=smoke>.5?2:smoke>.2?3:5;
+  const vis=new Set([`${ax},${ay}`]), q=[[ax,ay,0]], seen=new Set([`${ax},${ay}`]);
+  while (q.length) {
+    const [x,y,d]=q.shift();
+    if (d>=radius) continue;
+    for (const [dx,dy] of CARDINAL) {
+      const nx=x+dx, ny=y+dy;
+      if (nx<0||nx>=W||ny<0||ny>=H) continue;
+      const k=`${nx},${ny}`;
+      if (seen.has(k)) continue;
+      seen.add(k);
+      const ct=cellGrid[ny*W+nx];
+      if (ct===WALL) continue;
+      vis.add(k); q.push([nx,ny,d+1]);
+    }
+  }
+  return vis;
+}
+
+// ── Simulation state ──────────────────────────────────────────────────────────
+let state = null;
+
+function buildState(difficulty='easy', seed=42) {
+  const p = DIFFICULTY[difficulty];
+  const rng = makePRNG(seed);
+
+  const cellGrid = LAYOUT.slice();
+  // Randomly close some doors
+  const doorReg = {};
+  DOORS.forEach((d,i) => {
+    doorReg[`door_${i+1}`] = d;
+    if (rng()<0.3) cellGrid[d[1]*W+d[0]] = DOOR_CLOSED;
+  });
+
+  const nSrc  = Math.round(p.nSrc[0] + rng()*(p.nSrc[1]-p.nSrc[0]));
+  const pSpread = p.spread[0] + rng()*(p.spread[1]-p.spread[0]);
+  const humidity = p.humid[0] + rng()*(p.humid[1]-p.humid[0]);
+  const windDir  = p.winds[Math.floor(rng()*p.winds.length)];
+  const wv = WIND_DIRS[windDir]||[0,0];
+
+  const fireGrid  = new Float32Array(W*H);
+  const smokeGrid = new Float32Array(W*H);
+  const burnTimers= new Int32Array(W*H);
+
+  // Spawn agent in corridor
+  const spawns=[];
+  for(let y=5;y<=9;y++) for(let x=1;x<=14;x++) if(cellGrid[y*W+x]===FLOOR) spawns.push([x,y]);
+  const sp = spawns[Math.floor(rng()*spawns.length)];
+
+  // Place fire far from agent and exits
+  const candidates=[];
+  for(let y=0;y<H;y++) for(let x=0;x<W;x++) {
+    if(cellGrid[y*W+x]===FLOOR) {
+      const farAgent=Math.abs(x-sp[0])+Math.abs(y-sp[1])>=5;
+      const farExits=EXITS.every(([ex,ey])=>Math.abs(x-ex)+Math.abs(y-ey)>=4);
+      if(farAgent&&farExits) candidates.push([x,y]);
+    }
+  }
+  candidates.sort(()=>rng()-.5);
+  for(let i=0;i<Math.min(nSrc,candidates.length);i++) {
+    const [fx,fy]=candidates[i];
+    fireGrid[fy*W+fx]=FIRE_IGNITION;
+  }
+
+  const visible = computeVisible(sp[0],sp[1],cellGrid,smokeGrid);
+  const explore  = new Set(visible);
+
+  return {
+    cellGrid, fireGrid, smokeGrid, burnTimers, doorReg,
+    pSpread, humidity, windDir, wx:wv[0], wy:wv[1],
+    effectiveSpread: pSpread * Math.max(0, 1-humidity),
+    maxSteps: p.maxSteps, stepCount:0,
+    agentX:sp[0], agentY:sp[1],
+    agentHealth:100, agentAlive:true, agentEvacuated:false,
+    totalReward:0, lastReward:0,
+    rewardHistory:[], fireSizeHistory:[],
+    eventLog:[{step:0,text:'Episode started. Assess your surroundings.',reward:0}],
+    visibleCells:visible, exploreSet:explore,
+    difficulty, seed,
+    rng2: makePRNG(seed+1),
+  };
+}
+
+// ── Fire simulation step ──────────────────────────────────────────────────────
+function simStep(s) {
+  const {cellGrid,fireGrid,smokeGrid,burnTimers,pSpread,effectiveSpread,wx,wy,rng2} = s;
+  const ignite = new Uint8Array(W*H);
+  const burned = [];
+
+  for(let y=0;y<H;y++) for(let x=0;x<W;x++) {
+    const i=y*W+x;
+    if(fireGrid[i]<FIRE_BURNING) continue;
+    for(const [dx,dy] of CARDINAL) {
+      const nx=x+dx, ny=y+dy;
+      if(nx<0||nx>=W||ny<0||ny>=H) continue;
+      const ni=ny*W+nx, nct=cellGrid[ni];
+      if(nct===WALL||nct===OBSTACLE||fireGrid[ni]>0) continue;
+      let p = nct===DOOR_CLOSED ? effectiveSpread*.15 : effectiveSpread;
+      const dot=dx*wx+dy*wy;
+      p *= (dot>0?2.0:dot<0?0.5:1.0);
+      if(rng2()<Math.min(1,p)) ignite[ni]=1;
+    }
+  }
+
+  const nf=fireGrid.slice(), nt=burnTimers.slice();
+  for(let y=0;y<H;y++) for(let x=0;x<W;x++) {
+    const i=y*W+x, ct=cellGrid[i];
+    if(ct===WALL||ct===OBSTACLE) continue;
+    if(fireGrid[i]>0) {
+      nf[i]=Math.min(1,fireGrid[i]+FIRE_GAIN);
+      if(fireGrid[i]>=FIRE_BURNING) nt[i]++;
+      if(nt[i]>=BURNOUT_TICKS&&nf[i]>=1) {
+        cellGrid[i]=OBSTACLE; nf[i]=0; nt[i]=0; burned.push([x,y]);
+      }
+    } else if(ignite[i]) { nf[i]=FIRE_IGNITION; nt[i]=0; }
+  }
+  for(let i=0;i<W*H;i++) { fireGrid[i]=nf[i]; burnTimers[i]=nt[i]; }
+
+  // Smoke
+  const ns=smokeGrid.slice();
+  for(let y=0;y<H;y++) for(let x=0;x<W;x++) {
+    const i=y*W+x, ct=cellGrid[i];
+    if(ct===WALL||ct===OBSTACLE) continue;
+    if(fireGrid[i]>=FIRE_BURNING) ns[i]=Math.min(1,smokeGrid[i]+0.3);
+    for(const [dx,dy] of CARDINAL) {
+      const nx=x+dx, ny=y+dy;
+      if(nx<0||nx>=W||ny<0||ny>=H) continue;
+      const ni=ny*W+nx, nct=cellGrid[ni];
+      if(nct===WALL||nct===OBSTACLE) continue;
+      const diff=smokeGrid[i]-smokeGrid[ni];
+      if(diff<=0) continue;
+      let rate=SMOKE_SPREAD;
+      if(nct===DOOR_CLOSED) rate*=SMOKE_DOOR;
+      ns[ni]=Math.min(1,ns[ni]+Math.min(diff*rate,diff*.5));
+    }
+    ns[i]=Math.max(0,ns[i]-SMOKE_DECAY);
+  }
+  for(let i=0;i<W*H;i++) smokeGrid[i]=ns[i];
+  return burned;
+}
+
+// ── Demo agent (BFS toward exit) ──────────────────────────────────────────────
+function agentAct(s) {
+  const {agentX:ax,agentY:ay,cellGrid,fireGrid,doorReg} = s;
+  const dirs=['north','south','east','west'];
+  const deltas={north:[0,-1],south:[0,1],east:[1,0],west:[-1,0]};
+
+  // Check if adjacent to closed door
+  for(const dir of dirs) {
+    const [dx,dy]=deltas[dir];
+    const nx=ax+dx, ny=ay+dy;
+    if(nx<0||nx>=W||ny<0||ny>=H) continue;
+    if(cellGrid[ny*W+nx]===DOOR_CLOSED) {
+      for(const [id,[ddx,ddy]] of Object.entries(doorReg)) {
+        if(ddx===nx&&ddy===ny) return {action:'door',target_id:id,door_state:'open'};
+      }
+    }
+  }
+
+  let bestDir=null, bestDist=Infinity;
+  for(const dir of dirs) {
+    const [dx,dy]=deltas[dir];
+    const nx=ax+dx, ny=ay+dy;
+    if(nx<0||nx>=W||ny<0||ny>=H) continue;
+    const ct=cellGrid[ny*W+nx];
+    if(ct===WALL||ct===OBSTACLE||ct===DOOR_CLOSED) continue;
+    if(fireGrid[ny*W+nx]>0.35) continue;
+    const d=bfsDist(nx,ny,EXITS,cellGrid);
+    if(d<bestDist) { bestDist=d; bestDir=dir; }
+  }
+  if(!bestDir||Math.random()<0.12) {
+    const shuffled=[...dirs].sort(()=>Math.random()-.5);
+    for(const dir of shuffled) {
+      const [dx,dy]=deltas[dir];
+      const nx=ax+dx, ny=ay+dy;
+      if(nx<0||nx>=W||ny<0||ny>=H) continue;
+      const ct=cellGrid[ny*W+nx];
+      if(ct!==WALL&&ct!==OBSTACLE&&ct!==DOOR_CLOSED&&fireGrid[ny*W+nx]<0.4) return {action:'move',direction:dir};
+    }
+  }
+  return bestDir ? {action:'move',direction:bestDir} : {action:'wait'};
+}
+
+function doStep(s) {
+  if(!s.agentAlive||s.agentEvacuated||s.stepCount>=s.maxSteps) return;
+  const action = agentAct(s);
+  const deltas = {north:[0,-1],south:[0,1],east:[1,0],west:[-1,0]};
+  const prevX=s.agentX, prevY=s.agentY;
+  let feedback='';
+
+  if(action.action==='move') {
+    const [dx,dy]=deltas[action.direction]||[0,0];
+    const nx=s.agentX+dx, ny=s.agentY+dy;
+    if(nx>=0&&nx<W&&ny>=0&&ny<H) {
+      const ct=s.cellGrid[ny*W+nx];
+      if(ct!==WALL&&ct!==OBSTACLE&&ct!==DOOR_CLOSED) {
+        s.agentX=nx; s.agentY=ny; feedback=`Moved ${action.direction}`;
+      } else feedback='Path blocked';
+    }
+  } else if(action.action==='door') {
+    const pos=s.doorReg[action.target_id];
+    if(pos) {
+      const [dx,dy]=pos;
+      if(Math.abs(dx-s.agentX)+Math.abs(dy-s.agentY)<=2) {
+        if(s.cellGrid[dy*W+dx]===DOOR_CLOSED) {
+          s.cellGrid[dy*W+dx]=DOOR_OPEN;
+          feedback=`Opened ${action.target_id}`;
+        }
+      }
+    }
+  } else if(action.action==='wait') {
+    feedback='Waiting...';
+  }
+
+  // Check evacuation
+  if(s.cellGrid[s.agentY*W+s.agentX]===EXIT && s.fireGrid[s.agentY*W+s.agentX]<EXIT_BLOCK) {
+    s.agentEvacuated=true; feedback='EVACUATED — reached safety!';
+  }
+
+  // Fire step
+  const burned = simStep(s);
+
+  // Damage
+  const ai=s.agentY*W+s.agentX;
+  const smoke=s.smokeGrid[ai], fire=s.fireGrid[ai];
+  let dmg=0;
+  if(smoke>=.8) dmg+=5; else if(smoke>=.5) dmg+=2; else if(smoke>=.2) dmg+=.5;
+  if(fire>=FIRE_BURNING) dmg+=10;
+  s.agentHealth=Math.max(0,s.agentHealth-dmg);
+  if(s.agentHealth<=0) { s.agentAlive=false; feedback='Incapacitated!'; }
+
+  s.stepCount++;
+  s.visibleCells=computeVisible(s.agentX,s.agentY,s.cellGrid,s.smokeGrid);
+  for(const k of s.visibleCells) s.exploreSet.add(k);
+
+  // Reward
+  const prevDist=bfsDist(prevX,prevY,EXITS,s.cellGrid);
+  const curDist=bfsDist(s.agentX,s.agentY,EXITS,s.cellGrid);
+  let reward=-0.01;
+  if(curDist<prevDist) reward+=0.1;
+  if(smoke>=.5||fire>=FIRE_BURNING) reward-=0.5;
+  reward-=0.02*dmg;
+  if(s.agentEvacuated) reward+=5+(0.05*Math.max(0,s.maxSteps-s.stepCount));
+  if(!s.agentAlive) reward-=10;
+  if(action.action==='door') reward+=0.5;
+
+  s.lastReward=Math.round(reward*1000)/1000;
+  s.totalReward=Math.round((s.totalReward+reward)*1000)/1000;
+  s.rewardHistory.push(s.totalReward);
+  s.fireSizeHistory.push(Array.from(s.fireGrid).filter(f=>f>=FIRE_BURNING).length);
+
+  if(feedback) s.eventLog.unshift({step:s.stepCount,text:feedback,reward:s.lastReward});
+  if(burned.length) s.eventLog.unshift({step:s.stepCount,text:`${burned.length} cell(s) burned out`,reward:0,isAlert:true});
+  if(s.eventLog.length>50) s.eventLog.length=50;
+}
+
+// ── Renderer ──────────────────────────────────────────────────────────────────
+const canvas = document.getElementById('mainCanvas');
+const ctx    = canvas.getContext('2d');
+const CS     = 36; // cell size px
+let time     = 0;
+let agentTrail = []; // [{px,py}] max 14
+let smokePhases;     // per-cell random phase
+
+function initRender() {
+  smokePhases = new Float32Array(W*H).map(()=>Math.random()*Math.PI*2);
+  agentTrail = [];
+}
+
+function renderFrame(s) {
+  time += 0.016;
+  const {cellGrid,fireGrid,smokeGrid,agentX,agentY,visibleCells,exploreSet} = s;
+
+  // ── Background ──
+  ctx.fillStyle='#c8b890';
+  ctx.fillRect(0,0,576,576);
+
+  // ── Cell base ──
+  for(let y=0;y<H;y++) for(let x=0;x<W;x++) drawCellBase(ctx,x,y,cellGrid[y*W+x],CS);
+
+  // ── Fire ambient (multiply — warms light floor tiles naturally) ──
+  ctx.save();
+  ctx.globalCompositeOperation='multiply';
+  for(let y=0;y<H;y++) for(let x=0;x<W;x++) {
+    const f=fireGrid[y*W+x];
+    if(f<0.28) continue;
+    drawFireAmbient(ctx,x,y,f,CS);
+  }
+  ctx.restore();
+
+  // ── Fire cell (multiply — burns vivid deep orange-red into light tiles) ──
+  ctx.save();
+  ctx.globalCompositeOperation='multiply';
+  for(let y=0;y<H;y++) for(let x=0;x<W;x++) {
+    const f=fireGrid[y*W+x];
+    if(f<0.05) continue;
+    drawFireCell(ctx,x,y,f,CS);
+  }
+  ctx.restore();
+
+  // ── Smoke ──
+  for(let y=0;y<H;y++) for(let x=0;x<W;x++) {
+    const sm=smokeGrid[y*W+x];
+    if(sm<0.08) continue;
+    drawSmoke(ctx,x,y,sm,CS,smokePhases[y*W+x]);
+  }
+
+  // ── Exits & doors ──
+  for(let y=0;y<H;y++) for(let x=0;x<W;x++) {
+    const ct=cellGrid[y*W+x];
+    if(ct===EXIT) drawExit(ctx,x,y,CS,fireGrid[y*W+x]);
+    else if(ct===DOOR_OPEN||ct===DOOR_CLOSED) drawDoor(ctx,x,y,ct,CS);
+  }
+
+  // ── Visibility shading — all cells visible, dim by knowledge tier ──
+  for(let y=0;y<H;y++) for(let x=0;x<W;x++) {
+    const k=`${x},${y}`;
+    if(visibleCells.has(k)) continue; // fully lit — no overlay
+    // Explored but out of sight: light desaturating veil
+    // Unexplored: heavier veil — but never fully opaque, structure always readable
+    ctx.fillStyle = exploreSet.has(k)
+      ? 'rgba(180,174,165,0.30)'   // explored — slight dim
+      : 'rgba(140,134,126,0.55)';  // unseen   — moderate dim, structure visible
+    ctx.fillRect(x*CS,y*CS,CS,CS);
+  }
+
+  // ── Agent vision lantern — warm radial highlight on visible area ──
+  const agPx=agentX*CS+CS/2, agPy=agentY*CS+CS/2;
+  const vR=5.5*CS;
+  const vGr=ctx.createRadialGradient(agPx,agPy,0,agPx,agPy,vR);
+  vGr.addColorStop(0,   'rgba(255,248,215,0.28)');
+  vGr.addColorStop(0.45,'rgba(255,244,200,0.14)');
+  vGr.addColorStop(0.80,'rgba(255,240,180,0.04)');
+  vGr.addColorStop(1,   'rgba(255,240,180,0)');
+  ctx.fillStyle=vGr;
+  ctx.beginPath(); ctx.arc(agPx,agPy,vR,0,Math.PI*2); ctx.fill();
+
+  // ── Trail ──
+  updateTrail(agentX,agentY);
+  drawTrail(ctx);
+
+  // ── Agent ──
+  drawAgent(ctx,agentX,agentY,s.agentHealth,s.agentAlive,s.agentEvacuated,CS);
+
+  // ── Grid overlay ──
+  ctx.strokeStyle='rgba(0,0,0,0.07)';
+  ctx.lineWidth=0.5;
+  for(let x=0;x<=W;x++){ctx.beginPath();ctx.moveTo(x*CS,0);ctx.lineTo(x*CS,H*CS);ctx.stroke();}
+  for(let y=0;y<=H;y++){ctx.beginPath();ctx.moveTo(0,y*CS);ctx.lineTo(W*CS,y*CS);ctx.stroke();}
+}
+
+// ── Cell base drawing ─────────────────────────────────────────────────────────
+function drawCellBase(ctx,x,y,ct,cs) {
+  const px=x*cs, py=y*cs;
+  switch(ct) {
+    case WALL: {
+      const wh=9;
+      // Front shadow face (very dark — makes wall pop from floor)
+      ctx.fillStyle='rgba(0,0,0,0.55)'; ctx.fillRect(px,py+cs-wh,cs,wh);
+      // Right drop shadow
+      ctx.fillStyle='rgba(0,0,0,0.30)'; ctx.fillRect(px+cs,py-wh+2,4,cs+2);
+      // Top face — dark concrete gray
+      ctx.fillStyle='#5e5850';          ctx.fillRect(px,py-wh,cs,cs);
+      // Top edge catch-light (bright white strip)
+      ctx.fillStyle='rgba(255,255,255,0.80)'; ctx.fillRect(px,py-wh,cs,3);
+      // Left highlight strip
+      ctx.fillStyle='rgba(255,255,255,0.35)'; ctx.fillRect(px,py-wh+3,2,cs-3);
+      // Bottom-right inner shadow for depth
+      ctx.fillStyle='rgba(0,0,0,0.22)'; ctx.fillRect(px+cs-3,py-wh+3,3,cs-3);
+      ctx.fillStyle='rgba(0,0,0,0.22)'; ctx.fillRect(px+3,py-wh+cs-3,cs-6,3);
+      // Mortar lines
+      ctx.fillStyle='rgba(0,0,0,0.18)';
+      ctx.fillRect(px+3,py-wh+~~(cs*.34),cs-6,1);
+      ctx.fillRect(px+3,py-wh+~~(cs*.67),cs-6,1);
+      break;
+    }
+    case OBSTACLE: {
+      const oh=5;
+      // Deep shadow underface
+      ctx.fillStyle='rgba(0,0,0,0.45)'; ctx.fillRect(px,py+cs-oh,cs,oh);
+      ctx.fillStyle='rgba(0,0,0,0.28)'; ctx.fillRect(px+cs,py-oh+2,4,cs);
+      // Dark charred surface
+      ctx.fillStyle='#3a3530'; ctx.fillRect(px,py-oh,cs,cs);
+      // Diagonal char texture
+      ctx.strokeStyle='rgba(0,0,0,0.30)'; ctx.lineWidth=0.9;
+      for(let d=0;d<cs+cs;d+=5){
+        ctx.beginPath();
+        ctx.moveTo(px+Math.max(0,d-cs),py-oh+Math.min(d,cs));
+        ctx.lineTo(px+Math.min(d,cs),py-oh+Math.max(0,d-cs));
+        ctx.stroke();
+      }
+      // Vivid ember edge glow
+      ctx.fillStyle='rgba(230,80,0,0.80)';
+      ctx.fillRect(px,py-oh,cs,1); ctx.fillRect(px,py-oh+cs-1,cs,1);
+      ctx.fillRect(px,py-oh+1,1,cs-2); ctx.fillRect(px+cs-1,py-oh+1,1,cs-2);
+      break;
+    }
+    case EXIT: {
+      ctx.fillStyle='#e6f4ec'; ctx.fillRect(px,py,cs,cs);
+      ctx.fillStyle='rgba(34,197,94,0.18)'; ctx.fillRect(px+2,py+2,cs-4,cs-4);
+      break;
+    }
+    default: { // FLOOR, DOOR — Minecraft-style strong checkerboard
+      // Alternating tiles: warm sand-tan vs golden-tan (like reference image 2)
+      ctx.fillStyle = (x+y)%2===0 ? '#e8d8b8' : '#d0be98';
+      ctx.fillRect(px, py, cs, cs);
+      // Subtle inner bevel (top-left lighter, bottom-right darker)
+      ctx.fillStyle = 'rgba(255,255,255,0.20)';
+      ctx.fillRect(px, py, cs, 2); ctx.fillRect(px, py+2, 2, cs-2);
+      ctx.fillStyle = 'rgba(0,0,0,0.18)';
+      ctx.fillRect(px, py+cs-2, cs, 2); ctx.fillRect(px+cs-2, py, 2, cs-2);
+    }
+  }
+}
+
+// ── Fire rendering ────────────────────────────────────────────────────────────
+function drawFireAmbient(ctx,x,y,fire,cs) {
+  // multiply: deeply warms floor around fire — reduce G+B channels
+  const px=x*cs+cs/2, py=y*cs+cs/2;
+  const r=cs*(3.0+fire*2.2);
+  const a=0.72+fire*0.25;   // high alpha for vivid multiply effect
+  const gr=ctx.createRadialGradient(px,py,0,px,py,r);
+  gr.addColorStop(0,    `rgba(255,50,0,${a})`);      // deep red-orange core
+  gr.addColorStop(0.30, `rgba(255,90,0,${a*0.80})`); // orange mid
+  gr.addColorStop(0.60, `rgba(255,150,20,${a*0.45})`);
+  gr.addColorStop(0.85, `rgba(255,200,60,${a*0.15})`);
+  gr.addColorStop(1,    'rgba(255,255,255,0)');
+  ctx.fillStyle=gr;
+  ctx.fillRect(px-r,py-r,r*2,r*2);
+}
+
+function drawFireCell(ctx,x,y,fire,cs) {
+  const px=x*cs+cs/2, py=y*cs+cs/2;
+  const f1=0.82+0.18*Math.sin(time*9.5+x*2.7+y*3.14);
+  const eff=fire*f1;
+  // multiply blend: alpha values are high so colors deeply saturate the light floor
+  const layers=[
+    {r:cs*.35, a:.99, ox:0, oy:-cs*.10},  // white-hot core
+    {r:cs*.68, a:.95, ox:0, oy:0},        // inner flame
+    {r:cs*1.0, a:.82, ox:0, oy:0},        // flame body
+    {r:cs*1.55,a:.60, ox:0, oy:0},        // outer heat glow
+  ];
+  for(const {r,a,ox,oy} of layers) {
+    const cx=px+ox, cy=py+oy;
+    const gr=ctx.createRadialGradient(cx,cy,0,cx,cy,r);
+    gr.addColorStop(0,   fireColor(eff,      a));
+    gr.addColorStop(.35, fireColor(eff*.80,  a*.75));
+    gr.addColorStop(.70, fireColor(eff*.40,  a*.40));
+    gr.addColorStop(1,   fireColor(eff*.10,  0));
+    ctx.fillStyle=gr;
+    ctx.beginPath(); ctx.arc(cx,cy,r,0,Math.PI*2); ctx.fill();
+  }
+  // White-hot core punch-through (visible even in multiply)
+  if(eff>.45) {
+    const gr2=ctx.createRadialGradient(px,py-cs*.12,0,px,py-cs*.12,cs*.20);
+    gr2.addColorStop(0,`rgba(255,200,50,${Math.min(1,(eff-.45)*2.2)})`);
+    gr2.addColorStop(1,'rgba(255,140,0,0)');
+    ctx.fillStyle=gr2;
+    ctx.beginPath(); ctx.arc(px,py-cs*.12,cs*.20,0,Math.PI*2); ctx.fill();
+  }
+}
+
+// ── Smoke ─────────────────────────────────────────────────────────────────────
+function drawSmoke(ctx,x,y,smoke,cs,phase) {
+  const px=x*cs+cs/2, py=y*cs+cs/2;
+  const dx=Math.sin(time*.35+phase)*1.8, dy=Math.cos(time*.28+phase+1.2)*1.8;
+  const alpha=Math.min(0.85,smoke*.95);
+  const r=cs*.85;
+  ctx.save();
+  ctx.translate(px+dx,py+dy);
+  const gr=ctx.createRadialGradient(0,0,0,0,0,r);
+  gr.addColorStop(0,`rgba(72,82,96,${alpha})`);
+  gr.addColorStop(.5,`rgba(72,82,96,${alpha*.75})`);
+  gr.addColorStop(1,'rgba(72,82,96,0)');
+  ctx.fillStyle=gr;
+  ctx.beginPath(); ctx.arc(0,0,r,0,Math.PI*2); ctx.fill();
+  if(smoke>.3) {
+    const gr2=ctx.createRadialGradient(dy*1.5,dx*1.5,0,dy*1.5,dx*1.5,cs*.6);
+    gr2.addColorStop(0,`rgba(88,98,114,${alpha*.5})`);
+    gr2.addColorStop(1,'rgba(88,98,114,0)');
+    ctx.fillStyle=gr2;
+    ctx.beginPath(); ctx.arc(dy*1.5,dx*1.5,cs*.6,0,Math.PI*2); ctx.fill();
+  }
+  ctx.restore();
+}
+
+// ── Exit ──────────────────────────────────────────────────────────────────────
+function drawExit(ctx,x,y,cs,fire) {
+  const px=x*cs, py=y*cs;
+  const pulse=0.62+0.38*Math.sin(time*2.8+x+y);
+  const blocked=fire>=EXIT_BLOCK;
+  const col=blocked?'#ef4444':'#22c55e';
+  ctx.save();
+  ctx.shadowBlur=cs*1.1*pulse; ctx.shadowColor=col;
+  ctx.strokeStyle=col; ctx.lineWidth=2;
+  ctx.strokeRect(px+2,py+2,cs-4,cs-4);
+  ctx.fillStyle=blocked?'rgba(220,38,38,.11)':'rgba(34,197,94,.11)';
+  ctx.fillRect(px+3,py+3,cs-6,cs-6);
+  ctx.shadowBlur=0;
+  const sa=0.55+0.35*pulse;
+  ctx.fillStyle=blocked?`rgba(220,38,38,${sa})`:`rgba(22,163,74,${sa})`;
+  ctx.font=`bold ${~~(cs*.50)}px sans-serif`;
+  ctx.textAlign='center'; ctx.textBaseline='middle';
+  ctx.fillText(blocked?'✕':'⇥',px+cs/2,py+cs/2+1);
+  // Corner brackets
+  ctx.fillStyle=blocked?'rgba(220,38,38,.85)':'rgba(22,163,74,.85)';
+  const ca=5;
+  ctx.fillRect(px,py,ca,1); ctx.fillRect(px,py,1,ca);
+  ctx.fillRect(px+cs-ca,py,ca,1); ctx.fillRect(px+cs-1,py,1,ca);
+  ctx.fillRect(px,py+cs-1,ca,1); ctx.fillRect(px,py+cs-ca,1,ca);
+  ctx.fillRect(px+cs-ca,py+cs-1,ca,1); ctx.fillRect(px+cs-1,py+cs-ca,1,ca);
+  ctx.restore();
+}
+
+// ── Door ──────────────────────────────────────────────────────────────────────
+function drawDoor(ctx,x,y,ct,cs) {
+  const px=x*cs, py=y*cs;
+  if(ct===DOOR_OPEN) {
+    ctx.fillStyle='rgba(0,0,0,0.38)'; ctx.fillRect(px+4,py,cs-6,cs);
+    ctx.fillStyle='#5c3621'; ctx.fillRect(px,py,4,cs);
+    ctx.fillStyle='#291508'; ctx.fillRect(px,py,cs,2);
+    ctx.fillStyle='rgba(125,211,252,0.10)'; ctx.fillRect(px+5,py+2,cs-7,cs-4);
+  } else {
+    ctx.fillStyle='#5c3621'; ctx.fillRect(px+2,py+1,cs-4,cs-2);
+    ctx.fillStyle='#291508';
+    ctx.fillRect(px,py,cs,2); ctx.fillRect(px,py+cs-2,cs,2);
+    ctx.fillRect(px,py+2,2,cs-4); ctx.fillRect(px+cs-2,py+2,2,cs-4);
+    ctx.fillStyle='rgba(0,0,0,0.35)';
+    ctx.fillRect(px+4,py+~~(cs*.14),cs-8,1);
+    ctx.fillRect(px+4,py+~~(cs*.50),cs-8,1);
+    ctx.fillRect(px+4,py+~~(cs*.82),cs-8,1);
+    ctx.fillStyle='rgba(0,0,0,0.13)';
+    ctx.fillRect(px+4,py+~~(cs*.14)+2,cs-8,~~(cs*.34));
+    ctx.fillRect(px+4,py+~~(cs*.50)+2,cs-8,~~(cs*.30));
+    ctx.beginPath(); ctx.arc(px+cs-8,py+~~(cs/2),2.5,0,Math.PI*2);
+    ctx.fillStyle='rgba(210,168,75,.88)'; ctx.fill();
+  }
+}
+
+// ── Agent trail ───────────────────────────────────────────────────────────────
+function updateTrail(ax,ay) {
+  const px=ax*CS+CS/2, py=ay*CS+CS/2;
+  const last=agentTrail[0];
+  if(!last||Math.abs(last.px-px)>1||Math.abs(last.py-py)>1) {
+    agentTrail.unshift({px,py});
+  }
+  while(agentTrail.length>14) agentTrail.pop();
+}
+
+function drawTrail(ctx) {
+  for(let i=1;i<agentTrail.length;i++) {
+    const ratio = 1-i/agentTrail.length;
+    const alpha = ratio * 0.70;
+    const r = Math.max(1.5, ratio * CS * 0.24);
+    ctx.beginPath();
+    ctx.arc(agentTrail[i].px,agentTrail[i].py,r,0,Math.PI*2);
+    ctx.fillStyle=`rgba(2,132,199,${alpha.toFixed(3)})`;
+    ctx.fill();
+  }
+}
+
+// ── Agent color themes (body = shirt/arms, matches reference image) ───────────
+const AGENT_COLORS = {
+  healthy:  { body:'#3b82f6', dark:'#1d4ed8', ring:'#fbbf24', ringGlow:'#f59e0b' },
+  moderate: { body:'#f97316', dark:'#c2410c', ring:'#fb923c', ringGlow:'#ea580c' },
+  low:      { body:'#dc2626', dark:'#991b1b', ring:'#f87171', ringGlow:'#dc2626' },
+  evacuated:{ body:'#16a34a', dark:'#14532d', ring:'#4ade80', ringGlow:'#22c55e' },
+};
+
+// ── Minecraft-style blocky pixel character ────────────────────────────────────
+// Drawn entirely with fillRect — crisp pixel art, no anti-aliasing curves.
+// Layout (in "units" u = cs/18 ≈ 2px):
+//   Rows  0-1 : Helmet  (10u wide incl brim, 2u tall)
+//   Rows  2-5 : Head    (8u wide, 4u tall, skin + eyes)
+//   Rows  6-10: Body+Arms  (body 6u, arms 2u each side → 10u total, 5u tall)
+//   Rows 11-15: Legs    (3u each, 5u tall)
+//   Total: 16u tall × 10u wide  →  32px × 20px at cs=36
+function drawMinecraftAgent(ctx, px, py, cs, theme) {
+  const u  = cs / 18;                       // ~2px at cs=36
+  const ow = 10 * u;                        // total character width
+  const oh = 16 * u;                        // total character height
+  const ox = Math.round(px - ow / 2);       // top-left X
+  const oy = Math.round(py - oh / 2);       // top-left Y (centered on cell)
+
+  // ── Color palette ──
+  const skin    = '#f4c08a';                // face / skin
+  const helmTop = '#b8c8d8';               // hard-hat top — steel blue-gray
+  const helmBrm = '#7a98ae';               // brim — darker
+  const helmVis = '#d4e8f8';               // visor stripe — pale blue
+  const body    = theme.body;              // health-coded shirt
+  const bodyShd = theme.dark;             // shirt shadow / dark side
+  const pants   = '#1e3a6e';              // navy trousers
+  const pantsShd= '#142856';
+  const eye     = '#1a1818';
+  const skin2   = '#e8a870';              // skin shadow / cheek
+
+  // helper: fill a rectangle in character-local units
+  const r = (col, dx, dy, dw, dh) => {
+    ctx.fillStyle = col;
+    ctx.fillRect(ox + dx*u, oy + dy*u, dw*u, dh*u);
+  };
+
+  // ─── HELMET ────────────────────────────────────────────────────────────────
+  r(helmBrm, 0, 0, 10, 1);           // brim (full width)
+  r(helmTop, 1, 1,  8, 1);           // dome top
+  r(helmVis, 2, 1,  6, 0.5);         // visor line on brim
+
+  // ─── HEAD ──────────────────────────────────────────────────────────────────
+  r(skin,  1, 2,  8, 4);             // face (skin)
+  r(skin2, 1, 5,  8, 1);             // chin / lower shadow
+  r(eye,   2, 3,  1, 1);             // left eye
+  r(eye,   5, 3,  1, 1);             // right eye
+  r('rgba(160,80,40,0.35)', 3, 5, 2, 0.5); // mouth hint
+
+  // ─── BODY ──────────────────────────────────────────────────────────────────
+  r(body,    2, 6, 6, 5);            // torso
+  r(bodyShd, 2, 6, 1, 5);            // left-edge shadow (depth)
+  r(bodyShd, 2,10, 6, 1);            // bottom shadow
+
+  // ─── ARMS ──────────────────────────────────────────────────────────────────
+  r(body,    0, 6, 2, 5);            // left arm
+  r(bodyShd, 0, 6, 1, 5);            // left arm shadow
+  r(body,    8, 6, 2, 5);            // right arm
+  r(bodyShd, 9, 6, 1, 5);            // right arm right-edge shadow
+
+  // ─── LEGS ──────────────────────────────────────────────────────────────────
+  r(pants,    2, 11, 3, 5);          // left leg
+  r(pantsShd, 2, 11, 1, 5);          // left leg shadow
+  r(pants,    5, 11, 3, 5);          // right leg
+  r(pantsShd, 5, 11, 1, 5);          // right leg shadow
+  r('rgba(0,0,0,0.18)', 4, 11, 1, 5); // centre gap between legs
+}
+
+// ── Agent: golden aura + Minecraft character + health arc ────────────────────
+function drawAgent(ctx, ax, ay, health, alive, evacuated, cs) {
+  if (!alive && !evacuated) return;
+  const px = ax*cs + cs/2, py = ay*cs + cs/2;
+  // Aura pulse — two independent oscillators (matching original frontend)
+  const pulse2 = 0.68 + 0.32*Math.sin(time*2.1 + 1.0);
+  const pulse3 = 0.80 + 0.20*Math.sin(time*4.8);         // faster inner shimmer
+
+  const hRatio = Math.max(0, Math.min(1, health/100));
+  const theme  = evacuated      ? AGENT_COLORS.evacuated
+               : hRatio > 0.6   ? AGENT_COLORS.healthy
+               : hRatio > 0.3   ? AGENT_COLORS.moderate
+               :                   AGENT_COLORS.low;
+
+  const arcBaseR = cs * 0.42;   // fixed radius (no size-pulse — keeps pixel char stable)
+
+  // ── 1. GOLDEN OUTER GLOW (large halo — like reference image) ──────────────
+  ctx.save();
+  const auraR = cs * 0.85 * pulse2;
+  const aGr   = ctx.createRadialGradient(px, py, arcBaseR*0.55, px, py, auraR);
+  aGr.addColorStop(0,    'rgba(0,0,0,0)');
+  aGr.addColorStop(0.40, `rgba(251,191,36,${0.28 * pulse3})`);   // gold inner
+  aGr.addColorStop(0.72, `rgba(245,158,11,${0.14 * pulse3})`);   // amber mid
+  aGr.addColorStop(1,    'rgba(0,0,0,0)');
+  ctx.fillStyle = aGr;
+  ctx.beginPath(); ctx.arc(px, py, auraR, 0, Math.PI*2); ctx.fill();
+  ctx.restore();
+
+  // ── 2. GROUND SHADOW (ellipse under feet) ─────────────────────────────────
+  ctx.save();
+  ctx.fillStyle = 'rgba(0,0,0,0.22)';
+  ctx.beginPath();
+  ctx.ellipse(px + 1, py + cs*0.46, cs*0.24, cs*0.055, 0, 0, Math.PI*2);
+  ctx.fill();
+  ctx.restore();
+
+  // ── 3. CHARACTER SHADOW GLOW (subtle colored shadow under sprite) ──────────
+  ctx.save();
+  ctx.shadowBlur  = cs * 0.55;
+  ctx.shadowColor = theme.ring;
+  // Draw an invisible rect at the character centre just to emit the shadow
+  ctx.fillStyle = 'rgba(0,0,0,0)';
+  ctx.fillRect(px - 1, py - 1, 2, 2);
+  ctx.restore();
+
+  // ── 4. MINECRAFT CHARACTER (crisp pixel art — no transforms) ──────────────
+  drawMinecraftAgent(ctx, px, py, cs, theme);
+
+  // ── 5. HEALTH ARC RING (gold/orange/red — clockwise from 12 o'clock) ──────
+  ctx.save();
+  const arcR = arcBaseR * 1.68;
+
+  // Track ring (always full circle, subtle)
+  ctx.beginPath(); ctx.arc(px, py, arcR, 0, Math.PI*2);
+  ctx.strokeStyle = 'rgba(0,0,0,0.12)'; ctx.lineWidth = 4; ctx.stroke();
+
+  // Health fill arc
+  if (hRatio > 0) {
+    const arcCol  = theme.ring;
+    const arcGlow = theme.ringGlow;
+    ctx.beginPath();
+    ctx.arc(px, py, arcR, -Math.PI/2, -Math.PI/2 + hRatio*Math.PI*2);
+    ctx.strokeStyle = arcCol;
+    ctx.lineWidth   = 4.5;
+    ctx.lineCap     = 'round';
+    // Double-stroke for bright glow (same technique as original frontend)
+    ctx.shadowBlur  = 14;
+    ctx.shadowColor = arcGlow;
+    ctx.stroke();
+    ctx.shadowBlur  = 6;
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+
+// ── Mini sparkline chart ──────────────────────────────────────────────────────
+function drawSparkline(canvasEl, data, color, fill) {
+  if(!canvasEl) return;
+  const c=canvasEl.getContext('2d');
+  const w=canvasEl.offsetWidth||canvasEl.parentElement.clientWidth||240;
+  const h=canvasEl.height;
+  canvasEl.width=w;
+  c.fillStyle='#faf9f6'; c.fillRect(0,0,w,h);
+  if(data.length<2) return;
+  const yMin=Math.min(...data), yMax=Math.max(...data);
+  const yRange=(yMax-yMin)||1;
+  const pad=4;
+  // Grid lines
+  c.strokeStyle='rgba(0,0,0,0.06)'; c.lineWidth=.5;
+  for(let i=0;i<=2;i++){
+    const gy=pad+(h-2*pad)*(i/2);
+    c.beginPath(); c.moveTo(0,gy); c.lineTo(w,gy); c.stroke();
+  }
+  const toX=i=>(i/(data.length-1))*w;
+  const toY=v=>h-pad-((v-yMin)/yRange)*(h-2*pad);
+  // Fill area
+  c.beginPath(); c.moveTo(toX(0),h);
+  for(let i=0;i<data.length;i++) c.lineTo(toX(i),toY(data[i]));
+  c.lineTo(toX(data.length-1),h); c.closePath();
+  c.fillStyle=fill; c.fill();
+  // Line
+  c.beginPath(); c.moveTo(toX(0),toY(data[0]));
+  for(let i=1;i<data.length;i++) c.lineTo(toX(i),toY(data[i]));
+  c.strokeStyle=color; c.lineWidth=1.8; c.stroke();
+  // Dot
+  const lx=toX(data.length-1), ly=toY(data[data.length-1]);
+  c.beginPath(); c.arc(lx,ly,3,0,Math.PI*2);
+  c.fillStyle=color; c.fill();
+}
+
+// ── HUD & UI updates ──────────────────────────────────────────────────────────
+function updateHUD(s) {
+  // Health bar
+  const hPct=s.agentHealth/100;
+  const bar=document.getElementById('healthBar');
+  if(bar){ bar.style.width=`${s.agentHealth}%`; bar.className='hbar-fill '+(hPct>.6?'g':hPct>.3?'m':'c'); }
+  setText('healthVal', Math.round(s.agentHealth));
+
+  const status = s.agentHealth>75?'Good':s.agentHealth>50?'Moderate':s.agentHealth>25?'Low':'Critical';
+  const hStatus=document.getElementById('healthStatus');
+  if(hStatus){ hStatus.textContent=status; hStatus.className='hstatus '+status.toLowerCase(); }
+
+  // Smoke
+  const smoke=s.smokeGrid[s.agentY*W+s.agentX];
+  const smokeLabel=smoke>.8?'heavy':smoke>.5?'moderate':smoke>.2?'light':'clear';
+  setText('smokeTag',`smoke: ${smokeLabel}`);
+
+  // Steps
+  setText('stepCount',`${s.stepCount} / ${s.maxSteps}`);
+  const sb=document.getElementById('stepBar');
+  if(sb) sb.style.width=`${100*s.stepCount/s.maxSteps}%`;
+  setText('diffTag',`${s.difficulty} · small_office · ${s.windDir}`);
+
+  // Episode banner
+  const banner=document.getElementById('epBanner');
+  if(banner) {
+    if(s.agentEvacuated){ banner.textContent='✓ EVACUATED — reached safety'; banner.className='ok'; banner.style.display='block'; }
+    else if(!s.agentAlive){ banner.textContent='✗ INCAPACITATED'; banner.className='bad'; banner.style.display='block'; }
+    else if(s.stepCount>=s.maxSteps){ banner.textContent='⏱ TIMEOUT'; banner.className='tmo'; banner.style.display='block'; }
+    else banner.style.display='none';
+  }
+
+  // Side panel
+  setText('sHealthVal', Math.round(s.agentHealth));
+  setText('sStatusVal', status);
+  setText('sSmokeVal',  smokeLabel);
+  setText('sRewardVal', s.totalReward.toFixed(2));
+  const fireCells=s.fireSizeHistory[s.fireSizeHistory.length-1]||0;
+  setText('sFireVal',  fireCells);
+  setText('sStepVal',  s.stepCount);
+  setText('sWindVal',  s.windDir);
+  setText('sSpreadVal',s.pSpread.toFixed(2));
+  const burnedPct=Math.round(100*Array.from(s.fireGrid).filter(f=>f>0).length/(W*H));
+  setText('sBurnVal',`${burnedPct}% burned`);
+  const exitBlock=EXITS.filter(([ex,ey])=>s.fireGrid[ey*W+ex]>=EXIT_BLOCK).length;
+  setText('sExitBlocked',`${exitBlock} / ${EXITS.length}`);
+  document.getElementById('sExitBlocked').style.color = exitBlock>0?'var(--fire)':'var(--green)';
+
+  // Reward delta
+  if(s.lastReward!==undefined) {
+    const lr=s.lastReward;
+    const el=document.getElementById('sRewardLast');
+    if(el){ el.textContent=(lr>0?'+':'')+lr.toFixed(2); el.style.color=lr>0?'var(--green)':'var(--red)'; }
+  }
+
+  // Charts
+  drawSparkline(document.getElementById('rewardChart'), s.rewardHistory,'#1d4ed8','rgba(29,78,216,0.08)');
+  drawSparkline(document.getElementById('fireChart'),   s.fireSizeHistory,'#c2410c','rgba(194,65,12,0.08)');
+  const fl=document.getElementById('sFireLast');
+  if(fl) fl.textContent=`${fireCells} cells`;
+
+  // Event log
+  const log=document.getElementById('eventLog');
+  if(log) {
+    log.innerHTML=s.eventLog.slice(0,18).map(e=>`
+      <div class="erow${e.isAlert?' alarm':''}">
+        <span class="estep">${String(e.step).padStart(3,'0')}</span>
+        <span class="etext">${e.text}</span>
+        ${e.reward?`<span class="erwd ${e.reward>0?'p':'n'}">${e.reward>0?'+':''}${e.reward.toFixed(2)}</span>`:''}
+      </div>`).join('');
+  }
+}
+
+function setText(id,val) {
+  const el=document.getElementById(id);
+  if(el) el.textContent=val;
+}
+
+function showToast(msg) {
+  const t=document.getElementById('toast');
+  if(!t) return;
+  t.textContent=msg; t.classList.add('up');
+  setTimeout(()=>t.classList.remove('up'),3000);
+}
+
+// ── App controller ────────────────────────────────────────────────────────────
+let playing=false, speed=1, stepTimer=null, rafId=null;
+let difficulty='easy';
+
+function getSeed() { return parseInt(document.getElementById('seedInput')?.value)||42; }
+
+function newEpisode() {
+  clearTimer();
+  state = buildState(difficulty, getSeed());
+  initRender();
+  updateHUD(state);
+  setText('liveChip','Demo Mode');
+  document.getElementById('epBanner').style.display='none';
+  playing=false; updatePlayBtn();
+  setTimeout(()=>{ playing=true; updatePlayBtn(); startTimer(); },350);
+}
+
+function tick() {
+  if(!state) return;
+  doStep(state);
+  updateHUD(state);
+  if(state.agentEvacuated||!state.agentAlive||state.stepCount>=state.maxSteps) {
+    playing=false; clearTimer(); updatePlayBtn();
+    setTimeout(()=>newEpisode(), 2800);
+  }
+}
+
+function startTimer() {
+  clearTimer();
+  stepTimer=setInterval(tick, Math.max(50,1000/speed));
+}
+function clearTimer() { if(stepTimer){ clearInterval(stepTimer); stepTimer=null; } }
+function togglePlay() {
+  playing=!playing;
+  if(playing) startTimer(); else clearTimer();
+  updatePlayBtn();
+}
+function updatePlayBtn() {
+  const b=document.getElementById('playBtn');
+  if(b){ b.textContent=playing?'⏸':'▶'; b.classList.toggle('play',!playing); }
+}
+
+// Render loop (independent of sim tick rate)
+function startRender() {
+  const loop=()=>{
+    if(state) renderFrame(state);
+    rafId=requestAnimationFrame(loop);
+  };
+  rafId=requestAnimationFrame(loop);
+}
+
+// ── Controls ──────────────────────────────────────────────────────────────────
+document.getElementById('playBtn')?.addEventListener('click',togglePlay);
+document.getElementById('stepBtn')?.addEventListener('click',()=>{ if(state&&!state.agentEvacuated&&state.agentAlive) { doStep(state); updateHUD(state); } });
+document.getElementById('resetBtn')?.addEventListener('click',newEpisode);
+
+document.querySelectorAll('.diff-btn').forEach(b=>{
+  b.addEventListener('click',()=>{
+    document.querySelectorAll('.diff-btn').forEach(x=>{x.classList.remove('on','fire');});
+    b.classList.add('on','fire');
+    difficulty=b.dataset.diff;
+    newEpisode();
+  });
+});
+
+document.querySelectorAll('.spd-btn').forEach(b=>{
+  b.addEventListener('click',()=>{
+    document.querySelectorAll('.spd-btn').forEach(x=>x.classList.remove('on'));
+    b.classList.add('on'); speed=parseFloat(b.dataset.s);
+    if(playing){ clearTimer(); startTimer(); }
+  });
+});
+
+document.getElementById('seedInput')?.addEventListener('change',newEpisode);
+
+window.addEventListener('keydown',e=>{
+  if(e.target.tagName==='INPUT') return;
+  if(e.code==='Space'){ e.preventDefault(); togglePlay(); }
+  else if(e.code==='ArrowRight'&&state&&!state.agentEvacuated&&state.agentAlive){ doStep(state); updateHUD(state); }
+  else if(e.code==='KeyR') newEpisode();
+});
+
+// ── Boot ──────────────────────────────────────────────────────────────────────
+window.addEventListener('DOMContentLoaded',()=>{
+  newEpisode();
+  startRender();
+  showToast('Press Space to pause · → to step · R to reset');
+});
+</script>
+</body>
+</html>

evals_hf.ipynb

@@ -26,10 +26,18 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 1,
    "id": "c3d4e5f6",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Imports OK\n"
+     ]
+    }
+   ],
    "source": [
     "import csv\n",
     "import json\n",
@@ -65,7 +73,7 @@
   },
   {
    "cell_type": "markdown",
-   "id": "d4e5f6a7",
+   "id": "1f1d9271",
    "metadata": {},
    "source": [
     "## Cell 2 — Config  ✏️ Edit this cell to change eval settings"
@@ -73,10 +81,23 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 2,
    "id": "e5f6a7b8",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Model      : Qwen/Qwen3-1.7B\n",
+      "4-bit      : False\n",
+      "Temperature: 0.3\n",
+      "Levels     : all 3 (easy, medium, hard)\n",
+      "Seeds      : [1, 2, 3]\n",
+      "Output dir : ./outputs/hf_evals\n"
+     ]
+    }
+   ],
    "source": [
     "# ── Model ─────────────────────────────────────────────────────────────────────\n",
     "MODEL_ID        = \"Qwen/Qwen3-1.7B\"   # HF model ID or local path / adapter dir\n",
@@ -123,10 +144,19 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 3,
    "id": "a7b8c9d0",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Difficulties to evaluate : ['easy', 'medium', 'hard']\n",
+      "Total episodes           : 9\n"
+     ]
+    }
+   ],
    "source": [
     "ALL_DIFFICULTIES: List[Dict[str, Any]] = [\n",
     "    {\"difficulty\": \"easy\",   \"max_steps\": 200, \"description\": \"1 fire source · slow spread · calm wind · high humidity\"},\n",
@@ -195,10 +225,18 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 4,
    "id": "c9d0e1f2",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "HFChatModel class defined.\n"
+     ]
+    }
+   ],
    "source": [
     "class HFChatModel(SimpleChatModel):\n",
     "    \"\"\"\n",
@@ -308,10 +346,18 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 5,
    "id": "e1f2a3b4",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Prompt builder and action parser defined.\n"
+     ]
+    }
+   ],
    "source": [
     "def _build_user_message(obs: Dict[str, Any], history: List[str]) -> str:\n",
     "    \"\"\"Convert a raw observation dict + history into the LLM user message.\"\"\"\n",
@@ -466,10 +512,18 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 6,
    "id": "a3b4c5d6",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Episode runner defined.\n"
+     ]
+    }
+   ],
    "source": [
     "def run_episode(\n",
     "    llm: HFChatModel,\n",
@@ -637,10 +691,54 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 7,
    "id": "c5d6e7f8",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "ename": "RuntimeError",
+     "evalue": "Server not reachable at http://localhost:8000: HTTPConnectionPool(host='localhost', port=8000): Max retries exceeded with url: /health (Caused by NewConnectionError(\"HTTPConnection(host='localhost', port=8000): Failed to establish a new connection: [Errno 111] Connection refused\"))",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[31m---------------------------------------------------------------------------\u001b[39m",
+      "\u001b[31mConnectionRefusedError\u001b[39m                    Traceback (most recent call last)",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/urllib3/connection.py:204\u001b[39m, in \u001b[36mHTTPConnection._new_conn\u001b[39m\u001b[34m(self)\u001b[39m\n\u001b[32m    203\u001b[39m \u001b[38;5;28;01mtry\u001b[39;00m:\n\u001b[32m--> \u001b[39m\u001b[32m204\u001b[39m     sock = \u001b[30;43mconnection\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43mcreate_connection\u001b[39;49m\u001b[30;43m(\u001b[39;49m\n\u001b[32m    205\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43m(\u001b[39;49m\u001b[30;43mself\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43m_dns_host\u001b[39;49m\u001b[30;43m,\u001b[39;49m\u001b[30;43m \u001b[39;49m\u001b[30;43mself\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43mport\u001b[39;49m\u001b[30;43m)\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    206\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mself\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43mtimeout\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    207\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43msource_address\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mself\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43msource_address\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    208\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43msocket_options\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mself\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43msocket_options\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    209\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43m)\u001b[39;49m\n\u001b[32m    210\u001b[39m \u001b[38;5;28;01mexcept\u001b[39;00m socket.gaierror \u001b[38;5;28;01mas\u001b[39;00m e:\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/urllib3/util/connection.py:85\u001b[39m, in \u001b[36mcreate_connection\u001b[39m\u001b[34m(address, timeout, source_address, socket_options)\u001b[39m\n\u001b[32m     84\u001b[39m \u001b[38;5;28;01mtry\u001b[39;00m:\n\u001b[32m---> \u001b[39m\u001b[32m85\u001b[39m     \u001b[38;5;28;01mraise\u001b[39;00m err\n\u001b[32m     86\u001b[39m \u001b[38;5;28;01mfinally\u001b[39;00m:\n\u001b[32m     87\u001b[39m     \u001b[38;5;66;03m# Break explicitly a reference cycle\u001b[39;00m\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/urllib3/util/connection.py:73\u001b[39m, in \u001b[36mcreate_connection\u001b[39m\u001b[34m(address, timeout, source_address, socket_options)\u001b[39m\n\u001b[32m     72\u001b[39m     sock.bind(source_address)\n\u001b[32m---> \u001b[39m\u001b[32m73\u001b[39m \u001b[30;43msock\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43mconnect\u001b[39;49m\u001b[30;43m(\u001b[39;49m\u001b[30;43msa\u001b[39;49m\u001b[30;43m)\u001b[39;49m\n\u001b[32m     74\u001b[39m \u001b[38;5;66;03m# Break explicitly a reference cycle\u001b[39;00m\n",
+      "\u001b[31mConnectionRefusedError\u001b[39m: [Errno 111] Connection refused",
+      "\nThe above exception was the direct cause of the following exception:\n",
+      "\u001b[31mNewConnectionError\u001b[39m                        Traceback (most recent call last)",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/urllib3/connectionpool.py:787\u001b[39m, in \u001b[36mHTTPConnectionPool.urlopen\u001b[39m\u001b[34m(self, method, url, body, headers, retries, redirect, assert_same_host, timeout, pool_timeout, release_conn, chunked, body_pos, preload_content, decode_content, **response_kw)\u001b[39m\n\u001b[32m    786\u001b[39m \u001b[38;5;66;03m# Make the request on the HTTPConnection object\u001b[39;00m\n\u001b[32m--> \u001b[39m\u001b[32m787\u001b[39m response = \u001b[30;43mself\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43m_make_request\u001b[39;49m\u001b[30;43m(\u001b[39;49m\n\u001b[32m    788\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43mconn\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    789\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43mmethod\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    790\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43murl\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    791\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43mtimeout\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mtimeout_obj\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    792\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43mbody\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mbody\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    793\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43mheaders\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mheaders\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    794\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43mchunked\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mchunked\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    795\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43mretries\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mretries\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    796\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43mresponse_conn\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mresponse_conn\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    797\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43mpreload_content\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mpreload_content\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    798\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43mdecode_content\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mdecode_content\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    799\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43m*\u001b[39;49m\u001b[30;43m*\u001b[39;49m\u001b[30;43mresponse_kw\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    800\u001b[39m \u001b[30;43m\u001b[39;49m\u001b[30;43m)\u001b[39;49m\n\u001b[32m    802\u001b[39m \u001b[38;5;66;03m# Everything went great!\u001b[39;00m\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/urllib3/connectionpool.py:493\u001b[39m, in \u001b[36mHTTPConnectionPool._make_request\u001b[39m\u001b[34m(self, conn, method, url, body, headers, retries, timeout, chunked, response_conn, preload_content, decode_content, enforce_content_length)\u001b[39m\n\u001b[32m    492\u001b[39m \u001b[38;5;28;01mtry\u001b[39;00m:\n\u001b[32m--> \u001b[39m\u001b[32m493\u001b[39m     \u001b[30;43mconn\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43mrequest\u001b[39;49m\u001b[30;43m(\u001b[39;49m\n\u001b[32m    494\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mmethod\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    495\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43murl\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    496\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mbody\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mbody\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    497\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mheaders\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mheaders\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    498\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mchunked\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mchunked\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    499\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mpreload_content\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mpreload_content\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    500\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mdecode_content\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mdecode_content\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    501\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43menforce_content_length\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43menforce_content_length\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    502\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43m)\u001b[39;49m\n\u001b[32m    504\u001b[39m \u001b[38;5;66;03m# We are swallowing BrokenPipeError (errno.EPIPE) since the server is\u001b[39;00m\n\u001b[32m    505\u001b[39m \u001b[38;5;66;03m# legitimately able to close the connection after sending a valid response.\u001b[39;00m\n\u001b[32m    506\u001b[39m \u001b[38;5;66;03m# With this behaviour, the received response is still readable.\u001b[39;00m\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/urllib3/connection.py:500\u001b[39m, in \u001b[36mHTTPConnection.request\u001b[39m\u001b[34m(self, method, url, body, headers, chunked, preload_content, decode_content, enforce_content_length)\u001b[39m\n\u001b[32m    499\u001b[39m     \u001b[38;5;28mself\u001b[39m.putheader(header, value)\n\u001b[32m--> \u001b[39m\u001b[32m500\u001b[39m \u001b[30;43mself\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43mendheaders\u001b[39;49m\u001b[30;43m(\u001b[39;49m\u001b[30;43m)\u001b[39;49m\n\u001b[32m    502\u001b[39m \u001b[38;5;66;03m# If we're given a body we start sending that in chunks.\u001b[39;00m\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m~/.local/share/uv/python/cpython-3.12.12-linux-x86_64-gnu/lib/python3.12/http/client.py:1333\u001b[39m, in \u001b[36mHTTPConnection.endheaders\u001b[39m\u001b[34m(self, message_body, encode_chunked)\u001b[39m\n\u001b[32m   1332\u001b[39m     \u001b[38;5;28;01mraise\u001b[39;00m CannotSendHeader()\n\u001b[32m-> \u001b[39m\u001b[32m1333\u001b[39m \u001b[30;43mself\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43m_send_output\u001b[39;49m\u001b[30;43m(\u001b[39;49m\u001b[30;43mmessage_body\u001b[39;49m\u001b[30;43m,\u001b[39;49m\u001b[30;43m \u001b[39;49m\u001b[30;43mencode_chunked\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mencode_chunked\u001b[39;49m\u001b[30;43m)\u001b[39;49m\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m~/.local/share/uv/python/cpython-3.12.12-linux-x86_64-gnu/lib/python3.12/http/client.py:1093\u001b[39m, in \u001b[36mHTTPConnection._send_output\u001b[39m\u001b[34m(self, message_body, encode_chunked)\u001b[39m\n\u001b[32m   1092\u001b[39m \u001b[38;5;28;01mdel\u001b[39;00m \u001b[38;5;28mself\u001b[39m._buffer[:]\n\u001b[32m-> \u001b[39m\u001b[32m1093\u001b[39m \u001b[30;43mself\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43msend\u001b[39;49m\u001b[30;43m(\u001b[39;49m\u001b[30;43mmsg\u001b[39;49m\u001b[30;43m)\u001b[39;49m\n\u001b[32m   1095\u001b[39m \u001b[38;5;28;01mif\u001b[39;00m message_body \u001b[38;5;129;01mis\u001b[39;00m \u001b[38;5;129;01mnot\u001b[39;00m \u001b[38;5;28;01mNone\u001b[39;00m:\n\u001b[32m   1096\u001b[39m \n\u001b[32m   1097\u001b[39m     \u001b[38;5;66;03m# create a consistent interface to message_body\u001b[39;00m\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m~/.local/share/uv/python/cpython-3.12.12-linux-x86_64-gnu/lib/python3.12/http/client.py:1037\u001b[39m, in \u001b[36mHTTPConnection.send\u001b[39m\u001b[34m(self, data)\u001b[39m\n\u001b[32m   1036\u001b[39m \u001b[38;5;28;01mif\u001b[39;00m \u001b[38;5;28mself\u001b[39m.auto_open:\n\u001b[32m-> \u001b[39m\u001b[32m1037\u001b[39m     \u001b[30;43mself\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43mconnect\u001b[39;49m\u001b[30;43m(\u001b[39;49m\u001b[30;43m)\u001b[39;49m\n\u001b[32m   1038\u001b[39m \u001b[38;5;28;01melse\u001b[39;00m:\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/urllib3/connection.py:331\u001b[39m, in \u001b[36mHTTPConnection.connect\u001b[39m\u001b[34m(self)\u001b[39m\n\u001b[32m    330\u001b[39m \u001b[38;5;28;01mdef\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[34mconnect\u001b[39m(\u001b[38;5;28mself\u001b[39m) -> \u001b[38;5;28;01mNone\u001b[39;00m:\n\u001b[32m--> \u001b[39m\u001b[32m331\u001b[39m     \u001b[38;5;28mself\u001b[39m.sock = \u001b[30;43mself\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43m_new_conn\u001b[39;49m\u001b[30;43m(\u001b[39;49m\u001b[30;43m)\u001b[39;49m\n\u001b[32m    332\u001b[39m     \u001b[38;5;28;01mif\u001b[39;00m \u001b[38;5;28mself\u001b[39m._tunnel_host:\n\u001b[32m    333\u001b[39m         \u001b[38;5;66;03m# If we're tunneling it means we're connected to our proxy.\u001b[39;00m\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/urllib3/connection.py:219\u001b[39m, in \u001b[36mHTTPConnection._new_conn\u001b[39m\u001b[34m(self)\u001b[39m\n\u001b[32m    218\u001b[39m \u001b[38;5;28;01mexcept\u001b[39;00m \u001b[38;5;167;01mOSError\u001b[39;00m \u001b[38;5;28;01mas\u001b[39;00m e:\n\u001b[32m--> \u001b[39m\u001b[32m219\u001b[39m     \u001b[38;5;28;01mraise\u001b[39;00m NewConnectionError(\n\u001b[32m    220\u001b[39m         \u001b[38;5;28mself\u001b[39m, \u001b[33mf\u001b[39m\u001b[33m\"\u001b[39m\u001b[33mFailed to establish a new connection: \u001b[39m\u001b[38;5;132;01m{\u001b[39;00me\u001b[38;5;132;01m}\u001b[39;00m\u001b[33m\"\u001b[39m\n\u001b[32m    221\u001b[39m     ) \u001b[38;5;28;01mfrom\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[34;01me\u001b[39;00m\n\u001b[32m    223\u001b[39m sys.audit(\u001b[33m\"\u001b[39m\u001b[33mhttp.client.connect\u001b[39m\u001b[33m\"\u001b[39m, \u001b[38;5;28mself\u001b[39m, \u001b[38;5;28mself\u001b[39m.host, \u001b[38;5;28mself\u001b[39m.port)\n",
+      "\u001b[31mNewConnectionError\u001b[39m: HTTPConnection(host='localhost', port=8000): Failed to establish a new connection: [Errno 111] Connection refused",
+      "\nThe above exception was the direct cause of the following exception:\n",
+      "\u001b[31mMaxRetryError\u001b[39m                             Traceback (most recent call last)",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/requests/adapters.py:645\u001b[39m, in \u001b[36mHTTPAdapter.send\u001b[39m\u001b[34m(self, request, stream, timeout, verify, cert, proxies)\u001b[39m\n\u001b[32m    644\u001b[39m \u001b[38;5;28;01mtry\u001b[39;00m:\n\u001b[32m--> \u001b[39m\u001b[32m645\u001b[39m     resp = \u001b[30;43mconn\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43murlopen\u001b[39;49m\u001b[30;43m(\u001b[39;49m\n\u001b[32m    646\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mmethod\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mrequest\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43mmethod\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    647\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43murl\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43murl\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    648\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mbody\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mrequest\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43mbody\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    649\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mheaders\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mrequest\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43mheaders\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    650\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mredirect\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43;01mFalse\u001b[39;49;00m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    651\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43massert_same_host\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43;01mFalse\u001b[39;49;00m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    652\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mpreload_content\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43;01mFalse\u001b[39;49;00m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    653\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mdecode_content\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43;01mFalse\u001b[39;49;00m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    654\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mretries\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mself\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43mmax_retries\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    655\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mtimeout\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mtimeout\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    656\u001b[39m \u001b[30;43m        \u001b[39;49m\u001b[30;43mchunked\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mchunked\u001b[39;49m\u001b[30;43m,\u001b[39;49m\n\u001b[32m    657\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43m)\u001b[39;49m\n\u001b[32m    659\u001b[39m \u001b[38;5;28;01mexcept\u001b[39;00m (ProtocolError, \u001b[38;5;167;01mOSError\u001b[39;00m) \u001b[38;5;28;01mas\u001b[39;00m err:\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/urllib3/connectionpool.py:841\u001b[39m, in \u001b[36mHTTPConnectionPool.urlopen\u001b[39m\u001b[34m(self, method, url, body, headers, retries, redirect, assert_same_host, timeout, pool_timeout, release_conn, chunked, body_pos, preload_content, decode_content, **response_kw)\u001b[39m\n\u001b[32m    839\u001b[39m     new_e = ProtocolError(\u001b[33m\"\u001b[39m\u001b[33mConnection aborted.\u001b[39m\u001b[33m\"\u001b[39m, new_e)\n\u001b[32m--> \u001b[39m\u001b[32m841\u001b[39m retries = \u001b[30;43mretries\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43mincrement\u001b[39;49m\u001b[30;43m(\u001b[39;49m\n\u001b[32m    842\u001b[39m \u001b[30;43m    \u001b[39;49m\u001b[30;43mmethod\u001b[39;49m\u001b[30;43m,\u001b[39;49m\u001b[30;43m \u001b[39;49m\u001b[30;43murl\u001b[39;49m\u001b[30;43m,\u001b[39;49m\u001b[30;43m \u001b[39;49m\u001b[30;43merror\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mnew_e\u001b[39;49m\u001b[30;43m,\u001b[39;49m\u001b[30;43m \u001b[39;49m\u001b[30;43m_pool\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mself\u001b[39;49m\u001b[30;43m,\u001b[39;49m\u001b[30;43m \u001b[39;49m\u001b[30;43m_stacktrace\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43msys\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43mexc_info\u001b[39;49m\u001b[30;43m(\u001b[39;49m\u001b[30;43m)\u001b[39;49m\u001b[30;43m[\u001b[39;49m\u001b[30;43m2\u001b[39;49m\u001b[30;43m]\u001b[39;49m\n\u001b[32m    843\u001b[39m \u001b[30;43m\u001b[39;49m\u001b[30;43m)\u001b[39;49m\n\u001b[32m    844\u001b[39m retries.sleep()\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/urllib3/util/retry.py:535\u001b[39m, in \u001b[36mRetry.increment\u001b[39m\u001b[34m(self, method, url, response, error, _pool, _stacktrace)\u001b[39m\n\u001b[32m    534\u001b[39m     reason = error \u001b[38;5;129;01mor\u001b[39;00m ResponseError(cause)\n\u001b[32m--> \u001b[39m\u001b[32m535\u001b[39m     \u001b[38;5;28;01mraise\u001b[39;00m MaxRetryError(_pool, url, reason) \u001b[38;5;28;01mfrom\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[34;01mreason\u001b[39;00m  \u001b[38;5;66;03m# type: ignore[arg-type]\u001b[39;00m\n\u001b[32m    537\u001b[39m log.debug(\u001b[33m\"\u001b[39m\u001b[33mIncremented Retry for (url=\u001b[39m\u001b[33m'\u001b[39m\u001b[38;5;132;01m%s\u001b[39;00m\u001b[33m'\u001b[39m\u001b[33m): \u001b[39m\u001b[38;5;132;01m%r\u001b[39;00m\u001b[33m\"\u001b[39m, url, new_retry)\n",
+      "\u001b[31mMaxRetryError\u001b[39m: HTTPConnectionPool(host='localhost', port=8000): Max retries exceeded with url: /health (Caused by NewConnectionError(\"HTTPConnection(host='localhost', port=8000): Failed to establish a new connection: [Errno 111] Connection refused\"))",
+      "\nDuring handling of the above exception, another exception occurred:\n",
+      "\u001b[31mConnectionError\u001b[39m                           Traceback (most recent call last)",
+      "\u001b[36mCell\u001b[39m\u001b[36m \u001b[39m\u001b[32mIn[7]\u001b[39m\u001b[32m, line 7\u001b[39m\n\u001b[32m      5\u001b[39m     print(f\"Server health check PASSED  ({ENV_URL})\")\n\u001b[32m      6\u001b[39m \u001b[38;5;28;01mexcept\u001b[39;00m Exception \u001b[38;5;28;01mas\u001b[39;00m exc:\n\u001b[32m----> \u001b[39m\u001b[32m7\u001b[39m     \u001b[38;5;28;01mraise\u001b[39;00m RuntimeError(f\"Server not reachable at {ENV_URL}: {exc}\")\n\u001b[32m      8\u001b[39m \n",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/requests/api.py:73\u001b[39m, in \u001b[36mget\u001b[39m\u001b[34m(url, params, **kwargs)\u001b[39m\n\u001b[32m     63\u001b[39m \u001b[38;5;250m\u001b[39m\u001b[33mr\u001b[39m\u001b[33;03m\"\"\"Sends a GET request.\u001b[39;00m\n\u001b[32m     64\u001b[39m \n\u001b[32m     65\u001b[39m \u001b[33;03m:param url: URL for the new :class:`Request` object.\u001b[39;00m\n\u001b[32m   (...)\u001b[39m\u001b[32m     70\u001b[39m \u001b[33;03m:rtype: requests.Response\u001b[39;00m\n\u001b[32m     71\u001b[39m \u001b[33;03m\"\"\"\u001b[39;00m\n\u001b[32m---> \u001b[39m\u001b[32m73\u001b[39m \u001b[38;5;28;01mreturn\u001b[39;00m \u001b[30;43mrequest\u001b[39;49m\u001b[30;43m(\u001b[39;49m\u001b[30;43m\"\u001b[39;49m\u001b[30;43mget\u001b[39;49m\u001b[30;43m\"\u001b[39;49m\u001b[30;43m,\u001b[39;49m\u001b[30;43m \u001b[39;49m\u001b[30;43murl\u001b[39;49m\u001b[30;43m,\u001b[39;49m\u001b[30;43m \u001b[39;49m\u001b[30;43mparams\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mparams\u001b[39;49m\u001b[30;43m,\u001b[39;49m\u001b[30;43m \u001b[39;49m\u001b[30;43m*\u001b[39;49m\u001b[30;43m*\u001b[39;49m\u001b[30;43mkwargs\u001b[39;49m\u001b[30;43m)\u001b[39;49m\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/requests/api.py:59\u001b[39m, in \u001b[36mrequest\u001b[39m\u001b[34m(method, url, **kwargs)\u001b[39m\n\u001b[32m     58\u001b[39m \u001b[38;5;28;01mwith\u001b[39;00m sessions.Session() \u001b[38;5;28;01mas\u001b[39;00m session:\n\u001b[32m---> \u001b[39m\u001b[32m59\u001b[39m     \u001b[38;5;28;01mreturn\u001b[39;00m \u001b[30;43msession\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43mrequest\u001b[39;49m\u001b[30;43m(\u001b[39;49m\u001b[30;43mmethod\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43mmethod\u001b[39;49m\u001b[30;43m,\u001b[39;49m\u001b[30;43m \u001b[39;49m\u001b[30;43murl\u001b[39;49m\u001b[30;43m=\u001b[39;49m\u001b[30;43murl\u001b[39;49m\u001b[30;43m,\u001b[39;49m\u001b[30;43m \u001b[39;49m\u001b[30;43m*\u001b[39;49m\u001b[30;43m*\u001b[39;49m\u001b[30;43mkwargs\u001b[39;49m\u001b[30;43m)\u001b[39;49m\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/requests/sessions.py:592\u001b[39m, in \u001b[36mSession.request\u001b[39m\u001b[34m(self, method, url, params, data, headers, cookies, files, auth, timeout, allow_redirects, proxies, hooks, stream, verify, cert, json)\u001b[39m\n\u001b[32m    591\u001b[39m send_kwargs.update(settings)\n\u001b[32m--> \u001b[39m\u001b[32m592\u001b[39m resp = \u001b[30;43mself\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43msend\u001b[39;49m\u001b[30;43m(\u001b[39;49m\u001b[30;43mprep\u001b[39;49m\u001b[30;43m,\u001b[39;49m\u001b[30;43m \u001b[39;49m\u001b[30;43m*\u001b[39;49m\u001b[30;43m*\u001b[39;49m\u001b[30;43msend_kwargs\u001b[39;49m\u001b[30;43m)\u001b[39;49m\n\u001b[32m    594\u001b[39m \u001b[38;5;28;01mreturn\u001b[39;00m resp\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/requests/sessions.py:706\u001b[39m, in \u001b[36mSession.send\u001b[39m\u001b[34m(self, request, **kwargs)\u001b[39m\n\u001b[32m    705\u001b[39m \u001b[38;5;66;03m# Send the request\u001b[39;00m\n\u001b[32m--> \u001b[39m\u001b[32m706\u001b[39m r = \u001b[30;43madapter\u001b[39;49m\u001b[30;43m.\u001b[39;49m\u001b[30;43msend\u001b[39;49m\u001b[30;43m(\u001b[39;49m\u001b[30;43mrequest\u001b[39;49m\u001b[30;43m,\u001b[39;49m\u001b[30;43m \u001b[39;49m\u001b[30;43m*\u001b[39;49m\u001b[30;43m*\u001b[39;49m\u001b[30;43mkwargs\u001b[39;49m\u001b[30;43m)\u001b[39;49m\n\u001b[32m    708\u001b[39m \u001b[38;5;66;03m# Total elapsed time of the request (approximately)\u001b[39;00m\n",
+      "\u001b[36mFile \u001b[39m\u001b[32m/dccstor/kirushikesh/personal-projects/openenv-pyre/.venv/lib/python3.12/site-packages/requests/adapters.py:678\u001b[39m, in \u001b[36mHTTPAdapter.send\u001b[39m\u001b[34m(self, request, stream, timeout, verify, cert, proxies)\u001b[39m\n\u001b[32m    676\u001b[39m         \u001b[38;5;28;01mraise\u001b[39;00m SSLError(e, request=request)\n\u001b[32m--> \u001b[39m\u001b[32m678\u001b[39m     \u001b[38;5;28;01mraise\u001b[39;00m \u001b[38;5;167;01mConnectionError\u001b[39;00m(e, request=request)\n\u001b[32m    680\u001b[39m \u001b[38;5;28;01mexcept\u001b[39;00m ClosedPoolError \u001b[38;5;28;01mas\u001b[39;00m e:\n",
+      "\u001b[31mConnectionError\u001b[39m: HTTPConnectionPool(host='localhost', port=8000): Max retries exceeded with url: /health (Caused by NewConnectionError(\"HTTPConnection(host='localhost', port=8000): Failed to establish a new connection: [Errno 111] Connection refused\"))",
+      "\nDuring handling of the above exception, another exception occurred:\n",
+      "\u001b[31mRuntimeError\u001b[39m                              Traceback (most recent call last)",
+      "\u001b[36mCell\u001b[39m\u001b[36m \u001b[39m\u001b[32mIn[7]\u001b[39m\u001b[32m, line 7\u001b[39m\n\u001b[32m      3\u001b[39m     health = requests.get(f\"{ENV_URL}/health\", timeout=\u001b[32m5\u001b[39m)\n\u001b[32m      4\u001b[39m     health.raise_for_status()\n\u001b[32m      5\u001b[39m     print(f\"Server health check PASSED  ({ENV_URL})\")\n\u001b[32m      6\u001b[39m \u001b[38;5;28;01mexcept\u001b[39;00m Exception \u001b[38;5;28;01mas\u001b[39;00m exc:\n\u001b[32m----> \u001b[39m\u001b[32m7\u001b[39m     \u001b[38;5;28;01mraise\u001b[39;00m RuntimeError(f\"Server not reachable at {ENV_URL}: {exc}\")\n\u001b[32m      8\u001b[39m \n\u001b[32m      9\u001b[39m \u001b[38;5;66;03m# Build and load the HF model — this is the expensive step\u001b[39;00m\n\u001b[32m     10\u001b[39m llm = HFChatModel(\n",
+      "\u001b[31mRuntimeError\u001b[39m: Server not reachable at http://localhost:8000: HTTPConnectionPool(host='localhost', port=8000): Max retries exceeded with url: /health (Caused by NewConnectionError(\"HTTPConnection(host='localhost', port=8000): Failed to establish a new connection: [Errno 111] Connection refused\"))"
+     ]
+    }
+   ],
    "source": [
     "# Health check first — fail fast before waiting for the large model to load\n",
     "try:\n",
@@ -855,13 +953,9 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
-  },
-  "language_info": {
-   "name": "python",
-   "version": "3.10.0"
   }
  },
  "nbformat": 4,

frontend/README.md

@@ -1,73 +1,93 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+# Pyre — Frontend Visualization
+
+A cinematic real-time visualization for the **Pyre Crisis Navigation Environment** — a reinforcement learning environment where an LLM agent navigates a burning building.
+
+## Quick start
+
+```bash
+# Open directly in a browser — no build step needed
+open frontend/index.html
+```
+
+The app runs entirely in-browser. **Demo mode** simulates the fire physics in JavaScript (no server required). **Live mode** connects to the deployed environment.
+
+---
+
+## Demo mode vs Live mode
+
+| | Demo | Live |
+|---|---|---|
+| Server needed | ✗ | ✓ |
+| Fire physics | JS port (exact match) | Python server |
+| Full reward rubric | Simplified | Complete |
+| Toggle | Default | Click "Live" in topbar |
+
+**Live server:** `https://krooz-pyre-env.hf.space`
+
+---
+
+## Controls
+
+| Key | Action |
+|---|---|
+| `Space` | Play / pause |
+| `→` | Single step |
+| `R` | New episode |
+| `1`–`5` | Speed ½× / 1× / 2× / 4× / 8× |
+
+Bottom bar: difficulty selector, seed input, speed control, reset.
+
+---
+
+## Recording episodes (Python)
+
+```bash
+pip install requests  # only stdlib used, no install needed
+
+python bridge/recorder.py \
+  --url https://krooz-pyre-env.hf.space/web \
+  --episodes 10 \
+  --difficulty medium \
+  --out episodes/
+```
+
+Episodes are saved as JSON files to `episodes/`. Each file contains full frame-by-frame grid data (cell, fire, smoke grids + agent position + visible cells).
+
+---
+
+## File structure
+
+```
+frontend/
+├── index.html       Main app — open this
+└── js/
+    ├── sim.js       JS port of pyre_env fire simulation + floor plans
+    ├── renderer.js  Canvas2D rendering (fire particles, fog-of-war, agent trail)
+    └── app.js       App controller, charts, HUD, live/demo modes
+
+bridge/
+└── recorder.py      Record live episodes to JSON for replay
+```
+
+---
+
+## Architecture notes
+
+**Rendering:** HTML5 Canvas 2D — sufficient at 60fps for 16×16 grids; additive blending (`globalCompositeOperation: lighter`) for fire glow; ember particle pool (200 max); fog-of-war via per-cell alpha overlay.
+
+**Demo agent:** BFS toward nearest unblocked exit, 15% random exploration, avoids fire cells > 0.4 intensity.
+
+**Live bridge:** Polls `/web/scene` every 800ms; applies grid state to the same rendering pipeline.
+
+---
+
+## Demo script (30-second stage walkthrough)
+
+1. **Open** `frontend/index.html` — fire simulation starts automatically at 1×
+2. **Point out** the dark floor plan canvas with glowing fire cells, fog-of-war, and cyan agent dot
+3. **Slow to ½×** to show per-step fire propagation and smoke spread
+4. **Speed to 4×** — show agent navigating toward exits (green glow), closing doors (blue bars) to slow fire
+5. **Highlight** the side panel: cumulative reward curve dipping on smoke exposure, fire cell count climbing, action histogram
+6. **Describe partial observability** — the dark unexplored cells vs. visible corridor
+7. **Reset (R)** with a different seed to show episode variety
+8. If server is available: click **Live** — "Connected" chip turns green, real Python environment takes over

frontend/dist/assets/index-8TVqpTW-.css

@@ -0,0 +1 @@
+*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f5f2ed;--s1:#fff;--s2:#faf9f6;--s3:#f0ede8;--bd:#e4dfd7;--bd2:#cdc7be;--t1:#1c1712;--t2:#6b6460;--t3:#a8a29e;--fire:#c2410c;--fire2:#c2410c14;--blue:#1d4ed8;--blue2:#1d4ed814;--green:#166534;--green2:#16653414;--amber:#92400e;--amber2:#92400e14;--red:#b91c1c;--red2:#b91c1c14;--gold:#d97706;--gold2:#d977061f;--mono:"DM Mono", "JetBrains Mono", monospace;--sans:"DM Sans", "Inter", system-ui, sans-serif;--r:8px}body{background:var(--bg);color:var(--t1);font-family:var(--sans);font-size:13px;line-height:1.5;overflow:hidden}.shell{grid-template-rows:48px 1fr;height:100vh;display:grid;overflow:hidden}.topbar{background:var(--s1);border-bottom:1px solid var(--bd);z-index:20;align-items:center;gap:16px;padding:0 20px;display:flex;box-shadow:0 1px 3px #0000000a}.brand{align-items:center;gap:10px;display:flex}.brand-icon{background:linear-gradient(135deg,#c2410c,#f97316);border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;display:flex}.brand-name{font-family:var(--mono);color:var(--t1);letter-spacing:.06em;text-transform:uppercase;font-size:15px;font-weight:500}.brand-sep{color:var(--bd2);margin:0 2px}.brand-sub{color:var(--t3);letter-spacing:.08em;font-size:11px;font-family:var(--mono)}.topbar-right{align-items:center;gap:12px;margin-left:auto;display:flex}.live-chip{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--bd);color:var(--t3);background:var(--s2);border-radius:20px;align-items:center;gap:5px;padding:4px 10px;font-size:10px;font-weight:500;display:flex}.live-chip:before{content:"";background:var(--bd2);border-radius:50%;width:6px;height:6px}.live-chip.online{color:var(--green);background:var(--green2);border-color:#16653433}.live-chip.online:before{background:#22c55e;animation:1.2s infinite blink}.live-chip.offline{color:var(--t3);background:var(--s2)}.live-chip.error{color:var(--red);background:var(--red2);border-color:#b91c1c33}.live-chip.error:before{background:var(--red)}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.topbar-ep{font-family:var(--mono);color:var(--t3);align-items:center;gap:6px;font-size:10px;display:flex}.topbar-ep .ep-id{color:var(--blue);font-weight:500}.content{grid-template-columns:1fr 300px;height:100%;display:grid;overflow:hidden}.canvas-zone{background:var(--bg);flex-direction:column;justify-content:flex-start;align-items:center;gap:16px;padding:20px;display:flex;overflow-y:auto}.canvas-frame{box-shadow:0 0 0 1px var(--bd2), 0 4px 24px #0000001a, 0 1px 4px #0000000f;background:#d4c9a8;border-radius:10px;flex-shrink:0;line-height:0;position:relative;overflow:hidden}#map-canvas{max-width:100%;max-height:calc(100vh - 168px);image-rendering:pixelated;display:block}.hud-overlay{pointer-events:none;z-index:10;justify-content:space-between;gap:8px;padding:10px;display:flex;position:absolute;top:0;left:0;right:0}.hud-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#ede6dc;background:#0c0805d1;border:1px solid #ffffff1a;border-radius:6px;flex-direction:column;gap:3px;min-width:130px;padding:7px 10px;display:flex}.hud-card-center{border-color:#fbbf242e;min-width:160px}.hud-r{align-items:center;gap:6px;display:flex}.hlbl{font-family:var(--mono);color:#a8a29eb3;letter-spacing:.1em;text-transform:uppercase;flex-shrink:0;font-size:9px}.hval{font-family:var(--mono);color:#f0e8e0;text-align:right;min-width:26px;margin-left:auto;font-size:13px;font-weight:500}.hbar-bg{background:#ffffff1a;border-radius:3px;flex:1;height:5px;overflow:hidden}.hbar-fill{border-radius:3px;height:100%;transition:width .35s}.hbar-fill.g{background:linear-gradient(90deg,#22c55e,#4ade80)}.hbar-fill.m{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.hbar-fill.c{background:linear-gradient(90deg,#ef4444,#f87171)}.hstatus{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;border-radius:3px;padding:2px 6px;font-size:9px;font-weight:500}.hstatus.good{color:#4ade80;background:#4ade801f}.hstatus.moderate{color:#fbbf24;background:#fbbf241f}.hstatus.low{color:#fb923c;background:#fb923c1f}.hstatus.critical{color:#f87171;background:#f871711f;animation:1s infinite pulse-red}@keyframes pulse-red{0%,to{opacity:1}50%{opacity:.5}}.step-val{font-family:var(--mono);color:#f0e8e0;font-size:12px;font-weight:500}.sbar-bg{background:#ffffff1a;border-radius:2px;width:100%;height:3px;margin-top:1px;overflow:hidden}.sbar-fill{background:linear-gradient(90deg, var(--blue), #60a5fa);border-radius:2px;height:100%;transition:width .35s}.step-meta{font-family:var(--mono);color:#a8a29e8c;letter-spacing:.06em;text-transform:uppercase;margin-top:1px;font-size:8px}.legend{background:var(--s1);border:1px solid var(--bd);border-radius:6px;flex-wrap:wrap;align-items:center;gap:14px;width:100%;max-width:640px;padding:8px 12px;display:flex}.legend-item{font-family:var(--mono);color:var(--t2);letter-spacing:.05em;text-transform:uppercase;align-items:center;gap:5px;font-size:9px;display:flex}.leg-swatch{border-radius:2px;flex-shrink:0;width:12px;height:12px}.dialog{background:var(--s1);border:1px solid var(--bd);border-left:3px solid var(--fire);border-radius:var(--r);font-family:var(--mono);color:var(--t2);width:100%;max-width:640px;padding:10px 14px;font-size:12px;line-height:1.5}.dialog-who{color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px;font-size:9px;display:block}.side{background:var(--s1);border-left:1px solid var(--bd);flex-direction:column;display:flex;overflow:hidden auto}.side-sec{border-bottom:1px solid var(--bd);padding:14px 16px}.sec-hd{font-family:var(--mono);color:var(--t3);text-transform:uppercase;letter-spacing:.12em;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:9px;font-weight:600;display:flex}.sg{grid-template-columns:1fr 1fr;gap:6px;display:grid}.sc{background:var(--s2);border:1px solid var(--bd);border-radius:6px;padding:8px 10px}.sc-l{font-family:var(--mono);color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px;font-size:9px}.sc-v{font-family:var(--mono);color:var(--t1);font-size:14px;font-weight:500}.sc-v.fire{color:var(--fire)}.sc-v.blue{color:var(--blue)}.sc-v.green{color:var(--green)}.sc-v.amber{color:var(--amber)}.sc-v.gold{color:var(--gold)}.srow{border-bottom:1px solid #00000008;justify-content:space-between;align-items:center;padding:5px 0;font-size:12px;display:flex}.srow:last-child{border-bottom:none}.sv{font-family:var(--mono);font-weight:500}.sv.blue{color:var(--blue)}.sv.green{color:var(--green)}.sv.hot{color:var(--fire)}.sv.danger{color:var(--red)}.sv.warn{color:var(--amber)}.sv.gold{color:var(--gold)}.bar-w{margin-top:10px}.bar-lbl{font-family:var(--mono);color:var(--t3);text-transform:uppercase;letter-spacing:.06em;justify-content:space-between;margin-bottom:5px;font-size:9px;display:flex}.bar-bg{background:var(--s2);border:1px solid var(--bd);border-radius:4px;height:6px;overflow:hidden}.bar-fill{border-radius:4px;height:100%;transition:width .4s cubic-bezier(.4,0,.2,1)}.elog{flex-direction:column;gap:2px;max-height:160px;display:flex;overflow-y:auto}.erow{background:0 0;border-radius:4px;align-items:flex-start;gap:6px;padding:4px 6px;font-size:11px;display:flex}.erow.alarm{background:var(--red2);border-left:2px solid var(--red)}.erow.warn-row{background:var(--amber2);border-left:2px solid var(--amber)}.estep{font-family:var(--mono);color:var(--t3);flex-shrink:0;min-width:26px;padding-top:1px;font-size:9px}.etext{color:var(--t2);flex:1;font-size:11px;line-height:1.4}.erwd{font-family:var(--mono);flex-shrink:0;padding-top:1px;font-size:9px;font-weight:500}.erwd.p{color:var(--green)}.erwd.n{color:var(--red)}.dpad{grid-template-columns:repeat(3,1fr);gap:5px;max-width:140px;margin:0 auto;display:grid}.dpad-center{justify-content:center;align-items:center;display:flex}.ctrl-grid{grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.ctrl-row{gap:5px;margin-top:8px;display:flex}.ctrl-btn{background:var(--s2);color:var(--t2);border:1px solid var(--bd);font-family:var(--mono);letter-spacing:.04em;cursor:pointer;text-align:center;border-radius:5px;flex:1;padding:7px 6px;font-size:10px;font-weight:500;transition:all .1s}.ctrl-btn:hover:not(:disabled){background:var(--s3);color:var(--t1);border-color:var(--bd2)}.ctrl-btn:disabled{opacity:.4;cursor:not-allowed}.ctrl-btn.accent{background:var(--fire2);color:var(--fire);border-color:#c2410c40}.ctrl-btn.accent:hover{color:var(--fire);background:#c2410c26}.ctrl-btn.active{background:var(--blue2);color:var(--blue);border-color:#1d4ed840}.ctrl-btn.active:hover{background:#1d4ed826}.ctrl-btn.play{color:#fff;background:linear-gradient(135deg,#c2410c,#f97316);border:none;font-size:11px;box-shadow:0 2px 8px #c2410c4d}.ctrl-btn.play:hover{filter:brightness(1.05);box-shadow:0 3px 12px #c2410c73}.ctrl-status{font-family:var(--mono);color:var(--t3);background:var(--s2);border:1px solid var(--bd);border-left:3px solid var(--bd2);border-radius:5px;margin-top:10px;padding:7px 10px;font-size:10px}.ctrl-status.error{color:var(--red);background:var(--red2);border-left-color:var(--red)}.door-grid{grid-template-columns:1fr 1fr;gap:4px;display:grid}.door-btn{background:var(--s2);border:1px solid var(--bd);font-family:var(--mono);cursor:pointer;color:var(--t2);text-align:center;border-radius:5px;padding:5px 4px;font-size:9px;transition:all .1s}.door-btn:hover{background:var(--s3);color:var(--t1)}.door-btn.open{color:var(--green);background:var(--green2);border-color:#16653440}.door-btn.closed{color:var(--amber);background:var(--amber2);border-color:#92400e40}.door-btn.failed{color:var(--red);background:var(--red2);border-color:#b91c1c40}.report-box{background:var(--s2);border:1px solid var(--bd);max-height:160px;font-family:var(--mono);color:var(--t2);white-space:pre-wrap;border-radius:5px;padding:10px;font-size:9px;line-height:1.5;overflow-y:auto}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px}

frontend/dist/index.html

@@ -1,14 +1,17 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
-    <script type="module" crossorigin src="/assets/index-DmWZ9HHA.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-S-HKcJzd.css">
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pyre — Crisis Navigation</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
+    <script type="module" crossorigin src="/assets/index-CWSK8ZuR.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-8TVqpTW-.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

frontend/index.html

@@ -1,13 +1,16 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pyre — Crisis Navigation</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/src/App.css

@@ -1,367 +1,703 @@
-@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');
-
+/* ── Reset ── */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
+/* ── Design Tokens ── */
 :root {
-  --bg-color: #050608;
-  --panel-bg: rgba(13, 17, 23, 0.85);
-  --accent-blue: #00f2ff;
-  --accent-red: #ff3c3c;
-  --accent-green: #39ff14;
-  --accent-yellow: #fefe33;
-  --text-primary: #e6edf3;
-  --text-secondary: #8b949e;
-  --border-color: #30363d;
-  --glass-border: rgba(255, 255, 255, 0.1);
-  --font-main: 'Rajdhani', sans-serif;
-  --font-mono: 'Share Tech Mono', monospace;
+  --bg:    #f5f2ed;
+  --s1:    #ffffff;
+  --s2:    #faf9f6;
+  --s3:    #f0ede8;
+  --bd:    #e4dfd7;
+  --bd2:   #cdc7be;
+  --t1:    #1c1712;
+  --t2:    #6b6460;
+  --t3:    #a8a29e;
+  --fire:  #c2410c;
+  --fire2: rgba(194,65,12,0.08);
+  --blue:  #1d4ed8;
+  --blue2: rgba(29,78,216,0.08);
+  --green: #166534;
+  --green2:rgba(22,101,52,0.08);
+  --amber: #92400e;
+  --amber2:rgba(146,64,14,0.08);
+  --red:   #b91c1c;
+  --red2:  rgba(185,28,28,0.08);
+  --gold:  #d97706;
+  --gold2: rgba(217,119,6,0.12);
+  --mono: 'DM Mono', 'JetBrains Mono', monospace;
+  --sans: 'DM Sans', 'Inter', system-ui, sans-serif;
+  --r: 8px;
 }
 
 body {
-  background: var(--bg-color);
-  color: var(--text-primary);
-  font-family: var(--font-main);
-  overflow-x: hidden;
-  background-image: 
-    radial-gradient(circle at 50% 50%, rgba(0, 242, 255, 0.03) 0%, transparent 50%),
-    linear-gradient(rgba(13, 17, 23, 0.9), rgba(13, 17, 23, 0.9)),
-    url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
+  background: var(--bg);
+  color: var(--t1);
+  font-family: var(--sans);
+  font-size: 13px;
+  line-height: 1.5;
+  overflow: hidden;
+}
+
+/* ── Shell ── */
+.shell {
+  display: grid;
+  grid-template-rows: 48px 1fr;
+  height: 100vh;
+  overflow: hidden;
 }
 
-.app-container {
-  min-height: 100vh;
-  padding: 24px;
+/* ── Topbar ── */
+.topbar {
+  background: var(--s1);
+  border-bottom: 1px solid var(--bd);
   display: flex;
-  flex-direction: column;
   align-items: center;
+  padding: 0 20px;
+  gap: 16px;
+  z-index: 20;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
 }
 
-.dashboard-header {
-  width: 100%;
-  max-width: 1400px;
+.brand {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 0 0 20px 0;
-  border-bottom: 2px solid var(--border-color);
-  margin-bottom: 24px;
-  position: relative;
+  gap: 10px;
 }
 
-.dashboard-header::after {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  width: 150px;
-  height: 2px;
-  background: var(--accent-blue);
-  box-shadow: 0 0 10px var(--accent-blue);
-}
-
-.dashboard-title {
-  font-size: 28px;
-  font-weight: 700;
-  letter-spacing: 2px;
+.brand-icon {
+  width: 28px;
+  height: 28px;
+  background: linear-gradient(135deg, #c2410c, #f97316);
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.brand-name {
+  font-family: var(--mono);
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--t1);
+  letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--text-primary);
+}
+
+.brand-sep {
+  color: var(--bd2);
+  margin: 0 2px;
+}
+
+.brand-sub {
+  font-size: 11px;
+  color: var(--t3);
+  letter-spacing: 0.08em;
+  font-family: var(--mono);
+}
+
+.topbar-right {
+  margin-left: auto;
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-.dashboard-title span {
-  color: var(--accent-blue);
+.live-chip {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 4px 10px;
+  border-radius: 20px;
+  border: 1px solid var(--bd);
+  color: var(--t3);
+  background: var(--s2);
+}
+
+.live-chip::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--bd2);
+}
+
+.live-chip.online {
+  color: var(--green);
+  background: var(--green2);
+  border-color: rgba(22,101,52,0.2);
 }
 
-.outer {
+.live-chip.online::before { background: #22c55e; animation: blink 1.2s infinite; }
+
+.live-chip.offline {
+  color: var(--t3);
+  background: var(--s2);
+}
+
+.live-chip.error {
+  color: var(--red);
+  background: var(--red2);
+  border-color: rgba(185,28,28,0.2);
+}
+
+.live-chip.error::before { background: var(--red); }
+
+@keyframes blink { 0%,100% { opacity:1 } 50% { opacity:0.3 } }
+
+.topbar-ep {
+  font-family: var(--mono);
+  font-size: 10px;
+  color: var(--t3);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.topbar-ep .ep-id {
+  color: var(--blue);
+  font-weight: 500;
+}
+
+/* ── Content Layout ── */
+.content {
   display: grid;
-  grid-template-columns: 1fr 350px;
-  gap: 24px;
-  width: 100%;
-  max-width: 1400px;
+  grid-template-columns: 1fr 300px;
+  overflow: hidden;
+  height: 100%;
 }
 
-/* ── Main Viewport ─────────���───────────── */
-.viewport-container {
+/* ── Canvas Zone (left) ── */
+.canvas-zone {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 20px;
+  overflow-y: auto;
   gap: 16px;
+  background: var(--bg);
 }
 
-.screen-shell {
-  background: var(--panel-bg);
-  border: 1px solid var(--glass-border);
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+.canvas-frame {
   position: relative;
+  border-radius: 10px;
   overflow: hidden;
+  box-shadow:
+    0 0 0 1px var(--bd2),
+    0 4px 24px rgba(0,0,0,0.10),
+    0 1px 4px rgba(0,0,0,0.06);
+  background: #d4c9a8;
+  line-height: 0;
+  flex-shrink: 0;
 }
 
-.screen-shell::before {
-  content: '';
-  position: absolute;
-  top: 0; left: 0; right: 0; height: 1px;
-  background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
+#map-canvas {
+  display: block;
+  max-width: 100%;
+  max-height: calc(100vh - 48px - 120px);
+  image-rendering: pixelated;
 }
 
-.screen-bezel {
-  background: #000;
-  border-radius: 4px;
-  line-height: 0;
-  position: relative;
-  overflow: auto;
-  border: 1px solid #1a1a1a;
-  max-height: 700px;
+/* ── HUD Overlays on Canvas ── */
+.hud-overlay {
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  display: flex;
+  justify-content: space-between;
+  pointer-events: none;
+  z-index: 10;
+  padding: 10px;
+  gap: 8px;
 }
 
-#map-canvas { 
-  display: block; 
-  image-rendering: pixelated; 
-  margin: 0 auto;
+.hud-card {
+  background: rgba(12, 8, 5, 0.82);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255,255,255,0.10);
+  border-radius: 6px;
+  padding: 7px 10px;
+  color: #ede6dc;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 130px;
 }
 
-/* ── HUD ────────────────────────────────────── */
-.hud {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-  margin-top: 16px;
+.hud-card-center {
+  min-width: 160px;
+  border-color: rgba(251,191,36,0.18);
 }
 
-.hud-card {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid var(--glass-border);
-  border-radius: 4px;
-  padding: 12px;
+.hud-r {
   display: flex;
-  flex-direction: column;
-  gap: 4px;
+  align-items: center;
+  gap: 6px;
 }
 
-.hud-label {
-  font-size: 11px;
-  color: var(--text-secondary);
+.hlbl {
+  font-family: var(--mono);
+  font-size: 9px;
+  color: rgba(168,162,158,0.7);
+  letter-spacing: 0.10em;
   text-transform: uppercase;
-  letter-spacing: 1px;
+  flex-shrink: 0;
 }
 
-.hud-value {
-  font-family: var(--font-mono);
-  font-size: 18px;
-  font-weight: 600;
+.hval {
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 500;
+  color: #f0e8e0;
+  margin-left: auto;
+  min-width: 26px;
+  text-align: right;
+}
+
+.hbar-bg {
+  flex: 1;
+  height: 5px;
+  background: rgba(255,255,255,0.10);
+  border-radius: 3px;
+  overflow: hidden;
 }
 
-.hud-hp { color: var(--accent-red); }
-.hud-step { color: var(--accent-blue); }
-.hud-act { color: var(--accent-green); }
-.hud-moves { color: var(--accent-yellow); }
+.hbar-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.35s ease;
+}
 
-/* ── Dialog / Narrative ─────────────────────── */
-.dialog {
-  background: rgba(0, 0, 0, 0.4);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 16px;
-  font-family: var(--font-mono);
-  font-size: 14px;
-  color: #fff;
-  min-height: 60px;
+.hbar-fill.g { background: linear-gradient(90deg, #22c55e, #4ade80); }
+.hbar-fill.m { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
+.hbar-fill.c { background: linear-gradient(90deg, #ef4444, #f87171); }
+
+.hstatus {
+  font-family: var(--mono);
+  font-size: 9px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+.hstatus.good     { color: #4ade80; background: rgba(74,222,128,0.12); }
+.hstatus.moderate { color: #fbbf24; background: rgba(251,191,36,0.12); }
+.hstatus.low      { color: #fb923c; background: rgba(251,146,60,0.12); }
+.hstatus.critical { color: #f87171; background: rgba(248,113,113,0.12); animation: pulse-red 1s infinite; }
+
+@keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:0.5} }
+
+.step-val {
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 500;
+  color: #f0e8e0;
+}
+
+.sbar-bg {
+  height: 3px;
+  background: rgba(255,255,255,0.10);
+  border-radius: 2px;
+  overflow: hidden;
+  width: 100%;
+  margin-top: 1px;
+}
+
+.sbar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--blue), #60a5fa);
+  border-radius: 2px;
+  transition: width 0.35s ease;
+}
+
+.step-meta {
+  font-family: var(--mono);
+  font-size: 8px;
+  color: rgba(168,162,158,0.55);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-top: 1px;
+}
+
+/* ── Legend below canvas ── */
+.legend {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
-  border-left: 4px solid var(--accent-blue);
+  gap: 14px;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 8px 12px;
+  background: var(--s1);
+  border: 1px solid var(--bd);
+  border-radius: 6px;
+  width: 100%;
+  max-width: 640px;
 }
 
-.dialog-who {
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--mono);
+  font-size: 9px;
+  color: var(--t2);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.leg-swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+/* ── Dialog / Field Report ── */
+.dialog {
+  background: var(--s1);
+  border: 1px solid var(--bd);
+  border-left: 3px solid var(--fire);
+  border-radius: var(--r);
+  padding: 10px 14px;
+  font-family: var(--mono);
   font-size: 12px;
-  color: var(--accent-blue);
-  font-weight: 700;
+  color: var(--t2);
+  width: 100%;
+  max-width: 640px;
+  line-height: 1.5;
+}
+
+.dialog-who {
+  font-size: 9px;
+  color: var(--t3);
   text-transform: uppercase;
+  letter-spacing: 0.10em;
+  display: block;
+  margin-bottom: 3px;
 }
 
-/* ── Panels ─────────────────────────────── */
-.panel {
+/* ── Side Panel (right) ── */
+.side {
+  background: var(--s1);
+  border-left: 1px solid var(--bd);
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
-.card {
-  background: var(--panel-bg);
-  border: 1px solid var(--glass-border);
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+.side-sec {
+  border-bottom: 1px solid var(--bd);
+  padding: 14px 16px;
 }
 
-.card-title {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--accent-blue);
+.sec-hd {
+  font-family: var(--mono);
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--t3);
   text-transform: uppercase;
-  letter-spacing: 1.5px;
-  margin-bottom: 16px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--border-color);
+  letter-spacing: 0.12em;
+  margin-bottom: 10px;
   display: flex;
+  align-items: center;
   justify-content: space-between;
 }
 
+/* ── Stat Grid (2×N) ── */
+.sg {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+
+.sc {
+  background: var(--s2);
+  border: 1px solid var(--bd);
+  border-radius: 6px;
+  padding: 8px 10px;
+}
+
+.sc-l {
+  font-family: var(--mono);
+  font-size: 9px;
+  color: var(--t3);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 2px;
+}
+
+.sc-v {
+  font-family: var(--mono);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--t1);
+}
+
+.sc-v.fire  { color: var(--fire); }
+.sc-v.blue  { color: var(--blue); }
+.sc-v.green { color: var(--green); }
+.sc-v.amber { color: var(--amber); }
+.sc-v.gold  { color: var(--gold); }
+
+/* ── Status Rows ── */
 .srow {
   display: flex;
   justify-content: space-between;
-  font-size: 13px;
-  padding: 6px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
+  align-items: center;
+  padding: 5px 0;
+  font-size: 12px;
+  border-bottom: 1px solid rgba(0,0,0,0.03);
 }
 
 .srow:last-child { border-bottom: none; }
 
-.sv { font-family: var(--font-mono); font-weight: 600; }
-.sv.blue { color: var(--accent-blue); }
-.sv.warn { color: var(--accent-yellow); }
-.sv.hot { color: #ff8c00; }
-.sv.danger { color: var(--accent-red); }
-.sv.green { color: var(--accent-green); }
-
-.bar-w { margin-top: 12px; }
-.bar-lbl { 
-  font-size: 11px; 
-  color: var(--text-secondary); 
-  display: flex; 
-  justify-content: space-between; 
-  margin-bottom: 6px;
+.sv { font-family: var(--mono); font-weight: 500; }
+.sv.blue  { color: var(--blue); }
+.sv.green { color: var(--green); }
+.sv.hot   { color: var(--fire); }
+.sv.danger{ color: var(--red); }
+.sv.warn  { color: var(--amber); }
+.sv.gold  { color: var(--gold); }
+
+/* ── Health bar in side panel ── */
+.bar-w { margin-top: 10px; }
+
+.bar-lbl {
+  font-family: var(--mono);
+  font-size: 9px;
+  color: var(--t3);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
 }
+
 .bar-bg {
-  background: #161b22;
-  border-radius: 10px;
-  height: 8px;
+  background: var(--s2);
+  border: 1px solid var(--bd);
+  border-radius: 4px;
+  height: 6px;
   overflow: hidden;
-  border: 1px solid var(--border-color);
 }
+
 .bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, var(--accent-red), var(--accent-green));
   transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 0 8px rgba(57, 255, 20, 0.3);
+  border-radius: 4px;
+}
+
+/* ── Event Log ── */
+.elog {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 160px;
+  overflow-y: auto;
+}
+
+.erow {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 4px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  background: transparent;
+}
+
+.erow.alarm {
+  background: var(--red2);
+  border-left: 2px solid var(--red);
+}
+
+.erow.warn-row {
+  background: var(--amber2);
+  border-left: 2px solid var(--amber);
+}
+
+.estep {
+  font-family: var(--mono);
+  font-size: 9px;
+  color: var(--t3);
+  min-width: 26px;
+  padding-top: 1px;
+  flex-shrink: 0;
+}
+
+.etext {
+  color: var(--t2);
+  line-height: 1.4;
+  flex: 1;
+  font-size: 11px;
+}
+
+.erwd {
+  font-family: var(--mono);
+  font-size: 9px;
+  font-weight: 500;
+  flex-shrink: 0;
+  padding-top: 1px;
+}
+
+.erwd.p { color: var(--green); }
+.erwd.n { color: var(--red); }
+
+/* ── Direction Pad ── */
+.dpad {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 5px;
+  max-width: 140px;
+  margin: 0 auto;
+}
+
+.dpad-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-/* ── Controls ─────────────────────────────── */
+/* ── Control Buttons ── */
 .ctrl-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
+  gap: 5px;
+}
+
+.ctrl-row {
+  display: flex;
+  gap: 5px;
+  margin-top: 8px;
 }
 
 .ctrl-btn {
-  background: #21262d;
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 10px 4px;
-  font-family: var(--font-main);
-  font-size: 12px;
-  font-weight: 600;
+  background: var(--s2);
+  color: var(--t2);
+  border: 1px solid var(--bd);
+  border-radius: 5px;
+  padding: 7px 6px;
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
   cursor: pointer;
-  transition: all 0.2s;
-  text-transform: uppercase;
+  transition: all 0.1s;
+  text-align: center;
+  flex: 1;
 }
 
 .ctrl-btn:hover:not(:disabled) {
-  background: #30363d;
-  border-color: var(--accent-blue);
-  color: var(--accent-blue);
-  box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
+  background: var(--s3);
+  color: var(--t1);
+  border-color: var(--bd2);
 }
 
-.ctrl-btn:active:not(:disabled) {
-  transform: translateY(1px);
+.ctrl-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
-.ctrl-btn.wide { grid-column: span 3; }
 .ctrl-btn.accent {
-  background: var(--accent-blue);
-  color: #000;
-  border: none;
+  background: var(--fire2);
+  color: var(--fire);
+  border-color: rgba(194,65,12,0.25);
 }
+
 .ctrl-btn.accent:hover {
-  background: #70faff;
+  background: rgba(194,65,12,0.15);
+  color: var(--fire);
 }
 
-.ctrl-input {
-  grid-column: span 2;
-  background: #0d1117;
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 10px;
-  font-family: var(--font-mono);
-  font-size: 13px;
+.ctrl-btn.active {
+  background: var(--blue2);
+  color: var(--blue);
+  border-color: rgba(29,78,216,0.25);
 }
 
-.ctrl-status {
-  margin-top: 16px;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  padding: 8px;
-  background: rgba(0,0,0,0.2);
-  border-radius: 4px;
+.ctrl-btn.active:hover {
+  background: rgba(29,78,216,0.15);
 }
 
-/* ── API Report ─────────────────────────────── */
-.report-box {
-  background: #0d1117;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 12px;
-  max-height: 250px;
-  overflow-y: auto;
-  font-family: var(--font-mono);
+.ctrl-btn.play {
+  background: linear-gradient(135deg, #c2410c, #f97316);
+  color: white;
+  border: none;
   font-size: 11px;
-  color: #7ee787;
-  white-space: pre-wrap;
-  margin-bottom: 12px;
+  box-shadow: 0 2px 8px rgba(194,65,12,0.30);
 }
 
-.report-meta {
-  font-size: 11px;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-  font-family: var(--font-mono);
+.ctrl-btn.play:hover {
+  box-shadow: 0 3px 12px rgba(194,65,12,0.45);
+  filter: brightness(1.05);
 }
 
-/* ── Scrollbars ─────────────────────────────── */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: var(--bg-color); }
-::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: #484f58; }
+.ctrl-status {
+  margin-top: 10px;
+  font-family: var(--mono);
+  font-size: 10px;
+  color: var(--t3);
+  padding: 7px 10px;
+  background: var(--s2);
+  border-radius: 5px;
+  border: 1px solid var(--bd);
+  border-left: 3px solid var(--bd2);
+}
 
-/* ── Modern Accents ─────────────────────────────── */
-.scanline {
-  position: absolute;
-  top: 0; left: 0; width: 100%; height: 2px;
-  background: rgba(0, 242, 255, 0.1);
-  opacity: 0.1;
-  pointer-events: none;
-  animation: scan 8s linear infinite;
+.ctrl-status.error {
+  color: var(--red);
+  background: var(--red2);
+  border-left-color: var(--red);
 }
 
-@keyframes scan {
-  from { transform: translateY(0); }
-  to { transform: translateY(100vh); }
+/* ── Door List ── */
+.door-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
 }
 
-.door-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 0;
-  border-bottom: 1px solid rgba(255,255,255,0.05);
+.door-btn {
+  background: var(--s2);
+  border: 1px solid var(--bd);
+  border-radius: 5px;
+  padding: 5px 4px;
+  font-family: var(--mono);
+  font-size: 9px;
+  cursor: pointer;
+  color: var(--t2);
+  text-align: center;
+  transition: all 0.1s;
+}
+
+.door-btn:hover { background: var(--s3); color: var(--t1); }
+.door-btn.open { color: var(--green); border-color: rgba(22,101,52,0.25); background: var(--green2); }
+.door-btn.closed { color: var(--amber); border-color: rgba(146,64,14,0.25); background: var(--amber2); }
+.door-btn.failed { color: var(--red); border-color: rgba(185,28,28,0.25); background: var(--red2); }
+
+/* ── API Report ── */
+.report-box {
+  background: var(--s2);
+  border: 1px solid var(--bd);
+  border-radius: 5px;
+  padding: 10px;
+  max-height: 160px;
+  overflow-y: auto;
+  font-family: var(--mono);
+  font-size: 9px;
+  color: var(--t2);
+  white-space: pre-wrap;
+  line-height: 1.5;
 }
 
-.door-id { color: var(--accent-blue); font-family: var(--font-mono); font-weight: 700; }
-.d-open { color: var(--accent-green); }
-.d-closed { color: var(--accent-yellow); }
-.d-failed { color: var(--accent-red); }
+/* ── Scrollbar ── */
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 2px; }

frontend/src/App.tsx

@@ -4,37 +4,54 @@ import type { Observation, Door, ApiReport, SceneResponse } from './types';
 import Map2D from './components/Map2D';
 import HUD from './components/HUD';
 import ControlPanel from './components/ControlPanel';
-import { StatusCard, StatusRow } from './components/StatusCard';
 import APIReport from './components/APIReport';
 
 const DOOR_CLOSED = 3;
-const OBSTACLE = 5;
+const OBSTACLE    = 5;
+
+interface EventEntry {
+  step: number;
+  text: string;
+  reward: number;
+  isAlarm?: boolean;
+}
 
 function App() {
-  const [observation, setObservation] = useState<Observation | null>(null);
-  const [sceneData, setSceneData] = useState<SceneResponse | null>(null);
-  const [isAutoWait, setIsAutoWait] = useState(false);
-  const [isPolling, setIsPolling] = useState(true); // Default to polling on
-  const [status, setStatus] = useState('idle');
-  const [isError, setIsError] = useState(false);
-  const [apiReport, setApiReport] = useState<ApiReport | null>(null);
+  const [observation,    setObservation]    = useState<Observation | null>(null);
+  const [sceneData,      setSceneData]      = useState<SceneResponse | null>(null);
+  const [isAutoWait,     setIsAutoWait]     = useState(false);
+  const [isPolling,      setIsPolling]      = useState(true);
+  const [status,         setStatus]         = useState('Idle — waiting for connection');
+  const [isError,        setIsError]        = useState(false);
+  const [apiReport,      setApiReport]      = useState<ApiReport | null>(null);
   const [agentMoveCount, setAgentMoveCount] = useState(0);
   const [agentMoveFlash, setAgentMoveFlash] = useState(0);
-  
-  const prevAgentPos = useRef({ x: -1, y: -1 });
+  const [eventLog,       setEventLog]       = useState<EventEntry[]>([]);
+
+  const prevAgentPos  = useRef({ x: -1, y: -1 });
   const autoWaitTimer = useRef<number | null>(null);
-  const pollTimer = useRef<number | null>(null);
+  const pollTimer     = useRef<number | null>(null);
+  const logEndRef     = useRef<HTMLDivElement | null>(null);
+
+  /* scroll event log to bottom */
+  useEffect(() => {
+    logEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [eventLog]);
 
   const setStatusMsg = (msg: string, error = false) => {
     setStatus(msg);
     setIsError(error);
   };
 
+  const pushLog = (text: string, step: number, reward: number, isAlarm = false) => {
+    setEventLog(prev => [...prev.slice(-49), { step, text, reward, isAlarm }]);
+  };
+
   const applyObservation = useCallback((obs: Observation) => {
     const newX = obs.map_state.agent_x;
     const newY = obs.map_state.agent_y;
-    
-    if (prevAgentPos.current.x !== -1 && (newX !== prevAgentPos.current.x || newY !== prevAgentPos.current.y)) {
+    if (prevAgentPos.current.x !== -1 &&
+       (newX !== prevAgentPos.current.x || newY !== prevAgentPos.current.y)) {
       setAgentMoveFlash(18);
       setAgentMoveCount(c => c + 1);
     }
@@ -42,23 +59,21 @@ function App() {
     setObservation(obs);
   }, []);
 
-  const updateReport = (kind: string, request: any, response: any) => {
+  const updateReport = (kind: string, request: unknown, response: any) => {
     const mapState = response?.observation?.map_state || response?.map_state || response?.graph;
     const template = mapState?.template_name || response?.labels?.episode?.template || 'unknown';
-    const step = mapState?.step_count ?? response?.observation?.elapsed_steps ?? response?.labels?.episode?.step ?? '-';
-    const doors = mapState?.door_registry ? Object.keys(mapState.door_registry).length : (response?.labels?.map?.door_registry ? Object.keys(response.labels.map.door_registry).length : 0);
-    const reward = Number(response?.reward ?? 0).toFixed(3);
-    const done = Boolean(response?.done);
-
+    const step     = mapState?.step_count ?? response?.observation?.elapsed_steps ?? response?.labels?.episode?.step ?? '-';
+    const reward   = Number(response?.reward ?? 0).toFixed(3);
+    const done     = Boolean(response?.done);
     setApiReport({
       call_type: kind,
       request,
       response,
-      meta: `${kind.toUpperCase()} | template=${template} | step=${step} | doors=${doors} | reward=${reward} | done=${done}`
+      meta: `${kind.toUpperCase()} | template=${template} | step=${step} | reward=${reward} | done=${done}`,
     });
   };
 
-  const apiCall = async (path: string, payload: any) => {
+  const apiCall = async (path: string, payload: unknown) => {
     const res = await fetch(path, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -73,22 +88,22 @@ function App() {
 
   const resetLive = async (difficulty = 'medium') => {
     try {
-      setStatusMsg('Initiating System Reset...');
+      setStatusMsg('Initiating Reset...');
       const payload = { difficulty };
       const data = await apiCall('/reset', payload);
       const obs: Observation = data.observation;
-      // Add metadata from reset response if available
-      if (data.observation && data.observation.map_state) {
-          obs.metadata = {
-              fire_sources: data.observation.fire_sources_count ?? 0,
-              fire_spread_rate: data.observation.fire_spread_rate ?? 0,
-              humidity: data.observation.humidity ?? 0,
-              difficulty: difficulty
-          };
+      if (data.observation?.map_state) {
+        obs.metadata = {
+          fire_sources:    data.observation.fire_sources_count ?? 0,
+          fire_spread_rate:data.observation.fire_spread_rate   ?? 0,
+          humidity:        data.observation.humidity           ?? 0,
+          difficulty,
+        };
       }
       applyObservation(obs);
       updateReport('reset', payload, data);
-      setStatusMsg(`System Ready. Reward: ${Number(data.reward || 0).toFixed(2)}`);
+      setStatusMsg(`Ready. Reward: ${Number(data.reward || 0).toFixed(2)}`);
+      pushLog('Episode reset. Assess surroundings.', obs.map_state.step_count, data.reward ?? 0);
     } catch (err: any) {
       setStatusMsg(`Reset Failed: ${err.message}`, true);
     }
@@ -96,45 +111,52 @@ function App() {
 
   const resetUntilDoors = async () => {
     try {
-      setStatusMsg('Searching for Optimal Map Layout...');
+      setStatusMsg('Searching for layout with doors...');
       for (let i = 1; i <= 8; i++) {
         const payload = { difficulty: 'medium' };
-        const data = await apiCall('/reset', payload);
+        const data    = await apiCall('/reset', payload);
         const doorCount = Object.keys(data?.observation?.map_state?.door_registry || {}).length;
         if (doorCount > 0) {
           const obs: Observation = data.observation;
           obs.metadata = {
-              fire_sources: data.observation.fire_sources_count ?? 0,
-              fire_spread_rate: data.observation.fire_spread_rate ?? 0,
-              humidity: data.observation.humidity ?? 0,
-              difficulty: 'medium'
+            fire_sources:    data.observation.fire_sources_count ?? 0,
+            fire_spread_rate:data.observation.fire_spread_rate   ?? 0,
+            humidity:        data.observation.humidity           ?? 0,
+            difficulty:      'medium',
           };
           applyObservation(obs);
           updateReport('reset', payload, data);
-          setStatusMsg(`System Ready. Doors detected in sector.`);
+          setStatusMsg(`System Ready — ${doorCount} door(s) detected.`);
+          pushLog(`Layout found (${doorCount} doors). Doors detected.`, obs.map_state.step_count, 0);
           return;
         }
       }
-      setStatusMsg('Optimal Layout Not Found.', true);
+      setStatusMsg('Optimal layout not found after 8 attempts.', true);
     } catch (err: any) {
       setStatusMsg(`Search Failed: ${err.message}`, true);
     }
   };
 
-  const runAction = async (actionObj: any, label: string) => {
+  const runAction = async (actionObj: unknown, label: string) => {
     try {
-      setStatusMsg(`Executing Action: ${label}...`);
+      setStatusMsg(`Action: ${label}`);
       const payload = { action: actionObj };
-      const data = await apiCall('/step', payload);
+      const data    = await apiCall('/step', payload);
       const obs: Observation = data.observation;
-      // We might need to keep metadata from previous state if not in step response
-      obs.metadata = observation?.metadata; 
+      obs.metadata = observation?.metadata;
       applyObservation(obs);
       updateReport('step', payload, data);
-      setStatusMsg(`Action Executed. Reward: ${Number(data.reward || 0).toFixed(2)}`);
+      const rwd = Number(data.reward || 0);
+      setStatusMsg(`Executed. Reward: ${rwd.toFixed(2)}`);
+      pushLog(
+        obs.last_action_feedback || label,
+        obs.map_state.step_count,
+        rwd,
+        rwd < -0.5,
+      );
       if (data.done) setIsAutoWait(false);
     } catch (err: any) {
-      setStatusMsg(`Execution Error: ${err.message}`, true);
+      setStatusMsg(`Error: ${err.message}`, true);
     }
   };
 
@@ -146,16 +168,13 @@ function App() {
       setSceneData(scene);
       updateReport('scene', {}, scene);
 
-      // Map SceneResponse to Observation for the Map2D component
       const { labels, graph } = scene;
-      
-      // Flatten the 3D grid back to 1D arrays for the legacy renderer
-      const cell_grid: number[] = [];
-      const fire_grid: number[] = [];
+      const cell_grid:  number[] = [];
+      const fire_grid:  number[] = [];
       const smoke_grid: number[] = [];
-      
-      for(let y=0; y<graph.height; y++) {
-        for(let x=0; x<graph.width; x++) {
+
+      for (let y = 0; y < graph.height; y++) {
+        for (let x = 0; x < graph.width; x++) {
           const [type, fire, smoke] = graph.grid[y][x];
           cell_grid.push(type);
           fire_grid.push(fire);
@@ -164,49 +183,40 @@ function App() {
       }
 
       const visible_cells: [number, number][] = [];
-      for(let y=0; y<graph.height; y++) {
-        for(let x=0; x<graph.width; x++) {
-          if (graph.grid[y][x][4] === 1.0) { // is_visible channel
-            visible_cells.push([x, y]);
-          }
+      for (let y = 0; y < graph.height; y++) {
+        for (let x = 0; x < graph.width; x++) {
+          if (graph.grid[y][x][4] === 1.0) visible_cells.push([x, y]);
         }
       }
 
-      const totalFire = fire_grid.reduce((a, b) => a + b, 0);
-      if (totalFire > 0) {
-        console.log(`[DEBUG] Scene received with fire: total_intensity=${totalFire.toFixed(2)}, cells=${fire_grid.filter(v => v > 0).length}`);
-      }
-
       const pseudoObs: Observation = {
         map_state: {
-          cell_grid,
-          fire_grid,
-          smoke_grid,
-          agent_x: labels.agent.x,
-          agent_y: labels.agent.y,
+          cell_grid, fire_grid, smoke_grid,
+          agent_x:      labels.agent.x,
+          agent_y:      labels.agent.y,
           visible_cells,
-          door_registry: labels.map.door_registry,
+          door_registry:  labels.map.door_registry,
           exit_positions: labels.map.exit_positions,
-          step_count: labels.episode.step,
-          max_steps: labels.episode.max_steps,
-          grid_w: graph.width,
-          grid_h: graph.height,
-          template_name: labels.episode.template,
+          step_count:     labels.episode.step,
+          max_steps:      labels.episode.max_steps,
+          grid_w:         graph.width,
+          grid_h:         graph.height,
+          template_name:  labels.episode.template,
         },
-        agent_health: labels.agent.health,
-        location_label: labels.agent.location,
-        smoke_level: labels.agent.smoke_level,
-        wind_dir: labels.episode.wind_dir,
-        fire_visible: labels.agent.fire_visible,
-        fire_direction: labels.agent.fire_direction,
+        agent_health:         labels.agent.health,
+        location_label:       labels.agent.location,
+        smoke_level:          labels.agent.smoke_level,
+        wind_dir:             labels.episode.wind_dir,
+        fire_visible:         labels.agent.fire_visible,
+        fire_direction:       labels.agent.fire_direction,
         last_action_feedback: labels.agent.last_action_feedback,
         narrative: '',
         metadata: {
-            fire_sources: labels.episode.fire_sources,
-            fire_spread_rate: labels.episode.fire_spread_rate,
-            humidity: labels.episode.humidity,
-            difficulty: labels.episode.difficulty,
-        }
+          fire_sources:    labels.episode.fire_sources,
+          fire_spread_rate:labels.episode.fire_spread_rate,
+          humidity:        labels.episode.humidity,
+          difficulty:      labels.episode.difficulty,
+        },
       };
       applyObservation(pseudoObs);
     } catch (err: any) {
@@ -214,7 +224,6 @@ function App() {
     }
   }, [applyObservation, observation?.metadata]);
 
-  // Auto Wait Effect
   useEffect(() => {
     if (isAutoWait) {
       autoWaitTimer.current = window.setInterval(() => runAction({ action: 'wait' }, 'AUTO WAIT'), 900);
@@ -224,7 +233,6 @@ function App() {
     return () => { if (autoWaitTimer.current) clearInterval(autoWaitTimer.current); };
   }, [isAutoWait]);
 
-  // Polling Effect (Scene - 2 times per second)
   useEffect(() => {
     if (isPolling) {
       fetchAndApplyScene();
@@ -235,102 +243,107 @@ function App() {
     return () => { if (pollTimer.current) clearInterval(pollTimer.current); };
   }, [isPolling, fetchAndApplyScene]);
 
+  useEffect(() => {
+    if (agentMoveFlash > 0) {
+      const timer = setTimeout(() => setAgentMoveFlash(f => f - 1), 50);
+      return () => clearTimeout(timer);
+    }
+  }, [agentMoveFlash]);
+
   const setup = async () => {
     setIsPolling(false);
     setAgentMoveCount(0);
     setAgentMoveFlash(0);
+    setEventLog([]);
     prevAgentPos.current = { x: -1, y: -1 };
     await resetLive();
     setIsPolling(true);
   };
 
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text).then(() => setStatusMsg('Payload Copied.'));
-  };
-
-  const buildResetCurl = () => `curl -X POST "http://127.0.0.1:8000/reset" -H "Content-Type: application/json" -d "{\\"difficulty\\":\\"medium\\"}"`;
-  const buildSceneCurl = () => `curl -X GET "http://127.0.0.1:8000/scene"`;
-  const buildStepCurl = () => {
-    const action = apiReport?.request?.action || { action: 'wait' };
-    return `curl -X POST "http://127.0.0.1:8000/step" -H "Content-Type: application/json" -d "${JSON.stringify({ action }).replace(/"/g, '\\"')}"`;
-  };
-
-  const doors: Door[] = Object.entries(observation?.map_state.door_registry || {}).map(([id, [x, y]]) => {
-    const ct = observation?.map_state.cell_grid[y * observation.map_state.grid_w + x];
-    let state: 'open' | 'closed' | 'failed' = 'open';
-    if (ct === DOOR_CLOSED) state = 'closed';
-    if (ct === OBSTACLE) state = 'failed';
-    return { id, x, y, state };
-  }).sort((a, b) => a.id.localeCompare(b.id, undefined, { numeric: true }));
-
-  const fireMax = observation ? Math.max(...observation.map_state.fire_grid) : 0;
-  const fireCells = observation ? observation.map_state.fire_grid.filter(v => v > 0.05).length : 0;
-  const smokeCells = observation ? observation.map_state.smoke_grid.filter(v => v > 0.05).length : 0;
-  const exploredPct = observation ? Math.round((new Set(observation.map_state.visible_cells.map(([x,y]) => `${x},${y}`)).size / observation.map_state.cell_grid.length) * 100) : 0;
+  /* Derived state */
+  const doors: Door[] = Object.entries(observation?.map_state.door_registry || {})
+    .map(([id, [x, y]]) => {
+      const ct = observation?.map_state.cell_grid[y * (observation?.map_state.grid_w ?? 16) + x];
+      let state: 'open' | 'closed' | 'failed' = 'open';
+      if (ct === DOOR_CLOSED) state = 'closed';
+      if (ct === OBSTACLE)   state = 'failed';
+      return { id, x, y, state };
+    })
+    .sort((a, b) => a.id.localeCompare(b.id, undefined, { numeric: true }));
+
+  const fireCells   = observation?.map_state.fire_grid.filter(v => v > 0.05).length ?? 0;
+  const exploredPct = observation
+    ? Math.round((new Set(observation.map_state.visible_cells.map(([vx, vy]) => `${vx},${vy}`)).size
+        / observation.map_state.cell_grid.length) * 100)
+    : 0;
+
+  const hp        = Math.round(observation?.agent_health ?? 0);
+  const hpColor   = hp >= 60 ? 'var(--green)' : hp >= 30 ? 'var(--amber)' : 'var(--red)';
+  const isOnline  = isPolling && !isError;
+  const epId      = sceneData?.labels.episode.id?.slice(0, 8) ?? '—';
 
   return (
-    <div className="app-container">
-      <header className="dashboard-header">
-        <div className="dashboard-title">
-          PYRE <span>EVACUATION PROTOCOL</span>
+    <div className="shell">
+      {/* ── Topbar ── */}
+      <header className="topbar">
+        <div className="brand">
+          <div className="brand-icon">🔥</div>
+          <span className="brand-name">Pyre</span>
+          <span className="brand-sep">/</span>
+          <span className="brand-sub">Crisis Navigation</span>
         </div>
-        <div className="hud-card" style={{ padding: '8px 16px', flexDirection: 'row', gap: '20px' }}>
-          <div style={{ display: 'flex', flexDirection: 'column' }}>
-            <span className="hud-label">Episode ID</span>
-            <span className="sv blue" style={{ fontSize: '12px' }}>{sceneData?.labels.episode.id.slice(0, 8) || 'OFFLINE'}</span>
-          </div>
-          <div style={{ display: 'flex', flexDirection: 'column' }}>
-            <span className="hud-label">Difficulty</span>
-            <span className="sv green" style={{ fontSize: '12px', textTransform: 'uppercase' }}>{sceneData?.labels.episode.difficulty || 'MEDIUM'}</span>
-          </div>
-          <div style={{ display: 'flex', flexDirection: 'column' }}>
-            <span className="hud-label">Status</span>
-            <span className={`sv ${isError ? 'danger' : 'green'}`} style={{ fontSize: '12px' }}>{isError ? 'ERROR' : 'SYNCED'}</span>
+
+        <div className="topbar-right">
+          <div className="topbar-ep">
+            Episode <span className="ep-id">{epId}</span>
           </div>
+          <span className={`live-chip ${isError ? 'error' : isOnline ? 'online' : 'offline'}`}>
+            {isError ? 'Error' : isOnline ? 'Live' : 'Idle'}
+          </span>
         </div>
       </header>
 
-      <div className="outer">
-        {/* MAIN VIEWPORT */}
-        <div className="viewport-container">
-          <div className="screen-shell">
-            <div className="scanline"></div>
-            <div className="screen-bezel">
-              <Map2D 
-                observation={observation} 
-                agentMoveFlash={agentMoveFlash} 
-              />
-            </div>
+      {/* ── Body ── */}
+      <div className="content">
+
+        {/* ── Left: Canvas Zone ── */}
+        <div className="canvas-zone">
+          <div className="canvas-frame">
+            <Map2D observation={observation} agentMoveFlash={agentMoveFlash} />
             <HUD observation={observation} agentMoveCount={agentMoveCount} />
           </div>
 
+          {/* Legend */}
+          <div className="legend">
+            {[
+              { color:'#5e5850', label:'Wall'      },
+              { color:'#3a3530', label:'Obstacle'  },
+              { color:'#e6f4ec', label:'Exit'      },
+              { color:'#7c5c3c', label:'Door'      },
+              { color:'#f97316', label:'Fire'      },
+              { color:'rgba(72,82,96,0.7)', label:'Smoke' },
+              { color:'#3b82f6', label:'Agent'     },
+              { color:'rgba(2,132,199,0.6)', label:'Trail'},
+            ].map(({ color, label }) => (
+              <div key={label} className="legend-item">
+                <div className="leg-swatch" style={{ background: color, border:'1px solid rgba(0,0,0,0.1)' }} />
+                {label}
+              </div>
+            ))}
+          </div>
+
+          {/* Field Report */}
           <div className="dialog">
             <span className="dialog-who">Field Report</span>
-            <span>{observation?.last_action_feedback || 'Establishing neural link with sector...'}</span>
+            {observation?.last_action_feedback || 'Establishing link to field systems...'}
           </div>
-
-          <StatusCard title="Surroundings & Analysis">
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
-              <div>
-                <StatusRow label="Visible Objects" value={sceneData?.labels.surroundings.visible_objects.length || 0} />
-                <StatusRow label="Blocked Exits" value={sceneData?.labels.surroundings.blocked_exit_ids.length || 0} className="danger" />
-              </div>
-              <div>
-                <StatusRow label="Audible Signals" value={sceneData?.labels.surroundings.audible_signals.length || 0} className="warn" />
-                <StatusRow label="Available Actions" value={sceneData?.labels.surroundings.available_actions.length || 0} className="green" />
-              </div>
-            </div>
-            {sceneData?.labels.surroundings.visible_objects.length ? (
-              <div style={{ marginTop: '10px', fontSize: '12px', opacity: 0.8 }}>
-                DETECTION: {sceneData.labels.surroundings.visible_objects.map(o => `${o.type} (${o.id})`).join(', ')}
-              </div>
-            ) : null}
-          </StatusCard>
         </div>
 
-        {/* RIGHT CONTROL PANEL */}
-        <div className="panel">
-          <ControlPanel 
+        {/* ── Right: Side Panel ── */}
+        <aside className="side">
+
+          {/* Controls */}
+          <ControlPanel
             onAction={runAction}
             onReset={resetLive}
             onResetDoors={resetUntilDoors}
@@ -344,42 +357,101 @@ function App() {
             isError={isError}
           />
 
-          <StatusCard title="🔥 Hazard Logistics">
-            <StatusRow label="Ignition Sources" value={observation?.metadata?.fire_sources || 0} className="hot" />
-            <StatusRow label="Spread Probability" value={`${((observation?.metadata?.fire_spread_rate || 0) * 100).toFixed(1)}%`} className="danger" />
-            <StatusRow label="Fire Cells" value={fireCells} className="hot" />
-            <StatusRow label="Smoke Cells" value={smokeCells} className="warn" />
-            <StatusRow label="Exploration" value={`${exploredPct}%`} className="blue" />
-          </StatusCard>
-
-          <StatusCard title="Agent Biometrics">
-            <StatusRow label="POSITION" value={`(${observation?.map_state.agent_x}, ${observation?.map_state.agent_y})`} className="blue" />
-            <StatusRow label="SECTOR" value={observation?.location_label || 'Unknown'} />
-            <StatusRow label="VITAL SIGNS" value={sceneData?.labels.agent.health_status || 'NOMINAL'} className={observation && observation.agent_health < 30 ? 'danger' : 'green'} />
-            <StatusRow label="SMOKE EXPOSURE" value={observation?.smoke_level || 'None'} className="warn" />
+          {/* Agent Biometrics */}
+          <div className="side-sec">
+            <div className="sec-hd">Agent Biometrics</div>
+            <div className="sg">
+              <div className="sc">
+                <div className="sc-l">Health</div>
+                <div className="sc-v" style={{ color: hpColor }}>{hp}%</div>
+              </div>
+              <div className="sc">
+                <div className="sc-l">Status</div>
+                <div className="sc-v" style={{ color: hpColor }}>
+                  {sceneData?.labels.agent.health_status ?? 'NOMINAL'}
+                </div>
+              </div>
+              <div className="sc">
+                <div className="sc-l">Position</div>
+                <div className="sc-v blue">
+                  ({observation?.map_state.agent_x ?? '—'},{observation?.map_state.agent_y ?? '—'})
+                </div>
+              </div>
+              <div className="sc">
+                <div className="sc-l">Sector</div>
+                <div className="sc-v">{observation?.location_label ?? 'Unknown'}</div>
+              </div>
+            </div>
             <div className="bar-w">
-              <div className="bar-lbl"><span>SYSTEM INTEGRITY</span><span>{Math.round(observation?.agent_health || 0)}%</span></div>
+              <div className="bar-lbl">
+                <span>System Integrity</span>
+                <span>{hp}%</span>
+              </div>
               <div className="bar-bg">
-                <div className="bar-fill" style={{ width: `${observation?.agent_health || 0}%` }}></div>
+                <div className="bar-fill" style={{ width: `${hp}%`, background: hpColor }} />
               </div>
             </div>
-          </StatusCard>
-
-          <StatusCard title="Environmental Readings">
-            <StatusRow label="TEMPLATE" value={observation?.map_state.template_name || 'UNKNOWN'} className="green" />
-            <StatusRow label="DIFFICULTY" value={observation?.metadata?.difficulty?.toUpperCase() || 'MEDIUM'} className="blue" />
-            <StatusRow label="ATM. HUMIDITY" value={`${Math.round((observation?.metadata?.humidity || 0) * 100)}%`} />
-            <StatusRow label="WIND VECTOR" value={observation?.wind_dir || 'CALM'} className="blue" />
-            <StatusRow label="MAX HEAT" value={fireMax.toFixed(2)} className="danger" />
-          </StatusCard>
-
-          <APIReport 
-            report={apiReport} 
-            onCopyReset={() => copyToClipboard(buildResetCurl())}
-            onCopyStep={() => copyToClipboard(buildStepCurl())}
-            onCopyScene={() => copyToClipboard(buildSceneCurl())}
-          />
-        </div>
+          </div>
+
+          {/* Environment */}
+          <div className="side-sec">
+            <div className="sec-hd">Environment</div>
+            <div className="sg">
+              <div className="sc">
+                <div className="sc-l">Hazard Cells</div>
+                <div className="sc-v fire">{fireCells}</div>
+              </div>
+              <div className="sc">
+                <div className="sc-l">Explored</div>
+                <div className="sc-v blue">{exploredPct}%</div>
+              </div>
+              <div className="sc">
+                <div className="sc-l">Wind</div>
+                <div className="sc-v">{observation?.wind_dir ?? 'CALM'}</div>
+              </div>
+              <div className="sc">
+                <div className="sc-l">Humidity</div>
+                <div className="sc-v amber">
+                  {Math.round((observation?.metadata?.humidity ?? 0) * 100)}%
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Event Log */}
+          <div className="side-sec" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+            <div className="sec-hd">
+              Event Log
+              <span style={{ fontFamily: 'var(--mono)', fontSize: '9px', color: 'var(--t3)' }}>
+                {eventLog.length} events
+              </span>
+            </div>
+            <div className="elog">
+              {eventLog.length === 0 && (
+                <div style={{ color: 'var(--t3)', fontFamily: 'var(--mono)', fontSize: '10px', padding: '4px' }}>
+                  No events yet…
+                </div>
+              )}
+              {eventLog.map((e, i) => (
+                <div key={i} className={`erow ${e.isAlarm ? 'alarm' : ''}`}>
+                  <span className="estep">T{e.step}</span>
+                  <span className="etext">{e.text}</span>
+                  <span className={`erwd ${e.reward >= 0 ? 'p' : 'n'}`}>
+                    {e.reward >= 0 ? '+' : ''}{e.reward.toFixed(2)}
+                  </span>
+                </div>
+              ))}
+              <div ref={logEndRef} />
+            </div>
+          </div>
+
+          {/* API Report */}
+          <div className="side-sec">
+            <div className="sec-hd">Network Activity</div>
+            <APIReport report={apiReport} onCopyReset={() => {}} onCopyStep={() => {}} onCopyScene={() => {}} />
+          </div>
+
+        </aside>
       </div>
     </div>
   );

frontend/src/components/APIReport.tsx

@@ -10,10 +10,9 @@ interface APIReportProps {
 
 const APIReport: React.FC<APIReportProps> = ({ report, onCopyReset, onCopyStep, onCopyScene }) => {
   return (
-    <div className="card">
-      <div className="card-title">Network Telemetry</div>
-      <div className="report-meta">
-        {report ? report.meta : 'Awaiting data packets...'}
+    <div>
+      <div className="report-meta" style={{ marginBottom: '8px' }}>
+        {report ? report.meta : 'Awaiting telemetry...'}
       </div>
       <div className="report-box">
         {report ? JSON.stringify({
@@ -22,10 +21,10 @@ const APIReport: React.FC<APIReportProps> = ({ report, onCopyReset, onCopyStep,
           response: report.response
         }, null, 2) : '{}'}
       </div>
-      <div className="report-actions">
-        <button className="ctrl-btn" onClick={onCopyScene}>CURL Scene</button>
-        <button className="ctrl-btn" onClick={onCopyReset}>CURL Reset</button>
-        <button className="ctrl-btn" onClick={onCopyStep}>CURL Step</button>
+      <div className="ctrl-grid" style={{ marginTop: '12px' }}>
+        <button className="ctrl-btn" onClick={onCopyScene}>Scene</button>
+        <button className="ctrl-btn" onClick={onCopyReset}>Reset</button>
+        <button className="ctrl-btn" onClick={onCopyStep}>Step</button>
       </div>
     </div>
   );

frontend/src/components/ControlPanel.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import type { Door } from '../types';
 
 interface ControlPanelProps {
-  onAction: (action: any, label: string) => void;
+  onAction: (action: unknown, label: string) => void;
   onReset: (difficulty: string) => void;
   onResetDoors: () => void;
   onSetup: () => void;
@@ -16,51 +16,73 @@ interface ControlPanelProps {
 }
 
 const ControlPanel: React.FC<ControlPanelProps> = ({
-  onAction, onReset, onResetDoors, onSetup,
-  doors, isAutoWait, toggleAutoWait, isPolling, togglePolling,
-  status, isError
+  onAction, onSetup, doors,
+  isAutoWait, toggleAutoWait,
+  isPolling, togglePolling,
+  status, isError,
 }) => {
-
-  const [doorId, setDoorId] = useState(doors[0]?.id || 'door_1');
+  const mv = (dir: string) => onAction({ action: 'move', direction: dir }, `MOVE ${dir.toUpperCase()}`);
 
   return (
-    <div className="card">
-      <div className="card-title">Tactical Interface</div>
-      <div className="ctrl-grid">
-        <button className="ctrl-btn wide accent" onClick={onSetup}>Establish Link & Start Polling</button>
-        
-        <button className="ctrl-btn" onClick={() => onAction({ action: 'move', direction: 'north' }, 'MOVE N')}>▲ N</button>
-        <button className="ctrl-btn" onClick={() => onAction({ action: 'look', direction: 'north' }, 'LOOK N')}>🔍 N</button>
-        <button className="ctrl-btn" onClick={() => onReset('medium')}>Reset</button>
-        <button className="ctrl-btn" onClick={onResetDoors}>Seek Doors</button>
-        
-        <button className="ctrl-btn" onClick={() => onAction({ action: 'move', direction: 'west' }, 'MOVE W')}>◀ W</button>
-        <button className="ctrl-btn" onClick={() => onAction({ action: 'wait' }, 'WAIT')}>Wait</button>
-        <button className="ctrl-btn" onClick={() => onAction({ action: 'move', direction: 'east' }, 'MOVE E')}>E ▶</button>
-        
-        <button className="ctrl-btn" onClick={() => onAction({ action: 'look', direction: 'west' }, 'LOOK W')}>🔍 W</button>
-        <button className="ctrl-btn" onClick={() => onAction({ action: 'move', direction: 'south' }, 'MOVE S')}>▼ S</button>
-        <button className="ctrl-btn" onClick={() => onAction({ action: 'look', direction: 'south' }, 'LOOK S')}>🔍 S</button>
-        
-        <input 
-          className="ctrl-input" 
-          value={doorId} 
-          onChange={(e) => setDoorId(e.target.value)}
-          placeholder="door_id"
-        />
-        <button className="ctrl-btn" onClick={() => onAction({ action: 'door', target_id: doorId, door_state: 'open' }, `OPEN ${doorId}`)}>Open</button>
-        <button className="ctrl-btn" onClick={() => onAction({ action: 'door', target_id: doorId, door_state: 'close' }, `CLOSE ${doorId}`)}>Close</button>
-        
-        <button className="ctrl-btn" onClick={toggleAutoWait}>
-          Auto: {isAutoWait ? 'ON' : 'OFF'}
+    <div className="side-sec">
+      <div className="sec-hd">Tactical Controls</div>
+
+      {/* D-Pad */}
+      <div className="ctrl-grid" style={{ maxWidth: 160, margin: '0 auto', marginBottom: 8 }}>
+        {/* Row 1 */}
+        <div />
+        <button className="ctrl-btn" onClick={() => mv('north')}>▲</button>
+        <div />
+        {/* Row 2 */}
+        <button className="ctrl-btn" onClick={() => mv('west')}>◀</button>
+        <button className="ctrl-btn accent" onClick={() => onAction({ action: 'wait' }, 'WAIT')} title="Wait">●</button>
+        <button className="ctrl-btn" onClick={() => mv('east')}>▶</button>
+        {/* Row 3 */}
+        <div />
+        <button className="ctrl-btn" onClick={() => mv('south')}>▼</button>
+        <div />
+      </div>
+
+      {/* Secondary actions */}
+      <div className="ctrl-row">
+        <button className="ctrl-btn" onClick={() => onAction({ action: 'explore' }, 'EXPLORE')}>SCAN</button>
+        <button className={`ctrl-btn ${isAutoWait ? 'active' : ''}`} onClick={toggleAutoWait}>
+          {isAutoWait ? 'STOP AUTO' : 'AUTO'}
         </button>
-        <button className="ctrl-btn" onClick={togglePolling}>
-          Poll: {isPolling ? 'ON' : 'OFF'}
+        <button className={`ctrl-btn ${isPolling ? 'active' : ''}`} onClick={togglePolling}>
+          {isPolling ? 'LIVE ●' : 'LIVE ○'}
         </button>
       </div>
-      <div className="ctrl-status" style={{ color: isError ? 'var(--accent-red)' : 'var(--text-secondary)' }}>
-        <span style={{ color: 'var(--accent-blue)', marginRight: '8px' }}>&gt;</span> {status}
+
+      {/* Reboot */}
+      <div className="ctrl-row" style={{ marginTop: 6 }}>
+        <button className="ctrl-btn play" onClick={onSetup} style={{ flex: 'none', width: '100%' }}>
+          ↺ REBOOT EPISODE
+        </button>
+      </div>
+
+      {/* Status line */}
+      <div className={`ctrl-status ${isError ? 'error' : ''}`}>
+        {status}
       </div>
+
+      {/* Doors */}
+      {doors.length > 0 && (
+        <div style={{ marginTop: 12 }}>
+          <div className="sec-hd" style={{ marginBottom: 6 }}>Proximity Doors</div>
+          <div className="door-grid">
+            {doors.map(d => (
+              <button
+                key={d.id}
+                className={`door-btn ${d.state}`}
+                onClick={() => onAction({ action: 'interact', door_id: d.id }, `INTERACT ${d.id}`)}
+              >
+                {d.id} [{d.state}]
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 };

frontend/src/components/HUD.tsx

@@ -3,46 +3,140 @@ import type { Observation } from '../types';
 
 interface HUDProps {
   observation: Observation | null;
-  agentMoveCount: number;
+  agentMoveCount?: number;
 }
 
-const HUD: React.FC<HUDProps> = ({ observation, agentMoveCount }) => {
-  if (!observation) return (
-    <div className="hud">
-      <div className="hud-card"><span className="hud-label">Biometrics</span><span className="hud-value">OFFLINE</span></div>
-      <div className="hud-card"><span className="hud-label">Chronology</span><span className="hud-value">-- / --</span></div>
-      <div className="hud-card"><span className="hud-label">Telemetry</span><span className="hud-value">WAITING</span></div>
-      <div className="hud-card"><span className="hud-label">Displacement</span><span className="hud-value">0</span></div>
-    </div>
-  );
-  
-  const { map_state, agent_health } = observation;
+/* Unicode compass arrows for each wind direction */
+const WIND_ARROW: Record<string, string> = {
+  N: '↑', S: '↓', E: '→', W: '←',
+  NE: '↗', NW: '↖', SE: '↘', SW: '↙',
+  CALM: '·',
+};
+
+/* Rotation degrees so the arrow visually points in the right direction */
+const WIND_DEG: Record<string, number> = {
+  N: 0, NE: 45, E: 90, SE: 135,
+  S: 180, SW: 225, W: 270, NW: 315, CALM: 0,
+};
+
+const HUD: React.FC<HUDProps> = ({ observation, agentMoveCount = 0 }) => {
+  if (!observation) return null;
+
+  const { map_state, agent_health, smoke_level, wind_dir, fire_visible, metadata } = observation;
+  const hPct = Math.round(agent_health);
+  const sPct = Math.round((map_state.step_count / map_state.max_steps) * 100);
+
+  let hBarClass    = 'g';
+  let hStatusLabel = 'Nominal';
+  let hStatusClass = 'good';
+
+  if (hPct < 30)      { hBarClass = 'c'; hStatusLabel = 'Critical'; hStatusClass = 'critical'; }
+  else if (hPct < 60) { hBarClass = 'm'; hStatusLabel = 'Moderate'; hStatusClass = 'moderate'; }
+
+  const windDir    = wind_dir || 'CALM';
+  const windArrow  = WIND_ARROW[windDir] ?? '?';
+  const windDeg    = WIND_DEG[windDir]   ?? 0;
+  const spreadRate = metadata?.fire_spread_rate ?? 0;
+  const humidity   = metadata?.humidity ?? 0;
 
   return (
-    <div className="hud">
+    <div className="hud-overlay">
+      {/* ── Left: Health ── */}
       <div className="hud-card">
-        <span className="hud-label">Vitality</span>
-        <span className="hud-value hud-hp">{Math.round(agent_health)}%</span>
+        <div className="hud-r">
+          <span className="hlbl">HP</span>
+          <div className="hbar-bg">
+            <div className={`hbar-fill ${hBarClass}`} style={{ width: `${hPct}%` }} />
+          </div>
+          <span className="hval">{hPct}</span>
+        </div>
+        <div className="hud-r" style={{ gap: '8px', marginTop: '2px' }}>
+          <span className={`hstatus ${hStatusClass}`}>{hStatusLabel}</span>
+          <span style={{ fontFamily: 'var(--mono)', fontSize: '9px', color: 'rgba(168,162,158,.55)', marginLeft: 'auto' }}>
+            💨 {smoke_level || 'clear'}
+          </span>
+        </div>
+        {agentMoveCount > 0 && (
+          <div style={{ fontFamily: 'var(--mono)', fontSize: '8px', color: 'rgba(168,162,158,.4)', marginTop: '2px' }}>
+            moves: {agentMoveCount}
+          </div>
+        )}
       </div>
-      <div className="hud-card">
-        <span className="hud-label">Atmosphere</span>
-        <span className={`hud-value ${observation.smoke_level === 'heavy' ? 'danger' : observation.smoke_level === 'moderate' ? 'warn' : ''}`}>
-          {observation.smoke_level.toUpperCase()}
-        </span>
-      </div>
-      <div className="hud-card">
-        <span className="hud-label">Fire Vision</span>
-        <span className={`hud-value ${observation.fire_visible ? 'hot' : 'green'}`}>
-          {observation.fire_visible ? `${observation.fire_direction?.toUpperCase()}` : 'CLEAR'}
-        </span>
-      </div>
-      <div className="hud-card">
-        <span className="hud-label">Chronology</span>
-        <span className="hud-value hud-step">{map_state.step_count} <span style={{fontSize: '10px', opacity: 0.6}}>/ {map_state.max_steps}</span></span>
+
+      {/* ── Center: Wind & Hazard ── */}
+      <div className="hud-card hud-card-center">
+        {/* Compass rose */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <div style={{ position: 'relative', width: 32, height: 32, flexShrink: 0 }}>
+            {/* compass ring */}
+            <svg width="32" height="32" viewBox="0 0 32 32" style={{ position: 'absolute', top: 0, left: 0 }}>
+              <circle cx="16" cy="16" r="14" fill="none" stroke="rgba(255,255,255,0.12)" strokeWidth="1.5" />
+              <text x="16" y="6"  textAnchor="middle" fontSize="5" fill="rgba(255,255,255,0.35)" dominantBaseline="middle">N</text>
+              <text x="16" y="28" textAnchor="middle" fontSize="5" fill="rgba(255,255,255,0.35)" dominantBaseline="middle">S</text>
+              <text x="4"  y="17" textAnchor="middle" fontSize="5" fill="rgba(255,255,255,0.35)" dominantBaseline="middle">W</text>
+              <text x="28" y="17" textAnchor="middle" fontSize="5" fill="rgba(255,255,255,0.35)" dominantBaseline="middle">E</text>
+            </svg>
+            {/* direction arrow */}
+            <div style={{
+              position: 'absolute', top: '50%', left: '50%',
+              transform: `translate(-50%,-50%) rotate(${windDeg}deg)`,
+              fontSize: windDir === 'CALM' ? '10px' : '14px',
+              color: windDir === 'CALM' ? 'rgba(168,162,158,0.6)' : '#fbbf24',
+              lineHeight: 1,
+              transition: 'transform 0.6s ease',
+            }}>
+              {windArrow}
+            </div>
+          </div>
+
+          <div>
+            <div className="hlbl">Wind</div>
+            <div style={{ fontFamily: 'var(--mono)', fontSize: '13px', fontWeight: 500, color: '#f0e8e0', lineHeight: 1.2 }}>
+              {windDir}
+            </div>
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', gap: '10px', marginTop: '4px' }}>
+          <div>
+            <div className="hlbl">Spread</div>
+            <div style={{ fontFamily: 'var(--mono)', fontSize: '11px', color: spreadRate > 0.5 ? '#f87171' : '#fbbf24' }}>
+              {(spreadRate * 100).toFixed(0)}%
+            </div>
+          </div>
+          <div>
+            <div className="hlbl">Humidity</div>
+            <div style={{ fontFamily: 'var(--mono)', fontSize: '11px', color: humidity > 0.6 ? '#60a5fa' : '#a8a29e' }}>
+              {(humidity * 100).toFixed(0)}%
+            </div>
+          </div>
+          {fire_visible && (
+            <div style={{ alignSelf: 'center' }}>
+              <span style={{
+                fontFamily: 'var(--mono)', fontSize: '9px', fontWeight: 600,
+                color: '#f87171', background: 'rgba(239,68,68,0.15)',
+                border: '1px solid rgba(239,68,68,0.3)',
+                padding: '2px 5px', borderRadius: '3px', letterSpacing: '0.06em',
+                animation: 'pulse-red 1s infinite',
+              }}>
+                🔥 FIRE
+              </span>
+            </div>
+          )}
+        </div>
       </div>
-      <div className="hud-card">
-        <span className="hud-label">Displacement</span>
-        <span className="hud-value hud-moves">{agentMoveCount}</span>
+
+      {/* ── Right: Steps ── */}
+      <div className="hud-card" style={{ textAlign: 'right', minWidth: 'auto' }}>
+        <div className="hud-r" style={{ justifyContent: 'flex-end' }}>
+          <span className="step-val">{map_state.step_count} / {map_state.max_steps}</span>
+        </div>
+        <div className="sbar-bg">
+          <div className="sbar-fill" style={{ width: `${sPct}%` }} />
+        </div>
+        <div className="step-meta">
+          {metadata?.difficulty ?? 'medium'} · {map_state.template_name}
+        </div>
       </div>
     </div>
   );

frontend/src/components/Map2D.tsx

@@ -6,523 +6,467 @@ interface Map2DProps {
   agentMoveFlash: number;
 }
 
-const CELL = 36;
-const FLOOR = 0;
-const WALL = 1;
-const DOOR_OPEN = 2;
+/* ── Cell type constants ── */
+const WALL        = 1;
+const DOOR_OPEN   = 2;
 const DOOR_CLOSED = 3;
-const EXIT = 4;
-const OBSTACLE = 5;
-const DOOR_FAILED = 6;
-
-const ITEMS: Record<string, string> = {
+const EXIT        = 4;
+const OBSTACLE    = 5;
+
+/* ── Wind direction vectors ── */
+const WIND_DIRS: Record<string, [number, number]> = {
+  N: [0, -1], S: [0, 1], E: [1, 0], W: [-1, 0],
+  NW: [-0.7, -0.7], NE: [0.7, -0.7], SW: [-0.7, 0.7], SE: [0.7, 0.7],
+  CALM: [0, 0],
+};
 
+/* ── Agent appearance per health tier ── */
+const AGENT_THEMES = {
+  healthy:  { body: '#3b82f6', dark: '#1d4ed8', arm: '#2563eb', ring: '#fbbf24', ringGlow: 'rgba(251,191,36,0.5)' },
+  moderate: { body: '#f97316', dark: '#c2410c', arm: '#ea580c', ring: '#fb923c', ringGlow: 'rgba(251,146,60,0.5)' },
+  low:      { body: '#dc2626', dark: '#991b1b', arm: '#b91c1c', ring: '#f87171', ringGlow: 'rgba(248,113,113,0.5)' },
+  critical: { body: '#7c3aed', dark: '#5b21b6', arm: '#6d28d9', ring: '#c4b5fd', ringGlow: 'rgba(196,181,253,0.5)' },
 };
 
-const WALL_ITEMS: Record<string, string> = {
+/* ── Ember particle ── */
+class Ember {
+  x: number; y: number; vx: number; vy: number;
+  life: number; decay: number; size: number;
+  type: 'ember' | 'spark';
+
+  constructor(x: number, y: number, windX: number) {
+    const speed = 0.4 + Math.random() * 1.0;
+    const angle = -Math.PI / 2 + (Math.random() - 0.5) * 1.6;
+    this.x = x + (Math.random() - 0.5) * 3;
+    this.y = y + (Math.random() - 0.5) * 3;
+    this.vx = Math.cos(angle) * speed + windX * 0.7;
+    this.vy = Math.sin(angle) * speed - 0.22;
+    this.life = 1.0;
+    this.decay = 0.012 + Math.random() * 0.015;
+    this.size = 1.2 + Math.random() * 2.2;
+    this.type = Math.random() > 0.4 ? 'ember' : 'spark';
+  }
+
+  update() {
+    this.x += this.vx;
+    this.y += this.vy;
+    this.vy -= 0.012;
+    this.vx *= 0.97;
+    this.life -= this.decay;
+  }
+}
 
-};
 
+/* ── Minecraft pixel-art character ── */
+function drawMinecraftAgent(
+  ctx: CanvasRenderingContext2D,
+  cx: number, cy: number, cs: number,
+  theme: typeof AGENT_THEMES.healthy
+) {
+  const u = cs / 18;
+  const left = cx - 5 * u;
+  const top  = cy - 8.5 * u;
+
+  const px = (rx: number, ry: number, rw: number, rh: number, color: string) => {
+    ctx.fillStyle = color;
+    ctx.fillRect(left + rx * u, top + ry * u, rw * u, rh * u);
+  };
+
+  /* Helmet */
+  px(2, 0, 6, 1, '#5c4a3d');
+  /* Head */
+  px(2, 1, 6, 5, '#f5d5a0');
+  /* Face features */
+  px(3, 3, 1, 1, '#3d2b1a'); /* left eye */
+  px(6, 3, 1, 1, '#3d2b1a'); /* right eye */
+  px(4, 5, 2, 1, '#c8937a'); /* mouth */
+  /* Hair accent */
+  px(2, 1, 6, 1, '#7a5c3e');
+
+  /* Body */
+  px(3, 6, 4, 4, theme.body);
+  px(3, 6, 4, 1, theme.dark);
+
+  /* Arms */
+  px(1, 6, 2, 4, theme.arm);
+  px(7, 6, 2, 4, theme.arm);
+
+  /* Legs */
+  px(3, 10, 2, 4, '#1e40af');
+  px(5, 10, 2, 4, '#1e3a8a');
+
+  /* Boots */
+  px(3, 14, 2, 2, '#3a2e26');
+  px(5, 14, 2, 2, '#2e2420');
+}
+
+/* ── Main canvas component ── */
 const Map2D: React.FC<Map2DProps> = ({ observation, agentMoveFlash }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
+  const embersRef = useRef<Ember[]>([]);
+  const trailRef  = useRef<{ x: number; y: number; t: number }[]>([]);
+  const timeRef   = useRef(0);
+  const rafRef    = useRef(0);
 
-  useEffect(() => {
-    if (!observation) return;
+  const CS = 40;
+
+  const animate = () => {
     const canvas = canvasRef.current;
-    if (!canvas) return;
+    if (!canvas || !observation) { rafRef.current = requestAnimationFrame(animate); return; }
     const ctx = canvas.getContext('2d');
     if (!ctx) return;
 
-    const { map_state } = observation;
-    const { grid_w: W, grid_h: H } = map_state;
+    timeRef.current += 0.016;
+    const t = timeRef.current;
 
-    // Helper functions
+    const { map_state, agent_health, wind_dir } = observation;
+    const { grid_w: W, grid_h: H, cell_grid, fire_grid, smoke_grid, agent_x, agent_y } = map_state;
+    const cs = CS;
+    const wv = WIND_DIRS[wind_dir] ?? [0, 0];
     const idx = (x: number, y: number) => y * W + x;
-    const isOuter = (x: number, y: number) => x === 0 || x === W - 1 || y === 0 || y === H - 1;
-    const getZone = (x: number, y: number) => {
-      const ct = map_state.cell_grid[idx(x, y)];
-      if (ct !== FLOOR && ct !== EXIT) return '';
-      if (y >= 5 && y <= 9) return 'corridor';
-      return y <= 4 ? 'north' : 'south';
-    };
-
-    const getHeat = (x: number, y: number) => {
-      let h = 0;
-      const radius = 5;
-      for (let dy = -radius; dy <= radius; dy++) {
-        for (let dx = -radius; dx <= radius; dx++) {
-          const nx = x + dx, ny = y + dy;
-          if (nx < 0 || nx >= W || ny < 0 || ny >= H) continue;
-          const fi = map_state.fire_grid[idx(nx, ny)];
-          if (fi <= 0) continue;
-          const d = Math.sqrt(dx * dx + dy * dy);
-          h = Math.max(h, fi * Math.max(0, 1 - d / (radius + 1)));
+    const visible = new Set(map_state.visible_cells.map(([vx, vy]) => `${vx},${vy}`));
+
+    /* ── Canvas bg ── */
+    ctx.fillStyle = '#c8b890';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    /* ── Base layer ── */
+    for (let y = 0; y < H; y++) {
+      for (let x = 0; x < W; x++) {
+        const ct = cell_grid[idx(x, y)];
+        const px = x * cs, py = y * cs;
+
+        switch (ct) {
+          case WALL: {
+            ctx.fillStyle = '#5e5850';
+            ctx.fillRect(px, py, cs, cs);
+            ctx.fillStyle = 'rgba(255,255,255,0.28)';
+            ctx.fillRect(px, py, cs, 2);
+            ctx.fillRect(px, py + 2, 2, cs - 2);
+            ctx.fillStyle = 'rgba(0,0,0,0.45)';
+            ctx.fillRect(px, py + cs - 2, cs, 2);
+            ctx.fillRect(px + cs - 2, py, 2, cs - 2);
+            /* center mortar cross */
+            ctx.fillStyle = 'rgba(0,0,0,0.12)';
+            ctx.fillRect(px + cs / 2 - 1, py, 2, cs);
+            ctx.fillRect(px, py + cs / 2 - 1, cs, 2);
+            break;
+          }
+          case OBSTACLE: {
+            ctx.fillStyle = '#3a3530';
+            ctx.fillRect(px, py, cs, cs);
+            ctx.fillStyle = 'rgba(255,80,0,0.55)';
+            ctx.fillRect(px, py, cs, 3);
+            ctx.fillRect(px, py, 3, cs);
+            ctx.fillStyle = 'rgba(0,0,0,0.5)';
+            ctx.fillRect(px, py + cs - 3, cs, 3);
+            ctx.fillRect(px + cs - 3, py, 3, cs);
+            break;
+          }
+          default: {
+            /* Minecraft checkerboard floor */
+            ctx.fillStyle = (x + y) % 2 === 0 ? '#e8d8b8' : '#d0be98';
+            ctx.fillRect(px, py, cs, cs);
+            /* tile bevel */
+            ctx.fillStyle = 'rgba(255,255,255,0.20)';
+            ctx.fillRect(px, py, cs, 2);
+            ctx.fillRect(px, py + 2, 2, cs - 2);
+            ctx.fillStyle = 'rgba(0,0,0,0.18)';
+            ctx.fillRect(px, py + cs - 2, cs, 2);
+            ctx.fillRect(px + cs - 2, py, 2, cs - 2);
+          }
         }
       }
-      return Math.min(1, h * 1.15);
-    };
-
-    // Drawing functions
-    const drawFloorCorridor = (px: number, py: number) => {
-      const s = CELL, hs = s / 2;
-      ctx.fillStyle = '#C8A260'; ctx.fillRect(px, py, s, s);
-      ctx.fillStyle = '#D8B270'; ctx.fillRect(px, py, hs, hs);
-      ctx.fillStyle = '#D8B270'; ctx.fillRect(px + hs, py + hs, hs, hs);
-      ctx.fillStyle = '#B89050'; ctx.fillRect(px + hs, py, hs, hs);
-      ctx.fillStyle = '#B89050'; ctx.fillRect(px, py + hs, hs, hs);
-      ctx.strokeStyle = '#A07838'; ctx.lineWidth = 0.8;
-      ctx.beginPath(); ctx.moveTo(px + hs, py); ctx.lineTo(px + hs, py + s); ctx.stroke();
-      ctx.beginPath(); ctx.moveTo(px, py + hs); ctx.lineTo(px + s, py + hs); ctx.stroke();
-      ctx.strokeStyle = '#886020'; ctx.lineWidth = 0.5;
-      ctx.strokeRect(px + .5, py + .5, s - 1, s - 1);
-    };
-
-    const drawFloorRoom = (px: number, py: number) => {
-      const s = CELL;
-      ctx.fillStyle = '#E2D8C4'; ctx.fillRect(px, py, s, s);
-      ctx.fillStyle = '#ECE4D0'; ctx.fillRect(px + 2, py + 2, s - 4, s - 4);
-      ctx.strokeStyle = '#CCC2AE'; ctx.lineWidth = 0.7;
-      ctx.beginPath(); ctx.moveTo(px + s / 2, py + 2); ctx.lineTo(px + s / 2, py + s - 2); ctx.stroke();
-      ctx.beginPath(); ctx.moveTo(px + 2, py + s / 2); ctx.lineTo(px + s - 2, py + s / 2); ctx.stroke();
-      ctx.strokeStyle = '#BCB2A0'; ctx.lineWidth = 0.5;
-      ctx.strokeRect(px + .5, py + .5, s - 1, s - 1);
-    };
-
-    const drawWallOuter = (px: number, py: number) => {
-      const s = CELL;
-      ctx.fillStyle = '#5C6470'; ctx.fillRect(px, py, s, s);
-      ctx.fillStyle = '#80889A'; ctx.fillRect(px, py, s, 6);
-      ctx.fillStyle = '#70788A'; ctx.fillRect(px, py + 6, s, 3);
-      ctx.fillStyle = '#404850'; ctx.fillRect(px, py + s - 3, s, 3);
-      ctx.strokeStyle = '#4A5260'; ctx.lineWidth = 0.7;
-      [13, 23, 30].forEach(ly => { ctx.beginPath(); ctx.moveTo(px, py + ly); ctx.lineTo(px + s, py + ly); ctx.stroke(); });
-      ctx.lineWidth = 0.4;
-      [[0, 14, 10], [14, 10, 18], [24, 9, 9]].forEach(([ry, h, off]) => {
-        for (let vx = off; vx < s; vx += 18) { if (vx > 0 && vx < s) { ctx.beginPath(); ctx.moveTo(px + vx, py + ry + 8); ctx.lineTo(px + vx, py + ry + 8 + h); ctx.stroke(); } }
-      });
-      ctx.strokeStyle = '#282E38'; ctx.lineWidth = 1;
-      ctx.strokeRect(px + .5, py + .5, s - 1, s - 1);
-    };
-
-    const drawWallInner = (px: number, py: number) => {
-      const s = CELL;
-      ctx.fillStyle = '#726860'; ctx.fillRect(px, py, s, s);
-      ctx.fillStyle = '#928880'; ctx.fillRect(px, py, s, 5);
-      ctx.fillStyle = '#827870'; ctx.fillRect(px, py + 5, s, 2);
-      ctx.fillStyle = '#524840'; ctx.fillRect(px, py + s - 2, s, 2);
-      ctx.strokeStyle = '#605850'; ctx.lineWidth = 0.6;
-      for (let i = 1; i <= 4; i++) { const ly = py + Math.round(i * s / 5); ctx.beginPath(); ctx.moveTo(px + 2, ly); ctx.lineTo(px + s - 2, ly); ctx.stroke(); }
-      ctx.strokeStyle = '#403830'; ctx.lineWidth = 1;
-      ctx.strokeRect(px + .5, py + .5, s - 1, s - 1);
-    };
-
-    const drawWallWithItem = (px: number, py: number, item: string) => {
-      const x = px / CELL | 0, y = py / CELL | 0;
-      if (isOuter(x, y)) drawWallOuter(px, py); else drawWallInner(px, py);
-      const s = CELL, cx = px + s / 2;
-      if (item === 'alarm_wall') {
-        ctx.fillStyle = '#AA0000'; ctx.fillRect(px + 8, py + 10, 20, 16);
-        ctx.fillStyle = '#CC1010'; ctx.fillRect(px + 8, py + 10, 20, 3);
-        ctx.fillStyle = '#FFD040';
-        ctx.beginPath(); ctx.arc(cx, py + 19, 4, 0, Math.PI * 2); ctx.fill();
-        ctx.fillStyle = '#AA0000';
-        ctx.beginPath(); ctx.arc(cx, py + 19, 2.5, 0, Math.PI * 2); ctx.fill();
-        ctx.font = 'bold 4px monospace'; ctx.textAlign = 'center';
-        ctx.fillStyle = '#FF4040'; ctx.fillText('FIRE', cx, py + 30);
-        ctx.fillStyle = 'rgba(255,0,0,0.10)'; ctx.fillRect(px, py, s, s);
-      }
-      if (item === 'exit_sign') {
-        ctx.fillStyle = '#00A030'; ctx.fillRect(px + 5, py + 12, 26, 12);
-        ctx.fillStyle = '#00C840'; ctx.fillRect(px + 5, py + 12, 26, 3);
-        ctx.fillStyle = '#FFFFFF';
-        ctx.font = 'bold 5px monospace'; ctx.textAlign = 'center';
-        ctx.fillText('EXIT', cx, py + 22);
-        ctx.fillStyle = '#80FF80'; ctx.beginPath();
-        ctx.moveTo(cx - 2, py + 9); ctx.lineTo(cx + 4, py + 12); ctx.lineTo(cx - 2, py + 12); ctx.closePath(); ctx.fill();
-      }
-    };
-
-    const drawDoorOpen = (px: number, py: number) => {
-      const s = CELL, fw = 5;
-      drawFloorCorridor(px, py);
-      ctx.fillStyle = '#5C2408'; ctx.fillRect(px, py, fw, s); ctx.fillRect(px + s - fw, py, fw, s); ctx.fillRect(px, py, s, fw);
-      ctx.fillStyle = '#8A3A18'; ctx.fillRect(px + 1, py + fw, fw - 2, s - fw - 1); ctx.fillRect(px + s - fw + 1, py + fw, fw - 2, s - fw - 1);
-      ctx.fillStyle = 'rgba(200,230,255,0.05)'; ctx.fillRect(px + fw, py + fw, s - fw * 2, s - fw);
-      ctx.fillStyle = '#28A040'; ctx.fillRect(px + fw, py + fw, s - fw * 2, 3);
-      ctx.fillStyle = '#40C060'; ctx.fillRect(px + fw, py + fw, s - fw * 2, 1);
-    };
-
-    const drawDoorClosed = (px: number, py: number) => {
-      const s = CELL;
-      ctx.fillStyle = '#240E05'; ctx.fillRect(px, py, s, s);
-      ctx.fillStyle = '#7A3E16'; ctx.fillRect(px + 3, py + 2, s - 6, s - 4);
-      ctx.fillStyle = '#9A5E34'; ctx.fillRect(px + 3, py + 2, s - 6, 3); ctx.fillRect(px + 3, py + 2, 3, s - 4);
-      ctx.fillStyle = '#5A2608'; ctx.fillRect(px + 3, py + s - 4, s - 6, 2); ctx.fillRect(px + s - 6, py + 2, 3, s - 4);
-      ctx.fillStyle = '#6A2E10'; ctx.fillRect(px + 8, py + 7, s - 16, s - 16);
-      ctx.fillStyle = '#8A4E2E'; ctx.fillRect(px + 8, py + 7, s - 16, 2); ctx.fillRect(px + 8, py + 7, 2, s - 16);
-      ctx.fillStyle = '#4A1E08'; ctx.fillRect(px + 8, py + s - 11, s - 16, 2); ctx.fillRect(px + s - 10, py + 7, 2, s - 16);
-      ctx.fillStyle = '#C89020'; ctx.beginPath(); ctx.arc(px + s - 10, py + s / 2, 3, 0, Math.PI * 2); ctx.fill();
-      ctx.fillStyle = '#F0C040'; ctx.beginPath(); ctx.arc(px + s - 11, py + s / 2 - 1, 1.5, 0, Math.PI * 2); ctx.fill();
-      ctx.strokeStyle = '#140800'; ctx.lineWidth = 1; ctx.strokeRect(px + .5, py + .5, s - 1, s - 1);
-    };
-
-    const drawDoorFailed = (px: number, py: number) => {
-      const s = CELL;
-      ctx.fillStyle = '#180C04'; ctx.fillRect(px, py, s, s);
-      ctx.fillStyle = '#D0A858'; ctx.fillRect(px + 5, py + 5, s - 10, s - 10);
-      ctx.fillStyle = '#B08840'; ctx.fillRect(px + 5, py + 5, s - 10, s - 10);
-      ctx.fillStyle = '#281408'; ctx.fillRect(px + 7, py + 7, 8, 6); ctx.fillRect(px + 18, py + 18, 8, 5);
-      ctx.fillStyle = '#380E04'; ctx.fillRect(px + 12, py + 12, 8, 8);
-      ctx.fillStyle = '#300A02';
-      ctx.fillRect(px, py, 4, s); ctx.fillRect(px + s - 4, py, 4, s); ctx.fillRect(px, py, s, 4);
-      ctx.fillStyle = '#A03010'; ctx.fillRect(px + 2, py + 8, 2, 2); ctx.fillRect(px + s - 4, py + 14, 2, 2);
-      ctx.fillStyle = '#D05020'; ctx.fillRect(px + 2, py + 9, 1, 1); ctx.fillRect(px + s - 4, py + 15, 1, 1);
-      ctx.strokeStyle = 'rgba(200,30,10,0.7)'; ctx.lineWidth = 1.5;
-      ctx.beginPath(); ctx.moveTo(px + 6, py + 6); ctx.lineTo(px + s - 6, py + s - 6); ctx.stroke();
-      ctx.beginPath(); ctx.moveTo(px + s - 6, py + 6); ctx.lineTo(px + 6, py + s - 6); ctx.stroke();
-      ctx.strokeStyle = '#100600'; ctx.lineWidth = 1;
-      ctx.strokeRect(px + .5, py + .5, s - 1, s - 1);
-    };
-
-    const drawExit = (px: number, py: number) => {
-      const s = CELL;
-      ctx.fillStyle = '#0C7224'; ctx.fillRect(px, py, s, s);
-      ctx.fillStyle = '#1A9038'; ctx.fillRect(px + 2, py + 2, s - 4, s - 4);
-      ctx.fillStyle = '#30A850'; ctx.fillRect(px + 4, py + 4, s - 8, s - 8);
-      ctx.fillStyle = '#FFFFFF';
-      const cx = px + s / 2, ay = py + 6;
-      ctx.beginPath(); ctx.moveTo(cx, ay); ctx.lineTo(cx + 7, ay + 8); ctx.lineTo(cx + 4, ay + 8);
-      ctx.lineTo(cx + 4, ay + 19); ctx.lineTo(cx - 4, ay + 19); ctx.lineTo(cx - 4, ay + 8); ctx.lineTo(cx - 7, ay + 8);
-      ctx.closePath(); ctx.fill();
-      ctx.font = 'bold 5px monospace'; ctx.textAlign = 'center';
-      ctx.fillStyle = '#FFFFFF'; ctx.fillText('EXIT', cx, py + s - 4);
-      ctx.strokeStyle = '#085018'; ctx.lineWidth = 2; ctx.strokeRect(px + 1, py + 1, s - 2, s - 2);
-      ctx.strokeStyle = '#48C860'; ctx.lineWidth = 0.5; ctx.strokeRect(px + 3.5, py + 3.5, s - 7, s - 7);
-    };
-
-    const drawDesk = (px: number, py: number) => {
-      const s = CELL;
-      ctx.fillStyle = '#7B5A30'; ctx.fillRect(px + 2, py + 14, s - 4, s - 20);
-      ctx.fillStyle = '#9B7A50'; ctx.fillRect(px + 2, py + 14, s - 4, 3); ctx.fillRect(px + 2, py + 14, 3, s - 20);
-      ctx.fillStyle = '#5A3A18'; ctx.fillRect(px + 3, py + s - 8, 3, 6); ctx.fillRect(px + s - 6, py + s - 8, 3, 6);
-      ctx.fillStyle = '#F0E8D0'; ctx.fillRect(px + 6, py + 17, 9, 4);
-      ctx.fillStyle = '#C8C0B0'; ctx.fillRect(px + 17, py + 16, 7, 3);
-    };
-
-    const drawMonitor = (px: number, py: number) => {
-      const s = CELL;
-      ctx.fillStyle = '#1A2030'; ctx.fillRect(px + 6, py + 4, s - 12, 15);
-      ctx.fillStyle = '#283050'; ctx.fillRect(px + 7, py + 5, s - 14, 13);
-      ctx.fillStyle = '#102848'; ctx.fillRect(px + 8, py + 6, s - 16, 11);
-      ctx.fillStyle = '#204880'; ctx.fillRect(px + 9, py + 7, s - 18, 4);
-      ctx.fillStyle = '#38A0D8'; ctx.fillRect(px + 9, py + 7, s - 18, 1);
-      ctx.fillStyle = '#286080'; ctx.fillRect(px + 9, py + 10, s - 18, 1);
-      ctx.fillStyle = '#204060'; ctx.fillRect(px + 9, py + 12, 8, 1);
-      ctx.fillStyle = '#00E060'; ctx.fillRect(px + s / 2 + 5, py + 19, 2, 2);
-      ctx.fillStyle = '#202028'; ctx.fillRect(px + s / 2 - 2, py + 20, 5, 4); ctx.fillRect(px + s / 2 - 4, py + 23, 9, 2);
-    };
-
-    const drawChair = (px: number, py: number) => {
-      const s = CELL;
-      ctx.fillStyle = '#2A3050'; ctx.fillRect(px + 7, py + 16, s - 14, 10);
-      ctx.fillStyle = '#3A4068'; ctx.fillRect(px + 7, py + 16, s - 14, 3);
-      ctx.fillStyle = '#2A3050'; ctx.fillRect(px + 9, py + 8, s - 18, 9);
-      ctx.fillStyle = '#3A4068'; ctx.fillRect(px + 9, py + 8, s - 18, 2);
-      ctx.fillStyle = '#303844'; ctx.fillRect(px + 5, py + 16, 4, 7); ctx.fillRect(px + s - 9, py + 16, 4, 7);
-      ctx.strokeStyle = '#484E58'; ctx.lineWidth = 1.2;
-      const base = [0, -8, 6, 5, -6, 5, -9, -2, 9, -2];
-      for (let i = 0; i < 5; i++) {
-        ctx.beginPath(); ctx.moveTo(px + s / 2, py + s - 4); ctx.lineTo(px + s / 2 + base[i * 2], py + s - 4 + base[i * 2 + 1]); ctx.stroke();
-      }
-    };
-
-    const drawPlant = (px: number, py: number) => {
-      const s = CELL, cx = px + s / 2;
-      ctx.fillStyle = '#C06030'; ctx.fillRect(cx - 6, py + 24, 12, 8);
-      ctx.fillStyle = '#E08050'; ctx.fillRect(cx - 6, py + 24, 12, 2);
-      ctx.fillStyle = '#4A2A10'; ctx.fillRect(cx - 5, py + 26, 10, 4);
-      ctx.fillStyle = '#208038'; ctx.beginPath(); ctx.arc(cx, py + 15, 7, 0, Math.PI * 2); ctx.fill();
-      ctx.fillStyle = '#208038'; ctx.beginPath(); ctx.arc(cx - 6, py + 19, 5, 0, Math.PI * 2); ctx.fill();
-      ctx.fillStyle = '#208038'; ctx.beginPath(); ctx.arc(cx + 6, py + 19, 5, 0, Math.PI * 2); ctx.fill();
-      ctx.fillStyle = '#30C050'; ctx.beginPath(); ctx.arc(cx - 1, py + 13, 4, 0, Math.PI * 2); ctx.fill();
-      ctx.fillStyle = '#48D860'; ctx.beginPath(); ctx.arc(cx - 2, py + 12, 2, 0, Math.PI * 2); ctx.fill();
-    };
-
-    const drawFiling = (px: number, py: number) => {
-      const s = CELL;
-      ctx.fillStyle = '#788090'; ctx.fillRect(px + 6, py + 3, s - 12, s - 8);
-      ctx.fillStyle = '#90A0B0'; ctx.fillRect(px + 6, py + 3, s - 12, 2);
-      ctx.fillStyle = '#586070'; ctx.fillRect(px + 6, py + s - 8, s - 12, 3);
-      ctx.strokeStyle = '#485060'; ctx.lineWidth = 0.8;
-      [11, 19, 27].forEach(y => { ctx.beginPath(); ctx.moveTo(px + 6, py + y); ctx.lineTo(px + s - 6, py + y); ctx.stroke(); });
-      ctx.fillStyle = '#B8C8D8';
-      [8, 16, 24].forEach(dy => { ctx.fillRect(px + s / 2 - 4, py + dy + 1, 8, 2); });
-    };
-
-    const drawExtinguisher = (px: number, py: number) => {
-      const s = CELL, cx = px + s / 2;
-      ctx.fillStyle = '#BE0808'; ctx.fillRect(cx - 5, py + 8, 10, 20);
-      ctx.fillStyle = '#E01010'; ctx.fillRect(cx - 5, py + 8, 10, 3);
-      ctx.fillStyle = '#DD2828'; ctx.fillRect(cx - 4, py + 11, 3, 14);
-      ctx.fillStyle = '#282828'; ctx.fillRect(cx - 1, py + 4, 3, 5);
-      ctx.fillRect(cx + 1, py + 4, 5, 2);
-      ctx.fillStyle = '#FFFFFF'; ctx.fillRect(cx - 5, py + 16, 10, 3);
-      ctx.fillStyle = '#FFFFFF'; ctx.font = 'bold 4px monospace'; ctx.textAlign = 'center';
-      ctx.fillText('EXT', cx, py + 23);
-      ctx.fillStyle = '#700000'; ctx.fillRect(cx - 5, py + 26, 10, 2);
-      ctx.fillStyle = 'rgba(220,30,10,0.12)'; ctx.fillRect(px, py, s, s);
-    };
-
-    const drawHazardMarker = (px: number, py: number) => {
-      const s = CELL, cx = px + s / 2, cy = py + s / 2;
-      ctx.fillStyle = 'rgba(255,190,0,0.18)'; ctx.fillRect(px, py, s, s);
-      ctx.fillStyle = '#E8C000';
-      ctx.beginPath(); ctx.moveTo(cx, py + 4); ctx.lineTo(px + s - 4, cy); ctx.lineTo(cx, py + s - 4); ctx.lineTo(px + 4, cy); ctx.closePath(); ctx.fill();
-      ctx.fillStyle = '#8A7200';
-      ctx.beginPath(); ctx.moveTo(cx, py + 9); ctx.lineTo(px + s - 9, cy); ctx.lineTo(cx, py + s - 9); ctx.lineTo(px + 9, cy); ctx.closePath(); ctx.fill();
-      ctx.fillStyle = '#FFE030'; ctx.font = 'bold 11px monospace';
-      ctx.textAlign = 'center'; (ctx as any).textBaseline = 'middle';
-      ctx.fillText('!', cx, cy + 1); (ctx as any).textBaseline = 'alphabetic';
-      ctx.strokeStyle = '#A08000'; ctx.lineWidth = 1;
-      ctx.strokeRect(px + .5, py + .5, s - 1, s - 1);
-    };
-
-    const drawSprinkler = (px: number, py: number) => {
-      const s = CELL, cx = px + s / 2;
-      ctx.fillStyle = 'rgba(50,100,200,0.14)'; ctx.fillRect(px, py, s, s);
-      ctx.fillStyle = '#909098'; ctx.fillRect(cx - 2, py + 1, 4, 4);
-      ctx.fillStyle = '#A8A8B0'; ctx.fillRect(cx - 5, py + 4, 10, 2);
-      ctx.fillStyle = '#58A0E8';
-      [[s * 0.25, s * 0.32], [s * 0.5, s * 0.38], [s * 0.75, s * 0.32],
-      [s * 0.18, s * 0.52], [s * 0.5, s * 0.58], [s * 0.82, s * 0.52],
-      [s * 0.3, s * 0.72], [s * 0.7, s * 0.72]].forEach(([wx, wy]) => {
-        ctx.beginPath(); ctx.ellipse(px + wx, py + wy, 1.5, 2.5, 0, 0, Math.PI * 2); ctx.fill();
-      });
-    };
-
-    const drawAlarmTriggered = (px: number, py: number) => {
-      const s = CELL, cx = px + s / 2;
-      ctx.fillStyle = 'rgba(200,0,0,0.18)'; ctx.fillRect(px, py, s, s);
-      ctx.fillStyle = '#B80000'; ctx.fillRect(px + 5, py + 6, s - 10, s - 12);
-      ctx.fillStyle = '#D81010'; ctx.fillRect(px + 5, py + 6, s - 10, 3);
-      ctx.fillStyle = '#880000'; ctx.fillRect(px + 5, py + s - 9, s - 10, 3);
-      ctx.fillStyle = '#FFD030'; ctx.beginPath(); ctx.arc(cx, py + s / 2, 6, 0, Math.PI * 2); ctx.fill();
-      ctx.fillStyle = '#CC0000'; ctx.beginPath(); ctx.arc(cx, py + s / 2, 4, 0, Math.PI * 2); ctx.fill();
-      ctx.font = 'bold 4px monospace'; ctx.textAlign = 'center';
-      ctx.fillStyle = '#FF6060'; ctx.fillText('FIRE', cx, py + s - 4);
-    };
-
-    const drawSensorNode = (px: number, py: number) => {
-      const s = CELL, cx = px + s / 2;
-      ctx.fillStyle = '#C0C8D0'; ctx.beginPath(); ctx.arc(cx, py + 9, 6, 0, Math.PI * 2); ctx.fill();
-      ctx.fillStyle = '#D8E0E8'; ctx.beginPath(); ctx.arc(cx, py + 9, 5, 0, Math.PI * 2); ctx.fill();
-      ctx.fillStyle = '#00FF70'; ctx.beginPath(); ctx.arc(cx, py + 9, 2, 0, Math.PI * 2); ctx.fill();
-      ctx.strokeStyle = 'rgba(0,200,80,0.35)'; ctx.lineWidth = 0.8;
-      [9, 13, 17].forEach(r => { ctx.beginPath(); ctx.arc(cx, py + 9, r, Math.PI * 1.2, Math.PI * 1.8); ctx.stroke(); });
-      ctx.font = 'bold 4px monospace'; ctx.textAlign = 'center';
-      ctx.fillStyle = '#80A8C8'; ctx.fillText('SENS', cx, py + 22);
-      ctx.fillStyle = 'rgba(0,180,100,0.12)'; ctx.fillRect(px, py, s, s);
-    };
-
-    const drawItem = (item: string, px: number, py: number) => {
-      ctx.save();
-      switch (item) {
-        case 'desk': drawDesk(px, py); break;
-        case 'monitor': drawMonitor(px, py); break;
-        case 'chair': drawChair(px, py); break;
-        case 'plant': drawPlant(px, py); break;
-        case 'filing': drawFiling(px, py); break;
-        case 'extinguisher': drawExtinguisher(px, py); break;
-        case 'hazard': drawHazardMarker(px, py); break;
-        case 'sprinkler': drawSprinkler(px, py); break;
-        case 'alarm': drawAlarmTriggered(px, py); break;
-        case 'sensor': drawSensorNode(px, py); break;
-      }
-      ctx.restore();
-    };
-
-    const drawTemperature = (px: number, py: number, x: number, y: number) => {
-      const heat = getHeat(x, y);
-      if (heat < 0.08) return;
-      const alpha = Math.min(0.52, heat * 0.58);
-      if (heat > 0.7) {
-        ctx.fillStyle = `rgba(255,50,0,${alpha})`; ctx.fillRect(px, py, CELL, CELL);
-      } else if (heat > 0.45) {
-        ctx.fillStyle = `rgba(255,120,20,${alpha})`; ctx.fillRect(px, py, CELL, CELL);
-      } else {
-        ctx.fillStyle = `rgba(255,190,40,${alpha * 0.7})`; ctx.fillRect(px, py, CELL, CELL);
-      }
-    };
-
-    const drawFog = (px: number, py: number, x: number, y: number) => {
-      const explored = new Set(map_state.visible_cells.map(([cx, cy]) => `${cx},${cy}`));
-      if (explored.has(`${x},${y}`)) return;
-      ctx.fillStyle = 'rgba(5,5,12,0.72)'; ctx.fillRect(px, py, CELL, CELL);
-      ctx.font = 'bold 9px monospace'; ctx.textAlign = 'center'; (ctx as any).textBaseline = 'middle';
-      ctx.fillStyle = 'rgba(80,80,120,0.5)';
-      ctx.fillText('?', px + CELL / 2, py + CELL / 2); (ctx as any).textBaseline = 'alphabetic';
-    };
-
-    const drawFire = (px: number, py: number, intensity: number) => {
-      if (intensity < 0.03) return;
-      const s = CELL;
-      // High base alpha so even smoldering (0.1) is visible
-      const alpha = Math.min(1.0, 0.5 + intensity * 0.5);
-      const g = ctx.createRadialGradient(px + s / 2, py + s / 2, 0, px + s / 2, py + s / 2, s * 0.72);
-      g.addColorStop(0, `rgba(255, 255, 180, ${alpha})`);
-      g.addColorStop(0.3, `rgba(255, 180, 0, ${alpha * 0.9})`);
-      g.addColorStop(0.7, `rgba(255, 40, 0, ${alpha * 0.7})`);
-      g.addColorStop(1, 'rgba(150, 0, 0, 0)');
-      ctx.fillStyle = g; ctx.fillRect(px, py, s, s);
-
-      if (intensity > 0.3) {
-        ctx.fillStyle = `rgba(255, 255, 255, ${intensity * 0.6})`;
-        [[s / 2 - 2, 4, s / 2 + 2, 4, s / 2, -2], [s * .28, 7, s * .48, 7, s * .38, 1], [s * .58, 6, s * .78, 6, s * .68, 0]].forEach(([x1, y1, x2, y2, x3, y3]) => {
-          ctx.beginPath(); ctx.moveTo(px + x1, py + y1); ctx.lineTo(px + x2, py + y2); ctx.lineTo(px + x3, py + y3); ctx.closePath(); ctx.fill();
-        });
-      }
-      if (intensity > 0.5) {
-        ctx.font = `bold ${s * .65}px serif`; ctx.textAlign = 'center'; (ctx as any).textBaseline = 'middle';
-        ctx.globalAlpha = Math.min(1, intensity * 1.5);
-        ctx.fillText('🔥', px + s / 2, py + s / 2 + 2); ctx.globalAlpha = 1; (ctx as any).textBaseline = 'alphabetic';
-      }
-    };
-
-    const drawSmoke = (px: number, py: number, density: number) => {
-      if (density < 0.03) return;
-      const s = CELL;
-      const alpha = Math.min(0.8, 0.2 + density * 0.6);
-      ctx.fillStyle = `rgba(80, 80, 100, ${alpha})`; ctx.fillRect(px, py, s, s);
-      const g = ctx.createRadialGradient(px + s * .38, py + s * .28, 0, px + s / 2, py + s / 2, s * 0.62);
-      g.addColorStop(0, `rgba(120, 120, 140, ${alpha * 0.3})`); g.addColorStop(1, 'rgba(50, 50, 70, 0)');
-      ctx.fillStyle = g; ctx.fillRect(px, py, s, s);
-    };
-
-    const drawAgent = () => {
-      const { agent_x: ax, agent_y: ay } = map_state;
-      const px = ax * CELL, py = ay * CELL, s = CELL;
-      const cx = px + s / 2, cy = py + s / 2;
-
-      if (agentMoveFlash > 0) {
-        const alpha = agentMoveFlash / 18;
-        const radius = s * (0.6 + (1 - alpha) * 0.6);
-        ctx.save();
-        ctx.strokeStyle = `rgba(255, 230, 60, ${alpha})`;
-        ctx.lineWidth = 3 + alpha * 4;
-        ctx.shadowColor = `rgba(255, 200, 0, ${alpha})`;
-        ctx.shadowBlur = 14;
-        ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.stroke();
-        ctx.restore();
+    }
+
+    /* ── Fire ambient: multiply scorches the floor tiles ── */
+    ctx.save();
+    ctx.globalCompositeOperation = 'multiply';
+    for (let y = 0; y < H; y++) {
+      for (let x = 0; x < W; x++) {
+        const fire = fire_grid[idx(x, y)];
+        if (fire < 0.1) continue;
+        const px = x * cs + cs / 2, py = y * cs + cs / 2;
+        const radius = cs * (1.2 + fire * 1.8);
+        const a = Math.min(0.85, fire * 0.9);
+        const gr = ctx.createRadialGradient(px, py, 0, px, py, radius);
+        gr.addColorStop(0,   `rgba(255,80,0,${a})`);
+        gr.addColorStop(0.4, `rgba(220,40,0,${a * 0.5})`);
+        gr.addColorStop(1,   'rgba(0,0,0,0)');
+        ctx.fillStyle = gr;
+        ctx.fillRect(px - radius, py - radius, radius * 2, radius * 2);
       }
+    }
+    ctx.restore();
+
+    /* ── Fire volumetric: vivid source-over layers (real-looking flames) ── */
+    for (let y = 0; y < H; y++) {
+      for (let x = 0; x < W; x++) {
+        const fire = fire_grid[idx(x, y)];
+        if (fire < 0.05) continue;
+        const px = x * cs + cs / 2, py = y * cs + cs / 2;
+        const flicker = 0.80 + 0.20 * Math.sin(t * 11.0 + x * 3.1 + y * 2.7);
+        const eff = Math.min(1, fire * flicker);
+
+        const windDx = wv[0] * cs * 0.25 * eff;
+        const windDy = wv[1] * cs * 0.25 * eff - cs * 0.06;
+
+        /* Outer dark-red base: anchors fire to cell */
+        {
+          const r = cs * 0.70 * (0.7 + eff * 0.3);
+          const cx2 = px + windDx * 0.5, cy2 = py + windDy * 0.5;
+          const gr = ctx.createRadialGradient(cx2, cy2, 0, cx2, cy2, r);
+          gr.addColorStop(0,   `rgba(200,20,0,${eff * 0.65})`);
+          gr.addColorStop(0.55,`rgba(170,10,0,${eff * 0.35})`);
+          gr.addColorStop(1,   'rgba(80,0,0,0)');
+          ctx.fillStyle = gr;
+          ctx.beginPath(); ctx.arc(cx2, cy2, r, 0, Math.PI * 2); ctx.fill();
+        }
 
-      const gl = ctx.createRadialGradient(cx, cy, 0, cx, cy, s * .65);
-      gl.addColorStop(0, 'rgba(70,135,255,0.42)'); gl.addColorStop(1, 'rgba(30,70,200,0)');
-      ctx.fillStyle = gl; ctx.fillRect(px, py, s, s);
-      ctx.fillStyle = 'rgba(0,0,0,0.34)';
-      ctx.beginPath(); ctx.ellipse(cx, cy + 11, 7, 2.5, 0, 0, Math.PI * 2); ctx.fill();
-      ctx.fillStyle = '#180C04'; ctx.fillRect(cx - 6, cy + 8, 5, 4); ctx.fillRect(cx + 1, cy + 8, 5, 4);
-      ctx.fillStyle = '#1C3080'; ctx.fillRect(cx - 6, cy + 1, 5, 8); ctx.fillRect(cx + 1, cy + 1, 5, 8);
-      ctx.fillStyle = '#2840A8'; ctx.fillRect(cx - 6, cy + 1, 2, 8); ctx.fillRect(cx + 1, cy + 1, 2, 8);
-      ctx.fillStyle = '#601808'; ctx.fillRect(cx - 7, cy - 1, 14, 2);
-      ctx.fillStyle = '#E08020'; ctx.beginPath(); ctx.arc(cx, cy, 2, 0, Math.PI * 2); ctx.fill();
-      ctx.fillStyle = '#1A60D8'; ctx.fillRect(cx - 7, cy - 9, 14, 11);
-      ctx.fillStyle = '#3080F8'; ctx.fillRect(cx - 7, cy - 9, 14, 3); ctx.fillRect(cx - 7, cy - 9, 3, 11);
-      ctx.fillStyle = '#1A60D8'; ctx.fillRect(cx - 10, cy - 8, 4, 9); ctx.fillRect(cx + 6, cy - 8, 4, 9);
-      ctx.fillStyle = '#F0C070'; ctx.fillRect(cx - 10, cy + 0, 4, 3); ctx.fillRect(cx + 6, cy + 0, 4, 3);
-      ctx.fillStyle = '#F0C070'; ctx.fillRect(cx - 2, cy - 11, 4, 3);
-      ctx.fillStyle = '#F0C070'; ctx.fillRect(cx - 5, cy - 19, 10, 9);
-      ctx.fillStyle = '#F8D890'; ctx.fillRect(cx - 5, cy - 19, 10, 3); ctx.fillRect(cx - 5, cy - 19, 3, 9);
-      ctx.fillStyle = '#4A2810'; ctx.fillRect(cx - 5, cy - 19, 10, 4);
-      ctx.fillRect(cx - 6, cy - 17, 3, 3); ctx.fillRect(cx + 3, cy - 17, 3, 3);
-      ctx.fillStyle = '#180C00'; ctx.fillRect(cx - 3, cy - 13, 2, 2); ctx.fillRect(cx + 1, cy - 13, 2, 2);
-      ctx.fillStyle = '#FFFFFF'; ctx.fillRect(cx - 3, cy - 14, 1, 1); ctx.fillRect(cx + 2, cy - 14, 1, 1);
-      ctx.font = 'bold 6px monospace'; ctx.textAlign = 'center';
-      ctx.fillStyle = '#FFFFFF'; ctx.fillText('A', cx, py + 2);
-    };
-
-    const drawZoneLabels = () => {
-      ctx.save();
-      ctx.font = 'bold 7px monospace'; ctx.textAlign = 'center';
-      ctx.fillStyle = 'rgba(195,180,150,0.13)';
-      ctx.fillText('NORTH  OFFICES', CELL * 8, CELL * 2.6);
-      ctx.fillText('MAIN  CORRIDOR', CELL * 8, CELL * 7.4);
-      ctx.fillText('SOUTH  OFFICES', CELL * 8, CELL * 12.9);
-      ctx.restore();
-    };
-
-    // Main Render Loop
-    const render = () => {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-      for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) {
-        const ct = map_state.cell_grid[idx(x, y)], px = x * CELL, py = y * CELL;
-        if (ct === WALL && WALL_ITEMS[`${x},${y}`]) { drawWallWithItem(px, py, WALL_ITEMS[`${x},${y}`]); continue; }
-        switch (ct) {
-          case FLOOR: getZone(x, y) === 'corridor' ? drawFloorCorridor(px, py) : drawFloorRoom(px, py); break;
-          case WALL: isOuter(x, y) ? drawWallOuter(px, py) : drawWallInner(px, py); break;
-          case DOOR_OPEN: drawDoorOpen(px, py); break;
-          case DOOR_CLOSED: drawDoorClosed(px, py); break;
-          case OBSTACLE: drawDoorFailed(px, py); break;
-          case EXIT: drawExit(px, py); break;
-          case DOOR_FAILED: drawDoorFailed(px, py); break;
+        /* Mid vivid-orange body */
+        {
+          const r = cs * 0.46 * (0.8 + eff * 0.2);
+          const cx2 = px + windDx * 0.35, cy2 = py + windDy * 0.35 - cs * 0.04 * eff;
+          const gr = ctx.createRadialGradient(cx2, cy2, 0, cx2, cy2, r);
+          gr.addColorStop(0,   `rgba(255,110,0,${eff * 0.90})`);
+          gr.addColorStop(0.45,`rgba(255,60,0,${eff * 0.60})`);
+          gr.addColorStop(1,   'rgba(220,20,0,0)');
+          ctx.fillStyle = gr;
+          ctx.beginPath(); ctx.arc(cx2, cy2, r, 0, Math.PI * 2); ctx.fill();
         }
-      }
 
-      drawZoneLabels();
+        /* Inner bright-yellow core */
+        {
+          const r = cs * 0.26 * eff;
+          const cx2 = px + windDx * 0.15, cy2 = py + windDy * 0.15 - cs * 0.10 * eff;
+          const gr = ctx.createRadialGradient(cx2, cy2, 0, cx2, cy2, r);
+          gr.addColorStop(0,   `rgba(255,230,80,${eff * 0.95})`);
+          gr.addColorStop(0.35,`rgba(255,170,20,${eff * 0.75})`);
+          gr.addColorStop(1,   'rgba(255,80,0,0)');
+          ctx.fillStyle = gr;
+          ctx.beginPath(); ctx.arc(cx2, cy2, r, 0, Math.PI * 2); ctx.fill();
+        }
 
-      for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) {
-        const item = ITEMS[`${x},${y}`];
-        if (item) drawItem(item, x * CELL, y * CELL);
-      }
+        /* White-hot tip (only for intense fire) */
+        if (eff > 0.55) {
+          const r = cs * 0.13 * eff;
+          const cx2 = px + windDx * 0.1, cy2 = py + windDy * 0.1 - cs * 0.18 * eff;
+          const gr = ctx.createRadialGradient(cx2, cy2, 0, cx2, cy2, r);
+          gr.addColorStop(0, `rgba(255,255,220,${eff * 0.9})`);
+          gr.addColorStop(1, 'rgba(255,220,60,0)');
+          ctx.fillStyle = gr;
+          ctx.beginPath(); ctx.arc(cx2, cy2, r, 0, Math.PI * 2); ctx.fill();
+        }
 
-      for (let y = 0; y < H; y++) for (let x = 0; x < W; x++)
-        drawFog(x * CELL, y * CELL, x, y);
-
-      // Draw Hazards (Fire/Smoke) AFTER Fog so they pop as "Thermal" or "Known" data
-      for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) {
-        const px = x * CELL, py = y * CELL;
-        const fire = map_state.fire_grid[idx(x, y)];
-        const smoke = map_state.smoke_grid[idx(x, y)];
-        const visible = map_state.visible_cells.some(([vx, vy]) => vx === x && vy === y);
-        
-        // Smoke only visible if explored/in-sight (it's hard to see in the dark)
-        if (visible) {
-          drawSmoke(px, py, smoke);
+        /* Wind-carried plume tip */
+        if (fire > 0.35) {
+          const r  = cs * 0.28 * eff;
+          const cx2 = px + windDx, cy2 = py + windDy - cs * 0.22 * eff;
+          const gr = ctx.createRadialGradient(cx2, cy2, 0, cx2, cy2, r);
+          gr.addColorStop(0, `rgba(255,160,0,${eff * 0.65})`);
+          gr.addColorStop(1, 'rgba(255,60,0,0)');
+          ctx.fillStyle = gr;
+          ctx.beginPath(); ctx.arc(cx2, cy2, r, 0, Math.PI * 2); ctx.fill();
         }
 
-        // Fire is drawn ALWAYS (thermal detection)
-        if (fire > 0.03) {
-          drawFire(px, py, fire);
-          // Stronger heat glow for distant fires
-          if (!visible) {
-            ctx.fillStyle = `rgba(255, 100, 0, ${Math.min(0.2, fire * 0.5)})`;
-            ctx.fillRect(px, py, CELL, CELL);
-          }
+        if (fire > 0.45 && Math.random() < 0.09 && embersRef.current.length < 120) {
+          embersRef.current.push(new Ember(px, py, wv[0]));
         }
-        
-        // Temperature/Heat signature
-        drawTemperature(px, py, x, y);
       }
+    }
+
+    /* ── Smoke (dark on light bg) ── */
+    for (let y = 0; y < H; y++) {
+      for (let x = 0; x < W; x++) {
+        const smoke = smoke_grid[idx(x, y)];
+        if (smoke < 0.1) continue;
+        const px = x * cs + cs / 2, py = y * cs + cs / 2;
+        const offX = Math.sin(t * 0.5 + x) * 2;
+        const offY = Math.cos(t * 0.4 + y) * 2;
+        const alpha = Math.min(0.68, smoke * 0.8);
+        const gr = ctx.createRadialGradient(px + offX, py + offY, 0, px + offX, py + offY, cs * 0.82);
+        gr.addColorStop(0, `rgba(72,82,96,${alpha})`);
+        gr.addColorStop(1, 'rgba(72,82,96,0)');
+        ctx.fillStyle = gr;
+        ctx.beginPath(); ctx.arc(px + offX, py + offY, cs * 0.82, 0, Math.PI * 2); ctx.fill();
+      }
+    }
+
+    /* ── Exits & Doors ── */
+    for (let y = 0; y < H; y++) {
+      for (let x = 0; x < W; x++) {
+        const ct = cell_grid[idx(x, y)];
+        const px = x * cs, py = y * cs;
+        const pulse = 0.7 + 0.3 * Math.sin(t * 3);
+
+        if (ct === EXIT) {
+          ctx.fillStyle = '#e6f4ec';
+          ctx.fillRect(px + 2, py + 2, cs - 4, cs - 4);
+          ctx.strokeStyle = `rgba(22,163,74,${0.7 + 0.3 * pulse})`;
+          ctx.lineWidth = 2 * pulse;
+          ctx.strokeRect(px + 5, py + 5, cs - 10, cs - 10);
+          /* EXIT symbol */
+          ctx.fillStyle = `rgba(22,163,74,${0.85 + 0.15 * pulse})`;
+          ctx.font = `bold ${cs * 0.26}px var(--mono, monospace)`;
+          ctx.textAlign = 'center';
+          ctx.textBaseline = 'middle';
+          ctx.fillText('EXIT', px + cs / 2, py + cs / 2);
+        } else if (ct === DOOR_CLOSED) {
+          ctx.fillStyle = '#7c5c3c';
+          ctx.fillRect(px + 4, py + 2, cs - 8, cs - 4);
+          ctx.fillStyle = '#4a3020';
+          ctx.fillRect(px + 2, py, cs - 4, 2);
+          ctx.fillRect(px + 2, py + cs - 2, cs - 4, 2);
+          /* handle */
+          ctx.fillStyle = '#f0b030';
+          ctx.beginPath();
+          ctx.arc(px + cs - 10, py + cs / 2, 2.5, 0, Math.PI * 2);
+          ctx.fill();
+        } else if (ct === DOOR_OPEN) {
+          ctx.fillStyle = '#4a3020';
+          ctx.fillRect(px + 2, py, 4, cs);
+          ctx.fillRect(px + cs - 6, py, 4, cs);
+        }
+      }
+    }
+
+    /* ── Fog of War (dim only — all map items still readable) ── */
+    for (let y = 0; y < H; y++) {
+      for (let x = 0; x < W; x++) {
+        const key = `${x},${y}`;
+        if (!visible.has(key)) {
+          ctx.fillStyle = 'rgba(140,134,126,0.55)';
+          ctx.fillRect(x * cs, y * cs, cs, cs);
+        }
+      }
+    }
+
+    /* ── Vision lantern glow around agent ── */
+    const apx = agent_x * cs + cs / 2, apy = agent_y * cs + cs / 2;
+    const lanternR = cs * 3.5;
+    const lanternGr = ctx.createRadialGradient(apx, apy, 0, apx, apy, lanternR);
+    lanternGr.addColorStop(0,   'rgba(255,240,190,0.18)');
+    lanternGr.addColorStop(0.5, 'rgba(255,220,140,0.08)');
+    lanternGr.addColorStop(1,   'rgba(0,0,0,0)');
+    ctx.fillStyle = lanternGr;
+    ctx.fillRect(apx - lanternR, apy - lanternR, lanternR * 2, lanternR * 2);
+
+    /* ── Agent trail ── */
+    const now = timeRef.current;
+    if (
+      trailRef.current.length === 0 ||
+      Math.abs(trailRef.current[0].x - apx) > 1 ||
+      Math.abs(trailRef.current[0].y - apy) > 1
+    ) {
+      trailRef.current.unshift({ x: apx, y: apy, t: now });
+    }
+    if (trailRef.current.length > 20) trailRef.current.pop();
+
+    trailRef.current.forEach((p, i) => {
+      const alpha = (1 - i / trailRef.current.length) * 0.70;
+      ctx.fillStyle = `rgba(2,132,199,${alpha})`;
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, cs * 0.12 * (1 - i / 22), 0, Math.PI * 2);
+      ctx.fill();
+    });
+
+    /* ── Agent rendering ── */
+    const theme =
+      agent_health >= 60 ? AGENT_THEMES.healthy  :
+      agent_health >= 30 ? AGENT_THEMES.moderate :
+      agent_health >  0  ? AGENT_THEMES.low       :
+                           AGENT_THEMES.critical;
+
+    const pulse = 0.85 + 0.15 * Math.sin(t * 4);
+    const ringR = cs * 0.48;
+
+    /* pulsing gold aura */
+    const auraR = ringR * (1.5 + 0.2 * pulse);
+    const auraGr = ctx.createRadialGradient(apx, apy, ringR * 0.7, apx, apy, auraR);
+    auraGr.addColorStop(0, `rgba(251,191,36,${0.28 * pulse})`);
+    auraGr.addColorStop(1, 'rgba(251,191,36,0)');
+    ctx.fillStyle = auraGr;
+    ctx.beginPath(); ctx.arc(apx, apy, auraR, 0, Math.PI * 2); ctx.fill();
+
+    /* ground shadow */
+    ctx.save();
+    ctx.globalAlpha = 0.22;
+    const shadowGr = ctx.createRadialGradient(apx, apy + cs * 0.32, 0, apx, apy + cs * 0.32, cs * 0.38);
+    shadowGr.addColorStop(0, 'rgba(0,0,0,0.6)');
+    shadowGr.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = shadowGr;
+    ctx.beginPath(); ctx.ellipse(apx, apy + cs * 0.32, cs * 0.38, cs * 0.14, 0, 0, Math.PI * 2); ctx.fill();
+    ctx.restore();
+
+    /* Minecraft character */
+    drawMinecraftAgent(ctx, apx, apy, cs, theme);
+
+    /* health arc ring — gold ring + colored fill */
+    const hRatio = Math.max(0, Math.min(1, agent_health / 100));
+    /* ring track */
+    ctx.beginPath();
+    ctx.arc(apx, apy, ringR, 0, Math.PI * 2);
+    ctx.strokeStyle = 'rgba(0,0,0,0.12)';
+    ctx.lineWidth = 4;
+    ctx.lineCap = 'round';
+    ctx.stroke();
+    /* gold base ring */
+    ctx.beginPath();
+    ctx.arc(apx, apy, ringR, 0, Math.PI * 2);
+    ctx.strokeStyle = 'rgba(251,191,36,0.25)';
+    ctx.lineWidth = 3.5;
+    ctx.stroke();
+    /* health fill */
+    ctx.beginPath();
+    ctx.arc(apx, apy, ringR, -Math.PI / 2, -Math.PI / 2 + hRatio * Math.PI * 2);
+    ctx.strokeStyle = theme.ring;
+    ctx.lineWidth = 3.5;
+    ctx.lineCap = 'round';
+    ctx.stroke();
+    /* ring glow */
+    ctx.beginPath();
+    ctx.arc(apx, apy, ringR, -Math.PI / 2, -Math.PI / 2 + hRatio * Math.PI * 2);
+    ctx.strokeStyle = theme.ringGlow;
+    ctx.lineWidth = 6;
+    ctx.stroke();
+
+    /* move flash */
+    if (agentMoveFlash > 0) {
+      const fa = agentMoveFlash / 18;
+      ctx.strokeStyle = `rgba(255,255,255,${fa * 0.8})`;
+      ctx.lineWidth = 3;
+      ctx.beginPath();
+      ctx.arc(apx, apy, ringR * (1.8 + (1 - fa) * 0.6), 0, Math.PI * 2);
+      ctx.stroke();
+    }
+
+    /* ── Embers ── */
+    for (let i = embersRef.current.length - 1; i >= 0; i--) {
+      const e = embersRef.current[i];
+      e.update();
+      if (e.life <= 0) { embersRef.current.splice(i, 1); continue; }
+      ctx.fillStyle = `rgba(255,${Math.floor(80 + 175 * e.life)},0,${e.life})`;
+      ctx.beginPath(); ctx.arc(e.x, e.y, e.size * e.life, 0, Math.PI * 2); ctx.fill();
+    }
+
+    rafRef.current = requestAnimationFrame(animate);
+  };
 
-      drawAgent();
-
-      const vig = ctx.createRadialGradient(canvas.width / 2, canvas.height / 2, canvas.width * .28, canvas.width / 2, canvas.height / 2, canvas.width * .84);
-      vig.addColorStop(0, 'rgba(0,0,0,0)'); vig.addColorStop(1, 'rgba(0,0,0,0.45)');
-      ctx.fillStyle = vig; ctx.fillRect(0, 0, canvas.width, canvas.height);
-    };
-
-    render();
+  useEffect(() => {
+    rafRef.current = requestAnimationFrame(animate);
+    return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [observation, agentMoveFlash]);
 
-  const W = observation?.map_state.grid_w || 16;
-  const H = observation?.map_state.grid_h || 16;
+  const W = observation?.map_state.grid_w ?? 16;
+  const H = observation?.map_state.grid_h ?? 16;
 
   return (
-    <canvas 
-      ref={canvasRef} 
-      id="map-canvas" 
-      width={W * CELL} 
-      height={H * CELL} 
+    <canvas
+      ref={canvasRef}
+      id="map-canvas"
+      width={W * CS}
+      height={H * CS}
     />
   );
 };

frontend_new_desgin/index.html

@@ -0,0 +1,449 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<title>Pyre — Crisis Navigation Environment</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  /* Surface */
+  --s0: #f5f2ed;   /* page bg — warm off-white */
+  --s1: #ffffff;   /* panel / card */
+  --s2: #faf9f6;   /* subtle inset */
+  --s3: #f0ede8;   /* hover */
+  --bd: #e4dfd7;   /* border */
+  --bd2:#cdc7be;   /* strong border */
+
+  /* Text */
+  --t1: #1c1712;   /* primary */
+  --t2: #6b6460;   /* secondary */
+  --t3: #a8a29e;   /* muted */
+
+  /* Semantic */
+  --fire:  #c2410c;   /* deep ember */
+  --fire2: rgba(194,65,12,0.08);
+  --blue:  #1d4ed8;
+  --blue2: rgba(29,78,216,0.08);
+  --green: #166534;
+  --green2:rgba(22,101,52,0.08);
+  --amber: #92400e;
+  --amber2:rgba(146,64,14,0.08);
+  --red:   #b91c1c;
+  --red2:  rgba(185,28,28,0.08);
+
+  --mono: 'DM Mono', 'JetBrains Mono', monospace;
+  --sans: 'DM Sans', 'Inter', system-ui, sans-serif;
+  --r: 6px;
+}
+
+html, body { height: 100%; background: var(--s0); color: var(--t1); font-family: var(--sans); overflow: hidden; font-size: 13px; }
+
+/* ── Shell ── */
+.shell {
+  display: grid;
+  grid-template-rows: 44px 1fr 48px;
+  height: 100vh;
+  min-width: 1280px;
+}
+
+/* ── Topbar ── */
+.topbar {
+  background: var(--s1);
+  border-bottom: 1px solid var(--bd);
+  display: flex; align-items: center;
+  padding: 0 20px; gap: 16px;
+}
+.brand { display: flex; align-items: center; gap: 9px; }
+.brand-icon {
+  width: 28px; height: 28px; border-radius: 6px;
+  background: var(--fire); display: flex; align-items: center; justify-content: center;
+  font-size: 14px; flex-shrink: 0;
+}
+.brand-name { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--t1); letter-spacing: 0.05em; }
+.brand-sep { width: 1px; height: 18px; background: var(--bd); }
+.brand-sub { font-size: 11px; color: var(--t3); }
+
+.topbar-divider { width: 1px; height: 20px; background: var(--bd); }
+.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
+
+/* Segment controls */
+.seg {
+  display: flex; border: 1px solid var(--bd); border-radius: 6px; overflow: hidden;
+  background: var(--s2);
+}
+.seg button {
+  background: none; border: none; padding: 5px 11px;
+  font-family: var(--mono); font-size: 11px; font-weight: 500;
+  color: var(--t2); cursor: pointer; letter-spacing: 0.03em;
+  transition: background .1s, color .1s;
+}
+.seg button:hover { background: var(--s3); color: var(--t1); }
+.seg button.on { background: var(--s1); color: var(--t1); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
+.seg button.on.fire { color: var(--fire); }
+.seg button + button { border-left: 1px solid var(--bd); }
+
+.live-chip {
+  font-family: var(--mono); font-size: 10px; font-weight: 500;
+  padding: 3px 10px; border-radius: 12px; border: 1px solid;
+  letter-spacing: 0.05em;
+}
+.live-chip.demo   { border-color: var(--bd2); color: var(--t2); }
+.live-chip.online { border-color: rgba(22,101,52,.4); color: var(--green); background: var(--green2); }
+.live-chip.offline{ border-color: rgba(185,28,28,.4); color: var(--red); }
+
+/* ── Content ── */
+.content { display: grid; grid-template-columns: 1fr 320px; overflow: hidden; min-height: 0; }
+
+/* ── Canvas zone ── */
+.canvas-zone {
+  display: flex; align-items: center; justify-content: center;
+  background: var(--s0); padding: 20px; position: relative;
+  overflow: hidden;
+}
+.canvas-frame {
+  position: relative;
+  border-radius: 8px; overflow: hidden;
+  box-shadow: 0 0 0 1px var(--bd2), 0 20px 60px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.10);
+  /* Scale to fill available space while keeping aspect ratio */
+  max-width: min(calc(100vh - 92px - 48px - 40px), calc(100vw - 340px - 40px));
+  max-height: calc(100vh - 92px);
+  aspect-ratio: 1;
+}
+#mainCanvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* HUD overlays — float above canvas */
+.hud-tl, .hud-tr {
+  position: absolute; top: 12px;
+  pointer-events: none; z-index: 2;
+}
+.hud-tl { left: 12px; }
+.hud-tr { right: 12px; }
+
+.hud-card {
+  background: rgba(14,10,8,0.82);
+  border: 1px solid rgba(255,255,255,0.10);
+  border-radius: 6px; padding: 8px 11px;
+  backdrop-filter: blur(8px);
+  color: #e8e0d8;
+}
+.hud-r { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
+.hud-r:last-child { margin-bottom: 0; }
+.hlbl { font-family: var(--mono); font-size: 9px; color: rgba(168,162,158,0.8); letter-spacing: 0.1em; }
+.hval { font-family: var(--mono); font-size: 12px; font-weight: 500; color: #f0e8e0; }
+.hbar-bg { width: 80px; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
+.hbar-fill { height: 100%; border-radius: 2px; transition: width .4s, background .4s; }
+.hbar-fill.g { background: #4ade80; }
+.hbar-fill.m { background: #fbbf24; }
+.hbar-fill.c { background: #f87171; animation: hblink .5s infinite alternate; }
+@keyframes hblink { to { opacity: .3 } }
+.hstatus { font-family: var(--mono); font-size: 9px; }
+.hstatus.good     { color: #4ade80; }
+.hstatus.moderate { color: #fbbf24; }
+.hstatus.low      { color: #fb923c; }
+.hstatus.critical { color: #f87171; }
+
+.step-val { font-family: var(--mono); font-size: 12px; font-weight: 500; color: #93c5fd; }
+.sbar-bg  { width: 90px; height: 3px; background: rgba(255,255,255,0.07); border-radius:2px; overflow:hidden; margin-top:5px; }
+.sbar-fill { height:100%; border-radius:2px; background:#60a5fa; transition:width .4s; }
+.step-meta { font-family:var(--mono); font-size:9px; color:rgba(168,162,158,.6); margin-top:3px; }
+
+/* Episode end */
+#epBanner {
+  display: none; position: absolute;
+  bottom: 14px; left: 50%; transform: translateX(-50%);
+  font-family: var(--mono); font-size: 13px; font-weight: 500;
+  letter-spacing: 0.04em; padding: 10px 20px;
+  border-radius: 8px; backdrop-filter: blur(10px);
+  pointer-events: none; white-space: nowrap;
+}
+#epBanner.ok  { background:rgba(21,128,61,0.80);  border:1px solid rgba(74,222,128,.3); color:#dcfce7; }
+#epBanner.bad { background:rgba(153,27,27,0.80);   border:1px solid rgba(248,113,113,.3); color:#fee2e2; }
+#epBanner.tmo { background:rgba(120,53,15,0.80);   border:1px solid rgba(251,191,36,.3); color:#fef3c7; }
+
+/* Wind */
+.wind-wrap {
+  position: absolute; bottom: 10px; right: 10px;
+  background: rgba(14,10,8,0.80); border: 1px solid rgba(255,255,255,0.10);
+  border-radius: 50%; backdrop-filter: blur(6px);
+}
+
+/* ── Side panel ── */
+.side {
+  background: var(--s1);
+  border-left: 1px solid var(--bd);
+  overflow-y: auto; overflow-x: hidden;
+  scrollbar-width: thin; scrollbar-color: var(--bd) transparent;
+  display: flex; flex-direction: column;
+}
+::-webkit-scrollbar { width: 3px; }
+::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 2px; }
+
+.side-sec { padding: 14px 16px; border-bottom: 1px solid var(--bd); }
+.side-sec:last-child { border-bottom: none; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.sec-hd {
+  font-family: var(--mono); font-size: 9px; font-weight: 500;
+  letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3);
+  margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;
+}
+
+/* Stats */
+.sg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+.sc {
+  background: var(--s2); border: 1px solid var(--bd);
+  border-radius: var(--r); padding: 8px 10px;
+}
+.sc-l { font-size: 10px; color: var(--t3); margin-bottom: 2px; }
+.sc-v { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--t1); }
+.sc-v.fire  { color: var(--fire); }
+.sc-v.blue  { color: var(--blue); }
+.sc-v.amber { color: var(--amber); }
+
+.meta-row {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--bd);
+  font-size: 11px;
+}
+
+/* Charts */
+.chart-bg {
+  background: var(--s2); border: 1px solid var(--bd);
+  border-radius: var(--r); overflow: hidden; margin-top: 6px;
+}
+.chart-bg canvas { display: block; width: 100% !important; }
+
+/* Event log */
+.elog { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; flex: 1; }
+.erow {
+  display: flex; align-items: baseline; gap: 7px;
+  padding: 3px 6px; border-radius: 4px;
+  font-family: var(--mono); font-size: 10px;
+  border-left: 2px solid transparent;
+  animation: ein .15s ease;
+}
+@keyframes ein { from { opacity:0; transform:translateY(-2px) } }
+.erow:hover { background: var(--s3); }
+.erow.alarm { border-left-color: var(--fire); background: var(--fire2); }
+.estep { color: var(--t3); min-width: 22px; font-size: 9px; }
+.etext { color: var(--t2); flex: 1; line-height: 1.4; }
+.erwd  { font-size: 9px; min-width: 32px; text-align: right; }
+.erwd.p { color: var(--green); }
+.erwd.n { color: var(--red); }
+
+/* ── Bottom bar ── */
+.botbar {
+  background: var(--s1); border-top: 1px solid var(--bd);
+  display: flex; align-items: center; padding: 0 16px; gap: 6px;
+}
+.bsep { width: 1px; height: 20px; background: var(--bd); margin: 0 4px; }
+
+.icn-btn {
+  width: 30px; height: 30px;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--s2); border: 1px solid var(--bd);
+  border-radius: var(--r); color: var(--t2);
+  font-size: 12px; cursor: pointer;
+  transition: background .1s, color .1s, border-color .1s;
+}
+.icn-btn:hover { background: var(--s3); color: var(--t1); border-color: var(--bd2); }
+.icn-btn:active { transform: scale(0.94); }
+.icn-btn.play {
+  background: var(--fire2); border-color: rgba(194,65,12,0.3); color: var(--fire);
+}
+.icn-btn.play:hover { background: rgba(194,65,12,0.14); }
+
+.seed-wrap { display: flex; align-items: center; gap: 6px; }
+.seed-lbl { font-size: 11px; color: var(--t3); }
+#seedInput {
+  width: 64px; background: var(--s2); border: 1px solid var(--bd);
+  color: var(--t1); font-family: var(--mono); font-size: 11px;
+  padding: 4px 8px; border-radius: var(--r); outline: none;
+}
+#seedInput:focus { border-color: var(--bd2); }
+
+.keys {
+  margin-left: auto; display: flex; gap: 12px; align-items: center;
+  font-size: 10px; color: var(--t3);
+}
+.keys kbd {
+  background: var(--s2); border: 1px solid var(--bd2);
+  border-radius: 3px; padding: 1px 5px;
+  font-family: var(--mono); font-size: 10px; color: var(--t2);
+}
+
+/* Toast */
+#toast {
+  position: fixed; bottom: 56px; left: 50%;
+  transform: translateX(-50%) translateY(6px);
+  background: var(--t1); color: var(--s0);
+  font-family: var(--mono); font-size: 11px;
+  padding: 7px 16px; border-radius: 20px;
+  opacity: 0; pointer-events: none; z-index: 99;
+  transition: opacity .22s, transform .22s;
+}
+#toast.up { opacity: 1; transform: translateX(-50%) translateY(0); }
+</style>
+</head>
+<body>
+<div class="shell">
+
+  <!-- Topbar -->
+  <header class="topbar">
+    <div class="brand">
+      <div class="brand-icon">🔥</div>
+      <span class="brand-name">Pyre</span>
+      <div class="brand-sep"></div>
+      <span class="brand-sub">Crisis Navigation Environment</span>
+    </div>
+
+    <div class="topbar-divider"></div>
+
+    <div class="seg">
+      <button class="mode-btn on fire" data-mode="demo">Demo</button>
+      <button class="mode-btn" data-mode="live">Live</button>
+    </div>
+
+    <div class="seg">
+      <button class="diff-btn" data-diff="easy">Easy</button>
+      <button class="diff-btn on" data-diff="medium">Medium</button>
+      <button class="diff-btn" data-diff="hard">Hard</button>
+    </div>
+
+    <div class="topbar-right">
+      <span id="liveIndicator" class="live-chip demo">Demo</span>
+    </div>
+  </header>
+
+  <!-- Content -->
+  <div class="content">
+
+    <!-- Canvas zone -->
+    <div class="canvas-zone">
+      <div class="canvas-frame">
+        <canvas id="mainCanvas" width="576" height="576"></canvas>
+
+        <div class="hud-tl">
+          <div class="hud-card">
+            <div class="hud-r">
+              <span class="hlbl">HP</span>
+              <div class="hbar-bg"><div id="healthBar" class="hbar-fill g" style="width:100%"></div></div>
+              <span id="healthVal" class="hval">100</span>
+            </div>
+            <div class="hud-r" style="gap:10px">
+              <span id="healthStatus" class="hstatus good">Good</span>
+              <span id="smokeTag" style="font-family:var(--mono);font-size:9px;color:rgba(168,162,158,.6);margin-left:auto">smoke: clear</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="hud-tr">
+          <div class="hud-card" style="text-align:right">
+            <div class="hud-r" style="justify-content:flex-end">
+              <span class="step-val" id="stepCount">0 / 150</span>
+            </div>
+            <div class="sbar-bg" style="margin-left:auto">
+              <div id="stepBar" class="sbar-fill" style="width:0%"></div>
+            </div>
+            <div class="step-meta" id="diffTag">medium · small_office</div>
+          </div>
+        </div>
+
+        <div id="epBanner"></div>
+
+        <div class="wind-wrap">
+          <canvas id="windCanvas" width="68" height="68"></canvas>
+        </div>
+      </div>
+    </div>
+
+    <!-- Side -->
+    <aside class="side">
+
+      <div class="side-sec">
+        <div class="sec-hd">Episode</div>
+        <div class="sg">
+          <div class="sc"><div class="sc-l">Reward</div><div id="rewardVal" class="sc-v blue">0.00</div></div>
+          <div class="sc"><div class="sc-l">Burned</div><div id="burnPct" class="sc-v fire">0%</div></div>
+          <div class="sc"><div class="sc-l">Wind</div><div id="windVal" class="sc-v amber">—</div></div>
+          <div class="sc"><div class="sc-l">Humidity</div><div id="humidVal" class="sc-v">—%</div></div>
+        </div>
+        <div class="meta-row">
+          <span style="color:var(--t3)">spread ρ</span>
+          <span id="spreadVal" style="color:var(--fire);font-family:var(--mono)">0.25</span>
+        </div>
+      </div>
+
+      <div class="side-sec">
+        <div class="sec-hd">
+          Cumulative Reward
+          <span id="rewardLast" style="color:var(--t2);font-weight:400;letter-spacing:0;font-size:10px">—</span>
+        </div>
+        <div class="chart-bg" style="height:52px"><canvas id="rewardChart" height="52"></canvas></div>
+      </div>
+
+      <div class="side-sec">
+        <div class="sec-hd">
+          Active Fire Cells
+          <span id="fireLast" style="color:var(--t2);font-weight:400;letter-spacing:0;font-size:10px">0</span>
+        </div>
+        <div class="chart-bg" style="height:46px"><canvas id="fireSizeChart" height="46"></canvas></div>
+      </div>
+
+      <div class="side-sec">
+        <div class="sec-hd">Action Distribution</div>
+        <div class="chart-bg" style="height:68px"><canvas id="actionChart" height="68"></canvas></div>
+      </div>
+
+      <div class="side-sec">
+        <div class="sec-hd">Event Log</div>
+        <div id="eventLog" class="elog">
+          <div class="erow">
+            <span class="estep">000</span>
+            <span class="etext">Episode started. Assess your surroundings.</span>
+          </div>
+        </div>
+      </div>
+
+    </aside>
+  </div>
+
+  <!-- Bottom bar -->
+  <footer class="botbar">
+    <button id="prevBtn"  class="icn-btn" title="Prev template">⏮</button>
+    <button id="playBtn"  class="icn-btn play" title="Play (Space)">▶</button>
+    <button id="stepBtn"  class="icn-btn" title="Step (→)">⏭</button>
+    <button id="resetBtn" class="icn-btn" title="Reset (R)">↺</button>
+    <div class="bsep"></div>
+    <div class="seg">
+      <button class="speed-btn" data-speed="0.5">½×</button>
+      <button class="speed-btn on" data-speed="1">1×</button>
+      <button class="speed-btn" data-speed="2">2×</button>
+      <button class="speed-btn" data-speed="4">4×</button>
+      <button class="speed-btn" data-speed="8">8×</button>
+    </div>
+    <div class="bsep"></div>
+    <div class="seed-wrap">
+      <span class="seed-lbl">Seed</span>
+      <input id="seedInput" type="number" value="42" min="0" max="9999">
+    </div>
+    <div class="keys">
+      <span><kbd>Space</kbd> play</span>
+      <span><kbd>→</kbd> step</span>
+      <span><kbd>R</kbd> reset</span>
+    </div>
+  </footer>
+</div>
+
+<div id="toast"></div>
+<script src="js/sim.js?v=3"></script>
+<script src="js/renderer.js?v=4"></script>
+<script src="js/app.js?v=6"></script>
+</body>
+</html>

frontend_new_desgin/js/app.js

@@ -0,0 +1,535 @@
+/**
+ * app.js — Pyre visualization controller
+ * Handles episode lifecycle, HUD updates, charts, live/demo modes.
+ */
+
+// ─── Mini chart renderer ─────────────────────────────────────────────────────
+
+class MiniChart {
+  constructor(canvas, opts={}) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.color = opts.color || '#00e5ff';
+    this.fill  = opts.fill  || 'rgba(0,229,255,0.12)';
+    this.label = opts.label || '';
+    this.maxPoints = opts.maxPoints || 200;
+    this.yMin = opts.yMin !== undefined ? opts.yMin : null;
+    this.yMax = opts.yMax !== undefined ? opts.yMax : null;
+    this.data = [];
+  }
+
+  push(v) {
+    this.data.push(v);
+    if (this.data.length > this.maxPoints) this.data.shift();
+  }
+
+  draw() {
+    const {canvas, ctx, data, color, fill} = this;
+    const w=canvas.width, h=canvas.height;
+    ctx.fillStyle='#faf9f6'; ctx.fillRect(0,0,w,h);
+    if (data.length < 2) return;
+
+    const yMin = this.yMin !== null ? this.yMin : Math.min(...data);
+    const yMax = this.yMax !== null ? this.yMax : Math.max(...data);
+    const yRange = (yMax-yMin) || 1;
+    const pad = 4;
+
+    // Grid lines
+    ctx.strokeStyle='rgba(0,0,0,0.06)';
+    ctx.lineWidth=0.5;
+    for (let i=0;i<=3;i++) {
+      const gy=pad+(h-2*pad)*(i/3);
+      ctx.beginPath(); ctx.moveTo(0,gy); ctx.lineTo(w,gy); ctx.stroke();
+    }
+
+    const toX = i => (i/(data.length-1))*w;
+    const toY = v => h-pad - ((v-yMin)/yRange)*(h-2*pad);
+
+    // Fill area
+    ctx.beginPath();
+    ctx.moveTo(toX(0), h);
+    for (let i=0;i<data.length;i++) ctx.lineTo(toX(i), toY(data[i]));
+    ctx.lineTo(toX(data.length-1), h);
+    ctx.closePath();
+    ctx.fillStyle=fill;
+    ctx.fill();
+
+    // Line
+    ctx.beginPath();
+    ctx.moveTo(toX(0), toY(data[0]));
+    for (let i=1;i<data.length;i++) ctx.lineTo(toX(i), toY(data[i]));
+    ctx.strokeStyle=color;
+    ctx.lineWidth=1.8;
+    ctx.stroke();
+
+    // Current value dot
+    const lastX=toX(data.length-1), lastY=toY(data[data.length-1]);
+    ctx.beginPath();
+    ctx.arc(lastX, lastY, 3, 0, Math.PI*2);
+    ctx.fillStyle=color;
+    ctx.fill();
+
+    // Current value label
+    ctx.fillStyle=color;
+    ctx.font='10px monospace';
+    ctx.textAlign='right';
+    ctx.fillText(data[data.length-1].toFixed(1), w-2, lastY-4);
+  }
+}
+
+// ─── Action histogram ────────────────────────────────────────────────────────
+
+function drawActionHistogram(canvas, counts) {
+  const ctx = canvas.getContext('2d');
+  const w=canvas.width, h=canvas.height;
+  ctx.fillStyle='#faf9f6'; ctx.fillRect(0,0,w,h);
+
+  const entries = Object.entries(counts);
+  const total = entries.reduce((s,[,v])=>s+v,0)||1;
+  const colors = {move:'#1d4ed8', door:'#c2410c', wait:'#7c3aed', look:'#166534'};
+  const barH = Math.floor((h-8)/entries.length)-2;
+
+  entries.forEach(([k,v],i) => {
+    const ratio = v/total;
+    const bw = Math.max(2, ratio*(w-60));
+    const by = 4+i*(barH+2);
+    // Bar bg
+    ctx.fillStyle='rgba(0,0,0,0.05)';
+    ctx.fillRect(60,by,w-62,barH);
+    // Bar fill
+    ctx.fillStyle=colors[k]||'#888';
+    ctx.fillRect(60,by,bw,barH);
+    // Label
+    ctx.fillStyle='rgba(80,70,65,0.85)';
+    ctx.font=`${Math.min(11,barH-1)}px monospace`;
+    ctx.textAlign='right';
+    ctx.fillText(k, 54, by+barH-2);
+    // Count
+    ctx.fillStyle=colors[k]||'#888';
+    ctx.textAlign='left';
+    ctx.fillText(v, 64+bw, by+barH-2);
+  });
+}
+
+// ─── Live mode client ────────────────────────────────────────────────────────
+
+class LiveClient {
+  constructor(baseUrl='https://krooz-pyre-env.hf.space') {
+    this.baseUrl=baseUrl;
+    this.connected=false;
+  }
+  async checkHealth() {
+    try {
+      const r=await fetch(`${this.baseUrl}/web/health`,{signal:AbortSignal.timeout(3000)});
+      this.connected=r.ok;
+    } catch { this.connected=false; }
+    return this.connected;
+  }
+  async reset(difficulty='medium', seed=null) {
+    const body={difficulty};
+    if(seed!==null) body.seed=parseInt(seed)||null;
+    const r=await fetch(`${this.baseUrl}/web/reset`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
+    return r.json();
+  }
+  async step(action) {
+    const r=await fetch(`${this.baseUrl}/web/step`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(action)});
+    return r.json();
+  }
+  async getScene() {
+    const r=await fetch(`${this.baseUrl}/web/scene`);
+    return r.json();
+  }
+}
+
+// ─── App controller ───────────────────────────────────────────────────────────
+
+class PyreApp {
+  constructor() {
+    this.canvas = document.getElementById('mainCanvas');
+    this.windCanvas = document.getElementById('windCanvas');
+    this.renderer = new PyreRenderer(this.canvas);
+    this.episode = null;
+    this.agent = new DemoAgent();
+    this.mode = 'demo'; // 'demo' | 'live'
+    this.playing = false;
+    this.speed = 1;     // steps per second
+    this.stepInterval = null;
+    this.animFrame = null;
+    this.templateIdx = 0;
+    this.difficulty = 'medium';
+    this.seed = 42;
+    this.liveClient = new LiveClient();
+    this.liveScene = null;
+
+    // Charts
+    this.rewardChart = new MiniChart(document.getElementById('rewardChart'),{
+      color:'#1d4ed8', fill:'rgba(29,78,216,0.08)', yMin:null, yMax:null
+    });
+    this.fireSizeChart = new MiniChart(document.getElementById('fireSizeChart'),{
+      color:'#c2410c', fill:'rgba(194,65,12,0.08)', yMin:0
+    });
+
+    this._bindControls();
+    this.newEpisode();
+    this._startRenderLoop();
+  }
+
+  newEpisode() {
+    this.playing = false;
+    this._clearStepInterval();
+    const seed = parseInt(document.getElementById('seedInput')?.value) || this.seed;
+    this.seed = seed;
+    this.episode = new PyreEpisode(this.templateIdx, seed, this.difficulty);
+    this.renderer.init(this.episode);
+    this.agent = new DemoAgent();
+    this._updateHUD();
+    this._clearCharts();
+    this._updateEventLog();
+    this._updatePlayBtn();
+    // Auto-play
+    setTimeout(()=>{this.playing=true;this._startStepInterval();this._updatePlayBtn();},300);
+    this.templateIdx = (this.templateIdx+1) % 3; // cycle templates
+  }
+
+  _clearCharts() {
+    this.rewardChart.data = [];
+    this.fireSizeChart.data = [];
+    this.rewardChart.draw();
+    this.fireSizeChart.draw();
+    const ac=document.getElementById('actionChart');
+    if(ac){const c=ac.getContext('2d');c.clearRect(0,0,ac.width,ac.height);}
+  }
+
+  step() {
+    if (!this.episode || this.episode.done) { this.playing=false; this._clearStepInterval(); this._updatePlayBtn(); return; }
+    const action = this.agent.chooseAction({
+      agentX:this.episode.agentX, agentY:this.episode.agentY,
+      cellGrid:this.episode.cellGrid, fireGrid:this.episode.fireGrid,
+      smokeGrid:this.episode.smokeGrid, exits:this.episode.exits,
+      w:this.episode.w, h:this.episode.h, doorRegistry:this.episode.doorRegistry
+    });
+    this.episode.step(action);
+    this._updateHUD();
+    this._updateCharts();
+    this._updateEventLog();
+
+    if (this.episode.done) {
+      this.playing=false;
+      this._clearStepInterval();
+      this._updatePlayBtn();
+      this._showEpisodeEnd();
+    }
+  }
+
+  togglePlay() {
+    this.playing = !this.playing;
+    if (this.playing) this._startStepInterval();
+    else this._clearStepInterval();
+    this._updatePlayBtn();
+  }
+
+  setSpeed(s) {
+    this.speed = s;
+    document.querySelectorAll('.speed-btn').forEach(b=>{
+      b.classList.toggle('on', parseFloat(b.dataset.speed)===s);
+    });
+    if (this.playing) { this._clearStepInterval(); this._startStepInterval(); }
+  }
+
+  _startStepInterval() {
+    this._clearStepInterval();
+    const ms = Math.max(50, 1000/this.speed);
+    this.stepInterval = setInterval(()=>this.step(), ms);
+  }
+
+  _clearStepInterval() {
+    if (this.stepInterval) { clearInterval(this.stepInterval); this.stepInterval=null; }
+  }
+
+  // ── HUD updates ────────────────────────────────────────────────────────────
+
+  _updateHUD() {
+    const ep = this.episode;
+    if (!ep) return;
+
+    // Health bar
+    const hPct = ep.agentHealth/100;
+    const hBar = document.getElementById('healthBar');
+    if (hBar) {
+      hBar.style.width=`${ep.agentHealth}%`;
+      hBar.className='hbar-fill ' + (hPct>0.6?'g':hPct>0.3?'m':'c');
+    }
+    const hVal = document.getElementById('healthVal');
+    if(hVal) hVal.textContent=`${Math.round(ep.agentHealth)}`;
+    const hStatus = document.getElementById('healthStatus');
+    if(hStatus) { hStatus.textContent=ep.healthStatus; hStatus.className='hstatus '+ep.healthStatus.toLowerCase(); }
+
+    // Step counter
+    const stepEl=document.getElementById('stepCount');
+    if(stepEl) stepEl.textContent=`${ep.stepCount} / ${ep.maxSteps}`;
+    const progBar=document.getElementById('stepBar');
+    if(progBar) progBar.style.width=`${100*ep.stepCount/ep.maxSteps}%`;
+
+    // Stats
+    setText('rewardVal',  ep.totalReward.toFixed(2));
+    setText('burnPct',    `${ep.percentBurned}%`);
+    setText('smokeVal', ep.smokeLevel);
+    const smokeTag=document.getElementById('smokeTag');
+    if(smokeTag) smokeTag.textContent=`smoke: ${ep.smokeLevel}`;
+    setText('windVal',    ep.windDir);
+    setText('humidVal',   `${Math.round(ep.humidity*100)}%`);
+    setText('spreadVal',  ep.pSpread.toFixed(2));
+    const diffTag=document.getElementById('diffTag');
+    if(diffTag) {
+      let dt=`${ep.difficulty} · ${ep.templateName}`;
+      if(ep._fireDirection) dt+=` · fire ${ep._fireDirection}`;
+      diffTag.textContent=dt;
+    }
+
+    // Episode status banner
+    const banner=document.getElementById('epBanner');
+    if(banner){
+      if(ep.agentEvacuated){ banner.textContent='✓ EVACUATED'; banner.className='ok'; banner.style.display='flex'; }
+      else if(!ep.agentAlive){ banner.textContent='✗ INCAPACITATED'; banner.className='bad'; banner.style.display='flex'; }
+      else if(ep.stepCount>=ep.maxSteps){ banner.textContent='⏱ TIMEOUT'; banner.className='tmo'; banner.style.display='flex'; }
+      else banner.style.display='none';
+    }
+
+    // Smoke level indicator
+    const smokeInd=document.getElementById('smokeIndicator');
+    if(smokeInd){ smokeInd.className='smoke-indicator '+ep.smokeLevel; smokeInd.title=`Smoke: ${ep.smokeLevel}`; }
+
+    // Wind rose
+    if(this.windCanvas) this.renderer.drawWindRose(this.windCanvas, ep.windDir);
+  }
+
+  _updateCharts() {
+    const ep=this.episode;
+    if(!ep) return;
+    this.rewardChart.push(ep.totalReward);
+    setText('rewardLast', ep.lastReward>0?'+'+ep.lastReward.toFixed(2):ep.lastReward.toFixed(2));
+    this.rewardChart.draw();
+    const fs=ep.fireSizeHistory[ep.fireSizeHistory.length-1]||0;
+    this.fireSizeChart.push(fs);
+    setText('fireLast', fs);
+    this.fireSizeChart.draw();
+    const ac=document.getElementById('actionChart');
+    if(ac) drawActionHistogram(ac, ep.actionCounts);
+  }
+
+  _updateEventLog() {
+    const logEl=document.getElementById('eventLog');
+    if(!logEl||!this.episode) return;
+    const entries=this.episode.eventLog.slice(0,18);
+    logEl.innerHTML=entries.map(e=>`
+      <div class="erow${e.isAlert?' alarm':''}">
+        <span class="estep">${String(e.step).padStart(3,'0')}</span>
+        <span class="etext">${e.text}</span>
+        ${e.reward?`<span class="erwd ${e.reward>0?'p':'n'}">${e.reward>0?'+':''}${e.reward.toFixed(2)}</span>`:''}
+      </div>`).join('');
+  }
+
+  _showEpisodeEnd() {
+    const ep=this.episode;
+    const banner=document.getElementById('statusBanner');
+    if(!banner) return;
+    if(ep.agentEvacuated) {
+      banner.innerHTML=`✓ EVACUATED — ${ep.totalReward.toFixed(1)} pts in ${ep.stepCount} steps`;
+      banner.className='ok';
+    } else if(!ep.agentAlive) {
+      banner.innerHTML=`✗ INCAPACITATED — health depleted`;
+      banner.className='bad';
+    } else {
+      banner.innerHTML=`⏱ TIMEOUT — ${ep.stepCount} steps`;
+      banner.className='tmo';
+    }
+    banner.style.display='flex';
+  }
+
+  _updatePlayBtn() {
+    const btn=document.getElementById('playBtn');
+    if(btn){btn.textContent=this.playing?'⏸':'▶';btn.classList.toggle('play',!this.playing);}
+  }
+
+  // ── Render loop ────────────────────────────────────────────────────────────
+
+  _startRenderLoop() {
+    const loop=()=>{ this._render(); this.animFrame=requestAnimationFrame(loop); };
+    this.animFrame=requestAnimationFrame(loop);
+  }
+
+  _render() {
+    if (!this.episode) return;
+    this.renderer.frame(this.episode, 1);
+    // Periodic chart updates when paused (to keep time display fresh)
+  }
+
+  // ── Mode switching ─────────────────────────────────────────────────────────
+
+  async switchToLive() {
+    const ok=await this.liveClient.checkHealth();
+    const indicator=document.getElementById('liveIndicator');
+    if(!ok) {
+      if(indicator) { indicator.textContent='⚠ Server offline'; indicator.className='live-indicator offline'; }
+      showToast('Cannot reach server at localhost:8000 — staying in Demo mode');
+      return;
+    }
+    this.mode='live';
+    if(indicator){ indicator.textContent='● LIVE'; indicator.className='live-indicator online'; }
+    showToast('Connected to live server');
+    await this._resetLive();
+    this._startLiveLoop();
+  }
+
+  switchToDemo() {
+    this.mode='demo';
+    this._clearStepInterval();
+    const indicator=document.getElementById('liveIndicator');
+    if(indicator){ indicator.textContent='◉ DEMO'; indicator.className='live-indicator demo'; }
+    this.newEpisode();
+  }
+
+  async _resetLive() {
+    try {
+      const seed=parseInt(document.getElementById('seedInput')?.value)||null;
+      await this.liveClient.reset(this.difficulty, seed);
+    } catch(e){ console.warn('Live reset failed',e); }
+  }
+
+  async _startLiveLoop() {
+    const poll=async()=>{
+      if(this.mode!=='live') return;
+      try {
+        const scene=await this.liveClient.getScene();
+        this._applyLiveScene(scene);
+      } catch(e){ console.warn('Live poll failed',e); }
+      if(this.mode==='live') setTimeout(poll, 800);
+    };
+    poll();
+  }
+
+  _applyLiveScene(scene) {
+    if(!scene||!scene.graph) return;
+    const g=scene.graph, lb=scene.labels;
+    const w=g.width, h=g.height;
+    const n=w*h;
+    const cellGrid=new Array(n), fireGrid=new Float32Array(n), smokeGrid=new Float32Array(n);
+    const visibleCells=new Set();
+    for(let y=0;y<h;y++) for(let x=0;x<w;x++){
+      const cell=g.grid[y][x];
+      const i=y*w+x;
+      cellGrid[i]=cell[0]; fireGrid[i]=cell[1]; smokeGrid[i]=cell[2];
+      if(cell[4]>0.5) visibleCells.add(`${x},${y}`);
+    }
+    if(!this.episode||this.episode.w!==w){
+      this.episode=new PyreEpisode(0,42,'medium');
+      this.renderer.init(this.episode);
+    }
+    this.episode.cellGrid=cellGrid;
+    this.episode.fireGrid=fireGrid;
+    this.episode.smokeGrid=smokeGrid;
+    this.episode.visibleCells=visibleCells;
+    // Agent state
+    this.episode.agentX=lb.agent.x; this.episode.agentY=lb.agent.y;
+    this.episode.agentHealth=lb.agent.health;
+    this.episode.agentAlive=lb.agent.alive;
+    this.episode.agentEvacuated=lb.agent.evacuated;
+    // Episode metadata
+    this.episode.stepCount=lb.episode.step;
+    this.episode.maxSteps=lb.episode.max_steps;
+    this.episode.windDir=lb.episode.wind_dir;
+    this.episode.pSpread=lb.episode.fire_spread_rate;
+    this.episode.humidity=lb.episode.humidity;
+    this.episode.difficulty=lb.episode.difficulty||'medium';
+    this.episode.templateName=lb.episode.template||'—';
+    // Map
+    this.episode.exits=lb.map.exit_positions||this.episode.exits;
+    this.episode.doorRegistry=lb.map.door_registry||{};
+    // Narrative fields (agent perception)
+    this.episode._smokeLevel=lb.agent.smoke_level||'clear';
+    this.episode._fireDirection=lb.agent.fire_direction||null;
+    this.episode._locationLabel=lb.agent.location||'';
+    this.episode._healthStatus=lb.agent.health_status||'Good';
+    // Surroundings → inject into event log
+    if(lb.surroundings) {
+      const sur=lb.surroundings;
+      if(sur.audible_signals&&sur.audible_signals.length) {
+        const step=lb.episode.step;
+        const prev=this.episode.eventLog[0];
+        if(!prev||prev.step!==step||!prev._fromSurroundings) {
+          for(const sig of sur.audible_signals.slice(0,2)) {
+            this.episode.eventLog.unshift({step,text:`🔊 ${sig}`,reward:0,isAlert:true,_fromSurroundings:true});
+          }
+          if(this.episode.eventLog.length>50) this.episode.eventLog.length=50;
+        }
+      }
+    }
+    this.episode.w=w; this.episode.h=h;
+    this._updateHUD();
+  }
+
+  // ── Control binding ────────────────────────────────────────────────────────
+
+  _bindControls() {
+    document.getElementById('playBtn')?.addEventListener('click',()=>this.togglePlay());
+    document.getElementById('stepBtn')?.addEventListener('click',()=>this.step());
+    document.getElementById('resetBtn')?.addEventListener('click',()=>this.newEpisode());
+    document.getElementById('prevBtn')?.addEventListener('click',()=>{
+      this.templateIdx=((this.templateIdx-2)+3)%3;
+      this.newEpisode();
+    });
+
+    document.querySelectorAll('.speed-btn').forEach(b=>{
+      b.addEventListener('click',()=>this.setSpeed(parseFloat(b.dataset.speed)));
+    });
+
+    document.querySelectorAll('.diff-btn').forEach(b=>{
+      b.addEventListener('click',()=>{
+        this.difficulty=b.dataset.diff;
+        document.querySelectorAll('.diff-btn').forEach(x=>x.classList.toggle('active',x===b));
+        this.newEpisode();
+      });
+    });
+
+    document.querySelectorAll('.mode-btn').forEach(b=>{
+      b.addEventListener('click',()=>{
+        document.querySelectorAll('.mode-btn').forEach(x=>x.classList.remove('active','fire'));
+        b.classList.add('active');
+        if(b.dataset.mode==='live') this.switchToLive();
+        else this.switchToDemo();
+      });
+    });
+
+    document.getElementById('seedInput')?.addEventListener('change',()=>this.newEpisode());
+
+    // Keyboard shortcuts
+    window.addEventListener('keydown',e=>{
+      if(e.target.tagName==='INPUT') return;
+      if(e.code==='Space'){e.preventDefault();this.togglePlay();}
+      else if(e.code==='ArrowRight') this.step();
+      else if(e.code==='KeyR') this.newEpisode();
+      else if(e.code==='Digit1') this.setSpeed(0.5);
+      else if(e.code==='Digit2') this.setSpeed(1);
+      else if(e.code==='Digit3') this.setSpeed(2);
+      else if(e.code==='Digit4') this.setSpeed(4);
+      else if(e.code==='Digit5') this.setSpeed(8);
+    });
+  }
+}
+
+// ── Utilities ──────────────────────────────────────���───────────────────────
+
+function setText(id, val) {
+  const el=document.getElementById(id);
+  if(el) el.textContent=val;
+}
+
+function showToast(msg) {
+  const t=document.getElementById('toast');
+  if(!t) return;
+  t.textContent=msg; t.classList.add('up');
+  setTimeout(()=>t.classList.remove('up'),3000);
+}
+
+// Boot
+window.addEventListener('DOMContentLoaded',()=>{ window.app=new PyreApp(); });

frontend_new_desgin/js/renderer.js

@@ -0,0 +1,707 @@
+/**
+ * renderer.js — Canvas2D rendering engine for Pyre visualization
+ * Overhauled: natural building materials, vibrant fire, rich atmospheric depth.
+ */
+
+// ── Palette ──────────────────────────────────────────────────────────────────
+
+const COLORS = {
+  bg:           '#1e242c', // A dark slate/navy instead of pitch black
+  // Walls — warm concrete / painted interior
+  wallBase:     '#4f443b',
+  wallHT:       'rgba(255,248,232,0.25)',   // top catch-light
+  wallHL:       'rgba(255,248,232,0.15)',   // left highlight
+  wallSB:       'rgba(0,0,0,0.60)',         // bottom shadow
+  wallSR:       'rgba(0,0,0,0.45)',         // right shadow
+  wallMortar:   'rgba(0,0,0,0.20)',         // mortar / texture lines
+  // Floor — worn office tile
+  floorBase:    '#261f1a',
+  floorVis:     '#302620',
+  floorGrout:   'rgba(0,0,0,0.3)',
+  // Obstacle — charred ruin
+  obstBase:     '#140d0a',
+  obstEmber:    'rgba(255,80,0,0.35)',
+  // Exit
+  exitBase:     '#062210',
+  exitGlow:     '#22c55e',
+  exitGlow2:    '#4ade80',
+  // Door
+  doorWood:     '#5c3621',
+  doorDark:     '#331c0d',
+  doorFrame:    '#291508',
+  doorPanel:    'rgba(0,0,0,0.35)',
+  doorGlow:     '#7dd3fc',
+  // Agent
+  agentCore:    '#0ea5e9',
+  agentGlow:    '#38bdf8',
+  agentBright:  '#e0f2fe',
+  // Fog
+  fogSeen:      'rgba(30,36,44,0.3)', // increased visibility
+  fogUnseen:    'rgba(20,24,30,0.95)', // darker, more contrast
+  // Smoke channels
+  smokeR: 200, smokeG: 210, smokeB: 220, // Bright, thick white/grey smoke
+};
+
+// Fire color ramp: black → deep red → orange → yellow → white
+function fireColor(t, alpha=1) {
+  t = Math.min(1, Math.max(0, t));
+  let r,g,b;
+  if      (t < 0.15) { const s=t/0.15;        r=~~(98+88*s);  g=~~(6*s);    b=0; }
+  else if (t < 0.40) { const s=(t-0.15)/0.25; r=~~(186+60*s); g=~~(6+60*s); b=0; }
+  else if (t < 0.65) { const s=(t-0.40)/0.25; r=~~(246+9*s);  g=~~(66+112*s); b=~~(9*s); }
+  else if (t < 0.85) { const s=(t-0.65)/0.20; r=255;          g=~~(178+57*s); b=~~(9+32*s); }
+  else               { const s=(t-0.85)/0.15; r=255;          g=~~(235+20*s); b=~~(41+214*s); }
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+
+function lerpColor(c1, c2, t) {
+  return [~~(c1[0]+(c2[0]-c1[0])*t), ~~(c1[1]+(c2[1]-c1[1])*t), ~~(c1[2]+(c2[2]-c1[2])*t)];
+}
+
+// ── Ember particle system ─────────────────────────────────────────────────────
+
+class EmberSystem {
+  constructor(maxCount=220) {
+    this.particles = [];
+    this.maxCount = maxCount;
+  }
+
+  spawn(x, y, windX, windY, fireIntensity) {
+    if (this.particles.length >= this.maxCount) return;
+    if (Math.random() > fireIntensity * 0.48) return;
+    const speed = 0.4 + Math.random() * 1.0;
+    const angle = -Math.PI/2 + (Math.random()-0.5)*1.5;
+    this.particles.push({
+      x: x + (Math.random()-0.5)*3,
+      y: y + (Math.random()-0.5)*3,
+      vx: Math.cos(angle)*speed + windX*0.7,
+      vy: Math.sin(angle)*speed - 0.22,
+      life: 1.0,
+      decay: 0.010 + Math.random()*0.015,
+      size: 1.3 + Math.random()*2.4,
+      type: Math.random() > 0.4 ? 'ember' : 'spark',
+    });
+  }
+
+  update() {
+    for (let i=this.particles.length-1;i>=0;i--) {
+      const p=this.particles[i];
+      p.x += p.vx; p.y += p.vy;
+      p.vy -= 0.012;
+      p.vx *= 0.97;
+      p.life -= p.decay;
+      if (p.life <= 0) this.particles.splice(i,1);
+    }
+  }
+
+  draw(ctx) {
+    for (const p of this.particles) {
+      const a = p.life * 0.92;
+      const r = p.size * p.life;
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, r, 0, Math.PI*2);
+      if (p.type === 'ember')
+        ctx.fillStyle=`rgba(255,${~~(80+100*p.life)},0,${a})`;
+      else
+        ctx.fillStyle=`rgba(255,${~~(210+45*p.life)},${~~(60*p.life)},${a})`;
+      ctx.fill();
+    }
+  }
+}
+
+// ── Smoke drift layer ─────────────────────────────────────────────────────────
+
+class SmokeLayer {
+  constructor(w, h) {
+    this.w=w; this.h=h;
+    this.phases = new Float32Array(w*h).map(()=>Math.random()*Math.PI*2);
+  }
+  getOffset(x, y, time) {
+    const ph = this.phases[y*this.w+x];
+    return { dx: Math.sin(time*0.35+ph)*1.8, dy: Math.cos(time*0.28+ph+1.2)*1.8 };
+  }
+}
+
+// ── Main Renderer ─────────────────────────────────────────────────────────────
+
+class PyreRenderer {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.time = 0;
+    this.embers = new EmberSystem(220);
+    this.agentTrail = [];
+    this.prevInterp = null;
+    this.smokeLayer = null;
+    this.exploreCanvas = null;
+    this.exploreCtx = null;
+    this._lastExploreSet = null;
+    this.cellSize = 0;
+    this.windVec = [0,0];
+  }
+
+  init(episode) {
+    const cs = Math.floor(this.canvas.width / episode.w);
+    this.cellSize = cs;
+    this.smokeLayer = new SmokeLayer(episode.w, episode.h);
+    this.exploreCanvas = document.createElement('canvas');
+    this.exploreCanvas.width = this.canvas.width;
+    this.exploreCanvas.height = this.canvas.height;
+    this.exploreCtx = this.exploreCanvas.getContext('2d');
+    this.exploreCtx.fillStyle = 'black';
+    this.exploreCtx.fillRect(0,0,this.exploreCanvas.width,this.exploreCanvas.height);
+    this.agentTrail = [];
+    this._lastExploreSet = new Set();
+  }
+
+  frame(episode, lerpT=1) {
+    this.time += 0.016;
+    const {w,h,cellGrid,fireGrid,smokeGrid,agentX,agentY,visibleCells,exploreSet} = episode;
+    const cs = this.cellSize;
+    this._w = w;
+    const ctx = this.ctx;
+    const wv = WIND_DIRS[episode.windDir]||[0,0];
+    this.windVec = wv;
+
+    // ── Update explore canvas ─────────────────────────────────────────────
+    if (exploreSet && exploreSet !== this._lastExploreSet) {
+      this._lastExploreSet = exploreSet;
+      for (const key of exploreSet) {
+        const [ex,ey] = key.split(',').map(Number);
+        this.exploreCtx.clearRect(ex*cs, ey*cs, cs, cs);
+      }
+    }
+
+    // ── Background ───────────────────────────────────────────────────────
+    ctx.fillStyle = COLORS.bg;
+    ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
+
+    // ── Cell base layer ───────────────────────────────────────────────────
+    for (let y=0;y<h;y++) for (let x=0;x<w;x++) {
+      this._drawCellBase(ctx, x, y, cellGrid, cs);
+    }
+
+    // ── Fire ambient — warm glow radiating onto floor (normal blend) ──────
+    for (let y=0;y<h;y++) for (let x=0;x<w;x++) {
+      const i=y*w+x;
+      if (fireGrid[i] < 0.28) continue;
+      this._drawFireAmbient(ctx, x, y, fireGrid[i], cs);
+    }
+
+    // ── Fire glow (screen blend for natural layering) ─────────────────────
+    ctx.save();
+    ctx.globalCompositeOperation = 'screen';
+    for (let y=0;y<h;y++) for (let x=0;x<w;x++) {
+      const i=y*w+x;
+      const fire=fireGrid[i];
+      if (fire < 0.05) continue;
+      this._drawFireCell(ctx, x, y, fire, cs);
+      if (fire >= FIRE_BURNING && Math.random()<0.09) {
+        this.embers.spawn(x*cs+cs/2, y*cs+cs/2, wv[0], wv[1], fire);
+      }
+    }
+    ctx.restore();
+
+    // ── Smoke overlay ─────────────────────────────────────────────────────
+    for (let y=0;y<h;y++) for (let x=0;x<w;x++) {
+      const i=y*w+x;
+      const smoke=smokeGrid[i];
+      if (smoke < 0.08) continue;
+      this._drawSmoke(ctx, x, y, smoke, cs);
+    }
+
+    // ── Doors & exits ─────────────────────────────────────────────────────
+    for (let y=0;y<h;y++) for (let x=0;x<w;x++) {
+      const ct=cellGrid[y*w+x];
+      if (ct===EXIT) this._drawExit(ctx,x,y,cs,fireGrid[y*w+x]);
+      else if (ct===DOOR_OPEN||ct===DOOR_CLOSED) this._drawDoor(ctx,x,y,ct,cs);
+    }
+
+    // ── Fog of war ────────────────────────────────────────────────────────
+    if (visibleCells && episode.exploreSet) {
+      for (let y=0;y<h;y++) for (let x=0;x<w;x++) {
+        const key=`${x},${y}`;
+        if (visibleCells.has(key)) continue;
+        const explored = episode.exploreSet.has(key);
+        ctx.fillStyle = explored ? COLORS.fogSeen : COLORS.fogUnseen;
+        ctx.fillRect(x*cs, y*cs, cs, cs);
+      }
+    }
+
+    // ── Agent trail ───────────────────────────────────────────────────────
+    this._updateTrail(agentX, agentY, cs);
+    this._drawTrail(ctx, cs);
+
+    // ── Agent ─────────────────────────────────────────────────────────────
+    this._drawAgent(ctx, agentX, agentY, episode.agentHealth, episode.agentAlive, episode.agentEvacuated, cs);
+
+    // ── Embers (drawn above fog for dramatic effect) ──────────────────────
+    this.embers.update();
+    this.embers.draw(ctx);
+
+    // ── Tile grid overlay (very subtle) ───────────────────────────────────
+    ctx.strokeStyle='rgba(255,255,255,0.04)';
+    ctx.lineWidth=1;
+    for (let x=0;x<=w;x++) { ctx.beginPath(); ctx.moveTo(x*cs,0); ctx.lineTo(x*cs,h*cs); ctx.stroke(); }
+    for (let y=0;y<=h;y++) { ctx.beginPath(); ctx.moveTo(0,y*cs); ctx.lineTo(w*cs,y*cs); ctx.stroke(); }
+  }
+
+  // ── Cell base rendering ───────────────────────────────────────────────────
+
+  _drawCellBase(ctx, x, y, cellGrid, cs) {
+    const ct = cellGrid[y * (this._w||16) + x];
+    const px=x*cs, py=y*cs;
+
+    switch(ct) {
+      case WALL: {
+        const wallH = 8; // Extrude wall upward for 3D depth
+        
+        // Front shadow face (gives depth)
+        ctx.fillStyle = COLORS.wallSB;
+        ctx.fillRect(px, py+cs-wallH, cs, wallH);
+
+        // Right side shadow face if applicable, but for simplicity, just a slight drop shadow 
+        ctx.fillStyle = 'rgba(0,0,0,0.3)';
+        ctx.fillRect(px + cs, py - wallH + 4, 3, cs);
+
+        // Top face (shifted up by wallH)
+        ctx.fillStyle = COLORS.wallBase;
+        ctx.fillRect(px, py - wallH, cs, cs);
+
+        // Top face catch-light
+        ctx.fillStyle = COLORS.wallHT;
+        ctx.fillRect(px, py - wallH, cs, 3);
+        
+        // Left highlight
+        ctx.fillStyle = COLORS.wallHL;
+        ctx.fillRect(px, py - wallH + 3, 2, cs - 3);
+
+        // Brick texture on the top face
+        ctx.fillStyle = COLORS.wallMortar;
+        ctx.fillRect(px+3, py - wallH + ~~(cs*0.34), cs-6, 1);
+        ctx.fillRect(px+3, py - wallH + ~~(cs*0.67), cs-6, 1);
+        ctx.fillRect(px+~~(cs*0.3), py - wallH + 3, 1, ~~(cs*0.34)-3);
+        ctx.fillRect(px+~~(cs*0.7), py - wallH + ~~(cs*0.34)+1, 1, ~~(cs*0.33));
+        ctx.fillRect(px+~~(cs*0.5), py - wallH + ~~(cs*0.67)+1, 1, ~~(cs*0.33)-3);
+        break;
+      }
+
+      case OBSTACLE: {
+        const obsH = 4; // Charred ruin slight 3D elevation
+        
+        // Front shadow face
+        ctx.fillStyle = '#0a0705';
+        ctx.fillRect(px, py+cs-obsH, cs, obsH);
+
+        // Top face
+        ctx.fillStyle = COLORS.obstBase;
+        ctx.fillRect(px, py - obsH, cs, cs);
+
+        // Diagonal char texture
+        ctx.strokeStyle = 'rgba(0,0,0,0.6)';
+        ctx.lineWidth = 0.8;
+        for (let d=0; d<cs+cs; d+=5) {
+          ctx.beginPath();
+          ctx.moveTo(px+Math.max(0,d-cs), py - obsH + Math.min(d,cs));
+          ctx.lineTo(px+Math.min(d,cs), py - obsH + Math.max(0,d-cs));
+          ctx.stroke();
+        }
+
+        // Faint ember glow at edges
+        ctx.fillStyle = COLORS.obstEmber;
+        ctx.fillRect(px,      py - obsH,      cs, 1);
+        ctx.fillRect(px,      py - obsH +cs-1, cs, 1);
+        ctx.fillRect(px,      py - obsH +1,    1,  cs-2);
+        ctx.fillRect(px+cs-1, py - obsH +1,    1,  cs-2);
+        break;
+      }
+
+      case EXIT: {
+        ctx.fillStyle = COLORS.exitBase;
+        ctx.fillRect(px, py, cs, cs);
+        // Subtle green tint
+        ctx.fillStyle = 'rgba(34,197,94,0.07)';
+        ctx.fillRect(px+2, py+2, cs-4, cs-4);
+        break;
+      }
+
+      default: { // FLOOR, DOOR_OPEN, DOOR_CLOSED
+        ctx.fillStyle = COLORS.floorVis;
+        ctx.fillRect(px, py, cs, cs);
+
+        // Checkered tile effect
+        if ((x + y) % 2 === 0) {
+          ctx.fillStyle = 'rgba(255,248,230,0.035)';
+          ctx.fillRect(px, py, cs, cs);
+        }
+
+        // Tile grout lines (top + left edge per cell → creates tile grid)
+        ctx.fillStyle = COLORS.floorGrout;
+        ctx.fillRect(px,   py, cs, 1);
+        ctx.fillRect(px, py+1,  1, cs-1);
+        
+        // Inner tile details for realism
+        ctx.fillStyle = 'rgba(0,0,0,0.06)';
+        ctx.fillRect(px+2, py+2, cs-4, 2);
+        ctx.fillRect(px+2, py+2, 2, cs-4);
+        break;
+      }
+    }
+  }
+
+  // ── Fire rendering ────────────────────────────────────────────────────────
+
+  _drawFireAmbient(ctx, x, y, fire, cs) {
+    // Warm orange-red ambient glow radiating onto surrounding cells
+    const px=x*cs+cs/2, py=y*cs+cs/2;
+    const radius = cs * (2.8 + fire * 2.0); // much larger glow
+    const alpha  = fire * 0.65; // much brighter glow
+    const gr = ctx.createRadialGradient(px,py,0,px,py,radius);
+    gr.addColorStop(0,   `rgba(255,100,10,${alpha})`);
+    gr.addColorStop(0.45,`rgba(200,60,0,${alpha*0.5})`);
+    gr.addColorStop(1,   'rgba(0,0,0,0)');
+    ctx.fillStyle = gr;
+    ctx.fillRect(px-radius, py-radius, radius*2, radius*2);
+  }
+
+  _drawFireCell(ctx, x, y, fire, cs) {
+    const px=x*cs+cs/2, py=y*cs+cs/2;
+    const f1 = 0.82 + 0.18*Math.sin(this.time*9.5+x*2.7+y*3.14);
+    const eff  = fire * f1;
+    
+    // Wind offsets for volumetric flame leaning
+    const windDx = this.windVec ? this.windVec[0] * cs * 0.35 * eff : 0;
+    const windDy = this.windVec ? this.windVec[1] * cs * 0.35 * eff : -cs * 0.15; // default lean up
+
+    // Four layered volumetric gradients
+    const layers = [
+      {r:cs*0.35, aMax:0.98, ox: windDx*0.2, oy: windDy*0.2 - cs*0.1},   // bright core
+      {r:cs*0.65, aMax:0.75, ox: windDx*0.5, oy: windDy*0.5},   // inner flame
+      {r:cs*0.95, aMax:0.45, ox: windDx,     oy: windDy},       // flame body
+      {r:cs*1.40, aMax:0.18, ox: windDx*1.5, oy: windDy*1.5},   // outer heat glow
+    ];
+    for (const {r,aMax,ox,oy} of layers) {
+      const cx = px + ox;
+      const cy = py + oy;
+      const gr = ctx.createRadialGradient(cx,cy,0,cx,cy,r);
+      gr.addColorStop(0,   fireColor(eff,       aMax));
+      gr.addColorStop(0.4, fireColor(eff*0.75,  aMax*0.55));
+      gr.addColorStop(0.8, fireColor(eff*0.32,  aMax*0.18));
+      gr.addColorStop(1,   fireColor(eff*0.08,  0));
+      ctx.fillStyle = gr;
+      ctx.beginPath();
+      ctx.arc(cx, cy, r, 0, Math.PI*2);
+      ctx.fill();
+    }
+
+    // White-hot core for high intensity fire
+    if (eff > 0.48) {
+      const cx = px + windDx*0.1;
+      const cy = py + windDy*0.1 - cs*0.1;
+      const gr2 = ctx.createRadialGradient(cx,cy,0,cx,cy,cs*0.17);
+      gr2.addColorStop(0, `rgba(255,255,230,${(eff-0.48)*1.7})`);
+      gr2.addColorStop(1, 'rgba(255,210,50,0)');
+      ctx.fillStyle = gr2;
+      ctx.beginPath();
+      ctx.arc(cx, cy, cs*0.17, 0, Math.PI*2);
+      ctx.fill();
+    }
+  }
+
+  _drawSmoke(ctx, x, y, smoke, cs) {
+    const px=x*cs+cs/2, py=y*cs+cs/2;
+    const off = this.smokeLayer.getOffset(x,y,this.time);
+    const alpha = Math.min(0.85, smoke * 0.95);
+    const {smokeR:sr, smokeG:sg, smokeB:sb} = COLORS;
+
+    // Draw multiple overlapping soft circles to form a volumetric cloud
+    const cloudRadius = cs * 0.85; // overlaps neighboring cells
+    
+    ctx.save();
+    // Shift slightly based on smoke layer offset for animation
+    ctx.translate(px + off.dx, py + off.dy);
+    
+    // Base fluffy cloud layer
+    const gr = ctx.createRadialGradient(0, 0, 0, 0, 0, cloudRadius);
+    gr.addColorStop(0, `rgba(${sr},${sg},${sb},${alpha})`);
+    gr.addColorStop(0.5, `rgba(${sr},${sg},${sb},${alpha*0.75})`);
+    gr.addColorStop(1, `rgba(${sr},${sg},${sb},0)`);
+    
+    ctx.fillStyle = gr;
+    ctx.beginPath();
+    ctx.arc(0, 0, cloudRadius, 0, Math.PI*2);
+    ctx.fill();
+
+    // Secondary offset puff for 3D depth and density
+    if (smoke > 0.3) {
+      const puffRadius = cs * 0.6;
+      const puffOffX = off.dy * 1.5; // orthogonal offset
+      const puffOffY = off.dx * 1.5;
+      const gr2 = ctx.createRadialGradient(puffOffX, puffOffY, 0, puffOffX, puffOffY, puffRadius);
+      gr2.addColorStop(0, `rgba(${sr+15},${sg+15},${sb+20},${alpha*0.5})`);
+      gr2.addColorStop(1, `rgba(${sr+15},${sg+15},${sb+20},0)`);
+      
+      ctx.fillStyle = gr2;
+      ctx.beginPath();
+      ctx.arc(puffOffX, puffOffY, puffRadius, 0, Math.PI*2);
+      ctx.fill();
+    }
+    
+    ctx.restore();
+  }
+
+  _drawExit(ctx, x, y, cs, fire) {
+    const px=x*cs, py=y*cs;
+    const pulse  = 0.62 + 0.38*Math.sin(this.time*2.8 + x + y);
+    const blocked = fire >= EXIT_BLOCKED_FIRE_THRESHOLD;
+    const col1 = blocked ? '#ef4444' : COLORS.exitGlow;
+    const col2 = blocked ? '#dc2626' : COLORS.exitGlow2;
+
+    ctx.save();
+
+    // Outer glow ring
+    ctx.shadowBlur  = cs * 1.1 * pulse;
+    ctx.shadowColor = col1;
+    ctx.strokeStyle = col1;
+    ctx.lineWidth   = 2;
+    ctx.strokeRect(px+2, py+2, cs-4, cs-4);
+
+    // Interior tint
+    ctx.fillStyle = blocked ? 'rgba(220,38,38,0.11)' : 'rgba(34,197,94,0.11)';
+    ctx.fillRect(px+3, py+3, cs-6, cs-6);
+
+    // Center symbol
+    ctx.shadowBlur = 0;
+    const sa = 0.55 + 0.35*pulse;
+    ctx.fillStyle = blocked
+      ? `rgba(255,90,90,${sa})`
+      : `rgba(74,222,128,${sa})`;
+    ctx.font = `bold ${~~(cs*0.50)}px sans-serif`;
+    ctx.textAlign='center'; ctx.textBaseline='middle';
+    ctx.fillText(blocked ? '✕' : '⇥', px+cs/2, py+cs/2+1);
+
+    // Corner bracket accents
+    ctx.fillStyle = blocked ? 'rgba(248,113,113,0.75)' : 'rgba(74,222,128,0.75)';
+    const ca=5;
+    ctx.fillRect(px,      py,      ca, 1); ctx.fillRect(px, py, 1, ca);
+    ctx.fillRect(px+cs-ca,py,      ca, 1); ctx.fillRect(px+cs-1,py,1,ca);
+    ctx.fillRect(px,      py+cs-1, ca, 1); ctx.fillRect(px, py+cs-ca, 1, ca);
+    ctx.fillRect(px+cs-ca,py+cs-1, ca, 1); ctx.fillRect(px+cs-1,py+cs-ca,1,ca);
+
+    ctx.restore();
+  }
+
+  _drawDoor(ctx, x, y, ct, cs) {
+    const px=x*cs, py=y*cs;
+
+    if (ct === DOOR_OPEN) {
+      // Open doorway — dark passage with door pressed to side
+      ctx.fillStyle = 'rgba(0,0,0,0.38)';
+      ctx.fillRect(px+4, py, cs-6, cs);
+
+      // Door panel pushed to left wall
+      ctx.fillStyle = COLORS.doorWood;
+      ctx.fillRect(px, py, 4, cs);
+
+      // Door frame along top
+      ctx.fillStyle = COLORS.doorFrame;
+      ctx.fillRect(px, py, cs, 2);
+
+      // Faint blue passage glow
+      ctx.fillStyle = 'rgba(125,211,252,0.10)';
+      ctx.fillRect(px+5, py+2, cs-7, cs-4);
+    } else {
+      // Closed door — wood panel with visible detail
+      // Door body
+      ctx.fillStyle = COLORS.doorWood;
+      ctx.fillRect(px+2, py+1, cs-4, cs-2);
+
+      // Door frame
+      ctx.fillStyle = COLORS.doorFrame;
+      ctx.fillRect(px, py,        cs, 2);         // top rail
+      ctx.fillRect(px, py+cs-2,   cs, 2);         // bottom rail
+      ctx.fillRect(px, py+2,      2,  cs-4);      // left stile
+      ctx.fillRect(px+cs-2, py+2, 2,  cs-4);      // right stile
+
+      // Panel lines (3 horizontal panels)
+      ctx.fillStyle = COLORS.doorPanel;
+      ctx.fillRect(px+4, py+~~(cs*0.14), cs-8, 1);
+      ctx.fillRect(px+4, py+~~(cs*0.50), cs-8, 1);
+      ctx.fillRect(px+4, py+~~(cs*0.82), cs-8, 1);
+
+      // Panel inset shadow
+      ctx.fillStyle = 'rgba(0,0,0,0.13)';
+      ctx.fillRect(px+4, py+~~(cs*0.14)+2, cs-8, ~~(cs*0.34));
+      ctx.fillRect(px+4, py+~~(cs*0.50)+2, cs-8, ~~(cs*0.30));
+
+      // Doorknob — gold circle
+      ctx.beginPath();
+      ctx.arc(px+cs-8, py+~~(cs/2), 2.5, 0, Math.PI*2);
+      ctx.fillStyle = 'rgba(210,168,75,0.88)';
+      ctx.fill();
+    }
+  }
+
+  // ── Agent ─────────────────────────────────────────────────────────────────
+
+  _updateTrail(ax, ay, cs) {
+    const px=ax*cs+cs/2, py=ay*cs+cs/2;
+    if (!this.agentTrail.length
+      || Math.abs(this.agentTrail[0].px-px)>1
+      || Math.abs(this.agentTrail[0].py-py)>1) {
+      this.agentTrail.unshift({px,py,t:this.time});
+    }
+    while (this.agentTrail.length > 14) this.agentTrail.pop();
+  }
+
+  _drawTrail(ctx, cs) {
+    if (this.agentTrail.length < 2) return;
+    for (let i=1; i<this.agentTrail.length; i++) {
+      const alpha = (1-i/this.agentTrail.length)*0.42;
+      const r = Math.max(1.5, (1-i/this.agentTrail.length)*cs*0.22);
+      ctx.beginPath();
+      ctx.arc(this.agentTrail[i].px, this.agentTrail[i].py, r, 0, Math.PI*2);
+      ctx.fillStyle = `rgba(14,165,233,${alpha})`;
+      ctx.fill();
+    }
+  }
+
+  _drawAgent(ctx, ax, ay, health, alive, evacuated, cs) {
+    if (!alive && !evacuated) return;
+    const px=ax*cs+cs/2, py=ay*cs+cs/2;
+    const pulse  = 0.82 + 0.18*Math.sin(this.time*3.6);
+    const pulse2 = 0.70 + 0.30*Math.sin(this.time*2.1+1.0);
+    const r = cs * 0.38 * pulse; // increased size for better visibility
+
+    const hRatio = Math.max(0, Math.min(1, health/100));
+    const agentColor = evacuated  ? '#4ade80'
+      : hRatio > 0.6 ? COLORS.agentCore
+      : hRatio > 0.3 ? '#f59e0b'
+      :                '#ef4444';
+
+    ctx.save();
+
+    // Outer aura pulse (very faint)
+    const auraR = cs * 0.74 * pulse2;
+    const auraGr = ctx.createRadialGradient(px,py,r*0.9,px,py,auraR);
+    auraGr.addColorStop(0,   'rgba(0,0,0,0)');
+    auraGr.addColorStop(0.55, evacuated ? 'rgba(74,222,128,0.09)' : 'rgba(56,189,248,0.09)');
+    auraGr.addColorStop(1,   'rgba(0,0,0,0)');
+    ctx.fillStyle = auraGr;
+    ctx.beginPath();
+    ctx.arc(px, py, auraR, 0, Math.PI*2);
+    ctx.fill();
+
+    // Drop shadow
+    ctx.fillStyle = 'rgba(0,0,0,0.32)';
+    ctx.beginPath();
+    ctx.ellipse(px+2, py+3, r*0.9, r*0.48, 0, 0, Math.PI*2);
+    ctx.fill();
+
+    // Glow
+    ctx.shadowBlur  = cs * 0.90;
+    ctx.shadowColor = evacuated ? '#22c55e' : agentColor;
+
+    // Body — radial gradient for sphere illusion
+    ctx.beginPath();
+    ctx.arc(px, py, r, 0, Math.PI*2);
+    const bodyGr = ctx.createRadialGradient(px-r*0.28, py-r*0.28, 0, px, py, r);
+    bodyGr.addColorStop(0,    '#ffffff');
+    bodyGr.addColorStop(0.32, COLORS.agentBright);
+    bodyGr.addColorStop(0.70, agentColor);
+    bodyGr.addColorStop(1,    'rgba(0,80,160,0.55)');
+    ctx.fillStyle = bodyGr;
+    ctx.fill();
+
+    // Outline
+    ctx.shadowBlur = 0;
+    ctx.strokeStyle = 'rgba(255,255,255,0.88)';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+    ctx.restore();
+
+    // Health arc ring
+    ctx.save();
+    const arcR = r * 1.65;
+    // Track
+    ctx.beginPath();
+    ctx.arc(px, py, arcR, 0, Math.PI*2);
+    ctx.strokeStyle = 'rgba(255,255,255,0.07)';
+    ctx.lineWidth = 2.5;
+    ctx.stroke();
+    // Fill arc
+    if (hRatio > 0) {
+      ctx.beginPath();
+      ctx.arc(px, py, arcR, -Math.PI/2, -Math.PI/2 + hRatio*Math.PI*2);
+      ctx.strokeStyle = hRatio>0.6?'#4ade80':hRatio>0.3?'#fbbf24':'#f87171'; // More vibrant health colors
+      ctx.lineWidth = 3.0; // Slightly thicker
+      ctx.lineCap = 'round';
+      ctx.stroke();
+      
+      // Arc glow
+      ctx.shadowBlur = 8;
+      ctx.shadowColor = ctx.strokeStyle;
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  // ── Wind rose ─────────────────────────────────────────────────────────────
+
+  drawWindRose(canvas2, windDir, speed=1) {
+    if (!canvas2) return;
+    const ctx=canvas2.getContext('2d');
+    const w=canvas2.width, h=canvas2.height, cx=w/2, cy=h/2;
+    ctx.clearRect(0,0,w,h);
+
+    const wv=WIND_DIRS[windDir]||[0,0];
+    const angle=Math.atan2(wv[1],wv[0]);
+    const isCalm=windDir==='CALM';
+
+    // Compass ring
+    ctx.beginPath();
+    ctx.arc(cx,cy,cx-4,0,Math.PI*2);
+    ctx.strokeStyle='rgba(120,140,220,0.28)';
+    ctx.lineWidth=1.5;
+    ctx.stroke();
+
+    // Cardinal labels
+    const labels=[['N',0,-1],['E',1,0],['S',0,1],['W',-1,0]];
+    ctx.font=`${w*0.16}px monospace`;
+    ctx.textAlign='center'; ctx.textBaseline='middle';
+    for (const [l,dx,dy] of labels) {
+      ctx.fillStyle='rgba(160,172,232,0.55)';
+      ctx.fillText(l, cx+dx*(cx-10), cy+dy*(cy-10));
+    }
+
+    if (!isCalm) {
+      const arrowLen=cx*0.60;
+      const ax2=cx+Math.cos(angle)*arrowLen, ay2=cy+Math.sin(angle)*arrowLen;
+      ctx.beginPath();
+      ctx.moveTo(cx,cy);
+      ctx.lineTo(ax2,ay2);
+      ctx.strokeStyle='rgba(251,191,36,0.95)';
+      ctx.lineWidth=2.5;
+      ctx.stroke();
+
+      const headLen=8, ha=0.40;
+      ctx.beginPath();
+      ctx.moveTo(ax2,ay2);
+      ctx.lineTo(ax2-headLen*Math.cos(angle-ha), ay2-headLen*Math.sin(angle-ha));
+      ctx.lineTo(ax2-headLen*Math.cos(angle+ha), ay2-headLen*Math.sin(angle+ha));
+      ctx.closePath();
+      ctx.fillStyle='rgba(251,191,36,0.95)';
+      ctx.fill();
+
+      ctx.font=`bold ${w*0.18}px monospace`;
+      ctx.fillStyle='rgba(255,210,80,0.95)';
+      ctx.textAlign='center'; ctx.textBaseline='middle';
+      ctx.fillText(windDir, cx, cy);
+    } else {
+      ctx.font=`${w*0.18}px monospace`;
+      ctx.fillStyle='rgba(160,182,232,0.75)';
+      ctx.textAlign='center'; ctx.textBaseline='middle';
+      ctx.fillText('CALM', cx, cy);
+    }
+  }
+}

frontend_new_desgin/js/sim.js

@@ -0,0 +1,521 @@
+/**
+ * sim.js — JavaScript port of pyre_env fire simulation
+ * Mirrors server/fire_sim.py and server/floor_plan.py exactly.
+ */
+
+// Cell types
+const FLOOR = 0, WALL = 1, DOOR_OPEN = 2, DOOR_CLOSED = 3, EXIT = 4, OBSTACLE = 5;
+
+const FIRE_IGNITION = 0.1;
+const FIRE_BURNING = 0.3;
+const FIRE_INTENSITY_GAIN = 0.15;
+const BURNOUT_TICKS = 5;
+const DOOR_CLOSED_FIRE_FACTOR = 0.15;
+const SMOKE_SPREAD_RATE = 0.20;
+const SMOKE_DOOR_FACTOR = 0.4;
+const SMOKE_DECAY = 0.02;
+const EXIT_BLOCKED_FIRE_THRESHOLD = 0.5;
+
+const WIND_DIRS = {
+  N:[0,-1], NE:[1,-1], E:[1,0], SE:[1,1],
+  S:[0,1], SW:[-1,1], W:[-1,0], NW:[-1,-1], CALM:[0,0]
+};
+const CARDINAL = [[0,-1],[0,1],[-1,0],[1,0]];
+
+function windMult(dx, dy, wx, wy) {
+  if (wx===0&&wy===0) return 1.0;
+  const dot = dx*wx + dy*wy;
+  return dot>0 ? 2.0 : dot<0 ? 0.5 : 1.0;
+}
+
+// Seeded PRNG (mulberry32)
+function makePRNG(seed) {
+  let s = seed >>> 0;
+  return function() {
+    s += 0x6D2B79F5;
+    let t = s;
+    t = Math.imul(t ^ t>>>15, t|1);
+    t ^= t + Math.imul(t^t>>>7, t|61);
+    return ((t^t>>>14)>>>0) / 4294967296;
+  };
+}
+
+class FireSim {
+  constructor(w, h, rng, pSpread=0.25, windDir='CALM', humidity=0.25, fuelMap=null, ventMap=null) {
+    this.w=w; this.h=h; this.rng=rng;
+    const wv = WIND_DIRS[windDir]||[0,0];
+    this.wx=wv[0]; this.wy=wv[1];
+    this.effectiveSpread = pSpread * Math.max(0, 1-humidity);
+    this.fuelMap=fuelMap; this.ventMap=ventMap;
+  }
+
+  step(cellGrid, fireGrid, smokeGrid, burnTimers) {
+    const {w, h} = this;
+    const burned = [];
+    const ignite = new Uint8Array(w*h);
+
+    for (let y=0;y<h;y++) for (let x=0;x<w;x++) {
+      const i=y*w+x;
+      if (fireGrid[i] < FIRE_BURNING) continue;
+      for (const [dx,dy] of CARDINAL) {
+        const nx=x+dx, ny=y+dy;
+        if (nx<0||nx>=w||ny<0||ny>=h) continue;
+        const ni=ny*w+nx, nct=cellGrid[ni];
+        if (nct===WALL||nct===OBSTACLE||fireGrid[ni]>0) continue;
+        let p = nct===DOOR_CLOSED ? this.effectiveSpread*DOOR_CLOSED_FIRE_FACTOR : this.effectiveSpread;
+        p *= windMult(dx,dy,this.wx,this.wy);
+        if (this.fuelMap) p *= this.fuelMap[ni];
+        if (this.rng() < Math.min(1,p)) ignite[ni]=1;
+      }
+    }
+
+    const newFire = fireGrid.slice();
+    const newTimers = burnTimers.slice();
+    for (let y=0;y<h;y++) for (let x=0;x<w;x++) {
+      const i=y*w+x, ct=cellGrid[i];
+      if (ct===WALL||ct===OBSTACLE) continue;
+      if (fireGrid[i]>0) {
+        let gain = FIRE_INTENSITY_GAIN;
+        if (this.fuelMap) gain*=this.fuelMap[i];
+        newFire[i] = Math.min(1, fireGrid[i]+gain);
+        if (fireGrid[i]>=FIRE_BURNING) newTimers[i]++;
+        if (newTimers[i]>=BURNOUT_TICKS && newFire[i]>=1.0) {
+          cellGrid[i]=OBSTACLE; newFire[i]=0; newTimers[i]=0;
+          burned.push([x,y]);
+        }
+      } else if (ignite[i]) {
+        newFire[i]=FIRE_IGNITION; newTimers[i]=0;
+      }
+    }
+    for (let i=0;i<fireGrid.length;i++){fireGrid[i]=newFire[i];burnTimers[i]=newTimers[i];}
+    this._spreadSmoke(cellGrid, fireGrid, smokeGrid);
+    return burned;
+  }
+
+  _spreadSmoke(cellGrid, fireGrid, smokeGrid) {
+    const {w,h}=this;
+    const ns=smokeGrid.slice();
+    for (let y=0;y<h;y++) for (let x=0;x<w;x++) {
+      const i=y*w+x, ct=cellGrid[i];
+      if (ct===WALL||ct===OBSTACLE) continue;
+      if (fireGrid[i]>=FIRE_BURNING) ns[i]=Math.min(1, smokeGrid[i]+0.3);
+      for (const [dx,dy] of CARDINAL) {
+        const nx=x+dx, ny=y+dy;
+        if (nx<0||nx>=w||ny<0||ny>=h) continue;
+        const ni=ny*w+nx, nct=cellGrid[ni];
+        if (nct===WALL||nct===OBSTACLE) continue;
+        if (smokeGrid[i]>smokeGrid[ni]) {
+          const diff=smokeGrid[i]-smokeGrid[ni];
+          let rate=SMOKE_SPREAD_RATE;
+          if (nct===DOOR_CLOSED) rate*=SMOKE_DOOR_FACTOR;
+          ns[ni]=Math.min(1, ns[ni]+Math.min(diff*rate, diff*0.5));
+        }
+      }
+      const decay=this.ventMap?this.ventMap[i]:SMOKE_DECAY;
+      ns[i]=Math.max(0, ns[i]-decay);
+    }
+    for (let i=0;i<smokeGrid.length;i++) smokeGrid[i]=ns[i];
+  }
+}
+
+// ─── Floor plan templates (mirrors floor_plan.py) ───────────────────────────
+
+function makeSmallOffice() {
+  const W=16, H=16;
+  const rows=[
+    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+    [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1],
+    [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1],
+    [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1],
+    [1,1,2,1,1,1,2,1,1,1,2,1,1,1,2,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,1,2,1,1,1,2,1,1,1,2,1,1,1,2,1],
+    [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1],
+    [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1],
+    [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1],
+    [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1],
+    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+  ];
+  const grid=rows.flat();
+  return {
+    name:'small_office', w:W, h:H, grid,
+    exits:[[0,6],[15,8]],
+    doors:[[2,4],[6,4],[10,4],[14,4],[2,10],[6,10],[10,10],[14,10]],
+    agentSpawns: (() => {
+      const s=[];
+      for(let y=5;y<=9;y++) for(let x=1;x<=14;x++) if(grid[y*W+x]===0) s.push([x,y]);
+      return s;
+    })(),
+    zoneMap: buildZoneMap_SO(grid,W,H)
+  };
+}
+
+function buildZoneMap_SO(grid,W,H) {
+  const zm={};
+  for(let y=0;y<H;y++) for(let x=0;x<W;x++) {
+    const ct=grid[y*W+x];
+    if(ct===0) zm[`${x},${y}`]=y<=4?'north_offices':y>=5&&y<=9?'main_corridor':'south_offices';
+    else if(ct===4) zm[`${x},${y}`]='exit';
+  }
+  return zm;
+}
+
+function makeOpenPlan() {
+  const W=16, H=16;
+  const rows=[
+    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+    [4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,5,5,0,0,0,0,0,5,5,0,0,0,1],
+    [1,0,0,5,5,0,0,0,0,0,5,5,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,5,5,0,0,0,0,0,5,5,0,0,0,1],
+    [1,0,0,5,5,0,0,0,0,0,5,5,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,4],
+  ];
+  const grid=rows.flat();
+  const agentSpawns=[];
+  for(let y=1;y<H-1;y++) for(let x=1;x<W-1;x++) if(grid[y*W+x]===FLOOR) agentSpawns.push([x,y]);
+  return {name:'open_plan',w:W,h:H,grid,exits:[[0,1],[15,15]],doors:[],agentSpawns};
+}
+
+function makeTCorridor() {
+  const W=16, H=16;
+  const rows=[
+    [1,1,1,1,1,1,1,4,1,1,1,1,1,1,1,1],
+    [1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1],
+    [1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1],
+    [1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1],
+    [1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1],
+    [1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1],
+    [1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1],
+    [4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4],
+    [1,0,0,1,0,0,1,0,1,0,0,1,0,0,0,1],
+    [1,0,0,1,0,0,1,0,1,0,0,1,0,0,0,1],
+    [1,1,2,1,1,2,1,0,1,2,1,1,1,1,2,1],
+    [1,0,0,1,0,0,1,0,1,0,0,1,0,0,0,1],
+    [1,0,0,1,0,0,1,0,1,0,0,1,0,0,0,1],
+    [1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1],
+    [1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1],
+    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+  ];
+  const grid=rows.flat();
+  const agentSpawns=[];
+  for(let x=1;x<W-1;x++) if(grid[7*W+x]===FLOOR) agentSpawns.push([x,7]);
+  for(let y=4;y<8;y++) if(grid[y*W+7]===FLOOR) agentSpawns.push([7,y]);
+  return {name:'t_corridor',w:W,h:H,grid,exits:[[7,0],[0,7],[15,7]],doors:[[2,10],[5,10],[9,10],[14,10]],agentSpawns};
+}
+
+const TEMPLATES = [makeSmallOffice(), makeOpenPlan(), makeTCorridor()];
+
+// ─── BFS exit distance ──────────────────────────────────────────────────────
+
+function bfsExitDist(ax, ay, exits, cellGrid, w, h) {
+  const blocked = exits.filter(([ex,ey])=>cellGrid[ey*w+ex]===OBSTACLE);
+  const targets = exits.filter(([ex,ey])=>cellGrid[ey*w+ex]!==OBSTACLE);
+  if (!targets.length) return 999;
+  const visited = new Set([`${ax},${ay}`]);
+  const queue = [[ax,ay,0]];
+  while (queue.length) {
+    const [x,y,d]=queue.shift();
+    for (const [dx,dy] of CARDINAL) {
+      const nx=x+dx, ny=y+dy;
+      if (nx<0||nx>=w||ny<0||ny>=h) continue;
+      const key=`${nx},${ny}`;
+      if (visited.has(key)) continue;
+      const ct=cellGrid[ny*w+nx];
+      if (ct===WALL||ct===OBSTACLE||ct===DOOR_CLOSED) continue;
+      if (targets.some(([ex,ey])=>ex===nx&&ey===ny)) return d+1;
+      visited.add(key);
+      queue.push([nx,ny,d+1]);
+    }
+  }
+  return 999;
+}
+
+// ─── Fog of war (BFS, visibility radius shrinks under smoke) ────────────────
+
+function computeVisible(ax, ay, cellGrid, smokeGrid, w, h) {
+  const smokeDensity = smokeGrid[ay*w+ax];
+  const radius = smokeDensity>0.5 ? 2 : smokeDensity>0.2 ? 3 : 5;
+  const visible = new Set([`${ax},${ay}`]);
+  const queue = [[ax,ay,0]];
+  const visited = new Set([`${ax},${ay}`]);
+  while (queue.length) {
+    const [x,y,d]=queue.shift();
+    if (d>=radius) continue;
+    for (const [dx,dy] of CARDINAL) {
+      const nx=x+dx, ny=y+dy;
+      if (nx<0||nx>=w||ny<0||ny>=h) continue;
+      const key=`${nx},${ny}`;
+      if (visited.has(key)) continue;
+      visited.add(key);
+      const ct=cellGrid[ny*w+nx];
+      if (ct===WALL) continue;
+      visible.add(key);
+      queue.push([nx,ny,d+1]);
+    }
+  }
+  return visible;
+}
+
+// ─── Simple BFS demo agent ──────────────────────────────────────────────────
+
+class DemoAgent {
+  constructor() { this.lastDir = null; this.stuckCount = 0; }
+
+  chooseAction(state) {
+    const { agentX:ax, agentY:ay, cellGrid, fireGrid, smokeGrid, exits, w, h } = state;
+    const dirs = ['north','south','east','west'];
+    const deltas = {north:[0,-1],south:[0,1],east:[1,0],west:[-1,0]};
+
+    // Find best direction toward nearest exit
+    let bestDir = null, bestDist = Infinity;
+    for (const dir of dirs) {
+      const [dx,dy]=deltas[dir];
+      const nx=ax+dx, ny=ay+dy;
+      if (nx<0||nx>=w||ny<0||ny>=h) continue;
+      const ct=cellGrid[ny*w+nx];
+      if (ct===WALL||ct===OBSTACLE) continue;
+      if (ct===DOOR_CLOSED) {
+        // Try to open door if fire is not adjacent
+        return {action:'door', target_id:this._findDoor(state,nx,ny), door_state:'open'};
+      }
+      const fire=fireGrid[ny*w+nx];
+      if (fire>0.4) continue; // avoid fire
+      const d = bfsExitDist(nx,ny,exits,cellGrid,w,h);
+      if (d<bestDist) { bestDist=d; bestDir=dir; }
+    }
+
+    if (!bestDir || Math.random()<0.15) {
+      // Random valid move
+      const shuffled=[...dirs].sort(()=>Math.random()-0.5);
+      for (const dir of shuffled) {
+        const [dx,dy]=deltas[dir];
+        const nx=ax+dx, ny=ay+dy;
+        if (nx<0||nx>=w||ny<0||ny>=h) continue;
+        const ct=cellGrid[ny*w+nx];
+        if (ct!==WALL&&ct!==OBSTACLE&&ct!==DOOR_CLOSED&&fireGrid[ny*w+nx]<0.4) {
+          return {action:'move',direction:dir};
+        }
+      }
+    }
+    return bestDir ? {action:'move',direction:bestDir} : {action:'wait'};
+  }
+
+  _findDoor(state, dx, dy) {
+    for (const [id,[x,y]] of Object.entries(state.doorRegistry||{})) {
+      if (x===dx&&y===dy) return id;
+    }
+    return `door_1`;
+  }
+}
+
+// ─── Episode state machine ───────────────────────────────────────────────────
+
+class PyreEpisode {
+  constructor(templateIdx=0, seed=42, difficulty='medium') {
+    const presets = {
+      easy:   {nSources:[1,1],  pSpread:[0.10,0.20], humidity:[0.30,0.50], winds:['CALM'],          maxSteps:200},
+      medium: {nSources:[2,4],  pSpread:[0.15,0.40], humidity:[0.10,0.45], winds:Object.keys(WIND_DIRS), maxSteps:150},
+      hard:   {nSources:[3,5],  pSpread:[0.30,0.55], humidity:[0.05,0.20], winds:Object.keys(WIND_DIRS).filter(d=>d!=='CALM'), maxSteps:100},
+    };
+    const p = presets[difficulty]||presets.medium;
+    const rng = makePRNG(seed);
+    const tpl = TEMPLATES[templateIdx % TEMPLATES.length];
+
+    // Deep-copy grid
+    this.cellGrid = tpl.grid.slice();
+    this.w = tpl.w; this.h = tpl.h;
+    this.exits = tpl.exits.map(e=>[...e]);
+    this.doors = (tpl.doors||[]).map(d=>[...d]);
+    this.doorRegistry = {};
+    for (let j=0;j<this.doors.length;j++) {
+      this.doorRegistry[`door_${j+1}`]=this.doors[j];
+      if (rng()<0.3) this.cellGrid[this.doors[j][1]*this.w+this.doors[j][0]]=DOOR_CLOSED;
+    }
+
+    // Fire params
+    const [ns0,ns1]=p.nSources, [sp0,sp1]=p.pSpread, [hm0,hm1]=p.humidity;
+    const nSrc = Math.round(ns0 + rng()*(ns1-ns0));
+    const pSpread = sp0 + rng()*(sp1-sp0);
+    const humidity = hm0 + rng()*(hm1-hm0);
+    const windDir = p.winds[Math.floor(rng()*p.winds.length)];
+
+    this.pSpread = pSpread;
+    this.humidity = humidity;
+    this.windDir = windDir;
+    this.maxSteps = p.maxSteps;
+    this.templateName = tpl.name;
+    this.difficulty = difficulty;
+    this.seed = seed;
+
+    // Fire grids
+    this.fireGrid = new Float32Array(this.w*this.h);
+    this.smokeGrid = new Float32Array(this.w*this.h);
+    this.burnTimers = new Int32Array(this.w*this.h);
+
+    // Place fire sources
+    const floorCells = [];
+    for (let y=0;y<this.h;y++) for (let x=0;x<this.w;x++) {
+      if (this.cellGrid[y*this.w+x]===FLOOR) {
+        const farFromExit = this.exits.every(([ex,ey])=>Math.abs(x-ex)+Math.abs(y-ey)>=5);
+        if (farFromExit) floorCells.push([x,y]);
+      }
+    }
+    floorCells.sort(()=>rng()-0.5);
+
+    // Agent spawn
+    const spawn = tpl.agentSpawns[Math.floor(rng()*tpl.agentSpawns.length)];
+    this.agentX = spawn[0]; this.agentY = spawn[1];
+    this.agentHealth = 100.0;
+    this.agentAlive = true;
+    this.agentEvacuated = false;
+    this.stepCount = 0;
+
+    // Place fires far from agent
+    const fireSources = floorCells.filter(([fx,fy])=>Math.abs(fx-this.agentX)+Math.abs(fy-this.agentY)>=4).slice(0,nSrc);
+    for (const [fx,fy] of fireSources) this.fireGrid[fy*this.w+fx]=FIRE_IGNITION;
+
+    // Fire sim
+    this.sim = new FireSim(this.w, this.h, makePRNG(seed+1), pSpread, windDir, humidity);
+
+    // Tracking
+    this.visibleCells = new Set();
+    this.exploreSet = new Set();
+    this._updateVisibility();
+
+    // Reward tracking
+    this.totalReward = 0;
+    this.rewardHistory = [];
+    this.fireSizeHistory = [];
+    this.actionCounts = {move:0, door:0, look:0, wait:0};
+    this.eventLog = [];
+    this.lastAction = null;
+    this.lastReward = 0;
+  }
+
+  _updateVisibility() {
+    this.visibleCells = computeVisible(this.agentX, this.agentY, this.cellGrid, this.smokeGrid, this.w, this.h);
+    if (!this.exploreSet) this.exploreSet = new Set();
+    for (const k of this.visibleCells) this.exploreSet.add(k);
+  }
+
+  _fireSize() {
+    let count=0;
+    for (let i=0;i<this.fireGrid.length;i++) if(this.fireGrid[i]>=FIRE_BURNING) count++;
+    return count;
+  }
+
+  step(action) {
+    if (!this.agentAlive || this.agentEvacuated || this.stepCount>=this.maxSteps) return false;
+
+    const prevX=this.agentX, prevY=this.agentY;
+    let feedback = '';
+
+    // Execute action
+    const deltas = {north:[0,-1],south:[0,1],east:[1,0],west:[-1,0]};
+    if (action.action==='move') {
+      const [dx,dy]=deltas[action.direction]||[0,0];
+      const nx=this.agentX+dx, ny=this.agentY+dy;
+      if (nx>=0&&nx<this.w&&ny>=0&&ny<this.h) {
+        const ct=this.cellGrid[ny*this.w+nx];
+        if (ct!==WALL&&ct!==OBSTACLE&&ct!==DOOR_CLOSED) {
+          this.agentX=nx; this.agentY=ny;
+          feedback=`Moved ${action.direction}`;
+        } else feedback=`Blocked: ${ct===DOOR_CLOSED?'door closed':'wall'}`;
+      }
+      this.actionCounts.move++;
+    } else if (action.action==='door') {
+      const doorPos = this.doorRegistry[action.target_id];
+      if (doorPos) {
+        const [dx,dy]=doorPos;
+        if (Math.abs(dx-this.agentX)+Math.abs(dy-this.agentY)<=2) {
+          const cur=this.cellGrid[dy*this.w+dx];
+          if (action.door_state==='open'&&cur===DOOR_CLOSED) {
+            this.cellGrid[dy*this.w+dx]=DOOR_OPEN;
+            feedback=`Opened ${action.target_id}`;
+          } else if (action.door_state==='close'&&cur===DOOR_OPEN) {
+            this.cellGrid[dy*this.w+dx]=DOOR_CLOSED;
+            feedback=`Closed ${action.target_id} — slowing fire`;
+          }
+        }
+      }
+      this.actionCounts.door++;
+    } else if (action.action==='wait') {
+      feedback='Waiting...'; this.actionCounts.wait++;
+    } else if (action.action==='look') {
+      feedback=`Looking ${action.direction||''}`; this.actionCounts.look++;
+    }
+
+    // Check evacuation
+    const agentCell=this.cellGrid[this.agentY*this.w+this.agentX];
+    if (agentCell===EXIT && this.fireGrid[this.agentY*this.w+this.agentX]<EXIT_BLOCKED_FIRE_THRESHOLD) {
+      this.agentEvacuated=true;
+      feedback='EVACUATED — reached safety!';
+    }
+
+    // Advance fire
+    const burned = this.sim.step(this.cellGrid, this.fireGrid, this.smokeGrid, this.burnTimers);
+
+    // Health damage
+    const ai=this.agentY*this.w+this.agentX;
+    const smoke=this.smokeGrid[ai], fire=this.fireGrid[ai];
+    let dmg=0;
+    if (smoke>=0.8) dmg+=5; else if (smoke>=0.5) dmg+=2; else if (smoke>=0.2) dmg+=0.5;
+    if (fire>=FIRE_BURNING) dmg+=10;
+    this.agentHealth=Math.max(0, this.agentHealth-dmg);
+    if (this.agentHealth<=0) { this.agentAlive=false; feedback='Incapacitated by fire and smoke!'; }
+
+    this.stepCount++;
+    this._updateVisibility();
+
+    // Reward (simplified rubric)
+    const prevDist=bfsExitDist(prevX,prevY,this.exits,this.cellGrid,this.w,this.h);
+    const curDist=bfsExitDist(this.agentX,this.agentY,this.exits,this.cellGrid,this.w,this.h);
+    let reward=-0.01;
+    if (curDist<prevDist) reward+=0.1;
+    if (smoke>=0.5||fire>=FIRE_BURNING) reward-=0.5;
+    reward-=0.02*dmg;
+    if (this.agentEvacuated) reward+=5.0+(0.05*Math.max(0,this.maxSteps-this.stepCount));
+    if (!this.agentAlive) reward-=10.0;
+    if (action.action==='door'&&action.door_state==='close') reward+=0.5;
+
+    this.lastReward=Math.round(reward*1000)/1000;
+    this.totalReward=Math.round((this.totalReward+reward)*1000)/1000;
+    this.rewardHistory.push(this.totalReward);
+    this.fireSizeHistory.push(this._fireSize());
+
+    if (feedback) this.eventLog.unshift({step:this.stepCount, text:feedback, reward:this.lastReward});
+    if (this.eventLog.length>50) this.eventLog.pop();
+    if (burned.length) this.eventLog.unshift({step:this.stepCount, text:`${burned.length} cell(s) burned out`, reward:0, isAlert:true});
+
+    this.lastAction = action;
+    return !this.agentEvacuated && this.agentAlive && this.stepCount<this.maxSteps;
+  }
+
+  get done() { return !this.agentAlive||this.agentEvacuated||this.stepCount>=this.maxSteps; }
+  get percentBurned() { return Math.round(100*Array.from(this.fireGrid).filter(f=>f>0).length/(this.w*this.h)); }
+  get exitBlocked() { return this.exits.filter(([ex,ey])=>this.fireGrid[ey*this.w+ex]>=EXIT_BLOCKED_FIRE_THRESHOLD); }
+  get smokeLevel() {
+    const s=this.smokeGrid[this.agentY*this.w+this.agentX];
+    return s>=0.8?'heavy':s>=0.5?'moderate':s>=0.2?'light':'clear';
+  }
+  get healthStatus() {
+    if(this.agentHealth>75) return 'Good';
+    if(this.agentHealth>50) return 'Moderate';
+    if(this.agentHealth>25) return 'Low';
+    return 'Critical';
+  }
+}

openenv_pyre_env.egg-info/PKG-INFO

@@ -13,3 +13,15 @@ Requires-Dist: langchain-openai>=1.2.1
 Provides-Extra: dev
 Requires-Dist: pytest>=8.0.0; extra == "dev"
 Requires-Dist: pytest-cov>=4.0.0; extra == "dev"
+Provides-Extra: train
+Requires-Dist: datasets>=4.8.4; extra == "train"
+Requires-Dist: peft>=0.15.2; extra == "train"
+Requires-Dist: tensorboard>=2.20.0; extra == "train"
+Requires-Dist: torch>=2.9.0; extra == "train"
+Requires-Dist: transformers>=4.57.6; extra == "train"
+Requires-Dist: trl>=1.2.0; extra == "train"
+Requires-Dist: tornado>=6.5.5; extra == "train"
+Requires-Dist: vllm<=0.18.0,>=0.11.0; extra == "train"
+Requires-Dist: flashinfer-python==0.6.3; extra == "train"
+Requires-Dist: flashinfer-cubin==0.6.3; extra == "train"
+Requires-Dist: jupyter>=1.1.1; extra == "train"

openenv_pyre_env.egg-info/SOURCES.txt

@@ -1,8 +1,10 @@
 README.md
 __init__.py
 client.py
+evals.py
 models.py
 pyproject.toml
+train_grpo_openenv.py
 ./__init__.py
 ./client.py
 ./evals.py

openenv_pyre_env.egg-info/requires.txt

@@ -9,3 +9,16 @@ langchain-openai>=1.2.1
 [dev]
 pytest>=8.0.0
 pytest-cov>=4.0.0
+
+[train]
+datasets>=4.8.4
+peft>=0.15.2
+tensorboard>=2.20.0
+torch>=2.9.0
+transformers>=4.57.6
+trl>=1.2.0
+tornado>=6.5.5
+vllm<=0.18.0,>=0.11.0
+flashinfer-python==0.6.3
+flashinfer-cubin==0.6.3
+jupyter>=1.1.1

pyproject.toml

@@ -28,6 +28,19 @@ dev = [
     "pytest>=8.0.0",
     "pytest-cov>=4.0.0",
 ]
+train = [
+    "datasets>=4.8.4",
+    "peft>=0.15.2",
+    "tensorboard>=2.20.0",
+    "torch>=2.9.0",
+    "transformers>=4.57.6",
+    "trl>=1.2.0",
+    "tornado>=6.5.5",
+    "vllm>=0.11.0,<=0.18.0",
+    "flashinfer-python==0.6.3",
+    "flashinfer-cubin==0.6.3",
+    "jupyter>=1.1.1",
+]
 
 [project.scripts]
 # Server entry point - enables running via: uv run --project . server

server/static/assets/index-8TVqpTW-.css

@@ -0,0 +1 @@
+*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f5f2ed;--s1:#fff;--s2:#faf9f6;--s3:#f0ede8;--bd:#e4dfd7;--bd2:#cdc7be;--t1:#1c1712;--t2:#6b6460;--t3:#a8a29e;--fire:#c2410c;--fire2:#c2410c14;--blue:#1d4ed8;--blue2:#1d4ed814;--green:#166534;--green2:#16653414;--amber:#92400e;--amber2:#92400e14;--red:#b91c1c;--red2:#b91c1c14;--gold:#d97706;--gold2:#d977061f;--mono:"DM Mono", "JetBrains Mono", monospace;--sans:"DM Sans", "Inter", system-ui, sans-serif;--r:8px}body{background:var(--bg);color:var(--t1);font-family:var(--sans);font-size:13px;line-height:1.5;overflow:hidden}.shell{grid-template-rows:48px 1fr;height:100vh;display:grid;overflow:hidden}.topbar{background:var(--s1);border-bottom:1px solid var(--bd);z-index:20;align-items:center;gap:16px;padding:0 20px;display:flex;box-shadow:0 1px 3px #0000000a}.brand{align-items:center;gap:10px;display:flex}.brand-icon{background:linear-gradient(135deg,#c2410c,#f97316);border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;display:flex}.brand-name{font-family:var(--mono);color:var(--t1);letter-spacing:.06em;text-transform:uppercase;font-size:15px;font-weight:500}.brand-sep{color:var(--bd2);margin:0 2px}.brand-sub{color:var(--t3);letter-spacing:.08em;font-size:11px;font-family:var(--mono)}.topbar-right{align-items:center;gap:12px;margin-left:auto;display:flex}.live-chip{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--bd);color:var(--t3);background:var(--s2);border-radius:20px;align-items:center;gap:5px;padding:4px 10px;font-size:10px;font-weight:500;display:flex}.live-chip:before{content:"";background:var(--bd2);border-radius:50%;width:6px;height:6px}.live-chip.online{color:var(--green);background:var(--green2);border-color:#16653433}.live-chip.online:before{background:#22c55e;animation:1.2s infinite blink}.live-chip.offline{color:var(--t3);background:var(--s2)}.live-chip.error{color:var(--red);background:var(--red2);border-color:#b91c1c33}.live-chip.error:before{background:var(--red)}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.topbar-ep{font-family:var(--mono);color:var(--t3);align-items:center;gap:6px;font-size:10px;display:flex}.topbar-ep .ep-id{color:var(--blue);font-weight:500}.content{grid-template-columns:1fr 300px;height:100%;display:grid;overflow:hidden}.canvas-zone{background:var(--bg);flex-direction:column;justify-content:flex-start;align-items:center;gap:16px;padding:20px;display:flex;overflow-y:auto}.canvas-frame{box-shadow:0 0 0 1px var(--bd2), 0 4px 24px #0000001a, 0 1px 4px #0000000f;background:#d4c9a8;border-radius:10px;flex-shrink:0;line-height:0;position:relative;overflow:hidden}#map-canvas{max-width:100%;max-height:calc(100vh - 168px);image-rendering:pixelated;display:block}.hud-overlay{pointer-events:none;z-index:10;justify-content:space-between;gap:8px;padding:10px;display:flex;position:absolute;top:0;left:0;right:0}.hud-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#ede6dc;background:#0c0805d1;border:1px solid #ffffff1a;border-radius:6px;flex-direction:column;gap:3px;min-width:130px;padding:7px 10px;display:flex}.hud-card-center{border-color:#fbbf242e;min-width:160px}.hud-r{align-items:center;gap:6px;display:flex}.hlbl{font-family:var(--mono);color:#a8a29eb3;letter-spacing:.1em;text-transform:uppercase;flex-shrink:0;font-size:9px}.hval{font-family:var(--mono);color:#f0e8e0;text-align:right;min-width:26px;margin-left:auto;font-size:13px;font-weight:500}.hbar-bg{background:#ffffff1a;border-radius:3px;flex:1;height:5px;overflow:hidden}.hbar-fill{border-radius:3px;height:100%;transition:width .35s}.hbar-fill.g{background:linear-gradient(90deg,#22c55e,#4ade80)}.hbar-fill.m{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.hbar-fill.c{background:linear-gradient(90deg,#ef4444,#f87171)}.hstatus{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;border-radius:3px;padding:2px 6px;font-size:9px;font-weight:500}.hstatus.good{color:#4ade80;background:#4ade801f}.hstatus.moderate{color:#fbbf24;background:#fbbf241f}.hstatus.low{color:#fb923c;background:#fb923c1f}.hstatus.critical{color:#f87171;background:#f871711f;animation:1s infinite pulse-red}@keyframes pulse-red{0%,to{opacity:1}50%{opacity:.5}}.step-val{font-family:var(--mono);color:#f0e8e0;font-size:12px;font-weight:500}.sbar-bg{background:#ffffff1a;border-radius:2px;width:100%;height:3px;margin-top:1px;overflow:hidden}.sbar-fill{background:linear-gradient(90deg, var(--blue), #60a5fa);border-radius:2px;height:100%;transition:width .35s}.step-meta{font-family:var(--mono);color:#a8a29e8c;letter-spacing:.06em;text-transform:uppercase;margin-top:1px;font-size:8px}.legend{background:var(--s1);border:1px solid var(--bd);border-radius:6px;flex-wrap:wrap;align-items:center;gap:14px;width:100%;max-width:640px;padding:8px 12px;display:flex}.legend-item{font-family:var(--mono);color:var(--t2);letter-spacing:.05em;text-transform:uppercase;align-items:center;gap:5px;font-size:9px;display:flex}.leg-swatch{border-radius:2px;flex-shrink:0;width:12px;height:12px}.dialog{background:var(--s1);border:1px solid var(--bd);border-left:3px solid var(--fire);border-radius:var(--r);font-family:var(--mono);color:var(--t2);width:100%;max-width:640px;padding:10px 14px;font-size:12px;line-height:1.5}.dialog-who{color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px;font-size:9px;display:block}.side{background:var(--s1);border-left:1px solid var(--bd);flex-direction:column;display:flex;overflow:hidden auto}.side-sec{border-bottom:1px solid var(--bd);padding:14px 16px}.sec-hd{font-family:var(--mono);color:var(--t3);text-transform:uppercase;letter-spacing:.12em;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:9px;font-weight:600;display:flex}.sg{grid-template-columns:1fr 1fr;gap:6px;display:grid}.sc{background:var(--s2);border:1px solid var(--bd);border-radius:6px;padding:8px 10px}.sc-l{font-family:var(--mono);color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px;font-size:9px}.sc-v{font-family:var(--mono);color:var(--t1);font-size:14px;font-weight:500}.sc-v.fire{color:var(--fire)}.sc-v.blue{color:var(--blue)}.sc-v.green{color:var(--green)}.sc-v.amber{color:var(--amber)}.sc-v.gold{color:var(--gold)}.srow{border-bottom:1px solid #00000008;justify-content:space-between;align-items:center;padding:5px 0;font-size:12px;display:flex}.srow:last-child{border-bottom:none}.sv{font-family:var(--mono);font-weight:500}.sv.blue{color:var(--blue)}.sv.green{color:var(--green)}.sv.hot{color:var(--fire)}.sv.danger{color:var(--red)}.sv.warn{color:var(--amber)}.sv.gold{color:var(--gold)}.bar-w{margin-top:10px}.bar-lbl{font-family:var(--mono);color:var(--t3);text-transform:uppercase;letter-spacing:.06em;justify-content:space-between;margin-bottom:5px;font-size:9px;display:flex}.bar-bg{background:var(--s2);border:1px solid var(--bd);border-radius:4px;height:6px;overflow:hidden}.bar-fill{border-radius:4px;height:100%;transition:width .4s cubic-bezier(.4,0,.2,1)}.elog{flex-direction:column;gap:2px;max-height:160px;display:flex;overflow-y:auto}.erow{background:0 0;border-radius:4px;align-items:flex-start;gap:6px;padding:4px 6px;font-size:11px;display:flex}.erow.alarm{background:var(--red2);border-left:2px solid var(--red)}.erow.warn-row{background:var(--amber2);border-left:2px solid var(--amber)}.estep{font-family:var(--mono);color:var(--t3);flex-shrink:0;min-width:26px;padding-top:1px;font-size:9px}.etext{color:var(--t2);flex:1;font-size:11px;line-height:1.4}.erwd{font-family:var(--mono);flex-shrink:0;padding-top:1px;font-size:9px;font-weight:500}.erwd.p{color:var(--green)}.erwd.n{color:var(--red)}.dpad{grid-template-columns:repeat(3,1fr);gap:5px;max-width:140px;margin:0 auto;display:grid}.dpad-center{justify-content:center;align-items:center;display:flex}.ctrl-grid{grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.ctrl-row{gap:5px;margin-top:8px;display:flex}.ctrl-btn{background:var(--s2);color:var(--t2);border:1px solid var(--bd);font-family:var(--mono);letter-spacing:.04em;cursor:pointer;text-align:center;border-radius:5px;flex:1;padding:7px 6px;font-size:10px;font-weight:500;transition:all .1s}.ctrl-btn:hover:not(:disabled){background:var(--s3);color:var(--t1);border-color:var(--bd2)}.ctrl-btn:disabled{opacity:.4;cursor:not-allowed}.ctrl-btn.accent{background:var(--fire2);color:var(--fire);border-color:#c2410c40}.ctrl-btn.accent:hover{color:var(--fire);background:#c2410c26}.ctrl-btn.active{background:var(--blue2);color:var(--blue);border-color:#1d4ed840}.ctrl-btn.active:hover{background:#1d4ed826}.ctrl-btn.play{color:#fff;background:linear-gradient(135deg,#c2410c,#f97316);border:none;font-size:11px;box-shadow:0 2px 8px #c2410c4d}.ctrl-btn.play:hover{filter:brightness(1.05);box-shadow:0 3px 12px #c2410c73}.ctrl-status{font-family:var(--mono);color:var(--t3);background:var(--s2);border:1px solid var(--bd);border-left:3px solid var(--bd2);border-radius:5px;margin-top:10px;padding:7px 10px;font-size:10px}.ctrl-status.error{color:var(--red);background:var(--red2);border-left-color:var(--red)}.door-grid{grid-template-columns:1fr 1fr;gap:4px;display:grid}.door-btn{background:var(--s2);border:1px solid var(--bd);font-family:var(--mono);cursor:pointer;color:var(--t2);text-align:center;border-radius:5px;padding:5px 4px;font-size:9px;transition:all .1s}.door-btn:hover{background:var(--s3);color:var(--t1)}.door-btn.open{color:var(--green);background:var(--green2);border-color:#16653440}.door-btn.closed{color:var(--amber);background:var(--amber2);border-color:#92400e40}.door-btn.failed{color:var(--red);background:var(--red2);border-color:#b91c1c40}.report-box{background:var(--s2);border:1px solid var(--bd);max-height:160px;font-family:var(--mono);color:var(--t2);white-space:pre-wrap;border-radius:5px;padding:10px;font-size:9px;line-height:1.5;overflow-y:auto}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px}

server/static/index.html

@@ -1,14 +1,17 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
-    <script type="module" crossorigin src="/assets/index-DmWZ9HHA.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-S-HKcJzd.css">
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pyre — Crisis Navigation</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
+    <script type="module" crossorigin src="/assets/index-CWSK8ZuR.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-8TVqpTW-.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

train_grpo_openenv.py

@@ -1,13 +1,13 @@
 """
 train_grpo_openenv.py — GRPO + LoRA training for Pyre
-                        (PyreEnv WebSocket client, OpenEnv notebook-style pipeline)
+                        (PyreEnvironment in-process, OpenEnv notebook-style pipeline)
 
 Mirrors train_grpo_openenv.py from the reference as closely as possible.
 Differences vs. the reference are intentional and limited to:
 
-  1. Environment is the Pyre fire-evacuation server (WebSocket via PyreEnv.sync()).
-     The reference calls WorldState in-process; Pyre has no in-process equivalent,
-     so a running `uv run server` is required before launching training.
+  1. Environment is PyreEnvironment, called in-process (no server needed).
+     The reference calls WorldState in-process; Pyre uses the same approach —
+     PyreEnvironment is instantiated directly, so no `uv run server` is required.
 
   2. Pyre is a single-environment, difficulty-parametrised task.  For this initial
      training run we fix difficulty to "easy" only (1 fire source, slow spread,
@@ -31,10 +31,6 @@ Differences vs. the reference are intentional and limited to:
 
 Usage
 ─────
-  # 1. Start the Pyre server (from pyre_env/):
-  #      uv run server
-  #
-  # 2. Run training (from pyre_env/):
   python train_grpo_openenv.py
   python train_grpo_openenv.py --model-id Qwen/Qwen3-1.7B --dataset-size 1000
 
@@ -77,7 +73,8 @@ _PROJECT_ROOT = Path(__file__).resolve().parent
 if str(_PROJECT_ROOT) not in sys.path:
     sys.path.insert(0, str(_PROJECT_ROOT))
 
-from pyre_env import PyreEnv, PyreAction  # noqa: E402
+from pyre_env import PyreAction  # noqa: E402
+from pyre_env.server.pyre_env_environment import PyreEnvironment  # noqa: E402
 
 logging.basicConfig(
     level=logging.INFO,
@@ -86,9 +83,6 @@ logging.basicConfig(
 )
 log = logging.getLogger("grpo_openenv")
 
-# Server URL — set PYRE_SERVER_URL in pyre_env/.env to override
-ENV_URL = os.getenv("PYRE_SERVER_URL", "http://localhost:8000")
-
 
 # ─────────────────────────────────────────────────────────────────────────────
 # 1. Difficulty registry + stratified mix (notebook "cell-1" analogue)
@@ -322,81 +316,79 @@ def rollout_once(
     steps_taken:     int        = 0
     think_steps:     int        = 0
 
-    MAX_TOK_ACCUM = 4096
+    MAX_TOK_ACCUM = 8192
 
     try:
-        with PyreEnv(base_url=ENV_URL).sync() as env:
-            result = env.reset(difficulty=difficulty, seed=seed)
-            obs    = result.observation
-            done   = result.done
-
-            for _turn in range(max_turns):
-                if done or len(completion_ids) >= MAX_TOK_ACCUM:
-                    break
-
-                obs_dict = obs.model_dump()
-                user_prompt = make_user_prompt(obs_dict, history)
-                messages = [
-                    {"role": "system", "content": system_prompt},
-                    {"role": "user",   "content": user_prompt},
-                ]
-
-                try:
-                    prompt_text = tokenizer.apply_chat_template(
-                        messages,
-                        add_generation_prompt=True,
-                        tokenize=False,
-                        enable_thinking=True,
-                    )
-                except TypeError:
-                    prompt_text = tokenizer.apply_chat_template(
-                        messages,
-                        add_generation_prompt=True,
-                        tokenize=False,
-                    )
-
-                log.debug(
-                    "\n[difficulty=%s seed=%d step=%d] ── PROMPT ──────────────────────────\n%s\n────────────────────────────────────",
-                    difficulty, seed, _turn + 1, prompt_text,
+        env  = PyreEnvironment()
+        obs  = env.reset(difficulty=difficulty, seed=seed)
+        done = obs.done
+
+        for _turn in range(max_turns):
+            if done or len(completion_ids) >= MAX_TOK_ACCUM:
+                break
+
+            obs_dict = obs.model_dump()
+            user_prompt = make_user_prompt(obs_dict, history)
+            messages = [
+                {"role": "system", "content": system_prompt},
+                {"role": "user",   "content": user_prompt},
+            ]
+
+            try:
+                prompt_text = tokenizer.apply_chat_template(
+                    messages,
+                    add_generation_prompt=True,
+                    tokenize=False,
+                    enable_thinking=True,
                 )
-
-                rollout_outputs = generate_rollout_completions(trainer, [prompt_text])[0]
-                prompt_ids.extend(rollout_outputs["prompt_ids"])
-                completion_ids.extend(rollout_outputs["completion_ids"])
-                logprobs.extend(rollout_outputs.get("logprobs") or [])
-                completion_text = rollout_outputs.get("text") or tokenizer.decode(
-                    rollout_outputs["completion_ids"], skip_special_tokens=False
+            except TypeError:
+                prompt_text = tokenizer.apply_chat_template(
+                    messages,
+                    add_generation_prompt=True,
+                    tokenize=False,
                 )
 
-                log.debug(
-                    "\n[difficulty=%s seed=%d step=%d] ── COMPLETION ──────────────────────\n%s\n────────────────────────────────────",
-                    difficulty, seed, _turn + 1, completion_text,
-                )
+            log.debug(
+                "\n[difficulty=%s seed=%d step=%d] ── PROMPT ──────────────────────────\n%s\n────────────────────────────────────",
+                difficulty, seed, _turn + 1, prompt_text,
+            )
 
-                if "<think>" in completion_text and "</think>" in completion_text:
-                    think_steps += 1
-                steps_taken += 1
+            rollout_outputs = generate_rollout_completions(trainer, [prompt_text])[0]
+            prompt_ids.extend(rollout_outputs["prompt_ids"])
+            completion_ids.extend(rollout_outputs["completion_ids"])
+            logprobs.extend(rollout_outputs.get("logprobs") or [])
+            completion_text = rollout_outputs.get("text") or tokenizer.decode(
+                rollout_outputs["completion_ids"], skip_special_tokens=False
+            )
 
-                action_dict, fmt_score = parse_action(completion_text)
-                fmt_penalty = (1.0 - fmt_score) * -0.10
+            log.debug(
+                "\n[difficulty=%s seed=%d step=%d] ── COMPLETION ──────────────────────\n%s\n────────────────────────────────────",
+                difficulty, seed, _turn + 1, completion_text,
+            )
 
-                result  = env.step(PyreAction(**action_dict))
-                obs     = result.observation
-                step_reward = float(result.reward or 0.0)
-                done    = result.done
+            if "<think>" in completion_text and "</think>" in completion_text:
+                think_steps += 1
+            steps_taken += 1
 
-                step_rewards.append(step_reward + fmt_penalty)
+            action_dict, fmt_score = parse_action(completion_text)
+            fmt_penalty = (1.0 - fmt_score) * -0.10
 
-                feedback = obs.last_action_feedback or ""
-                # Reward is intentionally excluded from the history entry.
-                history.append(
-                    f"Step {_turn + 1}: {json.dumps(action_dict)}"
-                    + (f"\n  → {feedback}" if feedback else "")
-                    + f"\n  health: {obs.agent_health:.1f}"
-                )
+            obs         = env.step(PyreAction(**action_dict))
+            step_reward = float(obs.reward or 0.0)
+            done        = obs.done
 
-            agent_evacuated = obs.agent_evacuated
-            final_health    = float(obs.agent_health)
+            step_rewards.append(step_reward + fmt_penalty)
+
+            feedback = obs.last_action_feedback or ""
+            # Reward is intentionally excluded from the history entry.
+            history.append(
+                f"Step {_turn + 1}: {json.dumps(action_dict)}"
+                + (f"\n  → {feedback}" if feedback else "")
+                + f"\n  health: {obs.agent_health:.1f}"
+            )
+
+        agent_evacuated = obs.agent_evacuated
+        final_health    = float(obs.agent_health)
 
     except Exception as exc:
         log.error("Episode failed (difficulty=%s seed=%d): %s", difficulty, seed, exc)
@@ -568,17 +560,6 @@ if __name__ == "__main__":
         logging.getLogger().setLevel(logging.DEBUG)
         log.debug("Debug logging enabled — full prompt/completion will be printed each step.")
 
-    # ── Server health check ─────────────────────────────────────────────────
-    import requests as _requests
-    try:
-        _requests.get(f"{ENV_URL}/health", timeout=5).raise_for_status()
-        log.info("Pyre server: healthy ✓  (%s)", ENV_URL)
-    except Exception as exc:
-        raise SystemExit(
-            f"Pyre server not reachable at {ENV_URL}: {exc}\n"
-            "Start it with:  uv run server"
-        )
-
     # ── Init tokenizer ──────────────────────────────────────────────────────
     tokenizer = AutoTokenizer.from_pretrained(args.model_id, trust_remote_code=True)
     if tokenizer.pad_token is None:
@@ -595,22 +576,26 @@ if __name__ == "__main__":
     #
     # Matching the reference notebook, with one Pyre-specific override:
     #
-    #   max_completion_length  1024 → 512   (<think> + small JSON action)
+    #   max_completion_length  512 → 1024   (safe margin for Qwen3 think + JSON action)
     #
     # Everything else — lr, grad_accum, num_generations, vLLM colocate,
     # gradient checkpointing, push_to_hub — is identical to the reference.
     grpo_config = GRPOConfig(
+        model_init_kwargs={
+            "torch_dtype": "bfloat16",
+            "attn_implementation": "eager",
+        },
         num_train_epochs=1,
         learning_rate=5e-6,
         gradient_accumulation_steps=64,
         per_device_train_batch_size=1,
         warmup_steps=20,
         num_generations=2,
-        max_completion_length=512,
+        max_completion_length=1024,
         use_vllm=True,
         vllm_mode="colocate",
         vllm_gpu_memory_utilization=0.3,
-        vllm_max_model_len=8192,
+        vllm_max_model_length=8192,
         output_dir=args.output_dir,
         report_to=args.report_to,
         trackio_space_id=args.output_dir if args.report_to == "trackio" else None,
@@ -625,10 +610,6 @@ if __name__ == "__main__":
     # ── Create trainer ──────────────────────────────────────────────────────
     trainer = GRPOTrainer(
         model=args.model_id,
-        model_init_kwargs={
-            "torch_dtype": torch.bfloat16,
-            "attn_implementation": "eager",
-        },
         processing_class=tokenizer,
         reward_funcs=[
             reward_evacuated,