@7365admin1/layer-common 4.54.1 → 4.56.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 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
+
+- 6719639: Robot maps: a robot with more than one map (PadBot) now has a map selector on robot detail and the site mini-map, opening on the map the robot is on ("Robot is here"). Each map shows its own image at its real shape, its saved points and its routes. Go to point offers another map's points only when PadBot can take the robot there (same map group), otherwise says "The robot must be on this map first."; Set position lists only the robot's current map. The building map draws a robot's map on its floor when the floor number is known and the floor has no saved plan.
+
 ## 4.54.1
 
 ### Patch Changes
@@ -1575,11 +1587,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

@@ -663,6 +663,13 @@
 }
 .hero-plan--detail { max-height: 440px; }
 .hero-plan--pick { cursor: crosshair; }
+/* The robot's own map image under the overlays; the plan takes its aspect ratio. */
+.hero-plan__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; pointer-events: none; user-select: none; opacity: 0.85; }
+.hero-mapsel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
+.hero-mapsel__here { font-size: 12px; padding: 1px 6px; border: 1px solid var(--hero-accent); color: var(--hero-accent); }
+.hero-mapsel__hint { font-size: 12px; opacity: 0.75; }
+.hero-plan__pt { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--hero-accent); pointer-events: none; }
+.hero-plan__ptname { position: absolute; transform: translate(6px, -50%); font-size: 11px; white-space: nowrap; pointer-events: none; color: var(--hero-text); }
 .hero-plan:fullscreen { background-color: var(--hero-bg); }
 .hero-plan__corner { position: absolute; width: 14px; height: 14px; }
 .hero-plan__corner--tl { left: -1px; top: -1px; border-top: 2px solid var(--hero-accent); border-left: 2px solid var(--hero-accent); }
@@ -774,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;
@@ -1257,3 +1272,4 @@ div.hero-editor__wp.hero-editor__sel, div.hero-editor__fid.hero-editor__sel { ou
 .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; }
+.hero-pick__point:disabled { opacity: 0.45; cursor: not-allowed; }

package/components/Robot/BuildingMap.vue

@@ -116,7 +116,8 @@
             :style="{ transform: `translateZ(${i * FLOOR_GAP_PX}px)`, opacity: f.dim, '--hero-fill': look.fill }"
           >
             <img v-if="f.plan" class="hero-bmap__planimg" :src="f.plan.url" :style="f.plan.style" alt="" aria-hidden="true" draggable="false" />
-            <template v-if="!fleet && !f.plan">
+            <img v-else-if="f.robotMap?.imageUrl" class="hero-bmap__planimg" :src="f.robotMap.imageUrl" style="left: 0; top: 0; width: 100%; height: 100%" alt="" aria-hidden="true" draggable="false" referrerpolicy="no-referrer" />
+            <template v-if="!fleet && !f.plan && !f.robotMap?.imageUrl">
               <span class="hero-bmap__room" style="left: 8%; top: 10%; width: 34%; height: 30%" aria-hidden="true" />
               <span class="hero-bmap__room" style="left: 58%; top: 10%; width: 34%; height: 44%" aria-hidden="true" />
               <span class="hero-bmap__room" style="left: 8%; top: 62%; width: 60%; height: 28%" aria-hidden="true" />
@@ -205,6 +206,7 @@
       <div class="hero-aside__title hero-bmap__asidetitle">Floors · top down</div>
       <div v-for="f in legend" :key="f.floorNo" class="hero-bmap__legendrow">
         <b>{{ floorName(f.floorNo) }}</b>
+        <div v-if="f.robotMaps.length" class="hero-mapsel__hint">Robot map: {{ f.robotMaps.map((m) => m.label + (m.current ? " (robot is here)" : "")).join(", ") }}</div>
         <div class="hero-bmap__chips">
           <button v-for="r in f.robots" :key="r.id" type="button" class="hero-bmap__chip" @click="emit('open', r.id)"><span :class="`hero-tone--${tone(r)}`">{{ r.name }}</span></button>
           <span v-if="!f.robots.length" class="hero-muted">—</span>
@@ -231,6 +233,7 @@ import { floorPlanFor } from "../../utils/robot-floorplan";
 import { floorAspect, floorDoors, placementInWorld, planBoxIn, routeOverlay, viewerLifts } from "../../utils/rmf-editor";
 import useRobotLive, { siteStatesFeed } from "../../composables/useRobotLive";
 import { openDoorNames } from "../../utils/robot-fleet-core";
+import { robotMapViews, robotMapsByFloor, type TRobotMapView } from "../../utils/robot-maps";
 import {
   brandName,
   floorName,
@@ -304,9 +307,17 @@ const siteLabel = computed(() => props.siteName || names.value.siteName || "This
 const ids = computed(() => rows.value.map((r) => String(r._id)));
 const { states, connected } = useRobotLive(ids, siteStatesFeed());
 const routes = ref<Record<string, TPatrolRouteView[]>>({});
-const { getPatrolRoutes, getRobotBrands } = useRobots();
+const { getPatrolRoutes, getRobotBrands, getRobotMaps } = useRobots();
+/** Each security robot's own maps (PadBot), read once per robot: drawn on their floor when the floor has no saved plan. */
+const robotMaps = ref<Record<string, Array<Record<string, any>>>>({});
 watch(ids, async (list) => {
   if (props.type !== "security") return void (routes.value = {});
+  const missing = list.filter((id) => !(id in robotMaps.value));
+  if (missing.length) {
+    const got: Record<string, Array<Record<string, any>>> = {};
+    await Promise.allSettled(missing.map(async (id) => (got[id] = (await getRobotMaps(id))?.items ?? [])));
+    robotMaps.value = { ...robotMaps.value, ...Object.fromEntries(missing.map((id) => [id, got[id] ?? []])) };
+  }
   const next: Record<string, TPatrolRouteView[]> = {};
   await Promise.allSettled(list.map(async (id) => {
     const res = await getPatrolRoutes(id);
@@ -319,7 +330,19 @@ getRobotBrands().then((res: any) => (brands.value = res?.items ?? []), () => und
 
 /* ---- floors, features, robots per floor ---- */
 const shapes = computed<TEditorShape[]>(() => shapesFromMap(map.value));
-const floors = computed(() => buildingFloors(mapFloors(ids.value, states.value), map.value));
+/** The robots' maps with a known floor, per floor (a robot's map is "current" when it reports it). */
+const robotFloorMaps = computed(() => {
+  const all: TRobotMapView[] = [];
+  for (const id of ids.value) {
+    for (const m of robotMapViews(robotMaps.value[id], states.value[id]?.mapId ?? null, routes.value[id] ?? [])) {
+      const i = all.findIndex((x) => x.mapId === m.mapId);
+      if (i < 0) all.push(m);
+      else if (m.current) all[i] = { ...all[i]!, current: true };
+    }
+  }
+  return robotMapsByFloor(all);
+});
+const floors = computed(() => buildingFloors([...new Set([...mapFloors(ids.value, states.value), ...robotFloorMaps.value.keys()])].sort((a, b) => a - b), map.value));
 const focus = ref<number | null>(null);
 watch(floors, (f) => {
   if (focus.value !== null && !f.includes(focus.value)) focus.value = null;
@@ -361,6 +384,9 @@ const floors3d = computed(() =>
     return {
       floorNo,
       plan: floorImage(floorNo),
+      robotMaps: robotFloorMaps.value.get(floorNo) ?? [],
+      // ponytail: one robot map drawn per floor (the one a robot is on, else the first); the rest are listed.
+      robotMap: (robotFloorMaps.value.get(floorNo) ?? []).find((m) => m.current) ?? robotFloorMaps.value.get(floorNo)?.[0] ?? null,
       dim: floorOpacity(cam.value.tilt, focus.value, floorNo),
       shapes: parts.shapes,
       glyphs: parts.glyphs,

package/components/Robot/Detail.vue

@@ -38,20 +38,17 @@
 
   <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,38 +147,29 @@
         </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>
-      <RobotLivePlan
-        :name="record?.name"
-        :status-label="statusLabel"
-        :point="posLive ? point : null"
-        :stale="shown?.stale === true"
-        :heading="headingDeg(shown)"
-        :trail="trail"
-        :readout="readout"
-        :lost="posLost"
-        :route="route"
-        :route-moving="statusMode === 'WORKING'"
-        :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>
+    <div v-if="online || canDrive" class="hero-detail__video">
+      <v-btn v-if="caps?.liveVideo === true && online" 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-else class="hero-notreported">Live view opens when the robot is online.</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
@@ -160,7 +205,16 @@
     <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" />
+    <RobotPointPicker
+      v-if="pickOpen && pickKind"
+      :kind="pickKind"
+      :groups="pointGroups"
+      :floor-no="live?.floorNo ?? null"
+      :current-map-id="live?.mapId ?? null"
+      :maps="mapViews"
+      @close="pickOpen = false"
+      @pick="onPick"
+    />
   </v-dialog>
 
   <RobotToast v-model="toast" />
@@ -180,20 +234,20 @@ import RobotLiveView from "./LiveView.vue";
 import RobotManualDrive from "./ManualDrive.vue";
 import RobotPointPicker from "./PointPicker.vue";
 import { faultPhotos } from "../../utils/robot-control";
+import { robotMapDefault, robotMapViews } from "../../utils/robot-maps";
 import useRobotLive, { siteStatesFeed } from "../../composables/useRobotLive";
 import {
   brandName,
   capabilityLabel,
   cleaningScheduleRows,
   commandBody,
+  commandConfirm,
   commandLabel,
   faultBadge,
   headingDeg,
   isMoving,
   mergePose,
-  notReportedLine,
   optimisticMode,
-  patrolRecordRow,
   patrolRunHint,
   patrolScheduleRows,
   pointCommandBody,
@@ -201,9 +255,11 @@ import {
   unplacedStopsText,
   planPoint,
   positionText,
+  robotAbilities,
   robotErrorMessage,
   robotFacts,
   robotStatus,
+  scheduleElsewhereText,
   showSpotClean,
   sinceText,
   speedText,
@@ -305,8 +361,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(() =>
@@ -330,14 +394,26 @@ 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>(() => patrol.value?.routes?.[0] ?? null);
-const floorText = computed(() => facts.value[2]?.value ?? "");
-const planTitle = computed(() => (spotOn.value ? "Spot clean" : route.value ? `Live position · ${route.value.name}` : "Live position"));
+// 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}`;
+  return route.value ? `Live position · ${route.value.name}` : "Live position";
+});
 const planHint = computed(() => {
   if (spotOn.value) return "Click points on the plan, then send";
   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 ---- */
@@ -349,7 +425,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() {
@@ -366,6 +441,37 @@ async function loadSchedule() {
   }
 }
 
+/* ---- the robot's own maps (PadBot: one per floor / area): a selector, opening where the robot is ---- */
+const mapItems = ref<Array<Record<string, any>>>([]);
+const mapViews = computed(() => robotMapViews(mapItems.value, live.value?.mapId ?? null, patrol.value?.routes ?? []));
+const selectedMapId = ref<string | null>(null);
+const selectedMap = computed(() => mapViews.value.find((m) => m.mapId === selectedMapId.value) ?? null);
+watch(mapViews, (views) => {
+  if (!views.some((m) => m.mapId === selectedMapId.value)) selectedMapId.value = robotMapDefault(mapItems.value, views);
+});
+// The robot changes map (lift / map switch): follow it while the robot's map was shown.
+watch(
+  () => live.value?.mapId,
+  (to, from) => {
+    if (to && from && selectedMapId.value === from && mapViews.value.some((m) => m.mapId === to)) selectedMapId.value = to;
+  },
+);
+/** Without robot maps the placeholder plan shows the robot as before; with them, only on its own map. */
+const robotOnShownMap = computed(() => !selectedMap.value || selectedMap.value.current);
+const currentMapLabel = computed(() => mapViews.value.find((m) => m.current)?.label ?? "");
+const hereText = computed(() => (currentMapLabel.value ? `The robot is on ${currentMapLabel.value}` : "The robot has not said which map it is on"));
+/** The routes saved on the map shown (a route without a map id goes with the robot's current map). */
+const mapRoutes = computed(() =>
+  (patrol.value?.routes ?? []).filter((r) => (r.mapId ? r.mapId === selectedMap.value?.mapId : selectedMap.value?.current)),
+);
+async function loadMaps() {
+  if (!record.value || noInterface.value) return;
+  try {
+    mapItems.value = (await getRobotMaps(props.robotId))?.items ?? [];
+  } catch {
+    mapItems.value = [];
+  }
+}
 /* ---- the position stream: only for a brand that reports one ---- */
 function startStream() {
   stream?.stop();
@@ -396,11 +502,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;
@@ -417,7 +525,8 @@ 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);
+      mapItems.value = (await getRobotMaps(props.robotId))?.items ?? [];
+      pointGroups.value = savedPointGroups(mapItems.value);
     } catch {
       pointGroups.value = [];
     }
@@ -432,7 +541,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. */
@@ -475,7 +593,7 @@ function onPick(p: TSavedPoint) {
   if (!kind) return;
   const body = pointCommandBody(kind, p, live.value);
   if (!body) {
-    toast.value = "Set position: the robot is not on that floor.";
+    toast.value = "Set position: the robot must be on this map first.";
     return;
   }
   run(kind, body);
@@ -537,6 +655,8 @@ watch(
     record.value = null;
     plans.value = [];
     patrol.value = null;
+    mapItems.value = [];
+    selectedMapId.value = null;
     trail.value = [];
     spot.value = [];
     lastPose.value = null;
@@ -544,11 +664,15 @@ watch(
     streamLost.value = false;
     await loadRecord();
     loadSchedule();
+    loadMaps();
   },
   { immediate: true },
 );
 // The first live reading says whether there is a schedule to ask for (no interface = none).
-watch(noInterface, () => loadSchedule());
+watch(noInterface, () => {
+  loadSchedule();
+  loadMaps();
+});
 getRobotBrands().then(
   (res) => (brands.value = res?.items ?? []),
   () => undefined,

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/FloorPlan.vue

@@ -2,27 +2,45 @@
   <!--
     The floor plan both the mini-map and robot detail draw on: 4:3, 10% grid,
     wall outlines, the red dock, corner brackets and the scan line. A
-    placeholder for the image each robot uploads (README "Assets"). Overlays
+    placeholder for the image each robot uploads (README "Assets"). With
+    `image` (the robot's own map, e.g. PadBot) the plan takes that image's
+    aspect ratio, so 0-100 overlay shares land on the right pixel. Overlays
     (routes, robots, trail, spot points) go in the default slot.
   -->
-  <div ref="root" class="hero-plan" :class="{ 'hero-plan--detail': detail, 'hero-plan--pick': pick }" @click="onClick">
+  <div ref="root" class="hero-plan" :class="{ 'hero-plan--detail': detail, 'hero-plan--pick': pick, 'hero-plan--image': !!image }" :style="frameStyle" @click="onClick">
+    <img v-if="image" class="hero-plan__img" :src="image" alt="" aria-hidden="true" draggable="false" referrerpolicy="no-referrer" />
     <span class="hero-plan__corner hero-plan__corner--tl" aria-hidden="true" />
     <span class="hero-plan__corner hero-plan__corner--tr" aria-hidden="true" />
     <span class="hero-plan__corner hero-plan__corner--bl" aria-hidden="true" />
     <span class="hero-plan__corner hero-plan__corner--br" aria-hidden="true" />
-    <span class="hero-plan__wall" style="left: 8%; top: 10%; width: 34%; height: 30%" aria-hidden="true" />
-    <span class="hero-plan__wall" style="left: 58%; top: 10%; width: 34%; height: 44%" aria-hidden="true" />
-    <span class="hero-plan__wall" style="left: 8%; top: 62%; width: 60%; height: 28%" aria-hidden="true" />
-    <span class="hero-plan__dock" aria-hidden="true"><span v-if="detail" class="hero-plan__dock-label">Dock</span></span>
+    <template v-if="!image">
+      <span class="hero-plan__wall" style="left: 8%; top: 10%; width: 34%; height: 30%" aria-hidden="true" />
+      <span class="hero-plan__wall" style="left: 58%; top: 10%; width: 34%; height: 44%" aria-hidden="true" />
+      <span class="hero-plan__wall" style="left: 8%; top: 62%; width: 60%; height: 28%" aria-hidden="true" />
+      <span class="hero-plan__dock" aria-hidden="true"><span v-if="detail" class="hero-plan__dock-label">Dock</span></span>
+    </template>
     <span class="hero-plan__scan" aria-hidden="true" />
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
-const props = defineProps<{ detail?: boolean; pick?: boolean }>();
+const props = defineProps<{
+  detail?: boolean;
+  pick?: boolean;
+  /** The robot's own map image (http/https); null keeps the placeholder plan. */
+  image?: string | null;
+  /** That image's width / height, so the plan keeps its shape. */
+  aspect?: number | null;
+}>();
+/** The image's own shape; the detail plan's 440 px height cap narrows the width instead of squashing it. */
+const frameStyle = computed(() => {
+  const a = props.image && props.aspect && Number.isFinite(props.aspect) && props.aspect > 0 ? props.aspect : null;
+  if (!a) return undefined;
+  return { aspectRatio: String(a), ...(props.detail ? { width: `min(100%, ${Math.round(440 * a)}px)`, maxHeight: "none", marginInline: "auto" } : {}) };
+});
 const emit = defineEmits<{ pick: [point: { x: number; y: number }] }>();
 const root = ref<HTMLElement | null>(null);