feat: explainable activity log — reasons, subscriber names, snapshot gaps

The live activity feed flagged anomalies with no explanation and showed
opaque session keys. Make events self-describing and clickable.

- Clickable feed rows → read-only event-detail modal: humanized fields,
  entry/exit snapshots, and signed-chain provenance collapsed behind an
  audit disclosure (operator sees the story, auditor expands for crypto).
- Localized reason codes (backend i18n): the signed ledger now carries a
  stable REASON_CODE + params (+ English fallback) instead of free-text
  English. The UI translates via reason.<code> catalogs in sq/en, so an
  Albanian operator reads Albanian — from the same immutable event. Adding
  a language is a catalog change, no re-signing. (@parking/shared
  REASON_CODES, reasonPayload; entry/exit/subscription flows emit codes.)
- Subscriber-name resolution: a SUBSESS-… occurrence now shows the
  subscription holder's name (fallback "Abonent"/"Subscriber"). Resolved
  read-time server-side (events API + WS push) as a non-signed
  subscriberLabel; cached with invalidation on subscription edit/delete.
- Failed-snapshot visibility: a camera that was attempted but unreachable
  now shows a "⚠ camera unreachable" tile instead of a silent gap. The
  snapshots API returns failures[] from telemetry, filtered so a recovered
  capture shows no stale warning.

Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V

apps/web/src/BoothScreen.tsx

@@ -1,7 +1,8 @@
-import { useRef, useState } from "react";
+import { useRef, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "@tanstack/react-query";
 import { fetchEvents, fetchOccupancy, type LedgerEvent, type Occupancy } from "./api.js";
+import { formatMoney } from "./lib/format.js";
 import { qk } from "./lib/query.js";
 import { useLiveStore } from "./lib/live-store.js";
 import { useShift } from "./lib/use-shift.js";
@@ -9,6 +10,9 @@ import { Panel } from "./ui/Panel.js";
 import { StatusDot } from "./ui/StatusDot.js";
 import { BoothPayModal } from "./BoothPayModal.js";
 import { ActiveSessions } from "./ActiveSessions.js";
+import { Modal } from "./ui/Modal.js";
+import { SnapshotStrip } from "./ui/SnapshotStrip.js";
+import { renderReason } from "./lib/reason.js";
 
 // The live operator booth view — the real-time heart of the console. Occupancy
 // gauge + a streaming entry/exit/payment ticker. Query owns the initial load and
@@ -70,20 +74,226 @@ function OccupancyGauge({ occ }: { occ: Occupancy }) {
   );
 }
 
-function EventRow({ e }: { e: LedgerEvent }) {
+/** Translated classification badges derived from a payload's boolean flags. Unlike
+ *  `reason` (an immutable English sentence baked into the signed ledger, shown
+ *  verbatim), these are computed client-side so they CAN be localized. They give a
+ *  glanceable "what kind of anomaly" tag without parsing the free-text reason. */
+function eventBadges(p: LedgerEvent["payload"]): string[] {
+  if (!p) return [];
+  const keys: string[] = [];
+  if (p.entryRefused) keys.push("booth.badgeEntryRefused");
+  if (p.exitRefused) keys.push("booth.badgeExitRefused");
+  if (p.full) keys.push("booth.badgeLotFull");
+  if (p.exitOpenFailed) keys.push("booth.badgeBarrierFailed");
+  if (p.permitRefused) keys.push("booth.badgeSubRefused");
+  if (p.ticketPrinted === false) keys.push("booth.badgeNoTicket");
+  if (p.source === "manual") keys.push("booth.badgeManualOpen");
+  return keys;
+}
+
+/** A short money summary for payment events (e.g. "350.00 ALL"). */
+function paymentSummary(p: LedgerEvent["payload"]): string | null {
+  if (!p || typeof p.amountMinor !== "number" || !p.currency) return null;
+  return formatMoney(p.amountMinor, p.currency);
+}
+
+/** What to SHOW for an event's actor. A subscription occurrence has an opaque
+ *  `SUBSESS-…` identity; the server resolves the holder's name into `subscriberLabel`,
+ *  so we show that (e.g. "Aqif Kopertoni") instead. Otherwise the identity itself. */
+function displayIdentity(e: LedgerEvent): string {
+  return e.subscriberLabel ?? e.identity ?? "—";
+}
+
+function EventRow({ e, onOpen }: { e: LedgerEvent; onOpen: (e: LedgerEvent) => void }) {
   const { t } = useTranslation();
   const style = EVENT_STYLE[e.type];
   const label = style ? t(style.labelKey) : e.type.toUpperCase();
+  const isAnomaly = e.type === "anomaly";
+  const p = e.payload;
+  // Localize the reason from the signed reasonCode (falls back to the English text on
+  // legacy events). Anomalies ALWAYS get a detail line so a red flag is never silent.
+  const reason = renderReason(p, t);
+  const amount = paymentSummary(p);
+  const badges = eventBadges(p);
+  const detail = reason ?? amount ?? (isAnomaly ? t("booth.evtNoReason") : null);
+  const showDetail = detail != null || badges.length > 0;
+
+  // The whole row is a button → opens the event-detail modal (full payload + the
+  // session's entry/exit snapshots). A grid keeps the time/label/identity/index
+  // columns aligned across rows; the detail line lives in its own row, indented to
+  // start under the identity column so it never collides with the ticket code.
   return (
-    <div className="flex items-center gap-3 border-b border-term-border/50 py-1 text-[12px] tabular-nums">
+    <button
+      type="button"
+      onClick={() => onOpen(e)}
+      className={`grid w-full grid-cols-[auto_5rem_1fr_auto] items-center gap-x-3 gap-y-0.5 border-b border-term-border/50 px-1 py-1 text-left text-[12px] tabular-nums hover:bg-term-panel-2 ${
+        isAnomaly ? "bg-term-red/5" : ""
+      }`}
+    >
       <span className="text-term-muted">{hhmmss(e.occurredAt)}</span>
-      <span className={`w-20 shrink-0 font-semibold ${style?.color ?? "text-term-text"}`}>{label}</span>
-      <span className="truncate text-term-text">{e.identity ?? "—"}</span>
-      <span className="ml-auto text-term-muted">#{e.index}</span>
+      <span className={`shrink-0 font-semibold ${style?.color ?? "text-term-text"}`}>{label}</span>
+      <span className="truncate text-term-text">{displayIdentity(e)}</span>
+      <span className="text-term-muted">#{e.index}</span>
+      {showDetail && (
+        <div className="col-start-3 col-end-5 flex flex-wrap items-center gap-x-2 gap-y-1">
+          {badges.map((k) => (
+            <span
+              key={k}
+              className="rounded-sm bg-term-red/15 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wide text-term-red"
+            >
+              {t(k)}
+            </span>
+          ))}
+          {detail && (
+            <span className={`text-[11px] ${isAnomaly ? "text-term-red/90" : "text-term-muted"}`}>{detail}</span>
+          )}
+        </div>
+      )}
+    </button>
+  );
+}
+
+/** One label/value line in the event-detail modal. */
+function DetailRow({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="grid grid-cols-[8rem_1fr] gap-3 border-b border-term-border/40 py-1.5 text-[12px]">
+      <span className="text-[11px] uppercase tracking-wider text-term-muted">{label}</span>
+      <span className="min-w-0 break-words text-term-text">{children}</span>
     </div>
   );
 }
 
+/** Full read-only detail for one ledger event: business fields + the human-readable
+ *  reason + the session's entry/exit snapshots, then the signed-chain provenance
+ *  (signature/prev-hash/key) for an audit trail. Read-only — the ledger is immutable;
+ *  this only DISPLAYS the signed record. */
+function EventDetailModal({ e, onClose }: { e: LedgerEvent; onClose: () => void }) {
+  const { t } = useTranslation();
+  const style = EVENT_STYLE[e.type];
+  const label = style ? t(style.labelKey) : e.type.toUpperCase();
+  const p = e.payload;
+  const reason = renderReason(p, t);
+  const amount = paymentSummary(p);
+  const badges = eventBadges(p);
+  const isAnomaly = e.type === "anomaly";
+
+  // Pretty money for any minor-unit amount in the payload.
+  const money =
+    p && typeof p.amountMinor === "number" && typeof p.currency === "string"
+      ? formatMoney(p.amountMinor, p.currency)
+      : null;
+  // Pull out the business fields worth a labelled row. Everything else (and the raw
+  // bytes) lives behind the audit disclosure — the operator sees a clean summary.
+  const sessionRef = typeof p?.sessionRef === "string" ? p.sessionRef : null;
+  const plate = typeof p?.plate === "string" ? p.plate : null;
+  const category = typeof p?.category === "string" ? p.category : null;
+  const operator = typeof p?.operator === "string" ? p.operator : null;
+  const tariffVersionId = typeof p?.tariffVersionId === "string" ? p.tariffVersionId : null;
+
+  return (
+    <Modal open onClose={onClose} title={t("booth.eventDetail")} width="max-w-2xl">
+      <div className="flex flex-col gap-3">
+        {/* Headline: the type + localized reason, prominent for anomalies. */}
+        <div className={`rounded-term border p-3 ${isAnomaly ? "border-term-red/50 bg-term-red/5" : "border-term-border bg-term-panel-2"}`}>
+          <div className={`text-sm font-bold uppercase tracking-widest ${style?.color ?? "text-term-text"}`}>{label}</div>
+          {(reason || money) && (
+            <div className={`mt-1 text-[13px] ${isAnomaly ? "text-term-red/90" : "text-term-text"}`}>
+              {reason ?? money}
+            </div>
+          )}
+          {!reason && !money && isAnomaly && (
+            <div className="mt-1 text-[13px] text-term-red/90">{t("booth.evtNoReason")}</div>
+          )}
+          {badges.length > 0 && (
+            <div className="mt-2 flex flex-wrap gap-1.5">
+              {badges.map((k) => (
+                <span
+                  key={k}
+                  className="rounded-sm bg-term-red/15 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wide text-term-red"
+                >
+                  {t(k)}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Humanized fields — labelled rows, not raw JSON. Only what applies renders. */}
+        <div>
+          <DetailRow label={t("booth.edTime")}>{new Date(e.occurredAt).toLocaleString()}</DetailRow>
+          <DetailRow label={t("booth.edIndex")}>#{e.index}</DetailRow>
+          {e.direction && <DetailRow label={t("booth.edDirection")}>{e.direction}</DetailRow>}
+          {e.source && <DetailRow label={t("booth.edSource")}>{e.source}</DetailRow>}
+          <DetailRow label={t("booth.edIdentity")}>{displayIdentity(e)}</DetailRow>
+          {/* When we showed a subscriber NAME above, also expose the raw occurrence id
+              (the SUBSESS-… session key) for traceability against the ledger. */}
+          {e.subscriberLabel && e.identity && (
+            <DetailRow label={t("booth.edOccurrence")}>
+              <code className="text-[11px] text-term-muted">{e.identity}</code>
+            </DetailRow>
+          )}
+          {money && (
+            <DetailRow label={t("booth.edAmount")}>
+              <span className="text-term-cyan">{money}</span>
+            </DetailRow>
+          )}
+          {typeof p?.tender === "string" && <DetailRow label={t("booth.edTender")}>{p.tender}</DetailRow>}
+          {category && <DetailRow label={t("booth.edCategory")}>{category}</DetailRow>}
+          {plate && <DetailRow label={t("booth.edPlate")}>{plate}</DetailRow>}
+          {operator && <DetailRow label={t("booth.edOperator")}>{operator}</DetailRow>}
+          {sessionRef && sessionRef !== e.identity && (
+            <DetailRow label={t("booth.edSession")}>{sessionRef}</DetailRow>
+          )}
+          {tariffVersionId && (
+            <DetailRow label={t("booth.edTariffVersion")}>
+              <code className="text-[11px] text-term-muted">{tariffVersionId}</code>
+            </DetailRow>
+          )}
+        </div>
+
+        {/* The entry/exit evidence images for this session's identity. */}
+        {e.identity && (
+          <div>
+            <div className="mb-1.5 text-[11px] uppercase tracking-wider text-term-muted">{t("booth.edSnapshots")}</div>
+            <SnapshotStrip identity={e.identity} />
+          </div>
+        )}
+
+        {/* Audit data — collapsed by default. The signed-chain provenance (signature,
+            key, prev-hash) and the raw payload are an auditor's concern, not the
+            operator's; tucking them behind a disclosure keeps the common view clean
+            while preserving the tamper-evidence trail on demand. */}
+        <details className="rounded-term border border-term-border bg-term-panel-2">
+          <summary className="cursor-pointer select-none px-3 py-2 text-[11px] uppercase tracking-wider text-term-muted hover:text-term-text">
+            {t("booth.edAuditData")}
+          </summary>
+          <div className="border-t border-term-border px-3 pb-3 pt-1">
+            <DetailRow label={t("booth.edSignature")}>
+              <code className="break-all text-[11px] text-term-muted">{e.signature}</code>
+            </DetailRow>
+            <DetailRow label={t("booth.edKeyId")}>
+              <code className="text-[11px] text-term-muted">{e.keyId}</code>
+            </DetailRow>
+            <DetailRow label={t("booth.edPrevHash")}>
+              <code className="break-all text-[11px] text-term-muted">{e.prevHash ?? "—"}</code>
+            </DetailRow>
+            <div className="mb-1.5 mt-3 text-[11px] uppercase tracking-wider text-term-muted">
+              {t("booth.edRawPayload")}
+            </div>
+            {p && Object.keys(p).length > 0 ? (
+              <pre className="overflow-x-auto rounded-term border border-term-border bg-term-bg p-2 text-[11px] text-term-text">
+                {JSON.stringify(p, null, 2)}
+              </pre>
+            ) : (
+              <div className="text-[12px] text-term-muted">{t("booth.edNoPayload")}</div>
+            )}
+          </div>
+        </details>
+      </div>
+    </Modal>
+  );
+}
+
 /** Ticket entry: an HID barcode scanner types the id and presses Enter; a manual
  *  operator types it. Either way, submit opens the pay/exit modal for that id. The
  *  input auto-focuses and re-focuses after a scan so the scanner always lands here. */
@@ -138,6 +348,8 @@ export function BoothScreen() {
 
   // The ticket currently open in the pay/exit modal (null = no modal).
   const [activeTicket, setActiveTicket] = useState<string | null>(null);
+  // The ledger event open in the read-only detail modal (null = closed).
+  const [detailEvent, setDetailEvent] = useState<LedgerEvent | null>(null);
 
   // Live overlays from the WS store.
   const liveOcc = useLiveStore((s) => s.occupancy);
@@ -195,12 +407,13 @@ export function BoothScreen() {
           ) : events.length === 0 ? (
             <div className="text-term-muted">{eventsQuery.isLoading ? t("common.loading") : t("booth.noEventsYet")}</div>
           ) : (
-            events.map((e) => <EventRow key={e.id} e={e} />)
+            events.map((e) => <EventRow key={e.id} e={e} onOpen={setDetailEvent} />)
           )}
         </div>
       </Panel>
 
       {activeTicket && <BoothPayModal identity={activeTicket} onClose={() => setActiveTicket(null)} />}
+      {detailEvent && <EventDetailModal e={detailEvent} onClose={() => setDetailEvent(null)} />}
     </div>
   );
 }