feat(peripheral-demo): add Sensor Data card to operator view

- Add humidity and airPressure fields to AppState (nullable, default null)
- Add setHumidity and setAirPressure mutations to state
- Parse humidity and air_pressure readings from peripheral WS messages
- Add Sensor Data glass card to operator screen with temperature, humidity, air pressure
- Show "No Data" fallback until first WS message arrives
- Handle nullable temperature in public view temperature pill

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: nicomiguelino

edge-apps/peripheral-integration-demo/index.html

@@ -251,6 +251,48 @@
                 </div>
               </div>
             </div>
+
+            <!-- Sensor Data -->
+            <div class="glass-card glass-card--left">
+              <div class="glass-card-heading">
+                <!-- Activity icon -->
+                <svg
+                  class="glass-card-icon"
+                  width="48"
+                  height="48"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+                </svg>
+                <span class="glass-card-title">Sensor Data</span>
+              </div>
+
+              <div class="operator-grid">
+                <div class="operator-field">
+                  <span class="operator-label">Temperature</span>
+                  <span id="sensor-temperature" class="operator-value"
+                    >No Data</span
+                  >
+                </div>
+                <div class="operator-field">
+                  <span class="operator-label">Humidity</span>
+                  <span id="sensor-humidity" class="operator-value"
+                    >No Data</span
+                  >
+                </div>
+                <div class="operator-field">
+                  <span class="operator-label">Air Pressure</span>
+                  <span id="sensor-air-pressure" class="operator-value"
+                    >No Data</span
+                  >
+                </div>
+              </div>
+            </div>
           </div>
 
           <!-- Maintenance Screen -->

edge-apps/peripheral-integration-demo/src/core/screen.ts

@@ -52,7 +52,8 @@ function syncScreensToState(state: ReturnType<typeof getState>) {
   }
 
   const publicTemp = getEl('public-temperature')
-  publicTemp.textContent = `${Math.round(state.temperature)}°C`
+  publicTemp.textContent =
+    state.temperature !== null ? `${Math.round(state.temperature)}°C` : '--'
 
   if (state.currentScreen === 'maintenance') {
     getEl('maintenance-network').textContent = getNetworkStatus()

edge-apps/peripheral-integration-demo/src/core/state.ts

@@ -4,14 +4,18 @@ export interface AppState {
   currentScreen: ScreenType
   timezone: string
   locale: string
-  temperature: number
+  temperature: number | null
+  humidity: number | null
+  airPressure: number | null
 }
 
 const state: AppState = {
   currentScreen: 'public',
   timezone: 'UTC',
   locale: 'en',
-  temperature: 22,
+  temperature: null,
+  humidity: null,
+  airPressure: null,
 }
 
 type Listener = (state: AppState) => void
@@ -50,6 +54,16 @@ export function setTemperature(value: number) {
   notify()
 }
 
+export function setHumidity(value: number) {
+  state.humidity = value
+  notify()
+}
+
+export function setAirPressure(value: number) {
+  state.airPressure = value
+  notify()
+}
+
 export function getState(): Readonly<AppState> {
   return { ...state }
 }

edge-apps/peripheral-integration-demo/src/features/operator-dashboard.ts

@@ -92,17 +92,33 @@ function stopUpdates() {
   }
 }
 
+function updateSensorData(state: ReturnType<typeof getState>) {
+  getEl('sensor-temperature').textContent =
+    state.temperature !== null
+      ? `${Math.round(state.temperature)}°C`
+      : 'No Data'
+  getEl('sensor-humidity').textContent =
+    state.humidity !== null ? `${Math.round(state.humidity)}%` : 'No Data'
+  getEl('sensor-air-pressure').textContent =
+    state.airPressure !== null
+      ? `${Math.round(state.airPressure)} hPa`
+      : 'No Data'
+}
+
 function onStateChange(state: ReturnType<typeof getState>) {
   if (state.currentScreen === 'operator') {
     startUpdates()
   } else {
     stopUpdates()
   }
+  updateSensorData(state)
 }
 
 export function initOperatorDashboard() {
   subscribe(onStateChange)
-  if (getState().currentScreen === 'operator') startUpdates()
+  const state = getState()
+  if (state.currentScreen === 'operator') startUpdates()
+  updateSensorData(state)
 }
 
 export function updateOperatorDashboard() {

edge-apps/peripheral-integration-demo/src/features/peripherals.ts

@@ -1,7 +1,12 @@
 import { createPeripheralClient } from '@screenly/edge-apps'
 import type { PeripheralStateMessage } from '@screenly/edge-apps'
 
-import { getState, setTemperature } from '../core/state'
+import {
+  getState,
+  setTemperature,
+  setHumidity,
+  setAirPressure,
+} from '../core/state'
 import { showWelcomeThenSwitch } from '../core/screen'
 import { restartLogoutTimer } from '../core/timer'
 import { authenticate } from './authenticate'
@@ -21,6 +26,16 @@ export function initPeripherals() {
       setTemperature(tempReading.ambient_temperature as number)
     }
 
+    const humidityReading = readings.find((r) => 'humidity' in r)
+    if (humidityReading) {
+      setHumidity(humidityReading.humidity as number)
+    }
+
+    const pressureReading = readings.find((r) => 'air_pressure' in r)
+    if (pressureReading) {
+      setAirPressure(pressureReading.air_pressure as number)
+    }
+
     const cardReading = readings.find((r) => 'secure_card' in r)
     if (cardReading) {
       const MAX_CARD_AGE_MS = 60_000