@7365admin1/layer-common 4.73.1-staging.456 → 4.73.1-staging.457

package/assets/css/robot-hero.css

@@ -806,6 +806,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/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">
@@ -305,6 +316,7 @@ import {
   robotAbilities,
   robotErrorMessage,
   robotFacts,
+  cleaningReadings,
   robotStatus,
   showSpotClean,
   sinceText,
@@ -420,6 +432,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;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.73.1-staging.456",
+  "version": "4.73.1-staging.457",
   "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,7 @@ export function robotAbilities(input: {
     on("floorReporting") && "floor",
     on("readLocation") && "live position",
     on("thermalCamera") && "heat readings",
+    on("waterTanks") && "water levels and tanks",
     on("patrolHistory") && (on("thermalCamera") ? "past patrols with photos and temperatures" : "past patrols with photos"),
   ].filter(Boolean) as string[];
   const p = input?.profile ?? {};