@7365admin1/layer-common 3.2.3 → 3.2.5

package/components/CameraWall.vue

@@ -0,0 +1,1034 @@
+<template>
+  <div ref="root" class="vms">
+    <!-- ------------------------------------------------------------ toolbar -->
+    <div class="vms__bar">
+      <button
+        type="button"
+        class="vms__tool"
+        :class="{ 'vms__tool--on': showPicker }"
+        :aria-pressed="showPicker"
+        @click="showPicker = !showPicker"
+      >
+        Cameras<span v-if="cameras.length" class="vms__count">{{ cameras.length }}</span>
+      </button>
+
+      <div class="vms__layouts" role="group" aria-label="Wall layout">
+        <button
+          v-for="l in WALL_LAYOUTS"
+          :key="l.key"
+          type="button"
+          class="vms__tool vms__tool--icon"
+          :class="{ 'vms__tool--on': layoutKey === l.key }"
+          :aria-pressed="layoutKey === l.key"
+          :title="`${l.label} (${l.key})`"
+          :aria-label="`${l.label} camera layout`"
+          @click="layoutKey = l.key"
+        >
+          <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
+            <rect
+              v-for="cell in l.tiles"
+              :key="cell"
+              :x="((cell - 1) % l.columns) * (16 / l.columns) + 1"
+              :y="Math.floor((cell - 1) / l.columns) * (16 / l.columns) + 1"
+              :width="16 / l.columns - 2"
+              :height="16 / l.columns - 2"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <div class="vms__spacer" />
+
+      <button
+        type="button"
+        class="vms__tool"
+        title="Fill the screen with the wall"
+        @click="toggleFullscreen"
+      >
+        Full screen
+      </button>
+    </div>
+
+    <!-- -------------------------------------------------------------- body -->
+    <div class="vms__body">
+      <!--
+        THE CAMERA BROWSER. Beside the wall, not on top of it: a supervisor
+        changing what they watch should still be able to see what they are
+        watching.
+      -->
+      <aside v-if="showPicker" class="vms__picker" aria-label="Cameras on this site">
+        <p class="vms__picker-head">
+          On the wall
+          <button
+            v-if="selectedIds.length"
+            type="button"
+            class="vms__link"
+            @click="selectedIds = []"
+          >
+            Reset
+          </button>
+        </p>
+        <p v-if="!cameras.length && !loading" class="vms__picker-empty">
+          No cameras yet.
+        </p>
+        <label v-for="c in cameras" :key="c._id" class="vms__pick">
+          <input
+            type="checkbox"
+            :checked="isPicked(c._id)"
+            :disabled="!isPicked(c._id) && selectedIds.length >= layout.tiles"
+            @change="togglePick(c._id)"
+          >
+          <span class="vms__pick-name">{{ c.name || c._id }}</span>
+          <span
+            class="vms__pick-dot"
+            :class="c.status === 'active' ? 'vms__pick-dot--on' : 'vms__pick-dot--off'"
+          />
+        </label>
+        <p v-if="selectedIds.length >= layout.tiles" class="vms__picker-note">
+          This layout holds {{ layout.tiles }}. Choose a bigger layout for more.
+        </p>
+      </aside>
+
+      <div class="vms__stage">
+        <!-- Loading, empty and failed are real states, not a blank rectangle. -->
+        <div v-if="loading" class="vms__state">
+          <p class="vms__state-head">Loading cameras…</p>
+        </div>
+
+        <div v-else-if="failed" class="vms__state">
+          <p class="vms__state-head">Cameras could not be loaded</p>
+          <p class="vms__state-body">{{ failed }}</p>
+          <button type="button" class="vms__tool" @click="load()">Try again</button>
+        </div>
+
+        <div v-else-if="!cameras.length" class="vms__state">
+          <p class="vms__state-head">No cameras set up yet</p>
+          <p class="vms__state-body">
+            CCTV cameras are added in Site Settings, under CCTV. Ask whoever manages
+            this site's settings to add one.
+          </p>
+        </div>
+
+        <div
+          v-else
+          class="vms__grid"
+          :style="{
+            gridTemplateColumns: `repeat(${layout.columns}, minmax(0, 1fr))`,
+            gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
+          }"
+        >
+          <CameraWallTile
+            v-for="camera in tiles"
+            :key="camera._id"
+            :camera="camera"
+            :dense="dense"
+            :online="online"
+            :health="healthById[camera._id]"
+            :now="now"
+            :focused="camera._id === focused?._id"
+            @focus="focusedId = $event._id"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!--
+      THE PAGER.
+
+      Fixed under the wall rather than scrolling with the page, because it must
+      not scroll away from the wall it pages. Drawn only when there is more than
+      one page — a site with four cameras on a 2x2 wall does not need to be told
+      it is on page 1 of 1.
+    -->
+    <div v-if="pages > 1" class="vms__pager">
+      <button
+        type="button"
+        class="vms__tool"
+        :disabled="page === 0"
+        @click="page = Math.max(0, page - 1)"
+      >
+        Previous
+      </button>
+      <span class="vms__pager-label">Page {{ page + 1 }} of {{ pages }}</span>
+      <button
+        type="button"
+        class="vms__tool"
+        :disabled="page >= pages - 1"
+        @click="page = Math.min(pages - 1, page + 1)"
+      >
+        Next
+      </button>
+    </div>
+
+    <!-- ------------------------------------------------------- capabilities -->
+    <!--
+      THE CONTROLS THAT ARE NOT SWITCHED ON YET.
+
+      Drawn, dimmed, and carrying the server's own reason — never hidden. A
+      supervisor who cannot see that recorded footage exists as an idea cannot
+      ask for it, and hiding it is what stops anyone asking.
+    -->
+    <div v-if="focused" class="vms__caps">
+      <!--
+        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.
+      -->
+      <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>
+        <!--
+          "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="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"
+          :key="c.key"
+          class="vms__cap"
+          :class="{ 'vms__cap--off': !capability(c.key).available }"
+        >
+          <p class="vms__cap-title">
+            {{ c.title }}
+            <span
+              class="vms__cap-tag"
+              :class="{ 'vms__cap-tag--on': capability(c.key).available }"
+            >
+              {{ capability(c.key).tag }}
+            </span>
+          </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. Suppressed here for the same reason as
+            the sentence above it: it is in the group note.
+          -->
+          <p v-if="!sharedNote && capability(c.key).nextStep" class="vms__cap-next">
+            {{ capability(c.key).nextStep }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+import {
+  capabilityView,
+  clampPage,
+  DEFAULT_WALL_LAYOUT,
+  focusedCamera,
+  healthView,
+  isDenseLayout,
+  sharedCapabilityNote,
+  wallCameras,
+  wallLayout,
+  wallPageCount,
+  wallRows,
+  wallTiles,
+  tileView,
+  UNVERIFIED_DETAIL,
+  WALL_CAPABILITY_CONTROLS,
+  WALL_LAYOUTS,
+  type TWallCamera,
+  type TWallCameraHealth,
+  type TWallLayoutKey,
+} from "../utils/camera-wall";
+
+/**
+ * THE CAMERA WALL — one component, both applications.
+ *
+ * Security has had a wall for a while and Property Management has had none, so
+ * the same product answered the same question two different ways depending on
+ * which tab you were in. This is that wall, once, in the shared layer: the
+ * apps supply the site and nothing else.
+ *
+ * ## What it is, in one paragraph
+ *
+ * A dark video wall: a layout switcher, a camera browser beside the grid, tiles
+ * that carry a name and a live status, any tile expandable to the whole screen,
+ * and — under it — the camera controls that exist but are not switched on in
+ * this deployment yet, drawn and dimmed with the server's own explanation. It
+ * is the same shape as the monitoring surfaces in the iSecure365 mobile app,
+ * on purpose.
+ *
+ * ## Why the wall is dark in a light application
+ *
+ * A supervisor scanning tiles is judging PICTURES, and every bright surface
+ * beside a picture steals the contrast the picture needs. So the wall is dark
+ * in both themes, deliberately — the rest of the application is untouched, and
+ * a light-theme user getting a dark wall is the intended answer, not a missed
+ * token.
+ *
+ * ## What it deliberately does NOT do
+ *
+ * It does not decide who may see cameras. There is no camera-VIEWING permission
+ * in the product today — only the two `site-settings:manage-*-camera` strings,
+ * which govern SETUP — so each application gates its own menu entry with a
+ * permission that actually resolves, and this component draws what it is given.
+ * Inventing a gate here would silently deny people access they have today.
+ */
+
+const props = defineProps<{ site: string }>();
+
+/* ---------------------------------------------------------------- the data */
+
+const { getSiteWall, getSiteHealth } = useSiteSettings();
+
+const cameras = ref<TWallCamera[]>([]);
+const loading = ref(true);
+const failed = ref("");
+/**
+ * The server's own tuning. `healthCacheSeconds` is how long IT caches a
+ * recorder probe, so it is exactly how often there is any point asking — and
+ * asking faster would spend round trips to be handed the same cached answer.
+ */
+const config = ref<Record<string, any> | null>(null);
+
+async function load() {
+  loading.value = true;
+  failed.value = "";
+  try {
+    // The site's wall, from the endpoint built for it. `wallCameras` still
+    // filters on the way in — the server already returns `type: "ip"` only, and
+    // an ANPR unit must never reach a monitoring wall even if that ever changes.
+    const res = await getSiteWall(props.site);
+    cameras.value = wallCameras(res?.cameras);
+    config.value = res?.config ?? null;
+  } catch (error: any) {
+    // The raw message is often a stack trace and rarely something an operator
+    // can act on — but "you may not see this site" and "your connection
+    // dropped" are genuinely different problems with different next steps, and
+    // telling a refused caller to check their connection sends them off to
+    // debug their wifi. The server answers a site that is not the caller's the
+    // same way as a site that does not exist, on purpose, so this wording does
+    // not distinguish them either.
+    cameras.value = [];
+    const status = Number(error?.statusCode ?? error?.response?.status ?? 0);
+    failed.value =
+      status === 401 || status === 403 || status === 404
+        ? "You do not have access to this site's cameras."
+        : "The list of cameras did not load. Check your connection and try again.";
+  } finally {
+    loading.value = false;
+    restartHealth();
+  }
+}
+
+onMounted(load);
+watch(() => props.site, () => {
+  selectedIds.value = [];
+  page.value = 0;
+  healthById.value = {};
+  load();
+});
+
+/* -------------------------------------------------------------- the layout */
+
+const layoutKey = ref<TWallLayoutKey>(DEFAULT_WALL_LAYOUT);
+const layout = computed(() => wallLayout(layoutKey.value));
+const dense = computed(() => isDenseLayout(layoutKey.value));
+
+const selectedIds = ref<string[]>([]);
+const showPicker = ref(false);
+
+const page = ref(0);
+const pages = computed(() =>
+  wallPageCount(cameras.value, selectedIds.value, layoutKey.value)
+);
+
+const tiles = computed(() =>
+  wallTiles(cameras.value, selectedIds.value, layoutKey.value, page.value)
+);
+
+/**
+ * THE GRID PACKS TO WHAT IS ON IT.
+ *
+ * Five cameras on a nine-tile wall used to draw five pictures and four dashed
+ * boxes reading "No camera in this position", with the pictures squeezed into
+ * two thirds of the height to leave room for the holes. The layout picker means
+ * "at most this many, at this size" — it does not mean the screen owes anybody
+ * four empty rectangles. Nothing can be done with an empty cell from here
+ * anyway: cameras are added in Site Settings.
+ */
+const rows = computed(() => wallRows(tiles.value.length, layoutKey.value));
+
+/**
+ * A layout change resizes the page, so the old page NUMBER no longer means
+ * anything — going to 3x3 from page 2 of a 2x2 wall would land somewhere
+ * arbitrary, or past the end. Clamped rather than reset to 0: dropping from
+ * 3x3 to 2x2 keeps you roughly where you were instead of throwing you back to
+ * the front of a wall you were part-way through.
+ */
+watch([layoutKey, pages], () => {
+  page.value = clampPage(page.value, pages.value);
+});
+
+function isPicked(id: string) {
+  return selectedIds.value.includes(id);
+}
+
+function togglePick(id: string) {
+  if (isPicked(id)) selectedIds.value = selectedIds.value.filter((x) => x !== id);
+  else if (selectedIds.value.length < layout.value.tiles)
+    selectedIds.value = [...selectedIds.value, id];
+}
+
+/* --------------------------------------------------------- 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(() => focusedCamera(tiles.value, focusedId.value));
+
+function capability(key: string) {
+  return capabilityView(focused.value, key);
+}
+
+/**
+ * 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.
+ */
+const embedsPlayer = computed(
+  () => tileView(focused.value, { online: online.value }).showPlayer
+);
+
+/* ------------------------------------------------------------------ health */
+
+/**
+ * THE RECORDER'S OWN STATE, asked for separately and slowly.
+ *
+ * This is the only thing on this screen that can cause the server to touch a
+ * device, so three things bound it and all three matter:
+ *
+ * - **only the tiles on screen** are asked about, so paging to another page
+ *   does not keep probing the page you left;
+ * - **the interval is the server's own cache lifetime**, because asking faster
+ *   than the cache is round trips in exchange for the identical answer;
+ * - **a failure is never retried and never breaks the wall.** Health is
+ *   supporting information; a wall that goes blank because a probe timed out
+ *   would be a worse screen than one with no health on it at all.
+ */
+const healthById = ref<Record<string, TWallCameraHealth>>({});
+const healthFailed = ref("");
+/** Ticked with the sweep so "4 min ago" ages instead of freezing. */
+const now = ref(Date.now());
+
+const focusedHealth = computed(() =>
+  healthView(focused.value ? healthById.value[focused.value._id] : null, now.value)
+);
+
+const visibleIds = computed(() => tiles.value.map((c) => c._id));
+
+let healthTimer: ReturnType<typeof setInterval> | null = null;
+
+async function sweepHealth() {
+  const ids = visibleIds.value;
+  now.value = Date.now();
+  if (!ids.length || !online.value) return;
+
+  try {
+    const res = await getSiteHealth(props.site, ids);
+    const next: Record<string, TWallCameraHealth> = {};
+    for (const item of (res?.cameras ?? []) as any[]) {
+      if (item?._id) next[String(item._id)] = item as TWallCameraHealth;
+    }
+    healthById.value = next;
+    healthFailed.value = "";
+  } 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 = "Could not check the recorder just now.";
+  }
+}
+
+function restartHealth() {
+  if (healthTimer) clearInterval(healthTimer);
+  const seconds = Number(config.value?.healthCacheSeconds);
+  const intervalMs = (Number.isFinite(seconds) && seconds > 0 ? seconds : 20) * 1000;
+  healthTimer = setInterval(sweepHealth, intervalMs);
+  sweepHealth();
+}
+
+// Re-swept when the visible set changes, so a supervisor who pages or changes
+// layout is not reading the previous page's health under the new page's names.
+watch(visibleIds, (ids, previous) => {
+  if (ids.join(",") !== (previous ?? []).join(",")) sweepHealth();
+});
+
+onBeforeUnmount(() => {
+  if (healthTimer) clearInterval(healthTimer);
+  healthTimer = null;
+});
+
+/* ------------------------------------------------------- browser condition */
+
+const online = ref(true);
+const setOnline = () => {
+  online.value = typeof navigator === "undefined" ? true : navigator.onLine !== false;
+};
+
+onMounted(() => {
+  setOnline();
+  window.addEventListener("online", setOnline);
+  window.addEventListener("offline", setOnline);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("online", setOnline);
+  window.removeEventListener("offline", setOnline);
+});
+
+/* ------------------------------------------------------------- fullscreen */
+
+const root = ref<HTMLElement | null>(null);
+
+async function toggleFullscreen() {
+  const el = root.value;
+  if (!el) return;
+  try {
+    if (document.fullscreenElement) await document.exitFullscreen();
+    else await el.requestFullscreen();
+  } catch {
+    // A browser that refuses fullscreen is not worth interrupting anyone over.
+  }
+}
+</script>
+
+<style scoped>
+/*
+  The near-black ramp, the gutter and the radius are the same values the mobile
+  monitoring build uses, so the two surfaces read as one product. They are
+  literals rather than theme tokens because this surface is dark in BOTH themes
+  and therefore cannot read one.
+*/
+.vms {
+  --vms-screen: #07090c;
+  --vms-tile: #101418;
+  --vms-chrome: #161b22;
+  --vms-chrome-active: #232b36;
+  --vms-line: #232b36;
+  --vms-scrim: rgba(7, 9, 12, 0.62);
+  --vms-scrim-solid: rgba(7, 9, 12, 0.82);
+  --vms-text: #e8ecf1;
+  --vms-text-dim: #94a0b0;
+  /*
+    #5c6675 measured 2.98:1 against the chrome — under the 3:1 a status
+    indicator needs, and this token IS a status indicator (the "not checked"
+    dot and the inactive dot in the camera list). #7a8697 measures 4.68:1 there
+    and 5.01:1 on a tile. Invented value; the rest of the ramp is unchanged.
+  */
+  --vms-text-faint: #7a8697;
+  --vms-accent: #5b9be0;
+  --vms-radius: 3px;
+
+  display: flex;
+  flex-direction: column;
+  background: var(--vms-screen);
+  border-radius: var(--vms-radius);
+  overflow: hidden;
+  color: var(--vms-text);
+  font-family: inherit;
+}
+
+.vms__bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px;
+  background: var(--vms-chrome);
+  border-bottom: 1px solid var(--vms-line);
+  flex-wrap: wrap;
+}
+
+.vms__spacer {
+  flex: 1 1 auto;
+}
+
+.vms__layouts {
+  display: flex;
+  gap: 2px;
+}
+
+.vms__tool {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 4px 10px;
+  border: 1px solid var(--vms-line);
+  border-radius: var(--vms-radius);
+  background: transparent;
+  color: var(--vms-text);
+  font-size: 12px;
+  line-height: 16px;
+  cursor: pointer;
+}
+
+.vms__tool:hover:not(:disabled) {
+  background: var(--vms-chrome-active);
+}
+
+.vms__tool:disabled {
+  /* Legible, not ghosted: see the note on the capability panel below. */
+  opacity: 0.55;
+  cursor: default;
+}
+
+.vms__tool--icon {
+  padding: 4px 8px;
+}
+
+/*
+  A SELECTED TOOL IS NOT PAINTED IN THE BRAND RED. On this screen red already
+  means "this camera is down"; a permanent red block in the toolbar of a
+  monitoring wall competes with the alarms the wall exists to show. Selection is
+  a raised neutral fill and a 2 px accent underline instead.
+*/
+.vms__tool--on {
+  background: var(--vms-chrome-active);
+  box-shadow: inset 0 -2px 0 var(--vms-accent);
+}
+
+.vms__tool:focus-visible {
+  outline: 2px solid var(--vms-accent);
+  outline-offset: 1px;
+}
+
+.vms__count {
+  color: var(--vms-text-dim);
+}
+
+.vms__body {
+  display: flex;
+  min-height: 0;
+  height: 68vh;
+}
+
+.vms__picker {
+  width: 220px;
+  flex: none;
+  overflow-y: auto;
+  padding: 8px;
+  background: var(--vms-chrome);
+  border-right: 1px solid var(--vms-line);
+}
+
+.vms__picker-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 6px;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--vms-text-dim);
+}
+
+.vms__picker-empty,
+.vms__picker-note {
+  margin: 6px 0 0;
+  font-size: 11px;
+  line-height: 15px;
+  color: var(--vms-text-dim);
+}
+
+.vms__link {
+  background: none;
+  border: none;
+  color: var(--vms-accent);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 0;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.vms__pick {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  /* Dense chrome, but a 40 px row so a checkbox is not a lottery to hit. */
+  min-height: 40px;
+  padding: 0 4px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.vms__pick-name {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vms__pick-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex: none;
+}
+
+.vms__pick-dot--on {
+  background: #4caf50;
+}
+
+.vms__pick-dot--off {
+  background: var(--vms-text-faint);
+}
+
+.vms__stage {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+}
+
+.vms__grid {
+  flex: 1 1 auto;
+  display: grid;
+  /* 2 px: on a nine-tile wall the usual 8 px rhythm costs real picture. */
+  gap: 2px;
+  padding: 2px;
+  min-width: 0;
+}
+
+.vms__state {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+  text-align: center;
+}
+
+.vms__state-head {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.vms__state-body {
+  margin: 0;
+  max-width: 46ch;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--vms-text-dim);
+}
+
+/* ------------------------------------------------------------------ pager */
+
+.vms__pager {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 6px;
+  background: var(--vms-chrome);
+  border-top: 1px solid var(--vms-line);
+}
+
+.vms__pager-label {
+  font-size: 12px;
+  color: var(--vms-text-dim);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ----------------------------------------------------------- badge meaning */
+
+.vms__badge-note {
+  margin: 0 0 8px;
+  max-width: 92ch;
+  font-size: 12px;
+  line-height: 17px;
+  color: var(--vms-text-dim);
+}
+
+/* ----------------------------------------------------------------- health */
+
+.vms__health {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px 16px;
+  margin: 0 0 10px;
+  font-size: 12px;
+  line-height: 17px;
+  color: var(--vms-text-dim);
+}
+
+.vms__health-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--vms-text);
+  font-weight: 600;
+}
+
+.vms__health-item b {
+  color: var(--vms-text);
+  font-weight: 600;
+}
+
+.vms__health-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex: none;
+}
+
+.vms__health-dot--ok {
+  background: #4caf50;
+}
+.vms__health-dot--warn {
+  background: #fb8c00;
+}
+.vms__health-dot--down {
+  background: #e0241c;
+}
+.vms__health-dot--unknown {
+  background: var(--vms-text-faint);
+}
+
+/* ------------------------------------------------------------ capabilities */
+
+.vms__caps {
+  padding: 10px;
+  background: var(--vms-chrome);
+  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 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));
+  gap: 8px;
+}
+
+/*
+  A CONTROL THAT IS OFF IS OUTLINED, NOT FADED.
+
+  A faded fill is a live control with the lights down; an outline is the shape
+  of a control that is not there yet. The accent rail on the left says the same
+  thing again: a defined slot, waiting to be filled — which is literally true.
+*/
+.vms__cap {
+  padding: 8px 10px;
+  border: 1px solid var(--vms-line);
+  border-left: 2px solid var(--vms-accent);
+  border-radius: var(--vms-radius);
+  background: transparent;
+}
+
+.vms__cap-title {
+  margin: 0 0 2px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  /* The TITLE stays legible even when the control is off: somebody who cannot
+     read "Recorded footage" cannot ask for it. */
+  color: var(--vms-text);
+}
+
+.vms__cap-tag {
+  font-size: 11px;
+  font-weight: 400;
+  padding: 1px 6px;
+  border-radius: var(--vms-radius);
+  background: var(--vms-chrome-active);
+  color: var(--vms-text-dim);
+  white-space: nowrap;
+}
+
+/*
+  "Ready" is the one tag that is good news, and it is the accent rather than
+  green: green on this screen means "this camera is up", and a control being
+  available is not the same claim.
+*/
+.vms__cap-tag--on {
+  color: var(--vms-accent);
+}
+
+/*
+  RULE 5's second line: quieter than the server's sentence above it, because it
+  is advice rather than fact — but NOT dimmed with the rest of a switched-off
+  panel. It is the one line on an unavailable control that is actionable, and
+  fading the only actionable line is the whole mistake this fixes.
+*/
+.vms__cap-next {
+  margin: 6px 0 0;
+  padding-top: 6px;
+  border-top: 1px solid var(--vms-line);
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--vms-text-dim);
+}
+
+/*
+  THE FADE ON A SWITCHED-OFF REASON IS GONE, AND THE OLD COMMENT WAS WRONG.
+
+  It claimed 0.55 opacity measured "about 5.2:1". Measured properly — the dim
+  ramp #94a0b0 composited at 0.55 over the chrome #161b22 — it is 2.88:1,
+  well under the 4.5:1 a sentence needs, and the reason a supervisor is meant
+  to read was the least legible text on the panel. Removing the fade entirely
+  leaves #94a0b0 on #161b22 at 6.52:1. The panel is already outlined rather
+  than filled, which is what says "not switched on"; the fade was saying it a
+  second time at the cost of the words.
+*/
+.vms__cap-detail {
+  margin: 0;
+  font-size: 12px;
+  line-height: 17px;
+  color: var(--vms-text-dim);
+}
+
+.vms:fullscreen .vms__body {
+  height: auto;
+  flex: 1 1 auto;
+}
+
+.vms:fullscreen {
+  height: 100vh;
+}
+</style>