diff --git a/AGENTS.md b/AGENTS.md
index 50a1464..8fcb9d1 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,5 +1,5 @@
 # AGENTS.md — Project Memory (auto-maintained)
-Last updated: 2026-09-13 | Sessions logged: 6
+Last updated: 2026-09-13 | Sessions logged: 7
 
 ## Identity
 Hackathon entry: "Noonshift" — a CPO-side, deadline-based EV charging scheduler that shifts flexible charging into low-marginal-carbon hours at daytime long-dwell sites (workplace/destination/depot). Four-person team, lanes in `team-plan.md`.
@@ -25,10 +25,11 @@ Signals (WattTime MOER; CAISO fuel-mix fallback) + tariff table + sessions (dead
 
 ## File Map
 - `noonshift/scheduler.py` — `solve(cars, site, signal, tariff, now)`, `solve_lp()` (+info), `impact()`, `impact_detail()`, `price(slack, *, r, saving_usd, kwh, alpha, urgent)` (§7b: R − α·S/E, ≤ R), `tier_of()`; per-car optional `floor_alpha`, `priority`; constants W_CARBON, ALPHA, FLOOR_EVERY, FIRST_HOUR_KWH (3.5), SPRINT_SLOTS, BUFFER_COST, M_SHORT, M_FLOOR, ASAP_EPS, E_MIN, MIN_KW. Slot 0 carries only its remaining minutes (`dur[0]`); floor checkpoints are times since arrival, pro rata in the slot containing the mark.
-- `noonshift/api.py` — FastAPI app, state dict `S`, `resolve()`, `step()`, `session_impact()`, `meter_history()`, ladder `pick_mode()`, `/demo/*`; `POST /sessions/{id}/urgency {level: now|soon|priority, leave_at?}` (`/boost` = alias of `now`; `URGENCY_MIN` 15 min; `PRIORITY` = floor 0.9 / weight 2.0); `site_rate()` = `site.json: employee_rate_usd_per_kwh` (0 = free); `session_price()`; `car_kw(c)` = min(bay, `session.max_kw`); `need_estimate()` (bay history median → site median); `observe_caps()` (5 min under 80 % of limit → `max_kw` = metered × 1.05, event `cap_observed`); `move_by()` (waiting cars → slackest plugged cars get deadline = now + e_rem/p_max, one per waiting car); `site.json: connectors_asap` bays are always `boost`.
+- `noonshift/api.py` — FastAPI app, state dict `S`, `resolve()`, `step()`, `session_impact()`, `meter_history()`, ladder `pick_mode()`, `/demo/*`; `POST /sessions/{id}/urgency {level: now|soon|priority, leave_at?}` (`/boost` = alias of `now`; `URGENCY_MIN` 15 min; `PRIORITY` = floor 0.9 / weight 2.0); `site_rate()` = `site.json: employee_rate_usd_per_kwh` (0 = free); `session_price()`; `car_kw(c)` = min(bay, `session.max_kw`); `need_estimate()` (bay history median → site median); `observe_caps()` (5 min under 80 % of limit → `max_kw` = metered × 1.05, event `cap_observed`); `move_by()` (waiting cars → slackest plugged cars get deadline = now + e_rem/p_max, one per waiting car); `site.json: connectors_asap` bays are always `boost`; `hourly_ledger()` → `GET /sites/{id}/impact.csv` (24 rows: day,hour,kwh,gco2_per_kwh,kgco2,signal_kind,signal_source); `StatusOut` carries the FM's site card (`contracted_peak_kw`, `package`, `employee_rate_usd_per_kwh`, `driver_share`, `noonshift_share`, `signal_kind/source`, `tariff_name`, `ladder`).
 - `noonshift/sim.py` — `Sim`, `Connector(id, p_max_kw, safe_kw)` (taper from 80% SoC; plug-in starts on `safe_kw`; a `set_limit` expires after `DYN_VALID_MIN`=15 min back to `safe_kw`), `load_sessions()`, `safe_share_kw(site)` = min(p_max, (feed − max building)/n) = 1.833 kW on site-1. `Sim.waiting` (arrivals with no bay; plugged FIFO as bays free); a `done` car with `idle_since` ≥ `MOVE_AFTER_MIN`=10 is unplugged when someone waits (A5); `session.car_kw` = the car's physical limit (sim only; `max_kw` is the planner's belief).
 - `noonshift/models.py` — pydantic REST bodies + WS frames (contract with front-end). `SessionIn` optional `vehicle{model,battery_kwh,max_kw}`, `soc_now`, `target_soc`; `SessionOut` +`kwh_needed`, `need_confidence`, `max_kw`, `urgency`; `ConnectorMeter` +`idle_min`, `need_confidence`, `p_max_kw`, `cap_observed`, `asap`, `move_by`, `urgency`; `MeterMsg.waiting`; `StatusOut` +`safe_share_kw`, `waiting`, `connectors_asap`; `EventMsg.name` +`urgency|done|cap_observed|move_by`. All additive.
-- `web/src/context/GlobalStateContext.jsx` — ops app state: opens `/ws`, polls `/sites/site-1/impact|status`, derives the page shape (siteDetail/connectors Gantt on a 06–22 axis, sessions, alerts from events, chargersList); `triggerEvent()` maps demo buttons → `/demo/*`, prioritize → `/sessions/{id}/boost`.
+- `web/src/context/GlobalStateContext.jsx` — ops app state: opens `/ws`, polls `/sites/site-1/impact|status` + `/grid/signal`, accumulates hourly kWh from meter frames; `data.status` (mode, modeCopy, ladder, safeShareKw, waiting, connectorsAsap, contractedPeakKw, package, rateR, α/β, signalKind/Source, tariffName), `portfolio`, `siteDetail`, `chargersList`, `alerts`, `ledgerUrl`; actions `setUrgency(sessionId, level, leaveAt)` → `/sessions/{id}/urgency`, `triggerEvent()` → `/demo/*`. `web/src/lib/ui.js` — `hhmm`, `MODE_COPY` (rung copy). `web/src/components/UrgencyControl.jsx` — Leaving now / soon (time input) / Prioritise with inline confirm.
+- `web/src/pages/` — `DashboardOverview` (load vs contracted peak, CO2 first, renewable ring), `OpsDashboard` (Gantt marks urgent/asap/move-by + side panel), `SessionsView` (urgency/need/idle, High-risk highlight), `ChargersView` (plan cap + "meter" tag, static share, ASAP filter), `SchedulesView` (planned vs metered kW/h with MOER shading), `ImpactView` (KPIs, hourly bars by MOER bucket, EPA equivalents, Export ledger CSV), `TariffsView` (§7b split, package, TOU from signal), `AlertsView`. No pause/reoptimize buttons (never pause a car; the planner re-solves itself).
 - `.docs/ROADMAP.md` — plain-language plan (§0 status, §1 driver inputs, §3 emergency rules, §4 price flip, §5 evidence runs, §7 CI, §8 order). `.github/workflows/ci.yml` — backend job + web/wattwise matrix.
 - `wattwise/src/api/noonshift.ts` — driver app client + hand-copied types; `connectWs()`, `onSimDay()` (ready-by is built on the **sim** day and must be > sim now).
 - `wattwise/src/context/WattwiseContext.tsx` — driver state: `POST /sessions` on the highest free connector (replayed sessions use c01–c36), `/live` polled every 2 s for the receipt, meter/plan frames for kW/kWh/window; unplug/day_reset moves the session to History.
@@ -81,6 +82,7 @@ Signals (WattTime MOER; CAISO fuel-mix fallback) + tariff table + sessions (dead
 - 2026-09-12 — Session data = ACN 2019-04-09 re-dated onto the 2026 signal day; kwh_needed = delivered energy, stated departure = the driver's own input (early leavers kept).
 
 ## Changelog
+2026-09-13 | WP5 facilities-manager ops dashboard | api.py (`hourly_ledger`, `/impact.csv`, StatusOut/ImpactOut fields), models.py, web/src/{context,components/UrgencyControl,lib/ui,pages/*}, smoke.py | CO2 leads $ everywhere; every number is a live field (no Math.random); urgency is the only driver-side control the FM has; mobile = responsive layout only, not checked by eye
 2026-09-13 | WP4 evidence scripts | scripts/prove.py, fetch_data.py, fit.py, replay_days.py, scheduler.impact(health=) | timer baseline is the judge's number (−56 % CO2 over a dumb timer); constrained site shows the carbon-vs-tariff conflict honestly; forecast flag wired, unverified without creds
 2026-09-13 | WP3 cars, needs, queues | models.py, sim.py, api.py, data/site.json, tests/test_day.py, scripts/smoke.py | vehicle form → per-car cap + kWh from SoC; observation guard believes the meter; connectors_asap c41/c42; done event + idle_min; Sim.waiting + move-by tightening; a notified done car moves within 10 min when someone waits
 2026-09-13 | WP2 fail-safe an inspector accepts: static share under everything | sim.py, api.py, scheduler.py, ocpp_gateway.py, models.py, data/site.json, tests/test_day.py | `full` rung, `apply_limits` fallback and the linprog fallback all return `safe_share_kw`; kill-the-loop test: 6 h with no step() never exceeds headroom and after 15 min never exceeds n × share; `StatusOut.safe_share_kw`
diff --git a/data/site.json b/data/site.json
index 07429ec..0ab2c0b 100644
--- a/data/site.json
+++ b/data/site.json
@@ -1 +1 @@
-{"id": "site-1", "feed_kw": 150, "block_kw": 100, "connectors": ["c01", "c02", "c03", "c04", "c05", "c06", "c07", "c08", "c09", "c10", "c11", "c12", "c13", "c14", "c15", "c16", "c17", "c18", "c19", "c20", "c21", "c22", "c23", "c24", "c25", "c26", "c27", "c28", "c29", "c30", "c31", "c32", "c33", "c34", "c35", "c36", "c37", "c38", "c39", "c40", "c41", "c42", "c43", "c44", "c45", "c46", "c47", "c48", "c49", "c50", "c51", "c52", "c53", "c54", "c55", "c56", "c57", "c58", "c59", "c60"], "p_max_kw": 7.0, "building_load_kw": [20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 21.7, 23.3, 25.0, 26.7, 28.3, 30.0, 31.7, 33.3, 35.0, 36.7, 38.3, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 38.3, 36.7, 35.0, 33.3, 31.7, 30.0, 28.3, 26.7, 25.0, 23.3, 21.7, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0], "employee_rate_usd_per_kwh": 0.25, "driver_share": 0.5, "noonshift_share": 0.2, "safe_share_kw": 1.833, "connectors_asap": ["c41", "c42"]}
\ No newline at end of file
+{"id": "site-1", "feed_kw": 150, "block_kw": 100, "connectors": ["c01", "c02", "c03", "c04", "c05", "c06", "c07", "c08", "c09", "c10", "c11", "c12", "c13", "c14", "c15", "c16", "c17", "c18", "c19", "c20", "c21", "c22", "c23", "c24", "c25", "c26", "c27", "c28", "c29", "c30", "c31", "c32", "c33", "c34", "c35", "c36", "c37", "c38", "c39", "c40", "c41", "c42", "c43", "c44", "c45", "c46", "c47", "c48", "c49", "c50", "c51", "c52", "c53", "c54", "c55", "c56", "c57", "c58", "c59", "c60"], "p_max_kw": 7.0, "building_load_kw": [20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 21.7, 23.3, 25.0, 26.7, 28.3, 30.0, 31.7, 33.3, 35.0, 36.7, 38.3, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 38.3, 36.7, 35.0, 33.3, 31.7, 30.0, 28.3, 26.7, 25.0, 23.3, 21.7, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0], "employee_rate_usd_per_kwh": 0.25, "driver_share": 0.5, "noonshift_share": 0.2, "safe_share_kw": 1.833, "connectors_asap": ["c41", "c42"], "package": "pilot", "contracted_peak_kw": 150}
\ No newline at end of file
diff --git a/docs/openapi.json b/docs/openapi.json
index 627c939..58dc647 100644
--- a/docs/openapi.json
+++ b/docs/openapi.json
@@ -301,6 +301,80 @@
     }
    }
   },
+  "/sites/{site_id}/impact.csv": {
+   "get": {
+    "summary": "Site Impact Csv",
+    "description": "The audit-ready ledger (solutions.md \u00a712): LCFS takes the kWh column today; an hourly-EAC registry takes the rest.",
+    "operationId": "site_impact_csv_sites__site_id__impact_csv_get",
+    "parameters": [
+     {
+      "name": "site_id",
+      "in": "path",
+      "required": true,
+      "schema": {
+       "type": "string",
+       "title": "Site Id"
+      }
+     },
+     {
+      "name": "from",
+      "in": "query",
+      "required": false,
+      "schema": {
+       "anyOf": [
+        {
+         "type": "string",
+         "format": "date-time"
+        },
+        {
+         "type": "null"
+        }
+       ],
+       "title": "From"
+      }
+     },
+     {
+      "name": "to",
+      "in": "query",
+      "required": false,
+      "schema": {
+       "anyOf": [
+        {
+         "type": "string",
+         "format": "date-time"
+        },
+        {
+         "type": "null"
+        }
+       ],
+       "title": "To"
+      }
+     }
+    ],
+    "responses": {
+     "200": {
+      "description": "Successful Response",
+      "content": {
+       "text/plain": {
+        "schema": {
+         "type": "string"
+        }
+       }
+      }
+     },
+     "422": {
+      "description": "Validation Error",
+      "content": {
+       "application/json": {
+        "schema": {
+         "$ref": "#/components/schemas/HTTPValidationError"
+        }
+       }
+      }
+     }
+    }
+   }
+  },
   "/sites/{site_id}/status": {
    "get": {
     "summary": "Site Status",
@@ -717,6 +791,22 @@
       "title": "Baseline Peak Kw",
       "default": 0.0
      },
+     "renewable_share": {
+      "type": "number",
+      "title": "Renewable Share",
+      "default": 0.0
+     },
+     "health_usd": {
+      "anyOf": [
+       {
+        "type": "number"
+       },
+       {
+        "type": "null"
+       }
+      ],
+      "title": "Health Usd"
+     },
      "note": {
       "type": "string",
       "title": "Note",
@@ -1264,6 +1354,91 @@
       "type": "array",
       "title": "Connectors Asap",
       "default": []
+     },
+     "n_connectors": {
+      "type": "integer",
+      "title": "N Connectors",
+      "default": 0
+     },
+     "p_max_kw": {
+      "type": "number",
+      "title": "P Max Kw",
+      "default": 0.0
+     },
+     "contracted_peak_kw": {
+      "type": "number",
+      "title": "Contracted Peak Kw",
+      "default": 0.0
+     },
+     "package": {
+      "type": "string",
+      "enum": [
+       "capacity",
+       "clean-hours",
+       "pilot"
+      ],
+      "title": "Package",
+      "default": "pilot"
+     },
+     "employee_rate_usd_per_kwh": {
+      "type": "number",
+      "title": "Employee Rate Usd Per Kwh",
+      "default": 0.0
+     },
+     "driver_share": {
+      "type": "number",
+      "title": "Driver Share",
+      "default": 0.5
+     },
+     "noonshift_share": {
+      "type": "number",
+      "title": "Noonshift Share",
+      "default": 0.2
+     },
+     "signal_kind": {
+      "anyOf": [
+       {
+        "type": "string",
+        "enum": [
+         "marginal",
+         "average"
+        ]
+       },
+       {
+        "type": "null"
+       }
+      ],
+      "title": "Signal Kind"
+     },
+     "signal_source": {
+      "anyOf": [
+       {
+        "type": "string"
+       },
+       {
+        "type": "null"
+       }
+      ],
+      "title": "Signal Source"
+     },
+     "tariff_name": {
+      "anyOf": [
+       {
+        "type": "string"
+       },
+       {
+        "type": "null"
+       }
+      ],
+      "title": "Tariff Name"
+     },
+     "ladder": {
+      "additionalProperties": {
+       "type": "boolean"
+      },
+      "type": "object",
+      "title": "Ladder",
+      "default": {}
      }
     },
     "type": "object",
diff --git a/noonshift/api.py b/noonshift/api.py
index 6877b6e..c9303c0 100644
--- a/noonshift/api.py
+++ b/noonshift/api.py
@@ -12,6 +12,7 @@
 
 from fastapi import FastAPI, HTTPException, Query, WebSocket, WebSocketDisconnect
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import PlainTextResponse
 from pydantic import TypeAdapter
 
 from . import db, scheduler, seed
@@ -168,7 +169,8 @@ def session_impact(h, remaining=()):
     series = metered + list(remaining)[:288 - full]
     signal = {"moer": aligned(S["signal"]["moer"], h["start"]), "kind": S["signal"]["kind"]}
     tariff = dict(S["tariff"], price_per_kwh=aligned(S["tariff"]["price_per_kwh"], h["start"]))
-    return scheduler.impact({"s": series}, {"s": h["baseline"]}, signal, tariff)
+    signal["health_damage"] = aligned(S["signal"]["health_damage"], h["start"]) if S["signal"].get("health_damage") else None
+    return scheduler.impact({"s": series}, {"s": h["baseline"]}, signal, tariff, health=bool(S["signal"].get("health_damage")))
 
 
 def meter_history():
@@ -448,10 +450,51 @@ def site_impact(site_id: str, from_: datetime | None = Query(None, alias="from")
     ss = [s for s in sim.sessions.values() if lo <= s["arrival"] < hi and s["status"] != "pending"]
     imps = [S["impact"].get(s["id"], {"saved_usd": 0.0, "saved_kgco2": 0.0}) for s in ss]
     actual, base = site_peaks()
+    ledger = hourly_ledger(lo, hi)
+    kwh = sum(r["kwh"] for r in ledger)
     return ImpactOut(from_=lo, to=hi, sessions=len(ss), kwh=round(sum(s["kwh_delivered"] for s in ss), 2),
                      saved_usd=round(sum(i["saved_usd"] for i in imps), 2),
                      saved_kgco2=round(sum(i["saved_kgco2"] for i in imps), 2),
-                     peak_kw=actual, baseline_peak_kw=base)
+                     peak_kw=actual, baseline_peak_kw=base,
+                     renewable_share=round(sum(r["kwh"] for r in ledger if r["gco2_per_kwh"] == 0) / kwh, 4) if kwh else 0.0,
+                     health_usd=None if S["signal"].get("health_damage") is None else round(sum(
+                         S["impact"].get(s["id"], {}).get("health_usd") or 0.0 for s in ss), 2))
+
+
+def hourly_ledger(lo, hi):
+    """solutions.md §12: the hourly record behind every carbon claim, from metered per-minute kW and the day's signal.
+    Columns: hour, kWh, gCO2/kWh (hourly mean of the signal), kgCO2 (per-slot, exact), signal kind and source."""
+    moer, kind, src = S["signal"]["moer"], S["signal"]["kind"], S["signal"].get("source", "")
+    kwh = [0.0] * 288
+    for h in S.get("hist", {}).values():
+        if not (lo <= h["start"] < hi):
+            continue
+        k0 = slot_of(h["start"])
+        for i, kw in enumerate(h["kw_min"]):
+            k = k0 + i // 5
+            if k < 288:
+                kwh[k] += kw / 60
+    out = []
+    for hour in range(24):
+        e = sum(kwh[hour * 12:(hour + 1) * 12])
+        kg = sum(kwh[k] * moer[k] / 1000 for k in range(hour * 12, (hour + 1) * 12))
+        out.append({"hour": hour, "kwh": round(e, 3), "gco2_per_kwh": round(sum(moer[hour * 12:(hour + 1) * 12]) / 12, 1),
+                    "kgco2": round(kg, 4), "signal_kind": kind, "signal_source": src})
+    return out
+
+
+@app.get("/sites/{site_id}/impact.csv", response_class=PlainTextResponse)
+def site_impact_csv(site_id: str, from_: datetime | None = Query(None, alias="from"), to: datetime | None = None):
+    """The audit-ready ledger (solutions.md §12): LCFS takes the kWh column today; an hourly-EAC registry takes the rest."""
+    check_site(site_id)
+    sim = S["sim"]
+    lo, hi = from_ or sim.day_end - timedelta(days=1), to or sim.day_end
+    rows = ["day,hour,kwh,gco2_per_kwh,kgco2,signal_kind,signal_source"]
+    day = lo.date().isoformat()
+    for r in hourly_ledger(lo, hi):
+        rows.append(f"{day},{r['hour']:02d},{r['kwh']:.3f},{r['gco2_per_kwh']},{r['kgco2']:.4f},{r['signal_kind']},{r['signal_source']}")
+    return PlainTextResponse("\n".join(rows) + "\n", media_type="text/csv",
+                             headers={"Content-Disposition": f'attachment; filename="noonshift-{site_id}-{day}.csv"'})
 
 
 def site_peaks():
@@ -476,11 +519,16 @@ def site_peaks():
 @app.get("/sites/{site_id}/status", response_model=StatusOut)
 def site_status(site_id: str):
     check_site(site_id)
+    site = S["site"]
     return StatusOut(mode=S["mode"], last_solve_at=S["last_solve_at"],
                      connectors_active=sum(c.status == "charging" for c in S["sim"].active()),
-                     feed_kw=S["site"]["feed_kw"], block_kw=S["site"]["block_kw"], sim_time=S["sim"].now,
-                     safe_share_kw=safe_share_kw(S["site"]), waiting=len(S["sim"].waiting),
-                     connectors_asap=S["site"].get("connectors_asap", []))
+                     feed_kw=site["feed_kw"], block_kw=site["block_kw"], sim_time=S["sim"].now,
+                     safe_share_kw=safe_share_kw(site), waiting=len(S["sim"].waiting),
+                     connectors_asap=site.get("connectors_asap", []), n_connectors=len(site["connectors"]), p_max_kw=site["p_max_kw"],
+                     contracted_peak_kw=site.get("contracted_peak_kw") or site["feed_kw"], package=site.get("package", "pilot"),
+                     employee_rate_usd_per_kwh=site_rate(), driver_share=site.get("driver_share", 0.5),
+                     noonshift_share=site.get("noonshift_share", 0.2), signal_kind=S["signal"].get("kind"),
+                     signal_source=S["signal"].get("source"), tariff_name=S["tariff"].get("name"), ladder=S["ladder"])
 
 
 @app.get("/price", response_model=PricePreview)
diff --git a/noonshift/models.py b/noonshift/models.py
index 69a7ecb..1606d11 100644
--- a/noonshift/models.py
+++ b/noonshift/models.py
@@ -81,6 +81,8 @@ class ImpactOut(BaseModel):
     saved_kgco2: float
     peak_kw: float = 0.0  # highest metered site kW (EV + building) so far today
     baseline_peak_kw: float = 0.0  # same, had every car charged at full power from plug-in
+    renewable_share: float = 0.0  # share of delivered kWh in slots where the marginal source was renewable (MOER = 0)
+    health_usd: float | None = None  # metrics.md §4: avoided health damage, when the signal carries an index
     note: str = "estimate vs charge-immediately baseline"
 
 
@@ -94,6 +96,17 @@ class StatusOut(BaseModel):
     safe_share_kw: float = 0.0  # per-connector static share every charger reverts to when the controller is gone
     waiting: int = 0  # cars that arrived with no free bay
     connectors_asap: list[str] = []  # fleet bays that are never deferred
+    n_connectors: int = 0
+    p_max_kw: float = 0.0
+    contracted_peak_kw: float = 0.0  # the building's contracted demand; default = feed_kw (Assumption A2)
+    package: Literal["capacity", "clean-hours", "pilot"] = "pilot"  # business.md §9b (Assumption A3)
+    employee_rate_usd_per_kwh: float = 0.0  # R
+    driver_share: float = 0.5  # alpha
+    noonshift_share: float = 0.2  # beta
+    signal_kind: Literal["marginal", "average"] | None = None
+    signal_source: str | None = None
+    tariff_name: str | None = None
+    ladder: dict[str, bool] = {}
 
 
 class PriceTier(BaseModel):
diff --git a/scripts/smoke.py b/scripts/smoke.py
index 1a1d39d..176548f 100644
--- a/scripts/smoke.py
+++ b/scripts/smoke.py
@@ -123,7 +123,18 @@ async def pump():
         print(f"[ops]    ladder dropped to {st['mode']} and restored to live")
 
         imp = http("GET", "/sites/site-1/impact")
-        print(f"[ops]    /impact sessions={imp['sessions']} kwh={imp['kwh']} saved=${imp['saved_usd']} {imp['saved_kgco2']} kg  peak {imp['peak_kw']} kW vs baseline {imp['baseline_peak_kw']} kW")
+        assert 0 <= imp["renewable_share"] <= 1 and "health_usd" in imp
+        print(f"[ops]    /impact sessions={imp['sessions']} kwh={imp['kwh']} saved=${imp['saved_usd']} {imp['saved_kgco2']} kg  peak {imp['peak_kw']} kW vs baseline {imp['baseline_peak_kw']} kW  renewable-hour share {100 * imp['renewable_share']:.0f}%")
+
+        # 7. the facilities manager's fields and the audit ledger (WP5)
+        st = http("GET", "/sites/site-1/status")
+        assert st["contracted_peak_kw"] > 0 and st["package"] in ("capacity", "clean-hours", "pilot") and st["n_connectors"] == 60 and "ladder" in st
+        with urllib.request.urlopen(API + "/sites/site-1/impact.csv") as r:
+            csv_text, ctype = r.read().decode(), r.headers.get("Content-Type", "")
+        lines = csv_text.strip().splitlines()
+        assert ctype.startswith("text/csv") and lines[0] == "day,hour,kwh,gco2_per_kwh,kgco2,signal_kind,signal_source" and len(lines) == 25, (ctype, lines[:2])
+        assert sum(float(l.split(",")[2]) for l in lines[1:]) > 0, "the ledger carries today's metered kWh"
+        print(f"[ops]    /status package={st['package']} contracted peak {st['contracted_peak_kw']} kW R=${st['employee_rate_usd_per_kwh']}/kWh signal={st['signal_kind']}; /impact.csv {len(lines) - 1} hourly rows")
         if imp["baseline_peak_kw"] < imp["peak_kw"]:  # possible early in the day (sprints); not a failure, just say so
             print("[ops]    note: managed peak above charge-now peak right now")
         task.cancel()
diff --git a/tests/data/site.json b/tests/data/site.json
index 07429ec..0ab2c0b 100644
--- a/tests/data/site.json
+++ b/tests/data/site.json
@@ -1 +1 @@
-{"id": "site-1", "feed_kw": 150, "block_kw": 100, "connectors": ["c01", "c02", "c03", "c04", "c05", "c06", "c07", "c08", "c09", "c10", "c11", "c12", "c13", "c14", "c15", "c16", "c17", "c18", "c19", "c20", "c21", "c22", "c23", "c24", "c25", "c26", "c27", "c28", "c29", "c30", "c31", "c32", "c33", "c34", "c35", "c36", "c37", "c38", "c39", "c40", "c41", "c42", "c43", "c44", "c45", "c46", "c47", "c48", "c49", "c50", "c51", "c52", "c53", "c54", "c55", "c56", "c57", "c58", "c59", "c60"], "p_max_kw": 7.0, "building_load_kw": [20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 21.7, 23.3, 25.0, 26.7, 28.3, 30.0, 31.7, 33.3, 35.0, 36.7, 38.3, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 38.3, 36.7, 35.0, 33.3, 31.7, 30.0, 28.3, 26.7, 25.0, 23.3, 21.7, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0], "employee_rate_usd_per_kwh": 0.25, "driver_share": 0.5, "noonshift_share": 0.2, "safe_share_kw": 1.833, "connectors_asap": ["c41", "c42"]}
\ No newline at end of file
+{"id": "site-1", "feed_kw": 150, "block_kw": 100, "connectors": ["c01", "c02", "c03", "c04", "c05", "c06", "c07", "c08", "c09", "c10", "c11", "c12", "c13", "c14", "c15", "c16", "c17", "c18", "c19", "c20", "c21", "c22", "c23", "c24", "c25", "c26", "c27", "c28", "c29", "c30", "c31", "c32", "c33", "c34", "c35", "c36", "c37", "c38", "c39", "c40", "c41", "c42", "c43", "c44", "c45", "c46", "c47", "c48", "c49", "c50", "c51", "c52", "c53", "c54", "c55", "c56", "c57", "c58", "c59", "c60"], "p_max_kw": 7.0, "building_load_kw": [20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 21.7, 23.3, 25.0, 26.7, 28.3, 30.0, 31.7, 33.3, 35.0, 36.7, 38.3, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 40.0, 38.3, 36.7, 35.0, 33.3, 31.7, 30.0, 28.3, 26.7, 25.0, 23.3, 21.7, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0, 20.0], "employee_rate_usd_per_kwh": 0.25, "driver_share": 0.5, "noonshift_share": 0.2, "safe_share_kw": 1.833, "connectors_asap": ["c41", "c42"], "package": "pilot", "contracted_peak_kw": 150}
\ No newline at end of file
diff --git a/web/src/components/AppShell.jsx b/web/src/components/AppShell.jsx
index 3a1868b..a0cda69 100644
--- a/web/src/components/AppShell.jsx
+++ b/web/src/components/AppShell.jsx
@@ -1,74 +1,80 @@
 import { NavLink, Outlet } from 'react-router-dom';
 import { useGlobalState } from '../context/GlobalStateContext';
+import { MODE_COPY } from '../lib/ui';
+
+const NAV = [
+  { path: '/ops/overview', label: 'Overview' },
+  { path: '/ops/sites', label: 'Live charging' },
+  { path: '/ops/sessions', label: 'Sessions' },
+  { path: '/ops/chargers', label: 'Chargers' },
+  { path: '/ops/schedules', label: 'Plan' },
+  { path: '/ops/impact', label: 'Energy & Impact' },
+  { path: '/ops/alerts', label: 'Alerts' },
+  { path: '/ops/tariffs', label: 'Tariffs & Package' },
+];
+
+// The rungs below the current one that are switched off (from /sites/{id}/status.ladder), for the "why" line.
+const downRungs = (ladder) => Object.entries(ladder).filter(([, ok]) => !ok).map(([r]) => r);
 
 export default function AppShell() {
   const { data, triggerEvent } = useGlobalState();
-
-  const navItems = [
-    { path: '/ops/overview', label: 'Overview' },
-    { path: '/ops/sites', label: 'Sites' },
-    { path: '/ops/sessions', label: 'Sessions' },
-    { path: '/ops/chargers', label: 'Chargers' },
-    { path: '/ops/schedules', label: 'Schedules' },
-    { path: '/ops/impact', label: 'Energy & Impact' },
-    { path: '/ops/alerts', label: 'Alerts' },
-    { path: '/ops/tariffs', label: 'Tariffs' },
-  ];
+  const { status } = data;
 
   return (
-    <div className="min-h-screen flex text-ink font-sans bg-bg relative overflow-hidden">
-      {/* Persistent B2B Left Rail */}
-      <nav className="w-56 border-r border-border shrink-0 flex flex-col sticky top-0 h-screen bg-surface">
-        <div className="p-6 font-semibold text-lg tracking-tight border-b border-border">Noonshift Ops</div>
-        
-        <div className="flex flex-col flex-1 overflow-y-auto py-4">
-          {navItems.map(item => (
-            <NavLink 
+    <div className="min-h-screen flex flex-col md:flex-row text-ink font-sans bg-bg relative">
+      {/* Left rail on desktop, top bar on a phone */}
+      <nav className="md:w-56 border-b md:border-b-0 md:border-r border-border shrink-0 flex flex-col md:sticky md:top-0 md:h-screen bg-surface">
+        <div className="px-4 py-3 md:p-6 font-semibold text-lg tracking-tight md:border-b border-border">Noonshift Ops</div>
+
+        <div className="flex md:flex-col md:flex-1 overflow-x-auto md:overflow-y-auto md:py-4 border-t md:border-t-0 border-border">
+          {NAV.map((item) => (
+            <NavLink
               key={item.path}
-              to={item.path} 
-              className={({ isActive }) => `px-6 py-2 transition-colors border-l-2 text-sm ${isActive ? 'text-ink border-grid-blue bg-bg' : 'text-ink-muted border-transparent hover:text-ink hover:bg-bg/50'}`}
+              to={item.path}
+              className={({ isActive }) => `px-4 md:px-6 py-2 whitespace-nowrap transition-colors border-b-2 md:border-b-0 md:border-l-2 text-sm ${isActive ? 'text-ink border-grid-blue md:bg-bg' : 'text-ink-muted border-transparent hover:text-ink hover:bg-bg/50'}`}
             >
               {item.label}
             </NavLink>
           ))}
-          
-          <div className="px-6 mt-8 mb-2 text-[10px] uppercase font-medium text-ink-muted tracking-wider">Settings</div>
-          <NavLink to="/ops/settings" className="px-6 py-2 text-sm text-ink-muted hover:text-ink transition-colors">Settings</NavLink>
         </div>
 
         <div className="border-t border-border p-4 flex flex-col gap-4 bg-bg text-sm">
-          <div className="flex items-center gap-2">
-            <div className={`w-2 h-2 rounded-full ${data.systemStatus === 'Optimal' ? 'bg-saved' : 'bg-solar'}`}></div>
-            <span className="text-xs text-ink-muted">System {data.systemStatus} · mode {data.siteDetail.mode}{data.simTime ? ` · sim ${new Date(data.simTime).toTimeString().slice(0, 5)}` : ""}</span>
+          <div className="flex items-start gap-2">
+            <div className={`w-2 h-2 mt-1 rounded-full shrink-0 ${data.systemStatus === 'Optimal' ? 'bg-saved' : 'bg-solar'}`}></div>
+            <span className="text-xs text-ink-muted">
+              {data.systemStatus} · mode <span className="text-ink">{status.mode}</span>
+              {data.simTime ? ` · sim ${new Date(data.simTime).toTimeString().slice(0, 5)}` : ''}
+              {status.waiting > 0 ? ` · ${status.waiting} waiting` : ''}
+            </span>
           </div>
 
           <div className="flex flex-col gap-2">
-            <div className="text-[10px] uppercase font-medium text-ink-muted tracking-wider mb-1">Demo Mode</div>
-            <button onClick={() => triggerEvent('demo_driver_early')} className="text-left text-xs border border-border p-1.5 hover:border-ink transition-colors">Driver leaves early</button>
-            <button onClick={() => triggerEvent('demo_late_surge')} className="text-left text-xs border border-border p-1.5 hover:border-ink transition-colors">20 late arrivals</button>
-            <button onClick={() => triggerEvent('demo_grid_fail')} className="text-left text-xs border border-border p-1.5 hover:border-ink transition-colors">Grid signal unavailable</button>
-            <button onClick={() => triggerEvent('demo_grid_restore')} className="text-left text-xs border border-border p-1.5 hover:border-ink transition-colors">Restore grid signal</button>
+            <div className="text-[10px] uppercase font-medium text-ink-muted tracking-wider mb-1">Demo</div>
+            <div className="grid grid-cols-2 md:grid-cols-1 gap-2">
+              <button onClick={() => triggerEvent('demo_driver_early')} className="text-left text-xs border border-border p-1.5 hover:border-ink transition-colors">Driver leaves early</button>
+              <button onClick={() => triggerEvent('demo_late_surge')} className="text-left text-xs border border-border p-1.5 hover:border-ink transition-colors">20 late arrivals</button>
+              <button onClick={() => triggerEvent('demo_grid_fail')} className="text-left text-xs border border-border p-1.5 hover:border-ink transition-colors">Grid signal unavailable</button>
+              <button onClick={() => triggerEvent('demo_grid_restore')} className="text-left text-xs border border-border p-1.5 hover:border-ink transition-colors">Restore grid signal</button>
+            </div>
           </div>
         </div>
       </nav>
 
-      {/* Main Content Area */}
-      <main className="flex-1 flex flex-col relative min-w-0 overflow-y-auto max-h-screen">
-        {/* Fail-safe ladder banner: live -> cached -> tariff -> deadline -> full (from /sites/{id}/status.mode) */}
-        {data.siteDetail.mode !== 'live' && (
-          <div className="bg-solar/10 border-b border-solar/30 text-solar text-xs px-6 py-2 flex items-center gap-3">
+      {/* Main content */}
+      <main className="flex-1 flex flex-col relative min-w-0 md:overflow-y-auto md:max-h-screen">
+        {/* Fail-safe ladder banner: live -> cached -> tariff -> deadline -> full (from /sites/{id}/status) */}
+        {status.mode !== 'live' && (
+          <div className="bg-solar/10 border-b border-solar/30 text-solar text-xs px-4 md:px-6 py-2 flex flex-wrap items-center gap-x-3 gap-y-1">
             <span className="w-2 h-2 rounded-full bg-solar animate-pulse"></span>
-            <span className="font-medium uppercase tracking-wider">Fail-safe mode: {data.siteDetail.mode}</span>
-            <span className="text-ink-muted">
-              {data.siteDetail.mode === 'cached' && 'Live carbon signal lost; scheduling on the cached forecast (≤ 6 h).'}
-              {data.siteDetail.mode === 'tariff' && 'No carbon signal; scheduling on the tariff only.'}
-              {data.siteDetail.mode === 'deadline' && 'No signal or tariff; deadlines only.'}
-              {data.siteDetail.mode === 'full' && 'Backend degraded; every charger at full power.'}
-            </span>
+            <span className="font-medium uppercase tracking-wider">Fail-safe: {status.mode}</span>
+            <span className="text-ink-muted">{MODE_COPY[status.mode]}</span>
+            {downRungs(status.ladder).length > 0 && <span className="text-ink-muted">Rungs down: {downRungs(status.ladder).join(', ')}.</span>}
           </div>
         )}
         {!data.connected && (
-          <div className="bg-danger/10 border-b border-danger/30 text-danger text-xs px-6 py-2">Not connected to the Noonshift backend (ws /ws). Showing last known state.</div>
+          <div className="bg-danger/10 border-b border-danger/30 text-danger text-xs px-4 md:px-6 py-2">
+            Backend offline — run <code className="mono">python -m uvicorn noonshift.api:app --port 8000</code> from the repo root, then reload.
+          </div>
         )}
         <Outlet />
       </main>
diff --git a/web/src/components/UrgencyControl.jsx b/web/src/components/UrgencyControl.jsx
new file mode 100644
index 0000000..08018f7
--- /dev/null
+++ b/web/src/components/UrgencyControl.jsx
@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { useGlobalState } from '../context/GlobalStateContext';
+
+// business.md §4b: three bands, one price. The operator sets it on a driver's behalf ("she called reception").
+const BANDS = [
+  { level: 'now', label: 'Leaving now', copy: 'Full power from the next slot until the car unplugs. Pays today\'s rate.' },
+  { level: 'soon', label: 'Leaving soon', copy: 'New ready-by time; the plan moves into the cleanest slots before it. Under 15 min = leaving now.' },
+  { level: 'priority', label: 'Prioritise', copy: 'Keeps the ready-by; holds 90 % of pro-rata and gives way last if the site is tight.' },
+];
+
+export default function UrgencyControl({ sessionId, simTime, current, compact = false }) {
+  const { setUrgency } = useGlobalState();
+  const [pick, setPick] = useState(null); // band awaiting confirmation
+  const [leaveAt, setLeaveAt] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  const defaultLeave = () => {
+    const t = simTime ? new Date(simTime) : new Date();
+    t.setHours(t.getHours() + 1, 0, 0, 0);
+    return t.toTimeString().slice(0, 5);
+  };
+
+  const confirm = async () => {
+    setBusy(true);
+    let iso = null;
+    if (pick.level === 'soon') {
+      const base = simTime ? new Date(simTime) : new Date();
+      const [h, m] = (leaveAt || defaultLeave()).split(':').map(Number);
+      base.setHours(h, m, 0, 0);
+      iso = `${base.getFullYear()}-${String(base.getMonth() + 1).padStart(2, '0')}-${String(base.getDate()).padStart(2, '0')}T${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:00`;
+    }
+    await setUrgency(sessionId, pick.level, iso);
+    setBusy(false);
+    setPick(null);
+  };
+
+  if (current) {
+    return <span className="inline-flex items-center px-1.5 py-0.5 text-[10px] border bg-solar/10 text-solar border-solar/20">{current === 'now' ? 'leaving now' : current}</span>;
+  }
+
+  if (pick) {
+    return (
+      <div className={`flex flex-col gap-2 border border-border bg-bg p-2 text-left ${compact ? 'text-[11px]' : 'text-xs'}`}>
+        <span className="font-medium text-ink">{pick.label}</span>
+        <span className="text-ink-muted">{pick.copy}</span>
+        {pick.level === 'soon' && (
+          <label className="flex items-center gap-2">
+            <span className="text-ink-muted">Leaves at</span>
+            <input id={`leave-at-${sessionId}`} type="time" value={leaveAt || defaultLeave()} onChange={(e) => setLeaveAt(e.target.value)} className="border border-border bg-surface px-1 py-0.5 mono" />
+          </label>
+        )}
+        <div className="flex gap-2">
+          <button disabled={busy} onClick={confirm} className="px-2 py-1 bg-ink text-surface disabled:opacity-50">{busy ? 'Sending…' : 'Confirm'}</button>
+          <button disabled={busy} onClick={() => setPick(null)} className="px-2 py-1 border border-border">Cancel</button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-wrap gap-1 ${compact ? '' : 'justify-end'}`}>
+      {BANDS.map((b) => (
+        <button key={b.level} onClick={() => setPick(b)} title={b.copy} className="px-1.5 py-0.5 text-[10px] border border-border hover:border-ink transition-colors">
+          {b.label}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/web/src/context/GlobalStateContext.jsx b/web/src/context/GlobalStateContext.jsx
index c635027..7421fe1 100644
--- a/web/src/context/GlobalStateContext.jsx
+++ b/web/src/context/GlobalStateContext.jsx
@@ -1,10 +1,12 @@
 import React, { createContext, useContext, useState, useEffect, useMemo, useRef } from 'react';
+import { hhmm, MODE_COPY } from '../lib/ui';
 
 /*
  * Live state for the ops dashboard, fed by the Noonshift backend:
- *   WS /ws          -> plan | meter | event frames (see noonshift/models.py)
- *   GET /sites/{id}/impact, /sites/{id}/status  -> polled every 5 s
- * The pages keep reading the same `data` shape the mock used; this file derives it from the frames.
+ *   WS /ws                                   -> plan | meter | event frames (docs/ws-frames.json)
+ *   GET /sites/{id}/impact, /sites/{id}/status -> polled every 5 s (docs/openapi.json)
+ *   GET /grid/signal                          -> today's hourly MOER + tariff, once per sim day
+ * Rule for every element on every page: it is fed by one of these or it does not exist.
  */
 
 const SITE = 'site-1';
@@ -19,8 +21,9 @@ const pct = (iso) => {
   const d = new Date(iso);
   return Math.max(0, Math.min(100, ((d.getHours() * 60 + d.getMinutes() - AXIS_START_MIN) / AXIS_SPAN_MIN) * 100));
 };
-const hhmm = (iso) => (iso ? new Date(iso).toTimeString().slice(0, 5) : '—');
 const minutesBetween = (a, b) => Math.round((new Date(b) - new Date(a)) / 60000);
+const emptyHours = () => Array.from({ length: 24 }, (_, i) => ({ time: i, ev: 0, building: 0, kwh: 0 }));
+
 
 const GlobalStateContext = createContext();
 
@@ -30,11 +33,12 @@ export function GlobalStateProvider({ children }) {
   const [events, setEvents] = useState([]); // newest first, capped
   const [impact, setImpact] = useState(null);
   const [status, setStatus] = useState(null);
+  const [signal, setSignal] = useState([]); // GET /grid/signal: 24 rows
   const [sessions, setSessions] = useState({}); // session_id -> row, built from meter frames
-  const [ticks, setTicks] = useState(() => Array.from({ length: 24 }, (_, i) => ({ time: i, ev: 0, building: 0 })));
+  const [ticks, setTicks] = useState(emptyHours); // per hour: latest kW and accumulated kWh (one meter frame = one sim-minute)
   const [resolved, setResolved] = useState(new Set());
-  const [isOptimizing, setIsOptimizing] = useState(false);
   const [connected, setConnected] = useState(false);
+  const [dayKey, setDayKey] = useState(0); // bumps on day_reset so the signal is refetched
   const socketRef = useRef(null);
   const arrivalsRef = useRef({}); // session_id -> HH:MM from its plug_in event; sessions that predate this page show "—"
 
@@ -54,16 +58,16 @@ export function GlobalStateProvider({ children }) {
         const f = JSON.parse(m.data);
         if (f.type === 'plan') {
           setPlan(f);
-          setIsOptimizing(false);
         } else if (f.type === 'meter') {
           setMeter(f);
           const h = new Date(f.sim_time).getHours();
-          setTicks((prev) => prev.map((t) => (t.time === h ? { time: h, ev: f.site_kw, building: f.building_load_kw } : t)));
+          setTicks((prev) => prev.map((t) => (t.time === h ? { time: h, ev: f.site_kw, building: f.building_load_kw, kwh: t.kwh + f.site_kw / 60 } : t)));
           setSessions((prev) => {
             const next = { ...prev };
             for (const c of f.connectors) {
               if (c.session_id == null) continue;
               const old = next[c.session_id];
+              const mins = c.departure_at ? minutesBetween(f.sim_time, c.departure_at) : null;
               next[c.session_id] = {
                 id: `SESS-${c.session_id}`,
                 sid: c.session_id,
@@ -76,8 +80,15 @@ export function GlobalStateProvider({ children }) {
                 kwh_needed: c.kwh_needed,
                 energy: `${c.kwh_delivered.toFixed(1)} / ${c.kwh_needed.toFixed(1)} kWh`,
                 status: c.status === 'done' ? 'Completed' : c.kw > 0 ? 'Charging' : 'Waiting',
-                risk: c.departure_at && minutesBetween(f.sim_time, c.departure_at) < 30 && c.kwh_delivered < 0.9 * c.kwh_needed ? 'High' : 'Low',
+                risk: mins != null && mins < 30 && c.kwh_delivered < 0.9 * c.kwh_needed && c.status !== 'done' ? 'High' : 'Low',
                 boost: c.boost,
+                urgency: c.urgency ?? null,
+                idleMin: c.idle_min ?? 0,
+                needConfidence: c.need_confidence ?? null,
+                pMaxKw: c.p_max_kw ?? 0,
+                capObserved: !!c.cap_observed,
+                asap: !!c.asap,
+                moveBy: !!c.move_by,
               };
             }
             return next;
@@ -91,7 +102,8 @@ export function GlobalStateProvider({ children }) {
           } else if (f.name === 'day_reset') {
             setSessions({});
             setPlan(null);
-            setTicks(Array.from({ length: 24 }, (_, i) => ({ time: i, ev: 0, building: 0 })));
+            setTicks(emptyHours());
+            setDayKey((k) => k + 1);
           }
         }
       };
@@ -120,15 +132,23 @@ export function GlobalStateProvider({ children }) {
     return () => clearInterval(t);
   }, []);
 
+  useEffect(() => {
+    fetch(`${API}/grid/signal`)
+      .then((r) => (r.ok ? r.json() : []))
+      .then(setSignal)
+      .catch(() => {});
+  }, [dayKey, connected]);
+
   // ---- derive the shape the pages read ----
   const data = useMemo(() => {
     const simTime = meter?.sim_time;
-    const feedKw = meter?.feed_kw ?? 150;
+    const feedKw = status?.feed_kw ?? meter?.feed_kw ?? 0;
     const evKw = meter?.site_kw ?? 0;
     const buildingKw = meter?.building_load_kw ?? 0;
     const mode = status?.mode ?? meter?.mode ?? plan?.mode ?? 'live';
     const planByConnector = Object.fromEntries((plan?.connectors ?? []).map((c) => [c.connector_id, c]));
     const slotMs = (plan?.slot_minutes ?? 5) * 60000;
+    const asapBays = new Set(status?.connectors_asap ?? []);
 
     const connectors = (meter?.connectors ?? [])
       .filter((c) => c.session_id != null)
@@ -149,11 +169,15 @@ export function GlobalStateProvider({ children }) {
           risk: mins != null && mins < 30 && frac < 0.9 && c.status !== 'done' ? 'High' : 'Low',
           id: c.connector_id,
           sessionId: c.session_id,
-          driver: `Driver #${c.session_id}`,
-          carModel: 'EV (7 kW AC)',
-          licensePlate: '—',
           deadlineMins: Math.max(0, mins ?? 0),
           hasBoost: c.boost,
+          urgency: c.urgency ?? null,
+          asap: asapBays.has(c.connector_id),
+          moveBy: !!c.move_by,
+          idleMin: c.idle_min ?? 0,
+          needConfidence: c.need_confidence ?? null,
+          pMaxKw: c.p_max_kw ?? 0,
+          capObserved: !!c.cap_observed,
           startPct,
           planWidth,
           actualWidth: planWidth * frac,
@@ -166,28 +190,44 @@ export function GlobalStateProvider({ children }) {
 
     const charging = connectors.filter((c) => c.status === 'Charging').length;
     const atRisk = Object.values(sessions).filter((s) => s.risk === 'High' && s.status !== 'Completed').length;
+    const waiting = meter?.waiting ?? status?.waiting ?? 0;
 
     const alerts = events
       .map((e) => {
         const time = hhmm(e.sim_time);
         const base = { id: e.id, site: SITE, time, status: resolved.has(e.id) ? 'Resolved' : 'Active' };
+        const d = e.detail;
         switch (e.name) {
           case 'mode':
-            return e.detail.mode_after !== 'live'
-              ? { ...base, severity: 'Warning', entity: 'Signal', desc: `Fail-safe: ${e.detail.mode_before} → ${e.detail.mode_after}` }
+            return d.mode_after !== 'live'
+              ? { ...base, severity: 'Warning', entity: 'Signal', desc: `Fail-safe: ${d.mode_before} → ${d.mode_after}. ${MODE_COPY[d.mode_after] ?? ''}` }
               : { ...base, severity: 'Info', entity: 'Signal', desc: 'Live signal restored' };
           case 'dr':
-            return { ...base, severity: 'Critical', entity: 'Site Load', desc: `Demand response: reduce ${e.detail.reduce_kw} kW ${hhmm(e.detail.start)}–${hhmm(e.detail.end)}` };
+            return { ...base, severity: 'Critical', entity: 'Site Load', desc: `Demand response: reduce ${d.reduce_kw} kW ${hhmm(d.start)}–${hhmm(d.end)}` };
           case 'unplug':
-            return e.detail.shortfall_kwh > 0.5
-              ? { ...base, severity: 'Warning', entity: e.detail.connector_id, desc: `Left early, ${e.detail.shortfall_kwh} kWh short of stated need` }
+            if (d.moved) return { ...base, severity: 'Info', entity: d.connector_id, desc: 'Full car moved off the bay for a waiting driver' };
+            return d.shortfall_kwh > 0.5
+              ? { ...base, severity: 'Warning', entity: d.connector_id, desc: `Left early, ${d.shortfall_kwh} kWh short of stated need` }
               : null;
           case 'boost':
-            return { ...base, severity: 'Info', entity: e.detail.connector_id, desc: `Boost requested (session ${e.detail.session_id})` };
+            return { ...base, severity: 'Warning', entity: d.connector_id, desc: `Leaving now (session ${d.session_id}): full power, pays today's rate` };
+          case 'urgency':
+            return {
+              ...base,
+              severity: 'Warning',
+              entity: d.connector_id,
+              desc: d.level === 'soon' ? `Leaving at ${hhmm(d.leave_at)} (session ${d.session_id}): re-planned into the cleanest slots before then` : `Priority requested (session ${d.session_id}): 90 % floor, gives way last`,
+            };
+          case 'done':
+            return { ...base, severity: 'Info', entity: d.connector_id, desc: `Full (session ${d.session_id}) — "done, please move" sent` };
+          case 'cap_observed':
+            return { ...base, severity: 'Info', entity: d.connector_id, desc: `Car draws ${d.metered_kw} kW at a ${d.limit_kw} kW limit; plan capped at ${d.max_kw} kW` };
+          case 'move_by':
+            return { ...base, severity: 'Info', entity: d.connector_id, desc: `${d.waiting} waiting: move-by ${hhmm(d.move_by)} (was ${hhmm(d.deadline_was)})` };
           case 'plug_in':
-            return { ...base, severity: 'Info', entity: e.detail.connector_id, desc: `Plugged in${e.detail.departure_at ? `, ready by ${hhmm(e.detail.departure_at)}` : ''}` };
+            return { ...base, severity: 'Info', entity: d.connector_id, desc: `Plugged in${d.waited_min ? ` after waiting ${d.waited_min} min` : ''}${d.departure_at ? `, ready by ${hhmm(d.departure_at)}` : ''}` };
           case 'demo':
-            return { ...base, severity: 'Warning', entity: 'Site', desc: `Demo: ${e.detail.what}` };
+            return { ...base, severity: 'Warning', entity: 'Site', desc: `Demo: ${d.what}${d.waiting ? ` (${d.waiting} waiting)` : ''}` };
           case 'day_reset':
             return { ...base, severity: 'Info', entity: 'System', desc: 'Sim day restarted' };
           default:
@@ -195,13 +235,18 @@ export function GlobalStateProvider({ children }) {
         }
       })
       .filter(Boolean);
+    if (waiting > 0) {
+      alerts.unshift({ id: 'waiting', site: SITE, time: hhmm(simTime), status: resolved.has('waiting') ? 'Resolved' : 'Active', severity: 'Warning', entity: 'Bays', desc: `${waiting} car${waiting > 1 ? 's' : ''} waiting for a bay; slackest cars get move-by times` });
+    }
 
+    const loadKw = Math.round(evKw + buildingKw);
+    const contractedPeakKw = status?.contracted_peak_kw ?? feedKw;
     const siteRow = {
       id: SITE,
       status: mode === 'live' ? 'Normal' : 'Attention',
-      connectors: meter?.connectors.length ?? 0,
+      connectors: meter?.connectors.length ?? status?.n_connectors ?? 0,
       charging,
-      loadKw: Math.round(evKw + buildingKw),
+      loadKw,
       limitKw: feedKw,
       risk: atRisk,
       savings: Math.round(impact?.saved_usd ?? 0),
@@ -211,55 +256,100 @@ export function GlobalStateProvider({ children }) {
       connected,
       simTime,
       systemStatus: !connected ? 'Offline' : mode === 'live' ? 'Optimal' : 'Degraded',
+      status: {
+        mode,
+        modeCopy: MODE_COPY[mode],
+        ladder: status?.ladder ?? {},
+        safeShareKw: status?.safe_share_kw ?? 0,
+        waiting,
+        connectorsAsap: status?.connectors_asap ?? [],
+        nConnectors: status?.n_connectors ?? siteRow.connectors,
+        pMaxKw: status?.p_max_kw ?? 7,
+        feedKw,
+        blockKw: status?.block_kw ?? 0,
+        contractedPeakKw,
+        package: status?.package ?? 'pilot',
+        rateR: status?.employee_rate_usd_per_kwh ?? 0,
+        alpha: status?.driver_share ?? 0.5,
+        beta: status?.noonshift_share ?? 0.2,
+        signalKind: status?.signal_kind ?? null,
+        signalSource: status?.signal_source ?? null,
+        tariffName: status?.tariff_name ?? null,
+        lastSolveAt: status?.last_solve_at ?? null,
+      },
       portfolio: {
-        totalSites: 1,
         connectors: siteRow.connectors,
         activeSessions: connectors.length,
+        charging,
+        atRisk,
         totalSavingsUsd: (impact?.saved_usd ?? 0).toFixed(2),
         totalSavingsKgCo2: (impact?.saved_kgco2 ?? 0).toFixed(1),
-        currentDemandKw: siteRow.loadKw,
+        currentDemandKw: loadKw,
         limitKw: feedKw,
+        contractedPeakKw,
         peakAvoidedKw: Math.max(0, Math.round((impact?.baseline_peak_kw ?? 0) - (impact?.peak_kw ?? 0))),
         blockKw: status?.block_kw ?? 0,
         energyScheduledMwh: ((impact?.kwh ?? 0) / 1000).toFixed(2),
+        chargedToday: impact?.sessions ?? 0,
+        renewableShare: impact?.renewable_share ?? 0,
+        healthUsd: impact?.health_usd ?? null,
       },
       siteDetail: {
         id: SITE,
         limitKw: feedKw,
-        currentLoadKw: siteRow.loadKw,
+        currentLoadKw: loadKw,
         evLoadKw: Math.round(evKw),
         buildingLoadKw: Math.round(buildingKw),
         mode,
         reason: plan?.reason,
         solved_at: plan ? new Date(plan.solved_at).getTime() : null,
-        isOptimizing,
+        horizon_start: plan?.horizon_start ?? null,
+        site_kw: plan?.site_kw ?? [],
         blockKw: status?.block_kw ?? 0,
-        impact: { saved_usd: impact?.saved_usd ?? 0, saved_kgco2: impact?.saved_kgco2 ?? 0, kwh: impact?.kwh ?? 0, sessions: impact?.sessions ?? 0, peak_kw: impact?.peak_kw ?? 0, baseline_peak_kw: impact?.baseline_peak_kw ?? 0 },
+        impact: {
+          saved_usd: impact?.saved_usd ?? 0,
+          saved_kgco2: impact?.saved_kgco2 ?? 0,
+          kwh: impact?.kwh ?? 0,
+          sessions: impact?.sessions ?? 0,
+          peak_kw: impact?.peak_kw ?? 0,
+          baseline_peak_kw: impact?.baseline_peak_kw ?? 0,
+          renewable_share: impact?.renewable_share ?? 0,
+          health_usd: impact?.health_usd ?? null,
+        },
         meter_ticks: ticks,
         connectors,
       },
+      signal,
       sites: [siteRow],
       alerts,
       sessions: Object.values(sessions).sort((a, b) => b.sid - a.sid),
       chargersList: (meter?.connectors ?? []).map((c) => ({
         id: c.connector_id,
-        site: SITE,
         connector: c.connector_id,
         status: c.session_id == null ? 'Available' : c.kw > 0 ? 'Charging' : c.status === 'done' ? 'Done' : 'Waiting',
         power: c.kw,
         energyToday: c.kwh_delivered,
+        pMaxKw: c.p_max_kw ?? status?.p_max_kw ?? 0,
+        capObserved: !!c.cap_observed,
+        asap: asapBays.has(c.connector_id),
+        idleMin: c.idle_min ?? 0,
+        sessionId: c.session_id,
         lastHeartbeat: hhmm(simTime),
       })),
+      ledgerUrl: `${API}/sites/${SITE}/impact.csv`,
     };
-  }, [plan, meter, events, impact, status, sessions, ticks, resolved, isOptimizing, connected]);
+  }, [plan, meter, events, impact, status, signal, sessions, ticks, resolved, connected]);
 
-  // ---- actions: the demo buttons and per-connector controls hit the real backend ----
+  // ---- actions: the demo buttons and per-session controls hit the real backend ----
   const post = async (path, body) => {
     const r = await fetch(`${API}${path}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: body ? JSON.stringify(body) : undefined });
     if (!r.ok) console.warn(`POST ${path} -> ${r.status}`, await r.text());
     return r;
   };
 
+  // business.md §4b: now | soon (leave_at) | priority. Explains and confirms in the UI; the backend re-solves.
+  const setUrgency = (sessionId, level, leaveAt) => post(`/sessions/${sessionId}/urgency`, { level, leave_at: leaveAt ?? null });
+
   const triggerEvent = (endpoint, payload) => {
     switch (endpoint) {
       case 'demo_driver_early':
@@ -273,29 +363,15 @@ export function GlobalStateProvider({ children }) {
         return post('/demo/signal_outage', { rungs: ['live'] });
       case 'demo_grid_restore':
         return post('/demo/signal_outage', { rungs: ['live'], restore: true });
-      case 'prioritize_connector': {
-        const c = data.siteDetail.connectors.find((x) => x.id === payload);
-        return c ? post(`/sessions/${c.sessionId}/boost`) : undefined;
-      }
-      case 'pause_connector':
-        // ponytail: Noonshift never pauses a car by design (IEC 61851 min 6 A); no backend call. Kept for UI parity.
-        console.warn('pause_connector is not supported by the scheduler (never-pause guarantee)');
-        return;
       case 'resolve_alert':
         setResolved((prev) => new Set(prev).add(payload));
         return;
-      case 'reoptimize_start':
-        setIsOptimizing(true); // backend re-solves on the next 5-min boundary or event; the next plan frame clears this
-        return;
-      case 'reoptimize_end':
-        setIsOptimizing(false);
-        return;
       default:
         console.warn('unknown triggerEvent', endpoint);
     }
   };
 
-  return <GlobalStateContext.Provider value={{ data, triggerEvent }}>{children}</GlobalStateContext.Provider>;
+  return <GlobalStateContext.Provider value={{ data, triggerEvent, setUrgency }}>{children}</GlobalStateContext.Provider>;
 }
 
 export const useGlobalState = () => useContext(GlobalStateContext);
diff --git a/web/src/lib/ui.js b/web/src/lib/ui.js
new file mode 100644
index 0000000..ead0e13
--- /dev/null
+++ b/web/src/lib/ui.js
@@ -0,0 +1,10 @@
+export const hhmm = (iso) => (iso ? new Date(iso).toTimeString().slice(0, 5) : '—');
+
+// What each fail-safe rung means, in the facilities manager's words (noonshift/api.py pick_mode)
+export const MODE_COPY = {
+  live: 'Live marginal-carbon signal; planning on carbon, tariff and deadlines.',
+  cached: 'Live carbon signal lost; planning on the cached forecast (good for 6 h).',
+  tariff: 'No carbon signal; planning on the tariff and deadlines only.',
+  deadline: 'No signal and no tariff; deadlines only — every car still leaves charged.',
+  full: 'Nothing to plan with; every charger holds its static share, which is what it does when we are offline.',
+};
diff --git a/web/src/pages/AlertsView.jsx b/web/src/pages/AlertsView.jsx
index 96bf2ff..69581ed 100644
--- a/web/src/pages/AlertsView.jsx
+++ b/web/src/pages/AlertsView.jsx
@@ -1,42 +1,45 @@
 import { useGlobalState } from '../context/GlobalStateContext';
+import { useNavigate } from 'react-router-dom';
+
+const PAGE_FOR = { Signal: '/ops/schedules', 'Site Load': '/ops/overview', Bays: '/ops/sessions', Site: '/ops/sites', System: '/ops/overview' };
 
 export default function AlertsView() {
   const { data, triggerEvent } = useGlobalState();
+  const navigate = useNavigate();
 
-  const activeAlerts = data.alerts.filter(a => a.status === 'Active');
-  const resolvedAlerts = data.alerts.filter(a => a.status === 'Resolved');
+  const active = data.alerts.filter((a) => a.status === 'Active');
+  const done = data.alerts.filter((a) => a.status === 'Resolved');
+  const view = (a) => navigate(PAGE_FOR[a.entity] ?? '/ops/sites');
 
   return (
-    <div className="p-8 max-w-5xl mx-auto w-full">
-      <header className="mb-8 flex justify-between items-end border-b border-border pb-4">
-        <div>
-          <h1 className="text-2xl font-semibold text-ink">Alert Center</h1>
-          <p className="text-sm text-ink-muted mt-1">Operational exceptions and warnings</p>
-        </div>
+    <div className="p-4 md:p-8 max-w-5xl mx-auto w-full">
+      <header className="mb-6 md:mb-8 border-b border-border pb-4">
+        <h1 className="text-2xl font-semibold text-ink">Alerts</h1>
+        <p className="text-sm text-ink-muted mt-1">Every event the backend broadcasts: urgency, done, observed caps, move-by, ladder changes, queue. Resolving is local to this screen.</p>
       </header>
 
-      <section className="mb-12">
-        <h2 className="text-lg font-medium text-ink mb-4">Active Alerts ({activeAlerts.length})</h2>
+      <section className="mb-8 md:mb-12">
+        <h2 className="text-lg font-medium text-ink mb-4">Active ({active.length})</h2>
         <div className="border border-border bg-surface w-full flex flex-col">
-          {activeAlerts.length === 0 ? (
-            <div className="p-8 text-center text-sm text-ink-muted">No active alerts.</div>
+          {active.length === 0 ? (
+            <div className="p-8 text-center text-sm text-ink-muted">Nothing needs attention.</div>
           ) : (
-            activeAlerts.map(a => (
-              <div key={a.id} className="flex items-center justify-between p-4 border-b border-border last:border-0 hover:bg-bg transition-colors">
-                <div className="flex items-start gap-4">
-                  <div className={`w-2 h-2 mt-1.5 rounded-full ${a.severity === 'Critical' ? 'bg-danger' : 'bg-solar'}`}></div>
-                  <div className="flex flex-col gap-1">
+            active.map((a) => (
+              <div key={a.id} className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-4 border-b border-border last:border-0 hover:bg-bg transition-colors">
+                <div className="flex items-start gap-4 min-w-0">
+                  <div className={`w-2 h-2 mt-1.5 rounded-full shrink-0 ${a.severity === 'Critical' ? 'bg-danger' : a.severity === 'Warning' ? 'bg-solar' : 'bg-ink-muted'}`}></div>
+                  <div className="flex flex-col gap-1 min-w-0">
                     <div className="flex items-center gap-2">
-                      <span className="font-medium text-ink text-sm">{a.site}</span>
-                      <span className="text-ink-muted text-xs">•</span>
                       <span className="mono text-xs text-ink-muted">{a.entity}</span>
+                      <span className="text-ink-muted text-xs">•</span>
+                      <span className="text-[10px] uppercase text-ink-muted">{a.severity}</span>
                     </div>
                     <span className="text-sm text-ink">{a.desc}</span>
                     <span className="text-[10px] uppercase text-ink-muted">{a.time}</span>
                   </div>
                 </div>
-                <div className="flex gap-2">
-                  <button className="text-xs uppercase tracking-wider px-3 py-1.5 border border-border hover:bg-bg transition-colors">View</button>
+                <div className="flex gap-2 shrink-0">
+                  <button onClick={() => view(a)} className="text-xs uppercase tracking-wider px-3 py-1.5 border border-border hover:bg-bg transition-colors">View</button>
                   <button onClick={() => triggerEvent('resolve_alert', a.id)} className="text-xs uppercase tracking-wider px-3 py-1.5 bg-ink text-surface hover:opacity-90 transition-opacity">Resolve</button>
                 </div>
               </div>
@@ -46,22 +49,18 @@ export default function AlertsView() {
       </section>
 
       <section>
-        <h2 className="text-lg font-medium text-ink mb-4">Recently Resolved</h2>
+        <h2 className="text-lg font-medium text-ink mb-4">Resolved</h2>
         <div className="border border-border bg-surface w-full flex flex-col opacity-60">
-          {resolvedAlerts.length === 0 ? (
-            <div className="p-8 text-center text-sm text-ink-muted">No resolved alerts.</div>
+          {done.length === 0 ? (
+            <div className="p-8 text-center text-sm text-ink-muted">Nothing resolved yet.</div>
           ) : (
-            resolvedAlerts.map(a => (
-              <div key={a.id} className="flex items-center justify-between p-4 border-b border-border last:border-0">
-                <div className="flex flex-col gap-1">
-                  <div className="flex items-center gap-2">
-                    <span className="font-medium text-ink text-sm">{a.site}</span>
-                    <span className="text-ink-muted text-xs">•</span>
-                    <span className="mono text-xs text-ink-muted">{a.entity}</span>
-                  </div>
+            done.map((a) => (
+              <div key={a.id} className="flex items-center justify-between gap-3 p-4 border-b border-border last:border-0">
+                <div className="flex flex-col gap-1 min-w-0">
+                  <span className="mono text-xs text-ink-muted">{a.entity} · {a.time}</span>
                   <span className="text-sm text-ink">{a.desc}</span>
                 </div>
-                <span className="text-[10px] uppercase text-ink-muted px-2 py-1 bg-bg border border-border">Resolved</span>
+                <span className="text-[10px] uppercase text-ink-muted px-2 py-1 bg-bg border border-border shrink-0">Resolved</span>
               </div>
             ))
           )}
diff --git a/web/src/pages/ChargersView.jsx b/web/src/pages/ChargersView.jsx
index d37298b..32ed515 100644
--- a/web/src/pages/ChargersView.jsx
+++ b/web/src/pages/ChargersView.jsx
@@ -1,83 +1,84 @@
 import { useState } from 'react';
 import { useGlobalState } from '../context/GlobalStateContext';
 
+const Kpi = ({ label, value, tone = 'text-ink' }) => (
+  <div className="border border-border p-4 bg-surface flex flex-col justify-between">
+    <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">{label}</span>
+    <span className={`mono text-2xl font-medium ${tone}`}>{value}</span>
+  </div>
+);
+
 export default function ChargersView() {
   const { data } = useGlobalState();
+  const { chargersList, status } = data;
   const [filter, setFilter] = useState('All');
 
-  const filteredChargers = filter === 'All' ? data.chargersList : data.chargersList.filter(c => c.status === filter);
+  const rows = filter === 'All' ? chargersList : filter === 'ASAP bays' ? chargersList.filter((c) => c.asap) : chargersList.filter((c) => c.status === filter);
+  const count = (st) => chargersList.filter((c) => c.status === st).length;
 
   return (
-    <div className="p-8 max-w-7xl mx-auto w-full">
-      <header className="mb-8 flex justify-between items-end border-b border-border pb-4">
+    <div className="p-4 md:p-8 max-w-7xl mx-auto w-full">
+      <header className="mb-6 md:mb-8 flex flex-wrap justify-between items-end gap-2 border-b border-border pb-4">
         <div>
-          <h1 className="text-2xl font-semibold text-ink">Charger Fleet</h1>
-          <p className="text-sm text-ink-muted mt-1">Hardware monitoring and telemetry</p>
+          <h1 className="text-2xl font-semibold text-ink">Chargers</h1>
+          <p className="text-sm text-ink-muted mt-1">
+            {status.nConnectors} × {status.pMaxKw} kW on a {status.feedKw} kW feed · static share {status.safeShareKw} kW each when the controller is offline
+          </p>
         </div>
       </header>
 
-      <div className="grid grid-cols-6 gap-6 mb-8">
-        <div className="border border-border p-4 bg-surface flex flex-col justify-between">
-          <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">Total Chargers</span>
-          <span className="mono text-2xl font-medium">{data.chargersList.length}</span>
-        </div>
-        <div className="border border-border p-4 bg-surface flex flex-col justify-between">
-          <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">Charging</span>
-          <span className="mono text-2xl font-medium text-solar">{data.chargersList.filter(c => c.status === 'Charging').length}</span>
-        </div>
-        <div className="border border-border p-4 bg-surface flex flex-col justify-between">
-          <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">Available</span>
-          <span className="mono text-2xl font-medium text-saved">{data.chargersList.filter(c => c.status === 'Available').length}</span>
-        </div>
-        <div className="border border-border p-4 bg-surface flex flex-col justify-between">
-          <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">Offline</span>
-          <span className="mono text-2xl font-medium text-ink-muted">{data.chargersList.filter(c => c.status === 'Offline').length}</span>
-        </div>
-        <div className="border border-border p-4 bg-surface flex flex-col justify-between">
-          <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">Faulted</span>
-          <span className="mono text-2xl font-medium text-danger">{data.chargersList.filter(c => c.status === 'Faulted').length}</span>
-        </div>
+      <div className="grid grid-cols-2 md:grid-cols-5 gap-4 md:gap-6 mb-8">
+        <Kpi label="Chargers" value={chargersList.length} />
+        <Kpi label="Charging" value={count('Charging')} tone="text-solar" />
+        <Kpi label="Available" value={count('Available')} tone="text-saved" />
+        <Kpi label="Full, still plugged" value={count('Done')} tone="text-ink-muted" />
+        <Kpi label="ASAP bays" value={status.connectorsAsap.length} />
       </div>
 
-      <div className="flex gap-2 mb-6">
-        {['All', 'Charging', 'Available', 'Offline', 'Faulted'].map(f => (
-          <button 
-            key={f} 
-            onClick={() => setFilter(f)}
-            className={`px-3 py-1 text-xs border rounded transition-colors ${filter === f ? 'bg-ink text-surface border-ink' : 'bg-surface text-ink-muted border-border hover:border-ink'}`}
-          >
+      <div className="flex flex-wrap gap-2 mb-6">
+        {['All', 'Charging', 'Available', 'Done', 'Waiting', 'ASAP bays'].map((f) => (
+          <button key={f} onClick={() => setFilter(f)} className={`px-3 py-1 text-xs border rounded transition-colors ${filter === f ? 'bg-ink text-surface border-ink' : 'bg-surface text-ink-muted border-border hover:border-ink'}`}>
             {f}
           </button>
         ))}
       </div>
 
-      <div className="border border-border bg-surface w-full text-sm">
-        <div className="grid grid-cols-7 border-b border-border bg-bg text-ink-muted text-[10px] uppercase tracking-wider p-4">
-          <div className="col-span-1">Charger ID</div>
-          <div className="col-span-1">Site</div>
-          <div className="col-span-1">Connector</div>
-          <div className="col-span-1 text-center">Status</div>
-          <div className="col-span-1 text-right">Power</div>
-          <div className="col-span-1 text-right">Energy Today</div>
-          <div className="col-span-1 text-right">Last Heartbeat</div>
-        </div>
-        
-        <div className="flex flex-col h-[500px] overflow-y-auto">
-          {filteredChargers.map((c) => (
-            <div key={c.id} className="grid grid-cols-7 items-center p-4 border-b border-border hover:bg-bg transition-colors">
-              <div className="col-span-1 mono font-medium text-xs">{c.id}</div>
-              <div className="col-span-1 truncate pr-4 text-xs">{c.site}</div>
-              <div className="col-span-1 mono text-xs">{c.connector}</div>
-              <div className="col-span-1 text-center">
-                <span className={`inline-flex items-center px-1.5 py-0.5 text-[10px] uppercase tracking-wide border ${c.status === 'Available' ? 'bg-saved/10 text-saved border-saved/20' : c.status === 'Charging' ? 'bg-solar/10 text-solar border-solar/20' : c.status === 'Faulted' ? 'bg-danger/10 text-danger border-danger/20' : 'bg-bg text-ink-muted border-border'}`}>
-                  {c.status}
-                </span>
+      <div className="border border-border bg-surface w-full text-sm overflow-x-auto">
+        <div className="min-w-[760px]">
+          <div className="grid grid-cols-8 border-b border-border bg-bg text-ink-muted text-[10px] uppercase tracking-wider p-4">
+            <div className="col-span-1">Charger</div>
+            <div className="col-span-1 text-center">Status</div>
+            <div className="col-span-1 text-right">Power now</div>
+            <div className="col-span-1 text-right">Plan cap</div>
+            <div className="col-span-1 text-right">Static share</div>
+            <div className="col-span-1 text-right">Energy today</div>
+            <div className="col-span-1 text-right">Idle</div>
+            <div className="col-span-1 text-right">Session</div>
+          </div>
+
+          <div className="flex flex-col max-h-[60vh] overflow-y-auto">
+            {rows.map((c) => (
+              <div key={c.id} className="grid grid-cols-8 items-center p-4 border-b border-border hover:bg-bg transition-colors">
+                <div className="col-span-1 mono font-medium text-xs">
+                  {c.id}
+                  {c.asap && <span className="ml-1 text-[9px] uppercase text-ink-muted border border-border px-1">asap</span>}
+                </div>
+                <div className="col-span-1 text-center">
+                  <span className={`inline-flex items-center px-1.5 py-0.5 text-[10px] uppercase tracking-wide border ${c.status === 'Available' ? 'bg-saved/10 text-saved border-saved/20' : c.status === 'Charging' ? 'bg-solar/10 text-solar border-solar/20' : 'bg-bg text-ink-muted border-border'}`}>
+                    {c.status}
+                  </span>
+                </div>
+                <div className="col-span-1 mono text-xs text-right">{c.status === 'Charging' ? `${c.power.toFixed(1)} kW` : '-'}</div>
+                <div className="col-span-1 mono text-xs text-right">
+                  {c.pMaxKw.toFixed(1)} kW{c.capObserved && <span className="ml-1 text-[9px] text-ink-muted">meter</span>}
+                </div>
+                <div className="col-span-1 mono text-xs text-right text-ink-muted">{status.safeShareKw} kW</div>
+                <div className="col-span-1 mono text-xs text-right">{c.energyToday.toFixed(1)} kWh</div>
+                <div className="col-span-1 mono text-xs text-right">{c.idleMin > 0 ? `${c.idleMin} min` : '-'}</div>
+                <div className="col-span-1 mono text-xs text-right text-ink-muted">{c.sessionId ?? '-'}</div>
               </div>
-              <div className="col-span-1 mono text-xs text-right">{c.status === 'Charging' ? c.power.toFixed(1) + ' kW' : '-'}</div>
-              <div className="col-span-1 mono text-xs text-right">{c.energyToday.toFixed(1)} kWh</div>
-              <div className="col-span-1 mono text-xs text-right text-ink-muted">{c.lastHeartbeat}</div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
       </div>
     </div>
diff --git a/web/src/pages/DashboardOverview.jsx b/web/src/pages/DashboardOverview.jsx
index 4ea2860..f6557a0 100644
--- a/web/src/pages/DashboardOverview.jsx
+++ b/web/src/pages/DashboardOverview.jsx
@@ -1,138 +1,165 @@
 import { useGlobalState } from '../context/GlobalStateContext';
 import { useNavigate } from 'react-router-dom';
 
-// 06:00-22:00 on x (0-1000); the dashed limit line sits at y=20, zero load at y=180. Hours not yet reached stay at 0.
-const linePoints = (ticks, pick, limitKw) =>
+// 06:00-22:00 on x (0-1000); the top line sits at y=20 (= the y-axis max), zero load at y=180. Hours not yet reached stay at 0.
+const linePoints = (ticks, pick, maxKw) =>
   ticks
     .filter((t) => t.time >= 6 && t.time <= 22)
-    .map((t) => `${((t.time - 6) / 16) * 1000},${180 - Math.min(1, pick(t) / (limitKw || 1)) * 160}`)
+    .map((t) => `${((t.time - 6) / 16) * 1000},${180 - Math.min(1, pick(t) / (maxKw || 1)) * 160}`)
     .join(' ');
+const yOf = (kw, maxKw) => 180 - Math.min(1, kw / (maxKw || 1)) * 160;
+
+function Ring({ value }) {
+  const r = 26;
+  const c = 2 * Math.PI * r;
+  return (
+    <svg viewBox="0 0 64 64" className="w-16 h-16 shrink-0" role="img" aria-label={`renewable-hour share ${Math.round(value * 100)} percent`}>
+      <circle cx="32" cy="32" r={r} fill="none" stroke="var(--color-border)" strokeWidth="6" />
+      <circle cx="32" cy="32" r={r} fill="none" stroke="var(--color-saved)" strokeWidth="6" strokeDasharray={`${c * value} ${c}`} transform="rotate(-90 32 32)" />
+      <text x="32" y="36" textAnchor="middle" className="mono text-[12px] fill-ink">{Math.round(value * 100)}%</text>
+    </svg>
+  );
+}
 
 export default function DashboardOverview() {
   const { data } = useGlobalState();
-  const { portfolio, sites } = data;
+  const { portfolio, sites, status, siteDetail } = data;
   const navigate = useNavigate();
+  const yMax = Math.max(status.contractedPeakKw, status.feedKw, 1);
+  const portsAtFullPower = status.pMaxKw ? Math.floor(status.feedKw / status.pMaxKw) : 0;
 
   return (
-    <div className="p-8 max-w-7xl mx-auto w-full">
-      <header className="mb-8 flex justify-between items-end border-b border-border pb-4">
+    <div className="p-4 md:p-8 max-w-7xl mx-auto w-full">
+      <header className="mb-6 md:mb-8 flex flex-wrap justify-between items-end gap-2 border-b border-border pb-4">
         <div>
-          <h1 className="text-2xl font-semibold text-ink">Operations Overview</h1>
-          <p className="text-sm text-ink-muted mt-1">Replay day {data.simTime ? new Date(data.simTime).toDateString() : "—"} · live from Noonshift</p>
+          <h1 className="text-2xl font-semibold text-ink">{siteDetail.id}</h1>
+          <p className="text-sm text-ink-muted mt-1">Replay day {data.simTime ? new Date(data.simTime).toDateString() : '—'} · live from Noonshift</p>
+        </div>
+        <div className={`inline-flex items-center gap-2 px-2 py-1 text-xs border ${status.mode === 'live' ? 'bg-saved/10 text-saved border-saved/20' : 'bg-solar/10 text-solar border-solar/20'}`} title={status.modeCopy}>
+          <span className="w-2 h-2 rounded-full bg-current"></span>
+          mode {status.mode}
         </div>
-        <select className="border border-border bg-surface text-sm p-2 outline-none">
-          <option>{data.siteDetail.id}</option>
-        </select>
       </header>
 
-      {/* Restrained horizontal KPI row */}
-      <div className="flex items-center gap-8 mb-12 border-b border-border pb-8">
-        <div className="flex flex-col flex-1 border-r border-border pr-8">
-          <span className="text-xs text-ink-muted mb-1">Active sites</span>
-          <span className="mono text-2xl text-ink font-medium">{portfolio.totalSites}</span>
-        </div>
-        <div className="flex flex-col flex-1 border-r border-border pr-8">
-          <span className="text-xs text-ink-muted mb-1">Charging now</span>
-          <span className="mono text-2xl text-ink font-medium">{portfolio.activeSessions} / {portfolio.connectors} connectors</span>
+      {/* What the facilities manager is paid to watch, in that order */}
+      <div className="grid grid-cols-2 lg:grid-cols-5 gap-x-6 gap-y-6 mb-8 border-b border-border pb-8">
+        <div className="flex flex-col lg:border-r border-border lg:pr-6">
+          <span className="text-xs text-ink-muted mb-1">Building + EV load vs contracted peak</span>
+          <span className={`mono text-2xl font-medium ${portfolio.currentDemandKw > status.contractedPeakKw ? 'text-danger' : 'text-ink'}`}>
+            {portfolio.currentDemandKw} <span className="text-base text-ink-muted">/ {status.contractedPeakKw} kW</span>
+          </span>
         </div>
-        <div className="flex flex-col flex-1 border-r border-border pr-8">
-          <span className="text-xs text-ink-muted mb-1">Energy scheduled</span>
-          <span className="mono text-2xl text-ink font-medium">{portfolio.energyScheduledMwh} MWh</span>
+        <div className="flex flex-col lg:border-r border-border lg:pr-6">
+          <span className="text-xs text-ink-muted mb-1">Ports on this feed</span>
+          <span className="mono text-2xl font-medium text-ink">
+            {status.nConnectors} <span className="text-base text-ink-muted">· {portsAtFullPower} fit at full power</span>
+          </span>
         </div>
-        <div className="flex flex-col flex-1 border-r border-border pr-8">
-          <span className="text-xs text-ink-muted mb-1">Estimated savings</span>
-          <span className="mono text-2xl text-saved font-medium">${portfolio.totalSavingsUsd}</span>
+        <div className="flex flex-col lg:border-r border-border lg:pr-6">
+          <span className="text-xs text-ink-muted mb-1">Employees charged today / at risk</span>
+          <span className="mono text-2xl font-medium text-ink">
+            {portfolio.chargedToday} <span className="text-base text-ink-muted">/</span> <span className={portfolio.atRisk > 0 ? 'text-danger' : 'text-ink-muted'}>{portfolio.atRisk}</span>
+          </span>
         </div>
-        <div className="flex flex-col flex-1 border-r border-border pr-8">
-          <span className="text-xs text-ink-muted mb-1">Peak avoided (est.)</span>
-          <span className="mono text-2xl text-ink font-medium">{portfolio.peakAvoidedKw} kW</span>
+        <div className="flex flex-col lg:border-r border-border lg:pr-6">
+          <span className="text-xs text-ink-muted mb-1">CO₂ avoided today (est.)</span>
+          <span className="mono text-2xl font-medium text-saved">{portfolio.totalSavingsKgCo2} kg</span>
+          <span className="mono text-xs text-ink-muted mt-1">${portfolio.totalSavingsUsd} saved · {portfolio.peakAvoidedKw} kW peak avoided</span>
         </div>
-        <div className="flex flex-col flex-1">
-          <span className="text-xs text-ink-muted mb-1">CO2 avoided</span>
-          <span className="mono text-2xl text-saved font-medium">{portfolio.totalSavingsKgCo2} kg</span>
+        <div className="flex items-center gap-3">
+          <Ring value={portfolio.renewableShare} />
+          <div className="flex flex-col">
+            <span className="text-xs text-ink-muted">Renewable-hour share</span>
+            <span className="text-[11px] text-ink-muted">of charged kWh in hours where the next kWh was renewable</span>
+          </div>
         </div>
       </div>
 
-      {/* Live Site Power Section */}
-      <section className="mb-12">
-        <h2 className="text-lg font-medium text-ink mb-4">Live site power - Network Aggregate</h2>
-        <div className="border border-border bg-surface p-6 flex flex-col gap-6">
-          
-          <div className="flex gap-12 border-b border-border pb-4">
+      {/* Live site power */}
+      <section className="mb-8 md:mb-12">
+        <h2 className="text-lg font-medium text-ink mb-4">Site power today</h2>
+        <div className="border border-border bg-surface p-4 md:p-6 flex flex-col gap-6">
+          <div className="flex flex-wrap gap-6 md:gap-12 border-b border-border pb-4">
+            <div className="flex flex-col">
+              <span className="text-xs text-ink-muted uppercase tracking-wider mb-1">EV load</span>
+              <span className="mono text-xl text-solar font-medium">{siteDetail.evLoadKw} kW</span>
+            </div>
             <div className="flex flex-col">
-              <span className="text-xs text-ink-muted uppercase tracking-wider mb-1">Current EV Load</span>
-              <span className="mono text-xl text-solar font-medium">{data.siteDetail.evLoadKw} kW</span>
+              <span className="text-xs text-ink-muted uppercase tracking-wider mb-1">Building load</span>
+              <span className="mono text-xl text-ink font-medium">{siteDetail.buildingLoadKw} kW</span>
             </div>
             <div className="flex flex-col">
-              <span className="text-xs text-ink-muted uppercase tracking-wider mb-1">Building Load</span>
-              <span className="mono text-xl text-ink font-medium">{data.siteDetail.buildingLoadKw} kW</span>
+              <span className="text-xs text-ink-muted uppercase tracking-wider mb-1">Headroom to feed</span>
+              <span className="mono text-xl text-ink font-medium">{Math.max(0, status.feedKw - portfolio.currentDemandKw)} kW</span>
             </div>
             <div className="flex flex-col">
-              <span className="text-xs text-ink-muted uppercase tracking-wider mb-1">Available</span>
-              <span className="mono text-xl text-ink font-medium">{portfolio.limitKw - portfolio.currentDemandKw} kW</span>
+              <span className="text-xs text-ink-muted uppercase tracking-wider mb-1">Static share if we vanish</span>
+              <span className="mono text-xl text-ink font-medium">{status.nConnectors} × {status.safeShareKw} kW</span>
             </div>
           </div>
 
           <div className="w-full overflow-x-auto">
-            <div className="relative h-48 min-w-[800px]">
+            <div className="relative h-48 min-w-[640px]">
               <svg viewBox="0 0 1000 200" preserveAspectRatio="none" className="w-full h-full overflow-visible">
-                <line x1="0" y1="20" x2="1000" y2="20" stroke="var(--color-danger)" strokeDasharray="4 4" />
-                <text x="900" y="15" className="text-xs fill-danger">Site Limit {portfolio.limitKw} kW</text>
+                <line x1="0" y1={yOf(status.feedKw, yMax)} x2="1000" y2={yOf(status.feedKw, yMax)} stroke="var(--color-danger)" strokeDasharray="4 4" />
+                <text x="900" y={yOf(status.feedKw, yMax) - 5} className="text-xs fill-danger">Feed {status.feedKw} kW</text>
+                {status.contractedPeakKw !== status.feedKw && (
+                  <>
+                    <line x1="0" y1={yOf(status.contractedPeakKw, yMax)} x2="1000" y2={yOf(status.contractedPeakKw, yMax)} stroke="var(--color-ink)" strokeDasharray="6 3" />
+                    <text x="760" y={yOf(status.contractedPeakKw, yMax) - 5} className="text-xs fill-ink">Contracted peak {status.contractedPeakKw} kW</text>
+                  </>
+                )}
                 {portfolio.blockKw > 0 && (
                   <>
-                    <line x1="0" y1={180 - (portfolio.blockKw / portfolio.limitKw) * 160} x2="1000" y2={180 - (portfolio.blockKw / portfolio.limitKw) * 160} stroke="var(--color-solar)" strokeDasharray="2 4" />
-                    <text x="900" y={175 - (portfolio.blockKw / portfolio.limitKw) * 160} className="text-xs fill-solar">Tariff block {portfolio.blockKw} kW</text>
+                    <line x1="0" y1={yOf(portfolio.blockKw, yMax)} x2="1000" y2={yOf(portfolio.blockKw, yMax)} stroke="var(--color-solar)" strokeDasharray="2 4" />
+                    <text x="900" y={yOf(portfolio.blockKw, yMax) - 5} className="text-xs fill-solar">Tariff block {portfolio.blockKw} kW</text>
                   </>
                 )}
                 {[6, 10, 14, 18, 22].map((h) => (
                   <text key={h} x={((h - 6) / 16) * 1000} y="195" className="text-[10px] fill-ink-muted">{String(h).padStart(2, '0')}:00</text>
                 ))}
-                <polyline fill="none" stroke="var(--color-ink-muted)" strokeWidth="1" points={linePoints(data.siteDetail.meter_ticks, (t) => t.building, portfolio.limitKw)} />
-                <polyline fill="none" stroke="var(--color-solar)" strokeWidth="2" points={linePoints(data.siteDetail.meter_ticks, (t) => t.ev + t.building, portfolio.limitKw)} />
+                <polyline fill="none" stroke="var(--color-ink-muted)" strokeWidth="1" points={linePoints(siteDetail.meter_ticks, (t) => t.building, yMax)} />
+                <polyline fill="none" stroke="var(--color-solar)" strokeWidth="2" points={linePoints(siteDetail.meter_ticks, (t) => t.ev + t.building, yMax)} />
               </svg>
             </div>
           </div>
-          <div className="flex gap-4 text-xs text-ink-muted mt-2 justify-center">
-            <div className="flex items-center gap-1"><div className="w-3 h-0.5 bg-solar"></div> EV Load</div>
-            <div className="flex items-center gap-1"><div className="w-3 h-0.5 bg-ink-muted"></div> Building Load</div>
-            <div className="flex items-center gap-1"><div className="w-3 h-0.5 border-t border-dashed border-danger"></div> Hardware Capacity Limit</div>
+          <div className="flex flex-wrap gap-4 text-xs text-ink-muted mt-2 justify-center">
+            <div className="flex items-center gap-1"><div className="w-3 h-0.5 bg-solar"></div> Building + EV</div>
+            <div className="flex items-center gap-1"><div className="w-3 h-0.5 bg-ink-muted"></div> Building</div>
+            <div className="flex items-center gap-1"><div className="w-3 h-0.5 border-t border-dashed border-danger"></div> Feed</div>
+            <div className="flex items-center gap-1"><div className="w-3 h-0.5 border-t border-dashed border-solar"></div> Tariff block</div>
           </div>
         </div>
       </section>
 
-      {/* Site Status Table */}
+      {/* Site row */}
       <section>
-        <h2 className="text-lg font-medium text-ink mb-4">Site Status</h2>
-        <div className="border border-border bg-surface w-full text-sm">
-          <div className="grid grid-cols-8 border-b border-border bg-bg text-ink-muted text-xs uppercase tracking-wider p-4">
-            <div className="col-span-2">Site</div>
-            <div className="col-span-1">Status</div>
-            <div className="col-span-1 text-right">Connectors</div>
-            <div className="col-span-1 text-right">Charging</div>
-            <div className="col-span-1 text-right">Site Load</div>
-            <div className="col-span-1 text-right">At Risk</div>
-            <div className="col-span-1 text-right">Savings</div>
-          </div>
-          
-          {sites.map((site) => (
-            <div 
-              key={site.id} 
-              onClick={() => navigate('/ops/sites')}
-              className="grid grid-cols-8 items-center p-4 border-b border-border hover:bg-bg cursor-pointer transition-colors"
-            >
-              <div className="col-span-2 font-medium">{site.id}</div>
-              <div className="col-span-1">
-                <span className={`inline-flex items-center px-1.5 py-0.5 text-[10px] uppercase tracking-wide border ${site.status === 'Normal' ? 'bg-saved/10 text-saved border-saved/20' : 'bg-solar/10 text-solar border-solar/20'}`}>
-                  {site.status}
-                </span>
-              </div>
-              <div className="col-span-1 mono text-right">{site.connectors}</div>
-              <div className="col-span-1 mono text-right">{site.charging}</div>
-              <div className="col-span-1 mono text-right">{site.loadKw} / {site.limitKw}</div>
-              <div className="col-span-1 mono text-right text-danger">{site.risk > 0 ? site.risk : '-'}</div>
-              <div className="col-span-1 mono text-right text-saved">${site.savings}</div>
+        <h2 className="text-lg font-medium text-ink mb-4">Site</h2>
+        <div className="border border-border bg-surface w-full text-sm overflow-x-auto">
+          <div className="min-w-[640px]">
+            <div className="grid grid-cols-8 border-b border-border bg-bg text-ink-muted text-xs uppercase tracking-wider p-4">
+              <div className="col-span-2">Site</div>
+              <div className="col-span-1">Status</div>
+              <div className="col-span-1 text-right">Ports</div>
+              <div className="col-span-1 text-right">Charging</div>
+              <div className="col-span-1 text-right">Load / feed</div>
+              <div className="col-span-1 text-right">At risk</div>
+              <div className="col-span-1 text-right">Waiting</div>
             </div>
-          ))}
+            {sites.map((site) => (
+              <div key={site.id} onClick={() => navigate('/ops/sites')} className="grid grid-cols-8 items-center p-4 border-b border-border hover:bg-bg cursor-pointer transition-colors">
+                <div className="col-span-2 font-medium">{site.id}</div>
+                <div className="col-span-1">
+                  <span className={`inline-flex items-center px-1.5 py-0.5 text-[10px] uppercase tracking-wide border ${site.status === 'Normal' ? 'bg-saved/10 text-saved border-saved/20' : 'bg-solar/10 text-solar border-solar/20'}`}>{site.status}</span>
+                </div>
+                <div className="col-span-1 mono text-right">{site.connectors}</div>
+                <div className="col-span-1 mono text-right">{site.charging}</div>
+                <div className="col-span-1 mono text-right">{site.loadKw} / {site.limitKw}</div>
+                <div className="col-span-1 mono text-right text-danger">{site.risk > 0 ? site.risk : '-'}</div>
+                <div className="col-span-1 mono text-right">{status.waiting > 0 ? status.waiting : '-'}</div>
+              </div>
+            ))}
+          </div>
         </div>
       </section>
     </div>
diff --git a/web/src/pages/ImpactView.jsx b/web/src/pages/ImpactView.jsx
index 112e52d..a17a3c5 100644
--- a/web/src/pages/ImpactView.jsx
+++ b/web/src/pages/ImpactView.jsx
@@ -1,61 +1,101 @@
 import { useGlobalState } from '../context/GlobalStateContext';
 
-const Card = ({ label, value, saved }) => (
-  <div className="border border-border p-5 bg-surface flex flex-col justify-between">
+// metrics.md §2: EPA factors, all labelled estimate on screen
+const KG_PER_KM = 0.25;
+const KG_PER_TREE_10Y = 60;
+const KG_PER_LITRE = 2.31;
+
+const Card = ({ label, value, saved, note }) => (
+  <div className="border border-border p-4 md:p-5 bg-surface flex flex-col justify-between">
     <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">{label}</span>
-    <span className={`mono text-3xl font-medium ${saved ? 'text-saved' : 'text-ink'}`}>{value}</span>
+    <span className={`mono text-2xl md:text-3xl font-medium ${saved ? 'text-saved' : 'text-ink'}`}>{value}</span>
+    {note && <span className="text-[10px] text-ink-muted mt-1">{note}</span>}
   </div>
 );
 
-// Numbers come from GET /sites/{id}/impact: deltas vs the charge-immediately baseline, labelled estimates.
+// MOER buckets (g/kWh): 0 = renewable at the margin, < 200 = mostly clean, >= 200 = gas
+const bucket = (g) => (g === 0 ? 'clean' : g < 200 ? 'mixed' : 'dirty');
+const BUCKET_STYLE = { clean: 'bg-saved', mixed: 'bg-solar/60', dirty: 'bg-danger/25' };
+
 export default function ImpactView() {
   const { data } = useGlobalState();
-  const { impact, id: siteId } = data.siteDetail;
+  const { impact, id: siteId, meter_ticks } = data.siteDetail;
+  const { status, signal } = data;
   const perSession = impact.sessions ? impact.saved_kgco2 / impact.sessions : 0;
+  const kwhMax = Math.max(1, ...meter_ticks.map((t) => t.kwh));
+  const hours = meter_ticks.map((t) => ({ ...t, g: signal[t.time]?.gco2_per_kwh ?? null }));
+  const fee = impact.saved_usd * status.beta;
 
   return (
-    <div className="p-8 max-w-5xl mx-auto w-full">
-      <header className="mb-8 flex justify-between items-end border-b border-border pb-4">
+    <div className="p-4 md:p-8 max-w-5xl mx-auto w-full">
+      <header className="mb-6 md:mb-8 flex flex-wrap justify-between items-end gap-2 border-b border-border pb-4">
         <div>
-          <h1 className="text-2xl font-semibold text-ink">Business Impact</h1>
-          <p className="text-sm text-ink-muted mt-1">Noonshift vs Charge-Immediately Baseline (today, {siteId})</p>
+          <h1 className="text-2xl font-semibold text-ink">Energy & Impact</h1>
+          <p className="text-sm text-ink-muted mt-1">Today at {siteId} vs charge-immediately · {status.signalKind ?? '—'} signal{status.signalSource ? ` (${status.signalSource})` : ''}</p>
         </div>
-        <span className="text-[10px] uppercase tracking-wider text-ink-muted">estimate · metered vs baseline frozen at plug-in</span>
+        <a href={data.ledgerUrl} download className="text-xs uppercase tracking-wider px-3 py-1.5 border border-border hover:bg-bg transition-colors">
+          Export ledger (CSV)
+        </a>
       </header>
 
-      <div className="grid grid-cols-4 gap-6 mb-12">
-        <Card label="Energy Delivered" value={`${(impact.kwh / 1000).toFixed(2)} MWh`} />
-        <Card label="Estimated Cost Saved" value={`$${impact.saved_usd.toFixed(2)}`} saved />
-        <Card label="Sessions Counted" value={impact.sessions} />
-        <Card label="Estimated CO2 Avoided" value={`${impact.saved_kgco2.toFixed(1)} kg`} saved />
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-8 md:mb-12">
+        <Card label="Energy delivered" value={`${(impact.kwh / 1000).toFixed(2)} MWh`} note={`${impact.sessions} sessions`} />
+        <Card label="CO₂ avoided (est.)" value={`${impact.saved_kgco2.toFixed(1)} kg`} saved note={`${perSession.toFixed(2)} kg per session`} />
+        <Card label="Renewable-hour share" value={`${Math.round(impact.renewable_share * 100)}%`} saved note="kWh charged while the marginal source was renewable" />
+        <Card label="Cost saved (est.)" value={`$${impact.saved_usd.toFixed(2)}`} note={impact.health_usd != null ? `+ $${impact.health_usd.toFixed(2)} health damage avoided` : `Noonshift fee ${Math.round(status.beta * 100)} % = $${fee.toFixed(2)}`} />
       </div>
 
-      <section>
-        <h2 className="text-lg font-medium text-ink mb-6">Counterfactual Comparison</h2>
-        <div className="grid grid-cols-2 gap-8">
-          <div className="border border-border bg-surface p-6 flex flex-col gap-4">
-            <h3 className="font-semibold text-ink-muted uppercase tracking-wider text-xs text-center pb-4 border-b border-border">Baseline (Charge Immediately)</h3>
-            <p className="text-sm text-ink-muted">
-              Every car draws full power from the moment it plugs in, under the same feed. Same {impact.kwh.toFixed(1)} kWh delivered.
-            </p>
-          </div>
-          <div className="border-2 border-grid-blue bg-surface p-6 flex flex-col gap-4 relative shadow-[0_0_15px_rgba(59,130,246,0.1)]">
-            <h3 className="font-semibold text-grid-blue uppercase tracking-wider text-xs text-center pb-4 border-b border-border">Noonshift Scheduled</h3>
-            <div className="flex justify-between items-end">
-              <span className="text-sm text-ink-muted">Bill delta</span>
-              <span className="mono text-xl text-saved font-medium">−${impact.saved_usd.toFixed(2)}</span>
+      <section className="mb-8 md:mb-12">
+        <h2 className="text-lg font-medium text-ink mb-1">Charging by hour, coloured by how clean the grid was</h2>
+        <p className="text-xs text-ink-muted mb-4">Bars: kWh delivered per hour (meter). Colour: hourly mean of the marginal signal from <span className="mono">/grid/signal</span>.</p>
+        <div className="border border-border bg-surface p-4 md:p-6 overflow-x-auto">
+          <div className="min-w-[560px]">
+            <div className="flex items-end gap-1 h-40">
+              {hours.map((h) => (
+                <div key={h.time} className="flex-1 flex flex-col items-center justify-end h-full" title={`${String(h.time).padStart(2, '0')}:00 · ${h.kwh.toFixed(1)} kWh · ${h.g ?? '?'} g/kWh`}>
+                  <div className={`w-full ${h.g == null ? 'bg-border' : BUCKET_STYLE[bucket(h.g)]}`} style={{ height: `${(h.kwh / kwhMax) * 100}%`, minHeight: h.kwh > 0 ? 2 : 0 }}></div>
+                </div>
+              ))}
             </div>
-            <div className="flex justify-between items-end">
-              <span className="text-sm text-ink-muted">CO2 delta</span>
-              <span className="mono text-xl text-saved font-medium">−{impact.saved_kgco2.toFixed(1)} kg</span>
+            <div className="flex gap-1 mt-1">
+              {hours.map((h) => (
+                <div key={h.time} className="flex-1 text-center text-[9px] mono text-ink-muted">{h.time % 3 === 0 ? String(h.time).padStart(2, '0') : ''}</div>
+              ))}
             </div>
-            <div className="flex justify-between items-end">
-              <span className="text-sm text-ink-muted">Per session</span>
-              <span className="mono text-xl text-ink font-medium">{perSession.toFixed(2)} kg</span>
+            <div className="flex flex-wrap gap-4 text-[10px] uppercase tracking-wider text-ink-muted mt-4">
+              <span className="flex items-center gap-2"><span className="w-3 h-3 bg-saved"></span> 0 g/kWh — renewable at the margin</span>
+              <span className="flex items-center gap-2"><span className="w-3 h-3 bg-solar/60"></span> under 200 g/kWh</span>
+              <span className="flex items-center gap-2"><span className="w-3 h-3 bg-danger/25"></span> 200 g/kWh and above</span>
             </div>
           </div>
         </div>
       </section>
+
+      <section className="mb-8 md:mb-12">
+        <h2 className="text-lg font-medium text-ink mb-1">What {impact.saved_kgco2.toFixed(1)} kg CO₂ means</h2>
+        <p className="text-xs text-ink-muted mb-4">Estimates from EPA equivalence factors (metrics.md §2), computed from today's avoided CO₂.</p>
+        <div className="grid grid-cols-3 gap-4 md:gap-6">
+          <Card label="Km not driven (petrol car)" value={`${Math.round(impact.saved_kgco2 / KG_PER_KM)} km`} />
+          <Card label="Petrol not burned" value={`${(impact.saved_kgco2 / KG_PER_LITRE).toFixed(1)} L`} />
+          <Card label="Tree-years of growth" value={`${(impact.saved_kgco2 / KG_PER_TREE_10Y * 10).toFixed(1)}`} note="a seedling absorbs ~60 kg over 10 years" />
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-lg font-medium text-ink mb-4">Against charge-immediately</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
+          <div className="border border-border bg-surface p-6 flex flex-col gap-4">
+            <h3 className="font-semibold text-ink-muted uppercase tracking-wider text-xs text-center pb-4 border-b border-border">Baseline (charge immediately)</h3>
+            <p className="text-sm text-ink-muted">Every car draws full power from the moment it plugs in, under the same feed. Same {impact.kwh.toFixed(1)} kWh delivered. Peak {impact.baseline_peak_kw} kW (est.).</p>
+          </div>
+          <div className="border-2 border-grid-blue bg-surface p-6 flex flex-col gap-4 relative">
+            <h3 className="font-semibold text-grid-blue uppercase tracking-wider text-xs text-center pb-4 border-b border-border">Noonshift</h3>
+            <div className="flex justify-between items-end"><span className="text-sm text-ink-muted">CO₂</span><span className="mono text-xl text-saved font-medium">−{impact.saved_kgco2.toFixed(1)} kg</span></div>
+            <div className="flex justify-between items-end"><span className="text-sm text-ink-muted">Bill</span><span className="mono text-xl text-saved font-medium">−${impact.saved_usd.toFixed(2)}</span></div>
+            <div className="flex justify-between items-end"><span className="text-sm text-ink-muted">Peak</span><span className="mono text-xl text-ink font-medium">{impact.peak_kw} kW</span></div>
+          </div>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/web/src/pages/OpsDashboard.jsx b/web/src/pages/OpsDashboard.jsx
index 606d4e3..acdb081 100644
--- a/web/src/pages/OpsDashboard.jsx
+++ b/web/src/pages/OpsDashboard.jsx
@@ -1,189 +1,137 @@
 import { useState } from 'react';
 import { useGlobalState } from '../context/GlobalStateContext';
 import { useNavigate } from 'react-router-dom';
+import UrgencyControl from '../components/UrgencyControl';
 
-export default function OpsDashboard() {
-  const { data, triggerEvent } = useGlobalState();
-  const { siteDetail: site } = data;
-  const navigate = useNavigate();
-  
-  const [activeTab, setActiveTab] = useState('Live charging');
-  const [selectedConnectorId, setSelectedConnectorId] = useState(null);
-  const selectedConnector = selectedConnectorId ? site.connectors.find(c => c.id === selectedConnectorId) : null;
+const NEED_COPY = { declared: 'driver', history: 'bay history', site: 'site median' };
 
-  if (!site) return null;
+const Field = ({ label, children, tone = '' }) => (
+  <div className="flex justify-between gap-3 border-b border-border pb-2">
+    <span className="text-ink-muted">{label}</span>
+    <span className={`mono text-right ${tone}`}>{children}</span>
+  </div>
+);
 
-  const tabs = ['Overview', 'Live charging', 'Schedule', 'Chargers', 'Impact', 'Settings'];
+export default function OpsDashboard() {
+  const { data } = useGlobalState();
+  const { siteDetail: site, status } = data;
+  const navigate = useNavigate();
+  const [selectedId, setSelectedId] = useState(null);
+  const selected = selectedId ? site.connectors.find((c) => c.id === selectedId) : null;
 
   return (
-    <div className="flex flex-col h-screen max-h-screen">
-      
-      {/* HEADER & KPI STRIP */}
-      <header className="px-8 py-6 border-b border-border shrink-0 bg-surface">
-        <div className="flex justify-between items-end mb-4">
+    <div className="flex flex-col md:h-screen md:max-h-screen">
+      <header className="px-4 md:px-8 py-4 md:py-6 border-b border-border shrink-0 bg-surface">
+        <div className="flex flex-wrap justify-between items-end gap-4">
           <div>
-            <h1 className="text-2xl font-semibold text-ink">{site.id}</h1>
+            <h1 className="text-2xl font-semibold text-ink">{site.id} · live charging</h1>
+            <p className="text-sm text-ink-muted mt-1">{site.connectors.length} cars plugged in{status.waiting > 0 ? ` · ${status.waiting} waiting for a bay` : ''}</p>
           </div>
-          <div className="flex gap-8 text-right text-sm">
+          <div className="flex flex-wrap gap-6 md:gap-8 text-right text-sm">
             <div className="flex flex-col">
-              <span className="text-[10px] uppercase tracking-wider text-ink-muted">Status</span>
-              <span className="text-ink font-medium">Operational</span>
+              <span className="text-[10px] uppercase tracking-wider text-ink-muted">Mode</span>
+              <span className={`font-medium ${status.mode === 'live' ? 'text-saved' : 'text-solar'}`}>{status.mode}</span>
             </div>
             <div className="flex flex-col">
-              <span className="text-[10px] uppercase tracking-wider text-ink-muted">Site limit</span>
+              <span className="text-[10px] uppercase tracking-wider text-ink-muted">Feed</span>
               <span className="mono text-ink font-medium">{site.limitKw} kW</span>
             </div>
             <div className="flex flex-col">
-              <span className="text-[10px] uppercase tracking-wider text-ink-muted">Current EV load</span>
+              <span className="text-[10px] uppercase tracking-wider text-ink-muted">EV load</span>
               <span className="mono text-solar font-medium">{site.evLoadKw} kW</span>
             </div>
             <div className="flex flex-col">
-              <span className="text-[10px] uppercase tracking-wider text-ink-muted">Available</span>
-              <span className="mono text-ink font-medium">{site.limitKw - site.currentLoadKw} kW</span>
+              <span className="text-[10px] uppercase tracking-wider text-ink-muted">Headroom</span>
+              <span className="mono text-ink font-medium">{Math.max(0, site.limitKw - site.currentLoadKw)} kW</span>
             </div>
           </div>
         </div>
-        
-        {/* TABS */}
-        <div className="flex gap-6 mt-6">
-          {tabs.map(tab => (
-            <button 
-              key={tab}
-              onClick={() => setActiveTab(tab)}
-              className={`pb-2 text-sm font-medium border-b-2 transition-colors ${activeTab === tab ? 'border-grid-blue text-ink' : 'border-transparent text-ink-muted hover:text-ink'}`}
-            >
-              {tab}
-            </button>
-          ))}
-        </div>
       </header>
 
-      {/* MAIN CONTENT AREA */}
-      <main className="flex-1 flex overflow-hidden bg-bg">
-        
-        {activeTab === 'Live charging' ? (
-          <div className="flex-1 flex overflow-hidden">
-            
-            {/* GANTT CHART */}
-            <div className="flex-1 overflow-y-auto p-8 border-r border-border">
-              <div className="flex justify-between items-end mb-4">
-                <h2 className="text-lg font-medium text-ink">Site-Level Charging Plan</h2>
-                <div className="flex gap-4 text-[10px] uppercase tracking-wider text-ink-muted">
-                  <span className="flex items-center gap-1"><div className="w-3 h-3 bg-solar/20"></div> Planned</span>
-                  <span className="flex items-center gap-1"><div className="w-3 h-3 bg-grid-blue/80"></div> Actual</span>
-                  <span className="flex items-center gap-1"><div className="w-1.5 h-1.5 bg-ink rotate-45"></div> Deadline</span>
+      <main className="flex-1 flex flex-col md:flex-row md:overflow-hidden bg-bg">
+        {/* Gantt */}
+        <div className="flex-1 md:overflow-y-auto p-4 md:p-8 md:border-r border-border">
+          <div className="flex flex-wrap justify-between items-end gap-2 mb-4">
+            <h2 className="text-lg font-medium text-ink">Plan per bay, 06:00 → 22:00</h2>
+            <div className="flex flex-wrap gap-4 text-[10px] uppercase tracking-wider text-ink-muted">
+              <span className="flex items-center gap-1"><div className="w-3 h-3 bg-solar/20"></div> Planned</span>
+              <span className="flex items-center gap-1"><div className="w-3 h-3 bg-grid-blue/80"></div> Delivered</span>
+              <span className="flex items-center gap-1"><div className="w-1.5 h-1.5 bg-ink rotate-45"></div> Ready by</span>
+              <span className="flex items-center gap-1"><div className="w-[2px] h-3 bg-danger"></div> Urgent</span>
+            </div>
+          </div>
+
+          <div className="border border-border bg-surface flex flex-col overflow-x-auto">
+            <div className="min-w-[560px]">
+              <div className="flex border-b border-border bg-bg px-4 py-2">
+                <div className="w-20 text-xs text-ink-muted mono shrink-0">Bay</div>
+                <div className="flex-1 flex justify-between text-[10px] text-ink-muted mono">
+                  <span>06</span><span>08</span><span>10</span><span>12</span><span>14</span><span>16</span><span>18</span><span>20</span><span>22</span>
                 </div>
               </div>
 
-              <div className="border border-border bg-surface flex flex-col">
-                <div className="flex border-b border-border bg-bg px-4 py-2">
-                  <div className="w-16 text-xs text-ink-muted mono shrink-0">CN</div>
-                  <div className="flex-1 flex justify-between text-[10px] text-ink-muted mono">
-                    <span>06:00</span><span>08:00</span><span>10:00</span><span>12:00</span><span>14:00</span><span>16:00</span><span>18:00</span><span>20:00</span><span>22:00</span>
-                  </div>
-                </div>
-                
-                <div className="flex flex-col p-4 gap-2">
-                  {site.connectors.map(c => (
-                    <div 
-                      key={c.id} 
-                      onClick={() => setSelectedConnectorId(c.id)}
-                      className={`flex items-center gap-4 group cursor-pointer p-1 -mx-1 rounded transition-colors ${selectedConnector?.id === c.id ? 'bg-bg' : 'hover:bg-bg/50'}`}
-                    >
-                      <span className="mono text-xs w-12 shrink-0 text-ink-muted group-hover:text-ink">{c.id}</span>
-                      <div className="flex-1 h-6 relative bg-bg border border-border group-hover:border-ink/20 transition-colors">
-                        <div className="absolute top-0 bottom-0 bg-solar/20" style={{ left: `${c.startPct}%`, width: `${c.planWidth}%` }}>
-                          <div className="absolute top-1 bottom-1 left-0 bg-grid-blue/80" style={{ width: `${(c.actualWidth / c.planWidth) * 100}%` }}></div>
-                        </div>
-                        <div className="absolute top-1/2 -mt-1 w-2 h-2 bg-ink rotate-45" style={{ left: `${c.startPct + c.planWidth}%`, transform: 'translate(-50%, -50%) rotate(45deg)' }}></div>
-                        {c.hasBoost && <div className="absolute top-0 bottom-0 w-[2px] bg-danger" style={{ left: `${c.startPct + 5}%` }}></div>}
+              <div className="flex flex-col p-4 gap-2">
+                {site.connectors.length === 0 && <div className="text-sm text-ink-muted text-center py-8">No cars plugged in yet.</div>}
+                {site.connectors.map((c) => (
+                  <div key={c.id} onClick={() => setSelectedId(c.id)} className={`flex items-center gap-4 group cursor-pointer p-1 -mx-1 rounded transition-colors ${selected?.id === c.id ? 'bg-bg' : 'hover:bg-bg/50'}`}>
+                    <span className="mono text-xs w-16 shrink-0 text-ink-muted group-hover:text-ink flex flex-col leading-tight">
+                      {c.id}
+                      {c.asap && <span className="text-[9px] uppercase">asap</span>}
+                      {c.urgency && <span className="text-[9px] uppercase text-danger">{c.urgency}</span>}
+                    </span>
+                    <div className={`flex-1 h-6 relative bg-bg border transition-colors ${c.urgency ? 'border-danger' : c.risk === 'High' ? 'border-danger/50' : 'border-border group-hover:border-ink/20'}`}>
+                      <div className="absolute top-0 bottom-0 bg-solar/20" style={{ left: `${c.startPct}%`, width: `${c.planWidth}%` }}>
+                        <div className="absolute top-1 bottom-1 left-0 bg-grid-blue/80" style={{ width: `${(c.actualWidth / c.planWidth) * 100}%` }}></div>
                       </div>
+                      <div className="absolute top-1/2 w-2 h-2 bg-ink" style={{ left: `${c.startPct + c.planWidth}%`, transform: 'translate(-50%, -50%) rotate(45deg)' }}></div>
+                      {(c.hasBoost || c.urgency) && <div className="absolute top-0 bottom-0 w-[2px] bg-danger" style={{ left: `${c.startPct}%` }}></div>}
+                      {c.moveBy && <span className="absolute right-1 top-0 text-[9px] uppercase text-solar">move-by</span>}
                     </div>
-                  ))}
-                </div>
+                  </div>
+                ))}
               </div>
             </div>
+          </div>
+        </div>
 
-            {/* RIGHT SIDE PANEL */}
-            {selectedConnector && (
-              <aside className="w-80 shrink-0 bg-surface flex flex-col overflow-y-auto">
-                <div className="p-6 border-b border-border flex justify-between items-center sticky top-0 bg-surface z-10">
-                  <h2 className="text-xl font-semibold">{selectedConnector.id}</h2>
-                  <button onClick={() => setSelectedConnectorId(null)} className="text-ink-muted hover:text-ink text-sm">Close</button>
-                </div>
-                
-                <div className="p-6 flex flex-col gap-6">
-                  <div className="flex flex-col gap-1">
-                    <span className="text-[10px] uppercase tracking-wider text-ink-muted">Status</span>
-                    <span className={`inline-flex w-max items-center px-2 py-0.5 rounded text-[10px] uppercase font-mono ${selectedConnector.status === 'Charging' ? 'bg-solar/10 text-solar border border-solar/20' : selectedConnector.status === 'Paused' ? 'bg-danger/10 text-danger border border-danger/20' : 'bg-bg border border-border'}`}>{selectedConnector.status}</span>
-                  </div>
+        {/* Side panel */}
+        {selected && (
+          <aside className="md:w-80 shrink-0 bg-surface flex flex-col md:overflow-y-auto border-t md:border-t-0 border-border">
+            <div className="p-4 md:p-6 border-b border-border flex justify-between items-center sticky top-0 bg-surface z-10">
+              <h2 className="text-xl font-semibold">{selected.id} · session {selected.sessionId}</h2>
+              <button onClick={() => setSelectedId(null)} className="text-ink-muted hover:text-ink text-sm">Close</button>
+            </div>
 
-                  <div className="flex flex-col gap-3 text-sm">
-                    <div className="flex justify-between border-b border-border pb-2">
-                      <span className="text-ink-muted">Driver Name</span>
-                      <span className="font-medium">{selectedConnector.driver}</span>
-                    </div>
-                    <div className="flex justify-between border-b border-border pb-2">
-                      <span className="text-ink-muted">Car Model</span>
-                      <span className="font-medium">{selectedConnector.carModel}</span>
-                    </div>
-                    <div className="flex justify-between border-b border-border pb-2">
-                      <span className="text-ink-muted">License Plate</span>
-                      <span className="mono">{selectedConnector.licensePlate}</span>
-                    </div>
-                    <div className="flex justify-between border-b border-border pb-2">
-                      <span className="text-ink-muted">Energy required</span>
-                      <span className="mono">{selectedConnector.energyReq.toFixed(1)} kWh</span>
-                    </div>
-                    <div className="flex justify-between border-b border-border pb-2">
-                      <span className="text-ink-muted">Delivered</span>
-                      <span className="mono">{selectedConnector.delivered.toFixed(1)} kWh</span>
-                    </div>
-                    <div className="flex justify-between border-b border-border pb-2">
-                      <span className="text-ink-muted">Current power</span>
-                      <span className="mono">{selectedConnector.power.toFixed(1)} kW</span>
-                    </div>
-                    <div className="flex justify-between border-b border-border pb-2">
-                      <span className="text-ink-muted">Scheduled</span>
-                      <span className="mono">{selectedConnector.scheduled}</span>
-                    </div>
-                    <div className="flex justify-between border-b border-border pb-2">
-                      <span className="text-ink-muted">Ready by</span>
-                      <span className="mono">{selectedConnector.readyBy}</span>
-                    </div>
-                    <div className="flex justify-between border-b border-border pb-2">
-                      <span className="text-ink-muted">Deadline risk</span>
-                      <span className={`font-medium ${selectedConnector.risk === 'High' ? 'text-danger' : 'text-saved'}`}>{selectedConnector.risk}</span>
-                    </div>
-                  </div>
+            <div className="p-4 md:p-6 flex flex-col gap-6">
+              <div className="flex flex-col gap-1">
+                <span className="text-[10px] uppercase tracking-wider text-ink-muted">Status</span>
+                <span className={`inline-flex w-max items-center px-2 py-0.5 rounded text-[10px] uppercase font-mono ${selected.status === 'Charging' ? 'bg-solar/10 text-solar border border-solar/20' : 'bg-bg border border-border'}`}>{selected.status}</span>
+              </div>
 
-                  <div className="flex flex-col gap-3 mt-4">
-                    <button onClick={() => navigate('/ops/overview')} className="w-full text-xs uppercase tracking-wider border border-border py-2 hover:bg-bg transition-colors">Dashboard (Overview)</button>
-                    <button onClick={() => navigate('/ops/sessions')} className="w-full text-xs uppercase tracking-wider border border-border py-2 hover:bg-bg transition-colors">View session</button>
-                    <button onClick={() => navigate('/ops/schedules')} className="w-full text-xs uppercase tracking-wider border border-border py-2 hover:bg-bg transition-colors">Edit schedule</button>
-                    <button 
-                      onClick={() => triggerEvent('prioritize_connector', selectedConnector.id)}
-                      className="w-full text-xs uppercase tracking-wider bg-ink text-surface py-2 hover:opacity-90 transition-opacity"
-                    >
-                      Prioritize (Boost)
-                    </button>
-                    <button 
-                      onClick={() => triggerEvent('pause_connector', selectedConnector.id)}
-                      className="w-full text-xs uppercase tracking-wider border border-danger text-danger py-2 hover:bg-danger/5 transition-colors"
-                    >
-                      Pause
-                    </button>
-                  </div>
-                </div>
-              </aside>
-            )}
-          </div>
-        ) : (
-          <div className="p-8 flex flex-col justify-center items-center h-full w-full">
-            <h2 className="text-2xl font-medium text-ink mb-2">{activeTab}</h2>
-            <p className="text-ink-muted text-sm mb-6">This section displays the {activeTab.toLowerCase()} data for the selected site.</p>
-            <button onClick={() => setActiveTab('Live charging')} className="px-4 py-2 border border-border text-ink hover:bg-bg transition-colors text-sm">Return to Live charging</button>
-          </div>
+              <div className="flex flex-col gap-3 text-sm">
+                <Field label="Needs">{selected.energyReq.toFixed(1)} kWh <span className="text-ink-muted text-xs">({NEED_COPY[selected.needConfidence] ?? '—'})</span></Field>
+                <Field label="Delivered">{selected.delivered.toFixed(1)} kWh</Field>
+                <Field label="Power now">{selected.power.toFixed(1)} kW</Field>
+                <Field label="Plan cap">{selected.pMaxKw.toFixed(1)} kW{selected.capObserved && <span className="text-ink-muted text-xs"> (from the meter)</span>}</Field>
+                <Field label="Scheduled">{selected.scheduled}</Field>
+                <Field label="Ready by">{selected.readyBy}{selected.moveBy && <span className="text-solar text-xs"> move-by</span>}</Field>
+                <Field label="Urgency">{selected.urgency ?? '—'}</Field>
+                {selected.idleMin > 0 && <Field label="Idle since full">{selected.idleMin} min</Field>}
+                {selected.asap && <Field label="Bay">ASAP (never deferred)</Field>}
+                <Field label="Deadline risk" tone={selected.risk === 'High' ? 'text-danger font-medium' : 'text-saved'}>{selected.risk}</Field>
+              </div>
+
+              <div className="flex flex-col gap-3">
+                <span className="text-[10px] uppercase tracking-wider text-ink-muted">Set urgency for this driver</span>
+                {selected.status === 'Done' ? <span className="text-xs text-ink-muted">Car is full.</span> : <UrgencyControl sessionId={selected.sessionId} simTime={data.simTime} current={selected.urgency} compact />}
+              </div>
+
+              <div className="flex flex-col gap-2 mt-2">
+                <button onClick={() => navigate('/ops/sessions')} className="w-full text-xs uppercase tracking-wider border border-border py-2 hover:bg-bg transition-colors">All sessions</button>
+                <button onClick={() => navigate('/ops/schedules')} className="w-full text-xs uppercase tracking-wider border border-border py-2 hover:bg-bg transition-colors">Today's plan</button>
+              </div>
+            </div>
+          </aside>
         )}
       </main>
     </div>
diff --git a/web/src/pages/SchedulesView.jsx b/web/src/pages/SchedulesView.jsx
index 468ba66..c3d04cc 100644
--- a/web/src/pages/SchedulesView.jsx
+++ b/web/src/pages/SchedulesView.jsx
@@ -1,94 +1,102 @@
 import { useState, useEffect } from 'react';
 import { useGlobalState } from '../context/GlobalStateContext';
 
+// Planned site kW per hour from the current plan frame (site_kw per 5-min slot from horizon_start)
+const plannedByHour = (horizonStart, siteKw) => {
+  const out = Array(24).fill(null);
+  if (!horizonStart || !siteKw.length) return out;
+  const sums = Array(24).fill(0);
+  const counts = Array(24).fill(0);
+  const t0 = new Date(horizonStart).getTime();
+  siteKw.forEach((kw, k) => {
+    const h = new Date(t0 + k * 300000).getHours();
+    if (t0 + k * 300000 - t0 < 24 * 3600000) {
+      sums[h] += kw;
+      counts[h] += 1;
+    }
+  });
+  return sums.map((s, h) => (counts[h] ? s / counts[h] : null));
+};
+
+const bucket = (g) => (g == null ? '' : g === 0 ? 'bg-saved/15' : g < 200 ? 'bg-solar/10' : 'bg-danger/5');
+
 export default function SchedulesView() {
-  const { data, triggerEvent } = useGlobalState();
-  const { siteDetail } = data;
-  
-  const [timeAgo, setTimeAgo] = useState('0s');
+  const { data } = useGlobalState();
+  const { siteDetail, status, signal } = data;
+  const [ago, setAgo] = useState('—');
 
   useEffect(() => {
     if (!siteDetail?.solved_at) return;
-    const timer = setInterval(() => {
-      const diff = Math.floor((Date.now() - siteDetail.solved_at) / 1000);
-      setTimeAgo(`${diff}s`);
-    }, 1000);
-    return () => clearInterval(timer);
+    const tick = () => setAgo(`${Math.max(0, Math.floor((Date.now() - siteDetail.solved_at) / 1000))} s ago`);
+    tick();
+    const t = setInterval(tick, 1000);
+    return () => clearInterval(t);
   }, [siteDetail?.solved_at]);
 
-  const handleReoptimize = () => {
-    triggerEvent('reoptimize_start');
-    setTimeout(() => {
-      triggerEvent('reoptimize_end');
-    }, 2000); // 2 second mock optimization
-  };
+  const planned = plannedByHour(siteDetail.horizon_start, siteDetail.site_kw);
+  const metered = siteDetail.meter_ticks.map((t) => t.ev);
+  const yMax = Math.max(status.feedKw, 1);
+  const nowHour = data.simTime ? new Date(data.simTime).getHours() : null;
 
   return (
-    <div className="p-8 max-w-5xl mx-auto w-full">
-      <header className="mb-8 flex justify-between items-end border-b border-border pb-4">
+    <div className="p-4 md:p-8 max-w-5xl mx-auto w-full">
+      <header className="mb-6 md:mb-8 flex flex-wrap justify-between items-end gap-2 border-b border-border pb-4">
         <div>
-          <h1 className="text-2xl font-semibold text-ink">Optimization Control Center</h1>
-          <p className="text-sm text-ink-muted mt-1">Global scheduling engine status</p>
+          <h1 className="text-2xl font-semibold text-ink">Plan</h1>
+          <p className="text-sm text-ink-muted mt-1">Re-solved every 5 sim-minutes and on every event · reason: <span className="mono">{siteDetail.reason ?? '—'}</span></p>
         </div>
-        <button 
-          onClick={handleReoptimize}
-          disabled={siteDetail.isOptimizing}
-          className={`px-6 py-2 text-sm uppercase tracking-wider font-medium transition-colors ${siteDetail.isOptimizing ? 'bg-bg text-ink-muted border border-border cursor-wait' : 'bg-ink text-surface hover:opacity-90'}`}
-        >
-          {siteDetail.isOptimizing ? 'Optimizing...' : 'Re-optimize Now'}
-        </button>
       </header>
 
-      <div className="grid grid-cols-4 gap-6 mb-8">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-8">
         <div className="border border-border p-4 bg-surface flex flex-col justify-between">
-          <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">Algorithm Status</span>
-          <span className="mono text-xl font-medium">{siteDetail.isOptimizing ? 'Running (HiGHS)' : 'Idle'}</span>
+          <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">Last solved</span>
+          <span className="mono text-xl font-medium">{ago}</span>
         </div>
         <div className="border border-border p-4 bg-surface flex flex-col justify-between">
-          <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">Last Solved</span>
-          <span className="mono text-xl font-medium">{timeAgo} ago</span>
+          <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">Mode</span>
+          <span className={`mono text-xl font-medium ${status.mode === 'live' ? 'text-saved' : 'text-solar'}`}>{status.mode}</span>
         </div>
         <div className="border border-border p-4 bg-surface flex flex-col justify-between">
-          <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">Carbon Signal</span>
-          <span className="mono text-xl font-medium text-saved">Active (WattTime)</span>
+          <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">Carbon signal</span>
+          <span className="mono text-xl font-medium">{status.signalKind ?? '—'}</span>
+          <span className="text-[10px] text-ink-muted">{status.signalSource ?? ''}</span>
         </div>
         <div className="border border-border p-4 bg-surface flex flex-col justify-between">
-          <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">Tariff Data</span>
-          <span className="mono text-xl font-medium text-saved">Active (PG&E)</span>
+          <span className="text-[10px] uppercase tracking-wider text-ink-muted mb-1 block">Tariff</span>
+          <span className="mono text-sm font-medium">{status.tariffName ?? '—'}</span>
+          <span className="text-[10px] text-ink-muted">block {status.blockKw} kW</span>
         </div>
       </div>
 
       <section>
-        <h2 className="text-lg font-medium text-ink mb-4">24-Hour Optimization Window</h2>
-        <div className="border border-border bg-surface p-6 flex flex-col relative min-h-[300px]">
-          
-          <div className="absolute top-10 bottom-10 left-6 right-6 flex">
-            {/* 24 hour blocks */}
-            {Array.from({length: 24}).map((_, i) => (
-              <div key={i} className="flex-1 flex flex-col justify-end border-r border-border/30 relative group">
-                <div className="absolute bottom-[-24px] left-0 text-[10px] text-ink-muted font-mono">{i}:00</div>
-                
-                {/* Cost/Carbon background */}
-                {(i >= 9 && i <= 14) && (
-                  <div className="absolute inset-0 bg-saved/10"></div>
-                )}
-                {(i >= 16 && i <= 21) && (
-                  <div className="absolute inset-0 bg-danger/5"></div>
-                )}
-                
-                {/* Simulated Load Bar */}
-                <div 
-                  className="w-full bg-grid-blue/80 transition-all duration-500 ease-out"
-                  style={{ height: `${20 + Math.random() * (siteDetail.isOptimizing ? 10 : 60)}%` }}
-                ></div>
-              </div>
-            ))}
-          </div>
-
-          <div className="absolute bottom-2 left-6 flex gap-6 text-[10px] uppercase tracking-wider font-mono">
-            <span className="flex items-center gap-2"><div className="w-3 h-3 bg-saved/20 border border-saved/40"></div> Super Off-Peak / Clean</span>
-            <span className="flex items-center gap-2"><div className="w-3 h-3 bg-danger/10 border border-danger/20"></div> Peak / Dirty</span>
-            <span className="flex items-center gap-2"><div className="w-3 h-3 bg-grid-blue/80"></div> Scheduled Load</span>
+        <h2 className="text-lg font-medium text-ink mb-1">Today, hour by hour</h2>
+        <p className="text-xs text-ink-muted mb-4">Bars: planned EV kW (this plan) and metered EV kW (hours already run). Shading: the marginal signal from <span className="mono">/grid/signal</span>.</p>
+        <div className="border border-border bg-surface p-4 md:p-6 overflow-x-auto">
+          <div className="min-w-[640px]">
+            <div className="flex h-56 border-b border-border">
+              {Array.from({ length: 24 }, (_, h) => (
+                <div key={h} className={`flex-1 relative border-r border-border/30 ${bucket(signal[h]?.gco2_per_kwh)}`} title={`${String(h).padStart(2, '0')}:00 · planned ${planned[h]?.toFixed(1) ?? '—'} kW · metered ${metered[h].toFixed(1)} kW · ${signal[h]?.gco2_per_kwh ?? '?'} g/kWh`}>
+                  {nowHour === h && <div className="absolute inset-y-0 left-0 w-px bg-ink"></div>}
+                  <div className="absolute bottom-0 left-1 right-1 flex items-end gap-px h-full">
+                    <div className="flex-1 bg-grid-blue/40" style={{ height: `${Math.min(100, ((planned[h] ?? 0) / yMax) * 100)}%` }}></div>
+                    <div className="flex-1 bg-grid-blue" style={{ height: `${Math.min(100, (metered[h] / yMax) * 100)}%` }}></div>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="flex">
+              {Array.from({ length: 24 }, (_, h) => (
+                <div key={h} className="flex-1 text-[9px] mono text-ink-muted text-center pt-1">{h % 3 === 0 ? String(h).padStart(2, '0') : ''}</div>
+              ))}
+            </div>
+            <div className="flex flex-wrap gap-4 text-[10px] uppercase tracking-wider text-ink-muted mt-4">
+              <span className="flex items-center gap-2"><span className="w-3 h-3 bg-grid-blue/40"></span> planned EV kW</span>
+              <span className="flex items-center gap-2"><span className="w-3 h-3 bg-grid-blue"></span> metered EV kW</span>
+              <span className="flex items-center gap-2"><span className="w-3 h-3 bg-saved/15 border border-border"></span> 0 g/kWh</span>
+              <span className="flex items-center gap-2"><span className="w-3 h-3 bg-solar/10 border border-border"></span> under 200 g/kWh</span>
+              <span className="flex items-center gap-2"><span className="w-3 h-3 bg-danger/5 border border-border"></span> 200 g/kWh and above</span>
+              <span className="flex items-center gap-2"><span className="w-px h-3 bg-ink"></span> now</span>
+            </div>
           </div>
         </div>
       </section>
diff --git a/web/src/pages/SessionsView.jsx b/web/src/pages/SessionsView.jsx
index a58dac4..ac3707c 100644
--- a/web/src/pages/SessionsView.jsx
+++ b/web/src/pages/SessionsView.jsx
@@ -1,69 +1,82 @@
 import { useState } from 'react';
 import { useGlobalState } from '../context/GlobalStateContext';
+import UrgencyControl from '../components/UrgencyControl';
+
+const NEED_COPY = { declared: 'from the driver', history: 'this bay\'s history', site: 'site median' };
 
 export default function SessionsView() {
   const { data } = useGlobalState();
   const [filter, setFilter] = useState('All');
 
-  const filteredSessions = filter === 'All' ? data.sessions : data.sessions.filter(s => s.status === filter);
+  const rows = filter === 'All' ? data.sessions : data.sessions.filter((s) => s.status === filter);
 
   return (
-    <div className="p-8 max-w-7xl mx-auto w-full">
-      <header className="mb-8 flex justify-between items-end border-b border-border pb-4">
+    <div className="p-4 md:p-8 max-w-7xl mx-auto w-full">
+      <header className="mb-6 md:mb-8 flex flex-wrap justify-between items-end gap-2 border-b border-border pb-4">
         <div>
-          <h1 className="text-2xl font-semibold text-ink">Session Management</h1>
-          <p className="text-sm text-ink-muted mt-1">Live and historical charging sessions</p>
-        </div>
-        <div className="flex gap-4">
-          <input type="text" placeholder="Search sessions..." className="border border-border bg-surface text-sm p-2 outline-none w-64" />
+          <h1 className="text-2xl font-semibold text-ink">Sessions</h1>
+          <p className="text-sm text-ink-muted mt-1">Every plugged-in car today, live from the meter frames · {data.sessions.length} so far{data.status.waiting > 0 ? ` · ${data.status.waiting} waiting for a bay` : ''}</p>
         </div>
       </header>
 
-      <div className="flex gap-2 mb-6">
-        {['All', 'Charging', 'Waiting', 'Completed'].map(f => (
-          <button 
-            key={f} 
-            onClick={() => setFilter(f)}
-            className={`px-3 py-1 text-xs border rounded transition-colors ${filter === f ? 'bg-ink text-surface border-ink' : 'bg-surface text-ink-muted border-border hover:border-ink'}`}
-          >
+      <div className="flex flex-wrap gap-2 mb-6">
+        {['All', 'Charging', 'Waiting', 'Completed'].map((f) => (
+          <button key={f} onClick={() => setFilter(f)} className={`px-3 py-1 text-xs border rounded transition-colors ${filter === f ? 'bg-ink text-surface border-ink' : 'bg-surface text-ink-muted border-border hover:border-ink'}`}>
             {f}
           </button>
         ))}
       </div>
 
-      <div className="border border-border bg-surface w-full text-sm">
-        <div className="grid grid-cols-8 border-b border-border bg-bg text-ink-muted text-xs uppercase tracking-wider p-4">
-          <div className="col-span-1">Session</div>
-          <div className="col-span-1">Site</div>
-          <div className="col-span-1">Connector</div>
-          <div className="col-span-1">Arrival</div>
-          <div className="col-span-1">Energy</div>
-          <div className="col-span-1 text-center">Status</div>
-          <div className="col-span-1 text-center">Risk</div>
-          <div className="col-span-1 text-right">Action</div>
-        </div>
-        
-        <div className="flex flex-col h-[600px] overflow-y-auto">
-          {filteredSessions.map((s) => (
-            <div key={s.id} className="grid grid-cols-8 items-center p-4 border-b border-border hover:bg-bg transition-colors">
-              <div className="col-span-1 mono font-medium text-xs">{s.id}</div>
-              <div className="col-span-1 truncate pr-4">{s.site}</div>
-              <div className="col-span-1 mono text-xs">{s.connector}</div>
-              <div className="col-span-1 mono text-xs">{s.arrival}</div>
-              <div className="col-span-1 mono text-xs">{s.energy}</div>
-              <div className="col-span-1 text-center">
-                <span className={`inline-flex items-center px-1.5 py-0.5 text-[10px] uppercase tracking-wide border ${s.status === 'Completed' ? 'bg-saved/10 text-saved border-saved/20' : s.status === 'Charging' ? 'bg-solar/10 text-solar border-solar/20' : 'bg-bg text-ink-muted border-border'}`}>
-                  {s.status}
-                </span>
-              </div>
-              <div className="col-span-1 text-center">
-                <span className={`text-xs ${s.risk === 'High' ? 'text-danger font-medium' : 'text-ink-muted'}`}>{s.risk}</span>
-              </div>
-              <div className="col-span-1 text-right">
-                <button className="text-grid-blue hover:text-ink text-xs underline border-0 p-0">Details</button>
+      <div className="border border-border bg-surface w-full text-sm overflow-x-auto">
+        <div className="min-w-[960px]">
+          <div className="grid grid-cols-12 border-b border-border bg-bg text-ink-muted text-xs uppercase tracking-wider p-4">
+            <div className="col-span-1">Session</div>
+            <div className="col-span-1">Bay</div>
+            <div className="col-span-1">Arrived</div>
+            <div className="col-span-1">Ready by</div>
+            <div className="col-span-2">Energy · need from</div>
+            <div className="col-span-1 text-center">Urgency</div>
+            <div className="col-span-1 text-right">Idle</div>
+            <div className="col-span-1 text-center">Status</div>
+            <div className="col-span-1 text-center">Risk</div>
+            <div className="col-span-2 text-right">Set urgency</div>
+          </div>
+
+          <div className="flex flex-col max-h-[70vh] overflow-y-auto">
+            {rows.length === 0 && <div className="p-8 text-center text-sm text-ink-muted">No sessions {filter === 'All' ? 'yet' : `with status ${filter}`}.</div>}
+            {rows.map((s) => (
+              <div key={s.id} className={`grid grid-cols-12 items-center p-4 border-b border-border transition-colors ${s.risk === 'High' && s.status !== 'Completed' ? 'bg-danger/10 border-l-4 border-l-danger' : 'hover:bg-bg'}`}>
+                <div className="col-span-1 mono font-medium text-xs">{s.id}</div>
+                <div className="col-span-1 mono text-xs">
+                  {s.connector}
+                  {s.asap && <span className="ml-1 text-[9px] uppercase text-ink-muted border border-border px-1">asap bay</span>}
+                </div>
+                <div className="col-span-1 mono text-xs">{s.arrival}</div>
+                <div className="col-span-1 mono text-xs">
+                  {s.departure}
+                  {s.moveBy && <span className="ml-1 text-[9px] uppercase text-solar">move-by</span>}
+                </div>
+                <div className="col-span-2 text-xs">
+                  <span className="mono">{s.energy}</span>
+                  {s.needConfidence && <span className="ml-2 text-[10px] text-ink-muted">{NEED_COPY[s.needConfidence] ?? s.needConfidence}</span>}
+                  {s.capObserved && <span className="ml-2 text-[10px] text-ink-muted">· cap {s.pMaxKw} kW (meter)</span>}
+                </div>
+                <div className="col-span-1 text-center text-xs">{s.urgency ? <span className="text-solar">{s.urgency === 'now' ? 'leaving now' : s.urgency}</span> : <span className="text-ink-muted">—</span>}</div>
+                <div className="col-span-1 mono text-xs text-right">{s.idleMin > 0 ? `${s.idleMin} min` : '—'}</div>
+                <div className="col-span-1 text-center">
+                  <span className={`inline-flex items-center px-1.5 py-0.5 text-[10px] uppercase tracking-wide border ${s.status === 'Completed' ? 'bg-saved/10 text-saved border-saved/20' : s.status === 'Charging' ? 'bg-solar/10 text-solar border-solar/20' : 'bg-bg text-ink-muted border-border'}`}>
+                    {s.status}
+                  </span>
+                </div>
+                <div className="col-span-1 text-center">
+                  <span className={`text-xs ${s.risk === 'High' ? 'text-danger font-medium' : 'text-ink-muted'}`}>{s.risk}</span>
+                </div>
+                <div className="col-span-2 text-right">
+                  {s.status === 'Completed' ? <span className="text-xs text-ink-muted">—</span> : <UrgencyControl sessionId={s.sid} simTime={data.simTime} current={s.urgency} />}
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
       </div>
     </div>
diff --git a/web/src/pages/TariffsView.jsx b/web/src/pages/TariffsView.jsx
index 8d8e005..a40c422 100644
--- a/web/src/pages/TariffsView.jsx
+++ b/web/src/pages/TariffsView.jsx
@@ -1,65 +1,97 @@
+import { useGlobalState } from '../context/GlobalStateContext';
+
+// business.md §9b
+const PACKAGE_COPY = {
+  capacity: 'Capacity (the EMS): EV cap under the contracted peak, static share on every charger, NEC 625.42 documentation, move-by and done notifications.',
+  'clean-hours': 'Clean hours (the scheduler): marginal-carbon scheduling, receipts, hourly Scope 2 / Scope 3 ledger. No fixed fee; a share of measured savings.',
+  pilot: 'Pilot: both packages, one site, 90 days, free. The building\'s own bill before and after is the report.',
+};
+
+// Group consecutive hours with the same tariff price into periods (from GET /grid/signal)
+const periods = (signal) => {
+  const out = [];
+  for (const h of signal) {
+    const last = out[out.length - 1];
+    if (last && last.usd === h.usd_per_kwh) {
+      last.end = h.hour + 1;
+      last.g.push(h.gco2_per_kwh);
+    } else {
+      out.push({ start: h.hour, end: h.hour + 1, usd: h.usd_per_kwh, g: [h.gco2_per_kwh] });
+    }
+  }
+  return out;
+};
+
+const Row = ({ label, value, mono = true }) => (
+  <div className="flex justify-between gap-4 border-b border-border pb-3">
+    <span className="text-sm text-ink-muted">{label}</span>
+    <span className={`font-medium text-ink text-right ${mono ? 'mono' : ''}`}>{value}</span>
+  </div>
+);
+
 export default function TariffsView() {
+  const { data } = useGlobalState();
+  const { status, signal, siteDetail } = data;
+  const saved = siteDetail.impact.saved_usd;
+  const prices = signal.map((h) => h.usd_per_kwh);
+  const pmax = prices.length ? Math.max(...prices) : 0;
+
   return (
-    <div className="p-8 max-w-4xl mx-auto w-full">
-      <header className="mb-8 flex justify-between items-end border-b border-border pb-4">
-        <div>
-          <h1 className="text-2xl font-semibold text-ink">Tariff Management</h1>
-          <p className="text-sm text-ink-muted mt-1">Active utility rates defining scheduler constraints</p>
-        </div>
+    <div className="p-4 md:p-8 max-w-4xl mx-auto w-full">
+      <header className="mb-6 md:mb-8 border-b border-border pb-4">
+        <h1 className="text-2xl font-semibold text-ink">Tariffs & package</h1>
+        <p className="text-sm text-ink-muted mt-1">What the scheduler prices against, what the employee pays, and how today's saving is split</p>
       </header>
 
       <section className="mb-8">
-        <h2 className="text-lg font-medium text-ink mb-4">Active Tariff Profile</h2>
-        <div className="border border-border bg-surface p-6 flex flex-col gap-6">
-          <div className="flex justify-between border-b border-border pb-4">
-            <span className="text-sm text-ink-muted">Utility Provider</span>
-            <span className="font-medium text-ink">PG&E</span>
-          </div>
-          <div className="flex justify-between border-b border-border pb-4">
-            <span className="text-sm text-ink-muted">Rate Schedule</span>
-            <span className="mono font-medium text-ink">Business EV (BEV-2) Summer</span>
-          </div>
-          <div className="flex justify-between pb-2">
-            <span className="text-sm text-ink-muted">Subscription Block</span>
-            <span className="mono font-medium text-ink">150 kW</span>
-          </div>
+        <h2 className="text-lg font-medium text-ink mb-4">Site tariff</h2>
+        <div className="border border-border bg-surface p-4 md:p-6 flex flex-col gap-3">
+          <Row label="Rate schedule" value={status.tariffName ?? '—'} mono={false} />
+          <Row label="Tariff block" value={`${status.blockKw} kW`} />
+          <Row label="Feed" value={`${status.feedKw} kW`} />
+          <Row label="Contracted building peak" value={`${status.contractedPeakKw} kW`} />
+          <Row label="Grid signal" value={status.signalKind ? `${status.signalKind}${status.signalSource ? ` · ${status.signalSource}` : ''}` : '—'} mono={false} />
         </div>
       </section>
 
+      <section className="mb-8">
+        <h2 className="text-lg font-medium text-ink mb-4">Employee price and today's split (business.md §7b)</h2>
+        <div className="border border-border bg-surface p-4 md:p-6 flex flex-col gap-3">
+          <Row label="Employee rate R" value={status.rateR > 0 ? `$${status.rateR.toFixed(2)} / kWh` : 'free'} />
+          <Row label="Driver share α" value={`${Math.round(status.alpha * 100)} % of measured saving, as a discount below R`} mono={false} />
+          <Row label="Noonshift share β" value={`${Math.round(status.beta * 100)} % of measured saving`} mono={false} />
+          <Row label="Measured saving today" value={`$${saved.toFixed(2)}`} />
+          <Row label="→ driver pool" value={`$${(saved * status.alpha).toFixed(2)}`} />
+          <Row label="→ Noonshift fee" value={`$${(saved * status.beta).toFixed(2)}`} />
+          <Row label="→ site keeps" value={`$${(saved * (1 - status.alpha - status.beta)).toFixed(2)}`} />
+          <p className="text-xs text-ink-muted pt-1">Emergency bands pay exactly R. Nothing is ever billed above R. On a day that saves nothing, the fee is nothing.</p>
+        </div>
+      </section>
+
+      <section className="mb-8">
+        <h2 className="text-lg font-medium text-ink mb-4">Package: {status.package}</h2>
+        <div className="border border-border bg-surface p-4 md:p-6 text-sm text-ink">{PACKAGE_COPY[status.package] ?? status.package}</div>
+      </section>
+
       <section>
-        <h2 className="text-lg font-medium text-ink mb-4">Time-of-Use Periods</h2>
-        <div className="border border-border bg-surface w-full text-sm">
-          <div className="grid grid-cols-3 border-b border-border bg-bg text-ink-muted text-xs uppercase tracking-wider p-4">
-            <div className="col-span-1">Period</div>
-            <div className="col-span-1 text-center">Hours</div>
-            <div className="col-span-1 text-right">Energy Rate ($/kWh)</div>
-          </div>
-          
-          <div className="grid grid-cols-3 items-center p-4 border-b border-border">
-            <div className="col-span-1 font-medium flex items-center gap-2">
-              <div className="w-2 h-2 rounded-full bg-saved"></div>
-              Super Off-Peak
-            </div>
-            <div className="col-span-1 text-center mono text-ink-muted">09:00 - 14:00</div>
-            <div className="col-span-1 text-right mono">$0.18</div>
-          </div>
-          
-          <div className="grid grid-cols-3 items-center p-4 border-b border-border">
-            <div className="col-span-1 font-medium flex items-center gap-2">
-              <div className="w-2 h-2 rounded-full bg-ink-muted"></div>
-              Off-Peak
-            </div>
-            <div className="col-span-1 text-center mono text-ink-muted">00:00 - 09:00<br/>14:00 - 16:00<br/>21:00 - 00:00</div>
-            <div className="col-span-1 text-right mono">$0.24</div>
-          </div>
-          
-          <div className="grid grid-cols-3 items-center p-4">
-            <div className="col-span-1 font-medium flex items-center gap-2">
-              <div className="w-2 h-2 rounded-full bg-danger"></div>
-              Peak
+        <h2 className="text-lg font-medium text-ink mb-4">Time-of-use periods today</h2>
+        <div className="border border-border bg-surface w-full text-sm overflow-x-auto">
+          <div className="min-w-[480px]">
+            <div className="grid grid-cols-4 border-b border-border bg-bg text-ink-muted text-xs uppercase tracking-wider p-4">
+              <div>Hours</div>
+              <div className="text-right">Energy $/kWh</div>
+              <div className="text-right">Mean gCO₂/kWh</div>
+              <div className="text-right">Rank</div>
             </div>
-            <div className="col-span-1 text-center mono text-ink-muted">16:00 - 21:00</div>
-            <div className="col-span-1 text-right mono text-danger">$0.45</div>
+            {periods(signal).map((p) => (
+              <div key={p.start} className="grid grid-cols-4 items-center p-4 border-b border-border">
+                <div className="mono text-ink-muted">{String(p.start).padStart(2, '0')}:00 – {String(p.end).padStart(2, '0')}:00</div>
+                <div className={`text-right mono ${p.usd === pmax ? 'text-danger' : ''}`}>${p.usd.toFixed(2)}</div>
+                <div className="text-right mono">{Math.round(p.g.reduce((a, b) => a + b, 0) / p.g.length)}</div>
+                <div className="text-right text-xs text-ink-muted">{p.usd === Math.min(...prices) ? 'cheapest' : p.usd === pmax ? 'peak' : 'mid'}</div>
+              </div>
+            ))}
+            {signal.length === 0 && <div className="p-8 text-center text-sm text-ink-muted">No tariff loaded — backend offline.</div>}
           </div>
         </div>
       </section>