@lotics/ui 7.19.2 → 8.0.0

package/examples/tpl_assistant.tsx

@@ -1,174 +0,0 @@
-import { useRef, useState } from "react";
-import { ScrollView, View } from "react-native";
-import { colors } from "@lotics/ui/colors";
-import { Text } from "@lotics/ui/text";
-import { DotsIndicator } from "@lotics/ui/dots_indicator";
-import { Composer } from "@lotics/ui/composer";
-import { ChangeReview, ChangeReviewActions, ChangeDiff, type ChangeReviewItemStatus } from "@lotics/ui/change_review";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · AI assistant — a CHAT workflow, a different shape from the design
-// canvas: a conversation where the agent's answer carries SUGGESTED EDITS the
-// human approves or rejects ONE BY ONE (a before→after diff per change, ✓/✕),
-// then applies only the accepted set. The review-each-edit pattern — an AI
-// copilot proposing changes to a record, never committing on its own. All mock.
-// ─────────────────────────────────────────────────────────────────────────────
-
-/** One field's before→after edit — the assistant's proposals, reviewed 1-by-1. */
-interface EditChange {
-  label: string;
-  before?: string;
-  after: string;
-}
-
-interface ChatMsg {
-  id: string;
-  role: "user" | "agent";
-  text?: string;
-  /** An agent turn may carry suggested edits to review 1-by-1. */
-  changes?: EditChange[];
-  applied?: boolean;
-  typing?: boolean;
-}
-
-const SUGGESTED: EditChange[] = [
-  { label: "Company", before: "acme packaging co", after: "Acme Packaging Co." },
-  { label: "Phone", before: "0901234567", after: "+84 90 123 4567" },
-  { label: "Email", before: "SALES@ACME.VN", after: "sales@acme.vn" },
-  { label: "Industry", after: "Packaging" },
-];
-
-export function TplAssistant() {
-  const idRef = useRef(1);
-  const nextId = () => `m${idRef.current++}`;
-  const [messages, setMessages] = useState<ChatMsg[]>([
-    { id: "m0", role: "agent", text: "Paste a record or ask me to tidy one up — I'll propose changes you can approve one by one." },
-  ]);
-  const [decisions, setDecisions] = useState<Record<string, ChangeReviewItemStatus>>({});
-  const [prompt, setPrompt] = useState("");
-  const [busy, setBusy] = useState(false);
-  const [proposed, setProposed] = useState(false);
-
-  const send = (text: string) => {
-    setPrompt("");
-    const userMsg: ChatMsg = { id: nextId(), role: "user", text };
-    const typingId = nextId();
-    setMessages((m) => [...m, userMsg, { id: typingId, role: "agent", typing: true }]);
-    setBusy(true);
-    setTimeout(() => {
-      setBusy(false);
-      setMessages((m) =>
-        m.map((msg) =>
-          msg.id === typingId
-            ? proposed
-              ? { id: msg.id, role: "agent", text: "Done — anything else to adjust?" }
-              : { id: msg.id, role: "agent", text: "Here's what I'd standardize on this contact. Review each:", changes: SUGGESTED.map((c) => ({ ...c, status: "pending" })) }
-            : msg,
-        ),
-      );
-      setProposed(true);
-    }, 1300);
-  };
-
-  const decide = (msgId: string, index: number, status: ChangeReviewItemStatus) => {
-    setDecisions((d) => ({ ...d, [`${msgId}:${index}`]: status }));
-  };
-
-  const applyMsg = (msgId: string) => {
-    const msg = messages.find((m) => m.id === msgId);
-    const n = (msg?.changes ?? []).filter((_, i) => decisions[`${msgId}:${i}`] === "accepted").length;
-    setMessages((m) => [
-      ...m.map((x) => (x.id === msgId ? { ...x, applied: true } : x)),
-      { id: nextId(), role: "agent", text: `Applied ${n} change${n === 1 ? "" : "s"} to the contact.` },
-    ]);
-  };
-
-  return (
-    <View style={{ flex: 1, backgroundColor: colors.white }}>
-      <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: colors.zinc[200], backgroundColor: colors.background }}>
-        <View style={{ width: 24, height: 24, borderRadius: 7, alignItems: "center", justifyContent: "center", backgroundColor: colors.zinc[100] }}>
-          <View style={{ width: 4, height: 4, borderRadius: 2, backgroundColor: colors.zinc[900] }} />
-        </View>
-        <Text size="sm" weight="semibold">Record assistant</Text>
-      </View>
-
-      <ScrollView contentContainerStyle={{ padding: 20, paddingBottom: 140, gap: 16, maxWidth: 760, width: "100%", alignSelf: "center" }}>
-        {messages.map((m) => {
-          if (m.role === "user") {
-            return (
-              <View key={m.id} style={{ alignItems: "flex-end" }}>
-                <View style={{ maxWidth: "82%", backgroundColor: colors.zinc[900], borderRadius: 14, paddingHorizontal: 14, paddingVertical: 10 }}>
-                  <Text size="sm" color="inverted">{m.text}</Text>
-                </View>
-              </View>
-            );
-          }
-          const active = m.changes != null && !m.applied;
-          return (
-            <View key={m.id} style={{ flexDirection: "row", gap: 10, alignItems: "flex-start" }}>
-              <View style={{ width: 26, height: 26, borderRadius: 8, alignItems: "center", justifyContent: "center", backgroundColor: colors.zinc[100], marginTop: 1 }}>
-                <View style={{ width: 4, height: 4, borderRadius: 2, backgroundColor: colors.zinc[900] }} />
-              </View>
-              <View style={{ flex: 1, gap: 10 }}>
-                {m.typing ? (
-                  <View style={{ paddingVertical: 6 }}><DotsIndicator size={6} color={colors.zinc[400]} /></View>
-                ) : null}
-                {m.text ? <Text size="sm">{m.text}</Text> : null}
-                {m.changes ? (
-                  <View style={{ gap: 14 }}>
-                    <ChangeReview
-                      items={m.changes}
-                      getKey={(c, i) => `${m.id}:${i}`}
-                      statusOf={(_, i) => decisions[`${m.id}:${i}`] ?? "pending"}
-                      renderItem={(c) => (
-                        <>
-                          <Text size="xs" color="muted" weight="medium">{c.label}</Text>
-                          <ChangeDiff before={c.before} after={c.after} />
-                        </>
-                      )}
-                      renderSummary={(c, kept) => (
-                        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                          <Text size="sm" weight="medium" numberOfLines={1}>{c.label}</Text>
-                          <Text size="sm" numberOfLines={1} color={kept ? "default" : "muted"} style={[{ flex: 1 }, kept ? undefined : { textDecorationLine: "line-through" }]}>{kept ? c.after : (c.before ?? c.after)}</Text>
-                        </View>
-                      )}
-                      status={m.applied ? "applied" : "open"}
-                      onAcceptItem={active ? (i) => decide(m.id, i, "accepted") : undefined}
-                      onRejectItem={active ? (i) => decide(m.id, i, "rejected") : undefined}
-                      onUndoItem={active ? (i) => setDecisions((d) => { const n = { ...d }; delete n[`${m.id}:${i}`]; return n; }) : undefined}
-                    />
-                    {/* Inline (no dialog) — the commit bar sits under the list behind a divider. */}
-                    {active && !m.applied ? (
-                      <View style={{ borderTopWidth: 1, borderTopColor: colors.zinc[200], paddingTop: 14, flexDirection: "row" }}>
-                        <ChangeReviewActions
-                          items={m.changes}
-                          statusOf={(_, i) => decisions[`${m.id}:${i}`] ?? "pending"}
-                          applyLabel="Apply accepted"
-                          onAcceptItem={(i) => decide(m.id, i, "accepted")}
-                          onApply={() => applyMsg(m.id)}
-                          onDiscard={() => setMessages((ms) => ms.map((x) => (x.id === m.id ? { ...x, applied: true } : x)))}
-                        />
-                      </View>
-                    ) : null}
-                  </View>
-                ) : null}
-              </View>
-            </View>
-          );
-        })}
-      </ScrollView>
-
-      <View style={{ position: "absolute", left: 0, right: 0, bottom: 20, alignItems: "center", paddingHorizontal: 16 }}>
-        <View style={{ width: "100%", maxWidth: 720 }}>
-          <Composer
-            value={prompt}
-            onChangeText={setPrompt}
-            onSend={send}
-            disabled={busy}
-            placeholder={proposed ? "Ask for another change…" : "Try: “Tidy up this contact”"}
-          />
-        </View>
-      </View>
-    </View>
-  );
-}

package/examples/tpl_briefing.tsx

@@ -1,121 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
-import { SegmentedControl } from "@lotics/ui/segmented_control";
-import { Sources } from "@lotics/ui/sources";
-import { Finding, type FindingSeverity } from "@lotics/ui/finding";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Briefing — the agent reads the period's data and writes a short
-// narrative, then a RANKED list of what needs attention. Each finding carries a
-// severity, a headline metric, the sources it rests on, and the one action it
-// suggests. Unlike a dashboard (raw charts), this is the agent's COMMENTARY:
-// what changed, what's at risk, what to do. The leadership digest / daily ops
-// brief / anomaly scan. The narrative explains; the findings are the worklist.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface F {
-  severity: FindingSeverity;
-  title: string;
-  detail: string;
-  metric: string;
-  metricCaption: string;
-  action: string;
-  sources: { id: string; label: string; kind: "record" | "table" | "document" }[];
-}
-
-const NARRATIVE: Record<"today" | "week", string> = {
-  today:
-    "Volume held steady at 41 active shipments. Three reefer containers to Hamburg are inside the demurrage window and need a pickup booked today. Cash collection is lagging — five invoices crossed 30 days overdue. On-time delivery improved on the back of the new Cát Lái slotting.",
-  week:
-    "A solid week: 268 shipments moved, on-time delivery up 6 points after the Cát Lái slotting change. Two ocean lanes slipped below the 12% margin target on bunker surcharges. Receivables remain the soft spot — ₫120M is now past 30 days, concentrated in two accounts.",
-};
-
-const FINDINGS: Record<"today" | "week", F[]> = {
-  today: [
-    { severity: "critical", title: "3 reefer containers at demurrage risk", detail: "Hamburg shipments HBL-4471/4472/4480 hit free-time expiry at 18:00 today; no pickup is booked.", metric: "₫48M", metricCaption: "exposure", action: "Open the shipments", sources: [{ id: "a1", label: "SHIP-4471", kind: "record" }, { id: "a2", label: "Demurrage tracker", kind: "table" }] },
-    { severity: "warning", title: "5 invoices overdue past 30 days", detail: "Two accounts — Crestline and Meridian — make up most of the balance. No promise-to-pay logged this week.", metric: "₫120M", metricCaption: "overdue", action: "Open receivables", sources: [{ id: "a3", label: "Aged receivables", kind: "table" }] },
-    { severity: "warning", title: "Margin on the Hamburg lane below target", detail: "Bunker surcharge rose 9%; the lane is at 9.8% gross vs the 12% floor.", metric: "−2.2 pts", metricCaption: "vs target", action: "Review lane pricing", sources: [{ id: "a4", label: "Lane P&L", kind: "table" }] },
-    { severity: "positive", title: "On-time delivery improving", detail: "The Cát Lái slotting change lifted on-time pickups for the third day running.", metric: "+6 pts", metricCaption: "3-day", action: "See the trend", sources: [{ id: "a5", label: "OTD report", kind: "document" }] },
-  ],
-  week: [
-    { severity: "critical", title: "Receivables concentration risk", detail: "₫120M past 30 days sits in two accounts; one is also near its credit limit.", metric: "2", metricCaption: "accounts", action: "Open receivables", sources: [{ id: "b1", label: "Aged receivables", kind: "table" }] },
-    { severity: "warning", title: "Two ocean lanes below margin target", detail: "Hamburg and Rotterdam slipped under 12% on bunker surcharges sustained all week.", metric: "2", metricCaption: "lanes", action: "Review lane pricing", sources: [{ id: "b2", label: "Lane P&L", kind: "table" }] },
-    { severity: "positive", title: "On-time delivery up 6 points", detail: "The slotting change held all week — the strongest OTD in two months.", metric: "+6 pts", metricCaption: "this week", action: "See the trend", sources: [{ id: "b3", label: "OTD report", kind: "document" }] },
-    { severity: "info", title: "RFQ volume rising", detail: "12 new quote requests this week, ahead of the trailing average — capacity planning should get ahead of it.", metric: "12", metricCaption: "RFQs", action: "Open the pipeline", sources: [{ id: "b4", label: "Quote pipeline", kind: "table" }] },
-  ],
-};
-
-export function TplBriefing() {
-  const [period, setPeriod] = useState<"today" | "week">("today");
-  const findings = FINDINGS[period];
-  const attention = findings.filter((f) => f.severity === "critical" || f.severity === "warning").length;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 860, alignSelf: "center", gap: 16 }}>
-        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16 }}>
-          <View style={{ flex: 1, gap: 2 }}>
-            <Text size="xl" weight="semibold">Operations briefing</Text>
-            <Text size="sm" color="muted">What the agent sees in the numbers — and what needs a decision</Text>
-          </View>
-          <SegmentedControl
-            accessibilityLabel="Period"
-            options={[
-              { label: "Today", value: "today" },
-              { label: "This week", value: "week" },
-            ]}
-            value={period}
-            onValueChange={setPeriod}
-          />
-        </View>
-
-        {/* the generated narrative */}
-        <View style={{ borderWidth: 1, borderColor: colors.zinc[200], backgroundColor: colors.white, borderRadius: 14, padding: 18, gap: 12 }}>
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-            <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>Summary</Text>
-            <Text size="xs" color="muted">{period === "today" ? "as of 14:20" : "week to date"}</Text>
-          </View>
-          <Text size="md" style={{ lineHeight: 22 }}>{NARRATIVE[period]}</Text>
-          <Sources
-            label="Read from"
-            onOpen={() => {}}
-            sources={[
-              { id: "n1", label: "Shipments", kind: "table" },
-              { id: "n2", label: "Aged receivables", kind: "table" },
-              { id: "n3", label: "Lane P&L", kind: "table" },
-            ]}
-          />
-        </View>
-
-        <KPIStrip
-          items={[
-            { label: "Active shipments", value: period === "today" ? 41 : 268, format: "number", trend: period === "today" ? 0 : 4 },
-            { label: "On-time delivery", value: "94%", trend: 6 },
-            { label: "Overdue receivables", value: 120_000_000, format: "currency", compact: true, tone: "danger" },
-            { label: "Needs attention", value: attention, format: "number", tone: attention > 0 ? "warning" : "default" },
-          ]}
-        />
-
-        <View style={{ gap: 10 }}>
-          <Text size="sm" weight="semibold">Needs attention</Text>
-          {findings.map((f, i) => (
-            <Finding
-              key={i}
-              severity={f.severity}
-              title={f.title}
-              detail={f.detail}
-              metric={f.metric}
-              metricCaption={f.metricCaption}
-              sources={f.sources}
-              onOpenSource={() => {}}
-              action={{ label: f.action, onPress: () => {} }}
-            />
-          ))}
-        </View>
-      </View>
-    </ScrollView>
-  );
-}

package/examples/tpl_compare.tsx

@@ -1,133 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { Callout, CalloutText, CalloutTitle } from "@lotics/ui/callout";
-import { ScoredOption } from "@lotics/ui/scored_option";
-import type { SpecRow } from "@lotics/ui/spec_list";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Compare — the agent SCORES and ranks the options against the
-// criteria, shows its reasoning and the key specs, and the human picks one. The
-// agent does the legwork (gather, normalise, score); the choice stays the
-// human's. Quotes, carriers, suppliers, plans, routes. The recommended option
-// wears a RECOMMENDED label; selecting one settles the shortlist to the decision.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface O {
-  id: string;
-  rank: number;
-  title: string;
-  subtitle: string;
-  score: number;
-  rationale: string;
-  specs: SpecRow[];
-  recommended?: boolean;
-}
-
-const OPTIONS: O[] = [
-  {
-    id: "o1",
-    rank: 1,
-    title: "Maersk — Cát Lái → Hamburg",
-    subtitle: "Direct, weekly service · reefer guaranteed",
-    score: 0.92,
-    rationale: "Best balance: only 4% above the cheapest, but the most reliable schedule and guaranteed reefer plugs — lowest demurrage risk for time-sensitive cargo.",
-    recommended: true,
-    specs: [
-      { label: "All-in rate", value: "$2,840" },
-      { label: "Transit", value: "28 days" },
-      { label: "Schedule reliability", value: "94%" },
-      { label: "Free time", value: "14 days" },
-    ],
-  },
-  {
-    id: "o2",
-    rank: 2,
-    title: "CMA CGM — Cát Lái → Hamburg",
-    subtitle: "1 transshipment at Singapore",
-    score: 0.78,
-    rationale: "Cheapest of the four, but the Singapore transshipment adds three days and a reliability hit — workable for non-urgent cargo.",
-    specs: [
-      { label: "All-in rate", value: "$2,730" },
-      { label: "Transit", value: "31 days" },
-      { label: "Schedule reliability", value: "86%" },
-      { label: "Free time", value: "10 days" },
-    ],
-  },
-  {
-    id: "o3",
-    rank: 3,
-    title: "Hapag-Lloyd — Cát Lái → Hamburg",
-    subtitle: "Direct, premium service",
-    score: 0.64,
-    rationale: "Fastest transit and strong reliability, but the premium rate is hard to justify unless the customer pays for speed.",
-    specs: [
-      { label: "All-in rate", value: "$3,210" },
-      { label: "Transit", value: "26 days" },
-      { label: "Schedule reliability", value: "92%" },
-      { label: "Free time", value: "10 days" },
-    ],
-  },
-  {
-    id: "o4",
-    rank: 4,
-    title: "ONE — Cát Lái → Hamburg",
-    subtitle: "2 transshipments · no reefer guarantee",
-    score: 0.41,
-    rationale: "Lowest score: two transshipments and no guaranteed reefer plug make it unsuitable for frozen cargo, despite a mid-range rate.",
-    specs: [
-      { label: "All-in rate", value: "$2,910" },
-      { label: "Transit", value: "34 days" },
-      { label: "Schedule reliability", value: "79%" },
-      { label: "Free time", value: "7 days" },
-    ],
-  },
-];
-
-export function TplCompare() {
-  const [chosen, setChosen] = useState<string | null>(null);
-  const pick = OPTIONS.find((o) => o.id === chosen) ?? null;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 16 }}>
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Freight options</Text>
-          <Text size="sm" color="muted">Ocean · Cát Lái → Hamburg · 2×40HC reefer · frozen shrimp</Text>
-        </View>
-
-        <View style={{ borderLeftWidth: 2, borderLeftColor: colors.zinc[300], paddingLeft: 12 }}>
-          <Text size="sm" color="muted">
-            The agent scored four quotes against cost, transit time and schedule reliability, weighted for time-sensitive reefer cargo.
-          </Text>
-        </View>
-
-        {pick ? (
-          <Callout tone="neutral">
-            <CalloutTitle>Chosen · {pick.title}</CalloutTitle>
-            <CalloutText>{pick.specs[0].label} {String(pick.specs[0].value)} · {String(pick.specs[1].value)} transit. Booking can proceed on this option.</CalloutText>
-          </Callout>
-        ) : null}
-
-        <View style={{ gap: 12 }}>
-          {OPTIONS.map((o) => (
-            <ScoredOption
-              key={o.id}
-              rank={o.rank}
-              title={o.title}
-              subtitle={o.subtitle}
-              score={o.score}
-              rationale={o.rationale}
-              specs={o.specs}
-              recommended={o.recommended}
-              selected={chosen === o.id}
-              selectLabel="Choose this option"
-              onSelect={() => setChosen((c) => (c === o.id ? null : o.id))}
-            />
-          ))}
-        </View>
-      </View>
-    </ScrollView>
-  );
-}

package/examples/tpl_crosscheck.tsx

@@ -1,120 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
-import { Callout, CalloutText, CalloutTitle } from "@lotics/ui/callout";
-import { Discrepancy, type DiscrepancyValue } from "@lotics/ui/discrepancy";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Cross-check — the agent compares the documents of one transaction
-// and surfaces every field whose value DISAGREES across sources. Each card lays
-// the conflicting values side by side (with where each came from), marks the one
-// the agent believes, and the human resolves to a truth or flags it. The audit /
-// 3-way-match / contract-vs-invoice desk. Symmetric (N sources disagree), unlike
-// a before→after edit. The agreeing fields stay out of the way — only conflicts
-// need a decision.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface D {
-  id: string;
-  field: string;
-  values: DiscrepancyValue[];
-  note: string;
-}
-
-const SEED: D[] = [
-  {
-    id: "d1",
-    field: "Total cartons",
-    values: [
-      { source: "Shipping instruction", value: "525" },
-      { source: "Commercial invoice", value: "520", recommended: true },
-      { source: "Packing list", value: "520" },
-    ],
-    note: "Two of three documents agree at 520; the SI looks stale — it predates the final load.",
-  },
-  {
-    id: "d2",
-    field: "Net weight",
-    values: [
-      { source: "Commercial invoice", value: "11,980 kg" },
-      { source: "Packing list", value: "12,050 kg", recommended: true },
-    ],
-    note: "The packing list carries the measured weight; the CI rounded for the invoice.",
-  },
-  {
-    id: "d3",
-    field: "Incoterm",
-    values: [
-      { source: "Shipping instruction", value: "FOB" },
-      { source: "Commercial invoice", value: "CIF", recommended: true },
-    ],
-    note: "The commercial invoice governs the sale terms — CIF matches the freight prepaid on the bill of lading.",
-  },
-  {
-    id: "d4",
-    field: "HS code",
-    values: [
-      { source: "Commercial invoice", value: "0306.17", recommended: true },
-      { source: "Customs draft", value: "0306.16" },
-    ],
-    note: "0306.16 is cold-water shrimp; the goods are warm-water Penaeidae → 0306.17. The CI is right — fix the draft.",
-  },
-];
-
-const CHECKED = 22;
-
-export function TplCrosscheck() {
-  const [res, setRes] = useState<Record<string, { idx?: number; flagged?: boolean }>>({});
-
-  const resolvedCount = Object.values(res).filter((r) => r.idx != null || r.flagged).length;
-  const openCount = SEED.length - resolvedCount;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 760, alignSelf: "center", gap: 16 }}>
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Document cross-check</Text>
-          <Text size="sm" color="muted">Shipment HBL-4471 · Shipping instruction · Commercial invoice · Packing list · Customs draft</Text>
-        </View>
-
-        <KPIStrip
-          items={[
-            { label: "Fields checked", value: CHECKED, format: "number" },
-            { label: "In agreement", value: CHECKED - SEED.length, format: "number" },
-            { label: "Disagree", value: openCount, format: "number", tone: openCount > 0 ? "danger" : "default", info: "Fields whose value differs across the documents — each needs a resolution before the set can be filed." },
-            { label: "Resolved", value: resolvedCount, format: "number" },
-          ]}
-        />
-
-        {openCount > 0 ? (
-          <Callout tone="warning">
-            <CalloutTitle>{openCount} of {CHECKED} fields disagree across the documents</CalloutTitle>
-            <CalloutText>The agent reconciled the other {CHECKED - SEED.length}. Resolve each conflict to a source of truth, or flag it for the desk.</CalloutText>
-          </Callout>
-        ) : (
-          <Callout tone="success">
-            <CalloutTitle>All conflicts resolved</CalloutTitle>
-            <CalloutText>Every field now has a single source of truth — the document set is ready to file.</CalloutText>
-          </Callout>
-        )}
-
-        <View style={{ gap: 10 }}>
-          {SEED.map((d) => (
-            <Discrepancy
-              key={d.id}
-              field={d.field}
-              values={d.values}
-              note={d.note}
-              resolvedIndex={res[d.id]?.idx}
-              flagged={res[d.id]?.flagged}
-              onResolve={(idx) => setRes((p) => ({ ...p, [d.id]: { idx } }))}
-              onFlag={() => setRes((p) => ({ ...p, [d.id]: { flagged: true } }))}
-            />
-          ))}
-        </View>
-      </View>
-    </ScrollView>
-  );
-}