Kiosk: Home button in own header when embedded in the kiosk shell

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

frontend/src/pages/Kiosk.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { Thermometer, CheckSquare, X } from 'lucide-react'
+import { Thermometer, CheckSquare, X, Home } from 'lucide-react'
 import { kioskLogin, kioskFetchStatus, kioskFetchConfig, KioskSessionError } from '../api'
 import type { ActiveAcTemplate, DeviceSummary, ZoneStatus } from '../types'
 import { KIOSK_DEVICE_TYPES, DEFAULT_HVAC_TEMPLATE } from '../types'
@@ -13,6 +13,14 @@ import KioskBulkPanel from '../components/KioskBulkPanel'
 // data is already push/poll-cached (MQTT for TRV/MHI, a 60s poller for Daikin).
 const POLL_MS = 12_000
 
+// Inside the portal's shared kiosk shell (/kiosk) the shell has no bar of its
+// own — each kiosk screen carries a Home button that asks it to go back to the
+// app list. Standalone (own /hvac/kiosk URL) there's nothing to go back to.
+const EMBEDDED = window.self !== window.top
+function goHome() {
+  window.parent.postMessage({ type: 'hnf:kiosk-home' }, window.location.origin)
+}
+
 function liveDevicesOf(zone: ZoneStatus): DeviceSummary[] {
   return zone.devices.filter(d => KIOSK_DEVICE_TYPES.includes(d.device_type))
 }
@@ -194,6 +202,11 @@ export default function Kiosk() {
   return (
     <div className="kiosk-shell">
       <header className="kiosk-header">
+        {EMBEDDED && (
+          <button className="btn btn-sm" onClick={goHome} aria-label="Back to home">
+            <Home size={14} strokeWidth={1.75} /> Home
+          </button>
+        )}
         <span className="kiosk-header-title">
           <Thermometer size={18} strokeWidth={1.75} /> HVAC Kiosk
         </span>