@lotics/ui 4.4.0 → 4.6.0

package/src/date_range_filter_field.tsx

@@ -7,6 +7,7 @@ import { Button } from "./button";
 import { PressableHighlight } from "./pressable_highlight";
 import { Popover, PopoverTrigger, PopoverContent, PopoverFooter } from "./popover";
 import { DateFilter, DateFilterValue, DateFilterLabels } from "./date_filter";
+import { formatDate } from "./format_date";
 
 // =============================================================================
 // DateRangeFilterField — the common filter composition over DateFilter:
@@ -33,7 +34,8 @@ export interface DateRangeFilterFieldProps {
   includeTime?: boolean;
   /** Translated labels (presets + footer + placeholder). Defaults to English. */
   labels?: Partial<DateRangeFilterFieldLabels>;
-  /** BCP-47 locale for the calendar + trigger date display. Defaults to "en-US". */
+  /** BCP-47 locale for the calendar + trigger date display. Date display defaults to
+   *  the kit's home market (vi-VN, via `formatDate`) when unset. */
   locale?: string;
   testID?: string;
 }
@@ -43,17 +45,18 @@ const EMPTY_VALUE: DateFilterValue = {
   end: { date: null, time: null },
 };
 
-function formatDate(date: Date | null, locale: string | undefined): string {
+/**
+ * A bound's date + its separate "HH:mm" time → one localized string via the kit's
+ * canonical `formatDate` (time-first "HH:mm dd/MM/yyyy"). Date-only when there is no
+ * time; "" when there is no date.
+ */
+function formatBound(date: Date | null, time: string | null, locale: string | undefined): string {
   if (!date) return "";
-  try {
-    return new Intl.DateTimeFormat(locale, {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-    }).format(date);
-  } catch {
-    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
-  }
+  const m = time ? /^(\d{1,2}):(\d{2})/.exec(time) : null;
+  if (!m) return formatDate(date, { locale });
+  const dt = new Date(date);
+  dt.setHours(Number(m[1]), Number(m[2]), 0, 0);
+  return formatDate(dt, { time: true, locale });
 }
 
 /**
@@ -64,21 +67,14 @@ function formatDate(date: Date | null, locale: string | undefined): string {
  * period rhythm, not date pairs.
  */
 function formatRangeDisplay(start: Date, end: Date, locale: string | undefined): string {
-  if (start.toDateString() === end.toDateString()) return formatDate(start, locale);
+  if (start.toDateString() === end.toDateString()) return formatDate(start, { locale });
 
   const wholeMonth =
     start.getDate() === 1 &&
     start.getMonth() === end.getMonth() &&
     start.getFullYear() === end.getFullYear() &&
     end.getDate() === new Date(end.getFullYear(), end.getMonth() + 1, 0).getDate();
-  if (wholeMonth) {
-    try {
-      const label = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(start);
-      return label.charAt(0).toUpperCase() + label.slice(1);
-    } catch {
-      return `${start.getMonth() + 1}/${start.getFullYear()}`;
-    }
-  }
+  if (wholeMonth) return formatDate(start, { format: "monthYear", locale });
 
   const wholeYear =
     start.getFullYear() === end.getFullYear() &&
@@ -88,7 +84,27 @@ function formatRangeDisplay(start: Date, end: Date, locale: string | undefined):
     end.getDate() === 31;
   if (wholeYear) return String(start.getFullYear());
 
-  return `${formatDate(start, locale)} – ${formatDate(end, locale)}`;
+  return `${formatDate(start, { locale })} – ${formatDate(end, { locale })}`;
+}
+
+/**
+ * The trigger text. An untimed range folds to a compact period (month / year /
+ * day) via `formatRangeDisplay`. Once a time is set (and `includeTime`) a timed
+ * window isn't a clean period, so it shows "time date – time date". "" when there
+ * is no value (caller shows the placeholder).
+ */
+function formatTrigger(value: DateFilterValue, includeTime: boolean, locale: string | undefined): string {
+  const { start, end } = value;
+  const sTime = includeTime ? start.time : null;
+  const eTime = includeTime ? end.time : null;
+
+  if (start.date && end.date && !sTime && !eTime) {
+    return formatRangeDisplay(start.date, end.date, locale);
+  }
+  if (start.date || end.date) {
+    return `${formatBound(start.date, sTime, locale)} – ${formatBound(end.date, eTime, locale)}`;
+  }
+  return "";
 }
 
 export function DateRangeFilterField(props: DateRangeFilterFieldProps) {
@@ -97,12 +113,7 @@ export function DateRangeFilterField(props: DateRangeFilterFieldProps) {
   const [open, setOpen] = useState(false);
 
   const hasValue = Boolean(value.start.date || value.end.date);
-  const display =
-    value.start.date && value.end.date
-      ? formatRangeDisplay(value.start.date, value.end.date, locale)
-      : hasValue
-        ? `${formatDate(value.start.date, locale)} – ${formatDate(value.end.date, locale)}`
-        : labels.placeholder;
+  const display = formatTrigger(value, Boolean(includeTime), locale) || labels.placeholder;
 
   return (
     <Popover open={open} onOpenChange={setOpen} side="bottom" align="start">

package/src/discrepancy.tsx

@@ -0,0 +1,114 @@
+import { StyleSheet, View } from "react-native";
+import { colors, solid } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { CardSelectItem } from "./card_select_item";
+
+export interface DiscrepancyValue {
+  /** Where this value came from — the document / record / system of record. */
+  source: string;
+  value: string;
+  /** The agent's recommended truth among the conflicting values. */
+  recommended?: boolean;
+}
+
+export interface DiscrepancyProps {
+  /** The field that disagrees across sources. */
+  field: string;
+  /** The agent's explanation of the conflict — shown above the options so the
+   *  human reads WHY before picking. */
+  note?: string;
+  values: DiscrepancyValue[];
+  /** Resolve the conflict by picking a value (index into `values`) — pressing a
+   *  card commits it; there is no separate confirm button. */
+  onResolve?: (index: number) => void;
+  /** Send for manual handling instead of picking. */
+  onFlag?: () => void;
+  /** Resolved → the chosen index settles the card. */
+  resolvedIndex?: number;
+  flagged?: boolean;
+}
+
+/**
+ * A field whose value DISAGREES across sources — the unit of an AI cross-check
+ * / audit. The agent's explanation sits up top; below it the conflicting values
+ * are identical selectable cards (the global press/hover ring), the one the
+ * agent believes carrying a neutral "Agent's pick" tag — NOT a pre-selected
+ * highlight. Pressing a card resolves the conflict to it — no confirm step.
+ * Symmetric, unlike `ChangeReview`'s before→after.
+ */
+export function Discrepancy(props: DiscrepancyProps) {
+  const { field, values, note, onResolve, onFlag, resolvedIndex, flagged } = props;
+  const resolved = resolvedIndex != null || flagged === true;
+
+  return (
+    <View style={[styles.card, resolved ? styles.resolved : null]}>
+      <Text size="sm" weight="semibold" numberOfLines={1}>
+        {field}
+      </Text>
+
+      {resolved ? (
+        <View style={styles.outcome}>
+          <Icon name={flagged ? "triangle-alert" : "circle-check"} size={15} color={flagged ? solid("amber") : solid("emerald")} />
+          <Text size="sm" color="muted">
+            {flagged
+              ? "Flagged for manual review"
+              : `Resolved to ${values[resolvedIndex as number].source} — ${values[resolvedIndex as number].value}`}
+          </Text>
+        </View>
+      ) : (
+        <>
+          {note ? (
+            <Text size="sm" color="muted">
+              {note}
+            </Text>
+          ) : null}
+
+          <View style={styles.values}>
+            {values.map((v, i) => (
+              <CardSelectItem
+                key={`${v.source}-${i}`}
+                accessibilityLabel={`Resolve ${field} to ${v.source}: ${v.value}`}
+                onPress={() => onResolve?.(i)}
+                style={styles.valueBox}
+              >
+                <Text size="sm" color="muted" numberOfLines={1} style={{ flexShrink: 1 }}>
+                  {v.source}
+                </Text>
+                <View style={{ flex: 1 }} />
+                {v.recommended ? <Badge label="Agent's pick" /> : null}
+                <Text size="md" weight="semibold" tabular>
+                  {v.value}
+                </Text>
+              </CardSelectItem>
+            ))}
+          </View>
+
+          {onFlag ? (
+            <View style={styles.footer}>
+              <Button title="Flag for review" color="muted" shape="rounded" onPress={onFlag} />
+            </View>
+          ) : null}
+        </>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    padding: 16,
+    gap: 12,
+  },
+  resolved: { backgroundColor: colors.zinc[50] },
+  outcome: { flexDirection: "row", alignItems: "center", gap: 8 },
+  values: { gap: 8 },
+  valueBox: { flexDirection: "row", alignItems: "center", gap: 12, paddingVertical: 12, paddingHorizontal: 14 },
+  footer: { flexDirection: "row", justifyContent: "flex-end" },
+});

package/src/finding.tsx

@@ -0,0 +1,104 @@
+import { StyleSheet, View } from "react-native";
+import { colors, solid, type ColorName } from "./colors";
+import { Text } from "./text";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Sources, type SourceRef } from "./sources";
+
+export type FindingSeverity = "critical" | "warning" | "info" | "positive";
+
+export interface FindingProps {
+  severity?: FindingSeverity;
+  /** The headline — what the agent found. */
+  title: string;
+  /** One or two lines explaining it. */
+  detail?: string;
+  /** A headline figure tied to the finding (a value, a delta, a count), shown in
+   *  the header row in the severity colour. */
+  metric?: string;
+  /** A short caption beside the metric giving it context ("exposure", "overdue",
+   *  "vs target"). */
+  metricCaption?: string;
+  /** Provenance — the records / documents the finding rests on. */
+  sources?: SourceRef[];
+  onOpenSource?: (s: SourceRef) => void;
+  /** The single action the finding suggests. */
+  action?: { label: string; onPress: () => void };
+}
+
+// Severity reads through a coloured dot badge + the order it's stacked in (most
+// severe first): red critical, amber warning, blue note, emerald on-track. The
+// metric takes the same colour.
+const SEV: Record<FindingSeverity, { word: string; color: ColorName }> = {
+  critical: { word: "Critical", color: "red" },
+  warning: { word: "Warning", color: "amber" },
+  info: { word: "Note", color: "blue" },
+  positive: { word: "On track", color: "emerald" },
+};
+
+/**
+ * One ranked insight from an AI briefing / audit / anomaly scan — a severity dot
+ * badge and a headline figure share the top row, the headline + explanation read
+ * below, then provenance and the single action it suggests. Severity reads
+ * through the coloured badge + metric and the stacking order (most severe first).
+ * Unlike `Callout` (a flat inline status), a Finding is ranked, sourced, and
+ * carries its own next action.
+ */
+export function Finding(props: FindingProps) {
+  const sev = SEV[props.severity ?? "info"];
+  return (
+    <View style={styles.card}>
+      <View style={styles.header}>
+        <Badge variant="dot" color={sev.color} label={sev.word} />
+        <View style={{ flex: 1 }} />
+        {props.metric ? (
+          <View style={styles.metric}>
+            <Text size="lg" weight="semibold" tabular style={{ color: solid(sev.color), letterSpacing: -0.3 }}>
+              {props.metric}
+            </Text>
+            {props.metricCaption ? (
+              <Text size="xs" color="muted">
+                {props.metricCaption}
+              </Text>
+            ) : null}
+          </View>
+        ) : null}
+      </View>
+
+      <View style={styles.body}>
+        <Text size="md" weight="semibold" numberOfLines={2}>
+          {props.title}
+        </Text>
+        {props.detail ? (
+          <Text size="sm" color="muted">
+            {props.detail}
+          </Text>
+        ) : null}
+      </View>
+
+      {props.sources && props.sources.length > 0 ? (
+        <Sources sources={props.sources} onOpen={props.onOpenSource} />
+      ) : null}
+      {props.action ? (
+        <View style={styles.actionRow}>
+          <Button title={props.action.label} color="secondary" shape="rounded" onPress={props.action.onPress} />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    padding: 16,
+    gap: 12,
+  },
+  header: { flexDirection: "row", alignItems: "center", gap: 12 },
+  metric: { flexDirection: "row", alignItems: "baseline", gap: 5 },
+  body: { gap: 6 },
+  actionRow: { flexDirection: "row", justifyContent: "flex-end" },
+});

package/src/format_date.test.ts

@@ -14,12 +14,40 @@ describe("formatDate", () => {
     expect(formatDate("2026-05-22", { locale: "vi-VN", compact: true })).toBe("22/05");
   });
 
-  test("datetime includes 24h time", () => {
-    expect(formatDate("2026-05-22T14:30", { locale: "vi-VN", format: "datetime" })).toBe("22/05/2026 14:30");
+  test("time prepends the 24h time, then the locale date", () => {
+    expect(formatDate("2026-05-22T14:30", { locale: "vi-VN", time: true })).toBe("14:30 22/05/2026");
   });
 
-  test("compact datetime drops the year, keeps the time", () => {
-    expect(formatDate("2026-05-22T09:05", { locale: "vi-VN", format: "datetime", compact: true })).toBe("22/05 09:05");
+  test("time + compact is time-first and drops the year", () => {
+    expect(formatDate("2026-05-22T09:05", { locale: "vi-VN", time: true, compact: true })).toBe("09:05 22/05");
+  });
+
+  test("time composes with a readable style — the orthogonal axis", () => {
+    expect(formatDate("2026-09-22T14:30", { format: "long", time: true, locale: "en-US" })).toBe("14:30 September 22, 2026");
+  });
+
+  test("medium — readable, abbreviated month", () => {
+    expect(formatDate("2026-05-22", { format: "medium", locale: "en-US" })).toBe("May 22, 2026");
+    // vi word output is ICU-dependent; assert the day + year are present (day-first locale).
+    expect(formatDate("2026-05-22", { format: "medium", locale: "vi-VN" })).toMatch(/22.*2026/);
+  });
+
+  test("long — readable, full month name", () => {
+    expect(formatDate("2026-09-22", { format: "long", locale: "en-US" })).toBe("September 22, 2026");
+    expect(formatDate("2026-09-22", { format: "long", locale: "vi-VN" })).toMatch(/22.*2026/);
+  });
+
+  test("dayMonth — day + abbreviated month, no year", () => {
+    expect(formatDate("2026-09-22", { format: "dayMonth", locale: "en-US" })).toBe("Sep 22");
+    expect(formatDate("2026-09-22", { format: "dayMonth", locale: "vi-VN" })).not.toMatch(/2026/);
+  });
+
+  test("monthYear — a period label, sentence-cased", () => {
+    expect(formatDate("2026-05-22", { format: "monthYear", locale: "en-US" })).toBe("May 2026");
+    // Leading character is upper-cased even where the locale lowercases the month name.
+    const vi = formatDate("2026-05-22", { format: "monthYear", locale: "vi-VN" });
+    expect(vi.charAt(0)).toBe(vi.charAt(0).toUpperCase());
+    expect(vi).toMatch(/2026/);
   });
 
   test("date-only ISO does not drift across local timezone (wall-clock parse)", () => {

package/src/format_date.ts

@@ -1,16 +1,36 @@
-export type DateFormatStyle = "date" | "datetime";
+/**
+ * The date STYLE — orthogonal to time (pass `time: true` to prepend a 24h time to any of these).
+ * `date` reassembles dd/MM with a stable "/"; the readable styles use word months in locale order.
+ * NOT for a component's own internal chrome — a calendar's header / weekday / a11y labels, a gantt
+ * axis — which render their own internally-consistent label set with `Intl` directly.
+ */
+export type DateFormatStyle =
+  | "date" // 22/05/2026 — numeric
+  | "medium" // 22 thg 5, 2026 / Sep 22, 2026 — readable, abbreviated month
+  | "long" // 22 tháng 5, 2026 / September 22, 2026 — readable, full month
+  | "dayMonth" // 22 thg 5 / Sep 22 — day + abbreviated month, no year
+  | "monthYear"; // Tháng 5 2026 / May 2026 — a period label (sentence-cased)
 
 export interface FormatDateOptions {
-  /** "date" → 22/05/2026 · "datetime" → 22/05/2026 14:30. Default "date". */
+  /** The date style. Default "date". */
   format?: DateFormatStyle;
+  /** Prepend the 24h time — "14:30 <date>". Composes with ANY `format`. Default false. */
+  time?: boolean;
   /** BCP-47 locale. Defaults to the product's home market, "vi-VN". */
   locale?: string;
-  /** Drop the year — "22/05" instead of "22/05/2026" — for dense rows / timelines. */
+  /** Drop the year ("22/05") on the numeric `date` style. */
   compact?: boolean;
   /** Rendered for null / empty / unparseable input. Default "". */
   emptyLabel?: string;
 }
 
+const READABLE_OPTS: Record<"medium" | "long" | "dayMonth" | "monthYear", Intl.DateTimeFormatOptions> = {
+  medium: { day: "numeric", month: "short", year: "numeric" },
+  long: { day: "numeric", month: "long", year: "numeric" },
+  dayMonth: { day: "numeric", month: "short" },
+  monthYear: { month: "long", year: "numeric" },
+};
+
 const ISO_DATE_TIME = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?$/;
 
 const pad2 = (n: number) => String(n).padStart(2, "0");
@@ -43,29 +63,47 @@ export function toISODate(value: Date | string | null | undefined): string {
 }
 
 /**
- * THE date formatter — the date sibling of `formatMoney`. Accepts a `Date` OR an ISO string and
- * returns a localized display string; defaults to the home market: `22/05/2026` (date) /
- * `22/05/2026 14:30` (datetime). `compact` drops the year for dense rows (`22/05`). Never
- * hand-roll dd/MM with `padStart` / `getMonth` — call this.
+ * THE date-value formatter — the date sibling of `formatMoney`. Accepts a `Date` OR an ISO string
+ * and returns a localized display string; defaults to the home market. `format` picks the date
+ * style: `date` → `22/05/2026` · `medium` → `22 thg 5, 2026` · `long` → `22 tháng 5, 2026` ·
+ * `dayMonth` → `22 thg 5` · `monthYear` → `Tháng 5 2026`. **`time: true` prepends the 24h time to
+ * ANY style** — `14:30 22/05/2026`, `14:30 22 tháng 5, 2026` (time-first). `compact` drops the
+ * year on the numeric `date` style. Never hand-roll a date with `padStart` / `getMonth` / a raw
+ * `Intl.DateTimeFormat` for VALUE display — call this. (Component-internal chrome is exempt — see
+ * {@link DateFormatStyle}.)
  */
 export function formatDate(value: Date | string | null | undefined, options: FormatDateOptions = {}): string {
-  const { format = "date", locale = "vi-VN", compact = false, emptyLabel = "" } = options;
+  const { format = "date", time = false, locale = "vi-VN", compact = false, emptyLabel = "" } = options;
   const date = parseDate(value);
   if (!date) return emptyLabel;
-  // Use Intl only for the locale-aware part ORDER (dd/MM for vi-VN, MM/dd for en-US), then
-  // reassemble with a consistent "/" — Intl's own separator is inconsistent across CLDR (vi-VN
-  // uses "/" with a year but "-" without). The time is appended as a stable 24h " HH:mm" (no
-  // locale comma, no AM/PM), matching the compact data convention.
-  let parts: Intl.DateTimeFormatPart[];
-  try {
-    parts = new Intl.DateTimeFormat(locale, { day: "2-digit", month: "2-digit", year: "numeric" }).formatToParts(date);
-  } catch {
-    return emptyLabel;
+
+  let dateStr: string;
+  if (format === "date") {
+    // Numeric: Intl only for the locale-aware part ORDER (dd/MM for vi-VN, MM/dd for en-US), then
+    // reassemble with a consistent "/" — Intl's own separator is inconsistent across CLDR (vi-VN
+    // uses "/" with a year but "-" without). `compact` drops the year.
+    let parts: Intl.DateTimeFormatPart[];
+    try {
+      parts = new Intl.DateTimeFormat(locale, { day: "2-digit", month: "2-digit", year: "numeric" }).formatToParts(date);
+    } catch {
+      return emptyLabel;
+    }
+    dateStr = parts
+      .filter((p) => p.type === "day" || p.type === "month" || (!compact && p.type === "year"))
+      .map((p) => p.value)
+      .join("/");
+  } else {
+    // Readable styles: word months in locale order — Intl's output is correct here (the separator
+    // inconsistency that forces the numeric reassembly is specific to the all-numeric form).
+    try {
+      dateStr = new Intl.DateTimeFormat(locale, READABLE_OPTS[format]).format(date);
+    } catch {
+      return emptyLabel;
+    }
+    // A period label leads a line → sentence-case (a no-op where the locale already capitalizes).
+    if (format === "monthYear") dateStr = dateStr.charAt(0).toUpperCase() + dateStr.slice(1);
   }
-  let out = parts
-    .filter((p) => p.type === "day" || p.type === "month" || (!compact && p.type === "year"))
-    .map((p) => p.value)
-    .join("/");
-  if (format === "datetime") out += ` ${pad2(date.getHours())}:${pad2(date.getMinutes())}`;
-  return out;
+
+  // Time-first: a stable 24h "HH:mm " prepended (no locale comma, no AM/PM), per the product convention.
+  return time ? `${pad2(date.getHours())}:${pad2(date.getMinutes())} ${dateStr}` : dateStr;
 }

package/src/inline_date_picker.tsx

@@ -67,7 +67,9 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
     [value, commit],
   );
 
-  const display = formatDate(value, { format, locale, emptyLabel: "" });
+  // `format` here is the field config (date vs datetime); the display formatter only needs
+  // whether to show a time → map it to the orthogonal `time` flag.
+  const display = formatDate(value, { time: format === "datetime", locale, emptyLabel: "" });
 
   return (
     <View>

package/src/match_row.tsx

@@ -0,0 +1,133 @@
+import { StyleSheet, View } from "react-native";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { Button } from "./button";
+import { Confidence, type ConfidenceLevel } from "./confidence";
+
+export interface MatchSide {
+  /** Primary line — the record name / id. */
+  title: string;
+  /** Secondary line — amount, date, customer. */
+  detail?: string;
+}
+
+export interface MatchRowProps {
+  /** The known item we're finding a counterpart for. */
+  source: MatchSide;
+  /** The agent's proposed counterpart. Omit → the "no confident match" state. */
+  match?: MatchSide;
+  /** One line of WHY the agent paired them. */
+  rationale?: string;
+  confidence?: ConfidenceLevel;
+  confidenceScore?: number;
+  onAccept?: () => void;
+  /** Pick a different counterpart — the host opens its candidate list. */
+  onReassign?: () => void;
+  onDismiss?: () => void;
+  acceptLabel?: string;
+  /** Resolved → settles to a quiet outcome line. */
+  status?: "open" | "accepted" | "dismissed";
+}
+
+/**
+ * An AI-proposed PAIRING — a known item, an arrow, the agent's proposed
+ * counterpart; a confidence meter and one muted line of why. The human accepts,
+ * reassigns, or rejects; nothing links on its own. Deliberately spare: two
+ * sides, an arrow, the reason. The unit of an AI reconciliation / dedup /
+ * correlation queue. Unlike `Suggestion` (a single proposed value) this is
+ * two-sided; unlike the deterministic reconcile recipe, the agent reasons it.
+ */
+export function MatchRow(props: MatchRowProps) {
+  const status = props.status ?? "open";
+  const resolved = status !== "open";
+  const hasMatch = props.match != null;
+  const hasConfidence = props.confidence != null || props.confidenceScore != null;
+
+  if (resolved) {
+    return (
+      <View style={[styles.card, styles.resolved]}>
+        <View style={styles.pair}>
+          <Side side={props.source} />
+        </View>
+        <Text size="xs" color="muted" weight="medium">
+          {status === "accepted" ? (hasMatch ? `Matched · ${props.match!.title}` : "Matched") : "Dismissed"}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.pair}>
+        <Side side={props.source} />
+        <Icon name="arrow-right" size={16} color={colors.zinc[400]} />
+        {hasMatch ? (
+          <Side side={props.match!} right />
+        ) : (
+          <View style={[styles.side, styles.sideRight]}>
+            <Text size="sm" weight="medium" color="muted" align="right" numberOfLines={1}>
+              No confident match
+            </Text>
+            <Text size="xs" color="muted" align="right" numberOfLines={1}>
+              Pick a counterpart
+            </Text>
+          </View>
+        )}
+      </View>
+
+      {hasConfidence || props.rationale ? (
+        <View style={styles.meta}>
+          {hasConfidence ? <Confidence level={props.confidence} score={props.confidenceScore} /> : null}
+          {props.rationale ? (
+            <Text size="xs" color="muted" style={{ flex: 1 }} numberOfLines={2}>
+              {props.rationale}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+
+      <View style={styles.footer}>
+        {props.onDismiss ? <Button title="Not a match" color="muted" shape="rounded" onPress={props.onDismiss} /> : null}
+        {props.onReassign ? (
+          <Button title={hasMatch ? "Reassign" : "Find match"} color="secondary" shape="rounded" onPress={props.onReassign} />
+        ) : null}
+        {hasMatch && props.onAccept ? (
+          <Button title={props.acceptLabel ?? "Accept"} color="primary" shape="rounded" onPress={props.onAccept} />
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+function Side({ side, right }: { side: MatchSide; right?: boolean }) {
+  return (
+    <View style={[styles.side, right ? styles.sideRight : null]}>
+      <Text size="sm" weight="medium" numberOfLines={1} align={right ? "right" : undefined}>
+        {side.title}
+      </Text>
+      {side.detail ? (
+        <Text size="xs" color="muted" numberOfLines={1} align={right ? "right" : undefined}>
+          {side.detail}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    padding: 16,
+    gap: 12,
+  },
+  resolved: { backgroundColor: colors.zinc[50] },
+  pair: { flexDirection: "row", alignItems: "center", gap: 12 },
+  side: { flex: 1, gap: 2 },
+  sideRight: { alignItems: "flex-end" },
+  meta: { flexDirection: "row", alignItems: "center", gap: 12 },
+  footer: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 },
+});