@7365admin1/layer-common 4.52.0 → 4.54.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.54.0
+
+### Minor Changes
+
+- 6bfc7d1: Robots (PadBot S2 and all brands): a robot no longer vanishes from the map on one missed or failed reading - the last position is kept for up to 15 s, drawn faded with "last seen N s ago", then "Reconnecting"; the floor becomes unknown only when the robot says so; an online robot without a position reads "Position not reported right now". Patrol routes whose stops cannot be placed on the plan are listed ("Stops: Gate → Lobby"), never drawn at a guessed spot; when the brand keeps schedules to itself (`scheduleShared: false`) the panel says so and shows recent patrol runs plus a clearly labelled guess ("Looks like ... runs daily around 20:00"). Live view opens in the page (HD / Smooth, re-minted before expiry, never stored; iframe / native video / "Open in new tab" / RTMP explanation), also from the fleet row menu. Alert photos ("Photo", "Thermal photo") on the fault bar and Alerts rows. Go to point / Set position pick from the robot's saved points when its maps list them (`go-to-point`; Set position only on the robot's floor, with a confirmation line). Manual control (only when the server reports `manualDrive` and the user can update robots): hold-to-move with a big STOP, head controls, heartbeat-guarded session that ends on release, tab hide, close or connection loss.
+
+## 4.53.0
+
+### Minor Changes
+
+- 74aabc6: PadBot security robots on the HERO robot screens: Add robot labels the fields "AccessKey ID" / "AccessKey Secret" and picks the robot from the account; robot detail offers Start patrol / Resume patrol (brands with `patrolControl`), Live video (minted per click), Mark resolved on an alarm, an ALARM badge for security alerts, and a Patrol history panel. Pause / Resume now need the brand's `pauseResume`, Cancel its `pauseProcess` (no change for existing brands).
+
 ## 4.52.0
 
 ### Minor Changes
@@ -1557,11 +1569,11 @@
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                  GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                  GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                      GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                      GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                  owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                  staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                      owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                      staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/assets/css/robot-hero.css

@@ -757,7 +757,7 @@
 .hero .v-btn.hero-ghost { color: var(--hero-accent); padding-inline: 4px; }
 .hero .v-btn.hero-ghost:hover { background: color-mix(in srgb, var(--hero-accent) 10%, transparent); }
 
-.hero-faultbar { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border: 2px solid var(--hero-accent); }
+.hero-faultbar { display: grid; grid-template-columns: auto 1fr; grid-auto-flow: column; grid-auto-columns: auto; gap: 14px; align-items: center; padding: 12px 14px; border: 2px solid var(--hero-accent); }
 .hero-faultbar__code { font-family: var(--hero-font); font-weight: 800; color: var(--hero-accent); font-size: 18px; }
 .hero-faultbar__msg { font-weight: 600; }
 .hero-faultbar__since { opacity: 0.65; font-size: 12px; }
@@ -1234,3 +1234,26 @@ div.hero-editor__wp.hero-editor__sel, div.hero-editor__fid.hero-editor__sel { ou
   }
   .hero-cell__shimmer { display: none; }
 }
+
+/* PadBot security extras: live video button row under the facts. */
+.hero-detail__video { margin: 10px 0 4px; }
+
+/* A kept (stale) reading: faded, no ping - never drawn as live (owner 2026-09-26). */
+.hero-bot--stale, .hero-me--stale { opacity: 0.45; }
+.hero-bot--stale .hero-bot__ping, .hero-bot--stale .hero-bmap__ping, .hero-me--stale .hero-me__ping, .hero-me--stale .hero-me__radar { display: none; }
+.hero-sched__hint { font-size: 12px; font-style: italic; opacity: 0.75; margin: 4px 0; }
+
+/* Live view / manual control / point picker dialogs */
+.hero-live__head { display: flex; align-items: center; gap: 8px; }
+.hero-live__quality button, .hero-drive__head button, .hero-pick__point { border: 1px solid var(--hero-line, currentColor); background: none; color: inherit; font: inherit; padding: 4px 10px; cursor: pointer; }
+.hero-live__quality button[aria-pressed="true"], .hero-pick__point[aria-pressed="true"] { background: var(--hero-accent); color: var(--hero-bg); }
+.hero-live__stage { min-height: 240px; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; }
+.hero-live__video { width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
+.hero-live__copy { margin-top: 8px; }
+.hero-live__open { align-self: center; }
+.hero-drive__stop { width: 100%; padding: 18px; font-size: 24px; font-weight: 800; letter-spacing: 0.08em; color: #fff; background: #c62828; border: 0; cursor: pointer; }
+.hero-drive__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+.hero-drive__pad button { padding: 16px 8px; border: 1px solid var(--hero-line, currentColor); background: var(--hero-surface); color: inherit; font: inherit; cursor: pointer; touch-action: none; user-select: none; }
+.hero-drive__pad button:active { background: var(--hero-accent); color: var(--hero-bg); }
+.hero-drive__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.hero-pick__group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }

package/components/Robot/AlertsTable.vue

@@ -21,7 +21,10 @@
     @click:row="onRow"
   >
     <template #item.code="{ item }"><span class="hero-alert__code">{{ attentionText(item).code }}</span></template>
-    <template #item.message="{ item }">{{ attentionText(item).message }}</template>
+    <template #item.message="{ item }">
+      {{ attentionText(item).message }}
+      <template v-for="ph in photosOf(item)" :key="ph.label"> · <a :href="ph.url" target="_blank" rel="noopener noreferrer" @click.stop>{{ ph.label }}</a></template>
+    </template>
     <template #item.robot="{ item }"><span class="hero-table__name">{{ item.robot?.name }}</span></template>
     <template #item.site="{ item }"><span class="hero-dim">{{ item.client?.name }} · {{ item.site?.name }}</span></template>
     <template #item.floor="{ item }">
@@ -36,6 +39,7 @@
 import RobotFloorLabel from "./FloorLabel.vue";
 import RobotTable from "./Table.vue";
 import { attentionText, sinceText } from "../../utils/robot-display";
+import { faultPhotos } from "../../utils/robot-control";
 
 const props = withDefaults(
   defineProps<{
@@ -57,6 +61,11 @@ function floorOf(item: any) {
   const s = props.states[String(item?.robot?._id ?? "")];
   return s?.ok ? { floorNo: s.floorNo, floorKnown: s.floorKnown === true } : { floorNo: null, floorKnown: false };
 }
+/** The robot's photos for this alert, when its live fault is this one and carries them. */
+function photosOf(item: any) {
+  const f = props.states[String(item?.robot?._id ?? "")]?.fault;
+  return f && f.code === item?.code ? faultPhotos(f) : [];
+}
 function onRow(_e: unknown, { item }: { item: any }) {
   emit("open", item);
 }

package/components/Robot/BuildingMap.vue

@@ -163,6 +163,8 @@
               v-for="r in f.robots"
               :key="r.id"
               class="hero-bmap__anchor hero-bmap__bot"
+              :class="{ 'hero-bot--stale': r.stale }"
+              :title="r.stale ? `${r.name} · ${r.seen}` : undefined"
               :style="{ left: r.left, top: r.top, transition: `left ${tickMs}ms linear, top ${tickMs}ms linear`, '--hero-bot': toneColor(r) }"
             >
               <span class="hero-bmap__ping" aria-hidden="true" />

package/components/Robot/Detail.vue

@@ -25,9 +25,14 @@
     <span class="hero-faultbar__code">{{ fault.code }}</span>
     <div>
       <div class="hero-faultbar__msg">{{ fault.message || fault.code }}</div>
-      <div class="hero-faultbar__since">Since {{ faultSince }} · notified once</div>
+      <div class="hero-faultbar__since">
+        Since {{ faultSince }} · notified once
+        <template v-for="ph in faultPhotos(fault)" :key="ph.label"> · <a :href="ph.url" target="_blank" rel="noopener noreferrer">{{ ph.label }}</a></template>
+      </div>
     </div>
-    <span class="hero-faultbar__badge">FAULT</span>
+    <v-btn v-if="caps?.liveVideo === true && online" variant="outlined" size="small" @click="liveOpen = true">Live view</v-btn>
+    <v-btn v-if="canResolve" variant="outlined" size="small" :loading="resolving" @click="resolveFault">Mark resolved</v-btn>
+    <span class="hero-faultbar__badge">{{ faultBadge(fault) }}</span>
   </div>
 
   <RobotNoMonitoring v-if="noInterface" :brand-name="brand" :model="live?.model || undefined" />
@@ -39,6 +44,10 @@
     </div>
   </div>
   <div v-if="notReported" class="hero-notreported">{{ notReported }}</div>
+  <div v-if="(caps?.liveVideo === true && online && !fault) || canDrive" class="hero-detail__video">
+    <v-btn v-if="caps?.liveVideo === true && online && !fault" variant="outlined" @click="liveOpen = true">Live view</v-btn>
+    <v-btn v-if="canDrive" variant="outlined" @click="driveOpen = true">Manual control</v-btn>
+  </div>
 
   <div v-if="commands.length">
     <div class="hero-section__title">Command bar</div>
@@ -62,10 +71,26 @@
           robotType === "security" ? "days · start–end · floor · checkpoints × rounds" : "days · start–end · jobs per floor · passes"
         }}</span>
       </div>
-      <div v-if="!schedule.length" class="hero-sched__empty">No schedule yet.</div>
+      <template v-if="!schedule.length && robotType === 'security' && patrol?.scheduleShared === false">
+        <div class="hero-sched__empty">Patrol schedules are set in the PadBot app. PadBot doesn't share them with us yet.</div>
+        <div v-if="runHint" class="hero-sched__hint">{{ runHint }} - a guess from recent runs, not the schedule.</div>
+        <template v-if="recentRuns.length">
+          <div class="hero-aside__hint">Recent patrol runs</div>
+          <div v-for="r in recentRuns" :key="r.key" class="hero-sched__row">
+            <b>{{ r.when }}</b><span>{{ r.route }} · {{ r.result }}</span><span>{{ r.detail }}</span>
+          </div>
+        </template>
+      </template>
+      <div v-else-if="!schedule.length" class="hero-sched__empty">No schedule yet.</div>
       <div v-for="p in schedule" :key="p.key" class="hero-sched__row">
         <b>{{ p.days }}</b><span>{{ p.time }}</span><span>{{ p.jobs }}</span>
       </div>
+      <template v-if="unplacedRoutes.length">
+        <div class="hero-aside__hint">Patrol routes (stops not placed on the plan)</div>
+        <div v-for="r in unplacedRoutes" :key="r.id" class="hero-sched__row">
+          <b>{{ r.name }}</b><span>Stops: {{ r.text }}</span>
+        </div>
+      </template>
     </div>
 
     <div>
@@ -77,6 +102,7 @@
         :name="record?.name"
         :status-label="statusLabel"
         :point="posLive ? point : null"
+        :stale="shown?.stale === true"
         :heading="headingDeg(shown)"
         :trail="trail"
         :readout="readout"
@@ -97,6 +123,8 @@
     </div>
   </div>
 
+  <RobotPatrolHistory v-if="robotType === 'security' && caps?.patrolHistory === true" :robot-id="robotId" />
+
   <v-dialog v-model="editOpen" width="520" persistent>
     <RobotForm
       v-if="editOpen && record"
@@ -124,6 +152,16 @@
     </div>
   </v-dialog>
 
+  <v-dialog v-model="liveOpen" width="860">
+    <RobotLiveView v-if="liveOpen" :robot-id="robotId" :name="record?.name" @close="liveOpen = false" />
+  </v-dialog>
+  <v-dialog v-model="driveOpen" width="520" persistent>
+    <RobotManualDrive v-if="driveOpen" :robot-id="robotId" :name="record?.name" @close="driveOpen = false" />
+  </v-dialog>
+  <v-dialog v-model="pickOpen" width="520">
+    <RobotPointPicker v-if="pickOpen && pickKind" :kind="pickKind" :groups="pointGroups" :floor-no="live?.floorNo ?? null" @close="pickOpen = false" @pick="onPick" />
+  </v-dialog>
+
   <RobotToast v-model="toast" />
 </template>
 
@@ -136,6 +174,11 @@ import RobotViewOnlyNotice from "./ViewOnlyNotice.vue";
 import RobotLivePlan from "./LivePlan.vue";
 import RobotToast from "./Toast.vue";
 import RobotForm from "./Form.vue";
+import RobotPatrolHistory from "./PatrolHistory.vue";
+import RobotLiveView from "./LiveView.vue";
+import RobotManualDrive from "./ManualDrive.vue";
+import RobotPointPicker from "./PointPicker.vue";
+import { faultPhotos } from "../../utils/robot-control";
 import useRobotLive, { siteStatesFeed } from "../../composables/useRobotLive";
 import {
   brandName,
@@ -143,12 +186,18 @@ import {
   cleaningScheduleRows,
   commandBody,
   commandLabel,
+  faultBadge,
   headingDeg,
   isMoving,
   mergePose,
   notReportedLine,
   optimisticMode,
+  patrolRecordRow,
+  patrolRunHint,
   patrolScheduleRows,
+  pointCommandBody,
+  savedPointGroups,
+  unplacedStopsText,
   planPoint,
   positionText,
   robotErrorMessage,
@@ -164,6 +213,8 @@ import {
   type TLiveRobotState,
   type TPatrolRouteView,
   type TRobotCommandKind,
+  type TSavedPoint,
+  type TSavedPointGroup,
 } from "../../utils/robot-display";
 
 const props = withDefaults(
@@ -188,8 +239,19 @@ const emit = defineEmits<{
   status: [status: { connected: boolean }];
 }>();
 
-const { getRobot, getRobotBrands, getRobotPlans, getPatrolRoutes, sendRobotCommand, trackRobot, deleteRobot, getRobotMaps, getRobotMapImages } =
-  useRobots();
+const {
+  getRobot,
+  getRobotBrands,
+  getRobotPlans,
+  getPatrolRoutes,
+  sendRobotCommand,
+  trackRobot,
+  deleteRobot,
+  getRobotMaps,
+  getRobotMapImages,
+  resolveRobotAlerts,
+  getPatrolHistory,
+} = useRobots();
 
 const record = ref<Record<string, any> | null>(null);
 const brands = ref<Array<Record<string, any>>>([]);
@@ -262,7 +324,7 @@ watch(
     if (p && posLive.value && isMoving(statusMode.value)) trail.value = trailPush(trail.value, p);
   },
 );
-const readout = computed(() => `${positionText(live.value, caps.value)} · ${speedText(prevPose.value, nextPose.value, statusMode.value)}`);
+const readout = computed(() => `${positionText(live.value, caps.value, now.value)} · ${speedText(prevPose.value, nextPose.value, statusMode.value)}`);
 
 const spot = ref<Array<{ x: number; y: number }>>([]);
 const spotOn = computed(() => showSpotClean({ canCommand: props.canCommand, capabilities: caps.value, online: online.value, type: robotType.value }));
@@ -279,14 +341,25 @@ const planHint = computed(() => {
 
 /* ---- schedule: cleaning plans from the brand, or the patrol contract ---- */
 const plans = ref<Array<Record<string, any>>>([]);
-const patrol = ref<{ supported?: boolean; routes?: TPatrolRouteView[]; schedule?: any[] } | null>(null);
+const patrol = ref<{ supported?: boolean; routes?: TPatrolRouteView[]; schedule?: any[]; scheduleShared?: boolean } | null>(null);
 const schedule = computed(() => (robotType.value === "security" ? patrolScheduleRows(patrol.value) : cleaningScheduleRows(plans.value)));
+const unplacedRoutes = computed(() =>
+  (patrol.value?.routes ?? []).map((r) => ({ id: r.id, name: r.name, text: unplacedStopsText(r) })).filter((r) => r.text),
+);
+// The brand keeps its schedules to itself: recent runs (and a labelled guess) instead.
+const runs = ref<any[]>([]);
+const recentRuns = computed(() => runs.value.slice(0, 5).map((r) => patrolRecordRow(r, now.value)));
+const runHint = computed(() => patrolRunHint(runs.value, now.value));
 
 async function loadSchedule() {
   if (!record.value || noInterface.value) return;
   try {
-    if (robotType.value === "security") patrol.value = await getPatrolRoutes(props.robotId);
-    else plans.value = (await getRobotPlans(props.robotId))?.items ?? [];
+    if (robotType.value === "security") {
+      patrol.value = await getPatrolRoutes(props.robotId);
+      if (patrol.value?.scheduleShared === false && caps.value?.patrolHistory === true && !runs.value.length) {
+        runs.value = (await getPatrolHistory(props.robotId, { page: 1, limit: 20 }).catch(() => null))?.items ?? [];
+      }
+    } else plans.value = (await getRobotPlans(props.robotId))?.items ?? [];
   } catch {
     // A schedule the brand cannot serve reads "No schedule yet"; the facts still show.
   }
@@ -336,7 +409,23 @@ async function run(kind: TRobotCommandKind | "spot", body: Record<string, unknow
     busy.value = null;
   }
 }
-function send(kind: TRobotCommandKind) {
+/* Go to point / Set position: the robot's own saved points when its brand lists them (PadBot). */
+const pointGroups = ref<TSavedPointGroup[]>([]);
+const pickOpen = ref(false);
+const pickKind = ref<"navigate" | "relocalize" | null>(null);
+async function send(kind: TRobotCommandKind) {
+  if (kind === "navigate" || kind === "relocalize") {
+    try {
+      pointGroups.value = savedPointGroups((await getRobotMaps(props.robotId))?.items);
+    } catch {
+      pointGroups.value = [];
+    }
+    if (pointGroups.value.length) {
+      pickKind.value = kind;
+      pickOpen.value = true;
+      return;
+    }
+  }
   const body = commandBody(kind, live.value);
   if (!body) {
     toast.value = `${commandLabel(kind)}: the robot's position is not known yet.`;
@@ -379,6 +468,38 @@ async function sendSpot() {
   }
 }
 
+function onPick(p: TSavedPoint) {
+  const kind = pickKind.value;
+  pickOpen.value = false;
+  if (!kind) return;
+  const body = pointCommandBody(kind, p, live.value);
+  if (!body) {
+    toast.value = "Set position: the robot is not on that floor.";
+    return;
+  }
+  run(kind, body);
+}
+
+/* ---- security-robot extras: live view (minted per open, never kept), manual control, resolve an alarm ---- */
+const liveOpen = ref(false);
+const driveOpen = ref(false);
+const canDrive = computed(() => props.canCommand && caps.value?.manualDrive === true && online.value);
+const canResolve = computed(
+  () => props.canCommand && caps.value?.resolveAlerts === true && faultBadge(fault.value) === "ALARM" && typeof fault.value?.code === "string",
+);
+const resolving = ref(false);
+async function resolveFault() {
+  resolving.value = true;
+  try {
+    const res = await resolveRobotAlerts(props.robotId, String(fault.value?.code ?? ""));
+    toast.value = res?.resolved ? `Marked resolved · ${res.resolved} alert${res.resolved === 1 ? "" : "s"}` : "Nothing open to resolve.";
+  } catch (e) {
+    toast.value = robotErrorMessage(e, "Could not mark the alert resolved.");
+  } finally {
+    resolving.value = false;
+  }
+}
+
 /* ---- edit / remove ---- */
 function onSaved() {
   editOpen.value = false;

package/components/Robot/Fleet.vue

@@ -172,6 +172,12 @@
                   </template>
                   <v-list density="compact">
                     <v-list-item title="Schedule" prepend-icon="mdi-calendar-clock" @click="openPlans(item)" />
+                    <v-list-item
+                      v-if="states[item._id]?.capabilities?.liveVideo === true && states[item._id]?.online === true"
+                      title="Live view"
+                      prepend-icon="mdi-cctv"
+                      @click="liveRobot = item"
+                    />
                     <!--
                       Only for a brand that can take a click on the plan. A brand
                       without it gets no control, not one the server refuses.
@@ -349,9 +355,14 @@
       </v-row>
     </template>
   </ConfirmDialog>
+
+  <v-dialog :model-value="!!liveRobot" width="860" @update:model-value="(v) => !v && (liveRobot = null)">
+    <RobotLiveView v-if="liveRobot" :robot-id="String(liveRobot._id)" :name="liveRobot.name" @close="liveRobot = null" />
+  </v-dialog>
 </template>
 
 <script lang="ts" setup>
+import RobotLiveView from "./LiveView.vue";
 /**
  * The fleet screen, shared by every application that shows robots.
  *
@@ -700,6 +711,8 @@ function onCreated() {
 
 onMounted(load);
 onBeforeUnmount(stopWatching);
+/** The row whose Live view is open (security robots with a camera URL). */
+const liveRobot = ref<any>(null);
 </script>
 
 <style scoped>

package/components/Robot/Form.vue

@@ -155,8 +155,8 @@ const found = ref<Array<{ value: string; label: string; disabled: boolean }>>([]
 const finding = ref(false);
 const labels = computed(() => credentialLabels(brand.value));
 const typed = computed(() => !!appKey.value.trim() && !!appToken.value.trim());
-// Ounitech: one AppID/Secret per company, so the robot is picked from its list.
-const discoverable = computed(() => brand.value === "ounitech");
+// Ounitech / PadBot: one credential pair per company account, so the robot is picked from its list.
+const discoverable = computed(() => brand.value === "ounitech" || brand.value === "padbot");
 const findHint = computed(() =>
   editing.value || typed.value
     ? "Press Find robots"

package/components/Robot/LivePlan.vue

@@ -15,7 +15,7 @@
       <span class="hero-cross hero-cross--h" :style="{ top: point.top, transition: `top ${tickMs}ms linear` }" aria-hidden="true" />
       <span class="hero-cross hero-cross--v" :style="{ left: point.left, transition: `left ${tickMs}ms linear` }" aria-hidden="true" />
       <div class="hero-readout">{{ readout }}</div>
-      <div class="hero-me" :style="{ left: point.left, top: point.top, transition: `left ${tickMs}ms linear, top ${tickMs}ms linear` }">
+      <div class="hero-me" :class="{ 'hero-me--stale': stale }" :style="{ left: point.left, top: point.top, transition: `left ${tickMs}ms linear, top ${tickMs}ms linear` }">
         <div class="hero-me__tag">{{ name }} <span>{{ statusLabel }}</span></div>
         <div class="hero-me__radar" aria-hidden="true" />
         <div class="hero-me__ping" aria-hidden="true" />
@@ -52,8 +52,10 @@ withDefaults(
     spot?: Array<{ x: number; y: number }>;
     pick?: boolean;
     tickMs?: number;
+    /** The last reading kept through a short gap: drawn faded, never as live. */
+    stale?: boolean;
   }>(),
-  { name: "", statusLabel: "", point: null, heading: 0, trail: () => [], readout: "", lost: false, route: null, routeMoving: false, spot: () => [], pick: false, tickMs: 1200 },
+  { stale: false, name: "", statusLabel: "", point: null, heading: 0, trail: () => [], readout: "", lost: false, route: null, routeMoving: false, spot: () => [], pick: false, tickMs: 1200 },
 );
 const emit = defineEmits<{ pick: [point: { x: number; y: number }] }>();
 </script>

package/components/Robot/LiveView.vue

@@ -0,0 +1,107 @@
+<template>
+  <!--
+    The robot's current camera stream, in the page (security robots, liveVideo).
+    The URL is minted per open and re-minted shortly before it expires; it is
+    never stored. What the browser cannot play in place opens in a new tab.
+  -->
+  <div class="hero-dialog hero-live" role="dialog" aria-labelledby="hero-live-title">
+    <div class="hero-live__head">
+      <div id="hero-live-title" class="hero-dialog__title">Live view · {{ name }}</div>
+      <span class="hero-head__spacer" />
+      <div class="hero-live__quality" role="group" aria-label="Quality">
+        <button type="button" :aria-pressed="quality === 'smooth'" @click="quality = 'smooth'">Smooth</button>
+        <button type="button" :aria-pressed="quality === 'hd'" @click="quality = 'hd'">HD</button>
+      </div>
+    </div>
+
+    <div class="hero-live__stage">
+      <div v-if="loading && !url" class="hero-muted">Connecting to the robot's camera…</div>
+      <div v-else-if="error" class="hero-notice" role="alert">{{ error }}</div>
+      <template v-else-if="url">
+        <video v-if="plays" :key="url" class="hero-live__video" :src="url" controls autoplay muted playsinline @error="error = CAMERA_DOWN" />
+        <iframe
+          v-else-if="kind === 'page'"
+          :key="url"
+          class="hero-live__video"
+          :src="url"
+          title="Robot camera"
+          sandbox="allow-scripts allow-same-origin"
+          allow="autoplay; fullscreen"
+          allowfullscreen
+          referrerpolicy="no-referrer"
+        />
+        <div v-else-if="kind === 'rtmp'" class="hero-dialog__body">
+          This stream uses RTMP, which browsers can't play. Open it in a player app such as VLC.
+          <div class="hero-live__copy">
+            <v-btn variant="outlined" size="small" @click="copy">Copy stream link</v-btn>
+          </div>
+        </div>
+        <div v-else class="hero-dialog__body">This stream can't play inside the page in this browser. Open it in a new tab.</div>
+      </template>
+    </div>
+
+    <div class="hero-dialog__actions">
+      <a v-if="url && kind !== 'rtmp'" class="hero-live__open" :href="url" target="_blank" rel="noopener noreferrer">Open in new tab</a>
+      <span class="hero-head__spacer" />
+      <v-btn variant="outlined" @click="emit('close')">Close</v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { liveVideoKind, remintDelayMs } from "../../utils/robot-control";
+
+const props = defineProps<{ robotId: string; name?: string }>();
+const emit = defineEmits<{ close: [] }>();
+const { getLiveVideo } = useRobots();
+
+const CAMERA_DOWN = "The robot's camera isn't available right now.";
+const quality = ref<"hd" | "smooth">("smooth");
+const url = ref("");
+const error = ref("");
+const loading = ref(false);
+let timer: ReturnType<typeof setTimeout> | undefined;
+let alive = true;
+
+const kind = computed(() => liveVideoKind(url.value));
+const plays = computed(
+  () =>
+    kind.value === "video" ||
+    (kind.value === "hls" && typeof document !== "undefined" && !!document.createElement("video").canPlayType("application/vnd.apple.mpegurl")),
+);
+
+async function mint() {
+  clearTimeout(timer);
+  loading.value = true;
+  error.value = "";
+  try {
+    const res = await getLiveVideo(props.robotId, quality.value);
+    if (!alive) return;
+    if (liveVideoKind(res?.url) === "bad") throw new Error(CAMERA_DOWN);
+    url.value = res.url;
+    const wait = remintDelayMs(res?.expiresAt);
+    if (wait !== null) timer = setTimeout(mint, wait);
+  } catch {
+    if (alive) {
+      url.value = "";
+      error.value = CAMERA_DOWN;
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(url.value);
+  } catch {
+    /* the link is still shown by the browser's own copy */
+  }
+}
+watch(quality, mint, { immediate: true });
+onBeforeUnmount(() => {
+  alive = false;
+  clearTimeout(timer);
+  url.value = "";
+});
+</script>