@lotics/ui 14.1.0 → 14.3.0

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) */}

package/examples/tpl_record.tsx

@@ -66,6 +66,8 @@ import { useSelection } from "@lotics/ui/use_selection";
 import { FloatingActionBar } from "@lotics/ui/floating_action_bar";
 import { CardSelectItem } from "@lotics/ui/card_select_item";
 import { AgentRun } from "@lotics/ui/agent_run";
+import { FollowScroll } from "@lotics/ui/follow_scroll";
+import { useScreenSize } from "@lotics/ui/use_screen_size";
 import { type SourceRef } from "@lotics/ui/sources";
 import { ChangeValueInput, Change, ChangeField, ChangeFields, ChangeReasoning, ChangeRecord, ChangeReview, ChangeReviewActions, ChangeReviewHeader, type ChangeStatus } from "@lotics/ui/change_review";
 import { CompletionState } from "@lotics/ui/completion_state";
@@ -92,9 +94,8 @@ type Part = UIMessagePart<UIDataTypes, UITools>;
 // · Comments        — the discussion thread. When people collaborate here.
 // · Tasks           — the working checklist. Multi-step records with owners.
 // · Documents       — the INTAKE desk: files that ARRIVE + the ONE "Use AI"
-//                     fork (shared with tpl_documents — change BOTH; the one
-//                     divergence: generation lives in the output sections
-//                     here, in the toolbar dialog there).
+//                     fork (the Agents "Document desk" pattern — this template
+//                     is its worked example).
 // · Customer        — the LINKED PARTY: another record referenced, never
 //                     edited here (the linked-record box + drawer).
 // · Fees            — the MONEY LEDGER: cost/charge lines, both directions.
@@ -429,11 +430,10 @@ const GUTTER = RAIL_W + RAIL_GAP;
 /** The reading column's ceiling. */
 const CONTENT_MAX = 720;
 
-// ── the DOCUMENT DESK — the Agents "Document desk" pattern (tpl_documents),
-// carried as the record's documents surface: files feed ONE "Use AI" entry
-// that forks into extract / cross-check / edit-with-AI. The two templates
-// share this desk — change it in BOTH (the one divergence: generation lives
-// in this page's output sections, in tpl_documents' toolbar dialog).
+// ── the DOCUMENT DESK — the Agents "Document desk" pattern, carried as the
+// record's documents surface: files feed ONE "Use AI" entry that forks into
+// extract / cross-check / edit-with-AI; generation lives in this page's
+// output sections (the desk itself is intake-only).
 type ScriptStep = { id: string; toolName: string; input?: unknown; output?: unknown };
 type Task = "extract" | "check";
 type Phase = "fork" | "running" | "review" | "done";
@@ -701,6 +701,7 @@ const DESTINATIONS: PickerOption<string, { country: string }>[] = [
 export function TplRecord() {
   const id = useRef(1);
   const nextId = (prefix: string) => `${prefix}_${(id.current += 1)}`;
+  const { small } = useScreenSize();
 
   // ── first paint = Skeleton MIRRORING the final layout, never a spinner.
   // The 700ms mock stands in for the record query a real app awaits.
@@ -835,8 +836,8 @@ export function TplRecord() {
   const taxId = customer?.taxId ?? "";
   const taxIdValid = TAX_ID_RE.test(taxId);
 
-  // ── the document desk (carried verbatim from tpl_documents — see the module
-  //    banner above; the record's files ARE the desk's register)
+  // ── the document desk (see the module banner above; the record's files ARE
+  //    the desk's register)
   const [files, setFiles] = useState<Doc[]>(DOCS);
   const sel = useSelection();
 
@@ -1885,8 +1886,7 @@ export function TplRecord() {
             </View>
             <View style={{ flex: 1 }} />
             {/* no Create here — GENERATION lives in the Document set section
-                below (this desk = intake); tpl_documents, whose page has no
-                output section, keeps the dialog flavor in this slot */}
+                below (this desk = intake) */}
             <Button
               title="Add files"
               color="secondary"
@@ -2719,7 +2719,7 @@ export function TplRecord() {
       </View>
     </ScrollView>
 
-    {/* ── the document desk's overlays (verbatim from tpl_documents) */}
+    {/* ── the document desk's overlays */}
     <FloatingActionBar count={sel.count} label={sel.count === 1 ? "file selected" : "files selected"} onClear={sel.clear}>
       <Button title="Remove" color="danger-secondary" icon="trash" onPress={removeSelected} />
       <Button title="Download" color="secondary" icon="download" onPress={() => { /* a real app zips or opens each selected file (openExternal) */ }} />
@@ -2734,6 +2734,16 @@ export function TplRecord() {
       <DialogHeader>
         <DialogHeaderTitle>{task === "extract" ? "Extract data" : task === "check" ? "Cross-check" : `Use AI · ${picked.length} ${picked.length === 1 ? "file" : "files"}`}</DialogHeaderTitle>
       </DialogHeader>
+      {phase === "running" ? (
+        // The streaming feed gets its OWN scroller: FollowScroll (the chat list's
+        // inverted mechanism) keeps the newest part in view as the run grows — a
+        // plain DialogScrollArea would let it stream below the fold. The swap back
+        // on the phase flip REMOUNTS the scroll area, so review opens at the TOP.
+        // Padding mirrors DialogScrollArea.
+        <FollowScroll contentContainerStyle={{ paddingBottom: 24, paddingHorizontal: small ? 16 : 24 }}>
+          <AgentRun parts={runItems} state={revealed >= script.length ? "done" : "streaming"} />
+        </FollowScroll>
+      ) : (
       <DialogScrollArea>
         {phase === "fork" ? (
           <View style={{ gap: 16 }}>
@@ -2776,8 +2786,6 @@ export function TplRecord() {
           </View>
         ) : null}
 
-        {phase === "running" ? <AgentRun parts={runItems} state={revealed >= script.length ? "done" : "streaming"} /> : null}
-
         {phase === "review" && task === "extract" ? (
           <View style={{ gap: 16 }}>
             <View style={{ gap: 8 }}>
@@ -2904,6 +2912,7 @@ export function TplRecord() {
           <CompletionState title={`${applyCount} ${applyCount === 1 ? "change" : "changes"} applied to ${code}`} summary="The files stay on the record — each updated field keeps its source document." />
         ) : null}
       </DialogScrollArea>
+      )}
       {phase === "fork" ? (
         <DialogFooter>
           {uploadFlow ? <Button title="Save files only" color="muted" onPress={() => { commitUpload(); closeAi(); }} /> : <Button title="Cancel" color="muted" onPress={closeAi} />}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "14.1.0",
+  "version": "14.3.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -113,6 +113,7 @@
     "./menu_list_item": "./src/menu_list_item.tsx",
     "./pressable_highlight": "./src/pressable_highlight.tsx",
     "./pressable_row": "./src/pressable_row.tsx",
+    "./press_door": "./src/press_door.tsx",
     "./floating_action_bar": "./src/floating_action_bar.tsx",
     "./icon_button": "./src/icon_button.tsx",
     "./info_popover": "./src/info_popover.tsx",

package/src/file_badge.tsx

@@ -2,6 +2,7 @@ import { Text, View } from "react-native";
 import { fontFamilySemiBold } from "./text_utils";
 import { Icon, type IconName } from "./icon";
 import { isVideoMimeType, isAudioMimeType } from "./mime";
+import { FILE_BADGE_DEFAULT_WIDTH, fileBadgeHeight } from "./file_badge_fit";
 
 const VIDEO_COLOR = "#ea580c";
 const AUDIO_COLOR = "#db2777";
@@ -32,12 +33,14 @@ export function resolveMime(mimeType: string): { label: string; color: string }
   return MIME_MAP[mimeType] ?? DEFAULT_BADGE;
 }
 
-const DEFAULT_SIZE = 26;
+const DEFAULT_SIZE = FILE_BADGE_DEFAULT_WIDTH;
 
 interface FileBadgeProps {
   /** Omit only with `placeholder` — a ghost slot has no resolved type yet. */
   mimeType?: string;
-  /** Base width in pixels. Height, radii, font, and padding scale proportionally. Default: 26 */
+  /** Base WIDTH in pixels. Height, radii, font, and padding scale proportionally — the
+   *  badge is TALLER than it is wide (26 × 32 at the default), so a SQUARE slot takes the
+   *  fitted width, not the slot side (`DocumentBadge` does that conversion). Default: 26 */
   size?: number;
   /** Show a "TMPL" overlay to distinguish templates from regular files. */
   isTemplate?: boolean;
@@ -58,7 +61,7 @@ function getMediaIcon(mimeType: string): IconName | undefined {
 
 export function FileBadge({ mimeType, size = DEFAULT_SIZE, isTemplate, placeholder }: FileBadgeProps) {
   const scale = size / DEFAULT_SIZE;
-  const height = Math.round(32 * scale);
+  const height = fileBadgeHeight(size);
   const radius = Math.round(4 * scale);
 
   if (placeholder) {

package/src/file_badge_fit.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import {
+  FILE_BADGE_BOX,
+  FILE_BADGE_DEFAULT_WIDTH,
+  fileBadgeHeight,
+  fileBadgeWidthForBox,
+} from "./file_badge_fit";
+
+describe("FileBadge geometry", () => {
+  it("scales the badge with the requested width instead of pinning the default", () => {
+    // The bug this covers: a caller's `size` was dropped and every badge rendered at
+    // the 26x32 default. A requested width must produce a proportionally smaller badge.
+    expect(fileBadgeHeight(FILE_BADGE_DEFAULT_WIDTH)).toBe(FILE_BADGE_BOX);
+    expect(fileBadgeHeight(20)).toBe(25);
+    expect(fileBadgeHeight(13)).toBe(16);
+    expect(fileBadgeHeight(52)).toBe(64);
+  });
+
+  it("fills the compact thumbnail slot exactly at the default width", () => {
+    // Why DEFAULT_WIDTH is 26: a default badge is exactly as tall as the 32px compact
+    // tile it sits in. A slot of 32 must therefore resolve to the default, unchanged.
+    expect(fileBadgeWidthForBox(FILE_BADGE_BOX)).toBe(FILE_BADGE_DEFAULT_WIDTH);
+  });
+
+  it("resolves a SMALLER slot to a smaller badge, not the default", () => {
+    // The reported bug: a sub-32 tile still rendered the 26x32 default — wider AND taller
+    // than its own tile. The requested slot now drives the badge.
+    expect(fileBadgeWidthForBox(30)).toBe(24);
+    expect(fileBadgeHeight(fileBadgeWidthForBox(30))).toBe(30);
+    expect(fileBadgeWidthForBox(24)).toBe(19);
+    expect(fileBadgeHeight(fileBadgeWidthForBox(24))).toBe(23);
+  });
+
+  it("never overflows its square slot, at any slot size", () => {
+    // The badge is taller than it is wide, so height is the binding dimension and the
+    // rounding in `fileBadgeHeight` can push a naive floor over the edge.
+    for (let box = 8; box <= 200; box++) {
+      const width = fileBadgeWidthForBox(box);
+      expect(width).toBeLessThanOrEqual(box);
+      expect(fileBadgeHeight(width)).toBeLessThanOrEqual(box);
+    }
+  });
+
+  it("grows monotonically with the slot", () => {
+    for (let box = 9; box <= 200; box++) {
+      expect(fileBadgeWidthForBox(box)).toBeGreaterThanOrEqual(fileBadgeWidthForBox(box - 1));
+    }
+  });
+});