@lotics/ui 15.1.1 → 15.2.1

package/AGENTS.md

@@ -16,7 +16,7 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
 |---|---|
 | [docs/catalog.md](./docs/catalog.md) | **The complete inventory** — Reach-by-role (each data role → the ONE canonical component) + every `@lotics/ui/<module>` entry point (incl. `@lotics/ui/vite`'s `loticsOptimizeDeps` for a custom-code app's `vite.config.ts`). Read before building any screen; reuse first. |
 | [docs/data_entry.md](./docs/data_entry.md) | Which editing pattern for which job — inline edit, fieldset forms, find-or-create (`Combobox`), line items, handoffs, phased records, billing, tags, dispositions, attachments (incl. the three-way file INTAKE: CTA + `FileDropTarget` + `usePasteFiles`), stage gates. |
-| [docs/ai_patterns.md](./docs/ai_patterns.md) | AI proposes, the human decides — composer, live run feed (`AgentRun`), review-before-apply, findings, provenance, confidence; the UI half of the SDK's [ai doc](../app-sdk/docs/ai.md). |
+| [docs/ai_patterns.md](./docs/ai_patterns.md) | AI acts, the human stays in charge — composer, live run feed (`AgentRun`), the one law's split (modify → review-before-apply; create → save-direct + result list), findings, provenance, confidence; the UI half of the SDK's [ai doc](../app-sdk/docs/ai.md). |
 | [docs/composition.md](./docs/composition.md) | The design-language contract — canvas + content column, heading altitude, banded cards, register vs inset rows, master-detail `Drawer`, view controls, color discipline, typography, whitespace. |
 | [docs/templates.md](./docs/templates.md) | The map of `examples/tpl_*.tsx` — what shape each template solves and which to start from (copy + adapt, never import) — plus the record-surface composition rules (pipeline order, static shape, decision budget). |
 

package/docs/ai_patterns.md

@@ -11,19 +11,40 @@ file). Every component here is in the [catalog](./catalog.md) inventory.
 
 ## The one law
 
-The AI surfaces share ONE law: the agent never commits — it **proposes**, the human
-accepts / edits / dismisses, the deterministic app applies. The agent owns judgment
-(recognition, estimation, intent→parameters); the app owns geometry, math, and the write.
-Compose the surfaces as a loop, and reach for the right one by job.
+The AI surfaces share ONE law: the agent never commits **invisibly**. The agent owns judgment
+(recognition, estimation, intent→parameters); the app owns geometry, math, and the write. How
+the human stays in charge follows the stakes — split by whether a before-state exists:
+
+- **Modifying an existing record** — a diff exists, and a wrong value can clobber a right one →
+  review BEFORE apply: the `ChangeReview` family, Keep/Drop per change, nothing auto-applies.
+- **Creating new records** (intake, import, drafting rows) — there is no before-state, so there
+  is nothing to diff → **apply directly, then show the result**. The run ends on a per-item
+  result list — the receipt, not a gate. A result row is a plain composition (no component —
+  hand-roll it): the outcome mark (`success` = `circle-check` green-600 · `error` =
+  `circle-alert` red-600 · needs-attention = `circle-alert` amber-600 · skipped = `minus`
+  zinc-400, size 18) · outcome-first title (sm semibold) · the key figures / the reason (xs,
+  danger ink on error) · one-line provenance (xs muted) · a right-slot `Button` (an
+  open-record jump, a retry); rows stack with `gap: 12`. A batch-level failure lands on
+  EVERY row as its reason — never ALSO paint it as a banner above the list (a top `Callout`
+  is only for information the rows don't carry). The closing footer button is
+  dismissal (secondary "Done"), never primary. Correction uses
+  the record's ORDINARY verbs — open it, edit or delete (make the delete workflow CASCADE the
+  record's children, so deletion is always safe) — never a special undo affordance duplicating
+  the delete verb in a second place. A review gate on a create degenerates into proofreading a
+  wall of cards the user blind-confirms; the register shows the same data better. Fewer steps,
+  same control.
+
+Either way the deterministic app applies the write. Compose the surfaces as a loop, and reach
+for the right one by job.
 
 ## Which AI surface — decide by the OUTCOME's shape, not the task's topic
 
 Three shapes:
 
-1. **Field writes** (extract, match, rank, classify → the record changes) → **in-app agent**
-   (`useAgentRun`) + **`ChangeReview`**. The commits must obey the diff law (Keep/Drop per
-   change, app-workflow writes, bounded app authority), and the operator wants one button +
-   a review — never a prompt box.
+1. **Field writes** (extract, match, rank, classify → records change) → **in-app agent**
+   (`useAgentRun`), then split by the one law: modifying an existing record → **`ChangeReview`**
+   (Keep/Drop per change, app-workflow writes, bounded app authority); creating new records →
+   **save direct + a result list** (correction = the record's ordinary verbs). Either way one button, never a prompt box.
 2. **Evidence for an in-app decision** (cross-check, audit, tie-out → nothing is written; the
    operator acts on what was found) → **in-app agent** + **`Finding`**. Still bounded and
    prompt-free (an optional instructions brief at most): the brief is fixed, the output is
@@ -161,6 +182,13 @@ for free — no hand-assembly): `<AgentRun parts={run.parts} state={…} error={
 [the SDK doc](../../app-sdk/docs/ai.md) for the hook. The `ai` package is a regular dependency of
 `@lotics/ui` — its part TYPES resolve transitively in any consumer's typecheck with nothing to
 install; the imports are type-only (purity-enforced), so no `ai` runtime ever enters a bundle.
+**A run with no parts yet renders the breathing "Starting…" row** (streaming state only) — the
+live dot plus a label that pulses, covering the gap between the CTA press and the first streamed
+part (upload + run creation + first token); a silent feed reads as broken. **The law: pass
+`state="streaming"` from the moment the paid CTA fires — uploads included — and render
+`AgentRun` even with zero parts. Never hand-roll a text/skeleton placeholder in front of the
+feed**; the starting row IS the placeholder, consistent and localized.
+
 **Reasoning only shows when the model produces it** — the declared model must support thinking
 (Sonnet / Opus, not Haiku); the renderer shows every reasoning part it's handed.
 
@@ -197,6 +225,13 @@ into it while running and reveals again when done.
 
 ## Review before apply — ONE surface, the compound `ChangeReview` family
 
+**When to reach for it — the one law's boundary.** `ChangeReview` is for MODIFYING an existing
+record: a diff exists (the `−` band has something real to show) and a wrong extraction can
+overwrite a right value — the record page's document desk is the home ground. Do NOT put it in
+front of a creation flow (intake, import, bulk drafting): there is no before-state to diff, so
+the "review" is a proofread the user blind-confirms — save direct and end on a result list
+instead (see [the one law](#the-one-law) and `tpl_item_list`'s intake).
+
 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_record`](../examples/tpl_record.tsx)'s Use-AI extract flow).
@@ -306,9 +341,13 @@ 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. Worked example:
+locale-wired (the `clarify` slice). The multi-question form of the ask-back. **Placement follows
+the dialog grammar**: standalone (riding a parked run's stream, where no footer exists) the wizard
+renders its own inline action row; as a DIALOG phase, wrap the `Dialog` with `ClarifyWizardScope`
+and put `ClarifyWizardActions` in the `DialogFooter` — the wizard suppresses the inline row and
+drives the footer bar (same verbs, same answered-gating). Worked example:
 [`tpl_item_list`](../examples/tpl_item_list.tsx)'s intake fork (the wizard between the analyze
-and import runs).
+and import runs, its actions in the footer).
 
 ## Provenance — `Sources`
 
@@ -408,9 +447,13 @@ ranked set, don't cram it into chat prose:
   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
+  `ClarifyWizard` asks the ambiguities the analysis surfaced (its Cancel/Back/Next/Submit riding
+  the `DialogFooter` via `ClarifyWizardScope` + `ClarifyWizardActions`) → the IMPORT run
+  **creates the records and the dialog ends on the RESULT LIST** — one result row per record
+  (what landed, the key figures — the hand-rolled anatomy in the one law above) — per the one
+  law's creation branch: no review gate, the register IS the review, correction is the
+  record's ordinary verbs. 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

package/docs/catalog.md

@@ -1087,7 +1087,11 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   of `Clarify` questions with Back/Next/Cancel/Submit + a `n / total` position indicator (omitted
   for a single question); advance
   only when the current is answered, `onSubmit` returns one `{ value, custom }` per question.
-  Navigation chrome is locale-wired (the `clarify` locale slice).
+  Navigation chrome is locale-wired (the `clarify` locale slice). Standalone it renders its own
+  inline action row (a parked run's stream has no footer); inside a dialog, wrap the `Dialog`
+  with **`ClarifyWizardScope`** and put **`ClarifyWizardActions`** in the `DialogFooter` — the
+  wizard suppresses the inline row and drives the footer bar (same verbs, same gating), per the
+  dialog grammar's footer-owns-actions law (worked example: `tpl_item_list`'s clarify phase).
 - **`choice_list`** — `ChoiceList` + `ChoiceOption`: selectable answer options as
   divider-separated rows (no bordered cards) with a per-row focus ring + hover wash; the
   agent's quick-reply surface. `allowCustom` appends an always-visible borderless multiline field whose

package/docs/templates.md

@@ -218,9 +218,14 @@ screens — register, per-row action, gated selection, and act-on-many in one. T
   button). The dialog is CONTROLLED (`open`/`onOpenChange` + `seedNames`) so both the button and
   the top-level drop drive it. The dialog itself: 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
+  analysis surfaced (described options, one custom-answer slot; its Cancel/Back/Next/Submit
+  live in the `DialogFooter` — `ClarifyWizardScope` wraps the Dialog, `ClarifyWizardActions`
+  rides the footer) → the IMPORT stream CREATES the records and the dialog ends on the RESULT
+  LIST — one hand-rolled result row per record (outcome mark · what landed · key figures —
+  the anatomy in ai_patterns §the one law; secondary "Done" to dismiss) — the one law's
+  creation branch
+  (ai_patterns.md): no review gate on a create, the register IS the review, correction uses
+  the record's ordinary verbs (no drawer on a bulk landing either). 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

package/examples/tpl_item_list.tsx

@@ -54,11 +54,10 @@ import { ProgressBar } from "@lotics/ui/progress_bar";
 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 { ClarifyWizard, ClarifyWizardActions, ClarifyWizardScope, 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 { FileDropTarget } from "@lotics/ui/file_drop_target";
-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";
@@ -1049,8 +1048,13 @@ function LinkedRecordScreen({ ma }: { ma: string }) {
 // ─── 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).
+// asks the genuine ambiguities the analysis surfaced → the IMPORT stream
+// CREATES the records and the dialog ends on the RESULT LIST — one row per
+// record with its key figures. This is the one law's creation branch: no
+// review gate on a create (nothing to diff — the register IS the review);
+// correction uses the record's ORDINARY verbs (open it, edit or delete);
+// `ChangeReview` belongs to the record page, where a SINGLE existing record
+// is being modified.
 // 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
@@ -1058,7 +1062,7 @@ function LinkedRecordScreen({ ma }: { ma: string }) {
 // `useAgentRun().pendingChoice`/`answerChoice` drive this same wizard.
 
 type Part = UIMessagePart<UIDataTypes, UITools>;
-type IntakePhase = "intake" | "analyze" | "clarify" | "running" | "review" | "form";
+type IntakePhase = "intake" | "analyze" | "clarify" | "running" | "done" | "form";
 type ManualVariant = "export" | "import";
 
 type Proposal = { id: string; khach: string; dienThoai: string; phi: number; orders: string };
@@ -1107,8 +1111,8 @@ 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.` },
+  doneTool("i3", grouping === "customer" ? "Create 3 records" : "Create 6 records"),
+  { type: "text", text: `Created **${grouping === "customer" ? 3 : 6} records** — they are in the register.` },
 ];
 
 /** The manual gate stays the THREE-field create-then-refine form — past the
@@ -1125,6 +1129,7 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
    *  auto-analyze), ready for the deliberate "Read with AI". Empty from the button. */
   seedDocs: DisplayFile[];
   onCreate: (khach: string, dienThoai: string, phi: number) => void;
+  /** The import's save — rows land in the register as the stream finishes. */
   onCreateMany: (records: { khach: string; dienThoai: string; phi: number }[]) => void;
 }) {
   const { small } = useScreenSize();
@@ -1133,12 +1138,11 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
   const [variant, setVariant] = useState<ManualVariant>("export");
   const [grouping, setGrouping] = useState<"customer" | "order">("customer");
   // Q2's answer is load-bearing too: it decides how the unknown customer lands
-  // on the drafted records (create + link, leave unlinked, or the user's own
+  // on the created records (create + link, leave unlinked, or the user's own
   // instruction via the custom slot).
   const [customerPlan, setCustomerPlan] = useState("New customer created and linked");
-  // 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>>({});
+  // the result list — what the import CREATED, one entry per record
+  const [landed, setLanded] = useState<{ title: string; detail: string }[]>([]);
   // form state (the manual gate)
   const [khach, setKhach] = useState("");
   const [dienThoai, setDienThoai] = useState("");
@@ -1169,8 +1173,25 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
       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);
+        if (phase === "analyze") {
+          // Auto-advance: analysis flows into the wizard.
+          setTimeout(() => setPhase("clarify"), 500);
+        } else {
+          // The import SAVES as it lands — the records are created here, and the
+          // dialog advances to the result list where each row carries Undo.
+          setTimeout(() => {
+            const proposals = grouping === "customer" ? PROPOSED_BY_CUSTOMER : PROPOSED_BY_ORDER;
+            onCreateMany(proposals.map((p) => ({ khach: p.khach, dienThoai: p.dienThoai, phi: p.phi })));
+            setLanded(proposals.map((p) => ({
+              title: grouping === "customer" ? p.khach : `${p.orders} — ${p.khach}`,
+              // The wizard's answers are load-bearing: the unknown customer's row
+              // states how it landed (created + linked / left unassigned / the
+              // user's own instruction).
+              detail: [p.orders, p.dienThoai, formatMoney(p.phi), p.khach === "Blue Harbor Foods" ? customerPlan : ""].filter(Boolean).join(" · "),
+            })));
+            setPhase("done");
+          }, 500);
+        }
       }
     }, 650);
     return () => clearInterval(t);
@@ -1183,16 +1204,10 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
   // dropzone, and the compact add-more dropzone all call this.
   const addDocs = (fs: File[]) => setDocs((prev) => [...prev, ...toDisplayFiles(fs)]);
 
-  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");
     setDocs([]);
-    setCardStatus({});
-    setFees({});
+    setLanded([]);
     setCustomerPlan("New customer created and linked");
     setKhach("");
     setDienThoai("");
@@ -1200,12 +1215,6 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
   };
   const close = () => { onOpenChange(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);
@@ -1215,14 +1224,18 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
   const title =
     phase === "form" ? (variant === "export" ? "New export case" : "New import case")
     : phase === "intake" ? "Enter data"
+    : phase === "done" ? "Saved"
     : "Import from files";
 
   return (
-    <ChangeReview>
-      {/* the file/stream phases (intake/analyze/clarify/running/review) run
-          WIDE — room for the thumbnail hero + the AgentRun/ClarifyWizard/review
-          streams; only the manual `form` stays a narrow single-column pane.
-          760 sits just under the kit Dialog's default 786 maxWidth cap. */}
+    <ClarifyWizardScope>
+      {/* the file/stream phases (intake/analyze/clarify/running/done) run
+          WIDE — room for the thumbnail hero + the AgentRun/ClarifyWizard/result
+          panes; only the manual `form` stays a narrow single-column pane.
+          760 sits just under the kit Dialog's default 786 maxWidth cap.
+          ClarifyWizardScope wraps the Dialog from OUTSIDE so the wizard's
+          Cancel/Back/Next/Submit render in the DialogFooter — the dialog
+          grammar's home for action bars — via ClarifyWizardActions. */}
       <Dialog width={phase === "form" ? 480 : 760} open={open} onOpenChange={(o) => { if (!o) close(); }}>
         <DialogHeader>
           <DialogHeaderTitle>{title}</DialogHeaderTitle>
@@ -1324,31 +1337,27 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
           </View>
         ) : null}
 
-        {phase === "review" ? (
+        {phase === "done" ? (
+          // The RESULT LIST — one row per created record: mark · what landed ·
+          // the key figures. The receipt, not a gate: correcting a record uses
+          // its ORDINARY verbs (open it in the register, edit or delete — the
+          // app's cascade delete keeps that safe), never a special undo here.
+          // The outcome-mark vocabulary (ai_patterns §the one law): success =
+          // circle-check green-600 · error = circle-alert red-600 · attention =
+          // circle-alert amber-600 · skipped = minus zinc-400. A real app adds
+          // an open-record jump / retry Button on the row's right.
           <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.khach === "Blue Harbor Foods" ? (
-                    <ChangeField label="Customer link" value={customerPlan} summary={customerPlan} />
-                  ) : null}
-                  {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 style={{ gap: 12 }}>
+              {landed.map((l, i) => (
+                <View key={i} style={{ flexDirection: "row", alignItems: "flex-start", gap: 12 }}>
+                  <View style={{ paddingTop: 2 }}>
+                    <Icon name="circle-check" size={18} color={colors.green[600]} />
+                  </View>
+                  <View style={{ flex: 1, gap: 2 }}>
+                    <Text size="sm" weight="semibold">{`Created ${l.title}`}</Text>
+                    <Text size="xs" color="muted" numberOfLines={1}>{l.detail}</Text>
+                  </View>
+                </View>
               ))}
             </View>
           </DialogScrollArea>
@@ -1402,13 +1411,18 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
             <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" ? (
+        ) : phase === "clarify" ? (
+          <DialogFooter>
+            <ClarifyWizardActions />
+          </DialogFooter>
+        ) : phase === "done" ? (
           <DialogFooter>
-            <ChangeReviewActions onDiscard={close} onApply={applyProposals} applyLabel={keptCount > 0 ? `Add ${keptCount} ${keptCount === 1 ? "record" : "records"}` : "Add records"} />
+            {/* Dismissal, not an action — the records already landed. */}
+            <Button title="Done" color="secondary" onPress={close} />
           </DialogFooter>
         ) : null}
       </Dialog>
-    </ChangeReview>
+    </ClarifyWizardScope>
   );
 }
 
@@ -1470,7 +1484,7 @@ export function TplItemList() {
     // 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
+  // The AI-import save — 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));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "15.1.1",
+  "version": "15.2.1",
   "type": "module",
   "exports": {
     "./vite": {

package/src/agent_run.tsx

@@ -1,5 +1,5 @@
-import { useState, type ReactNode } from "react";
-import { StyleSheet, View } from "react-native";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Animated, StyleSheet, View } from "react-native";
 import { colors } from "./colors";
 import { Text } from "./text";
 import { Button } from "./button";
@@ -136,6 +136,13 @@ export function AgentRun(props: AgentRunProps) {
 
   return (
     <View accessibilityLabel={accessibilityLabel} style={{ gap: 10 }}>
+      {/* The run has started but nothing has streamed yet (upload, run creation,
+          the model's first token) — a silent feed reads as broken, so the pulsing
+          starting row gives instant feedback until the first real part. This IS
+          the canonical empty-live state: hosts pass state="streaming" from the
+          CTA press (uploads included) and never hand-roll a text/skeleton
+          placeholder in front of the feed. */}
+      {streaming && segments.length === 0 ? <StartingRow label={locale.agentRun.starting} /> : null}
       {segments.map((seg, i) => {
         if (seg.kind === "text") {
           return (
@@ -284,6 +291,33 @@ function StepRow({ s, label, renderToolOutput }: { s: AgentStep; label: string;
 
 // Thinking — a muted, COLLAPSED "Thinking" disclosure (revealed on press), so the
 // agent's reasoning never crowds the answer. Pulses while it's still streaming.
+/** The empty-live feed row: the live dot's halo plus a BREATHING label — the
+ *  message itself pulses (Skeleton's opacity rhythm), so "work has started"
+ *  reads at a glance even before the first token. */
+function StartingRow({ label }: { label: string }) {
+  const v = useRef(new Animated.Value(0.45)).current;
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(v, { toValue: 1, duration: 700, useNativeDriver: false }),
+        Animated.timing(v, { toValue: 0.45, duration: 700, useNativeDriver: false }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [v]);
+  return (
+    <View style={styles.row}>
+      <View style={styles.dotCol}>
+        <Marker status="current" color={colors.zinc[400]} live />
+      </View>
+      <Animated.View style={[styles.rowBody, { opacity: v }]}>
+        <Text size="sm" color="muted">{label}</Text>
+      </Animated.View>
+    </View>
+  );
+}
+
 function ReasoningDisclosure(props: { text: string; streaming?: boolean; expanded: boolean; onToggle: () => void }) {
   const { text, streaming, expanded, onToggle } = props;
   const locale = useLoticsLocale();

package/src/clarify_wizard.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { createContext, useContext, useEffect, useRef, useState, type ReactNode } from "react";
 import { View } from "react-native";
 import { Button } from "./button";
 import { Clarify, type ClarifyOption } from "./clarify";
@@ -26,16 +26,52 @@ export interface ClarifyWizardProps {
   onCancel: () => void;
 }
 
+/** What the wizard's action bar needs, published by the wizard body into the
+ *  scope so `ClarifyWizardActions` can render Cancel/Back/Next/Submit from a
+ *  `DialogFooter` — outside the wizard's own subtree. */
+interface ClarifyWizardHandle {
+  index: number;
+  total: number;
+  answered: boolean;
+  back: () => void;
+  next: () => void;
+  submit: () => void;
+  cancel: () => void;
+}
+
+interface ClarifyWizardScopeValue {
+  handle: ClarifyWizardHandle | null;
+  setHandle: (h: ClarifyWizardHandle | null) => void;
+}
+
+const ScopeContext = createContext<ClarifyWizardScopeValue | null>(null);
+
+/**
+ * The compound frame for a wizard whose actions live in the dialog's footer —
+ * the dialog grammar's home for action bars. Wrap the `Dialog` from OUTSIDE
+ * (the `ChangeReview` position), put the `ClarifyWizard` in the content pane
+ * and `ClarifyWizardActions` in the `DialogFooter`; the wizard then suppresses
+ * its inline action row and drives the bar through this scope. One wizard per
+ * scope. Standalone `ClarifyWizard` (no scope — e.g. riding a parked run's
+ * stream, where no footer exists) keeps its inline actions.
+ */
+export function ClarifyWizardScope({ children }: { children: ReactNode }) {
+  const [handle, setHandle] = useState<ClarifyWizardHandle | null>(null);
+  return <ScopeContext.Provider value={{ handle, setHandle }}>{children}</ScopeContext.Provider>;
+}
+
 /**
  * A SEQUENCE of `Clarify` questions the human works through one at a time —
  * Back / Next / Cancel / Submit with a position indicator. Each step reuses
  * `Clarify` (question + described answers + optional "Other…"). You can only
  * advance once the current question is answered; Submit fires when the last is.
  * The multi-question form of the agent's ask-back; single questions use `Clarify`.
+ * Inside a `ClarifyWizardScope`, the action row moves to `ClarifyWizardActions`.
  */
 export function ClarifyWizard(props: ClarifyWizardProps) {
   const { questions, onSubmit, onCancel } = props;
   const labels = useLoticsLocale().clarify;
+  const scope = useContext(ScopeContext);
   const [index, setIndex] = useState(0);
   const [answers, setAnswers] = useState<(string | undefined)[]>(() => questions.map(() => undefined));
 
@@ -62,6 +98,28 @@ export function ClarifyWizard(props: ClarifyWizardProps) {
       }),
     );
 
+  // Publish the action-bar handle into the scope (and clear it on unmount) so
+  // the footer bar always reflects the CURRENT step's position and validity.
+  // The handle's callbacks read the latest submit/cancel through a ref — the
+  // host may recreate them every render, and a handle republished only on
+  // wizard-state changes would otherwise call a stale closure.
+  const latest = useRef({ submit, onCancel });
+  latest.current = { submit, onCancel };
+  const setHandle = scope?.setHandle;
+  useEffect(() => {
+    if (!setHandle) return;
+    setHandle({
+      index,
+      total,
+      answered,
+      back: () => setIndex((i) => Math.max(0, i - 1)),
+      next: () => setIndex((i) => Math.min(total - 1, i + 1)),
+      submit: () => latest.current.submit(),
+      cancel: () => latest.current.onCancel(),
+    });
+    return () => setHandle(null);
+  }, [setHandle, index, total, answered]);
+
   return (
     <View style={{ gap: 16 }}>
       {/* The step position is an eyebrow above the question (no progress bar — and
@@ -69,16 +127,47 @@ export function ClarifyWizard(props: ClarifyWizardProps) {
           as the question and answers. Keyed by index so each step's custom-answer
           draft is its own (no bleed across steps). */}
       <Clarify key={index} eyebrow={total > 1 ? `${index + 1} / ${total}` : undefined} question={q.question} options={q.answers} answer={current} onAnswer={setAnswer} allowCustom={q.allowCustom} />
-      <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8, paddingHorizontal: 8 }}>
-        <Button title={labels.cancel} color="muted" onPress={onCancel} />
-        <View style={{ flexDirection: "row", gap: 8 }}>
-          {index > 0 ? <Button title={labels.back} color="secondary" onPress={() => setIndex(index - 1)} /> : null}
-          {isLast ? (
-            <Button title={labels.submit} color="primary" onPress={submit} disabled={!answered} />
-          ) : (
-            <Button title={labels.next} color="primary" onPress={() => setIndex(index + 1)} disabled={!answered} />
-          )}
+      {scope == null ? (
+        <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8, paddingHorizontal: 8 }}>
+          <Button title={labels.cancel} color="muted" onPress={onCancel} />
+          <View style={{ flexDirection: "row", gap: 8 }}>
+            {index > 0 ? <Button title={labels.back} color="secondary" onPress={() => setIndex(index - 1)} /> : null}
+            {isLast ? (
+              <Button title={labels.submit} color="primary" onPress={submit} disabled={!answered} />
+            ) : (
+              <Button title={labels.next} color="primary" onPress={() => setIndex(index + 1)} disabled={!answered} />
+            )}
+          </View>
         </View>
+      ) : null}
+    </View>
+  );
+}
+
+/**
+ * The wizard's action bar for a `DialogFooter` — Cancel bottom-left,
+ * Back + Next/Submit right, the same verbs and gating as the inline row.
+ * Requires a `ClarifyWizardScope` ancestor; renders nothing until its
+ * `ClarifyWizard` mounts (so a multi-phase dialog can keep the footer JSX
+ * conditional on the clarify phase alone).
+ */
+export function ClarifyWizardActions() {
+  const labels = useLoticsLocale().clarify;
+  const scope = useContext(ScopeContext);
+  if (scope == null) throw new Error("ClarifyWizardActions requires a ClarifyWizardScope ancestor.");
+  const h = scope.handle;
+  if (h == null) return null;
+  const isLast = h.index === h.total - 1;
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8, flex: 1 }}>
+      <Button title={labels.cancel} color="muted" onPress={h.cancel} />
+      <View style={{ flexDirection: "row", gap: 8 }}>
+        {h.index > 0 ? <Button title={labels.back} color="secondary" onPress={h.back} /> : null}
+        {isLast ? (
+          <Button title={labels.submit} color="primary" onPress={h.submit} disabled={!h.answered} />
+        ) : (
+          <Button title={labels.next} color="primary" onPress={h.next} disabled={!h.answered} />
+        )}
       </View>
     </View>
   );

package/src/locale.tsx

@@ -134,7 +134,7 @@ export interface LoticsLocale {
    *  annotation on a call parked on a human decision, and the terminal error's
    *  `retry` action. (Tool-step labels and the "{n} steps" suffix stay
    *  prop-localized — `labelForCall` / `stepsLabel`.) */
-  agentRun: { thinking: string; thinkingStreaming: string; input: string; error: string; output: string; awaiting: string; retry: string };
+  agentRun: { starting: string; thinking: string; thinkingStreaming: string; input: string; error: string; output: string; awaiting: string; retry: string };
   /** `ApprovalPrompt`: the default prompt line (overridable per instance) and
    *  the Approve / Deny button labels — the surface that ANSWERS `AgentRun`'s
    *  read-only `awaiting` row (approve/deny = the ai-sdk approval vocabulary). */
@@ -237,7 +237,7 @@ export const en: LoticsLocale = {
   matrix: { total: "Total", less: "Less", more: "More" },
   scrollToBottom: { tooltip: "Scroll to bottom" },
   textInputField: { clear: "Clear" },
-  agentRun: { thinking: "Thinking", thinkingStreaming: "Thinking…", input: "Input", error: "Error", output: "Output", awaiting: "Awaiting", retry: "Retry" },
+  agentRun: { starting: "Starting…", thinking: "Thinking", thinkingStreaming: "Thinking…", input: "Input", error: "Error", output: "Output", awaiting: "Awaiting", retry: "Retry" },
   approvalPrompt: { message: "The assistant wants to perform an action that needs your approval.", approve: "Approve", deny: "Deny" },
   messageActions: { copy: "Copy", copied: "Copied", regenerate: "Regenerate", edit: "Edit", previousVersion: "Previous version", nextVersion: "Next version" },
 };
@@ -335,7 +335,7 @@ export const vi: LoticsLocale = {
   matrix: { total: "Tổng", less: "Ít", more: "Nhiều" },
   scrollToBottom: { tooltip: "Cuộn xuống cuối" },
   textInputField: { clear: "Xóa" },
-  agentRun: { thinking: "Suy nghĩ", thinkingStreaming: "Đang suy nghĩ…", input: "Đầu vào", error: "Lỗi", output: "Kết quả", awaiting: "Chờ duyệt", retry: "Thử lại" },
+  agentRun: { starting: "Đang bắt đầu…", thinking: "Suy nghĩ", thinkingStreaming: "Đang suy nghĩ…", input: "Đầu vào", error: "Lỗi", output: "Kết quả", awaiting: "Chờ duyệt", retry: "Thử lại" },
   approvalPrompt: { message: "Trợ lý muốn thực hiện thao tác cần bạn duyệt.", approve: "Cho phép", deny: "Từ chối" },
   messageActions: { copy: "Sao chép", copied: "Đã sao chép", regenerate: "Tạo lại", edit: "Chỉnh sửa", previousVersion: "Phiên bản trước", nextVersion: "Phiên bản sau" },
 };