feat(peripheral-demo): add Raw Peripheral State card to maintenance view

- Install highlight.js for JSON syntax highlighting
- Store last peripheral WebSocket message in module-level state
- Add Raw Peripheral State glass card to maintenance screen
- Render highlighted JSON via highlight.js (Monokai theme) on maintenance view load

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

Author: nicomiguelino

edge-apps/peripheral-integration-demo/bun.lock

@@ -363,6 +363,30 @@
                 </div>
               </div>
             </div>
+
+            <div class="glass-card glass-card--left">
+              <div class="glass-card-heading">
+                <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="16 18 22 12 16 6" />
+                  <polyline points="8 6 2 12 8 18" />
+                </svg>
+                <span class="glass-card-title">Raw Peripheral State</span>
+              </div>
+              <pre
+                id="maintenance-raw-state"
+                class="maintenance-raw-state"
+              ><code class="language-json">No data yet</code></pre>
+            </div>
           </div>
         </main>
 

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

@@ -31,5 +31,8 @@
     "npm-run-all2": "^8.0.4",
     "prettier": "^3.8.1",
     "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "highlight.js": "^11.11.1"
   }
 }

edge-apps/peripheral-integration-demo/package.json

@@ -6,15 +6,25 @@ import {
   getTimeZone,
 } from '@screenly/edge-apps'
 import { Hardware } from '@screenly/edge-apps'
+import hljs from 'highlight.js/lib/core'
+import json from 'highlight.js/lib/languages/json'
 
-import { subscribe, getState, setScreen, type ScreenType } from './state'
+import {
+  subscribe,
+  getState,
+  setScreen,
+  type ScreenType,
+  getLastPeripheralState,
+} from './state'
 import {
   waitForScreenDataPrepared,
   dispatchScreenDataPrepared,
 } from './screen-events'
 import { getNetworkStatus } from '../utils/network'
 import { updateOperatorDashboard } from '../features/operator-dashboard'
 
+hljs.registerLanguage('json', json)
+
 function delay(ms: number): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, ms))
 }
@@ -79,6 +89,14 @@ async function loadMaintenanceInfo() {
   } catch {
     getEl('maintenance-timezone').textContent = '—'
   }
+
+  const rawState = getLastPeripheralState()
+  const codeEl = getEl('maintenance-raw-state').querySelector('code')!
+  if (rawState) {
+    codeEl.innerHTML = hljs.highlight(JSON.stringify(rawState, null, 2), {
+      language: 'json',
+    }).value
+  }
 }
 
 async function preloadScreenData(role: ScreenType): Promise<void> {

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

@@ -65,3 +65,13 @@ export function setSensorReadings(readings: {
 export function getState(): Readonly<AppState> {
   return { ...state }
 }
+
+let lastPeripheralState: unknown = null
+
+export function setLastPeripheralState(raw: unknown) {
+  lastPeripheralState = raw
+}
+
+export function getLastPeripheralState(): unknown {
+  return lastPeripheralState
+}

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

@@ -370,6 +370,14 @@ auto-scaler {
 
 /* Maintenance rows */
 
+#screen-maintenance {
+  flex: 1;
+}
+
+#screen-maintenance .glass-card:last-child {
+  flex: 0 1 auto;
+}
+
 .maintenance-rows {
   display: flex;
   flex-direction: column;
@@ -425,3 +433,20 @@ auto-scaler {
   font-weight: 600;
   color: #e33876;
 }
+
+.maintenance-raw-state {
+  width: 100%;
+  flex: 1;
+  overflow: hidden;
+  border-radius: 16px;
+  font-size: 18px;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.maintenance-raw-state code {
+  display: block;
+  height: 100%;
+  padding: 1.5rem;
+  white-space: pre;
+}

edge-apps/peripheral-integration-demo/src/css/style.css

@@ -1,7 +1,11 @@
 import { createPeripheralClient } from '@screenly/edge-apps'
 import type { PeripheralStateMessage } from '@screenly/edge-apps'
 
-import { getState, setSensorReadings } from '../core/state'
+import {
+  getState,
+  setSensorReadings,
+  setLastPeripheralState,
+} from '../core/state'
 import { showWelcomeThenSwitch } from '../core/screen'
 import { restartLogoutTimer } from '../core/timer'
 import { authenticate } from './authenticate'
@@ -14,6 +18,8 @@ export function initPeripherals() {
   client.register(edgeAppId)
 
   client.watchState((msg: PeripheralStateMessage) => {
+    setLastPeripheralState(msg.request.edge_app_source_state)
+
     const readings = msg.request.edge_app_source_state.states
 
     const tempReading = readings.find((r) => 'ambient_temperature' in r)

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

@@ -1,4 +1,5 @@
 import './css/style.css'
+import 'highlight.js/styles/monokai.css'
 import '@screenly/edge-apps/components'
 
 import {