learning_ai_common_plat/packages/ai-ui/src/PrivacyBadge.tsx

import type { CSSProperties } from 'react';

export type PrivacyMode = 'on-device' | 'cloud' | 'hybrid' | 'unknown';

export interface PrivacyBadgeProps {
  /** Where does the inference actually run? */
  mode: PrivacyMode;
  /** Short label override (default: 'On device' / 'Cloud' / …). */
  label?: string;
  /**
   * Optional one-line attribution — e.g. provider/model id, or the
   * device name. Rendered as a smaller secondary string.
   */
  detail?: string;
  /** Render with only the dot — no text. Default false. */
  iconOnly?: boolean;
  className?: string;
  style?: CSSProperties;
}

const TINTS: Record<
  PrivacyMode,
  { bg: string; fg: string; ring: string; dot: string; label: string; icon: string }
> = {
  'on-device': {
    bg: 'color-mix(in srgb, var(--bl-success, #10b981) 12%, transparent)',
    fg: 'var(--bl-success, #047857)',
    ring: 'color-mix(in srgb, var(--bl-success, #10b981) 35%, transparent)',
    dot: 'var(--bl-success, #10b981)',
    label: 'On device',
    icon: '📴',
  },
  cloud: {
    bg: 'color-mix(in srgb, var(--bl-info, #0ea5e9) 12%, transparent)',
    fg: 'var(--bl-info, #075985)',
    ring: 'color-mix(in srgb, var(--bl-info, #0ea5e9) 35%, transparent)',
    dot: 'var(--bl-info, #0ea5e9)',
    label: 'Cloud',
    icon: '☁️',
  },
  hybrid: {
    bg: 'color-mix(in srgb, var(--bl-accent, #6366f1) 12%, transparent)',
    fg: 'var(--bl-accent, #4338ca)',
    ring: 'color-mix(in srgb, var(--bl-accent, #6366f1) 35%, transparent)',
    dot: 'var(--bl-accent, #6366f1)',
    label: 'Hybrid',
    icon: '🔀',
  },
  unknown: {
    bg: 'var(--bl-surface-muted, rgba(0,0,0,0.05))',
    fg: 'var(--bl-text-secondary, #555)',
    ring: 'var(--bl-border, rgba(0,0,0,0.12))',
    dot: 'var(--bl-text-tertiary, #999)',
    label: 'Unknown',
    icon: '❓',
  },
};

/**
 * `<PrivacyBadge>` — honest indicator of where AI inference happens.
 *
 * Trust surface (Wave 13.C.6). Every chat / agent UI should make
 * privacy state visible to the user — never hidden in settings.
 *
 *   - `on-device` — fully local (e.g. WebLLM, ollama, Apple Intelligence)
 *   - `cloud`     — server-side (OpenAI, Anthropic, your own infra)
 *   - `hybrid`    — routing decides per-request (router/llm-router)
 *   - `unknown`   — host can't determine; render rather than hide
 */
export function PrivacyBadge({
  mode,
  label,
  detail,
  iconOnly = false,
  className,
  style,
}: PrivacyBadgeProps) {
  const tint = TINTS[mode] ?? TINTS.unknown;
  const text = label ?? tint.label;

  return (
    <span
      role="status"
      data-testid="bl-privacy-badge"
      data-mode={mode}
      aria-label={`Privacy mode: ${text}${detail ? ` (${detail})` : ''}`}
      className={className}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: iconOnly ? 0 : 6,
        padding: iconOnly ? '4px' : '2px 8px',
        borderRadius: 999,
        backgroundColor: tint.bg,
        border: `1px solid ${tint.ring}`,
        color: tint.fg,
        fontSize: 11,
        fontWeight: 600,
        letterSpacing: 0.2,
        textTransform: 'uppercase',
        ...style,
      }}
    >
      <span
        aria-hidden="true"
        style={{
          display: 'inline-block',
          width: 6,
          height: 6,
          borderRadius: 999,
          backgroundColor: tint.dot,
        }}
      />
      {!iconOnly && (
        <>
          <span>{text}</span>
          {detail && (
            <span style={{ opacity: 0.7, fontWeight: 400, textTransform: 'none' }}>
              · {detail}
            </span>
          )}
        </>
      )}
    </span>
  );
}