@7365admin1/layer-common 4.35.1-staging.410 → 4.35.1-staging.412

package/assets/css/robot-hero.css

@@ -801,6 +801,34 @@
   margin-bottom: 8px;
 }
 .hero-detail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; }
+
+/* Robot detail layout (2026-09-26): strip in one row, camera | map above the fold, stacked when narrow. */
+.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-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; }
+.hero-detail__top { scroll-margin-top: 72px; }
+.hero-detail__main { --hero-plan-max: 280px; }
+.hero-detail__main--single { --hero-plan-max: 360px; }
+.hero-detail__main .hero-plan--detail { max-height: var(--hero-plan-max); }
+.hero-detail__main .hero-livepanel .hero-dialog__actions:empty { display: none; }
+.hero-detail__commands { border-top: 2px solid var(--hero-divider); padding-top: 10px; }
+.hero-detail__alertcode { color: var(--hero-accent); }
+@media (max-width: 900px) { .hero-detail__main { grid-template-columns: minmax(0, 1fr); } }
+.hero-sched__note { font-size: 12px; opacity: 0.65; margin-bottom: 4px; }
+.hero-sched__row.hero-sched__row--slot { grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); }
+.hero-sched__row.hero-sched__row--alert { grid-template-columns: 110px minmax(0, 1fr) auto; }
+.hero-detail__sub { display: flex; flex-wrap: wrap; gap: 4px 14px; opacity: 0.65; font-size: 12px; margin-top: 2px; }
+.hero-detail__title--main { flex-wrap: nowrap; min-width: 0; }
+.hero-detail__title--main h2 { overflow: hidden; text-overflow: ellipsis; min-width: 8ch; }
+@media (max-width: 700px) { .hero-detail__title--main { flex-wrap: wrap; } .hero-detail__title--main h2 { flex-basis: 100%; } }
+@media (max-width: 560px) { .hero-faultbar { grid-auto-flow: row; } .hero-faultbar > .v-btn, .hero-faultbar__badge { justify-self: start; } }
+.hero-detail__main .hero-mapsel { margin: 0; }
+.hero-can--fold { padding: 8px 14px; }
+.hero-can--fold > summary { cursor: pointer; list-style: revert; }
+.hero-can--fold[open] > summary { margin-bottom: 6px; }
 .hero-detail__grid .hero-aside__hint { opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
 
 .hero-sched__empty { padding: 20px 0; opacity: 0.65; }

package/components/Robot/Detail.vue

@@ -1,8 +1,16 @@
 <template>
-  <!-- Robot detail (README §3). -->
-  <div>
+  <!--
+    Robot detail (README §3), laid out for the operator's job (reasoning:
+    Project-Notes 2026-09-26-robot-detail-layout.md):
+    header (who / where / model) -> one-row status strip -> ABOVE THE FOLD the
+    camera (left, large) and the live map (right) with the commands that act on
+    them directly under the map -> patrol / cleaning: schedule next to recent
+    runs -> this robot's alerts -> "What this robot can do" folded at the bottom.
+    No camera: the map takes the full width. Narrow: camera, map, commands, patrol.
+  -->
+  <div ref="topEl" class="hero-detail__top">
     <button type="button" class="hero-back hero-back--sm" @click="emit('back')">‹ {{ backLabel || `${record?.site?.name || "Site"} fleet` }}</button>
-    <div class="hero-detail__title">
+    <div class="hero-detail__title hero-detail__title--main">
       <h2>{{ record?.name ?? "Robot" }}</h2>
       <template v-if="statusMode">
         <RobotStatusChip :mode="statusMode" :type="robotType" />
@@ -10,13 +18,16 @@
       <span v-else-if="live && !live.ok" class="hero-tag hero-tag--neutral">Reconnecting</span>
       <span v-if="caps" class="hero-tag hero-tag--neutral">{{ capabilityLabel(caps) }}</span>
       <span class="hero-tag hero-tag--neutral">{{ typeLabel(robotType) }}</span>
-      <span v-if="record" class="hero-detail__where">{{ record.client?.name }} · {{ record.site?.name }}</span>
       <span class="hero-head__spacer" />
       <template v-if="record">
         <v-btn v-if="canEdit" variant="outlined" @click="editOpen = true">Edit</v-btn>
         <v-btn v-if="canDelete" variant="text" class="hero-ghost" @click="removeOpen = true">Remove</v-btn>
       </template>
     </div>
+    <div v-if="record" class="hero-detail__sub">
+      <span>{{ record.client?.name }} · {{ record.site?.name }}</span>
+      <span v-if="identity">{{ identity }}</span>
+    </div>
   </div>
 
   <div v-if="error" class="hero-notice" role="alert">{{ error }}</div>
@@ -31,49 +42,30 @@
         <template v-for="ph in faultPhotos(fault)" :key="ph.label"> · <a :href="ph.url" target="_blank" rel="noopener noreferrer">{{ ph.label }}</a></template>
       </div>
     </div>
-    <v-btn v-if="caps?.liveVideo === true && online" variant="outlined" size="small" @click="livePanel?.show()">Live view</v-btn>
     <v-btn v-if="canResolve" variant="outlined" size="small" :loading="resolving" @click="resolveFault">Mark resolved</v-btn>
     <span class="hero-faultbar__badge">{{ faultBadge(fault) }}</span>
   </div>
 
   <RobotNoMonitoring v-if="noInterface" :brand-name="brand" :model="live?.model || undefined" />
 
-  <!-- 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>
+  <!-- Status strip: connection · battery · what it is doing · floor · last seen, one row. -->
+  <div v-if="stripFacts.length" class="hero-facts hero-strip" role="list" aria-label="Robot status">
+    <div v-for="f in stripFacts" :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 }" :title="String(f.value ?? '')">{{ f.value }}</div>
     </div>
-  </section>
-
-  <div v-if="commands.length">
-    <div class="hero-section__title">Commands</div>
-    <RobotCommandBar
-      :capabilities="caps"
-      :can-command="canCommand"
-      :online="live?.ok === true && live.online === true"
-      :mode="statusMode"
-      :type="robotType"
-      :busy="busy"
-      @command="send"
-    />
   </div>
-  <RobotViewOnlyNotice v-if="!canCommand && !noInterface" />
-
-  <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>
+
+  <!-- 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">
+      <RobotLiveView v-if="caps?.liveVideo === true" ref="livePanel" panel :robot-id="robotId" :name="record?.name" :offline="!online" />
+      <div v-if="canDrive" class="hero-detail__video">
+        <v-btn variant="outlined" @click="driveOpen = true">Manual control</v-btn>
       </div>
-    </div>
-  </div>
+    </section>
 
-  <div v-if="!noInterface" class="hero-detail__grid">
-    <div>
-      <div class="hero-section__title">Location</div>
+    <section class="hero-detail__map" aria-label="Map">
       <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">
@@ -92,7 +84,6 @@
           </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"
@@ -122,43 +113,71 @@
         </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">{{
-          robotType === "security" ? "days · start–end · floor · checkpoints × rounds" : "days · start–end · jobs per floor · passes"
-        }}</span>
+      <div v-if="commands.length" class="hero-detail__commands">
+        <RobotCommandBar
+          :capabilities="caps"
+          :can-command="canCommand"
+          :online="live?.ok === true && live.online === true"
+          :mode="statusMode"
+          :type="robotType"
+          :busy="busy"
+          @command="send"
+        />
       </div>
-      <template v-if="!schedule.length && robotType === 'security' && patrol?.scheduleShared === false">
-        <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>
+      <RobotViewOnlyNotice v-if="!canCommand" />
+    </section>
+  </div>
+
+  <!-- Patrol / cleaning: when it runs, next to what it did. -->
+  <div v-if="!noInterface" class="hero-detail__grid">
+    <div>
+      <div class="hero-section__title">{{ robotType === "security" ? "Patrol schedule" : "Cleaning schedule" }}</div>
+      <template v-if="robotType === 'security' && !schedule.length && patrol?.scheduleShared === false">
+        <div class="hero-sched__note">Detected from the robot's recent patrols (last 30 days). Schedules are changed in {{ makerApp }}.</div>
+        <div v-if="!runsLoaded" class="hero-sched__empty">Checking recent patrols…</div>
+        <div v-else-if="!detected.length" class="hero-sched__empty">No regular patrols detected in the last 30 days.</div>
+        <div v-for="s in detected" :key="s.route + s.minutes" class="hero-sched__row hero-sched__row--slot">
+          <b>{{ s.route }}</b><span>{{ patrolSlotText(s, now) }}</span>
+        </div>
+      </template>
+      <template v-else>
+        <div class="hero-sched__note">{{ robotType === "security" ? "days · start–end · floor · checkpoints × rounds" : "days · start–end · jobs per floor · passes" }}</div>
+        <div v-if="!schedule.length" class="hero-sched__empty">No schedule yet.</div>
+        <div v-for="p in schedule" :key="p.key" class="hero-sched__row">
+          <b>{{ p.days }}</b><span>{{ p.time }}</span><span>{{ p.jobs }}</span>
+        </div>
       </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">
-        <b>{{ p.days }}</b><span>{{ p.time }}</span><span>{{ p.jobs }}</span>
-      </div>
       <template v-if="unplacedRoutes.length">
-        <div class="hero-aside__hint">Patrol routes (stops not placed on the plan)</div>
+        <div class="hero-sched__note">Patrol routes (stops not placed on the map)</div>
         <div v-for="r in unplacedRoutes" :key="r.id" class="hero-sched__row">
           <b>{{ r.name }}</b><span>Stops: {{ r.text }}</span>
         </div>
       </template>
     </div>
+    <div v-if="robotType === 'security' && caps?.patrolHistory === true">
+      <div class="hero-section__title">Recent patrols</div>
+      <RobotPatrolHistory :robot-id="robotId" compact />
+    </div>
   </div>
 
-  <RobotPatrolHistory v-if="robotType === 'security' && caps?.patrolHistory === true" :robot-id="robotId" />
+  <!-- This robot's open alerts (the newest also sits in the red bar on top while it is open). -->
+  <section v-if="!noInterface && record" aria-label="Alerts for this robot">
+    <div class="hero-section__title">Alerts</div>
+    <div v-if="!robotAlerts.length" class="hero-sched__empty">No open alerts for this robot.</div>
+    <div v-for="a in robotAlerts" :key="a.key" class="hero-sched__row hero-sched__row--alert">
+      <b class="hero-detail__alertcode">{{ a.code }}</b><span>{{ a.message }}</span><span>{{ a.since }}</span>
+    </div>
+  </section>
 
-  <div v-if="caps?.liveVideo === true || canDrive">
-    <div class="hero-section__title">Camera</div>
-    <RobotLiveView v-if="caps?.liveVideo === true" ref="livePanel" panel :robot-id="robotId" :name="record?.name" :offline="!online" />
-    <div v-if="canDrive" class="hero-detail__video">
-      <v-btn variant="outlined" @click="driveOpen = true">Manual control</v-btn>
+  <!-- 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>
+    <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>
+  </details>
 
   <v-dialog v-model="confirmOpen" width="440">
     <div v-if="confirming" class="hero-dialog" role="alertdialog" aria-labelledby="hero-confirm-title">
@@ -234,6 +253,7 @@ import { faultPhotos } from "../../utils/robot-control";
 import { robotMapDefault, robotMapViews } from "../../utils/robot-maps";
 import useRobotLive, { siteStatesFeed } from "../../composables/useRobotLive";
 import {
+  attentionText,
   brandName,
   capabilityLabel,
   cleaningScheduleRows,
@@ -246,7 +266,8 @@ import {
   lastKnownLabel,
   mergePose,
   optimisticMode,
-  patrolRunHint,
+  detectPatrolSchedule,
+  patrolSlotText,
   patrolScheduleRows,
   pointCommandBody,
   savedPointGroups,
@@ -259,7 +280,6 @@ import {
   robotErrorMessage,
   robotFacts,
   robotStatus,
-  scheduleElsewhereText,
   showSpotClean,
   sinceText,
   speedText,
@@ -308,9 +328,11 @@ const {
   getRobotMapImages,
   resolveRobotAlerts,
   getPatrolHistory,
+  getSiteFaults,
 } = useRobots();
 
 const record = ref<Record<string, any> | null>(null);
+const topEl = ref<HTMLElement | null>(null);
 const brands = ref<Array<Record<string, any>>>([]);
 const error = ref("");
 const toast = ref("");
@@ -363,14 +385,25 @@ const faultSince = computed(() => sinceText(fault.value?.since, now.value));
 
 // 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 strip: connection · battery · what it is doing · floor · last seen (model and serial sit in the header).
+const STRIP_ORDER = ["Connection", "Battery", "Robot reports", "Floor", "Last seen"];
+const stripFacts = computed(() =>
+  STRIP_ORDER.map((l) => facts.value.find((f) => f.label === l))
+    .filter((f): f is NonNullable<typeof f> => !!f)
+    .map((f) => (f.label === "Robot reports" ? { ...f, label: "Doing now" } : f)),
+);
+const identity = computed(() => {
+  const model = facts.value.find((f) => f.label === "Model")?.value;
+  const serial = facts.value.find((f) => f.label === "Serial")?.value;
+  return [model, serial ? `Serial ${serial}` : ""].filter(Boolean).join(" · ");
+});
 // 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)));
+// Floor is in the strip; the plan's readout shows the live position, so the cell only when there is no plan.
+const locationFacts = computed(() => facts.value.filter((f) => 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 makerApp = computed(() => (live.value?.ok ? live.value.profile?.makerApp : "") || `${brand.value}'s own app`);
 
 const online = computed(() => live.value?.ok === true && live.value.online === true);
 const commands = computed(() =>
@@ -408,7 +441,7 @@ const spotOn = computed(() => showSpotClean({ canCommand: props.canCommand, capa
 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 ?? "");
+const floorText = computed(() => facts.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,
@@ -433,17 +466,34 @@ const schedule = computed(() => (robotType.value === "security" ? patrolSchedule
 const unplacedRoutes = computed(() =>
   (patrol.value?.routes ?? []).map((r) => ({ id: r.id, name: r.name, text: unplacedStopsText(r) })).filter((r) => r.text),
 );
-// The brand keeps its schedules to itself: recent runs (and a labelled guess) instead.
+// The brand keeps its schedules to itself (PadBot): detect them from the last 30 days of runs.
 const runs = ref<any[]>([]);
-const runHint = computed(() => patrolRunHint(runs.value, now.value));
+const runsLoaded = ref(false);
+const detected = computed(() => detectPatrolSchedule(runs.value, now.value));
+/** Newest first, 100 a page, until a page reaches 30 days back. ponytail: capped at 5 pages (500 runs); raise if a robot patrols more than ~16x a day. */
+async function loadRuns() {
+  const since = Date.now() - 30 * 86_400_000;
+  const all: any[] = [];
+  for (let page = 1; page <= 5; page++) {
+    const res = await getPatrolHistory(props.robotId, { page, limit: 100 }).catch(() => null);
+    const items = res?.items ?? [];
+    all.push(...items);
+    const oldest = Date.parse(items[items.length - 1]?.startedAt ?? "");
+    if (!items.length || page >= (res?.pages ?? 0) || !(oldest >= since)) break;
+  }
+  runs.value = all;
+  runsLoaded.value = true;
+}
 
+let runsLoading = false;
 async function loadSchedule() {
   if (!record.value || noInterface.value) return;
   try {
     if (robotType.value === "security") {
       patrol.value = await getPatrolRoutes(props.robotId);
-      if (patrol.value?.scheduleShared === false && caps.value?.patrolHistory === true && !runs.value.length) {
-        runs.value = (await getPatrolHistory(props.robotId, { page: 1, limit: 20 }).catch(() => null))?.items ?? [];
+      if (patrol.value?.scheduleShared === false && caps.value?.patrolHistory === true && !runsLoaded.value && !runsLoading) {
+        runsLoading = true;
+        loadRuns().finally(() => (runsLoading = false));
       }
     } else plans.value = (await getRobotPlans(props.robotId))?.items ?? [];
   } catch {
@@ -613,6 +663,7 @@ function onPick(p: TSavedPoint) {
 
 /* ---- security-robot extras: live view (minted per open, never kept), manual control, resolve an alarm ---- */
 const livePanel = ref<{ show(): void } | null>(null);
+const hasCamera = computed(() => caps.value?.liveVideo === true || canDrive.value);
 const driveOpen = ref(false);
 const canDrive = computed(() => props.canCommand && caps.value?.manualDrive === true && online.value);
 const canResolve = computed(
@@ -631,6 +682,23 @@ async function resolveFault() {
   }
 }
 
+/* ---- this robot's open alerts: the site's alert list, narrowed to this robot ---- */
+const siteAlerts = ref<any[]>([]);
+const robotAlerts = computed(() =>
+  siteAlerts.value
+    .filter((a) => String(a?.robot?._id ?? "") === props.robotId)
+    .map((a, i) => ({ key: `${a?.code ?? ""}-${i}`, ...attentionText(a), since: a?.since ? `Since ${sinceText(a.since, now.value)}` : "" })),
+);
+async function loadAlerts() {
+  const site = String(record.value?.site?._id ?? "");
+  if (!site) return;
+  try {
+    siteAlerts.value = (await getSiteFaults(site, { page: 1, limit: 100 }))?.items ?? [];
+  } catch {
+    siteAlerts.value = [];
+  }
+}
+
 /* ---- edit / remove ---- */
 function onSaved() {
   editOpen.value = false;
@@ -674,9 +742,15 @@ watch(
     lastPose.value = null;
     prevPose.value = nextPose.value = null;
     streamLost.value = false;
+    runs.value = [];
+    runsLoaded.value = false;
+    siteAlerts.value = [];
     await loadRecord();
+    // Open with the robot's header at the top, so camera + map are on screen (the Super Admin page has pickers above).
+    topEl.value?.scrollIntoView?.({ block: "start" });
     loadSchedule();
     loadMaps();
+    loadAlerts();
   },
   { immediate: true },
 );
@@ -696,6 +770,7 @@ const timer = setInterval(() => {
   now.value = Date.now();
   if (typeof document !== "undefined" && document.visibilityState === "hidden") return;
   if (++ticks % 8 === 0 && robotType.value === "security") loadSchedule();
+  if (ticks % 30 === 0) loadAlerts();
 }, 1000);
 onBeforeUnmount(() => {
   clearInterval(timer);

package/components/Robot/FloorPlan.vue

@@ -35,11 +35,11 @@ const props = defineProps<{
   /** 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. */
+/** The image's own shape; the detail plan's height cap (--hero-plan-max, 440 px) 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" } : {}) };
+  return { aspectRatio: String(a), ...(props.detail ? { width: `min(100%, calc(var(--hero-plan-max, 440px) * ${a.toFixed(4)}))`, maxHeight: "none", marginInline: "auto" } : {}) };
 });
 const emit = defineEmits<{ pick: [point: { x: number; y: number }] }>();
 const root = ref<HTMLElement | null>(null);

package/components/Robot/PatrolHistory.vue

@@ -4,14 +4,14 @@
     patrols from its own cloud, newest first; a row opens what was captured at
     each checkpoint. Read only; photo links open the brand's image.
   -->
-  <div class="hero-patrolhist">
-    <div class="hero-aside__head">
+  <div class="hero-patrolhist" :class="{ 'hero-patrolhist--compact': compact }">
+    <div v-if="!compact" class="hero-aside__head">
       <span class="hero-aside__title">Patrol history</span>
       <span class="hero-aside__hint">route · result · time · distance · alerts</span>
     </div>
     <div v-if="error" class="hero-sched__empty">{{ error }}</div>
     <div v-else-if="loaded && !rows.length" class="hero-sched__empty">No patrols recorded yet.</div>
-    <template v-for="r in rows" :key="r.key">
+    <template v-for="r in shownRows" :key="r.key">
       <button type="button" class="hero-sched__row hero-patrolhist__row" :aria-expanded="open === r.key" @click="toggle(r.key)">
         <b>{{ r.when }}</b><span>{{ r.route }} · <span :class="`hero-patrolhist__${r.tone}`">{{ r.result }}</span></span><span>{{ r.detail }}</span>
       </button>
@@ -27,7 +27,11 @@
         </div>
       </div>
     </template>
-    <div v-if="pages > 1" class="hero-patrolhist__foot">
+    <div v-if="short && (rows.length > 5 || pages > 1)" class="hero-patrolhist__foot">
+      <v-btn variant="text" size="small" @click="all = true">See all</v-btn>
+    </div>
+    <div v-else-if="pages > 1" class="hero-patrolhist__foot">
+      <v-btn v-if="compact" variant="text" size="small" @click="(all = false), load(1)">Show fewer</v-btn>
       <v-btn variant="text" size="small" :disabled="page <= 1" @click="load(page - 1)">Newer</v-btn>
       <span>Page {{ page }} of {{ pages }}</span>
       <v-btn variant="text" size="small" :disabled="page >= pages" @click="load(page + 1)">Older</v-btn>
@@ -39,7 +43,10 @@
 import { computed, ref, watch } from "vue";
 import { activityWhen, patrolRecordRow, robotErrorMessage } from "../../utils/robot-display";
 
-const props = defineProps<{ robotId: string }>();
+/** `compact`: the newest 5 with "See all" (robot detail); the full pager after that. */
+const props = defineProps<{ robotId: string; compact?: boolean }>();
+const all = ref(false);
+const short = computed(() => props.compact && !all.value);
 const { getPatrolHistory, getPatrolVisits } = useRobots();
 
 const items = ref<any[]>([]);
@@ -52,6 +59,7 @@ const visits = ref<any[]>([]);
 const visitsLoading = ref(false);
 const now = Date.now();
 const rows = computed(() => items.value.map((r) => patrolRecordRow(r, now)));
+const shownRows = computed(() => (short.value ? rows.value.slice(0, 5) : rows.value));
 
 /** Only http(s) links from the brand are rendered. */
 const safeUrl = (u: unknown) => (typeof u === "string" && /^https?:\/\//i.test(u) ? u : "");
@@ -89,6 +97,8 @@ watch(() => props.robotId, () => load(1), { immediate: true });
 
 <style scoped>
 .hero-patrolhist { margin-top: 20px; }
+.hero-patrolhist--compact { margin-top: 0; }
+.hero-patrolhist--compact .hero-sched__row { grid-template-columns: 76px minmax(0, 1fr) auto; }
 .hero-patrolhist__row { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: inherit; font: inherit; }
 .hero-patrolhist__visits { padding: 4px 0 8px 16px; }
 .hero-patrolhist__visit { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 0; font-size: 12px; }

package/package.json

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

@@ -1156,6 +1156,107 @@ export function patrolRunHint(records: Array<{ routeName?: unknown; startedAt?:
   return `Looks like "${best.name}" runs ${how} around ${hhmm} (based on the last 7 days)`;
 }
 
+/* ------------------------------------------ patrol schedule detected from past runs */
+
+export type TPatrolSlot = {
+  route: string;
+  /** Minutes after local midnight. */
+  minutes: number;
+  hhmm: string;
+  /** "daily" · "every Mon, Thu" · "on 4 of the last 30 days". */
+  days: string;
+  dayCount: number;
+  lastAt: number;
+  /** Next expected start, only while the pattern is still current. */
+  nextAt: number | null;
+};
+
+const DAY_MS = 86_400_000;
+const WEEKDAY = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const hhmmOf = (min: number) => `${String(Math.floor(min / 60) % 24).padStart(2, "0")}:${String(min % 60).padStart(2, "0")}`;
+const localDay = (t: number) => {
+  const d = new Date(t);
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+};
+const atMinutes = (day: number, min: number) => {
+  const d = new Date(day);
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), Math.floor(min / 60), min % 60).getTime();
+};
+
+/**
+ * The robot's brand keeps its patrol schedule to itself (PadBot has no
+ * schedule API), so we detect it from the robot's own recent runs: runs of
+ * the same route that start within 30 minutes of each other (local clock) on
+ * at least 2 different days in the last `windowDays` form one slot.
+ * Every day between the first and last run -> "daily"; the same weekdays
+ * repeated -> "every Mon, Thu"; else "on N of the last 30 days". The next
+ * start is only predicted while the pattern is current (daily: ran in the
+ * last 2 days; weekly: in the last 8). A one-off run is never a slot.
+ */
+export function detectPatrolSchedule(
+  records: Array<{ routeName?: unknown; startedAt?: unknown }> | null | undefined,
+  now: number = Date.now(),
+  windowDays = 30,
+): TPatrolSlot[] {
+  const since = now - windowDays * DAY_MS;
+  const byRoute = new Map<string, Array<{ t: number; min: number }>>();
+  for (const r of records ?? []) {
+    const t = typeof r?.startedAt === "string" ? Date.parse(r.startedAt) : NaN;
+    const name = typeof r?.routeName === "string" ? r.routeName.trim() : "";
+    if (!name || !finite(t) || t < since || t > now) continue;
+    const d = new Date(t);
+    byRoute.set(name, [...(byRoute.get(name) ?? []), { t, min: d.getHours() * 60 + d.getMinutes() }]);
+  }
+  const slots: TPatrolSlot[] = [];
+  for (const [route, runs] of byRoute) {
+    // Group by time of day; a gap over 30 min starts a new group (a group may wrap past midnight).
+    const sorted = [...runs].sort((a, b) => a.min - b.min);
+    const groups: Array<typeof sorted> = [];
+    for (const r of sorted) {
+      const g = groups[groups.length - 1];
+      if (g && r.min - g[g.length - 1]!.min <= 30) g.push(r);
+      else groups.push([r]);
+    }
+    if (groups.length > 1) {
+      const first = groups[0]!, last = groups[groups.length - 1]!;
+      if (first[0]!.min + 1440 - last[last.length - 1]!.min <= 30) groups[0] = [...groups.pop()!.map((r) => ({ ...r, min: r.min - 1440 })), ...first];
+    }
+    for (const g of groups) {
+      const days = [...new Set(g.map((r) => localDay(r.t)))].sort((a, b) => a - b);
+      if (days.length < 2) continue;
+      const mins = g.map((r) => r.min).sort((a, b) => a - b);
+      const minutes = (mins[Math.floor((mins.length - 1) / 2)]! + 1440) % 1440;
+      const lastAt = Math.max(...g.map((r) => r.t));
+      const span = Math.round((days[days.length - 1]! - days[0]!) / DAY_MS) + 1;
+      const wdCount = new Map<number, number>();
+      for (const d of days) wdCount.set(new Date(d).getDay(), (wdCount.get(new Date(d).getDay()) ?? 0) + 1);
+      const weekly = span > 7 && wdCount.size <= 5 && [...wdCount.values()].every((n) => n >= 2);
+      const kind = days.length === span ? "daily" : weekly ? "weekly" : "some";
+      const label =
+        kind === "daily" ? "daily" : kind === "weekly" ? `every ${[...wdCount.keys()].sort((a, b) => ((a + 6) % 7) - ((b + 6) % 7)).map((d) => WEEKDAY[d]).join(", ")}` : `on ${days.length} of the last ${windowDays} days`;
+      let nextAt: number | null = null;
+      if ((kind === "daily" && now - lastAt <= 2 * DAY_MS) || (kind === "weekly" && now - lastAt <= 8 * DAY_MS)) {
+        for (let i = 0; i <= 7 && nextAt === null; i++) {
+          const at = atMinutes(localDay(now) + i * DAY_MS + DAY_MS / 2, minutes); // noon offset survives DST days
+          if (at > now && (kind === "daily" || wdCount.has(new Date(at).getDay()))) nextAt = at;
+        }
+      }
+      slots.push({ route, minutes, hhmm: hhmmOf(minutes), days: label, dayCount: days.length, lastAt, nextAt });
+    }
+  }
+  return slots.sort((a, b) => a.minutes - b.minutes || a.route.localeCompare(b.route));
+}
+
+/** One slot as a line: "daily 20:00 · last ran 19 h ago · next expected 20:00 today". */
+export function patrolSlotText(slot: TPatrolSlot, now: number = Date.now()): string {
+  const parts = [`${slot.days} ${slot.hhmm}`, `last ran ${agoText(slot.lastAt, now)}`];
+  if (slot.nextAt !== null) {
+    const d = Math.round((localDay(slot.nextAt) - localDay(now)) / DAY_MS);
+    parts.push(`next expected ${slot.hhmm} ${d === 0 ? "today" : d === 1 ? "tomorrow" : WEEKDAY[new Date(slot.nextAt).getDay()]}`);
+  }
+  return parts.join(" · ");
+}
+
 /**
  * May the plan take spot-clean clicks? A Manager, a cleaning robot, a brand
  * that declares `spotClean`, and a robot confirmed online. (A busy robot keeps