@7365admin1/layer-common 4.55.0 → 4.57.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.57.0
+
+### Minor Changes
+
+- 611dd38: Robots: the live view shows the PadBot (EZVIZ) camera's H.265 picture. HLS now plays through hls.js wherever the browser has Media Source Extensions (native HLS only as the Safari fallback), the player owns `video.src` so a re-render can no longer reset the stream (the cause of the fatal bufferAppendError / black picture), and it recovers by itself: media-error recovery, then a fresh URL with backoff on network errors, expired URLs and stalls. When no picture can be shown it says so in plain words with a Retry button. The robot detail gains an inline Live view panel that plays automatically, with an "Always show live view" switch remembered per browser; it releases the stream while the tab is hidden, the panel is far off-screen or the robot is offline, and Full screen reuses the same stream.
+
+## 4.56.0
+
+### Minor Changes
+
+- 2ef1a8d: Robot detail: "What this robot can do" card built from the robot's brand + model manifest; information grouped Status / Location / Patrol|Cleaning / Camera; unsupported facts hidden (never greyed); commands confirm what will happen and report the result; "Return to charger" everywhere; maker-app schedule text from the manifest. Site fleet Brand column names the model; the capability badge's tooltip lists what that robot does.
+
 ## 4.55.0
 
 ### Minor Changes
@@ -1581,11 +1593,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

@@ -781,6 +781,14 @@
 .hero-fact__value { font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 3px; }
 .hero-fact__value--dim { opacity: 0.5; }
 .hero-notreported { font-size: 12px; opacity: 0.7; }
+.hero-facts--tight { margin-bottom: 12px; }
+
+/* "What this robot can do": one short row per kind of ability, only what THIS brand + model offers. */
+.hero-can { border: 1px solid var(--hero-divider); border-left: 3px solid var(--hero-accent); padding: 10px 14px; display: grid; gap: 6px; }
+.hero-can__title { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; opacity: 0.75; }
+.hero-can__row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; font-size: 13px; line-height: 1.45; }
+.hero-can__label { font-weight: 700; }
+@media (max-width: 560px) { .hero-can__row { grid-template-columns: 1fr; gap: 0; } }
 
 .hero-section__title {
   font-size: 10px;
@@ -1265,3 +1273,7 @@ div.hero-editor__wp.hero-editor__sel, div.hero-editor__fid.hero-editor__sel { ou
 .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; }
 .hero-pick__point:disabled { opacity: 0.45; cursor: not-allowed; }
+.hero-livepanel { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--hero-surface); border: 1px solid color-mix(in srgb, var(--hero-text) 12%, transparent); }
+.hero-livepanel .hero-live__head { flex-wrap: wrap; }
+.hero-livepanel .hero-dialog__actions { margin-top: 0; }
+.hero-live__stage .hero-notice { color: var(--hero-text); font-size: 13px; max-width: 90%; }

package/components/Robot/Detail.vue

@@ -31,27 +31,24 @@
         <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>
-    <v-btn v-if="caps?.liveVideo === true && online" variant="outlined" size="small" @click="liveOpen = true">Live view</v-btn>
+    <v-btn v-if="caps?.liveVideo === true && online" variant="outlined" size="small" @click="livePanel?.show()">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" />
 
-  <div class="hero-facts" role="list" aria-label="Robot facts">
-    <div v-for="f in facts" :key="f.label" class="hero-fact" role="listitem">
-      <div class="hero-fact__label">{{ f.label }}</div>
-      <div class="hero-fact__value" :class="{ 'hero-fact__value--dim': f.dim }">{{ f.value }}</div>
+  <!-- What THIS robot (brand + model) can do, in our words; nothing it can't. -->
+  <section v-if="abilities.length" class="hero-can" aria-label="What this robot can do">
+    <div class="hero-can__title">What this robot can do</div>
+    <div v-for="r in abilities" :key="r.label" class="hero-can__row">
+      <span class="hero-can__label">{{ r.label }}</span>
+      <span>{{ r.value }}</span>
     </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>
+  </section>
 
   <div v-if="commands.length">
-    <div class="hero-section__title">Command bar</div>
+    <div class="hero-section__title">Commands</div>
     <RobotCommandBar
       :capabilities="caps"
       :can-command="canCommand"
@@ -64,8 +61,70 @@
   </div>
   <RobotViewOnlyNotice v-if="!canCommand && !noInterface" />
 
-  <div class="hero-detail__grid">
+  <div>
+    <div class="hero-section__title">Status</div>
+    <div class="hero-facts" role="list" aria-label="Robot status">
+      <div v-for="f in statusFacts" :key="f.label" class="hero-fact" role="listitem">
+        <div class="hero-fact__label">{{ f.label }}</div>
+        <div class="hero-fact__value" :class="{ 'hero-fact__value--dim': f.dim }">{{ f.value }}</div>
+      </div>
+    </div>
+  </div>
+
+  <div v-if="!noInterface" class="hero-detail__grid">
+    <div>
+      <div class="hero-section__title">Location</div>
+      <div v-if="locationFacts.length" class="hero-facts hero-facts--tight" role="list" aria-label="Robot location">
+        <div v-for="f in locationFacts" :key="f.label" class="hero-fact" role="listitem">
+          <div class="hero-fact__label">{{ f.label }}</div>
+          <div class="hero-fact__value" :class="{ 'hero-fact__value--dim': f.dim }">{{ f.value }}</div>
+        </div>
+      </div>
+      <template v-if="showPlan">
+        <div class="hero-aside__head">
+          <span class="hero-aside__title">{{ planTitle }}</span>
+          <span class="hero-aside__hint" style="flex-shrink: 0">{{ planHint }}</span>
+        </div>
+        <div v-if="mapViews.length > 1 || (mapViews.length === 1 && !mapViews[0]!.current)" class="hero-mapsel">
+          <select v-model="selectedMapId" class="hero-input hero-select hero-select--sm" aria-label="Robot map">
+            <option v-for="m in mapViews" :key="m.mapId" :value="m.mapId">{{ m.label }}{{ m.current ? " · Robot is here" : "" }}</option>
+          </select>
+          <span v-if="selectedMap?.current" class="hero-mapsel__here">Robot is here</span>
+          <span v-else-if="selectedMap" class="hero-mapsel__hint">{{ hereText }}</span>
+          <span v-if="selectedMap?.routeNames.length" class="hero-mapsel__hint">Routes: {{ selectedMap.routeNames.join(", ") }}</span>
+        </div>
+        <RobotLivePlan
+          :name="record?.name"
+          :status-label="statusLabel"
+          :point="posLive && robotOnShownMap ? point : null"
+          :stale="shown?.stale === true"
+          :heading="headingDeg(shown)"
+          :trail="trail"
+          :readout="readout"
+          :lost="posLost"
+          :route="route"
+          :routes="selectedMap ? mapRoutes : null"
+          :image="selectedMap?.imageUrl ?? null"
+          :aspect="selectedMap?.width && selectedMap?.height ? selectedMap.width / selectedMap.height : null"
+          :points="selectedMap?.points ?? []"
+          :route-moving="statusMode === 'WORKING' && robotOnShownMap"
+          :spot="spot"
+          :pick="spotOn"
+          :tick-ms="tickMs"
+          @pick="(p) => spot.push(p)"
+        />
+        <div v-if="spotOn" class="hero-spotbar">
+          <v-btn color="primary" variant="flat" :disabled="!spot.length || busy === 'spot'" :loading="busy === 'spot'" @click="sendSpot">
+            Send spot clean · {{ spot.length }} points
+          </v-btn>
+          <v-btn variant="outlined" @click="spot = []">Clear</v-btn>
+        </div>
+      </template>
+      <div v-else-if="caps" class="hero-sched__empty">{{ brand }} doesn't share where this robot is with us yet.</div>
+    </div>
+
     <div>
+      <div class="hero-section__title">{{ robotType === "security" ? "Patrol" : "Cleaning" }}</div>
       <div class="hero-aside__head">
         <span class="hero-aside__title">{{ robotType === "security" ? "Patrol schedule" : "Cleaning schedule" }}</span>
         <span class="hero-aside__hint">{{
@@ -73,14 +132,9 @@
         }}</span>
       </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 class="hero-sched__empty">{{ scheduleElsewhere }}</div>
+        <!-- The runs themselves are in Patrol history below (said once). -->
         <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">
@@ -93,50 +147,28 @@
         </div>
       </template>
     </div>
+  </div>
 
-    <div>
-      <div class="hero-aside__head">
-        <span class="hero-aside__title">{{ planTitle }}</span>
-        <span class="hero-aside__hint" style="flex-shrink: 0">{{ planHint }}</span>
-      </div>
-      <div v-if="mapViews.length > 1 || (mapViews.length === 1 && !mapViews[0]!.current)" class="hero-mapsel">
-        <select v-model="selectedMapId" class="hero-input hero-select hero-select--sm" aria-label="Robot map">
-          <option v-for="m in mapViews" :key="m.mapId" :value="m.mapId">{{ m.label }}{{ m.current ? " · Robot is here" : "" }}</option>
-        </select>
-        <span v-if="selectedMap?.current" class="hero-mapsel__here">Robot is here</span>
-        <span v-else-if="selectedMap" class="hero-mapsel__hint">{{ hereText }}</span>
-        <span v-if="selectedMap?.routeNames.length" class="hero-mapsel__hint">Routes: {{ selectedMap.routeNames.join(", ") }}</span>
-      </div>
-      <RobotLivePlan
-        :name="record?.name"
-        :status-label="statusLabel"
-        :point="posLive && robotOnShownMap ? point : null"
-        :stale="shown?.stale === true"
-        :heading="headingDeg(shown)"
-        :trail="trail"
-        :readout="readout"
-        :lost="posLost"
-        :route="route"
-        :routes="selectedMap ? mapRoutes : null"
-        :image="selectedMap?.imageUrl ?? null"
-        :aspect="selectedMap?.width && selectedMap?.height ? selectedMap.width / selectedMap.height : null"
-        :points="selectedMap?.points ?? []"
-        :route-moving="statusMode === 'WORKING' && robotOnShownMap"
-        :spot="spot"
-        :pick="spotOn"
-        :tick-ms="tickMs"
-        @pick="(p) => spot.push(p)"
-      />
-      <div v-if="spotOn" class="hero-spotbar">
-        <v-btn color="primary" variant="flat" :disabled="!spot.length || busy === 'spot'" :loading="busy === 'spot'" @click="sendSpot">
-          Send spot clean · {{ spot.length }} points
-        </v-btn>
-        <v-btn variant="outlined" @click="spot = []">Clear</v-btn>
-      </div>
+  <RobotPatrolHistory v-if="robotType === 'security' && caps?.patrolHistory === true" :robot-id="robotId" />
+
+  <div v-if="caps?.liveVideo === true || canDrive">
+    <div class="hero-section__title">Camera</div>
+    <RobotLiveView v-if="caps?.liveVideo === true" ref="livePanel" panel :robot-id="robotId" :name="record?.name" :offline="!online" />
+    <div v-if="canDrive" class="hero-detail__video">
+      <v-btn variant="outlined" @click="driveOpen = true">Manual control</v-btn>
     </div>
   </div>
 
-  <RobotPatrolHistory v-if="robotType === 'security' && caps?.patrolHistory === true" :robot-id="robotId" />
+  <v-dialog v-model="confirmOpen" width="440">
+    <div v-if="confirming" class="hero-dialog" role="alertdialog" aria-labelledby="hero-confirm-title">
+      <div id="hero-confirm-title" class="hero-dialog__title">{{ confirming.text.title }}</div>
+      <div class="hero-dialog__body">{{ confirming.text.body }}</div>
+      <div class="hero-dialog__actions">
+        <v-btn variant="outlined" @click="confirmOpen = false">Don't send</v-btn>
+        <v-btn color="primary" variant="flat" @click="confirmSend">{{ confirming.text.action }}</v-btn>
+      </div>
+    </div>
+  </v-dialog>
 
   <v-dialog v-model="editOpen" width="520" persistent>
     <RobotForm
@@ -165,9 +197,6 @@
     </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>
@@ -208,14 +237,13 @@ import {
   capabilityLabel,
   cleaningScheduleRows,
   commandBody,
+  commandConfirm,
   commandLabel,
   faultBadge,
   headingDeg,
   isMoving,
   mergePose,
-  notReportedLine,
   optimisticMode,
-  patrolRecordRow,
   patrolRunHint,
   patrolScheduleRows,
   pointCommandBody,
@@ -223,9 +251,11 @@ import {
   unplacedStopsText,
   planPoint,
   positionText,
+  robotAbilities,
   robotErrorMessage,
   robotFacts,
   robotStatus,
+  scheduleElsewhereText,
   showSpotClean,
   sinceText,
   speedText,
@@ -327,8 +357,16 @@ const statusLabel = computed(() => robotStatus(statusMode.value, robotType.value
 const fault = computed(() => (live.value?.ok ? live.value.fault ?? null : record.value?.fault ?? null));
 const faultSince = computed(() => sinceText(fault.value?.since, now.value));
 
-const facts = computed(() => robotFacts({ record: record.value, live: live.value as any, now: now.value }));
-const notReported = computed(() => (caps.value ? notReportedLine(brand.value, caps.value, robotType.value) : null));
+// Only what THIS robot reports (hide, never grey); what its maker keeps back is said once, in the card.
+const facts = computed(() => robotFacts({ record: record.value, live: live.value as any, now: now.value, hideUnreported: true }));
+const LOCATION = new Set(["Floor", "Live position"]);
+const statusFacts = computed(() => facts.value.filter((f) => !LOCATION.has(f.label)));
+// The plan's readout already shows the live position; the cell only when there is no plan.
+const locationFacts = computed(() => facts.value.filter((f) => LOCATION.has(f.label) && !(f.label === "Live position" && showPlan.value)));
+const abilities = computed(() =>
+  robotAbilities({ capabilities: caps.value, profile: live.value?.ok ? live.value.profile : null, type: robotType.value, brand: brand.value }),
+);
+const scheduleElsewhere = computed(() => scheduleElsewhereText(robotType.value, brand.value, live.value?.ok ? live.value.profile : null));
 
 const online = computed(() => live.value?.ok === true && live.value.online === true);
 const commands = computed(() =>
@@ -352,8 +390,15 @@ const readout = computed(() => `${positionText(live.value, caps.value, now.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 }));
 
-const route = computed<TPatrolRouteView | null>(() => (selectedMap.value ? mapRoutes.value[0] ?? null : patrol.value?.routes?.[0] ?? null));
-const floorText = computed(() => facts.value[2]?.value ?? "");
+// The route drawn on the plan: the shown map's first route, else the first with placed checkpoints (the rest are listed by name).
+const route = computed<TPatrolRouteView | null>(() =>
+  selectedMap.value ? mapRoutes.value[0] ?? null : patrol.value?.routes?.find((r) => r.checkpoints?.length) ?? null,
+);
+const floorText = computed(() => locationFacts.value.find((f) => f.label === "Floor")?.value ?? "");
+// The plan only for a robot that reports where it is, has maps to show, takes spot clicks, or walks a route we can draw.
+const showPlan = computed(
+  () => !caps.value || reportsPosition.value || spotOn.value || mapViews.value.length > 0 || !!route.value?.checkpoints?.length,
+);
 const planTitle = computed(() => {
   if (spotOn.value) return "Spot clean";
   if (selectedMap.value && !selectedMap.value.current) return `Map · ${selectedMap.value.label}`;
@@ -364,7 +409,7 @@ const planHint = computed(() => {
   if (noInterface.value) return "No position feed for this model";
   if (selectedMap.value) return `${selectedMap.value.points.length} saved points · ${mapRoutes.value.length} routes`;
   if (route.value) return `${route.value.checkpoints.length} checkpoints · ${floorText.value}`;
-  return floorText.value;
+  return ""; // the Floor cell above already says it
 });
 
 /* ---- schedule: cleaning plans from the brand, or the patrol contract ---- */
@@ -376,7 +421,6 @@ const unplacedRoutes = computed(() =>
 );
 // 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() {
@@ -454,11 +498,13 @@ async function run(kind: TRobotCommandKind | "spot", body: Record<string, unknow
   const before = statusMode.value;
   busy.value = kind;
   optimistic.value = { mode: optimisticMode(kind, before), after: Number.POSITIVE_INFINITY };
-  toast.value = `${commandLabel(kind)} → ${name}`;
+  const label = kind === "full" && robotType.value === "security" ? "Start patrol" : commandLabel(kind);
+  toast.value = `${label} → ${name} · sending…`;
   try {
     await sendRobotCommand(props.robotId, body as any);
     // A poll already in flight may still carry the old status; wait past it.
     optimistic.value = optimistic.value ? { ...optimistic.value, after: Date.now() + 300 } : null;
+    toast.value = `${label} → ${name} · accepted. Its status updates here.`;
     return true;
   } catch (e) {
     optimistic.value = null;
@@ -491,7 +537,16 @@ async function send(kind: TRobotCommandKind) {
     toast.value = `${commandLabel(kind)}: the robot's position is not known yet.`;
     return;
   }
-  run(kind, body);
+  // Say what will happen before it is sent (the point picker is its own confirm).
+  confirming.value = { kind, body, text: commandConfirm(kind, { type: robotType.value, name: record.value?.name }) };
+  confirmOpen.value = true;
+}
+const confirmOpen = ref(false);
+const confirming = ref<{ kind: TRobotCommandKind; body: Record<string, unknown>; text: { title: string; body: string; action: string } } | null>(null);
+function confirmSend() {
+  const c = confirming.value;
+  confirmOpen.value = false;
+  if (c) run(c.kind, c.body);
 }
 
 /** The robot's plan image size for its floor, for turning plan clicks into pixels. */
@@ -541,7 +596,7 @@ function onPick(p: TSavedPoint) {
 }
 
 /* ---- security-robot extras: live view (minted per open, never kept), manual control, resolve an alarm ---- */
-const liveOpen = ref(false);
+const livePanel = ref<{ show(): void } | null>(null);
 const driveOpen = ref(false);
 const canDrive = computed(() => props.canCommand && caps.value?.manualDrive === true && online.value);
 const canResolve = computed(

package/components/Robot/Fleet.vue

@@ -147,7 +147,7 @@
                   :loading="busy === item._id && lastCommand === 'return'"
                   @click="send(item, { kind: 'return' }, 'return')"
                 >
-                  Return to dock
+                  Return to charger
                 </AppButton>
                 <AppButton
                   v-if="canCommand"

package/components/Robot/LiveView.vue

@@ -1,24 +1,37 @@
 <template>
   <!--
-    The robot's current camera stream, in the page (security robots, liveVideo).
+    The robot's current camera stream (security robots, liveVideo).
+    Two shapes, one player: the pop-up dialog (`panel` unset) and the inline
+    panel on the robot detail (`panel`), which plays by itself, remembers
+    "Always show live view" per browser, and releases the stream while the tab
+    is hidden, the panel is far off-screen, or the robot is offline.
     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.
+    never stored. Full screen reuses the same stream - never a second fetch.
   -->
-  <div class="hero-dialog hero-live" role="dialog" aria-labelledby="hero-live-title">
+  <div
+    ref="root"
+    :class="panel ? 'hero-livepanel' : 'hero-dialog hero-live'"
+    :role="panel ? 'region' : 'dialog'"
+    :aria-labelledby="titleId"
+  >
     <div class="hero-live__head">
-      <div id="hero-live-title" class="hero-dialog__title">Live view · {{ name }}</div>
+      <div :id="titleId" class="hero-dialog__title">{{ panel ? "Live view" : `Live view · ${name ?? ""}` }}</div>
       <span class="hero-head__spacer" />
-      <div class="hero-live__quality" role="group" aria-label="Quality">
+      <v-switch v-if="panel" v-model="on" label="Always show live view" density="compact" color="primary" hide-details inset />
+      <div v-if="on" 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-if="on" class="hero-live__stage">
+      <div v-if="offline" class="hero-muted">Robot offline — live view resumes when it reconnects</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" />
+      <div v-else-if="retrying" class="hero-muted" role="status">Reconnecting to the robot's camera…</div>
+      <div v-else-if="!active" class="hero-muted">Live view paused while it is off screen.</div>
+      <div v-else-if="!url" class="hero-muted" role="status">Connecting to the robot's camera…</div>
+      <template v-else>
+        <video v-if="plays" ref="videoEl" class="hero-live__video" controls autoplay muted playsinline />
         <iframe
           v-else-if="kind === 'page'"
           :key="url"
@@ -40,56 +53,139 @@
       </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>
+    <div v-if="on || !panel" class="hero-dialog__actions">
+      <v-btn v-if="error && !offline" variant="outlined" size="small" @click="restart">Retry</v-btn>
+      <v-btn v-if="url && plays && !error" variant="outlined" size="small" @click="fullScreen">Full screen</v-btn>
+      <a v-if="url && !plays && 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>
+      <v-btn v-if="!panel" 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";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import {
+  LIVE_DOWN,
+  LIVE_NO_PICTURE,
+  LIVE_RETRY_LIMIT,
+  liveRetryDelayMs,
+  liveVideoKind,
+  liveViewActive,
+  readLivePref,
+  remintDelayMs,
+  startLivePlayer,
+  writeLivePref,
+} from "../../utils/robot-control";
 
-const props = defineProps<{ robotId: string; name?: string }>();
+const props = defineProps<{ robotId: string; name?: string; panel?: boolean; offline?: boolean }>();
 const emit = defineEmits<{ close: [] }>();
 const { getLiveVideo } = useRobots();
 
-const CAMERA_DOWN = "The robot's camera isn't available right now.";
+const titleId = `hero-live-title-${Math.random().toString(36).slice(2, 8)}`;
+// "Always show live view": one choice per browser, like a dashboard layout. ponytail: localStorage, no table.
+const storage = () => (typeof localStorage === "undefined" ? undefined : localStorage);
+const on = ref(props.panel ? readLivePref(storage()) : true);
+watch(on, (v) => writeLivePref(storage(), v));
+
 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 retrying = ref(false);
+const pageVisible = ref(typeof document === "undefined" || document.visibilityState !== "hidden");
+const inView = ref(true);
+const root = ref<HTMLElement | null>(null);
+const videoEl = ref<HTMLVideoElement | null>(null);
+const active = computed(() => liveViewActive({ on: on.value, offline: props.offline, visible: pageVisible.value, inView: inView.value }));
 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")),
-);
+// HLS always goes to the player: hls.js where the browser has MSE, native HLS otherwise.
+const plays = computed(() => kind.value === "video" || kind.value === "hls");
 
+let timer: ReturnType<typeof setTimeout> | undefined;
+let gen = 0; // bumps on every mint/release so a late answer for an old quality/robot is dropped
+let attempts = 0;
+let stopPlayer: (() => void) | undefined;
+
+function stopStream() {
+  stopPlayer?.();
+  stopPlayer = undefined;
+}
+/** Free everything: player, connection, timers, pending answers. */
+function release() {
+  gen++;
+  clearTimeout(timer);
+  stopStream();
+  url.value = "";
+  retrying.value = false;
+}
 async function mint() {
+  const my = ++gen;
   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);
+    if (my !== gen) return;
+    if (liveVideoKind(res?.url) === "bad") throw new Error(LIVE_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;
+    if (my === gen) reconnectLater();
+  }
+}
+/** Automatic reconnect with backoff; after LIVE_RETRY_LIMIT tries, stop and offer Retry. */
+function reconnectLater() {
+  const my = ++gen;
+  clearTimeout(timer);
+  stopStream();
+  url.value = "";
+  if (attempts >= LIVE_RETRY_LIMIT) {
+    retrying.value = false;
+    error.value = LIVE_DOWN;
+    return;
+  }
+  retrying.value = true;
+  timer = setTimeout(() => {
+    if (my !== gen) return;
+    retrying.value = false;
+    mint();
+  }, liveRetryDelayMs(attempts++));
+}
+/** Clean slate: destroy the player and, when showing, fetch a fresh URL. Also the Retry button. */
+function restart() {
+  release();
+  attempts = 0;
+  error.value = "";
+  if (active.value) mint();
+}
+
+// The player starts only when the <video> exists and a URL is in hand, and is
+// re-created only when either changes - never on an ordinary re-render.
+watch([videoEl, url], ([el, src]) => {
+  stopStream();
+  if (!el || !src) return;
+  stopPlayer = startLivePlayer(el, src, onPlayerFail, { onPicture: () => (attempts = 0) });
+});
+function onPlayerFail(message: string) {
+  stopPlayer = undefined;
+  if (message === LIVE_NO_PICTURE) {
+    // The browser can't show H.265: no silent retries behind the message; Retry is the user's.
+    gen++;
+    clearTimeout(timer);
+    error.value = message;
+    return;
   }
+  reconnectLater(); // network, expired URL, stall: fetch a fresh URL and go again
+}
+
+watch(active, restart, { immediate: true });
+watch([quality, () => props.robotId], restart);
+
+function fullScreen() {
+  const v = videoEl.value as (HTMLVideoElement & { webkitEnterFullscreen?: () => void }) | null;
+  if (!v) return;
+  if (v.requestFullscreen) v.requestFullscreen().catch(() => {});
+  else v.webkitEnterFullscreen?.();
 }
 async function copy() {
   try {
@@ -98,10 +194,27 @@ async function copy() {
     /* the link is still shown by the browser's own copy */
   }
 }
-watch(quality, mint, { immediate: true });
+
+const onVisibility = () => (pageVisible.value = document.visibilityState !== "hidden");
+let observer: IntersectionObserver | undefined;
+onMounted(() => {
+  document.addEventListener("visibilitychange", onVisibility);
+  if (props.panel && root.value && typeof IntersectionObserver !== "undefined") {
+    // "Far" off-screen = more than a screen's height away; scrolling briefly past keeps it playing.
+    observer = new IntersectionObserver(([e]) => (inView.value = !!e?.isIntersecting), { rootMargin: "100% 0px" });
+    observer.observe(root.value);
+  }
+});
+/** For the detail page's "Live view" buttons: switch the panel on and bring it into view. */
+defineExpose({
+  show() {
+    on.value = true;
+    root.value?.scrollIntoView({ behavior: "smooth", block: "center" });
+  },
+});
 onBeforeUnmount(() => {
-  alive = false;
-  clearTimeout(timer);
-  url.value = "";
+  document.removeEventListener("visibilitychange", onVisibility);
+  observer?.disconnect();
+  release();
 });
 </script>

package/components/Robot/SiteFleet.vue

@@ -37,9 +37,10 @@
         @click:row="onRow"
       >
         <template #item.name="{ item }"><span class="hero-table__name">{{ item.name }}</span></template>
-        <template #item.brand="{ item }"><span class="hero-dim">{{ brandName(item.brand, brands) }}</span></template>
+        <template #item.brand="{ item }"><span class="hero-dim">{{ brandModelText(item.brand, brands, live(item)) }}</span></template>
         <template #item.capability="{ item }">
-          <span v-if="capsOf(item)" class="hero-tag hero-tag--neutral hero-tag--xs">{{ capabilityLabel(capsOf(item)) }}</span>
+          <!-- One badge per row; the model's abilities in its tooltip (a mixed fleet without clutter). -->
+          <span v-if="capsOf(item)" class="hero-tag hero-tag--neutral hero-tag--xs" :title="abilityTip(item)">{{ capabilityLabel(capsOf(item)) }}</span>
         </template>
         <template #item.status="{ item }">
           <RobotStatusChip v-if="statusOf(item).kind === 'live'" :mode="statusOf(item).mode" :type="item.type" />
@@ -92,8 +93,10 @@ import RobotMiniMap from "./MiniMap.vue";
 import useRobotLive, { siteStatesFeed } from "../../composables/useRobotLive";
 import {
   agoText,
+  brandModelText,
   brandName,
   capabilityLabel,
+  robotAbilities,
   listMeta,
   robotErrorMessage,
   rowStatus,
@@ -227,6 +230,14 @@ function capsOf(row: any) {
   if (s && s.monitorable === false) return {};
   return null;
 }
+/** "Does: … · Reports: …" for the capability badge's tooltip. */
+function abilityTip(row: any) {
+  const s = live(row);
+  return robotAbilities({ capabilities: capsOf(row), profile: s?.ok ? s.profile : null, type: row.type, brand: brandName(row.brand, brands.value) })
+    .map((r) => `${r.label}: ${r.value}`)
+    .join("
+");
+}
 /** The live fault when the robot answers, else its stored open fault. */
 const faultOf = (row: any) => (live(row)?.ok ? live(row)?.fault ?? null : row.fault ?? null);
 function seenText(row: any) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.55.0",
+  "version": "4.57.0",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",
@@ -57,6 +57,7 @@
     "@mdi/font": "^7.4.47",
     "@types/qrcode": "^1.5.6",
     "ckeditor5": "47.4.0",
+    "hls.js": "^1.6.13",
     "html2pdf.js": "^0.10.2",
     "html5-qrcode": "^2.3.8",
     "moment-timezone": "^0.6.0",

package/utils/robot-control.ts

@@ -11,9 +11,9 @@ export type TVideoKind = "hls" | "video" | "flv" | "rtmp" | "page" | "bad";
 
 /**
  * What kind of stream URL the robot's cloud handed us.
- * ponytail: no hls.js / mpegts.js yet - the real PadBot URL type is unknown;
- * HLS plays natively where the browser can (Safari), FLV and HLS elsewhere
- * get "Open in new tab". Add the player library once a real URL is seen.
+ * PadBot sends HLS (MPEG-TS, H.265 video + AAC audio). HLS plays through
+ * hls.js wherever the browser has Media Source Extensions, native HLS
+ * otherwise (Safari). FLV gets "Open in new tab".
  */
 export function liveVideoKind(url: unknown): TVideoKind {
   if (typeof url !== "string") return "bad";
@@ -33,6 +33,163 @@ export function remintDelayMs(expiresAt: unknown, now: number = Date.now()): num
   return Math.max(5_000, t - now - 30_000);
 }
 
+export const LIVE_NO_PICTURE =
+  "This robot's camera sends H.265 video, which this browser can't show. Try Microsoft Edge or Safari, or the PadBot app.";
+export const LIVE_DOWN = "The robot's camera isn't available right now.";
+
+/** Wait before automatic reconnect attempt n (0-based): 2 s, 4 s, 8 s, 16 s, then 30 s. */
+export const liveRetryDelayMs = (n: number) => Math.min(30_000, 2_000 * 2 ** n);
+/** Automatic reconnects before the dialog stops and offers Retry. */
+export const LIVE_RETRY_LIMIT = 6;
+
+type THls = {
+  on(event: string, fn: (event: string, data: { fatal?: boolean; type?: string; details?: string }) => void): void;
+  loadSource(url: string): void;
+  attachMedia(video: HTMLVideoElement): void;
+  recoverMediaError(): void;
+  swapAudioCodec(): void;
+  destroy(): void;
+};
+export type THlsCtor = { isSupported(): boolean; new (config?: Record<string, unknown>): THls };
+
+/** The inline panel streams only while it is switched on, the robot is online, the tab is visible and the panel is near the screen. */
+export const liveViewActive = (s: { on: boolean; offline?: boolean; visible: boolean; inView: boolean }) =>
+  s.on && !s.offline && s.visible && s.inView;
+
+/** "Always show live view", remembered per browser (default on). Storage can throw (private window, blocked site data). */
+const LIVE_PREF_KEY = "hero-robot-live-view";
+export function readLivePref(storage: Pick<Storage, "getItem"> | undefined): boolean {
+  try {
+    return storage?.getItem(LIVE_PREF_KEY) !== "off";
+  } catch {
+    return true;
+  }
+}
+export function writeLivePref(storage: Pick<Storage, "setItem"> | undefined, on: boolean) {
+  try {
+    storage?.setItem(LIVE_PREF_KEY, on ? "on" : "off");
+  } catch {
+    /* the switch still works for this visit */
+  }
+}
+
+/** hls.js errors that mean "this browser cannot decode the codec", not "the camera is down". */
+const CODEC_ERRORS = new Set(["manifestIncompatibleCodecsError", "bufferAddCodecError", "bufferIncompatibleCodecsError"]);
+
+/**
+ * Plays one live-view URL into `video`. Returns a stop function that frees the
+ * player and the connection.
+ *
+ * `video.src` is owned here and must never be bound by the template: a
+ * re-render that re-sets `src` under hls.js detaches its MediaSource, and
+ * hls.js 1.6 then fails with a fatal bufferAppendError ("SourceBuffer has been
+ * removed") and a black picture - the 2026-09-26 production bug.
+ *
+ * `onFail` fires once, with LIVE_NO_PICTURE when the stream plays but no
+ * picture ever decodes (Chrome's native HLS takes H.265-in-TS audio but shows
+ * no video, videoWidth stays 0) or the codec is refused; LIVE_DOWN for
+ * everything else (network, expired URL, repeated media errors, a stall) -
+ * the caller fetches a fresh URL and starts again.
+ */
+export function startLivePlayer(
+  video: HTMLVideoElement,
+  url: string,
+  onFail: (message: string) => void,
+  opts: {
+    loadHls?: () => Promise<THlsCtor>;
+    hasMse?: boolean;
+    onPicture?: () => void;
+    noPictureMs?: number;
+    stallMs?: number;
+    tickMs?: number;
+  } = {},
+): () => void {
+  const noPictureMs = opts.noPictureMs ?? 15_000;
+  const stallMs = opts.stallMs ?? 20_000;
+  const tickMs = opts.tickMs ?? 1_000;
+  let stopped = false;
+  let hls: THls | undefined;
+  let waited = 0;
+  let pictured = false;
+  let lastTime = -1;
+  let still = 0;
+
+  const fail = (message: string) => {
+    if (stopped) return;
+    stop();
+    onFail(message);
+  };
+  // ponytail: one 1 s poll instead of juggling media events - videoWidth has no reliable event everywhere.
+  const tick = setInterval(() => {
+    waited += tickMs;
+    if (!pictured) {
+      if (video.videoWidth > 0) {
+        pictured = true;
+        opts.onPicture?.();
+      } else if (waited >= noPictureMs) {
+        // Time moving with no picture = the codec; nothing moving = no stream.
+        return fail(video.currentTime > 0 ? LIVE_NO_PICTURE : LIVE_DOWN);
+      }
+      return;
+    }
+    if (video.paused) return (still = 0);
+    if (video.currentTime !== lastTime) {
+      lastTime = video.currentTime;
+      still = 0;
+    } else if ((still += tickMs) >= stallMs) fail(LIVE_DOWN);
+  }, tickMs);
+  const onError = () => fail(LIVE_DOWN);
+
+  function stop() {
+    stopped = true;
+    clearInterval(tick);
+    video.removeEventListener("error", onError);
+    hls?.destroy();
+    hls = undefined;
+    video.removeAttribute("src");
+    video.load();
+  }
+
+  function native() {
+    video.addEventListener("error", onError);
+    video.src = url;
+    video.play().catch(() => {});
+  }
+
+  const mse =
+    opts.hasMse ?? (typeof window !== "undefined" && !!((window as any).MediaSource || (window as any).ManagedMediaSource));
+  if (liveVideoKind(url) !== "hls" || !mse) {
+    native();
+  } else {
+    (opts.loadHls ?? (() => import("hls.js").then((m) => m.default as unknown as THlsCtor)))()
+      .then((Hls) => {
+        if (stopped) return;
+        if (!Hls.isSupported()) return native();
+        let recoveries = 0;
+        const h = (hls = new Hls({ enableWorker: true, lowLatencyMode: false }));
+        h.on("hlsError", (_e, data) => {
+          if (!data.fatal) return;
+          if (CODEC_ERRORS.has(data.details ?? "")) return fail(LIVE_NO_PICTURE);
+          // The standard hls.js ladder: recover, then swap audio codec and recover, then give up.
+          if (data.type === "mediaError" && recoveries < 2) {
+            if (recoveries++ === 1) h.swapAudioCodec();
+            return h.recoverMediaError();
+          }
+          fail(LIVE_DOWN);
+        });
+        h.loadSource(url);
+        h.attachMedia(video);
+        video.play().catch(() => {});
+      })
+      .catch(() => {
+        if (!stopped) native();
+      });
+  }
+  return () => {
+    if (!stopped) stop();
+  };
+}
+
 /* ======================================================== manual drive */
 
 export type TDriveLimits = {

package/utils/robot-display.ts

@@ -395,7 +395,7 @@ export type TRobotCommandKind =
 const COMMANDS: ReadonlyArray<{ kind: TRobotCommandKind; label: string }> = [
   { kind: "full", label: "Clean all" },
   { kind: "area", label: "Clean area" },
-  { kind: "return", label: "Return to dock" },
+  { kind: "return", label: "Return to charger" },
   { kind: "pause", label: "Pause" },
   { kind: "resume", label: "Resume" },
   { kind: "cancel", label: "Cancel" },
@@ -610,11 +610,14 @@ export type TLiveRobotState = {
   position?: { x: number; y: number; theta: number } | null;
   /** Where it is on its own floor plan, 0-100 from the top-left; absent when the brand cannot say. */
   planPosition?: { x: number; y: number } | null;
-  /** The brand's own status words ("CLEANING_AUTO"), quoted as "Brand status". */
+  /** The brand's own status words ("CLEANING_AUTO"), quoted as "Robot reports". */
   statusName?: string;
   model?: string;
   fault?: { code: string; message?: string; since?: number; imageUrl?: string | null; thermalImageUrl?: string | null } | null;
+  /** Brand defaults + this MODEL's differences (core `robotManifest`): two models of one brand can differ. */
   capabilities?: Record<string, unknown>;
+  /** Plain-words facts for this brand + model (core `robotManifest`). */
+  profile?: TRobotProfile;
   lastSeenAt?: string | null;
   /** Epoch ms of the last answer that was read (set by `mergeLiveStates`). */
   readAt?: number;
@@ -1212,14 +1215,16 @@ export type TRobotFact = { label: string; value: string; dim: boolean };
 
 /**
  * The detail screen's facts grid (README §3): Connection · Battery · Floor ·
- * Live position · Brand status · Model · Serial · Last seen. A fact the brand
+ * Live position · Robot reports · Model · Serial · Last seen. A fact the brand
  * cannot report reads "Not reported" at 50%; a brand with no interface
- * reports nothing live at all.
+ * reports nothing live at all. `hideUnreported` drops those cells instead
+ * (owner 2026-09-26: show only what THIS robot supports - hide, never grey).
  */
 export function robotFacts(input: {
   record?: Record<string, any> | null;
   live?: (TLiveRobotState & { statusName?: string; model?: string }) | null;
   now?: number;
+  hideUnreported?: boolean;
 }): TRobotFact[] {
   const live = input.live ?? null;
   const record = input.record ?? {};
@@ -1239,16 +1244,19 @@ export function robotFacts(input: {
   const position = !reports("readLocation")
     ? nr("Live position")
     : fact("Live position", live ? positionText(live, caps ?? { readLocation: true }) : "");
-  return [
+  const all = [
     connection,
     battery,
     floor,
     position,
-    none ? nr("Brand status") : fact("Brand status", live?.ok ? live.statusName : ""),
-    fact("Model", live?.ok ? live.model : ""),
+    // A bare vendor code ("CLEANING_AUTO") is not words: the status chip already says it in ours.
+    none ? nr("Robot reports") : fact("Robot reports", live?.ok && !/^[A-Z0-9_]+$/.test(live.statusName ?? "") ? live.statusName : ""),
+    fact("Model", live?.ok ? live.profile?.model || live.model : ""),
     fact("Serial", record.robotSn),
     fact("Last seen", agoText(live?.lastSeenAt ?? record.lastSeenAt, input.now)),
   ];
+  // Hidden: a fact the brand cannot report, and a model nobody reported.
+  return input.hideUnreported ? all.filter((f) => !(f.dim && f.value === "Not reported") && !((f.label === "Model" || f.label === "Robot reports") && f.value === "—")) : all;
 }
 
 /**
@@ -1417,6 +1425,129 @@ export function capabilityNote(capabilities: Record<string, unknown> | null | un
   return `${label} — no ${list}`;
 }
 
+/** Plain-words facts for one brand + model, from core's manifest (`TFleetRobot.profile`). */
+export type TRobotProfile = {
+  model?: string;
+  modelKnown?: boolean;
+  alarms?: string[];
+  makerApp?: string;
+  makerAppOnly?: string[];
+};
+
+export type TRobotAbilityRow = { label: string; value: string };
+
+const listText = (items: string[]) =>
+  items.length > 1 ? `${items.slice(0, -1).join(", ")} and ${items[items.length - 1]}` : items[0] ?? "";
+const firstUp = (t: string) => (t ? t.charAt(0).toUpperCase() + t.slice(1) : t);
+
+/**
+ * "What this robot can do" (owner 2026-09-26): a few short rows in our words,
+ * built only from THIS robot's manifest (brand + model), so two models read
+ * differently. Rows with nothing to say are left out; [] while the robot has
+ * not been read, or when it has no interface (the no-monitoring panel says so).
+ *
+ *  - Does:      what it does when told (only what its maker's API lets us send);
+ *  - Reports:   what it tells us (battery, floor, position, heat, past patrols);
+ *  - Alarms:    the alarm kinds it raises;
+ *  - In <app>:  what only the maker's own app does (so nobody hunts for it here);
+ *  - Not shared yet: the facts (battery, floor, position) its maker does not give us.
+ */
+export function robotAbilities(input: {
+  capabilities?: Record<string, unknown> | null;
+  profile?: TRobotProfile | null;
+  type?: unknown;
+  brand?: unknown;
+} | null | undefined): TRobotAbilityRow[] {
+  const caps = input?.capabilities;
+  if (!caps || typeof caps !== "object" || capabilityLabel(caps) === "No interface") return [];
+  const on = (k: string) => caps[k] === true;
+  const patrols = input?.type === "security" && on("patrolControl");
+  const cleans = input?.type !== "security";
+  const does = [
+    patrols && "patrols its routes (start, stop, resume)",
+    cleans && on("startProcess") && "cleans a whole floor or chosen areas",
+    cleans && on("spotClean") && "cleans spots you pick on the plan",
+    on("pauseResume") && "pauses and resumes",
+    !patrols && on("pauseProcess") && "stops a job",
+    on("navigateToPoint") && "goes to a point you pick",
+    on("relocalize") && "can be told where it is",
+    on("sendToDock") && "returns to its charger",
+    on("liveVideo") && "streams live video",
+    on("manualDrive") && "can be driven by hand",
+  ].filter(Boolean) as string[];
+  const reports = [
+    on("battery") && "battery",
+    on("floorReporting") && "floor",
+    on("readLocation") && "live position",
+    on("thermalCamera") && "heat readings",
+    on("patrolHistory") && (on("thermalCamera") ? "past patrols with photos and temperatures" : "past patrols with photos"),
+  ].filter(Boolean) as string[];
+  const p = input?.profile ?? {};
+  const alarms = (Array.isArray(p.alarms) ? p.alarms : []).filter((a) => typeof a === "string" && a);
+  const makerOnly = (Array.isArray(p.makerAppOnly) ? p.makerAppOnly : []).filter((a) => typeof a === "string" && a);
+  const rows: TRobotAbilityRow[] = [];
+  if (does.length) rows.push({ label: "Does", value: `${firstUp(listText(does))}.` });
+  if (reports.length) rows.push({ label: "Reports", value: `${firstUp(listText(reports))}.` });
+  if (alarms.length) rows.push({ label: "Alarms", value: `${firstUp(listText(alarms))}${on("resolveAlerts") ? " - mark them resolved here." : "."}` });
+  if (makerOnly.length && p.makerApp) rows.push({ label: `In ${p.makerApp}`, value: `${firstUp(listText(makerOnly))}.` });
+  // Facts only: an action it doesn't take is simply absent from "Does", never listed as missing.
+  const missing = [!on("battery") && "battery", !on("floorReporting") && "floor", !on("readLocation") && "live position"].filter(Boolean) as string[];
+  if (missing.length) rows.push({ label: "Not shared yet", value: `${firstUp(listText(missing))}.` });
+  return rows;
+}
+
+/**
+ * The empty schedule for a robot whose maker keeps schedules in its own app:
+ * "Patrol schedules are set in the PadBot app. PadBot doesn't share them with us yet."
+ */
+export function scheduleElsewhereText(type: unknown, brand: unknown, profile?: TRobotProfile | null): string {
+  const what = type === "security" ? "Patrol schedules" : "Cleaning schedules";
+  const name = (typeof brand === "string" && brand.trim()) || "The maker";
+  const app = profile?.makerApp || `${name}'s own app`;
+  return `${what} are set in ${app}. ${name} doesn't share them with us yet.`;
+}
+
+/**
+ * The confirm step for a command (owner 2026-09-26: say what will happen
+ * before it is sent). `point` names the saved point for Go to point / Set position.
+ */
+export function commandConfirm(
+  kind: unknown,
+  input: { type?: unknown; name?: unknown; point?: unknown } = {},
+): { title: string; body: string; action: string } {
+  const who = (typeof input.name === "string" && input.name) || "The robot";
+  const at = typeof input.point === "string" && input.point ? input.point : "";
+  const label = kind === "full" && input.type === "security" ? "Start patrol" : commandLabel(kind);
+  const body: Record<string, string> = {
+    full: input.type === "security" ? `${who} starts walking its default patrol route once.` : `${who} starts cleaning the whole floor it is on.`,
+    area: `${who} starts cleaning the chosen areas.`,
+    return: `${who} stops what it is doing and drives back to its charger.`,
+    pause: `${who} stops where it is and waits. Press Resume to carry on.`,
+    resume: `${who} carries on with the job it paused.`,
+    cancel: `${who} stops the current job and stays where it is. It will not carry on by itself.`,
+    navigate: at ? `${who} drives to ${at}.` : `${who} drives to the point you pick.`,
+    relocalize: at
+      ? `${who} is told it is standing at ${at}. Only do this if it really is there - a wrong position gets it lost.`
+      : `${who} is told where it is standing. Only do this if the position is right.`,
+    "patrol-resume": `${who} carries on with the patrol that was interrupted.`,
+  };
+  return { title: `${label}?`, body: body[String(kind)] ?? `${who}: ${label}.`, action: label };
+}
+
+/** The Brand column: "PadBot S2", "Demo S1 (simulated)", or just "Ounitech" when no model is reported. */
+export function brandModelText(
+  brand: unknown,
+  brands: Array<{ brand?: unknown; displayName?: unknown }> | null | undefined,
+  live?: TLiveRobotState | null,
+): string {
+  const name = brandName(brand, brands);
+  const model = live?.ok ? (live.profile?.model || live.model || "").trim() : "";
+  if (!model) return name;
+  const word = name.split(" ")[0]!.toLowerCase();
+  const simulated = /\(simulated\)/i.test(name) ? " (simulated)" : "";
+  return (model.toLowerCase().startsWith(word) ? model : `${name.replace(/\s*\(.*\)$/, "")} ${model}`) + simulated;
+}
+
 /**
  * The note under the credentials. The handoff says "stored encrypted"; they
  * are not encrypted at rest today (see HERO-PENDING_INTEGRATIONS), so the note

package/utils/robot-models.fixture.json

@@ -0,0 +1,181 @@
+{
+ "s2": {
+  "capabilities": {
+   "readLocation": true,
+   "navigateToPoint": true,
+   "battery": true,
+   "sendToDock": true,
+   "relocalize": true,
+   "startProcess": true,
+   "pauseProcess": true,
+   "processCompletion": true,
+   "floorReporting": true,
+   "patrolControl": true,
+   "liveVideo": true,
+   "patrolHistory": true,
+   "resolveAlerts": true,
+   "thermalCamera": true
+  },
+  "profile": {
+   "model": "PadBot S2",
+   "modelKnown": true,
+   "alarms": [
+    "person",
+    "high temperature",
+    "smoke",
+    "debris",
+    "noise",
+    "water on the floor",
+    "person falling",
+    "door open",
+    "window open",
+    "fire-fighting equipment"
+   ],
+   "makerApp": "the PadBot app",
+   "makerAppOnly": [
+    "patrol schedules",
+    "maps, points and routes",
+    "alarm thresholds and AI recognition",
+    "lights and voice announcements",
+    "recorded video",
+    "live thermal view"
+   ]
+  }
+ },
+ "padbot-other": {
+  "capabilities": {
+   "readLocation": true,
+   "navigateToPoint": true,
+   "battery": true,
+   "sendToDock": true,
+   "relocalize": true,
+   "startProcess": true,
+   "pauseProcess": true,
+   "processCompletion": true,
+   "floorReporting": true,
+   "patrolControl": true,
+   "liveVideo": true,
+   "patrolHistory": true,
+   "resolveAlerts": true
+  },
+  "profile": {
+   "model": "PadBot P9",
+   "modelKnown": false,
+   "alarms": [
+    "person",
+    "high temperature",
+    "smoke",
+    "debris",
+    "noise",
+    "water on the floor",
+    "person falling",
+    "door open",
+    "window open",
+    "fire-fighting equipment"
+   ],
+   "makerApp": "the PadBot app",
+   "makerAppOnly": [
+    "patrol schedules",
+    "maps, points and routes",
+    "alarm thresholds and AI recognition",
+    "lights and voice announcements",
+    "recorded video"
+   ]
+  }
+ },
+ "ounitech": {
+  "capabilities": {
+   "readLocation": true,
+   "sendToDock": true,
+   "startProcess": true
+  },
+  "profile": {
+   "model": "",
+   "modelKnown": false,
+   "alarms": [],
+   "makerApp": "the Ounitech app",
+   "makerAppOnly": [
+    "pausing or stopping a job",
+    "cleaning across floors"
+   ]
+  }
+ },
+ "demo-s1": {
+  "capabilities": {
+   "readLocation": true,
+   "navigateToPoint": true,
+   "pauseResume": true,
+   "pathAndEta": true,
+   "battery": true,
+   "sendToDock": true,
+   "relocalize": true,
+   "startProcess": true,
+   "pauseProcess": true,
+   "processCompletion": true,
+   "floorReporting": true,
+   "multiFloor": true,
+   "spotClean": true
+  },
+  "profile": {
+   "model": "Demo S1",
+   "modelKnown": false,
+   "alarms": [],
+   "makerApp": "",
+   "makerAppOnly": []
+  }
+ },
+ "demo-cx1": {
+  "capabilities": {
+   "readLocation": true,
+   "pauseResume": true,
+   "pathAndEta": true,
+   "battery": true,
+   "sendToDock": true,
+   "startProcess": true,
+   "pauseProcess": true,
+   "processCompletion": true,
+   "floorReporting": true,
+   "multiFloor": true
+  },
+  "profile": {
+   "model": "Demo CX-1",
+   "modelKnown": true,
+   "alarms": [],
+   "makerApp": "",
+   "makerAppOnly": []
+  }
+ },
+ "demo-sp1": {
+  "capabilities": {
+   "readLocation": true,
+   "navigateToPoint": true,
+   "pauseResume": true,
+   "pathAndEta": true,
+   "battery": true,
+   "sendToDock": true,
+   "relocalize": true,
+   "startProcess": true,
+   "pauseProcess": true,
+   "processCompletion": true,
+   "floorReporting": true,
+   "multiFloor": true
+  },
+  "profile": {
+   "model": "Demo SP-1",
+   "modelKnown": true,
+   "alarms": [],
+   "makerApp": "",
+   "makerAppOnly": []
+  }
+ },
+ "unknown": {
+  "capabilities": {},
+  "profile": {
+   "model": "Z9",
+   "modelKnown": false,
+   "alarms": [],
+   "makerApp": "",
+   "makerAppOnly": []
+  }
+ }
+}