@lotics/ui 4.3.0 → 4.5.0

package/examples/tpl_extract.tsx

@@ -3,60 +3,67 @@ import { ScrollView, View } from "react-native";
 import { colors } from "@lotics/ui/colors";
 import { Text } from "@lotics/ui/text";
 import { Button } from "@lotics/ui/button";
-import { LinkButton } from "@lotics/ui/link_button";
-import { Card, CardBody, CardFooter, CardHeader, CardHeaderTitle, CardHeaderMeta } from "@lotics/ui/card";
+import { Card, CardBody, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
 import { FileDropzone } from "@lotics/ui/file_dropzone";
 import { AgentRun, type AgentRunStep } from "@lotics/ui/agent_run";
-import { AssistedField } from "@lotics/ui/assisted_field";
-import { InlineTextInput } from "@lotics/ui/inline_text_input";
+import { RecordReview, type RecordField } from "@lotics/ui/record_review";
 import { Sources } from "@lotics/ui/sources";
 import { CompletionState } from "@lotics/ui/completion_state";
 import { type ConfidenceLevel } from "@lotics/ui/confidence";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · AI extract & confirm — a DIFFERENT AI workflow from the design
-// assistant: a one-shot data-capture pass, no iteration. Drop a document → the
-// agent extracts structured fields (AgentRun) → every field lands as a tinted
-// ESTIMATE the human confirms or overrides (AssistedField) → submit once all
-// stand. The provenance is visible the whole way: nothing is committed until a
-// person stood behind each value. All mock.
+// Template · AI extract & confirm — read an image, then review each extracted
+// RECORD before it's added to a table. Drop a photo → the agent extracts the
+// lines (AgentRun) → each lands as a `RecordReview` card whose fields are
+// click-to-edit; Confirm collapses it to a tidy checklist row (Undo to re-open),
+// Remove skips it → Save all writes the confirmed lines at once. A one-shot
+// capture pass: nothing is stored until the human has reviewed it. All mock.
 // ─────────────────────────────────────────────────────────────────────────────
 
 type ScriptStep = Omit<AgentRunStep, "status">;
 type Phase = "intake" | "extracting" | "review" | "done";
+type Status = "pending" | "confirmed" | "removed";
 
 const EXTRACT: ScriptStep[] = [
-  { id: "x1", label: "Reading the document", detail: "A 2-page supplier invoice (PDF)." },
-  { id: "x2", label: "extract_fields", kind: "tool" },
-  { id: "x3", label: "Matching the vendor", detail: "Acme Packaging Co. — found in your contacts." },
-  { id: "x4", label: "Reading the totals", detail: "Subtotal, VAT 8%, grand total." },
+  { id: "x1", label: "Reading the packing list", detail: "A photo of a 3-line shipping manifest." },
+  { id: "x2", label: "detect_table", kind: "tool" },
+  { id: "x3", label: "Extracting the line items", detail: "Description, HS code, quantity, weight and value per carton." },
+  { id: "x4", label: "classify_hs_codes", kind: "tool" },
 ];
 
-interface Field {
-  key: string;
-  label: string;
-  value: string;
-  unit?: string;
-  conf: ConfidenceLevel;
+interface RecordData {
+  id: string;
+  title: string;
+  confidence: ConfidenceLevel;
+  fields: RecordField[];
 }
-const FIELDS: Field[] = [
-  { key: "vendor", label: "Vendor", value: "Acme Packaging Co.", conf: "high" },
-  { key: "invoice", label: "Invoice no.", value: "INV-2026-0412", conf: "high" },
-  { key: "date", label: "Invoice date", value: "2026-06-10", conf: "medium" },
-  { key: "taxid", label: "Tax ID (MST)", value: "0312345678", conf: "medium" },
-  { key: "total", label: "Total", value: "48,200,000", unit: "₫", conf: "high" },
+const RECORDS: RecordData[] = [
+  { id: "r1", title: "Carton 1 — Frozen shrimp", confidence: "high", fields: [
+    { label: "HS code", value: "0306.17.10" },
+    { label: "Quantity", value: "120", unit: "ctn" },
+    { label: "Net weight", value: "1,200", unit: "kg" },
+    { label: "Value (FOB)", value: "86,200,000", unit: "₫" },
+  ] },
+  { id: "r2", title: "Carton 2 — Cotton T-shirts", confidence: "medium", fields: [
+    { label: "HS code", value: "6109.10.00", uncertain: true },
+    { label: "Quantity", value: "500", unit: "pcs" },
+    { label: "Net weight", value: "340", unit: "kg" },
+    { label: "Value (FOB)", value: "41,300,000", unit: "₫" },
+  ] },
+  { id: "r3", title: "Carton 3 — Li-ion batteries", confidence: "low", fields: [
+    { label: "HS code", value: "8507.60.10", uncertain: true },
+    { label: "Quantity", value: "48", unit: "pcs" },
+    { label: "Net weight", value: "96", unit: "kg" },
+    { label: "Value (FOB)", value: "18,700,000", unit: "₫" },
+  ] },
 ];
 
-const initialValues = () => Object.fromEntries(FIELDS.map((f) => [f.key, f.value]));
+const initialValues = () => Object.fromEntries(RECORDS.map((r) => [r.id, r.fields.map((f) => f.value)]));
 
 export function TplExtract() {
   const [phase, setPhase] = useState<Phase>("intake");
-  const [confirmed, setConfirmed] = useState<Record<string, boolean>>({});
-  // The agent's values are estimates the human can override. `editing` is the
-  // field whose AssistedField has swapped to an inline input (the `onEdit`
-  // contract); `values` holds the live value, overridden on save.
-  const [values, setValues] = useState<Record<string, string>>(initialValues);
-  const [editing, setEditing] = useState<string | null>(null);
+  const [statuses, setStatuses] = useState<Record<string, Status>>({});
+  const [values, setValues] = useState<Record<string, string[]>>(initialValues);
 
   const [revealed, setRevealed] = useState(0);
   const [streaming, setStreaming] = useState(false);
@@ -86,96 +93,88 @@ export function TplExtract() {
   const reset = () => {
     setStreaming(false);
     setRevealed(0);
-    setConfirmed({});
+    setStatuses({});
     setValues(initialValues());
-    setEditing(null);
     setPhase("intake");
   };
 
-  const allConfirmed = FIELDS.every((f) => confirmed[f.key]);
+  const setStatus = (id: string, status: Status | undefined) =>
+    setStatuses((s) => {
+      const n = { ...s };
+      if (status) n[id] = status;
+      else delete n[id];
+      return n;
+    });
+  const editField = (id: string, index: number, value: string) =>
+    setValues((v) => ({ ...v, [id]: v[id].map((x, i) => (i === index ? value : x)) }));
+
+  const confirmedCount = RECORDS.filter((r) => statuses[r.id] === "confirmed").length;
 
   return (
     <ScrollView style={{ backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28, paddingBottom: 120 }}>
       <View style={{ maxWidth: 720, width: "100%", alignSelf: "center", gap: 16 }}>
         <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16 }}>
           <View style={{ flex: 1, gap: 2 }}>
-            <Text size="xl" weight="semibold">Capture invoice</Text>
-            <Text size="sm" color="muted">Drop a document; the agent extracts the fields, you confirm each before saving.</Text>
+            <Text size="xl" weight="semibold">Capture packing list</Text>
+            <Text size="sm" color="muted">Drop a photo; the agent extracts each line, you review and edit, then save them all to the table.</Text>
           </View>
-          {phase !== "intake" ? <Button title="Start over" color="muted" shape="rounded" icon="rotate-ccw" onPress={reset} /> : null}
+          {phase !== "intake" ? <Button title="Start over" color="muted" shape="rounded" onPress={reset} /> : null}
         </View>
 
         {phase === "intake" ? (
           <Card style={{ padding: 0 }}>
-            <CardHeader><CardHeaderTitle info="Extraction is an estimate — every field is confirmable before anything is stored.">Source document</CardHeaderTitle></CardHeader>
+            <CardHeader><CardHeaderTitle info="Each extracted line is reviewable and editable before anything is saved.">Source photo</CardHeaderTitle></CardHeader>
             <CardBody>
-              <FileDropzone onFiles={start} accept="application/pdf,image/*" height={200} label="Drop an invoice" hint="or click to choose · PDF, JPG, PNG" dropLabel="Drop to extract" />
+              <FileDropzone onFiles={start} accept="image/*,application/pdf" height={200} label="Drop a packing list" hint="or click to choose · JPG, PNG, PDF" dropLabel="Drop to extract" />
             </CardBody>
           </Card>
         ) : null}
 
         {phase === "extracting" ? (
           <Card>
-            <AgentRun title="Extracting fields" steps={steps} state={streaming ? "streaming" : "done"} />
+            <AgentRun title="Extracting line items" steps={steps} state={streaming ? "streaming" : "done"} />
           </Card>
         ) : null}
 
         {phase === "review" ? (
-          <Card style={{ padding: 0 }}>
-            <CardHeader>
-              <CardHeaderTitle info="Each value is an AI estimate until you confirm it. Override any that read wrong.">Extracted fields</CardHeaderTitle>
-              <CardHeaderMeta>{`${Object.values(confirmed).filter(Boolean).length}/${FIELDS.length}`}</CardHeaderMeta>
-            </CardHeader>
-            <CardBody>
-              {FIELDS.map((f) =>
-                editing === f.key ? (
-                  <View key={f.key} style={{ flexDirection: "row", alignItems: "center", gap: 16, paddingVertical: 8 }}>
-                    <Text size="sm" color="muted" style={{ width: 132 }}>{f.label}</Text>
-                    <View style={{ flex: 1 }}>
-                      <InlineTextInput
-                        value={values[f.key]}
-                        accessibilityLabel={`Edit ${f.label}`}
-                        onSave={(next) => {
-                          // Override the AI estimate; a value the human typed is
-                          // confirmed by definition.
-                          setValues((v) => ({ ...v, [f.key]: next }));
-                          setConfirmed((c) => ({ ...c, [f.key]: true }));
-                          setEditing(null);
-                        }}
-                      />
-                    </View>
-                  </View>
-                ) : (
-                  <AssistedField
-                    key={f.key}
-                    label={f.label}
-                    value={values[f.key]}
-                    unit={f.unit}
-                    estimated={!confirmed[f.key]}
-                    confidence={f.conf}
-                    onConfirm={() => setConfirmed((c) => ({ ...c, [f.key]: true }))}
-                    onEdit={() => setEditing(f.key)}
-                  />
-                ),
-              )}
-              <Sources
-                label="Extracted from"
-                onOpen={() => {}}
-                sources={[{ id: "doc", label: "invoice-0412.pdf", kind: "document", detail: "2 pages" }]}
+          <>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+              <Text size="sm" weight="semibold" style={{ flex: 1 }}>Extracted lines</Text>
+              <Text size="xs" color="muted" tabular>{confirmedCount} of {RECORDS.length} confirmed</Text>
+            </View>
+            <Sources label="Extracted from" onOpen={() => {}} sources={[{ id: "doc", label: "packing-list.jpg", kind: "document", detail: "1 photo" }]} />
+            <View style={{ gap: 10 }}>
+              {RECORDS.map((r) => (
+                <RecordReview
+                  key={r.id}
+                  title={r.title}
+                  confidence={r.confidence}
+                  status={statuses[r.id] ?? "pending"}
+                  fields={r.fields.map((f, i) => ({ ...f, value: values[r.id][i] }))}
+                  onEditField={(i, value) => editField(r.id, i, value)}
+                  onConfirm={() => setStatus(r.id, "confirmed")}
+                  onRemove={() => setStatus(r.id, "removed")}
+                  onUndo={() => setStatus(r.id, undefined)}
+                />
+              ))}
+            </View>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Button title="Confirm all" color="muted" shape="rounded" onPress={() => setStatuses(Object.fromEntries(RECORDS.map((r) => [r.id, "confirmed" as Status])))} />
+              <View style={{ flex: 1 }} />
+              <Button
+                title={`Save ${confirmedCount} ${confirmedCount === 1 ? "line" : "lines"}`}
+                color="primary"
+                shape="rounded"
+                disabled={confirmedCount === 0}
+                onPress={() => setPhase("done")}
               />
-            </CardBody>
-            <CardFooter>
-              <View style={{ flex: 1 }}>
-                {!allConfirmed ? <LinkButton title="Confirm all" onPress={() => setConfirmed(Object.fromEntries(FIELDS.map((f) => [f.key, true])))} /> : null}
-              </View>
-              <Button title="Save invoice" color="primary" shape="rounded" disabled={!allConfirmed} onPress={() => setPhase("done")} />
-            </CardFooter>
-          </Card>
+            </View>
+          </>
         ) : null}
 
         {phase === "done" ? (
           <Card>
-            <CompletionState title="Invoice saved" summary="All five fields confirmed and written to the ledger.">
+            <CompletionState title={`${confirmedCount} lines saved`} summary="The confirmed lines were written to the shipment table.">
               <Button title="Capture another" color="secondary" shape="rounded" onPress={reset} />
             </CompletionState>
           </Card>

package/examples/tpl_lookup.tsx

@@ -0,0 +1,288 @@
+import { useEffect, useRef, useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors } from "@lotics/ui/colors";
+import { Divider } from "@lotics/ui/divider";
+import { Callout, CalloutText, CalloutTitle } from "@lotics/ui/callout";
+import { PressableHighlight } from "@lotics/ui/pressable_highlight";
+import { PromptField } from "@lotics/ui/prompt_field";
+import { AgentRun, type AgentRunStep } from "@lotics/ui/agent_run";
+import { SpecList, type SpecRow } from "@lotics/ui/spec_list";
+import { Confidence, type ConfidenceLevel } from "@lotics/ui/confidence";
+import { Sources, type SourceRef } from "@lotics/ui/sources";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Answer desk — converse on the LEFT, a pinned structured ANSWER on
+// the RIGHT. The AI's verdict isn't prose buried in a chat log: it's a panel of
+// scannable components — a code, the exact duty breakdown (SpecList), the
+// policies that apply, the sources it rested on. You ask, you watch the agent
+// work (AgentRun), the panel pins; a follow-up refines the SAME panel. Same
+// shape for any look-up-and-explain: tariff/HS, fee lookup, policy Q&A, a
+// spec/compliance desk. The structured answer is the product; chat just steers.
+// ─────────────────────────────────────────────────────────────────────────────
+
+type Tone = "warning" | "info" | "success";
+interface Policy { tone: Tone; title: string; text: string }
+interface Verdict {
+  id: string;
+  query: string;
+  code: string;
+  heading: string;
+  confidence: ConfidenceLevel;
+  basis: string;
+  duty: SpecRow[];
+  dutyTotal: SpecRow;
+  specs: SpecRow[];
+  policies: Policy[];
+  sources: SourceRef[];
+}
+
+const VERDICTS: Verdict[] = [
+  {
+    id: "v-shrimp",
+    query: "Black tiger shrimp, headless shell-on, IQF frozen, 1 kg retail packs",
+    code: "0306.17.10",
+    heading: "Frozen shrimp & prawns of the family Penaeidae — not in airtight containers",
+    confidence: "high",
+    basis:
+      "Headless, shell-on, individually-quick-frozen Penaeus monodon → heading 0306.17 (frozen shrimp of the Penaeidae); national line .10 for consumer packs ≤ 1 kg.",
+    duty: [
+      { label: "Import duty (MFN)", value: "0%" },
+      { label: "VAT", value: "8%" },
+      { label: "Anti-dumping", value: "0%" },
+    ],
+    dutyTotal: { label: "Effective tax on CIF", value: "8%" },
+    specs: [
+      { label: "Chapter", value: "03 — Fish & crustaceans" },
+      { label: "Form", value: "Frozen (IQF)" },
+      { label: "Presentation", value: "Headless, shell-on" },
+      { label: "Net pack", value: "≤ 1 kg" },
+    ],
+    policies: [
+      { tone: "warning", title: "Health certificate required", text: "Aquatic-product imports need a health certificate from the competent authority of the exporting country before clearance." },
+      { tone: "info", title: "Origin can lower the rate", text: "A valid Form D / RCEP certificate of origin keeps the preferential 0% where the MFN line is non-zero." },
+    ],
+    sources: [
+      { id: "s1", label: "Tariff schedule 2026", kind: "knowledge", detail: "Ch. 03" },
+      { id: "s2", label: "Heading 0306.17", kind: "knowledge" },
+      { id: "s3", label: "Circular 31/2022 — VAT", kind: "document", detail: "Art. 1" },
+    ],
+  },
+  {
+    id: "v-shirt",
+    query: "Men's T-shirts, 100% cotton, knit, short sleeve",
+    code: "6109.10.00",
+    heading: "T-shirts, singlets & other vests, knitted or crocheted — of cotton",
+    confidence: "high",
+    basis: "Knitted construction of cotton → heading 6109; subheading .10 for cotton (not man-made fibres).",
+    duty: [
+      { label: "Import duty (MFN)", value: "20%" },
+      { label: "ATIGA (Form D)", value: "0%" },
+      { label: "VAT", value: "8%" },
+    ],
+    dutyTotal: { label: "Effective tax on CIF", value: "8–28%" },
+    specs: [
+      { label: "Chapter", value: "61 — Knitted apparel" },
+      { label: "Construction", value: "Knit" },
+      { label: "Material", value: "100% cotton" },
+    ],
+    policies: [
+      { tone: "info", title: "Origin proof is decisive", text: "Without a Form D the MFN 20% applies; with it the line drops to 0% — a 20-point swing on CIF." },
+    ],
+    sources: [
+      { id: "s1", label: "Tariff schedule 2026", kind: "knowledge", detail: "Ch. 61" },
+      { id: "s2", label: "ATIGA tariff", kind: "knowledge" },
+    ],
+  },
+  {
+    id: "v-batt",
+    query: "Lithium-ion battery packs for e-scooters, 48V",
+    code: "8507.60.10",
+    heading: "Lithium-ion accumulators — of a kind used as the primary source of power",
+    confidence: "medium",
+    basis: "Secondary (rechargeable) lithium-ion cells assembled into a pack → heading 8507.60. The national line turns on end-use; confirm the device class.",
+    duty: [
+      { label: "Import duty (MFN)", value: "5%" },
+      { label: "VAT", value: "10%" },
+    ],
+    dutyTotal: { label: "Effective tax on CIF", value: "15.5%" },
+    specs: [
+      { label: "Chapter", value: "85 — Electrical machinery" },
+      { label: "Cell chemistry", value: "Li-ion (rechargeable)" },
+      { label: "Nominal voltage", value: "48 V" },
+    ],
+    policies: [
+      { tone: "warning", title: "Dangerous-goods handling", text: "Lithium batteries ship under UN 3480 — IATA/IMDG packaging and declaration apply; carriers may require a test summary (UN 38.3)." },
+    ],
+    sources: [
+      { id: "s1", label: "Tariff schedule 2026", kind: "knowledge", detail: "Ch. 85" },
+      { id: "s2", label: "Heading 8507.60", kind: "knowledge" },
+    ],
+  },
+];
+
+type ScriptStep = Omit<AgentRunStep, "status">;
+const SCRIPT: ScriptStep[] = [
+  { id: "r1", label: "Reading the description", detail: "Form, material, processing and presentation extracted." },
+  { id: "r2", label: "tariff_schedule.search", kind: "tool" },
+  { id: "r3", label: "Narrowing the heading", detail: "Matching the goods against chapter notes and exclusions." },
+  { id: "r4", label: "duty_rates.read", kind: "tool" },
+  { id: "r5", label: "Checking import policies", detail: "Permits, certificates and trade-remedy orders for the line." },
+];
+
+export function TplLookup() {
+  const [activeId, setActiveId] = useState(VERDICTS[0].id);
+  const [phase, setPhase] = useState<"running" | "ready">("ready");
+  const [revealed, setRevealed] = useState(SCRIPT.length);
+  const [prompt, setPrompt] = useState("");
+  const [runKey, setRunKey] = useState(0);
+  const timer = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const active = VERDICTS.find((v) => v.id === activeId) ?? VERDICTS[0];
+
+  useEffect(() => {
+    if (runKey === 0) return;
+    setPhase("running");
+    setRevealed(1);
+    let n = 1;
+    timer.current = setInterval(() => {
+      n += 1;
+      setRevealed(n);
+      if (n >= SCRIPT.length) {
+        if (timer.current) clearInterval(timer.current);
+        setPhase("ready");
+      }
+    }, 700);
+    return () => {
+      if (timer.current) clearInterval(timer.current);
+    };
+  }, [runKey]);
+
+  const ask = (text: string) => {
+    const hit =
+      VERDICTS.find((v) => {
+        const q = text.toLowerCase();
+        return (
+          (v.id === "v-shirt" && (q.includes("shirt") || q.includes("cotton") || q.includes("knit"))) ||
+          (v.id === "v-batt" && (q.includes("batter") || q.includes("lithium") || q.includes("cell"))) ||
+          (v.id === "v-shrimp" && (q.includes("shrimp") || q.includes("prawn") || q.includes("frozen")))
+        );
+      }) ?? VERDICTS[0];
+    setActiveId(hit.id);
+    setPrompt("");
+    setRunKey((k) => k + 1);
+  };
+
+  const streaming = phase === "running" && revealed < SCRIPT.length;
+  const steps: AgentRunStep[] = SCRIPT.slice(0, revealed).map((s, i) => ({
+    ...s,
+    status: streaming && i === revealed - 1 ? "running" : "done",
+  }));
+
+  return (
+    <View style={{ flex: 1, flexDirection: "row", backgroundColor: colors.zinc[50] }}>
+      {/* ── LEFT · command + session ───────────────────────────────── */}
+      <View style={{ width: 380, backgroundColor: colors.white, borderRightWidth: 1, borderRightColor: colors.zinc[200] }}>
+        <View style={{ paddingHorizontal: 20, paddingTop: 18, paddingBottom: 12, gap: 2 }}>
+          <Text size="md" weight="semibold">HS classification</Text>
+          <Text size="sm" color="muted">Describe the goods — the agent finds the code and explains the duty</Text>
+        </View>
+        <Divider />
+
+        <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 16 }}>
+          {/* current run */}
+          <AgentRun title={`Classifying — ${active.query}`} steps={steps} state={streaming ? "streaming" : "done"} />
+
+          <View style={{ gap: 8 }}>
+            <Text size="xs" color="muted" weight="medium">This session</Text>
+            {VERDICTS.map((v) => (
+              <PressableHighlight
+                key={v.id}
+                onPress={() => { setActiveId(v.id); setPhase("ready"); setRevealed(SCRIPT.length); }}
+                accessibilityLabel={`Show ${v.query}`}
+                style={{
+                  padding: 10,
+                  borderRadius: 10,
+                  borderWidth: 1,
+                  borderColor: v.id === activeId ? colors.zinc[900] : colors.zinc[200],
+                  backgroundColor: v.id === activeId ? colors.zinc[50] : colors.white,
+                  gap: 3,
+                }}
+              >
+                <Text size="sm" weight="medium" numberOfLines={1}>{v.query}</Text>
+                <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                  <Text size="xs" color="muted" tabular>{v.code}</Text>
+                  <Confidence level={v.confidence} />
+                </View>
+              </PressableHighlight>
+            ))}
+          </View>
+        </ScrollView>
+
+        <View style={{ padding: 12, borderTopWidth: 1, borderTopColor: colors.zinc[200] }}>
+          <PromptField
+            value={prompt}
+            onChangeText={setPrompt}
+            onSubmit={ask}
+            busy={phase === "running"}
+            placeholder="Describe goods, or refine — “what if it's pre-cooked?”"
+          />
+        </View>
+      </View>
+
+      {/* ── RIGHT · the pinned structured answer ───────────────────── */}
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 28, paddingBottom: 48 }}>
+        <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 16 }}>
+          <View style={{ borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 16, backgroundColor: colors.white, overflow: "hidden" }}>
+            {/* verdict header */}
+            <View style={{ padding: 22, gap: 10, backgroundColor: colors.zinc[50], borderBottomWidth: 1, borderBottomColor: colors.zinc[200] }}>
+              <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>Suggested HS code</Text>
+                <Confidence level={active.confidence} />
+              </View>
+              <Text size="xxl" weight="semibold" tabular>{active.code}</Text>
+              <Text size="sm" color="muted">{active.heading}</Text>
+            </View>
+
+            <View style={{ padding: 22, gap: 18 }}>
+              <View style={{ borderLeftWidth: 2, borderLeftColor: colors.zinc[300], paddingLeft: 12 }}>
+                <Text size="sm" color="muted">{active.basis}</Text>
+              </View>
+
+              <View style={{ gap: 8 }}>
+                <Text size="sm" weight="semibold">Duty & tax</Text>
+                <SpecList rows={active.duty} total={active.dutyTotal} />
+              </View>
+
+              <Divider />
+
+              <View style={{ gap: 8 }}>
+                <Text size="sm" weight="semibold">Classification basis</Text>
+                <SpecList rows={active.specs} dense />
+              </View>
+
+              {active.policies.length > 0 ? (
+                <View style={{ gap: 10 }}>
+                  <Text size="sm" weight="semibold">Policies that apply</Text>
+                  {active.policies.map((p, i) => (
+                    <Callout key={i} tone={p.tone}>
+                      <CalloutTitle>{p.title}</CalloutTitle>
+                      <CalloutText>{p.text}</CalloutText>
+                    </Callout>
+                  ))}
+                </View>
+              ) : null}
+
+              <Divider />
+              <Sources sources={active.sources} onOpen={() => {}} />
+            </View>
+          </View>
+
+          <View style={{ paddingHorizontal: 4 }}>
+            <Text size="xs" color="muted">A suggested classification — the declarant confirms the code before filing.</Text>
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}