@7365admin1/layer-common 3.2.1-staging.67 → 3.2.1-staging.69

package/.changeset/camera-wall-plain-english.md

@@ -0,0 +1,60 @@
+---
+"@7365admin1/layer-common": patch
+---
+
+Rewrite the camera wall's detail panel for the people who read it, and stop
+repeating the same sentence four times.
+
+The panel under the tiles was written for a developer. On the live wall it
+read:
+
+> BBQ AREA
+> The video page loaded, but this browser cannot confirm a picture is arriving.
+> The player belongs to the video service and a browser cannot look inside it.
+> Judge the tile by what you can see, and report a blank or frozen picture.
+> ● Recorder responding   Last picture this server received: none yet
+> Firmware and device clock are not available: this recorder is reachable over
+> video only.
+
+Every one of those statements is true, and the screen was still wrong: it
+explained cross-origin isolation to a guard, repeated the camera's name the
+tile already showed, put a green light beside the words "none yet", and printed
+the same reason on four capability cards in a row.
+
+Changes, all copy and layout — **no behaviour, no capability gating and no
+permission check is touched**:
+
+- **The badge reads "Not confirmed"**, not "Not verified". "Not verified"
+  describes a check we failed to make; "Not confirmed" describes the picture,
+  which is the thing the reader cares about. Same claim, and the wall still
+  refuses to say "Live" until the video service reports a decoded frame.
+- **The sentence behind it is now an instruction**: "This page cannot confirm
+  the picture is arriving, so check the tile yourself. If it is blank or frozen,
+  report the camera." Why the software cannot confirm it is our problem, and it
+  has been removed from the product.
+- **The camera's name is no longer a heading of its own.** It is the subject of
+  the status line — "BBQ AREA · Recorder responding" — so a reader on a 3x3 wall
+  still knows which tile the panel describes, without a second caption under the
+  first one.
+- **"Last picture" is drawn only when there has been one.** A green "Recorder
+  responding" beside "none yet" read as a contradiction. They were never in
+  conflict, but a screen that has to be explained is wrong. The tile's own
+  health line has always behaved this way; the panel now matches it.
+- **The firmware-and-device-clock sentence is gone**, from the panel and from
+  the tile's tooltip. This screen never showed either value, so explaining their
+  absence gave the reader nothing to do. The server still sends
+  `detailUnavailableReason`; nothing draws it.
+- **One reason for the group instead of four copies.** When every switched-off
+  control is off for the same reason, that reason and its next step are stated
+  once above the row and each card keeps only its title and its state. When the
+  reasons differ — "the recorder is unreachable" and "this camera cannot move"
+  are two problems with two different people to ask — the group note is refused
+  and each card carries its own again. New rule 7, in `camera-wall.ts`, with
+  four tests.
+- Shorter next-step and no-signal wording, and a subject on the recorder's
+  status labels ("Recorder not checked yet" rather than "Health not checked
+  yet").
+
+Rules 3 and 6 are intact: the server's own sentence is still shown verbatim and
+never rewritten, and the recorder's state is still a separate fact from the
+tile's badge.

package/.changeset/camera-wall-selection-and-guidance.md

@@ -0,0 +1,65 @@
+---
+"@7365admin1/layer-common": patch
+---
+
+Mark the selected camera on the wall, and stop telling the reader to raise a
+ticket without saying what for.
+
+Two things the owner found on the live wall after the last copy pass. Both are
+copy and presentation only — **no behaviour, no capability gating, no permission
+check and no request is changed.**
+
+**1. The camera's name was still printed twice.**
+
+The tile said `BBQ AREA` and the panel underneath said it again. The last pass
+merged the panel's heading into its status line, which changed the layout and
+left the repetition exactly where it was.
+
+The name was there to answer "which of these nine tiles is this panel about?".
+That is a real question and a name is the wrong answer to it — it makes the
+reader scan the wall for a matching caption. So:
+
+- **the selected tile is now visibly selected**: a 3 px accent ring with a scrim
+  hairline inside it, so the ring holds against a bright picture as well as a
+  dark one, plus the accent underline on the name chip that the toolbar already
+  uses to mark a selected tool. Both read at 1x1, 2x2 and 3x3;
+- **the camera's name is removed from the panel entirely**. The panel opens on
+  the recorder's state — "● Recorder responding";
+- `aria-current` marks the same tile for anyone not looking at the ring.
+
+The highlight had never worked in the most common case, which is why the name
+was load-bearing: it was bound to the raw clicked id, and before anyone clicks —
+or after paging — nothing on the wall was marked while the panel was already
+describing the first tile. It is now bound to the tile the panel actually
+resolves to, so the two can never disagree.
+
+**The panel can never be about a tile that is off screen**, so it never needs to
+name one: the focused camera is resolved out of the current PAGE, so paging away
+from a selection re-resolves to the first tile of the page in front of you and
+the ring follows. Paging back restores the original selection. Extracted as
+`focusedCamera()` in `camera-wall.ts` with four tests, including the 5-cameras
+-across-2-pages case.
+
+**2. "Ask your Seven365 administrator" was a dead end.**
+
+It was the whole of the advice under every switched-off control, and it tells
+the administrator nothing and a property manager only to go and wait. The screen
+never said what the request should ask for.
+
+The advice now names the two changes that are actually missing, because they are
+two different jobs for two different people: **the site's network has to let our
+server reach the camera recorder**, and **that recorder then has to be added to
+the server's configuration**. Both are stated in plain words, with who arranges
+them, and with the fact that neither is switchable from this page.
+
+No environment variable name appears in any of it — those belong in
+`iservice365-core/docs/camera-integration-config.md`, not on a property
+manager's screen — and there is a test that keeps it that way. The other reason
+codes (`device-http-disabled`, `device-http-unreachable`, `device-http-locked-out`,
+`control-not-enabled`, `no-recorder-configured`, and the unknown-code fallback)
+get the same treatment; the Site Settings ones already said what to do and are
+unchanged.
+
+The truthful-status rules are untouched: the wall still refuses to say "Live"
+until the video service reports a decoded frame, and the recorder's state is
+still a separate fact from the tile's badge.

package/components/CameraWall.vue

@@ -126,7 +126,7 @@
             :online="online"
             :health="healthById[camera._id]"
             :now="now"
-            :focused="camera._id === focusedId"
+            :focused="camera._id === focused?._id"
             @focus="focusedId = $event._id"
           />
         </div>
@@ -170,44 +170,80 @@
       ask for it, and hiding it is what stops anyone asking.
     -->
     <div v-if="focused" class="vms__caps">
-      <p class="vms__caps-head">{{ focused.name || focused._id }}</p>
-
-      <!--
-        HEALTH — the recorder's own state, which is a different fact from the
-        tile badge above it (that one is about the video page loading). They can
-        disagree, and when they do a supervisor needs both, not a merged verdict.
-
-        Firmware and the device clock are blank on this estate and the server
-        says why, in its own words. An empty field with no explanation reads as
-        "checked, and fine", which would be the opposite of the truth.
-      -->
       <!--
-        WHAT THE BADGE ON THE TILE ACTUALLY MEANS, said once here rather than
-        nine times across the wall. "Not verified" is a word a supervisor has
-        every right to challenge, and the answer — the picture belongs to
-        another origin's page and a browser cannot look inside it — is too long
-        for a tile and too important to leave out.
+        THE CAMERA'S NAME IS GONE FROM THIS PANEL ENTIRELY. THE SELECTED TILE
+        SAYS WHICH CAMERA THIS IS.
+
+        It was here twice before: once as a heading, then — after a first
+        attempt at this — as the subject of the status line. The owner's point
+        was never the line break. It was the REPETITION: the tile directly above
+        is already captioned "BBQ AREA", and printing it again underneath adds
+        no fact.
+
+        The reason it was kept is real — the panel describes ONE of up to nine
+        tiles and the reader has to know which — but a name is the wrong way to
+        answer it. Naming a tile makes the reader search the wall for a matching
+        caption; an accent ring makes the wall answer at a glance. So the ring
+        is the identification (`vms-tile--focused`) and the panel is free to be
+        about the camera rather than about naming it.
+
+        **And the panel can never describe a tile that is off screen**, so it
+        never needs to fall back to naming one. `focused` is resolved out of
+        `tiles` — the CURRENT page — so paging away re-resolves it to the first
+        tile of the page you are now looking at. There is no state in which this
+        panel is about something you cannot see. That is asserted in
+        `camera-wall.test.ts` so it cannot quietly stop being true.
       -->
-      <p v-if="embedsPlayer" class="vms__badge-note">{{ UNVERIFIED_DETAIL }}</p>
-
       <div class="vms__health">
+        <!--
+          THE RECORDER's own state — a different fact from the tile badge above,
+          which is about the picture. They can disagree, and when they do the
+          reader needs both, not a merged verdict.
+        -->
         <span class="vms__health-state">
           <span class="vms__health-dot" :class="`vms__health-dot--${focusedHealth.tone}`" />
           {{ focusedHealth.label }}
         </span>
-        <span class="vms__health-item">
-          Last picture this server received:
-          <b>{{ focusedHealth.lastFrame || "none yet" }}</b>
+        <!--
+          "Last picture" ONLY WHEN THERE HAS BEEN ONE.
+
+          It used to read "Last picture this server received: none yet" beside a
+          green "Recorder responding", and the two together read as a
+          contradiction: a green light next to "none yet" tells a guard nothing
+          they can act on. They were never in conflict — one is the recorder
+          answering, the other is a still frame this server has never been set
+          up to fetch — but a screen that has to be explained is a screen that
+          is wrong. When there IS a picture, its age is worth knowing and it is
+          shown. When there is not, the line is silent, exactly as the tile's
+          own health line has always behaved.
+        -->
+        <span v-if="focusedHealth.lastFrame" class="vms__health-item">
+          Last picture <b>{{ focusedHealth.lastFrame }}</b>
         </span>
         <span v-if="focusedHealth.detail" class="vms__health-item">
           {{ focusedHealth.detail }}
         </span>
-        <span v-if="focusedHealth.deviceDetail" class="vms__health-item">
-          {{ focusedHealth.deviceDetail }}
-        </span>
         <span v-if="healthFailed" class="vms__health-item">{{ healthFailed }}</span>
       </div>
 
+      <!--
+        WHAT THE TILE's BADGE MEANS, said once here rather than nine times
+        across the wall — and said in the reader's terms, not ours. See
+        `UNVERIFIED_DETAIL`.
+      -->
+      <p v-if="embedsPlayer" class="vms__badge-note">{{ UNVERIFIED_DETAIL }}</p>
+
+      <p class="vms__caps-head">Camera controls</p>
+      <!--
+        RULE 7. One reason, stated once, when it is genuinely one reason — see
+        `sharedCapabilityNote`. When the reasons differ the note is `null` and
+        every card carries its own, as before.
+      -->
+      <div v-if="sharedNote" class="vms__caps-note">
+        <p class="vms__cap-detail">{{ sharedNote.detail }}</p>
+        <p v-if="sharedNote.nextStep" class="vms__cap-next">{{ sharedNote.nextStep }}</p>
+      </div>
+
       <div class="vms__caps-row">
         <div
           v-for="c in WALL_CAPABILITY_CONTROLS"
@@ -224,17 +260,21 @@
               {{ capability(c.key).tag }}
             </span>
           </p>
-          <!-- Working: what it does HERE. Off: the server's sentence, verbatim. -->
-          <p class="vms__cap-detail">
-            {{ capability(c.key).available ? c.ready : capability(c.key).detail }}
-          </p>
+          <!--
+            Working: what it does HERE. Off: the server's sentence, verbatim
+            (rule 3) — unless the whole group shares that sentence, in which
+            case it has already been said once above and the card carries only
+            its title and its tag.
+          -->
+          <p v-if="capabilityText(c)" class="vms__cap-detail">{{ capabilityText(c) }}</p>
           <!--
             RULE 5. The line the server cannot write, because it does not know
             who the reader can go and ask. Somebody read "Not set up yet" on this
             screen and asked how to set it up — which is a fair question that the
-            screen was not answering.
+            screen was not answering. Suppressed here for the same reason as
+            the sentence above it: it is in the group note.
           -->
-          <p v-if="capability(c.key).nextStep" class="vms__cap-next">
+          <p v-if="!sharedNote && capability(c.key).nextStep" class="vms__cap-next">
             {{ capability(c.key).nextStep }}
           </p>
         </div>
@@ -250,8 +290,10 @@ import {
   capabilityView,
   clampPage,
   DEFAULT_WALL_LAYOUT,
+  focusedCamera,
   healthView,
   isDenseLayout,
+  sharedCapabilityNote,
   wallCameras,
   wallLayout,
   wallPageCount,
@@ -407,17 +449,57 @@ function togglePick(id: string) {
 
 /* --------------------------------------------------------- what is focused */
 
+/**
+ * WHICH TILE THE PANEL IS ABOUT — and it is always a tile you can see.
+ *
+ * `focusedId` is what somebody clicked; `focused` is what the panel actually
+ * describes, and the two are deliberately not the same thing. It is resolved out
+ * of `tiles`, which is the CURRENT PAGE, so:
+ *
+ * - before anyone clicks, the panel describes the first tile on the wall;
+ * - paging away from your selection re-resolves to the first tile of the page
+ *   you are now on, rather than describing a camera that is no longer drawn;
+ * - paging back returns to your selection, because `focusedId` is not cleared.
+ *
+ * **The tile highlight is bound to `focused`, not to `focusedId`** — that one
+ * character was the whole defect behind "the panel repeats the tile's name".
+ * Bound to `focusedId`, the fallback cases above lit NO tile at all: the panel
+ * described the first camera on the page and nothing on the wall said so, which
+ * is exactly why the name had to be printed in the panel to make sense of it.
+ * Bound to `focused`, the wall always shows which tile is being described, and
+ * the name in the panel becomes the repetition the owner said it was.
+ */
 const focusedId = ref("");
-const focused = computed(
-  () => tiles.value.find((c) => c._id === focusedId.value) || tiles.value[0] || null
-);
+const focused = computed(() => focusedCamera(tiles.value, focusedId.value));
 
 function capability(key: string) {
   return capabilityView(focused.value, key);
 }
 
 /**
- * Whether this camera embeds a player at all — i.e. whether the "Not verified"
+ * Rule 7: the one reason the whole group is off, or `null` when they differ.
+ * When it is set, the cards stop repeating it — see the template.
+ */
+const sharedNote = computed(() =>
+  sharedCapabilityNote(
+    focused.value,
+    WALL_CAPABILITY_CONTROLS.map((c) => c.key)
+  )
+);
+
+/**
+ * What one card says under its title: what the control does when it works, the
+ * server's reason when it does not, and NOTHING when that reason has already
+ * been given once for the group.
+ */
+function capabilityText(control: (typeof WALL_CAPABILITY_CONTROLS)[number]) {
+  const view = capability(control.key);
+  if (view.available) return control.ready;
+  return sharedNote.value ? "" : view.detail;
+}
+
+/**
+ * Whether this camera embeds a player at all — i.e. whether the "Not confirmed"
  * badge is something its tile can ever show. A camera the server has already
  * refused has a reason of its own on the tile and does not need this one too.
  */
@@ -470,7 +552,7 @@ async function sweepHealth() {
   } catch {
     // Kept, not cleared: the last known health is still the most useful thing
     // we have, and "the recorder was fine a moment ago" is a real answer.
-    healthFailed.value = "The camera health check did not answer this time.";
+    healthFailed.value = "Could not check the recorder just now.";
   }
 }
 
@@ -831,14 +913,31 @@ async function toggleFullscreen() {
   border-top: 1px solid var(--vms-line);
 }
 
+/*
+  Now a GROUP LABEL rather than the camera's name repeated: it names what the
+  row below it is, which is the one job a heading here has. The camera is
+  identified once, in the status line above.
+*/
 .vms__caps-head {
-  margin: 0 0 8px;
+  margin: 0 0 6px;
   font-size: 11px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--vms-text-dim);
 }
 
+/*
+  RULE 7's one-sentence-for-the-group. Sits between the group label and the
+  cards, indented on the same 2 px accent rail the cards wear, so it reads as
+  belonging to all of them rather than to the first one.
+*/
+.vms__caps-note {
+  margin: 0 0 8px;
+  padding-left: 10px;
+  border-left: 2px solid var(--vms-accent);
+  max-width: 92ch;
+}
+
 .vms__caps-row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

package/components/CameraWallTile.vue

@@ -5,6 +5,7 @@
     :class="{ 'vms-tile--dense': dense, 'vms-tile--focused': focused, 'vms-tile--empty': !camera }"
     :tabindex="camera ? 0 : -1"
     :aria-label="camera ? `${camera.name || camera._id}, ${view.label}` : 'Empty position'"
+    :aria-current="focused ? 'true' : undefined"
     @click="camera && $emit('focus', camera)"
     @dblclick="camera && toggleFullscreen()"
     @keydown.enter="camera && toggleFullscreen()"
@@ -178,10 +179,10 @@ import {
  * origin's document is blocked by the browser — correctly.
  *
  * That ceiling has not moved. What has changed is that the badge no longer
- * pretends otherwise. A loaded page earns **"Not verified"**, not "Live"; only
+ * pretends otherwise. A loaded page earns **"Not confirmed"**, not "Live"; only
  * a frame the video service itself reports over `postMessage` earns "Live".
  * The service sends nothing today, so every tile on this estate sits at "Not
- * verified" — which is the true answer. It went in because on the live wall two
+ * confirmed" — which is the true answer. It went in because on the live wall two
  * cameras rendered a blank rectangle under a green "Live" badge, which is the
  * one thing a monitoring screen must never do.
  *
@@ -239,10 +240,13 @@ const healthLine = computed(() => {
   return lastFrame && !props.dense ? `${label} · ${lastFrame}` : label;
 });
 
-/** Everything the line had no room for, on hover. */
-const healthTitle = computed(() =>
-  [recorder.value.detail, recorder.value.deviceDetail].filter(Boolean).join(" ")
-);
+/**
+ * Everything the line had no room for, on hover. The firmware-and-clock
+ * sentence used to be appended here too; it is gone for the same reason it is
+ * gone from the panel — this screen never showed either value, so explaining
+ * their absence gave the reader nothing to do. See `THealthView`.
+ */
+const healthTitle = computed(() => recorder.value.detail || "");
 
 /* -------------------------------------------------------------------- zoom */
 
@@ -432,7 +436,7 @@ function restartFrameClock() {
  * direction.
  *
  * The timeout only fires while nothing at all has been heard: a page that
- * loaded is already at `page-up` and stays there. Sitting on "Not verified"
+ * loaded is already at `page-up` and stays there. Sitting on "Not confirmed"
  * indefinitely is deliberate — declaring a camera dead on a timer, with no
  * evidence, is the same mistake as declaring it live on a timer.
  */
@@ -483,8 +487,40 @@ async function toggleFullscreen() {
   min-height: 0;
 }
 
+/*
+  THE SELECTED TILE, AND WHY IT IS NOW LOUDER.
+
+  The panel under the wall describes ONE tile. It used to say which by printing
+  the camera's name — directly under a tile already captioned with that name —
+  because the ring here was too quiet to be doing that job: 2 px of #5b9be0
+  disappears against a bright picture, and at nine tiles it was a hairline the
+  eye skipped. So the panel was answering "which one?" in words, and the words
+  read as the name repeated twice.
+
+  Two marks now, and between them they hold at 1x1, 2x2 and 3x3:
+
+  - a **3 px accent ring**, with a 1 px scrim hairline INSIDE it. The hairline is
+    what makes the ring survive a white picture — accent-on-white is a weak edge,
+    accent-on-near-black is not, so the ring carries its own dark backing rather
+    than depending on what the camera happens to be pointing at.
+  - the **name chip underlined in the accent**, which is the same mark the
+    toolbar already uses for a selected tool (`.vms__tool--on`). At 3x3 the ring
+    is 3 px on a ~118 px tile; the underline sits right beside the caption a
+    supervisor is already reading, so identification does not depend on
+    perceiving 3 px from across a room.
+
+  INVENTED VALUES, recorded: the ring is 3 px where it was 2 px. Everything else
+  is existing — `--vms-accent`, `--vms-scrim-solid`, and the toolbar's 2 px
+  underline idiom. No new colour.
+*/
 .vms-tile--focused {
-  box-shadow: inset 0 0 0 2px var(--vms-accent, #5b9be0);
+  box-shadow:
+    inset 0 0 0 3px var(--vms-accent, #5b9be0),
+    inset 0 0 0 4px var(--vms-scrim-solid, rgba(7, 9, 12, 0.82));
+}
+
+.vms-tile--focused .vms-tile__name {
+  box-shadow: inset 0 -2px 0 var(--vms-accent, #5b9be0);
 }
 
 .vms-tile:focus-visible {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.1-staging.67",
+  "version": "3.2.1-staging.69",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/utils/camera-wall.test.ts

@@ -4,13 +4,16 @@ import { test } from "node:test";
 import {
   agoLabel,
   capabilityView,
+  CAPABILITY_NEXT_STEPS,
   clampPage,
   clampPan,
   clampZoom,
+  focusedCamera,
   healthView,
   isDenseLayout,
   playerOrigin,
   playerSignal,
+  sharedCapabilityNote,
   tileView,
   wallCameras,
   wallLayout,
@@ -69,6 +72,46 @@ test("a selection sets the order, and a stale id is dropped rather than drawn",
   assert.equal(tiles[0]._id, "b");
 });
 
+/* ------------------------------------------- which tile the panel is about */
+
+/*
+  THE PANEL STOPPED PRINTING THE CAMERA'S NAME, AND THESE ARE THE TWO FACTS
+  THAT LET IT.
+
+  The name was there so the reader could tell which of up to nine tiles the
+  panel described. It is now the selected tile's accent ring that answers that —
+  which is only safe while the panel can never be about a tile that is not
+  drawn. Five cameras across two pages is exactly the case the owner asked
+  about, so it is exactly the case pinned here.
+*/
+const FIVE = ["a", "b", "c", "d", "e"].map((id) => ip({ _id: id, name: id.toUpperCase() }));
+
+test("nothing selected yet: the panel is about the first tile ON THIS PAGE", () => {
+  assert.equal(focusedCamera(wallTiles(FIVE, [], "2x2", 0), "")?._id, "a");
+  // Page 2 of the same wall holds one camera, and the panel is about that one —
+  // not still about "a", which is no longer on screen.
+  assert.equal(focusedCamera(wallTiles(FIVE, [], "2x2", 1), "")?._id, "e");
+});
+
+test("paging away from your selection never leaves the panel describing an off-page camera", () => {
+  // Selected "a" on page 1, then paged to page 2. "a" is not drawn there.
+  const pageTwo = wallTiles(FIVE, [], "2x2", 1);
+  const shown = focusedCamera(pageTwo, "a");
+  assert.equal(shown?._id, "e");
+  assert.ok(
+    pageTwo.some((c) => c._id === shown?._id),
+    "the panel must always describe a tile on the current page"
+  );
+});
+
+test("paging back restores the selection, because the raw id is kept", () => {
+  assert.equal(focusedCamera(wallTiles(FIVE, [], "2x2", 0), "c")?._id, "c");
+});
+
+test("an empty wall has nothing to describe", () => {
+  assert.equal(focusedCamera([], "a"), null);
+});
+
 /* ---------------------------------------------------------------- rule 2/3 */
 
 test("no descriptor at all counts as NOT available", () => {
@@ -131,7 +174,98 @@ test("a switched-off control says what would switch it on and who to ask", () =>
   // The server's sentence is still verbatim — rule 3 is not traded away for rule 5.
   assert.match(v.detail, /^No direct connection/);
   assert.match(v.nextStep, /Seven365 administrator/);
-  assert.match(v.nextStep, /not something to switch on from this page/i);
+  assert.match(v.nextStep, /not switchable from this page/i);
+});
+
+/*
+  THE ADVICE HAS TO NAME THE TWO CHANGES, AND IT HAS TO STAY OUT OF THE
+  DEPLOYMENT MANUAL.
+
+  "Ask your Seven365 administrator" was the whole of the old advice and it was a
+  dead end — worse than useless for the owner, who IS the administrator. What
+  makes the new line actionable is that it names the two real changes: the
+  network has to let the server reach the recorder, and the recorder then has to
+  be configured on the server. Both halves are pinned here, because dropping
+  either one silently returns the sentence to a shrug.
+
+  And the other direction is pinned too: no environment variable name may appear
+  in copy a property manager reads. The names are correct, they are in
+  `iservice365-core/docs/camera-integration-config.md`, and they are unreadable
+  to the person this screen is written for.
+*/
+test("the setup advice names the network change AND the server change", () => {
+  const advice = CAPABILITY_NEXT_STEPS["device-http-not-configured"];
+  assert.match(advice, /network/i);
+  assert.match(advice, /recorder/i);
+  assert.match(advice, /server's configuration/i);
+});
+
+test("no environment variable name is ever shown to a reader", () => {
+  // Anything SCREAMING_SNAKE would be a deployment detail leaking into product
+  // copy. `CAMERA_DEVICE_HTTP` and friends belong in the deployment document.
+  for (const [reason, advice] of Object.entries(CAPABILITY_NEXT_STEPS)) {
+    assert.doesNotMatch(advice, /[A-Z][A-Z0-9]*_[A-Z0-9_]+/, `${reason} names a variable`);
+  }
+});
+
+/* ---------------------------------------------------------------- rule 7 */
+
+const OFF_FOR_THE_SAME_REASON = {
+  state: "unsupported",
+  reason: "device-http-not-configured",
+  detail: "No direct connection to this camera's recorder is configured on this server.",
+};
+const CAP_KEYS = WALL_CAPABILITY_CONTROLS.map((c) => c.key);
+
+test("four controls off for one reason state that reason once", () => {
+  // What the owner actually saw: the same sentence and the same next step,
+  // four times in a row, under four different titles.
+  const cam = ip({
+    capabilities: {
+      // Exactly the live wall: zoom works, the other four are off together.
+      digitalZoom: { state: "supported" },
+      playback: OFF_FOR_THE_SAME_REASON,
+      events: OFF_FOR_THE_SAME_REASON,
+      ptz: OFF_FOR_THE_SAME_REASON,
+      presets: OFF_FOR_THE_SAME_REASON,
+    },
+  });
+  const note = sharedCapabilityNote(cam, CAP_KEYS);
+  assert.match(note.detail, /^No direct connection/);
+  assert.match(note.nextStep, /Seven365 administrator/);
+});
+
+test("controls off for DIFFERENT reasons are never merged into one", () => {
+  // "The recorder is unreachable" and "this camera cannot move" are two
+  // problems with two different people to ask. Flattening them would be a lie
+  // of convenience, so the group note is refused and each card keeps its own.
+  const cam = ip({
+    capabilities: {
+      playback: OFF_FOR_THE_SAME_REASON,
+      ptz: { state: "unsupported", reason: "device-no-ptz", detail: "This camera cannot move." },
+    },
+  });
+  assert.equal(sharedCapabilityNote(cam, CAP_KEYS), null);
+});
+
+test("one control off on its own does not get a group note", () => {
+  const cam = ip({
+    capabilities: {
+      playback: OFF_FOR_THE_SAME_REASON,
+      events: { state: "supported" },
+      ptz: { state: "supported" },
+      presets: { state: "supported" },
+      digitalZoom: { state: "supported" },
+    },
+  });
+  assert.equal(sharedCapabilityNote(cam, CAP_KEYS), null);
+});
+
+test("a camera with no descriptor at all still groups its unknowns", () => {
+  // Every control reads "Not checked yet" with the same not-probed sentence —
+  // which is four identical cards, the same noise, and the same fix.
+  const note = sharedCapabilityNote(ip(), CAP_KEYS);
+  assert.match(note.detail, /has not been asked/);
 });
 
 test("a reason code this build has never seen still names somebody to ask", () => {
@@ -175,15 +309,19 @@ test("a page that has not loaded is Connecting, never Live", () => {
  * green "Live". The page had loaded; no picture was arriving. A loaded page is
  * now worth exactly one thing, and it is not the word "Live".
  */
-test("a loaded player page is NOT Live - it is Not verified", () => {
+test("a loaded player page is NOT Live - it is Not confirmed", () => {
   const v = tileView(ip(), { player: "page-up" });
   assert.equal(v.state, "unverified");
-  assert.equal(v.label, "Not verified");
+  assert.equal(v.label, "Not confirmed");
   // No scrim: there may be a perfectly good picture under that badge, and
   // covering a working camera would be a worse lie than the one being fixed.
   assert.equal(v.detail, null);
   assert.equal(v.showPlayer, true);
-  assert.match(v.note, /cannot confirm a picture is arriving/);
+  assert.match(v.note, /cannot confirm the picture is arriving/);
+  // Plain English, and an instruction rather than an explanation: the reader is
+  // a guard, not a browser engineer. Nothing about origins, players or frames.
+  assert.match(v.note, /check the tile/i);
+  assert.doesNotMatch(v.note, /browser|origin|player|iframe|service/i);
 });
 
 test("only a reported frame earns the word Live", () => {
@@ -349,16 +487,44 @@ test("reachability alone is enough when the server sends no summary word", () =>
   assert.equal(healthView({ reachable: false }).tone, "down");
 });
 
-test("the server's health sentences are carried through, not rewritten", () => {
+test("the server's health sentence is carried through, not rewritten", () => {
   const v = healthView({
     health: "unreachable",
     reachable: false,
     reason: "The recorder did not respond.",
+  });
+  assert.equal(v.detail, "The recorder did not respond.");
+});
+
+/**
+ * The firmware-and-clock sentence is the server explaining why two values it
+ * never showed are blank. It was drawn on the panel and appended to the tile's
+ * tooltip; a guard can do nothing with a firmware version, so it is not carried
+ * at all now. Pinned, because "soften it" was the tempting answer and the wrong
+ * one.
+ */
+test("the firmware and device-clock sentence is not carried to the screen", () => {
+  const v = healthView({
+    health: "ok",
+    reachable: true,
     detailUnavailableReason:
       "Firmware and device clock are not available: this recorder is reachable over video only.",
   });
-  assert.equal(v.detail, "The recorder did not respond.");
-  assert.match(v.deviceDetail, /^Firmware and device clock/);
+  assert.equal(v.detail, null);
+  assert.equal("deviceDetail" in v, false);
+});
+
+/**
+ * The complaint that started this: a green "Recorder responding" beside "Last
+ * picture this server received: none yet" reads as a contradiction. It is not
+ * one — but the panel now simply says nothing when there has never been a
+ * picture, which is the only reading a guard can act on.
+ */
+test("a recorder that is up with no picture yet reports no picture line at all", () => {
+  const v = healthView({ health: "ok", reachable: true, lastFrameAt: null });
+  assert.equal(v.tone, "ok");
+  assert.equal(v.label, "Recorder responding");
+  assert.equal(v.lastFrame, null);
 });
 
 test("a picture's age is coarse above a minute, and never a fake time", () => {

package/utils/camera-wall.ts

@@ -196,6 +196,30 @@ export function wallTiles(
   return chosen.slice(start, start + tiles);
 }
 
+/**
+ * WHICH TILE THE DETAIL PANEL IS ABOUT, and the guarantee that makes the panel
+ * able to stop naming it.
+ *
+ * The panel used to print the camera's name so the reader could tell which of
+ * up to nine tiles it was describing. The name is gone — the selected tile wears
+ * an accent ring instead — and that only works because **this can never return a
+ * camera that is not on the page being looked at.** It resolves out of the
+ * CURRENT page's tiles, so a selection left behind on page 1 does not leave the
+ * panel describing an invisible camera from page 2; it falls back to the first
+ * tile of the page you are actually on, which the ring then marks.
+ *
+ * The caller keeps the raw id, so paging back restores the original selection.
+ *
+ * Extracted from the component purely so this guarantee is a tested rule rather
+ * than a line of template nobody would think to check.
+ */
+export function focusedCamera(
+  tiles: TWallCamera[],
+  focusedId: string | undefined
+): TWallCamera | null {
+  return tiles.find((c) => c._id === focusedId) || tiles[0] || null;
+}
+
 /**
  * How many grid rows this page actually needs — the other half of packing.
  *
@@ -253,22 +277,49 @@ const NOT_PROBED = "This camera has not been asked what it can do yet.";
  * **Every one of these says the same true and unwelcome thing in a different
  * way: none of it is switched on from this page.** Saying so plainly is the
  * point. An empty settings screen that quietly does nothing would be worse.
+ *
+ * ## "Ask your Seven365 administrator" was a dead end, and it has been replaced
+ *
+ * That was the whole of the advice, and the owner — who IS the administrator —
+ * read it on the live wall and pointed out that it tells him nothing. It tells a
+ * property manager nothing either: they raise a ticket and wait, because the
+ * screen never said what the ticket should ASK FOR.
+ *
+ * The real answer is two changes, and they are two different jobs for two
+ * different people:
+ *
+ *  1. **a network change** — the site's network has to let our server reach the
+ *     camera recorder. Today it does not: the recorder answers video only.
+ *  2. **a configuration change on our server** — that recorder then has to be
+ *     added to the server's configuration.
+ *
+ * So each line below names the change that is missing and who does it, in that
+ * order. **No environment variable is named**, deliberately: the names belong in
+ * the deployment documentation (`iservice365-core/docs/camera-integration-config.md`),
+ * not on a property manager's screen, and printing them would make the sentence
+ * unreadable to the person it is written for without helping the person who
+ * needs them, who has the document.
+ *
+ * Nor does any line point at the camera setup guide. That guide covers ADDING a
+ * camera in Site Settings; it does not cover recorder connectivity, so sending
+ * the reader there would be sending them somewhere that does not answer the
+ * question. Naming the two changes IS the actionable content.
  */
 export const CAPABILITY_NEXT_STEPS: Record<string, string> = {
   "device-http-not-configured":
-    "This is a server setting, not something to switch on from this page: the server needs a network route to the camera's recorder, plus the recorder's sign-in details. Ask your Seven365 administrator.",
+    "Not switchable from this page. It needs the site's network opened so our server can reach the camera recorder, and that recorder then added to the server's configuration — your Seven365 administrator arranges both with whoever installed the cameras.",
   "device-http-disabled":
-    "Direct camera access is switched off on this server. Ask your Seven365 administrator to switch it on.",
+    "Not switchable from this page. The connection to the recorder exists but is turned off in the server's configuration — your Seven365 administrator turns it on.",
   "device-http-unreachable":
-    "The recorder did not answer this server. Ask your Seven365 administrator or the camera installer to check the recorder and its network.",
+    "Our server cannot reach this camera's recorder. Usually the site's network is blocking it or the recorder is down — your Seven365 administrator and whoever installed the cameras check it between them.",
   "device-http-locked-out":
-    "Sign-ins to the recorder are being held back so its account is not locked out. Ask your Seven365 administrator to check the recorder's sign-in details.",
+    "Sign-ins to the recorder are being held back so its account is not locked out. It clears on its own; if it keeps happening the password held for the recorder is wrong and your Seven365 administrator corrects it in the server's configuration.",
   "control-not-enabled":
-    "Camera control is switched off on this server. Switching it on moves real hardware, so it has to be approved by a Seven365 backend lead first.",
+    "Not switchable from this page. This one moves real hardware, so a Seven365 backend lead has to approve it before it is turned on in the server's configuration.",
   "device-no-ptz":
     "This camera cannot move, so there is nothing to switch on. A different camera would be needed.",
   "no-recorder-configured":
-    "No recorder is set up for this camera's video service. Ask your Seven365 administrator to add it.",
+    "Not switchable from this page. This camera's video service has no recorder linked to it in the server's configuration — your Seven365 administrator adds it.",
   "no-channel-in-address":
     "This camera's address does not say which stream it is. Correct it in Site Settings, under CCTV.",
   "not-a-relay-player-url":
@@ -282,7 +333,7 @@ export const CAPABILITY_NEXT_STEPS: Record<string, string> = {
   "device-not-probed":
     "The camera is asked what it can do the first time it is opened. Nothing to do — check back in a moment.",
   "no-transport":
-    "Nothing on this server can do this yet. It has to be built before it can be switched on.",
+    "Not built yet. Nothing on this server can do it.",
 };
 
 /**
@@ -292,7 +343,7 @@ export const CAPABILITY_NEXT_STEPS: Record<string, string> = {
  * setting on this page, and there is still somebody to ask.
  */
 const NEXT_STEP_FALLBACK =
-  "This is not something to switch on from this page. Ask your Seven365 administrator.";
+  "Not switchable from this page — it needs a change to the server's configuration, which your Seven365 administrator makes.";
 
 /**
  * The capabilities the wall draws a control for, and their plain names.
@@ -386,6 +437,47 @@ export function capabilityView(
   };
 }
 
+/**
+ * RULE 7 — SAY IT ONCE FOR THE GROUP WHEN IT IS ONE FACT, NOT FOUR.
+ *
+ * On this estate all four of the switched-off controls are off for the SAME
+ * reason: there is no direct connection to the recorder. So the panel drew four
+ * cards, each carrying an identical sentence and an identical next step —
+ * eight lines of repetition saying one thing. Four copies of a sentence do not
+ * make it four facts; they make the reader skim, and skimming is how the one
+ * line that mattered got missed.
+ *
+ * So when every unavailable control shares the same reason, this returns it and
+ * the panel prints it once above the row. Each card keeps its own title and its
+ * own tag, so the individual state is never lost — only the echo is.
+ *
+ * Returns `null` the moment the reasons DIFFER, which is the case that must not
+ * be flattened: "the recorder is unreachable" and "this camera cannot move" are
+ * two different problems with two different people to ask, and merging them
+ * would be a lie of convenience. Also `null` when nothing is off (nothing to
+ * explain) or when only one control is off (a group note for a group of one is
+ * just the card, moved).
+ */
+export function sharedCapabilityNote(
+  camera: TWallCamera | null | undefined,
+  keys: readonly string[]
+): { detail: string; nextStep: string | null } | null {
+  const off = keys
+    .map((key) => capabilityView(camera, key))
+    .filter((view) => !view.available);
+
+  if (off.length < 2) return null;
+
+  const first = off[0];
+  const same = off.every(
+    (view) => view.detail === first.detail && view.nextStep === first.nextStep
+  );
+
+  return same && first.detail
+    ? { detail: first.detail, nextStep: first.nextStep }
+    : null;
+}
+
 /* -------------------------------------------------------------------------- */
 /* Tile state                                                                  */
 /* -------------------------------------------------------------------------- */
@@ -428,10 +520,16 @@ export type TTileState =
  *
  * `unverified` is the state this wall is in for every camera on this estate
  * today, and saying so is the point — see the note above `tileView`.
+ *
+ * It used to read "Not verified", which is a word from our side of the fence:
+ * it describes a check we did not manage to make. "Not confirmed" describes the
+ * PICTURE, which is the only thing the reader cares about, and it is the same
+ * claim. The instruction that goes with it — check the tile — is in
+ * `UNVERIFIED_DETAIL`, on the badge's tooltip and once on the panel.
  */
 export const TILE_LABELS = {
   live: "Live",
-  unverified: "Not verified",
+  unverified: "Not confirmed",
   connecting: "Connecting…",
   "no-signal": "No signal",
   offline: "No connection",
@@ -548,12 +646,23 @@ export type TTileView = {
 };
 
 /**
- * The sentence behind "Not verified", said once on the focused camera's panel
- * rather than nine times across the wall. Invented here: no server has a
- * reason code for "your browser cannot see inside another origin's page".
+ * The sentence behind "Not confirmed", said once on the focused camera's panel
+ * rather than nine times across the wall.
+ *
+ * **Written for a guard or a property manager, not for us.** The first version
+ * of this line explained cross-origin isolation — "the player belongs to the
+ * video service and a browser cannot look inside it" — which is true, is the
+ * reason, and is none of the reader's business. The owner read it on the live
+ * wall and said so. A reader of this screen has exactly three questions: is
+ * this camera working, what do I do if it is not, and what can I do here. WHY
+ * the software cannot answer the first one is our problem, not theirs.
+ *
+ * So: what we cannot do, then what they should do. Nothing else. The claim is
+ * every bit as honest as the paragraph it replaces — it just stops making the
+ * reader sit through an engineering lesson to get to the instruction.
  */
 export const UNVERIFIED_DETAIL =
-  "The video page loaded, but this browser cannot confirm a picture is arriving. The player belongs to the video service and a browser cannot look inside it. Judge the tile by what you can see, and report a blank or frozen picture.";
+  "This page cannot confirm the picture is arriving, so check the tile yourself. If it is blank or frozen, report the camera.";
 
 /**
  * Rule 4, plus every reason a tile may have nothing to show.
@@ -632,14 +741,14 @@ export function tileView(
       // we genuinely cannot tell a dead camera from a dead video service.
       return showing(
         "no-signal",
-        "The live view did not load. The camera or the video service may be down."
+        "No picture. The camera or the video service may be down. Report it if it stays like this."
       );
     case "stalled":
       // It WAS playing and stopped. That is the one case where we can say a
       // picture has genuinely gone away, because we saw one arrive first.
       return showing(
         "no-signal",
-        "The picture stopped arriving. The camera or the video service may have dropped."
+        "The picture stopped arriving. The camera or the video service may have dropped. Report it if it does not come back."
       );
     case "playing":
       return showing("live", null);
@@ -688,15 +797,27 @@ export type THealthView = {
   detail: string | null;
   /** "4 min ago", or `null` when this server has never had a picture. */
   lastFrame: string | null;
-  /** Why firmware and clock are blank. The server's sentence, verbatim. */
-  deviceDetail: string | null;
 };
 
+/*
+  THE FIRMWARE-AND-CLOCK LINE IS GONE, AND IT IS NOT COMING BACK.
+
+  The server sends `detailUnavailableReason` — "Firmware and device clock are
+  not available: this recorder is reachable over video only." — so that two
+  blank fields do not read as "checked, and fine". That is a good reason to
+  send it and a bad reason to DRAW it: this screen never showed firmware or a
+  device clock in the first place, so the sentence was explaining the absence
+  of something the reader had not been offered and could not use. A guard
+  cannot act on a firmware version. Softening the wording would have kept the
+  noise, so the line is removed instead. The field is still on
+  `TWallCameraHealth` because the API sends it; nothing on the wall draws it.
+*/
+
 const HEALTH_LABELS: Record<string, { tone: THealthTone; label: string }> = {
   ok: { tone: "ok", label: "Recorder responding" },
   drifted: { tone: "warn", label: "Recorder clock is out" },
   unreachable: { tone: "down", label: "Recorder not responding" },
-  unsupported: { tone: "unknown", label: "Not checked" },
+  unsupported: { tone: "unknown", label: "Recorder not checked" },
 };
 
 /**
@@ -716,7 +837,7 @@ export function healthView(
       ? HEALTH_LABELS.ok
       : health?.reachable === false
         ? HEALTH_LABELS.unreachable
-        : { tone: "unknown", label: "Health not checked yet" };
+        : { tone: "unknown", label: "Recorder not checked yet" };
 
   const { tone, label } = known ?? fallback;
 
@@ -725,7 +846,6 @@ export function healthView(
     label,
     detail: (health?.reason || "").trim() || null,
     lastFrame: agoLabel(health?.lastFrameAt, now),
-    deviceDetail: (health?.detailUnavailableReason || "").trim() || null,
   };
 }