@lotics/ui 11.8.9 → 12.0.0

package/examples/tpl_record.tsx

@@ -1,10 +1,10 @@
-import { useRef, useState } from "react";
-import { ScrollView, View } from "react-native";
+import { Fragment, useEffect, useRef, useState, type ReactNode } from "react";
+import { Pressable, ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { colors } from "@lotics/ui/colors";
 import { Button } from "@lotics/ui/button";
+import { BackButton } from "@lotics/ui/back_button";
 import { Divider } from "@lotics/ui/divider";
-import { Badge } from "@lotics/ui/badge";
 import { Link } from "@lotics/ui/link";
 import { Icon } from "@lotics/ui/icon";
 import { Alert } from "@lotics/ui/alert";
@@ -12,20 +12,27 @@ import type { PickerOption } from "@lotics/ui/picker";
 import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
 import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
 import { Callout, CalloutText } from "@lotics/ui/callout";
-import { Section, SectionHeading, SectionHeadingMeta, SectionHeadingTitle, Subsection, SubsectionHeading, SubsectionHeadingTitle } from "@lotics/ui/section_heading";
+import { Section, SectionHeading, SectionHeadingTitle, Subsection, SubsectionHeading, SubsectionHeadingTitle } from "@lotics/ui/section_heading";
 import { SectionStack, SubsectionStack } from "@lotics/ui/section_stack";
 import { MenuButton } from "@lotics/ui/menu_button";
 import { Modal, ModalBody, ModalHeader } from "@lotics/ui/modal";
 import { useSectionNav } from "@lotics/ui/use_section_nav";
-import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle } from "@lotics/ui/dialog";
+import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle, DialogScrollArea } from "@lotics/ui/dialog";
 import { formatMoney } from "@lotics/ui/format_money";
 import { RecordSummary } from "@lotics/ui/record_summary";
+import { SummaryLine } from "@lotics/ui/summary_line";
+import { Skeleton } from "@lotics/ui/skeleton";
+import { CommentList, type CommentEditFormProps, type ThreadComment, type ThreadFile } from "@lotics/ui/comments_thread";
+import { Composer } from "@lotics/ui/composer";
+import { IconButton } from "@lotics/ui/icon_button";
+import { FileRows } from "@lotics/ui/file_rows";
+import { FileGrid } from "@lotics/ui/file_grid";
 import { CheckCircle } from "@lotics/ui/check_circle";
 import { ProgressBar } from "@lotics/ui/progress_bar";
 import { FilterChip } from "@lotics/ui/filter_chip";
 import { CaptureRow } from "@lotics/ui/capture_row";
 import { Checklist, ChecklistRow } from "@lotics/ui/checklist";
-import type { ActionMenuItem } from "@lotics/ui/action_menu";
+import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
 import { SuggestionChip } from "@lotics/ui/suggestion_chip";
 import { OptionList } from "@lotics/ui/option_list";
 import { MemberChip } from "@lotics/ui/member_chip";
@@ -35,32 +42,75 @@ import { InlineNumberInput } from "@lotics/ui/inline_number_input";
 import { InlineSelect } from "@lotics/ui/inline_select";
 import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
 import { InlineMemberSelect } from "@lotics/ui/inline_member_select";
-import type { MemberSelectMember } from "@lotics/ui/member_select";
-import { Switch } from "@lotics/ui/switch";
-import { FileDropzone } from "@lotics/ui/file_dropzone";
-import type { DisplayFile } from "@lotics/ui/file_thumbnail";
-import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
+import { MemberSelect, type MemberSelectMember } from "@lotics/ui/member_select";
+import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
+import { EmptyState } from "@lotics/ui/empty_state";
+import { FormField } from "@lotics/ui/form_field";
+import { TextInputField } from "@lotics/ui/text_input_field";
+import { Timeline, type TimelineItem } from "@lotics/ui/timeline";
+import { FileThumbnail, type DisplayFile } from "@lotics/ui/file_thumbnail";
 import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
 import { DangerZone } from "@lotics/ui/danger_zone";
+import { FileRow } from "@lotics/ui/file_row";
+import { pickFiles } from "@lotics/ui/file_picker";
+import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
+import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
+import { Finding, FindingComparison } from "@lotics/ui/finding";
+import { FormTextInput } from "@lotics/ui/form_text_input";
+import { CheckboxInput } from "@lotics/ui/checkbox_input";
+import { TextLink } from "@lotics/ui/text_link";
+import { PressableRow } from "@lotics/ui/pressable_row";
+import { useFocusRing } from "@lotics/ui/use_focus_ring";
+import { FOCUS_RING } from "@lotics/ui/control_surface";
+import { RadioPicker } from "@lotics/ui/radio_picker";
+import { SearchInput } from "@lotics/ui/search_input";
+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, type AgentRunItem, type AgentRunStep } from "@lotics/ui/agent_run";
+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";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Record — THE record surface, create-then-refine taken all the way:
-// "New order" is ONE CLICK (no dialog, no form) — it creates a fresh Draft and
-// everything is refined here, in place. Top → bottom: a `RecordSummary` header
-// (identity · status · the to-collect metric) over its key-fact `DetailTable`,
-// a Details `DetailTable`, the CUSTOMER section (TWO states: attached = the
-// read-only-first card — Tax ID / Contact / City edit inline, and the Fetch
-// button fills contact + city from the tax-ID registry, un-gating invoicing;
-// Remove detaches the link → the find-or-create search, whose custom row opens
-// the create Dialog), BILLING — charges grouped into issuable invoice
-// documents, every value in the inline vocabulary (amount chips with the list
-// price as ghost text, "How paid…" select chips), the issue action in each
-// band's header, ONE section-level callout explaining what blocks issuing, the
-// collect total, and a separate refundable deposit — and FILES (drop to add,
-// gallery preview, delete). The lifecycle is the HANDOFF CHAIN below —
-// per-desk task checklists inform each stage's handoff CTA (never blocking);
-// there is no separate submit step. Also the settings shape:
-// Preferences switch rows + the `DangerZone`.
+// Template · Record — THE record surface: the surface IS the editor, every
+// field refines in place. No breadcrumb, no create CTA — back lives in the
+// panel and creation belongs to the REGISTER (the list owns "new").
+//
+// GENERIC BY DESIGN: this template is the BASE every industry adapts. Flavor
+// lives in VALUES, never in STRUCTURE — each section below is a reusable
+// PATTERN, and the mock nouns stay at the common-denominator level any goods/
+// services business uses (service level, destination, delivery receipt),
+// never one vertical's jargon. Adapt by swapping the values; keep the
+// patterns.
+//
+// THE SECTION PATTERNS (what each is, when to use it):
+// · General         — the CORE FACTS: a headingless key-facts lead + named
+//                     groups + Classification (the right-input-per-field
+//                     showcase) + System ids. Always present, first in rail.
+// · 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).
+// · Customer        — the LINKED PARTY: another record referenced, never
+//                     edited here (the linked-record box + drawer).
+// · Fees            — the MONEY LEDGER: cost/charge lines, both directions.
+// · Billing         — INVOICING: charges grouped into issuable documents.
+// · Document set    — the BATCH OUTPUT desk: the record produces per-party
+//                     form SETS on demand (readiness, fill panels, the gate).
+// · Delivery receipt— the QUICK-ISSUE form: one document issued from a
+//                     handful of facts at a known moment (a handover, an
+//                     inspection, a visit).
+// · Activity        — the AUDIT TRAIL. Always.
+// · Handoff         — the BOUNDARY: the record crosses to another desk's
+//                     table ONCE (creates + links the sibling; Recall undoes).
+// · Danger zone     — destructive lifecycle. Always last.
+//
+// The lifecycle is the HANDOFF CHAIN — per-desk task checklists inform the
+// handoff CTA (never blocking), and the gate is the page's LAST block before
+// the closing `DangerZone`; there is no separate submit step.
 // ─────────────────────────────────────────────────────────────────────────────
 
 interface Customer {
@@ -89,14 +139,14 @@ const TAX_ID_RE = /^\d{10}(\d{3})?$/;
 // the next desk (spine + stage = handoff) — open tasks warn, they never block.
 type Stage = "sales" | "operations" | "accounting" | "closed";
 type Desk = Exclude<Stage, "closed">;
-const DESKS: { key: Desk; label: string; color: "blue" | "amber" | "violet" }[] = [
-  { key: "sales", label: "Sales", color: "blue" },
-  { key: "operations", label: "Operations", color: "amber" },
-  { key: "accounting", label: "Accounting", color: "violet" },
+const DESKS: { key: Desk; label: string }[] = [
+  { key: "sales", label: "Sales" },
+  { key: "operations", label: "Operations" },
+  { key: "accounting", label: "Accounting" },
 ];
-const STAGES: { key: Stage; label: string; color: "blue" | "amber" | "violet" | "emerald" }[] = [
+const STAGES: { key: Stage; label: string }[] = [
   ...DESKS,
-  { key: "closed", label: "Closed", color: "emerald" },
+  { key: "closed", label: "Closed" },
 ];
 const stageOf = (st: Stage) => STAGES.find((x) => x.key === st) ?? STAGES[0];
 
@@ -139,12 +189,6 @@ const TASK_SEEDS: StageTask[] = [
   { id: "t7", label: "Reconcile the receipts", stage: "accounting", done: false, assignee: null },
 ];
 
-/** The owner tag a section heading wears — WHO works this section. */
-function OwnerTag({ stage }: { stage: Desk }) {
-  const meta = stageOf(stage);
-  return <Badge variant="dot" label={meta.label} color={meta.color} />;
-}
-
 // The assignable roster — an app feeds `useMembers()` here.
 const TEAM: MemberSelectMember[] = [
   { id: "mem_01", name: "Sarah Chen" },
@@ -153,6 +197,7 @@ const TEAM: MemberSelectMember[] = [
   { id: "mem_04", name: "James Walker" },
 ];
 
+
 // The company registry the Fetch button consults (mocked): tax ID → the
 // company's registered contact + city. Unknown-but-valid IDs still resolve so
 // the fill is always demoable.
@@ -240,10 +285,6 @@ const BILLING_INITIAL: Invoice[] = [
   },
 ];
 
-/** A fresh record has nothing billed — the invoice shapes with zeroed lines. */
-const freshInvoices = (): Invoice[] =>
-  BILLING_INITIAL.map((inv) => ({ ...inv, ref: "", charges: inv.charges.map((c) => ({ ...c, amount: 0, method: "" as const })) }));
-
 type InvoiceState = "none" | "draft" | "issued";
 const invoiceTotal = (inv: Invoice) => inv.charges.reduce((s, c) => s + c.amount, 0);
 const invoiceStatus = (inv: Invoice): InvoiceState => (inv.ref ? "issued" : invoiceTotal(inv) > 0 ? "draft" : "none");
@@ -262,21 +303,23 @@ function persist<T>(set: (v: T) => void) {
     });
 }
 
-/** One invoice document — a hairline-set BAND: a title line, its charge lines
- *  as inline rows (amount chip with the list price as ghost text + a one-tap
+/** One invoice document — a named SUBSECTION (the Billing section's groups all
+ *  ride the one SubsectionStack beat): its heading, then the charge lines as
+ *  inline rows (amount chip with the list price as ghost text + a one-tap
  *  "Standard …" suggestion pill while unset; the payment method turns required
- *  the moment the line carries an amount), then the ACTION ROW at the bottom
- *  right: the hint naming exactly what's missing → the status dot → Issue.
+ *  the moment the line carries an amount), then the ACTION alone at the bottom
+ *  right — no prose beside a CTA; a not-ready Issue simply stays disabled
+ *  (the stage/customer gates read at THEIR sections).
  *  No per-band total — the collect band below owns the number. An ISSUED
  *  invoice keeps its lines editable — fees change — and offers Re-issue (a new
  *  lookup code replaces the old, confirmed in the same Dialog). */
 function InvoiceBand({
-  inv, gateReason, onAmount, onMethod, onIssue,
+  inv, gated, onAmount, onMethod, onIssue,
 }: {
   inv: Invoice;
-  /** The customer-level block ("Attach a customer…" / "Add the tax ID…"),
-   *  resolved by the parent — "" when the customer side is ready. */
-  gateReason: string;
+  /** The record-level gate (wrong stage / no customer / invalid tax ID),
+   *  resolved by the parent — issuing stays disabled while true. */
+  gated: boolean;
   onAmount: (chKey: string, v: number) => Promise<void>;
   onMethod: (chKey: string, m: Method) => Promise<void>;
   onIssue: (inv: Invoice) => void;
@@ -284,22 +327,14 @@ function InvoiceBand({
   const total = invoiceTotal(inv);
   const state = invoiceStatus(inv);
   const missing = missingMethods(inv);
-  const ready = total > 0 && missing.length === 0 && gateReason === "";
-  // What stands between this invoice and Issue — band-local blockers first
-  // (fixable right here), then the customer-level gate.
-  const blockReason =
-    total === 0
-      ? "Enter the fees to issue."
-      : missing.length > 0
-        ? "Choose a payment method for every charged line."
-        : gateReason;
+  const ready = total > 0 && missing.length === 0 && !gated;
   return (
-    <>
-      <Divider />
-      <View style={{ gap: 8, paddingVertical: 2 }}>
-        <Text weight="semibold">{inv.title}</Text>
-        {/* two editors per cell → stack earlier than a single-editor table */}
-        <DetailTable labelWidth={150} minValueWidth={320}>
+    <Subsection>
+      <SubsectionHeading>
+        <SubsectionHeadingTitle>{inv.title}</SubsectionHeadingTitle>
+      </SubsectionHeading>
+      {/* two editors per cell → stack earlier than a single-editor table */}
+      <DetailTable labelWidth={150} minValueWidth={320}>
           {inv.charges.map((c) => (
             <DetailRow key={c.key} label={c.label}>
               <View style={{ gap: 4 }}>
@@ -336,34 +371,29 @@ function InvoiceBand({
               </View>
             </DetailRow>
           ))}
-        </DetailTable>
-        {/* the band's action row — bottom right: why-not → status → the action */}
-        <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 6 }}>
-          {state === "issued" ? (
-            <>
-              <Text size="xs" color="muted" align="right" style={{ flexGrow: 1, flexBasis: 180 }}>
-                {ready ? "" : blockReason}
-              </Text>
-              <Badge variant="dot" label="Issued" color="emerald" />
-              <Link size="xs" onPress={() => {}} accessibilityLabel={`Open invoice ${inv.ref}`}>{inv.ref}</Link>
-              <Button title="Re-issue" color="secondary" disabled={!ready} onPress={() => onIssue(inv)} />
-            </>
-          ) : (
-            <>
-              <Text size="xs" color="muted" align="right" style={{ flexGrow: 1, flexBasis: 180 }}>
-                {blockReason}
-              </Text>
-              <Badge
-                variant="dot"
-                label={state === "draft" ? "Draft" : "Nothing to bill"}
-                color={state === "draft" ? "amber" : "zinc"}
-              />
-              <Button title="Issue invoice" color="primary" disabled={!ready} onPress={() => onIssue(inv)} />
-            </>
-          )}
-        </View>
+      </DetailTable>
+      {/* band-LOCAL state, co-located: a charged line without a payment method
+          is a real inconsistency → its callout lives in the band. An EMPTY
+          band stays silent — a disabled Issue over no fees explains itself. */}
+      {missing.length > 0 ? (
+        <Callout tone="warning">
+          <CalloutText>Choose a payment method for every charged line.</CalloutText>
+        </Callout>
+      ) : null}
+      {/* the band's action row — the CTA alone, bottom right (the issued ref
+          link IS the issued state); not-ready = disabled, the WHY reads in the
+          callouts (band-local above, record-level at the section top) */}
+      <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-end", columnGap: 8 }}>
+        {state === "issued" ? (
+          <>
+            <Link size="xs" onPress={() => {}} accessibilityLabel={`Open invoice ${inv.ref}`}>{inv.ref}</Link>
+            <Button title="Re-issue" color="secondary" disabled={!ready} onPress={() => onIssue(inv)} />
+          </>
+        ) : (
+          <Button title="Issue invoice" color="primary" disabled={!ready} onPress={() => onIssue(inv)} />
+        )}
       </View>
-    </>
+    </Subsection>
   );
 }
 
@@ -378,12 +408,401 @@ 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).
+type ScriptStep = Omit<AgentRunStep, "status">;
+type Task = "extract" | "check";
+type Phase = "fork" | "running" | "review" | "done";
+
+interface Doc { id: string; name: string; mimeType: string; kind: string; sizeKB: number; added: string; addedAt: number; url?: string }
+
+// Display derives from the canonical numeric — strings would sort "8.4 MB" < "96 KB".
+function fmtSize(kb: number): string {
+  if (kb <= 0) return "—";
+  return kb < 1024 ? `${kb} KB` : `${(kb / 1024).toFixed(1)} MB`;
+}
+const MOCK_PHOTO_URL =
+  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2JmZGJmZScvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyNhOGEyOWUnLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjZGMyNjI2Jy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMyNTYzZWInLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyNmNTllMGInLz48cmVjdCB4PScyNjInIHk9JzI0JyB3aWR0aD0nMTAnIGhlaWdodD0nMTg2JyBmaWxsPScjNTI1MjUyJy8+PHJlY3QgeD0nMTUwJyB5PScyNCcgd2lkdGg9JzEyMicgaGVpZ2h0PScxMCcgZmlsbD0nIzUyNTI1MicvPjwvc3ZnPg==";
+const DOCS: Doc[] = [
+  { id: "f1", name: "invoice.pdf", mimeType: "application/pdf", kind: "PDF", sizeKB: 214, added: "26 Jun", addedAt: 626 },
+  { id: "f2", name: "packing-list.pdf", mimeType: "application/pdf", kind: "PDF", sizeKB: 96, added: "26 Jun", addedAt: 626 },
+  { id: "f3", name: "booking-confirmation.pdf", mimeType: "application/pdf", kind: "PDF", sizeKB: 182, added: "28 Jun", addedAt: 628 },
+  { id: "f4", name: "photos.zip", mimeType: "application/zip", kind: "ZIP", sizeKB: 8602, added: "30 Jun", addedAt: 630 },
+  // an IMAGE file — the register renders it as a real square thumbnail (the
+  // SVG data URI stands in for the stored photo URL a live app serves)
+  { id: "f5", name: "delivery-photo.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 1424, added: "30 Jun", addedAt: 630, url: MOCK_PHOTO_URL },
+];
+
+const EXTRACT_STEPS: ScriptStep[] = [
+  { id: "e1", label: "Reading the selected documents", detail: "Page by page, tables included" },
+  { id: "e2", label: "get_record", kind: "tool" },
+  { id: "e3", label: "Extracting field values", detail: "9 fields · 2 order lines" },
+  { id: "e4", label: "Comparing against the record", detail: "3 match · 1 new · 1 change · 1 conflict" },
+];
+const CHECK_STEPS: ScriptStep[] = [
+  { id: "c1", label: "Reading the selected documents", detail: "Quantities, parties, dates and terms" },
+  { id: "c2", label: "get_record", kind: "tool" },
+  { id: "c3", label: "Cross-checking documents and record", detail: "18 fields compared across the sources" },
+];
+
+// The shapes of an extract decision — an ADD, an UPDATE, a REMOVAL, a source
+// CONFLICT — are the SAME `ChangeField` row: an add has no `before`, an update
+// bands it, a removal is the − band alone, and a conflict's outcome is the
+// read-only + band over the candidate rows.
+const CARRIER_REF_PROPOSED = "MAEU129394855";
+const VESSEL_CURRENT = "MSC AURA";
+const VESSEL_PROPOSED = "MAERSK SALINA";
+const CONSIGNEE_CURRENT = "Nordic Furniture AB";
+const NOTIFY_CURRENT = "Euro Textile Trading GmbH, Frankfurt";
+const EXTRACT_REASONING = "The booking confirmation names the substitute vessel for this shipping week; the invoice and the packing list disagree on the consignee.";
+const CONSIGNEE_OPTIONS = [
+  { value: "Nordic Furniture AB, Jönköping DC", source: "invoice.pdf", recommended: true },
+  { value: "NF Distribution ApS, Kolding", source: "packing-list.pdf" },
+];
+const EXTRACT_FIELD_IDS = ["carrier_ref", "vessel", "consignee", "gross", "notify"] as const;
+
+// Cross-check findings — severity reads through ONE colored dot badge (red /
+// amber / zinc), the rest stays calm text.
+type Severity = "critical" | "warning" | "info";
+interface Check { id: string; severity: Severity; title: string; detail?: string; comparison?: { values: { label: string; value: string }[]; delta?: string }; sources?: string[] }
+const FINDINGS: Check[] = [
+  {
+    id: "q1", severity: "critical", title: "Quantity disagrees between the invoice and the packing list",
+    detail: "Short-shipping against the invoice risks a customs query and a client claim.",
+    comparison: { values: [{ label: "invoice.pdf", value: "480 pcs" }, { label: "packing-list.pdf", value: "440 pcs" }], delta: "−40 pcs" },
+    sources: ["invoice.pdf", "packing-list.pdf"],
+  },
+  {
+    id: "q2", severity: "warning", title: "Consignee differs between the invoice and the booking",
+    detail: "The invoice names the buyer's own warehouse; the booking routes delivery through a distribution partner. One of them files wrong.",
+    sources: ["invoice.pdf", "booking-confirmation.pdf"],
+  },
+  {
+    id: "q4", severity: "warning", title: "No certificate of origin among the documents",
+    detail: "Destination customs requires a certificate of origin for these goods — request it before the shipping cut-off.",
+  },
+  {
+    id: "q3", severity: "info", title: "Booking cut-off is earlier than the invoiced ship week",
+    detail: "Documents close 14 Jul on the booking; the invoice quotes shipment in the week of 18 Jul. No conflict if the cargo is ready.",
+    sources: ["booking-confirmation.pdf"],
+  },
+];
+
+// A tiny REAL pdf (data URI) so the gallery preview genuinely renders.
+const MOCK_PDF_URL = "data:application/pdf;base64,JVBERi0xLjQKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDE+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9NZWRpYUJveFswIDAgNjEyIDc5Ml0vQ29udGVudHMgNCAwIFIvUmVzb3VyY2VzPDwvRm9udDw8L0YxIDUgMCBSPj4+Pj4+ZW5kb2JqCjQgMCBvYmo8PC9MZW5ndGggNjM+PnN0cmVhbQpCVCAvRjEgMTggVGYgNzIgNzIwIFRkIChOb3JkaWMgRnVybml0dXJlIC0gbW9jayBkb2N1bWVudCkgVGogRVQKZW5kc3RyZWFtIGVuZG9iago1IDAgb2JqPDwvVHlwZS9Gb250L1N1YnR5cGUvVHlwZTEvQmFzZUZvbnQvSGVsdmV0aWNhPj5lbmRvYmoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDA5IDAwMDAwIG4gCjAwMDAwMDAwNTIgMDAwMDAgbiAKMDAwMDAwMDEwMSAwMDAwMCBuIAowMDAwMDAwMjExIDAwMDAwIG4gCjAwMDAwMDAzMjAgMDAwMDAgbiAKdHJhaWxlcjw8L1NpemUgNi9Sb290IDEgMCBSPj4Kc3RhcnR4cmVmCjM4MQolJUVPRg==";
+const toDisplay = (d: Doc): DisplayFile => ({ id: d.id, filename: d.name, mimeType: d.mimeType, url: d.url ?? MOCK_PDF_URL });
+/** A comment's ThreadFile (snake_case, the API shape) → the kit's DisplayFile. */
+const commentFileToDisplay = (f: ThreadFile): DisplayFile => ({ id: f.id, filename: f.filename, mimeType: f.mime_type, url: f.url ?? "", thumbnailUrl: f.thumbnail_url });
+
+// The record's discussion — seeded so the thread, a comment ATTACHMENT, and
+// the author-only edit/delete affordance (the viewer is mem_01) are all
+// visible; the composer appends live. An app wires `useComments()` instead.
+let commentSeq = 0;
+const SEED_COMMENTS: ThreadComment[] = [
+  {
+    id: "cm_a", member_id: "mem_02",
+    content: "Carrier booked for the week of 22/06 — the delivery window still needs the customer's confirmation. Confirmation attached.",
+    files: [{ id: "cmf_a", filename: "booking-confirmation.pdf", mime_type: "application/pdf", url: MOCK_PDF_URL }],
+    created_at: "2026-06-16T09:24:00Z", updated_at: "2026-06-16T09:24:00Z",
+  },
+  { id: "cm_b", member_id: "mem_01", content: "Signed quote attached. Invoicing waits on the tax ID — chasing it with Diego today.", created_at: "2026-06-16T13:02:00Z", updated_at: "2026-06-16T13:02:00Z" },
+];
+
+// The sibling-record counter — each handoff CREATES the next desk's record on
+// ITS table (OP-…/AC-…) and links it here for reference.
+let siblingSeq = 90;
+
+/** "18 Jul, 4:05 PM" — the trail/audit timestamp format. */
+const stamp = (d: Date): string =>
+  `${d.toLocaleDateString("en-GB", { day: "numeric", month: "short" })}, ${d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}`;
+
+/** A sibling record created by a handoff — lives on ITS desk's table; here we
+ *  keep the reference data the cards + drawer show. */
+interface SiblingRecord {
+  id: string;
+  code: string;
+  desk: string;
+  assignee: string;
+  note: string;
+  at: string;
+}
+
+// ── the FEES ledger — the DETAILED money view (both directions), distinct
+// from Billing's invoice DOCUMENTS: every fee the record incurs or charges,
+// with its party, due date, proof reference and paid state. The register +
+// right-docked entity drawer (◀ ▶ steps the rows) is the drill-down law:
+// every child row opens to its FULL detail.
+type FeeDirection = "charge" | "cost";
+interface Fee {
+  id: string;
+  name: string;
+  /** charge = billed to the customer · cost = paid out to a vendor. */
+  direction: FeeDirection;
+  party: string;
+  amount: number;
+  vat: number | null;
+  due: string;
+  invoiceNo: string;
+  paid: boolean;
+  note: string;
+}
+let feeSeq = 4;
+const FEE_SEED: Fee[] = [
+  { id: "fee_1", name: "Freight surcharge", direction: "charge", party: "Harbor Freight Lines", amount: 350_000, vat: 8, due: "", invoiceNo: "", paid: true, note: "" },
+  { id: "fee_2", name: "Trucking", direction: "cost", party: "Northline Haulage", amount: 450_000, vat: 8, due: "2026-07-02", invoiceNo: "NH-2044", paid: false, note: "Last-mile to the port" },
+  { id: "fee_3", name: "Customs advance", direction: "cost", party: "Blue Anchor Brokerage", amount: 275_000, vat: null, due: "", invoiceNo: "BA-118", paid: true, note: "" },
+  { id: "fee_4", name: "Storage overrun", direction: "charge", party: "Harbor Freight Lines", amount: 120_000, vat: 8, due: "2026-08-02", invoiceNo: "", paid: false, note: "3 extra days at Central hub" },
+];
+// `priority` = the mobile contract: Party then Type drop first on a narrow
+// container, Amount + Status survive with the identity; at the floor the rows
+// STACK label-over-value — and the entity drawer always carries the full fee.
+const FEE_COLUMNS: TableColumn[] = [
+  { key: "fee", label: "Fee", flex: 1 },
+  { key: "type", label: "Type", width: 72, priority: 3 },
+  { key: "party", label: "Party", width: 150, priority: 4 },
+  { key: "amount", label: "Amount", width: 104, align: "right", priority: 1 },
+  { key: "status", label: "Status", width: 96, priority: 2 },
+];
+const feeOverdue = (f: Fee): boolean => !f.paid && f.due !== "" && new Date(f.due) < new Date();
+
+
+/** The keyboard DOOR of a pressable linked-record box: an EMPTY absolutely-
+ *  positioned sibling BENEATH the box's content — a button must not contain
+ *  the box's interactive descendants (the `PressableRow`/`TableRow` law), so
+ *  the door carries the tab stop, the accessible name and the focus ring;
+ *  mouse presses ride the `PressableRow` surface, and the interior verbs
+ *  lift above the door via `zIndex: 1`. */
+function BoxDoor({ label, onPress }: { label: string; onPress: () => void }) {
+  const { focusVisible, focusProps } = useFocusRing();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      {...focusProps}
+      style={[
+        { position: "absolute", top: 0, right: 0, bottom: 0, left: 0, borderRadius: 10 },
+        focusVisible ? { boxShadow: FOCUS_RING } : null,
+      ]}
+    />
+  );
+}
+
+/** The file-capable comment editor injected via `renderEditForm` — text + the
+ *  comment's attachments (each removable), committed together (the DEFAULT
+ *  edit form is text-only; the product injects its own equivalent). */
+function CommentFileEditForm({ comment, onSave, onCancel, submitting, labels }: CommentEditFormProps) {
+  const [draft, setDraft] = useState(comment.content);
+  const [draftFiles, setDraftFiles] = useState<ThreadFile[]>(comment.files ?? []);
+  return (
+    <View style={{ gap: 8 }}>
+      <TextInputField value={draft} onChangeText={setDraft} placeholder={labels.editPlaceholder} multiline numberOfLines={2} accessibilityLabel={labels.editPlaceholder} />
+      {draftFiles.length > 0 ? (
+        <FileRows files={draftFiles.map(commentFileToDisplay)} onRemove={(f) => setDraftFiles((prev) => prev.filter((x) => x.id !== f.id))} />
+      ) : null}
+      <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: 8 }}>
+        <Button title={labels.cancel} color="secondary" disabled={submitting} onPress={onCancel} />
+        {/* the adjacent-input exception: an emptied comment can't save */}
+        <Button title={labels.save} color="primary" disabled={submitting || (draft.trim() === "" && draftFiles.length === 0)} loading={submitting} onPress={() => onSave(draft.trim(), draftFiles.length > 0 ? draftFiles : null)} />
+      </View>
+    </View>
+  );
+}
+
+// The documents register — columns ONCE (the Table renders the header band
+// and every cell width from these; facts get dedicated scannable columns
+// instead of a crammed meta string). Same grammar as the case register
+// (tpl_item_list): leading checkbox + select-all, trailing ⋯ gutter.
+const DOC_COLUMNS: TableColumn[] = [
+  { key: "doc", label: "Document", flex: 1, sortable: true },
+  { key: "size", label: "Size", width: 90, align: "right", sortable: true, priority: 3 },
+  { key: "added", label: "Added", width: 96, sortable: true, priority: 2 },
+];
+
+// ── the DOCUMENT SET — the record's OUTPUT desk. The forms each party may
+// need, grouped PER PARTY; the common ones ship pre-checked, the long tail
+// folds behind "Show all forms". (The Documents section above is the INTAKE
+// register — received files; this registry is what the record can PRODUCE.)
+// READINESS: a form declares which RECORD FIELDS it reads (`needs`). The
+// fields' HOME stays their DATA section (the colocation law); every
+// not-ready row shows its mark AND the explicit "Add missing fields"
+// trigger, which toggles a TRANSIENT fill editor under the row (draft →
+// "Save fields" commits onto the record and the panel collapses) — repair
+// in place, never scrolling off hunting for the field. The hint is each
+// field's consumer line, shown in the panel too.
+type NeedKey = "delivery_address" | "commodity_code" | "hazard_class";
+const NEEDS: Record<NeedKey, { label: string; hint: string }> = {
+  delivery_address: { label: "Delivery address", hint: "The consignee's dock — printed on the delivery note" },
+  commodity_code: { label: "Commodity code", hint: "The customs papers read it" },
+  hazard_class: { label: "Hazard class", hint: "Printed on the hazardous goods note" },
+};
+interface SetForm { id: string; label: string; slug: string; sizeKB: number; common?: boolean; needs?: NeedKey[] }
+interface FormGroup { id: string; party: (customer: string | null) => string; forms: SetForm[]; visible: number }
+const FORM_GROUPS: FormGroup[] = [
+  {
+    id: "customer",
+    party: (c) => `Forms — ${c ?? "customer"}`,
+    // the first `visible` rows show; the rest fold ("Show all forms (3 hidden)")
+    visible: 4,
+    forms: [
+      { id: "f1", label: "Shipping instruction", slug: "shipping-instruction", sizeKB: 84, common: true },
+      { id: "f2", label: "Commercial invoice", slug: "commercial-invoice", sizeKB: 92, common: true },
+      { id: "f3", label: "Packing list", slug: "packing-list", sizeKB: 58, common: true },
+      { id: "f4", label: "Delivery note", slug: "delivery-note", sizeKB: 72, needs: ["delivery_address"] },
+      { id: "f5", label: "Certificate of origin", slug: "certificate-of-origin", sizeKB: 61, needs: ["commodity_code"] },
+      { id: "f6", label: "Insurance certificate", slug: "insurance-certificate", sizeKB: 66 },
+      { id: "f7", label: "Arrival notice", slug: "arrival-notice", sizeKB: 49 },
+    ],
+  },
+  {
+    id: "carrier",
+    party: () => "Forms — Northline Haulage (carrier)",
+    visible: 3,
+    forms: [
+      { id: "c1", label: "Transport order", slug: "transport-order", sizeKB: 77, common: true },
+      { id: "c2", label: "Customs declaration draft", slug: "customs-declaration-draft", sizeKB: 118, needs: ["commodity_code"] },
+      // DATA-conditional: this form renders only while the record says the
+      // goods ARE hazardous (the dependent-field law — record data may
+      // reshape the list; output selection never does)
+      { id: "c3", label: "Hazardous goods note", slug: "hazardous-goods-note", sizeKB: 83, needs: ["hazard_class"] },
+    ],
+  },
+];
+const ALL_FORMS = FORM_GROUPS.flatMap((g) => g.forms);
+
+// ── the classification registries — each field gets the input its SHAPE
+// wants (the right-input-per-field law; the worked rows live in General).
+const SERVICE_LEVELS: PickerOption<string>[] = [
+  { value: "standard", label: "Standard" },
+  { value: "express", label: "Express" },
+  { value: "economy", label: "Economy" },
+  { value: "scheduled", label: "Scheduled" },
+];
+const SERVICE_LEVEL_DESC: Record<string, string> = {
+  standard: "Door to door on the regular schedule.",
+  express: "Priority handling — the first available departure.",
+  economy: "Consolidated with other orders — longer lead time, lower cost.",
+  scheduled: "A fixed weekly slot agreed with the customer.",
+};
+const DESTINATIONS: PickerOption<string, { country: string }>[] = [
+  { value: "rotterdam", label: "Rotterdam", data: { country: "Netherlands" } },
+  { value: "hamburg", label: "Hamburg", data: { country: "Germany" } },
+  { value: "singapore", label: "Singapore", data: { country: "Singapore" } },
+  { value: "losangeles", label: "Los Angeles", data: { country: "United States" } },
+  { value: "haiphong", label: "Haiphong", data: { country: "Vietnam" } },
+  { value: "hochiminh", label: "Ho Chi Minh City", data: { country: "Vietnam" } },
+  { value: "tokyo", label: "Tokyo", data: { country: "Japan" } },
+  { value: "dubai", label: "Dubai", data: { country: "United Arab Emirates" } },
+];
+
 export function TplRecord() {
   const id = useRef(1);
   const nextId = (prefix: string) => `${prefix}_${(id.current += 1)}`;
 
+  // ── first paint = Skeleton MIRRORING the final layout, never a spinner.
+  // The 700ms mock stands in for the record query a real app awaits.
+  const [booting, setBooting] = useState(true);
+  useEffect(() => {
+    const t = setTimeout(() => setBooting(false), 700);
+    return () => clearTimeout(t);
+  }, []);
+
+  // ── the discussion thread (CommentList + Composer; author-only edit/delete)
+  const [comments, setComments] = useState<ThreadComment[]>(SEED_COMMENTS);
+  // Files staged on the NEXT comment — consumer-owned, exactly how the
+  // product wires it (the kit composer's `actions` slot opts into attach; the
+  // frontend adds an upload queue, here pickFiles + local state stand in).
+  const [pendingFiles, setPendingFiles] = useState<ThreadFile[]>([]);
+  const attachToComment = () => {
+    void pickFiles({ accept: "application/pdf,image/*", multiple: true }).then((chosen) => {
+      if (chosen.length === 0) return;
+      setPendingFiles((prev) => [
+        ...prev,
+        ...chosen.map((f) => ({ id: `cmf_${(commentSeq += 1)}`, filename: f.name, mime_type: f.type || "application/octet-stream", url: URL.createObjectURL(f) })),
+      ]);
+    });
+  };
+
+  // ── the audit trail — real actions on this surface append to it. An entry
+  // DRILLS DOWN via the Timeline `details` chevron: a field change carries its
+  // From → To diff, a document entry the pressable file, an issue its amount.
+  const [activity, setActivity] = useState<TimelineItem[]>(() => [
+    {
+      id: "ac_4", icon: "calendar", iconColor: colors.zinc[500],
+      label: "Due date changed — Sarah Chen",
+      description: "Pulled in a week after the customer confirmed the window.",
+      right: <Text size="xs" color="muted">16 Jun, 10:02 AM</Text>,
+      details: (
+        <DetailTable labelWidth={80}>
+          <DetailRow label="From"><InlineStatic value="06/29/2026" tabular /></DetailRow>
+          <DetailRow label="To"><InlineStatic value="06/22/2026" tabular /></DetailRow>
+        </DetailTable>
+      ),
+    },
+    {
+      id: "ac_3", icon: "file-text", iconColor: colors.zinc[500],
+      label: "booking-confirmation.pdf added — David Park",
+      right: <Text size="xs" color="muted">16 Jun, 9:20 AM</Text>,
+      details: (
+        <FileRow
+          name="booking-confirmation.pdf"
+          mimeType="application/pdf"
+          onPress={() => setPreview({ files: [{ id: "ac_f1", filename: "booking-confirmation.pdf", mimeType: "application/pdf", url: MOCK_PDF_URL }], index: 0 })}
+        />
+      ),
+    },
+    { id: "ac_2", icon: "building-2", iconColor: colors.zinc[500], label: "Customer attached — Harbor Freight Lines", right: <Text size="xs" color="muted">15 Jun, 2:31 PM</Text> },
+    { id: "ac_1", icon: "plus", iconColor: colors.blue[500], label: "Record created — Sarah Chen", right: <Text size="xs" color="muted">15 Jun, 2:30 PM</Text> },
+  ]);
+  const logActivity = (
+    icon: TimelineItem["icon"],
+    label: string,
+    extra?: { iconColor?: string; description?: string; details?: ReactNode },
+  ) =>
+    setActivity((prev) => [
+      {
+        id: `ac_${prev.length + 1}`,
+        icon,
+        iconColor: extra?.iconColor ?? colors.zinc[500],
+        label,
+        description: extra?.description,
+        details: extra?.details,
+        right: <Text size="xs" color="muted">{stamp(new Date())}</Text>,
+      },
+      ...prev,
+    ]);
+
+  // ── the fees ledger — register + entity drawer (create-then-refine: Add
+  // creates a blank fee and opens it; every field refines in the drawer)
+  const [fees, setFees] = useState<Fee[]>(FEE_SEED);
+  const [feeView, setFeeView] = useState<{ kind: "edit"; id: string } | null>(null);
+  const patchFee = (id: string, p: Partial<Fee>) => setFees((prev) => prev.map((f) => (f.id === id ? { ...f, ...p } : f)));
+  const addFee = () => {
+    const f: Fee = { id: `fee_${(feeSeq += 1)}`, name: "", direction: "cost", party: "", amount: 0, vat: null, due: "", invoiceNo: "", paid: false, note: "" };
+    setFees((prev) => [...prev, f]);
+    setFeeView({ kind: "edit", id: f.id });
+    logActivity("receipt", "Fee added");
+  };
+  const openFee = feeView ? fees.find((f) => f.id === feeView.id) ?? null : null;
+  const feeIdx = openFee ? fees.findIndex((f) => f.id === openFee.id) : -1;
+  const deleteFee = (f: Fee) => {
+    Alert.alert(`Remove ${f.name || "this fee"}?`, "The fee comes off the record's ledger. This can't be undone.", [
+      { text: "Cancel", style: "cancel" },
+      { text: "Remove", style: "destructive", onPress: () => { setFees((prev) => prev.filter((x) => x.id !== f.id)); setFeeView(null); logActivity("receipt", `Fee removed — ${f.name || "unnamed"}`, { description: `${formatMoney(f.amount)}${f.party ? ` — ${f.party}` : ""}` }); } },
+    ]);
+  };
+  // The status column speaks in facts: Paid · Overdue · Due <date> · Unpaid.
+  const feeStatus = (f: Fee): { text: string; danger: boolean } =>
+    f.paid ? { text: "Paid", danger: false }
+      : feeOverdue(f) ? { text: "Overdue", danger: true }
+        : f.due !== "" ? { text: `Due ${new Date(f.due).toLocaleDateString("en-GB", { day: "numeric", month: "short" })}`, danger: false }
+          : { text: "Unpaid", danger: false };
+
   // ── the record — seeded mid-flight so every state is visible
-  const [code, setCode] = useState("RC-2026-0418");
+  const code = "RC-2026-0418";
   const [stage, setStage] = useState<Stage>("sales");
   // The customer book is STATE: the attached customer's tax ID edits inline in
   // the Customer section (that's what un-gates invoicing).
@@ -401,12 +820,10 @@ export function TplRecord() {
   const [weight, setWeight] = useState<number | null>(1250);
   const [salesOwner, setSalesOwner] = useState<string | null>("mem_01");
 
-  // ── customer section — TWO states: attached (read-only-first card, Remove
+  // ── customer section — TWO states: attached (read-only card, Remove
   // detaches) or empty (the find-or-create search). The "create" branch opens
   // a focused Dialog; non-null draft = the dialog is open.
   const [custDraft, setCustDraft] = useState<{ name: string; taxId: string; contact: string; city: string } | null>(null);
-  // The attached card RESTS read-only; Edit switches its fields to inline chips.
-  const [editingCustomer, setEditingCustomer] = useState(false);
   // The Fetch button's in-flight state (the registry lookup).
   const [fetching, setFetching] = useState(false);
 
@@ -415,14 +832,285 @@ export function TplRecord() {
   const [deposit, setDeposit] = useState(0);
   const [confirmIssue, setConfirmIssue] = useState<Invoice | null>(null);
   const seq = useRef(414);
-  const fileSeq = useRef(0);
   const taxId = customer?.taxId ?? "";
   const taxIdValid = TAX_ID_RE.test(taxId);
 
-  // ── files (ids from a monotonic counter — name+index would collide after a
-  //    removal and break React keys + the gallery index)
-  const [files, setFiles] = useState<DisplayFile[]>([]);
-  const [activeFile, setActiveFile] = useState<number | null>(null);
+  // ── the document desk (carried verbatim from tpl_documents — see the module
+  //    banner above; the record's files ARE the desk's register)
+  const [files, setFiles] = useState<Doc[]>(DOCS);
+  const sel = useSelection();
+
+  // Use AI — one entry off the selection, forking into the two document tasks.
+  const [aiOpen, setAiOpen] = useState(false);
+  const [picked, setPicked] = useState<Doc[]>([]);
+  const [brief, setBrief] = useState("");
+  // The fork SELECTS a task; the footer CTA runs it (select → confirm, never
+  // act-on-press for an analysis that costs a run).
+  const [taskChoice, setTaskChoice] = useState<Task | "edit" | null>(null);
+  // True when the dialog opened from a fresh upload — the fork then offers
+  // keeping the files without running anything.
+  const [uploadFlow, setUploadFlow] = useState(false);
+  // Full-page preview over whichever list the user was looking at.
+  const [preview, setPreview] = useState<{ files: DisplayFile[]; index: number } | null>(null);
+  const openPreview = (docs: Doc[], index: number) => setPreview({ files: docs.map(toDisplay), index });
+  const [task, setTask] = useState<Task | null>(null);
+  const [phase, setPhase] = useState<Phase>("fork");
+  const [revealed, setRevealed] = useState(0);
+  // The HOST owns the review: one editable proposal per field (editing IS the
+  // review), a tri-state decision per field (dropped rows collapse struck,
+  // out of the apply), and the conflict's pick (empty until the user chooses).
+  const [carrierRef, setCarrierRef] = useState(CARRIER_REF_PROPOSED);
+  const [vessel, setVessel] = useState(VESSEL_PROPOSED);
+  const [consignee, setConsignee] = useState<string | null>(null);
+  const [grossWeight, setGrossWeight] = useState("1,540");
+  // Order lines proposed from the packing list — RECORD ops (ChangeRecord).
+  const [lineAdd, setLineAdd] = useState<ChangeStatus>("pending");
+  const [lineEdit, setLineEdit] = useState<Record<string, "kept" | "dropped">>({});
+  const [newItem, setNewItem] = useState("Corner protectors, foam");
+  const [newQty, setNewQty] = useState("400");
+  const [editedQty, setEditedQty] = useState("1,450");
+  const lineEditRow = (id: string) => ({
+    status: lineEdit[id] ?? ("pending" as const),
+    onKeep: () => setLineEdit((m) => ({ ...m, [id]: "kept" as const })),
+    onDrop: () => setLineEdit((m) => ({ ...m, [id]: "dropped" as const })),
+    onUndo: () => setLineEdit((m) => { const n = { ...m }; delete n[id]; return n; }),
+  });
+  const [consigneePick, setConsigneePick] = useState<number | "custom" | null>(null);
+  const [customConsignee, setCustomConsignee] = useState("");
+  const [fieldDecisions, setFieldDecisions] = useState<Record<string, "kept" | "dropped">>({});
+
+  const openAi = () => { setPicked(files.filter((f) => sel.has(f.id))); setUploadFlow(false); setAiOpen(true); };
+  // The upload path's save: pending picked files land on the record only here.
+  const commitUpload = () => setFiles((fs) => [...fs, ...picked.filter((p2) => !fs.some((f) => f.id === p2.id))]);
+  const closeAi = () => {
+    setAiOpen(false); setTask(null); setPhase("fork"); setRevealed(0); setUploadFlow(false); setBrief(""); setTaskChoice(null);
+    setCarrierRef(CARRIER_REF_PROPOSED); setVessel(VESSEL_PROPOSED); setConsignee(null); setConsigneePick(null); setCustomConsignee(""); setGrossWeight("1,540"); setLineAdd("pending"); setLineEdit({}); setNewItem("Corner protectors, foam"); setNewQty("400"); setEditedQty("1,450"); setFieldDecisions({});
+  };
+  const startTask = (t: Task) => { setTask(t); setRevealed(0); setPhase("running"); };
+  // ⋯ menu per document row. "Edit with AI" is the app→chat handoff for
+  // dialogue-shaped work on THIS document — a real app calls the SDK:
+  //   void askAi({ file_ids: [f.id], record_ids: [orderRecordId], prompt: `Update ${f.name} — ` });
+  // and the Lotics messenger opens a fresh chat with the file attached AND
+  // previewed beside it; the prompt is prefilled, editable, never auto-sent.
+  // Structured judgment that commits back into fields stays on the Use-AI
+  // review flow. Rename works for real; Download is host-served in an app
+  // (openExternal(file.url)).
+  // One sort at a time; the third toggle on a column clears it (register law).
+  const [docSort, setDocSort] = useState<SortState | null>(null);
+  const [docSearch, setDocSearch] = useState("");
+  const docQuery = docSearch.trim().toLowerCase();
+  const visibleFiles = sortBy(
+    docQuery ? files.filter((f) => f.name.toLowerCase().includes(docQuery)) : files,
+    docSort,
+    (f, key) => (key === "doc" ? f.name.toLowerCase() : key === "size" ? f.sizeKB : f.addedAt),
+  );
+
+  const [renameTarget, setRenameTarget] = useState<Doc | null>(null);
+  const [renameDraft, setRenameDraft] = useState("");
+  const openRename = (f: Doc) => { setRenameTarget(f); setRenameDraft(f.name); };
+  const saveRename = () => {
+    const name = renameDraft.trim();
+    if (renameTarget && name) setFiles((fs) => fs.map((x) => (x.id === renameTarget.id ? { ...x, name } : x)));
+    setRenameTarget(null);
+  };
+  const editWithAi = (docs: Doc[]) => {
+    const names = docs.map((d) => d.name).join(", ");
+    Alert.alert(
+      "Edit with AI",
+      `Opens the Lotics chat on a fresh thread with ${names} attached${docs.length === 1 ? " and previewed side by side" : ""} — describe the change and the agent edits as new versions.`,
+      [{ text: "OK" }],
+    );
+  };
+  const fileMenuFor = (f: Doc): ActionMenuItem[] => [
+    { key: "rename", label: "Rename", icon: "pencil", onPress: () => openRename(f) },
+    { key: "download", label: "Download", icon: "download", onPress: () => { /* a real app: openExternal(f.url) */ } },
+  ];
+
+  const removeSelected = () => {
+    Alert.alert(
+      `Remove ${sel.count} ${sel.count === 1 ? "file" : "files"}?`,
+      "They come off the order's documents — the originals stay wherever they came from.",
+      [
+        { text: "Keep files", style: "cancel" },
+        { text: "Remove", style: "destructive", onPress: () => { setFiles((fs) => fs.filter((f) => !sel.has(f.id))); sel.clear(); } },
+      ],
+    );
+  };
+  const decideField = (id: string, d: "kept" | "dropped" | undefined) =>
+    setFieldDecisions((m) => {
+      const n = { ...m };
+      if (d) n[id] = d;
+      else delete n[id];
+      return n;
+    });
+  const fieldRow = (id: string) => ({
+    status: fieldDecisions[id] ?? ("pending" as const),
+    onKeep: () => decideField(id, "kept"),
+    onDrop: () => decideField(id, "dropped"),
+    onUndo: () => decideField(id, undefined),
+  });
+
+  // The streaming timer idiom — reveal one script step at a time, then settle.
+  const script = task === "check" ? CHECK_STEPS : EXTRACT_STEPS;
+  useEffect(() => {
+    if (phase !== "running") return;
+    if (revealed >= script.length) {
+      const t = setTimeout(() => setPhase("review"), 850);
+      return () => clearTimeout(t);
+    }
+    const t = setTimeout(() => setRevealed((r) => r + 1), revealed === 0 ? 280 : 680);
+    return () => clearTimeout(t);
+  }, [phase, revealed, script.length]);
+
+  const runItems: AgentRunItem[] = [
+    { type: "text", id: "in", text: (task === "check" ? "Comparing the documents against the record and each other." + (brief.trim() ? ` Also: ${brief.trim()}` : "") : "Reading the documents and comparing them with the record.") },
+    ...script.slice(0, Math.min(revealed + 1, script.length)).map((s, i): AgentRunItem => ({
+      type: "step", ...s, detail: i < revealed ? s.detail : undefined, status: i < revealed ? "done" : "running",
+    })),
+  ];
+  if (revealed >= script.length) {
+    runItems.push({ type: "text", id: "out", text: task === "check" ? "Checked 18 fields — 2 disagree, 1 worth noting. The findings are below." : "3 fields already match; 3 need a decision, and the invoice carries 2 lines the order doesn't have yet." });
+  }
+
+  // Apply counts what actually commits: the kept fields.
+  const applyCount = Object.values(fieldDecisions).filter((d) => d === "kept").length + Object.values(lineEdit).filter((d) => d === "kept").length + (lineAdd === "accepted" ? 1 : 0);
+  // Keep-all lives with the HOST (field decisions the registry can't see):
+  // keep every still-pending field; the unresolved conflict stays pending.
+  const keepAll = () => {
+    setLineAdd((st) => (st === "pending" ? "accepted" : st));
+    setLineEdit((m) => ({ qty: m.qty ?? "kept", ...m }));
+    setFieldDecisions((m) => {
+    const n = { ...m };
+    for (const f of EXTRACT_FIELD_IDS) {
+      if (f === "consignee" && consignee == null) continue;
+      if (n[f] == null) n[f] = "kept";
+    }
+    return n;
+  });
+  };
+
+  // ── the classification fields — each one carries the input its shape wants
+  const [serviceLevel, setServiceLevel] = useState("standard");
+  const [fulfilmentStatus, setFulfilmentStatus] = useState("ready");
+  const [insurance, setInsurance] = useState("standard");
+  const [insuredValue, setInsuredValue] = useState<number | null>(24_000);
+  const [destination, setDestination] = useState("rotterdam");
+  // fields the OUTPUT FORMS read — they live in their data sections
+  // (Fulfilment / Classification), EMPTY until filled; the Document set
+  // below only marks their readiness
+  const [deliveryAddress, setDeliveryAddress] = useState("");
+  const [commodityCode, setCommodityCode] = useState("");
+  const [hazardousGoods, setHazardousGoods] = useState(false);
+  const [hazardClass, setHazardClass] = useState("");
+
+  // ── the DOCUMENT SET — the OUTPUT desk's state. Which forms are chosen
+  // (the common ones pre-checked), the folded long tail, the two output
+  // config fields, and the produced set itself. Regenerating REPLACES the
+  // set — it is derived paperwork, not intake (the desk register above
+  // stays the home of received files).
+  const [chosenForms, setChosenForms] = useState<ReadonlySet<string>>(
+    () => new Set(ALL_FORMS.filter((f) => f.common).map((f) => f.id)),
+  );
+  const toggleForm = (fid: string, on: boolean) =>
+    setChosenForms((prev) => {
+      const next = new Set(prev);
+      if (on) next.add(fid);
+      else next.delete(fid);
+      return next;
+    });
+  const [unfolded, setUnfolded] = useState<ReadonlySet<string>>(new Set());
+  const toggleFold = (gid: string) =>
+    setUnfolded((prev) => {
+      const next = new Set(prev);
+      if (next.has(gid)) next.delete(gid);
+      else next.add(gid);
+      return next;
+    });
+  const [issuingOffice, setIssuingOffice] = useState("Haiphong branch");
+  const [prefillSignDate, setPrefillSignDate] = useState(true);
+  const [docSet, setDocSet] = useState<Doc[]>([]);
+  // READINESS, derived live — which record fields the CHECKED forms still
+  // miss. The fields live in their data sections above (Fulfilment /
+  // Classification); the set marks each row's needs (muted while unchecked —
+  // an eligibility note; warning once checked — the consequence) and the
+  // gate reads ONCE as a co-located consequence Callout.
+  const needValues: Record<NeedKey, string> = { delivery_address: deliveryAddress, commodity_code: commodityCode, hazard_class: hazardClass };
+  const missingOf = (f: SetForm) => (f.needs ?? []).filter((k) => needValues[k].trim() === "");
+  const isEligible = (f: SetForm) => f.id !== "c3" || hazardousGoods;
+  const checkedForms = ALL_FORMS.filter((f) => isEligible(f) && chosenForms.has(f.id));
+  const blockingNeeds = [...new Set(checkedForms.flatMap(missingOf))];
+  // the fill panels' DRAFTS — keyed by field, SHARED between panels needing
+  // the same field; Save commits onto the record (the panel then collapses
+  // because the need resolved, and the field's home row shows the value)
+  const [fillDrafts, setFillDrafts] = useState<Record<string, string>>({});
+  // which rows have their fill editor OPEN — toggled ONLY by the row's
+  // explicit "Add missing fields" trigger, never as a side effect of
+  // checking (an undiscoverable expansion is no affordance)
+  const [openFill, setOpenFill] = useState<ReadonlySet<string>>(new Set());
+  const toggleFillOpen = (fid: string) =>
+    setOpenFill((prev) => {
+      const next = new Set(prev);
+      if (next.has(fid)) next.delete(fid);
+      else next.add(fid);
+      return next;
+    });
+  const needSetters: Record<NeedKey, (v: string) => void> = { delivery_address: setDeliveryAddress, commodity_code: setCommodityCode, hazard_class: setHazardClass };
+  const saveNeeds = (keys: NeedKey[]) => {
+    for (const k of keys) needSetters[k]((fillDrafts[k] ?? "").trim());
+  };
+  // Generation is DETERMINISTIC template fill — NOT AI, so no AgentRun
+  // theater: the CTA carries a brief loading state and the whole set
+  // appears at once (a real app awaits its render call the same way).
+  const [producing, setProducing] = useState(false);
+  const runCreate = () => {
+    setProducing(true);
+    const chosen = checkedForms;
+    setTimeout(() => {
+      setDocSet(chosen.map((f) => ({ id: `set-${f.id}`, name: `${f.slug}_${code}.pdf`, mimeType: "application/pdf", kind: "PDF", sizeKB: f.sizeKB, added: "just now", addedAt: 999 })));
+      setProducing(false);
+      logActivity("file-stack", `Document set created — ${chosen.length} ${chosen.length === 1 ? "form" : "forms"}`, { description: chosen.map((f) => f.label).join(", ") });
+    }, 900);
+  };
+  // Missing fields DEGRADE the outcome (those fields print blank, filled by
+  // hand later) — they don't make it impossible, so Create stays ENABLED and
+  // the press CONFIRMS instead (the gating law's degraded-but-valid case):
+  // name what's missing, Cancel returns to the inline fixes.
+  const createSet = () => {
+    const notReady = checkedForms.filter((f) => missingOf(f).length > 0);
+    if (notReady.length === 0) {
+      runCreate();
+      return;
+    }
+    Alert.alert(
+      "Missing fields",
+      `${notReady.map((f) => `${f.label} — ${missingOf(f).map((k) => NEEDS[k].label).join(", ")}`).join(". ")}. Those fields print blank.`,
+      [
+        { text: "Cancel", style: "cancel" },
+        { text: "Generate anyway", onPress: runCreate },
+      ],
+    );
+  };
+  const removeFromSet = (docId: string) => setDocSet((prev) => prev.filter((d) => d.id !== docId));
+
+  // ── the DELIVERY RECEIPT — the QUICK-ISSUE form pattern: capture a
+  // moment's facts, issue ONE document (vs the set's pick-from-registries).
+  // Auto-stamped where the system knows the value (date, receipt no), the
+  // rest prefilled from the record; every field is the right input.
+  const [rcptDate, setRcptDate] = useState("2026-07-18");
+  const [rcptHandler, setRcptHandler] = useState<string | null>("mem_02");
+  const [rcptReference, setRcptReference] = useState("PO-2026-8841");
+  const [rcptCondition, setRcptCondition] = useState("good");
+  const [rcptNote, setRcptNote] = useState("");
+  const [rcptDoc, setRcptDoc] = useState<Doc | null>(null);
+  const [rcptProducing, setRcptProducing] = useState(false);
+  const createReceipt = () => {
+    setRcptProducing(true);
+    setTimeout(() => {
+      setRcptDoc({ id: "rcpt-1", name: `delivery-receipt_${code}.pdf`, mimeType: "application/pdf", kind: "PDF", sizeKB: 64, added: "just now", addedAt: 999 });
+      setRcptProducing(false);
+      logActivity("file-text", "Delivery receipt created — RCPT-2026-0715");
+    }, 900);
+  };
 
   // ── the handoff tasks — the current desk's checklist gates its handoff
   const [tasks, setTasks] = useState<StageTask[]>(TASK_SEEDS);
@@ -466,7 +1154,7 @@ export function TplRecord() {
     taskGroup === "desk"
       ? DESKS.map((st) => ({
           key: st.key,
-          head: <Badge variant="dot" label={st.label} color={st.color} />,
+          head: <Text size="xs" weight="semibold" color="muted">{st.label}</Text>,
           items: taskPool.filter((t) => t.stage === st.key),
           desk: st.key,
           ghosts: suggesting ? SUGGESTED_TASKS[st.key].filter((l) => !tasks.some((t) => t.label === l) && !dismissed.includes(l)) : [],
@@ -481,27 +1169,17 @@ export function TplRecord() {
               { key: "done", head: <Text size="xs" weight="semibold" color="muted">Done</Text>, items: taskPool.filter((t) => t.done), desk: null, ghosts: [] },
             ].filter((g) => g.items.length > 0)
           : [{ key: "all", head: null, items: taskPool, desk: null, ghosts: [] }];
-  const remaining = tasks.filter((t) => t.stage === stage && !t.done).length;
-
-  // ── preferences
-  const [notifyCustomer, setNotifyCustomer] = useState(true);
-  const [partialDelivery, setPartialDelivery] = useState(false);
-
   const customerOptions: PickerOption<string, Customer>[] = customers.map((c) => ({
     value: c.id,
     label: c.name,
     data: c,
   }));
 
-  const patchCustomer = (cid: string, patch: Partial<Customer>) =>
-    setCustomers((prev) => prev.map((c) => (c.id === cid ? { ...c, ...patch } : c)));
-
   // Find-or-create resolution: an existing pick attaches; the custom row opens
   // the create Dialog, prefilled with the query.
   const onPickCustomer = (opt: PickerOption<string, Customer>) => {
     if (customers.some((c) => c.id === opt.value)) {
       setCustomerId(opt.value);
-      setEditingCustomer(false);
       return;
     }
     setCustDraft({ name: opt.value, taxId: "", contact: "", city: "" });
@@ -523,18 +1201,9 @@ export function TplRecord() {
     setCustomers((prev) => [...prev, c]);
     setCustomerId(c.id);
     setCustDraft(null);
-    setEditingCustomer(false);
-  };
-
-  // The registry lookup — fills Contact + City off the customer's tax ID.
-  const fetchDetails = async (c: Customer) => {
-    setFetching(true);
-    const details = await lookupRegistry(c.taxId.trim());
-    patchCustomer(c.id, details);
-    setFetching(false);
   };
 
-  // The same lookup for the create Dialog — fills the draft's fields.
+  // The registry lookup for the create Dialog — fills the draft's fields.
   const fetchIntoDraft = async () => {
     if (!custDraft) return;
     setFetching(true);
@@ -543,31 +1212,6 @@ export function TplRecord() {
     setFetching(false);
   };
 
-  // "New order" is ONE CLICK — a fresh Draft, refined entirely on this surface.
-  const newOrder = () => {
-    setCode(`RC-2026-0${420 + (id.current += 1)}`);
-    setStage("sales");
-    setCustomerId(null);
-    setCustDraft(null);
-    setEditingCustomer(false);
-    setOrderDate("2026-07-04");
-    setDeliverBy("");
-    setTerms("30");
-    setPriority("standard");
-    setWarehouse("central");
-    setReference("");
-    setWeight(null);
-    setSalesOwner(null);
-    setInvoices(freshInvoices());
-    setDeposit(0);
-    setFiles([]);
-    setTasks([]);
-    setDismissed([]);
-    setNewTask("");
-    setNotifyCustomer(true);
-    setPartialDelivery(false);
-  };
-
   const patchCharge = (invKey: string, chKey: string, patch: Partial<Charge>) =>
     setInvoices((prev) =>
       prev.map((inv) =>
@@ -593,6 +1237,7 @@ export function TplRecord() {
     const ref = `INV-2026-${String(seq.current).padStart(4, "0")}`;
     setInvoices((prev) => prev.map((x) => (x.key === inv.key ? { ...x, ref } : x)));
     setConfirmIssue(null);
+    logActivity("credit-card", `Invoice ${ref} issued — ${inv.title}`, { description: formatMoney(invoiceTotal(inv)) });
   };
 
   const printReceipt = () => {
@@ -609,10 +1254,6 @@ export function TplRecord() {
 
   // Open tasks INFORM the handoff, they never block it — the count warns and
   // carries over to the next desk (or stays open on the closed record).
-  const taskHint =
-    stage === "accounting"
-      ? `${remaining} open ${remaining === 1 ? "task stays" : "tasks stay"} open on the closed record.`
-      : `${remaining} open ${remaining === 1 ? "task carries" : "tasks carry"} over to the next desk.`;
   const gate =
     stage === "sales"
       ? { cta: "Hand off to Operations", next: "operations" as Stage }
@@ -621,18 +1262,89 @@ export function TplRecord() {
         : stage === "accounting"
           ? { cta: "Close record", next: "closed" as Stage }
           : null;
-  const prevStage: Stage | null = stage === "operations" ? "sales" : stage === "accounting" ? "operations" : null;
+
+  // ── the handoff flow — the dialog's fields, the TRAIL of marks, and the
+  // SIBLING records the handoffs created (shown as LinkedRecordCards)
+  const [handoffOpen, setHandoffOpen] = useState(false);
+  const [handoffAssignee, setHandoffAssignee] = useState<string | null>(null);
+  const [handoffNote, setHandoffNote] = useState("");
+  const [handoffs, setHandoffs] = useState<TimelineItem[]>([]);
+  const [siblings, setSiblings] = useState<SiblingRecord[]>([]);
+  const [siblingOpen, setSiblingOpen] = useState<string | null>(null);
+  const openSibling = siblingOpen ? siblings.find((sb) => sb.id === siblingOpen) ?? null : null;
+  // ── the customer detail drawer (the linked record's full info)
+  const [customerOpen, setCustomerOpen] = useState(false);
+  // Confirm MARKS the handoff — whom · where · the note — and, in a real app,
+  // CREATES the next desk's record on ITS table, linked here. The mark shows
+  // that linked sibling as a reference; its summary lives on the sibling.
+  const confirmHandoff = () => {
+    if (!gate || gate.next === "closed" || handoffAssignee == null) return;
+    const to = TEAM.find((m) => m.id === handoffAssignee);
+    const at = new Date();
+    const siblingCode = `${gate.next === "operations" ? "OP" : "AC"}-2026-00${(siblingSeq += 1)}`;
+    setSiblings((prev) => [
+      { id: siblingCode, code: siblingCode, desk: stageOf(gate.next).label, assignee: to?.name ?? "", note: handoffNote.trim(), at: stamp(at) },
+      ...prev,
+    ]);
+    setHandoffs((prev) => [
+      {
+        id: `h_${prev.length + 1}`,
+        icon: "send",
+        iconColor: colors.blue[500],
+        label: `Handed off to ${stageOf(gate.next).label} — ${to?.name ?? ""}`,
+        description: handoffNote.trim() || undefined,
+        right: <Text size="xs" color="muted">{stamp(at)}</Text>,
+      },
+      ...prev,
+    ]);
+    logActivity("send", `Handed off to ${stageOf(gate.next).label} — ${to?.name ?? ""}`, { iconColor: colors.blue[500], description: `${siblingCode} created and linked` });
+    setStage(gate.next);
+    setHandoffOpen(false);
+    setHandoffAssignee(null);
+    setHandoffNote("");
+  };
+  // RECALL — the undo: withdraws the sibling (a real app cancels the sibling
+  // record, and gates recall on it being UNTOUCHED at its desk) and returns
+  // the desk. History is never erased — the trail keeps the original mark and
+  // gains a recall mark; the handoff CTA comes back, so redo is possible.
+  const recallHandoff = (sb: SiblingRecord) => {
+    Alert.alert(`Recall the handoff?`, `${sb.code} is withdrawn from ${sb.desk} and the record returns to Sales. The trail keeps both marks.`, [
+      { text: "Cancel", style: "cancel" },
+      {
+        text: "Recall",
+        style: "destructive",
+        onPress: () => {
+          setSiblings((prev) => prev.filter((x) => x.id !== sb.id));
+          setSiblingOpen(null);
+          setStage("sales");
+          setHandoffs((prev) => [
+            { id: `h_${prev.length + 1}`, icon: "x", iconColor: colors.zinc[500], label: `Handoff recalled — ${sb.code} withdrawn`, right: <Text size="xs" color="muted">{stamp(new Date())}</Text> },
+            ...prev,
+          ]);
+          logActivity("x", `Handoff recalled — ${sb.code} withdrawn from ${sb.desk}`);
+        },
+      },
+    ]);
+  };
 
   // ── the outline rail — jump to a section instead of scrolling the long page
+  // GENERAL leads the rail — the item's core details; everything after it is
+  // supplementary (discussion, work, documents, parties, money, lifecycle).
   const SECTIONS = [
-    { key: "details", label: "Details", icon: "file-text" },
+    { key: "general", label: "General", icon: "file-text" },
+    { key: "comments", label: "Comments", icon: "message-square" },
+    { key: "tasks", label: "Tasks", icon: "list-checks" },
+    { key: "documents", label: "Documents", icon: "folder-closed" },
     { key: "customer", label: "Customer", icon: "building-2" },
+    { key: "fees", label: "Fees", icon: "receipt" },
     { key: "billing", label: "Billing", icon: "credit-card" },
-    { key: "files", label: "Files", icon: "folder-closed" },
-    { key: "tasks", label: "Tasks", icon: "list-checks" },
-    { key: "preferences", label: "Preferences", icon: "sliders-horizontal" },
+    { key: "docset", label: "Document set", icon: "file-stack" },
+    { key: "receipt", label: "Delivery receipt", icon: "log-in" },
+    { key: "activity", label: "Activity", icon: "clock" },
+    { key: "handoff", label: "Handoff", icon: "send" },
+    { key: "danger", label: "Danger zone", icon: "circle-alert" },
   ] as const;
-  const nav = useSectionNav(["details", "customer", "billing", "files", "tasks", "preferences"] as const);
+  const nav = useSectionNav(["general", "comments", "tasks", "documents", "customer", "fees", "billing", "docset", "receipt", "activity", "handoff", "danger"] as const);
   // Narrow: the rail becomes a pinned bar naming the CURRENT section; tapping
   // it opens a full-page section picker (Escape / the close control dismiss).
   const [sectionsOpen, setSectionsOpen] = useState(false);
@@ -659,7 +1371,10 @@ export function TplRecord() {
         // Narrow: a pinned bar names the CURRENT section (the spy keeps it
         // honest while scrolling); tapping opens the full-page section picker —
         // no tab strip the thumb has to scroll.
-        <View style={{ borderBottomWidth: 1, borderBottomColor: colors.zinc[200], paddingHorizontal: 12, paddingVertical: 6, flexDirection: "row" }}>
+        <View style={{ borderBottomWidth: 1, borderBottomColor: colors.zinc[200], paddingHorizontal: 12, paddingVertical: 6, flexDirection: "row", alignItems: "center", gap: 8 }}>
+          {/* narrow keeps the standard too — the bare back glyph beside the
+              section bar (the rail that would carry it is collapsed). */}
+          <BackButton onPress={() => {}} />
           <Button
             title={SECTIONS.find((sec) => sec.key === nav.activeKey)?.label ?? "Sections"}
             color="secondary"
@@ -677,363 +1392,334 @@ export function TplRecord() {
           scroll like everything else. */}
       <View style={{ width: "100%", maxWidth: wide ? GUTTER * 2 + CONTENT_MAX : CONTENT_MAX, alignSelf: "center", flexDirection: "row" }}>
       {wide ? <View style={{ width: GUTTER, flexShrink: 0 }} /> : null}
+      {booting ? (
+        /* first paint — Skeleton MIRRORS the final layout (summary →
+           key facts → the documents table), never a lone spinner. */
+        <View style={{ flex: 1, minWidth: 0, gap: 40 }}>
+          <View style={{ gap: 12 }}>
+            <Skeleton width="38%" height={30} />
+            <Skeleton width="26%" height={16} />
+          </View>
+          <View style={{ gap: 12 }}>
+            <Skeleton width="52%" height={20} />
+            <Skeleton width="46%" height={20} />
+            <Skeleton width="55%" height={20} />
+            <Skeleton width="43%" height={20} />
+          </View>
+          <Skeleton height={220} radius={10} />
+        </View>
+      ) : (
+      <>
       {/* the page column is a SectionStack — it owns the 56px beat + the
           hairline BETWEEN top-level blocks (a conditional block that renders
           null never leaves a stray divider) */}
       <SectionStack style={{ flex: 1, minWidth: 0 }}>
-        {/* header band — app bar + summary + key facts read as ONE block */}
-        <View style={{ gap: 32 }}>
-        {/* app bar — CREATE is one click; the surface is where everything is refined */}
-        <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 10, rowGap: 8 }}>
-          <Text size="sm" color="muted">Records <Text size="sm" color="muted">/</Text> <Text size="sm" weight="medium" color="default" tabular>{code}</Text></Text>
-          <View style={{ flex: 1 }} />
-          <Button title="New record" color="secondary" icon="plus" onPress={newOrder} />
-        </View>
-
+        {/* header band — identity · attention · a light summary. No stage here
+            (Tasks carries progress, Handoff carries the desk), no breadcrumb,
+            no create CTA: back lives in the panel, creation belongs to the
+            REGISTER (the list owns "new"), the record page only edits. */}
+        <View style={{ gap: 16 }}>
         <RecordSummary
           title={code}
           subtitle={customer ? [customer.name, customer.city].filter(Boolean).join(" · ") : "No customer"}
-          status={<Badge label={stageOf(stage).label} color={stageOf(stage).color} />}
-          metric={{ label: "To collect", value: formatMoney(grandTotal), tone: stage === "closed" ? "success" : "default" }}
         />
-
-        {/* the header's key facts — a DetailTable with the SAME columns as the
-            Details table below (trailingWidth reserved even though no fact has
-            a trailing), so the two parts sit on one page-wide grid */}
-        <DetailTable labelWidth={150} trailingWidth={88}>
-          <DetailRow label="Sales owner">
-            <InlineMemberSelect
-              members={TEAM}
-              value={salesOwner}
-              onSave={persist(setSalesOwner)}
-              placeholder="Assign…"
-              accessibilityLabel="Sales owner"
-            />
-          </DetailRow>
-          <DetailRow label="Opened">
-            <InlineDatePicker value={orderDate} onSave={persist(setOrderDate)} locale="en-US" accessibilityLabel="Opened date" />
-          </DetailRow>
-          <DetailRow label="Due">
-            <InlineDatePicker value={deliverBy} onSave={persist(setDeliverBy)} locale="en-US" accessibilityLabel="Due date" placeholder="Set a due date…" />
-          </DetailRow>
-          <DetailRow label="Payment terms">
-            <InlineSelect value={terms} options={TERMS} onSave={persist(setTerms)} accessibilityLabel="Payment terms" />
-          </DetailRow>
-        </DetailTable>
-        </View>
-
-        {/* ONE DetailTable = the record's field grid: label · editor · trailing
-            columns set once on the parent, every row aligned like a table —
-            editors share one width even when only some rows carry a trailing
-            action / badge; read-only values are InlineStatic in the same
-            column, aligned to the pixel */}
-        <View onLayout={nav.register("details")}>
-        <Section>
-          <SectionHeading>
-            <SectionHeadingTitle description="The order's core facts — reference, dates, and the amounts every desk reads first.">Details</SectionHeadingTitle>
-            <OwnerTag stage="sales" />
-          </SectionHeading>
-          <DetailTable labelWidth={150} trailingWidth={88}>
-            <DetailRow label="Reference" trailing={<Button title="Copy" color="secondary" onPress={() => {}} />}>
-              <InlineTextInput value={reference} onSave={persist(setReference)} placeholder="Add buyer's reference…" accessibilityLabel="Reference" />
-            </DetailRow>
-            <DetailRow label="Priority">
-              <InlineSelect
-                value={priority}
-                onSave={persist(setPriority)}
-                options={PRIORITY}
-                accessibilityLabel="Priority"
-                renderOptionContent={(o) => (
-                  <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-                    <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: PRIORITY_DOT[o.value] }} />
-                    <Text size="sm">{o.label}</Text>
-                  </View>
-                )}
-              />
-            </DetailRow>
-            <DetailRow label="Location">
-              <InlineSelect value={warehouse} onSave={persist(setWarehouse)} options={WAREHOUSES} accessibilityLabel="Location" />
-            </DetailRow>
-            <DetailRow label="Total weight">
-              <InlineNumberInput
-                value={weight}
-                onSave={persist(setWeight)}
-                min={0}
-                format={(v) => (v == null ? "" : `${v.toLocaleString("en-US")} kg`)}
-                placeholder="Add the weight…"
-                accessibilityLabel="Total weight"
-              />
-            </DetailRow>
-            <DetailRow label="Record ID" trailing={<Badge label="System" color="zinc" />}>
-              <InlineStatic value={code} tabular />
-            </DetailRow>
-          </DetailTable>
-        </Section>
+        {/* the record's ATTENTION state, on top — record-scoped, so it reads
+            as a Callout here (field-scoped state stays on its field) */}
+        {stage !== "closed" && deliverBy !== "" && new Date(deliverBy) < new Date() ? (
+          <Callout tone="warning">
+            <CalloutText>Overdue — the due date has passed. Chase the delivery or move the date.</CalloutText>
+          </Callout>
+        ) : null}
+        {/* the light summary — what's on this record, one quiet line */}
+        <SummaryLine
+          items={[
+            { label: `of ${tasks.length} tasks done`, value: tasks.filter((t) => t.done).length },
+            { label: "documents", value: files.length },
+            { label: "to collect", value: grandTotal, format: "currency", compact: true },
+          ]}
+        />
         </View>
 
-        {/* CUSTOMER — TWO states, no swap mode. Attached: the read-only-first
-            card (identity + editable fields — Tax ID with the registry Fetch
-            that fills Contact + City, which are inline-editable too); Remove
-            detaches the LINK (the customer stays in the book) and drops you to
-            the empty state. Empty: the find-or-create search; the custom row
-            opens the create Dialog. */}
-        <View onLayout={nav.register("customer")}>
+        {/* GENERAL — the MAIN details, FIRST section: the core facts of the
+            item; every other section is supplementary. The body is a
+            SubsectionStack (space-only beat): a headingless LEAD group (the
+            facts every desk reads first) then the named groups — the rail
+            stays sections-only, grouping lives INSIDE the section. Every
+            group's DetailTable repeats the SAME labelWidth/trailingWidth, so
+            the grid stays aligned through the groups; read-only values are
+            InlineStatic in the same column, aligned to the pixel. */}
+        <View onLayout={nav.register("general")}>
         <Section>
           <SectionHeading>
-            <SectionHeadingTitle description="The bill-to party — its tax ID gates invoicing below.">Customer</SectionHeadingTitle>
-            <OwnerTag stage="sales" />
-            {customer && !editingCustomer ? (
-              <Button title="Edit" color="secondary" icon="pencil" onPress={() => setEditingCustomer(true)} />
-            ) : null}
+            <SectionHeadingTitle description="The core facts of the order — what every desk reads first.">General</SectionHeadingTitle>
           </SectionHeading>
-          {customer ? (
-            <View style={{ gap: 10 }}>
-              <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-                <Icon name="building-2" size={16} color={colors.zinc[500]} />
-                <Text weight="medium">{customer.name}</Text>
-                <Text size="xs" color="muted" tabular>{customer.code}</Text>
-              </View>
-              {editingCustomer ? (
-                <DetailTable labelWidth={150} trailingWidth={88}>
-                  <DetailRow
-                    label="Tax ID"
-                    trailing={
-                      <Button
-                        title="Fetch"
-                        color="secondary"
-                        loading={fetching}
-                        disabled={!TAX_ID_RE.test(customer.taxId.trim())}
-                        onPress={() => fetchDetails(customer)}
-                      />
-                    }
-                  >
-                    <InlineTextInput
-                      value={customer.taxId}
-                      onSave={(v: string) => {
-                        if (v.trim() !== "" && !TAX_ID_RE.test(v.trim())) throw new Error("Enter a 10- or 13-digit tax ID.");
-                        return persist((next: string) => patchCustomer(customer.id, { taxId: next.trim() }))(v);
-                      }}
-                      placeholder="Add tax ID…"
-                      accessibilityLabel="Tax ID"
-                    />
-                  </DetailRow>
-                  <DetailRow label="Contact">
-                    <InlineTextInput
-                      value={customer.contact}
-                      onSave={persist((v: string) => patchCustomer(customer.id, { contact: v }))}
-                      placeholder="Add contact…"
-                      accessibilityLabel="Contact"
-                    />
-                  </DetailRow>
-                  <DetailRow label="City">
-                    <InlineTextInput
-                      value={customer.city}
-                      onSave={persist((v: string) => patchCustomer(customer.id, { city: v }))}
-                      placeholder="Add city…"
-                      accessibilityLabel="City"
+          <SubsectionStack>
+            <Subsection>
+              <DetailTable labelWidth={150} trailingWidth={88}>
+                <DetailRow label="Sales owner">
+                  <InlineMemberSelect
+                    members={TEAM}
+                    value={salesOwner}
+                    onSave={persist(setSalesOwner)}
+                    placeholder="Assign…"
+                    accessibilityLabel="Sales owner"
+                  />
+                </DetailRow>
+                <DetailRow label="Opened">
+                  <InlineDatePicker value={orderDate} onSave={persist(setOrderDate)} locale="en-US" accessibilityLabel="Opened date" />
+                </DetailRow>
+                <DetailRow label="Due">
+                  <InlineDatePicker value={deliverBy} onSave={persist(setDeliverBy)} locale="en-US" accessibilityLabel="Due date" placeholder="Set a due date…" />
+                </DetailRow>
+                {/* a LONG description — it wraps in the value column, the
+                    label stays pinned to the control line */}
+                <DetailRow label="Payment terms" description="Counted from the invoice issue date, not delivery. The terms agreed on the signed quote apply to every invoice on this order — change them before issuing; an issued invoice keeps the terms it was issued under.">
+                  <InlineSelect value={terms} options={TERMS} onSave={persist(setTerms)} accessibilityLabel="Payment terms" />
+                </DetailRow>
+              </DetailTable>
+            </Subsection>
+            <Subsection>
+              <SubsectionHeading>
+                <SubsectionHeadingTitle>Order</SubsectionHeadingTitle>
+              </SubsectionHeading>
+              <DetailTable labelWidth={150} trailingWidth={88}>
+                {/* a persistent field DESCRIPTION — under the value, same
+                    vocabulary as FormField; state → `error` / a co-located
+                    Callout. Everything EXPLICIT — no hidden ⓘ gloss. */}
+                <DetailRow label="Reference" description="Printed on every document" trailing={<Button title="Copy" color="secondary" onPress={() => {}} />}>
+                  <InlineTextInput value={reference} onSave={persist(setReference)} placeholder="Add buyer's reference…" accessibilityLabel="Reference" />
+                </DetailRow>
+                <DetailRow label="Priority">
+                  <InlineSelect
+                    value={priority}
+                    onSave={persist(setPriority)}
+                    options={PRIORITY}
+                    accessibilityLabel="Priority"
+                    renderOptionContent={(o) => (
+                      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                        <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: PRIORITY_DOT[o.value] }} />
+                        <Text size="sm">{o.label}</Text>
+                      </View>
+                    )}
+                  />
+                </DetailRow>
+              </DetailTable>
+            </Subsection>
+            <Subsection>
+              <SubsectionHeading>
+                <SubsectionHeadingTitle>Fulfilment</SubsectionHeadingTitle>
+              </SubsectionHeading>
+              <DetailTable labelWidth={150} trailingWidth={88}>
+                <DetailRow label="Location" description="The site that picks and ships the order">
+                  <InlineSelect value={warehouse} onSave={persist(setWarehouse)} options={WAREHOUSES} accessibilityLabel="Location" />
+                </DetailRow>
+                {/* the editor's own TRANSIENT save error — throw from onSave
+                    and the inline editor shows it, stays in edit mode, re-arms
+                    (try a weight over 30.000) */}
+                <DetailRow label="Total weight" description="Packaging included">
+                  <InlineNumberInput
+                    value={weight}
+                    onSave={(v: number | null) => {
+                      if (v != null && v > 30_000) throw new Error("Over the 30.000 kg road limit — split the order.");
+                      return persist(setWeight)(v);
+                    }}
+                    min={0}
+                    format={(v) => (v == null ? "" : `${v.toLocaleString("en-US")} kg`)}
+                    placeholder="Add the weight…"
+                    accessibilityLabel="Total weight"
+                  />
+                </DetailRow>
+                {/* a field an OUTPUT FORM reads — the description names its
+                    consumer; the Document set below marks it while missing */}
+                <DetailRow label="Delivery address" description="The consignee's dock — printed on the delivery note">
+                  <InlineTextInput value={deliveryAddress} onSave={persist(setDeliveryAddress)} placeholder="Add the delivery address…" accessibilityLabel="Delivery address" />
+                </DetailRow>
+              </DetailTable>
+            </Subsection>
+            {/* CLASSIFICATION — the right-input-per-field law, worked. A field
+                gets the control its SHAPE wants, not a default text box:
+                · ≤5 exclusive options the user should SEE → RadioPicker
+                  (column when options carry descriptions, row when short)
+                · a longer closed list → InlineSelect (rich options carry a
+                  description line — it shows in the resting row too)
+                · a pick from a big REGISTRY → InlineSelect searchable (the
+                  search lives in the popover; the bare Combobox is the FORM-
+                  surface control — find-or-create / attach flows)
+                · a boolean → CheckboxInput (Hazardous goods below)
+                · a DEPENDENT field renders only while its parent value makes
+                  it real — no disabled ghost rows.
+                Radio/checkbox/search are PERSISTENT controls (the control is
+                the best display); prose-shaped values stay inline editors. */}
+            <Subsection>
+              <SubsectionHeading>
+                <SubsectionHeadingTitle>Classification</SubsectionHeadingTitle>
+              </SubsectionHeading>
+              <DetailTable labelWidth={150} trailingWidth={88}>
+                <DetailRow label="Service level">
+                  <InlineSelect
+                    value={serviceLevel}
+                    options={SERVICE_LEVELS}
+                    onSave={persist(setServiceLevel)}
+                    accessibilityLabel="Service level"
+                    renderOptionContent={(o) => (
+                      <View style={{ gap: 1, flexShrink: 1 }}>
+                        <Text size="sm">{o.label}</Text>
+                        <Text size="xs" color="muted">{SERVICE_LEVEL_DESC[o.value]}</Text>
+                      </View>
+                    )}
+                  />
+                </DetailRow>
+                <DetailRow label="Fulfilment status">
+                  <RadioPicker
+                    accessibilityLabel="Fulfilment status"
+                    value={fulfilmentStatus}
+                    onValueChange={setFulfilmentStatus}
+                    options={[
+                      { value: "ready", label: "Ready at the warehouse" },
+                      { value: "production", label: "In production", description: "Confirmed ready by the ship date." },
+                      { value: "awaiting", label: "Awaiting inbound supply" },
+                      { value: "partial", label: "Partial", description: "Ships in two lots — the rest follows on the next run." },
+                    ]}
+                  />
+                </DetailRow>
+                <DetailRow label="Insurance">
+                  <RadioPicker
+                    accessibilityLabel="Insurance"
+                    direction="row"
+                    value={insurance}
+                    onValueChange={setInsurance}
+                    options={[
+                      { value: "none", label: "None" },
+                      { value: "standard", label: "Standard" },
+                      { value: "all_risk", label: "All-risk" },
+                    ]}
+                  />
+                </DetailRow>
+                {insurance !== "none" ? (
+                  <DetailRow label="Insured value" description="The cargo value declared to the insurer">
+                    <InlineNumberInput
+                      value={insuredValue}
+                      onSave={persist(setInsuredValue)}
+                      min={0}
+                      format={(v) => (v == null ? "" : formatMoney(v))}
+                      placeholder="Declare the value…"
+                      accessibilityLabel="Insured value"
                     />
                   </DetailRow>
-                </DetailTable>
-              ) : (
-                // At REST the card is read-only — flat InlineStatic values in
-                // the SAME columns, so entering Edit never shifts the grid.
-                <DetailTable labelWidth={150} trailingWidth={88}>
-                  <DetailRow label="Tax ID">
-                    <InlineStatic value={customer.taxId || "—"} tabular />
-                  </DetailRow>
-                  <DetailRow label="Contact">
-                    <InlineStatic value={customer.contact || "—"} />
-                  </DetailRow>
-                  <DetailRow label="City">
-                    <InlineStatic value={customer.city || "—"} />
+                ) : null}
+                {/* a registry pick on a RECORD surface stays an INLINE editor —
+                    `InlineSelect searchable` (the search lives in the popover);
+                    the bare `Combobox` is the FORM-surface control (find-or-
+                    create / attach flows, e.g. the Customer section) */}
+                <DetailRow label="Destination">
+                  <InlineSelect
+                    value={destination}
+                    options={DESTINATIONS}
+                    onSave={persist(setDestination)}
+                    searchable
+                    accessibilityLabel="Destination"
+                    renderOptionContent={(o) => (
+                      <View style={{ gap: 1, flexShrink: 1 }}>
+                        <Text size="sm">{o.label}</Text>
+                        {o.data ? <Text size="xs" color="muted">{o.data.country}</Text> : null}
+                      </View>
+                    )}
+                  />
+                </DetailRow>
+                {/* fields the OUTPUT FORMS read — each description names its
+                    consumers, so an empty value explains itself */}
+                <DetailRow label="Commodity code" description="Customs tariff heading — the customs declaration and certificate of origin read it">
+                  <InlineTextInput value={commodityCode} onSave={persist(setCommodityCode)} placeholder="e.g. 4415.20…" accessibilityLabel="Commodity code" />
+                </DetailRow>
+                {/* a record BOOLEAN is a persistent CheckboxInput, and its
+                    dependents follow the dependent-field law */}
+                <DetailRow label="Hazardous goods">
+                  <CheckboxInput accessibilityLabel="Hazardous goods" checked={hazardousGoods} onChange={setHazardousGoods} />
+                </DetailRow>
+                {hazardousGoods ? (
+                  <DetailRow label="Hazard class" description="Printed on the hazardous goods note">
+                    <InlineTextInput value={hazardClass} onSave={persist(setHazardClass)} placeholder="e.g. Class 3…" accessibilityLabel="Hazard class" />
                   </DetailRow>
-                </DetailTable>
-              )}
-              {/* the card's closing row — Remove (destructive) low-left at
-                  rest; while editing, Done commits out at the bottom right */}
-              {editingCustomer ? (
-                <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
-                  <Button title="Done" color="primary" onPress={() => setEditingCustomer(false)} />
-                </View>
-              ) : (
-                <View style={{ flexDirection: "row" }}>
-                  <Button title="Remove" color="danger" icon="x" onPress={() => setCustomerId(null)} />
-                </View>
-              )}
-            </View>
-          ) : (
-            <View style={{ gap: 10 }}>
-              <Combobox
-                options={customerOptions}
-                onValueChange={onPickCustomer}
-                getOptionDescription={(o) => (o.data ? `${o.data.code} · ${o.data.city}` : undefined)}
-                reflectSelection={false}
-                allowCustom
-                customOptionPlacement="top"
-                customOptionLabel={(q) => `Create new customer “${q}”`}
-              >
-                <ComboboxInput icon="search" placeholder="Search customers by name…" accessibilityLabel="Attach customer" />
-                <ComboboxContent emptyText="No customer matches — type a name to create one" />
-              </Combobox>
-              <Text size="xs" color="muted">
-                No match? Pick “Create new customer …” to add one without leaving the order.
-              </Text>
-            </View>
-          )}
+                ) : null}
+              </DetailTable>
+            </Subsection>
+            {/* system-managed identifiers get a HOME, not a per-row badge */}
+            <Subsection>
+              <SubsectionHeading>
+                <SubsectionHeadingTitle>System</SubsectionHeadingTitle>
+              </SubsectionHeading>
+              <DetailTable labelWidth={150} trailingWidth={88}>
+                <DetailRow label="Record ID">
+                  <InlineStatic value={code} tabular />
+                </DetailRow>
+              </DetailTable>
+            </Subsection>
+          </SubsectionStack>
         </Section>
         </View>
 
-        {/* BILLING — invoice documents on the record, in the inline vocabulary.
-            The issue action lives in each band's header; ONE section-level
-            callout explains what blocks issuing (no per-band totals, no
-            per-band reasons — the collect band owns the number). */}
-        <View onLayout={nav.register("billing")}>
+        {/* COMMENTS — the first SUPPLEMENTARY section (General owns the core
+            details): a coworker's note is the first thing to read on a record
+            someone else touched. CommentList (author-only
+            edit/delete via currentMemberId) + THE kit Composer; an app
+            wires `useComments()` + `useMembers()` to the same shapes. */}
+        <View onLayout={nav.register("comments")}>
         <Section>
           <SectionHeading>
-            <SectionHeadingTitle description="Each invoice owns its charge lines — a charge never lives apart from the document it bills on.">Billing</SectionHeadingTitle>
-            <OwnerTag stage="accounting" />
+            <SectionHeadingTitle description="The record's discussion — every question and decision stays with the order.">Comments</SectionHeadingTitle>
           </SectionHeading>
-
-          {stage === "sales" || stage === "operations" ? (
-            <Callout tone="info">
-              <CalloutText>Billing opens when the record reaches Accounting — hand off above.</CalloutText>
-            </Callout>
-          ) : customer === null ? (
-            <Callout tone="warning">
-              <CalloutText>Attach a customer above to issue invoices.</CalloutText>
-            </Callout>
-          ) : !taxIdValid ? (
-            <Callout tone="warning">
-              <CalloutText>{customer.name} has no valid tax ID — add it in the Customer section to issue invoices.</CalloutText>
-            </Callout>
-          ) : null}
-
-          {/* the section's GROUPS — bands · collect · deposit — divide via the
-              SubsectionStack law (24 + hairline), no hand-rolled dividers */}
-          <SubsectionStack>
-          <View style={{ gap: 10 }}>
-            {invoices.map((inv) => (
-              <InvoiceBand
-                key={inv.key}
-                inv={inv}
-                gateReason={
-                  stage === "sales" || stage === "operations"
-                    ? "Billing opens at the Accounting stage."
-                    : customer === null
-                      ? "Attach a customer to issue."
-                      : !taxIdValid
-                        ? "Add the customer's tax ID to issue."
-                        : ""
-                }
-                onAmount={(chKey, v) => saveCharge(inv.key, chKey, { amount: v })}
-                onMethod={(chKey, m) => saveCharge(inv.key, chKey, { method: m })}
-                onIssue={setConfirmIssue}
+          <CommentList
+            comments={comments}
+            currentMemberId="mem_01"
+            resolveMember={(mid) => { const m = TEAM.find((x) => x.id === mid); return m ? { id: m.id, name: m.name ?? null } : null; }}
+            onEdit={(cid, content, efiles) => setComments((prev) => prev.map((c) => (c.id === cid ? { ...c, content, files: efiles ?? undefined, updated_at: new Date().toISOString() } : c)))}
+            onDelete={(cid) => setComments((prev) => prev.filter((c) => c.id !== cid))}
+            /* the file-capable edit form — the same injection the product uses */
+            renderEditForm={(p) => <CommentFileEditForm {...p} />}
+            /* attachments render as the SAME thumbnail grid the product uses —
+               press previews in the gallery (the desk's preview state) */
+            renderFiles={(files) => (
+              <FileGrid
+                files={files.map(commentFileToDisplay)}
+                itemSize={84}
+                onFilePress={(f) => setPreview({ files: [f], index: 0 })}
               />
-            ))}
-          </View>
+            )}
+            /* compact timestamp — the product formats RELATIVE ("2 days ago",
+               date-fns); a template stays dependency-free and deterministic */
+            formatTimestamp={(iso) => { const d = new Date(iso); return `${d.toLocaleDateString("en-GB", { day: "numeric", month: "short" })}, ${d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}`; }}
+          />
+          {/* THE kit Composer — the one composing surface everywhere (chat,
+              agent prompts, comments): attach via actionsButton, the staged
+              files (removable until Send) ride the files slot. */}
+          <Composer
+            onSend={(content) => {
+              setComments((prev) => [...prev, { id: `cm_${(commentSeq += 1)}`, member_id: "mem_01", content, files: pendingFiles.length > 0 ? pendingFiles : undefined, created_at: new Date().toISOString(), updated_at: new Date().toISOString() }]);
+              setPendingFiles([]);
+            }}
+            placeholder="Write a comment…"
+            sendLabel="Send"
+            actionsButton={<IconButton size="lg" color="secondary" icon="plus" tooltip="Attach files" onPress={attachToComment} />}
+            files={pendingFiles.length > 0 ? (
+              <FileRows files={pendingFiles.map(commentFileToDisplay)} onRemove={(f) => setPendingFiles((prev) => prev.filter((x) => x.id !== f.id))} />
+            ) : undefined}
+          />
+        </Section>
+        </View>
 
-          {/* collect band — a headingless Subsection: the total owns the number */}
-          <Subsection>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Text weight="semibold" style={{ flex: 1 }}>Total to collect</Text>
-              <Text weight="semibold" size="lg" tabular>{formatMoney(grandTotal)}</Text>
-            </View>
-            {allMissing.length > 0 ? (
-              <Callout tone="warning">
-                <CalloutText>
-                  {allMissing.length} charged {allMissing.length === 1 ? "line has" : "lines have"} no payment method — set them before printing the receipt.
-                </CalloutText>
-              </Callout>
-            ) : null}
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Text size="xs" color="muted" style={{ flex: 1 }}>{issuedCount} of {invoices.length} issued</Text>
-              <Button title="Print receipt" color="primary" disabled={grandTotal <= 0} onPress={printReceipt} />
-            </View>
-          </Subsection>
-
-          {/* deposit band — a named Subsection: labelled separate, never part
-              of the total (the badge rides the heading row's right edge) */}
-          <Subsection>
-            <SubsectionHeading>
-              <SubsectionHeadingTitle>Deposit</SubsectionHeadingTitle>
-              <Badge label="Collected separately" color="zinc" />
-            </SubsectionHeading>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 12, flexWrap: "wrap", minHeight: 40 }}>
-              <Text size="sm" color="muted" style={{ width: 150 }}>Refundable</Text>
-              <View style={{ flexGrow: 1, flexBasis: 160 }}>
-                <InlineNumberInput
-                  value={deposit || null}
-                  onSave={persist((v: number | null) => setDeposit(v ?? 0))}
-                  min={0}
-                  format={money}
-                  placeholder="—"
-                  accessibilityLabel="Deposit amount"
-                />
-              </View>
-              <Button
-                title="Deposit receipt"
-                color="secondary"
-                disabled={deposit <= 0}
-                onPress={() => Alert.alert("Deposit receipt", `Printing deposit receipt for ${formatMoney(deposit)}.`, [{ text: "OK" }])}
-              />
-            </View>
-          </Subsection>
-          </SubsectionStack>
-        </Section>
-        </View>
-
-        {/* FILES — the record's document CRUD: drop to add, click a thumbnail
-            to preview in the gallery, ✕ to delete. */}
-        <View onLayout={nav.register("files")}>
-        <Section>
-          <SectionHeading>
-            <SectionHeadingTitle description="The signed quote, the PO, photos — everything filed on the order.">Files</SectionHeadingTitle>
-            <OwnerTag stage="operations" />
-            {files.length > 0 ? <SectionHeadingMeta>{`${files.length} ${files.length === 1 ? "file" : "files"}`}</SectionHeadingMeta> : null}
-          </SectionHeading>
-          {files.length > 0 ? (
-            <FileThumbnailGrid
-              files={files}
-              itemSize={84}
-              onFilePress={(f) => setActiveFile(files.findIndex((x) => x.id === f.id))}
-              onRemove={(fid) => setFiles((prev) => prev.filter((x) => x.id !== fid))}
-            />
-          ) : null}
-          <FileDropzone
-            height={100}
-            label="Drop the signed quote or PO"
-            hint="or click to browse · PDF, images"
-            dropLabel="Release to attach"
-            accept="application/pdf,image/*"
-            accessibilityLabel="Attach documents"
-            onFiles={(dropped) =>
-              setFiles((prev) => [
-                ...prev,
-                ...dropped.map((f) => ({
-                  id: `file_${(fileSeq.current += 1)}`,
-                  filename: f.name,
-                  mimeType: f.type || "application/octet-stream",
-                  url: URL.createObjectURL(f),
-                })),
-              ])
-            }
-          />
-        </Section>
-        </View>
-
-        {/* TASKS — the handoff checklist, grouped by the desk that owns
-            them; every row edits (the stage gates the handoff and Billing,
-            never task editing). The CURRENT desk's open tasks warn beside
-            the handoff CTA below. */}
-        <View onLayout={nav.register("tasks")}>
-        <Section>
-          <SectionHeading>
-            <SectionHeadingTitle description="Each desk clears its checklist to hand the record off.">Tasks</SectionHeadingTitle>
-            {/* the same compact meter as the register's Tasks column */}
-            {tasks.length > 0 ? (
-              <View style={{ width: 120 }}>
-                <ProgressBar compact value={tasks.filter((t) => t.done).length} max={tasks.length} format="fraction" color={colors.zinc[500]} completeColor={colors.emerald[500]} />
-              </View>
+        {/* TASKS — the handoff checklist, grouped by the desk that owns
+            them; every row edits (the stage gates the handoff and Billing,
+            never task editing). The CURRENT desk's open tasks warn beside
+            the handoff CTA below. */}
+        <View onLayout={nav.register("tasks")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Each desk clears its checklist to hand the record off.">Tasks</SectionHeadingTitle>
+            {/* the same compact meter as the register's Tasks column */}
+            {tasks.length > 0 ? (
+              <View style={{ width: 120 }}>
+                <ProgressBar compact value={tasks.filter((t) => t.done).length} max={tasks.length} format="fraction" color={colors.zinc[500]} completeColor={colors.emerald[500]} />
+              </View>
             ) : null}
           </SectionHeading>
           {/* the Task-list toolbar grammar: a clearable Group-by FilterChip +
@@ -1102,18 +1788,21 @@ export function TplRecord() {
           {/* the capture row at the TOP — a new task lands on the capture desk
               (the current one; the last desk once closed) */}
           <CaptureRow value={newTask} onChangeText={setNewTask} onSubmit={addTask} placeholder={`Add a task for ${stageOf(captureDesk).label}…`} accessibilityLabel="Add a task" />
-          <View style={{ gap: 14 }}>
+          {/* the groups divide via the SubsectionStack beat (space-only) —
+              the head is a SubsectionHeading carrying the group's name + count,
+              the "all" (ungrouped) view a headingless Subsection */}
+          <SubsectionStack>
             {taskSections.map((g) => {
               const desk = g.desk;
               return (
-              <View key={g.key} style={{ gap: 6 }}>
+              <Subsection key={g.key}>
                 {g.head ? (
-                  <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                  <SubsectionHeading>
                     {g.head}
                     {g.items.length > 0 ? (
                       <Text size="xs" color="muted" tabular>{`${g.items.filter((t) => t.done).length}/${g.items.length}`}</Text>
                     ) : null}
-                  </View>
+                  </SubsectionHeading>
                 ) : null}
                 {/* rows ride the Checklist compound — one geometry, EVERY
                     desk's rows fully editable (the stage gates the handoff
@@ -1175,74 +1864,653 @@ export function TplRecord() {
                     </View>
                   ) : null}
                 </Checklist>
-              </View>
+              </Subsection>
               );
             })}
+          </SubsectionStack>
+        </Section>
+        </View>
+
+        {/* DOCUMENTS — the document desk: the register Table (search · Create
+            documents · Add files) whose selection feeds the Use-AI fork below. */}
+        <View onLayout={nav.register("documents")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle>Documents</SectionHeadingTitle>
+          </SectionHeading>
+          {/* toolbar — search LEFT, the CTAs RIGHT, one row (the register band). */}
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            <View style={{ flexGrow: 1, flexBasis: 220, minWidth: 200, maxWidth: 340 }}>
+              <SearchInput
+                placeholder="Search documents…"
+                value={docSearch}
+                onChangeText={setDocSearch}
+                accessibilityLabel="Search documents"
+              />
+            </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 */}
+            <Button
+              title="Add files"
+              color="secondary"
+              onPress={() => {
+                void pickFiles({ accept: "application/pdf,image/*", multiple: true }).then((chosen) => {
+                  if (chosen.length === 0) return;
+                  const added = chosen.map((f, i) => ({ id: `added-${f.name}-${i}`, name: f.name, mimeType: f.type || "application/pdf", kind: (f.type || "application/pdf").split("/")[1]?.toUpperCase().slice(0, 4) ?? "FILE", sizeKB: Math.round(f.size / 1024), added: "just now", addedAt: 999 }));
+                  // PENDING until the user chooses: saving is a decision the
+                  // dialog asks for (save only / run a task), never a side
+                  // effect of picking — closing the dialog discards.
+                  setPicked(added);
+                  setUploadFlow(true);
+                  setAiOpen(true);
+                });
+              }}
+            />
           </View>
+          <Table
+            columns={DOC_COLUMNS}
+            leading={24}
+            trailing={44}
+            sort={docSort}
+            onSort={(key) => setDocSort(cycleSort(docSort, key))}
+            selectAll={
+              <CheckboxInput
+                accessibilityLabel="Select all documents"
+                checked={sel.allSelected(visibleFiles.map((f) => f.id))}
+                indeterminate={sel.indeterminate(visibleFiles.map((f) => f.id))}
+                onChange={(on) => sel.setAll(visibleFiles.map((f) => f.id), on)}
+              />
+            }
+          >
+            {visibleFiles.map((f, fi) => (
+              <TableRow
+                key={f.id}
+                onPress={() => openPreview(visibleFiles, fi)}
+                marked={sel.has(f.id)}
+                accessibilityLabel={`Open ${f.name}`}
+                leading={<CheckboxInput accessibilityLabel={`Select ${f.name}`} checked={sel.has(f.id)} onChange={(on) => sel.toggle(f.id, on)} />}
+                trailing={<ActionMenu items={fileMenuFor(f)} accessibilityLabel={`Actions for ${f.name}`} />}
+              >
+                <TableCell>
+                  <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+                    {/* ONE square 32px slot for every type: an image fills it as a
+                        real thumbnail, a document centers its badge in it */}
+                    <FileThumbnail file={toDisplay(f)} size={32} onPress={() => openPreview(visibleFiles, fi)} />
+                    <Text size="sm" weight="medium" numberOfLines={1} style={{ flexShrink: 1 }}>{f.name}</Text>
+                  </View>
+                </TableCell>
+                <TableCell>
+                  <Text size="sm" tabular>{fmtSize(f.sizeKB)}</Text>
+                </TableCell>
+                <TableCell>
+                  <Text size="sm" tabular>{f.added}</Text>
+                </TableCell>
+              </TableRow>
+            ))}
+          </Table>
         </Section>
         </View>
 
-        {/* THE HANDOFF GATE — the atomic boundary between departments, not a
-            form and not a message: the record itself changes desks. Each stage
-            names what it owes (the why-hint) before its CTA un-gates; the
-            receiving department finds the record in ITS register. */}
-        {gate ? (
-          <View style={{ gap: 12 }}>
-            {remaining > 0 ? (
-              <Callout tone="info">
-                <CalloutText>{taskHint}</CalloutText>
-              </Callout>
-            ) : null}
-            <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 8 }}>
-              {prevStage ? (
-                <Button title={`Back to ${stageOf(prevStage).label}`} color="muted" onPress={() => setStage(prevStage)} />
+        {/* CUSTOMER — TWO states, no edit mode. Attached: the READ-ONLY card
+            (the customer is a linked record, not this record's fields); the
+            correction path is Remove → attach the right one (the create
+            Dialog carries tax ID + the registry Fetch). Empty: the
+            find-or-create search; the custom row opens the create Dialog. */}
+        <View onLayout={nav.register("customer")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="The bill-to party — its tax ID gates invoicing below.">Customer</SectionHeadingTitle>
+          </SectionHeading>
+          {customer ? (
+            <View style={{ gap: 10 }}>
+              {/* the LINKED-record REFERENCE IMPLEMENTATION (no wrapper
+                  component; copy and customize): a BORDERED box scoping the
+                  other record's data — identity, then the facts stacked
+                  VERTICALLY (legible at any width, never squeezed), the verbs
+                  visible inside (destructive LEFT in danger, go-to RIGHT).
+                  The WHOLE box presses open the detail drawer — built on
+                  `PressableRow` (role-less surface, hover wash spans nested
+                  controls) + the `BoxDoor` sibling: NEVER role="button" on a
+                  container with interactive descendants (invalid HTML). */}
+              <PressableRow
+                onPress={() => setCustomerOpen(true)}
+                style={{ flexDirection: "column", alignItems: "stretch", borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 10, paddingHorizontal: 16, paddingVertical: 16, gap: 12 }}
+              >
+                <BoxDoor label={`${customer.name} — details`} onPress={() => setCustomerOpen(true)} />
+                <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+                  <View style={{ width: 34, height: 34, borderRadius: 8, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" }}>
+                    <Icon name="building-2" size={17} color={colors.zinc[600]} />
+                  </View>
+                  <View style={{ flex: 1, minWidth: 0 }}>
+                    <Text size="sm" weight="medium" numberOfLines={1}>{customer.name}</Text>
+                    <Text size="xs" color="muted" tabular>{customer.code}</Text>
+                  </View>
+                </View>
+                <View style={{ gap: 6 }}>
+                  {[
+                    { label: "Tax ID", value: customer.taxId || "—" },
+                    { label: "Contact", value: customer.contact || "—" },
+                    { label: "City", value: customer.city || "—" },
+                  ].map((f) => (
+                    <View key={f.label} style={{ flexDirection: "row", gap: 10 }}>
+                      <Text size="sm" color="muted" style={{ width: 80 }}>{f.label}</Text>
+                      <Text size="sm" style={{ flex: 1 }}>{f.value}</Text>
+                    </View>
+                  ))}
+                </View>
+                {/* the action row, INSIDE the box: destructive on the LEFT,
+                    the go-to verb on the RIGHT (the box itself = details);
+                    zIndex lifts the verbs above the door's hit area */}
+                <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 8, zIndex: 1 }}>
+                  <Button title="Remove" color="danger" onPress={() => setCustomerId(null)} />
+                  <View style={{ flex: 1 }} />
+                  <Button title="Open record" color="secondary" onPress={() => { /* a real app navigates to the customer's page */ }} />
+                </View>
+              </PressableRow>
+              {/* invalid STATE is a Callout CO-LOCATED with what it describes —
+                  it lives on the customer card, not floating at a section top */}
+              {!taxIdValid ? (
+                <Callout tone="warning">
+                  <CalloutText>No valid tax ID — invoicing stays blocked. Replace this customer with one that carries it.</CalloutText>
+                </Callout>
               ) : null}
-              <Text size="xs" color="muted" align="right" style={{ flexGrow: 1, flexBasis: 160 }}>
-                {`Handing off moves the record to ${stageOf(gate.next).label} — fields stay editable after.`}
+            </View>
+          ) : (
+            <View style={{ gap: 10 }}>
+              <Combobox
+                options={customerOptions}
+                onValueChange={onPickCustomer}
+                getOptionDescription={(o) => (o.data ? `${o.data.code} · ${o.data.city}` : undefined)}
+                reflectSelection={false}
+                allowCustom
+                customOptionPlacement="top"
+                customOptionLabel={(q) => `Create new customer “${q}”`}
+              >
+                <ComboboxInput icon="search" placeholder="Search customers by name…" accessibilityLabel="Attach customer" />
+                <ComboboxContent emptyText="No customer matches — type a name to create one" />
+              </Combobox>
+              <Text size="xs" color="muted">
+                No match? Pick “Create new customer …” to add one without leaving the order.
               </Text>
-              <Button title={gate.cta} color="primary" onPress={() => setStage(gate.next)} />
             </View>
-          </View>
-        ) : (
-          <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 8 }}>
-            <Text size="xs" color="muted" style={{ flexGrow: 1, flexBasis: 160 }}>
-              Closed on 04/07/2026 — every field still edits in place and saves on its own.
-            </Text>
-            <Button title="Reopen at Accounting" color="muted" onPress={() => setStage("accounting")} />
-          </View>
-        )}
+          )}
+        </Section>
+        </View>
+
+        {/* FEES — the DETAILED money ledger, both directions (charge = billed
+            to the customer · cost = paid to a vendor), distinct from Billing's
+            invoice DOCUMENTS. The drill-down law: a compact register row, and
+            EVERY row opens its FULL detail in a right-docked entity drawer
+            (◀ ▶ steps the rows). Add is create-then-refine — a blank fee
+            opens in the drawer. */}
+        <View onLayout={nav.register("fees")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Every fee the order incurs or charges — its party, due date and paid state.">Fees</SectionHeadingTitle>
+            <Button title="Add fee" color="secondary" onPress={addFee} />
+          </SectionHeading>
+          <SummaryLine
+            items={[
+              { label: "collected", value: fees.filter((f) => f.direction === "charge" && f.paid).reduce((s, f) => s + f.amount, 0), format: "currency", compact: true },
+              { label: "to collect", value: fees.filter((f) => f.direction === "charge" && !f.paid).reduce((s, f) => s + f.amount, 0), format: "currency", compact: true },
+              { label: "to pay", value: fees.filter((f) => f.direction === "cost" && !f.paid).reduce((s, f) => s + f.amount, 0), format: "currency", compact: true, tone: fees.some((f) => f.direction === "cost" && feeOverdue(f)) ? "warning" : undefined },
+            ]}
+          />
+          {fees.length === 0 ? (
+            <EmptyState icon="receipt" message="No fees on this order" hint="Add the first charge or cost — it opens ready to fill in." action={<Button title="Add fee" color="primary" onPress={addFee} />} />
+          ) : (
+            <Table columns={FEE_COLUMNS}>
+              {fees.map((f) => {
+                const st = feeStatus(f);
+                return (
+                  <TableRow key={f.id} onPress={() => setFeeView({ kind: "edit", id: f.id })} selected={feeView?.id === f.id} accessibilityLabel={`Open ${f.name || "fee"}`}>
+                    <TableCell><Text size="sm" weight="medium" numberOfLines={1}>{f.name || "—"}</Text></TableCell>
+                    <TableCell><Text size="sm" color="muted">{f.direction === "charge" ? "Charge" : "Cost"}</Text></TableCell>
+                    <TableCell><Text size="sm" color="muted" numberOfLines={1}>{f.party || "—"}</Text></TableCell>
+                    <TableCell><Text size="sm" tabular numberOfLines={1}>{formatMoney(f.amount)}</Text></TableCell>
+                    <TableCell><Text size="sm" color={st.danger ? "danger" : "muted"} tabular numberOfLines={1}>{st.text}</Text></TableCell>
+                  </TableRow>
+                );
+              })}
+            </Table>
+          )}
+        </Section>
+        </View>
 
-        {/* the settings shape: title + description left, a live control right,
-            applied on change */}
-        <View onLayout={nav.register("preferences")}>
+        {/* BILLING — invoice documents on the record, in the inline vocabulary.
+            The issue action lives in each band's header; ONE section-level
+            callout explains what blocks issuing (no per-band totals, no
+            per-band reasons — the collect band owns the number). */}
+        <View onLayout={nav.register("billing")}>
         <Section>
           <SectionHeading>
-            <SectionHeadingTitle description="Per-order handling and notification preferences.">Preferences</SectionHeadingTitle>
+            <SectionHeadingTitle description="Each invoice owns its charge lines — a charge never lives apart from the document it bills on.">Billing</SectionHeadingTitle>
           </SectionHeading>
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 40 }}>
-            <View style={{ flex: 1, gap: 1 }}>
-              <Text size="sm">Notify the customer</Text>
-              <Text size="xs" color="muted">Email changes to the primary contact</Text>
+
+          {/* The action-gating law: a not-ready CTA is DISABLED and a PROBLEM
+              reads as a co-located Callout at its scope, once — a band-local
+              inconsistency in its band, a broken record-level premise here.
+              The stage gate is NOT a problem (just not yet) — it stays
+              silent. Never prose beside a CTA. */}
+          {customer === null ? (
+            <Callout tone="warning">
+              <CalloutText>Attach a customer — invoices need a bill-to party.</CalloutText>
+            </Callout>
+          ) : !taxIdValid ? (
+            <Callout tone="warning">
+              <CalloutText>The customer has no valid tax ID — replace it in the Customer section.</CalloutText>
+            </Callout>
+          ) : null}
+
+          {/* the section's GROUPS — bands · collect · deposit — divide via the
+              SubsectionStack beat, no hand-rolled gaps */}
+          <SubsectionStack>
+          {invoices.map((inv) => (
+            <InvoiceBand
+              key={inv.key}
+              inv={inv}
+              /* issuing gates on the RECORD's premises only (a customer with a
+                 valid tax ID) — never silently on the stage: a filled band
+                 whose Issue stays dead with no visible reason is a trap */
+              gated={customer === null || !taxIdValid}
+              onAmount={(chKey, v) => saveCharge(inv.key, chKey, { amount: v })}
+              onMethod={(chKey, m) => saveCharge(inv.key, chKey, { method: m })}
+              onIssue={setConfirmIssue}
+            />
+          ))}
+
+          {/* collect band — a headingless Subsection: the total owns the number */}
+          <Subsection>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Text weight="semibold" style={{ flex: 1 }}>Total to collect</Text>
+              <Text weight="semibold" size="lg" tabular>{formatMoney(grandTotal)}</Text>
             </View>
-            <Switch accessibilityLabel="Notify the customer" value={notifyCustomer} onChange={setNotifyCustomer} />
-          </View>
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 40 }}>
-            <View style={{ flex: 1, gap: 1 }}>
-              <Text size="sm">Allow partial delivery</Text>
-              <Text size="xs" color="muted">Ship available lines before the rest arrive</Text>
+            {allMissing.length > 0 ? (
+              <Callout tone="warning">
+                <CalloutText>
+                  {allMissing.length} charged {allMissing.length === 1 ? "line has" : "lines have"} no payment method — set them before printing the receipt.
+                </CalloutText>
+              </Callout>
+            ) : null}
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Text size="xs" color="muted" style={{ flex: 1 }}>{issuedCount} of {invoices.length} issued</Text>
+              <Button title="Print receipt" color="primary" disabled={grandTotal <= 0} onPress={printReceipt} />
             </View>
-            <Switch accessibilityLabel="Allow partial delivery" value={partialDelivery} onChange={setPartialDelivery} />
-          </View>
+          </Subsection>
+
+          {/* deposit band — a named Subsection, never part of the total */}
+          <Subsection>
+            <SubsectionHeading>
+              <SubsectionHeadingTitle>Deposit</SubsectionHeadingTitle>
+            </SubsectionHeading>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 12, flexWrap: "wrap", minHeight: 40 }}>
+              <Text size="sm" color="muted" style={{ width: 150 }}>Refundable</Text>
+              <View style={{ flexGrow: 1, flexBasis: 160 }}>
+                <InlineNumberInput
+                  value={deposit || null}
+                  onSave={persist((v: number | null) => setDeposit(v ?? 0))}
+                  min={0}
+                  format={money}
+                  placeholder="—"
+                  accessibilityLabel="Deposit amount"
+                />
+              </View>
+              <Button
+                title="Deposit receipt"
+                color="secondary"
+                disabled={deposit <= 0}
+                onPress={() => Alert.alert("Deposit receipt", `Printing deposit receipt for ${formatMoney(deposit)}.`, [{ text: "OK" }])}
+              />
+            </View>
+          </Subsection>
+          </SubsectionStack>
+        </Section>
+        </View>
+
+        {/* DOCUMENT SET — the OUTPUT desk, the last WORK section: the record's
+            top is intake, the bottom produces the paperwork on demand. Forms
+            group PER PARTY (each party gets its set); the common ones ship
+            pre-checked and the long tail folds behind "Show all forms".
+            Between the pickers and the CTA sit the OUTPUT CONFIG fields —
+            values printed on the forms, each with the input its shape wants.
+            Create regenerates the whole set (derived paperwork — the desk
+            register above keeps what ARRIVED); the produced files list right
+            under the action row, previewable, with Download all beside. */}
+        <View onLayout={nav.register("docset")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="The paperwork this record produces — pick each party's forms, generate on demand.">Document set</SectionHeadingTitle>
+          </SectionHeading>
+          <SubsectionStack>
+            {FORM_GROUPS.map((g) => {
+              const groupForms = g.forms.filter(isEligible);
+              const open = unfolded.has(g.id);
+              const shown = open ? groupForms : groupForms.slice(0, g.visible);
+              const hidden = groupForms.length - g.visible;
+              return (
+                <Subsection key={g.id}>
+                  <SubsectionHeading>
+                    <SubsectionHeadingTitle>{g.party(customer?.name ?? null)}</SubsectionHeadingTitle>
+                  </SubsectionHeading>
+                  {/* the PICKER rows ride the Checklist primitive — IT owns
+                      the geometry (row height, control/title alignment, the
+                      meta/expansion indent); hand-rolling this anatomy is how
+                      alignment drifts. controlWidth 24 = CheckboxInput. */}
+                  <Checklist controlWidth={24}>
+                    {shown.map((f) => {
+                      // READINESS per row, DISCOVERABLE: every not-ready row
+                      // shows its mark (what's missing — warning ink once
+                      // checked, because it now blocks) AND the explicit
+                      // trigger beside the label — a colored TextLink (an
+                      // inline row action; a Button here outweighs the row)
+                      // toggling the TRANSIENT fill editor in the row's
+                      // `expansion`. Save commits onto the record fields
+                      // (their home rows show the values) and the panel
+                      // collapses resolved; mark + trigger vanish = ready. A
+                      // ready form stays SILENT. Checking never expands
+                      // anything by itself.
+                      const missing = missingOf(f);
+                      const checked = chosenForms.has(f.id);
+                      const filling = missing.length > 0 && openFill.has(f.id);
+                      return (
+                        <ChecklistRow
+                          key={f.id}
+                          control={<CheckboxInput accessibilityLabel={f.label} checked={checked} onChange={(on) => toggleForm(f.id, on)} />}
+                          meta={missing.length > 0 && !filling ? (
+                            <View style={{ flexDirection: "row", alignItems: "center", gap: 5 }}>
+                              <Icon name="circle-alert" size={12} color={colors.amber[500]} />
+                              <Text size="xs" color={checked ? "warning" : "muted"}>{`Needs: ${missing.map((k) => NEEDS[k].label).join(", ")}`}</Text>
+                            </View>
+                          ) : undefined}
+                          expansion={filling ? (
+                            <View style={{ backgroundColor: colors.zinc[50], borderRadius: 10, padding: 14, gap: 12, maxWidth: 460 }}>
+                              <Text size="xs" color="muted">These values save onto the order and unlock the form.</Text>
+                              {missing.map((k) => (
+                                <FormTextInput
+                                  key={k}
+                                  label={NEEDS[k].label}
+                                  description={NEEDS[k].hint}
+                                  value={fillDrafts[k] ?? ""}
+                                  onChangeText={(t) => setFillDrafts((d) => ({ ...d, [k]: t }))}
+                                  accessibilityLabel={NEEDS[k].label}
+                                />
+                              ))}
+                              <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: 8 }}>
+                                {/* secondary — the section keeps ONE primary
+                                    (Create); disabled while a draft is empty */}
+                                <Button title="Cancel" color="muted" onPress={() => toggleFillOpen(f.id)} />
+                                <Button
+                                  title="Save fields"
+                                  color="secondary"
+                                  disabled={missing.some((k) => !(fillDrafts[k] ?? "").trim())}
+                                  onPress={() => { saveNeeds(missing); toggleFillOpen(f.id); }}
+                                />
+                              </View>
+                            </View>
+                          ) : undefined}
+                        >
+                          <View style={{ flexDirection: "row", alignItems: "center", columnGap: 12, rowGap: 2, flexWrap: "wrap" }}>
+                            <Text size="sm" style={{ flexShrink: 1 }}>{f.label}</Text>
+                            {/* the trigger hides while ITS panel is open —
+                                the panel's Cancel is the closer; a toggle
+                                verb above an open editor is noise */}
+                            {missing.length > 0 && !filling ? (
+                              <TextLink size="xs" onPress={() => toggleFillOpen(f.id)} style={{ color: colors.blue[600] }}>
+                                Add missing fields
+                              </TextLink>
+                            ) : null}
+                          </View>
+                        </ChecklistRow>
+                      );
+                    })}
+                  </Checklist>
+                  {hidden > 0 ? (
+                    <View style={{ flexDirection: "row" }}>
+                      <Button
+                        title={open ? "Show fewer forms" : `Show all forms (${hidden} hidden)`}
+                        color="muted"
+                        onPress={() => toggleFold(g.id)}
+                      />
+                    </View>
+                  ) : null}
+                </Subsection>
+              );
+            })}
+            {/* the output config — values printed on every generated form */}
+            <Subsection>
+              <DetailTable labelWidth={150} trailingWidth={88}>
+                <DetailRow label="Issuing office" description="Printed in every form's header">
+                  <InlineTextInput value={issuingOffice} onSave={persist(setIssuingOffice)} placeholder="Add the office…" accessibilityLabel="Issuing office" />
+                </DetailRow>
+                <DetailRow label="Prefill signing date">
+                  <CheckboxInput accessibilityLabel="Prefill signing date" checked={prefillSignDate} onChange={setPrefillSignDate} />
+                </DetailRow>
+              </DetailTable>
+            </Subsection>
+            <Subsection>
+              <View style={{ gap: 12 }}>
+                {/* the CONSEQUENCE, co-located, once (the gating law's
+                    degraded-but-valid case — Create stays ENABLED and the
+                    press confirms; the repair lives in the rows' fill
+                    panels above). An empty pick stays silently disabled —
+                    self-evident. */}
+                {blockingNeeds.length > 0 ? (
+                  <Callout tone="warning">
+                    <CalloutText>
+                      {`The checked forms still need ${blockingNeeds.map((k) => NEEDS[k].label.toLowerCase()).join(" and ")} — ${blockingNeeds.length === 1 ? "it prints" : "they print"} blank unless filled above.`}
+                    </CalloutText>
+                  </Callout>
+                ) : null}
+                {/* deterministic work = a LOADING state on its trigger, never
+                    AgentRun theater (that's for AI); the set appears at once */}
+                <View style={{ flexDirection: "row" }}>
+                  <Button
+                    title={docSet.length > 0 ? "Create document set again" : "Create document set"}
+                    color="primary"
+                    disabled={checkedForms.length === 0}
+                    loading={producing}
+                    onPress={createSet}
+                  />
+                </View>
+                {docSet.length > 0 ? (
+                  <View style={{ gap: 4 }}>
+                    {docSet.map((d, di) => (
+                      <FileRow
+                        key={d.id}
+                        name={d.name}
+                        meta={`${d.kind} · ${fmtSize(d.sizeKB)}`}
+                        mimeType={d.mimeType}
+                        onPress={() => openPreview(docSet, di)}
+                        trailing={
+                          <ActionMenu
+                            accessibilityLabel={`Actions for ${d.name}`}
+                            items={[
+                              { key: "download", label: "Download", icon: "download", onPress: () => { /* a real app: openExternal(d.url) */ } },
+                              { key: "remove", label: "Remove", icon: "trash", danger: true, onPress: () => removeFromSet(d.id) },
+                            ]}
+                          />
+                        }
+                      />
+                    ))}
+                    {/* the whole-set verb sits BELOW the files it acts on */}
+                    <View style={{ flexDirection: "row", marginTop: 8 }}>
+                      <Button title="Download all" color="secondary" icon="download" onPress={() => { /* a real app zips or walks openExternal per file */ }} />
+                    </View>
+                  </View>
+                ) : null}
+              </View>
+            </Subsection>
+          </SubsectionStack>
+        </Section>
+        </View>
+
+        {/* DELIVERY RECEIPT — the QUICK-ISSUE form: capture a moment's facts
+            (a handover, an inspection, a visit), issue ONE document. Use it
+            when one document is issued from a handful of facts at a known
+            moment — vs the Document set's pick-from-registries.
+            THE FORM-ACTION ALIGNMENT LAW: on an open page a label-left
+            form's action row rides the form's OWN GRID — an empty-label
+            DetailRow puts the CTA (and the produced file) exactly on the
+            CONTROL COLUMN, the same left edge the user just filled, and
+            inherits stacked mode on narrow containers. A right-floated
+            button aligns to nothing (overlay FOOTERS right-align —
+            Dialog/Drawer; in-page forms never). */}
+        <View onLayout={nav.register("receipt")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Issued on handover — record the delivery facts, generate the receipt.">Delivery receipt</SectionHeadingTitle>
+          </SectionHeading>
+          <DetailTable labelWidth={150} trailingWidth={88}>
+            <DetailRow label="Received">
+              <InlineDatePicker value={rcptDate} onSave={persist(setRcptDate)} locale="en-US" accessibilityLabel="Received date" />
+            </DetailRow>
+            {/* a FLAT value row — `flat` tucks the annotation under the TEXT
+                (the control band's slack must not read as a hole) */}
+            <DetailRow label="Receipt no" description="Issued automatically" flat>
+              <InlineStatic value="RCPT-2026-0715" tabular />
+            </DetailRow>
+            <DetailRow label="Handled by">
+              <InlineMemberSelect members={TEAM} value={rcptHandler} onSave={persist(setRcptHandler)} placeholder="Assign…" accessibilityLabel="Handled by" />
+            </DetailRow>
+            <DetailRow label="Reference" description="Prefilled from the order">
+              <InlineTextInput value={rcptReference} onSave={persist(setRcptReference)} accessibilityLabel="Reference" />
+            </DetailRow>
+            <DetailRow label="Condition">
+              <InlineSelect value={rcptCondition} options={[{ value: "good", label: "Good" }, { value: "partial", label: "Partial damage" }, { value: "damaged", label: "Damaged" }]} onSave={persist(setRcptCondition)} accessibilityLabel="Condition" />
+            </DetailRow>
+            <DetailRow label="Note">
+              <InlineTextInput value={rcptNote} onSave={persist(setRcptNote)} placeholder="Add a note…" accessibilityLabel="Receipt note" />
+            </DetailRow>
+            <DetailRow label="">
+              <View style={{ gap: 8 }}>
+                <View style={{ flexDirection: "row" }}>
+                  <Button
+                    title={rcptDoc ? "Create delivery receipt again" : "Create delivery receipt"}
+                    color="primary"
+                    loading={rcptProducing}
+                    onPress={createReceipt}
+                  />
+                </View>
+                {rcptDoc ? (
+                  <FileRow
+                    name={rcptDoc.name}
+                    meta={`${rcptDoc.kind} · ${fmtSize(rcptDoc.sizeKB)}`}
+                    mimeType={rcptDoc.mimeType}
+                    onPress={() => openPreview([rcptDoc], 0)}
+                    trailing={
+                      <ActionMenu
+                        accessibilityLabel={`Actions for ${rcptDoc.name}`}
+                        items={[
+                          { key: "download", label: "Download", icon: "download", onPress: () => { /* a real app: openExternal */ } },
+                          { key: "remove", label: "Remove", icon: "trash", danger: true, onPress: () => setRcptDoc(null) },
+                        ]}
+                      />
+                    }
+                  />
+                ) : null}
+              </View>
+            </DetailRow>
+          </DetailTable>
         </Section>
         </View>
 
-        <DangerZone
-          title="Delete record"
-          description="Permanently remove this record and its invoices, charges, and history. This can't be undone."
-        >
-          <Button title="Delete record" color="danger" onPress={() => {}} />
-        </DangerZone>
+        {/* ACTIVITY — the audit trail: every change on the record, who and
+            when. Seeded history + LIVE appends from this surface's real
+            actions (issue, fees, handoff). */}
+        <View onLayout={nav.register("activity")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Every change on the record — who made it, and when.">Activity</SectionHeadingTitle>
+          </SectionHeading>
+          <Timeline items={activity} />
+        </Section>
+        </View>
+
+        {/* HANDOFF — the reference mark of the boundary: handing off CREATES
+            the next desk's record on ITS table and links it here. The trail
+            marks whom · where · when + the linked sibling; the sibling owns
+            its own summary. */}
+        <View onLayout={nav.register("handoff")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Handing off creates the next desk's record and links it here for reference.">Handoff</SectionHeadingTitle>
+          </SectionHeading>
+          {/* the records the handoffs CREATED — the SAME linked-record
+              composition as the Customer section (a bordered view + visible
+              actions; copy and customize) */}
+          {siblings.length > 0 ? (
+            <View style={{ gap: 16 }}>
+              {siblings.map((sb) => (
+                <PressableRow
+                  key={sb.id}
+                  onPress={() => setSiblingOpen(sb.id)}
+                  style={{ flexDirection: "column", alignItems: "stretch", borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 10, paddingHorizontal: 16, paddingVertical: 16, gap: 12 }}
+                >
+                  <BoxDoor label={`${sb.code} — details`} onPress={() => setSiblingOpen(sb.id)} />
+                    <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+                      <View style={{ width: 34, height: 34, borderRadius: 8, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" }}>
+                        <Icon name="file-text" size={17} color={colors.zinc[600]} />
+                      </View>
+                      <View style={{ flex: 1, minWidth: 0 }}>
+                        <Text size="sm" weight="medium" numberOfLines={1}>{sb.code}</Text>
+                        <Text size="xs" color="muted">{`${sb.desk} record`}</Text>
+                      </View>
+                    </View>
+                    <View style={{ gap: 6 }}>
+                      {[
+                        { label: "Assignee", value: sb.assignee || "—" },
+                        { label: "Created", value: sb.at },
+                        { label: "Note", value: sb.note || "—" },
+                      ].map((f) => (
+                        <View key={f.label} style={{ flexDirection: "row", gap: 10 }}>
+                          <Text size="sm" color="muted" style={{ width: 80 }}>{f.label}</Text>
+                          <Text size="sm" style={{ flex: 1 }}>{f.value}</Text>
+                        </View>
+                      ))}
+                    </View>
+                  {/* the action row, INSIDE the box, the go-to verb on the
+                      RIGHT (the box itself = details; nothing destructive
+                      here — the handoff mark stays); zIndex lifts it above
+                      the door's hit area */}
+                  <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 8, justifyContent: "flex-end", zIndex: 1 }}>
+                    <Button title="Open record" color="secondary" onPress={() => { /* a real app navigates to the sibling's page */ }} />
+                  </View>
+                </PressableRow>
+              ))}
+            </View>
+          ) : null}
+          {handoffs.length > 0 ? <Timeline items={handoffs} /> : null}
+          {/* the handoff happens ONCE — before it, the single CTA; after it,
+              the mark + the linked record ARE the section, no further CTAs */}
+          {siblings.length === 0 && gate ? (
+            <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
+              <Button title={gate.cta} color="primary" onPress={() => setHandoffOpen(true)} />
+            </View>
+          ) : null}
+        </Section>
+        </View>
+
+        {/* the rail lists EVERY section — the danger zone included, with the
+            SAME section anatomy (heading + description) as everything else;
+            the fenced red card is the section's BODY, not its heading */}
+        <View onLayout={nav.register("danger")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Destructive, irreversible operations — deliberately fenced at the end of the page.">Danger zone</SectionHeadingTitle>
+          </SectionHeading>
+          <DangerZone
+            title="Delete record"
+            description="Permanently remove this record and its invoices, charges, and history. This can't be undone."
+          >
+            <Button title="Delete record" color="danger" onPress={() => {}} />
+          </DangerZone>
+        </Section>
+        </View>
       </SectionStack>
+      </>
+      )}
 
       {/* the narrow-mode section picker — a full-page takeover: pick a section
           to jump there; Escape or the close control dismisses */}
@@ -1267,14 +2535,14 @@ export function TplRecord() {
       </Modal>
 
       {/* find-or-create's CREATE branch — a focused Dialog (4 fields is
-          dialog-weight; an inline swap shifts the page). Essentials only:
-          after Create & attach, the card's Fetch button fills the rest. */}
+          dialog-weight; an inline swap shifts the page). Essentials only: the
+          dialog's Fetch fills contact + city off the tax ID. */}
       <Dialog width={520} open={custDraft !== null} onOpenChange={(o) => { if (!o) setCustDraft(null); }}>
         <DialogHeader>
           <DialogHeaderTitle>New customer</DialogHeaderTitle>
         </DialogHeader>
-        {/* the SAME inline-chip table as the edit card — create and edit are
-            one vocabulary, only the commit differs (Create & attach) */}
+        {/* the same inline-chip table vocabulary as the record's field grids —
+            only the commit differs (Create & attach) */}
         <View style={{ paddingHorizontal: 24, paddingBottom: 12, gap: 8 }}>
           <DetailTable labelWidth={150} trailingWidth={88}>
             <DetailRow label="Customer name">
@@ -1288,8 +2556,11 @@ export function TplRecord() {
                 accessibilityLabel="Customer name"
               />
             </DetailRow>
+            {/* the field-level failure rides the ROW (`DetailRow error` —
+                FormField's alert semantics), not a loose line below the table */}
             <DetailRow
               label="Tax ID"
+              error={taxIdError}
               trailing={
                 <Button
                   title="Fetch"
@@ -1333,8 +2604,6 @@ export function TplRecord() {
               />
             </DetailRow>
           </DetailTable>
-          {taxIdError ? <Text size="xs" color="danger">{taxIdError}</Text> : null}
-          <Text size="xs" color="muted">Created and attached to this order — Fetch fills contact + city from the tax-ID registry.</Text>
         </View>
         <DialogFooter>
           <Button title="Cancel" color="secondary" onPress={() => setCustDraft(null)} />
@@ -1342,8 +2611,6 @@ export function TplRecord() {
         </DialogFooter>
       </Dialog>
 
-      <FileGalleryModal files={files} activeIndex={activeFile} onIndexChange={setActiveFile} />
-
       {/* issuing an e-invoice is irreversible — confirm in a Dialog (stage gate) */}
       <Dialog width={460} open={confirmIssue !== null} onOpenChange={(o) => { if (!o) setConfirmIssue(null); }}>
         <DialogHeader>
@@ -1365,17 +2632,409 @@ export function TplRecord() {
           <Button title="Issue" color="primary" onPress={() => confirmIssue && issue(confirmIssue)} />
         </DialogFooter>
       </Dialog>
+
+      {/* the fee ENTITY DRAWER — the drill-down law: a register row opens its
+          full detail right-docked; ◀ ▶ + the position caption step the rows
+          without closing. Every field refines inline; Remove is confirmed. */}
+      <Drawer
+        open={openFee !== null}
+        onOpenChange={(o) => { if (!o) setFeeView(null); }}
+        title={openFee?.name || "New fee"}
+        width={480}
+        onPrev={feeIdx > 0 ? () => setFeeView({ kind: "edit", id: fees[feeIdx - 1].id }) : undefined}
+        onNext={feeIdx >= 0 && feeIdx < fees.length - 1 ? () => setFeeView({ kind: "edit", id: fees[feeIdx + 1].id }) : undefined}
+        position={feeIdx >= 0 ? `${feeIdx + 1}/${fees.length}` : undefined}
+      >
+        {openFee ? (
+          <View style={{ padding: 20, gap: 8 }}>
+            <DetailTable labelWidth={130}>
+              <DetailRow label="Fee">
+                <InlineTextInput value={openFee.name} onSave={persist((v: string) => patchFee(openFee.id, { name: v }))} placeholder="Name the fee…" accessibilityLabel="Fee name" />
+              </DetailRow>
+              <DetailRow label="Type" description="Charge — billed to the customer · Cost — paid to a vendor">
+                <InlineSelect
+                  value={openFee.direction}
+                  options={[{ value: "charge", label: "Charge" }, { value: "cost", label: "Cost" }]}
+                  onSave={persist((v: FeeDirection) => patchFee(openFee.id, { direction: v }))}
+                  accessibilityLabel="Fee type"
+                />
+              </DetailRow>
+              <DetailRow label="Party">
+                <InlineTextInput value={openFee.party} onSave={persist((v: string) => patchFee(openFee.id, { party: v }))} placeholder="Who pays, or is paid…" accessibilityLabel="Party" />
+              </DetailRow>
+              <DetailRow label="Amount">
+                <InlineNumberInput value={openFee.amount || null} onSave={persist((v: number | null) => patchFee(openFee.id, { amount: v ?? 0 }))} min={0} format={money} placeholder="—" accessibilityLabel="Amount" />
+              </DetailRow>
+              <DetailRow label="VAT (%)">
+                <InlineNumberInput value={openFee.vat} onSave={persist((v: number | null) => patchFee(openFee.id, { vat: v }))} min={0} placeholder="—" accessibilityLabel="VAT percent" />
+              </DetailRow>
+              <DetailRow label="Due" error={feeOverdue(openFee) ? "Overdue — chase the payment or move the date." : undefined}>
+                <InlineDatePicker value={openFee.due} onSave={persist((v: string) => patchFee(openFee.id, { due: v }))} locale="en-US" placeholder="Set a due date…" accessibilityLabel="Fee due date" />
+              </DetailRow>
+              <DetailRow label="Invoice no" description="The party's invoice or debit note">
+                <InlineTextInput value={openFee.invoiceNo} onSave={persist((v: string) => patchFee(openFee.id, { invoiceNo: v }))} placeholder="Add the reference…" accessibilityLabel="Invoice number" />
+              </DetailRow>
+              <DetailRow label="Status">
+                <InlineSelect
+                  value={openFee.paid ? "paid" : "unpaid"}
+                  options={[{ value: "unpaid", label: "Unpaid" }, { value: "paid", label: "Paid" }]}
+                  onSave={persist((v: string) => patchFee(openFee.id, { paid: v === "paid" }))}
+                  accessibilityLabel="Paid status"
+                />
+              </DetailRow>
+              <DetailRow label="Note">
+                <InlineTextInput value={openFee.note} onSave={persist((v: string) => patchFee(openFee.id, { note: v }))} placeholder="Add a note…" accessibilityLabel="Fee note" />
+              </DetailRow>
+            </DetailTable>
+          </View>
+        ) : (
+          <View />
+        )}
+        {openFee ? (
+          <DrawerFooter>
+            <Button title="Remove fee" color="danger-secondary" icon="trash" onPress={() => deleteFee(openFee)} />
+          </DrawerFooter>
+        ) : null}
+      </Drawer>
+
+      {/* the CUSTOMER detail drawer — the linked record's full info, read-only
+          (it's ANOTHER record; editing happens on its own page). The footer
+          carries the record-level verbs: navigate there, or detach. */}
+      <Drawer open={customerOpen && customer !== null} onOpenChange={(o) => { if (!o) setCustomerOpen(false); }} title={customer?.name ?? ""} width={440}>
+        {customer ? (
+          <View style={{ padding: 20 }}>
+            <DetailTable labelWidth={110}>
+              <DetailRow label="Name"><InlineStatic value={customer.name} /></DetailRow>
+              <DetailRow label="Code"><InlineStatic value={customer.code} tabular /></DetailRow>
+              <DetailRow label="Tax ID"><InlineStatic value={customer.taxId || "—"} tabular /></DetailRow>
+              <DetailRow label="Contact"><InlineStatic value={customer.contact || "—"} /></DetailRow>
+              <DetailRow label="City"><InlineStatic value={customer.city || "—"} /></DetailRow>
+            </DetailTable>
+          </View>
+        ) : (
+          <View />
+        )}
+        <DrawerFooter>
+          <Button title="Remove from record" color="danger-secondary" icon="x" onPress={() => { setCustomerOpen(false); setCustomerId(null); }} />
+          {/* a real app navigates to the customer's own record page */}
+          <Button title="Open record" color="secondary" onPress={() => {}} />
+        </DrawerFooter>
+      </Drawer>
+
+      {/* the SIBLING record's drawer — the handoff-created record's reference
+          info + the navigate verb (a real app routes to its page). */}
+      <Drawer open={openSibling !== null} onOpenChange={(o) => { if (!o) setSiblingOpen(null); }} title={openSibling?.code ?? ""} width={440}>
+        {openSibling ? (
+          <View style={{ padding: 20 }}>
+            <DetailTable labelWidth={110}>
+              <DetailRow label="Desk"><InlineStatic value={openSibling.desk} /></DetailRow>
+              <DetailRow label="Assignee"><InlineStatic value={openSibling.assignee || "—"} /></DetailRow>
+              <DetailRow label="Created"><InlineStatic value={openSibling.at} tabular /></DetailRow>
+              <DetailRow label="From"><InlineStatic value={code} tabular /></DetailRow>
+              <DetailRow label="Handoff note"><InlineStatic value={openSibling.note || "—"} /></DetailRow>
+            </DetailTable>
+          </View>
+        ) : (
+          <View />
+        )}
+        <DrawerFooter>
+          {/* recall = the semi-destructive undo — behind the details, confirmed */}
+          {openSibling ? <Button title="Recall handoff" color="danger-secondary" onPress={() => recallHandoff(openSibling)} /> : null}
+          {/* a real app navigates to the sibling record's page */}
+          <Button title="Open record" color="secondary" onPress={() => {}} />
+        </DrawerFooter>
+      </Drawer>
+
+      {/* the handoff dialog — who receives the record + a note; the rows name
+          exactly WHAT is being handed off. Confirm writes the trail entry. */}
+      <Dialog width={480} open={handoffOpen} onOpenChange={(o) => { if (!o) { setHandoffOpen(false); setHandoffAssignee(null); setHandoffNote(""); } }}>
+        <DialogHeader>
+          <DialogHeaderTitle>{gate ? gate.cta : "Hand off"}</DialogHeaderTitle>
+        </DialogHeader>
+        <View style={{ paddingHorizontal: 24, paddingBottom: 12, gap: 14 }}>
+          <FormField label={gate ? `Assignee at ${stageOf(gate.next).label}` : "Assignee"}>
+            <MemberSelect members={TEAM} value={handoffAssignee} onValueChange={setHandoffAssignee} placeholder="Who receives the record…" />
+          </FormField>
+          <FormTextInput label="Note" optional placeholder="What the next desk should know…" value={handoffNote} onChangeText={setHandoffNote} multiline accessibilityLabel="Handoff note" />
+        </View>
+        <DialogFooter>
+          <Button title="Cancel" color="muted" onPress={() => { setHandoffOpen(false); setHandoffAssignee(null); setHandoffNote(""); }} />
+          {/* one required field, right there — the adjacent-input exception:
+              disabled until the receiver is chosen */}
+          <Button title={gate ? gate.cta : "Hand off"} color="primary" disabled={handoffAssignee == null} onPress={confirmHandoff} />
+        </DialogFooter>
+      </Dialog>
       {/* Balances the rail so the reading column lands dead-centre. In the docs
           layout the right-hand TOC does this job; a record surface has no TOC,
           so the gutter is simply reserved. */}
       {wide ? <View style={{ width: GUTTER, flexShrink: 0 }} /> : null}
       </View>
     </ScrollView>
+
+    {/* ── the document desk's overlays (verbatim from tpl_documents) */}
+    <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) */ }} />
+      <Button title="Use AI" color="primary" onPress={openAi} />
+    </FloatingActionBar>
+
+    {/* Use AI — fork → running → review → done, all inside one dialog. The review
+        provider wraps the WHOLE dialog so the `Change`s (scroll area) and the
+        commit bar (`DialogFooter`) share one review context. */}
+    <ChangeReview>
+    <Dialog open={aiOpen} onOpenChange={(o) => { if (!o) closeAi(); }} maxWidth={620}>
+      <DialogHeader>
+        <DialogHeaderTitle>{task === "extract" ? "Extract data" : task === "check" ? "Cross-check" : `Use AI · ${picked.length} ${picked.length === 1 ? "file" : "files"}`}</DialogHeaderTitle>
+      </DialogHeader>
+      <DialogScrollArea>
+        {phase === "fork" ? (
+          <View style={{ gap: 16 }}>
+            <View style={{ gap: 8 }}>{picked.map((f, fi) => <FileRow key={f.id} name={f.name} mimeType={f.mimeType} onPress={() => openPreview(picked, fi)} />)}</View>
+            <View style={{ gap: 8 }}>
+              <CardSelectItem accessibilityLabel="Extract data — read the documents and fill the record" onPress={() => setTaskChoice("extract")} selected={taskChoice === "extract"} style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                <Icon name="scan" size={18} color={colors.zinc[700]} />
+                <View style={{ flex: 1, gap: 2 }}>
+                  <Text size="sm" weight="semibold">Extract data</Text>
+                  <Text size="xs" color="muted">Read the documents and fill the record — what's new, what changes, what conflicts.</Text>
+                </View>
+              </CardSelectItem>
+              <CardSelectItem accessibilityLabel="Cross-check — compare the documents against the record" onPress={() => setTaskChoice("check")} selected={taskChoice === "check"} style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                <Icon name="list-checks" size={18} color={colors.zinc[700]} />
+                <View style={{ flex: 1, gap: 2 }}>
+                  <Text size="sm" weight="semibold">Cross-check</Text>
+                  <Text size="xs" color="muted">Compare the documents against the record and each other — what disagrees and why.</Text>
+                </View>
+              </CardSelectItem>
+              <CardSelectItem accessibilityLabel="Edit with AI — open the chat agent with these documents" onPress={() => setTaskChoice("edit")} selected={taskChoice === "edit"} style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                <Icon name="square-pen" size={18} color={colors.zinc[700]} />
+                <View style={{ flex: 1, gap: 2 }}>
+                  <Text size="sm" weight="semibold">Edit with AI</Text>
+                  <Text size="xs" color="muted">Open the chat with the documents attached — describe the change, the agent edits them as new versions.</Text>
+                </View>
+              </CardSelectItem>
+            </View>
+            {/* Optional steering for the CHECK — findings serve ANY file-based
+                request the user briefs, not just the stock cross-check. */}
+            {taskChoice === "check" ? (
+              <FormTextInput
+                label="Instructions (optional)"
+                placeholder="Anything specific to check — e.g. verify the commodity codes against the order"
+                value={brief}
+                onChangeText={setBrief}
+                multiline
+                accessibilityLabel="Instructions for the agent"
+              />
+            ) : null}
+          </View>
+        ) : null}
+
+        {phase === "running" ? <AgentRun items={runItems} state={revealed >= script.length ? "done" : "streaming"} /> : null}
+
+        {phase === "review" && task === "extract" ? (
+          <View style={{ gap: 16 }}>
+            <View style={{ gap: 8 }}>
+              <Text size="md" weight="semibold">Files read</Text>
+              <View style={{ gap: 8 }}>{picked.map((f, fi) => <FileRow key={f.id} name={f.name} mimeType={f.mimeType} onPress={() => openPreview(picked, fi)} />)}</View>
+            </View>
+            <View style={{ gap: 8 }}>
+              <ChangeReviewHeader />
+              {/* ONE section for the RECORD — ChangeFields stacks a ChangeField
+                  per proposed value: label · the − band when replacing · the
+                  editable + value. Editing IS the review; each field decides
+                  for ITSELF (Keep/Drop), and Apply commits the kept rows. */}
+              <Change id="order">
+                <ChangeReasoning>{EXTRACT_REASONING}</ChangeReasoning>
+                <ChangeFields>
+                  {/* An ADD — the record holds nothing yet, so no `before`. */}
+                  <ChangeField label="Carrier reference" value={carrierRef} summary={carrierRef} {...fieldRow("carrier_ref")}>
+                    <ChangeValueInput value={carrierRef} onChangeText={setCarrierRef} accessibilityLabel="Carrier reference" />
+                  </ChangeField>
+                  {/* An UPDATE — the current value banded above the editor. */}
+                  <ChangeField label="Vessel" value={vessel} summary={vessel} before={VESSEL_CURRENT} {...fieldRow("vessel")}>
+                    <ChangeValueInput value={vessel} onChangeText={setVessel} accessibilityLabel="Vessel" />
+                  </ChangeField>
+                  {/* A CONFLICT — the sources disagree: the read-only outcome
+                      band stays on its placeholder until the user picks a
+                      candidate below or types a third value — never a
+                      pre-selection; Keep is gated until resolved. */}
+                  <ChangeField
+                    label="Consignee"
+                    value={consignee ?? ""}
+                    summary={consignee ?? undefined}
+                    before={CONSIGNEE_CURRENT}
+                    valueReadOnly
+                    placeholder="Pick a candidate below"
+                    reasoning="The invoice and the packing list disagree — pick a candidate or type your own."
+                    candidates={CONSIGNEE_OPTIONS.map((c, i2) => ({ value: c.value, source: c.source, selected: consigneePick === i2 }))}
+                    onPickCandidate={(c) => { const i2 = CONSIGNEE_OPTIONS.findIndex((x) => x.value === c.value); setConsigneePick(i2); setConsignee(c.value); }}
+                    customValue={customConsignee}
+                    customSelected={consigneePick === "custom"}
+                    onCustomSelect={() => { setConsigneePick("custom"); setConsignee(customConsignee || null); }}
+                    onCustomValue={(v) => { setCustomConsignee(v); setConsignee(v || null); }}
+                    keepDisabled={consignee == null}
+                    {...fieldRow("consignee")}
+                  />
+                  {/* An ADD-only field — new information the documents carry:
+                      the + band alone, same grammar as every diff. */}
+                  <ChangeField label="Gross weight" value={grossWeight} summary={grossWeight} {...fieldRow("gross")}>
+                    <ChangeValueInput value={grossWeight} onChangeText={setGrossWeight} unit="kg" accessibilityLabel="Gross weight" />
+                  </ChangeField>
+                  {/* A REMOVAL — the − band alone (empty value, no editor): the
+                      documents show this value no longer applies. */}
+                  <ChangeField
+                    label="Notify party"
+                    before={NOTIFY_CURRENT}
+                    reasoning="No notify party appears on any document — the consignee is notified directly."
+                    {...fieldRow("notify")}
+                  />
+                </ChangeFields>
+              </Change>
+              {/* RECORD ops — the packing list also proposes ORDER LINES:
+                  a ChangeRecord card per item (add = one card decision;
+                  edit = its changed fields decide themselves). A divider +
+                  breathing room set the sub-section off from the fields. */}
+              <View style={{ paddingTop: 10 }}>
+                <Divider />
+              </View>
+              <ChangeReviewHeader title="Order lines" />
+              <ChangeRecord
+                id="line-add"
+                tone="add"
+                title="New line"
+                status={lineAdd}
+                onAccept={() => setLineAdd("accepted")}
+                onReject={() => setLineAdd("rejected")}
+                onUndo={() => setLineAdd("pending")}
+                summary={`${newItem} (${newQty} pcs)`}
+              >
+                <ChangeField label="Item" value={newItem} summary={newItem}>
+                  <ChangeValueInput value={newItem} onChangeText={setNewItem} accessibilityLabel="Item" />
+                </ChangeField>
+                <ChangeField label="Quantity" value={newQty} summary={`${newQty} pcs`}>
+                  <ChangeValueInput value={newQty} onChangeText={setNewQty} unit="pcs" accessibilityLabel="Quantity" />
+                </ChangeField>
+              </ChangeRecord>
+              <ChangeRecord id="line-edit" tone="edit" title="Flat-pack cartons — existing line" summary={`Flat-pack cartons — ${editedQty} pcs`}>
+                <ChangeField label="Quantity" before="1,200 pcs" value={editedQty} summary={`${editedQty} pcs`} {...lineEditRow("qty")}>
+                  <ChangeValueInput value={editedQty} onChangeText={setEditedQty} unit="pcs" accessibilityLabel="Line quantity" />
+                </ChangeField>
+              </ChangeRecord>
+            </View>
+          </View>
+        ) : null}
+
+        {phase === "review" && task === "check" ? (
+          <View style={{ gap: 16 }}>
+            <View style={{ gap: 8 }}>
+              <Text size="md" weight="semibold">Documents checked</Text>
+              <View style={{ gap: 8 }}>{picked.map((f, fi) => <FileRow key={f.id} name={f.name} mimeType={f.mimeType} onPress={() => openPreview(picked, fi)} />)}</View>
+            </View>
+            <View style={{ gap: 14 }}>
+              <ChangeReviewHeader title="Findings" />
+              {/* Display-only: findings inform the verdict the footer records.
+                  The kit `Finding` owns severity word · title · detail · the
+                  PROMINENT metric · Sources; hairlines separate them. */}
+              {FINDINGS.map((c, i) => (
+                <Fragment key={c.id}>
+                  {i > 0 ? <Divider /> : null}
+                  <Finding
+                    severity={c.severity}
+                    title={c.title}
+                    detail={c.detail}
+                    sources={(c.sources ?? []).map((name): SourceRef => ({ id: name, label: name, kind: "document" }))}
+                    onOpenSource={() => { /* preview stub */ }}
+                  >
+                    {c.comparison ? <FindingComparison values={c.comparison.values} delta={c.comparison.delta} /> : null}
+                  </Finding>
+                </Fragment>
+              ))}
+            </View>
+          </View>
+        ) : null}
+
+        {phase === "done" ? (
+          <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} />}
+          <Button
+            title={taskChoice === "extract" ? "Extract data" : taskChoice === "check" ? "Run cross-check" : taskChoice === "edit" ? "Open chat" : "Run"}
+            color="primary"
+            disabled={taskChoice == null}
+            onPress={() => {
+              if (!taskChoice) return;
+              if (uploadFlow) commitUpload();
+              if (taskChoice === "edit") {
+                // The app→chat handoff — a real app calls the SDK and closes:
+                //   void askAi({
+                //     file_ids: picked.map((f) => f.id),
+                //     record_ids: [orderRecordId],
+                //     prompt: "Update these documents — ",
+                //   });
+                // The messenger opens a fresh chat with the files attached (a
+                // single file also opens previewed beside it); the prompt is
+                // prefilled, editable, never auto-sent.
+                editWithAi(picked);
+                closeAi();
+                return;
+              }
+              startTask(taskChoice);
+            }}
+          />
+        </DialogFooter>
+      ) : phase === "review" && task === "extract" ? (
+        <DialogFooter>
+          {/* N = the kept fields; the minKept swap disables Apply exactly at
+              N = 0 (the registry can't see field-level decisions, so the host
+              gates — and hands Keep-all its own handler). */}
+          <ChangeReviewActions onAcceptAll={keepAll} onDiscard={closeAi} discardLabel="Cancel" onApply={() => setPhase("done")} applyLabel={`Update record (${applyCount})`} minKept={0} applyDisabled={applyCount === 0} />
+        </DialogFooter>
+      ) : phase === "review" && task === "check" ? (
+        <DialogFooter>
+          {/* The findings ARE the outcome — the human reads them and goes to
+              act (Extract, a manual fix). No phantom "record verdict" write:
+              a persisted check-status would go stale on the next edit. */}
+          <Button title="Done" color="primary" onPress={() => { sel.clear(); closeAi(); }} />
+        </DialogFooter>
+      ) : phase === "done" ? (
+        <DialogFooter>
+          <Button title="Done" color="primary" onPress={() => { sel.clear(); closeAi(); }} />
+        </DialogFooter>
+      ) : null}
+    </Dialog>
+    </ChangeReview>
+
+    {/* Rename — small focused dialog; Save disabled while empty. */}
+    <Dialog open={renameTarget != null} onOpenChange={(o) => { if (!o) setRenameTarget(null); }} maxWidth={420}>
+      <DialogHeader><DialogHeaderTitle>Rename file</DialogHeaderTitle></DialogHeader>
+      <DialogScrollArea>
+        <FormTextInput label="Filename" value={renameDraft} onChangeText={setRenameDraft} accessibilityLabel="Filename" />
+      </DialogScrollArea>
+      <DialogFooter>
+        <Button title="Cancel" color="muted" onPress={() => setRenameTarget(null)} />
+        <Button title="Save" color="primary" disabled={renameDraft.trim() === ""} onPress={saveRename} />
+      </DialogFooter>
+    </Dialog>
+    {/* Mounted only while open — its per-file hooks want a stable list. */}
+    {preview ? (
+      <FileGalleryModal
+        files={preview.files}
+        activeIndex={preview.index}
+        onIndexChange={(i) => setPreview((p2) => (i == null || !p2 ? null : { ...p2, index: i }))}
+      />
+    ) : null}
+
     {/* The rail floats over its reserved gutter — pinned while the record
         scrolls, and out of the scroll row so the page stays wheel-scrollable
         edge to edge. */}
     {pageWidth == null || !wide ? null : (
-      <View style={{ position: "absolute", top: 28, left: railLeft, width: RAIL_W }}>
+      <View style={{ position: "absolute", top: 28, left: railLeft, width: RAIL_W, gap: 10 }}>
+        {/* THE PANEL STANDARD: it opens with BACK — the circular glyph, the
+            collection it returns to named beside it (the register route in a
+            real app), visually apart from the outline items. */}
+        <BackButton label="Records" onPress={() => {}} />
         <View style={{ gap: 2 }}>
           {SECTIONS.map((sec) => (
             <MenuButton key={sec.key} icon={sec.icon} title={sec.label} selected={nav.activeKey === sec.key} onPress={() => nav.jumpTo(sec.key)} />