@7365admin1/layer-common 4.57.3 → 4.58.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @iservice365/layer-common
 
+## 4.58.1
+
+### Patch Changes
+
+- e186caf: Robot live view: no more silent reload every ~6 s. PadBot's video URL expiry comes without a time zone ("2026-09-26 16:26:02"); read as local time it was already past, so the panel fetched a new URL every 5 s forever. An expiry that has no zone, or is under a minute away, no longer schedules a re-fetch (the stream's own failure still reconnects, with capped backoff, then Retry). The no-picture and stall watchdogs no longer count while the page is hidden.
+- c4adb97: Robots: a robot's name tag stays inside the plan. Near the right edge it sits to the robot's left, and near the top it goes below: on robot detail (name + status) and on the building map, as the mini-map already did. Before, the S2 docked at the top-right showed only "HERO-OT".
+
+## 4.58.0
+
+### Minor Changes
+
+- fd4c0c9: Robots: when a robot is online but its position isn't arriving, robot detail, the site mini-map and the building map say so in a calm banner ("<Robot> is online, but we're not receiving its position right now.") and detail keeps the last position seen faded, tagged "last known · HH:MM". The live-view segment fix now also catches a stray H.264 delimiter split across two TS packets. New `scripts/sync-robot-live.mjs` copies the web live-view player into the mobile apps.
+
 ## 4.57.3
 
 ### Patch Changes
@@ -1611,11 +1624,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

@@ -829,6 +829,8 @@
 .hero-me { position: absolute; width: 0; height: 0; }
 .hero-me__tag { position: absolute; left: 14px; top: -26px; white-space: nowrap; font-size: 11px; font-weight: 800; padding: 2px 6px; background: var(--hero-text); color: var(--hero-bg); line-height: 1.45; }
 .hero-me__tag > span { font-weight: 400; opacity: 0.75; }
+.hero-me__tag--left { left: auto; right: 14px; }
+.hero-me__tag--below { top: 14px; }
 .hero-me__radar {
   position: absolute;
   left: -36px;
@@ -1009,6 +1011,8 @@
   box-shadow: var(--hero-shadow-sm);
   cursor: pointer;
 }
+/* Near the plan's right edge the name sits to the pin's left (nameTagSide) - never clipped. */
+.hero .hero-bmap__name--left { left: auto; right: 6px; transform-origin: 100% 0; border-left: 0; border-right: 3px solid var(--hero-bot); }
 .hero-bmap__floorlabel { position: absolute; left: -14px; top: 50%; transform-origin: 0 0; font-size: 12px; font-weight: 800; padding: 1px 6px; background: var(--hero-text); color: var(--hero-bg); white-space: nowrap; }
 .hero-bmap__shaft { position: absolute; width: 0; height: 0; transform-style: preserve-3d; transition: opacity 0.6s ease; }
 .hero-bmap__shaftwall { position: absolute; left: 0; top: 0; box-sizing: border-box; transform-origin: top; transform: rotateX(90deg); background: color-mix(in srgb, var(--hero-accent) 28%, transparent); border: 1px solid var(--hero-accent); }

package/components/Robot/BuildingMap.vue

@@ -172,7 +172,14 @@
               <span class="hero-bmap__body" aria-hidden="true" />
               <span class="hero-bmap__pin" :style="{ height: `${look.pinH}px` }" aria-hidden="true" />
               <span class="hero-bmap__pin hero-bmap__pin--y" :style="{ height: `${look.pinH}px` }" aria-hidden="true" />
-              <button type="button" class="hero-bmap__name" :style="{ transform: `translateZ(${look.pinZ}px) ${unskew}` }" @click.stop="emit('open', r.id)" @mousedown.stop>
+              <button
+                type="button"
+                class="hero-bmap__name"
+                :class="{ 'hero-bmap__name--left': nameTagSide(r.left, r.top, r.name, plane.w, plane.h, BUILDING_TAG).flipX }"
+                :style="{ transform: `translateZ(${look.pinZ}px) ${unskew}` }"
+                @click.stop="emit('open', r.id)"
+                @mousedown.stop
+              >
                 {{ r.name }}
               </button>
             </div>
@@ -219,6 +226,7 @@
         </div>
         <div class="hero-bmap__traytext">{{ unplacedLine }}</div>
       </div>
+      <div v-if="gapText" class="hero-notice" role="status">{{ gapText }}</div>
     </aside>
   </div>
 </template>
@@ -235,6 +243,8 @@ import useRobotLive, { siteStatesFeed } from "../../composables/useRobotLive";
 import { openDoorNames } from "../../utils/robot-fleet-core";
 import { robotMapViews, robotMapsByFloor, type TRobotMapView } from "../../utils/robot-maps";
 import {
+  BUILDING_TAG,
+  nameTagSide,
   brandName,
   floorName,
   mapFloors,
@@ -246,6 +256,8 @@ import {
   routeTags,
   rowStatus,
   unplacedRobots,
+  positionGap,
+  positionGapText,
   unplacedText,
   type TMapRobot,
   type TPatrolRouteView,
@@ -430,6 +442,11 @@ const shafts = computed(() =>
 );
 
 const unplaced = computed(() => unplacedRobots(rows.value, states.value));
+/** Online robots whose position isn't arriving: not drawn, named instead. */
+const gapText = computed(() => {
+  const names = rows.value.filter((r) => positionGap(states.value[String(r._id)], states.value[String(r._id)]?.capabilities)).map((r) => String(r.name ?? ""));
+  return names.length ? positionGapText(names) : "";
+});
 const unplacedLine = computed(() => unplacedText(unplaced.value.map((r) => brandName(r.brand, brands.value))) ?? "");
 
 const emptyNote = computed(() => {

package/components/Robot/Detail.vue

@@ -74,6 +74,7 @@
   <div v-if="!noInterface" class="hero-detail__grid">
     <div>
       <div class="hero-section__title">Location</div>
+      <div v-if="gapText" class="hero-notice" role="status">{{ gapText }}</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>
@@ -95,12 +96,12 @@
         </div>
         <RobotLivePlan
           :name="record?.name"
-          :status-label="statusLabel"
-          :point="posLive && robotOnShownMap ? point : null"
-          :stale="shown?.stale === true"
-          :heading="headingDeg(shown)"
-          :trail="trail"
-          :readout="readout"
+          :status-label="showLastKnown ? lastKnownLabel(lastKnown!.at, now) : statusLabel"
+          :point="posLive && robotOnShownMap ? point : showLastKnown ? lastKnown!.point : null"
+          :stale="shown?.stale === true || showLastKnown"
+          :heading="showLastKnown ? lastKnown!.heading : headingDeg(shown)"
+          :trail="showLastKnown ? [] : trail"
+          :readout="showLastKnown ? '' : readout"
           :lost="posLost"
           :route="route"
           :routes="selectedMap ? mapRoutes : null"
@@ -242,6 +243,7 @@ import {
   faultBadge,
   headingDeg,
   isMoving,
+  lastKnownLabel,
   mergePose,
   optimisticMode,
   patrolRunHint,
@@ -250,6 +252,8 @@ import {
   savedPointGroups,
   unplacedStopsText,
   planPoint,
+  positionGap,
+  positionGapText,
   positionText,
   robotAbilities,
   robotErrorMessage,
@@ -379,6 +383,16 @@ const point = computed(() => planPoint(shown.value as any));
 const posLive = computed(() => reportsPosition.value && online.value && !streamLost.value && !!point.value);
 const posLost = computed(() => reportsPosition.value && !!live.value && (!live.value.ok || live.value.online === false || streamLost.value));
 const trail = ref<Array<{ x: number; y: number }>>([]);
+/* Online, but no coordinates arriving (a gap on our side, not "the robot is lost"): a calm banner, and the last position seen on this screen drawn faded. */
+const gap = computed(() => positionGap(live.value, caps.value));
+const lastKnown = ref<{ point: { left: string; top: string }; heading: number; at: number; mapId: string | null } | null>(null);
+watch(point, (p) => {
+  if (p && posLive.value) lastKnown.value = { point: p, heading: headingDeg(shown.value), at: live.value?.positionAt ?? Date.now(), mapId: live.value?.mapId ?? null };
+});
+const showLastKnown = computed(
+  () => gap.value && !!lastKnown.value && (!selectedMap.value || !lastKnown.value.mapId || lastKnown.value.mapId === selectedMap.value.mapId),
+);
+const gapText = computed(() => (gap.value ? positionGapText(record.value?.name ?? "", showLastKnown.value) : ""));
 watch(
   () => shown.value?.planPosition,
   (p) => {
@@ -455,7 +469,9 @@ watch(
 /** 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"));
+const hereText = computed(() =>
+  currentMapLabel.value ? `The robot is on ${currentMapLabel.value}` : gap.value ? "" : "We're not receiving which map the robot is on right now",
+);
 /** 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)),

package/components/Robot/LivePlan.vue

@@ -18,9 +18,9 @@
       <span v-for="t in trailDots(trail)" :key="t.key" class="hero-trail" :style="{ left: t.left, top: t.top, opacity: t.op }" aria-hidden="true" />
       <span class="hero-cross hero-cross--h" :style="{ top: point.top, transition: `top ${tickMs}ms linear` }" aria-hidden="true" />
       <span class="hero-cross hero-cross--v" :style="{ left: point.left, transition: `left ${tickMs}ms linear` }" aria-hidden="true" />
-      <div class="hero-readout">{{ readout }}</div>
+      <div v-if="readout" class="hero-readout">{{ readout }}</div>
       <div class="hero-me" :class="{ 'hero-me--stale': stale }" :style="{ left: point.left, top: point.top, transition: `left ${tickMs}ms linear, top ${tickMs}ms linear` }">
-        <div class="hero-me__tag">{{ name }} <span>{{ statusLabel }}</span></div>
+        <div class="hero-me__tag" :class="tagClass">{{ name }} <span>{{ statusLabel }}</span></div>
         <div class="hero-me__radar" aria-hidden="true" />
         <div class="hero-me__ping" aria-hidden="true" />
         <div class="hero-me__body" :style="{ transform: `rotate(${heading}deg)` }" aria-hidden="true"><div class="hero-me__tick" /></div>
@@ -35,9 +35,10 @@
 import RobotFloorPlan from "./FloorPlan.vue";
 import RobotPatrolRoutes from "./PatrolRoutes.vue";
 import RobotReconnecting from "./Reconnecting.vue";
-import { trailDots, type TPatrolRouteView } from "../../utils/robot-display";
+import { computed } from "vue";
+import { DETAIL_TAG, nameTagSide, trailDots, type TPatrolRouteView } from "../../utils/robot-display";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     name?: string;
     statusLabel?: string;
@@ -69,4 +70,10 @@ withDefaults(
   { stale: false, name: "", statusLabel: "", point: null, heading: 0, trail: () => [], readout: "", lost: false, route: null, routes: null, image: null, aspect: null, points: () => [], routeMoving: false, spot: () => [], pick: false, tickMs: 1200 },
 );
 const emit = defineEmits<{ pick: [point: { x: number; y: number }] }>();
+// The tag stays inside the plan (flipped left near the right edge, below near the top) - never clipped.
+const tagClass = computed(() => {
+  if (!props.point) return {};
+  const side = nameTagSide(props.point.left, props.point.top, `${props.name} ${props.statusLabel}`, 320, 240, DETAIL_TAG);
+  return { "hero-me__tag--left": side.flipX, "hero-me__tag--below": side.below };
+});
 </script>

package/components/Robot/MiniMap.vue

@@ -55,6 +55,7 @@
       <span v-if="floor !== null" class="hero-mini__count">{{ robots.length }} on {{ floorName(floor) }}</span>
     </div>
     <div v-if="unplaced" class="hero-notice">{{ unplaced }}</div>
+    <div v-if="gapText" class="hero-notice" role="status">{{ gapText }}</div>
   </div>
 </template>
 
@@ -72,6 +73,8 @@ import {
   mapRobots,
   nameTagSide,
   pickFloor,
+  positionGap,
+  positionGapText,
   robotStatus,
   unplacedRobots,
   unplacedText,
@@ -159,6 +162,12 @@ const unplaced = computed(() =>
   unplacedText(unplacedRobots(props.rows, props.states).map((r) => brandName(r.brand, props.brands))),
 );
 
+/** Online robots whose position isn't arriving: not drawn (never a guessed dot), named here instead. */
+const gapText = computed(() => {
+  const names = props.rows.filter((r) => positionGap(props.states[String(r._id)], props.states[String(r._id)]?.capabilities)).map((r) => String(r.name ?? ""));
+  return names.length ? positionGapText(names) : "";
+});
+
 const TONE: Record<string, string> = {
   success: "rgb(var(--v-theme-success))",
   warning: "rgb(var(--v-theme-warning))",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.57.3",
+  "version": "4.58.1",
   "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.",

package/utils/robot-control.ts

@@ -1,8 +1,9 @@
 /**
- * Web-only robot controls: the live-view player's URL handling and the
- * manual-drive client. Not part of the mobile-synced `robot-display.ts`
- * (mobile has no live view or manual control - parity exception, like map
- * editing, decision 81).
+ * Robot controls: the live-view player's URL handling and the manual-drive
+ * client. Not part of the mobile-synced `robot-display.ts`. The live-view
+ * player also runs on the phones: `scripts/sync-robot-live.mjs` bundles
+ * `startLivePlayer` into a WebView page for the RN apps. Manual control stays
+ * web-only (parity exception, like map editing, decision 81).
  */
 
 /* ============================================================ live view */
@@ -26,11 +27,18 @@ export function liveVideoKind(url: unknown): TVideoKind {
   return "page";
 }
 
-/** When to ask for a fresh URL: 30 s before it expires (never sooner than 5 s); null when it does not expire. */
+/**
+ * When to ask for a fresh URL: 30 s before it expires. Null (no scheduled
+ * re-mint - the stream's own failure re-mints, with capped backoff) when the
+ * expiry is missing, has no time zone, or is under a minute away. PadBot sent
+ * "2026-09-26 16:26:02" (no zone): read as local time it was already past, so
+ * the old 5 s floor re-minted every ~6 s forever, silently (prod 2026-09-26).
+ */
 export function remintDelayMs(expiresAt: unknown, now: number = Date.now()): number | null {
-  const t = typeof expiresAt === "string" ? Date.parse(expiresAt) : NaN;
-  if (!Number.isFinite(t)) return null;
-  return Math.max(5_000, t - now - 30_000);
+  if (typeof expiresAt !== "string" || !/(Z|[+-]\d\d:?\d\d)$/i.test(expiresAt.trim())) return null;
+  const t = Date.parse(expiresAt);
+  if (!Number.isFinite(t) || t - now < 60_000) return null;
+  return Math.max(30_000, t - now - 30_000);
 }
 
 export const LIVE_NO_PICTURE =
@@ -76,7 +84,10 @@ export type THlsCtor = { isSupported(): boolean; new (config?: Record<string, un
  */
 export function neutraliseStrayAud(data: ArrayBuffer | Uint8Array): number {
   const b = data instanceof Uint8Array ? data : new Uint8Array(data);
-  const video = new Set<number>();
+  // Per video PID: where its last 4 payload bytes sit, so a header split across
+  // two TS packets is still found (a remuxed stream can put one there - 6 of 240
+  // in a local ffmpeg remux, and one missed header stops the picture).
+  const tails = new Map<number, number[]>();
   let n = 0;
   for (let i = 0; i + 188 <= b.length; i += 188) {
     if (b[i] !== 0x47) continue;
@@ -85,17 +96,24 @@ export function neutraliseStrayAud(data: ArrayBuffer | Uint8Array): number {
     const pid = ((b[i + 1]! & 0x1f) << 8) | b[i + 2]!;
     let p = i + 4;
     if (afc & 2) p += 1 + b[p]!;
-    // A PES start names its stream: 0xE0-0xEF = video.
-    if (b[i + 1]! & 0x40 && b[p] === 0 && b[p + 1] === 0 && b[p + 2] === 1 && (b[p + 3]! & 0xf0) === 0xe0) video.add(pid);
-    if (!video.has(pid)) continue;
-    for (let k = p; k + 4 < i + 188; k++) {
-      if (b[k] === 0 && b[k + 1] === 0 && b[k + 2] === 1 && b[k + 3] === 0x09 && (b[k + 4]! & 7) === 0) {
-        b[k + 3] = 0x60;
-        b[k + 4] = 0x01;
+    const end = i + 188;
+    if (p >= end) continue;
+    // A PES start names its stream: 0xE0-0xEF = video. The PES header is never inside a NAL unit.
+    if (b[i + 1]! & 0x40 && b[p] === 0 && b[p + 1] === 0 && b[p + 2] === 1 && (b[p + 3]! & 0xf0) === 0xe0) tails.set(pid, []);
+    const tail = tails.get(pid);
+    if (!tail) continue;
+    const t = tail.length;
+    const at = (k: number) => (k < t ? tail[k]! : p + k - t);
+    const len = t + end - p;
+    for (let k = 0; k + 4 < len; k++) {
+      if (b[at(k)] === 0 && b[at(k + 1)] === 0 && b[at(k + 2)] === 1 && b[at(k + 3)] === 0x09 && (b[at(k + 4)]! & 7) === 0) {
+        b[at(k + 3)] = 0x60;
+        b[at(k + 4)] = 0x01;
         n++;
         k += 4;
       }
     }
+    tails.set(pid, Array.from({ length: Math.min(4, len) }, (_, j) => at(len - Math.min(4, len) + j)));
   }
   return n;
 }
@@ -188,6 +206,9 @@ export function startLivePlayer(
   };
   // ponytail: one 1 s poll instead of juggling media events - videoWidth has no reliable event everywhere.
   const tick = setInterval(() => {
+    // A hidden page gets no frames painted (and Chrome pauses muted background
+    // video): not the camera's fault, so the watchdogs don't count it.
+    if (typeof document !== "undefined" && document.visibilityState === "hidden") return;
     waited += tickMs;
     if (!pictured) {
       if (video.videoWidth > 0) {

package/utils/robot-display.ts

@@ -1204,13 +1204,44 @@ export function positionText(live: TLiveRobotState | null | undefined, capabilit
   if (capabilities?.readLocation !== true) return "Not reported";
   const p = live?.position;
   if (!live?.ok || live.online === false) return "Reconnecting";
-  // Answering, but it has no position right now (e.g. not relocalised) - said, not guessed.
+  // Answering, but no position came with this reading - said, not guessed (see positionGap).
   if (!p || !finite(p.x) || !finite(p.y)) return "Position not reported right now";
   const deg = finite(p.theta) ? Math.round(((((p.theta * 180) / Math.PI) % 360) + 360) % 360) : 0;
   const seen = staleText(live, now);
   return `x ${p.x.toFixed(1)} · y ${p.y.toFixed(1)} · ${deg}°${seen ? ` · ${seen}` : ""}`;
 }
 
+/**
+ * The robot is online and its brand is meant to report where it is, but this
+ * reading carries no coordinates. Said as a gap in what we receive - never as
+ * "the robot is lost": only the brand can say that, and none does today.
+ */
+export function positionGap(live: TLiveRobotState | null | undefined, capabilities: Record<string, unknown> | null | undefined): boolean {
+  if (capabilities?.readLocation !== true || !live?.ok || live.online !== true || live.monitorable === false) return false;
+  const p = live.position;
+  return !p || !finite(p.x) || !finite(p.y);
+}
+
+/**
+ * "HERO-OTH is online, but we're not receiving its position right now. Its last
+ * known position is shown faded." Several robots: one sentence, no faded part.
+ */
+export function positionGapText(names: string | string[], lastKnownShown = false): string {
+  const list = (Array.isArray(names) ? names : [names]).map((n) => (typeof n === "string" && n.trim()) || "The robot");
+  if (!list.length) return "";
+  const one = list.length === 1;
+  const who = one ? list[0] : `${list.slice(0, -1).join(", ")} and ${list[list.length - 1]}`;
+  const head = `${who} ${one ? "is" : "are"} online, but we're not receiving ${one ? "its position" : "their positions"} right now.`;
+  return one && lastKnownShown ? `${head} Its last known position is shown faded.` : head;
+}
+
+/** The faded marker's tag: "last known · 14:05" (device clock); "last known · 2 d ago" once older than 20 h. */
+export function lastKnownLabel(at: unknown, now: number = Date.now()): string {
+  const t = typeof at === "number" ? at : at instanceof Date ? at.getTime() : NaN;
+  if (!Number.isFinite(t)) return "last known";
+  return now - t > 20 * 3_600_000 ? `last known · ${agoText(t, now)}` : `last known · ${new Date(t).toTimeString().slice(0, 5)}`;
+}
+
 export type TRobotFact = { label: string; value: string; dim: boolean };
 
 /**
@@ -1578,16 +1609,29 @@ export function credentialPatch(
 }
 
 /**
- * Keep a robot's name tag inside the mini-map plan: flip it to the robot's
- * left near the right edge, and below the robot near the top edge.
- * ponytail: width estimated from the text (10px Archivo 600) against the
- * smallest plan (320px wide, 240 tall); measure if a tag must be exact.
+ * Keep a robot's name tag inside its plan (mini-map, building map, robot
+ * detail): flip it to the robot's left near the right edge, and below the
+ * robot near the top edge.
+ * ponytail: width estimated from the text (default 10px Archivo 600: 6.2 px a
+ * character + 8 px padding; `tag` for bigger tags) against the smallest plan
+ * (320px wide, 240 tall); measure if a tag must be exact.
  */
-export function nameTagSide(left: unknown, top: unknown, name: unknown, planW = 320, planH = 240) {
+export function nameTagSide(
+  left: unknown,
+  top: unknown,
+  name: unknown,
+  planW = 320,
+  planH = 240,
+  tag: { charW?: number; pad?: number; gap?: number; above?: number } = {},
+) {
   const pct = (v: unknown) => (typeof v === "string" ? parseFloat(v) : typeof v === "number" ? v : 0) || 0;
-  const width = String(name ?? "").length * 6.2 + 8;
+  const width = String(name ?? "").length * (tag.charW ?? 6.2) + (tag.pad ?? 8);
   return {
-    flipX: (pct(left) / 100) * planW + 10 + width > planW,
-    below: (pct(top) / 100) * planH < 20,
+    flipX: (pct(left) / 100) * planW + (tag.gap ?? 10) + width > planW,
+    below: (pct(top) / 100) * planH < (tag.above ?? 20),
   };
 }
+
+/** The bigger tags: robot detail's "name + status" (11px 800, 14px from the dot, 26px above) and the building map's name (11px 800). */
+export const DETAIL_TAG = { charW: 7.4, pad: 12, gap: 14, above: 30 };
+export const BUILDING_TAG = { charW: 7.4, pad: 13, gap: 6, above: 0 };