@7365admin1/layer-common 4.75.1 → 4.77.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.77.0
+
+### Minor Changes
+
+- e3682f3: Robot detail: an Ounitech robot shows its real floor map with its area layer, area names and live pin ("position approximate" until Ounitech confirms the map corner); Clean area picks the areas to clean; new records card: recent cleaning jobs, alert history, every robot and base-station reading, parts wear, timed switch on/off and lifts. The site mini-map shows cleaning robots on their own map.
+
+## 4.76.0
+
+### Minor Changes
+
+- 5fafd9a: Robot detail: a cleaning robot whose brand reports them (Ounitech) now shows Clean water and Dirty water (Low / Medium / High with the %), a "Tanks and covers" line ("Tanks and covers OK", or which cover is open / tank not fitted) and, while it cleans, "This job" (% done and m² cleaned of planned). Warning tags for clean water low, dirty water full and any open cover or missing tank. Nothing is shown for brands that do not report them. The rule (`cleaningReadings`) is part of the robot rules synced to the mobile apps; "What this robot can do" lists "water levels and tanks".
+
 ## 4.75.1
 
 ### Patch Changes
@@ -1908,11 +1920,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

@@ -670,6 +670,15 @@
 .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__overlay { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; pointer-events: none; user-select: none; opacity: 0.35; }
+.hero-plan__area { position: absolute; transform: translate(-50%, -50%); font-size: 11px; font-weight: 600; padding: 0 4px; white-space: nowrap; pointer-events: none; color: var(--hero-text); background: var(--hero-bg); border: 1px solid var(--hero-accent); }
+.hero-rec { margin-top: 16px; }
+.hero-rec__table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.hero-rec__table th { text-align: left; font-weight: 600; font-size: 12px; opacity: 0.75; padding: 4px 6px; border-bottom: 1px solid var(--hero-divider); }
+.hero-rec__table td { padding: 4px 6px; border-bottom: 1px solid var(--hero-divider); vertical-align: top; }
+.hero-rec__wrap { overflow-x: auto; }
+.hero-rec__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 16px; }
+.hero-rec__attn { color: var(--hero-accent); font-weight: 600; }
 .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); }
@@ -806,6 +815,7 @@
 .hero-strip { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
 .hero-strip .hero-fact { padding: 8px 12px; }
 .hero-strip .hero-fact__value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hero-cleaning-warnings { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
 .hero-detail__main { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 20px; align-items: start; }
 .hero-detail__main--single { grid-template-columns: minmax(0, 1fr); }
 .hero-detail__cam, .hero-detail__map { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

package/components/Robot/CleaningRecords.vue

@@ -0,0 +1,122 @@
+<template>
+  <!--
+    Robot detail's records (`/robots/:id/records`, read-only): recent cleaning
+    jobs, alert history, then - folded - every reading the robot sends, parts
+    wear, the power schedule and lifts. Brands without records render nothing.
+    A part the maker refused is said in words, never left blank.
+  -->
+  <section v-if="records?.supported" class="hero-rec" aria-label="Cleaning records">
+    <div class="hero-aside__head">
+      <span class="hero-section__title">Recent cleaning jobs</span>
+      <span class="hero-aside__hint">last 14 days · from {{ makerApp }}</span>
+      <span class="hero-head__spacer" />
+      <v-btn variant="text" size="small" :loading="loading" @click="load(true)">Refresh</v-btn>
+    </div>
+    <div v-for="e in errors" :key="e" class="hero-notice hero-notice--error" role="status">{{ e }}</div>
+    <div v-if="!jobs.length" class="hero-sched__empty">No cleaning jobs in the last 14 days.</div>
+    <div v-else class="hero-rec__wrap">
+      <table class="hero-rec__table">
+        <thead>
+          <tr><th>Started</th><th>Area</th><th>Job</th><th>Took</th><th>Cleaned</th><th>Done</th><th>Result</th><th>Started by</th></tr>
+        </thead>
+        <tbody>
+          <tr v-for="j in shownJobs" :key="j.key">
+            <td>{{ j.when }}</td><td>{{ j.area }}</td><td>{{ j.job }}</td><td>{{ j.duration }}</td><td>{{ j.size }}</td><td>{{ j.done }}</td><td>{{ j.result }}</td><td>{{ j.by }}</td>
+          </tr>
+        </tbody>
+      </table>
+      <v-btn v-if="jobs.length > 5" variant="text" size="small" @click="allJobs = !allJobs">{{ allJobs ? "Show fewer" : `See all ${jobs.length}` }}</v-btn>
+    </div>
+
+    <div class="hero-section__title mt-4">Alert history</div>
+    <div class="hero-sched__note">What the robot reported in the last 30 days (open alerts are listed above).</div>
+    <div v-if="!alerts.length" class="hero-sched__empty">No alerts in the last 30 days.</div>
+    <div v-for="a in shownAlerts" :key="a.key" class="hero-sched__row hero-sched__row--alert" :title="a.vendorText">
+      <b class="hero-detail__alertcode">{{ a.code }}</b>
+      <span>{{ a.level ? `${a.level} · ` : "" }}{{ a.message }}</span>
+      <span>{{ a.when }} · {{ a.state }}</span>
+    </div>
+    <v-btn v-if="alerts.length > 5" variant="text" size="small" @click="allAlerts = !allAlerts">{{ allAlerts ? "Show fewer" : `See all ${alerts.length}` }}</v-btn>
+
+    <details class="hero-can hero-can--fold" :open="attention.length > 0">
+      <summary class="hero-can__title">
+        Robot readings{{ attention.length ? ` · needs attention: ${attention.join(", ")}` : "" }}
+      </summary>
+      <div v-if="!groups.length" class="hero-sched__empty">The robot sent no readings.</div>
+      <div v-for="g in groups" :key="g.group" class="mb-2">
+        <div class="hero-sched__note">{{ g.group }}</div>
+        <div class="hero-rec__grid">
+          <div v-for="r in g.rows" :key="r.key" class="hero-can__row">
+            <span class="hero-can__label">{{ r.label }}</span>
+            <span :class="{ 'hero-rec__attn': r.attention }">{{ r.value }}</span>
+          </div>
+        </div>
+      </div>
+    </details>
+
+    <details class="hero-can hero-can--fold">
+      <summary class="hero-can__title">Parts wear, power schedule and lifts</summary>
+      <div class="hero-sched__note">Parts wear (hours worked since last reset in {{ makerApp }})</div>
+      <div v-if="!parts.length" class="hero-sched__empty">No parts reported.</div>
+      <div v-for="p in parts" :key="p.key" class="hero-sched__row"><b>{{ p.part }}</b><span>{{ p.worked }}</span><span>{{ p.days }}</span></div>
+      <div class="hero-sched__note mt-2">Timed switch on / off</div>
+      <div v-if="!power.length" class="hero-sched__empty">No timed switch on / off.</div>
+      <div v-for="p in power" :key="p.key" class="hero-sched__row">
+        <b>{{ p.days }}</b><span>{{ p.time }}</span><span>{{ p.action }}{{ p.enabled ? "" : " · off" }}</span>
+      </div>
+      <div class="hero-sched__note mt-2">Lifts linked in {{ makerApp }}</div>
+      <div v-if="!lifts.length" class="hero-sched__empty">No lifts linked to this robot's building.</div>
+      <div v-for="l in lifts" :key="l.key" class="hero-sched__row"><b>{{ l.name }}</b><span>{{ l.state }}</span></div>
+    </details>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { robotErrorMessage } from "../../utils/robot-display";
+import { alertHistoryRows, attentionReadings, jobRows, liftRows, partRows, powerRows, readingGroups, recordErrors } from "../../utils/robot-records";
+
+const props = defineProps<{ robotId: string; makerApp: string }>();
+const { getRobotRecords } = useRobots();
+
+const records = ref<Record<string, any> | null>(null);
+const loading = ref(false);
+const allJobs = ref(false);
+const allAlerts = ref(false);
+
+// ponytail: read on open and on Refresh only - the maker rate-limits these reads (the API caches 2 min).
+async function load(force = false) {
+  if (loading.value && !force) return;
+  loading.value = true;
+  try {
+    records.value = await getRobotRecords(props.robotId);
+  } catch (e: any) {
+    // An API without the records route (404) shows no card; any other failure is said.
+    const status = e?.statusCode ?? e?.status ?? e?.response?.status;
+    records.value = status === 404 ? null : { supported: true, error: `Couldn't read the records: ${robotErrorMessage(e)}` };
+  } finally {
+    loading.value = false;
+  }
+}
+watch(
+  () => props.robotId,
+  () => {
+    records.value = null;
+    allJobs.value = false;
+    allAlerts.value = false;
+    load(true);
+  },
+  { immediate: true },
+);
+
+const jobs = computed(() => jobRows(records.value));
+const shownJobs = computed(() => (allJobs.value ? jobs.value : jobs.value.slice(0, 5)));
+const alerts = computed(() => alertHistoryRows(records.value));
+const shownAlerts = computed(() => (allAlerts.value ? alerts.value : alerts.value.slice(0, 5)));
+const groups = computed(() => readingGroups(records.value));
+const attention = computed(() => attentionReadings(records.value));
+const parts = computed(() => partRows(records.value));
+const power = computed(() => powerRows(records.value));
+const lifts = computed(() => liftRows(records.value));
+const errors = computed(() => recordErrors(records.value));
+</script>

package/components/Robot/Detail.vue

@@ -56,6 +56,17 @@
     </div>
   </div>
 
+  <!-- A scrubber's water, tanks and current job (brands that report them); warnings as tags. -->
+  <div v-if="cleaning.warnings.length" class="hero-cleaning-warnings" role="status" aria-label="Needs attention">
+    <span v-for="w in cleaning.warnings" :key="w" class="hero-tag hero-tag--outline">{{ w }}</span>
+  </div>
+  <div v-if="cleaning.facts.length" class="hero-facts hero-strip" role="list" aria-label="Water and tanks">
+    <div v-for="f in cleaning.facts" :key="f.label" class="hero-fact" role="listitem">
+      <div class="hero-fact__label">{{ f.label }}</div>
+      <div class="hero-fact__value" :title="f.value">{{ f.value }}</div>
+    </div>
+  </div>
+
   <!-- Above the fold: camera | map, with the commands under the map they act on. -->
   <div v-if="!noInterface" class="hero-detail__main" :class="{ 'hero-detail__main--single': !hasCamera }">
     <section v-if="hasCamera" class="hero-detail__cam" aria-label="Camera">
@@ -100,12 +111,17 @@
           :image="selectedMap?.imageUrl ?? null"
           :aspect="selectedMap?.width && selectedMap?.height ? selectedMap.width / selectedMap.height : null"
           :points="selectedMap?.points ?? []"
+          :overlay="selectedMap?.overlay ?? null"
+          :areas="selectedMap?.areas ?? []"
           :route-moving="statusMode === 'WORKING' && robotOnShownMap"
           :spot="spot"
           :pick="spotOn"
           :tick-ms="tickMs"
           @pick="(p) => spot.push(p)"
         />
+        <p v-if="selectedMap?.approximate" class="hero-muted hero-detail__lag">
+          Robot position is approximate: {{ brand }} has not yet confirmed which corner their map is measured from.
+        </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
@@ -176,6 +192,9 @@
     </div>
   </section>
 
+  <!-- Cleaning robots: recent jobs, alert history, every reading, parts wear, power schedule, lifts (read-only). -->
+  <RobotCleaningRecords v-if="!noInterface && record && robotType !== 'security'" :robot-id="robotId" :maker-app="makerApp" />
+
   <!-- What THIS robot (brand + model) can do, in our words; folded so it never pushes the camera down. -->
   <details v-if="abilities.length" class="hero-can hero-can--fold">
     <summary class="hero-can__title">What this robot can do</summary>
@@ -188,6 +207,19 @@
   <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>
+      <v-select
+        v-if="confirming.zones?.length"
+        v-model="confirming.zoneNames"
+        :items="confirming.zones"
+        label="Areas to clean"
+        multiple
+        chips
+        closable-chips
+        density="compact"
+        hide-details
+        class="mb-2"
+        @update:model-value="pickZones"
+      />
       <v-select
         v-if="confirming.routes?.length"
         v-model="confirming.routeId"
@@ -203,7 +235,7 @@
       <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>
+        <v-btn color="primary" variant="flat" :disabled="!!confirming.zones && !confirming.zoneNames?.length" @click="confirmSend">{{ confirming.text.action }}</v-btn>
       </div>
     </div>
   </v-dialog>
@@ -261,6 +293,7 @@ import RobotNoMonitoring from "./NoMonitoring.vue";
 import RobotCommandBar from "./CommandBar.vue";
 import RobotViewOnlyNotice from "./ViewOnlyNotice.vue";
 import RobotLivePlan from "./LivePlan.vue";
+import RobotCleaningRecords from "./CleaningRecords.vue";
 import RobotToast from "./Toast.vue";
 import RobotForm from "./Form.vue";
 import RobotPatrolHistory from "./PatrolHistory.vue";
@@ -305,6 +338,7 @@ import {
   robotAbilities,
   robotErrorMessage,
   robotFacts,
+  cleaningReadings,
   robotStatus,
   showSpotClean,
   sinceText,
@@ -420,6 +454,7 @@ const stripFacts = computed(() =>
     .filter((f): f is NonNullable<typeof f> => !!f)
     .map((f) => (f.label === "Robot reports" ? { ...f, label: "Doing now" } : f)),
 );
+const cleaning = computed(() => cleaningReadings(live.value as any));
 const identity = computed(() => {
   const model = facts.value.find((f) => f.label === "Model")?.value;
   const serial = facts.value.find((f) => f.label === "Serial")?.value;
@@ -482,6 +517,10 @@ const planTitle = computed(() => {
 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 && robotType.value !== "security") {
+    const n = selectedMap.value.areas.length;
+    return `${n} cleaning area${n === 1 ? "" : "s"}`;
+  }
   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 ""; // the Floor cell above already says it
@@ -676,6 +715,19 @@ async function send(kind: TRobotCommandKind) {
       return;
     }
   }
+  // Clean area (cleaning robots): the API cleans named areas, so pick them from the robot's map.
+  if (kind === "area" && robotType.value !== "security") {
+    const map = mapViews.value.find((m) => m.current) ?? selectedMap.value;
+    const zones = map?.areas.map((a) => a.name) ?? [];
+    if (!zones.length) {
+      commandResult.value = { text: `There are no cleaning areas on ${map ? map.label : "this robot's map"} yet. Areas are drawn in ${makerApp.value}.`, warn: true };
+      return;
+    }
+    confirming.value = { kind: "area", body: {}, text: { title: "", body: "", action: "" }, zones, zoneNames: [zones[0]!] };
+    pickZones([zones[0]!]);
+    confirmOpen.value = true;
+    return;
+  }
   const body = commandBody(kind, live.value);
   if (!body) {
     toast.value = `${commandLabel(kind)}: the robot's position is not known yet.`;
@@ -692,8 +744,23 @@ const confirming = ref<{
   text: { title: string; body: string; action: string };
   routes?: TPatrolRouteView[];
   routeId?: string;
+  /** Clean area: the map's area names, and the ones picked. */
+  zones?: string[];
+  zoneNames?: string[];
   what?: string;
 } | null>(null);
+/** The areas picked in Clean area's confirm: the body names them and the sentence says them. */
+function pickZones(names: unknown) {
+  const c = confirming.value;
+  if (!c?.zones) return;
+  const picked = (Array.isArray(names) ? names : []).filter((n): n is string => typeof n === "string" && c.zones!.includes(n));
+  const list = picked.length > 2 ? `${picked.slice(0, -1).join(", ")} and ${picked.at(-1)}` : picked.join(" and ");
+  c.zoneNames = picked;
+  c.body = { kind: "area", areas: picked };
+  c.what = picked.length ? `cleaning ${list}` : undefined;
+  const text = commandConfirm("area", { type: robotType.value, name: record.value?.name });
+  c.text = { ...text, body: picked.length ? `${record.value?.name ?? "The robot"} starts cleaning ${list}, one pass.` : "Pick at least one area." };
+}
 /** The route picked in Start patrol's confirm: its exact words, and the body naming it. */
 function pickRoute(id: unknown) {
   const c = confirming.value;

package/components/Robot/LivePlan.vue

@@ -9,6 +9,8 @@
     is lost - never a frozen dot.
   -->
   <RobotFloorPlan detail :pick="pick" :image="image" :aspect="aspect" @pick="emit('pick', $event)">
+    <img v-if="image && overlay" class="hero-plan__overlay" :src="overlay" alt="" aria-hidden="true" draggable="false" referrerpolicy="no-referrer" />
+    <span v-for="a in placedAreas" :key="a.name" class="hero-plan__area" :style="{ left: `${a.at!.x}%`, top: `${a.at!.y}%` }">{{ a.name }}</span>
     <template v-for="p in points" :key="p.targetPointId">
       <span class="hero-plan__pt" :style="{ left: `${p.x}%`, top: `${p.y}%` }" aria-hidden="true" />
       <span class="hero-plan__ptname" :style="{ left: `${p.x}%`, top: `${p.y}%` }">{{ p.name }}</span>
@@ -56,6 +58,9 @@ const props = withDefaults(
     /** The map shown: the robot's own image and its width / height. */
     image?: string | null;
     aspect?: number | null;
+    /** The maker's coloured area layer over the map image (Ounitech), and its areas' names + label spots. */
+    overlay?: string | null;
+    areas?: Array<{ name: string; at: { x: number; y: number } | null }>;
     /** Saved points on the map shown (0-100 shares). */
     points?: Array<{ targetPointId: string; name: string; x: number; y: number }>;
     /** The route's dash walks only while the robot patrols. */
@@ -67,8 +72,9 @@ const props = withDefaults(
     /** The last reading kept through a short gap: drawn faded, never as live. */
     stale?: boolean;
   }>(),
-  { 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 },
+  { stale: false, name: "", statusLabel: "", point: null, heading: 0, trail: () => [], readout: "", lost: false, route: null, routes: null, image: null, aspect: null, overlay: null, areas: () => [], points: () => [], routeMoving: false, spot: () => [], pick: false, tickMs: 1200 },
 );
+const placedAreas = computed(() => (props.image ? props.areas.filter((a) => a.at) : []));
 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(() => {

package/components/Robot/SiteFleet.vue

@@ -246,19 +246,20 @@ function seenText(row: any) {
 
 /* ---- patrol routes for the security robots on screen ---- */
 const routes = ref<Record<string, TPatrolRouteView[]>>({});
-/** Each security robot's own maps (PadBot map images), read once per robot. */
+/** Each robot's own maps (PadBot / Ounitech map images), read once per robot. */
+// ponytail: read once; the maker signs image URLs for ~1 h, so a page left open longer needs a reload.
 const robotMaps = ref<Record<string, Array<Record<string, any>>>>({});
 async function loadRoutes() {
-  if (props.type !== "security") {
-    routes.value = {};
-    return;
-  }
   const missing = ids.value.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] ?? []])) };
   }
+  if (props.type !== "security") {
+    routes.value = {};
+    return;
+  }
   const next: Record<string, TPatrolRouteView[]> = {};
   await Promise.allSettled(
     ids.value.map(async (id) => {

package/composables/useRobots.ts

@@ -150,6 +150,11 @@ export default function useRobots() {
     );
   }
 
+  /** Cleaning jobs, alert history, consumables, power schedule, lifts and every reading (read-only; `supported: false` for brands without). */
+  function getRobotRecords(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/robots/${id}/records`, { method: "GET", query: { appSlug } });
+  }
+
   /**
    * Signed image URLs for a map's layers.
    *
@@ -592,6 +597,7 @@ export default function useRobots() {
     getRobotState,
     getRobotMaps,
     getRobotMapImages,
+    getRobotRecords,
     getRobotPlans,
     sendRobotCommand,
     getLiveVideo,

package/package.json

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

package/utils/robot-display.ts

@@ -626,6 +626,8 @@ export type TLiveRobotState = {
   capabilities?: Record<string, unknown>;
   /** Plain-words facts for this brand + model (core `robotManifest`). */
   profile?: TRobotProfile;
+  /** A scrubber's water, tank and job readings (core `TRobotCleaning`, brands with `waterTanks`). */
+  cleaning?: TRobotCleaning | null;
   lastSeenAt?: string | null;
   /** Epoch ms of the last answer that was read (set by `mergeLiveStates`). */
   readAt?: number;
@@ -1358,6 +1360,71 @@ export function lastKnownLabel(at: unknown, now: number = Date.now()): string {
 
 export type TRobotFact = { label: string; value: string; dim: boolean };
 
+/** Core's `TRobotCleaning`: levels are "low" | "medium" | "high"; parts ok=false = open / not fitted. */
+export type TRobotCleaning = {
+  cleanWater?: { level?: string; percent?: number | null } | null;
+  dirtyWater?: { level?: string; percent?: number | null } | null;
+  parts?: Array<{ part?: string; ok?: boolean }> | null;
+  job?: { percent?: number | null; areaDone?: number | null; areaPlanned?: number | null } | null;
+};
+
+export type TCleaningReadings = {
+  /** Clean water · Dirty water · Tanks and covers · Job - only the ones the robot reported. */
+  facts: TRobotFact[];
+  /** Warning chips: "Clean water low", "Dirty water full", "Top cover open". */
+  warnings: string[];
+};
+
+const LEVEL_TEXT: Readonly<Record<string, string>> = { low: "Low", medium: "Medium", high: "High" };
+const PART_PROBLEM: Readonly<Record<string, string>> = {
+  "top cover": "Top cover open",
+  "clean-water tank": "Clean-water tank not fitted",
+  "dirty-water tank": "Dirty-water tank not fitted",
+  "dust box": "Dust box not fitted",
+};
+const m2 = (n: number) => `${Number.isInteger(n) ? n : n.toFixed(1)} m²`;
+
+/**
+ * A cleaning robot's water, tanks and current job in plain words, for the
+ * detail screen (web and phones). Capability-driven: nothing unless the brand +
+ * model reports `waterTanks` and the robot answered online; a reading the robot
+ * did not send is left out (hide, never grey).
+ *
+ * Clean water low and dirty water full (high) are warnings, as is any open
+ * cover or missing tank. The job line shows only while it cleans.
+ */
+export function cleaningReadings(live: TLiveRobotState | null | undefined): TCleaningReadings {
+  const none: TCleaningReadings = { facts: [], warnings: [] };
+  if (!live?.ok || live.online === false || live.capabilities?.waterTanks !== true) return none;
+  const c = live.cleaning;
+  if (!c || typeof c !== "object") return none;
+  const facts: TRobotFact[] = [];
+  const warnings: string[] = [];
+  const water = (label: string, w: TRobotCleaning["cleanWater"]) => {
+    const text = LEVEL_TEXT[String(w?.level ?? "")];
+    if (!text) return "";
+    const pct = finite(w?.percent) ? ` · ${Math.round(w!.percent as number)}%` : "";
+    facts.push({ label, value: `${text}${pct}`, dim: false });
+    return String(w!.level);
+  };
+  if (water("Clean water", c.cleanWater) === "low") warnings.push("Clean water low");
+  if (water("Dirty water", c.dirtyWater) === "high") warnings.push("Dirty water full");
+  const parts = (Array.isArray(c.parts) ? c.parts : []).filter((p) => p && typeof p.part === "string" && typeof p.ok === "boolean");
+  if (parts.length) {
+    const problems = parts.filter((p) => !p.ok).map((p) => PART_PROBLEM[p.part as string] ?? `${firstUp(String(p.part))} not fitted`);
+    facts.push({ label: "Tanks and covers", value: problems.length ? problems.join(" · ") : "Tanks and covers OK", dim: false });
+    warnings.push(...problems);
+  }
+  const j = c.job;
+  if (j && typeof j === "object") {
+    const bits: string[] = [];
+    if (finite(j.percent)) bits.push(`${Math.round(j.percent as number)}% done`);
+    if (finite(j.areaDone)) bits.push(finite(j.areaPlanned) ? `${m2(j.areaDone as number)} of ${m2(j.areaPlanned as number)}` : `${m2(j.areaDone as number)} cleaned`);
+    if (bits.length) facts.push({ label: "This job", value: bits.join(" · "), dim: false });
+  }
+  return { facts, warnings };
+}
+
 /**
  * The detail screen's facts grid (README §3): Connection · Battery · Floor ·
  * Live position · Robot reports · Model · Serial · Last seen. A fact the brand
@@ -1625,6 +1692,8 @@ export function robotAbilities(input: {
     on("floorReporting") && "floor",
     on("readLocation") && "live position",
     on("thermalCamera") && "heat readings",
+    on("waterTanks") && "water levels",
+    on("waterTanks") && "tank checks",
     on("patrolHistory") && (on("thermalCamera") ? "past patrols with photos and temperatures" : "past patrols with photos"),
   ].filter(Boolean) as string[];
   const p = input?.profile ?? {};

package/utils/robot-maps.ts

@@ -22,6 +22,12 @@ export type TRobotMapView = {
   routeNames: string[];
   /** Saved points placed on this map's image (0-100 from its top-left). */
   points: TRobotMapPoint[];
+  /** The maker's coloured area layer (Ounitech partition image), drawn over the map; null when none. */
+  overlay: string | null;
+  /** The map's cleaning areas by name (Clean area picks from these); `at` = label spot, null when unknown. */
+  areas: Array<{ name: string; at: { x: number; y: number } | null }>;
+  /** The maker has not confirmed the map's corner, so the robot pin may be off: say "position approximate". */
+  approximate: boolean;
 };
 
 const isNum = (v: unknown): v is number => typeof v === "number" && Number.isFinite(v);
@@ -47,7 +53,8 @@ export function robotMapShare(map: Record<string, any> | null | undefined, wx: u
  * `/robots/:id/maps` items (PadBot: `mapId` + `imageUrl`) as selector entries,
  * in PadBot's order. Named by PadBot's display name; without one, "Map N"
  * with its floor, else its first route's name, as the hint ("Map 1 (B1)").
- * [] for brands whose maps are not vendor images (Ounitech keeps its own view).
+ * Ounitech maps arrive in the same shape (the API adds mapId / imageUrl / size),
+ * plus their area layer, area names and "position approximate".
  */
 export function robotMapViews(
   items: Array<Record<string, any>> | null | undefined,
@@ -78,6 +85,11 @@ export function robotMapViews(
       current: !!currentMapId && m.mapId === currentMapId,
       routeNames,
       points,
+      overlay: typeof m.partitionImageUrl === "string" && /^https?:\/\//i.test(m.partitionImageUrl) ? m.partitionImageUrl : null,
+      areas: (Array.isArray(m.areas) ? m.areas : [])
+        .filter((a: any) => typeof a?.name === "string" && a.name.trim())
+        .map((a: any) => ({ name: String(a.name).trim(), at: a.at && isNum(a.at.x) && isNum(a.at.y) ? { x: a.at.x, y: a.at.y } : null })),
+      approximate: m.positionApproximate === true,
     };
   });
 }

package/utils/robot-records.ts

@@ -0,0 +1,135 @@
+/**
+ * Robot detail's records card (`/robots/:id/records`): cleaning jobs, alert
+ * history, parts wear, power schedule, lifts and every reading the robot
+ * sends, as display rows. Pure helpers - no Vue, no Node globals.
+ */
+import { dayRange } from "./robot-display.ts";
+
+type TPart<T> = { items?: T[]; error?: string } | null | undefined;
+const isNum = (v: unknown): v is number => typeof v === "number" && Number.isFinite(v);
+const items = <T>(p: TPart<T>): T[] => (Array.isArray(p?.items) ? p!.items! : []);
+
+/** "45 s", "16 min", "1 h 5 min"; "—" when unknown. */
+export function durationText(sec: unknown): string {
+  if (!isNum(sec) || sec < 0) return "—";
+  if (sec < 60) return `${Math.round(sec)} s`;
+  const min = Math.round(sec / 60);
+  return min < 60 ? `${min} min` : `${Math.floor(min / 60)} h${min % 60 ? ` ${min % 60} min` : ""}`;
+}
+
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+/** An ISO time as "30 Sep, 08:15" in the viewer's zone (or `timeZone`); "—" when unknown. */
+export function whenText(iso: unknown, timeZone?: string): string {
+  const t = typeof iso === "string" ? Date.parse(iso) : NaN;
+  if (!Number.isFinite(t)) return "—";
+  const parts = Object.fromEntries(
+    new Intl.DateTimeFormat("en-GB", { day: "numeric", month: "numeric", hour: "2-digit", minute: "2-digit", hourCycle: "h23", ...(timeZone ? { timeZone } : {}) })
+      .formatToParts(t)
+      .map((p) => [p.type, p.value]),
+  );
+  return `${parts.day} ${MONTHS[Number(parts.month) - 1]}, ${parts.hour}:${parts.minute}`;
+}
+
+export type TJobRow = { key: string; when: string; area: string; job: string; duration: string; size: string; done: string; result: string; by: string };
+
+/** Cleaning jobs, newest first as the API sends them. */
+export function jobRows(records: { tasks?: TPart<Record<string, any>> } | null | undefined, timeZone?: string): TJobRow[] {
+  return items(records?.tasks).map((t, i) => {
+    const floor = isNum(t.floorNo) ? (t.floorNo > 0 ? `L${t.floorNo}` : t.floorNo < 0 ? `B${-t.floorNo}` : "G") : "";
+    const area = [t.map, floor].filter(Boolean).join(" · ") || "—";
+    const size = isNum(t.areaM2) ? (isNum(t.plannedM2) && t.plannedM2 > 0 ? `${t.areaM2} of ${t.plannedM2} m²` : `${t.areaM2} m²`) : "—";
+    return {
+      key: `${t.id ?? ""}-${i}`,
+      when: whenText(t.start, timeZone),
+      area,
+      job: [t.job, t.mode].filter(Boolean).join(" · ") || "—",
+      duration: durationText(t.durationSec),
+      size,
+      done: isNum(t.percent) ? `${Math.round(t.percent)}%` : "—",
+      result: t.result || "—",
+      by: t.source || "—",
+    };
+  });
+}
+
+export type TAlertRow = { key: string; when: string; code: string; level: string; message: string; state: string; vendorText: string };
+
+export function alertHistoryRows(records: { alerts?: TPart<Record<string, any>> } | null | undefined, timeZone?: string): TAlertRow[] {
+  return items(records?.alerts).map((a, i) => ({
+    key: `${a.code ?? ""}-${a.at ?? ""}-${i}`,
+    when: whenText(a.at, timeZone),
+    code: a.code ? String(a.code) : "—",
+    level: a.level || "",
+    message: a.message || a.vendorText || "—",
+    state: a.resolved ? "Resolved" : "Reported",
+    vendorText: a.vendorText && a.vendorText !== a.message ? String(a.vendorText) : "",
+  }));
+}
+
+/** Readings grouped in the API's order ("Battery", "Water", ...), base station last. */
+export function readingGroups(records: { readings?: TPart<Record<string, any>>; station?: TPart<Record<string, any>> } | null | undefined) {
+  const rows = [...items(records?.readings), ...items(records?.station).flatMap((s) => (Array.isArray(s?.readings) ? s.readings : []))];
+  const status = items(records?.station)[0]?.status;
+  if (status) rows.push({ key: "station-status", group: "Base station", label: "Station status", value: String(status), attention: false });
+  const groups: Array<{ group: string; rows: Array<{ key: string; label: string; value: string; attention: boolean }> }> = [];
+  for (const r of rows) {
+    const g = String(r?.group || "Other readings");
+    let hit = groups.find((x) => x.group === g);
+    if (!hit) groups.push((hit = { group: g, rows: [] }));
+    hit.rows.push({ key: String(r.key ?? r.label), label: String(r.label ?? r.key), value: String(r.value ?? ""), attention: r.attention === true });
+  }
+  return groups;
+}
+
+/** Readings that need a person ("Dust box fitted: No"), for the card's one-line summary. */
+export function attentionReadings(records: Parameters<typeof readingGroups>[0]): string[] {
+  return readingGroups(records).flatMap((g) => g.rows.filter((r) => r.attention).map((r) => `${r.label}: ${r.value}`));
+}
+
+export function partRows(records: { consumables?: TPart<Record<string, any>> } | null | undefined) {
+  return items(records?.consumables).map((c, i) => ({
+    key: `${c.part}-${i}`,
+    part: String(c.part ?? "Part"),
+    worked: isNum(c.hours) ? `${c.hours} h` : "—",
+    days: isNum(c.days) ? `${c.days} days` : "—",
+  }));
+}
+
+export function powerRows(records: { power?: TPart<Record<string, any>> } | null | undefined) {
+  return items(records?.power).map((p, i) => ({
+    key: `${p.time}-${i}`,
+    days: dayRange(p.days),
+    time: p.time || "—",
+    action: p.action === "on" ? "Switch on" : "Switch off",
+    enabled: p.enabled !== false,
+  }));
+}
+
+export function liftRows(records: { lifts?: TPart<Record<string, any>> } | null | undefined) {
+  return items(records?.lifts).map((l, i) => ({
+    key: `${l.name}-${i}`,
+    name: String(l.name ?? "Lift"),
+    state: `${l.online ? "Online" : "Offline"}${l.enabled === false ? " · disabled" : ""}${isNum(l.floorNo) ? ` · at L${l.floorNo}` : ""}`,
+  }));
+}
+
+/** "Couldn't read the cleaning records: …" per refused part, so a gap is said, never silent. */
+export function recordErrors(records: Record<string, any> | null | undefined): string[] {
+  const names: Record<string, string> = {
+    tasks: "cleaning jobs",
+    alerts: "alert history",
+    consumables: "parts wear",
+    power: "power schedule",
+    lifts: "lifts",
+    readings: "robot readings",
+    station: "base station",
+  };
+  if (!records) return [];
+  const out = typeof records.error === "string" && records.error ? [records.error] : [];
+  for (const [k, name] of Object.entries(names)) {
+    const e = records[k]?.error;
+    if (typeof e === "string" && e) out.push(`Couldn't read the ${name}: ${e}`);
+  }
+  return out;
+}