frontend: label machine-generated output and unbuilt entitlements (Gate A)

Gate A (BUSINESS_MODEL.md, board minutes #42, dated to today by minutes #79
decision 14) blocks putting a price or an unbuilt entitlement claim on a
surface a reader can see, and requires that unverified machine assertions be
labelled as such on the same screen as the assertion.

The pricing leg was already met — /pricing and both homepage CTAs stopped
quoting the invented catalog. Condition A2 was not: a search of the whole
frontend for a "machine-generated" or "unverified" qualifier returned zero
hits. Every transcript, summary, title, location, unit list and vehicle list
is pipeline output that no human reviews, and entity-name accuracy in those
transcripts has never been measured (server-26#48) — yet all of it was
rendered to the reader as plain fact. Unqualified machine assertions about
real incidents and real people is the exposure Gate A exists to stop.

A2 — one reusable element, components/ui/MachineOutputNotice.tsx, rendered on
the same screen as the output (a footnote elsewhere does not satisfy A1's
"same screen" standard). Three variants for three shapes of surface, all
saying the same thing; the "popup" variant uses fixed grays because a Leaflet
popup is stock-white in both themes. Covered:

  - incident detail: under the summary (covers summary, title, location,
    units on scene/cleared, vehicles, tags) and above the call spine
  - incident list: above the timeline groups
  - Archive (/calls): above the transcript rows
  - node detail: above the Recent Calls table
  - Watch//alerts: above the events table, whose Snippet column is transcript
    text and whose keyword match was made against it
  - Live map: the desktop incident rail, pinned above the scroll area so it
    cannot be scrolled off the screen it qualifies; the mobile drawer; the
    incident marker popup; the incident-path stop popup
  - /systems: the source-call transcript preview
  - /features: the two marketing sections that describe the AI pipeline

A1 — components/ui/UnbuiltMarker.tsx marks a claim unbuilt inline:

  - /faq: the retention answer promised 7/90/365-day windows. There is no TTL
    and no deletion sweep anywhere in the product (server-26#44), so the
    answer now states plainly that nothing is deleted automatically and marks
    per-plan retention as not yet available.
  - /settings/billing: the plan cards' claims — custom retention, SSO/SAML,
    uptime SLA, data residency — are marked not-yet-available next to the plan
    that makes them.

Labelling only. No retention, SSO, SLA or residency was built; no billing,
Stripe or checkout code was touched (Gate B still bars charging anyone); no
price was added anywhere; no Python was touched. Both themes verified against
the light-mode !important overrides in globals.css, which are untouched.

tsc --noEmit clean.

Refs: server-26#46, server-26#44, server-26#48

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

drb-frontend/components/MapView.tsx

@@ -14,6 +14,7 @@ import {
 import L from "leaflet";
 import type { CallRecord, IncidentRecord, NodeRecord, NodeStatus } from "@/lib/types";
 import { isKnownSeverity, SEVERITY_COLORS, SEVERITY_LABEL, type Severity } from "@/lib/severity";
+import { MachineOutputNotice } from "@/components/ui/MachineOutputNotice";
 
 // ── Leaflet icon fix ──────────────────────────────────────────────────────────
 delete (L.Icon.Default.prototype as unknown as Record<string, unknown>)._getIconUrl;
@@ -351,6 +352,8 @@ function FanIncidentLayer({
                     </div>
                   );
                 })}
+                {/* Gate A / A2 (server-26#46) — same screen as the output. */}
+                <MachineOutputNotice variant="popup" />
               </div>
             </Popup>
           </Marker>
@@ -402,6 +405,9 @@ function IncidentPathLayer({
                     <a href={`/incidents/${inc.incident_id}`} className="text-xs text-blue-600 hover:underline block mt-1">
                       View incident →
                     </a>
+                    {/* Gate A / A2 (server-26#46) — the stop location and its
+                        ordering come from the transcript, not from GPS. */}
+                    <MachineOutputNotice variant="popup" />
                   </div>
                 </Popup>
               </Marker>
@@ -657,7 +663,14 @@ export default function MapView({ nodes, activeCalls, incidents = [], calls = []
       {incidents.length > 0 && (
         <>
           {/* Desktop: left sidebar — starts below zoom controls + fit-all button */}
-          <div className="absolute top-[8rem] left-3 bottom-[4.5rem] z-[1001] hidden md:flex flex-col w-56 gap-1.5 overflow-y-auto">
+          <div className="absolute top-[8rem] left-3 bottom-[4.5rem] z-[1001] hidden md:flex flex-col w-56 gap-1.5">
+            {/* Gate A / A2 (server-26#46) — the rail's titles, locations and
+                unit counts are pipeline output. Pinned above the scroll area
+                so it cannot be scrolled off the screen it qualifies. */}
+            <div className="bg-surface/90 backdrop-blur-sm border border-line rounded-lg px-2 py-1.5 shrink-0">
+              <MachineOutputNotice variant="inline" className="text-[10px] leading-snug items-start" />
+            </div>
+            <div className="flex flex-col gap-1.5 overflow-y-auto">
             {incidents.map((inc) => {
               const color = severityColor(inc.severity);
               const age = inc.started_at ? timeAgo(new Date(inc.started_at)) : null;
@@ -711,6 +724,7 @@ export default function MapView({ nodes, activeCalls, incidents = [], calls = []
                 </a>
               );
             })}
+            </div>
           </div>
 
           {/* Mobile: bottom drawer */}
@@ -724,6 +738,8 @@ export default function MapView({ nodes, activeCalls, incidents = [], calls = []
             </button>
             {drawerOpen && (
               <div className="bg-surface/95 border-t border-line max-h-52 overflow-y-auto px-3 py-2 space-y-1.5">
+                {/* Gate A / A2 (server-26#46) */}
+                <MachineOutputNotice variant="inline" className="text-[10px] items-start" />
                 {incidents.map((inc) => {
                   const color = severityColor(inc.severity);
                   const label = (

drb-frontend/components/ui/MachineOutputNotice.tsx

@@ -0,0 +1,112 @@
+import type { ReactNode } from "react";
+
+/**
+ * Gate A, condition A2 (board minutes #42 / #79, tracked at server-26#46).
+ *
+ * Transcripts, incident summaries, titles, locations and extracted entities are
+ * all produced by the AI pipeline (transcription -> scene/entity extraction ->
+ * correlation -> summary). None of it is reviewed by a human before a reader
+ * sees it, and entity-name accuracy has never been measured (server-26#48).
+ *
+ * Gate A therefore requires that machine-generated content is labelled as
+ * machine-generated and unverified ON THE SAME SCREEN as the content itself —
+ * a note on another page does not satisfy the condition. This is the single
+ * element that does that; render it beside every AI-derived surface.
+ *
+ * Copy rules (do not "improve" these away):
+ *   - the words "machine-generated" and "unverified" must both appear
+ *   - it must not promise accuracy
+ *   - it must not name a model or a vendor
+ *   - it must not state or imply a price
+ *
+ * Variants exist only because the surfaces differ in space, not because the
+ * claim differs. All three say the same thing.
+ *   block  — full-width strip above/below a body of AI output (default)
+ *   inline — one compact line, for dense list headers and table captions
+ *   popup  — for a Leaflet popup, which is stock-white in BOTH themes, so it
+ *            uses fixed grays instead of the ink/surface tokens
+ */
+
+type Variant = "block" | "inline" | "popup";
+
+function InfoGlyph({ className }: { className?: string }) {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      aria-hidden="true"
+      className={className}
+    >
+      <circle cx="8" cy="8" r="6.5" />
+      <path d="M8 7.25v4" />
+      <path d="M8 4.75h.01" />
+    </svg>
+  );
+}
+
+const LEAD = "Machine-generated and unverified";
+
+interface Props {
+  variant?: Variant;
+  /** Overrides the trailing sentence. The lead ("Machine-generated and unverified") is fixed. */
+  detail?: ReactNode;
+  className?: string;
+}
+
+export function MachineOutputNotice({ variant = "block", detail, className }: Props) {
+  const body =
+    detail ??
+    "transcripts, summaries and extracted details are automated output and may contain errors. Check the recording before acting on them.";
+  const shortBody = detail ?? "automated output, may contain errors.";
+
+  if (variant === "popup") {
+    // Leaflet popups render on a white wrapper regardless of theme, so this
+    // deliberately does not use the ink/surface tokens.
+    return (
+      <p
+        role="note"
+        className={["text-[10px] leading-snug text-gray-500 mt-1.5 pt-1.5 border-t border-gray-200", className ?? ""]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        {LEAD} — {shortBody}
+      </p>
+    );
+  }
+
+  if (variant === "inline") {
+    return (
+      <p
+        role="note"
+        className={["flex items-center gap-1.5 text-xs text-ink-muted", className ?? ""].filter(Boolean).join(" ")}
+      >
+        <InfoGlyph className="shrink-0" />
+        <span>
+          <span className="text-ink-2 font-medium">{LEAD}</span> — {shortBody}
+        </span>
+      </p>
+    );
+  }
+
+  return (
+    <div
+      role="note"
+      className={[
+        "flex items-start gap-2 rounded-lg border border-line bg-raised/60 px-3 py-2",
+        className ?? "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <InfoGlyph className="mt-0.5 shrink-0 text-ink-muted" />
+      <p className="text-xs leading-relaxed text-ink-muted">
+        <span className="text-ink-2 font-medium">{LEAD}</span> — {body}
+      </p>
+    </div>
+  );
+}

drb-frontend/components/ui/UnbuiltMarker.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+
+/**
+ * Gate A, condition A1 (board minutes #42, tracked at server-26#46).
+ *
+ * Gate A blocks putting an unbuilt entitlement claim in front of a reader
+ * without saying, inline and on the same screen, that it is not built. Known
+ * unbuilt claims today:
+ *   - retention windows (7 / 90 / 365 days) — no TTL and no deletion sweep
+ *     exists anywhere in the product (server-26#44, DEFERRED.md)
+ *   - Enterprise SSO / SAML — no backend at all
+ *   - uptime SLA — none offered or measured
+ *   - custom data residency — no backend at all
+ *
+ * This marks the claim. It does NOT build the feature, and nothing here may
+ * grow into a price or a checkout path (Gate B still bars charging anyone).
+ */
+export function UnbuiltMarker({
+  children = "Not yet available",
+  className,
+}: {
+  children?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <span
+      className={[
+        "inline-flex items-center whitespace-nowrap rounded-full border border-line-strong",
+        "px-1.5 py-0.5 align-middle text-[10px] font-medium uppercase tracking-wide text-ink-muted",
+        className ?? "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {children}
+    </span>
+  );
+}