@lotics/ui 4.4.0 → 4.5.0

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/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 },
+});

package/src/prompt_field.tsx

@@ -6,38 +6,38 @@ import {
   TextInputKeyPressEventData,
   View,
 } from "react-native";
-import { colors, solid, tint } from "./colors";
-import { Icon } from "./icon";
-import { IconButton } from "./icon_button";
-import { ActivityIndicator } from "./activity_indicator";
-import { ACTIVE_RING } from "./control_surface";
+import { colors } from "./colors";
+import { Button } from "./button";
 import { getInputTextStyle, fontFamilyRegular } from "./text_utils";
 
 export interface PromptFieldProps {
   value: string;
   onChangeText: (value: string) => void;
-  /** Fired on Enter (without Shift) or the send button. Receives the trimmed
-   *  text; never fires empty or while busy. */
+  /** Fired on Enter or the send button. Receives the trimmed text; never fires
+   *  empty or while busy. */
   onSubmit: (value: string) => void;
   placeholder?: string;
-  /** The agent is working — the field locks and the send slot shows a spinner.
-   *  This is the imperative command surface: one prompt does work, you watch it
-   *  stream (see `AgentRun`), you don't chat. */
+  /** The agent is working — the field locks. Typically the host swaps the field
+   *  for `AgentProgress` while busy (the composer MORPHS into the progress
+   *  pill); the two share the same pill geometry so the swap reads as a morph. */
   busy?: boolean;
   disabled?: boolean;
   autoFocus?: boolean;
   accessibilityLabel?: string;
-  /** When set, a paperclip appears at the left of the footer — the composer can
-   *  attach files (e.g. the photo that starts a run). The host opens the picker. */
+  /** When set, a circular attach button sits at the left of the row — the
+   *  composer can attach files (e.g. the photo that starts a run). */
   onAttach?: () => void;
 }
 
+const ROW = 40;
+
 /**
- * The natural-language command surface for an AI app — a prompt box that
- * triggers agent work, NOT a chat composer. Enter sends (Shift+Enter for a
- * newline); while the agent runs, the field locks and the send slot spins. The
- * violet sparkle marks it as the AI input. Pair with `AgentRun` (the streamed
- * work it kicks off) and a session history of the outputs it produces.
+ * The natural-language command surface for an AI app — a compact single-row
+ * composer pill that triggers agent work, NOT a chat composer. A circular attach
+ * `Button` on the left, the input filling the row at the same height as the
+ * buttons, a circular send-arrow `Button` on the right; Enter sends. While the
+ * agent runs the host swaps this for `AgentProgress` — same pill geometry, so it
+ * morphs into the progress indicator.
  */
 export function PromptField(props: PromptFieldProps) {
   const { value, onChangeText, onSubmit, placeholder, busy, disabled, autoFocus, accessibilityLabel, onAttach } = props;
@@ -50,8 +50,6 @@ export function PromptField(props: PromptFieldProps) {
     onSubmit(value.trim());
   }, [value, busy, disabled, onSubmit]);
 
-  // Web: Enter sends, Shift+Enter inserts a newline. RN's key event wraps the
-  // DOM event, so shiftKey/preventDefault are read defensively off nativeEvent.
   const onKeyPress = useCallback(
     (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
       const ne = e.nativeEvent as unknown as { key: string; shiftKey?: boolean };
@@ -64,87 +62,47 @@ export function PromptField(props: PromptFieldProps) {
   );
 
   return (
-    <View
-      style={[
-        styles.box,
-        focused ? { borderColor: colors.zinc[900], boxShadow: ACTIVE_RING } : null,
-        disabled ? { backgroundColor: colors.zinc[50] } : null,
-      ]}
-    >
-      <View style={styles.inputRow}>
-        <View style={styles.glyph}>
-          <Icon name="sparkles" size={14} color={solid("violet")} />
-        </View>
-        <RNTextInput
-          accessibilityLabel={accessibilityLabel ?? placeholder}
-          style={[styles.input, getInputTextStyle()]}
-          value={value}
-          onChangeText={onChangeText}
-          onKeyPress={onKeyPress}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
-          placeholder={placeholder}
-          placeholderTextColor={colors.zinc[400]}
-          editable={!busy && !disabled}
-          autoFocus={autoFocus}
-          multiline
-          submitBehavior="newline"
-        />
-      </View>
-      <View style={styles.footer}>
-        {onAttach ? (
-          <IconButton icon="paperclip" color="none" size="sm" accessibilityLabel="Attach files" onPress={onAttach} disabled={busy || disabled} />
-        ) : null}
-        <View style={{ flex: 1 }} />
-        {busy ? (
-          <View style={styles.sendSlot}>
-            <ActivityIndicator size={18} color={solid("violet")} />
-          </View>
-        ) : (
-          <IconButton
-            icon="arrow-up"
-            color="primary"
-            accessibilityLabel="Send"
-            onPress={submit}
-            disabled={!canSubmit}
-          />
-        )}
-      </View>
+    <View style={[styles.box, focused ? styles.boxFocused : null, disabled ? styles.boxDisabled : null]}>
+      {onAttach ? (
+        <Button icon="paperclip" color="secondary" accessibilityLabel="Attach files" onPress={onAttach} disabled={busy || disabled} />
+      ) : null}
+      <RNTextInput
+        accessibilityLabel={accessibilityLabel ?? placeholder}
+        style={[styles.input, getInputTextStyle(), { outline: "none", outlineStyle: "none", outlineWidth: 0 } as object]}
+        value={value}
+        onChangeText={onChangeText}
+        onKeyPress={onKeyPress}
+        onSubmitEditing={submit}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        placeholder={placeholder}
+        placeholderTextColor={colors.zinc[400]}
+        editable={!busy && !disabled}
+        autoFocus={autoFocus}
+      />
+      <Button icon="arrow-up" color="primary" accessibilityLabel="Send" onPress={submit} disabled={!canSubmit} />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   box: {
-    borderWidth: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    minHeight: 52,
+    borderWidth: 1.5,
     borderColor: colors.border,
-    borderRadius: 14,
+    borderRadius: 999,
     backgroundColor: colors.white,
-    paddingHorizontal: 12,
-    paddingTop: 10,
-    paddingBottom: 8,
-    gap: 6,
-  },
-  inputRow: { flexDirection: "row", gap: 8, alignItems: "flex-start" },
-  glyph: {
-    width: 24,
-    height: 24,
-    borderRadius: 7,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: tint("violet", 0.1),
-    marginTop: 2,
+    paddingHorizontal: 6,
   },
+  boxFocused: { borderColor: colors.zinc[900] },
+  boxDisabled: { backgroundColor: colors.zinc[50] },
   input: {
     flex: 1,
-    minHeight: 48,
-    maxHeight: 160,
-    paddingTop: 4,
-    paddingBottom: 0,
+    height: ROW,
+    paddingHorizontal: 10,
     fontFamily: fontFamilyRegular,
-    // RN-Web focus outline is handled by the box ring, not the raw input.
-    outlineStyle: "none",
   } as object,
-  footer: { flexDirection: "row", alignItems: "center" },
-  sendSlot: { width: 28, height: 28, alignItems: "center", justifyContent: "center" },
 });

package/src/record_review.tsx

@@ -0,0 +1,149 @@
+import { StyleSheet, View } from "react-native";
+import { colors, solid } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { Button } from "./button";
+import { InlineTextInput } from "./inline_text_input";
+import { Confidence, type ConfidenceLevel } from "./confidence";
+
+export interface RecordField {
+  label: string;
+  value: string;
+  /** Unit suffix shown after the value (₫, kg, pcs). */
+  unit?: string;
+  /** Mark a low-confidence field worth double-checking — a subtle amber dot. */
+  uncertain?: boolean;
+}
+
+export interface RecordReviewProps {
+  /** A short identifier for the record ("Carton 1", a code, a name). */
+  title?: string;
+  fields: RecordField[];
+  confidence?: ConfidenceLevel;
+  confidenceScore?: number;
+  /** Edit a field — fired on save of the inline editor (blur / Enter). When set,
+   *  each value is click-to-edit; omit for a read-only review. */
+  onEditField?: (index: number, value: string) => void;
+  /** Confirm the record — it collapses to a summary the host can re-open. */
+  onConfirm?: () => void;
+  /** Remove / skip the record (don't add it). */
+  onRemove?: () => void;
+  /** Re-open a confirmed or removed record. */
+  onUndo?: () => void;
+  status?: "pending" | "confirmed" | "removed";
+}
+
+/**
+ * One extracted record under review before it's saved — the agent's fields, each
+ * click-to-edit (`InlineTextInput`), with a confidence and Confirm / Remove. On
+ * confirm (or remove) the card COLLAPSES to a one-line summary with Undo, so a
+ * long extraction reads as a tidy checklist of what's been reviewed. Stack
+ * several under a "Save all" to capture a whole document → table; the source +
+ * streaming + save belong to the host (see `tpl_extract`). Replaces per-field
+ * confirmable estimates with a whole-record review.
+ */
+export function RecordReview(props: RecordReviewProps) {
+  const status = props.status ?? "pending";
+  const hasConfidence = props.confidence != null || props.confidenceScore != null;
+
+  if (status === "confirmed" || status === "removed") {
+    const removed = status === "removed";
+    return (
+      <View style={styles.collapsed}>
+        <Icon name={removed ? "x" : "check"} size={15} color={removed ? colors.zinc[400] : solid("emerald")} />
+        <Text
+          size="sm"
+          weight="medium"
+          color={removed ? "muted" : "default"}
+          numberOfLines={1}
+          style={[{ flex: 1 }, removed ? styles.strike : null]}
+        >
+          {props.title ?? props.fields[0]?.value ?? "Record"}
+        </Text>
+        <Text size="sm" weight="medium" color="muted">
+          {removed ? "Removed" : "Confirmed"}
+        </Text>
+        {props.onUndo ? <Button title="Undo" color="muted" shape="rounded" onPress={props.onUndo} /> : null}
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.header}>
+        <Text size="sm" weight="semibold" style={{ flex: 1 }} numberOfLines={1}>
+          {props.title ?? "Record"}
+        </Text>
+        {hasConfidence ? <Confidence level={props.confidence} score={props.confidenceScore} /> : null}
+      </View>
+
+      <View style={styles.fields}>
+        {props.fields.map((f, i) => (
+          <View key={`${f.label}-${i}`} style={styles.fieldRow}>
+            <View style={styles.labelCol}>
+              {f.uncertain ? <View style={styles.uncertainDot} /> : null}
+              <Text size="sm" color="muted" numberOfLines={1}>
+                {f.label}
+              </Text>
+            </View>
+            <View style={styles.valueCol}>
+              <View style={{ flex: 1 }}>
+                {props.onEditField ? (
+                  <InlineTextInput value={f.value} accessibilityLabel={`Edit ${f.label}`} onSave={(next) => props.onEditField?.(i, next)} />
+                ) : (
+                  <Text size="sm" weight="medium" tabular>
+                    {f.value}
+                  </Text>
+                )}
+              </View>
+              {f.unit ? (
+                <Text size="sm" color="muted">
+                  {f.unit}
+                </Text>
+              ) : null}
+            </View>
+          </View>
+        ))}
+      </View>
+
+      {props.onConfirm || props.onRemove ? (
+        <View style={styles.footer}>
+          {props.onRemove ? <Button title="Remove" color="muted" shape="rounded" onPress={props.onRemove} /> : null}
+          {props.onConfirm ? <Button title="Confirm" color="secondary" shape="rounded" onPress={props.onConfirm} /> : null}
+        </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: 10 },
+  fields: { gap: 2 },
+  fieldRow: { flexDirection: "row", alignItems: "center", gap: 16, minHeight: 34 },
+  labelCol: { flexDirection: "row", alignItems: "center", gap: 6, width: 132 },
+  uncertainDot: { width: 6, height: 6, borderRadius: 999, backgroundColor: solid("amber") },
+  valueCol: { flex: 1, flexDirection: "row", alignItems: "center", gap: 6 },
+  collapsed: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    backgroundColor: colors.white,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 12,
+    paddingLeft: 14,
+    paddingRight: 8,
+    paddingVertical: 6,
+    minHeight: 48,
+  },
+  strike: { textDecorationLine: "line-through" },
+  footer: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 },
+});