Organize host and robot streaming releases

host/robot-command-center/frontend/src/views/VideoView.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import VideoPanel from '@/components/VideoPanel.vue'
+import { t } from '@/lib/locale'
+import { useMonitoringData } from '@/composables/useMonitoringData'
+
+const { video, network, errorMessage, headerStatus } = useMonitoringData()
+</script>
+
+<template>
+  <div class="page-shell">
+    <header class="page-header">
+      <div>
+        <p class="eyebrow">{{ t('videoView.eyebrow') }}</p>
+        <h1>{{ t('videoView.title') }}</h1>
+      </div>
+      <p class="description">{{ t('videoView.description') }}</p>
+    </header>
+
+    <section class="banner" :class="{ error: !!errorMessage }">
+      {{ headerStatus }}
+    </section>
+
+    <VideoPanel :video="video" :network="network" />
+  </div>
+</template>
+
+<style scoped>
+.page-shell {
+  display: grid;
+  gap: 22px;
+}
+
+.page-header {
+  display: grid;
+  gap: 10px;
+}
+
+.eyebrow {
+  margin: 0;
+  color: #8da2fb;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+h1 {
+  margin: 0;
+  font-size: clamp(28px, 4vw, 48px);
+}
+
+.description,
+.banner {
+  margin: 0;
+  color: #d5dbee;
+  line-height: 1.75;
+}
+
+.banner {
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: rgba(11, 19, 35, 0.84);
+  border: 1px solid rgba(133, 147, 169, 0.2);
+}
+
+.banner.error {
+  color: #ffd0d0;
+  border-color: rgba(255, 107, 107, 0.28);
+}
+</style>