@lotics/ui 14.2.0 → 14.3.0

package/docs/ai_patterns.md

@@ -39,7 +39,7 @@ Three shapes:
 
 The Document desk's Use-AI fork IS this table as UI: Extract data (1) · Cross-check (2) ·
 Edit with AI (3) — one entry point, three outcome shapes
-([`tpl_documents`](../examples/tpl_documents.tsx)).
+([`tpl_record`](../examples/tpl_record.tsx)'s Documents section).
 
 ## Command / compose — `Composer`
 
@@ -138,10 +138,14 @@ pass it as the `error` prop and it renders as a terminal danger row under the tr
 
 **In a bounded container, wrap it in `FollowScroll`.** An `AgentRun` streaming inside a dialog,
 drawer, or fixed-height panel grows BELOW the fold — a plain scroll container doesn't follow. Wrap
-the feed: `<FollowScroll style={{ maxHeight: … }}><AgentRun … /></FollowScroll>` — pinned to the
-newest content while streaming, unpinned when the human scrolls up to read (`AgentProgress`'s
-expanded panel already does this). A full-page inverted list (chat) follows by construction and
-doesn't need it.
+the feed: `<FollowScroll style={{ maxHeight: … }}><AgentRun … /></FollowScroll>` — the same
+inverted-list mechanism as a chat message list, packaged as a wrapper: the follow happens at
+LAYOUT level (each growth paints already pinned — no scroll-after-paint flash), scrolling up
+releases it, and the feed stays at the newest content when the run settles (`AgentProgress`'s
+expanded panel does this). When settling REPLACES the feed with different content (a results
+pane), swap `FollowScroll` for a plain scroller on the phase flip — the remount opens the new
+content at the top; a transcript that persists just stays in `FollowScroll`. A full-page chat
+list is already inverted and doesn't need the wrapper.
 
 Fed natively by `@lotics/app-sdk`'s `useAgentRun().parts` (reasoning + per-tool I/O + state come
 for free — no hand-assembly): `<AgentRun parts={run.parts} state={…} error={run.error} />` — see
@@ -171,7 +175,7 @@ when done.
 
 Every "the agent proposes → the human accepts / edits / dismisses → nothing auto-applies" surface
 composes from twelve pieces in three groups (all in `@lotics/ui/change_review`; worked example:
-[`tpl_documents`](../examples/tpl_documents.tsx)).
+[`tpl_record`](../examples/tpl_record.tsx)'s Use-AI extract flow).
 
 **Frame**
 
@@ -278,7 +282,9 @@ Back / Next / Cancel / Submit (Next/Submit primary), the step position an eyebro
 question — no progress bar, and no eyebrow at all for a single question. Each step is a `Clarify`; advance only once the
 current question is answered; `onSubmit` gives one `{ value, custom }` per question (aligned by index,
 `custom` true when the answer came from "Other…"), `onCancel` dismisses. All navigation chrome is
-locale-wired (the `clarify` slice). The multi-question form of the ask-back.
+locale-wired (the `clarify` slice). The multi-question form of the ask-back. Worked example:
+[`tpl_item_list`](../examples/tpl_item_list.tsx)'s intake fork (the wizard between the analyze
+and import runs).
 
 ## Provenance — `Sources`
 
@@ -362,7 +368,7 @@ ranked set, don't cram it into chat prose:
   so the alternatives are first-class and picking a different one changes the outcome; refining
   the description re-ranks. For look-up-and-explain: tariff/classification codes, fee lookup,
   policy Q&A, a spec/compliance desk. (NOT a chat with the answer in a bubble.)
-- **Document desk** ([`tpl_documents`](../examples/tpl_documents.tsx) — THE go-to for
+- **Document desk** (in [`tpl_record`](../examples/tpl_record.tsx) — THE go-to for
   document-driven records) — the record's files block feeds ONE "Use AI" entry that FORKS into
   the two document tasks, each a specialized run with a task-pure result: **Extract** (files
   read → fields already matching fold into one quiet line → every add / update / conflict a
@@ -376,6 +382,15 @@ ranked set, don't cram it into chat prose:
   full-page `FileGalleryModal`. Plus **Create documents**: a readiness checklist (unchecked by
   default, missing inputs called out) → generate → the files land back on the record. Never merge
   the two AI tasks into one mixed output — the fork is the design.
+- **Intake desk** (in [`tpl_item_list`](../examples/tpl_item_list.tsx)'s "Enter data" fork) — the
+  register's New CTA leads with AI: a `FileDropzone` hero → a short ANALYZE run reads the files →
+  `ClarifyWizard` asks the ambiguities the analysis surfaced → the IMPORT run drafts records →
+  `ChangeRecord` cards + one Apply land the rows; the manual VARIANTS sit below the dropzone as
+  `CardSelectItem`s, each opening the classic create-then-refine form. The template mocks the
+  clarify step as TWO app-orchestrated phases (analyze-run → wizard → import-run); a real app
+  can do it in ONE run — every app agent carries `ask_user_choice`, so the run PARKS on the
+  agent's own question and `useAgentRun().pendingChoice`/`answerChoice` drive the same
+  `ClarifyWizard` (see the SDK's [ai doc](../../app-sdk/docs/ai.md)).
 - **Triage** — an inbox the agent classified + routed is a `ChangeReview` of `Change`s (body: the
   item + the agent's call; the standard Keep/Drop verbs; Keep-all covers the high-confidence
   sweep). Leads, tickets, documents, emails.

package/docs/catalog.md

@@ -1001,10 +1001,13 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`agent_progress`** — `AgentProgress`: `AgentRun`'s compact, floating, expandable form (same
   `parts` prop) — a composer's working state.
 - **`follow_scroll`** — `FollowScroll`: a scroll container that FOLLOWS its growing content —
-  pinned to the bottom as children stream in; scrolling up unpins (read history), scrolling back
-  re-pins. Wrap a streaming `AgentRun` with it in any bounded container (a dialog, a drawer,
-  a panel — put the height bound on `style`); `AgentProgress`'s expanded panel uses it. Chat
-  doesn't need it (an inverted message list follows by construction).
+  the chat message list's inverted mechanism packaged as a wrapper (single-cell inverted list),
+  so the follow happens at LAYOUT level: each growth paints already pinned (no flash), scrolling
+  up releases it, and short content still reads top-down. Wrap a streaming `AgentRun` with it in
+  any bounded container (a dialog, a drawer, a panel — put the height bound on `style`);
+  `AgentProgress`'s expanded panel uses it. Inherits the inverted pattern's quirks (scrollbar
+  thumb runs opposite; keyboard paging inverted) — same as chat. A full-page chat list is
+  already inverted and doesn't need it.
 - **`confidence`** — `Confidence` + `ConfidenceLevel` + `levelFromScore`: calibrated
   high/med/low; localized via the provider.
 - **`change_review`** — the COMPOUND review family — frame: `ChangeReview` provider/stack ·

package/docs/templates.md

@@ -50,7 +50,7 @@ the package index is [../AGENTS.md](../AGENTS.md).
 | Shift signup + staffing | `tpl_shifts` |
 | AI produces a visual artifact on a canvas | `tpl_dieline` |
 | AI ranks answers — look-up-and-explain | `tpl_lookup` |
-| AI over a record's documents (extract / cross-check / generate) | `tpl_documents` |
+| AI over a record's documents (extract / cross-check / generate) | `tpl_record` — its Documents + Document set sections |
 
 ## Composition rules — how a record surface is assembled
 
@@ -204,6 +204,17 @@ screens — register, per-row action, gated selection, and act-on-many in one. T
     newest first — an entry's attachments ride its expandable details as a thumbnail grid
     whose press opens the shared `FileGalleryModal`.
   - A closing `DangerZone`.
+- **The "Enter data" INTAKE FORK** (the New CTA) — AI FIRST, the form as fallback, one phased
+  dialog: a `FileDropzone` hero (drop the customer's files) → a short ANALYZE stream
+  (`AgentRun` in a `FollowScroll`) reads them → `ClarifyWizard` asks the ambiguities the
+  analysis surfaced (described options, one custom-answer slot) → the IMPORT stream drafts the
+  records → `ChangeRecord` cards to Keep/Drop (fee editable in place) + one outcome-named
+  Apply that really lands the rows in the register (no drawer on a bulk landing). BELOW the
+  dropzone, "or enter manually" → the record VARIANTS as `CardSelectItem`s, each opening the
+  same THREE-field create-then-refine form (a single manual create still opens its drawer).
+  The template mocks the clarify step as two app-orchestrated phases; a real app can do it in
+  ONE run — every app agent carries `ask_user_choice`, so the run parks on the agent's own
+  question and `useAgentRun().pendingChoice`/`answerChoice` drive the same `ClarifyWizard`.
 
 ### `tpl_pick` — the guided queue
 
@@ -266,15 +277,13 @@ billing, and quick-capture templates. Top → bottom:
   (dashed add-ghost when unset), sized to the list's `trailingWidth` so the title never overlaps.
   (Contrast the General section's dates/assignee, the same editors in the default `variant="form"`
   — a zinc-50 chip + hover-border + the full member chip.)
-- **Documents** — the Agents "Document desk" pattern (shared with `tpl_documents` — change
-  it in BOTH): the register `Table` (search · Add files) whose selection feeds the
-  `FloatingActionBar` → ONE "Use AI" fork (extract / cross-check / edit-with-AI). Every
-  row's leading visual is a `FileThumbnail` in ONE square 32px slot — an image file fills
-  it as a real thumbnail, a document centers its badge in it — never a bare `FileBadge`
-  (mixed footprints misalign the identity column). ONE
-  sanctioned divergence: GENERATION — on the record page this desk holds what ARRIVES and
-  Create moves to the Document set OUTPUT section below; `tpl_documents` (no output
-  pipeline on its page) keeps the toolbar "Create documents" dialog.
+- **Documents** — the Agents "Document desk" pattern (this template is its worked example —
+  see the Agents chapter below): the register `Table` (search · Add files) whose selection
+  feeds the `FloatingActionBar` → ONE "Use AI" fork (extract / cross-check / edit-with-AI).
+  Every row's leading visual is a `FileThumbnail` in ONE square 32px slot — an image file
+  fills it as a real thumbnail, a document centers its badge in it — never a bare `FileBadge`
+  (mixed footprints misalign the identity column). The desk holds what ARRIVES; generation
+  lives in the Document set OUTPUT section below.
 - **Customer — the LINKED-RECORD reference** via **`LinkedRecordBox`**: another record's data
   NEVER renders as field rows on this one — a BORDERED, fully pressable box (glyph anchor ·
   identity · facts stacked VERTICALLY) whose press opens the detail drawer; the verbs ride the
@@ -460,8 +469,9 @@ double-shift days flagged). Accepting and assigning move the board live.
 ## Agents
 
 Screens where AI does the work and the human reviews. `tpl_dieline` *produces* an artifact;
-`tpl_lookup` and `tpl_documents` *structure* information for a decision. The AI component
-contracts and the propose→review→apply loop live in [ai_patterns.md](./ai_patterns.md).
+`tpl_lookup` *structures* information for a decision; the document desk (in `tpl_record`)
+does both over a record's files. The AI component contracts and the propose→review→apply
+loop live in [ai_patterns.md](./ai_patterns.md).
 
 ### `tpl_dieline` — the design canvas
 
@@ -484,12 +494,15 @@ rows, policy `Callout`s, `Confidence`, and `Sources`. The flow is input → matc
 a single confident verdict: classification is ambiguous, so the alternatives are first-class.
 Refine the description in a follow-up and the ranking updates.
 
-### `tpl_documents` — the document desk
+### The document desk — in `tpl_record`
 
-THE worked example for everything document-driven on a record. A record's files block feeds
-ONE **"Use AI"** entry — the one AI entry point, never per-row AI buttons (the per-row `⋯`
+THE worked example for everything document-driven on a record lives on the record template
+(its Documents section — no standalone template). A record's files block feeds ONE
+**"Use AI"** entry — the one AI entry point, never per-row AI buttons (the per-row `⋯`
 menu holds only Rename/Download). Inside its dialog the run FORKS into three tasks as
-`CardSelectItem`s (select → a confirming footer CTA, never one-click):
+`CardSelectItem`s (select → a confirming footer CTA, never one-click), and the streaming
+phase runs inside a `FollowScroll` (swapped back to `DialogScrollArea` on the phase flip,
+so review opens at the top):
 
 - **Extract** (read the documents, fill the record) — the open `ChangeFields` review: ONE
   `Change` section per record whose body stacks a `ChangeField` per proposed value (label ·
@@ -502,10 +515,9 @@ menu holds only Rename/Download). Inside its dialog the run FORKS into three tas
 - **Edit with AI** — the `askAi` handoff: dialogue-shaped file iteration happens in the
   platform chat (the documents attached to a fresh thread), not in the app.
 
-Separately, a **Create documents** action opens its own dialog: a readiness checklist
-(hand-composed rows — per-document missing inputs open a fill screen, saved values recompute
-readiness) → generation runs as a visible `AgentRun`, never a teleport → generated files stay
-PENDING (previewable) until the user commits them onto the record.
+GENERATION is separate and deterministic — the record's Document set OUTPUT section
+(readiness checklist → template fill with a `loading` trigger, never `AgentRun` theater;
+the set appears at once).
 
 All mock — `useState` plus a timer streams the `AgentRun`; a real app drives the same
 components from its live agent run.

package/examples/tpl_item_list.tsx

@@ -1,5 +1,6 @@
-import { useState, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import { ScrollView, View } from "react-native";
+import type { UIMessagePart, UIDataTypes, UITools } from "ai";
 import { Text } from "@lotics/ui/text";
 import { colors, type ColorName } from "@lotics/ui/colors";
 import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
@@ -50,7 +51,14 @@ import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
 import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
 import { Ledger, LedgerGroup, LedgerRow, LedgerTotal } from "@lotics/ui/ledger";
 import { ProgressBar } from "@lotics/ui/progress_bar";
-import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle } from "@lotics/ui/dialog";
+import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle, DialogScrollArea } from "@lotics/ui/dialog";
+import { AgentRun } from "@lotics/ui/agent_run";
+import { FollowScroll } from "@lotics/ui/follow_scroll";
+import { ClarifyWizard, type ClarifyWizardAnswer, type ClarifyWizardQuestion } from "@lotics/ui/clarify_wizard";
+import { CardSelectItem } from "@lotics/ui/card_select_item";
+import { FileDropzone } from "@lotics/ui/file_dropzone";
+import { ChangeField, ChangeRecord, ChangeReview, ChangeReviewActions, ChangeReviewHeader, ChangeValueInput, type ChangeStatus } from "@lotics/ui/change_review";
+import { useScreenSize } from "@lotics/ui/use_screen_size";
 import { MemberSelect } from "@lotics/ui/member_select";
 import { Callout, CalloutText } from "@lotics/ui/callout";
 import { Timeline, type TimelineItem } from "@lotics/ui/timeline";
@@ -1025,71 +1033,294 @@ function LinkedRecordScreen({ ma }: { ma: string }) {
   );
 }
 
-/** New record is a THREE-field gate — past the popover threshold (1–2
- *  fields), so it's a Dialog. NOT a wizard: create-then-refine means the
- *  gate stays minimal and the record's own workspace (the drawer it opens
- *  into) is where everything else is refined. */
-function CreateRecordDialog({ onCreate }: { onCreate: (khach: string, dienThoai: string, phi: number) => void }) {
+// ─── Enter data — the INTAKE fork ────────────────────────────────────────────
+// AI FIRST, form as fallback. The one "Enter data" CTA opens a phased dialog:
+// drop files (the hero) → a short ANALYZE stream reads them → `ClarifyWizard`
+// asks the genuine ambiguities the analysis surfaced → the IMPORT stream drafts
+// the records → `ChangeRecord` cards to review + apply (rows really land).
+// Below the dropzone, the MANUAL variants (each flavors the same 3-field
+// create-then-refine gate). The mock plays the clarify step as two phases; a
+// real app can run it as ONE agent run — every app agent carries
+// `ask_user_choice`, so the run parks on the agent's own question and
+// `useAgentRun().pendingChoice`/`answerChoice` drive this same wizard.
+
+type Part = UIMessagePart<UIDataTypes, UITools>;
+type IntakePhase = "intake" | "analyze" | "clarify" | "running" | "review" | "form";
+type ManualVariant = "export" | "import";
+
+type Proposal = { id: string; khach: string; dienThoai: string; phi: number; orders: string };
+
+// What the (mock) import drafts, per the wizard's grouping answer. A real app
+// takes these from the import run's structured output.
+const PROPOSED_BY_CUSTOMER: Proposal[] = [
+  { id: "pc1", khach: "Meridian Trading Co.", dienThoai: "(555) 014-2288", phi: 240, orders: "PO-7311 · PO-7314" },
+  { id: "pc2", khach: "Northgate Textiles", dienThoai: "(555) 019-4471", phi: 180, orders: "PO-7312 · PO-7316" },
+  { id: "pc3", khach: "Blue Harbor Foods", dienThoai: "", phi: 210, orders: "PO-7313 · PO-7315" },
+];
+const PROPOSED_BY_ORDER: Proposal[] = PROPOSED_BY_CUSTOMER.flatMap((c) =>
+  c.orders.split(" · ").map((po, i) => ({ id: `${c.id}-${i}`, khach: c.khach, dienThoai: c.dienThoai, phi: Math.round(c.phi / 2), orders: po })),
+);
+
+// The wizard's questions come FROM the analysis (a real app renders them off the
+// analyze run's structured output) — informed, described, one custom-answer slot.
+const INTAKE_QUESTIONS: ClarifyWizardQuestion[] = [
+  {
+    question: "6 orders across 3 customers. How should they become records?",
+    answers: [
+      { value: "customer", label: "One record per customer", description: "3 records — each customer's orders grouped into one workspace and checklist." },
+      { value: "order", label: "One record per order", description: "6 records — every order tracked on its own; more rows, finer-grained status." },
+    ],
+  },
+  {
+    question: "Blue Harbor Foods isn't in the customer book yet. What should happen?",
+    allowCustom: true,
+    answers: [
+      { value: "create", label: "Create the customer", description: "A new customer record is added and linked as the records land." },
+      { value: "skip", label: "Leave unassigned", description: "The records are created without a customer — link one later from each record." },
+    ],
+  },
+];
+
+const doneTool = (id: string, name: string): Part => ({ type: "dynamic-tool", toolName: name, toolCallId: id, state: "output-available", input: undefined, output: undefined });
+
+const analyzeScript = (fileNames: string[]): Part[] => [
+  { type: "reasoning", text: "Before drafting anything I need to know what these files contain and whether the parties already exist in the book." },
+  ...fileNames.map((n, i) => doneTool(`a${i}`, `Read ${n}`)),
+  doneTool("a-match", "Match customers"),
+  { type: "text", text: "Found **6 order confirmations** across **3 customers** — one customer isn't in the book yet. Two quick questions before I draft the records." },
+];
+
+const importScript = (grouping: "customer" | "order"): Part[] => [
+  { type: "reasoning", text: grouping === "customer" ? "Group the six orders under their three customers, one record each, fees summed per customer." : "One record per order — six records, fees split from the order totals." },
+  doneTool("i1", "Extract order lines"),
+  doneTool("i2", "Match customers"),
+  doneTool("i3", grouping === "customer" ? "Draft 3 records" : "Draft 6 records"),
+  { type: "text", text: `Drafted **${grouping === "customer" ? 3 : 6} records** — review below, edit any value, then apply.` },
+];
+
+/** The manual gate stays the THREE-field create-then-refine form — past the
+ *  popover threshold (1–2 fields), so a Dialog pane; NOT a wizard: the record's
+ *  own workspace (the drawer it opens into) is where everything else is refined. */
+function EnterDataDialog({ onCreate, onCreateMany }: {
+  onCreate: (khach: string, dienThoai: string, phi: number) => void;
+  onCreateMany: (records: { khach: string; dienThoai: string; phi: number }[]) => void;
+}) {
+  const { small } = useScreenSize();
   const [open, setOpen] = useState(false);
+  const [phase, setPhase] = useState<IntakePhase>("intake");
+  const [fileNames, setFileNames] = useState<string[]>([]);
+  const [variant, setVariant] = useState<ManualVariant>("export");
+  const [grouping, setGrouping] = useState<"customer" | "order">("customer");
+  // review state — per-card verdicts + the one editable value (the fee)
+  const [cardStatus, setCardStatus] = useState<Record<string, ChangeStatus>>({});
+  const [fees, setFees] = useState<Record<string, string>>({});
+  // form state (the manual gate)
   const [khach, setKhach] = useState("");
   const [dienThoai, setDienThoai] = useState("");
   const [phi, setPhi] = useState<number | null>(null);
-  const create = () => {
-    if (khach.trim() === "") return;
-    onCreate(khach.trim(), dienThoai.trim(), phi ?? 0);
-    setOpen(false);
+
+  // The stream reveal — one revealer serves both the analyze and import phases.
+  const [revealed, setRevealed] = useState(0);
+  const script = phase === "analyze" ? analyzeScript(fileNames) : phase === "running" ? importScript(grouping) : [];
+  useEffect(() => {
+    if (phase !== "analyze" && phase !== "running") return;
+    setRevealed(0);
+    const total = phase === "analyze" ? analyzeScript(fileNames).length : importScript(grouping).length;
+    let n = 0;
+    const t = setInterval(() => {
+      n += 1;
+      setRevealed(n);
+      if (n >= total) {
+        clearInterval(t);
+        // Auto-advance: analysis flows into the wizard; the import into review.
+        setTimeout(() => setPhase(phase === "analyze" ? "clarify" : "review"), 500);
+      }
+    }, 650);
+    return () => clearInterval(t);
+    // Deliberately keyed on `phase` alone — the file list and grouping are
+    // settled before their stream phase begins.
+  }, [phase]);
+
+  const proposals = grouping === "customer" ? PROPOSED_BY_CUSTOMER : PROPOSED_BY_ORDER;
+  // Kept = explicitly ACCEPTED (the kit's review contract): Apply stays disabled
+  // at 0 kept, and the bar's own Keep-all presses every pending card's Keep.
+  const keptCount = proposals.filter((p) => cardStatus[p.id] === "accepted").length;
+
+  const reset = () => {
+    setPhase("intake");
+    setFileNames([]);
+    setCardStatus({});
+    setFees({});
     setKhach("");
     setDienThoai("");
     setPhi(null);
   };
+  const close = () => { setOpen(false); reset(); };
+
+  const applyProposals = () => {
+    const kept = proposals.filter((p) => cardStatus[p.id] === "accepted");
+    onCreateMany(kept.map((p) => ({ khach: p.khach, dienThoai: p.dienThoai, phi: Number(fees[p.id] ?? p.phi) || 0 })));
+    close();
+  };
+
+  const createManual = () => {
+    if (khach.trim() === "") return;
+    onCreate(khach.trim(), dienThoai.trim(), phi ?? 0);
+    close();
+  };
+
+  const title =
+    phase === "form" ? (variant === "export" ? "New export case" : "New import case")
+    : phase === "intake" ? "Enter data"
+    : "Import from files";
+
   return (
     <>
-      <Button title="New record" color="primary" onPress={() => setOpen(true)} />
-      <Dialog width={440} open={open} onOpenChange={setOpen}>
+      <Button title="Enter data" color="primary" onPress={() => setOpen(true)} />
+      <ChangeReview>
+      <Dialog width={phase === "review" ? 560 : 480} open={open} onOpenChange={(o) => { if (!o) close(); }}>
         <DialogHeader>
-          <DialogHeaderTitle>New record</DialogHeaderTitle>
+          <DialogHeaderTitle>{title}</DialogHeaderTitle>
         </DialogHeader>
-        <View style={{ paddingHorizontal: 24, paddingBottom: 12, gap: 12 }}>
-          <Text size="xs" color="muted">The record starts in Processing and opens for refinement — details, tasks, and payment live on the record itself.</Text>
-          <FormField label="Customer">
-            {khach === "" ? (
-              /* find-or-create: the input stays a pure search (reflectSelection
-                 off — a custom "create" pick has no option to reflect anyway);
-                 the pick renders BELOW as the attached line with Change */
-              <Combobox
-                options={CUSTOMER_OPTIONS}
-                onValueChange={(opt) => setKhach(opt.label ?? opt.value)}
-                reflectSelection={false}
-                allowCustom
-                customOptionPlacement="top"
-                customOptionLabel={(q) => `Create new customer “${q}”`}
-              >
-                <ComboboxInput icon="search" placeholder="Search customers, or add a new one…" accessibilityLabel="Customer" />
-                <ComboboxContent />
-              </Combobox>
-            ) : (
-              <View style={{ flexDirection: "row", alignItems: "center", gap: 8, minHeight: 40 }}>
-                <Icon name={CUSTOMER_OPTIONS.some((o) => o.label === khach) ? "building-2" : "plus"} size={16} color={colors.zinc[400]} />
-                <Text size="sm" weight="medium" style={{ flex: 1 }} numberOfLines={1}>
-                  {khach}
-                  {CUSTOMER_OPTIONS.some((o) => o.label === khach) ? "" : "  ·  new customer"}
-                </Text>
-                <Link size="sm" onPress={() => setKhach("")} accessibilityLabel="Change customer">Change</Link>
-              </View>
-            )}
-          </FormField>
-          <FormField label="Phone" optional optionalLabel="Optional">
-            <TextInputField value={dienThoai} onChangeText={setDienThoai} placeholder="(555) 000-0000" accessibilityLabel="Phone" />
-          </FormField>
-          <FormField label="Service fee">
-            <NumberInput value={phi} onValueChange={setPhi} min={0} accessibilityLabel="Service fee" />
-          </FormField>
-        </View>
-        <DialogFooter>
-          <Button title="Cancel" color="secondary" onPress={() => setOpen(false)} />
-          <Button title="Create record" color="primary" disabled={khach.trim() === ""} onPress={create} />
-        </DialogFooter>
+
+        {phase === "intake" ? (
+          <View style={{ paddingHorizontal: 24, paddingBottom: 20, gap: 16 }}>
+            {/* the hero: AI reads the files — no manual step */}
+            <FileDropzone
+              label="Drop the customer's files"
+              hint="Orders, invoices, spreadsheets — AI reads them and drafts the records"
+              onFiles={(fs) => {
+                setFileNames(fs.length > 0 ? fs.map((f) => f.name) : ["orders-june.pdf", "manifest.xlsx"]);
+                setPhase("analyze");
+              }}
+            />
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+              <View style={{ flex: 1 }}><Divider /></View>
+              <Text size="xs" color="muted">or enter manually</Text>
+              <View style={{ flex: 1 }}><Divider /></View>
+            </View>
+            <View style={{ gap: 8 }}>
+              <CardSelectItem accessibilityLabel="New export case" onPress={() => { setVariant("export"); setPhase("form"); }} style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                <Icon name="arrow-up" size={18} color={colors.zinc[700]} />
+                <View style={{ flex: 1, gap: 2 }}>
+                  <Text size="sm" weight="semibold">Export case</Text>
+                  <Text size="xs" color="muted">Outbound paperwork — the record seeds the customs-out checklist.</Text>
+                </View>
+              </CardSelectItem>
+              <CardSelectItem accessibilityLabel="New import case" onPress={() => { setVariant("import"); setPhase("form"); }} style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                <Icon name="arrow-down" size={18} color={colors.zinc[700]} />
+                <View style={{ flex: 1, gap: 2 }}>
+                  <Text size="sm" weight="semibold">Import case</Text>
+                  <Text size="xs" color="muted">Inbound paperwork — the record seeds the customs-in checklist.</Text>
+                </View>
+              </CardSelectItem>
+            </View>
+          </View>
+        ) : null}
+
+        {phase === "analyze" || phase === "running" ? (
+          // Streams follow in a FollowScroll (padding mirrors DialogScrollArea);
+          // the phase flip swaps the scroller out, so the next pane opens at the top.
+          <FollowScroll contentContainerStyle={{ paddingBottom: 24, paddingHorizontal: small ? 16 : 24 }}>
+            <AgentRun parts={script.slice(0, revealed)} state={revealed >= script.length ? "done" : "streaming"} />
+          </FollowScroll>
+        ) : null}
+
+        {phase === "clarify" ? (
+          <View style={{ paddingHorizontal: 24, paddingBottom: 20 }}>
+            <ClarifyWizard
+              questions={INTAKE_QUESTIONS}
+              onCancel={() => setPhase("intake")}
+              onSubmit={(answers: ClarifyWizardAnswer[]) => {
+                setGrouping(answers[0]?.value === "order" ? "order" : "customer");
+                setPhase("running");
+              }}
+            />
+          </View>
+        ) : null}
+
+        {phase === "review" ? (
+          <DialogScrollArea>
+            <View style={{ gap: 8 }}>
+              <ChangeReviewHeader title={`${proposals.length} records drafted`} />
+              {proposals.map((p) => (
+                <ChangeRecord
+                  key={p.id}
+                  id={p.id}
+                  tone="add"
+                  title={grouping === "customer" ? p.khach : `${p.orders} — ${p.khach}`}
+                  summary={`${p.orders}${p.dienThoai ? ` · ${p.dienThoai}` : ""}`}
+                  status={cardStatus[p.id] ?? "pending"}
+                  onAccept={() => setCardStatus((s) => ({ ...s, [p.id]: "accepted" }))}
+                  onReject={() => setCardStatus((s) => ({ ...s, [p.id]: "rejected" }))}
+                  onUndo={() => setCardStatus((s) => ({ ...s, [p.id]: "pending" }))}
+                >
+                  <ChangeField label="Customer" value={p.khach} summary={p.khach} />
+                  {p.dienThoai ? <ChangeField label="Phone" value={p.dienThoai} summary={p.dienThoai} /> : null}
+                  <ChangeField label="Service fee" value={fees[p.id] ?? String(p.phi)} summary={formatMoney(Number(fees[p.id] ?? p.phi) || 0)}>
+                    <ChangeValueInput value={fees[p.id] ?? String(p.phi)} onChangeText={(v) => setFees((s) => ({ ...s, [p.id]: v }))} accessibilityLabel={`Service fee for ${p.khach}`} />
+                  </ChangeField>
+                </ChangeRecord>
+              ))}
+            </View>
+          </DialogScrollArea>
+        ) : null}
+
+        {phase === "form" ? (
+          <View style={{ paddingHorizontal: 24, paddingBottom: 12, gap: 12 }}>
+            <Text size="xs" color="muted">
+              {variant === "export"
+                ? "The export case starts in Processing — details, tasks, and payment live on the record itself."
+                : "The import case starts in Processing — details, tasks, and payment live on the record itself."}
+            </Text>
+            <FormField label="Customer">
+              {khach === "" ? (
+                /* find-or-create: the input stays a pure search (reflectSelection
+                   off — a custom "create" pick has no option to reflect anyway);
+                   the pick renders BELOW as the attached line with Change */
+                <Combobox
+                  options={CUSTOMER_OPTIONS}
+                  onValueChange={(opt) => setKhach(opt.label ?? opt.value)}
+                  reflectSelection={false}
+                  allowCustom
+                  customOptionPlacement="top"
+                  customOptionLabel={(q) => `Create new customer “${q}”`}
+                >
+                  <ComboboxInput icon="search" placeholder="Search customers, or add a new one…" accessibilityLabel="Customer" />
+                  <ComboboxContent />
+                </Combobox>
+              ) : (
+                <View style={{ flexDirection: "row", alignItems: "center", gap: 8, minHeight: 40 }}>
+                  <Icon name={CUSTOMER_OPTIONS.some((o) => o.label === khach) ? "building-2" : "plus"} size={16} color={colors.zinc[400]} />
+                  <Text size="sm" weight="medium" style={{ flex: 1 }} numberOfLines={1}>
+                    {khach}
+                    {CUSTOMER_OPTIONS.some((o) => o.label === khach) ? "" : "  ·  new customer"}
+                  </Text>
+                  <Link size="sm" onPress={() => setKhach("")} accessibilityLabel="Change customer">Change</Link>
+                </View>
+              )}
+            </FormField>
+            <FormField label="Phone" optional optionalLabel="Optional">
+              <TextInputField value={dienThoai} onChangeText={setDienThoai} placeholder="(555) 000-0000" accessibilityLabel="Phone" />
+            </FormField>
+            <FormField label="Service fee">
+              <NumberInput value={phi} onValueChange={setPhi} min={0} accessibilityLabel="Service fee" />
+            </FormField>
+          </View>
+        ) : null}
+
+        {phase === "form" ? (
+          <DialogFooter>
+            <Button title="Back" color="secondary" onPress={() => { setKhach(""); setDienThoai(""); setPhi(null); setPhase("intake"); }} />
+            <Button title="Create record" color="primary" disabled={khach.trim() === ""} onPress={createManual} />
+          </DialogFooter>
+        ) : phase === "review" ? (
+          <DialogFooter>
+            <ChangeReviewActions onDiscard={close} onApply={applyProposals} applyLabel={`Add ${keptCount} ${keptCount === 1 ? "record" : "records"}`} />
+          </DialogFooter>
+        ) : null}
       </Dialog>
+      </ChangeReview>
     </>
   );
 }
@@ -1119,7 +1350,7 @@ export function TplItemList() {
   // EMPTY; the commons wait as ghost suggestions).
   const [rows, setRows] = useState<HoSo[]>(HO_SO);
   const nextMa = useRef(64);
-  const createRecord = (khach: string, dienThoai: string, phi: number) => {
+  const addRow = (khach: string, dienThoai: string, phi: number): string => {
     const now = new Date();
     const ma = `RC-2026-${String(nextMa.current++).padStart(4, "0")}`;
     const row: HoSo = {
@@ -1134,16 +1365,30 @@ export function TplItemList() {
     };
     setRows((prev) => [row, ...prev]);
     setTaskMap((prev) => ({ ...prev, [ma]: [] }));
-    // Reveal what was just created: clear every filter that could hide the
-    // new row, land on page 1, open its drawer.
+    return ma;
+  };
+  // Reveal what was just created: clear every filter that could hide the new
+  // row(s) and land on page 1.
+  const revealNew = () => {
     setTab("all");
     setSearch("");
     setAssignee([]);
     setFeeStatus(null);
     setSort(null);
     setPage(0);
+  };
+  const createRecord = (khach: string, dienThoai: string, phi: number) => {
+    const ma = addRow(khach, dienThoai, phi);
+    revealNew();
+    // A single manual create opens its drawer for refinement (create-then-refine).
     setOpenMa(ma);
   };
+  // The AI-import apply — rows land at the top of the register; no drawer (a
+  // bulk landing is reviewed IN the register, refined record by record later).
+  const createRecordsBulk = (records: { khach: string; dienThoai: string; phi: number }[]) => {
+    records.forEach((r) => addRow(r.khach, r.dienThoai, r.phi));
+    revealNew();
+  };
   const [sort, setSort] = useState<SortState | null>(null);
   const [assignee, setAssignee] = useState<string[]>([]);
   const [feeStatus, setFeeStatus] = useState<"paid" | "unpaid" | null>(null);
@@ -1285,7 +1530,7 @@ export function TplItemList() {
               onChange={(v) => { setFeeAmount(v); setPage(0); }}
             />
           </View>
-          <CreateRecordDialog onCreate={createRecord} />
+          <EnterDataDialog onCreate={createRecord} onCreateMany={createRecordsBulk} />
         </View>
 
         {/* light summary of the filtered register (search/assignee/fee applied; status counts stay visible across tabs) */}