DUNGEONS-34: keep host screen awake while streaming

Co-authored-by: multica-agent <github@multica.ai>

frontend/pages/host.vue

@@ -47,6 +47,8 @@ const qr = ref(""),
 const apiError = useApiError();
 let timer: ReturnType<typeof setInterval>;
 const live = computed(() => state.value === "live");
+const hosting = computed(() => state.value !== "offline");
+const { status: wakeStatus, retry: retryWakeLock } = useHostWakeLock(hosting);
 const elapsed = computed(() => {
   const seconds = status.value?.since
     ? Math.max(0, Math.floor(tick.value / 1000) - status.value.since)
@@ -239,6 +241,14 @@ async function fullscreen() {
         </div>
       </section>
       <aside class="host-aside">
+        <section class="content-panel">
+          <div class="section-heading"><h2>{{ $t("wake.section") }}</h2></div>
+          <KeepHostAwakeSetting />
+          <p class="muted" role="status">{{ $t(`wake.${wakeStatus}`) }}</p>
+          <GlassButton v-if="wakeStatus === 'unavailable'" class="small-button" @click="retryWakeLock">
+            {{ $t("wake.retry") }}
+          </GlassButton>
+        </section>
         <GlassCard class="share-panel"
           ><div class="section-heading">
             <h2>{{ $t("host.connectDevice") }}</h2>