server-26/drb-frontend/components/ui/MachineOutputNotice.tsx

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";
const SHORT_BODY = "automated output, may contain errors.";

/**
 * The short notice as plain text, for surfaces that cannot render this
 * component — e.g. a browser notification body (server-26#238). Same copy
 * rules as above; it is the "popup"/"inline" wording verbatim.
 */
export const MACHINE_OUTPUT_NOTICE_TEXT = `${LEAD} — ${SHORT_BODY}`;

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 ?? SHORT_BODY;

  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>
  );
}