docs: add reward structure and deployment guide, update baseline scores, and implement dashboard UI

README.md

@@ -113,6 +113,24 @@ Episode **grade** is returned by `GET /grade` after the episode completes (or af
 
 ---
 
+## Reward Structure
+
+The environment uses a **dense, multi-component reward** signal. Each step returns a scalar `reward` (the sum) and a detailed `reward_components` breakdown in `info`:
+
+| Component | Key | Active | Description |
+|-----------|-----|--------|-------------|
+| **Cost Savings** | `cost_savings` | All tasks | Positive baseline (1.5) minus relative step cost. Smart agents that reduce energy use earn higher rewards. |
+| **Temperature Constraint** | `temp_constraint` | Task 2, 3 | Gaussian bonus for staying near setpoint (21°C). Max +1.5 at setpoint, degrades toward bounds, penalty outside [19°C, 23°C]. |
+| **Grid Demand Response** | `grid_response` | Task 3 | Bonus for shedding load during high grid stress (>0.7), readiness bonus during moderate stress, penalty for unnecessary shedding. |
+| **Efficiency Bonus** | `efficiency_bonus` | All tasks | Rewards thermal storage arbitrage (charge during cheap prices, discharge during expensive) and maintaining useful storage levels. |
+| **Stability Reward** | `stability_penalty` | All tasks | Positive reward for smooth, stable control; penalty for rapid HVAC/storage oscillation. |
+| **Deadline Penalty** | `deadline_penalty` | Task 2, 3 | Penalty per missed batch job deadline (-1.5 each). Positive bonus for keeping jobs on track. |
+| **Carbon Reward** | `carbon_reward` | Task 3 | Baseline bonus for low-carbon operation, reduced by carbon-heavy consumption. Extra bonus during clean grid periods. |
+
+**Grading weights (Task 3):** cost 28%, temperature 20%, grid_response 20%, batch_deadline 12%, carbon 20%.
+
+---
+
 ## HTTP API
 
 Base URL: `http://<host>:7860` (default in container: port **7860**).
@@ -231,6 +249,75 @@ The image runs **supervisord** as a non-root user with two programs: Go server (
 
 ---
 
+## Example API Calls
+
+With the container running (`docker run -p 7860:7860 gridmind-rl`):
+
+```bash
+# Health check
+curl http://localhost:7860/health
+# → {"status":"ok","version":"1.0.0"}
+
+# Reset to Task 3 (hard) with seed 42
+curl -X POST http://localhost:7860/reset \
+  -H "Content-Type: application/json" \
+  -d '{"task_id": 3, "seed": 42, "num_buildings": 1}'
+# → {"observations":[{"indoor_temperature":21.3,...}],"episode":1,"task_id":3,"seed":42}
+
+# Take one step
+curl -X POST http://localhost:7860/step \
+  -H "Content-Type: application/json" \
+  -d '{"hvac_power_level": 0.6, "thermal_charge_rate": 0.3, "batch_job_slot": 1, "load_shed_fraction": 0.1}'
+# → {"observation":{...},"reward":2.15,"done":false,"info":{"reward_components":{...},...}}
+
+# Get current state
+curl http://localhost:7860/state
+# → {"buildings":[...],"price_curve_episode":[...],"step":1,"task_id":3,...}
+
+# Grade after episode ends (run 96 steps first)
+curl http://localhost:7860/grade
+# → {"task_id":3,"score":0.3115,"sub_scores":{"cost":0.25,"temperature":0.14,...},...}
+
+# List all tasks
+curl http://localhost:7860/tasks
+# → [{"id":1,"name":"Cost Minimization","difficulty":"easy",...},...]
+```
+
+---
+
+## Hugging Face Space Deployment
+
+### 1. Create a new HF Space
+
+Go to [huggingface.co/new-space](https://huggingface.co/new-space) and create a **Docker** space. Select:
+- **SDK:** Docker
+- **Hardware:** CPU Basic (2 vCPU, 16GB)
+
+### 2. Push code to HF
+
+```bash
+# Clone and push
+git remote add hf https://huggingface.co/spaces/YOUR_USERNAME/gridmind-rl
+git push hf main
+```
+
+### 3. Verify deployment
+
+Once the Space builds, verify at your Space URL:
+
+```bash
+curl https://YOUR_USERNAME-gridmind-rl.hf.space/health
+# → {"status":"ok","version":"1.0.0"}
+
+curl -X POST https://YOUR_USERNAME-gridmind-rl.hf.space/reset \
+  -H "Content-Type: application/json" \
+  -d '{"task_id":1,"seed":42}'
+```
+
+> **Note:** HF Spaces only exposes **one port** publicly. Port **7860** (the OpenEnv API) is the primary port and will be the public endpoint. The dashboard on port 7861 is for local development only.
+
+---
+
 ## License
 
 See `LICENSE` in the repository.

baseline_scores.json

@@ -16,9 +16,9 @@
     {
       "task_id": 1,
       "seed": 1100,
-      "total_reward": -54.91106240679752,
+      "total_reward": 114.28893759320243,
       "total_steps": 96,
-      "elapsed_sec": 0.8684265613555908,
+      "elapsed_sec": 1.3370721340179443,
       "score": 0.2776,
       "sub_scores": {
         "cost": 0.277555958007489
@@ -28,9 +28,9 @@
     {
       "task_id": 2,
       "seed": 1200,
-      "total_reward": -573.2793620498348,
+      "total_reward": -625.6665397814021,
       "total_steps": 96,
-      "elapsed_sec": 0.9907081127166748,
+      "elapsed_sec": 1.229602336883545,
       "score": 0.2182,
       "sub_scores": {
         "cost": 0.2595566056450961,
@@ -41,9 +41,9 @@
     {
       "task_id": 3,
       "seed": 1300,
-      "total_reward": -670.8653705366278,
+      "total_reward": -639.8462871515986,
       "total_steps": 96,
-      "elapsed_sec": 0.8988945484161377,
+      "elapsed_sec": 1.1910581588745117,
       "score": 0.3115,
       "sub_scores": {
         "batch_deadline": 1,

dashboard/static/dashboard.js

@@ -1,6 +1,6 @@
 /**
- * GridMind-RL Dashboard — Chart.js real-time visualization
- * Polls /api/state every 500ms and updates all charts.
+ * GridMind-RL Dashboard — Premium Chart.js real-time visualization
+ * Polls /api/state every 500ms and updates all charts + KPIs.
  */
 
 'use strict';
@@ -21,23 +21,30 @@ let currentBuilding = 0;
 let pollTimer = null;
 let connected = false;
 
-// ── Chart.js global defaults ─────────────────────────────────────────────────
-Chart.defaults.color = '#8899b4';
-Chart.defaults.borderColor = 'rgba(56,139,253,0.1)';
-Chart.defaults.font.family = "'Inter', sans-serif";
+// ── Chart.js Premium Theme ──────────────────────────────────────────────────
+Chart.defaults.color = '#5a6478';
+Chart.defaults.borderColor = 'rgba(255,255,255,0.03)';
+Chart.defaults.font.family = "'Inter', -apple-system, system-ui, sans-serif";
 Chart.defaults.font.size = 11;
+Chart.defaults.font.weight = 400;
 Chart.defaults.plugins.legend.display = false;
-Chart.defaults.animation.duration = 300;
-
-const COLORS = {
-  blue:   '#388bfd',
-  green:  '#3fb950',
-  amber:  '#d29922',
-  red:    '#f85149',
-  purple: '#bc8cff',
-  cyan:   '#39d0d8',
-  orange: '#ff7c39',
-  dimBlue: 'rgba(56,139,253,0.15)',
+Chart.defaults.animation.duration = 350;
+Chart.defaults.animation.easing = 'easeOutQuart';
+Chart.defaults.elements.line.borderCapStyle = 'round';
+Chart.defaults.elements.line.borderJoinStyle = 'round';
+
+const C = {
+  blue:    '#5b9cf6',
+  green:   '#4ade80',
+  amber:   '#f5a623',
+  red:     '#f06e6e',
+  purple:  '#a78bfa',
+  cyan:    '#34d4e4',
+  orange:  '#fb923c',
+  teal:    '#2dd4bf',
+  rose:    '#fb7185',
+  grid:    'rgba(255,255,255,0.025)',
+  surface: '#1a1f2e',
 };
 
 function rgba(hex, alpha) {
@@ -47,55 +54,129 @@ function rgba(hex, alpha) {
   return `rgba(${r},${g},${b},${alpha})`;
 }
 
-// ── Chart factory helpers ────────────────────────────────────────────────────
+// ── Chart factory — refined styling ──────────────────────────────────────────
 function makeLineChart(id, labels, datasets, opts = {}) {
-  const ctx = document.getElementById(id).getContext('2d');
-  return new Chart(ctx, {
+  const ctx = document.getElementById(id);
+  if (!ctx) return null;
+  return new Chart(ctx.getContext('2d'), {
     type: 'line',
     data: { labels, datasets },
     options: {
       responsive: true,
       maintainAspectRatio: false,
       interaction: { mode: 'index', intersect: false },
+      layout: { padding: { top: 4, right: 4, bottom: 0, left: 4 } },
       scales: {
-        x: { grid: { color: 'rgba(56,139,253,0.06)' }, ticks: { maxTicksLimit: 8 } },
-        y: { grid: { color: 'rgba(56,139,253,0.06)' }, ...opts.yAxis },
+        x: {
+          grid: { color: C.grid, drawBorder: false },
+          ticks: {
+            maxTicksLimit: 8,
+            font: { size: 10, family: "'JetBrains Mono', monospace" },
+            color: '#3d4558',
+            padding: 4,
+          },
+          border: { display: false },
+        },
+        y: {
+          grid: { color: C.grid, drawBorder: false },
+          ticks: {
+            font: { size: 10, family: "'JetBrains Mono', monospace" },
+            color: '#3d4558',
+            padding: 8,
+          },
+          border: { display: false },
+          ...opts.yAxis,
+        },
       },
       plugins: {
-        legend: { display: opts.legend || false },
-        tooltip: { backgroundColor: '#0f1829', borderColor: 'rgba(56,139,253,0.3)', borderWidth: 1 },
+        legend: {
+          display: opts.legend || false,
+          position: 'bottom',
+          labels: {
+            usePointStyle: true,
+            pointStyle: 'circle',
+            padding: 16,
+            font: { size: 10, weight: 500 },
+            color: '#8a94a8',
+          },
+        },
+        tooltip: {
+          backgroundColor: '#12151e',
+          titleColor: '#e8ecf4',
+          bodyColor: '#8a94a8',
+          borderColor: 'rgba(255,255,255,0.08)',
+          borderWidth: 1,
+          cornerRadius: 8,
+          padding: 10,
+          displayColors: true,
+          boxPadding: 4,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 11 },
+        },
       },
       ...opts.extra,
     },
   });
 }
 
-function makeAreaChart(id, labels, datasets) {
-  return makeLineChart(id, labels, datasets, {
-    extra: { fill: true },
-  });
-}
-
 function makeBarChart(id, labels, datasets) {
-  const ctx = document.getElementById(id).getContext('2d');
-  return new Chart(ctx, {
+  const ctx = document.getElementById(id);
+  if (!ctx) return null;
+  return new Chart(ctx.getContext('2d'), {
     type: 'bar',
     data: { labels, datasets },
     options: {
       responsive: true,
       maintainAspectRatio: false,
+      layout: { padding: { top: 4, right: 4, bottom: 0, left: 4 } },
       scales: {
-        x: { stacked: true, grid: { color: 'rgba(56,139,253,0.06)' }, ticks: { maxTicksLimit: 8 } },
-        y: { stacked: true, grid: { color: 'rgba(56,139,253,0.06)' } },
+        x: {
+          stacked: true,
+          grid: { color: C.grid, drawBorder: false },
+          ticks: { maxTicksLimit: 8, font: { size: 10, family: "'JetBrains Mono', monospace" }, color: '#3d4558' },
+          border: { display: false },
+        },
+        y: {
+          stacked: true,
+          grid: { color: C.grid, drawBorder: false },
+          ticks: { font: { size: 10, family: "'JetBrains Mono', monospace" }, color: '#3d4558' },
+          border: { display: false },
+        },
       },
       plugins: {
-        legend: { display: true, position: 'bottom', labels: { usePointStyle: true, padding: 10 } },
-        tooltip: { backgroundColor: '#0f1829', borderColor: 'rgba(56,139,253,0.3)', borderWidth: 1 },
+        legend: {
+          display: true,
+          position: 'bottom',
+          labels: {
+            usePointStyle: true,
+            pointStyle: 'circle',
+            padding: 16,
+            font: { size: 10, weight: 500 },
+            color: '#8a94a8',
+          },
+        },
+        tooltip: {
+          backgroundColor: '#12151e',
+          titleColor: '#e8ecf4',
+          bodyColor: '#8a94a8',
+          borderColor: 'rgba(255,255,255,0.08)',
+          borderWidth: 1,
+          cornerRadius: 8,
+          padding: 10,
+        },
       },
     },
   });
 }
 
+// ── Gradient helper ──────────────────────────────────────────────────────────
+function createGradient(ctx, hex, startAlpha, endAlpha) {
+  const gradient = ctx.createLinearGradient(0, 0, 0, ctx.canvas.clientHeight);
+  gradient.addColorStop(0, rgba(hex, startAlpha));
+  gradient.addColorStop(1, rgba(hex, endAlpha));
+  return gradient;
+}
+
 // ── Initialise all charts ─────────────────────────────────────────────────────
 const emptyLabels = Array.from({ length: CURVE_POINTS }, (_, i) => `${i}h`);
 const emptyData   = Array(CURVE_POINTS).fill(null);
@@ -107,8 +188,8 @@ const priceChart = makeLineChart('chart-price',
     {
       label: 'Price ($/kWh)',
       data: [...emptyData],
-      borderColor: COLORS.amber,
-      backgroundColor: rgba(COLORS.amber, 0.15),
+      borderColor: C.amber,
+      backgroundColor: rgba(C.amber, 0.08),
       borderWidth: 2,
       fill: true,
       tension: 0.4,
@@ -117,14 +198,16 @@ const priceChart = makeLineChart('chart-price',
     {
       label: 'Current',
       data: [...emptyData],
-      borderColor: COLORS.red,
+      borderColor: C.red,
       backgroundColor: 'transparent',
       borderWidth: 0,
-      pointRadius: 6,
-      pointBackgroundColor: COLORS.red,
+      pointRadius: 5,
+      pointBackgroundColor: C.red,
+      pointBorderColor: rgba(C.red, 0.3),
+      pointBorderWidth: 6,
     },
   ],
-  { legend: true, yAxis: { title: { display: true, text: '$/kWh' } } }
+  { legend: true, yAxis: { title: { display: true, text: '$/kWh', color: '#3d4558', font: { size: 10 } } } }
 );
 
 // 2. Temperature
@@ -134,8 +217,8 @@ const tempChart = makeLineChart('chart-temp',
     {
       label: 'Indoor Temp (°C)',
       data: [],
-      borderColor: COLORS.cyan,
-      backgroundColor: rgba(COLORS.cyan, 0.1),
+      borderColor: C.cyan,
+      backgroundColor: rgba(C.cyan, 0.06),
       borderWidth: 2,
       fill: true,
       tension: 0.4,
@@ -144,33 +227,33 @@ const tempChart = makeLineChart('chart-temp',
     {
       label: 'T_max (23°C)',
       data: [],
-      borderColor: rgba(COLORS.red, 0.5),
+      borderColor: rgba(C.red, 0.35),
       borderWidth: 1,
-      borderDash: [5, 5],
+      borderDash: [4, 4],
       pointRadius: 0,
       fill: false,
     },
     {
       label: 'T_min (19°C)',
       data: [],
-      borderColor: rgba(COLORS.blue, 0.5),
+      borderColor: rgba(C.blue, 0.35),
       borderWidth: 1,
-      borderDash: [5, 5],
+      borderDash: [4, 4],
       pointRadius: 0,
       fill: false,
     },
   ],
-  { legend: true, yAxis: { suggestedMin: 15, suggestedMax: 30, title: { display: true, text: '°C' } } }
+  { legend: true, yAxis: { suggestedMin: 15, suggestedMax: 30, title: { display: true, text: '°C', color: '#3d4558', font: { size: 10 } } } }
 );
 
-// 3. Storage history (mini)
+// 3. Storage history
 const storageChart = makeLineChart('chart-storage',
   [],
   [{
     label: 'Storage Level',
     data: [],
-    borderColor: COLORS.cyan,
-    backgroundColor: rgba(COLORS.cyan, 0.2),
+    borderColor: C.teal,
+    backgroundColor: rgba(C.teal, 0.1),
     borderWidth: 2,
     fill: true,
     tension: 0.4,
@@ -179,23 +262,25 @@ const storageChart = makeLineChart('chart-storage',
   { yAxis: { min: 0, max: 1 } }
 );
 
-// 4. HVAC + Load Shed stacked area
+// 4. HVAC + Load Shed
 const hvacChart = makeBarChart('chart-hvac',
   [],
   [
     {
       label: 'HVAC Power',
       data: [],
-      backgroundColor: rgba(COLORS.blue, 0.7),
-      borderColor: COLORS.blue,
+      backgroundColor: rgba(C.blue, 0.6),
+      borderColor: C.blue,
       borderWidth: 1,
+      borderRadius: 3,
     },
     {
       label: 'Load Shed',
       data: [],
-      backgroundColor: rgba(COLORS.red, 0.7),
-      borderColor: COLORS.red,
+      backgroundColor: rgba(C.red, 0.6),
+      borderColor: C.red,
       borderWidth: 1,
+      borderRadius: 3,
     },
   ]
 );
@@ -207,8 +292,8 @@ const costChart = makeLineChart('chart-cost',
     {
       label: 'Agent Cost ($)',
       data: [],
-      borderColor: COLORS.green,
-      backgroundColor: rgba(COLORS.green, 0.1),
+      borderColor: C.green,
+      backgroundColor: rgba(C.green, 0.06),
       borderWidth: 2,
       fill: true,
       tension: 0.4,
@@ -217,25 +302,25 @@ const costChart = makeLineChart('chart-cost',
     {
       label: 'Baseline ($)',
       data: [],
-      borderColor: rgba(COLORS.amber, 0.7),
-      borderDash: [6, 3],
+      borderColor: rgba(C.amber, 0.6),
+      borderDash: [5, 3],
       borderWidth: 2,
       fill: false,
       tension: 0.4,
       pointRadius: 0,
     },
   ],
-  { legend: true, yAxis: { title: { display: true, text: '$' } } }
+  { legend: true, yAxis: { title: { display: true, text: '$', color: '#3d4558', font: { size: 10 } } } }
 );
 
-// 6. Grid stress history (mini)
+// 6. Grid stress history
 const stressChart = makeLineChart('chart-stress',
   [],
   [{
     label: 'Grid Stress',
     data: [],
-    borderColor: COLORS.red,
-    backgroundColor: rgba(COLORS.red, 0.2),
+    borderColor: C.red,
+    backgroundColor: rgba(C.red, 0.1),
     borderWidth: 2,
     fill: true,
     tension: 0.4,
@@ -250,28 +335,36 @@ const carbonChart = makeLineChart('chart-carbon',
   [{
     label: 'Carbon Intensity (gCO₂/kWh)',
     data: [...emptyData],
-    borderColor: COLORS.orange,
-    backgroundColor: rgba(COLORS.orange, 0.15),
+    borderColor: C.orange,
+    backgroundColor: rgba(C.orange, 0.08),
     borderWidth: 2,
     fill: true,
     tension: 0.4,
     pointRadius: 0,
   }],
-  { yAxis: { title: { display: true, text: 'gCO₂/kWh' } } }
+  { yAxis: { title: { display: true, text: 'gCO₂/kWh', color: '#3d4558', font: { size: 10 } } } }
 );
 
-// 8. Reward timeline curve
+// 8. Reward timeline
 const rewardChart = makeLineChart('chart-reward',
   [],
-  [
-    { label: 'Step Reward',   data: [], borderColor: COLORS.green, backgroundColor: rgba(COLORS.green, 0.1), borderWidth: 2, fill: true, tension: 0.4, pointRadius: 0 },
-  ],
-  { yAxis: { title: { display: true, text: 'Reward' } } }
+  [{
+    label: 'Step Reward',
+    data: [],
+    borderColor: C.green,
+    backgroundColor: rgba(C.green, 0.06),
+    borderWidth: 2,
+    fill: true,
+    tension: 0.4,
+    pointRadius: 0,
+  }],
+  { yAxis: { title: { display: true, text: 'Reward', color: '#3d4558', font: { size: 10 } } } }
 );
 
 // ── Stress meter bars ────────────────────────────────────────────────────────
 function buildStressMeter() {
   const el = document.getElementById('stress-meter');
+  if (!el) return;
   el.innerHTML = '';
   for (let i = 0; i < 20; i++) {
     const bar = document.createElement('div');
@@ -291,12 +384,12 @@ function updateStressMeter(stress) {
     const pct = (i / bars) * 100;
     bar.style.height = `${20 + pct * 0.8}%`;
     if (i < active) {
-      const color = stress > 0.7 ? COLORS.red : stress > 0.4 ? COLORS.amber : COLORS.green;
+      const color = stress > 0.7 ? C.red : stress > 0.4 ? C.amber : C.green;
       bar.style.background = color;
-      bar.style.opacity = '1';
+      bar.style.boxShadow = `0 0 6px ${rgba(color === C.red ? C.red : color === C.amber ? C.amber : C.green, 0.3)}`;
     } else {
-      bar.style.background = 'rgba(255,255,255,0.05)';
-      bar.style.opacity = '1';
+      bar.style.background = 'rgba(255,255,255,0.03)';
+      bar.style.boxShadow = 'none';
     }
   }
 }
@@ -304,8 +397,9 @@ function updateStressMeter(stress) {
 // ── Batch Gantt renderer ─────────────────────────────────────────────────────
 function renderGantt(jobs, currentStep) {
   const wrap = document.getElementById('gantt-wrap');
+  if (!wrap) return;
   if (!jobs || jobs.length === 0) {
-    wrap.innerHTML = '<div style="color:var(--text-dim);font-size:0.8rem">No batch jobs in this episode.</div>';
+    wrap.innerHTML = '<div class="gantt-empty">No batch jobs in this episode</div>';
     return;
   }
   const totalSlots = EPISODE_STEPS;
@@ -344,7 +438,7 @@ function renderGantt(jobs, currentStep) {
     // Current step marker
     const curPct = (currentStep / totalSlots) * 100;
     const curMarker = document.createElement('div');
-    curMarker.style.cssText = `position:absolute;top:0;bottom:0;width:1px;background:rgba(56,139,253,0.6);left:${curPct}%`;
+    curMarker.style.cssText = `position:absolute;top:2px;bottom:2px;width:2px;background:rgba(91,156,246,0.5);left:${curPct}%;border-radius:1px;box-shadow:0 0 4px rgba(91,156,246,0.3)`;
     track.appendChild(curMarker);
 
     row.appendChild(track);
@@ -367,27 +461,28 @@ function renderGantt(jobs, currentStep) {
 function renderRewardRows(rc) {
   if (!rc) return;
   const container = document.getElementById('reward-rows');
+  if (!container) return;
   const components = [
-    { key: 'cost_savings',      label: 'Cost Savings',  color: COLORS.green,  sign: 1 },
-    { key: 'temp_constraint',   label: 'Temp Constr.',  color: COLORS.cyan,   sign: 1 },
-    { key: 'grid_response',     label: 'Grid DR',       color: COLORS.blue,   sign: 1 },
-    { key: 'efficiency_bonus',  label: 'Efficiency',    color: COLORS.purple, sign: 1 },
-    { key: 'stability_penalty', label: 'Stability',     color: COLORS.amber,  sign: -1 },
-    { key: 'deadline_penalty',  label: 'Deadlines',     color: COLORS.red,    sign: -1 },
-    { key: 'carbon_reward',     label: 'Carbon',        color: COLORS.orange, sign: 1 },
+    { key: 'cost_savings',      label: 'Cost Savings',  color: C.green },
+    { key: 'temp_constraint',   label: 'Temp Constr.',  color: C.cyan },
+    { key: 'grid_response',     label: 'Grid DR',       color: C.blue },
+    { key: 'efficiency_bonus',  label: 'Efficiency',    color: C.purple },
+    { key: 'stability_penalty', label: 'Stability',     color: C.amber },
+    { key: 'deadline_penalty',  label: 'Deadlines',     color: C.red },
+    { key: 'carbon_reward',     label: 'Carbon',        color: C.orange },
   ];
   container.innerHTML = '';
   components.forEach(c => {
     const val = rc[c.key] || 0;
     const absVal = Math.abs(val);
-    const pct = Math.min(100, absVal * 30); // scale 0–~3 reward to 0–100%
+    const pct = Math.min(100, absVal * 30);
     container.innerHTML += `
       <div class="reward-row">
         <div class="reward-label">${c.label}</div>
-        <div class="reward-bar-wrap">
-          <div class="reward-bar" style="width:${pct}%;background:${c.color};opacity:0.8"></div>
+        <div class="reward-bar-track">
+          <div class="reward-bar" style="width:${pct}%;background:${c.color};opacity:0.7"></div>
         </div>
-        <div class="reward-val" style="color:${val >= 0 ? COLORS.green : COLORS.red}">${val.toFixed(3)}</div>
+        <div class="reward-val" style="color:${val >= 0 ? C.green : C.red}">${val.toFixed(3)}</div>
       </div>`;
   });
 }
@@ -410,12 +505,12 @@ async function fetchAndUpdate() {
     connected = true;
     document.getElementById('conn-banner').classList.remove('show');
     document.getElementById('status-dot').style.background = 'var(--accent-green)';
+    document.getElementById('status-label').textContent = 'Live';
 
     const b = state.buildings && state.buildings[currentBuilding];
     if (!b) return;
 
     const step = state.step;
-    const hourOfDay = b.hour_of_day || 0;
 
     // ── Header ──
     document.getElementById('ep-step').textContent = `ep:${state.episode} step:${step}/${EPISODE_STEPS - 1}`;
@@ -464,8 +559,12 @@ async function fetchAndUpdate() {
     }
 
     // ── Grid stress ──
-    document.getElementById('stress-big').textContent = b.grid_stress_signal.toFixed(3);
+    const stressBig = document.getElementById('stress-big');
+    stressBig.textContent = b.grid_stress_signal.toFixed(3);
+    stressBig.className = 'stress-value ' + 
+      (b.grid_stress_signal > 0.7 ? 'high' : b.grid_stress_signal > 0.4 ? 'mid' : 'low');
     updateStressMeter(b.grid_stress_signal);
+    
     const cardStress = document.getElementById('card-stress');
     if (b.grid_stress_signal > 0.7) {
       cardStress.classList.add('alert-active');
@@ -478,7 +577,7 @@ async function fetchAndUpdate() {
     document.getElementById('storage-pct').textContent = storagePct;
     document.getElementById('storage-fill').style.width = `${storagePct}%`;
 
-    // ── History-based charts (only update when step changes) ──
+    // ── History-based charts (only when step changes) ──
     if (step !== lastStep) {
       lastStep = step;
       const stepLabels = Array.from({ length: b.temp_history.length }, (_, i) => i);
@@ -495,8 +594,8 @@ async function fetchAndUpdate() {
       // Storage history
       if (b.hvac_history && b.hvac_history.length > 0) {
         storageChart.data.labels = stepLabels;
-        storageChart.data.datasets[0].data = Array.from({ length: b.hvac_history.length }, (_, i) =>
-          b.thermal_storage_level // simplify: use current level as placeholder
+        storageChart.data.datasets[0].data = Array.from({ length: b.hvac_history.length }, () =>
+          b.thermal_storage_level
         );
         storageChart.update('none');
       }
@@ -515,25 +614,22 @@ async function fetchAndUpdate() {
         const n = b.cost_history.length;
         costChart.data.labels = Array.from({ length: n }, (_, i) => i);
         costChart.data.datasets[0].data = b.cost_history;
-        // Generate approximate baseline curve (linear ramp to b.baseline_cost)
         const baselineStep = b.baseline_cost / Math.max(step, 1);
         costChart.data.datasets[1].data = b.cost_history.map((_, i) => baselineStep * (i + 1));
         costChart.update('none');
       }
 
-      // Grid stress history
+      // Grid stress + reward history
       if (b.reward_history && b.reward_history.length > 0) {
         const n = b.reward_history.length;
         stressChart.data.labels = Array.from({ length: n }, (_, i) => i);
         stressChart.data.datasets[0].data = b.reward_history.map(r => Math.max(0, r.grid_response || 0));
         stressChart.update('none');
 
-        // Total reward timeline chart (full episode)
         rewardChart.data.labels = Array.from({ length: n }, (_, i) => i);
         rewardChart.data.datasets[0].data = b.reward_history.map(r => r.total || 0);
         rewardChart.update('none');
 
-        // Reward rows (last step)
         renderRewardRows(b.reward_history[b.reward_history.length - 1]);
       }
 
@@ -545,7 +641,7 @@ async function fetchAndUpdate() {
     connected = false;
     document.getElementById('conn-banner').classList.add('show');
     document.getElementById('status-dot').style.background = 'var(--accent-red)';
-    // console.error('Poll error:', err);
+    document.getElementById('status-label').textContent = 'Offline';
   }
 }
 
@@ -554,8 +650,9 @@ async function fetchAndUpdate() {
 async function doReset() {
   const taskId = parseInt(document.getElementById('task-select').value, 10);
   const btn = document.getElementById('btn-reset');
-  btn.textContent = 'Resetting...';
+  btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="spin"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg> Resetting...';
   btn.disabled = true;
+  btn.style.opacity = '0.6';
   lastStep = -1;
   try {
     await fetch(`${API_BASE}/reset`, {
@@ -566,48 +663,125 @@ async function doReset() {
   } catch (e) {
     console.error(e);
   }
-  btn.textContent = '↺ New Episode';
+  btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg> New Episode';
   btn.disabled = false;
+  btn.style.opacity = '1';
   document.getElementById('grade-result').textContent = '';
+  document.getElementById('grade-result').classList.remove('show');
 }
 
 let liveSimTimer = null;
 let isLiveSimulating = false;
+let lastLiveState = null;
+
+// ── Smart Heuristic Agent ───────────────────────────────────────────────────
+// Mirrors the Python _heuristic_action() from inference.py.
+// Reads the latest fetched state and generates intelligent actions that
+// exercise ALL reward components: cost, temperature, grid DR, efficiency,
+// stability, deadlines, and carbon.
+function heuristicAction(b) {
+  if (!b) {
+    return { hvac_power_level: 0.5, thermal_charge_rate: 0.0, batch_job_slot: 0, load_shed_fraction: 0.0, building_id: currentBuilding };
+  }
+
+  const price   = b.current_price   || 0.10;
+  const stress  = b.grid_stress_signal || 0.0;
+  const temp    = b.indoor_temperature || 21.0;
+  const storage = b.thermal_storage_level || 0.5;
+  const queue   = b.batch_queue || [];
+  const carbon  = b.carbon_intensity || 300;
+  const step    = b.step || 0;
+
+  // ── HVAC: price-aware + temperature-reactive ──
+  let hvac = 0.5;
+  if (price < 0.07)       hvac = 0.7;   // cheap → run more
+  else if (price > 0.15)  hvac = 0.3;   // expensive → reduce
+  else                    hvac = 0.5;
+
+  // Temperature override: keep within 19–23°C
+  if (temp > 23.0)      hvac = Math.max(hvac, 0.8);
+  else if (temp > 22.0) hvac = Math.max(hvac, 0.6);
+  else if (temp < 19.0) hvac = Math.min(hvac, 0.2);
+  else if (temp < 20.0) hvac = Math.min(hvac, 0.35);
+
+  // ── Thermal storage: arbitrage ──
+  let charge = 0.0;
+  if (price < 0.07 && storage < 0.8) {
+    charge = 0.6;          // charge during cheap periods
+  } else if (price > 0.15 && storage > 0.3) {
+    charge = -0.5;         // discharge during expensive periods
+  } else if (price < 0.10 && storage < 0.5) {
+    charge = 0.3;          // moderate charge at mid-low prices
+  } else if (price > 0.12 && storage > 0.6) {
+    charge = -0.3;         // moderate discharge at mid-high prices
+  }
+
+  // Carbon-aware: prefer charging when carbon is low
+  if (carbon < 250 && storage < 0.7) {
+    charge = Math.max(charge, 0.4);
+  }
+
+  // ── Load shedding: grid stress response ──
+  let shed = 0.0;
+  if (stress > 0.8)       shed = 0.45;
+  else if (stress > 0.7)  shed = 0.35;
+  else if (stress > 0.5)  shed = 0.15;
+  else if (stress > 0.3)  shed = 0.05;
+
+  // ── Batch scheduling: urgency-aware ──
+  let slot = 2;  // default: moderate defer
+  if (queue.length > 0) {
+    const minDeadline = Math.min(...queue);
+    const stepsLeft = minDeadline - step;
+    if (stepsLeft < 4)       slot = 0;  // urgent: run now
+    else if (stepsLeft < 8)  slot = 1;  // soon: start soon
+    else if (stepsLeft < 16) slot = 2;  // moderate
+    else if (price < 0.08)   slot = 0;  // cheap: might as well run now
+    else                     slot = 3;  // defer
+  }
+
+  return {
+    hvac_power_level: Math.max(0, Math.min(1, hvac)),
+    thermal_charge_rate: Math.max(-1, Math.min(1, charge)),
+    batch_job_slot: Math.max(0, Math.min(4, slot)),
+    load_shed_fraction: Math.max(0, Math.min(0.5, shed)),
+    building_id: currentBuilding,
+  };
+}
 
 function toggleLiveSim() {
   const btn = document.getElementById('btn-live');
   if (isLiveSimulating) {
-    // Stop live sim
     clearInterval(liveSimTimer);
     isLiveSimulating = false;
-    btn.textContent = '▶ Start Live Simulation';
-    btn.style.background = 'var(--accent-green)';
+    btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg> Start Live Simulation';
+    btn.classList.remove('active');
   } else {
-    // Start live sim
     isLiveSimulating = true;
-    btn.textContent = '⏸ Pause Live Simulation';
-    btn.style.background = 'var(--accent-amber)';
-    
+    btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> Pause Simulation';
+    btn.classList.add('active');
+
     liveSimTimer = setInterval(async () => {
-      // Step the environment automatically with a simple heuristic policy
-      const taskId = parseInt(document.getElementById('task-select').value, 10);
       try {
+        // Fetch current state to make informed actions
+        const stateRes = await fetch(`${API_BASE}/state`);
+        if (stateRes.ok) {
+          const state = await stateRes.json();
+          lastLiveState = state.buildings && state.buildings[currentBuilding];
+        }
+
+        // Use smart heuristic agent based on current state
+        const action = heuristicAction(lastLiveState);
+
         await fetch(`${API_BASE}/step`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            hvac_power_level: 0.5,
-            thermal_charge_rate: 0.0,
-            batch_job_slot: 0,
-            load_shed_fraction: 0.0,
-            building_id: currentBuilding
-          }),
+          body: JSON.stringify(action),
         });
-        // fetchAndUpdate() will catch the change via polling
       } catch (e) {
         console.error(e);
       }
-    }, 400); // 400ms per step
+    }, 400);
   }
 }
 
@@ -619,14 +793,16 @@ async function doGrade() {
     const el = document.getElementById('grade-result');
     el.textContent = `Score: ${score}% ${grade.exploit_detected ? '⚠ exploit!' : ''}`;
     el.style.color = grade.score > 0.6 ? 'var(--accent-green)' : grade.score > 0.3 ? 'var(--accent-amber)' : 'var(--accent-red)';
+    el.style.background = grade.score > 0.6 ? 'rgba(74,222,128,0.08)' : grade.score > 0.3 ? 'rgba(245,166,35,0.08)' : 'rgba(240,110,110,0.08)';
+    el.classList.add('show');
   } catch (e) {
     console.error(e);
   }
 }
 
 function onTaskChange() {
-  // Reset chart histories on task change
   [tempChart, storageChart, hvacChart, costChart, stressChart, rewardChart].forEach(c => {
+    if (!c) return;
     c.data.labels = [];
     c.data.datasets.forEach(d => d.data = []);
     c.update('none');
@@ -641,7 +817,7 @@ function onBuildingChange() {
 // ── Start polling ────────────────────────────────────────────────────────────
 function startPolling() {
   if (pollTimer) clearInterval(pollTimer);
-  fetchAndUpdate(); // immediate first fetch
+  fetchAndUpdate();
   pollTimer = setInterval(fetchAndUpdate, POLL_MS);
 }
 

dashboard/static/index.html

@@ -8,69 +8,141 @@
   <!-- Chart.js CDN -->
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
   <!-- Google Fonts -->
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+  <!-- Lucide Icons -->
+  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
   <style>
-    /* ── Design System ─────────────────────────────────────────────── */
+    /* ══════════════════════════════════════════════════════════════════
+       GridMind-RL — Premium Matte Dashboard Design System
+       ══════════════════════════════════════════════════════════════════ */
     :root {
-      --bg-base:      #0a0f1e;
-      --bg-surface:   #0f1829;
-      --bg-card:      #141f35;
-      --bg-card-h:    #1a2840;
-      --border:       rgba(56, 139, 253, 0.15);
-      --border-glow:  rgba(56, 139, 253, 0.4);
-      --text-primary: #e2e8f4;
-      --text-secondary: #8899b4;
-      --text-dim:     #4d6080;
-      --accent-blue:  #388bfd;
-      --accent-green: #3fb950;
-      --accent-amber: #d29922;
-      --accent-red:   #f85149;
-      --accent-purple: #bc8cff;
-      --accent-cyan:  #39d0d8;
-      --accent-orange: #ff7c39;
-      --gradient-hero: linear-gradient(135deg, #0d1b33 0%, #0a0f1e 100%);
-      --glow-blue:    0 0 20px rgba(56,139,253,0.25), 0 0 40px rgba(56,139,253,0.1);
-      --glow-green:   0 0 20px rgba(63,185,80,0.25);
-      --font-mono:    'JetBrains Mono', monospace;
-      --radius:       12px;
-      --radius-lg:    16px;
+      /* Matte dark palette — deep, soft, no harsh contrast */
+      --bg-base:        #0c0e14;
+      --bg-elevated:    #12151e;
+      --bg-surface:     #171b27;
+      --bg-card:        #1a1f2e;
+      --bg-card-hover:  #1f2538;
+      --bg-inset:       #141824;
+      --bg-overlay:     rgba(12, 14, 20, 0.92);
+
+      /* Borders — ultra subtle */
+      --border-subtle:  rgba(255, 255, 255, 0.04);
+      --border-default: rgba(255, 255, 255, 0.06);
+      --border-hover:   rgba(255, 255, 255, 0.10);
+      --border-accent:  rgba(99, 179, 237, 0.20);
+
+      /* Text — muted and refined */
+      --text-primary:   #e8ecf4;
+      --text-secondary: #8a94a8;
+      --text-tertiary:  #5a6478;
+      --text-muted:     #3d4558;
+
+      /* Accent palette — muted, sophisticated */
+      --accent-blue:    #5b9cf6;
+      --accent-green:   #4ade80;
+      --accent-amber:   #f5a623;
+      --accent-red:     #f06e6e;
+      --accent-purple:  #a78bfa;
+      --accent-cyan:    #34d4e4;
+      --accent-orange:  #fb923c;
+      --accent-teal:    #2dd4bf;
+      --accent-rose:    #fb7185;
+
+      /* Gradients */
+      --grad-blue:      linear-gradient(135deg, #5b9cf6 0%, #818cf8 100%);
+      --grad-green:     linear-gradient(135deg, #4ade80 0%, #34d4e4 100%);
+      --grad-amber:     linear-gradient(135deg, #f5a623 0%, #fb923c 100%);
+      --grad-red:       linear-gradient(135deg, #f06e6e 0%, #fb7185 100%);
+      --grad-purple:    linear-gradient(135deg, #a78bfa 0%, #818cf8 100%);
+      --grad-hero:      linear-gradient(160deg, #0c0e14 0%, #12151e 30%, #171b27 100%);
+
+      /* Glass */
+      --glass-bg:       rgba(26, 31, 46, 0.60);
+      --glass-border:   rgba(255, 255, 255, 0.06);
+      --glass-blur:     20px;
+
+      /* Shadows */
+      --shadow-sm:      0 1px 2px rgba(0,0,0,0.3);
+      --shadow-md:      0 4px 12px rgba(0,0,0,0.4);
+      --shadow-lg:      0 8px 32px rgba(0,0,0,0.5);
+      --shadow-glow-blue: 0 0 24px rgba(91,156,246,0.12);
+      --shadow-glow-green: 0 0 24px rgba(74,222,128,0.12);
+
+      /* Typography */
+      --font-sans:      'Inter', -apple-system, system-ui, sans-serif;
+      --font-mono:      'JetBrains Mono', 'Fira Code', monospace;
+
+      /* Spacing & Radius */
+      --radius-sm:      8px;
+      --radius-md:      12px;
+      --radius-lg:      16px;
+      --radius-xl:      20px;
+      --radius-pill:    9999px;
+
+      /* Transitions */
+      --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
+      --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
+      --duration-fast:  150ms;
+      --duration-base:  250ms;
+      --duration-slow:  400ms;
     }
 
+    /* ── Reset ────────────────────────────────────────────────────────── */
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    html { scroll-behavior: smooth; }
+    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
 
     body {
-      font-family: 'Inter', sans-serif;
+      font-family: var(--font-sans);
       background: var(--bg-base);
       color: var(--text-primary);
       min-height: 100vh;
       overflow-x: hidden;
+      line-height: 1.5;
     }
 
-    /* ── Animated background grid ── */
+    /* ── Ambient background ───────────────────────────────────────────── */
     body::before {
       content: '';
+      position: fixed;
+      top: -30%; left: -10%;
+      width: 60%; height: 60%;
+      background: radial-gradient(circle, rgba(91,156,246,0.04) 0%, transparent 65%);
+      pointer-events: none;
+      z-index: 0;
+    }
+    body::after {
+      content: '';
+      position: fixed;
+      bottom: -20%; right: -10%;
+      width: 50%; height: 50%;
+      background: radial-gradient(circle, rgba(168,85,247,0.03) 0%, transparent 65%);
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    /* Subtle dot pattern */
+    .bg-pattern {
       position: fixed;
       inset: 0;
-      background-image:
-        linear-gradient(rgba(56,139,253,0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(56,139,253,0.03) 1px, transparent 1px);
-      background-size: 40px 40px;
+      background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
+      background-size: 24px 24px;
       pointer-events: none;
       z-index: 0;
     }
 
-    /* ── Header ─────────────────────────────────────────────────────── */
+    /* ══════════════════════════════════════════════════════════════════
+       HEADER — Glass morphism nav bar
+       ══════════════════════════════════════════════════════════════════ */
     header {
       position: sticky;
       top: 0;
       z-index: 100;
-      background: rgba(10,15,30,0.85);
-      backdrop-filter: blur(16px);
-      border-bottom: 1px solid var(--border);
-      padding: 0 2rem;
-      height: 64px;
+      background: var(--bg-overlay);
+      backdrop-filter: blur(24px) saturate(1.2);
+      -webkit-backdrop-filter: blur(24px) saturate(1.2);
+      border-bottom: 1px solid var(--border-subtle);
+      padding: 0 1.75rem;
+      height: 60px;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -79,132 +151,266 @@
     .logo {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 12px;
     }
     .logo-icon {
-      width: 32px; height: 32px;
-      background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
-      border-radius: 8px;
-      display: flex; align-items: center; justify-content: center;
+      width: 36px; height: 36px;
+      background: var(--grad-blue);
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       font-size: 16px;
+      box-shadow: 0 2px 12px rgba(91,156,246,0.25);
+      position: relative;
+      overflow: hidden;
+    }
+    .logo-icon::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
+    }
+    .logo-icon svg { width: 18px; height: 18px; color: white; position: relative; z-index: 1; }
+    .logo-text {
+      font-size: 1.05rem;
+      font-weight: 700;
+      letter-spacing: -0.5px;
+      color: var(--text-primary);
+    }
+    .logo-text span {
+      background: var(--grad-blue);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .logo-tag {
+      font-size: 0.6rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      color: var(--text-tertiary);
+      padding: 2px 8px;
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-pill);
+      margin-left: 4px;
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
     }
-    .logo-text { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.3px; }
-    .logo-text span { color: var(--accent-blue); }
 
-    .header-status {
+    .task-badge {
+      padding: 5px 14px;
+      border-radius: var(--radius-pill);
+      font-size: 0.72rem;
+      font-weight: 600;
+      background: rgba(91,156,246,0.10);
+      border: 1px solid rgba(91,156,246,0.15);
+      color: var(--accent-blue);
+      letter-spacing: 0.2px;
+    }
+
+    .status-indicator {
       display: flex;
       align-items: center;
-      gap: 1.5rem;
+      gap: 8px;
+      padding: 5px 14px;
+      border-radius: var(--radius-pill);
+      background: rgba(74,222,128,0.08);
+      border: 1px solid rgba(74,222,128,0.12);
     }
     .status-dot {
-      width: 8px; height: 8px;
+      width: 7px; height: 7px;
       border-radius: 50%;
       background: var(--accent-green);
-      box-shadow: 0 0 8px var(--accent-green);
-      animation: pulse 2s infinite;
+      box-shadow: 0 0 8px rgba(74,222,128,0.5);
+      animation: statusPulse 2.5s ease-in-out infinite;
     }
-    @keyframes pulse {
-      0%, 100% { opacity: 1; transform: scale(1); }
-      50% { opacity: 0.6; transform: scale(0.9); }
+    @keyframes statusPulse {
+      0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(74,222,128,0.5); }
+      50% { opacity: 0.5; box-shadow: 0 0 16px rgba(74,222,128,0.3); }
     }
-    .status-label { font-size: 0.8rem; color: var(--text-secondary); }
-
-    .task-badge {
-      padding: 4px 12px;
-      border-radius: 20px;
-      font-size: 0.75rem;
+    .status-label {
+      font-size: 0.72rem;
       font-weight: 600;
-      background: rgba(56,139,253,0.15);
-      border: 1px solid var(--border);
-      color: var(--accent-blue);
+      color: var(--accent-green);
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+    }
+
+    .header-meta {
+      font-family: var(--font-mono);
+      font-size: 0.72rem;
+      color: var(--text-tertiary);
+      letter-spacing: 0.5px;
     }
 
-    /* ── KPI Bar ────────────────────────────────────────────────────── */
-    .kpi-bar {
-      position: relative; z-index: 1;
+    /* ══════════════════════════════════════════════════════════════════
+       KPI BAR — Elevated metrics strip
+       ══════════════════════════════════════════════════════════════════ */
+    .kpi-strip {
+      position: relative;
+      z-index: 1;
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-      gap: 1px;
-      background: var(--border);
-      border-bottom: 1px solid var(--border);
+      grid-template-columns: repeat(7, 1fr);
+      background: var(--bg-elevated);
+      border-bottom: 1px solid var(--border-subtle);
+    }
+    @media (max-width: 1100px) {
+      .kpi-strip { grid-template-columns: repeat(4, 1fr); }
+    }
+    @media (max-width: 640px) {
+      .kpi-strip { grid-template-columns: repeat(2, 1fr); }
     }
+
     .kpi {
-      background: var(--bg-surface);
-      padding: 1rem 1.5rem;
-      display: flex; flex-direction: column; gap: 2px;
-      transition: background 0.2s;
+      padding: 1rem 1.25rem;
+      border-right: 1px solid var(--border-subtle);
+      transition: background var(--duration-base) var(--ease-out);
+      cursor: default;
+      position: relative;
+    }
+    .kpi:last-child { border-right: none; }
+    .kpi:hover { background: var(--bg-surface); }
+    .kpi::after {
+      content: '';
+      position: absolute;
+      bottom: 0; left: 50%;
+      width: 0; height: 2px;
+      background: var(--grad-blue);
+      transition: all var(--duration-base) var(--ease-out);
+      transform: translateX(-50%);
+      border-radius: 1px;
+    }
+    .kpi:hover::after { width: 60%; }
+
+    .kpi-label {
+      font-size: 0.65rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      color: var(--text-tertiary);
+      margin-bottom: 4px;
     }
-    .kpi:hover { background: var(--bg-card); }
-    .kpi-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); }
     .kpi-value {
       font-family: var(--font-mono);
-      font-size: 1.5rem;
+      font-size: 1.35rem;
       font-weight: 600;
       color: var(--text-primary);
-      transition: color 0.3s;
+      transition: color var(--duration-base);
+      line-height: 1.2;
     }
     .kpi-value.good { color: var(--accent-green); }
     .kpi-value.warn { color: var(--accent-amber); }
     .kpi-value.bad  { color: var(--accent-red); }
-    .kpi-delta { font-size: 0.72rem; color: var(--text-secondary); font-family: var(--font-mono); }
 
-    /* ── Main Grid ──────────────────────────────────────────────────── */
+    .kpi-unit {
+      font-size: 0.65rem;
+      color: var(--text-muted);
+      font-family: var(--font-mono);
+      margin-top: 2px;
+    }
+
+    /* ══════════════════════════════════════════════════════════════════
+       MAIN LAYOUT — 12-column grid
+       ═════════════════════════════��════════════════════════════════════ */
     main {
-      position: relative; z-index: 1;
-      max-width: 1600px;
+      position: relative;
+      z-index: 1;
+      max-width: 1560px;
       margin: 0 auto;
-      padding: 1.5rem;
+      padding: 1.25rem;
       display: grid;
       grid-template-columns: repeat(12, 1fr);
       gap: 1rem;
     }
 
-    /* ── Card ───────────────────────────────────────────────────────── */
+    /* ══════════════════════════════════════════════════════════════════
+       CARD — Matte glass panels
+       ══════════════════════════════════════════════════════════════════ */
     .card {
       background: var(--bg-card);
-      border: 1px solid var(--border);
+      border: 1px solid var(--border-default);
       border-radius: var(--radius-lg);
       padding: 1.25rem;
-      transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
+      transition: all var(--duration-base) var(--ease-out);
       position: relative;
       overflow: hidden;
     }
     .card::before {
       content: '';
       position: absolute;
-      inset: 0;
-      background: linear-gradient(135deg, rgba(56,139,253,0.03) 0%, transparent 60%);
-      pointer-events: none;
+      top: 0; left: 0; right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
     }
     .card:hover {
-      border-color: var(--border-glow);
-      box-shadow: var(--glow-blue);
+      border-color: var(--border-hover);
+      background: var(--bg-card-hover);
+      box-shadow: var(--shadow-md);
       transform: translateY(-1px);
     }
+
     .card.alert-active {
-      border-color: rgba(248,81,73,0.5);
-      box-shadow: 0 0 20px rgba(248,81,73,0.2);
-      animation: alertPulse 1.5s infinite;
+      border-color: rgba(240,110,110,0.35);
+      box-shadow: 0 0 30px rgba(240,110,110,0.08);
+      animation: alertGlow 2s ease-in-out infinite;
     }
-    @keyframes alertPulse {
-      0%, 100% { box-shadow: 0 0 20px rgba(248,81,73,0.2); }
-      50% { box-shadow: 0 0 35px rgba(248,81,73,0.4); }
+    @keyframes alertGlow {
+      0%, 100% { box-shadow: 0 0 20px rgba(240,110,110,0.06); }
+      50% { box-shadow: 0 0 40px rgba(240,110,110,0.12); }
     }
 
+    .card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 1rem;
+    }
     .card-title {
-      font-size: 0.78rem;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.75rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.8px;
       color: var(--text-secondary);
-      margin-bottom: 0.75rem;
+    }
+    .card-title .icon-wrap {
+      width: 28px; height: 28px;
+      border-radius: var(--radius-sm);
       display: flex;
       align-items: center;
-      gap: 0.5rem;
+      justify-content: center;
+      flex-shrink: 0;
     }
-    .card-title .icon { font-size: 0.9rem; }
+    .card-title .icon-wrap svg { width: 14px; height: 14px; }
+    .card-title .icon-wrap.blue    { background: rgba(91,156,246,0.12); color: var(--accent-blue); }
+    .card-title .icon-wrap.green   { background: rgba(74,222,128,0.12); color: var(--accent-green); }
+    .card-title .icon-wrap.amber   { background: rgba(245,166,35,0.12); color: var(--accent-amber); }
+    .card-title .icon-wrap.red     { background: rgba(240,110,110,0.12); color: var(--accent-red); }
+    .card-title .icon-wrap.purple  { background: rgba(167,139,250,0.12); color: var(--accent-purple); }
+    .card-title .icon-wrap.cyan    { background: rgba(52,212,228,0.12); color: var(--accent-cyan); }
+    .card-title .icon-wrap.orange  { background: rgba(251,146,60,0.12); color: var(--accent-orange); }
+    .card-title .icon-wrap.teal    { background: rgba(45,212,191,0.12); color: var(--accent-teal); }
 
-    /* ── Grid layout spans ─ */
+    .card-badge {
+      font-size: 0.62rem;
+      font-weight: 600;
+      padding: 3px 8px;
+      border-radius: var(--radius-pill);
+      background: rgba(255,255,255,0.04);
+      border: 1px solid var(--border-subtle);
+      color: var(--text-tertiary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    /* Column spans */
     .col-12 { grid-column: span 12; }
     .col-8  { grid-column: span 8; }
     .col-6  { grid-column: span 6; }
@@ -212,366 +418,559 @@
     .col-3  { grid-column: span 3; }
 
     @media (max-width: 1200px) {
-      .col-8  { grid-column: span 12; }
-      .col-4  { grid-column: span 12; }
-      .col-6  { grid-column: span 12; }
-      .col-3  { grid-column: span 6; }
+      .col-8, .col-6 { grid-column: span 12; }
+      .col-4, .col-3 { grid-column: span 6; }
     }
     @media (max-width: 768px) {
-      .col-3 { grid-column: span 12; }
+      .col-3, .col-4 { grid-column: span 12; }
       main { padding: 0.75rem; gap: 0.75rem; }
     }
 
-    /* ── Charts ─────────────────────────────────────────────────────── */
+    /* ── Chart containers ─────────────────────────────────────────────── */
     .chart-wrap { position: relative; height: 200px; }
     .chart-wrap.tall { height: 260px; }
     .chart-wrap.short { height: 150px; }
 
-    /* ── Thermal Storage Bar ─────────────────────────────────────────── */
-    .storage-bar-wrap {
-      height: 28px;
-      background: rgba(255,255,255,0.05);
-      border-radius: 14px;
+    /* ══════════════════════════════════════════════════════════════════
+       THERMAL STORAGE — Premium gauge
+       ══════════════════════════════════════════════════════════════════ */
+    .storage-display {
+      text-align: center;
+      padding: 0.5rem 0;
+    }
+    .storage-value {
+      font-family: var(--font-mono);
+      font-size: 2.5rem;
+      font-weight: 700;
+      line-height: 1;
+      background: var(--grad-green);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .storage-value span {
+      font-size: 1.2rem;
+      -webkit-text-fill-color: var(--text-tertiary);
+    }
+    .storage-bar-track {
+      height: 8px;
+      background: var(--bg-inset);
+      border-radius: var(--radius-pill);
       overflow: hidden;
-      margin-top: 0.5rem;
+      margin: 0.75rem 0;
       position: relative;
     }
     .storage-bar-fill {
       height: 100%;
-      border-radius: 14px;
-      background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
-      transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+      border-radius: var(--radius-pill);
+      background: var(--grad-green);
+      transition: width 0.6s var(--ease-out);
       position: relative;
     }
     .storage-bar-fill::after {
       content: '';
       position: absolute;
-      inset: 0;
-      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
-      animation: shimmer 2s infinite;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+      animation: barShimmer 2.5s ease-in-out infinite;
     }
-    @keyframes shimmer {
+    @keyframes barShimmer {
       0% { transform: translateX(-100%); }
-      100% { transform: translateX(100%); }
+      100% { transform: translateX(200%); }
+    }
+
+    /* ══════════════════════════════════════════════════════════════════
+       STRESS DISPLAY
+       ══════════════════════════════════════════════════════════════════ */
+    .stress-display {
+      text-align: center;
+      padding: 0.25rem 0;
     }
-    .storage-label {
+    .stress-value {
       font-family: var(--font-mono);
-      font-size: 1.8rem;
+      font-size: 2.8rem;
       font-weight: 700;
-      color: var(--accent-cyan);
-      margin-top: 0.5rem;
+      line-height: 1;
+      color: var(--text-primary);
+      transition: color var(--duration-base);
+    }
+    .stress-value.low   { color: var(--accent-green); }
+    .stress-value.mid   { color: var(--accent-amber); }
+    .stress-value.high  { color: var(--accent-red); }
+    .stress-sub {
+      font-size: 0.72rem;
+      color: var(--text-tertiary);
+      margin-top: 4px;
+    }
+
+    .stress-meter {
+      display: flex;
+      align-items: flex-end;
+      gap: 3px;
+      height: 36px;
+      margin: 0.75rem 0;
+      padding: 0 0.5rem;
+    }
+    .stress-bar {
+      flex: 1;
+      background: rgba(255,255,255,0.04);
+      border-radius: 2px 2px 0 0;
+      transition: height var(--duration-slow) var(--ease-out),
+                  background var(--duration-base);
+      min-height: 3px;
     }
-    .storage-label span { font-size: 1rem; color: var(--text-secondary); }
 
-    /* ── Batch Gantt ─────────────────────────────────────────────────── */
-    .gantt-wrap {
+    /* ══════════════════════════════════════════════════════════════════
+       BATCH GANTT
+       ══════════════════════════════════════════════════════════════════ */
+    .gantt-container {
       display: flex;
       flex-direction: column;
-      gap: 6px;
-      margin-top: 0.25rem;
+      gap: 8px;
     }
     .gantt-row {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: 10px;
       font-size: 0.75rem;
     }
     .gantt-label {
-      width: 40px;
-      color: var(--text-secondary);
+      width: 36px;
       font-family: var(--font-mono);
+      font-weight: 600;
+      color: var(--text-tertiary);
       flex-shrink: 0;
+      font-size: 0.7rem;
     }
     .gantt-track {
       flex: 1;
-      height: 18px;
-      background: rgba(255,255,255,0.05);
-      border-radius: 4px;
+      height: 22px;
+      background: var(--bg-inset);
+      border-radius: 6px;
       position: relative;
       overflow: hidden;
     }
     .gantt-block {
       position: absolute;
-      top: 0; bottom: 0;
+      top: 3px; bottom: 3px;
       border-radius: 4px;
-      transition: width 0.3s, left 0.3s;
+      transition: width var(--duration-base), left var(--duration-base);
     }
-    .gantt-block.scheduled { background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple)); }
-    .gantt-block.completed { background: var(--accent-green); opacity: 0.7; }
-    .gantt-block.missed    { background: var(--accent-red); opacity: 0.8; }
+    .gantt-block.scheduled { background: var(--grad-blue); opacity: 0.85; }
+    .gantt-block.completed { background: var(--grad-green); opacity: 0.7; }
+    .gantt-block.missed    { background: var(--grad-red); opacity: 0.75; }
     .gantt-deadline {
       position: absolute;
-      top: 0; bottom: 0;
+      top: 2px; bottom: 2px;
       width: 2px;
       background: var(--accent-amber);
       border-radius: 1px;
+      box-shadow: 0 0 6px rgba(245,166,35,0.3);
     }
     .gantt-status {
-      width: 60px;
+      width: 56px;
       text-align: right;
       flex-shrink: 0;
     }
     .badge {
+      display: inline-block;
       padding: 2px 8px;
-      border-radius: 10px;
-      font-size: 0.7rem;
+      border-radius: var(--radius-pill);
+      font-size: 0.62rem;
       font-weight: 600;
+      letter-spacing: 0.3px;
+      text-transform: uppercase;
     }
-    .badge.ok      { background: rgba(63,185,80,0.2); color: var(--accent-green); }
-    .badge.pending { background: rgba(56,139,253,0.2); color: var(--accent-blue); }
-    .badge.missed  { background: rgba(248,81,73,0.2); color: var(--accent-red); }
-    .badge.running { background: rgba(188,140,255,0.2); color: var(--accent-purple); }
+    .badge.ok      { background: rgba(74,222,128,0.12); color: var(--accent-green); }
+    .badge.pending { background: rgba(91,156,246,0.12); color: var(--accent-blue); }
+    .badge.missed  { background: rgba(240,110,110,0.12); color: var(--accent-red); }
+    .badge.running { background: rgba(167,139,250,0.12); color: var(--accent-purple); }
 
-    /* ── Reward breakdown mini-bars ──────────────────────────────── */
-    .reward-row {
-      display: flex; align-items: center; gap: 8px;
-      font-size: 0.75rem; margin-bottom: 4px;
+    .gantt-empty {
+      text-align: center;
+      padding: 2rem 0;
+      color: var(--text-muted);
+      font-size: 0.8rem;
     }
-    .reward-label { width: 100px; color: var(--text-secondary); }
-    .reward-bar-wrap { flex: 1; height: 10px; background: rgba(255,255,255,0.05); border-radius: 5px; overflow: hidden; }
-    .reward-bar { height: 100%; border-radius: 5px; transition: width 0.5s; }
-    .reward-val { width: 55px; text-align: right; font-family: var(--font-mono); color: var(--text-primary); }
 
-    /* ── Grid stress indicator ──────────────────────────────────── */
-    .stress-meter {
-      display: flex; align-items: flex-end; gap: 3px;
-      height: 40px;
-      margin-top: 0.5rem;
+    /* ══════════════════════════════════════════════════════════════════
+       REWARD ROWS
+       ══════════════════════════════════════════════════════════════════ */
+    .reward-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 4px 0;
     }
-    .stress-bar {
+    .reward-label {
+      width: 90px;
+      font-size: 0.7rem;
+      color: var(--text-tertiary);
+      flex-shrink: 0;
+    }
+    .reward-bar-track {
       flex: 1;
-      background: rgba(255,255,255,0.05);
-      border-radius: 2px 2px 0 0;
-      transition: height 0.4s, background 0.4s;
+      height: 6px;
+      background: var(--bg-inset);
+      border-radius: var(--radius-pill);
+      overflow: hidden;
     }
-
-    /* ── Big number display ─────────────────────────────────────── */
-    .big-num {
-      font-family: var(--font-mono);
-      font-weight: 700;
+    .reward-bar {
+      height: 100%;
+      border-radius: var(--radius-pill);
+      transition: width 0.5s var(--ease-out);
     }
-    .big-num.xl  { font-size: 2.8rem; }
-    .big-num.lg  { font-size: 2rem; }
-    .big-num.md  { font-size: 1.4rem; }
-    .big-num.green  { color: var(--accent-green); }
-    .big-num.blue   { color: var(--accent-blue); }
-    .big-num.amber  { color: var(--accent-amber); }
-    .big-num.red    { color: var(--accent-red); }
-    .big-num.purple { color: var(--accent-purple); }
-
-    .sub-label { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
-
-    /* ── Price ticker ──────────────────────────────────────────── */
-    .price-row {
-      display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
-    }
-    .price-tier {
-      display: flex; align-items: center; gap: 6px;
-      padding: 6px 10px;
-      border-radius: 8px;
-      background: rgba(255,255,255,0.04);
-      border: 1px solid rgba(255,255,255,0.06);
-      font-size: 0.8rem;
+    .reward-val {
+      width: 52px;
+      text-align: right;
+      font-family: var(--font-mono);
+      font-size: 0.68rem;
+      font-weight: 500;
     }
-    .price-tier .dot { width: 8px; height: 8px; border-radius: 50%; }
 
-    /* ── Control panel ──────────────────────────────────────────── */
-    .ctrl-row {
-      display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
-      margin-top: 0.5rem;
+    /* ══════════════════════════════════════════════════════════════════
+       CONTROLS — Premium buttons
+       ══════════════════════════════════════════════════════════════════ */
+    .controls-grid {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      flex-wrap: wrap;
     }
+
     .btn {
-      padding: 8px 16px;
-      border-radius: 8px;
-      border: 1px solid var(--border);
-      background: rgba(56,139,253,0.1);
-      color: var(--accent-blue);
-      font-size: 0.82rem;
+      padding: 9px 18px;
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border-default);
+      background: var(--bg-surface);
+      color: var(--text-secondary);
+      font-size: 0.78rem;
       font-weight: 600;
+      font-family: var(--font-sans);
       cursor: pointer;
-      transition: all 0.2s;
-      font-family: 'Inter', sans-serif;
+      transition: all var(--duration-base) var(--ease-out);
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      white-space: nowrap;
     }
+    .btn svg { width: 14px; height: 14px; }
     .btn:hover {
-      background: rgba(56,139,253,0.2);
-      border-color: var(--accent-blue);
-      box-shadow: 0 0 12px rgba(56,139,253,0.3);
+      background: var(--bg-card-hover);
+      border-color: var(--border-hover);
+      color: var(--text-primary);
       transform: translateY(-1px);
+      box-shadow: var(--shadow-sm);
     }
+    .btn:active { transform: translateY(0); }
+
     .btn.primary {
-      background: var(--accent-blue);
-      color: #fff;
+      background: var(--grad-blue);
+      border: none;
+      color: white;
+      box-shadow: 0 2px 12px rgba(91,156,246,0.20);
     }
-    .btn.primary:hover { background: #4da3ff; }
-    .btn.danger {
-      background: rgba(248,81,73,0.15);
-      color: var(--accent-red);
-      border-color: rgba(248,81,73,0.3);
+    .btn.primary:hover {
+      box-shadow: 0 4px 20px rgba(91,156,246,0.30);
+      transform: translateY(-2px);
     }
 
-    select {
-      padding: 8px 12px;
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      color: var(--text-primary);
-      font-size: 0.82rem;
-      font-family: 'Inter', sans-serif;
+    .btn.success {
+      background: rgba(74,222,128,0.12);
+      border-color: rgba(74,222,128,0.20);
+      color: var(--accent-green);
+    }
+    .btn.success:hover {
+      background: rgba(74,222,128,0.18);
+      box-shadow: 0 2px 12px rgba(74,222,128,0.15);
+    }
+    .btn.success.active {
+      background: rgba(245,166,35,0.12);
+      border-color: rgba(245,166,35,0.20);
+      color: var(--accent-amber);
+    }
+
+    select.form-select {
+      padding: 9px 14px;
+      background: var(--bg-surface);
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-md);
+      color: var(--text-secondary);
+      font-size: 0.78rem;
+      font-weight: 500;
+      font-family: var(--font-sans);
       cursor: pointer;
+      transition: all var(--duration-base) var(--ease-out);
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%235a6478' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 10px center;
+      padding-right: 30px;
+    }
+    select.form-select:focus {
+      outline: none;
+      border-color: var(--accent-blue);
+      box-shadow: 0 0 0 3px rgba(91,156,246,0.10);
+    }
+    select.form-select:hover {
+      border-color: var(--border-hover);
+      background-color: var(--bg-card);
+    }
+
+    .grade-result {
+      font-family: var(--font-mono);
+      font-size: 0.82rem;
+      font-weight: 600;
+      padding: 5px 14px;
+      border-radius: var(--radius-pill);
+      background: rgba(74,222,128,0.08);
+      color: var(--accent-green);
+      display: none;
     }
-    select:focus { outline: none; border-color: var(--accent-blue); }
+    .grade-result.show { display: inline-flex; }
 
-    /* ── Connection banner ──────────────────────────────────────── */
+    /* ══════════════════════════════════════════════════════════════════
+       CONNECTION BANNER
+       ══════════════════════════════════════════════════════════════════ */
     #conn-banner {
       display: none;
       position: fixed;
-      top: 64px; left: 0; right: 0;
+      top: 60px; left: 0; right: 0;
       z-index: 200;
-      background: rgba(248,81,73,0.15);
-      border-bottom: 1px solid rgba(248,81,73,0.3);
+      background: rgba(240,110,110,0.08);
+      backdrop-filter: blur(12px);
+      border-bottom: 1px solid rgba(240,110,110,0.15);
       text-align: center;
       padding: 10px;
-      font-size: 0.85rem;
+      font-size: 0.8rem;
+      font-weight: 500;
       color: var(--accent-red);
     }
     #conn-banner.show { display: block; }
 
-    /* ── Footer ─────────────────────────────────────────────────── */
+    /* ══════════════════════════════════════════════════════════════════
+       FOOTER
+       ══════════════════════════════════════════════════════════════════ */
     footer {
-      position: relative; z-index: 1;
+      position: relative;
+      z-index: 1;
       text-align: center;
       padding: 1.5rem;
-      color: var(--text-dim);
-      font-size: 0.75rem;
-      border-top: 1px solid var(--border);
+      color: var(--text-muted);
+      font-size: 0.7rem;
+      border-top: 1px solid var(--border-subtle);
+      background: var(--bg-elevated);
+    }
+    footer a {
+      color: var(--text-tertiary);
+      text-decoration: none;
+      transition: color var(--duration-fast);
+    }
+    footer a:hover { color: var(--accent-blue); }
+
+    /* ══════════════════════════════════════════════════════════════════
+       ANIMATIONS
+       ══════════════════════════════════════════════════════════════════ */
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(12px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .card {
+      animation: fadeInUp 0.5s var(--ease-out) both;
+    }
+    .card:nth-child(1) { animation-delay: 0.05s; }
+    .card:nth-child(2) { animation-delay: 0.10s; }
+    .card:nth-child(3) { animation-delay: 0.15s; }
+    .card:nth-child(4) { animation-delay: 0.20s; }
+    .card:nth-child(5) { animation-delay: 0.25s; }
+    .card:nth-child(6) { animation-delay: 0.30s; }
+    .card:nth-child(7) { animation-delay: 0.35s; }
+    .card:nth-child(8) { animation-delay: 0.40s; }
+    .card:nth-child(9) { animation-delay: 0.45s; }
+
+    /* Scrollbar styling */
+    ::-webkit-scrollbar { width: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb {
+      background: rgba(255,255,255,0.08);
+      border-radius: 3px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgba(255,255,255,0.12);
     }
   </style>
 </head>
 <body>
 
-<!-- Connection error banner -->
+<div class="bg-pattern"></div>
+
+<!-- Connection banner -->
 <div id="conn-banner">
-  ⚡ Environment server unreachable — retrying...
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -2px; margin-right: 6px;"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+  Environment server unreachable — retrying connection...
 </div>
 
-<!-- ── Header ─── -->
+<!-- ═══ HEADER ═══ -->
 <header>
   <div class="logo">
-    <div class="logo-icon">⚡</div>
+    <div class="logo-icon">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+    </div>
     <div class="logo-text">Grid<span>Mind</span>-RL</div>
+    <div class="logo-tag">v1.0</div>
   </div>
-  <div class="header-status">
+  <div class="header-right">
     <span id="task-badge" class="task-badge">Task 1 — Cost Minimization</span>
-    <div style="display:flex;align-items:center;gap:6px">
+    <div class="status-indicator">
       <div class="status-dot" id="status-dot"></div>
       <span class="status-label" id="status-label">Live</span>
     </div>
-    <span id="ep-step" style="font-family:var(--font-mono);font-size:0.8rem;color:var(--text-secondary)">ep:— step:—</span>
+    <span class="header-meta" id="ep-step">ep:— step:—</span>
   </div>
 </header>
 
-<!-- ── KPI Bar ─── -->
-<div class="kpi-bar">
+<!-- ═══ KPI STRIP ═══ -->
+<div class="kpi-strip">
   <div class="kpi">
-    <span class="kpi-label">Current Price</span>
-    <span class="kpi-value" id="kpi-price">—</span>
-    <span class="kpi-delta">$/kWh</span>
+    <div class="kpi-label">Current Price</div>
+    <div class="kpi-value" id="kpi-price">—</div>
+    <div class="kpi-unit">$/kWh</div>
   </div>
   <div class="kpi">
-    <span class="kpi-label">Indoor Temp</span>
-    <span class="kpi-value" id="kpi-temp">—</span>
-    <span class="kpi-delta">°C (target 21°C)</span>
+    <div class="kpi-label">Indoor Temp</div>
+    <div class="kpi-value" id="kpi-temp">—</div>
+    <div class="kpi-unit">°C · target 21°C</div>
   </div>
   <div class="kpi">
-    <span class="kpi-label">Grid Stress</span>
-    <span class="kpi-value" id="kpi-stress">—</span>
-    <span class="kpi-delta">0=normal 1=critical</span>
+    <div class="kpi-label">Grid Stress</div>
+    <div class="kpi-value" id="kpi-stress">—</div>
+    <div class="kpi-unit">0 normal · 1 critical</div>
   </div>
   <div class="kpi">
-    <span class="kpi-label">Cumulative Cost</span>
-    <span class="kpi-value" id="kpi-cost">—</span>
-    <span class="kpi-delta">vs baseline: <span id="kpi-baseline">—</span></span>
+    <div class="kpi-label">Cumulative Cost</div>
+    <div class="kpi-value" id="kpi-cost">—</div>
+    <div class="kpi-unit">vs baseline: <span id="kpi-baseline">—</span></div>
   </div>
   <div class="kpi">
-    <span class="kpi-label">Carbon Intensity</span>
-    <span class="kpi-value" id="kpi-carbon">—</span>
-    <span class="kpi-delta">gCO₂/kWh</span>
+    <div class="kpi-label">Carbon Intensity</div>
+    <div class="kpi-value" id="kpi-carbon">—</div>
+    <div class="kpi-unit">gCO₂/kWh</div>
   </div>
   <div class="kpi">
-    <span class="kpi-label">Process Demand</span>
-    <span class="kpi-value" id="kpi-demand">—</span>
-    <span class="kpi-delta">kW</span>
+    <div class="kpi-label">Process Demand</div>
+    <div class="kpi-value" id="kpi-demand">—</div>
+    <div class="kpi-unit">kW</div>
   </div>
   <div class="kpi">
-    <span class="kpi-label">Thermal Storage</span>
-    <span class="kpi-value" id="kpi-storage">—</span>
-    <span class="kpi-delta">% capacity</span>
+    <div class="kpi-label">Thermal Storage</div>
+    <div class="kpi-value" id="kpi-storage">—</div>
+    <div class="kpi-unit">% capacity</div>
   </div>
 </div>
 
-<!-- ── Main Content ─── -->
+<!-- ═══ MAIN CONTENT ═══ -->
 <main>
 
-  <!-- Row 1: Price curve + Temperature + Controls -->
+  <!-- Row 1: Price Curve + Grid Stress -->
   <div class="card col-8">
-    <div class="card-title"><span class="icon">💰</span> Electricity Price Curve (24h)</div>
+    <div class="card-header">
+      <div class="card-title">
+        <div class="icon-wrap amber"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>
+        Electricity Price Curve
+      </div>
+      <span class="card-badge">24H</span>
+    </div>
     <div class="chart-wrap">
       <canvas id="chart-price"></canvas>
     </div>
   </div>
 
   <div class="card col-4" id="card-stress">
-    <div class="card-title"><span class="icon">⚠️</span> Grid Stress Signal</div>
-    <div class="big-num xl" id="stress-big">0.00</div>
-    <div class="sub-label">Demand-response urgency</div>
-    <div class="stress-meter" id="stress-meter"></div>
-    <div style="margin-top:0.75rem;">
-      <div class="chart-wrap short">
-        <canvas id="chart-stress"></canvas>
+    <div class="card-header">
+      <div class="card-title">
+        <div class="icon-wrap red"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
+        Grid Stress Signal
       </div>
+      <span class="card-badge">REAL-TIME</span>
+    </div>
+    <div class="stress-display">
+      <div class="stress-value" id="stress-big">0.000</div>
+      <div class="stress-sub">Demand-response urgency index</div>
+    </div>
+    <div class="stress-meter" id="stress-meter"></div>
+    <div class="chart-wrap short">
+      <canvas id="chart-stress"></canvas>
     </div>
   </div>
 
   <!-- Row 2: Temperature + Storage + HVAC -->
   <div class="card col-6">
-    <div class="card-title"><span class="icon">🌡️</span> Temperature Timeline</div>
+    <div class="card-header">
+      <div class="card-title">
+        <div class="icon-wrap cyan"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/></svg></div>
+        Temperature Timeline
+      </div>
+      <span class="card-badge">INDOOR</span>
+    </div>
     <div class="chart-wrap tall">
       <canvas id="chart-temp"></canvas>
     </div>
   </div>
 
   <div class="card col-3">
-    <div class="card-title"><span class="icon">🔋</span> Thermal Storage Level</div>
-    <div class="storage-label"><span id="storage-pct">—</span><span>%</span></div>
-    <div class="storage-bar-wrap">
-      <div class="storage-bar-fill" id="storage-fill" style="width:0%"></div>
-    </div>
-    <div style="margin-top:1rem">
-      <div class="chart-wrap short">
-        <canvas id="chart-storage"></canvas>
+    <div class="card-header">
+      <div class="card-title">
+        <div class="icon-wrap teal"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="6" width="18" height="12" rx="2" ry="2"/><line x1="23" y1="13" x2="23" y2="11"/></svg></div>
+        Thermal Storage
       </div>
     </div>
+    <div class="storage-display">
+      <div class="storage-value"><span id="storage-pct">—</span><span>%</span></div>
+    </div>
+    <div class="storage-bar-track">
+      <div class="storage-bar-fill" id="storage-fill" style="width: 0%"></div>
+    </div>
+    <div class="chart-wrap short">
+      <canvas id="chart-storage"></canvas>
+    </div>
   </div>
 
   <div class="card col-3">
-    <div class="card-title"><span class="icon">❄️</span> HVAC + Load Shed</div>
+    <div class="card-header">
+      <div class="card-title">
+        <div class="icon-wrap blue"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
+        HVAC + Load Shed
+      </div>
+    </div>
     <div class="chart-wrap tall">
       <canvas id="chart-hvac"></canvas>
     </div>
   </div>
 
-  <!-- Row 3: Cost comparison + Reward breakdown -->
+  <!-- Row 3: Cost vs Baseline + Reward Breakdown -->
   <div class="card col-8">
-    <div class="card-title"><span class="icon">📊</span> Cumulative Cost vs Baseline</div>
+    <div class="card-header">
+      <div class="card-title">
+        <div class="icon-wrap green"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div>
+        Cumulative Cost vs Baseline
+      </div>
+      <span class="card-badge">COMPARISON</span>
+    </div>
     <div class="chart-wrap tall">
       <canvas id="chart-cost"></canvas>
     </div>
   </div>
 
   <div class="card col-4">
-    <div class="card-title"><span class="icon">🏆</span> Reward Breakdown</div>
-    <div id="reward-rows" style="margin-top:0.5rem"></div>
-    <div style="margin-top:1rem">
+    <div class="card-header">
+      <div class="card-title">
+        <div class="icon-wrap purple"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg></div>
+        Reward Breakdown
+      </div>
+      <span class="card-badge">STEP</span>
+    </div>
+    <div id="reward-rows" style="margin-top: 0.25rem"></div>
+    <div style="margin-top: 0.75rem">
       <div class="chart-wrap short">
         <canvas id="chart-reward"></canvas>
       </div>
@@ -580,14 +979,26 @@
 
   <!-- Row 4: Batch Gantt + Carbon -->
   <div class="card col-6">
-    <div class="card-title"><span class="icon">⚙️</span> Batch Job Timeline</div>
-    <div class="gantt-wrap" id="gantt-wrap">
-      <div style="color:var(--text-dim);font-size:0.8rem">No batch jobs queued.</div>
+    <div class="card-header">
+      <div class="card-title">
+        <div class="icon-wrap orange"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></div>
+        Batch Job Timeline
+      </div>
+      <span class="card-badge">SCHEDULER</span>
+    </div>
+    <div class="gantt-container" id="gantt-wrap">
+      <div class="gantt-empty">No batch jobs queued</div>
     </div>
   </div>
 
   <div class="card col-6">
-    <div class="card-title"><span class="icon">🌍</span> Carbon Intensity Curve (24h)</div>
+    <div class="card-header">
+      <div class="card-title">
+        <div class="icon-wrap green"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></div>
+        Carbon Intensity Curve
+      </div>
+      <span class="card-badge">24H</span>
+    </div>
     <div class="chart-wrap">
       <canvas id="chart-carbon"></canvas>
     </div>
@@ -595,32 +1006,49 @@
 
   <!-- Row 5: Controls -->
   <div class="card col-12">
-    <div class="card-title"><span class="icon">🎮</span> Episode Controls</div>
-    <div class="ctrl-row">
-      <select id="task-select" onchange="onTaskChange()">
+    <div class="card-header">
+      <div class="card-title">
+        <div class="icon-wrap purple"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg></div>
+        Episode Controls
+      </div>
+    </div>
+    <div class="controls-grid">
+      <select id="task-select" class="form-select" onchange="onTaskChange()">
         <option value="1">Task 1 — Cost Minimization (Easy)</option>
         <option value="2">Task 2 — Temperature Management (Medium)</option>
         <option value="3">Task 3 — Full Demand Response (Hard)</option>
       </select>
-      <select id="building-select" onchange="onBuildingChange()">
+      <select id="building-select" class="form-select" onchange="onBuildingChange()">
         <option value="0">Building 1 (Primary)</option>
         <option value="1">Building 2</option>
         <option value="2">Building 3</option>
       </select>
-      <button id="btn-reset" class="btn primary" onclick="doReset()">↺ New Episode</button>
-      <button id="btn-live" class="btn" style="background:var(--accent-green);color:#fff;border:none;" onclick="toggleLiveSim()">▶ Start Live Simulation</button>
-      <button class="btn" onclick="doGrade()">📋 Grade Episode</button>
-      <button class="btn" onclick="window.open('/api/replay')">📥 Export Replay</button>
-      <span id="grade-result" style="font-family:var(--font-mono);font-size:0.9rem;color:var(--accent-green)"></span>
+      <button id="btn-reset" class="btn primary" onclick="doReset()">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
+        New Episode
+      </button>
+      <button id="btn-live" class="btn success" onclick="toggleLiveSim()">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+        Start Live Simulation
+      </button>
+      <button class="btn" onclick="doGrade()">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+        Grade Episode
+      </button>
+      <button class="btn" onclick="window.open('/api/replay')">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+        Export Replay
+      </button>
+      <span id="grade-result" class="grade-result"></span>
     </div>
   </div>
 
 </main>
 
 <footer>
-  GridMind-RL &nbsp;·&nbsp; OpenEnv-compliant RL environment for industrial demand response &nbsp;·&nbsp; 
-  <a href="/api/health" target="_blank" style="color:var(--accent-blue);text-decoration:none">API Health</a> &nbsp;·&nbsp;
-  <a href="/api/metrics" target="_blank" style="color:var(--accent-blue);text-decoration:none">Metrics</a>
+  GridMind-RL &nbsp;·&nbsp; OpenEnv-compliant RL environment for industrial demand response &nbsp;·&nbsp;
+  <a href="/api/health" target="_blank">API Health</a> &nbsp;·&nbsp;
+  <a href="/api/metrics" target="_blank">Metrics</a>
 </footer>
 
 <script src="/static/dashboard.js"></script>

env/rewards.go

@@ -31,32 +31,46 @@ func ComputeReward(inp ComputeRewardInput) RewardComponents {
 	rc := RewardComponents{}
 
 	// ── 1. Cost Savings ─────────────────────────────────────────────────────
-	// Shift from pure penalty to a positive baseline: standardizing operations gives positive reward.
-	// Baseline reward of 1.5, minus the relative cost.
+	// Positive baseline minus relative cost: smart agents save money.
 	typicalCost := 4.0
-	rc.CostSavings = 1.5 - (inp.StepCost / typicalCost) * 2.0
+	rc.CostSavings = 1.5 - (inp.StepCost/typicalCost)*2.0
 
 	// ── 2. Temperature Constraint ────────────────────────────────────────────
-	// Only active for task 2 and 3.
+	// Active for task 2 and 3. Gaussian bonus for being near setpoint.
 	if inp.TaskID >= 2 {
 		temp := inp.B.IndoorTemperature
 		rc.TempConstraint = computeTempReward(temp, inp.B.SetpointTemperature, inp.TMin, inp.TMax)
 	}
 
 	// ── 3. Grid Stress Response ──────────────────────────────────────────────
-	// Only active for task 3.
+	// Active for task 3. Rewards proactive grid awareness, not just reactive shedding.
 	if inp.TaskID >= 3 {
 		rc.GridResponse = computeGridResponse(inp.GridStress, inp.ShedFraction)
 	}
 
-	// ── 4. Deadline Penalty ──────────────────────────────────────────────────
-	// Task 1 is cost-only; batch jobs are not part of the objective.
-	if inp.BatchMissed > 0 && inp.TaskID >= 2 {
-		rc.DeadlinePenalty = -float64(inp.BatchMissed) * 1.5
+	// ── 4. Deadline Penalty / Bonus ──────────────────────────────────────────
+	// Task 2+: penalise missed jobs, reward on-track pending jobs.
+	if inp.TaskID >= 2 {
+		if inp.BatchMissed > 0 {
+			rc.DeadlinePenalty = -float64(inp.BatchMissed) * 1.5
+		}
+		// Positive signal: reward for jobs still on track (not missed yet)
+		onTrackJobs := 0
+		for _, job := range inp.B.Jobs {
+			if !job.Completed && !job.MissedDeadline {
+				onTrackJobs++
+			}
+			if job.Completed && !job.MissedDeadline {
+				onTrackJobs++ // completed on time is even better
+			}
+		}
+		if onTrackJobs > 0 && inp.BatchMissed == 0 {
+			rc.DeadlinePenalty += float64(onTrackJobs) * 0.08
+		}
 	}
 
-	// ── 5. Efficiency Bonus (thermal storage arbitrage) ───────────────────────
-	// Reward for charging storage during cheap periods and discharging during expensive ones.
+	// ── 5. Efficiency Bonus (thermal storage utilization) ─────────────────────
+	// Rewards smart storage use: arbitrage + maintaining useful storage levels.
 	if len(inp.PriceCurve) > inp.CurrentStep {
 		rc.EfficiencyBonus = computeArbitrageBonus(
 			inp.ChargeRate,
@@ -65,23 +79,36 @@ func ComputeReward(inp ComputeRewardInput) RewardComponents {
 			inp.CurrentStep,
 		)
 	}
+	// Baseline: reward maintaining a balanced storage level (not empty, not always full)
+	storageLevel := inp.B.ThermalStorageLevel
+	if storageLevel > 0.2 && storageLevel < 0.85 {
+		rc.EfficiencyBonus += 0.15 // good operating range
+	} else if storageLevel <= 0.05 || storageLevel >= 0.98 {
+		rc.EfficiencyBonus -= 0.1 // extremes are wasteful
+	}
 
-	// ── 6. Stability Penalty ─────────────────────────────────────────────────
-	// Penalise rapid oscillation in HVAC setpoint and thermal charge rate.
+	// ── 6. Stability Reward/Penalty ──────────────────────────────────────────
+	// Smooth operation earns a bonus; rapid oscillation earns a penalty.
 	hvacDelta := math.Abs(inp.Act.HVACPowerLevel - inp.PrevHVACLevel)
 	chargeDelta := math.Abs(inp.ChargeRate - inp.PrevChargeRate)
 	oscillation := hvacDelta*0.5 + chargeDelta*0.3
 	if oscillation > 0.3 {
 		rc.StabilityPenalty = -(oscillation - 0.3) * 0.8
+	} else {
+		// Positive reward for smooth, stable control
+		rc.StabilityPenalty = (0.3 - oscillation) * 0.4
 	}
 
 	// ── 7. Carbon Reward ─────────────────────────────────────────────────────
-	// Low-carbon bonus: active for task 3.
+	// Active for task 3. Rewards low-carbon operation.
 	if inp.TaskID >= 3 {
-		// Normalise carbon: iso-ne range roughly 100–700 gCO2/kWh
-		carbonNorm := (inp.B.CarbonIntensity - 100.0) / 600.0
-		// Provide a baseline positive score, reduced by carbon footprint
-		rc.CarbonReward = 0.5 - (inp.EnergyKWh * carbonNorm * 0.3)
+		carbonNorm := math.Max(0, (inp.B.CarbonIntensity-100.0)/600.0)
+		// Baseline bonus, reduced by carbon-heavy consumption
+		rc.CarbonReward = 0.6 - (inp.EnergyKWh * carbonNorm * 0.25)
+		// Extra bonus for operating during genuinely clean grid periods
+		if carbonNorm < 0.3 {
+			rc.CarbonReward += 0.15
+		}
 	}
 
 	// ── Aggregate ────────────────────────────────────────────────────────────
@@ -105,15 +132,29 @@ func computeTempReward(temp, setpoint, tMin, tMax float64) float64 {
 	return -excess * 0.6
 }
 
-// computeGridResponse returns a bonus for shedding load during high grid stress,
-// and a mild penalty for shedding when the grid is fine.
+// computeGridResponse returns a reward for grid-aware behavior:
+// bonus for shedding during stress, baseline for readiness, penalty for waste.
 func computeGridResponse(stress, shedFraction float64) float64 {
 	if stress > 0.7 {
-		// Bonus proportional to shed fraction
-		return shedFraction * stress * 1.5
+		// High stress: large bonus proportional to shed fraction
+		if shedFraction > 0.1 {
+			return shedFraction * stress * 1.5
+		}
+		// High stress but not shedding: penalty
+		return -0.2 * stress
+	}
+	if stress > 0.3 {
+		// Moderate stress: small bonus for readiness, small bonus for proactive shedding
+		if shedFraction > 0.05 {
+			return shedFraction * 0.5 // proactive shedding during moderate stress
+		}
+		return 0.08 // grid-aware readiness bonus
+	}
+	// Low stress: mild penalty for unnecessary shedding, baseline for normal operation
+	if shedFraction > 0.1 {
+		return -shedFraction * 0.3
 	}
-	// Mild penalty for unnecessary shedding (reduces productivity without benefit)
-	return -shedFraction * (0.7 - stress) * 0.3
+	return 0.1 // small positive signal for operating normally under low stress
 }
 
 // computeArbitrageBonus rewards storage use when current price is low vs recent history