@lotics/ui 22.2.0 → 23.0.0

package/examples/tpl_record.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState, type ReactNode } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { colors } from "@lotics/ui/colors";
@@ -13,7 +13,7 @@ import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
 import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
 import { Callout, CalloutText } from "@lotics/ui/callout";
 import { Inset } from "@lotics/ui/inset";
-import { Section, SectionHeading, SectionHeadingTitle, Subsection, SubsectionHeading, SubsectionHeadingTitle } from "@lotics/ui/section_heading";
+import { DialogSectionHeadingTitle, Section, SectionHeading, SectionHeadingTitle, Subsection, SubsectionHeading, SubsectionHeadingTitle } from "@lotics/ui/section_heading";
 import { SectionStack, SubsectionStack } from "@lotics/ui/section_stack";
 import { Pipeline, PipelineActions, PipelineField, PipelineNote, PipelineStage } from "@lotics/ui/pipeline";
 import { TaskCaption, TaskDetail, TaskItem, TaskList, TaskStatus, TaskTitle } from "@lotics/ui/task";
@@ -42,7 +42,6 @@ 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";
@@ -54,9 +53,13 @@ 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 { LinkedRecordBox } from "@lotics/ui/linked_record_box";
+import { Popover, PopoverContent } from "@lotics/ui/popover";
+import { ChipGroup } from "@lotics/ui/chip_group";
+import { Sequence, SequenceItem, SEQUENCE_INSET } from "@lotics/ui/sequence";
+import { TextLink } from "@lotics/ui/text_link";
+import { InlineButton } from "@lotics/ui/inline_button";
+import { InlineEditView } from "@lotics/ui/inline_edit";
 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";
@@ -71,7 +74,7 @@ import type { UIMessagePart, UIDataTypes, UITools } from "ai";
 type Part = UIMessagePart<UIDataTypes, UITools>;
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Record — THE record surface: the surface IS the editor, every
+// 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").
 //
@@ -83,29 +86,29 @@ type Part = UIMessagePart<UIDataTypes, UITools>;
 // patterns.
 //
 // THE SECTION PATTERNS (what each is, when to use it):
-// · General         — the CORE FACTS: a headingless key-facts lead + named
+// - 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.
-// · Progress        — WHERE the record sits: the desks as a `Pipeline`, each
+// - Comments        — the discussion thread. When people collaborate here.
+// - Progress        — WHERE the record sits: the desks as a `Pipeline`, each
 //                     owning its own facts, the live one owning the act that
 //                     leaves it. Records that move between owners.
-// · Documents       — the INTAKE desk: files that ARRIVE + the ONE "Use AI"
+// - Documents       — the INTAKE desk: files that ARRIVE + the ONE "Use AI"
 //                     fork (the Agents "Document desk" pattern — this template
 //                     is its worked example).
-// · Customer        — the LINKED PARTY: another record referenced, never
+// - 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
+// - 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
+// - 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
+// - 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.
+// - Danger zone     — destructive lifecycle. Always last.
 //
 // The lifecycle is the HANDOFF CHAIN, and it reads in TWO places by design:
 // `Progress` carries the position and the act that changes it; `Handoff` near
@@ -183,6 +186,41 @@ const lookupRegistry = (taxId: string) =>
     setTimeout(() => resolve(REGISTRY[taxId] ?? { contact: "Accounts desk", city: "Ho Chi Minh City" }), 700);
   });
 
+// TRANSPORT's option sets — generic movement vocabulary, at the level any
+// goods business shares. A template teaches the SHAPE; one industry's jargon in
+// a template is a trap for every reader from another.
+const DOC_TYPES = [
+  { value: "original", label: "Original", data: { hint: "Printed set, released against a surrendered copy" } },
+  { value: "electronic", label: "Electronic release", data: { hint: "No paper to lose; release is a message" } },
+  { value: "waybill", label: "Straight waybill", data: { hint: "Named consignee, not transferable" } },
+];
+const DELIVERY_TERMS = [
+  { value: "exw", label: "Ex works" },
+  { value: "fca", label: "Free carrier" },
+  { value: "cpt", label: "Carriage paid to" },
+  { value: "dap", label: "Delivered at place" },
+  { value: "ddp", label: "Delivered duty paid" },
+];
+const CHARGE_TERMS = [
+  { value: "prepaid", label: "Prepaid", data: { hint: "The sender pays the carrier" } },
+  { value: "collect", label: "Collect", data: { hint: "The receiver pays on arrival" } },
+];
+
+/** Choice + its gloss, shown in the OPTION LIST rather than on the page. The
+ *  explanation is needed while CHOOSING, not on every later read of the row. */
+const choiceWithHint = (o: { label?: string; data?: { hint: string } }) => (
+  <View style={{ gap: 1 }}>
+    <Text size="sm">{o.label}</Text>
+    {o.data ? <Text size="xs" color="muted">{o.data.hint}</Text> : null}
+  </View>
+);
+const SCHEDULE_STATES = [
+  { value: "on-time", label: "On time" },
+  { value: "delayed", label: "Delayed" },
+  { value: "rerouted", label: "Rerouted" },
+  { value: "cancelled", label: "Sailing cancelled" },
+];
+
 const TERMS = [
   { value: "receipt", label: "Due on receipt" },
   { value: "15", label: "Net 15" },
@@ -255,9 +293,7 @@ const BILLING_INITIAL: Invoice[] = [
   },
 ];
 
-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");
 const missingMethods = (inv: Invoice) => inv.charges.filter((c) => c.amount > 0 && !c.method);
 
 const money = (v: number | null) => (v == null ? "" : formatMoney(v));
@@ -273,102 +309,6 @@ function persist<T>(set: (v: T) => void) {
     });
 }
 
-/** 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 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, gated, onAmount, onMethod, onIssue,
-}: {
-  inv: Invoice;
-  /** 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>;
-  /** Takes the invoice's KEY, never the `inv` object: the press may be held while
-   *  a charge cell finishes writing (Button waits out an inline commit), and a
-   *  captured object would still be the pre-edit snapshot. Resolve at use. */
-  onIssue: (invKey: string) => void;
-}) {
-  const total = invoiceTotal(inv);
-  const state = invoiceStatus(inv);
-  const missing = missingMethods(inv);
-  const ready = total > 0 && missing.length === 0 && !gated;
-  return (
-    <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 }}>
-                {/* amount + method WRAP on narrow — a fixed 160 method next to a
-                    flex amount crushes the amount chip to nothing on phones */}
-                <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 4 }}>
-                  <View style={{ flexGrow: 1, flexBasis: 150 }}>
-                    <InlineNumberInput
-                      value={c.amount || null}
-                      onSave={(v) => onAmount(c.key, v ?? 0)}
-                      min={0}
-                      format={money}
-                      placeholder={c.standard > 0 ? money(c.standard) : "—"}
-                      accessibilityLabel={`${c.label} amount`}
-                    />
-                  </View>
-                  <View style={{ flexGrow: 1, flexBasis: 140, maxWidth: 160 }}>
-                    <InlineSelect
-                      value={c.method === "" ? null : c.method}
-                      onSave={(m) => onMethod(c.key, m)}
-                      options={METHODS}
-                      placeholder="How paid…"
-                      disabled={c.amount <= 0}
-                      accessibilityLabel={`Payment method · ${c.label}`}
-                    />
-                  </View>
-                </View>
-                {/* the one-tap suggestion: fill the list price while unset */}
-                {c.amount <= 0 && c.standard > 0 ? (
-                  <View style={{ flexDirection: "row" }}>
-                    <Button title={`Standard ${money(c.standard)}`} color="secondary" onPress={() => onAmount(c.key, c.standard)} />
-                  </View>
-                ) : null}
-              </View>
-            </DetailRow>
-          ))}
-      </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.key)} />
-          </>
-        ) : (
-          <Button title="Issue invoice" color="primary" disabled={!ready} onPress={() => onIssue(inv.key)} />
-        )}
-      </View>
-    </Subsection>
-  );
-}
 
 /** The section rail's width — and, mirrored as an empty right gutter, what
  *  keeps the reading column centred in the viewport. */
@@ -378,6 +318,13 @@ const RAIL_GAP = 48;
 /** The reserved gutter: the rail plus its gap. Mirrored empty on the right, this
  *  is what centres the column. */
 const GUTTER = RAIL_W + RAIL_GAP;
+/** The discussion panel's column. A record's comments are not a SECTION — they
+ *  are about the whole record, so they do not belong at one position in a
+ *  top-to-bottom reading order, and a coworker's note has to stay readable while
+ *  you work anywhere on the page. It takes the right gutter, which until now was
+ *  reserved purely to balance the rail. */
+const PANEL_W = 360;
+const PANEL_GUTTER = PANEL_W + RAIL_GAP;
 /** The reading column's ceiling. */
 const CONTENT_MAX = 720;
 
@@ -484,30 +431,9 @@ const SEED_COMMENTS: ThreadComment[] = [
 ];
 
 // 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;
-
 /** "2026-07-18" — the wire shape every date FIELD on this surface stores. */
 const iso = (d: Date): string => d.toISOString().slice(0, 10);
 
-/** "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;
-  /** The desk this handoff OPENED — the key, not just its label, because recall
-   *  has to undo exactly that step: return to the desk before it and clear the
-   *  custody stamp it wrote. A label can't be mapped back without a lookup. */
-  deskKey: Desk;
-  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,
@@ -518,7 +444,7 @@ type FeeDirection = "charge" | "cost";
 interface Fee {
   id: string;
   name: string;
-  /** charge = billed to the customer · cost = paid out to a vendor. */
+  /** charge = billed to the customer, cost = paid out to a vendor. */
   direction: FeeDirection;
   party: string;
   amount: number;
@@ -656,6 +582,262 @@ const DESTINATIONS: PickerOption<string, { country: string }>[] = [
   { value: "dubai", label: "Dubai", data: { country: "United Arab Emirates" } },
 ];
 
+/**
+ * A REFERENCE to another record, rendered as a FIELD VALUE.
+ *
+ * It wears the inline editor's resting surface — same 40px band, same zinc-50
+ * chip, same radius — so a pointer at another record sits in the value column
+ * exactly like the editors above and below it, rather than announcing itself as
+ * a different species of thing. (The chip's usual promise is "editable"; here it
+ * reads as "pressable", which is what `InlineSelect` and `InlineDatePicker`
+ * already mean by it — they open a popover too.)
+ *
+ * THREE acts, placed by how OFTEN they happen and how much they cost to undo:
+ *   press the value → the facts, in a popover (free, so it's the whole surface)
+ *   Open, inside    → the record itself (the common act, so it stays in sight)
+ *   Remove, in the peek → detach (destructive and rare, so it sits one layer in)
+ *
+ * Remove earns its depth twice over. It is the answer to the question the PEEK
+ * asks — "is this the right one?" — so the check and the correction are the same
+ * gesture; and a detach link repeated down a column of references is noise in the
+ * scan path for an act most readers never perform. Depth is not a hiding place
+ * here: pressing a field-shaped value is the first thing anyone tries, and the
+ * verb is plainly visible once open.
+ *
+ * The anatomy is the one a container-with-controls REQUIRES and that hand-rolling
+ * reliably gets wrong: the surface is a role-less, non-focusable `Pressable` (a
+ * button must never contain a button), an empty `PressDoor` sibling carries the
+ * tab stop / accessible name / focus ring, and the interior verb lifts above the
+ * door on `zIndex`. Hover is tracked on the container itself so the border stays
+ * lit while the pointer crosses Open — react-native-web otherwise releases the
+ * parent's hover to the innermost pressable and the edge flickers out.
+ *
+ * This is a TEMPLATE composition, not yet a kit primitive: it earns extraction on
+ * its second consumer, and that extraction is about this ANATOMY, not the layout.
+ */
+function ReferenceValue(props: {
+  name: string;
+  code?: string;
+  facts: { label: string; value: string }[];
+  /** Announced name of the peek trigger, e.g. "Harbor Freight Lines — details". */
+  accessibilityLabel: string;
+  onOpen: () => void;
+  openLabel: string;
+  /** Detach — omit where the link cannot be broken (a handoff's sibling record). */
+  onRemove?: () => void;
+}) {
+  const { name, code, facts, accessibilityLabel, onOpen, openLabel, onRemove } = props;
+  const anchor = useRef<View>(null);
+  const [peekOpen, setPeekOpen] = useState(false);
+  return (
+    <Popover open={peekOpen} onOpenChange={setPeekOpen} triggerRef={anchor} side="bottom" align="start">
+      {/* THE KIT'S FIELD, not a lookalike. This was hand-rolled — a Pressable
+          wearing copies of the field's border, radius, height and hover — and it
+          promptly fell out of step the moment the kit's field changed: it kept a
+          pointer cursor no editor has, and missed the hover TINT that every other
+          field gained. A copied surface always drifts; the fix is to stop copying.
+
+          `InlineEditView` gives all of it: the surface and its states, the verb as
+          a SIBLING of the press target (a button must not contain a button), hover
+          tracked on the box so the border holds while the pointer crosses the
+          verb, and focus-within. `anchorRef` hands the popover the FIELD's box —
+          the press target inside is narrower, and a peek anchored there would
+          open misaligned with the row it describes.
+
+          OPEN, never toggle: the press target and the popover's own dismissal
+          would otherwise fight, and idempotent `true` makes the pair safe. The
+          popover closes on outside press / Escape. */}
+      <InlineEditView
+        anchorRef={anchor}
+        accessibilityLabel={accessibilityLabel}
+        onPress={() => setPeekOpen(true)}
+        active={peekOpen}
+        display={
+          <View style={{ flex: 1, minWidth: 0, flexDirection: "row", alignItems: "center", gap: 6 }}>
+            <Text size="sm" numberOfLines={1}>{name}</Text>
+            {code ? <Text size="sm" color="muted" numberOfLines={1}>{code}</Text> : null}
+          </View>
+        }
+        actions={
+          /* Dismiss the peek on the way out: the verb sits inside the popover's
+             own trigger and stops propagation, so nothing else will close it —
+             and a summary left hanging over the record you just opened describes
+             what you are now looking at. */
+          <InlineButton title="Open" accessibilityLabel={openLabel} onPress={() => { setPeekOpen(false); onOpen(); }} />
+        }
+      />
+      {/* THE PEEK'S FORMAT — the kit's own grammar, not a bespoke one. A popover
+          is dialog-scale, so the identity takes the ramp's dialog rung
+          (`DialogSectionHeadingTitle`, ####) with the code as its description
+          rather than a hand-picked font weight; the facts are `DetailRow`s, which
+          is what label-beside-value IS everywhere else on this page; and the
+          destructive verb is fenced off by a `Divider` instead of floating after
+          the last fact. Width matches `Peek`'s own content width so every peek in
+          an app is the same object.
+          `labelWidth` is the one override, and it is not arbitrary: a `DetailTable`
+          STACKS its columns below `labelWidth + MIN_CONTROL_WIDTH + 24`, so the
+          page's 150 would flip a 320 popover into stacked form grammar. 88 keeps
+          the summary side-by-side, which is the whole point of a glance. */}
+      <PopoverContent style={{ width: 320 }} disableBodyScroll>
+        <View style={{ gap: 12 }}>
+          <DialogSectionHeadingTitle description={code}>{name}</DialogSectionHeadingTitle>
+          <DetailTable labelWidth={88}>
+            {facts.map((f) => (
+              <DetailRow key={f.label} label={f.label} flat>
+                <InlineStatic value={f.value || "—"} />
+              </DetailRow>
+            ))}
+          </DetailTable>
+          {/* THE FOOTER — destructive LEFT, go-to RIGHT, the kit's convention.
+              Open repeats the verb on the surface deliberately: the popover now
+              covers the button that opened it, and having read the facts, "take me
+              there" is the next move. That is the shape `Peek` prescribes — a
+              summary with one action to the full record. Remove closes the peek
+              first, because the surface it is anchored to is about to stop
+              existing. */}
+          <Divider />
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            {onRemove ? (
+              // No icon: an ✕ beside "Remove" says it twice, and the glyph alone
+              // made this read as the popover's dismiss rather than a decision.
+              <Button title="Remove" color="danger" onPress={() => { setPeekOpen(false); onRemove(); }} />
+            ) : null}
+            <View style={{ flex: 1 }} />
+            <Button title="Open" color="secondary" onPress={() => { setPeekOpen(false); onOpen(); }} />
+          </View>
+        </View>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+/** One stop on a route. `place` + when the movement is expected there; the ROLE
+ *  (origin, via, destination) is DERIVED from position, never stored — a stored
+ *  role lies the moment the list is reordered. */
+interface Stop {
+  id: string;
+  place: string;
+  eta: string | null;
+}
+
+/**
+ * A ROUTE — the kit's `Sequence`, because a route is an ordered list whose ORDER
+ * is the data.
+ *
+ * The three fields this replaces (origin, transfer point, destination) could
+ * not express either thing a route IS: it is ordered, and it has as many stops
+ * as it has. A second transfer had nowhere to go, and three identical grey boxes
+ * said nothing about which came first.
+ *
+ * The kit draws the rail, the reorder/remove controls and the spacing; the
+ * template supplies what a stop CONTAINS and what its position MEANS.
+ */
+function RouteStops({ stops, onChange }: { stops: Stop[]; onChange: (next: Stop[]) => void }) {
+  const patch = (id: string, next: Partial<Stop>) =>
+    onChange(stops.map((s) => (s.id === id ? { ...s, ...next } : s)));
+  const swap = (i: number, j: number) => {
+    const next = [...stops];
+    [next[i], next[j]] = [next[j], next[i]];
+    onChange(next);
+  };
+  return (
+    <View style={{ gap: 6 }}>
+      <Sequence>
+        {stops.map((stop, i) => {
+          // Derived, so a move or an insert relabels its neighbours for free.
+          const role = i === 0 ? "Origin" : i === stops.length - 1 ? "Destination" : "Via";
+          return (
+            <SequenceItem
+              key={stop.id}
+              role={role}
+              accessibilityName={stop.place || role}
+              onMoveUp={() => swap(i, i - 1)}
+              onMoveDown={() => swap(i, i + 1)}
+              // A route needs its two ends; only what is BETWEEN them can go.
+              onRemove={stops.length > 2 ? () => onChange(stops.filter((s) => s.id !== stop.id)) : undefined}
+            >
+              <View style={{ flexGrow: 1, flexBasis: 150, minWidth: 0 }}>
+                <InlineTextInput
+                  value={stop.place}
+                  onSave={(v) => patch(stop.id, { place: v })}
+                  placeholder="Add a place…"
+                  accessibilityLabel={`${role} place`}
+                />
+              </View>
+              <View style={{ width: 130 }}>
+                <InlineDatePicker
+                  value={stop.eta}
+                  onSave={(v) => patch(stop.id, { eta: v })}
+                  onClear={() => patch(stop.id, { eta: null })}
+                  locale="en-US"
+                  placeholder="Expected…"
+                  accessibilityLabel={`${role} expected date`}
+                />
+              </View>
+            </SequenceItem>
+          );
+        })}
+      </Sequence>
+      {/* Indented onto the rail's own column, so the affordance to grow the list
+          sits under the list rather than beside it. */}
+      <View style={{ flexDirection: "row", paddingLeft: SEQUENCE_INSET }}>
+        {/* A stop is added BEFORE the destination — a new leg is always in the
+            middle of a journey; nobody adds one past the end. */}
+        <TextLink
+          size="sm"
+          onPress={() =>
+            onChange([
+              ...stops.slice(0, -1),
+              { id: `st_${stops.length}_${stops[stops.length - 1].id}`, place: "", eta: null },
+              stops[stops.length - 1],
+            ])
+          }
+        >
+          Add stop
+        </TextLink>
+      </View>
+    </View>
+  );
+}
+
+/** A party ROW — a reference when one is attached, the find-or-create picker when
+ *  not. The two states share the row so the field never moves; the picker is the
+ *  field's EMPTY state, not a different kind of surface. */
+function PartyRow({ role, rec, options, placeholder, onPick, onOpen, onRemove }: {
+  role: string;
+  rec: Customer | null;
+  options: PickerOption<string, Customer>[];
+  placeholder: string;
+  onPick: (opt: PickerOption<string, Customer>) => void;
+  onOpen: () => void;
+  onRemove: () => void;
+}) {
+  return (
+    <DetailRow label={role}>
+      {rec ? (
+        <ReferenceValue
+          name={rec.name}
+          code={rec.code}
+          facts={[
+            { label: "Contact", value: rec.contact },
+            { label: "City", value: rec.city },
+            { label: "Tax ID", value: rec.taxId },
+          ]}
+          accessibilityLabel={`${rec.name} — details`}
+          openLabel={`Open ${rec.name}`}
+          onOpen={onOpen}
+          onRemove={onRemove}
+        />
+      ) : (
+        <Combobox options={options} onValueChange={onPick} reflectSelection={false}>
+          <ComboboxInput icon="search" placeholder={placeholder} accessibilityLabel={role} />
+          <ComboboxContent emptyText="No match" />
+        </Combobox>
+      )}
+    </DetailRow>
+  );
+}
+
 export function TplRecord() {
   const id = useRef(1);
   const nextId = (prefix: string) => `${prefix}_${(id.current += 1)}`;
@@ -688,52 +870,6 @@ export function TplRecord() {
   // ── 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);
@@ -743,17 +879,16 @@ export function TplRecord() {
     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}` : ""}` }); } },
+      { text: "Remove", style: "destructive", onPress: () => { setFees((prev) => prev.filter((x) => x.id !== f.id)); setFeeView(null); } },
     ]);
   };
-  // The status column speaks in facts: Paid · Overdue · Due <date> · Unpaid.
+  // 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 }
@@ -778,6 +913,37 @@ export function TplRecord() {
   const [reference, setReference] = useState("");
   const [weight, setWeight] = useState<number | null>(1250);
 
+  // ── TRANSPORT — a DENSE section, faithfully dense on purpose: two groups of
+  // ~10 fields each, mixed editor types, two record references, a derived
+  // warning, and one "Show more" expansion. This is the shape a real operations
+  // record arrives at, and the surface every compaction idea has to be judged
+  // against — measure any change here, not on a four-field group.
+  const [shipTo, setShipTo] = useState<string | null>("cus_03");
+  const [notify, setNotify] = useState<string | null>(null);
+  const [carrier, setCarrier] = useState<string | null>("cus_05");
+  const [docType, setDocType] = useState("original");
+  const [waybill, setWaybill] = useState("WB-4471902");
+  const [orderRef, setOrderRef] = useState("");
+  const [copies, setCopies] = useState<number | null>(3);
+  const [incoterm, setIncoterm] = useState<string | null>("dap");
+  const [chargeTerms, setChargeTerms] = useState("prepaid");
+  const [booking, setBooking] = useState("BK-208814");
+  const [vehicle, setVehicle] = useState("");
+  const [trip, setTrip] = useState("");
+  // A ROUTE IS A SEQUENCE, so it is state shaped like one — not an origin field,
+  // a transfer field and a destination field, which has nowhere to put a SECOND
+  // transfer and cannot say that the stops are ordered.
+  const [stops, setStops] = useState<Stop[]>([
+    { id: "st_1", place: "Rotterdam", eta: "2026-06-18" },
+    { id: "st_2", place: "Antwerp", eta: "2026-06-20" },
+    { id: "st_3", place: "Hamburg", eta: "2026-06-24" },
+  ]);
+  const [dropPoint, setDropPoint] = useState("");
+  const [scheduleNote, setScheduleNote] = useState("delayed");
+  const shipToRec = customers.find((c) => c.id === shipTo) ?? null;
+  const notifyRec = customers.find((c) => c.id === notify) ?? null;
+  const carrierRec = customers.find((c) => c.id === carrier) ?? null;
+
   // ── 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.
@@ -871,10 +1037,8 @@ export function TplRecord() {
   // (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,
+    files,
     docSort,
     (f, key) => (key === "doc" ? f.name.toLowerCase() : key === "size" ? f.sizeKB : f.addedAt),
   );
@@ -1034,7 +1198,6 @@ export function TplRecord() {
     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
@@ -1074,7 +1237,6 @@ export function TplRecord() {
     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);
   };
 
@@ -1149,14 +1311,12 @@ export function TplRecord() {
   const confirmIssue = invoices.find((i) => i.key === confirmIssueKey) ?? null;
   const grandTotal = invoices.reduce((sum, inv) => sum + invoiceTotal(inv), 0);
   const allMissing = invoices.flatMap(missingMethods);
-  const issuedCount = invoices.filter((i) => invoiceStatus(i) === "issued").length;
 
   const issue = (inv: Invoice) => {
     seq.current += 1;
     const ref = `INV-2026-${String(seq.current).padStart(4, "0")}`;
     setInvoices((prev) => prev.map((x) => (x.key === inv.key ? { ...x, ref } : x)));
     setConfirmIssueKey(null);
-    logActivity("credit-card", `Invoice ${ref} issued — ${inv.title}`, { description: formatMoney(invoiceTotal(inv)) });
   };
 
   const printReceipt = () => {
@@ -1190,7 +1350,6 @@ export function TplRecord() {
           : 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);
   // The desk the OPEN dialog is handing to, captured on press. Not re-derived
   // from `stage`: confirming advances the stage while the dialog is still fading
@@ -1198,41 +1357,16 @@ export function TplRecord() {
   const [handoffTo, setHandoffTo] = useState<Desk>("operations");
   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.
+  // Confirm MARKS the handoff — whom, where, the note.
   //
   // It commits what the DIALOG captured (`handoffTo`), never what `stage` implies
   // right now: the dialog is a statement about one handoff, and re-deriving the
   // target at confirm time would give two sources for the same fact.
   const confirmHandoff = () => {
     if (handoffAssignee == null) return;
-    const to = TEAM.find((m) => m.id === handoffAssignee);
     const at = new Date();
-    const deskName = stageOf(handoffTo).label;
-    const siblingCode = `${handoffTo === "operations" ? "OP" : "AC"}-2026-00${(siblingSeq += 1)}`;
-    setSiblings((prev) => [
-      { id: siblingCode, code: siblingCode, deskKey: handoffTo, desk: deskName, 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 ${deskName} — ${to?.name ?? ""}`,
-        description: handoffNote.trim() || undefined,
-        right: <Text size="xs" color="muted">{stamp(at)}</Text>,
-      },
-      ...prev,
-    ]);
-    logActivity("send", `Handed off to ${deskName} — ${to?.name ?? ""}`, { iconColor: colors.blue[500], description: `${siblingCode} created and linked` });
     // The handoff STAMPS the desk it opens — the dialog already asked whom and
     // it is happening now, so the receiving stage's own fields must not come up
     // blank and re-ask. They stay editable there; this is the default, not a lock.
@@ -1252,80 +1386,49 @@ export function TplRecord() {
       {
         text: "Close record",
         onPress: () => {
-          logActivity("circle-check", "Record closed", { iconColor: colors.emerald[500] });
           setStage("closed");
         },
       },
     ]);
   };
-  // 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.
-  //
-  // It undoes exactly ONE step: back to the desk BEFORE the one this handoff
-  // opened, and it clears that desk's custody stamp. Rewinding to the first desk
-  // instead would silently drop the desks in between, and leaving the stamp
-  // behind would leave `stage` and the custody map disagreeing — an unreached
-  // desk still holding a taken-on date and an owner.
-  const recallHandoff = (sb: SiblingRecord) => {
-    const backTo = DESKS[DESKS.findIndex((d) => d.key === sb.deskKey) - 1]?.key ?? "sales";
-    Alert.alert(`Recall the handoff?`, `${sb.code} is withdrawn from ${sb.desk} and the record returns to ${stageOf(backTo).label}. 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);
-          setDeskSince((p) => ({ ...p, [sb.deskKey]: "" }));
-          setDeskOwner((p) => ({ ...p, [sb.deskKey]: null }));
-          setStage(backTo);
-          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).
+  // GENERAL leads the rail — the item's core details (the customer among them,
+  // since a reference is a field); everything after it is supplementary
+  // (discussion, work, documents, money, lifecycle).
   const SECTIONS = [
     { key: "general", label: "General", icon: "file-text" },
-    { key: "comments", label: "Comments", icon: "message-square" },
+    { key: "transport", label: "Transport", icon: "map-pin" },
     { key: "progress", label: "Progress", icon: "git-branch" },
     { 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: "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(["general", "comments", "progress", "documents", "customer", "fees", "billing", "docset", "receipt", "activity", "handoff", "danger"] as const);
+  const nav = useSectionNav(["general", "transport", "progress", "documents", "fees", "billing", "docset", "receipt", "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);
   const [pageWidth, setPageWidth] = useState<number | null>(null);
-  // The rail lives in the page's LEFT GUTTER and an equal spacer balances it on
-  // the right, so the reading column lands dead-centre in the viewport (the docs
-  // layout, where the right-hand TOC is the balancer). The rail only earns its
-  // place once the centred column still has room beside it: 2 × rail + a
-  // readable column — below that it collapses to the pinned bar.
-  const wide = pageWidth != null && pageWidth >= GUTTER * 2 + 560;
+  // THREE COLUMNS: the outline rail in the left gutter, the record, and the
+  // discussion panel in the right. The right gutter used to be empty — reserved
+  // only to centre the column — so the panel costs no width the page did not
+  // already spend. Both only earn their place while a readable column survives
+  // between them; below that they collapse to the pinned bar and its drawer.
+  const wide = pageWidth != null && pageWidth >= GUTTER + PANEL_GUTTER + 560;
+  // Narrow: the discussion is one tap off the same bar the sections are on —
+  // on the RIGHT, opposite the section picker, since it is about the record as a
+  // whole rather than a place in it.
+  const [commentsOpen, setCommentsOpen] = useState(false);
   // The rail floats over its RESERVED gutter rather than sitting in the scroll
   // row, so the ScrollView keeps the FULL page width — wheel anywhere and the
   // record scrolls. (Capping the ScrollView at the column's width instead makes
   // the gutters dead zones.) Mirrors the flex maths the row does below: the
   // group is centred inside the 28px content padding.
-  const groupW = pageWidth == null ? 0 : Math.min(pageWidth - 28 * 2, GUTTER * 2 + CONTENT_MAX);
+  const groupW = pageWidth == null ? 0 : Math.min(pageWidth - 28 * 2, GUTTER + CONTENT_MAX + PANEL_GUTTER);
   const railLeft = pageWidth == null ? 0 : 28 + Math.max(0, (pageWidth - 28 * 2 - groupW) / 2);
+  const panelRight = railLeft;
 
   return (
     // Measure-then-reveal: hidden until the width is known, so the rail/bar
@@ -1345,6 +1448,16 @@ export function TplRecord() {
             icon="list-collapse"
             onPress={() => setSectionsOpen(true)}
           />
+          <View style={{ flex: 1 }} />
+          {/* WHERE it sits carries the meaning: sections on the left (where you
+              ARE), the discussion on the right (what is being SAID) — the same
+              two poles the wide layout puts in its two gutters. */}
+          <IconButton
+            icon="message-square"
+            tooltip="Comments"
+            accessibilityLabel={`Comments (${comments.length})`}
+            onPress={() => setCommentsOpen(true)}
+          />
         </View>
       )}
     <View style={{ flex: 1 }}>
@@ -1354,7 +1467,7 @@ export function TplRecord() {
           and an equal empty gutter that balances it — so the column's centre is
           the window's centre. Both gutters live INSIDE the scroller, so they
           scroll like everything else. */}
-      <View style={{ width: "100%", maxWidth: wide ? GUTTER * 2 + CONTENT_MAX : CONTENT_MAX, alignSelf: "center", flexDirection: "row" }}>
+      <View style={{ width: "100%", maxWidth: wide ? GUTTER + CONTENT_MAX + PANEL_GUTTER : CONTENT_MAX, alignSelf: "center", flexDirection: "row" }}>
       {wide ? <View style={{ width: GUTTER, flexShrink: 0 }} /> : null}
       {booting ? (
         /* first paint — Skeleton MIRRORS the final layout (summary →
@@ -1388,14 +1501,14 @@ export function TplRecord() {
           hairline BETWEEN top-level blocks (a conditional block that renders
           null never leaves a stray divider) */}
       <SectionStack style={{ flex: 1, minWidth: 0 }}>
-        {/* header band — identity · attention · a light summary. No stage chip
+        {/* header band — identity, attention, a light summary. No stage chip
             here (Progress carries the desk and the act), 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"}
+          subtitle={customer ? [customer.name, customer.city].filter(Boolean).join(", ") : "No customer"}
         />
         {/* the record's ATTENTION state, on top — record-scoped, so it reads
             as a Callout here (field-scoped state stays on its field) */}
@@ -1419,7 +1532,7 @@ export function TplRecord() {
             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
+            group's DetailTable repeats the SAME labelWidth, 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")}>
@@ -1429,7 +1542,66 @@ export function TplRecord() {
           </SectionHeading>
           <SubsectionStack>
             <Subsection>
-              <DetailTable labelWidth={150} trailingWidth={88}>
+              <DetailTable labelWidth={150}>
+                {/* A REFERENCE TO ANOTHER RECORD IS A FIELD, NOT A SECTION.
+                    A section is a claim that a distinct AREA of the record lives
+                    here, and it buys an outline-rail entry and a heading; one
+                    pointer to one other row never earns that. The machinery that
+                    tempts you to promote it — a find-or-create search, a create
+                    dialog, a validity warning — is just this field's EMPTY state,
+                    its picker, and its annotation. So it sits among the order's
+                    other core facts, where a reader looks for the bill-to party.
+
+                    The value is a `ReferenceValue` (above): the inline editor's
+                    own resting surface, so the reference sits in the value column
+                    like every editor around it rather than as a card that
+                    outweighs the fields it sits among. Its three verbs are three
+                    targets — press for the facts, the arrow for the record,
+                    Remove in the row's `trailing` where row-level verbs live. */}
+                <DetailRow
+                  label="Customer"
+                  description="The bill-to party — its tax ID gates invoicing below."
+                  warning={customer && !taxIdValid ? "No valid tax ID — invoicing stays blocked until this customer carries one." : undefined}
+                >
+                  {customer ? (
+                    <ReferenceValue
+                      name={customer.name}
+                      code={customer.code}
+                      facts={[
+                        { label: "Tax ID", value: customer.taxId },
+                        { label: "Contact", value: customer.contact },
+                        { label: "City", value: customer.city },
+                      ]}
+                      accessibilityLabel={`${customer.name} — details`}
+                      openLabel="Open customer"
+                      onOpen={() => setCustomerOpen(true)}
+                      onRemove={() => setCustomerId(null)}
+                    />
+                  ) : (
+                    <Combobox
+                      options={customerOptions}
+                      onValueChange={onPickCustomer}
+                      renderOptionContent={(o) => (
+                        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+                          <View style={{ width: 28, height: 28, borderRadius: 7, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" }}>
+                            <Icon name="building-2" size={14} color={colors.zinc[600]} />
+                          </View>
+                          <View style={{ flex: 1, minWidth: 0 }}>
+                            <Text size="sm" numberOfLines={1}>{o.label}</Text>
+                            {o.data ? <Text size="xs" color="muted">{[o.data.city, o.data.taxId ? `Tax ID ${o.data.taxId}` : "No tax ID"].filter(Boolean).join(", ")}</Text> : null}
+                          </View>
+                        </View>
+                      )}
+                      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>
+                  )}
+                </DetailRow>
                 {/* The SAME fact the Sales stage owns in Progress, shown where
                     a reader looks for it first — bound to the one source, never
                     a second copy: two member selects over their own state would
@@ -1460,12 +1632,27 @@ export function TplRecord() {
               <SubsectionHeading>
                 <SubsectionHeadingTitle>Order</SubsectionHeadingTitle>
               </SubsectionHeading>
-              <DetailTable labelWidth={150} trailingWidth={88}>
+              <DetailTable labelWidth={150}>
                 {/* 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" />
+                {/* Copy lives ON the field, not in the row's trailing column: it
+                    acts on THIS value, so it travels with it, and a reader never
+                    has to pair a control at the page's right edge with the field
+                    it belongs to. `InlineButton` + the `actions` slot own the
+                    anatomy that makes a control inside a press target legal. */}
+                <DetailRow label="Reference" description="Printed on every document">
+                  <InlineTextInput
+                    value={reference}
+                    onSave={persist(setReference)}
+                    placeholder="Add buyer's reference…"
+                    accessibilityLabel="Reference"
+                    // UNCONDITIONAL, disabled when there is nothing to copy — a
+                    // verb that appears once the field is non-empty changes the
+                    // field's width as you type, which is the one thing an inline
+                    // editor promises never to do.
+                    actions={<InlineButton title="Copy" accessibilityLabel="Copy reference" disabled={!reference} onPress={() => {}} />}
+                  />
                 </DetailRow>
                 <DetailRow label="Priority">
                   <InlineSelect
@@ -1487,7 +1674,7 @@ export function TplRecord() {
               <SubsectionHeading>
                 <SubsectionHeadingTitle>Fulfilment</SubsectionHeadingTitle>
               </SubsectionHeading>
-              <DetailTable labelWidth={150} trailingWidth={88}>
+              <DetailTable labelWidth={150}>
                 <DetailRow label="Location" description="The site that picks and ships the order">
                   <InlineSelect value={warehouse} onSave={persist(setWarehouse)} options={WAREHOUSES} accessibilityLabel="Location" />
                 </DetailRow>
@@ -1516,15 +1703,15 @@ export function TplRecord() {
             </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
+               , ≤5 exclusive options the user should SEE → RadioPicker
                   (a stacked column of full-width choices)
-                · a longer closed list → InlineSelect (rich options carry a
+               , 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
+               , 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
+               , 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. */}
@@ -1532,19 +1719,25 @@ export function TplRecord() {
               <SubsectionHeading>
                 <SubsectionHeadingTitle>Classification</SubsectionHeadingTitle>
               </SubsectionHeading>
-              <DetailTable labelWidth={150} trailingWidth={88}>
+              <DetailTable labelWidth={150}>
                 <DetailRow label="Service level">
                   <InlineSelect
                     value={serviceLevel}
                     options={SERVICE_LEVELS}
                     onSave={persist(setServiceLevel)}
                     accessibilityLabel="Service level"
+                    /* The gloss belongs to CHOOSING, not to every later read.
+                       Without `renderSelected` a rich option renders the resting
+                       row too, so the field stands two lines tall among
+                       one-line neighbours — row-HEIGHT variation being what
+                       actually reads as clutter on a field grid. */
                     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>
                     )}
+                    renderSelected={(o) => <Text size="sm">{o.label}</Text>}
                   />
                 </DetailRow>
                 <DetailRow label="Fulfilment status">
@@ -1601,6 +1794,7 @@ export function TplRecord() {
                         {o.data ? <Text size="xs" color="muted">{o.data.country}</Text> : null}
                       </View>
                     )}
+                    renderSelected={(o) => <Text size="sm">{o.label}</Text>}
                   />
                 </DetailRow>
                 {/* fields the OUTPUT FORMS read — each description names its
@@ -1625,7 +1819,7 @@ export function TplRecord() {
               <SubsectionHeading>
                 <SubsectionHeadingTitle>System</SubsectionHeadingTitle>
               </SubsectionHeading>
-              <DetailTable labelWidth={150} trailingWidth={88}>
+              <DetailTable labelWidth={150}>
                 <DetailRow label="Record ID">
                   <InlineStatic value={code} tabular />
                 </DetailRow>
@@ -1635,55 +1829,167 @@ export function TplRecord() {
         </Section>
         </View>
 
-        {/* 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")}>
+        {/* TRANSPORT — the DENSE section, and the honest one. Two groups of ~10
+            fields, three record references, mixed editor types, a derived
+            warning, one "Show more".
+
+            It is here UNCOMPACTED on purpose. A real operations record reaches
+            this density — the movement's paperwork, its parties, its route — and
+            every idea for making a record readable has to be judged against a
+            surface like this one, never against a four-field group where
+            everything already fits. Read it as the BEFORE. */}
+        <View onLayout={nav.register("transport")}>
         <Section>
           <SectionHeading>
-            <SectionHeadingTitle description="The record's discussion — every question and decision stays with the order.">Comments</SectionHeadingTitle>
+            <SectionHeadingTitle description="The consignment document, the parties printed on it, the carrier and the route.">Transport</SectionHeadingTitle>
           </SectionHeading>
-          <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 })}
-              />
-            )}
-            /* 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}
-          />
+          <SubsectionStack>
+            {/* The document and the two parties that PRINT on it — they live
+                here, with its numbers and its type, because the document is the
+                only place anyone reads them. */}
+            <Subsection>
+              <SubsectionHeading><SubsectionHeadingTitle>Consignment &amp; terms</SubsectionHeadingTitle></SubsectionHeading>
+              <DetailTable labelWidth={150} minHeight={40}>
+                <PartyRow
+                  role="Ship to" rec={shipToRec} options={customerOptions}
+                  placeholder="Find or create a consignee"
+                  onPick={(o) => setShipTo(o.value)} onOpen={() => {}} onRemove={() => setShipTo(null)}
+                />
+                <PartyRow
+                  role="Notify" rec={notifyRec} options={customerOptions}
+                  placeholder="Find or create a notify party"
+                  onPick={(o) => setNotify(o.value)} onOpen={() => {}} onRemove={() => setNotify(null)}
+                />
+                {/* A CHOICE IS ONE ROW, like every other field.
+                    `RadioPicker` renders three full-width bordered choices with
+                    their glosses — ~170px, four rows' worth of height, for one
+                    field — and that variation in WEIGHT between neighbouring rows
+                    is what makes a field grid read as cluttered, far more than
+                    the number of rows does. Radios earn their place where the
+                    choice IS the task (a wizard step, a short form); in a grid of
+                    nineteen fields they shout over everything around them.
+                    The gloss is not lost — it moves into the option LIST, where
+                    it is needed while CHOOSING rather than on every later read.
+                    That split is what `renderSelected` is for: without it the
+                    resting row falls back to `renderOptionContent` and prints the
+                    gloss on every row, which is the tall row again by another
+                    route. */}
+                <DetailRow label="Document type">
+                  <InlineSelect
+                    value={docType}
+                    onSave={persist(setDocType)}
+                    options={DOC_TYPES}
+                    renderOptionContent={choiceWithHint}
+                    renderSelected={(o) => <Text size="sm">{o.label}</Text>}
+                    accessibilityLabel="Document type"
+                  />
+                </DetailRow>
+                <DetailRow label="Waybill no.">
+                  <InlineTextInput value={waybill} onSave={persist(setWaybill)} placeholder="Add waybill number…" accessibilityLabel="Waybill number" />
+                </DetailRow>
+                <DetailRow label="Order no.">
+                  <InlineTextInput value={orderRef} onSave={persist(setOrderRef)} placeholder="Add order number…" accessibilityLabel="Order number" />
+                </DetailRow>
+                {/* NO DISCLOSURE. A "Show more" here hid three fields — and the
+                    fatal part is that it hid them whether or not they held a
+                    VALUE: a record with 3 original copies reported nothing about
+                    them until you found the link. A field grid's job is to say
+                    what the record IS, so an empty row (this record has no order
+                    number) and a filled one (it has 3 copies) both have to be on
+                    the page. Disclosure is for OTHER SUBJECTS, not for a record's
+                    own fields. */}
+                    <DetailRow label="Original copies" description="Losing an original means an indemnity letter; electronic release = 0">
+                      <InlineNumberInput value={copies} onSave={persist(setCopies)} min={0} placeholder="e.g. 3" accessibilityLabel="Original copies" />
+                    </DetailRow>
+                    <DetailRow label="Delivery terms" description="Where cost and risk pass from seller to buyer">
+                      <InlineSelect value={incoterm} onSave={persist(setIncoterm)} options={DELIVERY_TERMS} placeholder="Choose…" accessibilityLabel="Delivery terms" />
+                    </DetailRow>
+                    {/* SELECT PILLS — the third treatment for a choice, and the
+                        right one at TWO SHORT options: every choice stays visible
+                        and switching is ONE press, where a select costs two (open,
+                        pick) and hides the alternative until you do. It is still
+                        one row, because the pills wrap inside the control band.
+                        The ladder, by option count and label length:
+                          2–3 short, switched often  → `ChipGroup` (here)
+                          more, or long labels       → `InlineSelect` (Document type)
+                          the choice IS the task     → `RadioPicker`, in a form or
+                                                       wizard — never a row in a grid */}
+                    <DetailRow label="Charge terms">
+                      <ChipGroup
+                        accessibilityLabel="Charge terms"
+                        value={chargeTerms}
+                        onValueChange={setChargeTerms}
+                        options={CHARGE_TERMS.map((o) => ({ value: o.value, label: o.label }))}
+                      />
+                    </DetailRow>
+              </DetailTable>
+            </Subsection>
+            {/* The carrier sits WITH its booking — the booking number, the
+                vehicle, the trip and the route below are all its data.
+
+                UNIFORM ROWS, and that is a conclusion, not a default. Two
+                compactions were tried here and both lost to this:
+
+                A read view behind an Edit button dropped its EMPTY fields, which
+                is information loss — an empty row is the difference between "this
+                movement has no vehicle" and "this section has no vehicle field" —
+                and it bought that with a MODE, against the kit's law that the
+                surface IS the editor.
+
+                Grouping correlated fields onto shared rows (route as one row,
+                vehicle + trip as another) cut nine rows to six and read WORSE. A
+                field grid is scanned down its VALUE COLUMN, not by counting rows:
+                three editors of differing widths on one line break the single x
+                every other row shares, so fewer rows carrying more objects each
+                reads busier than more rows that all look alike. Placeholders
+                standing in for the vanished labels finished it — once filled, the
+                row was three boxes with no names.
+
+                Density on a field grid comes from ROW HEIGHT, COLUMN COUNT, and
+                what is lifted into a summary ABOVE it — never from making one row
+                unlike its neighbours. */}
+            <Subsection>
+              <SubsectionHeading><SubsectionHeadingTitle>Carrier &amp; route</SubsectionHeadingTitle></SubsectionHeading>
+              {scheduleNote !== "on-time" ? (
+                <Callout tone="warning">
+                  <CalloutText>The schedule changed ({scheduleNote}). Re-check every cut-off and any document already issued against this movement.</CalloutText>
+                </Callout>
+              ) : null}
+              <DetailTable labelWidth={150} minHeight={40}>
+                <PartyRow
+                  role="Carrier" rec={carrierRec} options={customerOptions}
+                  placeholder="Find or create a carrier"
+                  onPick={(o) => setCarrier(o.value)} onOpen={() => {}} onRemove={() => setCarrier(null)}
+                />
+                <DetailRow label="Booking no.">
+                  <InlineTextInput value={booking} onSave={persist(setBooking)} placeholder="Add booking number…" accessibilityLabel="Booking number" />
+                </DetailRow>
+                <DetailRow label="Vehicle">
+                  <InlineTextInput value={vehicle} onSave={persist(setVehicle)} placeholder="Add vehicle…" accessibilityLabel="Vehicle" />
+                </DetailRow>
+                <DetailRow label="Trip no.">
+                  <InlineTextInput value={trip} onSave={persist(setTrip)} placeholder="Add trip number…" accessibilityLabel="Trip number" />
+                </DetailRow>
+                {/* A ROUTE IS NOT FIELDS — see `RouteStops` above. It lives in
+                    a `DetailRow` so it keeps the section's label column and the
+                    reader's eye stays on one x; what sits in the VALUE is a list,
+                    because that is what a route is. */}
+                <DetailRow label="Route">
+                  <RouteStops stops={stops} onChange={setStops} />
+                </DetailRow>
+                <DetailRow label="Delivery place" description="The final door, when it differs from the arrival point">
+                  <InlineTextInput value={dropPoint} onSave={persist(setDropPoint)} placeholder="Add delivery place…" accessibilityLabel="Delivery place" />
+                </DetailRow>
+                <DetailRow label="Schedule">
+                  <InlineSelect value={scheduleNote} onSave={persist(setScheduleNote)} options={SCHEDULE_STATES} accessibilityLabel="Schedule" />
+                </DetailRow>
+              </DetailTable>
+            </Subsection>
+          </SubsectionStack>
         </Section>
         </View>
 
+
         {/* PROGRESS — the desk handoff, as the ordered positions it is. Sales →
             Operations → Accounting: one desk owns the record at a time, the live
             one carries the act that leaves it, and a passed desk keeps its own
@@ -1719,7 +2025,7 @@ export function TplRecord() {
                           onSave={(v) => setDeskSince((p) => ({ ...p, [d.key]: v ?? "" }))}
                           onClear={() => setDeskSince((p) => ({ ...p, [d.key]: "" }))}
                           placeholder="Not recorded"
-                          accessibilityLabel={`Taken on · ${d.label}`}
+                          accessibilityLabel={`Taken on for ${d.label}`}
                         />
                       </PipelineField>
                       <PipelineField label="Owner" maxWidth={260}>
@@ -1728,7 +2034,7 @@ export function TplRecord() {
                           value={owner}
                           onSave={(v) => setDeskOwner((p) => ({ ...p, [d.key]: v }))}
                           placeholder="Unassigned"
-                          accessibilityLabel={`Owner · ${d.label}`}
+                          accessibilityLabel={`Owner for ${d.label}`}
                         />
                       </PipelineField>
                     </>
@@ -1753,8 +2059,8 @@ export function TplRecord() {
         </Section>
         </View>
 
-        {/* DOCUMENTS — the document desk: the register Table (search · Create
-            documents · Add files) whose selection feeds the Use-AI fork below.
+        {/* DOCUMENTS — the document desk: the register Table (search, Create
+            documents, Add files) whose selection feeds the Use-AI fork below.
             No FileDropTarget of its OWN — the WHOLE-RECORD target above already
             captures a drop/paste here (and everywhere else on the surface); this
             section keeps only its explicit Add-files CTA and the affordance line. */}
@@ -1765,30 +2071,6 @@ export function TplRecord() {
                 stay discoverable even though the drop target is the whole record. */}
             <SectionHeadingTitle description="Drag, paste, or click to add files">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) */}
-            {/* 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. */}
-            <Button
-              title="Add files"
-              color="secondary"
-              onPress={() => {
-                void pickFiles({ accept: "application/pdf,image/*", multiple: true }).then(intakeFiles);
-              }}
-            />
-          </View>
           <Table
             columns={DOC_COLUMNS}
             leading={24}
@@ -1830,85 +2112,24 @@ export function TplRecord() {
               </TableRow>
             ))}
           </Table>
-        </Section>
-        </View>
-
-        {/* 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: the whole box is the keyboard door to the
-                  customer's detail (the a11y contract lives in `LinkedRecordBox`); the verbs
-                  ride inside — destructive Remove LEFT, go-to Open record RIGHT. */}
-              <LinkedRecordBox
-                icon="building-2"
-                name={customer.name}
-                subtitle={customer.code}
-                facts={[
-                  { label: "Tax ID", value: customer.taxId || "—" },
-                  { label: "Contact", value: customer.contact || "—" },
-                  { label: "City", value: customer.city || "—" },
-                ]}
-                doorLabel={`${customer.name} — details`}
-                onOpen={() => setCustomerOpen(true)}
-                actions={
-                  <>
-                    <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 */ }} />
-                  </>
-                }
-              />
-              {/* 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}
-            </View>
-          ) : (
-            <View style={{ gap: 10 }}>
-              <Combobox
-                options={customerOptions}
-                onValueChange={onPickCustomer}
-                renderOptionContent={(o) => (
-                  <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                    <View style={{ width: 28, height: 28, borderRadius: 7, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" }}>
-                      <Icon name="building-2" size={14} color={colors.zinc[600]} />
-                    </View>
-                    <View style={{ flex: 1, minWidth: 0 }}>
-                      <Text size="sm" weight="medium" numberOfLines={1}>{o.label}</Text>
-                      {o.data ? <Text size="xs" color="muted">{[o.data.city, o.data.taxId ? `Tax ID ${o.data.taxId}` : "No tax ID"].filter(Boolean).join(" · ")}</Text> : null}
-                    </View>
-                  </View>
-                )}
-                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>
-          )}
+          {/* the Add, under the register it extends — see the Fees section for
+              why it is not in the heading. 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. */}
+          <View style={{ flexDirection: "row" }}>
+            <Button
+              title="Add files"
+              color="primary"
+              onPress={() => {
+                void pickFiles({ accept: "application/pdf,image/*", multiple: true }).then(intakeFiles);
+              }}
+            />
+          </View>
         </Section>
         </View>
 
         {/* FEES — the DETAILED money ledger, both directions (charge = billed
-            to the customer · cost = paid to a vendor), distinct from Billing's
+            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
@@ -1917,7 +2138,6 @@ export function TplRecord() {
         <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={[
@@ -1944,6 +2164,21 @@ export function TplRecord() {
               })}
             </Table>
           )}
+          {/* THE ADD SITS WHERE ITS RESULT APPEARS — under the last row, on the
+              list's own left edge. In the heading it sat ABOVE the thing it
+              extends and at a different altitude from it, and it competed with
+              the title for the one line that names the section. Secondary and
+              left, and PRIMARY — in the empty state too, which is what makes it
+              consistent. A section's add is the act that section offers, so it
+              carries the section's weight; a lone `secondary` button reads as
+              though the real action were somewhere else. One verb keeps ONE
+              weight either way: the fault to avoid is an add that is primary on
+              an empty list and secondary on a full one. */}
+          {fees.length > 0 ? (
+            <View style={{ flexDirection: "row" }}>
+              <Button title="Add fee" color="primary" onPress={addFee} />
+            </View>
+          ) : null}
         </Section>
         </View>
 
@@ -1972,68 +2207,118 @@ export function TplRecord() {
             </Callout>
           ) : null}
 
-          {/* the section's GROUPS — bands · collect · deposit — divide via the
-              SubsectionStack beat, no hand-rolled gaps */}
+          {/* EVERYTHING VISIBLE, and the chrome is what shrinks.
+              Three attempts landed here. Inline BANDS were "spread" — but the
+              spread was never the data: four charge lines across three invoices
+              is nothing. Each band carried a `SubsectionHeading`, its own
+              callout and its own action row, so the CHROME was three times the
+              content. A register then hid those four lines behind three
+              expansions, which trades a real fault for a worse one: you can no
+              longer see what you are paying for.
+              So the lines all stay, and each invoice costs ONE line of chrome —
+              its name, its total, its act. No heading rung, no band callout, no
+              separate action row. A problem rides the CHARGE ROW that has it
+              (`warning` on the line missing its method), which is both smaller
+              than a callout and more precise than one: it names the offender
+              instead of counting offenders. */}
           <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={setConfirmIssueKey}
-            />
-          ))}
+            {invoices.map((inv) => {
+              const missing = missingMethods(inv);
+              const total = invoiceTotal(inv);
+              const ready = total > 0 && missing.length === 0 && customer !== null && taxIdValid;
+              return (
+                <Subsection key={inv.key}>
+                  {/* the invoice's ONE line of chrome: what it is, what it comes
+                      to, and its reference once issued. No indent under it — the
+                      lead line's weight and its total already mark the group, and
+                      the `SubsectionStack` beat separates one from the next, so an
+                      indent would only push every charge off the page's left edge
+                      for nothing. */}
+                  <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                    <Text size="sm" weight="medium" style={{ flex: 1 }} numberOfLines={1}>{inv.title}</Text>
+                    <Text size="sm" tabular color={total > 0 ? "default" : "muted"}>{total > 0 ? money(total) : "—"}</Text>
+                    {inv.ref ? (
+                      <Link size="xs" onPress={() => {}} accessibilityLabel={`Open invoice ${inv.ref}`}>{inv.ref}</Link>
+                    ) : null}
+                  </View>
+                  <DetailTable labelWidth={150} minValueWidth={320}>
+                    {inv.charges.map((c) => (
+                      <DetailRow
+                        key={c.key}
+                        label={c.label}
+                        warning={c.amount > 0 && !c.method ? "Choose how this was paid" : undefined}
+                      >
+                        <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 4 }}>
+                          <View style={{ flexGrow: 1, flexBasis: 150 }}>
+                            <InlineNumberInput
+                              value={c.amount || null}
+                              onSave={(v) => saveCharge(inv.key, c.key, { amount: v ?? 0 })}
+                              min={0}
+                              format={money}
+                              placeholder="—"
+                              accessibilityLabel={`Amount for ${c.label}`}
+                              /* the list price, one tap, ON the field it fills */
+                              actions={
+                                c.amount <= 0 && c.standard > 0
+                                  ? <InlineButton title={money(c.standard)} accessibilityLabel={`Use the standard ${c.label} price`} onPress={() => saveCharge(inv.key, c.key, { amount: c.standard })} />
+                                  : undefined
+                              }
+                            />
+                          </View>
+                          <View style={{ flexGrow: 1, flexBasis: 140, maxWidth: 160 }}>
+                            <InlineSelect
+                              value={c.method === "" ? null : c.method}
+                              onSave={(m) => saveCharge(inv.key, c.key, { method: m })}
+                              options={METHODS}
+                              placeholder="How paid…"
+                              disabled={c.amount <= 0}
+                              accessibilityLabel={`Payment method for ${c.label}`}
+                            />
+                          </View>
+                        </View>
+                      </DetailRow>
+                    ))}
+                    {/* AFTER the lines it bills — a committing act goes where its
+                        effect lands, which is the end of what it commits, never
+                        above it. On the control column like every other CTA on
+                        the page (the form-action alignment law). */}
+                    <DetailRow label="">
+                      <View style={{ flexDirection: "row" }}>
+                        <Button
+                          title={inv.ref ? "Re-issue" : "Issue invoice"}
+                          color={inv.ref ? "secondary" : "primary"}
+                          disabled={!ready}
+                          onPress={() => setConfirmIssueKey(inv.key)}
+                        />
+                      </View>
+                    </DetailRow>
+                  </DetailTable>
+                </Subsection>
+              );
+            })}
+          </SubsectionStack>
 
-          {/* 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, 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" }])}
+          {/* ONE action row for the section, on the control column. The deposit
+              is a field of the record, not a band of its own — its receipt is a
+              second act on the same row. */}
+          <DetailTable labelWidth={150} minValueWidth={320}>
+            <DetailRow label="Deposit" description="Refundable — never part of the total to collect">
+              <InlineNumberInput
+                value={deposit || null}
+                onSave={persist((v: number | null) => setDeposit(v ?? 0))}
+                min={0}
+                format={money}
+                placeholder="—"
+                accessibilityLabel="Deposit amount"
+                actions={<InlineButton title="Receipt" accessibilityLabel="Deposit receipt" disabled={deposit <= 0} onPress={() => Alert.alert("Deposit receipt", `Printing deposit receipt for ${formatMoney(deposit)}.`, [{ text: "OK" }])} />}
               />
-            </View>
-          </Subsection>
-          </SubsectionStack>
+            </DetailRow>
+            <DetailRow label="">
+              <View style={{ flexDirection: "row" }}>
+                <Button title="Print receipt" color="primary" disabled={grandTotal <= 0} onPress={printReceipt} />
+              </View>
+            </DetailRow>
+          </DetailTable>
         </Section>
         </View>
 
@@ -2144,7 +2429,7 @@ export function TplRecord() {
             })}
             {/* the output config — values printed on every generated form */}
             <Subsection>
-              <DetailTable labelWidth={150} trailingWidth={88}>
+              <DetailTable labelWidth={150}>
                 <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>
@@ -2183,7 +2468,7 @@ export function TplRecord() {
                       <FileRow
                         key={d.id}
                         name={d.name}
-                        meta={`${d.kind} · ${fmtSize(d.sizeKB)}`}
+                        meta={`${d.kind}, ${fmtSize(d.sizeKB)}`}
                         mimeType={d.mimeType}
                         onPress={() => openPreview(docSet, di)}
                         trailing={
@@ -2225,7 +2510,7 @@ export function TplRecord() {
           <SectionHeading>
             <SectionHeadingTitle description="Issued on handover — record the delivery facts, generate the receipt.">Delivery receipt</SectionHeadingTitle>
           </SectionHeading>
-          <DetailTable labelWidth={150} trailingWidth={88}>
+          <DetailTable labelWidth={150}>
             <DetailRow label="Received">
               <InlineDatePicker value={rcptDate} onSave={persist(setRcptDate)} locale="en-US" accessibilityLabel="Received date" />
             </DetailRow>
@@ -2259,7 +2544,7 @@ export function TplRecord() {
                 {rcptDoc ? (
                   <FileRow
                     name={rcptDoc.name}
-                    meta={`${rcptDoc.kind} · ${fmtSize(rcptDoc.sizeKB)}`}
+                    meta={`${rcptDoc.kind}, ${fmtSize(rcptDoc.sizeKB)}`}
                     mimeType={rcptDoc.mimeType}
                     onPress={() => openPreview([rcptDoc], 0)}
                     trailing={
@@ -2279,70 +2564,6 @@ export function TplRecord() {
         </Section>
         </View>
 
-        {/* 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) => (
-                <LinkedRecordBox
-                  key={sb.id}
-                  icon="file-text"
-                  name={sb.code}
-                  subtitle={`${sb.desk} record`}
-                  facts={[
-                    { label: "Assignee", value: sb.assignee || "—" },
-                    { label: "Created", value: sb.at },
-                    { label: "Note", value: sb.note || "—" },
-                  ]}
-                  doorLabel={`${sb.code} — details`}
-                  onOpen={() => setSiblingOpen(sb.id)}
-                  actions={
-                    <>
-                      <View style={{ flex: 1 }} />
-                      <Button title="Open record" color="secondary" onPress={() => { /* a real app navigates to the sibling's page */ }} />
-                    </>
-                  }
-                />
-              ))}
-            </View>
-          ) : null}
-          {handoffs.length > 0 ? <Timeline items={handoffs} /> : null}
-          {/* Nothing handed off YET is a real state, not an absent section — and
-              its empty state carries NO action: the act lives on the live stage
-              in Progress, so a CTA here would be the second copy this section
-              exists to avoid. */}
-          {siblings.length === 0 && handoffs.length === 0 ? (
-            <EmptyState icon="send" message="Not handed off yet" hint={`${stageOf(stage).label} still holds this record — hand it off from Progress above.`} />
-          ) : null}
-          {/* No CTA here. The act that leaves a desk belongs ON that desk — it
-              rides the live stage in the Progress pipeline. This section is the
-              RESULT: what the handoff created and when. A second button here
-              would offer the same act twice, in the place with less context. */}
-        </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 */}
@@ -2396,7 +2617,7 @@ export function TplRecord() {
         {/* 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}>
+          <DetailTable labelWidth={150}>
             <DetailRow label="Customer name">
               <InlineTextInput
                 value={custDraft?.name ?? ""}
@@ -2410,19 +2631,15 @@ export function TplRecord() {
             </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"
-                  color="secondary"
-                  loading={fetching}
-                  disabled={!TAX_ID_RE.test((custDraft?.taxId ?? "").trim())}
-                  onPress={fetchIntoDraft}
-                />
-              }
-            >
+            <DetailRow label="Tax ID" error={taxIdError}>
+              {/* Fetch is NOT a verb about this value — it reads the tax ID and
+                  fills the contact and city BELOW it, so it belongs to the form,
+                  not to the field (which is why it isn't an `InlineButton` in
+                  `actions`). It composes into a row inside this value cell, so
+                  it costs the one row that wants it instead of a column every
+                  row would reserve. */}
+              <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flex: 1 }}>
+              <View style={{ flex: 1, minWidth: 0 }}>
               <InlineTextInput
                 value={custDraft?.taxId ?? ""}
                 onSave={(v) => {
@@ -2432,6 +2649,15 @@ export function TplRecord() {
                 placeholder="Add tax ID…"
                 accessibilityLabel="Tax ID"
               />
+              </View>
+              <Button
+                title="Fetch"
+                color="secondary"
+                loading={fetching}
+                disabled={!TAX_ID_RE.test((custDraft?.taxId ?? "").trim())}
+                onPress={fetchIntoDraft}
+              />
+              </View>
             </DetailRow>
             <DetailRow label="Contact">
               <InlineTextInput
@@ -2503,7 +2729,7 @@ export function TplRecord() {
               <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">
+              <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" }]}
@@ -2573,35 +2799,6 @@ export function TplRecord() {
         </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.
-              Offered ONLY on the handoff that put the record where it is. A
-              superseded one cannot be undone in place: withdrawing the middle
-              step would leave the record behind a sibling that still exists, so
-              `stage` and the linked records would disagree. Walk it back one
-              handoff at a time. */}
-          {openSibling && openSibling.deskKey === stage ? <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(""); } }}>
@@ -2621,13 +2818,58 @@ export function TplRecord() {
           <Button title={`Hand off to ${stageOf(handoffTo).label}`} 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}
+      {/* Reserves the discussion panel's column — the panel itself floats over
+          it, like the rail on the left, so the scroller keeps the full page. */}
+      {wide ? <View style={{ width: PANEL_GUTTER, flexShrink: 0 }} /> : null}
       </View>
     </ScrollView>
 
+    {/* Narrow: the same thread, in the panel shape a small screen has — a
+        right-docked Drawer off the bar's own comments control. */}
+    <Drawer open={commentsOpen} onOpenChange={setCommentsOpen} title="Comments" width={380}>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 20, gap: 12 }}>
+        <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 })}
+            />
+          )}
+          /* 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" })}`; }}
+        />
+        
+      </ScrollView>
+      <View style={{ padding: 20, paddingTop: 0 }}>
+{/* 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}
+        />
+      </View>
+    </Drawer>
+
     {/* ── the document desk's overlays */}
     <FloatingActionBar count={sel.count} label={sel.count === 1 ? "file selected" : "files selected"} onClear={sel.clear}>
       <Button title="Remove" color="danger-secondary" icon="trash" onPress={removeSelected} />
@@ -2641,7 +2883,7 @@ export function TplRecord() {
     <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>
+        <DialogHeaderTitle>{task === "extract" ? "Extract data" : task === "check" ? "Cross-check" : `Use AI (${picked.length} ${picked.length === 1 ? "file" : "files"})`}</DialogHeaderTitle>
       </DialogHeader>
       {phase === "running" ? (
         // The streaming feed gets its OWN scroller: FollowScroll (the chat list's
@@ -2704,7 +2946,7 @@ export function TplRecord() {
             <View style={{ gap: 8 }}>
               <ChangeReviewHeader />
               {/* ONE section for the RECORD — ChangeFields stacks a ChangeField
-                  per proposed value: label · the − band when replacing · the
+                  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">
@@ -2797,8 +3039,8 @@ export function TplRecord() {
             <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. */}
+                  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}
@@ -2892,6 +3134,72 @@ export function TplRecord() {
       />
     ) : null}
 
+    {/* THE DISCUSSION PANEL — pinned in the right gutter, mirroring the rail.
+        It is not a Section and has no place in the rail, because it is not a
+        PART of the record: it is about all of it. A thread parked at one
+        position in a top-to-bottom read is unreachable from every other, which
+        is exactly when a coworker's note matters — so it stays on screen while
+        you work anywhere on the page.
+
+        It floats over its reserved column rather than sitting in the scroll row,
+        for the same reason the rail does: the ScrollView keeps the full page
+        width, so the wheel scrolls the record from anywhere. Its own overflow is
+        the panel's, so a long thread scrolls inside itself and never lengthens
+        the record. */}
+    {pageWidth == null || !wide ? null : (
+      <View style={{ position: "absolute", top: 28, right: panelRight, bottom: 28, width: PANEL_W, gap: 10 }}>
+        {/* The panel is a PEER of the sections beside it, not a widget, so its
+            title takes the ramp's section rung rather than a hand-picked size —
+            and it takes the WHOLE construct. `SectionHeadingTitle` carries
+            `flex: 1` so it can push meta to a heading row's right edge; dropped
+            straight into this column it grows VERTICALLY instead and starves the
+            thread beneath it. The row wrapper is what makes that flex mean what
+            it was written to mean. */}
+        <SectionHeading>
+          <SectionHeadingTitle>Comments</SectionHeadingTitle>
+        </SectionHeading>
+        <ScrollView style={{ flex: 1 }} contentContainerStyle={{ gap: 12, paddingBottom: 8 }}>
+        <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 })}
+            />
+          )}
+          /* 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" })}`; }}
+        />
+        
+        </ScrollView>
+{/* 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}
+        />
+      </View>
+    )}
+
     {/* 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. */}