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>

frontend/pages/settings/general.vue

@@ -6,6 +6,7 @@ import {
   Globe2,
   Palette,
   ShieldCheck,
+  Monitor,
 } from "lucide-vue-next";
 const { locale, setLocale, t } = useI18n();
 useHead({ title: computed(() => `${t("general.title")} · Webka`) });
@@ -113,6 +114,12 @@ const colors = [
         <span class="status-dot live" />
       </div>
     </section>
+    <section class="content-panel">
+      <div class="section-heading">
+        <h2><Monitor :size="21" />{{ $t("wake.section") }}</h2>
+      </div>
+      <KeepHostAwakeSetting />
+    </section>
     <p class="settings-footnote">{{ $t("general.savedLocally") }}</p>
   </div>
 </template>